/* ============================================================
   Balaji Mart — v5
   A faithful build of the supplied template.
   Brand: Red #D81824 · Navy #323C8D
   ============================================================ */

:root{
  --red:#D81824;
  --red-dark:#B3141E;
  --red-soft:#FDEDEE;
  /* sampled from the logo itself: #323C8D is 66% of every blue pixel in
     logo-balaji-mart.png, and the same value in the .webp, icon-512 and the
     apple-touch icon. The site had drifted to #323C8D. */
  --blue:#323C8D;           /* footer / CTA band - the logo's own blue */
  --blue-dark:#272F6E;
  --navy:#16215C;           /* headings */
  --ink:#1F2433;
  --body:#6B7280;
  --muted:#9AA0AE;
  --line:#E7E9EF;
  --line-2:#F1F3F7;
  --paper:#FFFFFF;
  --paper-2:#F7F8FB;
  --gold:#F5A623;

  --f:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-hi:"Noto Sans Devanagari",var(--f);

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --sh-1:0 1px 3px rgba(22,33,92,.06);
  --sh-2:0 6px 22px rgba(22,33,92,.09);
  --sh-3:0 18px 50px rgba(22,33,92,.14);

  --wrap:1200px;
  --gut:clamp(16px,3.5vw,40px);
  --sec-y:clamp(34px,3.6vw,52px);
  --e:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px;overflow-x:clip}
body{
  font-family:var(--f);font-size:15px;line-height:1.7;color:var(--body);
  background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
h1,h2,h3,h4,h5{font-family:var(--f);color:var(--navy);line-height:1.25;font-weight:600}
.hi{font-family:var(--f-hi)}

.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.sec{padding-block:var(--sec-y)}

/* section eyebrow + heading, centred */
.eyebrow{
  display:block;text-align:center;color:var(--red);
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;
}
.eyebrow--left{text-align:left}
.stitle{
  text-align:center;font-size:clamp(22px,2.6vw,30px);font-weight:600;
  color:var(--navy);margin-bottom:clamp(20px,2.2vw,28px);
}
.stitle--left{text-align:left}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;
  background:var(--red);color:#fff;border:1.5px solid var(--red);
  transition:background .22s,border-color .22s,color .22s,transform .22s var(--e),box-shadow .22s;
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex:none}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn--out{background:#fff;color:var(--navy);border-color:var(--line)}
.btn--out:hover{background:#fff;color:var(--red);border-color:var(--red)}
.btn--white{background:#fff;color:var(--navy);border-color:#fff}
.btn--white:hover{background:#f2f4fa;border-color:#f2f4fa;color:var(--navy)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:#fff;color:var(--blue);border-color:#fff}

.more{
  display:inline-flex;align-items:center;gap:7px;color:var(--red);
  font-size:13.5px;font-weight:600;transition:gap .25s var(--e);
}
.more svg{width:14px;height:14px}
.more:hover{gap:12px}

/* ---------- top bar ---------- */
.top{background:#fff;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--body)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;flex-wrap:wrap}
.top__l{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.top__l span,.top__l a{display:inline-flex;align-items:center;gap:7px}
.top svg{width:13px;height:13px;color:var(--red);flex:none}
.top a:hover{color:var(--red)}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.hd.is-stuck{box-shadow:var(--sh-2)}
.hd__in{display:flex;align-items:center;gap:24px;min-height:66px}
.brand img{height:42px;width:auto}
.nav{margin-inline:auto}
.nav__list{display:flex;align-items:center;gap:4px}
.nav__a{
  display:inline-flex;align-items:center;gap:5px;padding:9px 14px;border-radius:var(--r-sm);
  font-size:14px;font-weight:500;color:var(--ink);transition:color .2s,background .2s;
}
.nav__a svg{width:12px;height:12px;opacity:.6}
.nav__a:hover{color:var(--red)}
.nav__a[aria-current="page"]{color:var(--red);font-weight:600}
.hd__cta{flex:none;display:flex;align-items:center;gap:10px}
.burger{display:none;width:42px;height:42px;place-items:center;border-radius:var(--r-sm);border:1px solid var(--line)}
.burger span{display:block;width:18px;height:2px;background:var(--navy);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--navy);transition:transform .3s var(--e),top .2s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(20px,1.7vw,24px) clamp(20px,2.4vw,30px)}
.hero__in{
  display:grid;grid-template-columns:1fr 1.16fr;   /* desktop re-declares this */
  --head:.13;--foot:.263;               /* the frame's shape; desktop overrides */
  grid-template-areas:"copy art" "stats art";
  grid-template-rows:auto 1fr;
  gap:0 clamp(26px,3.4vw,52px);
  align-items:start;                    /* copy sits at the top, not centred
                                           against the much taller picture */
  /* distance from the wrap's edge out to the viewport edge */
  --bleed:max(var(--gut),(100vw - var(--sbw,0px) - var(--wrap))/2);
}
/* the scene runs past the gutter to the screen edge - with the edge feathered
   to nothing there is no seam to give the crop away */
.hero__copy{grid-area:copy}
.hero__art{grid-area:art;margin-right:calc(var(--bleed) * -1)}
.stats{grid-area:stats}
.hero__in>*{min-width:0}
.hero__kick{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--red-soft);color:var(--red);
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 16px;border-radius:var(--r-pill);
  margin-bottom:18px;
}
.hero__kick::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--red);
}
.hero h1{font-size:clamp(30px,4.2vw,50px);font-weight:700;line-height:1.14;letter-spacing:-.01em}
.hero h1 .r{color:var(--red);display:block}
.hero__lead{margin-top:16px;font-size:14.5px;max-width:42ch;color:var(--body)}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.hero__feats{display:flex;gap:clamp(18px,2.6vw,40px);margin-top:clamp(28px,3.4vw,44px);flex-wrap:wrap}
.feat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:96px}
.feat i{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--line);color:var(--blue);
}
.feat i svg{width:19px;height:19px}
.feat b{font-size:13px;font-weight:600;color:var(--navy);line-height:1.3}
.feat span{font-size:11.5px;color:var(--muted);line-height:1.35}

.hero__art{position:relative}
.hero__art>img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--sh-2)}

/* ---------- hero storefront scene ----------
   Six layers share one 1400x933 canvas, so `inset:0` inside .scene__q lines
   them up exactly. Painting order is DOM order:
   sky -> floor -> left -> right -> building -> roof (matched against the
   supplied composite to within 0.54/255 mean error).

   Story: the floor is already there, the building falls onto it, the impact
   shakes the camera and throws cement dust, then the sky and the neighbouring
   shops settle in.

   Everything below is written so the *resting* state is the default. JS adds
   .is-armed to move the layers to their start positions, then .is-playing to
   run them home — so with JS off (or before it runs) the shop just sits there
   fully composed instead of being stuck mid-animation.
   -------------------------------------------------------------------- */
.hero__art{--impact:1.17s;--sh:1}     /* when the building meets the ground, and
   how hard the camera shakes. --sh scales the shake so a small phone-sized
   frame doesn't get a displacement that reads as 2% of its own width.
   Declared on .hero__art rather than .scene so anything else in the hero can
   stay in step with the impact. */
.scene{
  /* --head is how much open sky sits above the shop, as a fraction of the
     scene's width. The shop keeps its own 3:2 canvas inside .scene__stack and
     hangs from the bottom, so raising --head only adds sky on top. */
  /* The replacement floor's cobbles start 73% down its own canvas (the one
     before started at 61.7%), so this had to come back from .20 - at .20 the
     pavement began *below* the shop's feet and left a bright sliver between
     the two. At .14 the floor's own top edge lands at 87% of the stack, where
     the building and both neighbours still cover the full width. */
  --ground:.14;          /* how far the floor slides down its own plane */
  /* --foot is extra frame below the shop for the ground to run out into. The
     tail is real layout space, so the pavement finishes dissolving before the
     headline starts rather than the text being pulled up onto it. */
  /* tuned so the frame ends exactly one road-depth below where the floor
     image runs out - the kerb then lands on the pavement's own edge */
  position:relative;width:100%;container-type:inline-size;
  pointer-events:none;                  /* decorative - never eat a click */
  aspect-ratio:3 / calc(2.2 + 3 * (var(--head) + var(--foot)));
  margin-bottom:0;
  overflow:hidden;isolation:isolate;
  /* v7: no frame at all - no radius, no shadow, no backing panel. The scene
     dissolves into the page instead of sitting on it, so the animation reads
     as happening in the screen rather than inside a card.
     Both sides feather into the page. The building starts at 6.7% of the
     canvas, so a 5% feather grazes it without washing the facade out. Phones
     switch this off - there both edges really are the screen edge. */
  --side:linear-gradient(to right,transparent 0,rgba(0,0,0,.05) 1.8%,rgba(0,0,0,.24) 3.3%,rgba(0,0,0,.62) 4.7%,#000 6%,#000 94%,rgba(0,0,0,.62) 95.3%,rgba(0,0,0,.24) 96.7%,rgba(0,0,0,.05) 98.2%,transparent 100%);
  -webkit-mask-image:var(--side);
          mask-image:var(--side);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
/* oversized so the shake - translation plus the corner lift from the tiny
   rotation - never exposes an edge of the frame */
.scene__q{position:absolute;top:-2.6%;bottom:-2.6%;left:-.6%;right:-4.6%}
/* margin-% resolves against width, so the drop stays put whatever the frame's
   height works out to be */
.scene__stack{
  position:absolute;left:0;right:0;top:0;
  margin-top:calc(var(--head) * 100%);
  aspect-ratio:3/2;
}
.lyr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lyr--bldg{transform-origin:50% 92%}    /* squash compresses onto the ground */
.lyr--roof{transform-origin:50% 16%}
/* the sky thins out towards the top so it blends to page white instead of
   ending on a hard blue edge. The rooftop boards start at 3.9% down, where the
   sky is still ~10% - they read as sitting against white, like the reference. */
.lyr--sky{
  /* .scene__q hangs 2.6% above the frame and overflow:hidden cuts it off there,
     and the sky has to already be at zero by then, or that cut shows as a faint
     hard line across the top.

     --sky-in is where the sky reaches full strength, and it has to sit inside
     two bounds, both measured as a fraction of the sky's own box:

       * above  the rooftop boards  (15.2% desktop, 22.1% phone) so there is a
         band of solid sky over the shop
       * its ramp must start below the top cut while the scene is shaking
         (3.3% desktop, 4.0% phone) or that cut shows as a hard line

     The ramp starts at 28% of --sky-in, which satisfies the lower bound at both
     sizes. Re-check these if --head or --foot change: both move the boards
     relative to the sky's box. At the bottom the sky is gone by 91%, above the
     frame's lower cut and the shop's own base. */
  --sky-in:14%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent calc(var(--sky-in) * .28),rgba(0,0,0,.06) calc(var(--sky-in) * .46),rgba(0,0,0,.24) calc(var(--sky-in) * .64),rgba(0,0,0,.58) calc(var(--sky-in) * .82),#000 var(--sky-in),#000 70%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.2) 85%,rgba(0,0,0,.05) 91%,transparent 96%);
          mask-image:linear-gradient(to bottom,transparent 0,transparent calc(var(--sky-in) * .28),rgba(0,0,0,.06) calc(var(--sky-in) * .46),rgba(0,0,0,.24) calc(var(--sky-in) * .64),rgba(0,0,0,.58) calc(var(--sky-in) * .82),#000 var(--sky-in),#000 70%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.2) 85%,rgba(0,0,0,.05) 91%,transparent 96%);
}
/* ground-level layers dissolve at the bottom. The building is deliberately
   left unmasked so its base stays crisp while the pavement under it fades. */
.lyr--left,.lyr--right{
  -webkit-mask-image:linear-gradient(to bottom,#000 82%,rgba(0,0,0,.6) 88%,rgba(0,0,0,.22) 93%,transparent 99%);
          mask-image:linear-gradient(to bottom,#000 82%,rgba(0,0,0,.6) 88%,rgba(0,0,0,.22) 93%,transparent 99%);
}
/* The artwork only leaves a thin strip of pavement in front of the shop - the
   building's base sits at 92.5% of the canvas. Sliding the floor down its own
   plane by --ground brings more of the near cobbles into frame, which reads as
   the shop standing further back. The shop itself does not move, so the sky
   band above it is untouched. */
.lyr--floor{
  /* --fz stretches the floor's box downward. The top offset compensates so the
     image's own horizon (73% down its canvas) lands in the same place whatever
     --fz is - only the near field grows. object-fit:cover then scales the
     cobbles up, which is exactly what a closer foreground looks like. */
  /* 1 = the cobbles at their own scale. The road spans the full width now, so
     nothing behind it needs covering and there is no reason to zoom them. */
  --fz:1;
  top:calc((var(--ground) + (1 - var(--fz)) * .73) * 100%);
  height:calc(var(--fz) * 100%);
  bottom:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 99%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 99%,transparent 100%);
}
.lyr--sky,.lyr--floor,.lyr--left,.lyr--right{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.scene.is-playing:not(.is-done) .lyr,
.scene.is-playing:not(.is-done) .dust>*{will-change:transform,opacity}

/* ---- start positions ---- */
.scene.is-armed .lyr--floor{opacity:0;transform:translate3d(0,16px,0)}
.scene.is-armed .lyr--bldg{opacity:0;transform:translate3d(0,-112%,0) scale(1.03,1.07)}
.scene.is-armed .lyr--sky{opacity:0;transform:scale(1.07)}
.scene.is-armed .lyr--roof{opacity:0;transform:translate3d(0,-26px,0) scale(1,.86)}
.scene.is-armed .lyr--left{opacity:0;transform:translate3d(-30px,10px,0) scale(.97)}
.scene.is-armed .lyr--right{opacity:0;transform:translate3d(30px,10px,0) scale(.97)}

/* ---- run ---- */
.scene.is-playing .lyr--floor{animation:bm-floor .42s var(--e) both}
.scene.is-playing .lyr--bldg {animation:bm-drop 1.34s both .34s}
.scene.is-playing .scene__q  {animation:bm-quake .62s both var(--impact)}
.scene.is-playing .lyr--sky  {animation:bm-sky .95s var(--e) both calc(var(--impact) + .10s)}
.scene.is-playing .lyr--roof {animation:bm-roof .62s both calc(var(--impact) + .30s)}
.scene.is-playing .lyr--left {animation:bm-in-l .70s var(--e) both calc(var(--impact) + .42s)}
.scene.is-playing .lyr--right{animation:bm-in-r .70s var(--e) both calc(var(--impact) + .52s)}

@keyframes bm-floor{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to  {opacity:1;transform:none}
}
/* gravity on the way down, then squash - rebound - settle */
@keyframes bm-drop{
  0%  {opacity:0;transform:translate3d(0,-112%,0) scale(1.03,1.07);
       animation-timing-function:cubic-bezier(.55,.06,.68,.19)}
  8%  {opacity:1;
       animation-timing-function:cubic-bezier(.55,.06,.68,.19)}
  62% {transform:translate3d(0,0,0) scale(1.02,1.05);
       animation-timing-function:cubic-bezier(.32,0,.24,1)}
  71% {transform:translate3d(0,1%,0) scale(1.038,.944);
       animation-timing-function:cubic-bezier(.34,0,.28,1)}
  81% {transform:translate3d(0,-.4%,0) scale(.988,1.02);
       animation-timing-function:cubic-bezier(.34,0,.28,1)}
  90% {transform:translate3d(0,.14%,0) scale(1.005,.995)}
  100%{opacity:1;transform:none}
}
/* decaying camera shake */
@keyframes bm-quake{
  0%  {transform:translate3d(0,0,0)}
  9%  {transform:translate3d(calc(var(--sh) * -7px),calc(var(--sh) * 6px),0)   rotate(calc(var(--sh) * -.34deg))}
  20% {transform:translate3d(calc(var(--sh) * 6px),calc(var(--sh) * -5px),0)   rotate(calc(var(--sh) * .27deg))}
  32% {transform:translate3d(calc(var(--sh) * -5px),calc(var(--sh) * 4px),0)   rotate(calc(var(--sh) * -.2deg))}
  45% {transform:translate3d(calc(var(--sh) * 4px),calc(var(--sh) * -3px),0)   rotate(calc(var(--sh) * .14deg))}
  59% {transform:translate3d(calc(var(--sh) * -3px),calc(var(--sh) * 2px),0)   rotate(calc(var(--sh) * -.09deg))}
  73% {transform:translate3d(calc(var(--sh) * 2px),calc(var(--sh) * -1.4px),0)}
  87% {transform:translate3d(calc(var(--sh) * -1px),calc(var(--sh) * .7px),0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes bm-sky{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:none}}
@keyframes bm-roof{
  0%  {opacity:0;transform:translate3d(0,-26px,0) scale(1,.86)}
  55% {opacity:1;transform:translate3d(0,3px,0) scale(1,1.03)}
  78% {transform:translate3d(0,-1.5px,0) scale(1,.99)}
  100%{opacity:1;transform:none}
}
@keyframes bm-in-l{from{opacity:0;transform:translate3d(-30px,10px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes bm-in-r{from{opacity:0;transform:translate3d(30px,10px,0) scale(.97)}to{opacity:1;transform:none}}

/* ---- the road, where the pavement runs out ----
   A sibling of .scene__q, so it is pinned to the frame rather than the shaking
   camera - it only arrives once the shake is long over. Its top edge is masked
   so the fading cobbles hand over to the asphalt instead of meeting a line. */
.road{
  /* the perspective viewport - the plane inside it is what tilts */
  --road-h:clamp(136px,18vw,200px);
  --road-tilt:46deg;   /* steeper than this and the far label is unreadable */
  position:absolute;left:0;right:0;bottom:0;height:var(--road-h);
  perspective:58.8cqw;        /* of the frame, not the window - see below */
  perspective-origin:50% 100%;
}
/* A real 3D plane rather than a flat band: rotateX lays it down, so the kerb
   recedes, the dashes converge and the lettering foreshortens the way paint on
   tarmac actually does. Its near edge stays pinned to the bottom of the frame. */
.road__plane{
  position:absolute;left:-50%;right:-50%;bottom:0;
  height:155%;
  transform:rotateX(var(--road-tilt));transform-origin:50% 100%;
  transform-style:preserve-3d;   /* so the marker can stand up out of the plane */
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#454C5B 0%,#333A47 45%,#262C37 100%);
}
/* cement kerb - the strip the pavement hands over to */
.road__kerb{
  position:relative;flex:none;height:clamp(9px,1.2vw,15px);
  background:linear-gradient(180deg,#B4B0A8 0%,#A29E96 48%,#7E7A73 100%);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.32);
}
/* the pavement above is mid-grey; the kerb used to start near-white, and that
   bright strip read as a gap between the floor and the road. This feather sits
   on the cobbles and fades into the kerb's own top colour, so the two meet
   without a line. */
.road__kerb::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:10px;
  background:linear-gradient(to bottom,rgba(180,176,168,0),rgba(180,176,168,.5) 58%,#B4B0A8);
  pointer-events:none;
}
/* red band closing the block off at the bottom */
.road__edge{
  flex:none;height:clamp(7px,1vw,12px);background:var(--red);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
/* dashed centre line - a real element, so it lands exactly between the lanes
   whatever the padding is, and the marker can hang off it */
.road__line{
  position:relative;flex:none;height:2px;transform-style:preserve-3d;
  background:repeating-linear-gradient(to right,rgba(255,255,255,.9) 0 22px,transparent 22px 44px);
}
.road__lane{
  flex:1.3;display:flex;align-items:center;gap:11px;
  padding-inline:29%;color:#fff;
}
/* the two destinations sit on opposite sides, each name held between chevrons
   pointing the way that lane travels. The pin stands on the centre line, so
   neither run reaches it and the old padding that dodged it is gone. */
/* each run is pulled a little further out than the shared 29% so the far one
   clears the pin standing on the centre line, and both sit nearer their own
   side of the frame than the middle of it */
.road__lane:not(.road__lane--rev){justify-content:flex-end;padding-right:23%}
.road__lane--rev{flex:1;justify-content:flex-start;padding-left:26%}
.road__lane b{
  font-size:clamp(23px,2.4vw,30px);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  /* road paint is drawn long so it reads correctly once foreshortened */
  transform:scaleY(1.55);transform-origin:50% 50%;
  color:rgba(255,255,255,.94);
}
.road__arrow{width:2.55em;height:auto;flex:none;font-size:inherit}
.road__arrow--rev{transform:scaleX(-1)}
.road__arrow path{opacity:.3}
/* the run pulses along itself, so the direction reads even standing still */
.scene.is-playing .road__arrow path{animation:bm-chev 1.5s ease-in-out infinite calc(var(--road) + .55s)}
.scene.is-playing .road__arrow path:nth-child(2){animation-delay:calc(var(--road) + .73s)}
.scene.is-playing .road__arrow path:nth-child(3){animation-delay:calc(var(--road) + .91s)}
@keyframes bm-chev{0%,55%,100%{opacity:.28}22%{opacity:1}}

/* the marker stands upright out of the road: the plane's tilt is cancelled so
   it faces the camera, pivoting on its own tip where it meets the centre line */
.road__pin{
  position:absolute;left:50%;bottom:0;
  transform-origin:50% 100%;
  transform:translateX(-50%) rotateX(calc(-1 * var(--road-tilt)));
}
.road__pin i{display:block}
.road__pin svg{
  display:block;width:clamp(36px,4.4vw,54px);height:auto;color:var(--red);
  filter:drop-shadow(0 6px 9px rgba(0,0,0,.5));
}

/* ---- start positions ---- */
.scene.is-armed .road{opacity:0;clip-path:inset(0 50% 0 50%)}
.scene.is-armed .road__lane{opacity:0}
.scene.is-armed .road__pin{opacity:0}

/* ---- run: only after the shop has finished settling ---- */
/* the shop's last layer settles at impact + 1.22s, so the road starts a
   clear beat after that rather than overlapping the tail of it */
.scene{--road:calc(var(--impact) + 1.55s)}
.scene.is-playing .road      {animation:bm-road .60s var(--e) both var(--road)}
.scene.is-playing .road__lane{animation:bm-lane .50s var(--e) both calc(var(--road) + .30s)}
.scene.is-playing .road__lane--rev{animation-delay:calc(var(--road) + .40s)}
.scene.is-playing .road__pin {animation:bm-pin .62s both calc(var(--road) + .52s)}
.scene.is-playing .road__pin i{animation:bm-bob 2.6s ease-in-out infinite calc(var(--road) + 1.2s)}

@keyframes bm-road{
  from{opacity:.35;clip-path:inset(0 50% 0 50%)}
  to  {opacity:1;clip-path:inset(0 0 0 0)}
}
@keyframes bm-lane{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* the pin's own transform carries its centring, so every frame repeats it */
@keyframes bm-pin{
  0%  {opacity:0;transform:translateX(-50%) rotateX(calc(-1 * var(--road-tilt))) translateY(-30px) scale(.72)}
  62% {opacity:1;transform:translateX(-50%) rotateX(calc(-1 * var(--road-tilt))) translateY(5px) scale(1.05)}
  82% {transform:translateX(-50%) rotateX(calc(-1 * var(--road-tilt))) translateY(-3px) scale(.99)}
  100%{opacity:1;transform:translateX(-50%) rotateX(calc(-1 * var(--road-tilt)))}
}
@keyframes bm-bob{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-7px)}
}

/* ---- cement dust thrown up by the impact ---- */
.dust{position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none}
.dust>*{opacity:0}
.dust span{
  position:absolute;left:var(--x);bottom:2%;
  width:13%;aspect-ratio:1;margin-left:-6.5%;border-radius:50%;
  background:radial-gradient(circle at 50% 55%,
      rgba(228,222,208,.95) 0%, rgba(206,198,181,.72) 38%,
      rgba(184,175,158,.34) 60%, rgba(184,175,158,0) 74%);
  filter:blur(7px);
}
/* the wide, low blast that spreads along the ground */
.dust__sheet{
  position:absolute;left:50%;bottom:1%;width:104%;height:26%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 62%,
      rgba(224,218,203,.92) 0%, rgba(203,195,178,.6) 42%, rgba(190,182,164,0) 72%);
  filter:blur(9px);transform:translateX(-50%) scale(.16,.34);
}
.scene.is-playing .dust span{animation:bm-puff 1.9s ease-out both calc(var(--impact) + var(--d))}
.scene.is-playing .dust__sheet{animation:bm-sheet 1.5s ease-out both var(--impact)}
@keyframes bm-puff{
  0%  {opacity:0;transform:translate3d(0,10%,0) scale(.22)}
  14% {opacity:.9}
  55% {opacity:.62}
  100%{opacity:0;transform:translate3d(var(--dx),-64%,0) scale(var(--s))}
}
@keyframes bm-sheet{
  0%  {opacity:0;transform:translateX(-50%) scale(.16,.34)}
  16% {opacity:.92}
  100%{opacity:0;transform:translateX(-50%) scale(1.12,1.25)}
}

/* on a phone the scene is small - shorten the fall and calm the shake */
@media (max-width:640px){
  .hero__art{--impact:1.02s;--sh:.6}
  /* --road-h bottoms out at its clamp minimum here, so the road is deeper
     relative to the width than --foot:.263 allows for - this puts the kerb
     back on the pavement's edge */
  .scene{--head:.22;--foot:.317}   /* and more open sky above the shop */
  .lyr--sky{--sky-in:21%}    /* ...so the sky reaches full further down */
  .scene.is-playing .lyr--bldg{animation-duration:1.16s;animation-delay:.30s}
  /* --road-h sits on its 136px clamp floor across every phone width, so as the
     screen gets wider the road keeps its pixels and loses its share of the
     frame - 12px of white opened at the joint on a 430px phone. .3487 is
     136/390, so a 390px screen renders byte-identically and the rest follow. */
  .road{height:auto;aspect-ratio:1 / .370;perspective:92.3cqw}
  /* A phone frame is barely wider than one run and the pin stands in the middle
     of it, so the far run has about 184px to live in. Tighter chevrons, a
     smaller gap and a slightly smaller name bring it to ~155px, which clears
     the marker and still stops short of the frame's edge. The padding is a
     share of the plane, and the plane is twice the frame - 26% is the value
     that lands a run on the frame's own edge, not a small number. */
  .road__lane:not(.road__lane--rev){padding-right:22%}
  .road__lane--rev{padding-left:26%}
  .road__lane{gap:7px}
  .road__arrow{width:2.05em}
  .road__lane b{font-size:21px;letter-spacing:.1em}
  .scene__q{inset:-3.4%}
  .dust span{filter:blur(5px)}
}

@media (prefers-reduced-motion:reduce){
  .scene.is-armed .lyr{opacity:1;transform:none;animation:none}
  .scene.is-armed .road,
  .scene.is-armed .road__lane{opacity:1;clip-path:none}
  .scene.is-armed .road__pin{opacity:1}
  .road__pin i{animation:none}
  .dust{display:none}
}

/* ---------- stats bar ---------- */
.stats{margin-top:clamp(28px,3.4vw,44px)}
.stats__in{
  display:grid;grid-template-columns:repeat(2,1fr);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;
}
.stat{display:flex;align-items:center;gap:13px;min-width:0;padding:clamp(16px,2vw,24px) clamp(12px,1.8vw,26px);border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat:nth-child(3){border-left:0}
.stat:nth-child(n+3){border-top:1px solid var(--line)}
.stat i{width:36px;height:36px;display:grid;place-items:center;color:var(--blue);flex:none}
.stat i svg{width:24px;height:24px}
.stat>div{flex:1;min-width:0}
.stat b{display:block;white-space:nowrap;font-size:clamp(18px,2vw,23px);font-weight:600;color:var(--navy);line-height:1.2}
.stat>div>span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4}
.stat b span{display:inline;font:inherit;color:inherit}

/* ---------- tiles showroom ----------
   The rack is a 16:9 box whose height comes only from aspect-ratio, and every
   layer inside it is out of flow, so the section reserves its space from first
   paint and cannot shift.

   Each bay is an absolutely positioned grid placed by percentages measured off
   the blank artwork; the gap between cells is the grout, and what shows through
   it is the dark green of the bay underneath.

   Resting state is the finished rack with the copy visible, so with JS off the
   section still reads as a finished block. .is-armed (set inline right after
   the markup) is what hides the tiles and copy.
   -------------------------------------------------------------------- */
.tiles__in{
  display:grid;grid-template-columns:60% 1fr;
  gap:clamp(26px,3.4vw,52px);align-items:center;
}
.tiles__rack{
  position:relative;width:100%;aspect-ratio:16/9;
  min-width:0;                        /* grid items default to min-width:auto */
}
.tiles__base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* grout is a share of the bay, not a fixed pixel count, so it stays the
   same hairline on a 358px rack as on a 720px one - your reference has
   about 3px of backing between columns on a 322px bay, and about 1px
   between rows on a 631px one */
.tiles__bay{position:absolute;display:grid;gap:.17% .95%;overflow:hidden}
.tiles__tile{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Grid items default to min-height:auto, and a replaced element will not
     shrink below its intrinsic height. The 2x4 textures are 512x1024, so their
     rows grew past 1fr and those two bays spilled out of the rack. */
  min-width:0;min-height:0;
  will-change:opacity,transform;
}
.tiles__copy{min-width:0}
.tiles__lead{margin-top:14px;font-size:14.5px;max-width:46ch}
.tiles__copy .btn{margin-top:22px}
.tiles__copy .stitle{margin-bottom:0;max-width:21ch}

/* ---- armed: bare rack, no copy ---- */
/* the tile tips in off the wall rather than just fading, which reads as being
   set into place; 14deg is enough to catch the light without going playful */
.tiles.is-armed .tiles__tile{
  opacity:0;transform:perspective(900px) rotateX(-14deg) translateY(9px) scale(.88);
}
.tiles.is-armed .tiles__copy>*{opacity:0;transform:translateY(14px)}

/* ---- run: tiles settle in, then the copy follows ---- */
.tiles.is-playing .tiles__tile{
  opacity:1;transform:none;
  transition:opacity .26s var(--e),transform .26s var(--e);
}
.tiles.is-filled .tiles__copy>*{
  opacity:1;transform:none;
  transition:opacity .45s var(--e),transform .45s var(--e);
}
.tiles.is-filled .tiles__copy>*:nth-child(2){transition-delay:.09s}
.tiles.is-filled .tiles__copy>*:nth-child(3){transition-delay:.18s}
.tiles.is-filled .tiles__copy>*:nth-child(4){transition-delay:.27s}
/* the compositing hint is only worth carrying while it is moving */
.tiles.is-done .tiles__tile{will-change:auto}

@media (max-width:960px){
  .tiles__in{grid-template-columns:1fr;gap:clamp(22px,3vw,32px)}
  .tiles__rack{order:-1}             /* the rack leads when stacked */
  .tiles__lead{max-width:60ch}
}
@media (max-width:640px){
  .tiles__lead{margin-top:12px}
  .tiles__copy .btn{margin-top:20px}
  .tiles.is-armed .tiles__tile{
    transform:perspective(700px) rotateX(-11deg) translateY(6px) scale(.9);
  }
}

@media (prefers-reduced-motion:reduce){
  .tiles.is-armed .tiles__tile,
  .tiles.is-armed .tiles__copy>*{opacity:1;transform:none;transition:none}
}

/* ---------- water tanks ----------
   Mirror of the tiles section: copy left, animation right, so the two read as a
   pair rather than a repeat. The frame is a 16:9 box whose height comes only
   from aspect-ratio, and the tanks are absolutely positioned inside it, so the
   section reserves its space from first paint.

   Each tank's centre, width and base were measured off master-filled-rack, so
   they land on their own platform. Widths are set and heights left to follow,
   which keeps every cut-out at its own aspect - no stretching.
   -------------------------------------------------------------------- */
.tanks__in{
  display:grid;grid-template-columns:1fr 60%;
  gap:clamp(26px,3.4vw,52px);align-items:center;
}
.tanks__frame{position:relative;width:100%;aspect-ratio:16/9;min-width:0;overflow:hidden}
.tanks__base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.tanks__tank{position:absolute;height:auto;will-change:transform,opacity}
.tanks__copy{min-width:0}
.tanks__lead{margin-top:14px;font-size:14.5px;max-width:46ch}
.tanks__copy .btn{margin-top:22px}
.tanks__copy .stitle{margin-bottom:0;max-width:21ch}

/* ---- armed ---- */
.tanks.is-armed .tanks__tank{opacity:0}
.tanks.is-armed .tanks__copy>*{opacity:0;transform:translateY(14px)}

/* ---- run: the tanks drop in one by one ---- */
/* --drop is the fall height in multiples of the tank's own height, so every
   tank starts clear above the frame whatever its size. transform-origin sits
   on the base, so the squash and the wobble both pivot where it lands. */
.tanks__tank{transform-origin:50% 100%}
.tanks.is-playing .tanks__tank{
  animation:bm-tank-drop .8s linear both var(--d);
}
/* the display gives a very light jolt on each landing. One 260ms keyframe run
   repeated three times, offset to the first impact - the repeat interval is
   the stagger, so the jolts stay locked to the tanks however the timing moves */
.tanks.is-playing .tanks__base{
  animation:bm-thud var(--thud-gap) linear var(--thud-delay) 3 both;
}
.tanks.is-filled .tanks__copy>*{
  opacity:1;transform:none;
  transition:opacity .45s var(--e),transform .45s var(--e);
}
.tanks.is-filled .tanks__copy>*:nth-child(2){transition-delay:.09s}
.tanks.is-filled .tanks__copy>*:nth-child(3){transition-delay:.18s}
.tanks.is-filled .tanks__copy>*:nth-child(4){transition-delay:.27s}
.tanks.is-filled .tanks__copy>*:nth-child(5){transition-delay:.36s}
.tanks.is-done .tanks__tank{will-change:auto}

@keyframes bm-tank-drop{
  /* fall - eased in, so it accelerates like it is falling */
  0%   {opacity:0;transform:translateY(var(--drop)) rotate(0deg) scale(1,1);
        animation-timing-function:cubic-bezier(.5,.02,.72,.16)}
  12%  {opacity:1}
  47%  {transform:translateY(0) rotate(0deg) scale(1,1);
        animation-timing-function:cubic-bezier(.3,0,.55,1)}
  /* lands: squashes on the base, lifts a touch, then rocks itself upright */
  53%  {transform:translateY(0) rotate(0deg) scale(1.042,.942)}
  60%  {transform:translateY(-3.2%) rotate(-.55deg) scale(.986,1.028)}
  67%  {transform:translateY(0) rotate(1.9deg) scale(1.012,.99)}
  76%  {transform:translateY(0) rotate(-1.3deg) scale(1,1)}
  85%  {transform:translateY(0) rotate(.72deg) scale(1,1)}
  93%  {transform:translateY(0) rotate(-.3deg) scale(1,1)}
  100% {opacity:1;transform:translateY(0) rotate(0deg) scale(1,1)}
}

/* barely there - about 2px on a 900px frame, gone in under 80ms */
@keyframes bm-thud{
  0%   {transform:translateY(0)}
  6%   {transform:translateY(.28%)}
  13%  {transform:translateY(-.12%)}
  21%  {transform:translateY(.05%)}
  30%  {transform:translateY(0)}
  100% {transform:translateY(0)}
}


/* ============================================================
   BATHROOM & SANITARYWARE
   Same wiring as the hero, the tiles rack and the tank display:
   the CSS resting state IS the finished bathroom, JS adds .is-armed to
   move every fixture to its start, then .is-playing to install them.
   No JS, or a failed observer, and the room simply shows finished.
   ============================================================ */
.bath__in{
  display:grid;grid-template-columns:58% 1fr;
  gap:clamp(26px,3.4vw,52px);align-items:center;
}
.bath__stage{
  position:relative;width:100%;aspect-ratio:16/9;
  min-width:0;overflow:hidden;border-radius:var(--r-lg);
  background:var(--paper-2);
  container-type:inline-size;      /* so fixture blur/glow can track the stage */
}
.bath__room{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bath__part{
  position:absolute;height:auto;display:block;
  object-fit:contain;pointer-events:none;user-select:none;-webkit-user-select:none;
}
/* one light sweep across the room, on reveal and again at the end */
.bath__sweep{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.30) 50%,transparent 68%);
  transform:translateX(-60%);
}
/* warm glow under the vanity, and the mirror halo - both CSS, no extra assets */
.bath__glow{
  position:absolute;pointer-events:none;opacity:0;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,196,120,.55),rgba(255,196,120,0) 70%);
  filter:blur(2.2cqw);
}
.bath__copy{min-width:0}
.bath__lead{margin-top:14px;font-size:14.5px;max-width:46ch}
.bath__copy .stitle{margin-bottom:0;max-width:21ch}
.bath__copy .stitle em{font-style:normal;color:var(--red)}
.bath__specs{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.bath__specs li{
  position:relative;padding:9px 12px 9px 34px;border-radius:9px;
  background:#F6F7FB;border-left:3px solid var(--red);
  font-size:13.5px;font-weight:600;color:var(--navy);
}
.bath__specs li::before{
  content:"";position:absolute;left:14px;top:50%;width:9px;height:5px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:translateY(-70%) rotate(-45deg);
}
.bath__copy .btn{margin-top:22px}
.bath__note{margin-top:10px;font-size:12.5px;color:var(--muted)}

/* ---- armed: the room is bare and the copy is held back ---- */
.bath.is-armed .bath__room{opacity:0;transform:scale(1.025)}
.bath.is-armed .bath__part{opacity:0}
.bath.is-armed .bath__copy>*{opacity:0;transform:translateY(24px)}

/* ---- run ---- */
.bath.is-playing .bath__room{
  opacity:1;transform:none;
  transition:opacity .6s var(--e),transform .6s var(--e);
}
.bath.is-playing .bath__sweep{animation:bm-bath-sweep 1.5s ease-in-out .25s}
.bath.is-lit    .bath__sweep{animation:bm-bath-sweep 1.6s ease-in-out}
.bath.is-lit    .bath__stage{filter:brightness(1.035) saturate(1.02)}
.bath.is-filled .bath__copy>*{
  opacity:1;transform:none;
  transition:opacity .5s var(--e),transform .5s var(--e);
}
.bath.is-filled .bath__copy>*:nth-child(2){transition-delay:.10s}
.bath.is-filled .bath__copy>*:nth-child(3){transition-delay:.20s}
.bath.is-filled .bath__copy>*:nth-child(4){transition-delay:.30s}
.bath.is-filled .bath__copy>*:nth-child(5){transition-delay:.40s}
.bath.is-filled .bath__copy>*:nth-child(6){transition-delay:.50s}
.bath.is-done .bath__part{will-change:auto}

@keyframes bm-bath-sweep{
  0%  {opacity:0;transform:translateX(-60%)}
  22% {opacity:1}
  78% {opacity:1}
  100%{opacity:0;transform:translateX(60%)}
}
@keyframes bm-bath-glow{ to{opacity:1} }

/* ---- one keyframe set per fixture. --tr scales every travel distance, so a
   phone gets 65% of the desktop movement from a single custom property ---- */
.bath.is-playing .bath__part{
  animation-duration:var(--dur,.6s);
  animation-delay:var(--at,0s);
  animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
  will-change:transform,opacity;
}
.bath__part{--tr:1;transform-origin:50% 100%}
@media (max-width:640px){ .bath__part{--tr:.65} }

.bath.is-playing [data-anim="rise"]  {animation-name:bm-p-rise}
.bath.is-playing [data-anim="press"] {animation-name:bm-p-press}
.bath.is-playing [data-anim="fwd"]   {animation-name:bm-p-fwd}
.bath.is-playing [data-anim="snap"]  {animation-name:bm-p-snap;animation-timing-function:cubic-bezier(.2,1.5,.4,1)}
.bath.is-playing [data-anim="fromR"] {animation-name:bm-p-fromR}
.bath.is-playing [data-anim="fromL"] {animation-name:bm-p-fromL}
.bath.is-playing [data-anim="glideR"]{animation-name:bm-p-glideR}
.bath.is-playing [data-anim="drop"]  {animation-name:bm-p-drop}
.bath.is-playing [data-anim="inset"] {animation-name:bm-p-inset}
.bath.is-playing [data-anim="wipeY"] {animation-name:bm-p-wipeY;animation-timing-function:cubic-bezier(.35,0,.2,1)}
.bath.is-playing [data-anim="wipeX"] {animation-name:bm-p-wipeX;animation-timing-function:cubic-bezier(.35,0,.2,1)}
.bath.is-playing [data-anim="fall"]  {animation-name:bm-p-fall;animation-timing-function:linear}

@keyframes bm-p-fall{      /* commodes: dropped in, land on the platform */
  /* --fall is the drop height in multiples of the piece's own height, so each
     one starts clear above the stage whatever its size; transform-origin sits
     on its base, so the squash and the wobble pivot where it touches down */
  0%   {opacity:0;transform:translateY(var(--fall)) rotate(0deg) scale(1,1);
        animation-timing-function:cubic-bezier(.5,.02,.72,.16)}   /* gravity */
  14%  {opacity:1}
  52%  {transform:translateY(0) rotate(0deg) scale(1,1);
        animation-timing-function:cubic-bezier(.3,0,.55,1)}
  58%  {transform:translateY(0) rotate(0deg) scale(1.035,.952)}   /* squash */
  65%  {transform:translateY(-2.6%) rotate(-.5deg) scale(.99,1.022)}
  72%  {transform:translateY(0) rotate(1.5deg) scale(1.008,.994)} /* rocks upright */
  80%  {transform:translateY(0) rotate(-1.05deg) scale(1,1)}
  88%  {transform:translateY(0) rotate(.55deg) scale(1,1)}
  95%  {transform:translateY(0) rotate(-.22deg) scale(1,1)}
  100% {opacity:1;transform:translateY(0) rotate(0deg) scale(1,1)}
}

@keyframes bm-p-rise{      /* vanity, vase, brush holder */
  0%  {opacity:0;transform:translateY(calc(60px * var(--tr))) scale(.96)}
  70% {opacity:1}
  88% {transform:translateY(calc(-2px * var(--tr))) scale(1.004)}
  100%{opacity:1;transform:none}
}
@keyframes bm-p-press{     /* LED mirror: pressed back to the wall */
  0%  {opacity:0;transform:scale(.82)}
  60% {opacity:1}
  86% {transform:scale(1.012)}
  100%{opacity:1;transform:none}
}
@keyframes bm-p-fwd{       /* commode: down and forward, small settle */
  0%  {opacity:0;transform:translate(calc(20px * var(--tr)),calc(40px * var(--tr))) scale(.94)}
  70% {opacity:1}
  88% {transform:translateY(calc(-1.5px * var(--tr))) scale(1.003)}
  100%{opacity:1;transform:none}
}
@keyframes bm-p-snap{      /* flush plate: magnetic wall lock */
  0%  {opacity:0;transform:scale(.65)}
  55% {opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes bm-p-fromR{     /* roll holder, stool */
  0%  {opacity:0;transform:translateX(calc(30px * var(--tr))) rotate(4deg)}
  60% {opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes bm-p-fromL{     /* basket, towel ring */
  0%  {opacity:0;transform:translateX(calc(-40px * var(--tr))) rotate(-3deg)}
  60% {opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes bm-p-glideR{    /* glass partition: gentle, no heavy shadow */
  0%  {opacity:0;transform:translateX(calc(50px * var(--tr)))}
  65% {opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes bm-p-drop{      /* shelf decor, folded towel */
  0%  {opacity:0;transform:translateY(calc(-25px * var(--tr))) scale(.97)}
  70% {opacity:1}
  88% {transform:translateY(calc(1.5px * var(--tr)))}
  100%{opacity:1;transform:none}
}
@keyframes bm-p-inset{     /* niche: recessed into the wall */
  0%  {opacity:0;transform:scale(.88)}
  65% {opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes bm-p-wipeY{     /* shower system: revealed top to bottom */
  0%  {opacity:0;clip-path:inset(0 0 100% 0)}
  18% {opacity:1}
  100%{opacity:1;clip-path:inset(0 0 0 0)}
}
@keyframes bm-p-wipeX{     /* bath mat: unfolds left to right */
  0%  {opacity:0;clip-path:inset(0 100% 0 0);transform:scaleY(.92)}
  20% {opacity:1}
  100%{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}

/* a metallic highlight travelling down the shower pipe, and the leaf sway */
.bath.is-playing [data-shine]::after{content:""}
@keyframes bm-p-sway{
  0%,100%{transform:rotate(0deg)}
  35%    {transform:rotate(.9deg)}
  70%    {transform:rotate(-.6deg)}
}
.bath.is-done [data-sway]{
  transform-origin:50% 100%;
  animation:bm-p-sway 6.5s ease-in-out infinite;
}


@media (max-width:960px){
  .bath__in{grid-template-columns:1fr;gap:clamp(22px,3vw,32px)}
  .bath__stage{order:-1}            /* the bathroom leads when stacked */
  .bath__lead{max-width:60ch}
}
@media (max-width:640px){
  .bath__lead{margin-top:12px}
  .bath__copy .btn{margin-top:20px}
  .bath__specs li{padding:8px 10px 8px 30px;font-size:13px}
  .bath__sweep{display:none}        /* the cheapest thing to drop on a phone */
  .bath__glow{filter:blur(3.4cqw)}
}

/* ============================================================
   BUILDING MATERIALS - the stockyard filling up
   Same wiring as the hero, the tiles rack, the tank display and the
   sanitaryware showroom: the CSS resting state IS the full stockyard, JS adds
   .is-armed to move every material to its start, then .is-playing to load them.
   No JS, or a failed observer, and the yard simply shows finished.
   ============================================================ */
.yard__in{
  display:grid;grid-template-columns:1fr 61%;   /* copy left, stockyard right */
  gap:clamp(26px,3.4vw,52px);align-items:center;
}
.yard__stage{
  position:relative;width:100%;aspect-ratio:16/9;
  min-width:0;overflow:hidden;border-radius:var(--r-lg);
  background:var(--paper-2);
}
.yard__base{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;
}
.yard__mat{
  position:absolute;height:auto;display:block;
  object-fit:contain;pointer-events:none;user-select:none;-webkit-user-select:none;
}
/* morang and gitti are poured onto a canvas, not placed as images */
.yard__pile{
  position:absolute;display:block;
  pointer-events:none;user-select:none;-webkit-user-select:none;
}
.yard__sweep{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.26) 50%,transparent 66%);
  transform:translateX(-60%);
}
.yard__copy{min-width:0}
.yard__lead{margin-top:14px;font-size:14.5px;max-width:46ch}
.yard__line{
  margin-top:12px;font-size:13px;font-weight:600;color:var(--blue);
  letter-spacing:.02em;
}
.yard__copy .stitle{margin-bottom:0;max-width:21ch}
.yard__copy .stitle em{font-style:normal;color:var(--red)}
.yard__specs{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.yard__specs li{
  position:relative;padding:9px 12px 9px 34px;border-radius:9px;
  background:#F6F7FB;border-left:3px solid var(--red);
  font-size:13.5px;font-weight:600;color:var(--navy);
}
.yard__specs li::before{
  content:"";position:absolute;left:14px;top:50%;width:9px;height:5px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:translateY(-70%) rotate(-45deg);
}
.yard__copy .btn{margin-top:22px}
.yard__note{margin-top:10px;font-size:12.5px;color:var(--muted)}

/* ---- armed ---- */
.yard.is-armed .yard__base{opacity:0;transform:scale(1.02)}
.yard.is-armed .yard__mat{opacity:0}
.yard.is-armed .yard__copy>*{opacity:0;transform:translateY(24px)}

/* ---- run ---- */
.yard.is-playing .yard__base{
  opacity:1;transform:none;
  transition:opacity .6s var(--e),transform .6s var(--e);
}
.yard.is-playing .yard__mat{
  animation-duration:var(--dur,.8s);
  animation-delay:var(--at,0s);
  animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
  will-change:transform,opacity;
}
.yard__mat{--tr:1}
@media (max-width:640px){ .yard__mat{--tr:.68} }

.yard.is-playing [data-mat="fromL"] {animation-name:bm-y-from-l}
.yard.is-playing [data-mat="fromR"] {animation-name:bm-y-from-r}
.yard.is-playing [data-mat="slide"] {animation-name:bm-y-slide}
.yard.is-playing [data-mat="drop"]  {animation-name:bm-y-drop;animation-timing-function:linear}

/* the dust each concrete block throws up as it lands */
.yard__dust{
  position:absolute;pointer-events:none;opacity:0;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 70%,
             rgba(176,168,156,.55), rgba(176,168,156,.22) 45%, rgba(176,168,156,0) 72%);
}
.yard.is-playing .yard__dust{animation:bm-y-dust var(--ddur,.9s) ease-out var(--dat,0s) both}

.yard.is-lit .yard__sweep{animation:bm-y-sweep 1.5s ease-in-out}
.yard.is-lit .yard__stage{filter:brightness(1.03) saturate(1.02)}
.yard.is-filled .yard__copy>*{
  opacity:1;transform:none;
  transition:opacity .5s var(--e),transform .5s var(--e);
}
.yard.is-filled .yard__copy>*:nth-child(2){transition-delay:.10s}
.yard.is-filled .yard__copy>*:nth-child(3){transition-delay:.20s}
.yard.is-filled .yard__copy>*:nth-child(4){transition-delay:.30s}
.yard.is-filled .yard__copy>*:nth-child(5){transition-delay:.40s}
.yard.is-filled .yard__copy>*:nth-child(6){transition-delay:.50s}
.yard.is-filled .yard__copy>*:nth-child(7){transition-delay:.60s}
.yard.is-done .yard__mat{will-change:auto}

/* the cement pallet is trucked in from the left */
@keyframes bm-y-from-l{
  0%  {opacity:0;transform:translateX(calc(-90px * var(--tr))) scale(.965)}
  62% {opacity:1}
  86% {transform:translateX(calc(2px * var(--tr))) scale(1.003)}
  100%{opacity:1;transform:none}
}
/* the ring stand is carried in from the right */
@keyframes bm-y-from-r{
  0%  {opacity:0;transform:translateX(calc(90px * var(--tr))) scale(.965)}
  62% {opacity:1}
  86% {transform:translateX(calc(-2px * var(--tr))) scale(1.003)}
  100%{opacity:1;transform:none}
}
/* the loaded saria rack slides in, with a small metallic settle */
@keyframes bm-y-slide{
  0%  {opacity:0;transform:translateX(calc(110px * var(--tr))) scaleX(.975)}
  60% {opacity:1}
  86% {transform:translateX(calc(-3px * var(--tr))) scaleX(1.004)}
  100%{opacity:1;transform:none}
}
/* a filled block is set down: it falls, lands heavy and settles.
   --fall is the drop in multiples of the block's own height, so one rule
   works whatever size the block is; transform-origin sits on its base. */
@keyframes bm-y-drop{
  0%  {opacity:0;transform:translateY(var(--fall)) scale(1,1);
       animation-timing-function:cubic-bezier(.5,.02,.72,.16)}       /* gravity */
  16% {opacity:1}
  54% {transform:translateY(0) scale(1,1);
       animation-timing-function:cubic-bezier(.3,0,.55,1)}
  61% {transform:translateY(0) scale(1.022,.964)}                    /* squash */
  70% {transform:translateY(calc(-1.6% * var(--tr))) scale(.994,1.014)}
  80% {transform:translateY(0) scale(1.006,.996)}
  90% {transform:translateY(0) scale(.999,1.001)}
  100%{opacity:1;transform:none}
}
@keyframes bm-y-dust{
  0%  {opacity:0;transform:translateY(6%) scaleX(.42) scaleY(.5)}
  22% {opacity:.9;transform:translateY(0) scaleX(.8) scaleY(.9)}
  100%{opacity:0;transform:translateY(-16%) scaleX(1.5) scaleY(1.25)}
}
@keyframes bm-y-sweep{
  0%  {opacity:0;transform:translateX(-60%)}
  22% {opacity:1}
  78% {opacity:1}
  100%{opacity:0;transform:translateX(60%)}
}

@media (max-width:960px){
  .yard__in{grid-template-columns:1fr;gap:clamp(22px,3vw,32px)}
  .yard__stage{order:-1}              /* the stockyard leads when stacked */
  .yard__lead{max-width:60ch}
}
@media (max-width:640px){
  .yard__lead{margin-top:12px}
  .yard__copy .btn{margin-top:20px}
  .yard__specs li{padding:8px 10px 8px 30px;font-size:13px}
  .yard__sweep{display:none}          /* the cheapest thing to drop on a phone */
}

/* ---- spec strip under the lead, in both sections ---- */
.tiles__specs,.tanks__specs,.yard__specs{
  list-style:none;margin:18px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 14px;max-width:44ch;
}
.tiles__specs li,.tanks__specs li,.yard__specs li{
  position:relative;padding:9px 12px 9px 14px;
  border-radius:9px;background:#F6F7FB;
  border-left:3px solid var(--red);
}
.tiles__specs b,.tanks__specs b,.yard__specs b{
  display:block;font-size:14px;font-weight:800;color:var(--navy);letter-spacing:-.01em;
}
.tiles__specs span,.tanks__specs span,.yard__specs span{
  display:block;margin-top:1px;font-size:11.5px;color:#6B7280;
}
.tiles__copy .stitle em,.tanks__copy .stitle em{
  font-style:normal;color:var(--red);
}
@media (max-width:420px){
  .tiles__specs,.tanks__specs,.yard__specs{gap:8px 10px}
  .tiles__specs li,.tanks__specs li,.yard__specs li{padding:8px 10px 8px 12px}
}

@media (max-width:960px){
  .tanks__in{grid-template-columns:1fr;gap:clamp(22px,3vw,32px)}
  .tanks__frame{order:-1}            /* the display leads when stacked */
  .tanks__lead{max-width:60ch}
}
@media (max-width:640px){
  .tanks__lead{margin-top:12px}
  .tanks__copy .btn{margin-top:20px}
}

@media (prefers-reduced-motion:reduce){
  .tanks.is-armed .tanks__tank{opacity:1;animation:none}
  .tanks.is-armed .tanks__copy>*{opacity:1;transform:none;transition:none}
}

/* ---------- category cards ---------- */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.3vw,16px)}
.cat{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 12px 16px;text-align:center;
  transition:border-color .25s,box-shadow .25s,transform .3s var(--e);
}
.cat:hover{border-color:var(--red);box-shadow:var(--sh-2);transform:translateY(-3px)}
.cat__img{
  aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;border-radius:var(--r-sm);
  background:var(--paper-2);margin-bottom:10px;
}
.cat__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
.cat:hover .cat__img img{transform:scale(1.06)}
.cat i{
  width:30px;height:30px;display:grid;place-items:center;margin:0 auto 6px;
  border-radius:50%;background:var(--paper-2);color:var(--blue);
}
.cat i svg{width:16px;height:16px}
.cat b{display:block;font-size:13.5px;font-weight:600;color:var(--navy)}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.6vw,56px);align-items:center}
.about__art{position:relative;padding-bottom:34px}
.about__art>img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.about__mini{position:absolute;left:6%;bottom:0;display:flex;gap:12px;width:74%}
.about__mini img{
  flex:1;min-width:0;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-md);border:4px solid #fff;box-shadow:var(--sh-2);
}
.about h2{font-size:clamp(21px,2.4vw,28px);font-weight:600;max-width:16ch}
.about p{margin-top:14px;font-size:14.5px}
.about__pts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.pt{display:flex;flex-direction:column;gap:7px}
.pt i{width:30px;height:30px;display:grid;place-items:center;color:var(--blue)}
.pt i svg{width:20px;height:20px}
.pt b{font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.3}
.about .btn{margin-top:26px}

/* ---------- product cards ---------- */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.prod{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  transition:border-color .25s,box-shadow .25s,transform .3s var(--e);
}
.prod:hover{border-color:var(--red);box-shadow:var(--sh-2);transform:translateY(-3px)}
.prod__img{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.prod__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e)}
.prod:hover .prod__img img{transform:scale(1.06)}
.prod__b{padding:14px 16px 16px}
.prod__cat{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px}
.prod__b h3{font-size:15px;font-weight:600;margin-bottom:12px}

/* ---------- why choose us ---------- */
.whys{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.why{
  display:flex;align-items:center;gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 18px;
  transition:border-color .25s,box-shadow .25s,transform .3s var(--e);
}
.why:hover{border-color:var(--red);box-shadow:var(--sh-2);transform:translateY(-3px)}
.why i{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--paper-2);color:var(--blue)}
.why i svg{width:22px;height:22px}
.why b{display:block;font-size:14px;font-weight:600;color:var(--navy);line-height:1.3}
.why span{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px}

/* ---------- brand carousel ---------- */
.brandrow{display:flex;align-items:center;gap:clamp(8px,1.2vw,14px)}
.brandrow__btn{
  width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--navy);transition:.22s;
}
.brandrow__btn:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.brandrow__btn:disabled{opacity:.35;cursor:default}
.brandrow__btn svg{width:15px;height:15px}
.brands{
  flex:1;min-width:0;display:flex;gap:clamp(10px,1.3vw,16px);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.brands::-webkit-scrollbar{display:none}
.brandbox{
  flex:0 0 calc((100% - 5*16px)/6);min-width:120px;scroll-snap-align:start;
  display:grid;place-items:center;height:62px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  font-size:15px;font-weight:700;color:var(--navy);letter-spacing:-.01em;
  transition:border-color .25s,color .25s,box-shadow .25s;
}
.brandbox:hover{border-color:var(--red);color:var(--red);box-shadow:var(--sh-1)}

/* ---------- spaces ---------- */
.spaces{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,16px)}
.space{border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;background:var(--paper-2);cursor:zoom-in;position:relative}
.space img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}
.space:hover img{transform:scale(1.06)}

/* ---------- testimonials ---------- */
.says{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.say{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px}
.say__st{display:flex;gap:2px;color:var(--gold);margin-bottom:12px}
.say__st svg{width:14px;height:14px}
.say p{font-size:13.5px;font-style:italic;color:var(--body);line-height:1.65}
.say__w{display:flex;align-items:center;gap:11px;margin-top:16px}
.say__av{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-size:12.5px;font-weight:600;
}
.say__w b{display:block;font-size:13px;font-weight:600;color:var(--blue)}
.say__w span{display:block;font-size:11.5px;color:var(--muted)}

/* ---------- CTA band ---------- */
.band{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:clamp(18px,2.6vw,36px);
  background:var(--blue);border-radius:var(--r-lg);overflow:hidden;color:#fff;
  /* no block padding on the band itself — the red panel has to run the full
     height, so the padding lives on the text and button columns instead */
  padding-left:clamp(24px,3vw,40px);
}
.band>div:not(.band__mark){padding-block:clamp(22px,2.8vw,34px)}
.band h2{color:#fff;font-size:clamp(18px,2.1vw,24px);font-weight:600}
.band p{color:rgba(255,255,255,.82);font-size:13.5px;margin-top:5px;max-width:44ch}
.band__btns{display:flex;flex-wrap:wrap;gap:11px}
.band__mark{
  align-self:stretch;display:grid;place-items:center;background:var(--red);
  width:clamp(96px,11vw,150px);
}
.band__mark svg{width:clamp(40px,4.4vw,58px);height:auto;color:#fff}

/* ---------- visit us ---------- */
.visit{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,3.2vw,48px);align-items:start}
.visit h2{font-size:clamp(19px,2.2vw,25px);font-weight:600;margin-bottom:20px}
.vlist{display:grid;gap:16px}
.vrow{display:flex;gap:13px;align-items:flex-start}
.vrow i{width:26px;height:26px;flex:none;display:grid;place-items:center;color:var(--red)}
.vrow i svg{width:17px;height:17px}
.vrow p{font-size:14px;color:var(--ink)}
.vrow a:hover{color:var(--red)}
.map{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);min-height:230px}
.map iframe{width:100%;height:100%;min-height:230px;border:0;display:block}

/* ---------- footer ---------- */

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:150;display:none;place-items:center;background:rgba(12,14,24,.94);padding:clamp(14px,4vw,44px)}
.lb.is-open{display:grid}
.lb img{max-width:100%;max-height:80vh;border-radius:var(--r-md)}
.lb__cap{color:#C3C7D2;text-align:center;margin-top:12px;font-size:13px}
.lb__b,.lb__x{position:absolute;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;transition:background .2s}
.lb__b{top:50%;transform:translateY(-50%)}
.lb__b:hover,.lb__x:hover{background:var(--red)}
.lb__b svg,.lb__x svg{width:20px;height:20px}
.lb__p{left:clamp(8px,3vw,28px)}
.lb__n{right:clamp(8px,3vw,28px)}
.lb__x{top:clamp(10px,3vw,24px);right:clamp(10px,3vw,24px)}

/* ---------- reveal ---------- */
[data-rv]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--e),transform .7s var(--e)}
[data-rv].is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .cats{grid-template-columns:repeat(3,1fr)}
  .prods,.whys{grid-template-columns:repeat(2,1fr)}
  .spaces{grid-template-columns:repeat(2,1fr)}
  .brandbox{flex-basis:calc((100% - 3*14px)/4)}
  .ft__g{grid-template-columns:1fr 1fr}
  .about__pts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .burger{display:grid}
  /* anchored to the header itself so it can't drift when the top bar
     changes height (it used to be pinned at a hard-coded 104px) */
  .nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--sh-3);
    max-height:0;overflow:hidden;transition:max-height .4s var(--e);margin:0;
  }
  .nav.is-open{max-height:70vh;overflow-y:auto}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;padding:6px var(--gut) 18px}
  .nav__a{padding:13px 0;border-bottom:1px solid var(--line-2);border-radius:0;font-size:15px}
  .hd__in{gap:14px;min-height:62px}
  .hd__cta{margin-left:auto}
  .hero{padding-block:clamp(22px,3vw,32px) clamp(18px,2.2vw,26px)}
  .hero__in{grid-template-columns:1fr;grid-template-areas:"art" "copy" "stats";gap:26px}
  .hero__lead{max-width:56ch}
  .about{grid-template-columns:1fr}
  .visit{grid-template-columns:1fr}
  .says{grid-template-columns:1fr}
  .band{grid-template-columns:1fr;padding-right:clamp(24px,3vw,40px);text-align:center}
  .band__mark{display:none}
  .band__btns{justify-content:center}
}
/* between phone and desktop the stacked hero photo went full-width and made
   the hero taller than it is on a phone — cap it so the block stays even */
@media (min-width:641px) and (max-width:960px){
  /* width:100% is load-bearing - .scene is the only child and sizes itself as a
     percentage, so without it the auto margins shrink-to-fit this to zero */
  .hero__art{width:100%;max-width:560px;margin-inline:auto}
  /* the frame is pinned at 560px here while --road-h still tracks vw, so the
     road's share of the frame drifted with the window and took the joint with
     it - 19px of white at 768 wide, none at 960. Size it from the frame. */
  .road{height:auto;aspect-ratio:1 / .311;perspective:64.3cqw}
  .hero__lead{max-width:64ch}
}
@media (max-width:640px){
  /* the Devanagari address wrapped to three lines and made the top bar
     103px tall — on a phone the phone number and hours are what matter */
  .top__l>span:first-child{display:none}
  .top__in{justify-content:center;gap:20px}
  .top__l{gap:20px}

  .hero__art{margin-inline:calc(var(--bleed) * -1)}   /* full width on a phone */
  /* full-bleed on a phone: both edges are the screen edge, so neither one is
     feathered - overflow:hidden still does the clipping */
  .scene{-webkit-mask-image:none;mask-image:none}
  /* the picture already opens with ~20px of transparent sky, so the section
     padding on top of that read as dead space */
  .hero{padding-block:6px clamp(18px,2.2vw,26px)}
  /* let the eyebrow lead and the headline sit back a little */
  .hero__kick{font-size:12px;letter-spacing:.12em;padding:7px 14px;margin-bottom:14px}
  .hero h1{font-size:27px;font-weight:600;line-height:1.2}
  .hero__lead{margin-top:13px}

  .brand img{height:34px}
  .hd__cta .btn{padding:9px 13px;font-size:12.5px}

  .cats{grid-template-columns:repeat(2,1fr)}
  .prods,.spaces{grid-template-columns:repeat(2,1fr)}
  .whys{grid-template-columns:1fr}
  .brandbox{flex-basis:calc((100% - 12px)/2)}
  .ft__g{grid-template-columns:1fr}
  .hero__feats{gap:14px;margin-top:26px}
  .feat{flex:1 1 30%;min-width:0}
  .prod__b{padding:12px 13px 14px}
  .say{padding:17px}
}
@media (max-width:400px){
  .top__l>a{font-size:12.5px}
  .about__pts{grid-template-columns:repeat(2,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-rv]{opacity:1;transform:none}
}
@media print{.top,.hd,.lb{display:none}body{color:#000}}

/* desktop only - the phone layout is left exactly as it is */
@media (min-width:961px){
  /* the desktop packs are 6:4, so the frame widens with them */
  .tiles .v10-stage,.tanks .v10-stage,
  .bath .v10-stage,.yard .v10-stage{aspect-ratio:3/2}

  /* the hero already leads with the headline and the whole header carries a
     Get a Quote button, so the pair here was a third call to the same actions */
  .hero__btns{display:none}
  /* with the buttons gone the 44px steps read as holes - close them up */
  .hero__feats{margin-top:30px}
  .stats{margin-top:34px}
  /* the frame opens with ~20px of transparent sky. Pulling it up by that much
     lines the picture's first ink up with the top of the copy beside it
     instead of starting a stripe of white lower down. */
  .hero__art{
    margin-top:-2.6%;
    /* Has to be the column *plus* the bleed. A plain width:100% is the column
       alone, which left the picture 574px wide against a 934px slot and opened
       a 405px hole between it and the copy. */
    width:calc(100% + var(--bleed));
  }
  .hero__in{
    /* A wider column makes a taller frame, so the composition itself has to be
       shorter on desktop to still land inside the fold: less sky over the shop,
       less pavement under it, a shallower road. Working back from the joint,
       the frame's height/width bottoms out near 0.92 even with no sky at all -
       there is no arrangement where a half-width frame fits without this. */
    --head:.07;
    /* the road's depth follows the frame's *width*, so a taller frame pushes the
       kerb further below the pavement - the joint error is roughly
       (delta foot x frame width), and the correction runs the opposite way */
    --foot:.178;
    --ar:calc((2.2 + 3 * (var(--head) + var(--foot))) / 3);
    --chrome:145px;              /* top bar + header + the hero's own padding */
    /* The height limit goes on the *column*, not on the picture. Capping the
       picture left the column at full width and the slack showed as a dead band
       beside the copy; capping the column hands that slack to the copy, so there
       is no gap at any size. 51.4% is the 1.16fr share of the wrap, written as a
       percentage because min() cannot take an fr. */
    grid-template-columns:
      minmax(0,1fr)
      min(51.4%, calc((100svh - var(--chrome)) / var(--ar) - var(--bleed)));
  }
  /* --road-h is a vw clamp, which stops tracking the frame once the frame is
     capped by height - the kerb drifted 25px off the pavement's edge. Sizing
     the road from the frame's own width keeps the joint wherever the cap lands. */
  .scene{--ground:.07}         /* floor sits higher, so the frame can be shorter */
  .road{height:auto;aspect-ratio:1 / .25}
  .road__kerb{height:7.5%}
  .road__edge{height:6%}
}

/* ============================================================
   v10 - the three product showrooms share one 4:5 portrait stage.
   Portrait was chosen so the whole showroom stays readable on a phone;
   on a desktop it takes less width, so the copy column gets the rest.
   ============================================================ */
.v10-stage{
  position:relative;width:100%;aspect-ratio:4/5;
  min-width:0;overflow:hidden;
  border-radius:var(--r-lg);          /* softly rounded, as asked */
  background:var(--paper-2);
  container-type:inline-size;
}
.v10-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.v10-part{
  position:absolute;height:auto;display:block;object-fit:contain;
  pointer-events:none;user-select:none;-webkit-user-select:none;
  transform-origin:50% 100%;
}
.v10-sweep{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.26) 50%,transparent 66%);
  transform:translateX(-60%);
}

.is-armed .v10-base{opacity:0;transform:scale(1.02)}
.is-armed .v10-part{opacity:0}
.is-playing .v10-base{opacity:1;transform:none;transition:opacity .6s var(--e),transform .6s var(--e)}
.is-playing .v10-sweep{animation:bm-v10-sweep 1.5s ease-in-out .25s}
.is-lit .v10-sweep{animation:bm-v10-sweep 1.6s ease-in-out}
.is-lit .v10-stage{filter:brightness(1.03) saturate(1.02)}
/* Once a stage is done the install animation is replaced on the swaying
   planters, which drops its fill - so opacity and transform are pinned here or
   those layers snap back to the armed state and disappear. */
.is-done .v10-part{will-change:auto;opacity:1;transform:none}
/* The install rule `.is-playing .v10-part[data-anim="..."]` also carries
   (0,3,0), and it comes later - so a plain `[data-sway]` sway rule lost the
   animation-name fight while still forcing duration 6.5s, iteration infinite
   and fill none. The planters ended up replaying their entrance for ever and
   blinking out at the start of every cycle. One extra attribute in the
   selector puts the sway ahead of it. */
.is-done .v10-part[data-sway][data-anim]{
  opacity:1;transform-origin:50% 100%;
  animation:bm-p-sway 6.5s ease-in-out infinite both;
}

.is-playing .v10-part{
  animation-duration:var(--dur,.6s);
  animation-delay:var(--at,0s);
  animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
  will-change:transform,opacity;
}
.v10-part{--tr:1}
@media (max-width:640px){ .v10-part{--tr:.65} }

.is-playing .v10-part[data-anim="rise"]  {animation-name:bm-p-rise}
.is-playing .v10-part[data-anim="press"] {animation-name:bm-p-press}
.is-playing .v10-part[data-anim="snap"]  {animation-name:bm-p-snap;
                                          animation-timing-function:cubic-bezier(.2,1.5,.4,1)}
.is-playing .v10-part[data-anim="fromR"] {animation-name:bm-p-fromR}
.is-playing .v10-part[data-anim="fromL"] {animation-name:bm-p-fromL}
.is-playing .v10-part[data-anim="fall"]  {animation-name:bm-p-fall;animation-timing-function:linear}

/* ---- the building-material yard has its own vocabulary ---------------- */
.is-playing .v10-part[data-anim="slideR"]   {animation-name:bm-y-slide}
.is-playing .v10-part[data-anim="lower"]    {animation-name:bm-y-lower;
                                             animation-timing-function:cubic-bezier(.32,0,.24,1)}
.is-playing .v10-part[data-anim="fill"]     {animation-name:bm-y-fill;
                                             animation-timing-function:cubic-bezier(.28,.02,.28,1)}
.is-playing .v10-part[data-anim="fillShake"]{animation-name:bm-y-fill-shake;
                                             animation-timing-function:cubic-bezier(.28,.02,.28,1)}

@keyframes bm-y-slide{        /* rods pushed into the rack from the side */
  0%  {opacity:0;transform:translateX(calc(72px * var(--tr))) scaleX(.985)}
  50% {opacity:1}
  88% {transform:translateX(calc(-3px * var(--tr))) scaleX(1)}
  100%{opacity:1;transform:none}
}
@keyframes bm-y-lower{        /* heavy: comes straight down and stays put */
  0%  {opacity:0;transform:translateY(calc(-48px * var(--tr)))}
  32% {opacity:1}
  86% {transform:translateY(0)}
  93% {transform:translateY(calc(1.5px * var(--tr))) scaleY(.994)}
  100%{opacity:1;transform:none}
}
@keyframes bm-y-fill{         /* aggregate building up off the bay floor */
  0%  {opacity:0;transform:scaleY(.18);clip-path:inset(78% 0 0 0)}
  22% {opacity:1}
  85% {transform:scaleY(1.02);clip-path:inset(0 0 0 0)}
  93% {transform:scaleY(.995)}
  100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}
@keyframes bm-y-fill-shake{   /* same, then the stone shifts and settles */
  0%  {opacity:0;transform:scaleY(.18);clip-path:inset(78% 0 0 0)}
  22% {opacity:1}
  82% {transform:scaleY(1.02) translateX(0);clip-path:inset(0 0 0 0)}
  89% {transform:scaleY(1) translateX(calc(2px * var(--tr)))}
  95% {transform:scaleY(1) translateX(calc(-1.4px * var(--tr)))}
  100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}

@keyframes bm-v10-sweep{
  0%  {opacity:0;transform:translateX(-60%)}
  22% {opacity:1}
  78% {opacity:1}
  100%{opacity:0;transform:translateX(60%)}
}

/* a portrait stage needs less width than the old 16:9 one, so the copy takes
   the space back - roughly 40/60 on a desktop instead of 58/42 */
.tiles__in{grid-template-columns:40% 1fr}
.yard__in{grid-template-columns:1fr 40%}
.tanks__in{grid-template-columns:1fr 40%}
.bath__in {grid-template-columns:40% 1fr}
@media (min-width:961px){
  /* 38% was cut for the 4:5 portrait frame. Tiles, tanks and the yard now show
     the 6:4 desktop artwork, so at 38% they came out 456x304 - a thin strip
     beside a much taller copy column. A half-width column gives the landscape
     frame its height back and still leaves the copy its 54ch measure.
     Sanitaryware joined them once its 6:4 pack was corrected. */
  .tiles__in{grid-template-columns:50% 1fr}
  .bath__in{grid-template-columns:50% 1fr}
  .yard__in{grid-template-columns:1fr 50%}
  .tanks__in{grid-template-columns:1fr 50%}
  .tiles__copy .stitle,.tanks__copy .stitle,.bath__copy .stitle,.yard__copy .stitle{max-width:24ch}
  .tiles__lead,.tanks__lead,.bath__lead,.yard__lead{max-width:54ch}
  .tiles__specs,.tanks__specs,.yard__specs{max-width:100%}
}
@media (max-width:960px){
  .tiles__in,.tanks__in,.bath__in,.yard__in{grid-template-columns:1fr}
  .tiles__rack,.tanks__frame,.bath__stage,.yard__stage{order:-1}
  .v10-stage{max-width:520px;margin-inline:auto}
}
/* the other two animated frames get the same soft corner */
/* the road has to reach the bottom edge square - a curve there reads as the
   pavement peeling away from the section below */
.hero__art{border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}

/* ============================================================
   Mobile only - fit each showroom section into one screen by tightening the
   copy. The stage keeps the size it always had; only the text around it gets
   smaller, so the section can be read without scrolling past the picture.
   Nothing here applies above 640px, so the desktop layout is unchanged.
   ============================================================ */
@media (max-width:640px){
  .sec.tiles,.sec.tanks,.sec.bath,.sec.yard{padding-block:24px}
  .tiles__in,.tanks__in,.bath__in,.yard__in{gap:16px}

  .tiles__copy .eyebrow,.tanks__copy .eyebrow,.bath__copy .eyebrow,.yard__copy .eyebrow{
    margin-bottom:6px;font-size:10.5px;
  }
  .tiles__copy .stitle,.tanks__copy .stitle,.bath__copy .stitle,.yard__copy .stitle{
    font-size:21px;line-height:1.22;max-width:none;
  }
  .tiles__lead,.tanks__lead,.bath__lead,.yard__lead{
    margin-top:9px;font-size:13px;line-height:1.5;max-width:none;
  }

  .tiles__specs,.tanks__specs,.yard__specs{grid-template-columns:1fr 1fr;gap:6px;margin-top:11px}
  .tiles__specs li,.tanks__specs li,.yard__specs li{padding:6px 8px 6px 10px;border-left-width:2px}
  .tiles__specs b,.tanks__specs b,.yard__specs b{font-size:12px}
  .tiles__specs span,.tanks__specs span,.yard__specs span{display:none}   /* the sub-label is the first thing to go */

  .bath__specs{gap:4px;margin-top:8px}
  .bath__specs li{padding:5px 10px 5px 26px;font-size:12px}
  .bath__specs li::before{left:11px}
  .bath__lead{margin-top:8px;line-height:1.45}
  .bath__copy .btn{margin-top:11px}
  .bath__note,.yard__note{margin-top:5px;font-size:11px;line-height:1.4}
  .yard__line{display:none}     /* the banner in the picture already reads it out */
  .yard__specs{margin-top:8px;gap:4px}
  .yard__specs li{padding:5px 10px 5px 26px;font-size:12px}

  .tiles__copy .btn,.tanks__copy .btn,.bath__copy .btn,.yard__copy .btn{
    margin-top:13px;padding:10px 18px;font-size:13px;
  }
  .bath__note{margin-top:7px;font-size:11.5px}
}

/* Narrow phones need a little more back, so the copy loses another step of
   size and leading. The stage is still left alone. */
@media (max-width:380px){
  .sec.tiles,.sec.tanks,.sec.bath,.sec.yard{padding-block:16px}
  .tiles__in,.tanks__in,.bath__in,.yard__in{gap:12px}
  .tiles__copy .eyebrow,.tanks__copy .eyebrow,.bath__copy .eyebrow,.yard__copy .eyebrow{margin-bottom:4px;font-size:10px}
  .tiles__copy .stitle,.tanks__copy .stitle,.bath__copy .stitle,.yard__copy .stitle{font-size:19px}
  .tiles__lead,.tanks__lead,.bath__lead,.yard__lead{
    font-size:12.5px;margin-top:7px;line-height:1.45;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  }
  .tiles__specs,.tanks__specs,.yard__specs{margin-top:8px;gap:5px}
  .tiles__specs li,.tanks__specs li,.yard__specs li{padding:5px 7px 5px 9px}
  .bath__specs{margin-top:7px;gap:3px}
  .bath__specs li{padding:5px 8px 5px 24px;font-size:11.5px}
  .bath__specs li::before{left:10px}
  .tiles__copy .btn,.tanks__copy .btn,.bath__copy .btn,.yard__copy .btn{margin-top:9px;padding:8px 15px;font-size:12.5px}
  .bath__note,.yard__note{display:none}   /* optional micro-copy, first to go on a narrow phone */
  .bath__specs li{padding-block:4px}
}

/* ============================================================
   Showroom Stories — the photo gallery deck
   ------------------------------------------------------------
   One deck, two shapes. Every card's transform is written by main.js from a
   single number: how far it sits from the active card. On a desktop that
   number becomes a cover-flow (side cards swing back on the Y axis); on a
   phone it becomes a stack that peels off to the left. Nothing here positions
   an individual card, so adding or removing photographs needs no CSS.
   ============================================================ */
.stories{position:relative;overflow:hidden;padding-block:clamp(40px,4.4vw,64px);
  --cardw:min(56vw,620px);--deck-pad:26px}
.stories__in{position:relative}

/* the outlined wordmark behind everything */
.stories__mark{
  position:absolute;left:50%;top:clamp(96px,11vw,150px);translate:-50% 0;
  margin:0;white-space:nowrap;pointer-events:none;user-select:none;
  font-size:clamp(56px,11.5vw,158px);font-weight:700;letter-spacing:.01em;
  line-height:1;text-transform:uppercase;color:transparent;
  -webkit-text-stroke:1.4px rgba(22,33,92,.10);
}
@supports not (-webkit-text-stroke:1px red){.stories__mark{color:rgba(22,33,92,.07)}}

.stories__head{position:relative;max-width:min(640px,100%)}
.stories__title{font-weight:600;
  font-size:clamp(28px,4.2vw,50px);line-height:1.12;letter-spacing:-.01em;margin-bottom:10px}
.stories__title em{font-style:normal;display:block}
.stories__hint{margin:0;color:var(--muted);font-size:14px}
.stories__hint b{color:var(--red);font-weight:700;margin-inline:4px}
.stories__hint--thin{display:none}

/* the top-right link on a desktop, a centred button under the deck on a phone */
.stories__all{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  border:1.5px solid var(--navy);color:var(--navy);border-radius:var(--r-sm);
  padding:13px 22px;font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;transition:background .25s var(--e),color .25s var(--e);
}
.stories__all svg{width:14px;height:14px}
.stories__all:hover,.stories__all:focus-visible{background:var(--navy);color:#fff}

/* ---- the deck ---- */
.stories__deck{
  position:relative;margin-block:clamp(26px,3vw,40px);
  height:calc(var(--cardw)*.75 + var(--deck-pad));
  perspective:1700px;perspective-origin:50% 42%;
  touch-action:pan-y;cursor:grab;outline:none;
}
.stories__deck.is-grabbing{cursor:grabbing}
.stories__deck:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:var(--r-lg)}
.stories__track{list-style:none;margin:0;padding:0;position:absolute;inset:0;transform-style:preserve-3d}
.story{
  position:absolute;left:50%;top:0;width:var(--cardw);margin-left:calc(var(--cardw)/-2);
  transform-origin:50% 55%;backface-visibility:hidden;
}
.story__card{
  position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-2);box-shadow:var(--sh-3);
}
.story__img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--line-2)}
.story__cap{
  position:absolute;left:14px;right:14px;bottom:14px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(10px,1.4vw,18px);
  padding:14px clamp(14px,1.6vw,20px);border-radius:var(--r-md);
  background:rgba(22,33,92,.82);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  color:#fff;
}
.story__no{color:var(--red);font-size:clamp(15px,1.5vw,19px);font-weight:700;letter-spacing:.02em}
.story__txt{min-width:0;border-left:1px solid rgba(255,255,255,.28);padding-left:clamp(10px,1.4vw,16px)}
.story__txt b{display:block;font-size:clamp(12.5px,1.25vw,15px);font-weight:600;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story__txt i{display:block;font-style:normal;font-size:clamp(11px,1vw,12.5px);
  color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story__go{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  transition:background .2s,transform .2s var(--e);
}
.story__go svg{width:17px;height:17px}
.story__go:hover,.story__go:focus-visible{background:var(--red);transform:translateX(2px)}
/* only the front card is reachable; the rest are inert until they come forward */
.story[data-off]:not([data-off="0"]) .story__go{pointer-events:none}


/* ---- the chapter rail ---- */
.stories__line{
  position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
}
.stories__line::before,.stories__line::after{
  content:"";position:absolute;left:0;top:34px;height:2px;border-radius:2px;
}
.stories__line::before{right:0;background:var(--line)}
.stories__line::after{width:calc(var(--p,0)*1%);background:var(--red);transition:width .5s var(--e)}
.stories__step button{
  position:relative;z-index:2;display:grid;justify-items:center;gap:9px;width:100%;
  border:0;background:none;padding:0 4px;cursor:pointer;color:var(--muted);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:color .25s var(--e);
}
.stories__step .n{order:-1;font-size:12px;letter-spacing:.06em}
.stories__step i{
  order:0;width:11px;height:11px;border-radius:var(--r-pill);
  background:var(--paper);border:2px solid var(--line);
  transition:border-color .3s var(--e),background .3s var(--e),box-shadow .3s var(--e);
}
.stories__step.is-on button{color:var(--navy)}
.stories__step.is-on .n{color:var(--red)}
.stories__step.is-on i{background:var(--red);border-color:var(--red);box-shadow:0 0 0 5px rgba(216,24,36,.14)}
.stories__step button:hover i,.stories__step button:focus-visible i{border-color:var(--red)}

/* ---- progress + counter (the phone's rail) ---- */
.stories__foot{display:none;flex-direction:column;align-items:center;gap:14px;margin-top:26px}
.stories__bar{display:block;width:min(230px,62%);height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.stories__bar i{display:block;height:100%;width:calc(var(--q,8)*1%);background:var(--red);
  border-radius:3px;transition:width .45s var(--e)}
.stories__count{margin:0;font-size:15px;color:var(--muted);letter-spacing:.06em}
.stories__count b{color:var(--red);font-weight:700}
.stories__count s{text-decoration:none;margin-inline:2px}

/* ---- desktop: the link sits in the head's top-right corner ---- */
@media (min-width:961px){
  .stories__all{position:absolute;right:0;top:4px}
}

/* ---- phone: a stack of cards, a progress bar, the button underneath ---- */
@media (max-width:960px){
  .stories{--cardw:min(78vw,400px);--deck-pad:64px}
  .stories__mark{top:clamp(56px,17vw,120px);font-size:clamp(52px,17vw,120px)}
  .stories__head{max-width:none;text-align:center;margin-inline:auto}
  .stories .eyebrow--left,.stories .stitle--left{text-align:center}
  .stories__title em{display:inline}
  .stories__hint{text-align:center}
  .stories__hint--wide{display:none}
  .stories__hint--thin{display:inline}
  .stories__deck{cursor:default}
  .stories__line{display:none}
  .stories__foot{display:flex}
  .stories__all{display:flex;width:max-content;margin:22px auto 0}
  .story__cap{left:10px;right:10px;bottom:10px;padding:12px 14px}
  .story__go{width:34px;height:34px}
}
@media (max-width:420px){
  .stories{--cardw:min(84vw,340px)}
  .story__txt i{display:none}
}

/* ---- the entrance ---- */
.stories.is-armed .stories__mark,
.stories.is-armed .stories__head>*,
.stories.is-armed .stories__step,
.stories.is-armed .stories__foot,
.stories.is-armed .stories__all{opacity:0;transform:translateY(16px)}
.stories.is-playing .stories__mark,
.stories.is-playing .stories__head>*,
.stories.is-playing .stories__step,
.stories.is-playing .stories__foot,
.stories.is-playing .stories__all{
  opacity:1;transform:none;transition:opacity .7s var(--e) var(--d,0s),transform .7s var(--e) var(--d,0s);
}
.stories.is-playing .stories__mark{transition-duration:1.1s}

@media (prefers-reduced-motion:reduce){
  .stories.is-armed .stories__mark,.stories.is-armed .stories__head>*,
  .stories.is-armed .stories__step,.stories.is-armed .stories__foot,
  .stories.is-armed .stories__all{opacity:1;transform:none}
}

/* ============================================================
   About Balaji Mart + Our Team  (about.html only)
   ------------------------------------------------------------
   An editorial page: serif headlines, a red hairline running down the left of
   everything, and a blueprint wash behind. It shares the site's tokens, so a
   change to --red or --navy carries through here too. Nothing in this block
   applies anywhere else - every rule is under .ab or .team.
   ============================================================ */
.ab, .team{position:relative;overflow:hidden}
.ab{padding-block:clamp(30px,4vw,56px) clamp(24px,3vw,40px)}
.team{padding-block:clamp(34px,4.4vw,64px)}

/* the faint drawing-board wash: a dot grid and a blueprint corner */
.ab__grid,.team__grid{
  position:absolute;pointer-events:none;width:78px;height:78px;opacity:.5;
  background-image:radial-gradient(var(--line) 1.4px,transparent 1.4px);
  background-size:13px 13px;
}
.ab__grid{right:var(--gut);top:26px}
.team__grid{right:var(--gut);top:20px}
.team__grid--b{right:auto;left:var(--gut);top:auto;bottom:96px}
.ab__blue,.team__blue{
  position:absolute;right:-4%;pointer-events:none;width:min(48%,560px);
  opacity:.5;color:var(--blue);
}
.ab__blue{bottom:8%}
.team__blue{top:6%}

/* ---- the heading ---- */
.ab__head{position:relative;padding-left:clamp(16px,2vw,26px);max-width:min(640px,100%)}
.ab__head::before{
  content:"";position:absolute;left:0;top:4px;bottom:6px;width:2px;
  background:var(--red);border-radius:2px;
}
.ab__eyebrow,.team__eyebrow{
  display:block;color:var(--red);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px;
}
.ab__title,.team__title,.ab__cta h2,.tm__name{
  font-weight:600;
  color:var(--navy);line-height:1.1;letter-spacing:-.01em;
}
.ab__title{font-size:clamp(30px,5vw,54px);margin:0}

/* ---- the story frame: a film player, whether or not a film is loaded ---- */
.ab__film{
  /* everything inside is absolutely positioned, so the frame carries its own
     shape - 16:9 like a film, 4:3 on a phone where a wide letterbox is thin */
  position:relative;aspect-ratio:16/9;
  margin:clamp(22px,3vw,34px) 0 clamp(20px,2.6vw,30px);
  border-radius:var(--r-lg);overflow:hidden;background:#0F163C;box-shadow:var(--sh-3);
  isolation:isolate;
}
.ab__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 58% at 50% 46%,rgba(15,22,60,.06),rgba(15,22,60,.42) 100%),
    linear-gradient(to top,rgba(15,22,60,.72),transparent 42%);
}
.ab__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  display:grid;place-items:center;width:clamp(62px,7vw,88px);height:clamp(62px,7vw,88px);
  border:0;cursor:pointer;border-radius:50%;background:var(--blue);color:#fff;
  box-shadow:0 0 0 5px rgba(255,255,255,.92),0 0 0 8px var(--red),0 14px 34px rgba(15,22,60,.4);
  transition:transform .3s var(--e),background .3s var(--e);
}
.ab__play svg{width:clamp(20px,2.2vw,27px);height:clamp(20px,2.2vw,27px);margin-left:3px}
.ab__play:hover,.ab__play:focus-visible{transform:translate(-50%,-50%) scale(1.07);background:var(--navy)}
.ab__play:disabled{cursor:default;opacity:.92}
.ab__play:disabled:hover{transform:translate(-50%,-50%);background:var(--blue)}
/* a slow halo, so the badge reads as a control rather than a sticker */
.ab__play::after{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:1.5px solid rgba(216,24,36,.45);animation:bm-ab-halo 3.2s ease-out infinite;
}
@keyframes bm-ab-halo{0%{opacity:.8;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.3)}}

.ab__bar{
  position:absolute;left:0;right:0;bottom:clamp(26px,3vw,38px);
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:0 clamp(16px,2vw,26px);color:#fff;pointer-events:none;
  font-size:clamp(11px,1.2vw,13px);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.ab__dot{width:5px;height:5px;border-radius:50%;background:var(--red);flex:none}
.ab__full{
  position:absolute;right:clamp(14px,1.8vw,22px);bottom:clamp(26px,3vw,38px);
  display:grid;place-items:center;width:clamp(38px,4vw,50px);height:clamp(38px,4vw,50px);
  border:0;border-radius:var(--r-sm);cursor:pointer;
  background:rgba(15,22,60,.55);color:#fff;backdrop-filter:blur(6px);
  transition:background .25s var(--e);
}
.ab__full svg{width:clamp(16px,1.7vw,20px);height:clamp(16px,1.7vw,20px)}
.ab__full:hover,.ab__full:focus-visible{background:rgba(15,22,60,.8)}
.ab__full:disabled{cursor:default;opacity:.7}
.ab__full:disabled:hover{background:rgba(15,22,60,.55)}

.ab__lead{font-size:clamp(15px,1.5vw,17.5px);line-height:1.65;color:var(--ink);max-width:52ch;margin:0}

/* ---- our story ---- */
.ab__sub{
  display:flex;align-items:center;gap:12px;margin:clamp(20px,2.4vw,28px) 0 10px;
  color:var(--red);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.ab__sub::after{content:"";width:26px;height:1.5px;background:var(--red);border-radius:2px}
.ab__body{margin:0;max-width:56ch}

/* ---- the four category chips ---- */
.ab__chips{
  display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:clamp(20px,2.4vw,28px) 0 0;padding:0;
}
.ab__chips a{
  display:inline-flex;align-items:center;gap:10px;padding:13px 18px;
  border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--paper);
  color:var(--navy);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .25s var(--e),color .25s var(--e),transform .25s var(--e);
}
.ab__chips svg{width:19px;height:19px;color:var(--blue);flex:none;transition:color .25s var(--e)}
.ab__chips a:hover,.ab__chips a:focus-visible{border-color:var(--red);transform:translateY(-2px)}
.ab__chips a:hover svg,.ab__chips a:focus-visible svg{color:var(--red)}

/* ---- the numbered promises ---- */
.ab__points{list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0;display:grid;gap:clamp(12px,1.5vw,18px)}
.ab__points li{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:clamp(12px,1.6vw,20px)}
.ab__points i{
  font-style:normal;font-weight:700;
  font-size:clamp(26px,3.2vw,34px);color:var(--red);line-height:1;min-width:1.8ch;
}
.ab__points s{
  text-decoration:none;position:relative;display:block;width:clamp(44px,6vw,74px);
  height:1.5px;background:var(--red);
}
.ab__points s::after{
  content:"";position:absolute;right:-4px;top:50%;translate:0 -50%;
  width:9px;height:9px;border-radius:50%;border:1.5px solid var(--red);background:var(--paper);
}
.ab__points b{font-size:clamp(15px,1.6vw,18px);font-weight:500;color:var(--navy)}

/* ---- since 1984 ---- */
.ab__since{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:clamp(28px,3.4vw,44px) 0;color:var(--navy);
  font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
}
.ab__since::before,.ab__since::after{content:"";height:1.5px;width:clamp(40px,9vw,110px);background:var(--red)}

/* ---- why choose ---- */
.ab__whys{
  list-style:none;margin:clamp(16px,2vw,24px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px) clamp(20px,3vw,44px);
}
.ab__whys li{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.6vw,18px);align-items:start}
.ab__whys svg{width:clamp(34px,3.6vw,44px);height:clamp(34px,3.6vw,44px);color:var(--navy);flex:none}
.ab__whys h3{font-size:clamp(14.5px,1.5vw,17px);font-weight:600;color:var(--navy);margin:2px 0 5px}
.ab__whys p{margin:0;font-size:13.5px;line-height:1.6}
/* the hairlines that split the four cells */
.ab__whys li{position:relative}
.ab__whys li:nth-child(-n+2)::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(clamp(18px,2.4vw,30px)/-2);
  height:1px;background:var(--line-2);
}
.ab__whys li:nth-child(odd)::before{
  content:"";position:absolute;top:0;bottom:0;right:calc(clamp(20px,3vw,44px)/-2);
  width:1px;background:var(--line-2);
}

/* ---- the contact card ---- */
.ab__cta{
  margin-top:clamp(30px,3.6vw,48px);border-radius:var(--r-xl);
  background:var(--navy);color:#fff;padding:clamp(26px,3.4vw,46px) clamp(20px,3vw,44px);
}
.ab__cta h2{color:#fff;font-size:clamp(23px,3vw,34px);text-align:center;margin:0 0 8px}
.ab__cta .rule{display:block;width:64px;height:2px;background:var(--red);margin:0 auto clamp(20px,2.6vw,30px);border-radius:2px}
.ab__rows{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ab__rows li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(12px,1.8vw,20px);
  padding:clamp(12px,1.6vw,17px) 0;border-bottom:1px solid rgba(255,255,255,.16)}
.ab__rows li:last-child{border-bottom:0}
.ab__rows i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.42);flex:none}
.ab__rows svg{width:18px;height:18px}
.ab__rows a,.ab__rows span{color:#fff;font-size:clamp(14px,1.4vw,16px)}
.ab__rows a:hover,.ab__rows a:focus-visible{text-decoration:underline}
.ab__note{display:flex;align-items:center;justify-content:center;gap:9px;
  margin:clamp(16px,2vw,22px) 0 clamp(14px,1.8vw,20px);
  color:rgba(255,255,255,.78);font-size:13px;text-align:center}
.ab__note svg{width:20px;height:20px;flex:none;color:rgba(255,255,255,.6)}
.ab__go{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--red);color:#fff;border-radius:var(--r-sm);padding:16px 22px;
  font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s var(--e),transform .25s var(--e);
}
.ab__go:hover,.ab__go:focus-visible{background:var(--red-dark);transform:translateY(-2px)}
.ab__go svg{width:15px;height:15px}

/* ============================================================
   Our Team - a rail down the left with the roles alternating across it
   ============================================================ */
.team__head{max-width:min(620px,100%)}
.team__title{font-size:clamp(27px,4.4vw,48px);margin:0 0 12px}
.team__lead{margin:0;max-width:48ch}
.team__rule{height:1.5px;background:var(--red);margin:clamp(22px,2.6vw,32px) 0 0;
  width:min(520px,70%);border:0;border-radius:2px}

.tm{position:relative;list-style:none;margin:clamp(26px,3.4vw,44px) 0 0;padding:0 0 0 clamp(0px,3vw,42px)}
.tm::before{
  content:"";position:absolute;left:0;top:8px;bottom:60px;width:1.5px;background:var(--red);opacity:.55;
}
.tm__row{position:relative;display:grid;align-items:center;gap:clamp(18px,3vw,46px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-bottom:clamp(26px,3.4vw,48px)}
.tm__row::before{
  content:"";position:absolute;left:calc(clamp(0px,3vw,42px)*-1 - .75px);top:50%;translate:-50% -50%;
  width:13px;height:13px;border-radius:50%;border:1.5px solid var(--red);background:var(--paper);
}
.tm__row:nth-child(even) .tm__fig{order:2}
.tm__fig{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);box-shadow:var(--sh-2)}
.tm__fig img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}

/* until real photographs arrive, a plate rather than a stock face */
.tm__plate{
  position:relative;display:grid;place-items:center;gap:14px;aspect-ratio:4/5;
  background:
    radial-gradient(120% 90% at 50% 0,rgba(255,255,255,.10),transparent 60%),
    linear-gradient(160deg,var(--navy),var(--blue));
  color:#fff;text-align:center;padding:24px;
}
.tm__plate::after{
  content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.20);border-radius:var(--r-md);
}
.tm__plate svg{width:clamp(48px,7vw,72px);height:clamp(48px,7vw,72px);opacity:.9}
.tm__plate b{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.82}

.tm__no{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.tm__no i{font-style:normal;font-weight:700;
  font-size:clamp(24px,3vw,32px);color:var(--red);line-height:1}
.tm__no s{text-decoration:none;position:relative;display:block;width:clamp(34px,4.5vw,56px);height:1.5px;background:var(--red)}
.tm__no s::after{content:"";position:absolute;right:-4px;top:50%;translate:0 -50%;
  width:9px;height:9px;border-radius:50%;border:1.5px solid var(--red);background:var(--paper)}
.tm__name{font-size:clamp(21px,2.9vw,32px);margin:0 0 10px}
.tm__role{display:block;color:var(--navy);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}
.tm__role+.rule{display:block;width:34px;height:1.5px;background:var(--red);margin-bottom:14px;border-radius:2px}
.tm__txt{margin:0 0 16px;font-size:14px;line-height:1.68;max-width:42ch}
.tm__more{display:inline-flex;align-items:center;color:var(--red);transition:transform .25s var(--e)}
.tm__more svg{width:28px;height:16px}
.tm__more:hover,.tm__more:focus-visible{transform:translateX(4px)}

.team__foot{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,34px);
  flex-wrap:wrap;border-top:1px solid var(--line);padding-top:clamp(20px,2.6vw,30px);
  margin-top:clamp(8px,1.4vw,18px);
}
.team__foot p{margin:0;font-weight:500;
  font-size:clamp(15px,1.8vw,19px);color:var(--navy)}
.team__foot a{
  display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--navy);
  color:var(--navy);border-radius:var(--r-sm);padding:14px 24px;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:background .25s var(--e),color .25s var(--e);
}
.team__foot a svg{width:14px;height:14px}
.team__foot a:hover,.team__foot a:focus-visible{background:var(--navy);color:#fff}

/* ---- phone ---- */
@media (max-width:820px){
  .ab__whys{grid-template-columns:1fr}
  .ab__whys li::before{display:none}
  .ab__whys li:nth-child(-n+3)::after{content:"";position:absolute;left:0;right:0;
    bottom:calc(clamp(18px,2.4vw,30px)/-2);height:1px;background:var(--line-2)}
  .ab__whys li:nth-child(2)::after{display:block}
  .tm__row{grid-template-columns:1fr;gap:18px}
  .tm__row:nth-child(even) .tm__fig{order:0}
  .tm__fig{max-width:340px}
  .tm__row::before{top:26px}
  .team__foot{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .ab__head{max-width:none}
  .ab__blue,.team__blue,.ab__grid,.team__grid{display:none}
  .ab__film{aspect-ratio:4/3}
  .ab__bar{bottom:30px;letter-spacing:.1em}
  .ab__points li{grid-template-columns:auto auto 1fr;gap:10px}
  .ab__points s{width:32px}
  .ab__since{letter-spacing:.18em;font-size:11px}
  .ab__cta{border-radius:var(--r-lg)}
  .tm__fig{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .ab__chips a,.ab__go,.tm__more,.ab__play{transition:none}
}

/* the three tile boards turn in from edge-on, one after another. The origin is
   the board's own centre so it pivots where it stands, and the overshoot at 62%
   is the swing settling rather than a bounce. */
.is-playing .v10-part[data-anim="flip"]{
  transform-origin:50% 50%;backface-visibility:visible;
  animation:bm-tile-flip var(--dur) cubic-bezier(.2,.8,.25,1) var(--at) both;
}
@keyframes bm-tile-flip{
  0%  {opacity:0;transform:perspective(1100px) rotateY(-92deg) scale(.97)}
  30% {opacity:1}
  62% {transform:perspective(1100px) rotateY(9deg) scale(1)}
  82% {transform:perspective(1100px) rotateY(-3.5deg)}
  100%{opacity:1;transform:perspective(1100px) rotateY(0deg)}
}

/* ============================================================
   Brands grid (brands.html)
   Each tile is the brand's name set as a wordmark plus what we stock from
   them. Swap .bg__mark's contents for a real logo file and nothing else moves.
   ============================================================ */
.bg__grid{
  list-style:none;margin:clamp(22px,2.8vw,34px) 0 0;padding:0;
  display:grid;gap:clamp(10px,1.4vw,16px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(150px,17vw,200px),1fr));
}
.bg__tile{
  display:grid;align-content:center;justify-items:center;gap:8px;
  min-height:clamp(104px,11vw,132px);padding:18px 14px;text-align:center;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);
  transition:border-color .25s var(--e),box-shadow .25s var(--e),transform .25s var(--e);
}
.bg__tile:hover{border-color:var(--blue);box-shadow:var(--sh-2);transform:translateY(-3px)}
.bg__mark{display:grid;place-items:center;min-height:34px}
.bg__mark b{
  font-size:clamp(15px,1.7vw,19px);font-weight:700;color:var(--navy);
  letter-spacing:.01em;line-height:1.15;
}
.bg__mark img{max-width:min(140px,100%);height:auto;object-fit:contain}
.bg__what{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.06em;line-height:1.4}
.bg__note{margin:clamp(18px,2.2vw,26px) 0 0;font-size:14px;color:var(--body)}
.bg__note a{color:var(--red);font-weight:600}
.bg__note a:hover{text-decoration:underline}

/* ============================================================
   Gallery grid (gallery.html) - every photograph, not just the four
   ============================================================ */
.gg__grid{
  margin-top:clamp(20px,2.6vw,30px);
  display:grid;gap:clamp(10px,1.4vw,16px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(200px,22vw,290px),1fr));
}
.gg__cell{
  margin:0;border-radius:var(--r-md);overflow:hidden;cursor:zoom-in;
  background:var(--paper-2);box-shadow:var(--sh-1);
  transition:box-shadow .3s var(--e),transform .3s var(--e);
}
.gg__cell img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .5s var(--e)}
.gg__cell:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.gg__cell:hover img{transform:scale(1.045)}

/* ============================================================
   From the Showroom - the blog band on the homepage
   ============================================================ */
.bl{position:relative;background:var(--paper-2);overflow:hidden}
.bl__grid-dots{
  position:absolute;right:var(--gut);top:26px;width:78px;height:78px;opacity:.6;
  pointer-events:none;background-image:radial-gradient(var(--line) 1.4px,transparent 1.4px);
  background-size:13px 13px;
}
.bl__head{
  position:relative;display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(16px,3vw,40px);flex-wrap:wrap;
}
.bl__title{font-weight:600;
  font-size:clamp(23px,3.1vw,36px);line-height:1.14;letter-spacing:-.01em}
.bl__all{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  border:1.5px solid var(--navy);color:var(--navy);border-radius:var(--r-sm);
  padding:13px 22px;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  transition:background .25s var(--e),color .25s var(--e);
}
.bl__all svg{width:14px;height:14px}
.bl__all:hover,.bl__all:focus-visible{background:var(--navy);color:#fff}

.bl__list{
  list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;
  display:grid;gap:clamp(16px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(clamp(250px,26vw,330px),1fr));
}
.bl__link{
  display:grid;height:100%;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;color:inherit;
  transition:border-color .3s var(--e),box-shadow .3s var(--e),transform .3s var(--e);
}
.bl__link:hover,.bl__link:focus-visible{border-color:var(--blue);box-shadow:var(--sh-2);transform:translateY(-4px)}
.bl__shot{display:block;overflow:hidden;background:var(--line-2)}
.bl__shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .55s var(--e)}
.bl__link:hover .bl__shot img{transform:scale(1.05)}
.bl__meta{display:flex;align-items:center;gap:10px;padding:16px clamp(16px,1.8vw,22px) 0}
.bl__meta b{
  color:var(--red);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.bl__meta i{
  font-style:normal;color:var(--muted);font-size:11.5px;position:relative;padding-left:12px;
}
.bl__meta i::before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:4px;height:4px;border-radius:50%;background:var(--line)}
.bl__t{
  margin:9px clamp(16px,1.8vw,22px) 0;font-size:clamp(16px,1.7vw,19px);font-weight:600;
  color:var(--navy);line-height:1.32;
}
.bl__x{display:block;margin:9px clamp(16px,1.8vw,22px) 0;font-size:13.5px;line-height:1.6;color:var(--body)}
.bl__go{
  display:inline-flex;align-items:center;gap:8px;margin:14px clamp(16px,1.8vw,22px) 18px;
  color:var(--red);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.bl__go svg{width:13px;height:13px;transition:transform .25s var(--e)}
.bl__link:hover .bl__go svg{transform:translate(2px,-2px)}

/* ---- the articles page ---- */
.bp__art{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(18px,2.6vw,34px);align-items:center;
  padding-block:clamp(20px,2.6vw,32px);border-bottom:1px solid var(--line);
}
.bp__art:last-child{border-bottom:0}
.bp__shot{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--paper-2)}
.bp__shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.bp__meta{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.bp__meta b{color:var(--red);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.bp__meta i{font-style:normal;color:var(--muted);font-size:11.5px}
.bp__t{font-size:clamp(19px,2.3vw,26px);font-weight:600;color:var(--navy);margin:0 0 10px;line-height:1.28}
.bp__x{margin:0 0 12px;max-width:62ch}
.bp__soon{margin:0;font-size:13px;color:var(--muted);max-width:56ch}
.bp__soon a{color:var(--red);font-weight:600}
.bp__soon a:hover{text-decoration:underline}

@media (max-width:760px){
  .bl__head{flex-direction:column;align-items:flex-start}
  .bp__art{grid-template-columns:1fr}
  .bp__shot{max-width:360px}
}

/* ============================================================
   Contact (contact.html)
   Four ways in across the top, then the enquiry beside the hours and the map.
   Same editorial furniture as About: serif heading, red hairline, dot grid.
   ============================================================ */
.ct{position:relative;overflow:hidden;padding-block:clamp(30px,4vw,56px)}
.ct__dots{
  position:absolute;right:var(--gut);top:26px;width:78px;height:78px;opacity:.5;
  pointer-events:none;background-image:radial-gradient(var(--line) 1.4px,transparent 1.4px);
  background-size:13px 13px;
}
.ct__head{position:relative;padding-left:clamp(16px,2vw,26px);max-width:min(640px,100%)}
.ct__head::before{content:"";position:absolute;left:0;top:4px;bottom:6px;width:2px;
  background:var(--red);border-radius:2px}
.ct__title{
  font-weight:600;
  color:var(--navy);font-size:clamp(28px,4.6vw,50px);line-height:1.12;
  letter-spacing:-.01em;margin:0 0 12px;
}
.ct__lead{margin:0;max-width:52ch;font-size:clamp(14.5px,1.4vw,16.5px);color:var(--ink)}

/* ---- the four ways in ---- */
.ct__ways{
  list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;
  display:grid;gap:clamp(10px,1.4vw,16px);
  grid-template-columns:repeat(auto-fit,minmax(clamp(190px,20vw,250px),1fr));
}
.ct__way a{
  display:grid;gap:4px;height:100%;padding:clamp(16px,2vw,22px);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);color:inherit;
  transition:border-color .25s var(--e),box-shadow .25s var(--e),transform .25s var(--e);
}
.ct__way a:hover,.ct__way a:focus-visible{border-color:var(--blue);box-shadow:var(--sh-2);transform:translateY(-3px)}
.ct__ico{
  display:grid;place-items:center;width:42px;height:42px;margin-bottom:10px;
  border-radius:var(--r-pill);background:var(--red-soft);color:var(--red);
}
.ct__ico svg{width:20px;height:20px}
.ct__lbl{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ct__big{font-size:clamp(15px,1.6vw,18px);font-weight:600;color:var(--navy);line-height:1.3}
.ct__sub{font-size:12.5px;color:var(--body);line-height:1.5}

/* ---- enquiry beside the hours and map ---- */
.ct__split{
  display:grid;gap:clamp(18px,2.6vw,34px);margin-top:clamp(22px,2.8vw,34px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;
}
.ct__h2{font-size:clamp(17px,1.9vw,21px);font-weight:600;color:var(--navy);margin:0 0 6px}
.ct__form{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  padding:clamp(18px,2.4vw,28px);box-shadow:var(--sh-1);
}
.ct__note{margin:0 0 16px;font-size:12.5px;color:var(--muted);line-height:1.55}
.ct__f{display:block;margin-bottom:13px}
.ct__f>span{display:block;margin-bottom:6px;font-size:11.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.ct__f input,.ct__f select,.ct__f textarea{
  width:100%;font:inherit;font-size:14.5px;color:var(--ink);background:var(--paper-2);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;
  transition:border-color .2s var(--e),background .2s var(--e);
}
.ct__f textarea{resize:vertical;min-height:96px}
.ct__f input:focus,.ct__f select:focus,.ct__f textarea:focus{
  outline:none;border-color:var(--blue);background:var(--paper);
}
.ct__f input:invalid:not(:placeholder-shown){border-color:var(--red)}
.ct__send{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  margin-top:6px;border:0;cursor:pointer;background:var(--red);color:#fff;
  border-radius:var(--r-sm);padding:15px 22px;font:inherit;
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:background .25s var(--e),transform .25s var(--e);
}
.ct__send svg{width:17px;height:17px}
.ct__send:hover,.ct__send:focus-visible{background:var(--red-dark);transform:translateY(-2px)}
.ct__alt{margin:12px 0 0;font-size:13px;color:var(--body);text-align:center}
.ct__alt a{color:var(--red);font-weight:600}
.ct__alt a:hover{text-decoration:underline}

.ct__aside{display:grid;gap:clamp(14px,1.8vw,20px)}
.ct__hours{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  padding:clamp(18px,2.4vw,26px);
}
.ct__hours ul{list-style:none;margin:12px 0 0;padding:0}
.ct__hours li{display:flex;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.ct__hours li:last-child{border-bottom:0}
.ct__hours b{color:var(--navy);font-weight:600;white-space:nowrap}
.ct__open{display:flex;align-items:center;gap:9px;margin:12px 0 0;font-size:13px;font-weight:600}
.ct__open i{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.ct__open.is-open{color:#15803D}
.ct__open.is-open i{background:#16A34A;box-shadow:0 0 0 4px rgba(22,163,74,.16)}
.ct__open.is-shut{color:var(--red)}
.ct__open.is-shut i{background:var(--red);box-shadow:0 0 0 4px rgba(216,24,36,.14)}

.ct__map{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--paper-2)}
.ct__map iframe{display:block;width:100%;height:clamp(240px,32vw,340px);border:0}
.ct__dir{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 18px;background:var(--navy);color:#fff;
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  transition:background .25s var(--e);
}
.ct__dir svg{width:14px;height:14px}
.ct__dir:hover,.ct__dir:focus-visible{background:var(--blue)}

@media (max-width:860px){
  .ct__split{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ct__dots{display:none}
  .ct__ways{grid-template-columns:1fr 1fr}
  .ct__big{font-size:15px}
}
@media (max-width:400px){
  .ct__ways{grid-template-columns:1fr}
}

/* ---- the story frame, as a working player -------------------------------
   No film was supplied, so the frame runs a reel of the showroom photographs
   instead of sitting inert behind a dead button. The transport is real: the
   clock counts, the scrub seeks, and full screen works. Give STORY_VIDEO a
   file and the film replaces the reel under the same controls.
   ------------------------------------------------------------------------ */
.ab__reel{position:absolute;inset:0;overflow:hidden;background:#0F163C}
.ab__slide{
  position:absolute;inset:0;margin:0;opacity:0;
  will-change:opacity,transform;
}
.ab__slide[data-on]{opacity:1}
.ab__slide img{display:block;width:100%;height:100%;object-fit:cover}
.ab__film video,.ab__film iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;
}

.ab__now{font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.ab__len{font-weight:500;letter-spacing:.08em;color:rgba(255,255,255,.7);
  font-variant-numeric:tabular-nums}
.ab__cap{
  flex:1;min-width:0;text-align:right;font-weight:500;letter-spacing:.02em;
  text-transform:none;font-size:.92em;color:rgba(255,255,255,.78);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* the scrub is a button, so it is reachable and seekable from the keyboard */
.ab__scrub{
  position:absolute;left:clamp(14px,1.8vw,22px);right:clamp(14px,1.8vw,22px);
  bottom:clamp(12px,1.5vw,18px);height:16px;padding:0;border:0;background:none;
  cursor:pointer;display:flex;align-items:center;
}
.ab__scrub::before{
  content:"";position:absolute;left:0;right:0;height:3px;border-radius:3px;
  background:rgba(255,255,255,.28);
}
.ab__scrub i{
  position:relative;display:block;height:3px;width:0;border-radius:3px;
  background:var(--red);transition:width .12s linear;
}
.ab__scrub i::after{
  content:"";position:absolute;right:-5px;top:50%;translate:0 -50%;
  width:11px;height:11px;border-radius:50%;background:var(--red);
  opacity:0;transition:opacity .2s var(--e);
}
.ab__scrub:hover i::after,.ab__scrub:focus-visible i::after,
.ab__film.is-live .ab__scrub i::after{opacity:1}
.ab__scrub:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}

/* while it runs, the badge steps aside and the scrim lifts */
.ab__film.is-live .ab__play{opacity:0;transform:translate(-50%,-50%) scale(.72);pointer-events:none}
.ab__film.is-live .ab__scrim{opacity:.55}
.ab__scrim{transition:opacity .5s var(--e)}
.ab__play{transition:transform .35s var(--e),background .3s var(--e),opacity .35s var(--e)}
/* a hover anywhere brings the pause control back */
.ab__film.is-live:hover .ab__play,.ab__film.is-live:focus-within .ab__play{
  opacity:1;transform:translate(-50%,-50%) scale(.82);pointer-events:auto;
}
.ab__film.is-live .ab__play::after{animation:none;opacity:0}

.ab__film:fullscreen{border-radius:0;aspect-ratio:auto;height:100%}
.ab__film:fullscreen .ab__reel{position:absolute;inset:0}
.ab__film:fullscreen .ab__slide img{object-fit:contain;background:#000}

@media (prefers-reduced-motion:reduce){
  .ab__slide{transition:none !important;transform:none !important}
  .ab__play,.ab__scrim{transition:none}
}

/* ============================================================
   Footer — rebuilt to the supplied design
   Blueprint line-work at both edges, four columns split by hairlines, the
   contact block lifted out as a white card, and a bottom bar the red rule
   runs into. Same tokens as the rest of the site.
   ============================================================ */
.ft{
  position:relative;overflow:hidden;
  background:var(--blue);color:rgba(255,255,255,.78);
  font-size:13.5px;padding-top:clamp(38px,4.6vw,62px);
}
.ft__bp{
  position:absolute;bottom:0;width:min(30%,340px);color:#fff;opacity:.09;
  pointer-events:none;
}
.ft__bp--l{left:-2%}
.ft__bp--r{right:-2%}
.ft__in{position:relative}

.ft__g{
  display:grid;grid-template-columns:1.45fr 1fr 1fr 1.35fr;
  gap:clamp(20px,2.6vw,40px);align-items:start;
}
/* hairlines between the columns rather than around them */
.ft__col{padding-left:clamp(16px,2.4vw,38px);border-left:1px solid rgba(255,255,255,.14)}

.ft__logo{display:inline-block;background:#fff;padding:10px 16px;border-radius:var(--r-md);margin-bottom:16px}
.ft__logo img{height:38px;width:auto;display:block}
.ft__brand p{margin:0;max-width:34ch;line-height:1.75}

.ft h5{
  position:relative;color:#fff;font-size:12.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:26px;
}
.ft h5::after{
  content:"";position:absolute;left:0;bottom:-11px;
  width:34px;height:2.5px;border-radius:2px;background:var(--red);
}
.ft ul{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.ft a{transition:color .2s var(--e)}
.ft__l a:hover,.ft__l a:focus-visible{color:#fff}

.ft__soc{display:flex;gap:11px;margin-top:20px}
.ft__soc a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.13);color:#fff;
  transition:background .22s var(--e),transform .22s var(--e);
}
.ft__soc a:hover,.ft__soc a:focus-visible{background:var(--red);transform:translateY(-2px)}
.ft__soc svg{width:17px;height:17px}

/* ---- the contact block, lifted onto a card ---- */
.ft__card{
  background:var(--paper);border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,28px);box-shadow:0 18px 40px rgba(8,16,50,.22);
}
.ft__card h5{color:var(--navy)}
.ft__c li{display:flex;gap:13px;align-items:center}
.ft__c i{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:50%;background:var(--red);color:#fff;
}
.ft__c svg{width:16px;height:16px}
.ft__c span,.ft__c a{color:var(--ink);font-size:14px;line-height:1.5}
.ft__c a:hover,.ft__c a:focus-visible{color:var(--red)}
.ft__dir{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);width:100%;
  color:var(--red);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.ft__dir svg{width:13px;height:13px;transition:transform .22s var(--e)}
.ft__dir:hover svg,.ft__dir:focus-visible svg{transform:translate(2px,-2px)}

/* ---- bottom bar ---- */
.ft__bar{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-top:clamp(28px,3.4vw,46px);
  padding-block:clamp(16px,2vw,22px);border-top:1px solid rgba(255,255,255,.16);
}
/* the red segment the design runs into the left end of the rule */
.ft__bar::before{
  content:"";position:absolute;left:0;top:-1.5px;width:104px;height:3px;
  border-radius:3px;background:var(--red);
}
.ft__bar p{margin:0}
.ft__by{
  display:flex;align-items:center;gap:6px;padding-left:22px;
  border-left:1px solid rgba(255,255,255,.16);
}
.ft__by .heart{color:#FF5A64;font-size:15px;line-height:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:960px){
  .ft__g{grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,36px)}
  .ft__brand{grid-column:1 / -1}
  .ft__col:nth-of-type(2){padding-left:0;border-left:0}
  .ft__card{grid-column:1 / -1}
}
@media (max-width:560px){
  .ft__g{grid-template-columns:1fr}
  .ft__col{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:22px}
  .ft__bar{flex-direction:column;align-items:flex-start;gap:12px}
  .ft__by{padding-left:0;border-left:0}
  .ft__bp{display:none}
}

/* ============================================================
   Homepage: About Us, Team, Reviews
   ============================================================ */

/* ---- About Us: copy left, the story frame right ---- */
.ha__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(22px,3.4vw,52px);align-items:center;
}
.ha__lead{margin:0 0 clamp(16px,2vw,22px);max-width:46ch;
  font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.7;color:var(--ink)}
.ha__pts{list-style:none;margin:0 0 clamp(20px,2.4vw,28px);padding:0;display:grid;gap:11px}
.ha__pts li{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--navy);font-weight:500}
.ha__pts svg{width:20px;height:20px;flex:none;color:var(--red)}
/* the frame brings its own margin on the About page; here the grid sets the gap */
.ha__film .ab__film{margin:0}

/* ---- Team: a title and one wide photograph ---- */
.ht{background:var(--paper-2)}
.ht__lead{text-align:center;max-width:56ch;margin:-6px auto 0;color:var(--body)}
.ht__shot{
  margin:clamp(22px,3vw,34px) 0 0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);box-shadow:var(--sh-2);
}
.ht__shot img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover}
/* until a photograph arrives, a plate rather than a stock crowd */
.ht__plate{
  display:grid;place-items:center;gap:10px;aspect-ratio:16/7;padding:24px;text-align:center;
  color:#fff;
  background:
    radial-gradient(120% 120% at 50% 0,rgba(255,255,255,.10),transparent 62%),
    linear-gradient(160deg,var(--navy),var(--blue));
}
.ht__plate svg{width:clamp(38px,4.4vw,58px);height:clamp(38px,4.4vw,58px);opacity:.9}
.ht__plate b{font-size:clamp(15px,1.7vw,19px);font-weight:600;letter-spacing:.01em}
.ht__plate span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.ht__go{
  display:inline-flex;align-items:center;gap:9px;margin:clamp(20px,2.4vw,28px) auto 0;
  border:1.5px solid var(--navy);color:var(--navy);border-radius:var(--r-sm);
  padding:13px 24px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  width:max-content;transition:background .25s var(--e),color .25s var(--e);
}
.ht__go svg{width:14px;height:14px}
.ht__go:hover,.ht__go:focus-visible{background:var(--navy);color:#fff}
.ht .wrap{display:flex;flex-direction:column}
.ht .eyebrow,.ht .stitle{width:100%}

/* ---- Reviews ---- */
.rv{position:relative;overflow:hidden}
.rv__dots{
  position:absolute;left:var(--gut);top:30px;width:78px;height:78px;opacity:.55;
  pointer-events:none;background-image:radial-gradient(var(--line) 1.4px,transparent 1.4px);
  background-size:13px 13px;
}
.rv__list{
  position:relative;list-style:none;margin:clamp(6px,1vw,12px) 0 0;padding:0;
  display:grid;gap:clamp(14px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(clamp(250px,26vw,340px),1fr));
}
.rv__card{
  position:relative;display:grid;align-content:start;gap:14px;
  padding:clamp(22px,2.6vw,32px) clamp(20px,2.2vw,28px);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  transition:border-color .3s var(--e),box-shadow .3s var(--e),transform .3s var(--e);
}
.rv__card:hover{border-color:var(--blue);box-shadow:var(--sh-2);transform:translateY(-3px)}
.rv__q{
  position:absolute;right:clamp(16px,2vw,24px);top:6px;
  font-size:64px;line-height:1;color:var(--red);opacity:.16;
}
.rv__t{margin:0;font-size:14.5px;line-height:1.72;color:var(--ink);quotes:none}
.rv__who{display:flex;align-items:center;gap:12px;margin-top:2px}
.rv__av{
  display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;
  background:var(--blue);color:#fff;font-size:13px;font-weight:600;letter-spacing:.04em;
}
.rv__who b{display:block;font-size:14px;font-weight:600;color:var(--navy)}
.rv__who i{display:block;font-style:normal;font-size:12px;color:var(--muted)}
.rv__ask{margin:clamp(20px,2.4vw,28px) 0 0;text-align:center;font-size:14px;color:var(--body)}
.rv__ask a{color:var(--red);font-weight:600}
.rv__ask a:hover,.rv__ask a:focus-visible{text-decoration:underline}

@media (max-width:860px){
  .ha__in{grid-template-columns:1fr}
  .ha__film{order:-1}
}
@media (max-width:640px){
  .ht__shot img,.ht__plate{aspect-ratio:4/3}
  .rv__dots{display:none}
}

/* ============================================================
   The local landing pages
   ------------------------------------------------------------
   Only two components here are genuinely new — the breadcrumb and the FAQ
   list. Everything else reuses what the site already has: .sec, .wrap,
   .eyebrow, .stitle, .btn, .ab__whys and the .ab__cta card. No new colours,
   no new typeface, no second navigation.
   ============================================================ */
.bc{padding:14px 0 0}
.bc ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0}
.bc li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.bc li+li::before{content:"";width:5px;height:5px;border-top:1.5px solid var(--line);
  border-right:1.5px solid var(--line);rotate:45deg;flex:none}
.bc a{color:var(--body)}
.bc a:hover,.bc a:focus-visible{color:var(--red)}
.bc [aria-current]{color:var(--navy);font-weight:600}

/* ---- hero ---- */
.seo-hero{padding-block:clamp(22px,3vw,38px) clamp(26px,3.2vw,44px)}
.seo-hero__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(20px,3.2vw,48px);align-items:center;
}
.seo-hero__h1{font-size:clamp(25px,3.4vw,40px);line-height:1.16;margin-bottom:14px}
.seo-hero__lead{margin:0 0 clamp(18px,2.2vw,24px);max-width:58ch;
  font-size:clamp(14.5px,1.4vw,16px);line-height:1.75;color:var(--ink)}
.seo-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.seo-hero__cta .btn svg{width:17px;height:17px}
.seo-hero__alt{
  display:inline-flex;align-items:center;color:var(--navy);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;border-bottom:1.5px solid var(--red);padding-bottom:3px;
}
.seo-hero__alt:hover,.seo-hero__alt:focus-visible{color:var(--red)}
.seo-hero__meta{margin:16px 0 0;font-size:12.5px;color:var(--muted)}
.seo-hero__shot{margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-2);box-shadow:var(--sh-2)}
.seo-hero__shot img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}

/* ---- body copy ---- */
.seo-copy,.seo-list,.seo-why,.seo-areas,.seo-faqs{padding-block:clamp(24px,2.8vw,40px)}
.seo-cta{padding-block:clamp(10px,1.6vw,22px) clamp(30px,3.6vw,52px)}
.seo-p{margin:0 0 14px;max-width:74ch;line-height:1.78}
.seo-p:last-child{margin-bottom:0}
.seo-sub{
  margin:clamp(20px,2.4vw,28px) 0 12px;font-size:clamp(16px,1.8vw,20px);
  font-weight:600;color:var(--navy);scroll-margin-top:90px;
}

/* ---- the materials / products list ---- */
.seo-items{
  list-style:none;margin:clamp(16px,2vw,22px) 0 0;padding:0;
  display:grid;gap:clamp(10px,1.4vw,14px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(230px,24vw,300px),1fr));
}
.seo-item{
  display:grid;gap:5px;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper);
  transition:border-color .25s var(--e),box-shadow .25s var(--e);
}
.seo-item:hover{border-color:var(--blue);box-shadow:var(--sh-1)}
.seo-item b{font-size:14.5px;font-weight:600;color:var(--navy)}
.seo-item span{font-size:13px;line-height:1.55;color:var(--body)}

/* ---- related links ---- */
.seo-links{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.seo-links a{
  display:inline-flex;align-items:center;padding:10px 16px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--paper);color:var(--navy);font-size:13px;font-weight:500;
  transition:border-color .25s var(--e),color .25s var(--e),background .25s var(--e);
}
.seo-links a:hover,.seo-links a:focus-visible{border-color:var(--red);color:var(--red);background:var(--red-soft)}

/* ---- FAQs ---- */
.seo-faq{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);
  margin-top:10px;overflow:hidden;
}
.seo-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  padding:16px clamp(16px,1.8vw,20px);font-size:14.5px;font-weight:600;color:var(--navy);
  list-style:none;
}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::after{
  content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--red);
  border-bottom:2px solid var(--red);rotate:45deg;translate:0 -2px;transition:rotate .25s var(--e);
}
.seo-faq[open] summary::after{rotate:225deg;translate:0 2px}
.seo-faq summary:hover,.seo-faq summary:focus-visible{color:var(--red)}
.seo-faq p{margin:0;padding:0 clamp(16px,1.8vw,20px) 18px;max-width:74ch;line-height:1.72;color:var(--body)}

@media (max-width:860px){
  .seo-hero__in{grid-template-columns:1fr}
  .seo-hero__shot{order:-1}
}
@media (max-width:640px){
  .seo-hero__shot img{aspect-ratio:4/3}
  .seo-items{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .seo-faq summary::after,.seo-item,.seo-links a{transition:none}
}

/* ---- /areas-we-serve/ : the place list, its search and the info rows ----
   Four columns on a desktop, three on a tablet, two on a phone. The list is
   plain markup in the HTML - the search only hides rows, so every name is in
   the page whether or not the script runs. */
.areas-find{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:clamp(16px,2vw,22px) 0 0}
.areas-find__in{
  flex:1 1 240px;max-width:340px;font:inherit;font-size:14.5px;color:var(--ink);
  background:var(--paper-2);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:11px 14px;transition:border-color .2s var(--e),background .2s var(--e);
}
.areas-find__in:focus{outline:none;border-color:var(--blue);background:var(--paper)}
.areas-find__count{margin:0;font-size:12.5px;color:var(--muted)}
.areas-grid{
  list-style:none;margin:clamp(14px,1.8vw,20px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px clamp(14px,2vw,26px);
}
.areas-grid li{
  font-size:14px;line-height:1.5;color:var(--body);padding:5px 0;
  border-bottom:1px solid var(--line-2);
}
.areas-grid li[hidden]{display:none}
.areas-grid__none{margin:14px 0 0;font-size:14px;color:var(--muted)}

/* a category tile that is a link */
.seo-item--link{color:inherit}
.seo-item--link:hover,.seo-item--link:focus-visible{border-color:var(--red)}
.seo-item--link:hover b,.seo-item--link:focus-visible b{color:var(--red)}

.areas-info{list-style:none;margin:clamp(16px,2vw,22px) 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(clamp(220px,24vw,300px),1fr))}
.areas-info li{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.areas-info svg{width:20px;height:20px;flex:none;color:var(--red);margin-top:2px}
.areas-info b{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.areas-info span{font-size:14px;color:var(--navy);line-height:1.5}
.areas-info a{color:var(--navy);font-weight:600}
.areas-info a:hover{color:var(--red)}

@media (max-width:960px){.areas-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
  .areas-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
  .areas-grid li{font-size:13.5px}
}