/* =========================================================
   NTK DIGITALS — DESIGN SYSTEM
   Typography: Poppins (300/400/500/600/700)
   Palette: warm off-white / near-black ink / NTK green accent
   ========================================================= */

:root[data-theme="light"]{
  --bg:#f6f7f2;
  --bg-tint:#edf0e5;
  --panel:#ffffff;
  --ink:#14170f;
  --ink-soft:#4c5245;
  --ink-faint:#868c7b;
  --line:rgba(20,23,15,.12);
  --line-strong:rgba(20,23,15,.26);
  --green-900:#1f3019;
  --green-700:#35502e;
  --green-500:#5d7d50;
  --green-300:#a9c398;
  --green-tint:#e7ede2;
  --shadow: 0 1px 0 rgba(20,23,15,.04);
}
:root[data-theme="dark"]{
  --bg:#101208;
  --bg-tint:#171a10;
  --panel:#151810;
  --ink:#eef0e6;
  --ink-soft:#b7bcab;
  --ink-faint:#7c8170;
  --line:rgba(238,240,230,.12);
  --line-strong:rgba(238,240,230,.26);
  --green-900:#c9dab9;
  --green-700:#7fab68;
  --green-500:#6f9c5c;
  --green-300:#3a4a30;
  --green-tint:#1a2114;
  --shadow: 0 1px 0 rgba(0,0,0,.3);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  background:var(--bg); color:var(--ink);
  font-family:'Poppins',-apple-system,sans-serif;
  font-weight:400; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:'Poppins',sans-serif; font-weight:600; color:var(--ink); line-height:1.18; letter-spacing:-.01em;}
p{color:var(--ink-soft);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
button{font-family:inherit;}
strong{font-weight:600; color:var(--ink);}

.container{max-width:1180px; margin:0 auto; padding:0 32px;}
@media(max-width:640px){ .container{padding:0 20px;} }

/* ---------- kicker / small label (sentence case, not tracked caps) ---------- */
.kicker{font-size:.82rem; font-weight:500; color:var(--green-500); margin-bottom:14px; display:block;}

/* ---------- section rhythm ---------- */
.section{padding:96px 0; border-bottom:1px solid var(--line);}
.section:last-of-type{border-bottom:none;}
.section-tint{background:var(--bg-tint);}
.section-head{max-width:620px; margin-bottom:48px;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.5rem); margin-bottom:16px;}
.section-head p{font-size:1.05rem; max-width:56ch;}
@media(max-width:768px){ .section{padding:64px 0;} }

/* =========================================================
   HEADER / NAV
   ========================================================= */
header.site{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:78px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand .mark{width:34px; height:34px; border-radius:4px; overflow:hidden; flex-shrink:0; background:var(--green-700);}
.brand .mark img{width:100%; height:100%; object-fit:cover;}
.brand .word{font-size:1.05rem; font-weight:600; letter-spacing:-.01em;}

.nav-links{display:flex; align-items:center; gap:2px;}
.nav-links a{
  font-size:.92rem; font-weight:500; color:var(--ink-soft);
  padding:10px 16px; border-radius:3px; transition:color .18s ease;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a.current{color:var(--green-700); background:var(--green-tint); font-weight:600;}

.nav-right{display:flex; align-items:center; gap:10px;}
.theme-toggle{
  width:38px; height:38px; border:1px solid var(--line-strong); background:transparent;
  color:var(--ink-soft); cursor:pointer; border-radius:3px; font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
}
.theme-toggle:hover{border-color:var(--ink-soft); color:var(--ink);}
.menu-btn{display:none; width:38px; height:38px; border:1px solid var(--line-strong); background:transparent; cursor:pointer; border-radius:3px; position:relative;}
.menu-btn span{position:absolute; left:9px; right:9px; height:1.5px; background:var(--ink); transition:transform .25s ease, opacity .25s ease;}
.menu-btn span:nth-child(1){top:14px;}
.menu-btn span:nth-child(2){top:19px;}
.menu-btn span:nth-child(3){top:24px;}
.menu-btn.open span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.menu-btn.open span:nth-child(2){opacity:0;}
.menu-btn.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

.mobile-panel{display:none; flex-direction:column; padding:8px 0 24px; border-bottom:1px solid var(--line);}
.mobile-panel.open{display:flex;}
.mobile-panel a{padding:15px 4px; border-top:1px solid var(--line); font-size:1rem; color:var(--ink-soft);}
.mobile-panel a.current{color:var(--green-700); background:var(--green-tint); font-weight:600;}
.mobile-panel .btn{margin-top:16px; align-self:flex-start;}

@media(max-width:900px){
  .nav-links{display:none;}
  .menu-btn{display:block;}
  .nav-right .btn{display:none;}
}

/* =========================================================
   BUTTONS — single consistent system
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 26px; font-size:.92rem; font-weight:500;
  border-radius:3px; border:1px solid transparent; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--green-700); color:#fbfbf7; border-color:var(--green-700);}
.btn-primary:hover{background:var(--green-900); border-color:var(--green-900);}
:root[data-theme="dark"] .btn-primary{color:#0f1309;}
.btn-secondary{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-secondary:hover{border-color:var(--ink); }
.btn-sm{height:40px; padding:0 20px; font-size:.85rem;}
.btn-row{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding:72px 0 96px; position:relative; overflow:hidden;}
.hero::before{
  content:''; position:absolute; top:-140px; right:-180px; width:560px; height:560px;
  background:radial-gradient(circle, var(--green-300) 0%, transparent 72%); opacity:.4; pointer-events:none; z-index:0;
}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(var(--line-strong) 1px, transparent 1px); background-size:30px 30px;
  -webkit-mask-image:linear-gradient(to bottom, black, transparent 75%); mask-image:linear-gradient(to bottom, black, transparent 75%);
}
.hero .hero-grid{position:relative; z-index:1;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem); max-width:15ch; margin-bottom:24px;}
.hero .lede{font-size:1.12rem; color:var(--ink-soft); max-width:46ch; margin-bottom:34px;}
.hero-note{font-size:.85rem; color:var(--ink-faint); margin-top:36px; padding-top:22px; border-top:1px solid var(--line); max-width:50ch;}

/* the "ecosystem" graphic panel */
.hero-visual{position:relative; aspect-ratio:1/1;}
.eco-line{stroke:var(--line-strong); stroke-width:1;}
.eco-node-ring{fill:none; stroke:var(--green-700); stroke-width:1.4;}
.eco-node-dot{fill:var(--green-700);}
.eco-label{font-family:'Poppins',sans-serif; font-size:11px; font-weight:500; fill:var(--ink-soft);}
.eco-core{fill:var(--green-700);}
.eco-core-label{font-family:'Poppins',sans-serif; font-size:12px; font-weight:600; fill:var(--panel);}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero-visual{order:-1; aspect-ratio:16/10;}
  .hero h1{max-width:none;}
}

/* ---------- reveal: one orchestrated load-in on hero only ---------- */
.reveal-in{opacity:0; transform:translateY(10px);}
.reveal-in.ready{animation:revealUp .6s ease forwards;}
@keyframes revealUp{ to{opacity:1; transform:translateY(0);} }
@media(prefers-reduced-motion: reduce){
  .reveal-in{opacity:1; transform:none; animation:none;}
}

/* =========================================================
   STATEMENT STRIP
   ========================================================= */
.statement{padding:80px 0; border-bottom:1px solid var(--line); background:var(--bg-tint);}
.statement p{font-size:clamp(1.5rem,2.6vw,2.15rem); color:var(--ink); font-weight:500; max-width:26ch; line-height:1.4;}
.statement .btn{margin-top:28px;}

/* =========================================================
   ECOSYSTEM / SERVICE CATEGORIES (home)
   ========================================================= */
.eco-grid{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:8px;}
.eco-col{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:32px 26px;}
.eco-col .eco-tag{font-size:.78rem; font-weight:500; color:var(--green-700); margin-bottom:12px;}
.eco-col h3{font-size:1.2rem; margin-bottom:14px;}
.eco-col ul{display:flex; flex-direction:column; gap:8px;}
.eco-col li{font-size:.88rem; color:var(--ink-soft);}
@media(max-width:900px){ .eco-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .eco-grid{grid-template-columns:1fr;} }

.overflow-panel{
  margin-top:1px; border:1px solid var(--line); padding:32px 30px; display:flex;
  justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; background:var(--panel);
}
.overflow-panel p{max-width:48ch; font-size:.98rem;}
.overflow-panel strong{display:block; font-size:1.1rem; margin-bottom:6px; font-weight:600;}

/* =========================================================
   WORK / CASE STUDY CARDS (home preview + full page)
   ========================================================= */
.img-frame{position:relative; overflow:hidden; background:var(--bg-tint); border:1px solid var(--line);}
.img-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.img-frame::after{content:''; position:absolute; inset:0; background:var(--green-700); mix-blend-mode:multiply; opacity:.14; pointer-events:none;}
:root[data-theme="dark"] .img-frame::after{opacity:.22; mix-blend-mode:soft-light;}
.img-frame.placeholder{display:flex; align-items:center; justify-content:center;}
.img-frame.placeholder::after{display:none;}
.img-frame.placeholder span{font-size:.78rem; color:var(--ink-faint); font-weight:500;}

.work-preview-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:12px; border:1px solid var(--line);}
.work-preview-card{background:var(--panel); padding:0;}
.work-preview-card .img-frame{aspect-ratio:4/3;}
.work-preview-card .wp-body{padding:22px 22px 26px;}
.work-preview-card .wp-field{font-size:.78rem; color:var(--ink-faint); margin-bottom:6px;}
.work-preview-card h3{font-size:1.1rem;}
@media(max-width:900px){ .work-preview-grid{grid-template-columns:1fr;} }

/* full case studies */
.case-study{padding:64px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:start;}
.case-study:first-of-type{border-top:none;}
.case-study.flip{grid-template-columns:1.15fr .85fr;}
.case-study.flip .cs-media{order:2;}
.cs-media .img-frame{aspect-ratio:4/3;}
.cs-field{font-size:.82rem; color:var(--green-700); font-weight:500; margin-bottom:10px;}
.case-study h3{font-size:1.7rem; margin-bottom:22px;}
.cs-block{margin-bottom:18px; padding-left:16px; border-left:2px solid var(--line-strong);}
.cs-block:last-of-type{margin-bottom:26px;}
.cs-block b{display:block; font-size:.78rem; color:var(--ink); font-weight:600; margin-bottom:5px;}
.cs-block p{font-size:.95rem;}
.cs-meta{display:flex; flex-wrap:wrap; gap:10px 28px; padding-top:18px; border-top:1px solid var(--line); margin-bottom:22px;}
.cs-meta div b{display:block; font-size:.72rem; color:var(--ink-faint); font-weight:500; margin-bottom:3px;}
.cs-meta div span{font-size:.86rem; color:var(--ink);}
@media(max-width:860px){
  .case-study, .case-study.flip{grid-template-columns:1fr; gap:24px;}
  .case-study.flip .cs-media{order:0;}
}

/* =========================================================
   SERVICE ROWS (services page)
   ========================================================= */
.svc-group{margin-bottom:64px;}
.svc-group:last-child{margin-bottom:0;}
.svc-group-head{display:flex; align-items:baseline; gap:14px; margin-bottom:8px; padding-bottom:14px; border-bottom:1px solid var(--line-strong);}
.svc-group-head .eco-tag{font-size:.8rem; font-weight:500; color:var(--green-700);}
.svc-group-head h2{font-size:1.4rem;}

.svc-item{padding:30px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:.9fr 1.6fr; gap:36px;}
.svc-item h3{font-size:1.15rem; margin-bottom:10px;}
.svc-item .svc-summary{font-size:.95rem; color:var(--ink-soft);}
.svc-detail p{font-size:.92rem; margin-bottom:10px;}
.svc-detail p:last-child{margin-bottom:0;}
.svc-detail b{color:var(--ink); font-weight:600;}
@media(max-width:820px){ .svc-item{grid-template-columns:1fr; gap:14px;} }

/* pricing */
.price-row{display:grid; grid-template-columns:1fr 2fr 110px; gap:24px; padding:24px 0; border-top:1px solid var(--line); align-items:baseline;}
.price-row:last-child{border-bottom:1px solid var(--line);}
.price-row h3{font-size:1.02rem; font-weight:600;}
.price-row p{font-size:.86rem;}
.price-row .from{font-size:.82rem; color:var(--ink-faint); text-align:right; white-space:nowrap;}
.pricing-note{font-size:.85rem; color:var(--ink-faint); margin-top:22px; max-width:56ch;}
@media(max-width:680px){ .price-row{grid-template-columns:1fr; gap:8px;} .price-row .from{text-align:left;} }

/* =========================================================
   FAQ
   ========================================================= */
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{display:flex; justify-content:space-between; gap:20px; align-items:center; padding:22px 0; cursor:pointer; font-size:1rem; font-weight:500;}
.faq-q .mark{color:var(--green-700); font-size:1.2rem; flex-shrink:0; transition:transform .2s ease;}
.faq-item.open .faq-q .mark{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{font-size:.92rem; padding-bottom:22px; max-width:60ch;}

/* =========================================================
   ROADMAP / ROAD AHEAD (about page)
   ========================================================= */
.roadmap{position:relative; margin-top:24px;}
.roadmap-track{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line-strong);}
.roadmap-track::before{
  content:''; position:absolute; top:-1px; left:0; height:2px; width:100%;
  background:linear-gradient(90deg, var(--green-700) 0%, var(--green-700) 26%, var(--line-strong) 26%);
}
.rm-stage{padding:28px 22px 0; border-left:1px solid var(--line);}
.rm-stage:first-child{border-left:none; padding-left:0;}
.rm-stage .rm-dot{width:11px; height:11px; border-radius:50%; background:var(--panel); border:2px solid var(--line-strong); margin-top:-33px; margin-bottom:18px;}
.rm-stage.active .rm-dot{background:var(--green-700); border-color:var(--green-700);}
.rm-stage .rm-num{font-size:.78rem; color:var(--ink-faint); font-weight:500; margin-bottom:8px;}
.rm-stage h3{font-size:1.05rem; margin-bottom:10px;}
.rm-stage p{font-size:.86rem;}
.rm-close{margin-top:44px; padding-top:32px; border-top:1px solid var(--line);}
.rm-close p{font-size:clamp(1.15rem,2vw,1.5rem); color:var(--ink); font-weight:500; max-width:44ch; line-height:1.5;}
@media(max-width:820px){
  .roadmap-track{grid-template-columns:1fr; border-top:none;}
  .roadmap-track::before{display:none;}
  .rm-stage{border-left:2px solid var(--line-strong); padding:0 0 32px 22px; margin-left:5px;}
  .rm-stage.active{border-left-color:var(--green-700);}
  .rm-stage .rm-dot{margin:0 0 14px -32px;}
}

/* =========================================================
   VALUES / ABOUT LISTS
   ========================================================= */
.value-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px;}
.value-card{background:var(--panel); padding:28px 26px;}
.value-card h3{font-size:1.05rem; margin-bottom:8px;}
.value-card p{font-size:.88rem;}
@media(max-width:680px){ .value-grid{grid-template-columns:1fr;} }

.about-list{display:flex; flex-direction:column; gap:14px;}
.about-list li{display:flex; gap:14px; font-size:.95rem; color:var(--ink-soft); align-items:baseline;}
.about-list li .dot{width:5px; height:5px; border-radius:50%; background:var(--green-700); flex-shrink:0; margin-top:8px;}

.process-step{display:grid; grid-template-columns:52px 1fr; gap:20px; padding:24px 0; border-top:1px solid var(--line);}
.process-step:last-child{border-bottom:1px solid var(--line);}
.process-step .num{font-size:1rem; font-weight:600; color:var(--green-700);}
.process-step h4{font-size:1rem; margin-bottom:6px;}
.process-step p{font-size:.88rem;}

/* =========================================================
   ABOUT — INTRO GRID
   ========================================================= */
.about-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:56px; align-items:start;}
.about-visual{aspect-ratio:3/4;}
.about-quote{font-size:1.35rem; font-weight:500; color:var(--ink); max-width:32ch; margin:28px 0; line-height:1.45;}
@media(max-width:860px){ .about-grid{grid-template-columns:1fr; gap:28px;} .about-visual{aspect-ratio:16/9; order:-1;} }

/* =========================================================
   PARTNERS
   ========================================================= */
.partners-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px;}
.partner-logo{background:var(--panel); padding:34px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-height:150px; text-align:center;}
.partner-logo span{font-size:1.02rem; font-weight:600; color:var(--ink);}
.partner-mark{
  width:54px; height:54px; border:1px solid var(--line-strong); border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:.92rem; font-weight:600; color:var(--green-700); background:var(--green-tint);
}
.partner-logo.open{background:transparent;}
.partner-logo.open span{font-family:'Poppins',sans-serif; font-weight:400; font-size:.85rem; color:var(--ink-faint);}
.partner-mark.open-mark{border-style:dashed; background:transparent; color:var(--ink-faint); font-size:1.3rem;}
@media(max-width:680px){ .partners-grid{grid-template-columns:1fr;} }

/* =========================================================
   TESTIMONIAL
   ========================================================= */
.testi{font-size:1.4rem; font-weight:500; color:var(--ink); max-width:38ch; margin-bottom:20px; line-height:1.5;}
.testi-who{font-size:.85rem; color:var(--ink-faint);}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{display:grid; grid-template-columns:1fr .8fr; gap:64px;}
.form-field{margin-bottom:20px;}
.form-field label{display:block; font-size:.82rem; color:var(--ink-faint); margin-bottom:8px; font-weight:500;}
.form-field input, .form-field textarea, .form-field select{
  width:100%; background:var(--panel); border:1px solid var(--line-strong);
  padding:12px 14px; color:var(--ink); font-family:inherit; font-size:.95rem; border-radius:3px;
}
.form-field textarea{resize:vertical; min-height:110px;}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{outline:none; border-color:var(--green-700);}
#formMsg{font-size:.88rem; color:var(--green-700); margin-top:16px; font-weight:500;}
.contact-details{display:flex; flex-direction:column; gap:26px;}
.contact-details .row b{display:block; font-size:.85rem; margin-bottom:4px; font-weight:600;}
.contact-details .row span, .contact-details .row a{font-size:.92rem; color:var(--ink-soft);}
.contact-details .row a:hover{color:var(--green-700);}
.contact-note{background:var(--bg-tint); border:1px solid var(--line); padding:24px 26px; border-radius:3px; margin-bottom:28px;}
.contact-note strong{display:block; margin-bottom:6px; font-size:.98rem;}
.contact-note p{font-size:.88rem;}
@media(max-width:860px){ .contact-grid{grid-template-columns:1fr; gap:32px;} }

/* =========================================================
   FOOTER
   ========================================================= */
footer.site{background:var(--bg-tint); border-top:1px solid var(--line);}
.foot-top{padding:72px 0 48px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
.foot-brand .brand{margin-bottom:16px;}
.foot-brand p{font-size:.88rem; max-width:36ch;}
.foot-col h4{font-size:.82rem; font-weight:600; margin-bottom:16px; color:var(--ink);}
.foot-col ul{display:flex; flex-direction:column; gap:10px;}
.foot-col a, .foot-col span{font-size:.86rem; color:var(--ink-soft);}
.foot-col a:hover{color:var(--green-700);}
.foot-bottom{padding:22px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.social-row{display:flex; gap:8px; margin-top:16px;}
.social-badge{
  width:36px; height:36px; border:1px solid var(--line-strong); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft);
  transition:border-color .18s ease, color .18s ease;
}
.social-badge svg{width:18px; height:18px;}
.social-badge:hover{border-color:var(--green-700); color:var(--green-700);}
.social-badge.ig:hover{border-color:#c6367e; color:#c6367e;}
.social-badge.tt:hover{border-color:#12c2c2; color:#12c2c2;}
.social-badge.fb:hover{border-color:#1877f2; color:#1877f2;}
.social-badge.wa:hover{border-color:#25d366; color:#25d366;}
.foot-bottom p{font-size:.78rem; color:var(--ink-faint);}
.foot-links{display:flex; gap:20px;}
.foot-links a{font-size:.78rem; color:var(--ink-faint);}
.foot-links a:hover{color:var(--ink);}
@media(max-width:820px){ .foot-top{grid-template-columns:1fr 1fr; gap:32px;} }
@media(max-width:560px){ .foot-top{grid-template-columns:1fr;} }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--green-700); outline-offset:2px;
}

/* page hero (non-home pages) */
.page-hero{padding:64px 0 20px; position:relative; overflow:hidden;}
.page-hero::before{
  content:''; position:absolute; top:-110px; left:-140px; width:420px; height:420px;
  background:radial-gradient(circle, var(--green-300) 0%, transparent 72%); opacity:.35; pointer-events:none; z-index:0;
}
.page-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(var(--line-strong) 1px, transparent 1px); background-size:28px 28px;
  -webkit-mask-image:linear-gradient(to bottom, black, transparent 80%); mask-image:linear-gradient(to bottom, black, transparent 80%);
}
.page-hero > *{position:relative; z-index:1;}
.page-hero h1, .page-hero p, .page-hero .kicker{max-width:100%;}
.page-hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
.page-hero-grid .kicker, .page-hero-grid h1{position:relative; z-index:1;}
@media(max-width:900px){ .page-hero-grid{grid-template-columns:1fr; gap:28px;} }

/* small abstract graphic panel reused on interior page heroes */
.mini-visual{aspect-ratio:1/1; position:relative; z-index:1;}

/* editorial index numerals behind case studies */
.cs-media{position:relative;}
.cs-index{
  position:absolute; top:14px; left:14px; z-index:2;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:3px;
  font-size:.88rem; font-weight:600; color:var(--ink); pointer-events:none; user-select:none;
}
.case-study{position:relative;}

.page-hero h1{font-size:clamp(2rem,4vw,2.8rem); max-width:20ch; margin-bottom:18px;}
.page-hero p{font-size:1.05rem; max-width:58ch;}

/* reusable ambient texture for any section that needs a bit more life */
.bg-texture{position:relative; overflow:hidden;}
.bg-texture::before{
  content:''; position:absolute; top:-110px; left:-140px; width:420px; height:420px;
  background:radial-gradient(circle, var(--green-300) 0%, transparent 72%); opacity:.3; pointer-events:none; z-index:0;
}
.bg-texture::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(var(--line-strong) 1px, transparent 1px); background-size:28px 28px;
  -webkit-mask-image:linear-gradient(to bottom, black, transparent 80%); mask-image:linear-gradient(to bottom, black, transparent 80%);
}
.bg-texture > *{position:relative; z-index:1;}