/* Ashley Banwell Gardens. One stylesheet for every page.
   Flat solid colour only, no gradients, no glow. Light ivory and emerald, brass for small accents,
   Fraunces for display and Inter for text, both self hosted. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 800;font-display:swap;src:url(/ashley-assets/fonts/fraunces-latin.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:500 700;font-display:swap;src:url(/ashley-assets/fonts/fraunces-italic-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/ashley-assets/fonts/inter-latin.woff2) format('woff2')}

:root{
  --ivory:#FAF8F2; --paper:#F2EEE2; --white:#fff;
  --emerald:#0F3D2E; --deep:#0A2820; --leaf:#1F6B4A; --leaf-soft:#E3EDE4;
  --brass:#B08A4E; --brass-ink:#7A5A25; --water:#2A5C70;
  --ink:#17251F; --mute:#53605A; --line:#DDD7C6; --line-d:rgba(250,248,242,.2);
  --r:16px; --r-sm:10px; --pill:999px;
  --display:'Fraunces',Georgia,'Times New Roman',serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --out:cubic-bezier(.23,1,.32,1); --in-out:cubic-bezier(.77,0,.175,1);
  --t-ui:200ms; --t-press:140ms;
  --pad:clamp(20px,5vw,56px); --max:1200px; --nav-h:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:17px;line-height:1.65;color:var(--ink);background:var(--ivory);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--leaf);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--emerald);color:#fff;padding:10px 16px;border-radius:var(--r-sm);z-index:300}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.band{padding:clamp(72px,9vw,128px) 0}
.band.paper{background:var(--paper)}
.band.deep{background:var(--deep);color:var(--ivory)}
.band.emerald{background:var(--emerald);color:var(--ivory)}

/* type */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.02em;color:var(--emerald)}
.deep h1,.deep h2,.deep h3,.emerald h1,.emerald h2,.emerald h3{color:var(--ivory)}
h1{font-size:clamp(2.6rem,6.2vw,5rem)}
h2{font-size:clamp(2.1rem,4.4vw,3.5rem)}
h3{font-size:clamp(1.35rem,2.2vw,1.75rem);letter-spacing:-.01em}
h1 em,h2 em,h3 em{font-style:italic;font-weight:500;color:var(--leaf)}
.deep h2 em,.emerald h2 em,.deep h1 em{color:#9CCFB0}
.eb{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink);margin-bottom:18px}
.deep .eb,.emerald .eb{color:#D9BE8A}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.6;color:var(--mute);max-width:56ch}
.deep .lede,.emerald .lede{color:rgba(250,248,242,.8)}
p+p{margin-top:1em}
.head{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.head p{color:var(--mute);margin-top:18px;font-size:1.08rem}
.head.center{margin-inline:auto;text-align:center}
.head.center p{margin-inline:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 28px;border-radius:var(--pill);border:2px solid var(--emerald);background:var(--emerald);color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.01em;transition:background-color var(--t-ui) ease,color var(--t-ui) ease,border-color var(--t-ui) ease,transform var(--t-press) var(--out)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--emerald)}
.btn.light{background:var(--ivory);border-color:var(--ivory);color:var(--emerald)}
.btn.ghost-l{background:transparent;border-color:rgba(250,248,242,.6);color:var(--ivory)}
.btn.wa{background:#1F7A4C;border-color:#1F7A4C}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--leaf);border-color:var(--leaf)}
  .btn.ghost:hover{background:var(--emerald);color:#fff}
  .btn.light:hover{background:#fff;border-color:#fff}
  .btn.ghost-l:hover{background:var(--ivory);color:var(--emerald);border-color:var(--ivory)}
}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hours-note{margin-top:14px;font-size:.9rem;color:var(--mute)}
.deep .hours-note,.emerald .hours-note{color:rgba(250,248,242,.75)}
.link{font-weight:700;color:var(--emerald);border-bottom:2px solid var(--brass);padding-bottom:2px;transition:color var(--t-ui) ease,border-color var(--t-ui) ease}
.deep .link,.emerald .link{color:var(--ivory)}
@media (hover:hover) and (pointer:fine){.link:hover{color:var(--leaf);border-color:var(--leaf)}}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);background:var(--ivory);border-bottom:1px solid transparent;transition:border-color var(--t-ui) ease}
.nav.solid{border-color:var(--line)}
.nav-in{height:100%;display:flex;align-items:center;gap:28px}
.nav-logo{display:flex;align-items:center;flex:0 0 auto}
.nav-logo img{height:44px;width:auto}
.nav-links{display:flex;gap:6px;margin-left:auto}
.nav-links a{padding:10px 14px;font-weight:600;font-size:.95rem;color:var(--ink);border-radius:var(--pill);transition:background-color var(--t-ui) ease,color var(--t-ui) ease}
.nav-links a[aria-current="page"]{color:var(--leaf);background:var(--leaf-soft)}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{background:var(--paper)}}
.nav-cta{min-height:46px;padding:10px 22px;font-size:.92rem}
.burger{display:none;margin-left:auto;width:48px;height:48px;border:0;background:transparent;border-radius:50%;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--emerald);transition:transform var(--t-ui) var(--out),opacity var(--t-ui) ease}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:23px}.burger span:nth-child(3){top:29px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer{position:fixed;inset:var(--nav-h) 0 0 0;z-index:99;background:var(--deep);padding:28px var(--pad) 40px;display:none;flex-direction:column;gap:6px;overflow:auto}
.drawer.open{display:flex}
.drawer a.dl{font-family:var(--display);font-size:2rem;font-weight:600;color:var(--ivory);padding:10px 0;border-bottom:1px solid var(--line-d)}
.drawer .btn{margin-top:22px;width:100%}
.drawer small{color:rgba(250,248,242,.7);margin-top:14px;font-size:.9rem}
@media(max-width:900px){.nav-links,.nav-cta{display:none}.burger{display:block}.nav-logo img{height:40px}}
main{padding-top:var(--nav-h)}

/* reveal */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity 520ms var(--out),transform 520ms var(--out)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:60ms}.js .rv.d2{transition-delay:120ms}.js .rv.d3{transition-delay:180ms}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* hero */
.hero{padding:clamp(40px,6vw,88px) 0 clamp(64px,8vw,112px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.hero h1{margin-bottom:24px}
.hero .lede{margin-bottom:6px}
.places{display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:22px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink)}
.places i{font-style:normal;color:var(--brass)}
.hero-art{position:relative}
.hero-art .main{aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:var(--paper)}
.hero-art .main img{width:100%;height:100%;object-fit:cover}
.hero-art .inset{position:absolute;left:-7%;bottom:-6%;width:44%;aspect-ratio:1;border-radius:22px;overflow:hidden;border:6px solid var(--ivory);background:var(--paper)}
.hero-art .inset img{width:100%;height:100%;object-fit:cover}
.hero-art .badge{position:absolute;right:-3%;top:6%;background:var(--emerald);color:var(--ivory);border-radius:var(--r);padding:16px 20px;max-width:190px}
.hero-art .badge b{display:block;font-family:var(--display);font-size:2.2rem;line-height:1;font-weight:600}
.hero-art .badge span{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;opacity:.85}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-art{max-width:520px}.hero-art .inset{left:-2%}.hero-art .badge{right:2%}}

/* proof strip */
.proof{border-block:1px solid var(--line);background:var(--ivory)}
.proof ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.proof li{padding:26px 22px;border-left:1px solid var(--line);font-weight:600;font-size:.98rem;line-height:1.4}
.proof li:first-child{border-left:0}
.proof li small{display:block;font-weight:500;color:var(--mute);margin-top:4px;font-size:.88rem}
@media(max-width:800px){.proof ul{grid-template-columns:1fr 1fr}.proof li:nth-child(odd){border-left:0}.proof li:nth-child(n+3){border-top:1px solid var(--line)}}

/* service index (hover reveal list) */
.sindex{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);align-items:start}
.srows{list-style:none;border-top:1px solid var(--line)}
.srow a{display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:baseline;padding:28px 4px;border-bottom:1px solid var(--line);transition:padding var(--t-ui) var(--out),background-color var(--t-ui) ease}
.srow .n{font-family:var(--display);font-size:1.1rem;color:var(--brass-ink);font-weight:600}
.srow h3{font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.02em}
.srow p{color:var(--mute);margin-top:6px;max-width:46ch;font-size:1rem}
.srow .go{font-weight:700;color:var(--leaf);font-size:.9rem;white-space:nowrap}
.srow.small h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
@media (hover:hover) and (pointer:fine){.srow a:hover{padding-left:16px;background:var(--paper)}}
.sprev{position:sticky;top:calc(var(--nav-h) + 24px);aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--paper)}
.sprev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 360ms ease}
.sprev img.on{opacity:1}
.srow .thumb{display:none}
@media(max-width:900px){.sindex{grid-template-columns:1fr}.sprev{display:none}.srow a{grid-template-columns:44px 1fr}.srow .go{display:none}}

/* before and after */
.ba{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--paper);--pos:50%;user-select:none;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba .line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--ivory);pointer-events:none}
.ba .knob{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--ivory);border:3px solid var(--emerald);color:var(--emerald);display:grid;place-items:center}
.ba .knob svg{width:28px;height:28px}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .tag{position:absolute;top:14px;padding:6px 12px;border-radius:var(--pill);background:var(--emerald);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ba .tag.b{left:14px}.ba .tag.a{right:14px;background:var(--ivory);color:var(--emerald)}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px)}
.ba-cap{margin-top:12px;font-size:.95rem;color:var(--mute)}
@media(max-width:760px){.ba-pair{grid-template-columns:1fr}}

/* story */
.story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,88px);align-items:center}
.story .ph{border-radius:28px;overflow:hidden;aspect-ratio:4/5;background:var(--paper)}
.story .ph img{width:100%;height:100%;object-fit:cover}
.stats{display:flex;flex-wrap:wrap;gap:28px 48px;margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.stats b{display:block;font-family:var(--display);font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;color:var(--emerald);font-weight:600}
.stats span{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--mute)}
@media(max-width:860px){.story{grid-template-columns:1fr}.story .ph{max-width:420px}}

/* process */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
.step{background:var(--ivory);border-radius:var(--r);padding:30px 28px 34px;border:1px solid var(--line)}
.paper .step{background:var(--white)}
.step .n{font-family:var(--display);font-size:3.2rem;line-height:1;color:var(--brass);font-weight:600}
.step h3{margin:14px 0 10px}
.step p{color:var(--mute);font-size:1rem}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* work strip */
.strip-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.strip-ctl{display:flex;gap:10px}
.arw{width:52px;height:52px;border-radius:50%;border:2px solid var(--emerald);background:transparent;color:var(--emerald);font-size:1.3rem;line-height:1;display:grid;place-items:center;transition:background-color var(--t-ui) ease,color var(--t-ui) ease,transform var(--t-press) var(--out)}
.arw:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){.arw:hover{background:var(--emerald);color:#fff}}
.strip{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 8px;scrollbar-width:none;scroll-padding-inline:var(--pad)}
.strip::-webkit-scrollbar{display:none}
.strip figure{flex:0 0 clamp(260px,32vw,420px);scroll-snap-align:start}
.strip .im{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--paper)}
.strip img{width:100%;height:100%;object-fit:cover}
.strip figcaption{margin-top:12px;font-size:.92rem;color:var(--mute)}
.strip figcaption b{display:block;color:var(--emerald);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}

/* quote */
.quote{max-width:880px;margin:0 auto;text-align:center}
.quote blockquote{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.3;color:var(--ivory);letter-spacing:-.01em}
.quote cite{display:block;margin-top:24px;font-style:normal;font-size:.95rem;color:rgba(250,248,242,.75)}
.quote cite b{color:var(--ivory)}

/* areas */
.areas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.areas .map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.areas ul{list-style:none;margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.areas li{padding:14px 18px;background:var(--paper);border-radius:var(--r-sm);font-weight:600}
.band.paper .areas li{background:var(--white)}
@media(max-width:860px){.areas{grid-template-columns:1fr}}

/* faq */
.faq{max-width:860px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 4px;font-family:var(--display);font-size:clamp(1.2rem,2vw,1.5rem);font-weight:600;color:var(--emerald);min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:2px solid var(--emerald);display:grid;place-items:center;font-family:var(--body);font-size:1.3rem;line-height:1;transition:transform var(--t-ui) var(--out),background-color var(--t-ui) ease,color var(--t-ui) ease}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--emerald);color:#fff}
.faq .ans{padding:0 4px 26px;color:var(--mute);max-width:68ch}

/* cta band */
.cta{text-align:center}
.cta h2{max-width:16ch;margin:0 auto 18px}
.cta .lede{margin:0 auto}
.cta .acts{justify-content:center}

/* footer */
.foot{background:var(--deep);color:rgba(250,248,242,.8);padding:72px 0 36px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:40px}
.foot img{height:48px;width:auto;margin-bottom:18px;background:var(--ivory);padding:6px 10px;border-radius:10px}
.foot h4{font-family:var(--body);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#D9BE8A;margin-bottom:16px;font-weight:700}
.foot ul{list-style:none;display:grid;gap:10px}
.foot a{color:rgba(250,248,242,.85);transition:color var(--t-ui) ease}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:#fff}}
.foot-base{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:.9rem}
.foot-base a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* page hero (inner pages) */
.phero{padding:clamp(44px,6vw,88px) 0 clamp(40px,5vw,72px)}
.phero .crumbs{font-size:.86rem;color:var(--mute);margin-bottom:22px}
.phero .crumbs a{text-decoration:underline;text-underline-offset:3px}
.phero h1{max-width:16ch}
.phero .lede{margin-top:22px}
.phero.split{display:block}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.phero-grid .ph{aspect-ratio:5/4;border-radius:24px;overflow:hidden;background:var(--paper)}
.phero-grid .ph img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.phero-grid{grid-template-columns:1fr}}

/* service page body */
.svc-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:start}
.svc-body .txt p{color:var(--mute)}
.svc-body .txt p:first-child{color:var(--ink);font-size:1.12rem}
.incl{background:var(--paper);border-radius:var(--r);padding:32px 30px;position:sticky;top:calc(var(--nav-h) + 24px)}
.band.paper .incl{background:var(--white)}
.incl h3{font-size:1.4rem;margin-bottom:16px}
.incl ul{list-style:none;display:grid;gap:12px}
.incl li{display:grid;grid-template-columns:24px 1fr;gap:10px;font-weight:600}
.incl li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--leaf);margin-top:8px}
.incl .acts{margin-top:26px}
@media(max-width:860px){.svc-body{grid-template-columns:1fr}.incl{position:static}}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.related a{display:block;background:var(--ivory);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform var(--t-ui) var(--out)}
.related .im{aspect-ratio:3/2;background:var(--paper)}
.related img{width:100%;height:100%;object-fit:cover}
.related h3{padding:18px 20px 4px;font-size:1.3rem}
.related p{padding:0 20px 20px;color:var(--mute);font-size:.95rem}
@media (hover:hover) and (pointer:fine){.related a:hover{transform:translateY(-4px)}}
@media(max-width:760px){.related{grid-template-columns:1fr}}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.shots figure{border-radius:var(--r);overflow:hidden;background:var(--paper);aspect-ratio:4/3}
.shots figure.tall{grid-row:span 2;aspect-ratio:auto}
.shots img{width:100%;height:100%;object-fit:cover}
.shots.one{grid-template-columns:1fr}.shots.one figure{aspect-ratio:16/8}
.shots.two{grid-template-columns:1fr 1fr}
@media(max-width:760px){.shots.one figure{aspect-ratio:4/3}.shots{grid-template-columns:1fr 1fr}.shots figure.tall{grid-row:auto;aspect-ratio:4/3}}

/* gallery */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.chip{min-height:46px;padding:10px 20px;border-radius:var(--pill);border:2px solid var(--line);background:var(--ivory);font-weight:700;font-size:.92rem;transition:background-color var(--t-ui) ease,border-color var(--t-ui) ease,color var(--t-ui) ease,transform var(--t-press) var(--out)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald);color:#fff}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:var(--emerald)}}
.gal{columns:3 280px;column-gap:16px}
.gal figure{break-inside:avoid;margin-bottom:16px;border-radius:var(--r);overflow:hidden;background:var(--paper);position:relative;cursor:zoom-in}
.gal figure[hidden]{display:none}
.gal button.open{display:block;width:100%;border:0;padding:0;background:none;text-align:left}
.gal img{width:100%;height:auto}
.gal figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:var(--pill);background:rgba(250,248,242,.94);color:var(--emerald);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.clips{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.clip{position:relative;border-radius:var(--r);overflow:hidden;background:var(--deep);aspect-ratio:9/16;border:0;padding:0;width:100%}
.clip.wide{aspect-ratio:16/9;grid-column:span 2}
.clip video,.clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clip .pl{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:var(--ivory);display:grid;place-items:center;transition:transform var(--t-ui) var(--out)}
.clip .pl::before{content:"";margin-left:5px;border-left:16px solid var(--emerald);border-block:10px solid transparent}
.clip.on .pl{display:none}
.clip .cap{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:var(--pill);background:rgba(250,248,242,.94);color:var(--emerald);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;z-index:2}
@media (hover:hover) and (pointer:fine){.clip:hover .pl{transform:scale(1.08)}}
@media(max-width:860px){.clips{grid-template-columns:1fr 1fr}.clip.wide{grid-column:span 2}}
.lb{border:0;padding:0;background:transparent;max-width:min(1100px,96vw);max-height:94vh;margin:auto}
.lb::backdrop{background:rgba(10,40,32,.92)}
.lb img{max-height:88vh;width:auto;margin:0 auto;border-radius:var(--r-sm)}
.lb button{position:absolute;right:8px;top:8px;width:48px;height:48px;border-radius:50%;border:0;background:var(--ivory);color:var(--emerald);font-size:1.6rem;line-height:1}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px)}
.cards{display:grid;gap:14px}
.cc{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:var(--paper);border-radius:var(--r);padding:22px 24px}
.cc small{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brass-ink)}
.cc b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--emerald);font-weight:600;overflow-wrap:anywhere}
.hours{width:100%;border-collapse:collapse;margin-top:14px}
.hours td{padding:12px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-weight:700}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}.cc{grid-template-columns:1fr}}

/* promises */
.promises{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line-d)}
.promises li{list-style:none;padding:28px 22px 8px 0}
.promises .n{font-family:var(--display);color:#D9BE8A;font-size:1.1rem;font-weight:600}
.promises h3{font-size:1.3rem;margin:10px 0 8px}
.promises p{color:rgba(250,248,242,.75);font-size:.96rem}
@media(max-width:960px){.promises{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.promises{grid-template-columns:1fr}}

/* legal */
.legal{max-width:760px}
.legal h2{font-size:1.6rem;margin:2em 0 .5em}
.legal p,.legal li{color:var(--mute)}
.legal ul{margin:1em 0 1em 1.2em}

/* floating whatsapp */
.fwa{opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity 260ms var(--out),transform 260ms var(--out);position:fixed;right:18px;bottom:18px;z-index:90;display:flex;align-items:center;gap:10px;min-height:56px;padding:0 20px 0 16px;border-radius:var(--pill);background:#1F7A4C;color:#fff;font-weight:700;font-size:.95rem;border:0;transition:transform var(--t-press) var(--out),opacity var(--t-ui) ease}
.fwa:active{transform:scale(.97)}
.fwa svg{width:26px;height:26px;fill:#fff}
.fwa[hidden]{display:none}
@media(max-width:560px){.fwa span{display:none}.fwa{padding:0;width:58px;justify-content:center}}

/* quick quote sheet */
.qq{margin:auto;border:0;padding:0;background:var(--ivory);color:var(--ink);width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;border-radius:22px}
.qq::backdrop{background:rgba(10,40,32,.7)}
.qq[open]{animation:qqin 220ms var(--out)}
@keyframes qqin{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.qq-inner{padding:26px 26px 22px}
.qq-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.qq-step{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brass-ink)}
.qq-close{background:none;border:0;width:44px;height:44px;margin:-10px -12px -10px 0;font-size:1.7rem;line-height:1;color:var(--mute)}
.qq h2{font-size:1.9rem;margin-bottom:18px}
.qq h2:focus{outline:none}
.qq-body{animation:qqfade 200ms var(--out)}
@keyframes qqfade{from{opacity:0}to{opacity:1}}
.qq-chips{display:grid;gap:10px}
.qq-chip{min-height:54px;text-align:left;padding:14px 18px;background:var(--white);border:2px solid var(--line);border-radius:14px;font-weight:600;font-size:1rem;transition:border-color var(--t-ui) ease,background-color var(--t-ui) ease,transform var(--t-press) var(--out)}
.qq-chip:active{transform:scale(.98)}
.qq-chip[aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald);color:#fff}
@media (hover:hover) and (pointer:fine){.qq-chip:hover{border-color:var(--emerald)}}
.qq label{display:block;font-size:.82rem;font-weight:700;margin:14px 0 6px;color:var(--mute)}
.qq input,.qq textarea{width:100%;padding:14px 16px;border:2px solid var(--line);border-radius:12px;background:var(--white);font:inherit;font-size:1rem;color:var(--ink)}
.qq input:focus,.qq textarea:focus{outline:2px solid var(--leaf);border-color:var(--leaf)}
.qq textarea{min-height:92px;resize:vertical}
.qq-actions{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-top:22px}
.qq-back{background:none;border:0;font-weight:600;font-size:.95rem;color:var(--mute);padding:12px 0;min-height:44px}
.qq-actions .btn{cursor:pointer}
.qq-skip{display:block;text-align:center;margin-top:14px;font-size:.92rem;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){.qq{width:100%;max-width:100%;margin:auto 0 0;max-height:92vh;border-radius:22px 22px 0 0}.qq-inner{padding:18px 18px calc(14px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.qq[open],.qq-body{animation:none}.qq-chip,.btn,.chip,.arw{transition:none}}

.fwa.show{opacity:1;transform:none;pointer-events:auto}

/* ===== round 2: video hero, sticky walk steps, bento, feature blocks, mosaic, motion ===== */
.imgrv{overflow:hidden}
.imgrv:not(.sprev){position:relative}
.js .imgrv::after{content:'';position:absolute;inset:0;z-index:4;background:var(--curtain,var(--ivory));transform-origin:50% 0;transition:transform 900ms var(--in-out);pointer-events:none}
.js .imgrv.in::after{transform:scaleY(0)}
.band.paper{--curtain:var(--paper)}.band.deep{--curtain:var(--deep)}.band.emerald{--curtain:var(--emerald)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .16em .14em .08em;margin:0 -.16em -.14em -.08em}
.js .w>span{display:inline-block;padding:0 .14em .02em .06em;margin:0 -.14em -.02em -.06em;transform:translateY(108%);transition:transform 720ms var(--out);transition-delay:calc(var(--i) * 38ms)}
.js .split-in .w>span{transform:none}
@media (prefers-reduced-motion:reduce){.js .imgrv::after{display:none}.js .w>span{transform:none;transition:none}}

/* video hero */
.herov{position:relative;min-height:calc(100svh - var(--nav-h));display:flex;align-items:flex-end;background:var(--deep);color:#fff;overflow:hidden}
.herov video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.herov .tint{position:absolute;inset:0;background:rgba(10,40,32,.46)}
.herov-in{position:relative;z-index:2;width:100%;padding-block:clamp(48px,8vw,110px) clamp(40px,6vw,84px)}
.herov h1{color:#fff;max-width:14ch;font-size:clamp(2.8rem,7.4vw,6.2rem);margin-bottom:22px}
.herov h1 em{color:#BFE3CB}
.herov .places,.herov .places i{color:#E5D3AE}
.herov .lede{color:rgba(255,255,255,.88);max-width:46ch}
.herov .btn{background:var(--ivory);border-color:var(--ivory);color:var(--emerald)}
.herov .btn.ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
@media (hover:hover) and (pointer:fine){.herov .btn:hover{background:#fff;border-color:#fff}.herov .btn.ghost:hover{background:#fff;color:var(--emerald)}}
.herov .hours-note{color:rgba(255,255,255,.8)}

/* job lifecycle */
.life{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lcard{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--deep)}
.lcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--out)}
.lcard .tx{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 24px;background:rgba(10,40,32,.84);color:var(--ivory)}
.lcard .n{font-family:var(--display);color:#D9BE8A;font-size:.95rem;font-weight:600}
.lcard h3{color:var(--ivory);font-size:1.7rem;margin:4px 0 6px}
.lcard p{font-size:.92rem;color:rgba(250,248,242,.82);line-height:1.45}
@media (hover:hover) and (pointer:fine){.lcard:hover img{transform:scale(1.05)}}
@media(max-width:900px){.life{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.life{grid-template-columns:1fr}.lcard{aspect-ratio:4/3}}

/* walk: sticky video with steps */
.walk-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:start}
.walk-stage{position:sticky;top:calc(var(--nav-h) + 24px);border-radius:24px;overflow:hidden;background:#000;aspect-ratio:16/10}
.walk-stage video,.walk-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.walk-tag{position:absolute;left:16px;bottom:16px;z-index:2;display:flex;align-items:baseline;gap:12px;padding:10px 18px;border-radius:var(--pill);background:rgba(10,40,32,.88);color:#fff}
.walk-tag b{font-family:var(--display);font-size:1.3rem;font-weight:600}
.walk-tag span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#D9BE8A;font-weight:700}
.walk-steps{list-style:none}
.wstep{min-height:70vh;display:flex;flex-direction:column;justify-content:center;padding:28px 0;opacity:.42;transition:opacity 500ms var(--out)}
.wstep:last-child{min-height:44vh}
.wstep.live{opacity:1}
.wstep .n{font-family:var(--display);font-size:clamp(4.5rem,9vw,8rem);line-height:.9;color:#D9BE8A;font-weight:600}
.wstep h3{margin:12px 0;font-size:clamp(1.8rem,3vw,2.5rem)}
.wstep p{color:rgba(250,248,242,.8);max-width:40ch}
.wstep .pic{margin-top:22px;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;max-width:460px}
.wstep .pic img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.walk-grid{grid-template-columns:1fr}.walk-stage{top:calc(var(--nav-h) + 8px);z-index:3;aspect-ratio:16/9;border-radius:16px}.wstep{min-height:auto;padding:36px 0;opacity:1}.wstep .n{font-size:4rem}}

/* bento promises */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(210px,auto);gap:16px}
.bt{position:relative;border-radius:var(--r);overflow:hidden;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--paper)}
.bt.photo{padding:0;background:var(--deep)}
.bt.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--out)}
.bt.photo .cap{position:relative;z-index:1;background:rgba(10,40,32,.86);color:var(--ivory);padding:18px 22px}
.bt.photo .cap b{display:block;font-family:var(--display);font-size:1.35rem;font-weight:600;line-height:1.15}
.bt.photo .cap span{display:block;font-size:.92rem;color:rgba(250,248,242,.82);margin-top:4px}
.bt .big{font-family:var(--display);font-weight:600;font-size:clamp(3rem,6vw,5.2rem);line-height:.95;color:var(--emerald);letter-spacing:-.03em}
.bt h3{margin:10px 0 6px;font-size:1.3rem}
.bt p{font-size:.98rem;color:var(--mute);line-height:1.5}
.bt.dk{background:var(--emerald);color:var(--ivory)}
.bt.dk .big,.bt.dk h3{color:var(--ivory)}
.bt.dk p{color:rgba(250,248,242,.8)}
.bt.lf{background:var(--leaf-soft)}
.bt.br{background:#EADFC8}
.bt.w2{grid-column:span 2}.bt.h2{grid-row:span 2}
@media (hover:hover) and (pointer:fine){.bt.photo:hover>img{transform:scale(1.04)}}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.bt.h2{grid-row:auto;min-height:340px}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bt.w2{grid-column:auto}.bt.photo{min-height:260px}}

/* services hub features */
.feat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}
.feat.rev .vis{order:2}
.feat .vis{position:relative}
.feat .nbig{font-family:var(--display);font-size:clamp(4rem,9vw,7.5rem);line-height:.8;color:var(--brass);font-weight:600;letter-spacing:-.04em;margin-bottom:10px}
.deep .feat .nbig{color:#D9BE8A}
.feat h2{margin:6px 0 16px}
.feat .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.feat .tags span{padding:8px 14px;border-radius:var(--pill);background:var(--leaf-soft);color:var(--emerald);font-weight:600;font-size:.9rem}
.deep .feat .tags span{background:rgba(250,248,242,.12);color:var(--ivory)}
.deep .feat .lede{color:rgba(250,248,242,.8)}
.collage{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:12px;aspect-ratio:1.1}
.collage figure{border-radius:var(--r);overflow:hidden;background:var(--paper)}
.collage figure:first-child{grid-row:span 2;border-radius:24px}
.collage img{width:100%;height:100%;object-fit:cover}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair .clip{aspect-ratio:9/16}
.bigshot{border-radius:24px;overflow:hidden;aspect-ratio:5/4;background:var(--paper)}
.bigshot img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.feat{grid-template-columns:1fr}.feat.rev .vis{order:0}.collage{aspect-ratio:1.2}}

/* work mosaic */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(200px,26vw));gap:14px}
.mosaic>*{border-radius:var(--r);overflow:hidden;background:var(--paper);position:relative}
.mosaic img,.mosaic video{width:100%;height:100%;object-fit:cover}
.mosaic .a{grid-column:span 2;grid-row:span 2;border-radius:24px}
.mosaic .d{grid-column:span 2}
.mosaic .cap{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:var(--pill);background:rgba(250,248,242,.94);color:var(--emerald);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:760px){.mosaic{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:200px}.mosaic .a{grid-column:span 2;grid-row:span 1;height:300px}.mosaic .d{grid-column:span 2}}
.quote-ph{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:center;max-width:1000px;margin:0 auto}
.quote-ph .ph{border-radius:24px;overflow:hidden;aspect-ratio:4/5}
.quote-ph .ph img{width:100%;height:100%;object-fit:cover}
.quote-ph blockquote{text-align:left}
.quote-ph cite{text-align:left}
@media(max-width:760px){.quote-ph{grid-template-columns:1fr}.quote-ph .ph{max-width:320px}}

/* round 3: hero split, accordion, quad tile */
.herov-grid h1{max-width:16ch}
.herov-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,72px);align-items:end}
.hero-ash{justify-self:end;width:min(100%,330px);background:var(--ivory);color:var(--emerald);border-radius:24px;padding:10px 10px 0;overflow:hidden}
.hero-ash img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:16px}
.hero-ash figcaption{padding:14px 8px 16px}
.hero-ash b{display:block;font-family:var(--display);font-size:1.35rem;font-weight:600;line-height:1.1}
.hero-ash span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--mute)}
@media(max-width:860px){.herov-grid{grid-template-columns:1fr}.hero-ash{display:none}}
.acc{display:flex;gap:12px;height:clamp(480px,64vh,620px)}
.ap{position:relative;flex:1 1 0;min-width:0;border-radius:var(--r);overflow:hidden;background:var(--deep);color:var(--ivory);transition:flex-grow 650ms var(--in-out)}
.ap.on{flex-grow:2.1}
.ap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 900ms var(--out)}
.ap.on img{transform:scale(1)}
.ap .tx{position:absolute;left:0;right:0;bottom:0;padding:22px;background:rgba(10,40,32,.86);display:block}
.ap .n{display:block;font-family:var(--display);color:#D9BE8A;font-size:.95rem;font-weight:600}
.ap h3{color:var(--ivory);font-size:clamp(1.15rem,1.7vw,1.6rem);white-space:nowrap;margin:2px 0 0}
.ap .more{display:grid;gap:12px;max-height:0;opacity:0;overflow:hidden;transition:max-height 500ms var(--out),opacity 350ms ease;color:rgba(250,248,242,.85);font-size:1rem;line-height:1.5;max-width:44ch}
.ap.on .more{max-height:180px;opacity:1;margin-top:10px}
.ap .go{font-weight:700;color:var(--ivory);border-bottom:2px solid var(--brass);justify-self:start;padding-bottom:2px}
@media(max-width:900px){.acc{flex-direction:column;height:auto}.ap{flex:none;height:112px;transition:height 600ms var(--in-out)}.ap.on{height:360px}.ap h3{font-size:1.5rem}}
@media (prefers-reduced-motion:reduce){.ap,.ap img,.ap .more{transition:none}}
.bt.quad{padding:0;background:var(--deep)}
.bt.quad .grid4{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px}
.bt.quad .grid4 img{width:100%;height:100%;object-fit:cover}
.bt.quad .cap{position:relative;z-index:1;background:rgba(10,40,32,.88);color:var(--ivory);padding:18px 22px;margin-top:auto}
.bt.quad .cap b{display:block;font-family:var(--display);font-size:1.35rem;font-weight:600}
.bt.quad .cap span{display:block;font-size:.92rem;color:rgba(250,248,242,.82);margin-top:4px}

/* round 4: big cut-out of Ashley on the right, text pushed left, four photo tile */
.herov .wrap.herov-in{max-width:1560px;padding-left:clamp(20px,4.5vw,84px)}
.herov-grid{grid-template-columns:1fr}
.herov-grid>div{max-width:600px}
.hero-cut{position:absolute;right:clamp(16px,13vw,270px);bottom:0;height:min(96%,780px);width:auto;max-width:54%;z-index:2;pointer-events:none;object-fit:contain;object-position:bottom right}
@media(max-width:860px){.hero-cut{display:none}.herov-grid>div{max-width:none}}
.bt.quad{display:flex;flex-direction:column}
.bt.quad .grid4{position:static;flex:1;min-height:150px;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr}
.bt.quad .cap{margin-top:0}
@media(max-width:560px){.bt.quad .grid4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;min-height:240px}}

@media(max-width:1400px) and (min-width:861px){.hero-cut{height:min(80%,660px);right:2vw;max-width:44%}}

/* ===== round 4: immersive inner page heroes, service intros, timeline, work and contact rebuilds ===== */

/* inner page hero over real footage or a photo */
.hero2{position:relative;min-height:clamp(480px,66vh,700px);display:flex;align-items:flex-end;background:var(--deep);color:#fff;overflow:hidden}
.hero2>img,.hero2>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero2 .tint{position:absolute;inset:0;background:rgba(10,40,32,.5)}
.hero2 .wrap{max-width:1560px;padding-left:clamp(20px,4.5vw,84px)}
.hero2-in{position:relative;z-index:2;width:100%;padding-block:clamp(40px,7vw,96px) clamp(30px,4.5vw,56px)}
.hero2 .crumbs{color:rgba(255,255,255,.82);font-size:.86rem;margin-bottom:18px}
.hero2 .crumbs a{text-decoration:underline;text-underline-offset:3px}
.hero2 .eb{color:#E5D3AE}
.hero2 h1{color:#fff;font-size:clamp(2.8rem,7vw,5.8rem);max-width:15ch}
.hero2 h1 em{color:#BFE3CB}
.hero2 .lede{color:rgba(255,255,255,.9);margin-top:20px;max-width:50ch}
.hero2 .btn{background:var(--ivory);border-color:var(--ivory);color:var(--emerald)}
.hero2 .btn.ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
@media (hover:hover) and (pointer:fine){.hero2 .btn:hover{background:#fff;border-color:#fff}.hero2 .btn.ghost:hover{background:#fff;color:var(--emerald)}}
.hero2 .hours-note{color:rgba(255,255,255,.8)}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.facts span,.facts a{padding:10px 18px;border-radius:var(--pill);background:rgba(250,248,242,.16);border:1px solid rgba(255,255,255,.4);font-weight:600;font-size:.95rem;color:#fff;transition:background-color var(--t-ui) ease,color var(--t-ui) ease}
@media (hover:hover) and (pointer:fine){.facts a:hover{background:#fff;color:var(--emerald)}}
.facts a b{font-family:var(--display);color:#E5D3AE;margin-right:8px;font-weight:600}
@media (hover:hover) and (pointer:fine){.facts a:hover b{color:var(--brass-ink)}}

/* service intro */
.pull{font-family:var(--display);font-weight:500;font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.18;letter-spacing:-.015em;color:var(--emerald);max-width:26ch;margin-bottom:clamp(32px,4vw,56px)}
.pull em{color:var(--leaf)}
.intro2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.intro2 .txt p{color:var(--mute)}
.intro2 .ph{border-radius:24px;overflow:hidden;aspect-ratio:5/4;background:var(--paper)}
.intro2 .ph img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.intro2{grid-template-columns:1fr}}

/* what is included, as photo tiles */
.inc{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.itile{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--emerald);display:flex;flex-direction:column;justify-content:flex-end;color:var(--ivory)}
.itile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--out)}
.itile .tx{position:relative;z-index:1;background:rgba(10,40,32,.86);padding:18px 20px 20px}
.itile .n{font-family:var(--display);color:#D9BE8A;font-size:.95rem;font-weight:600}
.itile h3{color:var(--ivory);font-size:1.3rem;margin-top:2px;line-height:1.15}
.itile.flat{background:var(--emerald);justify-content:space-between}
.itile.flat.alt{background:var(--leaf)}
.itile.flat .big{font-family:var(--display);font-size:clamp(4.5rem,8vw,7rem);line-height:.9;color:#D9BE8A;padding:20px 20px 0;font-weight:600}
.itile.flat .tx{background:transparent}
@media (hover:hover) and (pointer:fine){.itile:hover img{transform:scale(1.05)}}

/* About: split hero with the cut-out */
.aboutv{position:relative;background:var(--deep);color:var(--ivory);overflow:hidden}
.aboutv .wrap{max-width:1560px;padding-left:clamp(20px,4.5vw,84px);position:relative;min-height:clamp(520px,72vh,720px);display:flex;align-items:center}
.aboutv .ring{position:absolute;right:clamp(0px,9vw,180px);bottom:-8%;width:min(78vw,640px);aspect-ratio:1;border-radius:50%;background:var(--leaf)}
.aboutv .cut{position:absolute;right:clamp(10px,10vw,220px);bottom:0;height:min(94%,720px);width:auto;max-width:52%;object-fit:contain;object-position:bottom right;z-index:2;pointer-events:none}
.aboutv .copy{position:relative;z-index:3;max-width:620px;padding-block:clamp(48px,7vw,96px)}
.aboutv .crumbs{color:rgba(250,248,242,.75);font-size:.86rem;margin-bottom:18px}
.aboutv .crumbs a{text-decoration:underline;text-underline-offset:3px}
.aboutv .eb{color:#D9BE8A}
.aboutv h1{color:var(--ivory)}
.aboutv h1 em{color:#9CCFB0}
.aboutv .lede{color:rgba(250,248,242,.82);margin-top:20px}
.aboutv .stats{border-color:var(--line-d)}
.aboutv .stats b{color:var(--ivory)}
.aboutv .stats span{color:rgba(250,248,242,.7)}
@media(max-width:900px){.aboutv .cut,.aboutv .ring{display:none}.aboutv .wrap{min-height:0}}

/* About: the path here, a timeline that fills as you scroll */
.path-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:start}
.path{position:relative;list-style:none;padding-left:64px}
.path::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:3px;background:var(--line)}
.path .fill{position:absolute;left:19px;top:8px;width:3px;height:calc(100% - 16px);background:var(--leaf);transform:scaleY(0);transform-origin:50% 0}
.pstep{position:relative;padding:0 0 clamp(36px,5vw,64px)}
.pstep:last-child{padding-bottom:0}
.pstep::before{content:"";position:absolute;left:-55px;top:6px;width:24px;height:24px;border-radius:50%;background:var(--ivory);border:3px solid var(--line);transition:background-color 300ms ease,border-color 300ms ease}
.pstep.reached::before{background:var(--leaf);border-color:var(--leaf)}
.pstep .k{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--brass-ink)}
.pstep h3{font-size:clamp(1.6rem,2.8vw,2.3rem);margin:6px 0 8px}
.pstep p{color:var(--mute);max-width:46ch}
.path-photo{position:sticky;top:calc(var(--nav-h) + 24px);border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:var(--paper)}
.path-photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.path-grid{grid-template-columns:1fr}.path-photo{position:static;max-width:420px}}

/* Work page */
.workhero{padding:clamp(40px,6vw,84px) 0 clamp(36px,5vw,64px)}
.workhero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.workhero h1{max-width:12ch}
.wstats{display:flex;flex-wrap:wrap;gap:24px 40px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.wstats b{display:block;font-family:var(--display);font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;color:var(--emerald);font-weight:600}
.wstats span{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--mute)}
@media(max-width:860px){.workhero-grid{grid-template-columns:1fr}}
.gal figure.batile{cursor:default;background:transparent;padding:0}
.gal figure.vid{cursor:pointer;background:var(--deep);padding:0}
.gal figure.vid .clip{aspect-ratio:9/16;border-radius:0}
.gal figure.vid .clip.wide{aspect-ratio:16/9;grid-column:auto}

/* Contact */
.chero{background:var(--deep);color:var(--ivory);padding:clamp(40px,6vw,84px) 0 clamp(48px,6vw,88px)}
.chero .wrap{max-width:1360px}
.chero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(28px,5vw,80px);align-items:center}
.chero .crumbs{color:rgba(250,248,242,.75);font-size:.86rem;margin-bottom:18px}
.chero .crumbs a{text-decoration:underline;text-underline-offset:3px}
.chero .eb{color:#D9BE8A}
.chero h1{color:var(--ivory)}
.chero h1 em{color:#9CCFB0}
.chero .lede{color:rgba(250,248,242,.82);margin-top:20px}
.status{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:10px 18px;border-radius:var(--pill);background:rgba(250,248,242,.12);font-weight:600;font-size:.95rem}
.status i{width:10px;height:10px;border-radius:50%;background:#6FCF97;display:block}
.status.closed i{background:#E5B567}
.ways{display:grid;gap:14px}
.way{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;border-radius:22px;padding:22px 26px;background:var(--ivory);color:var(--emerald);text-align:left;border:0;width:100%;transition:transform var(--t-ui) var(--out),background-color var(--t-ui) ease}
.way svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.way small{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brass-ink)}
.way b{display:block;font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.05;font-weight:600;overflow-wrap:anywhere}
.way.main{background:#fff}
.way.main b{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.way .arr{font-size:1.4rem}
@media (hover:hover) and (pointer:fine){.way:hover{transform:translateY(-3px);background:#fff}}
@media(max-width:860px){.chero-grid{grid-template-columns:1fr}}
.hrs{border-collapse:collapse;width:100%}
.hrs td{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
.hrs td:last-child{text-align:right;font-weight:700}
.hrs tr.today td{color:var(--leaf);font-weight:700}
.hrs tr.today td:first-child::after{content:" (today)";font-weight:600;font-size:.85rem}
.where{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:860px){.where{grid-template-columns:1fr}}

.way b.sm{font-size:clamp(1.15rem,2.1vw,1.7rem)}

.inc.n5{grid-template-columns:repeat(5,1fr)}.inc.n4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.inc.n5,.inc.n4{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.inc.n5,.inc.n4{grid-template-columns:1fr}.itile{aspect-ratio:4/3}}

/* round 5 */
.hero2 .tint{background:rgba(10,40,32,.62)}
.hero2 h1{font-size:clamp(3rem,7.4vw,6.2rem)}
.hero2 .lede{color:#fff;font-weight:500}
.hero2 .btn{background:#fff;border-color:#fff;color:var(--emerald)}
.hero2 .btn.ghost{background:rgba(10,40,32,.55);border:2px solid #fff;color:#fff}
@media (hover:hover) and (pointer:fine){.hero2 .btn:hover{background:var(--brass);border-color:var(--brass);color:var(--deep)}.hero2 .btn.ghost:hover{background:#fff;color:var(--emerald)}}
.facts span,.facts a{background:var(--ivory);color:var(--emerald);border:0;font-weight:700}
.facts a b{color:var(--brass-ink)}
@media (hover:hover) and (pointer:fine){.facts a:hover{background:var(--brass);color:var(--deep)}.facts a:hover b{color:var(--deep)}}
.emerald .pull{color:var(--ivory)}
.emerald .pull em{color:#9CCFB0}
.emerald .intro2 .txt p{color:rgba(250,248,242,.86)}
.emerald .intro2 .txt p:first-child{color:#fff}
.band.deep .head h2{color:var(--ivory)}
.band.deep .eb{color:#D9BE8A}

/* About collage hero */
.aboutv .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;min-height:clamp(520px,72vh,720px)}
.acollage{position:relative;height:clamp(420px,46vw,620px)}
.acollage figure{position:absolute;border-radius:22px;overflow:hidden;background:var(--paper);border:6px solid var(--deep)}
.acollage img{width:100%;height:100%;object-fit:cover}
.acollage .a1{left:2%;top:0;width:52%;aspect-ratio:4/5;z-index:2}
.acollage .a2{right:0;top:12%;width:42%;aspect-ratio:1;z-index:1}
.acollage .a3{right:8%;bottom:0;width:48%;aspect-ratio:4/3;z-index:3}
.aboutv .imgrv::after{background:var(--deep)}
@media(max-width:900px){.aboutv .wrap{grid-template-columns:1fr}.acollage{height:auto;aspect-ratio:1.1;max-width:520px}}
.path-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 600ms ease}
.path-photo img.on{opacity:1}

/* contact: what happens next */
.next{list-style:none;counter-reset:n;display:grid;gap:14px;margin-top:28px}
.next li{counter-increment:n;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:18px 20px;background:var(--white);border-radius:var(--r)}
.next li::before{content:counter(n);grid-row:span 2;width:44px;height:44px;border-radius:50%;background:var(--emerald);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:1.2rem}
.next b{font-family:var(--display);font-size:1.2rem;color:var(--emerald);font-weight:600}
.next span{color:var(--mute);font-size:.96rem}

/* floating WhatsApp: a small circle that offers a quote now and then */
.fwa{width:60px;height:60px;min-height:0;padding:0;justify-content:center;overflow:hidden;transition:opacity 260ms var(--out),transform 260ms var(--out),width 420ms var(--out),padding 420ms var(--out)}
.fwa svg{flex:0 0 auto;width:30px;height:30px}
.fwa span{display:block;max-width:0;opacity:0;white-space:nowrap;overflow:hidden;transition:max-width 420ms var(--out),opacity 260ms ease}
.fwa.peek{width:208px;padding:0 20px 0 15px;justify-content:flex-start}
.fwa.peek span{max-width:150px;opacity:1}
@media(max-width:560px){.fwa{padding:0;width:60px}.fwa.peek{width:200px}}

/* About collage as a simple grid */
.acollage{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:clamp(420px,42vw,580px)}
.acollage figure{position:static;border:0;width:auto;aspect-ratio:auto;border-radius:22px}
.acollage .a1{grid-row:span 2;right:auto;left:auto;top:auto}
.acollage .a2,.acollage .a3{right:auto;bottom:auto;top:auto;width:auto;aspect-ratio:auto}
@media(max-width:900px){.acollage{height:auto;aspect-ratio:1.1;max-width:520px}}

.acollage .a1{width:auto;aspect-ratio:auto;z-index:auto}
.acollage .a2,.acollage .a3{z-index:auto}

/* round 6: centred WhatsApp circle, smoother slider, varied reveals */
.fwa{gap:0}
.fwa.peek{gap:10px}
.fwa span{margin:0}
.ba{contain:layout paint;transform:translateZ(0)}
.ba .top{will-change:clip-path}
.ba img{pointer-events:none;-webkit-user-drag:none}
.js .rv.l{transform:translateX(-28px)}
.js .rv.r{transform:translateX(28px)}
.js .rv.s{transform:scale(.95)}
.js .rv.f{transform:none}
.js .rv.l.in,.js .rv.r.in,.js .rv.s.in,.js .rv.f.in{transform:none}
.js .rv.f{transition-duration:700ms}
@media (prefers-reduced-motion:reduce){.js .rv.l,.js .rv.r,.js .rv.s{transform:none}}

/* nav spans the full width on big screens so the logo sits left and the links right, lining up with the hero text */
.nav .wrap.nav-in{max-width:1560px;padding-inline:clamp(20px,4.5vw,84px)}

/* round 7: hero headline in three lines, stronger accent, Ashley outlined */
.herov-grid>div{max-width:780px}
.herov-grid h1{max-width:none;font-size:clamp(2.5rem,5.6vw,5.1rem);line-height:1.04}
.herov-grid h1 .ln{display:block;white-space:nowrap}
.herov h1 em{color:#F2D99B;font-weight:600}
.hero-cut{filter:drop-shadow(0 0 0 #FAF8F2) drop-shadow(1.5px 0 0 #FAF8F2) drop-shadow(-1.5px 0 0 #FAF8F2) drop-shadow(0 1.5px 0 #FAF8F2) drop-shadow(0 -1.5px 0 #FAF8F2) drop-shadow(0 14px 22px rgba(10,40,32,.45))}
@media(max-width:860px){.herov-grid h1 .ln{white-space:normal}}

/* round 8: text sits level with Ashley, no sticker outline */
.herov{align-items:stretch}
.herov-in{display:flex;align-items:center;padding-block:clamp(40px,7vh,90px) clamp(70px,13vh,150px)}
.herov-grid{align-items:center;width:100%}
.hero-cut{filter:drop-shadow(0 16px 26px rgba(10,40,32,.5))}

/* round 9: snugger WhatsApp pill, brighter marigold accent */
.fwa.peek{width:172px;padding:0 16px 0 15px}
.fwa.peek span{max-width:100px}
@media(max-width:560px){.fwa.peek{width:166px}}
.herov h1 em{color:#FFC531}
.herov .places,.herov .places i{color:#FFD36B}

/* ===== round 6: mobile pass (laptop untouched) ===== */
@media(max-width:860px){
  .band{padding:clamp(48px,12vw,64px) 0}
  h2{font-size:clamp(1.75rem,7.4vw,2.3rem)}
  .head,.head.center{text-align:center;margin-inline:auto;margin-bottom:28px}
  .head p{margin-inline:auto;font-size:1rem}
  .eb{font-size:.7rem;margin-bottom:12px}

  /* nav: burger left, logo centred */
  .nav .wrap.nav-in{display:grid;grid-template-columns:48px 1fr 48px;gap:0;padding-inline:14px}
  .nav-logo{grid-column:2;justify-self:center}
  .burger{grid-column:1;grid-row:1;margin:0;justify-self:start}
  .nav-logo img{height:38px}

  /* hero: centred text, Ashley below it */
  .herov{flex-direction:column;justify-content:flex-end;align-items:stretch;min-height:calc(100svh - var(--nav-h))}
  .herov-in{padding-block:34px 12px;text-align:center;display:block}
  .herov-grid>div{max-width:none}
  .herov .places{justify-content:center;gap:2px 8px;font-size:.62rem;letter-spacing:.08em;margin-bottom:14px;display:flex;flex-wrap:wrap}
  .herov-grid h1{font-size:clamp(2.1rem,9.4vw,2.7rem);margin-bottom:0}
  .herov-grid h1 .ln{white-space:normal}
  .herov .lede{display:none}
  .herov .acts{justify-content:center;flex-direction:row;gap:10px;margin-top:22px}
  .herov .acts .btn{min-height:48px;padding:12px 18px;font-size:.88rem;flex:1 1 auto}
  .herov .hours-note{display:none}
  .hero-cut{display:block;position:relative;right:auto;bottom:auto;z-index:2;height:min(46vh,340px);width:auto;max-width:78%;margin:6px auto 0;align-self:center;object-fit:contain;object-position:bottom center}

  /* services accordion becomes four stacked photo cards, text always visible */
  .acc{flex-direction:column;height:auto;gap:12px}
  .ap,.ap.on{flex:none;height:210px;transition:none}
  .ap img,.ap.on img{transform:none}
  .ap .tx{padding:16px 18px}
  .ap h3{font-size:1.45rem;white-space:normal}
  .ap .more,.ap.on .more{max-height:none;opacity:1;overflow:visible;margin-top:6px;font-size:.92rem;display:grid;gap:8px}
  .ap .more>span:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* how we work: video on top, steps compact underneath, no overlay */
  .walk-stage{position:sticky;top:calc(var(--nav-h) + 6px);aspect-ratio:16/10;z-index:3;border-radius:16px}
  .walk-tag{display:none}
  .wstep{min-height:0;padding:22px 0;opacity:1;text-align:left}
  .wstep:last-child{min-height:0}
  .wstep .n{font-size:2.6rem}
  .wstep h3{font-size:1.5rem;margin:4px 0 6px}
  .wstep .pic{display:none}

  /* story */
  .story{text-align:center;gap:22px}
  .story .ph{max-width:240px;margin-inline:auto;aspect-ratio:4/5}
  .story .lede{font-size:1.05rem}
  .story .acts{justify-content:center}

  /* why people hire us: compact tiles */
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:10px}
  .bt{padding:16px;min-height:0}
  .bt.w2{grid-column:span 2}
  .bt.h2{grid-row:auto;min-height:260px}
  .bt.photo{min-height:170px}
  .bt.photo .cap{padding:12px 14px}
  .bt.photo .cap b{font-size:1.05rem}
  .bt.photo .cap span{display:none}
  .bt .big{font-size:2.4rem}
  .bt h3{font-size:1.05rem;margin:6px 0 2px}
  .bt p{font-size:.88rem}
  .bt.quad .grid4{min-height:110px;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr}
  .bt.quad .cap span{display:none}

  /* recent work */
  .strip-top .strip-ctl{display:none}
  .strip-top{margin-bottom:20px;justify-content:center;text-align:center}
  .strip figure{flex-basis:72vw}
  .strip+.wrap{text-align:center}
  .strip+.wrap .link{display:inline-flex;min-height:48px;align-items:center;padding:0 26px;border:2px solid var(--emerald);border-radius:var(--pill);border-bottom-width:2px}

  /* where we work */
  .areas{text-align:center}
  .areas ul{grid-template-columns:1fr 1fr;gap:8px}
  .areas li{padding:11px 8px;font-size:.92rem}
  .areas .map img{aspect-ratio:4/3;object-fit:cover;width:100%}

  /* faq and cta */
  .faq summary{padding:18px 2px;font-size:1.12rem}
  .cta h2{max-width:none}

  /* footer */
  .foot{padding:36px 0 24px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:22px 16px}
  .foot-grid>div:first-child{grid-column:span 2;text-align:center}
  .foot-grid>div:first-child p{display:none}
  .foot-grid>div:last-child{grid-column:span 2;text-align:center}
  .foot-grid>div:last-child ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
  .foot img{height:40px;margin:0 auto 4px}
  .foot h4{margin-bottom:10px}
  .foot ul{gap:7px;font-size:.95rem}
  .foot-base{margin-top:24px;padding-top:16px;flex-direction:column;align-items:center;text-align:center;gap:6px}
}

@media(max-width:860px){
  .ap,.ap.on{height:270px}
  .ap .tx{padding:14px 16px}
  .ap .n{display:none}
  .ap .more>span:first-child{-webkit-line-clamp:1}
  .story .ph{max-width:260px;aspect-ratio:1}
  .story .ph img{object-position:60% 25%}
}

@media(max-width:860px){
  .quote-ph{gap:18px}
  .quote-ph .ph{max-width:none;aspect-ratio:16/9}
  .quote-ph blockquote{font-size:1.3rem;text-align:center}
  .quote-ph cite{text-align:center}
  .bt.quad{min-height:150px}
}

/* round 10: on phones Ashley stands on a flat ivory disc so she separates from the green */
.hero-fig{display:contents}
.hero-disc{display:none}
@media(max-width:860px){
  .hero-fig{display:block;position:relative;z-index:2;align-self:center;width:min(78%,300px);margin:14px auto 0;padding-top:6px}
  .hero-disc{display:block;position:absolute;left:50%;bottom:0;width:112%;aspect-ratio:1;transform:translate(-50%,46%);border-radius:50%;background:#FAF8F2;z-index:0}
  .hero-fig{overflow:hidden;padding-bottom:0}
  .hero-fig .hero-cut{position:relative;z-index:1;width:100%;height:auto;max-width:none;margin:0;max-height:min(44vh,330px);object-fit:contain;object-position:bottom center;filter:brightness(1.1) contrast(1.06) saturate(1.05) drop-shadow(0 8px 14px rgba(10,40,32,.25))}
}

@media(max-width:860px){.hero-fig{overflow:visible}.hero-disc{width:96%;transform:translate(-50%,38%)}}

/* round 11: no hard disc, a soft light glow behind Ashley; nav pinned; no map on phones */
.nav{position:fixed;top:0;left:0;right:0;inset:0 0 auto 0;transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform}
html,body{overscroll-behavior-y:none}
@media(max-width:860px){
  .hero-disc{width:150%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(250,248,242,.62) 0%,rgba(250,248,242,.34) 45%,rgba(250,248,242,0) 100%);transform:translate(-50%,34%)}
  .hero-fig{overflow:visible}
  .areas .map{display:none}
}

@media(max-width:860px){.js .rv.l,.js .rv.r{transform:translateY(14px)}.js .rv.l.in,.js .rv.r.in{transform:none}}

/* ===== round 12: every page on phones, nav WhatsApp, calmer floating button, compact footer ===== */
.nav-wa{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:0;background:#1F7A4C;color:#fff;transition:transform var(--t-press) var(--out),background-color var(--t-ui) ease}
.nav-wa svg{width:24px;height:24px;fill:#fff}
.nav-wa:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){.nav-wa:hover{background:var(--leaf)}}
.drawer .btn.wa{margin-top:10px;gap:10px}
.drawer .btn.wa svg{width:22px;height:22px;fill:#fff}
.fwa.show.hide{opacity:0;pointer-events:none;transform:translateY(10px)}

@media(max-width:900px){
  .nav-wa{display:none}
}
@media(max-width:860px){
  /* hero places: two over two */
  .herov .places{display:grid;grid-template-columns:auto auto;justify-content:center;gap:4px 22px;font-size:.7rem;letter-spacing:.1em}
  .herov .places i{display:none}

  /* floating WhatsApp: small circle only, never opens out */
  .fwa{right:14px;bottom:14px;width:56px;height:56px}
  .fwa span{display:none}
  .fwa.peek{width:56px;padding:0}

  /* how we work: full width video on top, steps below, nothing slides behind it */
  .walk-grid{gap:20px}
  .walk-stage{position:relative;top:auto;z-index:auto;aspect-ratio:4/5;width:calc(100% + 2 * var(--pad));margin-inline:calc(-1 * var(--pad));border-radius:0}
  .wstep{padding:18px 0;border-top:1px solid var(--line-d)}
  .wstep:first-child{border-top:0}
  .wstep .n{font-size:2.2rem;display:inline-block;margin-right:10px;vertical-align:baseline}
  .wstep h3{display:inline;font-size:1.4rem}
  .wstep p{margin-top:6px}

  /* footer: one compact block */
  .foot{padding:30px 0 20px}
  .foot-grid{display:block;text-align:center}
  .foot-grid>div{margin:0 0 16px}
  .foot-grid>div:first-child img{height:38px;margin:0 auto}
  .foot h4{display:none}
  .foot ul{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font-size:.92rem}
  .foot-grid>div:nth-child(2) ul,.foot-grid>div:nth-child(3) ul{gap:4px 14px}
  .foot-grid>div:nth-child(4) ul{flex-direction:column;gap:3px;font-size:.92rem}
  .foot-base{margin-top:14px;padding-top:14px;font-size:.84rem;padding-bottom:64px}

  /* inner page heroes */
  .hero2{min-height:clamp(380px,62svh,560px)}
  .hero2-in{text-align:center;padding-block:30px 28px}
  .hero2 .crumbs{margin-bottom:12px;font-size:.8rem}
  .hero2 h1{font-size:clamp(2.2rem,10vw,3rem);margin-inline:auto;max-width:none}
  .hero2 .lede{font-size:1rem;margin:14px auto 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hero2 .acts{justify-content:center;margin-top:20px;gap:10px}
  .hero2 .acts .btn{min-height:46px;padding:11px 18px;font-size:.88rem;flex:1 1 auto}
  .facts{justify-content:center;gap:8px;margin-top:18px}
  .facts span,.facts a{padding:8px 12px;font-size:.8rem}

  /* service pages */
  .pull{font-size:1.55rem;text-align:center;margin-inline:auto;margin-bottom:20px}
  .intro2{gap:18px}
  .intro2 .txt p{font-size:.98rem}
  .inc,.inc.n5,.inc.n4{grid-template-columns:1fr 1fr;gap:10px}
  .itile{aspect-ratio:1}
  .itile .tx{padding:12px 12px 14px}
  .itile h3{font-size:1rem}
  .itile .n{font-size:.8rem}
  .itile.flat .big{font-size:2.6rem;padding:12px 12px 0}
  .shots,.shots.one,.shots.two{grid-template-columns:1fr 1fr;gap:10px}
  .shots.one figure{aspect-ratio:4/3;grid-column:span 2}
  .clips{grid-template-columns:1fr 1fr;gap:10px}
  .related{gap:10px}
  .related a{display:grid;grid-template-columns:110px 1fr;align-items:center}
  .related .im{aspect-ratio:1;height:100%}
  .related h3{padding:12px 14px 0;font-size:1.1rem}
  .related p{padding:2px 14px 12px;font-size:.88rem}
  .svc-body .txt p:first-child{font-size:1rem}

  /* services hub features */
  .feat{text-align:center;gap:20px}
  .feat .nbig{font-size:3rem;margin-bottom:4px}
  .feat .tags{justify-content:center}
  .feat .acts{justify-content:center}
  .feat .lede{margin-inline:auto;font-size:1.02rem}
  .collage{aspect-ratio:1.3}
  .pair{gap:10px}

  /* about */
  .aboutv .wrap{display:block;min-height:0;padding-block:28px 32px}
  .aboutv .copy{text-align:center;padding-block:0 22px;max-width:none}
  .aboutv .stats{justify-content:center;gap:14px 26px;margin-top:20px;padding-top:16px}
  .aboutv .stats b{font-size:1.9rem}
  .aboutv .lede{font-size:1rem}
  .acollage{height:auto;aspect-ratio:1.25;max-width:none}
  .path-grid{gap:20px}
  .path{padding-left:48px}
  .pstep{padding-bottom:26px}
  .pstep::before{left:-41px}
  .pstep h3{font-size:1.3rem}
  .pstep p{font-size:.95rem}
  .path-photo{display:none}

  /* work */
  .workhero{padding:28px 0 24px}
  .workhero-grid{text-align:center;gap:22px}
  .workhero h1{max-width:none;margin-inline:auto}
  .wstats{justify-content:center;gap:14px 28px;margin-top:20px;padding-top:16px}
  .wstats b{font-size:1.8rem}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--pad));padding:0 var(--pad) 6px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;min-height:42px;padding:8px 16px;font-size:.86rem}
  .gal{columns:2 150px;column-gap:10px}
  .gal figure{margin-bottom:10px}

  /* contact */
  .chero{padding:28px 0 32px}
  .chero-grid{gap:22px;text-align:center}
  .chero .lede{font-size:1rem;margin-top:14px}
  .status{margin-top:18px;font-size:.88rem;text-align:left}
  .way{padding:16px 18px;gap:14px;text-align:left}
  .way b{font-size:1.5rem}
  .way.main b{font-size:1.8rem}
  .way svg{width:28px;height:28px}
  .where{gap:26px}
  .where .areas{text-align:left}
  .next li{padding:14px 16px}
  .hrs td{padding:11px 0;font-size:1rem}

  /* shared */
  .cta .acts{flex-direction:column;align-items:stretch}
  .cta .acts .btn{width:100%}
  .head .lede{font-size:1rem}
  .strip figure{flex-basis:70vw}
  .acts{margin-top:22px}
}

@media(max-width:860px){
  .inc .itile:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:2.2/1}
  .aboutv .stats{flex-wrap:nowrap;gap:0 18px}
  .aboutv .stats b{font-size:1.6rem}
  .aboutv .stats span{font-size:.64rem;letter-spacing:.06em}
}

/* undo of the round 12 how we work change on phones: back to the pinned video with compact steps under it */
@media(max-width:860px){
  .walk-grid{gap:20px}
  .walk-stage{position:sticky;top:calc(var(--nav-h) + 6px);z-index:3;aspect-ratio:16/10;width:auto;margin-inline:0;border-radius:16px}
  .walk-tag{display:none}
  .wstep{min-height:0;padding:22px 0;opacity:1;border-top:0;text-align:left}
  .wstep:last-child{min-height:0}
  .wstep .n{font-size:2.6rem;display:block;margin-right:0}
  .wstep h3{display:block;font-size:1.5rem;margin:4px 0 6px}
  .wstep p{margin-top:0}
  .wstep .pic{display:none}
}

@media(max-width:860px){
  .herov .places{gap:4px 28px}
  .herov .places span{position:relative}
  .herov .places span:nth-of-type(odd)::after{content:'';position:absolute;right:-17px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:currentColor;opacity:.9}
}

/* round 13: tiles that sit on the dark About band */
.bt.quad{background:var(--emerald)}
.deep .bt.quad{background:var(--leaf);box-shadow:inset 0 0 0 1px rgba(250,248,242,.22)}
.deep .bt.lf h3,.deep .bt.br h3,.deep .bt.lf .big,.deep .bt.br .big{color:var(--emerald)}
.deep .bt.lf p,.deep .bt.br p{color:var(--mute)}

/* round 14: service pages, one rhythm */
.hero2 h1 em{color:#FFC531}
.hero2 .eb{color:#FFD36B}
.cta h2 .ln{display:block}
@media(max-width:860px){
  /* one heading size, one section rhythm */
  h2,.head h2,.feat h2,.cta h2,.where h2,.chero h2{font-size:1.9rem;line-height:1.1}
  .band{padding:52px 0}
  .head,.head.center{margin-bottom:24px}
  .pull{font-size:1.55rem}
  .feat h2{margin:4px 0 12px}
  .feat .nbig{font-size:3rem}

  /* chips: even grid */
  .facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;justify-content:stretch;margin-top:20px}
  .facts span,.facts a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:8px 10px;font-size:.82rem;line-height:1.2}
  .facts>:last-child:nth-child(odd){grid-column:span 2}
  .feat .tags{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .feat .tags span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:8px 10px;font-size:.82rem;line-height:1.2}

  /* buttons: one size, stacked, centred, everywhere inside a section */
  .band .acts{flex-direction:column;align-items:center;gap:10px;margin-top:20px}
  .band .acts .btn{width:100%;max-width:340px;min-height:50px;font-size:.92rem}

  /* more from the crew: image left, title and text right */
  .related a{grid-template-columns:104px 1fr;grid-template-rows:auto auto;align-items:center}
  .related .im{grid-row:1/3;grid-column:1;aspect-ratio:1;height:100%}
  .related h3{grid-column:2;grid-row:1;padding:12px 14px 0;font-size:1.1rem;align-self:end}
  .related p{grid-column:2;grid-row:2;padding:2px 14px 12px;font-size:.86rem;align-self:start}
}

@media(max-width:860px){
  .related .im{position:relative;aspect-ratio:auto;height:auto;min-height:92px;align-self:stretch}
  .related .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}

/* round 15: autoplay clips, calm captions, tiles that show their photo, no orphan cells */
.clip{cursor:default}
.clip .cap{left:10px;right:auto;bottom:10px;max-width:calc(100% - 20px);padding:6px 11px;border-radius:12px;font-size:.66rem;line-height:1.25;letter-spacing:.06em;text-align:left;white-space:normal}
.itile[data-crop] img{transform:scale(1.9);transform-origin:var(--o,50% 50%)}
@media(max-width:860px){
  .itile{aspect-ratio:4/5}
  .itile .n{display:none}
  .itile .tx{padding:10px 12px 12px}
  .itile h3{font-size:.95rem;line-height:1.2}
  .itile.flat .big{font-size:2.4rem}
  .shots figure:last-child:nth-child(odd),.shots figure:first-child:last-child{grid-column:span 2;aspect-ratio:16/9}
  .clips .clip:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:16/9}
  .inc .itile:last-child:nth-child(odd){aspect-ratio:16/9}
}

/* round 16: all work filters visible, contact on single lines */
@media(max-width:860px){
  .filters{flex-wrap:wrap;overflow:visible;justify-content:center;margin-inline:0;padding:0;gap:8px}
  .chip{flex:0 0 auto;min-height:40px;padding:8px 14px;font-size:.82rem}
  .way{grid-template-columns:auto 1fr;gap:14px}
  .way .arr{display:none}
  .way b{white-space:nowrap;font-size:1.35rem}
  .way.main b{font-size:1.75rem}
  .way b.sm{font-size:1.02rem}
  .hrs td{white-space:nowrap;font-size:.95rem;padding:11px 0}
  .hrs tr.today td:first-child::after{content:none}
}

/* round 17: phone menu buttons centred */
.drawer .btn{justify-content:center;text-align:center;white-space:nowrap}
.drawer .btn.wa{padding-inline:16px}
.drawer small{text-align:center;display:block;line-height:1.5}

/* 21 Oct: keep the floating WhatsApp circle on its own stable layer so it cannot jump near the before and after sliders */
.fwa{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0);will-change:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden;isolation:isolate;bottom:max(14px,env(safe-area-inset-bottom));right:max(14px,env(safe-area-inset-right));z-index:95;-webkit-tap-highlight-color:transparent}
.fwa.show{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.fwa.show.hide{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
.fwa:active{-webkit-transform:translate3d(0,0,0) scale(.97);transform:translate3d(0,0,0) scale(.97)}

/* 21 Oct: on phones the How we work video runs edge to edge, still pinned while the steps scroll past */
@media(max-width:860px){
  .walk-stage{width:calc(100% + 2 * var(--pad));margin-inline:calc(-1 * var(--pad));border-radius:0;aspect-ratio:16/10}
}