/* Created: 21:29 22-Sep-2026 */
/* Updated: 21:52 22-Sep-2026 — Sumit 21:41 round: JCI lockup, no frosting on the video, button zoom not roll, team hover, footer directions, one radius scale */
/* Updated: 00:03 23-Sep-2026 — one header, one footer, one radius scale on EVERY page (Sumit 23-Sep) */
/* BAYTI homepage DESIGN pass (Sumit 22-Sep 21:26: "not that much impactful ... the Bayti colour
   could have been on the checkboxes ... FAQ ... MYHOME ... no background motion").
   Homepage only (EN + AR), loaded after motion-home.css. Look, not layout: same sections, same
   words, same photos. Brand teal #24bbbb / deep #1a9a9a and the purple #534fa0 carry it.
   Ambient background motion is slow (24-40s), low contrast, and stops under reduced motion. */

:root{--d-teal:#24bbbb;--d-teal-deep:#1a9a9a;--d-purple:#534fa0;
  --d-grad:linear-gradient(135deg,var(--d-teal) 0%,var(--d-teal-deep) 55%,var(--d-purple) 140%);
  /* ONE radius scale (Sumit 21:41: the stat cards, the logo strip and the header bar all
     had different corners). Chips 12, everything card-or-panel 16, the hero 24. Nothing else:
     a panel beside a card with 20 against 16 is exactly the mismatch he spotted. */
  --d-r-chip:12px;--d-r-card:16px;--d-r-panel:16px;--d-r-hero:24px}
.stat,.svc-card,.value-card,.whyb-item,.faq-item,.rev-card,.os-card,.team-card{border-radius:var(--d-r-card)}
.btn,.btn-bg,.jci-since,.whyb-ic,.value-letter,.arrow-chip{border-radius:var(--d-r-chip)}
.arrow-chip{border-radius:99px}  /* a round chip stays round */

/* ---------------------------------------------------------------- ambient background
   Two very soft brand-coloured glows drift behind three sections, plus a faint dot grid.
   6-8% alpha: it reads as depth, not decoration, and text contrast is untouched. */
.services,.aboutc,.whyb{position:relative;isolation:isolate;overflow:clip}  /* clip, not hidden: sticky children keep working */
.services::before,.aboutc::before,.whyb::before{content:"";position:absolute;inset:0;z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(42vw 42vw at 10% 4%,rgb(36 187 187 / .14),transparent 62%),
    radial-gradient(34vw 34vw at 92% 88%,rgb(83 79 160 / .12),transparent 64%);
  animation:d-drift 38s ease-in-out infinite alternate}
/* each section mixes the two brand colours differently, so scrolling never repeats a picture */
.aboutc::before{background:
  radial-gradient(40vw 40vw at 88% 6%,rgb(83 79 160 / .13),transparent 62%),
  radial-gradient(34vw 34vw at 6% 84%,rgb(36 187 187 / .13),transparent 62%);
  animation-duration:46s}
.whyb::before{background:
  radial-gradient(70vw 34vw at 50% -6%,rgb(36 187 187 / .16),transparent 68%),
  radial-gradient(30vw 30vw at 4% 96%,rgb(83 79 160 / .10),transparent 64%);
  animation-duration:52s}
.services::after,.whyb::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(rgb(22 38 46 / .07) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 75%);
          mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 75%)}
@keyframes d-drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.06)}}

/* ---------------------------------------------------------------- stats: brand numbers */
.stat .h3{background:var(--d-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* the four cards used four unrelated colours (teal, purple, blue, amber) from the old circle
   palette. One brand gradient across all four, so the row reads as one thing (Sumit 21:41). */
.stat::before,.stat:nth-child(2)::before,.stat:nth-child(3)::before,.stat:nth-child(4)::before{
  height:4px;background:var(--d-grad)}
.stat{transition:transform .35s var(--ease-circ),box-shadow .35s var(--ease-circ)}
@media (hover:hover){.stat:hover{transform:translateY(-3px);box-shadow:0 16px 34px -24px rgb(9 30 38 / .5)}}

/* ---------------------------------------------------------------- JCI: a badge, not a line
   Sumit: the seal flashed once and went back to being flat. Now it sits in a brand ring that
   turns slowly (ambient, 22s), on its own panel, with "since 2017" as a teal chip. */
/* Sumit 22:26: the white card floated on a near-white page and looked pasted in. The card is
   gone. The strip now belongs to the section: the same brand wash and dot grid as its
   neighbours, hairlines running out to both edges, and the two marks on matching plates so the
   pair reads as one designed lockup rather than a logo dropped onto a box. */
.jci{position:relative;isolation:isolate;overflow:clip;padding-block:var(--sec-xs) var(--sec-s)}
.jci::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(60vw 26vw at 50% 50%,rgb(36 187 187 / .13),transparent 70%),
             radial-gradient(26vw 26vw at 8% 120%,rgb(83 79 160 / .10),transparent 66%);
  animation:d-drift 44s ease-in-out infinite alternate}
.jci::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(rgb(22 38 46 / .06) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 50%,#000,transparent 72%);
          mask-image:radial-gradient(60% 70% at 50% 50%,#000,transparent 72%)}
.jci-inner{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,28px);
  flex-wrap:wrap;background:none;border:0;box-shadow:none;padding:0;width:auto;max-width:var(--content);
  position:relative}
/* the hairlines that carry the lockup across the page */
.jci-inner::before,.jci-inner::after{content:"";flex:1 1 60px;height:1px;min-width:24px;
  background:linear-gradient(90deg,transparent,rgb(36 187 187 / .45));translate:none;animation:none}
.jci-inner::after{background:linear-gradient(270deg,transparent,rgb(36 187 187 / .45))}
.jci-marks{display:flex;align-items:stretch;justify-content:center;gap:clamp(12px,1.6vw,20px);flex-wrap:wrap}
/* one plate shape for both marks: same height, same radius, same hairline */
.jci-brand,.jci-mark{height:clamp(72px,7.6vw,104px);width:auto;padding:12px 18px;border-radius:var(--d-r-card);
  background:rgb(255 255 255 / .82);border:1px solid rgb(36 187 187 / .22);
  box-shadow:0 10px 26px -22px rgb(9 30 38 / .5);object-fit:contain;
  transition:transform .35s var(--ease-circ),box-shadow .35s var(--ease-circ),border-color .35s var(--ease-circ)}
@media (hover:hover){.jci-brand:hover,.jci-mark:hover{transform:translateY(-3px);
  border-color:rgb(36 187 187 / .45);box-shadow:0 18px 34px -24px rgb(26 154 154 / .75)}}
.jci-div{display:none}
.jci-line{margin:0;display:flex;align-items:center}
.jci-since{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 14px;border-radius:99px;background:rgb(36 187 187 / .14);color:var(--d-teal-deep);
  border:1px solid rgb(36 187 187 / .22)}
@media (max-width:767px){
  .jci-inner::before,.jci-inner::after{flex-basis:0;min-width:0;display:none}
  .jci-brand,.jci-mark{height:clamp(64px,17vw,84px);padding:10px 14px}
}

/* ---------------------------------------------------------------- services: a stronger card */
.svc-card{border-radius:16px;overflow:hidden}
.svc-card .img-wrap::after{content:"";position:absolute;inset:0;opacity:0;
  /* Sumit 22:31: too much green over the photo. Two veils were stacking - the site's own
     .img-overlay (55%) and this one. Mine is now a light wash at the foot of the photo only,
     and the old overlay is held right down, so the picture stays the picture. */
  background:linear-gradient(180deg,transparent 52%,rgb(26 154 154 / .30) 100%);
  transition:opacity .35s var(--ease-circ)}
.svc-body{position:relative}
.svc-body::after{content:"";position:absolute;inset-inline:24px;top:0;height:2px;border-radius:2px;
  background:var(--d-grad);scale:0 1;transform-origin:left center;
  transition:scale .4s var(--ease-circ)}
[dir="rtl"] .svc-body::after{transform-origin:right center}
/* the hover clip sits over the photo and fades in once it is playing */
.svc-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .45s var(--ease-circ);pointer-events:none;z-index:1}
.svc-card.is-filming .svc-vid{opacity:1}
.svc-card.is-filming .img-wrap>img{transform:scale(1.02)}   /* the photo stops competing */
@media (hover:hover){
  .svc-card:hover .img-wrap::after{opacity:1}
  .svc-card.card-hover:hover .img-overlay{opacity:.16}
  .svc-card:hover .svc-body::after{scale:1 1}
  .svc-card:hover{border-color:rgb(36 187 187 / .45);box-shadow:0 22px 48px -26px rgb(26 154 154 / .55)}
  .svc-card:hover .arrow-chip{background:var(--d-teal);color:#fff}
}

/* ---------------------------------------------------------------- Core Values: MY HOME
   Sumit: "the MYHOME part is still the same". The initial is now the card's own watermark,
   the tile carries the brand gradient, and the card lifts into a teal frame on hover. */
.values-grid{gap:20px}
.value-card{position:relative;overflow:hidden;border-radius:18px;
  transition:transform .35s var(--ease-circ),box-shadow .35s var(--ease-circ),border-color .35s var(--ease-circ)}
.value-card::before{content:attr(data-letter);position:absolute;inset-inline-end:-.12em;bottom:-.34em;
  font-size:170px;font-weight:800;line-height:.8;letter-spacing:-.04em;pointer-events:none;
  background:var(--d-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.10;transition:opacity .45s var(--ease-circ),transform .6s var(--ease-circ)}
.value-card>div{position:relative;z-index:1}
.value-letter{background:var(--d-grad);box-shadow:0 10px 22px -12px rgb(26 154 154 / .9);
  border-radius:14px;position:relative;z-index:1}
@media (hover:hover){
  .value-card:hover{transform:translateY(-4px);border-color:rgb(36 187 187 / .45);
    box-shadow:0 24px 46px -30px rgb(26 154 154 / .75)}
  .value-card:hover::before{opacity:.18;transform:translateY(-6px)}
}
.values-head{display:flex;align-items:center;gap:12px}
.values-head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgb(36 187 187 / .45),transparent)}
[dir="rtl"] .values-head::after{background:linear-gradient(270deg,rgb(36 187 187 / .45),transparent)}

/* ---------------------------------------------------------------- FAQ: cards, not table rows */
.faq-list{border-bottom:0;display:grid;gap:12px}
.faq-item{border-top:0;border:1px solid var(--border-faint);border-radius:16px;background:rgb(255 255 255 / .75);
  transition:border-color .3s var(--ease-circ),background-color .3s var(--ease-circ),box-shadow .3s var(--ease-circ)}
.faq-q{padding:20px 22px;gap:16px}
.faq-a p{padding:0 22px 20px}
@media (hover:hover){.faq-item:hover{border-color:rgb(36 187 187 / .4);background:#fff}}
.faq-item.is-open{border-color:rgb(36 187 187 / .5);background:#fff;
  box-shadow:0 20px 44px -34px rgb(26 154 154 / .8)}
.faq-item.is-open .faq-q{color:var(--d-teal-deep)}
/* the +/- becomes a filled brand disc that turns */
.faq-icon{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:rgb(36 187 187 / .12);
  transition:background-color .3s var(--ease-circ),transform .35s var(--ease-circ)}
.faq-icon::before,.faq-icon::after{left:8px;top:15px;width:16px;background:var(--d-teal-deep)}
.faq-item.is-open .faq-icon{background:var(--d-grad);transform:rotate(180deg)}
.faq-item.is-open .faq-icon::before,.faq-item.is-open .faq-icon::after{background:#fff}

/* Why Bayti now has ONE design for every page, in css/base.css (23-Sep rail) */

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .services::before,.aboutc::before,.whyb::before,.jci-coin{animation:none}
}

/* header, buttons and the footer hairline moved to css/sections-a.css + sections-c.css
   on 23-Sep: Sumit asked for one header and one footer on EVERY page, not just the home. */
/* ---------------------------------------------------------------- hero: a card, not a slab */
.hero{border-end-start-radius:40px;border-end-end-radius:40px;overflow:hidden}
@media (max-width:640px){.hero{border-end-start-radius:24px;border-end-end-radius:24px}}

/* ---------------------------------------------------------------- section headings */
.services .section-head h2,.testi h2,.team h2,.aboutc h2,.faq-left h2,.whyb h2{position:relative;
  padding-top:18px}
.services .section-head h2::before,.testi h2::before,.team h2::before,.aboutc h2::before,
.faq-left h2::before,.whyb h2::before{content:"";position:absolute;top:0;inset-inline-start:0;
  width:56px;height:4px;border-radius:4px;background:var(--d-grad)}

/* ---------------------------------------------------------------- team: portraits wake up */
@media (hover:hover){
  .team-card:hover img{filter:none}
  .team-card:hover{border-color:rgb(36 187 187 / .45);box-shadow:0 24px 46px -30px rgb(26 154 154 / .75)}
}

/* ---------------------------------------------------------------- reviews: brand quote mark */
.testi .rev-strip{padding:8px 14px;border-radius:99px;background:rgb(36 187 187 / .08);
  border:1px solid rgb(36 187 187 / .18);width:fit-content}

@media (prefers-reduced-motion:reduce){
  .nav .btn-primary::after,.hero .btn-primary::after{animation:none;opacity:0}
}

/* ---------------------------------------------------------------- reviews, insurers, footer */
.rev-card{border-radius:16px;transition:transform .35s var(--ease-circ),box-shadow .35s var(--ease-circ),border-color .35s var(--ease-circ)}
@media (hover:hover){.rev-card:hover{transform:translateY(-3px);border-color:rgb(36 187 187 / .35);
  box-shadow:0 22px 44px -32px rgb(26 154 154 / .75)}}
.insurers .marquee-group img,.os-media img{transition:filter .4s var(--ease-circ),transform .4s var(--ease-circ)}
@media (hover:hover){.insurers .marquee-group img:hover{filter:none;transform:scale(1.08)}}

/* ---------------------------------------------------------------- the accreditation ribbon floats
   The hero is a rounded card now, so the accreditation strip rides up over its bottom edge on a
   frosted panel: the licences are the first thing after the hero instead of a grey band edge. */
.trust{padding-top:var(--sec-xs);position:relative;z-index:3}
/* Sumit 21:41: the frosted panel sat over the video and spoiled the shot. The strip now sits
   BELOW the hero as a clean white card - same corners as the cards under it. */
.trust .marquee{background:#fff;border:1px solid rgb(36 187 187 / .18);border-radius:var(--d-r-panel);
  box-shadow:0 18px 40px -34px rgb(9 30 38 / .55);padding:18px 0;max-width:var(--content);margin:0 auto}
.marquee-group img{opacity:.74}
@media (max-width:640px){.trust .marquee{margin-inline:16px}}

/* ---------------------------------------------------------------- team: portraits zoom
   Sumit 21:41: "there's no hover effect on the team members". There was none because the
   homepage slider uses .team-slide (the /the-team/ page uses .team-card), and the earlier
   rule named the wrong one. Now: the portrait zooms, colour comes back, the card lifts. */
.team-slide{border-radius:var(--d-r-card);overflow:hidden;
  transition:transform .35s var(--ease-circ),box-shadow .35s var(--ease-circ)}
.team-slide-media{overflow:hidden;border-radius:var(--d-r-card)}
.team-slide img{filter:saturate(.72) contrast(1.02);
  transition:filter .5s var(--ease-circ),transform .6s var(--ease-circ)}
@media (hover:hover){
  .team-slide:hover img{transform:scale(1.07);filter:none}
  .team-slide:hover{transform:translateY(-4px);box-shadow:0 24px 46px -30px rgb(26 154 154 / .7)}
}

/* ---------------------------------------------------------------- header: panel corners */
.hero{border-end-start-radius:var(--d-r-hero);border-end-end-radius:var(--d-r-hero)}

/* ---------------------------------------------------------------- hero: sharp video
   Sumit 21:55: the frosted band eats half the film's height. That band is the Theme-2
   "progressive blur stack" (.pblur, nine stacked backdrop-blur panels over the bottom 45%),
   not something this design pass added. It goes. In its place: a clean brand gradient that
   only darkens - the video stays sharp all the way down - plus a soft brand glow behind the
   words, so the headline keeps its contrast without blurring the picture. */
.hero .pblur{display:none}
/* Sumit 22:03: the first replacement put a soft radial patch behind the words and its edge
   showed as a band in his screenshot. Gone. What is left are gradients that span the WHOLE
   hero - edge to edge, top to bottom - so there is no boundary anywhere to see, and the film
   stays sharp. Alphas stay low so the picture keeps its own colour. */
.hero .overlay-hero{background:
  linear-gradient(90deg,rgb(9 30 38 / .46) 0%,rgb(9 30 38 / .22) 38%,rgb(9 30 38 / 0) 72%),
  linear-gradient(180deg,rgb(22 38 46 / .34) 0%,rgb(22 38 46 / .04) 34%,rgb(9 30 38 / .34) 72%,rgb(9 30 38 / .72) 100%),
  linear-gradient(118deg,rgb(83 79 160 / .16) 0%,rgb(36 187 187 / .10) 46%,rgb(36 187 187 / .26) 100%)}
[dir="rtl"] .hero .overlay-hero{background:
  linear-gradient(270deg,rgb(9 30 38 / .46) 0%,rgb(9 30 38 / .22) 38%,rgb(9 30 38 / 0) 72%),
  linear-gradient(180deg,rgb(22 38 46 / .34) 0%,rgb(22 38 46 / .04) 34%,rgb(9 30 38 / .34) 72%,rgb(9 30 38 / .72) 100%),
  linear-gradient(242deg,rgb(83 79 160 / .16) 0%,rgb(36 187 187 / .10) 46%,rgb(36 187 187 / .26) 100%)}

/* ---------------------------------------------------------------- team: no box, a brand glow
   Sumit 21:55: the lifting white box clipped the names and had no side margin. The card is a
   card again; on hover a Bayti-teal wash appears BEHIND it and the portrait zooms. */
.team-slide{overflow:visible;border-radius:0;transform:none;box-shadow:none;position:relative;isolation:isolate}
/* the track scrolls horizontally, so it clips anything outside it: the wash used to lose its
   top corners against that edge (Sumit 22:08). The track now carries the room, and the wash,
   the photo and the card all share ONE radius. */
.team-track{padding-block:18px 20px}
.team-slide-media{border-radius:var(--d-r-card)}
.team-slide::before{content:"";position:absolute;z-index:-1;inset:-14px -12px -14px;border-radius:var(--d-r-card);
  background:linear-gradient(180deg,rgb(36 187 187 / .16),rgb(83 79 160 / .12));
  opacity:0;transition:opacity .35s var(--ease-circ)}
@media (hover:hover){
  .team-slide:hover{transform:none;box-shadow:none}
  .team-slide:hover::before{opacity:1}
  .team-slide:hover img{transform:scale(1.07);filter:none}
}

/* ---------------------------------------------------------------- MY HOME, spelled by scroll
   A sticky row above the Core Values. Its letters are the cards' own initials; they light one
   by one as the section passes, and each card lights with its letter. Decorative only. */
.values{position:relative}
.mh-word{position:sticky;top:96px;z-index:2;display:flex;align-items:center;justify-content:center;
  gap:clamp(6px,1vw,14px);margin:0 0 28px;pointer-events:none;user-select:none}
.mh-word-gap{width:clamp(14px,3vw,38px)}
.mh-word-l{display:grid;place-items:center;width:clamp(38px,5.2vw,66px);height:clamp(38px,5.2vw,66px);
  border-radius:var(--d-r-chip);font-weight:800;font-size:clamp(18px,2.4vw,30px);line-height:1;
  color:rgb(22 38 46 / .28);background:rgb(22 38 46 / .05);border:1px solid rgb(22 38 46 / .06);
  transition:color .4s var(--mh-ease),background-color .5s var(--mh-ease),
             box-shadow .5s var(--mh-ease),scale .45s cubic-bezier(.3,1.6,.5,1),opacity .4s}
.mh-word-l.is-lit{color:#fff;background:var(--d-grad);border-color:transparent;scale:1.06;
  box-shadow:0 14px 28px -16px rgb(26 154 154 / .95)}
.mh-word.is-done .mh-word-l{scale:1}
.mh-word{transition:opacity .5s var(--mh-ease)}
.mh-word.is-past{opacity:0}
/* phones: a sticky row would sit on top of the cards, so it simply leads the section there */
@media (max-width:767px){.mh-word{position:static}}
/* the card whose letter has landed */
.value-card.is-lit{border-color:rgb(36 187 187 / .4);box-shadow:0 18px 38px -30px rgb(26 154 154 / .8)}
.value-card.is-lit::before{opacity:.16}
@media (max-width:640px){.mh-word{top:80px;margin-bottom:20px}}
@media (prefers-reduced-motion:reduce){.mh-word{display:none}}

/* Phones do the same work on a much smaller processor, so the ambient drift holds still there
   (the gradients stay, they just do not move) and the heavy shadows on cards are lightened.
   Measured: it is the difference between a smooth scroll and a stuttering one on a mid phone. */
@media (max-width:767px){
  .services::before,.aboutc::before,.whyb::before,.jci::before{animation:none}
  .jci-inner::after,.nav .btn-primary::after,.hero .btn-primary::after{animation:none;opacity:0}
  /* backdrop-filter repaints the area behind the bar on every scroll frame - the single most
     expensive thing we ask of a phone GPU here. The bar keeps its look with a solid fill. */
  .nav-sticky .nav-base{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(255 255 255 / .96)}
  .services::after,.whyb::after,.jci::after{display:none}   /* dot grids: masked layers, invisible at this size anyway */
}

/* Off-screen sections are not styled or laid out until they are near the viewport. The
   contain-intrinsic-size keeps the scrollbar honest so nothing jumps. */
.testi,.team,.faq,.insurers,.whyb{content-visibility:auto;contain-intrinsic-size:auto 600px}