/* ==========================================================================
   Al Rahal Auto Maintenance — main.css
   Modern CSS: custom properties, cascade layers, container queries,
   fluid type (clamp), color-mix(), :has(), logical properties, view transitions.
   ========================================================================== */
@layer reset, tokens, base, layout, components, pages, utilities;

@layer reset {
  *,*::before,*::after{box-sizing:border-box;margin:0}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:6rem}
  body{min-height:100dvh;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  img,picture,svg,video{display:block;max-inline-size:100%;block-size:auto}
  input,button,textarea,select{font:inherit;color:inherit}
  button{background:none;border:0;cursor:pointer}
  a{color:inherit;text-decoration:none}
  ul[role=list],ol[role=list]{list-style:none;padding:0}
  [hidden]{display:none!important}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  }
}

@layer tokens {
  :root{
    /* Palette — graphite, ivory, bronze, heritage green */
    --graphite:#1B1F23;
    --ink:#262B31;
    --slate:#3A4149;
    --mist:#8A929B;
    --ivory:#F4F2EC;
    --bone:#E8E3D8;
    --white:#FFFFFF;
    --bronze:#B59255;
    --bronze-2:#D3B676;
    --green:#1E3A31;
    --green-2:#2C5546;
    --wa:#25D366;
    --danger:#B4453D;

    --bg:var(--ivory);
    --fg:var(--graphite);
    --muted:color-mix(in oklab,var(--graphite) 62%,white);
    --line:color-mix(in oklab,var(--graphite) 12%,transparent);

    /* Type */
    --font-display:"Fraunces",Georgia,"Times New Roman",serif;
    --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
    --fs--1:clamp(.8rem,.76rem + .2vw,.9rem);
    --fs-0:clamp(1rem,.95rem + .25vw,1.1rem);
    --fs-1:clamp(1.15rem,1.05rem + .5vw,1.35rem);
    --fs-2:clamp(1.4rem,1.2rem + 1vw,1.85rem);
    --fs-3:clamp(1.8rem,1.4rem + 2vw,2.6rem);
    --fs-4:clamp(2.3rem,1.6rem + 3.5vw,4rem);
    --fs-5:clamp(2.8rem,1.8rem + 5.5vw,5.6rem);

    /* Space & shape */
    --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;--sp-6:2rem;--sp-7:3rem;--sp-8:4rem;--sp-9:6rem;
    --section:clamp(3.5rem,4rem + 4vw,8rem);
    --container:min(100% - 2.5rem,1240px);
    --radius:6px;
    --radius-lg:14px;
    --shadow:0 20px 50px -20px rgb(27 31 35 / .35);
    --ease:cubic-bezier(.2,.7,.2,1);
  }
  ::selection{background:var(--bronze);color:var(--white)}
}

@layer base {
  html{color-scheme:light}
  body{font-family:var(--font-body);font-size:var(--fs-0);color:var(--fg);background:var(--bg);overflow-x:clip}
  img,iframe,table{max-inline-size:100%}
  h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
  h1{font-size:var(--fs-5);font-variation-settings:"opsz" 144,"SOFT" 40}
  h2{font-size:var(--fs-4);font-variation-settings:"opsz" 96,"SOFT" 30}
  h3{font-size:var(--fs-2)}
  h4{font-size:var(--fs-1);font-family:var(--font-body);font-weight:700}
  p{text-wrap:pretty;max-inline-size:68ch}
  strong{font-weight:700}
  :focus-visible{outline:3px solid var(--bronze);outline-offset:3px;border-radius:3px}
  .skip{position:absolute;inset-inline-start:1rem;inset-block-start:-4rem;background:var(--graphite);color:var(--white);padding:.6rem 1rem;z-index:999;border-radius:var(--radius)}
  .skip:focus{inset-block-start:1rem}
  @view-transition{navigation:auto}
}

@layer layout {
  .wrap{inline-size:var(--container);margin-inline:auto}
  .section{padding-block:var(--section)}
  .section--dark{background:var(--graphite);color:var(--ivory);--fg:var(--ivory);--muted:color-mix(in oklab,var(--ivory) 65%,transparent);--line:color-mix(in oklab,var(--ivory) 14%,transparent)}
  .section--green{background:var(--green);color:var(--ivory);--fg:var(--ivory);--muted:color-mix(in oklab,var(--ivory) 70%,transparent);--line:color-mix(in oklab,var(--ivory) 14%,transparent)}
  .section--bone{background:var(--bone)}
  .section--white{background:var(--white)}
  .grid{display:grid;gap:var(--sp-6)}
  .grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
  .grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
  .grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
  .split{display:grid;gap:var(--sp-7);align-items:center;grid-template-columns:1fr}
  .split>*{min-inline-size:0}
  @media (min-width:1000px){.split{grid-template-columns:1.05fr .95fr}.split--rev>:first-child{order:2}}
  .lede{font-size:var(--fs-1);color:var(--muted);max-inline-size:60ch;line-height:1.5}
  .kicker{font-family:var(--font-display);font-style:italic;font-size:var(--fs-1);color:var(--bronze);margin-block-end:var(--sp-3)}
  .section-head{display:grid;gap:var(--sp-4);margin-block-end:var(--sp-7);max-inline-size:760px}
  .section-head--center{margin-inline:auto;text-align:center;justify-items:center}
  .prose{max-inline-size:72ch}
  .prose>*+*{margin-block-start:1.1em}
  .prose h2{font-size:var(--fs-3);margin-block-start:1.8em}
  .prose h3{margin-block-start:1.5em}
  .prose ul,.prose ol{padding-inline-start:1.3em}
  .prose li+li{margin-block-start:.4em}
  .prose blockquote{border-inline-start:3px solid var(--bronze);padding-inline-start:1.2em;font-family:var(--font-display);font-size:var(--fs-1);font-style:italic}
  .prose a{color:var(--green-2);text-decoration:underline;text-underline-offset:.2em}
  .section--dark .prose a{color:var(--bronze-2)}
}

@layer components {
  /* Buttons */
  .btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.5rem;border-radius:999px;font-weight:700;font-size:var(--fs--1);letter-spacing:.01em;border:1.5px solid transparent;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;white-space:nowrap}
  .btn:hover{transform:translateY(-2px)}
  .btn svg{inline-size:1.15em;block-size:1.15em;flex:none}
  .btn--wa{background:var(--wa);color:#0B2B18}
  .btn--wa:hover{background:color-mix(in oklab,var(--wa) 88%,black)}
  .btn--bronze{background:var(--bronze);color:var(--graphite)}
  .btn--bronze:hover{background:var(--bronze-2)}
  .btn--ghost{border-color:currentColor;color:inherit}
  .btn--ghost:hover{background:color-mix(in oklab,currentColor 10%,transparent)}
  .btn--dark{background:var(--graphite);color:var(--ivory)}
  .btn--lg{padding:1.15rem 2rem;font-size:var(--fs-0)}
  .btn--xl{padding:1.4rem 2.6rem;font-size:var(--fs-1)}
  @media (max-width:520px){.btn{white-space:normal;text-align:center;max-inline-size:100%}.btn--xl{padding:1.1rem 1.6rem}}

  /* Announcement bar — opening hours + live status */
  .topbar{background:var(--green);color:var(--ivory);font-size:var(--fs--1)}
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:.5rem;min-block-size:2.6rem}
  .topbar .wrap>a{flex:none}
  .topbar a{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;white-space:nowrap}
  .topbar svg{inline-size:1em;block-size:1em}
  .hours{display:flex;align-items:center;flex-wrap:nowrap;gap:.35rem .8rem;min-inline-size:0;overflow:hidden;white-space:nowrap}
  .hours__days{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;letter-spacing:.02em}
  .hours__slot{font-variant-numeric:tabular-nums;color:color-mix(in oklab,var(--ivory) 88%,transparent)}
  .hours__amp{color:var(--bronze-2);font-family:var(--font-display);font-style:italic}
  .hours__closed{padding-inline-start:.8rem;border-inline-start:1px solid color-mix(in oklab,var(--ivory) 25%,transparent);color:color-mix(in oklab,var(--ivory) 70%,transparent)}
  .hours__status{display:inline-flex;align-items:center;gap:.45rem;padding:.2rem .7rem .2rem .55rem;border-radius:999px;background:color-mix(in oklab,var(--ivory) 10%,transparent);font-weight:700;font-size:.78rem;letter-spacing:.02em;white-space:nowrap;max-inline-size:100%;min-inline-size:0}
  .hours__status b{overflow:hidden;text-overflow:ellipsis;min-inline-size:0}
  .hours__status--inline{white-space:normal}
  .hours__status i{inline-size:.55rem;block-size:.55rem;border-radius:50%;background:var(--mist);box-shadow:0 0 0 0 transparent}
  .hours__status[data-state=open] i{background:var(--wa);animation:blink 2s infinite}
  .hours__status[data-state=break] i{background:var(--bronze-2)}
  .hours__status[data-state=closed] i{background:var(--danger)}
  .hours__status--inline{background:var(--bone);color:var(--graphite);width:fit-content}
  @keyframes blink{0%,100%{box-shadow:0 0 0 0 rgb(37 211 102 / .6)}50%{box-shadow:0 0 0 5px rgb(37 211 102 / 0)}}
  @media (max-width:1250px){.hours__closed{display:none}}
  @media (max-width:1100px){.hours__amp,.hours__slot{display:none}}
  @media (max-width:640px){.hours__days{display:none}.topbar a span{display:none}.hours__status{font-size:.72rem}}
  .hours-table{display:grid;gap:.25rem;margin-block-start:.3rem}
  .hours-row{display:flex;justify-content:space-between;gap:1.5rem;font-variant-numeric:tabular-nums}
  .hours-row span:last-child{color:var(--muted)}
  .footer .hours-row span:last-child{color:color-mix(in oklab,var(--ivory) 80%,transparent)}

  /* Header */
  .header{position:sticky;inset-block-start:0;z-index:50;background:color-mix(in oklab,var(--ivory) 88%,transparent);backdrop-filter:blur(14px);border-block-end:1px solid var(--line)}
  .header.is-stuck{box-shadow:0 10px 30px -18px rgb(27 31 35 / .35)}
  .header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);min-block-size:4.5rem}
  .logo{display:flex;align-items:center;flex:none}
  .logo img{block-size:44px;inline-size:auto;max-inline-size:min(60vw,360px);object-fit:contain}
  @media (min-width:1280px){.header .logo img{block-size:36px}.header .wrap{gap:1.1rem}.header .nav{gap:.8rem;font-size:.84rem}.header .header__cta{padding:.85rem 1.15rem}}
  @media (max-width:640px){.logo img{block-size:auto;inline-size:calc(100vw - 8.5rem);max-inline-size:300px}.header .wrap{gap:.5rem}}
  .drawer .logo img{block-size:auto;inline-size:calc(100vw - 8rem);max-inline-size:280px}.ft .logo img{block-size:40px}
  .nav{display:none;gap:clamp(.85rem,1.4vw,1.6rem);font-weight:600;font-size:var(--fs--1)}
  .nav a{position:relative;padding-block:.4rem;white-space:nowrap}
  .nav a::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:2px;background:var(--bronze);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
  .nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
  .header__cta{display:none}
  .burger{display:inline-grid;place-items:center;inline-size:3.6rem;block-size:3.6rem;margin-block:-.6rem;margin-inline-end:-.5rem;border:0;background:none;color:var(--graphite);transition:opacity .2s;flex:none;padding:0}
  .burger:hover{opacity:.7}
  .burger svg{inline-size:3.6rem;block-size:3.6rem;max-inline-size:none;stroke-width:1.2}
  .drawer .burger{color:var(--ivory);margin:0}
  @media (min-width:1280px){.nav,.header__cta{display:flex}.burger{display:none}}

  /* Mobile drawer */
  .drawer{position:fixed;inset:0;z-index:60;background:var(--graphite);color:var(--ivory);padding:1.5rem;display:grid;grid-template-rows:auto 1fr auto;translate:100% 0;transition:translate .4s var(--ease);visibility:hidden}
  .drawer[data-open]{translate:0 0;visibility:visible}
  .drawer__head{display:flex;justify-content:space-between;align-items:center}
  .drawer nav{display:grid;align-content:center;gap:.25rem}
  .drawer nav a{font-family:var(--font-display);font-size:var(--fs-3);padding-block:.5rem;border-block-end:1px solid color-mix(in oklab,var(--ivory) 10%,transparent)}
  .drawer__foot{display:grid;gap:.75rem}

  /* Hero — composed around the 2.2:1 workshop panorama */
  .hero{position:relative;isolation:isolate;background:#171a24;color:var(--ivory);min-block-size:clamp(560px,78dvh,800px);display:grid;grid-template-rows:1fr auto;overflow:clip}
  .hero__media{position:absolute;inset:0;z-index:-2}
  .hero__media img{inline-size:100%;block-size:100%;object-fit:cover;object-position:78% 72%;animation:hero-zoom 16s var(--ease) both}
  .hero__media::after{content:"";position:absolute;inset:0;background:
    linear-gradient(90deg,rgb(18 22 34 / .86) 0%,rgb(18 22 34 / .6) 36%,rgb(18 22 34 / .12) 62%,rgb(18 22 34 / 0) 82%),
    linear-gradient(180deg,rgb(18 22 34 / .35) 0%,transparent 26%,transparent 72%,rgb(18 22 34 / .88) 100%)}
  .hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 50% at 10% 75%,color-mix(in oklab,var(--bronze) 18%,transparent),transparent 70%)}
  .hero::after{content:"";position:absolute;inset-inline:0;inset-block-start:0;block-size:1px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--bronze) 60%,transparent),transparent);z-index:1}
  .hero__title{text-shadow:0 1px 1px rgb(8 10 15 / .55),0 2px 10px rgb(8 10 15 / .5),0 10px 40px rgb(8 10 15 / .45)}
  .hero__lede{text-shadow:0 1px 2px rgb(8 10 15 / .7),0 2px 14px rgb(8 10 15 / .5)}
  /* Ultra-wide: the panorama fits naturally, keep it uncropped */
  @media (min-aspect-ratio:2/1){.hero{min-block-size:min(78dvh,calc(100vw / 2.22))}.hero__media img{object-position:center 80%}}
  /* Tablet portrait & phones: stack — text on dark, then the full photo beneath */
  @media (max-width:999px){
    .hero{min-block-size:auto;grid-template-rows:auto auto auto}
    .hero__media{position:relative;inset:auto;order:2;aspect-ratio:16/10;z-index:0}
    .hero__media img{object-position:74% 65%;animation:none}
    .hero__media::after{background:linear-gradient(180deg,rgb(23 26 36 / .55) 0%,transparent 25%,transparent 80%,rgb(23 26 36 / .85) 100%)}
    .hero::before{display:none}
    .hero__marquee{order:3}
  }
  .hero__inner{position:relative;display:grid;gap:clamp(1.2rem,1rem + 1.2vw,2rem);align-content:center;max-inline-size:min(100% - 2.5rem,1240px);inline-size:100%;margin-inline:auto;padding-block:clamp(3rem,2.5rem + 3vw,5rem) clamp(2.5rem,2rem + 3vw,4rem)}
  .hero__inner::before{content:"";position:absolute;z-index:-1;inset-block:-8%;inset-inline-start:-8%;inline-size:min(52rem,68%);background:radial-gradient(75% 62% at 32% 48%,rgb(9 11 17 / .62),rgb(9 11 17 / .34) 55%,transparent 78%);filter:blur(6px);pointer-events:none}
  @media (max-width:999px){.hero__inner::before{display:none}}
  .hero__eyebrow{display:flex;align-items:center;gap:.9rem;font-size:var(--fs--1);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-2);max-inline-size:none}
  .hero__rule{display:none}
  .hero__dot{inline-size:.3rem;block-size:.3rem;border-radius:50%;background:var(--bronze-2);opacity:.8}
  .hero__title{font-size:clamp(2.5rem,1.2rem + 4.6vw,5.2rem);line-height:1.02;letter-spacing:-.025em;max-inline-size:24ch;font-weight:400;font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 1}
  .hero__title em{font-style:italic;font-weight:300;color:var(--bronze-2)}
  .hero__lede{font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);line-height:1.55;max-inline-size:54ch;color:color-mix(in oklab,var(--ivory) 90%,transparent)}
  .hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-block-start:.4rem}
  .hero__actions .btn--ghost{border-color:color-mix(in oklab,var(--ivory) 35%,transparent)}
  .hero__actions .btn--ghost:hover{border-color:var(--ivory)}
  .hero__proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:1.2rem 2rem;margin-block-start:clamp(1rem,.6rem + 1.4vw,2rem);padding-block-start:1.4rem;border-block-start:1px solid color-mix(in oklab,var(--ivory) 16%,transparent);max-inline-size:60rem}
  .hero__proof li{display:grid;gap:.25rem;position:relative;padding-inline-start:1rem}
  .hero__proof li::before{content:"";position:absolute;inset-inline-start:0;inset-block:.3rem;inline-size:1px;background:var(--bronze)}
  .hero__proof strong{font-family:var(--font-display);font-weight:400;font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);line-height:1;letter-spacing:-.01em}
  .hero__proof strong sup{font-size:.55em;color:var(--bronze-2);vertical-align:top}
  .hero__proof strong small{font-size:.5em;color:color-mix(in oklab,var(--ivory) 60%,transparent);margin-inline-start:.1em}
  .hero__proof span{font-size:.8rem;color:color-mix(in oklab,var(--ivory) 62%,transparent);letter-spacing:.02em}
  .hero__scroll{position:absolute;inset-inline-end:0;inset-block-end:2.4rem;display:none;flex-direction:column;align-items:center;gap:.6rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in oklab,var(--ivory) 55%,transparent)}
  .hero__scroll i{display:block;inline-size:1px;block-size:3.4rem;background:linear-gradient(180deg,var(--bronze-2),transparent);animation:scroll-line 2.2s var(--ease) infinite}
  @media (min-width:1100px){.hero__scroll{display:flex}}
  /* Orchestrated entrance */
  .hero__eyebrow,.hero__title,.hero__lede,.hero__actions{animation:hero-in .9s var(--ease) both}
  .hero__title{animation-delay:.1s}.hero__lede{animation-delay:.22s}.hero__actions{animation-delay:.32s}.hero__proof{animation-delay:.45s}
  @keyframes hero-in{from{opacity:0;translate:0 22px;filter:blur(4px)}to{opacity:1;translate:0 0;filter:blur(0)}}
  @keyframes hero-zoom{from{scale:1.06}to{scale:1}}
  @keyframes scroll-line{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
  @media (max-width:640px){.hero__title{max-inline-size:none}.hero__title br{display:none}.hero__proof{grid-template-columns:1fr 1fr;gap:1rem}.hero__eyebrow{display:block;font-size:.7rem;letter-spacing:.12em;line-height:1.7}.hero__rule{display:none}.hero__dot{display:inline-block;vertical-align:middle;margin-inline:.5rem}}
  .hero__marquee{position:relative;border-block-start:1px solid color-mix(in oklab,var(--ivory) 14%,transparent);background:color-mix(in oklab,var(--graphite) 70%,transparent);backdrop-filter:blur(6px);padding-block:.9rem;overflow:hidden;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .marquee__track{display:flex;gap:3rem;width:max-content;animation:marquee 40s linear infinite;font-family:var(--font-display);font-size:var(--fs-1);color:color-mix(in oklab,var(--ivory) 70%,transparent)}
  .marquee__track span{display:flex;gap:3rem;align-items:center}
  .marquee__track i{inline-size:.35rem;block-size:.35rem;border-radius:50%;background:var(--bronze)}
  @keyframes marquee{to{transform:translateX(-50%)}}

  /* Page hero (inner pages) */
  .page-hero{background:var(--graphite);color:var(--ivory);position:relative;isolation:isolate;overflow:clip}
  .page-hero__bg{position:absolute;inset:0;z-index:-1}
  .page-hero__bg img{inline-size:100%;block-size:100%;object-fit:cover;opacity:.35}
  .page-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(20 24 30 / .96) 0%,rgb(20 24 30 / .9) 38%,rgb(20 24 30 / .7) 62%,rgb(20 24 30 / .55) 100%)}
  .page-hero .wrap{padding-block:clamp(3rem,3rem + 4vw,7rem) clamp(2.5rem,2rem + 3vw,5rem);display:grid;gap:var(--sp-4)}
  .page-hero h1{font-size:var(--fs-4);max-inline-size:18ch}
  .page-hero .lede{color:color-mix(in oklab,var(--ivory) 88%,transparent)}
  .page-hero h1{text-shadow:0 1px 1px rgb(8 10 15 / .5),0 2px 12px rgb(8 10 15 / .45)}
  .page-hero .lede{text-shadow:0 1px 2px rgb(8 10 15 / .6),0 2px 12px rgb(8 10 15 / .4)}
  .crumbs{display:none}
  .crumbs a:hover{color:var(--bronze-2)}
  .crumbs li+li::before{content:"/";margin-inline-end:.5rem;opacity:.5}

  /* Brand logo strip — full colour, always visible */
  .lstrip{position:relative;background:var(--white);padding-block:1.6rem;overflow:hidden;border-block:1px solid var(--line)}
  .lstrip::before,.lstrip::after{content:"";position:absolute;inset-block:0;inline-size:clamp(3rem,10vw,10rem);z-index:2;pointer-events:none}
  .lstrip::before{inset-inline-start:0;background:linear-gradient(90deg,var(--white),transparent)}
  .lstrip::after{inset-inline-end:0;background:linear-gradient(270deg,var(--white),transparent)}
  .lstrip__track{display:flex;width:max-content;animation:lstrip 80s linear infinite;will-change:transform}
  .lstrip__track:hover{animation-play-state:paused}
  .lstrip__row{display:flex;align-items:center;gap:clamp(2rem,3.5vw,4rem);padding-inline-end:clamp(2rem,3.5vw,4rem)}
  .lstrip__item{flex:none;display:grid;place-items:center;block-size:4.5rem;min-inline-size:7rem;padding-inline:.5rem;transition:transform .35s var(--ease)}
  .lstrip__item:hover{transform:translateY(-3px)}
  .lstrip__item img{block-size:3.4rem;inline-size:auto;max-inline-size:11rem;object-fit:contain}
  .lstrip__name{font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.01em;color:var(--graphite);white-space:nowrap;font-weight:500}
  @keyframes lstrip{to{transform:translateX(-50%)}}
  @media (max-width:640px){.lstrip{padding-block:1.1rem}.lstrip__item{block-size:3.4rem;min-inline-size:5.5rem}.lstrip__item img{block-size:2.5rem;max-inline-size:8rem}.lstrip__name{font-size:1.15rem}.lstrip__track{animation-duration:55s}}
  @media (prefers-reduced-motion:reduce){.lstrip__track{animation:none;width:auto;flex-wrap:wrap}.lstrip__row+.lstrip__row{display:none}}

  /* Trust strip */
  .trust{background:var(--white);border-block-end:1px solid var(--line)}
  .trust .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--sp-5);padding-block:var(--sp-6)}
  .trust__item{display:flex;gap:.9rem;align-items:center}
  .trust__item svg{inline-size:2.2rem;block-size:2.2rem;color:var(--bronze);flex:none}
  .trust__item strong{display:block;font-family:var(--font-display);font-size:var(--fs-2);line-height:1;font-weight:500}
  .trust__item span{font-size:var(--fs--1);color:var(--muted)}

  /* Feature list (why us) */
  .features{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
  .feature{padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--radius-lg);display:grid;gap:.6rem;align-content:start;background:color-mix(in oklab,var(--white) 40%,transparent)}
  .feature svg{inline-size:2.4rem;block-size:2.4rem;color:var(--bronze);margin-block-end:.4rem}
  .feature h3{font-size:var(--fs-1)}
  .feature p{color:var(--muted);font-size:var(--fs--1)}
  .section--dark .feature{background:color-mix(in oklab,var(--ivory) 5%,transparent)}

  /* Cards */
  .card{display:grid;grid-template-rows:auto 1fr;border-radius:var(--radius-lg);overflow:clip;background:var(--white);border:1px solid var(--line);transition:box-shadow .3s,transform .3s var(--ease)}
  .card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
  .card__media{aspect-ratio:4/3;background:var(--white);position:relative;overflow:clip;padding:.7rem;border-block-end:1px solid var(--line)}
  .card__media img{inline-size:100%;block-size:100%;object-fit:cover;border-radius:calc(var(--radius) - 1px);transition:transform .8s var(--ease)}
  .card:hover .card__media img{transform:scale(1.04)}
  .card__media--wide{aspect-ratio:16/9;padding:0;border-block-end:0}
  .card__media--wide img{border-radius:0}
  .card__media--wide .img-fallback{inset:0;border-radius:0}
  .card__icon{display:none;position:absolute;inset:0;z-index:1;place-items:center;color:var(--bronze);pointer-events:none}
  .card__icon svg{inline-size:3.2rem;block-size:3.2rem;opacity:.9}
  .card__media:has(.img-fallback) .card__icon{display:grid;z-index:4;inset:.7rem;color:color-mix(in oklab,var(--ivory) 92%,transparent)}
  .card__media:has(.img-fallback) .img-fallback svg{display:none}
  .card__body{padding:var(--sp-5);display:grid;gap:.6rem;align-content:start}
  .card__body h3{font-size:var(--fs-1)}
  .card__body p{color:var(--muted);font-size:var(--fs--1)}
  .card__link{margin-block-start:auto;padding-block-start:.5rem;font-weight:700;font-size:var(--fs--1);color:var(--green-2);display:inline-flex;gap:.4rem;align-items:center}
  .card__link svg{inline-size:1em;block-size:1em;transition:translate .3s var(--ease)}
  .card:hover .card__link svg{translate:4px 0}
  .card__tag{position:absolute;inset-block-start:.8rem;inset-inline-start:.8rem;background:color-mix(in oklab,var(--graphite) 75%,transparent);color:var(--ivory);font-size:.7rem;font-weight:700;padding:.3rem .65rem;border-radius:999px;backdrop-filter:blur(6px)}
  .section--dark .card{background:color-mix(in oklab,var(--ivory) 6%,transparent)}
  .section--dark .card__media{background:transparent}
  .section--dark .card__link{color:var(--bronze-2)}

  /* Service list (icon row) */
  .service-row{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:clip}
  @container (min-width:700px){.service-row{grid-template-columns:1fr 1fr}}
  @container (min-width:1000px){.service-row{grid-template-columns:1fr 1fr 1fr}}
  .service-row>a{display:flex;gap:1rem;align-items:center;padding:1.1rem 1.25rem;background:var(--white);transition:background .25s}
  .service-row>a:hover{background:var(--bone)}
  .service-row svg{inline-size:1.6rem;block-size:1.6rem;color:var(--bronze);flex:none}
  .service-row strong{display:block;font-weight:700;font-size:var(--fs--1)}
  .service-row span{font-size:.8rem;color:var(--muted)}
  .cq{container-type:inline-size}

  /* Book Now band */
  .book{position:relative;isolation:isolate;overflow:clip;background:var(--green);color:var(--ivory);text-align:center}
  .book::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 50% 120%,color-mix(in oklab,var(--bronze) 45%,transparent),transparent 70%)}
  .book .wrap{display:grid;gap:var(--sp-5);justify-items:center;padding-block:var(--section)}
  .book .wrap>*{max-inline-size:100%}
  .book h2{max-inline-size:16ch}
  .book p{color:color-mix(in oklab,var(--ivory) 78%,transparent)}
  .book .btn--xl{box-shadow:0 0 0 0 rgb(37 211 102 / .5);animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgb(37 211 102 / .55)}70%{box-shadow:0 0 0 22px rgb(37 211 102 / 0)}100%{box-shadow:0 0 0 0 rgb(37 211 102 / 0)}}
  .book__note{font-size:var(--fs--1);display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center}
  .book__note span{display:inline-flex;gap:.4rem;align-items:center}
  .book__note svg{inline-size:1.1em;block-size:1.1em;color:var(--bronze-2)}

  /* Process steps */
  .steps{display:grid;gap:var(--sp-5);counter-reset:step;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
  .step{counter-increment:step;display:grid;gap:.5rem;padding-block-start:var(--sp-4);border-block-start:2px solid var(--bronze)}
  .step::before{content:"0" counter(step);font-family:var(--font-display);font-size:var(--fs-3);color:var(--bronze);line-height:1}
  .step h3{font-size:var(--fs-1)}
  .step p{font-size:var(--fs--1);color:var(--muted)}

  /* Models showcase */
  .models{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
  .model{position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:clip;background:var(--green-2);display:grid;align-content:end;padding:var(--sp-5);color:var(--ivory);isolation:isolate}
  .model img{position:absolute;inset:0;z-index:-2;inline-size:100%;block-size:100%;object-fit:cover;transition:transform .9s var(--ease)}
  .model::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,rgb(27 31 35 / .92))}
  .model:hover img{transform:scale(1.05)}
  .model h3{font-size:var(--fs-2)}
  .model span{font-size:var(--fs--1);color:color-mix(in oklab,var(--ivory) 70%,transparent)}
  .model em{font-style:normal;font-size:.75rem;font-weight:700;color:var(--bronze-2);margin-block-start:.6rem;display:block}

  /* Brands */
  .brands{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:clip;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
  .brands a{display:grid;place-items:center;gap:.5rem;padding:1.6rem 1rem;background:var(--white);font-family:var(--font-display);font-size:var(--fs-1);text-align:center;transition:background .25s}
  .brands a:hover{background:var(--bone)}
  .brands a svg{inline-size:2.4rem;block-size:2.4rem;color:var(--bronze)}
  .brands a small{font-family:var(--font-body);font-size:.75rem;color:var(--muted)}

  /* Brands by region (home) */
  .regions{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:clip;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
  .region{background:var(--white);padding:1.4rem 1.3rem;display:grid;gap:.9rem;align-content:start}
  .region h3{font-family:var(--font-body);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);display:flex;align-items:center;gap:.6rem}
  .region h3::after{content:"";flex:1;block-size:1px;background:var(--line)}
  .region .tags a{background:var(--ivory);border-color:transparent;font-weight:600;font-size:.85rem}
  .region .tags a:hover{background:var(--graphite);color:var(--ivory)}
  .brands-x__note{display:flex;gap:.6rem;align-items:flex-start;margin-block-start:var(--sp-5);font-size:var(--fs--1);color:var(--muted);max-inline-size:none}
  .brands-x__note svg{inline-size:1.3rem;block-size:1.3rem;color:var(--bronze);flex:none;margin-block-start:.1rem}

  /* Google reviews embed */
  .reviews-x__embed{margin-block:var(--sp-6) var(--sp-5);min-block-size:8rem}
  .reviews-x__embed .sk-ww-google-reviews{max-inline-size:100%}
  .reviews-x .cta-inline{margin-block-start:0}

  /* Testimonials */
  .quotes{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
  .quote{display:grid;gap:1rem;padding:var(--sp-6);border-radius:var(--radius-lg);background:color-mix(in oklab,var(--ivory) 6%,transparent);border:1px solid var(--line)}
  .quote p{font-family:var(--font-display);font-size:var(--fs-1);line-height:1.35;font-style:italic;max-inline-size:none}
  .quote footer{display:flex;justify-content:space-between;gap:1rem;font-size:var(--fs--1);color:var(--muted)}
  .stars{color:var(--bronze-2);letter-spacing:.1em}

  /* FAQ */
  .faq{display:grid;gap:.6rem;max-inline-size:820px}
  .faq details{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);overflow:clip}
  .faq summary{cursor:pointer;list-style:none;padding:1.1rem 1.25rem;font-weight:700;display:flex;justify-content:space-between;gap:1rem;align-items:center}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-family:var(--font-display);font-size:1.6rem;color:var(--bronze);line-height:1;transition:rotate .3s var(--ease)}
  .faq details[open] summary::after{rotate:45deg}
  .faq details>div{padding:0 1.25rem 1.25rem;color:var(--muted);font-size:var(--fs--1)}
  .section--dark .faq details{background:color-mix(in oklab,var(--ivory) 6%,transparent)}

  /* Forms */
  .form{display:grid;gap:1rem}
  .form__row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
  .field{display:grid;gap:.35rem;font-size:var(--fs--1);font-weight:600}
  .field input,.field select,.field textarea{inline-size:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--white);font-weight:400;transition:border-color .2s}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bronze);outline:none}
  .field textarea{min-block-size:7rem;resize:vertical}
  .form:has(input:invalid:not(:placeholder-shown)) .form__hint{display:block}
  .form__hint{display:none;color:var(--danger);font-size:var(--fs--1)}
  .form__note{font-size:.8rem;color:var(--muted)}

  /* Sidebar (service/blog) */
  .with-aside{display:grid;gap:var(--sp-7);grid-template-columns:1fr}
  @media (min-width:1000px){.with-aside{grid-template-columns:minmax(0,1fr) 20rem}}
  .aside{display:grid;gap:var(--sp-5);align-content:start;position:sticky;inset-block-start:6rem}
  .aside__box{border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--sp-5);display:grid;gap:.8rem;background:var(--white)}
  .aside__box h3{font-size:var(--fs-1)}
  .aside__box ul{display:grid;gap:.4rem;font-size:var(--fs--1)}
  .aside__box li a{display:flex;justify-content:space-between;padding-block:.35rem;border-block-end:1px solid var(--line)}
  .aside__box li a:hover{color:var(--green-2)}
  .aside__box--dark{background:var(--graphite);color:var(--ivory);border-color:transparent}
  .aside__box--dark p{color:color-mix(in oklab,var(--ivory) 75%,transparent);font-size:var(--fs--1)}

  /* Checklist */
  .checks{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
  .checks li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs--1)}
  .checks svg{inline-size:1.2rem;block-size:1.2rem;color:var(--bronze);flex:none;margin-block-start:.1rem}

  /* Stats */
  .stats{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
  .stat{border-inline-start:2px solid var(--bronze);padding-inline-start:1.2rem}
  .stat strong{display:block;font-family:var(--font-display);font-size:var(--fs-3);line-height:1;font-weight:500}
  .stat span{color:var(--muted);font-size:var(--fs--1)}

  /* Gallery */
  .gallery{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));grid-auto-flow:dense}
  .gallery figure{border-radius:var(--radius);overflow:clip;aspect-ratio:1;background:var(--green-2);position:relative}
  .gallery figure:nth-child(5n+1){grid-column:span 2;grid-row:span 2}
  .gallery img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .8s var(--ease)}
  .gallery figure:hover img{transform:scale(1.05)}
  .gallery figcaption{position:absolute;inset-inline:0;inset-block-end:0;padding:.6rem .9rem;font-size:.8rem;color:var(--ivory);background:linear-gradient(transparent,rgb(27 31 35 / .8))}

  /* Blog meta */
  .meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:var(--fs--1);color:var(--muted)}
  .meta time{font-weight:600}
  .post-hero{position:relative;aspect-ratio:21/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--green-2)}
  .post-hero img{inline-size:100%;block-size:100%;object-fit:cover;border-radius:var(--radius-lg)}
  .post-hero .img-fallback{inset:0;border-radius:var(--radius-lg)}

  /* Footer */
  .ft{position:relative;isolation:isolate;overflow:clip;background:var(--graphite);color:var(--ivory);--muted:color-mix(in oklab,var(--ivory) 58%,transparent);--line:color-mix(in oklab,var(--ivory) 12%,transparent);border-block-start:1px solid color-mix(in oklab,var(--bronze) 45%,transparent)}
  .ft__glow{position:absolute;inset:auto -10% -40% -10%;block-size:60%;z-index:-1;background:radial-gradient(50% 60% at 50% 100%,color-mix(in oklab,var(--bronze) 16%,transparent),transparent 70%)}
  .ft__top{display:grid;gap:var(--sp-7) var(--sp-6);padding-block:var(--sp-8) var(--sp-7);grid-template-columns:1fr}
  @media (min-width:760px){.ft__top{grid-template-columns:1fr 1fr}}
  @media (min-width:1100px){.ft__top{grid-template-columns:1.35fr .8fr .9fr 1fr}}
  .ft__brand{display:grid;gap:1.1rem;align-content:start;justify-items:start}
  .ft__tag{color:var(--muted);font-size:var(--fs--1);max-inline-size:38ch}
  .ft__contact{display:grid;gap:.5rem;margin-block-start:.2rem}
  .ft__contact-row{display:flex;align-items:center;gap:.8rem;padding:.55rem .8rem;border:1px solid var(--line);border-radius:var(--radius);font-weight:700;font-size:var(--fs--1);transition:border-color .25s,background .25s;min-inline-size:min(16rem,100%);max-inline-size:100%}
  .ft__contact-row span{min-inline-size:0;overflow-wrap:anywhere}
  .ft__brand,.ft__col{min-inline-size:0}
  .ft__contact{max-inline-size:100%}
  .ft__contact-row:hover{border-color:var(--bronze);background:color-mix(in oklab,var(--ivory) 5%,transparent)}
  .ft__contact-row svg{inline-size:1.25rem;block-size:1.25rem;color:var(--bronze-2);flex:none}
  .ft__contact-row span{display:grid;line-height:1.2}
  .ft__contact-row small{font-weight:600;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .ft h4{font-family:var(--font-body);font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-2);margin-block-end:1rem}
  .ft__h4-gap{margin-block-start:1.6rem}
  .ft__col ul{display:grid;gap:.5rem;font-size:var(--fs--1);color:color-mix(in oklab,var(--ivory) 82%,transparent)}
  .ft__col ul a{transition:color .2s}
  .ft__col ul a:hover{color:var(--bronze-2)}
  .ft__more{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--ivory);margin-block-start:.3rem}
  .ft__more svg{inline-size:1em;block-size:1em}
  .ft__inline{display:flex!important;flex-wrap:wrap;gap:.4rem!important}
  .ft__inline li a{display:inline-block;padding:.3rem .65rem;border:1px solid var(--line);border-radius:999px;font-size:.75rem;font-weight:600}
  .ft__inline li a:hover{border-color:var(--bronze);color:var(--ivory)}
  .ft__addr{font-style:normal;display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs--1);color:color-mix(in oklab,var(--ivory) 85%,transparent);margin-block-end:.9rem;line-height:1.5}
  .ft__addr svg{inline-size:1.2rem;block-size:1.2rem;color:var(--bronze-2);flex:none;margin-block-start:.15rem}
  .btn--sm{padding:.6rem 1rem;font-size:.8rem}
  .ft-hours{display:grid;gap:.35rem;font-size:var(--fs--1);font-variant-numeric:tabular-nums}
  .ft-hours__row{display:flex;justify-content:space-between;gap:1rem;padding-block:.35rem;border-block-end:1px dashed var(--line)}
  .ft-hours__row span:last-child{color:color-mix(in oklab,var(--ivory) 85%,transparent)}
  .ft-hours__row:last-child span:last-child{color:var(--bronze-2);font-weight:700}
  .ft__cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 1.5rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:color-mix(in oklab,var(--ivory) 4%,transparent);margin-block-end:var(--sp-6)}
  .ft__cta div{display:grid;gap:.15rem}
  .ft__cta strong{font-family:var(--font-display);font-weight:500;font-size:var(--fs-1)}
  .ft__cta span{color:var(--muted);font-size:var(--fs--1)}
  .ft__bottom{border-block-start:1px solid var(--line);padding-block:1.4rem 2rem;display:grid;gap:.8rem 2rem;font-size:.78rem;color:var(--muted);align-items:center}
  @media (min-width:900px){.ft__bottom{grid-template-columns:auto 1fr auto;grid-template-areas:"copy legal links" "copy legal social"}.ft__bottom>p:first-child{grid-area:copy}.ft__legal{grid-area:legal}.ft__links{grid-area:links;justify-self:end}.ft__social{grid-area:social;justify-self:end}}
  .ft__legal{max-inline-size:52ch}
  .ft__links{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-weight:600}
  .ft__links a:hover{color:var(--bronze-2)}
  .ft__social a{display:inline-flex;align-items:center;gap:.5rem;font-weight:600}
  .ft__social svg{inline-size:1.1rem;block-size:1.1rem;color:var(--bronze-2)}
  .ft__social a:hover{color:var(--bronze-2)}
  .ft__top-link{position:absolute;inset-inline-end:1.25rem;inset-block-start:-1.4rem;inline-size:2.8rem;block-size:2.8rem;border-radius:50%;display:grid;place-items:center;background:var(--bronze);color:var(--graphite);box-shadow:var(--shadow);transition:transform .25s var(--ease)}
  .ft__top-link:hover{transform:translateY(-3px)}
  .ft__top-link svg{inline-size:1.1rem;block-size:1.1rem;rotate:-90deg}

  /* Floating WhatsApp */
  .wa-float{position:fixed;inset-inline-end:1.1rem;inset-block-end:1.1rem;z-index:40;display:flex;align-items:center;gap:.6rem;background:var(--wa);color:#0B2B18;padding:.8rem 1.1rem .8rem .9rem;border-radius:999px;font-weight:800;font-size:var(--fs--1);box-shadow:0 12px 30px -8px rgb(37 211 102 / .6);transition:transform .3s var(--ease)}
  .wa-float:hover{transform:scale(1.05)}
  .wa-float svg{inline-size:1.6rem;block-size:1.6rem}
  @media (max-width:640px){.wa-float span{display:none}.wa-float{padding:.85rem}}

  .bk-card{display:grid;gap:1rem;padding:clamp(1.2rem,1rem + 2vw,2rem);min-inline-size:0;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--line)}
  .bk-card__steps{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));counter-reset:c}
  .bk-card__steps li{counter-increment:c;display:grid;gap:.15rem;padding:.8rem 1rem;border-radius:var(--radius);background:var(--ivory);font-size:.85rem}
  .bk-card__steps li::before{content:"0" counter(c);font-family:var(--font-display);color:var(--bronze);font-size:1.3rem;line-height:1}
  .bk-card__steps span{color:var(--muted);font-size:.78rem}
  /* Booking dialog */
  .bk{border:0;padding:0;margin:0;background:transparent;max-inline-size:none;max-block-size:none;inline-size:100%;block-size:100%;position:fixed;inset:0;color:var(--graphite);display:none;place-items:center;padding:1.5rem}
  .bk[open]{display:grid}
  .bk::backdrop{background:rgb(27 31 35 / .6);backdrop-filter:blur(6px)}
  .bk__form{position:relative;inline-size:min(100%,36rem);block-size:auto;max-block-size:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--ivory);border-radius:var(--radius-lg);box-shadow:0 30px 80px -20px rgb(0 0 0 / .55);display:grid;grid-auto-rows:auto;align-content:start;gap:.9rem;padding:1.25rem 1.4rem 0;animation:bk-in .35s var(--ease)}
  @keyframes bk-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
  @media (max-width:640px){
    .bk{place-items:end stretch;padding:0}
    .bk__form{inline-size:100%;block-size:auto;max-block-size:92dvh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:.9rem 1rem 0;gap:.7rem;animation-name:bk-up}
    @keyframes bk-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
    .bk .field input,.bk .field select,.bk .field textarea{font-size:16px;padding:.7rem .9rem}
    .bk-chip span{font-size:.85rem;padding:.5rem .85rem}
    .bk__step{gap:.6rem}.bk .form__row{gap:.6rem}
    .bk__head h2{font-size:var(--fs-2)}
    .bk__foot .btn{flex:1;justify-content:center}
  }
  .bk__foot{position:sticky;inset-block-end:0;background:var(--ivory);padding-block:.7rem calc(.7rem + env(safe-area-inset-bottom));margin-inline:-1.4rem;padding-inline:1.4rem;border-block-start:1px solid var(--line);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;z-index:2}
  @media (max-width:640px){.bk__foot{margin-inline:-1rem;padding-inline:1rem}}
  .bk__error{flex-basis:100%;margin:0;color:var(--danger);font-size:var(--fs--1);font-weight:600;background:color-mix(in oklab,var(--danger) 8%,transparent);border:1px solid color-mix(in oklab,var(--danger) 30%,transparent);border-radius:var(--radius);padding:.6rem .8rem}
  .bk__privacy{padding-block-end:.8rem;font-size:.72rem}
  .bk__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
  .bk__head h2{font-size:var(--fs-2)}
  .bk__kicker{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green-2)}
  .bk__kicker svg{inline-size:1.1em;block-size:1.1em}
  .bk__close{display:grid;place-items:center;inline-size:2.4rem;block-size:2.4rem;border-radius:50%;border:1px solid var(--line);flex:none}
  .bk__close svg{inline-size:1.1rem;block-size:1.1rem}
  .bk__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;counter-reset:bk}
  .bk__steps li{counter-increment:bk;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding-block-start:.4rem;border-block-start:3px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .3s,color .3s}
  .bk__steps li::before{content:counter(bk) ". "}
  .bk__steps li.is-active{border-color:var(--bronze);color:var(--graphite)}
  .bk__steps li.is-done{border-color:var(--green-2)}
  .bk__step{display:none;gap:.75rem}
  .bk .form__row{gap:.75rem}
  .bk .field{gap:.3rem;font-size:.8rem;align-content:start}
  .bk .field input,.bk .field select,.bk .field textarea{padding:.7rem .9rem}
  .bk .field textarea{min-block-size:5rem}
  .bk__slots{gap:.35rem}
  .bk__label{margin-block-start:.2rem}
  .bk__step.is-active{display:grid;align-content:start;animation:hero-in .35s var(--ease)}
  .bk__label{font-weight:700;font-size:var(--fs--1)}
  .bk__label small{font-weight:400;color:var(--muted);margin-inline-start:.4rem}
  .bk__services{display:grid;gap:.8rem;max-block-size:16rem;overflow:auto;padding:.2rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
  .bk-group{border:0;padding:.4rem .6rem;display:flex;flex-wrap:wrap;gap:.4rem}
  .bk-group legend{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze);padding:.3rem 0}
  .bk-chip{position:relative}
  .bk-chip input{position:absolute;opacity:0;inset:0;inline-size:100%;block-size:100%;cursor:pointer}
  .bk-chip span{display:inline-block;padding:.45rem .8rem;border-radius:999px;border:1.5px solid var(--line);font-size:.8rem;font-weight:600;background:var(--ivory);transition:all .2s}
  .bk-chip input:checked+span{background:var(--graphite);color:var(--ivory);border-color:var(--graphite)}
  .bk-chip input:focus-visible+span{outline:3px solid var(--bronze);outline-offset:2px}
  .bk-chip input:disabled+span{opacity:.35;text-decoration:line-through}
  .bk__slots{display:flex;flex-wrap:wrap;gap:.4rem}
  .bk-check{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs--1)}
  .bk-check input{margin-block-start:.3rem;accent-color:var(--green-2)}
  .bk__summary{display:none;border:1px solid var(--line);border-inline-start:3px solid var(--bronze);background:var(--white);border-radius:var(--radius);padding:.9rem 1rem;font-size:.85rem;line-height:1.6}
  .bk__summary div{display:grid;grid-template-columns:7rem 1fr;gap:.2rem .6rem}
  .bk__summary b{color:var(--muted);font-weight:600}
  .bk__summary:not(:empty){display:block}
  .bk__step .form__row>.field{align-content:start}
  .bk__hours{display:flex;gap:.5rem;align-items:center;font-size:.8rem;color:var(--muted)}
  .bk__hours svg{inline-size:1em;block-size:1em;color:var(--bronze)}
  .bk__steps li.is-done::before{content:"✓ ";color:var(--green-2)}
  .bk__spacer{flex:1}
  .field.is-invalid input,.field.is-invalid select{border-color:var(--danger)}
  .form__hint.is-on{display:block}
  .wa-float{border:0}

  /* Image placeholder fallback */
  .img-fallback{position:absolute;inset:.7rem;z-index:3;display:grid;place-items:center;background:var(--green-2);border-radius:calc(var(--radius) - 1px)}
  .img-fallback svg{inline-size:clamp(2.4rem,16%,3.6rem);block-size:auto;color:color-mix(in oklab,var(--ivory) 92%,transparent);opacity:.9}
  .hero__media .img-fallback,.page-hero__bg .img-fallback{background:var(--green-2)}
  .hero__media .img-fallback svg,.page-hero__bg .img-fallback svg{display:none}

  img[data-fallback]{position:relative;z-index:1}

  /* Reveal on scroll (single orchestrated moment per section) */
  .reveal{opacity:0;translate:0 18px;transition:opacity .7s var(--ease),translate .7s var(--ease)}
  .reveal.is-in{opacity:1;translate:0 0}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;translate:none}}
}

@layer pages {
  .cta-inline{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-block-start:var(--sp-5)}
  .related h2{font-size:var(--fs-3)}
  .map{border-radius:var(--radius-lg);overflow:clip;border:1px solid var(--line);aspect-ratio:16/10;background:var(--bone)}
  .map iframe{inline-size:100%;block-size:100%;border:0}
  .contact-info{display:grid;gap:1.2rem;min-inline-size:0}
  .contact-info>div{display:flex;gap:.9rem;align-items:flex-start;min-inline-size:0}
  .contact-info>div>div{min-inline-size:0}
  .contact-info span,.contact-info a{overflow-wrap:anywhere}
  .contact-info .map{inline-size:100%}
  .contact-info svg{inline-size:1.4rem;block-size:1.4rem;color:var(--bronze);flex:none;margin-block-start:.15rem}
  .contact-info strong{display:block}
  .contact-info span{color:var(--muted);font-size:var(--fs--1)}
  .tags{display:flex;flex-wrap:wrap;gap:.5rem}
  .tags a{font-size:.8rem;font-weight:700;padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line);transition:background .2s}
  .tags a:hover{background:var(--bone)}
  .section--dark .tags a:hover{background:color-mix(in oklab,var(--ivory) 10%,transparent)}
  .areas{display:grid;gap:var(--sp-6)}
  .area-group h2{font-size:var(--fs-2);margin-block-end:.8rem}
  .tags--lg a{font-size:.95rem;padding:.6rem 1rem;background:var(--white)}
  .timeline{display:grid;gap:var(--sp-5);border-inline-start:2px solid var(--bronze);padding-inline-start:var(--sp-5)}
  .timeline li{display:grid;gap:.3rem;position:relative}
  .timeline li::before{content:"";position:absolute;inset-inline-start:calc(-1 * var(--sp-5) - 7px);inset-block-start:.5rem;inline-size:12px;block-size:12px;border-radius:50%;background:var(--bronze)}
  .timeline strong{font-family:var(--font-display);font-size:var(--fs-2);font-weight:500}
  .timeline p{color:var(--muted);font-size:var(--fs--1)}
}

@layer utilities {
  .text-center{text-align:center}
  .mt-6{margin-block-start:var(--sp-6)}
  .mt-7{margin-block-start:var(--sp-7)}
  .muted{color:var(--muted)}
  .vh{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ==========================================================================
   Branch 1 — header highlight + page (scoped: .nav__branch, .br-*)
   ========================================================================== */
@layer components {
  .nav a.nav__branch{position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .8rem .42rem .7rem;border-radius:999px;border:1px solid color-mix(in oklab,var(--bronze) 60%,transparent);background:linear-gradient(135deg,color-mix(in oklab,var(--bronze-2) 30%,var(--ivory)),color-mix(in oklab,var(--bronze) 16%,var(--ivory)));color:var(--graphite);font-weight:800;box-shadow:0 6px 18px -10px color-mix(in oklab,var(--bronze) 80%,transparent);transition:transform .25s var(--ease),box-shadow .25s}
  .nav a.nav__branch::after{display:none}
  .nav a.nav__branch:hover,.nav a.nav__branch[aria-current=page]{transform:translateY(-1px);box-shadow:0 10px 24px -10px color-mix(in oklab,var(--bronze) 90%,transparent)}
  .nav__branch i{position:relative;inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--green-2);flex:none}
  .nav__branch i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green-2);animation:br-ping 1.8s cubic-bezier(0,0,.2,1) infinite}
  .nav__branch b{position:absolute;inset-block-start:-.62rem;inset-inline-end:-.55rem;font-size:.52rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1;padding:.26rem .4rem;border-radius:999px;background:var(--graphite);color:var(--bronze-2);box-shadow:0 0 0 2px var(--ivory)}
  @keyframes br-ping{75%,100%{transform:scale(2.4);opacity:0}}
  .drawer nav a.nav__branch{display:flex;align-items:center;gap:.7rem;color:var(--bronze-2)}
  .drawer .nav__branch i{position:relative;inline-size:.6rem;block-size:.6rem;border-radius:50%;background:var(--wa);flex:none}
  .drawer .nav__branch i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--wa);animation:br-ping 1.8s cubic-bezier(0,0,.2,1) infinite}
  .drawer .nav__branch b{position:static;box-shadow:none;font-family:var(--font-body);font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .5rem;border-radius:999px;background:var(--bronze);color:var(--graphite)}
  @media (prefers-reduced-motion:reduce){.nav__branch i::after{animation:none}}
}

@layer pages {
  /* Branch 1 — built from homepage components; only these additions */
  .br-make .card__body{gap:.65rem}
  .br-make .tags{margin-block-start:.35rem}
  .br-make .tags a{background:var(--ivory);border-color:transparent;font-weight:600}
  .br-make .tags a:hover{background:var(--graphite);color:var(--ivory)}
  .br-make--ask{background:var(--graphite);color:var(--ivory);border-color:transparent;--muted:color-mix(in oklab,var(--ivory) 72%,transparent)}
  .br-make--ask .card__media{background:transparent;border-block-end-color:color-mix(in oklab,var(--ivory) 12%,transparent);display:grid;place-items:center}
  .br-ask__icon{display:grid;place-items:center;inline-size:5rem;block-size:5rem;border-radius:50%;background:var(--wa);color:#0B2B18}
  .br-ask__icon svg{inline-size:2.4rem;block-size:2.4rem}
  .br-make--ask .card__link{color:var(--bronze-2)}
  .br-faults{display:grid;gap:1.4rem 3rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}
  .br-fault{padding-inline-start:1.1rem;border-inline-start:2px solid var(--bronze)}
  .br-fault h3{font-size:var(--fs-1);margin-block-end:.35rem}
  .br-fault p{font-size:var(--fs--1);color:var(--muted)}
  .br-make__models{font-weight:700;color:var(--fg)!important}
  /* Branch 1 vs dealer */
  .br-compare{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--white)}
  .br-compare table{inline-size:100%;min-inline-size:34rem;border-collapse:collapse;font-size:var(--fs--1)}
  .br-compare th,.br-compare td{padding:.95rem 1.2rem;text-align:start;vertical-align:top;border-block-end:1px solid var(--line)}
  .br-compare tbody tr:last-child th,.br-compare tbody tr:last-child td{border-block-end:0}
  .br-compare thead th{font-family:var(--font-display);font-weight:500;font-size:var(--fs-1);background:var(--ivory)}
  .br-compare thead th:last-child{background:var(--green);color:var(--ivory)}
  .br-compare tbody th{font-weight:700;inline-size:30%}
  .br-compare tbody td{color:var(--muted)}
  .br-compare tbody td:last-child{color:var(--fg);font-weight:600;background:color-mix(in oklab,var(--green-2) 6%,transparent)}
  .br-compare td svg{inline-size:1rem;block-size:1rem;color:var(--green-2);display:inline-block;vertical-align:-.15em;margin-inline-end:.4rem}
  /* Sticky Call + WhatsApp bar (Branch 1, phones only) */
  .br-sticky{display:none}
  @media (max-width:760px){
    .br-sticky{position:fixed;z-index:45;inset-inline:0;inset-block-end:0;display:grid;grid-template-columns:1fr 1.4fr;gap:.6rem;padding:.65rem .9rem calc(.65rem + env(safe-area-inset-bottom));background:color-mix(in oklab,var(--graphite) 96%,transparent);backdrop-filter:blur(10px);border-block-start:1px solid color-mix(in oklab,var(--ivory) 12%,transparent)}
    .br-sticky a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1rem;border-radius:999px;font-weight:800;font-size:.95rem}
    .br-sticky svg{inline-size:1.15rem;block-size:1.15rem}
    .br-sticky__call{border:1.5px solid color-mix(in oklab,var(--ivory) 35%,transparent);color:var(--ivory)}
    .br-sticky__wa{background:var(--wa);color:#0B2B18}
    body:has(.br-sticky) .wa-float{display:none}
    body:has(.br-sticky){padding-block-end:calc(4.6rem + env(safe-area-inset-bottom))}
  }
  .br-callout{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:1.3rem 1.6rem;border:1px solid var(--line);border-inline-start:3px solid var(--bronze);border-radius:var(--radius-lg);background:var(--white)}
  .br-callout p{max-inline-size:62ch}
  .br-callout strong{display:block;font-family:var(--font-display);font-weight:500;font-size:var(--fs-1);margin-block-end:.2rem}
}