/* CC Construction. Tokens from docs/design-package.md. */
:root{
  --canvas:#f3eee6;
  --canvas-deep:#e9e2d6;
  --panel:#fbf8f3;
  --ink:#1c1814;
  --ink-2:#5a5249;
  --line:#cfc5b6;
  --line-strong:#8f8474;
  --accent:#f08c00;
  --accent-ink:#b45f00;
  --accent-hover:#d97d00;
  --accent-muted:rgba(240,140,0,.16);
  --hero-bg:#14110e;
  --hero-text:#f6f0e6;
  --display:"Besley",Georgia,"Times New Roman",serif;
  --body:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --nav-h:64px;
  --hero-h:1000vh;
  --gutter:clamp(18px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;font-weight:400;opacity:0;transition:opacity .6s var(--ease)}
body.ready{opacity:1}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;margin:0;letter-spacing:-.005em}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:6px;z-index:100;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* Fixed environment layer: one slow warm glow plus grain, behind everything */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env .glow{position:absolute;inset:-20%;background:radial-gradient(ellipse 38% 32% at 70% 30%,rgba(240,140,0,.12),rgba(240,140,0,0) 70%);animation:envdrift 90s ease-in-out -30s infinite alternate}
.env .grain{position:absolute;inset:0;opacity:.045;background-image: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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px}
@keyframes envdrift{from{transform:translate(-4%,-3%) scale(1)}to{transform:translate(5%,6%) scale(1.12)}}
.page{position:relative;z-index:1}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);color:var(--hero-text);transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
.nav::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,8,6,.55),rgba(10,8,6,0));pointer-events:none;transition:opacity .5s var(--ease)}
.nav.solid{background:rgba(243,238,230,.92);color:var(--ink);box-shadow:0 1px 0 rgba(28,24,20,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav.solid::before{opacity:0}
.nav>*{position:relative}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:0;line-height:1}
.brand svg{width:38px;height:26px;flex:none}
.brand b{font-weight:700}
.brand span{font-weight:600;opacity:.92}
.nav-links{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-weight:600;font-size:15px}
.nav-links a{text-decoration:none;opacity:.9;transition:opacity .3s var(--ease)}
.nav-links a:hover{opacity:1}
.nav-cta{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:8px;font-weight:600;font-size:16px;line-height:1;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .35s var(--ease-out),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);text-shadow:none;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}
.btn-accent{background:var(--accent);color:var(--ink);box-shadow:0 6px 22px rgba(240,140,0,.25)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.nav.solid .btn-ghost{color:var(--ink);border-color:var(--line-strong);background:transparent}
.nav.solid .btn-ghost:hover{background:rgba(28,24,20,.06)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#2c2620}
.btn-line{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn-line:hover{background:rgba(28,24,20,.05)}
@media (pointer:coarse){.btn{min-height:44px}}

/* Hero */
.hero{position:relative;height:var(--hero-h);background:var(--hero-bg);color:var(--hero-text)}
.hero.static{height:100vh;height:100svh;min-height:560px}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--hero-bg)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;will-change:transform;transform:translateZ(0)}
.stage .poster{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .6s var(--ease)}
.hero.static .stage .poster{opacity:1}
.hero.static .stage canvas{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,7,10,.72) 0%,rgba(8,7,10,.46) 34%,rgba(8,7,10,0) 62%),radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}
@media (max-width:720px){.scrim{background:linear-gradient(180deg,rgba(8,7,10,0) 34%,rgba(8,7,10,.70) 56%,rgba(8,7,10,.94) 100%),radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.5) 100%)}}
@media (max-width:720px){.band[data-band="1"]::before{background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(5,5,10,.78) 0%,rgba(5,5,10,.56) 46%,rgba(5,5,10,0) 76%)}}
.dust{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,214,160,.55);box-shadow:0 0 6px rgba(255,200,120,.6);left:var(--x);top:var(--y);opacity:0}
.hero.live .dust i{animation:mote var(--d,14s) ease-in-out var(--dl,0s) infinite}
@keyframes mote{0%{transform:translate(0,0);opacity:0}12%{opacity:.85}50%{transform:translate(22px,-34px)}88%{opacity:.7}100%{transform:translate(-10px,-70px);opacity:0}}
.hero.static .dust{display:none}

.bands{position:absolute;inset:0;pointer-events:none}
.band{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);max-width:min(560px,60vw);padding:8px 0;opacity:0;pointer-events:none;text-shadow:var(--tshadow)}
.band.on{pointer-events:auto}
.band::before{content:"";position:absolute;inset:-14% -18%;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(5,5,10,.66) 0%,rgba(5,5,10,.44) 46%,rgba(5,5,10,0) 76%);z-index:-1}
.band[data-band="4"]::before{inset:-24% -26%;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(5,5,10,.78) 0%,rgba(5,5,10,.5) 46%,rgba(5,5,10,0) 78%)}
.band .kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;color:#ffd39a}
.band .kicker::before{content:"";width:26px;height:2px;background:var(--accent)}
.band h1,.band h2{font-size:clamp(36px,4.9vw,72px);color:#fff;max-width:13ch;text-wrap:balance}
.band h2{font-weight:700}
.band .sub{margin-top:18px;font-size:clamp(17px,1.5vw,21px);max-width:38ch;color:#efe7dc;line-height:1.45}
.band .cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.band .btn{text-shadow:none}
.band .w{display:inline-block;white-space:pre}
.band .c{display:inline-block}
/* Entrance (a): blur to sharp, the dust settling */
.band[data-fx="blur"] .fx{position:relative;opacity:var(--k,0)}
.band[data-fx="blur"] .fx::before{content:attr(data-text);position:absolute;inset:0;filter:blur(12px);opacity:calc(1 - var(--k,0));white-space:inherit}
/* Entrance (b): approach from depth, the push */
.band[data-fx="depth"] .fx{transform:scale(calc(.84 + .16*var(--k,0)));transform-origin:left center;opacity:var(--k,0)}
.band[data-fx="depth"] .sub{--ks:clamp(0,(var(--k,0) - .4)*2.4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*10px))}
/* Entrance (c): words rise left to right, boards laid in order */
.band[data-fx="rise"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3.2,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*22px))}
.band[data-fx="rise"] .sub{--ks:clamp(0,(var(--k,0) - .55)*3.5,1);opacity:var(--ks)}
/* Entrance (d): staged settle, the arrival */
.band[data-fx="settle"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*26px))}
.band[data-fx="settle"] .sub{--ks:clamp(0,(var(--k,0) - .6)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*10px))}
.band[data-fx="settle"] .cta{--kb:clamp(0,(var(--k,0) - .74)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px))}
.hero.static .band{opacity:0!important}
.hero.static .band[data-band="4"]{opacity:1!important;--k:1;pointer-events:auto}

.ring{position:absolute;right:calc(var(--gutter) + 4px);bottom:28px;width:44px;height:44px;color:#ffd39a;opacity:.9;transition:opacity .6s var(--ease)}
.ring.done{opacity:0}
.ring circle{transition:stroke-dashoffset .2s linear}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:#e9dfd0;opacity:.8;transition:opacity .5s var(--ease)}
.cue.hide{opacity:0}
.cue svg{width:20px;height:20px;animation:cue 2.2s ease-in-out -0.6s infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}
.hero.static .cue,.hero.static .ring{display:none}
.hero-label{position:absolute;left:var(--gutter);bottom:30px;color:#e9dfd0;opacity:.85;padding:8px 12px;border-radius:10px;background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,5,10,.85)}
.hero-label b{color:#ffd39a;font-weight:500}
@media (max-height:560px){.cue,.hero-label,.ring{display:none}}

/* Sections */
main{position:relative}
.section{position:relative;padding:clamp(72px,9vw,128px) var(--gutter)}
.wrap{max-width:1180px;margin:0 auto;position:relative}
.kicker{display:flex;align-items:center;gap:12px;color:var(--accent-ink);margin-bottom:18px}
.kicker .rule{width:54px;height:8px;overflow:visible}
.kicker .rule path{stroke:var(--accent);stroke-width:2;fill:none;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease)}
.in .kicker .rule path{stroke-dashoffset:0}
.h2{font-size:clamp(31px,3.9vw,54px);max-width:17ch;text-wrap:balance}
.lede{margin-top:16px;font-size:clamp(17px,1.35vw,20px);color:var(--ink-2);max-width:54ch}

/* Reveal choreography */
.rv .part{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.in .part{opacity:1;transform:none}
.rv.in .part:nth-child(2){transition-delay:.08s}
.rv.in .part:nth-child(3){transition-delay:.16s}
.rv.in .part:nth-child(4){transition-delay:.24s}
.rv.in .part:nth-child(5){transition-delay:.32s}
.rv.in .part:nth-child(6){transition-delay:.40s}
.rv.in .part:nth-child(7){transition-delay:.48s}
.rv.in .part:nth-child(8){transition-delay:.56s}
.rv.in .part:nth-child(9){transition-delay:.64s}
.rv.in .part:nth-child(10){transition-delay:.72s}
.rv.in .part:nth-child(11){transition-delay:.80s}
.rv.in .part:nth-child(12){transition-delay:.88s}
.rv.in .part:nth-child(13){transition-delay:.96s}
.rv.in .part:nth-child(14){transition-delay:1.04s}
.rv.done .part:nth-child(n){transition-delay:0s}

/* Chalk rail (signature): a tape-measure line that draws itself down the page */
.rail{position:absolute;left:calc(var(--gutter) - 22px);top:0;bottom:0;width:14px;pointer-events:none;z-index:2}
.rail svg{width:14px;height:100%;overflow:visible}
.rail .spine{stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round}
.rail .ticks{stroke:var(--accent);stroke-width:1.5;opacity:.7}
@media (max-width:1100px){.rail{display:none}}

/* Proof strip */
.proof{background:var(--canvas-deep);padding:clamp(40px,5vw,64px) var(--gutter)}
.proof .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.stat{display:flex;align-items:baseline;gap:4px;font-family:var(--display);font-weight:800;font-size:clamp(72px,9vw,124px);line-height:.9;color:var(--ink)}
.stat .plus{color:var(--accent);font-size:.55em;transform:translateY(-.45em);display:inline-block}
.stat-label{margin-top:8px;color:var(--ink-2)}
.proof-points{display:grid;gap:14px;font-size:clamp(18px,1.6vw,22px);font-weight:600;max-width:42ch;line-height:1.35}
.proof-points li{list-style:none;display:flex;gap:14px;align-items:baseline}
.proof-points li::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--accent);flex:none;transform:translateY(-1px)}
.proof-points ul{margin:0;padding:0}
.proof-points .pitch{color:var(--ink-2);font-weight:400;font-size:17px}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(36px,4vw,56px)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 24px 28px;position:relative;overflow:hidden;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .3s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(28,24,20,.10);border-color:var(--line-strong)}
.card .ic{width:44px;height:44px;border-radius:10px;background:var(--accent-muted);display:grid;place-items:center;color:var(--accent-ink);margin-bottom:18px}
.card .ic svg{width:24px;height:24px}
.card h3{font-size:21px;margin-bottom:8px}
.card p{color:var(--ink-2);font-size:16px;line-height:1.5}
.card .num{position:absolute;right:18px;top:16px;color:var(--line-strong)}

/* Rooms trio */
.rooms{padding:0 var(--gutter) clamp(72px,9vw,128px)}
.rooms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.room{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:4/5;text-decoration:none;color:#fff;background:var(--ink)}
.room img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.room:hover img{transform:scale(1.04)}
.room .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 22px;background:linear-gradient(rgba(10,8,6,0),rgba(10,8,6,.78));text-shadow:0 1px 3px rgba(0,0,0,.6)}
.room .cap h3{font-size:27px;margin-bottom:6px}
.room .cap p{color:#efe7dc;font-size:16px}
.room .cap .go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:#ffd39a;font-weight:600;font-size:15px}
.room .cap .go svg{width:16px;height:16px;transition:transform .4s var(--ease-out)}
.room:hover .cap .go svg{transform:translateX(4px)}

/* Gallery, on the page */
.gallery{background:var(--canvas-deep)}
.gal{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;grid-auto-flow:dense;gap:12px;margin-top:clamp(36px,4vw,56px)}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:12px;background:#d9d0c2;grid-column:span 2}
.gal figure.tall{grid-row:span 2}
.gal figure.big{grid-column:span 4;grid-row:span 2}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.gal figure:hover img{transform:scale(1.04)}
.gal figure.extra{display:none}
.gal.open figure.extra{display:block;animation:galin .7s var(--ease-out) backwards}
@keyframes galin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.gal-more{display:flex;justify-content:center;margin-top:26px}
.gal-more.gone{display:none}
.gal figcaption{position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:8px;background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);backdrop-filter:blur(10px);color:#f3ece2;font-size:12.5px;font-weight:600;letter-spacing:.02em;text-shadow:0 1px 3px rgba(5,5,10,.85);max-width:calc(100% - 20px)}

/* Difference */
.diff .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.points{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pt{padding:20px 22px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.pt h3{font-size:21px;margin-bottom:6px;display:flex;gap:12px;align-items:baseline}
.pt h3 .n{font-family:var(--mono);font-size:12px;color:var(--accent-ink);letter-spacing:.1em}
.pt p{color:var(--ink-2);font-size:16px}

/* The chalk line, drawn on scroll */
.chalkline{width:100%;height:22px;margin-top:34px;overflow:visible}
.chalkline path{stroke:var(--accent);fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.chalkline .cl-line{stroke-width:2.5}
.chalkline .cl-ticks{stroke-width:1.5;opacity:.75}
.in .chalkline .cl-line{transition:stroke-dashoffset 1s var(--ease) .3s;stroke-dashoffset:0}
.in .chalkline .cl-ticks{transition:stroke-dashoffset .9s var(--ease) 1s;stroke-dashoffset:0}

/* Quote form */
.quote{background:var(--ink);color:#f6f0e6}
.quote .kicker{color:#ffd39a}
.quote .lede{color:#cfc5b6}
.quote .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,6vw,96px);align-items:start}
.quote .side .alt{margin-top:28px;display:grid;gap:10px}
.quote .side .alt a{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:600;font-size:18px}
.quote .side .alt a svg{width:20px;height:20px;color:#ffd39a}
.quote .side .alt a:hover{text-decoration:underline}
.quote .side .note{margin-top:28px;color:#a99d8d;font-size:15px;max-width:40ch}
.form{display:grid;gap:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:clamp(20px,3vw,32px)}
.field{display:grid;gap:8px}
.field label{font-weight:600;font-size:15px;color:#efe7dc}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:17px;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:13px 14px;transition:border-color .3s,background .3s;min-height:48px}
.field input::placeholder,.field textarea::placeholder{color:#8f8474}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.1)}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffd39a' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.field select option{color:#1c1814}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
details.more{border-top:1px solid rgba(255,255,255,.12);padding-top:6px}
details.more summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;font-weight:600;color:#ffd39a;padding:10px 0;-webkit-user-select:none;user-select:none}
details.more summary::-webkit-details-marker{display:none}
details.more summary svg{width:18px;height:18px;transition:transform .35s var(--ease)}
details.more[open] summary svg{transform:rotate(45deg)}
details.more .inner{display:grid;gap:16px;padding:6px 0 8px}
.form .submit{margin-top:6px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.form .fine{color:#a99d8d;font-size:14px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.success{display:none;padding:28px;border-radius:18px;background:rgba(240,140,0,.12);border:1px solid rgba(240,140,0,.4)}
.success.show{display:block}
.success h3{font-size:26px;margin-bottom:8px}
.success p{color:#efe7dc}
.success .btn{margin-top:16px}
.form.sent{display:none}

/* Areas */
.areas-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:clamp(28px,3vw,44px)}
.areas-col h3{font-size:19px;color:var(--ink-2);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.areas-col h3::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--accent)}
.areas-col ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.areas-col li{padding:10px 16px;border-radius:999px;border:1px solid var(--line-strong);font-weight:600;font-size:16px;background:var(--panel)}
.areas .more-areas{margin-top:22px;color:var(--ink-2)}

/* Footer */
footer{background:var(--canvas-deep);border-top:1px solid var(--line);padding:clamp(40px,5vw,64px) var(--gutter) 40px}
footer .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
footer .brand{color:var(--ink);font-size:23px}
footer .tag{margin-top:10px;color:var(--ink-2)}
footer .fbtns{display:flex;gap:12px;flex-wrap:wrap}
footer .legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink-2);font-size:14px;display:grid;gap:6px}
footer .legal a{color:inherit}

/* Phone-only sticky action bar */
.bar{display:none}
@media (max-width:720px){
  .bar{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(28,24,20,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.08)}
  .bar .btn{padding:12px 8px;font-size:15px;border-radius:10px}
  body{padding-bottom:74px}
}

/* Responsive */
@media (max-width:1000px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .diff .wrap,.quote .wrap{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(4,1fr);grid-auto-rows:140px}
  .gal figure.big{grid-column:span 4}
}
@media (max-width:720px){
  :root{--hero-h:800vh;--nav-h:58px}
  body{font-size:16px}
  .nav-links{display:none}
  .nav-cta .btn-accent{display:none}
  .nav-cta .btn-ghost{display:none}
  .brand{font-size:18px}
  .brand svg{width:32px;height:22px}
  .nav-cta .btn-ghost{padding:10px 14px;font-size:15px}
  .nav-cta .btn-ghost .num{display:none}
  .band .cta{display:none}
  .band{left:var(--gutter);right:var(--gutter);top:auto;bottom:calc(92px + env(safe-area-inset-bottom));transform:none;max-width:none}
  .band::before{inset:-16% -14%}
  .band h1,.band h2{font-size:clamp(34px,9.6vw,48px);max-width:none}
  .band .sub{font-size:16px;max-width:none}
  .band::before{inset:-16% -14%}
  .band[data-fx="depth"] .fx{transform-origin:left bottom}
  .band .cta{margin-top:20px}
  .band .cta .btn{flex:1 1 auto}
  .ring{right:var(--gutter);bottom:calc(86px + env(safe-area-inset-bottom));width:36px;height:36px}
  .cue,.hero-label{display:none}
  .proof .wrap{grid-template-columns:1fr;gap:22px}
  .services-grid{grid-template-columns:1fr;gap:12px}
  .card{padding:22px 20px}
  .rooms-grid{grid-template-columns:1fr;gap:12px}
  .room{aspect-ratio:4/3}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;gap:8px}
  .gal figure{grid-column:span 1}
  .gal figure.big{grid-column:span 2;grid-row:span 2}
  .gal figure.extra{display:none}
.gal.open figure.extra{display:block;animation:galin .7s var(--ease-out) backwards}
@keyframes galin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.gal-more{display:flex;justify-content:center;margin-top:26px}
.gal-more.gone{display:none}
.gal figcaption{font-size:11.5px;padding:5px 8px}
  .row2{grid-template-columns:1fr}
  .form .submit{flex-direction:column;align-items:stretch}
  .form .submit .fine{text-align:center}
  .areas-grid{grid-template-columns:1fr;gap:22px}
  footer .wrap{grid-template-columns:1fr}
}
@media (max-width:380px){.band h1,.band h2{font-size:31px}}

/* Hidden tab: pause every loop */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* Reduced motion: final states, no drives */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  body{opacity:1}
  .rv .part{opacity:1;transform:none}
  .kicker .rule path{stroke-dashoffset:0}
  .chalkline path{stroke-dashoffset:0}
}
.sr-mobile{display:none}
@media (max-width:720px){.nav-cta .btn-ghost .sr-mobile{display:inline}}