/* =====================================================
   Image Optical Co. · Landing Page
   Palette: white + logo gold (#F0C273 sampled from the logo)
   ===================================================== */

:root{
  /* Brand gold, straight from the logo artwork */
  --gold:#F0C273;
  --gold-hi:#FFE688;
  --gold-deep:#C8964A;
  --gold-ink:#8A6428;          /* gold dark enough for small text on white */
  --gold-wash:#FDF3E2;
  --gold-line:rgba(200,150,74,.30);

  /* Neutrals */
  --white:#FFFFFF;
  --cream:#FDF9F2;
  --cream-2:#F6EFE3;
  --ink:#141210;
  --ink-2:#3B342C;
  --muted:#6E6559;
  --line:rgba(20,18,16,.11);

  /* Type */
  --display:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Layout */
  --container:1240px;
  --gutter:clamp(20px,5vw,44px);
  --sec-y:clamp(68px,8.5vw,124px);

  /* One radius for every button on the page */
  --btn-r:8px;
  --radius:14px;
  --radius-lg:20px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:78px;
  --mbar-h:70px;               /* fixed mobile action bar */
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}

::selection{background:var(--gold);color:var(--ink)}

:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:4px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--ink);
  padding:12px 20px;border-radius:0 0 8px 0;font-weight:700;
}
.skip-link:focus{left:0}

.container{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--gutter);
}

/* ============ TYPE ============ */
.section-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.1;letter-spacing:-.032em;color:var(--ink);
  max-width:20ch;
}
.section-title em{font-style:normal;color:var(--gold-deep);display:block}

.kicker{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:16px;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}

.section-sub{
  margin-top:16px;max-width:58ch;
  font-size:clamp(1rem,1.3vw,1.08rem);color:var(--muted);
}
.section-sub-wide{max-width:76ch}

/* ============ BUTTONS (one shared radius) ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;
  border-radius:var(--btn-r);
  font-weight:700;font-size:.94rem;line-height:1.2;text-align:center;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),
             color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .arw{display:inline-block;transition:transform .28s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn .ic{width:17px;height:17px;fill:currentColor}

.btn-solid{
  background:linear-gradient(135deg,var(--gold-hi),var(--gold) 52%,var(--gold-deep));
  color:#221A0C;
  box-shadow:0 10px 26px -14px rgba(200,150,74,.9);
}
.btn-solid:hover{box-shadow:0 16px 34px -14px rgba(200,150,74,1)}

.btn-outline{
  background:var(--white);
  border-color:rgba(20,18,16,.20);
  color:var(--ink);
}
.btn-outline:hover{border-color:var(--gold-deep);background:var(--gold-wash);color:var(--ink)}

.btn-nav{padding:12px 26px}
.btn-block{width:100%}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cta-stack{flex-direction:column;align-items:stretch}
.cta-stack .btn{width:100%}

/* ============ HEADER ============ */
/* Sticky lives on the header, not the navbar inside it: a sticky element can
   only travel the height its containing block gives it. */
.site-header{position:sticky;top:0;z-index:60}

.navbar{
  background:var(--white);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.navbar.is-stuck{box-shadow:0 10px 30px -22px rgba(20,18,16,.5)}
.navbar-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:var(--nav-h);padding-block:10px;
}
.brand-logo{height:64px;width:auto}
.nav-actions{display:flex;align-items:center;gap:10px}

/* ============ IMAGE PLACEHOLDERS ============ */
/* Every photographic slot is a placeholder until real photography lands. The
   label comes from data-ph so whoever sources the shots can see, on the page,
   exactly what each frame is for. */
:root{
  --ph-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='4' width='19' height='16' rx='2.5'/><circle cx='8.5' cy='9.5' r='1.9'/><path d='m2.5 16.5 4.6-4.6a2 2 0 0 1 2.8 0L15 17'/><path d='m13.8 14.6 1.9-1.9a2 2 0 0 1 2.8 0l3 3'/></svg>");
}
.ph{
  position:relative;
  display:grid;place-items:center;
  background:var(--cream-2);
  border:1px dashed rgba(20,18,16,.22);
  color:var(--muted);
  overflow:hidden;
}
.ph::before{
  content:"";
  width:clamp(30px,20%,64px);aspect-ratio:1/1;
  background:currentColor;opacity:.35;
  -webkit-mask:var(--ph-icon) center/contain no-repeat;
  mask:var(--ph-icon) center/contain no-repeat;
}
.ph::after{
  /* Slot name on the first line, the size to export at on the second */
  content:attr(data-ph) "\A" attr(data-size);
  white-space:pre;line-height:1.75;
  position:absolute;left:0;right:0;bottom:clamp(9px,6%,20px);
  padding-inline:10px;text-align:center;
  font-size:clamp(.58rem,1.3vw,.7rem);
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);opacity:.72;
}

/* ============ 01 HERO ============ */
/* Full-bleed background: the slide images back the entire section and the copy
   sits over them, rather than the image occupying a panel on the right. */
.hero{
  position:relative;
  display:flex;align-items:center;
  min-height:clamp(460px,46vw,680px);
  padding-block:clamp(44px,5vw,72px);
  background:var(--white);
  overflow:hidden;
}
/* Must clip. Each slide layer sits at scale(1.035) as its entrance state, which
   grows it ~4px past every edge of the frame. During a crossfade the outgoing
   layer is held at full opacity while still scaled, so it painted a hard band
   outside the frame - above the softening gradient, which only covers inside
   it. On desktop the hero's own overflow:hidden masked this; on mobile the
   frame is a block inside a taller section, so it escaped. */
.hero-frame{position:absolute;inset:0;z-index:0;overflow:hidden}

/* Light wash under the copy, clearing to nothing across the right so the
   photograph reads at full strength */
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.90) 26%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,.12) 60%,
    rgba(255,255,255,0) 72%);
}

/* The dark counterpart, faded in when the active slide is marked dark. Its
   timing matches the image crossfade so the wash and the photo change together. */
.hero-scrim,
.hero-scrim-dark{transition:opacity 2s cubic-bezier(.33,0,.2,1)}
.hero-scrim-dark{
  opacity:0;
  background:linear-gradient(90deg,
    rgba(16,15,13,.92) 0%,
    rgba(16,15,13,.86) 26%,
    rgba(16,15,13,.5) 45%,
    rgba(16,15,13,.12) 60%,
    rgba(16,15,13,0) 72%);
}
.hero.is-dark .hero-scrim{opacity:0}
.hero.is-dark .hero-scrim-dark{opacity:1}

/* Copy on a dark slide */
.hero-copy[data-tone="dark"] .hero-eyebrow{color:#fff}
.hero-copy[data-tone="dark"] .hero-title{color:#fff}
.hero-copy[data-tone="dark"] .hero-title em{color:var(--gold)}
.hero-copy[data-tone="dark"] .hero-text{color:rgba(255,255,255,.84)}

.hero-grid{position:relative;z-index:2;width:100%}
.hero-copy-col{min-width:0;max-width:36rem}

.hero-stack{display:grid}
.hero-copy{
  grid-area:1/1;
  opacity:0;
  pointer-events:none;
  /* The outgoing slide clears out fast. Fading text over the full 2s left the
     old and new headlines overlapping as ghosts for about a second, which was
     the part that read as smeared rather than smooth. */
  transition:opacity .4s ease-in;
}
.hero-copy.is-active{
  opacity:1;pointer-events:auto;
  transition:opacity .7s ease-out .3s;
}
/* Each line rises in just behind the one above it */
.hero-copy > *{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.hero-copy.is-active > *{opacity:1;transform:none}
.hero-copy.is-active > *:nth-child(1){transition-delay:.30s}
.hero-copy.is-active > *:nth-child(2){transition-delay:.39s}
.hero-copy.is-active > *:nth-child(3){transition-delay:.48s}

.hero-eyebrow{
  font-size:clamp(.95rem,1.3vw,1.1rem);
  font-weight:800;letter-spacing:-.01em;
  color:var(--ink);
  margin-bottom:14px;
}
.hero-title{
  font-family:var(--sans);font-weight:800;
  font-size:clamp(2.05rem,4.4vw,3.4rem);
  line-height:1.08;letter-spacing:-.03em;color:var(--ink);
  text-wrap:balance;
}
.hero-title em{font-style:normal;color:var(--gold-deep)}
.hero-text{
  margin-top:18px;max-width:32rem;
  font-size:clamp(1rem,1.3vw,1.08rem);color:var(--muted);
}
.hero-cta{margin-top:32px}

/* Borderless product visual that runs off the right edge, as in the reference */
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.035);
  transition:opacity 2s cubic-bezier(.33,0,.2,1),
             transform 2.8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
/* The outgoing slide stays fully painted underneath while the incoming one
   fades in on top. Fading both at once left a midpoint where each sat near
   half opacity and the white ground showed through, which read as a flicker
   rather than a dissolve. Every hero source is 1300x860, so background-size
   contain paints them into the identical rectangle and the top layer covers
   the held one completely. */
.hero-bg.is-prev{opacity:1;z-index:1;transition:none}
.hero-bg.is-active{opacity:1;z-index:2;transform:scale(1)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============ SECTION SHELLS ============ */
.section{padding-block:var(--sec-y);position:relative}
.section-light{background:var(--white)}
.section-cream{background:var(--cream)}
.section-head{margin-bottom:clamp(36px,4.6vw,60px);max-width:820px}

/* ============ 02 TRUST STRIPE ============ */
/* Nothing but the band lives here now, so no section padding of its own */
.section-brands{padding-block:0}

.trust-stripe{
  position:relative;
  /* Already spans the section, so no 100vw bleed: that would overhang by the
     scrollbar width and make the document report horizontal overflow */
  background:var(--white);
  padding-block:clamp(22px,2.8vw,34px);
  overflow:hidden;
}
.trust-stripe-inner{
  position:relative;
  display:flex;align-items:center;gap:clamp(18px,2.6vw,38px);
  /* The label lines up with the page container, but the logos keep running
     all the way to the viewport edge rather than stopping at the container */
  padding-left:max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  padding-right:0;
}

.trust-label{
  flex:0 0 auto;
  font-size:clamp(.86rem,1.1vw,.98rem);
  font-weight:600;color:#000;
  white-space:nowrap;
}

.logo-marquee{
  flex:1 1 auto;min-width:0;
  overflow:hidden;
  /* Logos dissolve at both ends instead of being cut off */
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 90%,transparent);
}
.logo-track{
  display:flex;align-items:center;
  gap:clamp(30px,4.2vw,62px);
  width:max-content;
  animation:logo-scroll 28s linear infinite;
}
.logo-marquee:hover .logo-track{animation-play-state:paused}
/* The track holds two identical passes, so -50% lands exactly on the seam */
@keyframes logo-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* A fixed box per logo with object-fit:contain, because the supplied artwork
   runs from 0.81 (Versace, upright) to 6.8 (Carrera, very wide). Sizing on
   height alone would make Carrera enormous and Versace a stamp. */
.logo-item{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:clamp(96px,11vw,140px);
  height:clamp(38px,4.4vw,58px);
}
/* No colour filter: the files are black artwork on an opaque white ground, so
   brightness(0) would flood the whole frame black. White on a white stripe
   blends with no halo, which keying the white out would have introduced along
   the anti-aliased edges. */
.logo-item img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
}


/* ============ 03 CATEGORIES ============ */
.cat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,22px);
}

.cat-card{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  outline:none;
  transition:transform .45s cubic-bezier(.22,.61,.36,1),
             box-shadow .45s cubic-bezier(.22,.61,.36,1),
             border-color .45s var(--ease);
}
.cat-card:hover,
.cat-card:focus-visible{
  transform:translateY(-8px);
  border-color:var(--gold-line);
  box-shadow:0 32px 56px -30px rgba(20,18,16,.3);
}

.cat-media{
  position:relative;
  aspect-ratio:9/7;
  background:var(--white);
  overflow:hidden;
}
.cat-ph{width:100%;height:100%;border:0;border-radius:0}
.cat-media img{
  width:100%;height:100%;
  object-fit:contain;
  padding:clamp(10px,1.4vw,16px);
}

/* The whole media box drifts in, so it works the same whether the slot holds a
   placeholder or a real photo. */
.cat-media > *{
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.cat-card:hover .cat-media > *,
.cat-card:focus-visible .cat-media > *{transform:scale(1.05)}

/* Gold rule that wipes across under the image */
.cat-media::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold) 45%,var(--gold-deep));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.cat-card:hover .cat-media::after,
.cat-card:focus-visible .cat-media::after{transform:scaleX(1)}

.cat-tag{
  position:absolute;top:12px;left:12px;z-index:2;
  font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  padding:5px 10px;border-radius:var(--btn-r);
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.cat-card:hover .cat-tag,
.cat-card:focus-visible .cat-tag{
  /* Held still: it lives inside .cat-media, so the zoom above would take it too */
  transform:none;
  border-color:var(--gold-deep);
  background:var(--gold-wash);
}

/* --- card text --- */
.cat-body{
  padding:clamp(16px,1.9vw,22px);
  border-top:1px solid var(--line);
  flex:1 1 auto;
}
.cat-index{
  display:block;margin-bottom:8px;
  font-size:.66rem;font-weight:800;letter-spacing:.2em;
  color:var(--gold-ink);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.cat-card:hover .cat-index,
.cat-card:focus-visible .cat-index{transform:translateX(4px)}
.cat-card h3{
  font-family:var(--display);font-weight:700;
  font-size:1.1rem;line-height:1.22;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:7px;
  transition:color .4s var(--ease);
}
.cat-card:hover h3,
.cat-card:focus-visible h3{color:var(--gold-deep)}
.cat-card p{font-size:.88rem;color:var(--muted)}

/* ============ 04 SERVICES ============ */
/* One even row of four cards. The tall centre visual is gone, so the cards
   carry the section on their own and share equal width and height. */
.section-head-center{
  margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.section-head-center .section-title{max-width:24ch}
.section-head-center .section-title em{display:inline}
.section-head-center .section-sub{margin-inline:auto}

.svc-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
  align-items:stretch;
}

.svc-card{
  display:flex;flex-direction:column;
  gap:clamp(18px,2vw,26px);
  min-height:clamp(240px,20vw,290px);
  padding:clamp(22px,2.4vw,30px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--cream);
  transition:transform .35s var(--ease),border-color .35s var(--ease),
             background .35s var(--ease),box-shadow .35s var(--ease);
}
.svc-card:hover{
  transform:translateY(-5px);
  border-color:var(--gold-line);
  background:var(--white);
  box-shadow:0 26px 48px -30px rgba(20,18,16,.26);
}

.svc-icon{
  width:clamp(44px,4.4vw,54px);
  aspect-ratio:1;
  flex:0 0 auto;
  border-radius:var(--btn-r);
  display:grid;place-items:center;
  background:var(--gold);
  transition:background .35s var(--ease);
}
.svc-card:hover .svc-icon{background:var(--gold-hi)}
.svc-icon svg{
  width:56%;height:auto;
  fill:none;stroke:#221A0C;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}

.svc-text{margin-top:auto}
.svc-card h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.02rem,1.4vw,1.16rem);
  line-height:1.25;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:8px;
}
.svc-card p{font-size:.88rem;color:var(--muted)}

/* ============ 05 FEATURE SHOWCASE ============ */
/* Full-width cards, image as the card background, copy laid over it.
   Sticky-stacked: each pins near the top and the next scrolls up and covers it. */
.feat-section{padding-block:clamp(64px,8vw,104px)}
.feat-stack{
  display:flex;flex-direction:column;
  /* This gap is the scroll distance between one card pinning and the next
     reaching it, so it doubles as the pacing of the stack */
  gap:clamp(24px,3.4vw,52px);
}

.feat-card{
  position:sticky;
  top:calc(var(--nav-h) + 22px);
  /* Two columns: copy on one side, image panel on the other. The image is no
     longer a full-card background, so no scrim is needed to keep the copy
     readable and the picture is seen at full strength. */
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(22px,3.2vw,52px);
  width:100%;
  min-height:clamp(340px,40vw,500px);
  padding:clamp(24px,3.2vw,48px);
  overflow:hidden;
  border:1px solid #E5E5E5;
  border-radius:24px;
  background:var(--white);
  box-shadow:0 18px 50px -28px rgba(23,23,23,.35);
  /* initial state for the scroll entrance */
  opacity:0;
  transform:translateY(70px) scale(.95);
  transition:opacity .75s cubic-bezier(.16,1,.3,1),
             transform .75s cubic-bezier(.16,1,.3,1),
             box-shadow .3s var(--ease);
  will-change:opacity,transform;
}
.feat-card.is-in{opacity:1;transform:none}
.feat-card:nth-child(1){z-index:1}
.feat-card:nth-child(2){z-index:2}
.feat-card:nth-child(3){z-index:3}
.feat-card:nth-child(4){z-index:4}
/* The final card has nothing left to cover it, so it scrolls away normally */
.feat-card:last-child{position:relative;top:auto}
.feat-card.is-in:hover{box-shadow:0 26px 60px -28px rgba(23,23,23,.45)}

/* Image panel. Odd cards put it on the right, even cards on the left, so the
   deck alternates as it stacks. */
.feat-bg{
  order:2;
  align-self:stretch;
  width:100%;
  min-height:clamp(220px,25vw,360px);
  border-radius:16px;
  object-fit:cover;
  object-position:center;
}
.feat-body{
  order:1;
  display:flex;flex-direction:column;gap:14px;
  width:100%;max-width:34rem;
}
.feat-card:nth-child(even) .feat-bg{order:1}
.feat-card:nth-child(even) .feat-body{order:2;justify-self:end}

.feat-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,2.8vw,2.15rem);
  line-height:1.16;letter-spacing:-.03em;
  color:var(--ink);
  text-wrap:balance;
}
.feat-text{
  font-size:clamp(.92rem,1.15vw,1rem);
  line-height:1.65;color:var(--ink-2);
}
.feat-cta{
  align-self:flex-start;
  margin-top:8px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ink);
  /* Every button on the page shares one radius */
  border-radius:var(--btn-r);
  padding:11px 26px;
  font-size:.875rem;font-weight:600;
  color:var(--ink);background:transparent;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.feat-cta:hover{background:var(--ink);color:#fff}

/* Below the stack breakpoint the cards are tall enough to fill the screen, so
   pinning them would trap the reader. Plain flow, and a heavier scrim because
   the copy sits over the whole image. */

/* ============ 06 WHY ============ */
/* Sticky sidebar on the left; its image swaps as the list scrolls past */
.why-layout{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,80px);
  /* Must stretch: with align-items:start the aside is exactly as tall as its
     own content, leaving the sticky child zero room to travel, so it never
     actually sticks. Stretching gives it the full row height to move within. */
  align-items:stretch;
}
.why-aside-inner{
  position:sticky;
  top:calc(var(--nav-h) + 28px);
}
.why-figure{
  position:relative;
  /* Square rather than portrait: a sticky element can only stay pinned for
     (container height - its own height), so a shorter image holds through far
     more of the list scroll */
  aspect-ratio:1/1;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--cream);
}
/* One shared image for all six points now, so there is nothing to crossfade.
   The list still highlights the item you are reading; only the picture is
   constant. */
.why-shot{
  position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:1;
}

.why-list{display:block}
.why-item{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2vw,26px);
  padding:clamp(22px,2.8vw,32px) clamp(20px,2.2vw,26px);
  border-top:1px solid var(--line);
  transition:background .35s var(--ease);
}
.why-item:last-child{border-bottom:1px solid var(--line)}
.why-item.is-active{background:var(--cream)}

.why-num{
  display:grid;place-items:center;
  width:clamp(34px,3.4vw,42px);aspect-ratio:1;
  border-radius:var(--btn-r);
  background:var(--cream-2);
  font-size:.72rem;font-weight:800;letter-spacing:.06em;
  color:var(--gold-ink);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.why-item.is-active .why-num{background:var(--gold);color:#221A0C}

.why-item h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.06rem,1.5vw,1.24rem);
  line-height:1.24;letter-spacing:-.022em;
  color:var(--ink);margin-bottom:9px;
  transition:color .35s var(--ease);
}
.why-item p{font-size:.92rem;color:var(--muted);max-width:52ch}

/* Corner bracket, as in the reference */
.why-corner{
  position:absolute;top:clamp(18px,2.2vw,26px);right:clamp(18px,2.2vw,26px);
  width:14px;height:14px;
  border-top:2px solid var(--gold-deep);
  border-right:2px solid var(--gold-deep);
  opacity:0;transform:translate(-4px,4px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.why-item.is-active .why-corner{opacity:1;transform:none}

/* ============ 07 LOCATION ============ */
/* Copy on the left, map on the right, both weighted so the row reads level */
.visit-layout{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,4vw,60px);
  /* Stretch, so the map matches the copy column height exactly and the row reads level */
  align-items:stretch;
}
.visit-copy{display:flex;flex-direction:column;justify-content:center}
/* Trimmed from the page-wide 3rem: at full size this headline needs more width
   than the column has, and breaks onto an orphaned third line */
.visit-copy .section-title{max-width:24ch;font-size:clamp(1.72rem,3.05vw,2.42rem)}
.visit-lead{
  margin-top:18px;
  font-size:clamp(1rem,1.35vw,1.1rem);
  color:var(--muted);max-width:44ch;
}
.loc-list{
  display:grid;gap:clamp(12px,1.4vw,16px);
  margin-top:clamp(22px,2.6vw,30px);
}
.loc-card{
  /* Icon and name share row 1; the address and the link then span the whole
     card rather than being squeezed into a column beside the icon. */
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(12px,1.3vw,16px);
  row-gap:9px;
  align-items:center;
  padding:clamp(16px,1.8vw,22px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.loc-card:hover{
  border-color:var(--gold-line);
  box-shadow:0 22px 42px -30px rgba(20,18,16,.26);
}
.loc-icon{
  flex:0 0 auto;
  /* Without this the flex parent stretches it to the full card height and the
     aspect-ratio square becomes a tall bar. */
  align-self:flex-start;
  width:clamp(38px,3.6vw,46px);aspect-ratio:1;
  border-radius:var(--btn-r);
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold) 52%,var(--gold-deep));
}
.loc-icon svg{
  width:54%;height:auto;
  fill:#221A0C;stroke:none;
}
.loc-name{
  grid-column:2;
  font-family:var(--display);font-weight:800;
  font-size:clamp(.98rem,1.3vw,1.1rem);
  letter-spacing:-.01em;color:var(--ink);
}
.loc-addr{
  grid-column:1/-1;
  font-size:clamp(.88rem,1.05vw,.95rem);
  line-height:1.65;color:var(--muted);
}
.loc-dir{
  grid-column:1/-1;
  justify-self:start;
  display:inline-flex;align-items:center;gap:7px;
  font-size:.88rem;font-weight:700;color:var(--gold-deep);
  transition:color .25s var(--ease);
}
.loc-dir .arw{transition:transform .28s var(--ease)}
.loc-dir:hover{color:var(--gold-ink)}
.loc-dir:hover .arw{transform:translateX(4px)}

.visit-hours{
  margin-top:clamp(22px,2.6vw,30px);
  display:grid;gap:2px;
  max-width:42ch;
}
.visit-hours li{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:9px 0;
  font-size:clamp(.92rem,1.15vw,1rem);
  border-bottom:1px solid rgba(20,18,16,.07);
}
.visit-hours li:last-child{border-bottom:0}
.visit-hours li span:first-child{color:var(--ink);font-weight:700}
.visit-hours li span:last-child{color:var(--muted);white-space:nowrap}
.visit-hours .is-holiday span:last-child{color:var(--gold-ink);font-weight:600}

.visit-copy .cta-row{margin-top:clamp(24px,3vw,34px)}

.map-panel{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--cream-2);
  align-self:center;
  height:clamp(320px,33vw,470px);
  box-shadow:0 30px 60px -42px rgba(20,18,16,.4);
}
.map-panel iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(.28) contrast(1.04);
  transition:filter .45s var(--ease);
  /* The iframe would otherwise capture every click itself and the overlay
     anchor below would never fire. */
  pointer-events:none;
}
.map-panel:hover iframe{filter:grayscale(0) contrast(1.04)}

/* Full-panel click target. Lost in an earlier rewrite of this block, which
   left the cue floating static over the name chip. */
.map-link{
  position:absolute;inset:0;z-index:3;
  display:block;cursor:pointer;
}
/* Second branch, floating over the map, styled to read like a Google Maps info
   window. Sits above the full-panel anchor and takes its own clicks, so its
   buttons work while the rest of the map still routes to the pinned branch. */
.map-card{
  position:absolute;right:14px;bottom:14px;z-index:5;
  width:min(330px,calc(100% - 28px));
  padding:14px 16px 15px;
  border-radius:10px;
  background:#fff;
  box-shadow:0 2px 6px rgba(60,64,67,.16), 0 8px 22px -6px rgba(60,64,67,.28);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.map-card:hover{
  transform:translateY(-2px);
  box-shadow:0 3px 8px rgba(60,64,67,.2), 0 14px 30px -8px rgba(60,64,67,.34);
}

/* Whole-card click target, beneath the two buttons */
.map-card-hit{
  position:absolute;inset:0;z-index:1;
  border-radius:inherit;
  cursor:pointer;
}
.map-card-head{
  position:relative;z-index:2;
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:6px;
  pointer-events:none;
}
.map-card-name{
  flex:1 1 auto;min-width:0;
  font-family:var(--display);font-weight:600;
  font-size:1.02rem;line-height:1.3;letter-spacing:-.005em;
  color:#202124;
}
.map-card-actions{flex:0 0 auto;display:flex;gap:8px;pointer-events:auto}
.map-ico{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:#f1f3f4;color:#1a73e8;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.map-ico svg{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.map-ico:hover{background:#e4e7ea;transform:translateY(-1px)}
/* The filled directions button, as in Maps */
.map-ico-dir{background:#1a73e8}
.map-ico-dir svg{width:21px;height:21px;fill:#fff;stroke:none}
.map-ico-dir:hover{background:#1765cc}

.map-card-addr{
  position:relative;z-index:2;
  font-size:.9rem;line-height:1.5;color:#5f6368;
  pointer-events:none;
}

/* ============ 09 DISCOVER / CHIPS ============ */
/* Two prose blocks side by side above the keyword card */
.discover-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,32px);
  margin-bottom:clamp(32px,4.4vw,56px);
  align-items:stretch;
}
.discover-block{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--white);
  padding:clamp(24px,2.8vw,38px);
  box-shadow:0 26px 52px -42px rgba(20,18,16,.35);
}
.discover-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.35rem,2.3vw,1.8rem);
  line-height:1.2;letter-spacing:-.03em;color:var(--ink);
  margin-bottom:14px;text-wrap:balance;
}
.discover-text{
  font-size:clamp(.96rem,1.2vw,1.04rem);
  line-height:1.7;color:var(--muted);
}

.chips-block{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--white);padding:clamp(22px,2.8vw,38px);
  box-shadow:0 26px 52px -42px rgba(20,18,16,.35);
}
.chips-head{margin-bottom:22px}
.chips-head h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.04rem,1.8vw,1.36rem);
  letter-spacing:-.012em;color:var(--ink);max-width:60ch;
}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  border:1px solid var(--line);background:var(--cream);
  border-radius:var(--btn-r);padding:9px 16px;
  font-size:.85rem;font-weight:600;color:var(--ink);cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.chip:hover{transform:translateY(-2px);border-color:var(--gold-deep);background:var(--gold-wash)}
.chip.is-on{
  background:linear-gradient(135deg,var(--gold-hi),var(--gold));
  border-color:var(--gold-deep);color:#221A0C;
}

/* ============ 10 BOOK ============ */
/* One split panel: image flush to the left edge, form on the right */
.section-book{position:relative;padding-block:clamp(40px,4.4vw,64px)}

.book-panel{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(24px,3.6vw,56px);
  /* Top-aligned: the heading sits level with the first field row rather than
     floating at the vertical centre of the panel. */
  align-items:start;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,48px);
  background:var(--cream);
  box-shadow:0 30px 62px -48px rgba(20,18,16,.42);
}
.book-intro{align-self:start}

.book-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.75rem,3.2vw,2.6rem);
  line-height:1.06;letter-spacing:-.04em;color:var(--ink);
  text-wrap:balance;
}
.book-lead{
  margin-top:14px;max-width:40ch;
  font-size:clamp(.96rem,1.2vw,1.04rem);color:var(--muted);
}

.book-form{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.1vw,14px) clamp(14px,1.8vw,22px);
}
.field{display:flex;flex-direction:column}
.field-full{grid-column:1/-1}
.field label{
  font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:6px;
}
.field label span{color:var(--gold-deep)}
/* Boxed inputs, as in the reference */
.field input,
.field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--btn-r);
  background:var(--white);
  padding:11px 13px;
  font-size:.95rem;color:var(--ink);
  outline:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field textarea{resize:vertical;min-height:66px}
.field input::placeholder,
.field textarea::placeholder{color:rgba(20,18,16,.34)}
.field input:focus,
.field textarea:focus{
  border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(240,194,115,.28);
}
.field .err{font-size:.78rem;color:#B3323C;margin-top:7px;display:none}
.field.is-invalid input,
.field.is-invalid textarea{border-color:#B3323C}
.field.is-invalid .err{display:block}

.submit-row{margin-top:clamp(4px,.8vw,10px)}
.submit-btn{
  width:100%;
  border:0;cursor:pointer;
  background:var(--ink);color:#fff;
  border-radius:var(--btn-r);
  padding:14px 26px;
  font-family:var(--display);
  font-size:.92rem;font-weight:700;letter-spacing:.06em;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.submit-btn:hover{background:#2A2620;transform:translateY(-2px)}

.form-status{margin-top:2px;font-size:.9rem;min-height:1.2em;color:var(--gold-ink)}
.form-status.is-ok{color:#2F7D4A}

/* ============ 11 FOOTER ============ */
.site-footer{
  background:var(--cream);
  border-top:1px solid var(--line);
  padding-block:clamp(38px,4.2vw,56px) clamp(26px,2.6vw,36px);
}
.footer-main{
  display:grid;
  grid-template-columns:minmax(0,.76fr) minmax(0,1.62fr);
  gap:clamp(24px,3.4vw,52px);
}
.footer-logo{height:56px;width:auto;margin-bottom:16px}
.footer-sub{
  font-size:.98rem;color:var(--ink-2);max-width:46ch;
}
.footer-sub + .footer-sub{margin-top:8px}
.footer-reach{justify-self:stretch;text-align:left}
.footer-reach h3{
  font-size:1.02rem;font-weight:700;color:var(--ink);
  margin-bottom:14px;
}
.footer-link{
  display:block;
  font-size:1.16rem;font-weight:600;color:var(--ink);
  transition:color .22s var(--ease);
}
.footer-link:hover{color:var(--gold-deep)}
.footer-reach p{margin-top:14px;font-size:.98rem;color:var(--ink-2);max-width:44ch}
/* Two columns, one branch each; inside a column the name, phone and address
   stack vertically. */
.footer-branches{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.6vw,38px);
  margin-top:4px;
}
.footer-branch{display:block}
.footer-branch-id{min-width:0}
.footer-loc-name{
  display:block;
  font-weight:800;color:var(--ink);
  letter-spacing:-.01em;
  margin-bottom:5px;
}
.footer-address{
  display:block;
  margin-top:7px;
  font-size:.86rem;line-height:1.75;color:var(--ink-2);
  max-width:none;
  transition:color .22s var(--ease);
}
.footer-address:hover,
.footer-address:focus-visible{color:var(--gold-deep)}
.footer-address:hover .footer-loc-name,
.footer-address:focus-visible .footer-loc-name{color:var(--gold-deep)}
.footer-loc-name{transition:color .22s var(--ease)}


.footer-credit{
  color:inherit;
  text-decoration:none;
}
/* Only the agency name carries the highlight; the rest of the credit stays
   in the footer's muted grey. */
.footer-credit-name{
  font-weight:700;color:var(--gold-deep);
  transition:color .22s var(--ease);
}
.footer-credit:hover .footer-credit-name,
.footer-credit:focus-visible .footer-credit-name{color:var(--gold-ink)}

.footer-bottom{
  display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;
  margin-top:clamp(24px,3vw,38px);
  padding-top:clamp(14px,1.7vw,20px);
  border-top:1px solid var(--line);
  font-size:.88rem;color:var(--muted);
}

/* ============ MOBILE ACTION BAR ============ */
/* Hidden by default; the phone breakpoint below turns it on and pays for the
   space it occupies with padding on the body. */
.mobile-bar{display:none}
.mobile-bar-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--btn-r);
  font-weight:700;font-size:.92rem;line-height:1.15;text-align:center;
  transition:transform .2s var(--ease),background .25s var(--ease);
}
.mobile-bar-btn:active{transform:scale(.98)}
.mobile-bar-btn svg{width:16px;height:16px;fill:currentColor;flex:0 0 auto}
.mb-call{border:1.5px solid rgba(20,18,16,.22);background:var(--white);color:var(--ink)}
.mb-book{
  background:linear-gradient(135deg,var(--gold-hi),var(--gold) 52%,var(--gold-deep));
  color:#221A0C;
  box-shadow:0 10px 22px -14px rgba(200,150,74,.95);
}

/* ============ FLOATING BUTTONS ============ */
.float-btn{
  position:fixed;bottom:22px;z-index:90;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  box-shadow:0 14px 30px -12px rgba(20,18,16,.5);
  transform:translateY(120px);
  transition:transform .55s cubic-bezier(.34,1.3,.5,1),box-shadow .3s var(--ease);
}
.float-btn.is-in{transform:translateY(0)}
.float-btn svg{
  width:24px;height:24px;fill:currentColor;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}

/* A slow halo that breathes outward, so the buttons read as live without
   needing a text label beside them */
.float-btn::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid currentColor;
  opacity:0;pointer-events:none;
  animation:floatHalo 2.8s var(--ease) infinite;
}
@keyframes floatHalo{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

.float-btn.is-in:hover{box-shadow:0 20px 38px -12px rgba(20,18,16,.6)}
.float-btn.is-in:hover{transform:translateY(-4px) scale(1.06)}
.float-btn:hover svg{transform:rotate(-8deg) scale(1.1)}
.float-btn:active{transform:translateY(-1px) scale(1)}

.float-call{
  left:22px;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold) 52%,var(--gold-deep));
  color:#221A0C;
}
.float-wa{
  right:22px;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold) 52%,var(--gold-deep));
  color:#221A0C;
}
.float-wa::after{animation-delay:1.4s}

/* ============ REVEAL ============ */
.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{opacity:1;transform:none}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width:1080px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* The sticky sidebar stays on tablet: it is only the phone layout that
     drops it, so the transition is identical on desktop and tablet. */
  .why-layout{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(22px,3vw,34px)}
  .why-figure{aspect-ratio:3/4;max-height:none}
  .visit-layout{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
  .map-panel{align-self:stretch;height:clamp(300px,32vw,400px)}
  .book-panel{grid-template-columns:1fr;gap:clamp(20px,3vw,28px)}
  .footer-main{grid-template-columns:1fr;gap:clamp(28px,4vw,40px)}
  .footer-brand{grid-column:1/-1}
}

@media (max-width:920px){
  .discover-grid{grid-template-columns:1fr;gap:24px}
  .hero{min-height:clamp(400px,54vw,520px)}
  .hero-copy-col{max-width:30rem}
  .hero-text{max-width:44ch}
  /* Narrower frame, so the wash has to hold longer before it clears */
  .hero-scrim{
    background:linear-gradient(90deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.92) 40%,
      rgba(255,255,255,.6) 62%,
      rgba(255,255,255,.15) 80%,
      rgba(255,255,255,0) 92%);
  }
}

@media (max-width:768px){
  :root{--nav-h:66px}
  .brand-logo{height:48px}
  .footer-logo{height:62px}
  .section-title{max-width:none}
}

/* ---------- PHONES ---------- */
@media (max-width:767px){
  /* Header: logo only, centred, with the actions moved to the fixed bar */
  .navbar-inner{justify-content:center;min-height:62px}
  .nav-actions{display:none}
  .brand-logo{height:46px}

  /* Phones keep the stacked layout: copy on white, then the image beneath it.
     The background layers un-position and reorder rather than sitting behind
     the text, where a photo would fight it at this width. */
  .hero{
    display:flex;flex-direction:column;align-items:stretch;
    min-height:0;
    padding-block:24px 0;
  }
  .hero-grid{order:1}
  .hero-frame{
    order:2;position:relative;inset:auto;
    margin-top:24px;
    height:clamp(240px,60vw,340px);
  }
  .hero-scrim,
  .hero-scrim-dark{display:none}
  .hero-copy[data-tone="dark"] .hero-eyebrow,
  .hero-copy[data-tone="dark"] .hero-title{color:var(--ink)}
  .hero-copy[data-tone="dark"] .hero-title em{color:var(--gold-deep)}
  .hero-copy[data-tone="dark"] .hero-text{color:var(--muted)}
  /* Lighter ground here than the shared placeholder cream: less colour distance
     for the fade to cover means far less banding across it. */
  .hero-bg.ph{border:0;background:var(--cream)}
  /* Soften both seams where the image block meets white: the copy above it and
     the trust stripe below. Without these the backgrounds butt together as
     hard rules across the page. */
  .hero-frame::before,
  .hero-frame::after{
    content:"";
    position:absolute;left:0;right:0;z-index:3;
    height:clamp(40px,18%,72px);
    pointer-events:none;
  }
  /* Keep the placeholder's label clear of the bottom fade, which would
     otherwise wash the export size out */
  .hero-frame .ph::after{bottom:clamp(48px,22%,84px)}
  .hero-frame .ph::before{width:clamp(26px,15%,50px)}
  .hero-frame::before{
    top:0;
    background:linear-gradient(180deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.985) 8%,
      rgba(255,255,255,.95) 18%,
      rgba(255,255,255,.88) 28%,
      rgba(255,255,255,.78) 38%,
      rgba(255,255,255,.65) 48%,
      rgba(255,255,255,.5) 58%,
      rgba(255,255,255,.35) 68%,
      rgba(255,255,255,.22) 78%,
      rgba(255,255,255,.11) 87%,
      rgba(255,255,255,.04) 94%,
      rgba(255,255,255,0) 100%);
  }
  .hero-frame::after{
    bottom:0;
    background:linear-gradient(0deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.985) 8%,
      rgba(255,255,255,.95) 18%,
      rgba(255,255,255,.88) 28%,
      rgba(255,255,255,.78) 38%,
      rgba(255,255,255,.65) 48%,
      rgba(255,255,255,.5) 58%,
      rgba(255,255,255,.35) 68%,
      rgba(255,255,255,.22) 78%,
      rgba(255,255,255,.11) 87%,
      rgba(255,255,255,.04) 94%,
      rgba(255,255,255,0) 100%);
  }
  .hero-copy-col{text-align:center;max-width:none}
  .hero-eyebrow{display:none}
  .hero-title{font-size:clamp(1.9rem,8.2vw,2.35rem);letter-spacing:-.03em}
  .hero-text{margin-top:14px;margin-inline:auto;max-width:38ch}
  .hero-cta{display:none}

  /* Why Choose is the one exception: no sticky sidebar on a phone */
  .why-layout{grid-template-columns:1fr;gap:clamp(24px,5vw,34px)}
  .why-aside-inner{position:static}
  .why-figure{aspect-ratio:16/10;max-height:300px}

  /* Feature cards keep the sticky stack, but the image becomes a real block at
     the top of the card rather than a washed-out layer behind the copy. At this
     width a backdrop at half opacity just muddies the text. */
  .feat-card{
    display:flex;flex-direction:column;align-items:stretch;
    justify-content:flex-start;
    min-height:0;padding:0;
    top:calc(var(--nav-h) + 14px);
  }
  /* Phones stack: image block on top, copy below, on every card */
  .feat-bg,
  .feat-card:nth-child(even) .feat-bg{
    order:1;
    /* Hold the set height: as a column flex item it would otherwise be a
       shrink candidate once the copy grows */
    flex:0 0 auto;
    width:100%;height:clamp(180px,46vw,250px);
    min-height:0;border-radius:0;border:0;
  }
  .feat-bg.ph{justify-items:center;padding:0}
  .feat-bg.ph::after{left:0;right:0}
  .feat-body,
  .feat-card:nth-child(even) .feat-body{
    order:2;max-width:none;padding:22px 22px 26px;justify-self:stretch;
  }

  /* Fixed action bar */
  .mobile-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:95;
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    height:calc(var(--mbar-h) + env(safe-area-inset-bottom,0px));
    padding:11px var(--gutter) calc(11px + env(safe-area-inset-bottom,0px));
    background:var(--white);
    border-top:1px solid var(--line);
    box-shadow:0 -10px 28px -20px rgba(20,18,16,.6);
  }
  /* Footer: one shared left edge. justify-self:end kept pushing the Reach us
     block 40px in from the gutter once the grid collapsed to one column, so
     the two halves never lined up. */
  .site-footer{padding-block:clamp(30px,7vw,40px) 14px}
  .footer-main{gap:28px}
  .footer-reach{justify-self:stretch;text-align:left;margin-right:0}
  .footer-branches{grid-template-columns:1fr;gap:22px}
  .footer-reach p,
  .footer-address,
  .footer-sub{max-width:none}
  .footer-logo{height:48px;margin-bottom:12px}
  .footer-sub{font-size:.95rem}
  .footer-reach h3{margin-bottom:10px}
  .footer-reach p,
  .footer-address{margin-top:12px}
  .footer-bottom{gap:6px;margin-top:24px;padding-top:16px;font-size:.82rem}

  /* Pay for the bar so the footer is never trapped underneath it */
  body{padding-bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom,0px))}
  /* And lift the round buttons clear of it */
  .float-btn{bottom:calc(var(--mbar-h) + 14px)}
}

@media (max-width:640px){
  body{font-size:15.5px}
  .trust-stripe-inner{flex-direction:column;align-items:flex-start;gap:12px;padding-left:var(--gutter)}
  .logo-marquee{width:100%}
  .logo-marquee{margin-left:calc(-1 * var(--gutter));width:calc(100% + var(--gutter))}
  .cat-grid,.svc-grid{grid-template-columns:1fr}
  .svc-card{min-height:0}
  .svc-card{gap:20px}
  .book-form{grid-template-columns:1fr}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%}
  .map-panel{height:clamp(280px,70vw,340px)}
  /* Trimmed so it does not swallow a 390px-wide map */
  .map-card{right:10px;bottom:10px;width:min(258px,calc(100% - 20px));padding:11px 12px 12px}
  .map-card-head{gap:8px;margin-bottom:4px}
  .map-card-name{font-size:.86rem}
  .map-ico{width:28px;height:28px}
  .map-ico svg{width:14px;height:14px}
  .map-ico-dir svg{width:17px;height:17px}
  .map-card-addr{font-size:.76rem;line-height:1.45}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .float-btn{width:50px;height:50px}
  .float-call{left:16px}
  .float-wa{right:16px}
  .logo-track{animation-duration:22s}
}

@media (max-width:400px){
  .brand-logo{height:42px}
  .mobile-bar{gap:8px;padding-inline:14px}
  .mobile-bar-btn{font-size:.86rem;gap:6px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none}
  .float-btn{transform:none}
  .float-btn::after{animation:none;opacity:0}
  .logo-track{animation:none}
  .hero-copy{opacity:0}
  .hero-copy.is-active{opacity:1}
  .hero-bg{opacity:0;transform:none}
  .hero-bg.is-prev{opacity:0}
  .hero-bg.is-active{opacity:1}
  .hero-copy > *{opacity:1;transform:none}
}

@media print{
  .site-header,.float-btn{display:none}
  body{background:#fff;color:#000}
}