:root{
  --ink:#161a1c;
  --ink-soft:#2f373b;
  --paper:#f4f4f0;
  --white:#ffffff;
  --concrete:#d9dcd8;
  --line:#d3d7d4;
  --muted:#687176;
  --steel:#365a68;
  --rust:#c85b32;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.container{width:min(calc(100% - 48px),var(--max));margin:auto}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.12em;color:var(--steel)}
.eyebrow:before{content:"";width:26px;height:2px;background:var(--rust)}
.display{font-size:6rem;font-size:clamp(3.55rem,7.4vw,7.65rem);line-height:.88;letter-spacing:-.065em;font-weight:760;margin:0}
.display em{font-style:normal;color:var(--steel)}
.h2{font-size:4rem;font-size:clamp(2.4rem,4.8vw,5rem);line-height:.97;letter-spacing:-.05em;margin:14px 0 0;font-weight:720}
.lead{font-size:1.06rem;line-height:1.75;color:var(--muted);max-width:620px}
.section{padding:104px 0}
.section-head{display:grid;grid-template-columns:1.15fr .75fr;gap:80px;align-items:end;margin-bottom:50px}
.section-head p{margin:0 0 4px;font-size:.96rem;line-height:1.75;color:var(--muted)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(244,244,240,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(211,215,212,.85)}
.header-inner{height:76px;display:grid;grid-template-columns:1fr auto auto;gap:34px;align-items:center}
.brand{display:flex;align-items:center;gap:12px;width:max-content}
.brand-mark{width:36px;height:36px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px}
.brand-mark i{display:block;background:var(--ink);grid-row:1/3}.brand-mark:before,.brand-mark:after{content:"";display:block;background:var(--steel)}.brand-mark:after{background:var(--rust)}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}.brand-copy strong{font-size:.94rem;letter-spacing:-.02em}.brand-copy span{font-size:.56rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.site-nav{display:flex;align-items:center;gap:28px}.site-nav a{font-size:.74rem;font-weight:650;color:#4f595e}.site-nav a:hover,.site-nav a.active{color:var(--ink)}
.header-cta{font-size:.73rem;font-weight:750;border-bottom:2px solid var(--rust);padding:8px 0}
.nav-toggle{display:none;background:none;border:0;width:34px;height:34px;padding:6px;cursor:pointer}.nav-toggle span{display:block;height:2px;background:var(--ink);margin:6px 0}

/* hero */
.hero{background:var(--white);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:.93fr 1.07fr;min-height:740px}
.hero-copy{padding:88px 40px 50px 40px;padding:88px max(34px,calc((100vw - var(--max))/2)) 50px max(24px,calc((100vw - var(--max))/2));display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.hero-copy:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(54,90,104,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(54,90,104,.055) 1px,transparent 1px);background-size:74px 74px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 82%);pointer-events:none}
.hero-copy>*{position:relative;z-index:1}
.hero-top .eyebrow{margin-bottom:34px}
.hero-sub{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;border-top:1px solid var(--line);padding-top:28px}
.hero-sub p{font-size:1rem;line-height:1.7;color:var(--muted);margin:0;max-width:520px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 18px;border:1px solid var(--ink);font-size:.72rem;font-weight:760;letter-spacing:.02em;transition:.2s;background:transparent}
.btn.primary{background:var(--ink);color:white}.btn.primary:hover{background:var(--steel);border-color:var(--steel)}.btn.ghost:hover{background:#eef0ec}
.hero-media{position:relative;overflow:hidden;min-height:740px;background:#d0d2cf}.hero-media img{height:100%;object-fit:cover;object-position:center 58%}
.hero-media:before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(to top,rgba(10,14,16,.44),transparent 45%)}
.hero-caption{position:absolute;z-index:3;left:34px;right:34px;bottom:30px;color:white;display:flex;justify-content:space-between;gap:20px;align-items:end}
.hero-caption strong{display:block;font-size:1rem}.hero-caption span{display:block;font-size:.69rem;color:#dce2e1;margin-top:5px}.hero-caption .code{font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;border:1px solid rgba(255,255,255,.5);padding:8px 10px}

/* identity strip */
.scope-strip{background:var(--ink);color:white}.scope-grid{display:grid;grid-template-columns:1.35fr repeat(4,.65fr)}
.scope-grid>div{min-height:118px;padding:22px 24px;border-right:1px solid #31383b;display:flex;flex-direction:column;justify-content:space-between}.scope-grid>div:last-child{border-right:0}.scope-grid .intro{background:var(--steel)}
.scope-grid small{font-size:.58rem;text-transform:uppercase;letter-spacing:.12em;color:#aeb8bc}.scope-grid .intro small{color:#d9e3e6}.scope-grid strong{font-size:1rem}.scope-grid .intro strong{font-size:1.35rem;line-height:1.15;max-width:330px}.scope-grid b{font-size:.6rem;color:var(--rust);letter-spacing:.12em}

/* project feature */
.project-feature{display:grid;grid-template-columns:1.28fr .72fr;background:white;border:1px solid var(--line)}
.project-feature-media{position:relative;min-height:590px;overflow:hidden}.project-feature-media img{height:100%;object-fit:cover;transition:transform .55s ease}.project-feature:hover .project-feature-media img{transform:scale(1.015)}
.project-index{position:absolute;left:0;top:0;background:var(--rust);color:white;padding:12px 14px;font-size:.62rem;font-weight:800;letter-spacing:.13em}
.project-feature-copy{padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.project-feature-copy h3{font-size:3.2rem;font-size:clamp(2.2rem,3.5vw,4rem);line-height:.96;letter-spacing:-.045em;margin:15px 0 20px}.project-feature-copy p{color:var(--muted);line-height:1.7;font-size:.94rem}
.specs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:34px}.specs div{padding:15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.specs span{display:block;font-size:.55rem;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin-bottom:6px}.specs strong{font-size:.77rem}
.text-link{display:inline-flex;gap:8px;align-items:center;font-size:.74rem;font-weight:780;margin-top:26px}.text-link:after{content:"→";color:var(--rust)}
.projects-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.project-card{background:white;border:1px solid var(--line)}.project-card figure{margin:0;height:360px;overflow:hidden;background:#ddd}.project-card img{height:100%;object-fit:cover;transition:.4s}.project-card:hover img{transform:scale(1.015)}.project-card-copy{padding:22px 22px 24px}.project-card-copy small{font-size:.57rem;text-transform:uppercase;letter-spacing:.12em;color:var(--steel)}.project-card-copy h3{font-size:1.45rem;letter-spacing:-.035em;margin:10px 0 6px}.project-card-copy p{margin:0;color:var(--muted);font-size:.78rem}

/* inside work explorer */
.inside{background:#e7e9e6;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.inside-grid{display:grid;grid-template-columns:.38fr .62fr;background:white;border:1px solid var(--line)}
.inside-nav{padding:38px 36px;display:flex;flex-direction:column}.inside-nav h3{font-size:2rem;letter-spacing:-.045em;line-height:1.02;margin:16px 0 12px}.inside-nav>p{font-size:.86rem;line-height:1.65;color:var(--muted);margin:0 0 34px}.work-tabs{display:grid;margin-top:auto}.work-tab{appearance:none;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;padding:18px 0;display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;cursor:pointer;color:var(--muted)}.work-tab:last-child{border-bottom:1px solid var(--line)}.work-tab .n{font-size:.62rem;font-weight:800;color:var(--steel)}.work-tab strong{font-size:.86rem;color:var(--ink)}.work-tab:after{content:"+";font-size:1.1rem}.work-tab.active{color:var(--ink)}.work-tab.active:after{content:"—";color:var(--rust)}
.work-stage{position:relative;min-height:620px;overflow:hidden;background:#ccd1ce}.work-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}.work-stage img.active{opacity:1}.work-overlay{position:absolute;left:24px;bottom:24px;right:24px;background:rgba(20,25,27,.9);color:white;padding:18px 20px;display:grid;grid-template-columns:1fr auto;gap:30px}.work-overlay strong{font-size:.92rem}.work-overlay p{margin:5px 0 0;color:#c7d0d2;font-size:.72rem}.work-overlay span{font-size:.58rem;text-transform:uppercase;letter-spacing:.12em;color:#f1b39b;align-self:center}

/* principles / services */
.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.principle{background:white;min-height:280px;padding:26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.principle .n{font-size:.58rem;letter-spacing:.12em;font-weight:800;color:var(--rust)}.principle h3{font-size:1.25rem;margin:86px 0 10px;letter-spacing:-.03em}.principle p{font-size:.8rem;line-height:1.62;color:var(--muted);margin:0}

/* site proof */
.proof-grid{display:grid;grid-template-columns:.9fr 1.1fr;background:var(--ink);color:white}.proof-copy{padding:62px;display:flex;flex-direction:column;justify-content:center}.proof-copy .eyebrow{color:#b8c5c9}.proof-copy h2{font-size:4.2rem;font-size:clamp(2.8rem,5vw,5.2rem);line-height:.94;letter-spacing:-.055em;margin:18px 0 22px}.proof-copy p{font-size:.93rem;line-height:1.72;color:#abb8bc;max-width:520px}.proof-points{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #384145;border-left:1px solid #384145;margin-top:32px}.proof-points span{padding:12px;border-right:1px solid #384145;border-bottom:1px solid #384145;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}.proof-media{min-height:620px}.proof-media img{height:100%;object-fit:cover}

/* process */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.step{padding:28px 0;border-top:3px solid var(--ink)}.step span{font-size:.59rem;text-transform:uppercase;letter-spacing:.11em;color:var(--steel)}.step h3{font-size:1.3rem;letter-spacing:-.03em;margin:34px 0 10px}.step p{font-size:.8rem;line-height:1.62;color:var(--muted);margin:0;max-width:260px}

/* cta/footer */
.cta{padding:86px 0;background:var(--steel);color:white}.cta-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end}.cta h2{font-size:5rem;font-size:clamp(3rem,6vw,6.2rem);line-height:.9;letter-spacing:-.06em;margin:0}.cta p{font-size:.95rem;line-height:1.7;color:#d6e1e4;margin:0 0 22px}.cta .btn{border-color:white;color:white}.cta .btn.primary{background:white;color:var(--ink)}
.site-footer{background:#101416;color:white;padding:52px 0 24px}.footer-grid{display:grid;grid-template-columns:1.3fr .5fr .5fr;gap:70px;padding-bottom:40px}.footer-brand p{max-width:390px;color:#8d9a9f;font-size:.82rem;line-height:1.65}.footer-col{display:grid;gap:9px;align-content:start}.footer-col>span{font-size:.56rem;text-transform:uppercase;letter-spacing:.11em;color:#6d7c82;margin-bottom:7px}.footer-col a,.footer-col p{font-size:.76rem;color:#d8dede;margin:0}.footer-bottom{border-top:1px solid #2b3336;padding-top:17px;display:flex;justify-content:space-between;gap:20px;color:#6f7d82;font-size:.56rem;text-transform:uppercase;letter-spacing:.09em}

/* inner page */
.page-hero{background:white;padding:82px 0 56px;border-bottom:1px solid var(--line)}.page-hero-grid{display:grid;grid-template-columns:1.1fr .7fr;gap:90px;align-items:end}.page-hero h1{font-size:6rem;font-size:clamp(3.9rem,8vw,8rem);line-height:.86;letter-spacing:-.065em;margin:18px 0 0}.page-hero p{font-size:1rem;line-height:1.75;color:var(--muted);margin:0}
.page-banner{height:58vh;min-height:480px;overflow:hidden;position:relative}.page-banner img{height:100%;object-fit:cover}.page-banner:after{content:"";position:absolute;inset:auto 0 0;height:18%;background:linear-gradient(transparent,rgba(10,12,13,.28))}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.portfolio-card{background:white;border:1px solid var(--line)}.portfolio-card figure{height:460px;margin:0;overflow:hidden}.portfolio-card figure img{height:100%;object-fit:cover;transition:.4s}.portfolio-card:hover img{transform:scale(1.015)}.portfolio-card-copy{padding:24px}.portfolio-card-copy small{font-size:.58rem;text-transform:uppercase;letter-spacing:.11em;color:var(--steel)}.portfolio-card-copy h2{font-size:1.7rem;margin:10px 0 8px;letter-spacing:-.035em}.portfolio-card-copy p{font-size:.8rem;color:var(--muted);margin:0}
.service-list{border-top:1px solid var(--line)}.service-row{display:grid;grid-template-columns:90px .7fr 1fr;gap:40px;padding:44px 0;border-bottom:1px solid var(--line)}.service-row .num{font-size:.62rem;font-weight:800;color:var(--rust);letter-spacing:.1em}.service-row h2{font-size:2.3rem;line-height:1;letter-spacing:-.045em;margin:0}.service-row p{font-size:.88rem;line-height:1.7;color:var(--muted);margin:0}.service-row ul{columns:2;padding:0;margin:22px 0 0;list-style:none}.service-row li{break-inside:avoid;border-top:1px solid var(--line);padding:9px 0;font-size:.74rem}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.about-card{background:white;border:1px solid var(--line);padding:34px}.about-card h3{font-size:1.7rem;letter-spacing:-.035em;margin:0 0 18px}.about-card p{font-size:.86rem;line-height:1.7;color:var(--muted)}.about-values{display:grid;grid-template-columns:1fr 1fr;border-left:1px solid var(--line);border-top:1px solid var(--line)}.about-value{background:white;padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:220px}.about-value span{font-size:.58rem;color:var(--rust);letter-spacing:.1em}.about-value h3{font-size:1.25rem;margin:70px 0 10px}.about-value p{font-size:.78rem;color:var(--muted);line-height:1.6;margin:0}
.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.gallery-item{grid-column:span 4;min-height:340px;overflow:hidden;position:relative;cursor:zoom-in;background:#d7dad7}.gallery-item.wide{grid-column:span 8}.gallery-item.tall{min-height:520px}.gallery-item img{height:100%;object-fit:cover;transition:.35s}.gallery-item:hover img{transform:scale(1.015)}.gallery-item span{position:absolute;left:14px;bottom:14px;background:rgba(20,25,27,.9);color:white;padding:8px 10px;font-size:.56rem;text-transform:uppercase;letter-spacing:.1em}
.lightbox{position:fixed;inset:0;background:rgba(10,12,13,.94);z-index:100;display:none;align-items:center;justify-content:center;padding:26px}.lightbox.open{display:flex}.lightbox img{max-width:94vw;max-height:90vh;width:auto;height:auto}.lightbox button{position:absolute;right:22px;top:16px;border:0;background:none;color:white;font-size:2rem;cursor:pointer}
.contact-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px}.contact-aside{background:var(--ink);color:white;padding:38px}.contact-aside h2{font-size:2.5rem;line-height:.98;letter-spacing:-.045em;margin:16px 0 22px}.contact-aside p,.contact-aside a{font-size:.84rem;line-height:1.65;color:#aab5b8}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-form label{display:grid;gap:7px;font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700}.contact-form label.full{grid-column:1/-1}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #bac1bf;background:white;padding:13px 12px;outline:none}.contact-form textarea{min-height:160px;resize:vertical}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--steel);box-shadow:0 0 0 2px rgba(54,90,104,.12)}.contact-form button{grid-column:1/-1;justify-self:start}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}.reveal.visible{opacity:1;transform:none}

@media(max-width:1050px){.site-nav,.header-cta{display:none}.header-inner{grid-template-columns:1fr auto}.nav-toggle{display:block}.site-nav.open{display:flex;position:absolute;top:76px;left:0;right:0;background:var(--paper);padding:20px 24px 26px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}.hero-grid{grid-template-columns:1fr}.hero-copy{min-height:620px;padding-left:28px;padding-right:28px}.hero-media{min-height:620px}.scope-grid{grid-template-columns:1fr 1fr 1fr}.scope-grid .intro{grid-column:1/-1}.project-feature,.inside-grid,.proof-grid,.contact-layout,.about-grid{grid-template-columns:1fr}.project-feature-media,.work-stage,.proof-media{min-height:540px}.principle-grid{grid-template-columns:1fr 1fr}.section-head,.page-hero-grid,.cta-grid{grid-template-columns:1fr;gap:28px}.service-row{grid-template-columns:70px 1fr}.service-row>div:last-child{grid-column:2}.portfolio-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:700px){.container{width:min(calc(100% - 32px),var(--max))}.section{padding:72px 0}.header-inner{height:68px}.brand-copy span{display:none}.site-nav.open{top:68px}.display{font-size:clamp(3.5rem,18vw,5.8rem)}.hero-copy{min-height:560px;padding:54px 16px 30px}.hero-sub{grid-template-columns:1fr;align-items:start}.hero-media{min-height:500px}.hero-caption{left:18px;right:18px;bottom:18px}.hero-caption .code{display:none}.scope-grid{grid-template-columns:1fr 1fr}.scope-grid .intro{grid-column:1/-1}.scope-grid>div{min-height:105px;padding:18px}.section-head{margin-bottom:34px}.project-feature-media{min-height:430px}.project-feature-copy{padding:28px 22px}.projects-row{grid-template-columns:1fr}.project-card figure{height:330px}.inside-nav{padding:28px 22px}.work-stage{min-height:460px}.work-overlay{left:14px;right:14px;bottom:14px;grid-template-columns:1fr}.work-overlay span{display:none}.principle-grid{grid-template-columns:1fr}.principle{min-height:220px}.principle h3{margin-top:52px}.proof-copy{padding:46px 22px}.proof-media{min-height:470px}.process{grid-template-columns:1fr 1fr;gap:24px 16px}.cta{padding:66px 0}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{flex-direction:column}.page-hero{padding:56px 0 38px}.page-banner{min-height:390px;height:48vh}.portfolio-card figure{height:360px}.service-row{grid-template-columns:1fr;gap:14px}.service-row>div:last-child{grid-column:auto}.service-row h2{font-size:2rem}.service-row ul{columns:1}.about-values{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr}.gallery-item,.gallery-item.wide{grid-column:auto;min-height:320px}.gallery-item.tall{min-height:420px}.contact-form{grid-template-columns:1fr}.contact-form label.full{grid-column:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*{transition:none!important}}

/* =========================================================
   V9 — CLEAN / COOL / APPEALING POLISH
   Keeps the v8 information architecture, adds a stronger
   authored visual rhythm and finishes previously raw inner pages.
   ========================================================= */
:root{
  --ink:#11181b;
  --ink-soft:#263238;
  --paper:#f3f4f1;
  --white:#fff;
  --concrete:#dfe2de;
  --line:#cfd4d1;
  --muted:#647075;
  --steel:#285364;
  --steel-deep:#10272f;
  --rust:#d05a31;
  --soft-blue:#e8eef0;
  --shadow:0 20px 70px rgba(21,31,35,.08);
}
body{background:var(--paper)}
body:before{content:"";position:fixed;left:0;top:0;z-index:1000;width:var(--scroll-progress,0%);height:2px;background:var(--rust);pointer-events:none}
::selection{background:var(--steel);color:#fff}

/* stronger but quieter type */
.display{font-weight:690;letter-spacing:-.058em;max-width:890px}
.h2{font-weight:670;letter-spacing:-.045em}
.eyebrow,.kicker{font-weight:800}

/* header feels more considered */
.site-header{background:rgba(243,244,241,.9);border-bottom-color:rgba(184,193,189,.72)}
.site-nav a{position:relative;padding:28px 0 27px}
.site-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:19px;height:2px;background:var(--rust);transition:right .25s ease}
.site-nav a:hover:after,.site-nav a.active:after{right:0}
.header-cta{border:1px solid var(--ink);padding:10px 14px;transition:.25s ease}
.header-cta:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.brand-mark{transition:transform .25s ease}.brand:hover .brand-mark{transform:translateY(-2px)}

/* hero: premium because of framing/proportion rather than effects */
.hero{background:var(--paper);padding:28px 0 0}
.hero-grid{width:min(calc(100% - 48px),calc(var(--max) + 90px));margin:auto;grid-template-columns:.88fr 1.12fr;min-height:700px;background:var(--white);border:1px solid var(--line)}
.hero-copy{min-width:0;padding:72px 52px 44px;position:relative}
.hero-copy:after{background-image:linear-gradient(rgba(40,83,100,.042) 1px,transparent 1px),linear-gradient(90deg,rgba(40,83,100,.042) 1px,transparent 1px);background-size:82px 82px}
.hero-copy:before{content:"NS / CIVIL";position:absolute;right:22px;top:24px;font-size:.55rem;font-weight:800;letter-spacing:.16em;color:#a5afb1;writing-mode:vertical-rl;z-index:1}
.hero-top .eyebrow{margin-bottom:28px}
.hero-sub{padding-top:24px}
.btn{position:relative;overflow:hidden;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--steel-deep);border-color:var(--steel-deep)}
.btn.primary:hover{background:var(--steel);border-color:var(--steel)}
.hero-media{min-height:700px;margin:14px 14px 14px 0;background:#c7cdca}
.hero-media img{transition:transform 1s cubic-bezier(.2,.65,.25,1)}
.hero:hover .hero-media img{transform:scale(1.018)}
.hero-media:after{content:"";position:absolute;z-index:2;inset:20px;border:1px solid rgba(255,255,255,.44);pointer-events:none}
.hero-caption{left:34px;right:34px;bottom:28px}
.hero-caption>div{background:rgba(12,24,29,.82);backdrop-filter:blur(7px);padding:12px 14px}
.hero-caption .code{background:rgba(255,255,255,.92);color:var(--ink);border:0;margin:0}

/* scope strip becomes a thin engineering/navigation rhythm */
.scope-strip{margin-top:28px;background:var(--steel-deep)}
.scope-grid>div{min-height:105px;border-color:rgba(255,255,255,.1);transition:background .25s ease}
.scope-grid>div:not(.intro):hover{background:#173640}
.scope-grid .intro{background:var(--steel)}
.scope-grid b{color:#ff9d79}

/* sections */
.section{position:relative}
.section-head{margin-bottom:44px}
.section-head>div{max-width:790px}
.section-head p{max-width:560px}

/* selected work: more editorial, less "card UI" */
.project-feature{border:0;box-shadow:var(--shadow);overflow:hidden}
.project-feature-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 70%,rgba(8,14,16,.18));pointer-events:none}
.project-index{z-index:2;top:18px;left:18px;background:rgba(17,24,27,.9);backdrop-filter:blur(6px)}
.project-feature-copy{padding:54px 48px;background:#fff}
.specs{background:#f7f8f6;border-color:#d9dedb}
.specs div{border-color:#d9dedb}
.projects-row{gap:24px;margin-top:24px}
.project-card{border:0;background:transparent;display:block}
.project-card figure{height:385px;border:1px solid var(--line);position:relative}
.project-card figure:after{content:"VIEW PROJECT  ↗";position:absolute;right:14px;bottom:14px;background:rgba(17,24,27,.9);color:#fff;padding:9px 11px;font-size:.55rem;font-weight:800;letter-spacing:.12em;transform:translateY(6px);opacity:0;transition:.3s ease}
.project-card:hover figure:after{opacity:1;transform:none}
.project-card-copy{padding:20px 2px 0}
.project-card-copy h3{font-size:1.6rem}

/* a deliberate contrast moment — simple interaction, visually memorable */
.inside{background:var(--steel-deep);border:0;color:#fff;padding-top:112px;padding-bottom:112px}
.inside .section-head .eyebrow{color:#9fc0cb}.inside .section-head .eyebrow:before{background:#ff8b60}
.inside .section-head p{color:#a9bdc3}
.inside-grid{border:0;box-shadow:0 30px 90px rgba(0,0,0,.22);color:var(--ink)}
.inside-nav{padding:46px 42px;background:#f7f8f6}
.work-tab{transition:padding .2s ease,color .2s ease}.work-tab:hover{padding-left:7px}
.work-tab.active strong{color:var(--steel)}
.work-stage{min-height:650px}
.work-stage:before{content:"";position:absolute;inset:18px;z-index:2;border:1px solid rgba(255,255,255,.38);pointer-events:none}
.work-overlay{z-index:3;background:rgba(10,24,29,.91);backdrop-filter:blur(7px);padding:20px 22px}

/* principles look like an engineering system, not feature cards */
.principle-grid{border:0;gap:1px;background:var(--line)}
.principle{border:0;background:#fff;transition:transform .25s ease,background .25s ease;position:relative;overflow:hidden}
.principle:after{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--rust);transition:width .3s ease}
.principle:hover{background:#fafbf9;transform:translateY(-4px)}
.principle:hover:after{width:100%}

/* proof gets a refined image treatment */
.proof-grid{box-shadow:var(--shadow);background:#10191d}
.proof-media{position:relative;overflow:hidden}.proof-media:after{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.3)}
.proof-media img{transition:transform .7s ease}.proof-grid:hover .proof-media img{transform:scale(1.015)}

/* process line draws the eye through the sequence */
.process{position:relative;gap:24px}
.process:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.step{border-top:0;padding-top:30px;position:relative}
.step:before{content:"";position:absolute;top:-3px;left:0;width:7px;height:7px;background:var(--rust);border-radius:50%}
.step h3{margin-top:30px}

/* CTA cleaner and more magnetic */
.cta{background:var(--steel);position:relative;overflow:hidden}
.cta:after{content:"";position:absolute;right:-120px;top:-160px;width:440px;height:440px;border:1px solid rgba(255,255,255,.14);transform:rotate(45deg);pointer-events:none}
.cta-grid{position:relative;z-index:1}.cta .btn.primary:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Inner pages: the v8 HTML already had these classes but
   not enough visual treatment. This gives the whole site one finish. ---------- */
.kicker{display:flex;align-items:center;gap:10px;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--steel)}
.kicker:before{content:"";width:28px;height:2px;background:var(--rust)}
.page-hero{background:var(--paper);padding:92px 0 64px;border-bottom:0}
.page-hero h1{font-weight:680;letter-spacing:-.055em;max-width:920px}
.page-hero-grid{gap:80px}
.page-visual{position:relative;margin:0 auto;width:min(calc(100% - 48px),calc(var(--max) + 90px));height:64vh;min-height:520px;max-height:760px;overflow:hidden;background:#cfd4d1;border:1px solid var(--line)}
.page-visual:after{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.45);pointer-events:none}
.page-visual img{height:100%;object-fit:cover;transition:transform .9s ease}.page-visual:hover img{transform:scale(1.012)}
.page-visual-tag{position:absolute;z-index:2;left:28px;bottom:28px;background:rgba(13,25,30,.9);color:#fff;padding:11px 13px;font-size:.58rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}

/* projects index */
.portfolio-list{border-top:1px solid var(--line)}
.portfolio-item{display:grid;grid-template-columns:54px 1fr 190px 32px;gap:28px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:padding .25s ease,background .25s ease}
.portfolio-item:hover{padding-left:14px;padding-right:14px;background:#fff}
.portfolio-item .idx{font-size:.58rem;font-weight:850;letter-spacing:.12em;color:var(--rust)}
.portfolio-item h2{font-size:clamp(1.35rem,2.1vw,2.15rem);letter-spacing:-.04em;margin:0 0 7px;font-weight:650}
.portfolio-item p{margin:0;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em}
.portfolio-item .thumb{height:96px;overflow:hidden;background:#d7dbd8}.portfolio-item .thumb img{height:100%;object-fit:cover;transition:.35s}.portfolio-item:hover .thumb img{transform:scale(1.04)}
.portfolio-item .arr{font-size:1.2rem;color:var(--steel);transition:.25s}.portfolio-item:hover .arr{transform:translate(3px,-3px);color:var(--rust)}

/* services */
.service-chapter{display:grid;grid-template-columns:105px .72fr 1fr;gap:42px;padding:56px 0;border-top:1px solid var(--line);position:relative}
.service-chapter:last-child{border-bottom:1px solid var(--line)}
.service-chapter .chapter-no{font-size:.6rem;font-weight:850;letter-spacing:.12em;color:var(--rust);padding-top:8px}
.service-chapter h2{font-size:clamp(2rem,3.6vw,3.9rem);line-height:.96;letter-spacing:-.045em;margin:0;font-weight:650}
.service-chapter p{margin:0;color:var(--muted);line-height:1.72;font-size:.9rem;max-width:690px}
.service-chapter ul{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.service-chapter li{border-top:1px solid var(--line);padding:11px 0;font-size:.72rem;position:relative;padding-left:16px}.service-chapter li:before{content:"";position:absolute;left:0;top:16px;width:5px;height:5px;background:var(--steel)}

/* about */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.principles .principle{min-height:330px;padding:34px}
.principles .principle h3{font-size:1.55rem;line-height:1.08;margin:100px 0 14px}
.principles .principle p{font-size:.83rem}
.field-proof{padding:0 0 104px}.field-layout{width:min(calc(100% - 48px),var(--max));margin:auto;display:grid;grid-template-columns:1.15fr .85fr;background:var(--steel-deep);color:#fff}
.field-image{margin:0;min-height:600px;overflow:hidden}.field-image img{height:100%;object-fit:cover;transition:.7s}.field-layout:hover .field-image img{transform:scale(1.012)}
.field-copy{padding:62px 56px;align-self:center}.field-copy .kicker{color:#9fc0cb}.field-copy h2{font-size:clamp(2.8rem,4.5vw,5rem);letter-spacing:-.05em;line-height:.94;margin:18px 0 24px}.field-copy p{color:#b4c5ca;line-height:1.75;font-size:.9rem}
.field-points{display:grid;grid-template-columns:1fr 1fr;margin-top:34px;border-top:1px solid rgba(255,255,255,.14);border-left:1px solid rgba(255,255,255,.14)}.field-points span{padding:12px;border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em}

/* gallery ledger */
.gallery-ledger{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.gallery-ledger .gallery-item{margin:0;grid-column:span 4;min-height:360px;border:1px solid var(--line)}
.gallery-ledger .gallery-item.wide{grid-column:span 8}.gallery-ledger .gallery-item.tall{min-height:540px}
.gallery-ledger .gallery-item span{left:16px;bottom:16px;background:rgba(13,25,30,.88);backdrop-filter:blur(5px)}
.gallery-ledger .gallery-item:after{content:"+";position:absolute;right:16px;top:16px;width:30px;height:30px;display:grid;place-items:center;background:rgba(255,255,255,.9);color:var(--ink);font-size:1rem;opacity:0;transform:scale(.9);transition:.25s}
.gallery-ledger .gallery-item:hover:after{opacity:1;transform:scale(1)}

/* contact */
.contact-layout{gap:42px;align-items:start}
.contact-aside{background:var(--steel-deep);padding:48px;position:sticky;top:110px;box-shadow:var(--shadow)}
.contact-aside .kicker{color:#9fc0cb}.contact-aside h2{font-size:3rem}
.contact-form{background:#fff;border:1px solid var(--line);padding:40px;gap:20px;box-shadow:0 18px 60px rgba(21,31,35,.05)}
.contact-form input,.contact-form select,.contact-form textarea{background:#fafbf9;border-color:#cbd1ce;transition:.2s}.contact-form input:hover,.contact-form select:hover,.contact-form textarea:hover{border-color:#9ba9a4}

/* reveal is slightly more refined */
.reveal{transform:translateY(22px);transition:opacity .65s cubic-bezier(.2,.65,.25,1),transform .65s cubic-bezier(.2,.65,.25,1)}

@media(max-width:1050px){
  .hero{padding-top:18px}.hero-grid{width:min(calc(100% - 36px),var(--max));grid-template-columns:1fr}.hero-copy{padding:64px 34px 38px;min-height:590px}.hero-media{margin:0 14px 14px;min-height:620px}
  .site-nav a{padding:0}.site-nav a:after{bottom:-7px}
  .service-chapter{grid-template-columns:75px 1fr}.service-chapter>div:last-child{grid-column:2}
  .principles{grid-template-columns:1fr 1fr}.field-layout{grid-template-columns:1fr}.field-image{min-height:520px}
  .portfolio-item{grid-template-columns:48px 1fr 150px 28px}
  .page-visual{width:min(calc(100% - 36px),var(--max))}
}
@media(max-width:700px){
  .hero{padding-top:10px}.hero-grid{width:calc(100% - 20px);border-left:0;border-right:0}.hero-copy{min-height:540px;padding:50px 20px 28px}.hero-copy:before{display:none}.hero-media{margin:0 10px 10px;min-height:480px}.hero-media:after{inset:12px}.hero-caption>div{padding:10px 11px}
  .scope-strip{margin-top:10px}
  .project-feature{box-shadow:none;border:1px solid var(--line)}.project-feature-copy{padding:30px 22px}.project-card figure:after{opacity:1;transform:none}
  .inside{padding-top:76px;padding-bottom:76px}.inside-nav{padding:30px 22px}.work-stage{min-height:470px}.work-stage:before{inset:12px}
  .proof-grid{box-shadow:none}.principle:hover{transform:none}
  .page-hero{padding:62px 0 42px}.page-visual{width:calc(100% - 20px);height:48vh;min-height:390px}.page-visual:after{inset:12px}.page-visual-tag{left:18px;bottom:18px}
  .portfolio-item{grid-template-columns:34px 1fr 24px;gap:14px;padding:18px 0}.portfolio-item .thumb{display:none}.portfolio-item:hover{padding-left:0;padding-right:0;background:transparent}
  .service-chapter{grid-template-columns:1fr;gap:18px;padding:40px 0}.service-chapter>div:last-child{grid-column:auto}.service-chapter ul{grid-template-columns:1fr}.service-chapter h2{font-size:2.35rem}
  .principles{grid-template-columns:1fr}.principles .principle{min-height:250px}.principles .principle h3{margin-top:56px}.field-proof{padding-bottom:72px}.field-layout{width:calc(100% - 32px)}.field-image{min-height:420px}.field-copy{padding:42px 24px}.field-points{grid-template-columns:1fr}
  .gallery-ledger{grid-template-columns:1fr;gap:12px}.gallery-ledger .gallery-item,.gallery-ledger .gallery-item.wide{grid-column:auto;min-height:330px}.gallery-ledger .gallery-item.tall{min-height:430px}.gallery-ledger .gallery-item:after{opacity:1;transform:none}
  .contact-aside{position:relative;top:auto;padding:34px 24px}.contact-form{padding:26px 20px;box-shadow:none}
}

/* =========================================================
   V10 — REFINED / QUIET PREMIUM
   Keeps v9 structure. Improves brand signature, rhythm,
   project exploration and mobile finish without extra clutter.
   ========================================================= */
:root{
  --paper:#f5f6f3;
  --ink:#101719;
  --ink-soft:#273337;
  --steel:#264f5d;
  --steel-deep:#0d252d;
  --rust:#c95531;
  --line:#d6dad6;
  --muted:#687377;
  --mist:#edf1ef;
  --shadow-soft:0 28px 90px rgba(16,30,35,.075);
  --ease:cubic-bezier(.22,.72,.23,1);
}
body{letter-spacing:-.005em}
main{overflow:hidden}
:focus-visible{outline:2px solid var(--rust);outline-offset:4px}

/* structural monogram: a tiny portal frame, not a generic app icon */
.brand-mark{position:relative;display:block;width:35px;height:35px;flex:0 0 35px;transition:transform .28s var(--ease)}
.brand-mark:before,.brand-mark:after{content:"";position:absolute;top:3px;bottom:3px;width:4px;background:var(--ink)}
.brand-mark:before{left:3px}.brand-mark:after{right:3px}
.brand-mark i{position:absolute;left:3px;right:3px;top:3px;height:4px;background:var(--steel);grid-row:auto}
.brand-mark i:before{content:"";position:absolute;width:4px;height:28px;background:var(--rust);left:14px;top:1px;transform:rotate(38deg);transform-origin:top}
.site-footer .brand-mark:before,.site-footer .brand-mark:after{background:#fff}.site-footer .brand-mark i{background:#84a9b6}
.brand:hover .brand-mark{transform:translateY(-2px)}
.brand-copy strong{font-size:.98rem;font-weight:760}.brand-copy span{letter-spacing:.12em}

/* header: slightly quieter at rest, tighter once the visitor starts reading */
.site-header{transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.header-inner{transition:height .25s var(--ease)}
.site-header.scrolled{background:rgba(245,246,243,.965);box-shadow:0 8px 28px rgba(18,31,35,.045)}
.site-header.scrolled .header-inner{height:66px}
.site-header.scrolled .brand-mark{transform:scale(.93)}
.site-nav{gap:30px}.site-nav a{font-size:.71rem;letter-spacing:.01em}
.header-cta{border-color:#b7bfbc;background:rgba(255,255,255,.55);padding:11px 15px}
.header-cta:hover{transform:translateY(-1px)}

/* hero: larger image presence, less 'card', more calm confidence */
.hero{padding-top:34px}
.hero-grid{width:min(calc(100% - 48px),1340px);grid-template-columns:.86fr 1.14fr;min-height:716px;border-color:#d9ddda;box-shadow:0 1px 0 rgba(16,23,25,.03)}
.hero-copy{padding:78px 54px 42px;background:#fff}
.hero-copy:after{opacity:.68;background-size:88px 88px;mask-image:linear-gradient(to bottom,#000 0%,transparent 80%)}
.hero-copy:before{right:17px;top:19px;color:#b6bebb;letter-spacing:.2em}
.display{font-size:clamp(3.65rem,6.45vw,6.8rem);line-height:.91;letter-spacing:-.062em;font-weight:665}
.display em{color:var(--steel);position:relative}
.display em:after{content:"";position:absolute;left:2px;right:2px;bottom:-7px;height:3px;background:var(--rust);transform-origin:left;transform:scaleX(.42)}
.hero-sub{grid-template-columns:1fr;gap:22px;padding-top:26px}
.hero-sub p{max-width:580px;font-size:.98rem;line-height:1.76}
.hero-actions{gap:12px}
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:12px 17px;font-size:.7rem;font-weight:780;letter-spacing:.025em}
.hero-media{min-height:716px;margin:12px 12px 12px 0}
.hero-media img{filter:saturate(.92) contrast(1.025)}
.hero-media:before{background:linear-gradient(to top,rgba(6,17,21,.48),rgba(6,17,21,.02) 42%,transparent 66%)}
.hero-media:after{inset:16px;border-color:rgba(255,255,255,.34)}
.hero-project-no{position:absolute;z-index:3;right:28px;top:26px;color:rgba(255,255,255,.95);font-size:3.7rem;line-height:1;font-weight:620;letter-spacing:-.07em;text-shadow:0 2px 22px rgba(0,0,0,.2)}
.hero-caption{left:30px;right:30px;bottom:25px}
.hero-caption>div{background:rgba(10,26,31,.86);padding:13px 15px}
.hero-caption strong{font-weight:700}.hero-caption .code{font-weight:760}

/* scope rail: less blocky, more like a concise practice index */
.scope-strip{margin-top:22px}
.scope-grid{grid-template-columns:1.35fr repeat(4,.65fr)}
.scope-grid>div{min-height:96px;padding:18px 22px}
.scope-grid strong{font-size:.93rem}.scope-grid .intro strong{font-size:1.25rem;max-width:380px}
.scope-grid b{font-size:.55rem;color:#f8a281}

/* general vertical rhythm */
.section{padding:118px 0}
.section-head{gap:90px;margin-bottom:52px}
.section-head p{font-size:.93rem;line-height:1.8}
.h2{font-size:clamp(2.5rem,4.5vw,4.8rem);line-height:.985;letter-spacing:-.048em;font-weight:650}
.eyebrow,.kicker{font-size:.66rem;letter-spacing:.14em}

/* feature project feels like a case study panel rather than a generic card */
.project-feature{position:relative;box-shadow:var(--shadow-soft);background:#fff}
.project-feature:before{content:"";position:absolute;z-index:-1;left:18px;right:-18px;top:18px;bottom:-18px;border:1px solid #ced8d5}
.project-feature-media{min-height:620px}.project-feature-media img{filter:saturate(.93)}
.project-feature-copy{padding:58px 50px}
.project-feature-copy h3{font-weight:650}
.specs{margin-top:34px}.specs strong{font-weight:680}
.project-feature.is-changing .project-feature-media img{opacity:.35;transform:scale(1.012)}
.project-feature-media img{transition:opacity .22s ease,transform .55s var(--ease)}

/* One simple exploration control: three projects, no carousel chrome. */
.project-switcher{display:grid;grid-template-columns:repeat(3,1fr);margin:42px 0 54px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.project-choice{appearance:none;border:0;border-right:1px solid var(--line);background:transparent;padding:22px 22px 21px;display:grid;grid-template-columns:34px 1fr;gap:4px 12px;text-align:left;cursor:pointer;position:relative;color:var(--muted);transition:background .22s ease,color .22s ease}
.project-choice:last-child{border-right:0}
.project-choice:after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:3px;background:var(--rust);transition:right .35s var(--ease)}
.project-choice:hover{background:#fff;color:var(--ink)}
.project-choice.active{background:#fff;color:var(--ink)}
.project-choice.active:after{right:0}
.project-choice span{grid-row:1/3;font-size:.58rem;font-weight:850;letter-spacing:.12em;color:var(--rust);padding-top:3px}
.project-choice strong{font-size:.89rem;font-weight:720}.project-choice small{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:#889296}
.projects-row{margin-top:0}
.project-card figure{height:400px}.project-card-copy h3{font-weight:650}
.project-card:hover img{transform:scale(1.018)}

/* Inside the work: preserve the contrast, improve the tactile details */
.inside{padding:122px 0;background:#0c252d}
.inside-grid{box-shadow:0 34px 110px rgba(0,0,0,.23)}
.inside-nav{padding:50px 44px}.inside-nav h3{font-size:2.2rem;font-weight:650}
.work-tab{padding:20px 0}.work-tab strong{font-size:.9rem}.work-tab.active{padding-left:8px}.work-tab.active .n{color:var(--rust)}
.work-stage{min-height:680px}.work-stage img{transition:opacity .4s ease,transform 1.1s var(--ease)}.work-stage img.active{transform:scale(1.006)}
.work-overlay{left:24px;right:24px;bottom:24px;padding:22px 24px}

/* calm hover system */
.principle{min-height:292px;padding:29px}.principle h3{font-size:1.3rem;margin-top:90px;font-weight:650}
.principle:hover{transform:translateY(-3px)}
.proof-grid{box-shadow:var(--shadow-soft)}.proof-copy{padding:68px}.proof-copy h2{font-weight:640}
.process{gap:30px}.step h3{font-weight:650}.step:before{width:6px;height:6px}

/* CTA: remove decorative AI-ish geometry; use one strong clean field */
.cta{background:#285563;padding:92px 0}.cta:after{display:none}
.cta h2{font-weight:640;max-width:850px}.cta p{max-width:520px}

/* inner pages */
.page-hero{padding:102px 0 68px}
.page-hero h1{font-size:clamp(3.7rem,7.2vw,7.4rem);font-weight:650;line-height:.9}
.page-hero p{max-width:610px}
.page-visual{box-shadow:var(--shadow-soft);border:0}
.page-visual:after{inset:16px;border-color:rgba(255,255,255,.36)}
.page-visual img{filter:saturate(.93) contrast(1.02)}
.page-visual-tag{left:24px;bottom:24px;background:rgba(9,25,30,.88)}

/* project index: more satisfying to browse */
.portfolio-item{min-height:132px;padding:24px 0;grid-template-columns:58px 1fr 210px 34px}
.portfolio-item h2{font-weight:640}.portfolio-item .thumb{height:104px}
.portfolio-item:hover{padding-left:16px;padding-right:16px}

/* services */
.service-chapter{padding:66px 0;grid-template-columns:110px .72fr 1fr}.service-chapter h2{font-weight:640}
.service-chapter li{padding-top:12px;padding-bottom:12px}

/* gallery filters — useful exploration, visually quiet */
.gallery-toolbar{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:34px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.gallery-toolbar p{margin:8px 0 0;color:var(--muted);font-size:.82rem}
.gallery-filters{display:flex;gap:8px;flex-wrap:wrap}
.gallery-filters button{appearance:none;border:1px solid #cbd1ce;background:transparent;color:#596468;padding:9px 12px;font-size:.62rem;font-weight:760;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.2s}
.gallery-filters button:hover,.gallery-filters button.active{background:var(--steel-deep);border-color:var(--steel-deep);color:#fff}
.gallery-item{transition:opacity .25s ease,transform .25s ease}
.gallery-item.is-hidden{display:none}
.gallery-ledger .gallery-item{border:0;background:#d9ddda}.gallery-ledger .gallery-item span{font-weight:720}

/* about credibility */
.record-link{display:inline-flex;gap:12px;align-items:center;margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);color:#fff;font-size:.69rem;font-weight:760;letter-spacing:.04em}
.record-link span{color:#ff9b76;transition:transform .2s ease}.record-link:hover span{transform:translate(3px,-3px)}

/* contact feels like a private project room, without looking like a SaaS form */
.contact-aside{box-shadow:none;border-top:4px solid var(--rust)}
.contact-form{box-shadow:none;border:1px solid #d9ddda;padding:44px;background:rgba(255,255,255,.86)}
.contact-form label{font-size:.6rem}.contact-form input,.contact-form select,.contact-form textarea{border:0;border-bottom:1px solid #bfc7c4;background:transparent;padding:14px 2px 11px;border-radius:0}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{box-shadow:none;border-bottom-color:var(--rust)}

/* footer closes with a memorable but restrained wordmark */
.site-footer{padding-top:58px;overflow:hidden}
.footer-grid{padding-bottom:46px}
.footer-wordmark{font-size:clamp(3rem,8.5vw,8.8rem);line-height:.82;letter-spacing:-.072em;font-weight:720;color:#1b2529;white-space:nowrap;margin:18px 0 32px;user-select:none}
.footer-bottom{position:relative;z-index:1}
.footer-col a{transition:color .2s ease}.footer-col a:hover{color:#fff}

/* stagger just enough to make long pages feel composed */
.principle-grid .reveal:nth-child(2),.process .reveal:nth-child(2),.projects-row .reveal:nth-child(2){transition-delay:.06s}
.principle-grid .reveal:nth-child(3),.process .reveal:nth-child(3){transition-delay:.12s}
.principle-grid .reveal:nth-child(4),.process .reveal:nth-child(4){transition-delay:.18s}

@media(max-width:1050px){
  .site-header.scrolled .header-inner{height:68px}
  .hero-grid{width:min(calc(100% - 36px),var(--max));grid-template-columns:1fr}.hero-copy{min-height:auto;padding:70px 38px 42px}.hero-media{margin:0 12px 12px;min-height:640px}.hero-project-no{right:24px;top:22px}
  .hero-sub{max-width:700px}.project-switcher{grid-template-columns:1fr 1fr 1fr}
  .project-feature:before{left:10px;right:-10px;top:10px;bottom:-10px}
  .service-chapter{grid-template-columns:78px 1fr}.service-chapter>div:last-child{grid-column:2}
  .portfolio-item{grid-template-columns:50px 1fr 160px 30px}
  .gallery-toolbar{align-items:flex-start;flex-direction:column}
}
@media(max-width:700px){
  .site-header.scrolled .header-inner{height:62px}.site-nav.open{top:62px}
  .hero{padding-top:10px}.hero-grid{width:calc(100% - 20px)}.hero-copy{padding:52px 20px 30px}.display{font-size:clamp(3.2rem,16vw,5.15rem);line-height:.92}.display em:after{bottom:-4px;height:2px}.hero-copy:before{display:none}.hero-media{margin:0 8px 8px;min-height:500px}.hero-project-no{font-size:2.8rem;right:18px;top:17px}.hero-caption{left:18px;right:18px;bottom:16px}.scope-strip{margin-top:10px}.scope-grid>div{min-height:96px}
  .section{padding:78px 0}.section-head{gap:24px;margin-bottom:38px}.h2{font-size:clamp(2.25rem,11vw,3.4rem)}
  .project-feature{box-shadow:none}.project-feature:before{display:none}.project-feature-media{min-height:440px}.project-feature-copy{padding:30px 22px}
  .project-switcher{grid-template-columns:1fr;margin:26px 0 38px}.project-choice{border-right:0;border-bottom:1px solid var(--line);padding:15px 12px}.project-choice:last-child{border-bottom:0}.project-choice:after{bottom:auto;top:0;width:3px;height:auto;right:auto;bottom:100%;transition:bottom .3s var(--ease)}.project-choice.active:after{bottom:0}
  .project-card figure{height:340px}
  .inside{padding:82px 0}.inside-nav{padding:32px 22px}.work-stage{min-height:480px}.work-overlay{left:14px;right:14px;bottom:14px;padding:18px}.proof-copy{padding:46px 22px}.proof-media{min-height:470px}
  .process{grid-template-columns:1fr 1fr;gap:28px 16px}.cta{padding:70px 0}
  .page-hero{padding:64px 0 42px}.page-hero h1{font-size:clamp(3.2rem,15vw,5.3rem)}.page-visual{width:calc(100% - 20px);min-height:400px;height:50vh}
  .portfolio-item{grid-template-columns:34px 1fr 24px;min-height:100px}.portfolio-item .thumb{display:none}.portfolio-item:hover{padding-left:0;padding-right:0;background:transparent}
  .service-chapter{padding:42px 0}.gallery-toolbar{margin-bottom:24px}.gallery-filters{gap:6px}.gallery-filters button{padding:8px 10px}
  .contact-form{padding:28px 20px}.footer-wordmark{margin:10px 0 26px;font-size:14vw}
}

/* ===== V11 refinements: text-first project cards + portfolio gallery ===== */
.page-visual-split{display:grid;grid-template-columns:.78fr 1.22fr;align-items:stretch;background:#fff;min-height:560px;height:auto;max-height:none}
.page-visual-split .page-visual-copy{padding:34px 32px 28px;border-right:1px solid rgba(211,215,212,.9);display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,#ffffff 0%, #f7f7f3 100%)}
.page-visual-split .page-visual-copy h2{margin:14px 0 14px;font-size:clamp(2rem,3.3vw,3.6rem);line-height:.95;letter-spacing:-.045em;font-weight:650}
.page-visual-split .page-visual-copy p{margin:0;color:var(--muted);line-height:1.72;font-size:.92rem;max-width:34ch}
.page-visual-split img{height:100%}
.page-projects .page-visual-tag{left:auto;right:24px}

.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.portfolio-card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;min-height:100%;box-shadow:0 18px 50px rgba(18,28,31,.04)}
.portfolio-card-copy{padding:26px 26px 18px;display:grid;gap:10px}
.portfolio-no{font-size:.64rem;font-weight:850;letter-spacing:.14em;color:var(--rust);text-transform:uppercase}
.portfolio-type{font-size:.62rem;font-weight:760;letter-spacing:.12em;color:var(--steel);text-transform:uppercase}
.portfolio-card h2{margin:0;font-size:clamp(1.6rem,2.5vw,2.3rem);line-height:1.02;letter-spacing:-.04em;font-weight:650}
.portfolio-card p{margin:0;color:var(--muted);line-height:1.72;font-size:.9rem;max-width:48ch}
.portfolio-card-media{appearance:none;border:0;border-top:1px solid var(--line);padding:0;background:#d8dcda;position:relative;cursor:pointer;text-align:left}
.portfolio-card-media img{display:block;width:100%;height:320px;object-fit:cover;filter:saturate(.9) contrast(1.02);transition:transform .55s ease,filter .25s ease}
.portfolio-card-media span{position:absolute;left:16px;top:16px;background:rgba(12,20,24,.88);color:#fff;padding:10px 12px;font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.portfolio-card:hover .portfolio-card-media img{transform:scale(1.02);filter:saturate(.94) contrast(1.04)}
.portfolio-card-media:focus-visible{outline:3px solid rgba(54,90,104,.25);outline-offset:-3px}

.project-lightbox[hidden]{display:none}
.project-lightbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center}
.project-lightbox-backdrop{position:absolute;inset:0;background:rgba(10,15,18,.72);backdrop-filter:blur(4px)}
.project-lightbox-dialog{position:relative;z-index:1;width:min(calc(100% - 36px),1080px);background:#fff;border:1px solid #d5dad7;box-shadow:0 30px 120px rgba(0,0,0,.32)}
.project-lightbox-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:var(--ink);font-size:2rem;line-height:1;cursor:pointer;padding:8px 10px;z-index:3}
.project-lightbox-head{display:flex;justify-content:space-between;gap:20px;align-items:end;padding:24px 28px 18px;border-bottom:1px solid var(--line)}
.project-lightbox-kicker{display:block;font-size:.64rem;font-weight:780;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:8px}
.project-lightbox-head h3{margin:0;font-size:clamp(1.45rem,2.8vw,2.6rem);line-height:1.02;letter-spacing:-.04em;font-weight:650}
.project-lightbox-count{font-size:.72rem;font-weight:760;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.project-lightbox-stage{position:relative;background:#d9ddda;min-height:68vh;max-height:78vh;display:grid;grid-template-columns:64px 1fr 64px;align-items:center}
.project-lightbox-stage img{width:100%;height:100%;max-height:78vh;object-fit:contain;background:#e4e7e4}
.project-lightbox-nav{appearance:none;border:0;background:rgba(255,255,255,.9);color:var(--ink);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:2rem;cursor:pointer;justify-self:center;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.project-lightbox-footer{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 28px 24px;border-top:1px solid var(--line)}
.project-lightbox-footer p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.6}
.project-lightbox-actions{display:flex;gap:10px;flex-wrap:wrap}
body.has-project-lightbox{overflow:hidden}

@media(max-width:1050px){
  .page-visual-split{grid-template-columns:1fr}
  .page-visual-split .page-visual-copy{border-right:0;border-bottom:1px solid rgba(211,215,212,.9)}
  .portfolio-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .page-visual-split{width:calc(100% - 20px);min-height:auto}
  .page-visual-split .page-visual-copy{padding:22px 18px}
  .page-visual-split .page-visual-copy h2{font-size:clamp(1.7rem,8vw,2.5rem)}
  .portfolio-grid{gap:18px}
  .portfolio-card-copy{padding:20px 18px 14px}
  .portfolio-card-media img{height:250px}
  .project-lightbox-dialog{width:calc(100% - 16px)}
  .project-lightbox-head{padding:18px 18px 14px;display:block}
  .project-lightbox-count{display:block;margin-top:8px}
  .project-lightbox-stage{grid-template-columns:42px 1fr 42px;min-height:52vh;max-height:60vh}
  .project-lightbox-nav{width:36px;height:36px;font-size:1.5rem}
  .project-lightbox-footer{padding:14px 18px 18px;display:block}
  .project-lightbox-footer p{margin-bottom:12px}
}

/* ===== V12 tweaks: overlay text on project images + image-only gallery ===== */
.portfolio-card-media{overflow:hidden}
.portfolio-card-media:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,14,17,.78) 0%, rgba(7,14,17,.28) 38%, rgba(7,14,17,0) 64%);pointer-events:none}
.portfolio-media-overlay{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;color:#fff;display:grid;gap:6px;text-align:left}
.portfolio-media-overlay strong{font-size:1rem;line-height:1.08;letter-spacing:-.02em;font-weight:720}
.portfolio-media-overlay span{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:#d8e2e0}
.portfolio-open{position:absolute;top:14px;right:14px;z-index:2;background:rgba(255,255,255,.92);color:var(--ink);padding:8px 10px;font-size:.58rem;font-weight:820;letter-spacing:.11em;text-transform:uppercase}

.page-gallery .gallery-item span{display:none !important}
.page-gallery .gallery-ledger .gallery-item:after{display:none}
.page-gallery .gallery-item img{height:100%;object-fit:cover}

@media(max-width:700px){
  .portfolio-media-overlay{left:14px;right:14px;bottom:14px}
  .portfolio-media-overlay strong{font-size:.93rem}
  .portfolio-open{top:10px;right:10px;padding:7px 9px}
}

/* ===== V13: image-led storytelling inspired by the supplied reference ===== */
/* Home header sits over the opening image and becomes solid after scroll. */
.page-home .site-header{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom-color:transparent;backdrop-filter:none;transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease}
.page-home .site-header:not(.scrolled) .brand-copy strong,
.page-home .site-header:not(.scrolled) .site-nav a,
.page-home .site-header:not(.scrolled) .header-cta{color:#fff}
.page-home .site-header:not(.scrolled) .brand-copy span{color:rgba(255,255,255,.72)}
.page-home .site-header:not(.scrolled) .brand-mark i,
.page-home .site-header:not(.scrolled) .brand-mark:before{background:#fff}
.page-home .site-header:not(.scrolled) .brand-mark:after{background:#d99542}
.page-home .site-header:not(.scrolled) .header-cta{border-bottom-color:#d99542}
.page-home .site-header:not(.scrolled) .nav-toggle span{background:#fff}
.page-home .site-header.scrolled{background:rgba(244,244,240,.96);border-bottom-color:rgba(211,215,212,.9);backdrop-filter:blur(12px)}

.hero-overlay{position:relative;min-height:92vh;background:#151a1c;overflow:hidden;border:0}
.hero-overlay-media{position:absolute;inset:0;margin:0}
.hero-overlay-media img{height:100%;width:100%;object-fit:cover;object-position:center 54%;filter:saturate(.92) contrast(1.03)}
.hero-overlay-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,12,15,.78) 0%,rgba(7,12,15,.56) 38%,rgba(7,12,15,.18) 66%,rgba(7,12,15,.08) 100%),linear-gradient(0deg,rgba(7,12,15,.42) 0%,transparent 48%)}
.hero-overlay-content{position:relative;z-index:2;min-height:92vh;padding-top:150px;padding-bottom:64px;color:#fff;display:flex;flex-direction:column;justify-content:center}
.hero-overlay-copy{max-width:790px;margin-top:auto;margin-bottom:auto}
.overlay-kicker{display:block;color:#e0a340;font-size:.78rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px}
.hero-overlay-copy h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(4rem,7vw,7.6rem);line-height:.93;letter-spacing:-.045em;font-weight:700;margin:0;max-width:880px;text-wrap:balance}
.hero-overlay-copy p{font-size:clamp(1rem,1.35vw,1.28rem);line-height:1.7;color:rgba(255,255,255,.84);max-width:680px;margin:28px 0 30px}
.hero-overlay .hero-actions{gap:12px}
.btn.overlay-primary{border-color:#d99542;background:#d99542;color:#111820}.btn.overlay-primary:hover{background:#e5ac50;border-color:#e5ac50}
.btn.overlay-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.04)}.btn.overlay-ghost:hover{background:rgba(255,255,255,.12)}
.hero-overlay-meta{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.28);padding-top:18px;color:#fff}
.hero-overlay-meta span{font-size:.61rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:#e0a340}
.hero-overlay-meta strong{font-size:.84rem}
.hero-overlay-meta small{font-size:.7rem;color:rgba(255,255,255,.65)}

/* Portfolio top visual: text sits inside the image instead of beside it. */
.page-projects .page-visual-split{display:block;position:relative;height:68vh;min-height:560px;max-height:760px;background:#101719;overflow:hidden}
.page-projects .page-visual-split img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-projects .page-visual-split:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(8,13,16,.82),rgba(8,13,16,.5) 46%,rgba(8,13,16,.08) 78%),linear-gradient(to top,rgba(8,13,16,.35),transparent 55%)}
.page-projects .page-visual-split:after{z-index:2}
.page-projects .page-visual-split .page-visual-copy{position:absolute;z-index:3;left:clamp(28px,5vw,72px);bottom:clamp(34px,6vw,72px);width:min(720px,calc(100% - 56px));padding:0;border:0;background:transparent;color:#fff;display:block}
.page-projects .page-visual-split .page-visual-copy .kicker{color:#e0a340}.page-projects .page-visual-split .page-visual-copy .kicker:before{background:#e0a340}
.page-projects .page-visual-split .page-visual-copy h2{font-family:Georgia,"Times New Roman",serif;color:#fff;font-size:clamp(3rem,5.4vw,6rem);line-height:.94;letter-spacing:-.045em;font-weight:700;margin:16px 0 18px}
.page-projects .page-visual-split .page-visual-copy p{color:rgba(255,255,255,.82);font-size:1rem;line-height:1.72;max-width:620px}
.page-projects .page-visual-tag{display:none}

/* Project list becomes image-led story panels. */
.project-showcase-section{padding-top:60px}
.project-showcase-grid{display:grid;grid-template-columns:1fr;gap:28px}
.project-showcase{margin:0}
.project-showcase-media{appearance:none;border:0;padding:0;position:relative;display:block;width:100%;min-height:560px;overflow:hidden;background:#151a1c;text-align:left;cursor:pointer;color:#fff}
.project-showcase-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03);transition:transform .8s cubic-bezier(.2,.65,.25,1),filter .3s ease}
.project-showcase-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,14,17,.79) 0%,rgba(8,14,17,.48) 43%,rgba(8,14,17,.12) 72%,rgba(8,14,17,.04) 100%),linear-gradient(to top,rgba(8,14,17,.4),transparent 50%)}
.project-showcase-content{position:absolute;z-index:2;left:clamp(28px,5vw,68px);bottom:clamp(30px,5vw,62px);width:min(720px,calc(100% - 56px));display:block}
.project-showcase-content small{display:block;color:#e0a340;font-size:.72rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.project-showcase-content strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.8rem,5vw,5.5rem);line-height:.94;letter-spacing:-.045em;font-weight:700;color:#fff;max-width:820px}
.project-showcase-content em{display:block;font-style:normal;font-size:clamp(.95rem,1.2vw,1.12rem);line-height:1.68;color:rgba(255,255,255,.8);max-width:650px;margin-top:18px}
.project-showcase-content b{display:inline-block;margin-top:22px;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.65);padding-bottom:5px}
.project-showcase-no{position:absolute;z-index:2;right:28px;top:24px;color:rgba(255,255,255,.66);font-size:.7rem;font-weight:850;letter-spacing:.14em}
.project-showcase-media:hover img{transform:scale(1.025);filter:saturate(.96) contrast(1.04)}
.project-showcase-media:focus-visible{outline:3px solid #e0a340;outline-offset:-3px}

@media(max-width:700px){
  .page-home .site-header:not(.scrolled) .brand-copy span{display:none}
  .hero-overlay{min-height:84vh}.hero-overlay-content{min-height:84vh;padding-top:112px;padding-bottom:32px;justify-content:flex-end}.hero-overlay-copy{margin:0}
  .hero-overlay-copy h1{font-size:clamp(3.1rem,14vw,5.2rem)}
  .hero-overlay-copy p{font-size:.96rem;line-height:1.65;margin:20px 0 24px}.hero-overlay-meta{margin-top:26px}
  .page-projects .page-visual-split{height:62vh;min-height:500px;width:calc(100% - 20px)}
  .page-projects .page-visual-split .page-visual-copy{left:22px;bottom:28px;width:calc(100% - 44px)}
  .page-projects .page-visual-split .page-visual-copy h2{font-size:clamp(2.5rem,12vw,4.3rem)}
  .project-showcase-section{padding-top:34px}
  .project-showcase-grid{gap:16px}
  .project-showcase-media{min-height:500px}
  .project-showcase-shade{background:linear-gradient(to top,rgba(8,14,17,.86) 0%,rgba(8,14,17,.5) 52%,rgba(8,14,17,.08) 82%)}
  .project-showcase-content{left:22px;bottom:26px;width:calc(100% - 44px)}
  .project-showcase-content strong{font-size:clamp(2.35rem,11vw,4rem)}
  .project-showcase-content em{font-size:.9rem;line-height:1.6;margin-top:14px}
  .project-showcase-no{right:18px;top:18px}
}

/* =========================================================
   V15 — LIGHT / DARK THEME
   A real second visual theme, not a color inversion.
   ========================================================= */
.header-inner{grid-template-columns:1fr auto auto auto;column-gap:18px}
.theme-toggle{appearance:none;width:40px;height:40px;padding:0;display:grid;place-items:center;border:1px solid #b7bfbc;background:rgba(255,255,255,.55);color:var(--ink);cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.theme-toggle:hover{transform:translateY(-1px);border-color:var(--steel);background:var(--white)}
.theme-toggle:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.theme-toggle svg{width:18px;height:18px;overflow:visible}
.theme-toggle .theme-sun{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .theme-moon{display:none;fill:currentColor;stroke:none}
html[data-theme="dark"] .theme-toggle .theme-sun{display:none}
html[data-theme="dark"] .theme-toggle .theme-moon{display:block}
.page-home .site-header:not(.scrolled) .theme-toggle{color:#fff;border-color:rgba(255,255,255,.44);background:rgba(10,18,21,.16);backdrop-filter:blur(7px)}
.page-home .site-header:not(.scrolled) .theme-toggle:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.72)}

html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#eef3f1;
  --ink-soft:#c6d0ce;
  --paper:#0b1012;
  --white:#11181b;
  --concrete:#252e31;
  --line:#293438;
  --muted:#9aa7aa;
  --steel:#6595a6;
  --steel-deep:#10242b;
  --rust:#e4774f;
  --soft-blue:#14242a;
  --shadow:0 22px 80px rgba(0,0,0,.24);
  --shadow-soft:0 28px 90px rgba(0,0,0,.22);
}
html[data-theme="dark"] body{background:#0b1012;color:var(--ink)}
html[data-theme="dark"] .site-header{background:rgba(11,16,18,.92);border-bottom-color:#263136}
html[data-theme="dark"] .site-nav a{color:#aebabc}
html[data-theme="dark"] .site-nav a:hover,
html[data-theme="dark"] .site-nav a.active{color:#f2f5f4}
html[data-theme="dark"] .brand-copy span{color:#87969a}
html[data-theme="dark"] .brand-mark i{background:#edf2f0}
html[data-theme="dark"] .brand-mark:before{background:#7ca4b2}
html[data-theme="dark"] .header-cta{background:rgba(255,255,255,.035);border-color:#465257;color:#edf2f0}
html[data-theme="dark"] .header-cta:hover{background:#edf2f0;color:#101719;border-color:#edf2f0}
html[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.035);border-color:#465257;color:#edf2f0}
html[data-theme="dark"] .theme-toggle:hover{background:#182125;border-color:#698d99}
html[data-theme="dark"] .nav-toggle span{background:#edf2f0}
html[data-theme="dark"] .site-nav.open{background:#0f1619;border-bottom-color:#293438}
html[data-theme="dark"] .page-home .site-header.scrolled{background:rgba(11,16,18,.96);border-bottom-color:#263136;backdrop-filter:blur(12px)}

html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .hero-grid,
html[data-theme="dark"] .hero-copy{background:#0b1012}
html[data-theme="dark"] .hero-grid{border-color:#293438}
html[data-theme="dark"] .hero-copy:after{background-image:linear-gradient(rgba(101,149,166,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(101,149,166,.055) 1px,transparent 1px)}
html[data-theme="dark"] .hero-copy:before{color:#66767a}
html[data-theme="dark"] .btn.ghost{border-color:#647176;color:#e7ecea}
html[data-theme="dark"] .btn.ghost:hover{background:#182125;border-color:#7c8b90}
html[data-theme="dark"] .btn.primary{background:#315d6d;border-color:#315d6d;color:#fff}
html[data-theme="dark"] .btn.primary:hover{background:#47798a;border-color:#47798a}
html[data-theme="dark"] .scope-strip{background:#0d2026}
html[data-theme="dark"] .scope-grid .intro{background:#244f5e}
html[data-theme="dark"] .scope-grid>div:not(.intro):hover{background:#17343e}

html[data-theme="dark"] .project-feature,
html[data-theme="dark"] .project-feature-copy,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .portfolio-card,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .about-value{background:#11181b}
html[data-theme="dark"] .specs{background:#151e21;border-color:#2c383c}
html[data-theme="dark"] .specs div{border-color:#2c383c}
html[data-theme="dark"] .project-choice:hover,
html[data-theme="dark"] .project-choice.active{background:#141c1f;color:#eef3f1}
html[data-theme="dark"] .project-choice small{color:#849398}
html[data-theme="dark"] .project-card figure,
html[data-theme="dark"] .portfolio-card,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .about-values,
html[data-theme="dark"] .about-value{border-color:#293438}

html[data-theme="dark"] .inside{background:#081a20}
html[data-theme="dark"] .inside-nav{background:#11191c;color:#eef3f1}
html[data-theme="dark"] .inside-nav p{color:#97a5a8}
html[data-theme="dark"] .work-tab{border-color:#2b363a;color:#aebabc}
html[data-theme="dark"] .work-tab strong{color:#dfe6e4}
html[data-theme="dark"] .work-tab.active strong{color:#79a9ba}
html[data-theme="dark"] .principle-grid{background:#293438}
html[data-theme="dark"] .principle{background:#11181b}
html[data-theme="dark"] .principle:hover{background:#151e21}
html[data-theme="dark"] .proof-grid{background:#091216}
html[data-theme="dark"] .process:before{background:#293438}

html[data-theme="dark"] .page-visual{background:#20292c}
html[data-theme="dark"] .portfolio-list,
html[data-theme="dark"] .portfolio-item,
html[data-theme="dark"] .service-chapter{border-color:#293438}
html[data-theme="dark"] .portfolio-item:hover{background:#11181b}
html[data-theme="dark"] .portfolio-item .thumb{background:#1f292c}
html[data-theme="dark"] .service-chapter li{border-color:#293438}
html[data-theme="dark"] .field-layout{background:#0c2027}
html[data-theme="dark"] .gallery-toolbar{border-color:#293438}
html[data-theme="dark"] .gallery-filters button{border-color:#3c494e;color:#aebabc}
html[data-theme="dark"] .gallery-filters button:hover,
html[data-theme="dark"] .gallery-filters button.active{background:#315d6d;border-color:#315d6d;color:#fff}
html[data-theme="dark"] .gallery-ledger .gallery-item,
html[data-theme="dark"] .gallery-item{background:#20292c}

html[data-theme="dark"] .contact-aside{background:#10242b}
html[data-theme="dark"] .contact-form{background:#11181b;border-color:#293438;box-shadow:none}
html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form select,
html[data-theme="dark"] .contact-form textarea{background:transparent;color:#eef3f1;border-color:#526066}
html[data-theme="dark"] .contact-form input::placeholder,
html[data-theme="dark"] .contact-form textarea::placeholder{color:#718085}
html[data-theme="dark"] .contact-form option{background:#11181b;color:#eef3f1}

html[data-theme="dark"] .project-lightbox-dialog{background:#101719;border-color:#2d383c}
html[data-theme="dark"] .project-lightbox-head,
html[data-theme="dark"] .project-lightbox-footer{border-color:#2d383c}
html[data-theme="dark"] .project-lightbox-stage{background:#0a0f11}
html[data-theme="dark"] .project-lightbox-stage img{background:#0a0f11}
html[data-theme="dark"] .project-lightbox-close{color:#eef3f1}
html[data-theme="dark"] .project-lightbox-nav{background:rgba(16,23,25,.92);color:#fff;border:1px solid #455257}
html[data-theme="dark"] .project-lightbox-footer .btn.ghost{color:#eef3f1}

html[data-theme="dark"] .cta{background:#244f5e}
html[data-theme="dark"] .cta .btn.primary{background:#fff;color:#11181b;border-color:#fff}
html[data-theme="dark"] .cta .btn.primary:hover{background:#e6ecea;color:#11181b;border-color:#e6ecea}
html[data-theme="dark"] .site-footer{background:#070b0d}
html[data-theme="dark"] .footer-wordmark{color:#151d20}

html[data-theme="dark"] .page-home .site-header:not(.scrolled){background:transparent;border-bottom-color:transparent}
html[data-theme="dark"] .page-home .site-header:not(.scrolled) .brand-mark i,
html[data-theme="dark"] .page-home .site-header:not(.scrolled) .brand-mark:before{background:#fff}
html[data-theme="dark"] .page-home .site-header:not(.scrolled) .brand-copy strong,
html[data-theme="dark"] .page-home .site-header:not(.scrolled) .site-nav a,
html[data-theme="dark"] .page-home .site-header:not(.scrolled) .header-cta{color:#fff}
html[data-theme="dark"] .page-home .site-header:not(.scrolled) .header-cta{background:rgba(10,18,21,.16);border-color:rgba(255,255,255,.45)}
html[data-theme="dark"] .page-home .site-header:not(.scrolled) .theme-toggle{color:#fff;border-color:rgba(255,255,255,.44);background:rgba(10,18,21,.16)}

/* Smooth enough to feel deliberate, without animating image-heavy content. */
body,.site-header,.project-feature-copy,.inside-nav,.principle,.contact-form,.about-card,.about-value,.project-lightbox-dialog,.theme-toggle{transition:background-color .24s ease,color .24s ease,border-color .24s ease}

@media(max-width:1050px){
  .header-inner{grid-template-columns:1fr auto auto;gap:10px}
  .theme-toggle{width:38px;height:38px}
}
@media(max-width:700px){
  .theme-toggle{width:36px;height:36px}
  .theme-toggle svg{width:17px;height:17px}
}

/* =========================================================
   V16 — CONSTRUCTED HERO HEADLINE
   The slogan is assembled as structural modules / building blocks.
   ========================================================= */
.hero-overlay-copy{max-width:920px}
.hero-overlay-copy h1.hero-block-title{
  font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
  font-size:inherit;
  line-height:1;
  letter-spacing:0;
  font-weight:800;
  margin:0;
  max-width:920px;
  text-wrap:initial;
  display:grid;
  gap:8px;
}
.hero-title-row{
  display:flex;
  align-items:stretch;
  gap:8px;
  width:max-content;
  max-width:100%;
}
.hero-title-row-two{margin-left:clamp(24px,4.3vw,66px)}
.hero-title-block{
  display:inline-flex;
  align-items:center;
  min-height:clamp(72px,8vw,114px);
  padding:0 clamp(18px,2vw,30px);
  font-size:clamp(2.35rem,5.15vw,5.9rem);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:850;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.hero-title-block.block-light{
  background:rgba(246,248,246,.96);
  color:#11181b;
}
.hero-title-block.block-outline{
  background:rgba(10,18,21,.34);
  color:#fff;
  border:1px solid rgba(255,255,255,.64);
  backdrop-filter:blur(5px);
}
.hero-title-block.block-steel{
  background:#365a68;
  color:#fff;
}
.hero-title-block.block-accent{
  background:#d99542;
  color:#11181b;
}
.hero-title-row-one:before,
.hero-title-row-two:after{
  content:"";
  width:9px;
  flex:0 0 9px;
  background:rgba(255,255,255,.28);
}
.hero-title-row-two:after{background:#d99542}

html[data-theme="dark"] .hero-title-block.block-light{background:#eef3f1;color:#0d1417}
html[data-theme="dark"] .hero-title-block.block-steel{background:#416b7a}
html[data-theme="dark"] .hero-title-block.block-accent{background:#e2a64a}

@media(max-width:900px){
  .hero-title-row{width:100%}
  .hero-title-row-two{margin-left:0}
  .hero-title-block{font-size:clamp(2rem,7vw,4.25rem);min-height:clamp(64px,10vw,92px);padding:0 16px}
}
@media(max-width:620px){
  .hero-overlay-copy h1.hero-block-title{gap:6px}
  .hero-title-row{display:grid;grid-template-columns:max-content max-content;gap:6px;width:100%;overflow:visible}
  .hero-title-block{min-height:58px;font-size:clamp(1.65rem,8.8vw,2.7rem);padding:0 12px;letter-spacing:-.045em}
  .hero-title-row-one:before,.hero-title-row-two:after{display:none}
  .hero-title-row-two{margin-left:14px}
}
@media(max-width:430px){
  .hero-title-row{grid-template-columns:max-content max-content}
  .hero-title-block{font-size:clamp(1.42rem,8vw,2.15rem);min-height:52px;padding:0 10px}
  .hero-title-row-two{margin-left:8px}
}


/* =========================================================
   V17 — ENGINEERED HEADLINE MOTION
   The hero headline should feel set out and assembled,
   not boxed. Words reveal in sequence with guide-line motion.
   ========================================================= */
.hero-overlay-copy{max-width:940px}
.hero-overlay-copy h1.hero-build-title{
  font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
  font-size:inherit;
  line-height:.92;
  letter-spacing:0;
  font-weight:800;
  margin:0;
  display:grid;
  gap:14px;
  max-width:900px;
}
.hero-build-line{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:12px 14px;
  padding-top:14px;
}
.hero-build-line::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg, rgba(255,255,255,.25), rgba(224,163,64,.96));
  animation:heroGuideGrow .72s cubic-bezier(.18,.8,.25,1) forwards;
}
.hero-build-line-two::before{
  animation-delay:.92s;
  background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(71,119,138,.95));
}
.hero-build-line::after{
  content:"";
  position:absolute;
  left:0;
  top:-4px;
  width:10px;
  height:10px;
  border:2px solid rgba(255,255,255,.8);
  background:rgba(8,14,18,.3);
  opacity:0;
  transform:translateX(0) rotate(45deg);
  animation:heroMarkerMove .78s cubic-bezier(.2,.74,.22,.98) forwards;
}
.hero-build-line-two::after{animation-delay:.92s;border-color:#e0a340}
.hero-word{
  position:relative;
  display:inline-flex;
  align-items:flex-end;
  overflow:hidden;
  font-size:clamp(2.6rem,5.8vw,6.35rem);
  line-height:.9;
  letter-spacing:-.058em;
  text-transform:uppercase;
  font-weight:850;
  padding:0 4px 8px 0;
}
.hero-word > span{
  display:block;
  opacity:0;
  transform:translateY(118%);
  animation:heroWordLift .68s cubic-bezier(.19,.78,.22,1) forwards;
  animation-delay:var(--delay,0s);
}
.hero-word::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:100%;
  background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,0));
  transform:translateX(-108%);
  animation:heroWipe .7s cubic-bezier(.22,.72,.22,1) forwards;
  animation-delay:calc(var(--delay,0s) + .05s);
  pointer-events:none;
}
.hero-word::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:rgba(255,255,255,.28);
  transform:scaleX(0);
  transform-origin:left center;
  animation:heroUnderline .45s ease forwards;
  animation-delay:calc(var(--delay,0s) + .16s);
}
.hero-word-soft{color:rgba(255,255,255,.86)}
.hero-word-steel{color:#d9edf3}
.hero-word-accent{color:#e0a340}
.hero-word-accent::after{background:#e0a340}
.hero-word-steel::after{background:rgba(102,163,187,.8)}

@keyframes heroGuideGrow{from{width:0;opacity:.2}to{width:min(560px,100%);opacity:1}}
@keyframes heroMarkerMove{0%{opacity:0;transform:translateX(0) rotate(45deg)}15%{opacity:1}100%{opacity:1;transform:translateX(min(560px,calc(100vw - 120px))) rotate(45deg)}}
@keyframes heroWordLift{from{opacity:0;transform:translateY(118%)}to{opacity:1;transform:translateY(0)}}
@keyframes heroWipe{from{transform:translateX(-108%)}to{transform:translateX(108%)}}
@keyframes heroUnderline{from{transform:scaleX(0)}to{transform:scaleX(1)}}

html[data-theme="dark"] .hero-word-soft{color:rgba(241,246,246,.88)}
html[data-theme="dark"] .hero-word-steel{color:#cce6ee}
html[data-theme="dark"] .hero-build-line::before{background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(224,163,64,.96))}
html[data-theme="dark"] .hero-build-line-two::before{background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(82,138,160,.98))}

@media(max-width:900px){
  .hero-overlay-copy h1.hero-build-title{gap:10px}
  .hero-build-line{gap:8px 10px;padding-top:12px}
  .hero-word{font-size:clamp(2.2rem,8vw,4.7rem)}
}
@media(max-width:620px){
  .hero-overlay-copy h1.hero-build-title{gap:8px}
  .hero-build-line{gap:6px 8px;padding-top:10px}
  .hero-word{font-size:clamp(1.7rem,10vw,3.15rem);padding-bottom:6px}
  .hero-build-line-two{margin-left:12px}
  @keyframes heroGuideGrow{from{width:0;opacity:.2}to{width:min(290px,100%);opacity:1}}
  @keyframes heroMarkerMove{0%{opacity:0;transform:translateX(0) rotate(45deg)}15%{opacity:1}100%{opacity:1;transform:translateX(min(290px,calc(100vw - 90px))) rotate(45deg)}}
}
@media(max-width:430px){
  .hero-word{font-size:clamp(1.45rem,9.2vw,2.4rem);letter-spacing:-.045em}
  .hero-build-line-two{margin-left:6px}
}
@media(prefers-reduced-motion:reduce){
  .hero-build-line::before,.hero-build-line::after,.hero-word>span,.hero-word::before,.hero-word::after{animation:none !important;opacity:1;transform:none;width:min(560px,100%)}
}


/* =========================================================
   V18 — MAKE THE HEADLINE FEEL LIKE A BUILDING
   Typography and motion feel like staged assembly:
   set-out line, support posts, rising words, alignment joints.
   ========================================================= */
.hero-structure-title{
  max-width:980px;
}
.hero-structure-title .hero-build-line{
  position:relative;
  padding-top:18px;
  padding-bottom:6px;
}
.hero-structure-title .hero-build-line::before{
  height:3px;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.05);
}
.hero-structure-title .hero-build-line::after{
  width:12px;
  height:12px;
  border-width:2px;
  box-shadow:0 0 0 2px rgba(10,18,22,.18);
}
.hero-structure-title .hero-build-line{
  background-image:linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:44px 1px;
  background-repeat:repeat-x;
  background-position:0 17px;
}
.hero-structure-title .hero-build-line-two{
  margin-left:clamp(28px,4.2vw,74px);
}
.hero-structure-title .hero-word{
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', 'Arial Narrow', Arial, sans-serif;
  letter-spacing:-.045em;
  font-weight:900;
  padding:0 6px 16px 0;
  text-shadow:0 2px 10px rgba(0,0,0,.14);
}
.hero-structure-title .hero-word > span{
  position:relative;
  z-index:2;
}
.hero-word-struct{
  position:relative;
}
.hero-word-struct::before,
.hero-word-struct::after{
  content:"";
  position:absolute;
  bottom:0;
  width:2px;
  height:0;
  background:rgba(255,255,255,.38);
  animation:heroPostRise .34s ease-out forwards;
  animation-delay:calc(var(--delay,0s) + .48s);
}
.hero-word-struct::before{left:2px}
.hero-word-struct::after{right:2px}
.hero-word-struct .joint{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:rgba(255,255,255,.24);
  transform:scaleX(0);
  transform-origin:left center;
  animation:heroBeamSet .34s ease-out forwards;
  animation-delay:calc(var(--delay,0s) + .3s);
}
.hero-word-soft .joint{background:rgba(255,255,255,.2)}
.hero-word-steel .joint{background:rgba(114,173,196,.56)}
.hero-word-accent .joint{background:rgba(224,163,64,.88)}
.hero-word-accent::before,.hero-word-accent::after{background:rgba(224,163,64,.65)}
.hero-word-steel::before,.hero-word-steel::after{background:rgba(114,173,196,.52)}
.hero-structure-title .hero-word::before{
  background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.18), rgba(255,255,255,0));
}
.hero-structure-title .hero-word::after{
  height:3px;
  background:rgba(255,255,255,.18);
}
.hero-structure-title .hero-word-soft{
  color:rgba(255,255,255,.9);
}
.hero-structure-title .hero-word-steel{
  color:#d6ebf1;
}
.hero-structure-title .hero-word-accent{
  color:#e0a340;
}
.hero-overlay-copy p{
  max-width:700px;
}

@keyframes heroPostRise{from{height:0;opacity:.25}to{height:18px;opacity:1}}
@keyframes heroBeamSet{from{transform:scaleX(0);opacity:.35}to{transform:scaleX(1);opacity:1}}

html[data-theme="dark"] .hero-word-struct::before,
html[data-theme="dark"] .hero-word-struct::after{background:rgba(255,255,255,.32)}
html[data-theme="dark"] .hero-word-accent::before,
html[data-theme="dark"] .hero-word-accent::after{background:rgba(224,163,64,.72)}
html[data-theme="dark"] .hero-word-steel::before,
html[data-theme="dark"] .hero-word-steel::after{background:rgba(126,185,208,.55)}

@media(max-width:900px){
  .hero-structure-title .hero-build-line{padding-top:14px}
  .hero-structure-title .hero-build-line{background-size:28px 1px;background-position:0 13px}
  .hero-structure-title .hero-build-line-two{margin-left:20px}
  @keyframes heroPostRise{from{height:0;opacity:.25}to{height:14px;opacity:1}}
}
@media(max-width:620px){
  .hero-structure-title .hero-build-line{padding-top:10px;padding-bottom:2px;gap:6px 8px}
  .hero-structure-title .hero-build-line{background-size:18px 1px;background-position:0 9px}
  .hero-structure-title .hero-build-line-two{margin-left:10px}
  .hero-structure-title .hero-word{padding-bottom:12px}
  @keyframes heroPostRise{from{height:0;opacity:.25}to{height:10px;opacity:1}}
}
@media(prefers-reduced-motion:reduce){
  .hero-word-struct::before,.hero-word-struct::after,.hero-word-struct .joint{animation:none !important;height:18px;transform:none;opacity:1}
}


/* =========================================================
   V19 — THE HEADLINE IS CONSTRUCTED, NOT JUST REVEALED
   Sequence: wireframe -> beam -> columns -> filled structure.
   A small ENG survey marker moves over each word during assembly.
   ========================================================= */
.hero-overlay-copy{max-width:980px}
.hero-build-sequence{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 12px;
  min-height:22px;
}
.hero-build-sequence span{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 7px;
  border:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.65);
  font:700 .53rem/1 "Arial Narrow",Arial,sans-serif;
  letter-spacing:.13em;
  opacity:0;
  transform:translateY(4px);
  animation:buildPhaseIn .25s ease forwards;
  animation-delay:var(--phase-delay);
}
.hero-build-sequence span:last-child{border-color:rgba(224,163,64,.65);color:#e0a340}

.hero-overlay-copy h1.hero-site-title{
  margin:0;
  max-width:980px;
  display:grid;
  gap:12px;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Narrow",Arial,sans-serif;
  font-weight:900;
  text-transform:uppercase;
  line-height:.88;
  letter-spacing:-.045em;
}
.site-title-line{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px 14px;
}
.site-title-line-two{margin-left:clamp(24px,4vw,66px)}
.build-word{
  --fill:#f7f8f5;
  position:relative;
  display:inline-block;
  font-size:clamp(2.65rem,5.75vw,6.2rem);
  padding:6px 4px 20px 0;
  min-height:1em;
  white-space:nowrap;
  isolation:isolate;
}
.build-word-soft{--fill:#dfe6e4}
.build-word-steel{--fill:#cce4ec}
.build-word-accent{--fill:#e0a340}
.build-outline,.build-fill{
  display:block;
  grid-area:1/1;
}
.build-outline{
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.48);
  text-stroke:1px rgba(255,255,255,.48);
  opacity:0;
  animation:buildOutline .28s ease forwards;
  animation-delay:var(--delay);
}
.build-fill{
  position:absolute;
  inset:6px 4px 20px 0;
  color:var(--fill);
  clip-path:inset(100% 0 0 0);
  text-shadow:0 4px 18px rgba(0,0,0,.18);
  animation:buildFillUp .65s cubic-bezier(.2,.72,.2,1) forwards;
  animation-delay:calc(var(--delay) + .48s);
}
.build-beam{
  position:absolute;
  left:0;
  bottom:12px;
  width:100%;
  height:3px;
  background:rgba(255,255,255,.36);
  transform:scaleX(0);
  transform-origin:left center;
  animation:buildBeam .32s ease-out forwards;
  animation-delay:calc(var(--delay) + .16s);
}
.build-word-steel .build-beam{background:rgba(123,180,202,.72)}
.build-word-accent .build-beam{background:#e0a340}
.build-column{
  position:absolute;
  bottom:12px;
  width:2px;
  height:0;
  background:rgba(255,255,255,.42);
  animation:buildColumn .3s ease-out forwards;
  animation-delay:calc(var(--delay) + .30s);
}
.build-column-left{left:1px}
.build-column-right{right:4px}
.build-word-steel .build-column{background:rgba(123,180,202,.65)}
.build-word-accent .build-column{background:rgba(224,163,64,.82)}
.build-engineer{
  position:absolute;
  z-index:4;
  left:0;
  top:-8px;
  width:15px;
  height:15px;
  border:2px solid #e0a340;
  border-radius:50%;
  opacity:0;
  transform:translateX(0);
  animation:engineerTraverse .82s cubic-bezier(.22,.68,.22,1) forwards;
  animation-delay:calc(var(--delay) + .28s);
  box-shadow:0 0 0 3px rgba(8,14,18,.20);
}
.build-engineer:before,.build-engineer:after{
  content:"";
  position:absolute;
  background:#e0a340;
}
.build-engineer:before{width:21px;height:1px;left:-5px;top:5px}
.build-engineer:after{width:1px;height:21px;top:-5px;left:5px}
.build-engineer b{
  position:absolute;
  left:16px;
  top:-2px;
  font:800 .46rem/1 Arial,sans-serif;
  letter-spacing:.08em;
  color:#e0a340;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

@keyframes buildPhaseIn{to{opacity:1;transform:none}}
@keyframes buildOutline{from{opacity:0}to{opacity:1}}
@keyframes buildBeam{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes buildColumn{from{height:0}to{height:calc(100% - 15px)}}
@keyframes buildFillUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes engineerTraverse{
  0%{opacity:0;transform:translateX(0)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateX(calc(100% + var(--travel, 0px)))}
}
/* translate across the whole word rather than the marker itself */
.build-word .build-engineer{--travel:calc(1ch * 4)}
.build-word:nth-child(1) .build-engineer{animation-name:engineerTraverseLong}
.build-word:nth-child(2) .build-engineer{animation-name:engineerTraverseMedium}
@keyframes engineerTraverseLong{0%{opacity:0;left:0}12%{opacity:1}88%{opacity:1}100%{opacity:0;left:calc(100% - 18px)}}
@keyframes engineerTraverseMedium{0%{opacity:0;left:0}12%{opacity:1}88%{opacity:1}100%{opacity:0;left:calc(100% - 18px)}}

/* Project Review is deliberately distinct from general Contact. */
.contact-form-intro{padding-bottom:8px;margin-bottom:2px}
.contact-form-intro h2{margin:10px 0 8px;font-size:clamp(1.7rem,2.8vw,2.7rem);line-height:1.02;letter-spacing:-.035em}
.contact-form-intro p{margin:0;color:var(--muted);line-height:1.65;font-size:.88rem;max-width:640px}
#project-brief{scroll-margin-top:100px}

@media(max-width:900px){
  .build-word{font-size:clamp(2.15rem,8vw,4.55rem)}
  .site-title-line-two{margin-left:18px}
}
@media(max-width:620px){
  .hero-build-sequence{gap:5px;margin-bottom:9px}
  .hero-build-sequence span{padding:0 5px;font-size:.45rem}
  .hero-overlay-copy h1.hero-site-title{gap:8px}
  .site-title-line{gap:5px 8px}
  .site-title-line-two{margin-left:6px}
  .build-word{font-size:clamp(1.66rem,9.5vw,3rem);padding-bottom:15px}
  .build-fill{inset:6px 4px 15px 0}
  .build-beam,.build-column{bottom:8px}
  .build-engineer{transform:scale(.82);transform-origin:left center}
}
@media(max-width:430px){
  .build-word{font-size:clamp(1.4rem,8.7vw,2.32rem)}
}
@media(prefers-reduced-motion:reduce){
  .hero-build-sequence span,.build-outline,.build-fill,.build-beam,.build-column,.build-engineer{animation:none!important;opacity:1;transform:none;clip-path:none}
  .build-column{height:calc(100% - 15px)}
  .build-engineer{display:none}
}


/* =========================================================
   V20 — STRONGER "ENGINEERS ARE WORKING" HERO
   Add scaffold feel, build-stage tags, more obvious supports,
   and make CTAs less redundant.
   ========================================================= */
.hero-site-title{position:relative}
.hero-site-title::before{
  content:"";
  position:absolute;
  left:-28px;
  top:10px;
  bottom:8px;
  width:1px;
  background:linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,.4), rgba(255,255,255,.08));
  box-shadow:18px 0 0 rgba(255,255,255,.08), 36px 0 0 rgba(255,255,255,.08);
  opacity:.8;
}
.site-title-line{position:relative}
.site-title-line::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:11px;
  height:1px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 14px, transparent 14px 28px);
  opacity:.65;
}
.build-word{
  border-left:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.08);
  padding-left:6px;
  padding-right:8px;
}
.build-stage-tag{
  position:absolute;
  left:0;
  top:-15px;
  font:800 .52rem/1 "Arial Narrow",Arial,sans-serif;
  letter-spacing:.14em;
  color:rgba(255,255,255,.72);
  font-style:normal;
  opacity:0;
  transform:translateY(5px);
  animation:buildPhaseIn .24s ease forwards;
  animation-delay:calc(var(--delay) + .04s);
}
.build-word-accent .build-stage-tag{color:#e0a340}
.build-word-steel .build-stage-tag{color:#9fc9d8}
.build-outline{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.06));
}
.build-fill{
  background:repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.07) 22px 23px);
  -webkit-background-clip:text;
  background-clip:text;
}
.build-column{opacity:.95}
.build-column-mid{left:50%;transform:translateX(-50%)}
.build-engineer{top:-12px}
.build-engineer b{content:"ENG"}
.hero-build-sequence{margin-bottom:12px}
.hero-actions .overlay-primary{min-width:230px;text-align:center}
.hero-actions .overlay-ghost{border-color:rgba(255,255,255,.52)}
html[data-theme="dark"] .build-word{border-left-color:rgba(255,255,255,.06);border-right-color:rgba(255,255,255,.06)}
html[data-theme="dark"] .build-fill{background:repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.06) 22px 23px)}
@media(max-width:700px){
  .hero-site-title::before{display:none}
  .build-stage-tag{top:-12px;font-size:.47rem}
  .site-title-line::before{bottom:8px;background:repeating-linear-gradient(90deg, rgba(255,255,255,.11) 0 10px, transparent 10px 20px)}
  .hero-actions .overlay-primary{min-width:0}
}


/* =========================================================
   V21 — HOMEPAGE TOP THEME: STEEL / CONCRETE / COPPER
   Changes only the index hero so the first screen feels fresher,
   cooler and more premium without changing the rest of the site.
   ========================================================= */
.page-home .hero-overlay{
  --hero-steel:#0b2730;
  --hero-steel-2:#163b46;
  --hero-copper:#c86b47;
  --hero-copper-light:#dd8764;
  --hero-concrete:#eef2ef;
  background:var(--hero-steel);
}
.page-home .hero-overlay-media img{
  filter:saturate(.86) contrast(1.045) brightness(.95);
}
.page-home .hero-overlay-shade{
  background:
    linear-gradient(90deg,rgba(7,29,36,.92) 0%,rgba(9,34,42,.78) 34%,rgba(11,39,48,.34) 64%,rgba(8,26,32,.12) 100%),
    linear-gradient(0deg,rgba(6,25,31,.62) 0%,rgba(6,25,31,.06) 48%,rgba(6,25,31,.14) 100%);
}
.page-home .hero-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.82) 46%,transparent 82%);
}
.page-home .hero-overlay-content{z-index:2}
.page-home .overlay-kicker{
  color:var(--hero-copper-light);
  letter-spacing:.14em;
}
.page-home .hero-build-sequence span{
  border-color:rgba(205,225,230,.24);
  color:rgba(229,240,242,.68);
  background:rgba(11,39,48,.22);
}
.page-home .hero-build-sequence span:last-child{
  border-color:rgba(200,107,71,.72);
  color:var(--hero-copper-light);
}
.page-home .build-word{--fill:var(--hero-concrete)}
.page-home .build-word-soft{--fill:#d7e3e3}
.page-home .build-word-steel{--fill:#a9cad4}
.page-home .build-word-accent{--fill:var(--hero-copper-light)}
.page-home .build-word-accent .build-beam{background:var(--hero-copper)}
.page-home .build-word-accent .build-column{background:rgba(200,107,71,.8)}
.page-home .build-word-accent .build-stage-tag{color:var(--hero-copper-light)}
.page-home .build-word-steel .build-stage-tag{color:#a9cad4}
.page-home .build-engineer{
  border-color:var(--hero-copper-light);
}
.page-home .build-engineer:before,
.page-home .build-engineer:after{background:var(--hero-copper-light)}
.page-home .build-engineer b{color:var(--hero-copper-light)}
.page-home .hero-site-title::before{
  background:linear-gradient(to bottom,rgba(169,202,212,.08),rgba(169,202,212,.46),rgba(169,202,212,.08));
  box-shadow:18px 0 0 rgba(169,202,212,.08),36px 0 0 rgba(169,202,212,.08);
}
.page-home .site-title-line::before{
  background:repeating-linear-gradient(90deg,rgba(169,202,212,.18) 0 14px,transparent 14px 28px);
}
.page-home .hero-overlay-copy p{
  color:rgba(235,242,241,.82);
  max-width:650px;
}
.page-home .btn.overlay-primary{
  background:var(--hero-copper);
  border-color:var(--hero-copper);
  color:#fff;
}
.page-home .btn.overlay-primary:hover{
  background:var(--hero-copper-light);
  border-color:var(--hero-copper-light);
}
.page-home .btn.overlay-ghost{
  color:#f4f7f6;
  border-color:rgba(226,237,239,.48);
  background:rgba(12,39,47,.18);
}
.page-home .btn.overlay-ghost:hover{
  background:rgba(235,243,244,.1);
  border-color:rgba(235,243,244,.72);
}
.page-home .hero-overlay-meta{
  border-top-color:rgba(206,226,230,.24);
}
.page-home .hero-overlay-meta span{color:var(--hero-copper-light)}
.page-home .hero-overlay-meta small{color:rgba(221,235,237,.62)}

/* Transparent steel header only while sitting on the homepage hero. */
.page-home .site-header:not(.scrolled){
  background:rgba(7,28,35,.50);
  border-bottom-color:rgba(221,235,237,.14);
  backdrop-filter:blur(14px);
}
.page-home .site-header:not(.scrolled) .brand-copy strong,
.page-home .site-header:not(.scrolled) .site-nav a,
.page-home .site-header:not(.scrolled) .header-cta{color:#f2f6f5}
.page-home .site-header:not(.scrolled) .brand-copy span{color:rgba(226,237,239,.58)}
.page-home .site-header:not(.scrolled) .brand-mark i{background:#f2f6f5}
.page-home .site-header:not(.scrolled) .brand-mark:before{background:#9fc2cd}
.page-home .site-header:not(.scrolled) .brand-mark:after{background:var(--hero-copper)}
.page-home .site-header:not(.scrolled) .brand-mark i:before{background:var(--hero-copper)}
.page-home .site-header:not(.scrolled) .header-cta{border-bottom-color:var(--hero-copper)}
.page-home .site-header:not(.scrolled) .theme-toggle{color:#f2f6f5;border-color:rgba(226,237,239,.24)}
.page-home .site-header:not(.scrolled) .nav-toggle span{background:#f2f6f5}

@media(max-width:700px){
  .page-home .hero-overlay::after{background-size:44px 44px;opacity:.7}
  .page-home .hero-overlay-shade{
    background:
      linear-gradient(90deg,rgba(7,29,36,.88) 0%,rgba(8,32,40,.62) 56%,rgba(8,30,37,.28) 100%),
      linear-gradient(0deg,rgba(6,25,31,.66) 0%,rgba(6,25,31,.08) 58%);
  }
}