/* Homepage-only layout. Uses tokens; no new colours. */
.hero{padding-block:clamp(3rem,2rem + 5vw,7rem) var(--section-y)}
.hero__grid{display:grid;gap:var(--s8);align-items:center}
.hero h1{max-width:14ch}
.hero .lead{margin-block:var(--s5) var(--s6)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center}
@media(min-width:900px){.hero__grid{grid-template-columns:1.15fr .85fr;gap:var(--s9)}}

/* Studio-interface composition (decorative, aria-hidden) */
.frame{position:relative;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 1px 0 var(--line),0 24px 48px -28px rgba(18,48,41,.35);overflow:hidden}
.frame__bar{display:flex;gap:6px;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:var(--paper-2)}
.frame__bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.frame__body{padding:var(--s5);display:grid;gap:var(--s4)}
.ph{height:.6rem;border-radius:3px;background:var(--paper-2)}
.ph--h{height:1.5rem;background:var(--ink);width:78%}
.ph--h2{height:1.5rem;background:var(--ink);width:52%}
.ph--s{width:88%}.ph--s2{width:64%}
.frame__btn{width:7.5rem;height:2rem;border-radius:4px;background:var(--signal)}
.frame__row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);padding-top:var(--s3)}
.frame__row div{height:4.5rem;border:1px solid var(--line);border-radius:4px;background:var(--paper)}
.phone{position:absolute;right:-.5rem;bottom:-1.5rem;width:7rem;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:.9rem .7rem;display:grid;gap:.5rem;box-shadow:0 18px 36px -20px rgba(18,48,41,.45)}
.phone .frame__btn{width:100%;height:1.5rem}
.stage{position:relative;padding-bottom:2rem}
.stage::before{content:"";position:absolute;inset:8% -6% -6% 10%;background:var(--spruce-tint);border-radius:10px;z-index:-1}
.stage{isolation:isolate}
.cap{font-size:var(--fs-xs);color:var(--ink-3);margin:var(--s4) 0 0}

/* Positioning strip */
.strip{padding-block:var(--s8)}
.strip p{font:500 var(--fs-h3)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink);max-width:34ch;margin:0}

/* Two-column section header + body */
.split{display:grid;gap:var(--s6)}
@media(min-width:900px){.split{grid-template-columns:5fr 7fr;gap:var(--s9)}.split--sticky>:first-child{position:sticky;top:6rem;align-self:start}}

.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;gap:var(--s2);padding-block:var(--s5);border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows h3{font-size:var(--fs-h4);margin:0}
.rows p{margin:0}
@media(min-width:640px){.rows li{grid-template-columns:4fr 6fr;gap:var(--s6)}}

/* Work */
.work{display:grid;gap:var(--s6);margin-top:var(--s7)}
@media(min-width:900px){.work{grid-template-columns:1fr 1fr}}
.work a{display:block;color:inherit;text-decoration:none}
.thumb{aspect-ratio:4/3;border:1px solid var(--line-strong);border-radius:var(--radius);padding:var(--s5);display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s3);transition:transform var(--t-base) var(--ease)}
.thumb b{font:500 var(--fs-h3)/1.1 var(--font-display);letter-spacing:-.02em}
.thumb--a{background:var(--spruce-tint);color:var(--spruce-deep)}
.thumb--b{background:var(--ink);color:var(--paper)}
.work a:hover .thumb{transform:translateY(-3px)}
.work h3{margin:var(--s4) 0 var(--s2)}
.work .go{font-weight:600;font-size:var(--fs-sm);border-bottom:1px solid currentColor;color:var(--spruce)}
.work a:focus-visible{outline-offset:6px}
.label{font:600 var(--fs-xs)/1.3 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.thumb--b .label{color:#B9C9C3}

/* Process */
.steps{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;gap:0;counter-reset:s}
.steps li{padding-block:var(--s5);border-top:1px solid #2E5249}
.steps .n{font:500 var(--fs-xs)/1 var(--font-body);letter-spacing:.14em;color:#9FC2B8;display:block;margin-bottom:var(--s3)}
.steps h3{font-size:var(--fs-h3);margin-bottom:var(--s2)}
.steps p{margin:0}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:var(--s6)}.steps li{padding-right:var(--s3)}}

/* FAQ */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s5);padding-block:var(--s5);font:500 var(--fs-lg)/1.3 var(--font-display);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.5rem/1 var(--font-body);color:var(--spruce);transition:transform var(--t-base) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--spruce)}
.faq details p{padding-bottom:var(--s5);margin:0;max-width:44rem}

/* Final CTA + footer */
.cta h2{max-width:18ch}
.cta .btn--primary{margin-top:var(--s5)}
.foot{display:grid;gap:var(--s7)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.foot a{text-decoration:none;font-size:var(--fs-sm)}
.foot a:hover{text-decoration:underline}
.foot .legal{border-top:1px solid #2A3733;padding-top:var(--s5);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3)}
@media(min-width:900px){.foot{grid-template-columns:1fr auto}}
@media(max-width:899px){.hero h1{max-width:none}.phone{right:0}}

/* ---- Quality pass ---- */
.hero h1{max-width:16ch}
.hero__grid{align-items:center}
@media(min-width:900px){.hero__grid{grid-template-columns:1fr 1fr}}
.frame__bar .url{flex:1;height:9px;margin-left:.6rem;border-radius:5px;background:var(--line)}
.site{font-size:.7rem}
.site__nav{display:flex;align-items:center;gap:.9rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--line)}
.site__nav b{font:600 .8rem var(--font-display);margin-right:auto;color:var(--spruce-deep)}
.site__nav span{width:1.6rem;height:.35rem;border-radius:3px;background:var(--line-strong)}
.site__nav em{width:3.2rem;height:1.2rem;border-radius:3px;background:var(--signal)}
.site__hero{display:grid;grid-template-columns:1.2fr 1fr;gap:1.1rem;padding:1.4rem 1.1rem}
.site__hero small{display:block;font:600 .55rem var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--spruce);margin-bottom:.6rem}
.site h4,.phone h4{font:500 1.35rem/1.1 var(--font-display);letter-spacing:-.02em;margin:0 0 .8rem;color:var(--ink)}
.site .ph{margin-top:.4rem}
.site__cta{display:flex;gap:.5rem;margin-top:1rem}
.site__cta i{width:4.4rem;height:1.5rem;border-radius:3px;background:var(--signal)}
.site__cta u{width:3.6rem;height:1.5rem;border-radius:3px;border:1px solid var(--ink)}
.site__img{border-radius:6px;min-height:8rem;background:linear-gradient(160deg,var(--spruce) 0%,var(--spruce-deep) 100%)}
.site__img--m{min-height:3.2rem;margin-top:.7rem}
.site__row{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;padding:0 1.1rem 1.2rem}
.site__row div{border:1px solid var(--line);border-radius:5px;padding:.7rem;background:var(--paper)}
.site__row i{display:block;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--spruce-tint);border:1px solid var(--spruce);margin-bottom:.6rem}
.phone{width:8.2rem;padding:.9rem .8rem}
.phone b{display:block;font:600 .6rem var(--font-display);color:var(--spruce-deep);margin-bottom:.6rem}
.phone h4{font-size:.95rem;margin-bottom:.5rem}
.phone .frame__btn{height:1.3rem;margin-top:.6rem}
.stage{padding-bottom:2.5rem}
.actions .btn{min-height:3.25rem}
@media(max-width:639px){.actions .btn{flex:1 1 100%}.stage::before{inset:8% 0 -6% 10%}.phone{right:.5rem}.site h4{font-size:1.1rem}.site__hero{grid-template-columns:1.3fr 1fr}}

/* Work thumbnails */
.thumb{aspect-ratio:auto;justify-content:flex-start;gap:var(--s5);padding:var(--s5) var(--s5) 0;overflow:hidden}
.mini{background:var(--paper);border-radius:8px 8px 0 0;padding:1.1rem 1.25rem 1.6rem;min-height:15rem;color:var(--ink);box-shadow:0 -1px 0 rgba(0,0,0,.05)}
.mini__nav{display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem}
.mini__nav b{font:600 .85rem var(--font-display);margin-right:auto}
.mini__nav span{width:1.6rem;height:.35rem;border-radius:3px;background:var(--line-strong)}
.mini h4{font:500 clamp(1.4rem,1rem + 1.6vw,1.9rem)/1.1 var(--font-display);letter-spacing:-.02em;max-width:14ch;margin:0 0 1rem}
.mini .ph{width:70%;margin-top:.45rem}
.mini__btn{width:6rem;height:2rem;border-radius:4px;background:var(--spruce);margin-top:1.2rem}
.mini__btn--s{background:var(--signal)}
.thumb--a .label,.thumb--a{color:var(--spruce-deep)}
.thumb--b{background:var(--spruce-deep)}
.thumb--b .label{color:#C9D8D3}
.thumb .label{padding-bottom:0}
.work .proj{margin:var(--s5) 0 var(--s1);color:var(--ink-3)}
.work h3{margin:0 0 var(--s2)}
.work a:hover .go{color:var(--spruce-deep)}

/* Why: two-column ruled list */
.rows--cols{margin-top:var(--s7)}
.rows--cols li{grid-template-columns:1fr!important}
.rows--cols li:last-child{border-bottom:0}
@media(min-width:900px){.rows--cols{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s9)}.rows--cols li{padding-block:var(--s6)}.rows--cols h3{font-size:var(--fs-h3)}.rows--cols li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}.rows--cols li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--line)}}
@media(max-width:899px){.rows--cols li:last-child{border-bottom:1px solid var(--line)}}

/* Process: scannable numerals */
.steps .n{font:400 clamp(2.5rem,2rem + 2vw,3.5rem)/1 var(--font-display);letter-spacing:-.03em;color:#7FA79B;margin-bottom:var(--s4)}
.steps li{border-top:1px solid #3B6459}
@media(max-width:899px){.steps li{display:grid;grid-template-columns:4.5rem 1fr;column-gap:var(--s4);align-items:start}.steps .n{grid-row:span 2;margin:0}.steps h3{font-size:var(--fs-h4)}}

/* FAQ polish */
.faq summary{min-height:3.5rem;align-items:center}
.faq summary:focus-visible{outline-offset:-2px}
.faq details[open] summary{color:var(--spruce)}
.faq details[open] p{animation:fadein var(--t-base) var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Final CTA */
.cta{padding-block:clamp(5rem,4rem + 6vw,9rem)}
.cta__grid{display:grid;gap:var(--s6);align-items:end}
.cta h2{font-size:var(--fs-h1);line-height:1.02;max-width:14ch;margin:0}
.cta .lead{margin-bottom:var(--s5)}
.cta .btn--primary{margin-top:0}
@media(min-width:900px){.cta__grid{grid-template-columns:1.3fr 1fr;gap:var(--s9)}}
.foot a{display:inline-block;padding-block:.35rem}
#process{padding-bottom:clamp(3rem,2.5rem + 3vw,5rem)}
.rows--cols li{align-content:start}
@media(min-width:900px){.rows--cols li:last-child:nth-child(odd){grid-column:1/-1;border-bottom:1px solid var(--line)}}