/* variant: atelier ("Chef's Choice"). A poster-style scroll: a side-rail index with scroll-spy and a progress line on desktop,
   a floating bottom dock + full-screen menu on phones, a bento hero with an arch-framed photo and a spinning 3D coin (the
   customer's logo, or their monogram), a tilted marquee band, a sideways services rail, stacked sticky process cards,
   numbered section heads and the business name set huge in the footer. Only loaded on atelier sites, so plain selectors are safe.
   Every colour is a theme variable from render.py. Motion: m-none = still poster, m-light = sway + slow band, m-heavy = full spin,
   cover-flow rail, scroll-driven extras (inside @supports, Firefox gets the static page). */
:root{--rail-w:16.5rem;--tile-r:calc(var(--radius) * 1.8);--gap:clamp(.625rem,.35rem + .9vw,1rem);
  --edge:color-mix(in srgb,var(--primary) 58%,#000);--edge-hi:color-mix(in srgb,var(--primary) 78%,#000);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html{scroll-padding-top:1rem}
::selection{background:var(--accent-btn);color:var(--on-accent)}
main{counter-reset:sec}
main>.section:not(.reviews){counter-increment:sec}
h2{font-size:clamp(2.1rem,1.3rem + 3.4vw,4.25rem);line-height:1.02;letter-spacing:-.035em}
.section--alt{background:transparent;border:0}
.section{padding-block:clamp(3.5rem,2.25rem + 5vw,7rem)}

/* ---------- header: phone top bar + dock, desktop side rail ---------- */
.site-header.rail{position:relative;top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;min-height:4.25rem;padding:.5rem var(--gutter);background:var(--hero-bg);color:var(--hero-fg);border:0}
.site-header.rail.scrolled{background:var(--hero-bg);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border:0}
.rail-brand{flex:1 1 0;min-width:0}
.rail .brand{flex:none}
.rail .brand .logo{height:2.5rem}
.rail .nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem}
.rail .nav a{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.5rem .75rem;color:var(--hero-fg);text-decoration:none;border-radius:calc(var(--radius) * .7)}
.nav-n{font-size:.8125rem;font-weight:700;letter-spacing:.06em;color:var(--hero-accent);font-variant-numeric:tabular-nums}
.nav-kicker,.nav-foot{display:none}
.rail .nav{order:3;flex-basis:100%}
.dock{display:flex;gap:.375rem;align-items:center}
.dock-bar,.rail-progress{display:none}
.rail .btn-call{min-height:44px;width:auto;padding:.5rem 1.125rem}
.menu-toggle span{font-weight:700}

/* JS phones/tablets: the menu is a full-screen index opened from a floating dock at the thumb */
@media (max-width:63.99em){
  .js .dock{position:fixed;z-index:70;left:50%;bottom:calc(.875rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:calc(100% - 1.5rem);padding:.375rem;border-radius:999px;background:rgb(var(--hero-bg-rgb) / .92);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);border:1px solid rgb(var(--hero-fg-rgb) / .16);box-shadow:0 18px 40px -14px rgb(0 0 0 / .55);overflow:hidden}
  .js .rail .menu-toggle{display:inline-flex;align-items:center;gap:.5rem;width:auto;height:auto;min-height:48px;padding:0 1.15rem 0 1rem;border:0;border-radius:999px;background:rgb(var(--hero-fg-rgb) / .1);color:var(--hero-fg);font:inherit;font-size:1rem}
  .js .rail .menu-toggle .icon{width:1.25rem;height:1.25rem}
  .js .dock .btn-call{width:auto;min-height:48px;padding:0 1.25rem;border-radius:999px;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .18)}
  .js .dock-bar{display:block;position:absolute;left:1.25rem;right:1.25rem;top:0;height:2px;background:var(--hero-accent);transform-origin:left;transform:scaleX(var(--p,0));pointer-events:none}
  .js .rail .nav{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:center;padding:4.5rem var(--gutter) 7.5rem;background:var(--hero-bg);border:0;box-shadow:none;overflow-y:auto;visibility:hidden;pointer-events:none;opacity:1;clip-path:circle(0% at 50% calc(100% - 2.75rem))}
  .js .rail .nav.open{visibility:visible;pointer-events:auto;clip-path:circle(150% at 50% calc(100% - 2.75rem))}
  .js .rail .nav ul{flex-direction:column;flex-wrap:nowrap;gap:0;width:min(100%,34rem);margin-inline:auto}
  .js .rail .nav a{align-items:baseline;gap:1rem;min-height:3.5rem;padding:.55rem .25rem;border-radius:0;border-bottom:1px solid rgb(var(--hero-fg-rgb) / .12);font-size:clamp(1.75rem,1.1rem + 4.4vw,2.75rem);font-weight:700;line-height:1.1;letter-spacing:-.025em}
  .js .rail .nav a.is-on .nav-l{color:var(--hero-accent)}
  .js .nav-kicker{display:block;width:min(100%,34rem);margin:0 auto .5rem;color:var(--hero-muted);font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
  .js .nav-foot{display:flex;align-items:center;gap:.5rem;width:min(100%,34rem);margin:1.5rem auto 0;color:var(--hero-muted)}
  .js .nav-foot .icon{width:1.25rem;height:1.25rem;color:var(--hero-accent)}
  .js .site-footer{padding-bottom:6.5rem}
  html.menu-open{overflow:hidden}
}
@media (max-width:22.49em){.js .rail .menu-toggle{padding:0 .9rem}.js .dock .btn-call{padding:0 1rem}}

/* desktop: fixed side rail with the numbered index, a scroll progress line and the call button at the bottom */
@media (min-width:64em){
  body{padding-left:var(--rail-w)}
  .site-header.rail{position:fixed;inset:0 auto 0 0;z-index:50;width:var(--rail-w);flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:1.5rem 1.25rem 1.25rem;border-right:1px solid rgb(var(--hero-fg-rgb) / .1);overflow-y:auto;scrollbar-width:none}
  .rail-brand{flex:none}
  .rail .brand{font-size:1.375rem}
  .rail .brand .logo{height:auto;max-height:3.25rem;max-width:100%}
  .rail .nav,.js .rail .nav{order:0;flex:none;display:block;position:static;margin:auto 0;padding:1.5rem 0;visibility:visible;pointer-events:auto;opacity:1;clip-path:none;transition:none;background:none;border:0;box-shadow:none}
  .nav-kicker{display:block;margin:0 0 .5rem .75rem;color:var(--hero-muted);font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
  .rail .nav ul,.js .rail .nav ul{flex-direction:column;gap:.125rem}
  .rail .nav a,.js .rail .nav a{position:relative;min-height:44px;font-size:1.0625rem;border-radius:calc(var(--radius) * .7)}
  .rail .nav a::before{content:"";position:absolute;left:0;top:25%;bottom:25%;width:3px;border-radius:3px;background:var(--hero-accent);transform:scaleY(0);transition:transform .3s var(--ease)}
  .rail .nav a:hover{background:rgb(var(--hero-fg-rgb) / .07)}
  .rail .nav a.is-on{background:rgb(var(--hero-fg-rgb) / .1)}
  .rail .nav a.is-on::before{transform:none}
  .nav-foot{display:flex;align-items:flex-start;gap:.5rem;margin:1.25rem .75rem 0;color:var(--hero-muted);font-size:.9375rem;line-height:1.4}
  .nav-foot .icon{width:1.125rem;height:1.125rem;margin-top:.1rem;color:var(--hero-accent)}
  .dock{flex-direction:column;align-items:stretch}
  .js .rail .menu-toggle{display:none}
  .rail .btn-call{width:100%;padding:.75rem 1rem;font-size:.9375rem;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .18)}
  .rail .btn-call .call-num{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap}
  .rail-progress{display:block;position:absolute;top:0;right:-1px;bottom:0;width:2px;pointer-events:none}
  .rail-progress::after{content:"";position:absolute;inset:0;background:var(--hero-accent);transform-origin:top;transform:scaleY(var(--p,0))}
  .toast{left:calc(50% + var(--rail-w) / 2)}
}

/* ---------- hero: bento poster ---------- */
.hero.hero-bento{background:none;color:var(--fg);overflow:visible;padding-block:var(--gap) 0}
.hero.hero-bento.has-stats{padding-bottom:0}
.bento{display:grid;gap:var(--gap);grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{position:relative;isolation:isolate;overflow:hidden;min-width:0;border-radius:var(--tile-r)}
.t-head,.t-coin,.contact-panel,.reviews-card{--focus:var(--hero-accent)}
.t-head::after,.t-coin::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(color-mix(in srgb,currentColor 13%,transparent) 1px,transparent 1.5px) 0 0/7px 7px;-webkit-mask-image:linear-gradient(125deg,transparent 35%,#000 90%);mask-image:linear-gradient(125deg,transparent 35%,#000 90%)}   /* print halftone (a gradient, so it is not an LCP image) */
.contact-panel::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:180px;opacity:.16;mix-blend-mode:overlay;pointer-events:none}
.t-head{grid-column:1/-1;border:1px solid rgb(var(--hero-fg-rgb) / .08);container-type:inline-size;display:flex;flex-direction:column;justify-content:flex-end;max-width:none;padding:clamp(1.25rem,.6rem + 3.2vw,3.5rem);background:radial-gradient(120% 90% at 100% 0%,rgb(var(--brand-rgb) / .38),transparent 60%),var(--hero-bg);color:var(--hero-fg)}
.hero .t-head h1{font-size:clamp(2.2rem,1.1rem + 5vw,5rem);font-size:clamp(2.1rem,13cqi,5.75rem);line-height:.98;letter-spacing:-.04em;margin-bottom:1.25rem}
.hero .t-head h1 .ln{display:block}
.t-head .hero-sub{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);margin-bottom:1.75rem}
.t-head .eyebrow{margin-bottom:auto;padding-bottom:2rem}
.t-head .btn{padding-inline:clamp(1.125rem,.9rem + .8vw,1.5rem)}
.btn-accent,.btn-primary{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .18),0 10px 24px -16px rgb(0 0 0 / .5)}   /* a near-black accent still reads as a button on dark tiles */
.t-media{grid-column:1/-1;aspect-ratio:4/3;border-radius:50% 50% var(--tile-r) var(--tile-r) / 38% 38% var(--tile-r) var(--tile-r);background:var(--hero-bg)}
.t-media img{width:100%;height:100%;object-fit:cover}
.t-coin{container-type:inline-size;display:grid;place-items:center;min-height:13rem;padding:1rem .5rem;background:var(--accent-btn);color:var(--on-accent)}
.t-info{display:grid;align-content:center;gap:1rem;padding:1.25rem;background:var(--card);border:1px solid var(--border);color:var(--fg)}
.fact{display:flex;gap:.625rem;align-items:flex-start;min-width:0}
.fact .icon{width:1.25rem;height:1.25rem;margin-top:.2rem;color:var(--primary-text)}
.fact p{margin:0;min-width:0;line-height:1.4;overflow-wrap:anywhere}
.fact-k{display:block;margin-bottom:.15rem;color:var(--muted);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.fact-l{display:block}
.no-info .t-coin{grid-column:1/-1}
@media (max-width:47.99em){.t-media{order:4}}   /* phones: headline, then the coin + facts, then the arch photo */
@media (max-width:22.49em){.t-coin,.t-info{grid-column:1/-1}.t-coin{min-height:12rem}}
@media (max-width:29.99em){.t-info{padding:1rem;gap:.75rem;font-size:.9375rem}.t-info .icon{display:none}}
@media (min-width:48em){
  .bento{grid-template-columns:repeat(12,minmax(0,1fr))}
  .t-head{grid-column:1/span 7;grid-row:1/span 2;min-height:min(36rem,72vh)}
  .t-media{grid-column:8/span 5;grid-row:1/span 3;aspect-ratio:auto;min-height:24rem;border-radius:50% 50% var(--tile-r) var(--tile-r) / 30% 30% var(--tile-r) var(--tile-r)}
  .t-coin{grid-column:1/span 3;grid-row:3;min-height:15rem}
  .t-info{grid-column:4/span 4;grid-row:3;padding:1.5rem}
  .no-info .t-coin{grid-column:1/span 7}
  .no-media .t-head{grid-column:1/span 8}
  .no-media .t-coin{grid-column:9/span 4;grid-row:1}
  .no-media .t-info{grid-column:9/span 4;grid-row:2}
  .no-media.no-info .t-coin{grid-row:1/span 2}
}

/* ---------- the coin: pure-CSS 3D (perspective + preserve-3d), faces placed with rotate then translateZ ---------- */
.coin-stage{--coin:clamp(5.5rem,55cqi,10rem);position:relative;display:grid;place-items:center;width:calc(var(--coin) * 1.62);aspect-ratio:1;perspective:56rem}
.coin-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:currentColor;font-family:var(--font);font-weight:700;letter-spacing:.08em}
.coin-tilt{transform-style:preserve-3d;transform:rotateX(14deg)}
.coin{--t:.95px;position:relative;width:var(--coin);aspect-ratio:1;transform-style:preserve-3d;transform:rotateY(-30deg)}
.coin>i{position:absolute;inset:0;border-radius:50%;background:var(--edge);transform:translateZ(calc((var(--k) - 5.5) * var(--t)))}
.coin>i:nth-child(odd){background:var(--edge-hi)}
.coin-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden;color:var(--on-primary);background:radial-gradient(circle at 32% 26%,color-mix(in srgb,var(--primary) 86%,#fff),var(--primary) 58%);box-shadow:inset 0 0 0 calc(var(--coin) * .05) var(--edge-hi),inset 0 0 0 calc(var(--coin) * .065) rgb(255 255 255 / .22)}
.coin-front{transform:translateZ(calc(6.5 * var(--t)))}
.coin-back{transform:rotateY(180deg) translateZ(calc(6.5 * var(--t)))}
.coin-mono{font-size:calc(var(--coin) * .4);font-weight:700;line-height:1;letter-spacing:-.05em;text-shadow:0 2px 0 rgb(0 0 0 / .22)}
.coin-icon{width:42%;height:42%;stroke-width:1.6}
.coin-logo{width:70%;max-height:60%;object-fit:contain}
.coin:has(.coin-logo) .coin-face{background:radial-gradient(circle at 32% 26%,rgb(var(--hero-fg-rgb) / .14),transparent 62%),var(--hero-bg)}
.coin--chip .coin-face,.coin.coin--chip:has(.coin-logo) .coin-face{background:#fff}
.coin-stage:has(.coin--wide){--coin:clamp(5rem,50cqi,9.5rem);width:auto;aspect-ratio:auto;padding-block:1.5rem}
.coin-stage:has(.coin--wide) .coin-ring{display:none}
.coin--wide{width:calc(var(--coin) * 1.75);aspect-ratio:2.3}
.coin--wide>i,.coin--wide .coin-face{border-radius:calc(var(--coin) * .14)}
.coin--wide .coin-logo{width:82%;max-height:70%}
.coin-shadow{position:absolute;left:22%;right:22%;bottom:4%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgb(0 0 0 / .32),transparent);pointer-events:none}

/* ---------- stats: a row of tiles ---------- */
.stats-wrap{margin-top:var(--gap)}
.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.stat{align-items:flex-start;justify-content:flex-start;padding:1.25rem;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:var(--tile-r)}
.stat+.stat::before{display:none}
.stat:last-child:nth-child(odd){grid-column:1/-1}
.stat-lead{font-size:clamp(1.25rem,1rem + 1vw,1.75rem);letter-spacing:-.02em}
@media (min-width:40em){.stats{grid-template-columns:repeat(var(--n),minmax(0,1fr));padding:0}.stat:last-child:nth-child(odd){grid-column:auto}}

/* ---------- marquee band: tilted, alternating solid and outlined service names (decorative copy of the services list) ---------- */
.band-clip{position:relative;overflow:hidden;padding-block:clamp(2.5rem,1.5rem + 3vw,4rem);margin-top:var(--gap)}
.band-clip::before{content:"";position:absolute;left:-5%;right:-5%;top:50%;height:clamp(3.5rem,2.5rem + 3vw,5.5rem);background:var(--accent-btn);transform:translateY(-50%) rotate(2.2deg);opacity:.9}
.marquee{position:relative;width:110%;margin-left:-5%;overflow:hidden;background:var(--primary);color:var(--on-primary);padding-block:clamp(.75rem,.5rem + 1vw,1.25rem);transform:rotate(-2.2deg);box-shadow:0 18px 40px -24px rgb(0 0 0 / .5)}
.marquee-track{display:flex;width:max-content}
.marquee-run{display:flex;flex:none}
.marquee span{display:flex;align-items:center;gap:1.75rem;padding-right:1.75rem;font-size:clamp(1.5rem,1rem + 2.6vw,3rem);font-weight:700;line-height:1.15;letter-spacing:-.025em;white-space:nowrap}
.marquee span:nth-child(even){color:transparent;-webkit-text-stroke:1.25px var(--on-primary)}
.marquee span::after{content:"\2726";color:var(--on-primary);-webkit-text-stroke:0;font-size:.6em}

/* ---------- numbered section heads ---------- */
.section-head{max-width:none;display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(1rem,.5rem + 2vw,2.5rem)}
.section-head::before,.about-copy::before,.contact-intro::before{content:counter(sec,decimal-leading-zero);content:counter(sec,decimal-leading-zero) / "";display:block;margin-bottom:.75rem;font-size:clamp(3.25rem,2rem + 5vw,7.5rem);font-weight:700;line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--primary-text);font-variant-numeric:tabular-nums}
.contact-intro::before{-webkit-text-stroke-color:var(--hero-accent)}
.section-head>*{grid-column:-2/-1;max-width:46rem}
.section-head .lead{margin-bottom:0}
@media (min-width:48em){.section-head{grid-template-columns:auto minmax(0,1fr);align-items:end}.section-head::before{grid-row:1/span 4;margin:0;align-self:start}}

/* ---------- services: a sideways reel (its own scroll-snap container; the page itself never scrolls sideways) ---------- */
.reel{min-width:0;max-width:100%;counter-reset:svc;display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(80%,19.5rem);gap:var(--gap);margin-inline:calc(-1 * var(--gutter));padding:.25rem var(--gutter) 1.25rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);border-radius:2px}
.js .reel{scrollbar-width:none}
.js .reel::-webkit-scrollbar{display:none}
.reel>li{min-width:0;max-width:100%;scroll-snap-align:start;counter-increment:svc}
.reel>li.reveal{opacity:1;transform:none;transition:none}
.reel .card{min-width:0;max-width:100%;overflow-wrap:anywhere;border-radius:var(--tile-r);box-shadow:none;background:var(--card)}
.reel .card::before{content:counter(svc,decimal-leading-zero);content:counter(svc,decimal-leading-zero) / "";position:absolute;z-index:1;top:.875rem;left:.875rem;display:grid;place-items:center;min-width:2.75rem;height:2.75rem;padding:0 .5rem;border-radius:999px;background:var(--card);color:var(--fg);font-size:.9375rem;font-weight:700;box-shadow:0 6px 16px -8px rgb(0 0 0 / .4)}
.reel .card-img{aspect-ratio:5/4;border-radius:calc(var(--tile-r) - 4px);width:calc(100% - .75rem);margin:.375rem .375rem 0}
.reel .card-body{padding:1.25rem 1.25rem 1.5rem}
.reel .card:not(:has(.card-img)) .card-body{padding-top:4.25rem}
.reel .card h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem)}
@media (min-width:64em){.reel{grid-auto-columns:calc((100% - 2 * var(--gutter) - 2 * var(--gap)) / 3.15)}}
.reel-ui{display:flex;align-items:center;gap:.75rem;margin-top:.5rem}
.reel-meter{flex:1;height:2px;background:var(--border);border-radius:2px;overflow:hidden}
.reel-meter span{display:block;height:100%;background:var(--primary-text);transform-origin:left;transform:scaleX(var(--rp,.2))}
.reel-btn{display:grid;place-items:center;width:3rem;height:3rem;padding:0;border:1.5px solid var(--border);border-radius:50%;background:var(--card);color:var(--fg);cursor:pointer;transition:background-color .2s,border-color .2s}
.reel-btn:hover:not(:disabled){border-color:var(--primary-text)}
.reel-btn:disabled{opacity:.45;cursor:default}
.reel-btn .icon{width:1.25rem;height:1.25rem}
.reel-btn.prev .icon{transform:rotate(180deg)}

/* ---------- about: arch photo + a big opening statement ---------- */
.about{gap:clamp(2rem,1rem + 4vw,5rem)}
.about-copy{max-width:44rem}
.about-copy>h2+p{font-size:clamp(1.3rem,1rem + 1.3vw,1.9rem);line-height:1.35;letter-spacing:-.01em}
.about-media::before{inset:auto -.75rem -.75rem auto;width:42%;aspect-ratio:1;border-radius:50%;background:var(--accent-btn)}
.about:not(.has-img) .about-copy{max-width:64rem}
@media (min-width:48em){.about:not(.has-img) .about-copy{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(1rem,.5rem + 2vw,2.5rem)}.about:not(.has-img) .about-copy::before{grid-row:1/span 12;margin:0}.about:not(.has-img) .about-copy>*{grid-column:2}}
.about-media img{aspect-ratio:1;border-radius:50% 50% var(--tile-r) var(--tile-r) / 40% 40% var(--tile-r) var(--tile-r);box-shadow:none}
.points{display:flex;flex-wrap:wrap;gap:.5rem}
.points li{align-items:center;gap:.5rem;padding:.5rem 1rem .5rem .75rem;border:1px solid var(--border);border-radius:999px;background:var(--card)}
.points .icon{margin:0;width:1.25rem;height:1.25rem}
@media (min-width:48em){.about-media img{aspect-ratio:4/5}}
@media (min-width:60em){.about.has-img{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}

/* ---------- reviews ---------- */
.reviews-card{background:radial-gradient(90% 140% at 100% 0%,rgb(var(--brand-rgb) / .3),transparent 60%),var(--hero-bg);color:var(--hero-fg);border:1px solid rgb(var(--hero-fg-rgb) / .1);border-radius:var(--tile-r);padding:clamp(1.5rem,1rem + 2vw,2.5rem) clamp(1.5rem,1rem + 3vw,3.5rem)}
.reviews-card .rating-num{color:var(--hero-fg);font-size:clamp(3.5rem,2rem + 5vw,6.5rem);letter-spacing:-.05em}
.reviews-card .stars{color:rgb(var(--hero-fg-rgb) / .25)}
.reviews-card .reviews-copy p{color:var(--hero-muted)}
.reviews-card .btn{background:var(--accent-btn);color:var(--on-accent)}

/* ---------- process: cards that stack as you scroll (sticky), each in a different theme surface ---------- */
.steps{grid-template-columns:minmax(0,1fr);gap:var(--gap);counter-reset:none}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n t" "p p" "b b";align-items:center;column-gap:clamp(1rem,.5rem + 2.5vw,3rem);padding:clamp(1.5rem,1rem + 2.5vw,3rem);border-radius:var(--tile-r);background:var(--card);color:var(--fg)}
.step-num{grid-area:n;width:auto;height:auto;margin:0;background:none;box-shadow:none;border-radius:0;color:var(--primary-text);font-size:clamp(3rem,2rem + 4.5vw,6.5rem);font-weight:700;line-height:.8;letter-spacing:-.05em}
.step h3{grid-area:t;margin:0;font-size:clamp(1.375rem,1.1rem + 1.2vw,2.25rem);letter-spacing:-.02em}
.step>p{grid-area:p;margin:1rem 0 0}
.step>.badge-row{grid-area:b}
.steps>li:nth-child(4n+2) .step{background:radial-gradient(80% 120% at 100% 0%,rgb(var(--brand-rgb) / .3),transparent 65%),var(--hero-bg);color:var(--hero-fg);border-color:rgb(var(--hero-fg-rgb) / .1)}
.steps>li:nth-child(4n+2) .step p{color:var(--hero-muted)}
.steps>li:nth-child(4n+2) .step-num{color:var(--hero-accent)}
.steps>li:nth-child(4n+3) .step{background:var(--primary);color:var(--on-primary);border-color:transparent}
.steps>li:nth-child(4n+3) .step p,.steps>li:nth-child(4n+3) .step-num{color:var(--on-primary)}
.steps>li:nth-child(4n+4) .step{background:var(--accent-btn);color:var(--on-accent);border-color:transparent}
.steps>li:nth-child(4n+4) .step p,.steps>li:nth-child(4n+4) .step-num{color:var(--on-accent)}
@media (min-width:48em){
  .step{grid-template-columns:minmax(5.5rem,auto) minmax(0,1fr) minmax(0,1.25fr);grid-template-areas:"n t p" "n t b";min-height:15rem;align-content:center}
  .step>p{margin:0;align-self:end}
  .step>.badge-row{align-self:start}
  .step:not(:has(.badge-row)){grid-template-areas:"n t p"}
}
@media (min-width:48em) and (min-height:40em){.steps>li{position:sticky;top:calc(1.5rem + var(--i,0) * 1.25rem)}.step{box-shadow:0 -14px 30px -24px rgb(0 0 0 / .45)}}

/* ---------- gallery: a bento grid ---------- */
.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.gallery>li:first-child{grid-column:1/-1}
.shot-frame{border-radius:var(--tile-r);box-shadow:none}
@media (min-width:48em){
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense}
  .gallery>li:first-child{grid-column:span 2;grid-row:span 2}
  .gallery>li:first-child .shot{display:flex;flex-direction:column;height:100%}
  .gallery>li:first-child .shot-frame{flex:1;display:grid}
  .gallery>li:first-child .shot-frame img,.gallery>li:first-child .shot-ph{height:100%;aspect-ratio:auto}
}

/* ---------- FAQ: sticky head on the left, ruled numbered questions on the right ---------- */
.faq{max-width:none;gap:0;counter-reset:q;border-bottom:1px solid var(--border)}
.faq-item{counter-increment:q;padding:0;border:0;border-top:1px solid var(--border);border-radius:0;background:none}
.faq-item summary{align-items:center;gap:1rem;min-height:44px;padding:1.25rem 0;font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);line-height:1.35}
.faq-item summary::before{content:counter(q,decimal-leading-zero);content:counter(q,decimal-leading-zero) / "";flex:none;min-width:2rem;color:var(--primary-text);font-size:.875rem;font-variant-numeric:tabular-nums}
.faq-item summary::after{content:"+";flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;margin-left:auto;border:1.5px solid var(--border);border-radius:50%;color:var(--primary-text);font-size:1.25rem;line-height:1}
.faq-item[open] summary::after{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.faq-item p{padding-left:3rem;padding-right:3.25rem}
@media (max-width:29.99em){.faq-item p{padding:0}}
@media (min-width:60em){
  #faq>.container{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,1rem + 3vw,4rem);align-items:start}
  #faq .section-head{position:sticky;top:2rem;grid-template-columns:minmax(0,1fr)}
  #faq .section-head::before{grid-row:auto;margin-bottom:.75rem}
}

/* ---------- contact ---------- */
.contact-panel{border-radius:calc(var(--tile-r) * 1.3)}
.contact-panel h2{font-size:clamp(2.1rem,1.3rem + 2.6vw,3.75rem)}
.ccard,.contact-form{border-radius:var(--tile-r)}

/* ---------- footer: the business name, set huge ---------- */
.site-footer{overflow:hidden}
.mega-wrap{container-type:inline-size;margin-top:var(--s4);padding-bottom:.25rem}
.mega{margin:0;color:var(--hero-muted);font-size:clamp(2.5rem,11vw,10rem);font-size:clamp(2.5rem,min(12.5cqi,400cqi / var(--n,16)),12rem);font-weight:700;line-height:.92;letter-spacing:-.055em;text-wrap:balance;overflow-wrap:anywhere}

/* ---------- motion ---------- */
@keyframes coin-sway{0%,100%{transform:rotateY(-34deg)}50%{transform:rotateY(34deg)}}
@keyframes coin-spin{to{transform:rotateY(360deg)}}
@keyframes coin-wob{0%,100%{transform:rotateX(18deg)}50%{transform:rotateX(4deg)}}
@keyframes ring-turn{to{transform:rotate(360deg)}}
@keyframes ring-back{to{transform:rotate(-360deg)}}
@keyframes band{to{transform:translateX(-50%)}}
@keyframes tile-in{from{transform:translateY(1.5rem) scale(.97)}}
@keyframes line-up{from{transform:translateY(105%)}}
@keyframes grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:no-preference){
  .m-light .coin{animation:coin-sway 7s ease-in-out infinite}
  .m-light .coin-ring{animation:ring-turn 60s linear infinite}
  .m-light .marquee-track{animation:band 90s linear infinite}
  .m-heavy .coin{animation:coin-spin 9s linear infinite}
  .m-heavy .coin-tilt{animation:coin-wob 4.5s ease-in-out infinite}
  .m-heavy .coin-ring{animation:ring-back 28s linear infinite}
  .m-heavy .marquee-track{animation:band 42s linear infinite}
  .m-heavy .bento>.tile{animation:tile-in .9s var(--ease) both}
  .m-heavy .bento>.tile:nth-child(2){animation-delay:.08s}.m-heavy .bento>.tile:nth-child(3){animation-delay:.16s}.m-heavy .bento>.tile:nth-child(4){animation-delay:.24s}
  .m-heavy .hero .t-head h1{animation:none}
  .m-heavy .t-head h1 .ln{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
  .m-heavy .t-head h1 .ln>span{display:inline-block;animation:line-up .9s var(--ease) both .1s}
  .m-heavy .t-head h1 .ln+.ln>span{animation-delay:.22s}
  .js .rail .nav{transition:clip-path .5s var(--ease),visibility 0s linear .5s}
  .js .rail .nav.open{transition:clip-path .5s var(--ease),visibility 0s}
  @media (hover:hover){
    .t-coin:hover .coin{animation-duration:2.5s}
    .reel-btn:active:not(:disabled){transform:scale(.94)}
  }
  @supports (animation-timeline:scroll()){
    .rail-progress::after{animation:grow-y linear both;animation-timeline:scroll(root)}
    .dock-bar{animation:grow-x linear both;animation-timeline:scroll(root)}
  }
  @supports (animation-timeline:view()){
    /* cover-flow: cards turn in as they enter the rail from the right and turn away as they leave on the left */
    .m-heavy .reel>li{animation:flow linear both;animation-timeline:view(inline);animation-range:entry 0% exit 100%}
    .m-heavy .steps .step{animation:tilt-in linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    .m-heavy .mega{animation:mega-up linear both;animation-timeline:view();animation-range:entry 10% entry 100%}
    .m-heavy .section-head::before,.m-heavy .about-copy::before{animation:num-in linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  }
}
@keyframes flow{entry 0%{transform:perspective(55rem) rotateY(-28deg) scale(.9)}entry 100%,exit 0%{transform:none}exit 100%{transform:perspective(55rem) rotateY(28deg) scale(.9)}}
@keyframes tilt-in{from{transform:perspective(70rem) rotateX(16deg) translateY(2.5rem)}}
@keyframes mega-up{from{transform:translateY(35%)}}
@keyframes num-in{from{transform:translateX(-1.5rem) scale(.9)}}
/* no animation, or reduced motion: a finished still poster (coin shown at an angle so its thickness reads) */
.m-none .dock-bar,.m-none .rail-progress::after{display:none}
@media (prefers-reduced-motion:reduce){.dock-bar,.rail-progress::after{display:none}}
.m-none .btn-accent:hover,.m-none .btn-primary:hover,.m-none .btn-accent:active,.m-none .btn-primary:active{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .18)!important}