/* ========================================================================
   Kaebe Custom Projects — shared site stylesheet
   Design system extracted from the home page (index.html) + interior-page
   components (page hero, prose, QC phases, divisions, gallery, form).
   ======================================================================== */
:root{
  --teal:#1f3a44;
  --teal-deep:#152830;
  --ink:#0a1216;
  --burnt:#e76f51;
  --coral:#f4a261;
  --sand:#e9c46a;
  --bone:#f7efe0;
  --bone-deep:#ead9ba;
  --line:rgba(247,239,224,.16);
  --line-strong:rgba(247,239,224,.34);

  --serif:'DM Serif Display', 'Times New Roman', serif;
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --sans:'Manrope', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  --maxw:1480px;
  --gutter:clamp(20px, 4vw, 64px);
}

*{box-sizing:border-box; margin:0; padding:0;}
html, body{background:var(--ink); color:var(--bone); overflow-x:hidden;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; position:relative;
}
/* film grain */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:200;
  opacity:.12; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
::selection{background:var(--burnt); color:var(--ink);}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}

/* typography */
.serif{font-family:var(--serif); font-weight:400; letter-spacing:-0.025em; line-height:.92;}
.serif em{font-style:italic; color:var(--burnt);}
.display{font-family:var(--display); font-weight:800; letter-spacing:-0.04em; line-height:.88; text-transform:uppercase;}
.display em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--burnt); text-transform:none; letter-spacing:-0.02em;}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--coral); font-weight:500; display:inline-flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:30px; height:1px; background:var(--burnt);}
.lead{font-family:var(--sans); font-size:clamp(17px, 1.4vw, 21px); line-height:1.55; font-weight:300; color:rgba(247,239,224,.82);}

/* ============ NAV ============ */
nav.top{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  transition: background .4s, padding .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
nav.top.scrolled{
  background: rgba(10,18,22,.78);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding:12px var(--gutter); border-bottom-color:var(--line);
}
.brand{display:flex; align-items:center; gap:16px;}
.brand-mark{display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.brand-mark img{height:80px; width:auto; object-fit:contain; filter: drop-shadow(0 0 0.5px rgba(247,239,224,.6)); transition: height .4s;}
nav.top.scrolled .brand-mark img{height:60px;}
nav.top ul{display:flex; list-style:none; gap:30px; justify-content:flex-end; align-items:center;}
nav.top ul a{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,239,224,.7); padding:8px 0; position:relative; transition:.25s;}
nav.top ul a::after{content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px; background:var(--burnt); transition: right .35s cubic-bezier(.2,.7,.2,1);}
nav.top ul a:hover{color:var(--bone);}
nav.top ul a:hover::after, nav.top ul a.active::after{right:0;}
nav.top ul a.active{color:var(--bone);}

.cta-pill{
  display:inline-flex; align-items:center; gap:12px; padding:13px 20px 13px 22px;
  background:var(--burnt); color:var(--ink);
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  border-radius:999px; border:1px solid var(--burnt);
  transition:.3s; cursor:pointer; position:relative; overflow:hidden;
}
.cta-pill::before{content:""; position:absolute; inset:0; background:var(--coral); transform:translateY(101%); transition: transform .4s cubic-bezier(.4,0,.2,1);}
.cta-pill > *{position:relative; z-index:1;}
.cta-pill:hover::before{transform:translateY(0);}
.cta-pill .arr{width:14px; height:14px; transition: transform .35s;}
.cta-pill:hover .arr{transform: translateX(4px) rotate(-45deg);}
.cta-pill.ghost{background:transparent; color:var(--bone); border-color:var(--line-strong);}
.cta-pill.ghost::before{background:var(--burnt);}
.cta-pill.ghost:hover{color:var(--ink);}

/* ============ MOBILE NAV TOGGLE ============ */
.brand{position:relative; z-index:101;}
.nav-toggle{
  display:none; width:46px; height:42px; flex-shrink:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:rgba(247,239,224,.05); border:1px solid var(--line-strong);
  border-radius:10px; cursor:pointer; position:relative; z-index:101;
  -webkit-tap-highlight-color:transparent; transition:border-color .3s, background .3s;
}
.nav-toggle:hover{border-color:var(--burnt);}
.nav-toggle span{display:block; width:20px; height:1.6px; background:var(--bone); border-radius:2px; transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s;}
nav.top.menu-open .nav-toggle span:nth-child(1){transform:translateY(6.6px) rotate(45deg);}
nav.top.menu-open .nav-toggle span:nth-child(2){opacity:0;}
nav.top.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg);}

/* ============ HERO (home) ============ */
.hero{position:relative; min-height:100vh; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end;}
.hero-img-wrap{position:absolute; inset:0; z-index:-2; overflow:hidden;}
.hero-img-wrap img{width:100%; height:120%; object-fit:cover; object-position:center; filter: saturate(.7) contrast(1.08) brightness(.82); will-change: transform;}
.hero-img-wrap::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(231,111,81,.4), transparent 70%), linear-gradient(180deg, rgba(10,18,22,.55) 0%, rgba(10,18,22,.4) 40%, rgba(10,18,22,.92) 100%);}
.hero-content{position:relative; z-index:1; padding: 0 var(--gutter) 80px; display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:end;}
.hero-meta-top{position:absolute; top:120px; left:var(--gutter); right:var(--gutter); display:flex; justify-content:space-between; gap:24px; font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(247,239,224,.7); z-index:1;}
.hero-meta-top .right{text-align:right;}
.hero-meta-top .right b{color:var(--coral); font-weight:500;}
.tagline{font-family:var(--mono); font-size:13px; letter-spacing:.5em; text-transform:uppercase; color:var(--burnt); font-weight:600; display:flex; align-items:center; gap:14px; margin-bottom:32px;}
.tagline::before{content:""; width:40px; height:1px; background:var(--burnt);}
.hero h1{font-size: clamp(56px, 11vw, 180px);}
.hero-right .sub{font-family:var(--serif); font-weight:400; font-size: clamp(22px, 2.2vw, 32px); line-height:1.15; letter-spacing:-0.015em; color:var(--bone); margin-bottom:30px; max-width:30ch;}
.hero-right .sub em{font-style:italic; color:var(--coral);}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.scroll-cue{position:absolute; bottom:30px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(247,239,224,.55); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2; pointer-events:none;}
.scroll-cue::after{content:""; width:1px; height:30px; background:var(--coral); animation: scrollPulse 2s ease-in-out infinite; transform-origin: top;}
@keyframes scrollPulse{0%,100%{transform: scaleY(0.4); opacity:.4;} 50%{transform: scaleY(1); opacity:1;}}

/* ============ PAGE HERO (interior pages) ============ */
.pagehero{position:relative; padding: clamp(150px,20vh,230px) var(--gutter) clamp(60px,8vw,110px); overflow:hidden; isolation:isolate; border-bottom:1px solid var(--line);}
.pagehero.img-bg .ph-img{position:absolute; inset:0; z-index:-2; overflow:hidden;}
.pagehero.img-bg .ph-img img{width:100%; height:120%; object-fit:cover; filter:saturate(.7) contrast(1.08) brightness(.6);}
.pagehero.img-bg::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,18,22,.6), rgba(10,18,22,.9));}
.pagehero .wrap{max-width:var(--maxw); margin:0 auto;}
.pagehero .num{font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--coral); display:flex; align-items:center; gap:14px; margin-bottom:26px;}
.pagehero .num::before{content:""; width:36px; height:1px; background:var(--burnt);}
.pagehero h1{font-size: clamp(44px, 8vw, 120px); max-width:16ch;}
.pagehero .ph-lead{font-family:var(--serif); font-size:clamp(20px,2.2vw,32px); line-height:1.18; letter-spacing:-0.015em; color:var(--bone); max-width:34ch; margin-top:28px;}
.pagehero .ph-lead em{font-style:italic; color:var(--coral);}

/* ============ IMAGE BLOCK ============ */
.imgblock{position:relative; height: clamp(420px, 75vh, 880px); overflow:hidden; isolation:isolate;}
.imgblock img{width:100%; height:115%; object-fit:cover; object-position:center; filter: saturate(.75) contrast(1.06) brightness(.92); will-change: transform;}
.imgblock::after{content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(10,18,22,.35) 0%, transparent 30%, transparent 60%, rgba(10,18,22,.65) 100%);}
.imgblock .cap{position:absolute; top:28px; left:var(--gutter); z-index:1; font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--bone); background:rgba(10,18,22,.55); padding:10px 14px; backdrop-filter:blur(8px);}
.imgblock .ix{position:absolute; bottom:28px; right:var(--gutter); z-index:1; font-family:var(--display); font-weight:700; font-size:clamp(60px, 9vw, 132px); line-height:1; letter-spacing:-0.04em; color:rgba(247,239,224,.22);}

/* ============ TEXT SECTION ============ */
.sec{padding: clamp(90px, 12vw, 160px) var(--gutter); position:relative;}
.sec.teal{background:var(--teal);}
.sec.deep{background:var(--teal-deep);}
.sec.ink{background:var(--ink);}
.sec .wrap{max-width:var(--maxw); margin:0 auto;}
.sec-grid{display:grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 90px); align-items:start;}
.sec-grid .l{position:sticky; top:120px; align-self:start;}
.sec-grid .l .num{font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--coral); display:flex; align-items:center; gap:14px; margin-bottom:24px;}
.sec-grid .l .num::before{content:""; width:36px; height:1px; background:var(--burnt);}
.sec-grid .l h2{font-size: clamp(44px, 6vw, 96px); letter-spacing:-0.025em;}
.sec-grid .r p{font-family:var(--sans); font-weight:300; font-size: clamp(17px, 1.4vw, 22px); line-height:1.55; color:rgba(247,239,224,.82); max-width:54ch; margin-bottom:1.1em;}
.sec-grid .r p.lead{font-family:var(--serif); font-weight:400; font-size: clamp(22px, 2.4vw, 36px); line-height:1.15; letter-spacing:-0.015em; color:var(--bone); max-width:30ch; margin-bottom:32px;}
.sec-grid .r p.lead em{font-style:italic; color:var(--coral);}

/* three pillars row */
.pillars{display:grid; grid-template-columns: repeat(3, 1fr); gap:0; margin-top: clamp(40px, 5vw, 70px); border-top:1px solid var(--line-strong);}
.pillar{padding:36px 28px 32px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:18px; min-height:240px; transition:.4s; position:relative;}
.pillar:last-child{border-right:none;}
.pillar:hover{background:rgba(231,111,81,.05);}
.pillar::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--burnt); transform: scaleX(0); transform-origin:left; transition: transform .5s cubic-bezier(.2,.7,.2,1);}
.pillar:hover::before{transform: scaleX(1);}
.pillar .ix{font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; color:var(--coral); text-transform:uppercase;}
.pillar h4{font-family:var(--serif); font-weight:400; font-size: clamp(22px, 2.4vw, 30px); line-height:1.05; letter-spacing:-0.015em;}
.pillar h4 em{font-style:italic; color:var(--coral);}
.pillar p{font-size:14px; line-height:1.55; color:rgba(247,239,224,.7); margin:0;}

/* trademarked methodology list */
.method-list{list-style:none; margin-top:36px; border-top:1px solid var(--line-strong);}
.method-list li{display:grid; grid-template-columns: 60px 1fr; padding:20px 0; border-bottom:1px solid var(--line); gap:20px; align-items:baseline;}
.method-list li .n{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--coral);}
.method-list li .t{font-family:var(--serif); font-weight:400; font-size:22px; letter-spacing:-0.015em; line-height:1.15;}
.method-list li .t em{font-style:italic; color:var(--coral);}
.method-list li .t sup{font-family:var(--sans); font-size:.5em; color:var(--burnt); vertical-align:super;}
.method-list li .d{grid-column:2; font-family:var(--sans); font-weight:300; font-size:15px; color:rgba(247,239,224,.7); margin-top:8px; max-width:60ch;}

/* ============ DIVISION DETAIL (What We Do) ============ */
.division{display:grid; grid-template-columns: 1fr 1.3fr; gap:clamp(30px,5vw,70px); padding: clamp(50px,7vw,90px) 0; border-bottom:1px solid var(--line); align-items:start;}
.division:last-of-type{border-bottom:none;}
.division .dl .dnum{font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--coral); text-transform:uppercase; margin-bottom:18px;}
.division .dl h3{font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.4vw,48px); line-height:1.02; letter-spacing:-0.02em;}
.division .dl h3 em{font-style:italic; color:var(--burnt);}
.division .dr p{font-family:var(--sans); font-weight:300; font-size:clamp(16px,1.3vw,19px); line-height:1.6; color:rgba(247,239,224,.82); max-width:56ch; margin-bottom:24px;}
.svc-list{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0 28px;}
.svc-list li{font-family:var(--sans); font-size:14.5px; color:rgba(247,239,224,.78); padding:11px 0; border-top:1px solid var(--line); display:flex; gap:12px; align-items:baseline;}
.svc-list li::before{content:""; width:6px; height:6px; flex-shrink:0; background:var(--burnt); border-radius:50%; transform:translateY(-2px);}

/* ============ PHASES (QC System) ============ */
.phases{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(40px,5vw,64px);}
.phase{background:var(--teal-deep); padding:30px 26px; min-height:200px; display:flex; flex-direction:column; gap:14px; transition:.4s;}
.phase:hover{background:rgba(231,111,81,.07);}
.phase .pn{font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--coral);}
.phase h4{font-family:var(--serif); font-weight:400; font-size:23px; letter-spacing:-0.015em; line-height:1.05;}
.phase ul{list-style:none; display:flex; flex-direction:column; gap:6px;}
.phase ul li{font-size:13.5px; color:rgba(247,239,224,.68); line-height:1.45;}

/* ============ STANDARD CHECKLIST (Moisture Standard) ============ */
.checks{display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; margin-top:36px; border-top:1px solid var(--line-strong);}
.checks li{list-style:none; font-family:var(--sans); font-size:15px; color:rgba(247,239,224,.8); padding:14px 0; border-bottom:1px solid var(--line); display:flex; gap:14px; align-items:baseline;}
.checks li .ck{font-family:var(--mono); font-size:11px; color:var(--burnt); flex-shrink:0;}

/* ============ GALLERY (Our Work) ============ */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.gtile{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--teal-deep); isolation:isolate;}
.gtile.tall{aspect-ratio:3/4;}
.gtile.wide{grid-column:span 2; aspect-ratio:auto;}
.gtile img{width:100%; height:100%; object-fit:cover; filter:saturate(.75) contrast(1.05) brightness(.9); transition:.6s;}
.gtile:hover img{transform:scale(1.04); filter:saturate(.9) contrast(1.05) brightness(1);}
.gtile .gcap{position:absolute; left:16px; bottom:14px; z-index:1; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone); background:rgba(10,18,22,.5); padding:7px 11px; backdrop-filter:blur(6px);}
.gtile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(10,18,22,.5)); pointer-events:none;}
.ph-note{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,239,224,.45); margin-top:26px;}

/* ============ FORM (Contact) ============ */
.cform{display:grid; gap:20px; max-width:560px; margin-top:8px;}
.cform .row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--coral);}
.field input, .field select, .field textarea{
  background:rgba(247,239,224,.04); border:1px solid var(--line-strong); color:var(--bone);
  font-family:var(--sans); font-size:15px; padding:13px 15px; border-radius:4px; transition:.25s;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--burnt); background:rgba(231,111,81,.06);}
.field textarea{resize:vertical; min-height:120px;}
.field select{appearance:none; cursor:pointer;}
.form-note{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:rgba(247,239,224,.5); margin-top:4px;}

/* contact cards */
.persons{display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-top:50px;}
.person{border:1px solid var(--line-strong); background:rgba(247,239,224,.03); padding:32px; display:grid; grid-template-columns: auto 1fr auto; gap:24px; align-items:center; transition:.4s;}
.person:hover{border-color:var(--burnt); background:rgba(231,111,81,.08); transform: translateY(-3px);}
.person:hover .glyph{background:var(--burnt); color:var(--bone);}
.person .glyph{width:60px; height:60px; flex-shrink:0; background:var(--bone); color:var(--ink); display:grid; place-items:center; font-family:var(--serif); font-weight:400; font-size:32px; border-radius:50%; transition:.4s;}
.person .info .name{font-family:var(--serif); font-size:24px; letter-spacing:-0.015em;}
.person .info .role{font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--coral); margin-top:6px;}
.person .info .lines{margin-top:12px; font-family:var(--mono); font-size:12.5px; color:var(--bone); line-height:1.7;}
.person .arr{color:rgba(247,239,224,.5); transition:.4s;}
.person:hover .arr{color:var(--burnt); transform:translate(5px,-5px);}

/* communities list */
.commgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:34px;}
.commgrid .c{background:var(--ink); padding:20px 22px; transition:.35s;}
.commgrid .c:hover{background:rgba(231,111,81,.06);}
.commgrid .c .cty{font-family:var(--serif); font-size:20px; letter-spacing:-0.01em;}
.commgrid .c .pv{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--coral); margin-top:4px;}

/* CTA banner reusable */
.sec.cta-bg{background: linear-gradient(180deg, var(--ink) 0%, var(--teal-deep) 60%, var(--burnt) 220%); position:relative; overflow:hidden;}
.sec.cta-bg::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 70% 50% at 50% 100%, rgba(244,162,97,.32), transparent 70%);}
.sec.cta-bg .wrap{position:relative;}

/* ============ FOOTER ============ */
footer{background:var(--ink); padding: 60px var(--gutter) 36px; border-top:1px solid var(--line);}
footer .wrap{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:48px; padding-bottom:50px; border-bottom:1px solid var(--line);}
footer h5{font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--burnt); margin-bottom:18px;}
footer ul{list-style:none;}
footer ul li{padding:5px 0; font-size:14px; color:rgba(247,239,224,.7);}
footer ul li a:hover{color:var(--burnt);}
footer .lockup{display:flex; align-items:center; gap:16px; margin-bottom:20px;}
footer .lockup .mk{display:flex; align-items:center; justify-content:center;}
footer .lockup .mk img{height:68px; width:auto; object-fit:contain;}
footer p{color:rgba(247,239,224,.6); max-width:34ch; font-size:14px; line-height:1.55;}
.credit a{color:var(--coral); transition:.25s;}
.credit a:hover{color:var(--burnt);}
.credit{max-width:var(--maxw); margin: 28px auto 0; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(247,239,224,.4);}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px){
  .nav-toggle{display:flex;}
  nav.top ul{
    position:fixed; inset:0;
    background:rgba(10,18,22,.97);
    backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
    flex-direction:column; justify-content:center; align-items:flex-start;
    gap:4px; padding:120px var(--gutter) 60px; margin:0;
    transform:translateX(100%); transition:transform .5s cubic-bezier(.2,.7,.2,1);
    z-index:80; pointer-events:none;
  }
  nav.top.menu-open ul{transform:translateX(0); pointer-events:auto;}
  nav.top ul li{width:100%; border-bottom:1px solid var(--line);}
  nav.top ul li:last-child{border-bottom:none; margin-top:24px;}
  nav.top ul a{font-family:var(--serif); font-size:clamp(30px,8vw,46px); letter-spacing:-0.02em; text-transform:none; color:var(--bone); padding:16px 0; display:block;}
  nav.top ul a::after{display:none;}
  nav.top ul a.active{color:var(--burnt);}
  nav.top ul a.cta-pill{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); display:inline-flex; padding:15px 24px;}
  .hero{min-height:auto; justify-content:flex-start; padding-top:130px; padding-bottom:56px;}
  .hero-meta-top{position:static; left:auto; right:auto; top:auto; margin-bottom:26px;}
  .scroll-cue{display:none;}
  .hero-content{grid-template-columns:1fr; gap:26px;}
  .hero h1{font-size:clamp(36px,10.5vw,72px); line-height:1.02;}
  .sec-grid{grid-template-columns:1fr; gap:30px;}
  .sec-grid .l{position:static;}
  .pillars{grid-template-columns:1fr; border-top:1px solid var(--line-strong);}
  .pillar{border-right:none; border-bottom:1px solid var(--line); min-height:200px;}
  .division{grid-template-columns:1fr; gap:24px;}
  .phases{grid-template-columns:1fr 1fr;}
  .persons{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr 1fr;}
  .checks{grid-template-columns:1fr;}
  footer .wrap{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 640px){
  .hero-meta-top{flex-direction:column; gap:6px;}
  .hero-meta-top .right{text-align:left;}
  .tagline{font-size:11px;}
  .svc-list{grid-template-columns:1fr;}
  .phases{grid-template-columns:1fr;}
  .cform .row{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr;}
  .gtile.wide{grid-column:span 1;}
  .person{grid-template-columns: auto 1fr; gap:18px; padding:24px;}
  .person .arr{display:none;}
  footer .wrap{grid-template-columns:1fr;}
  .imgblock{height: 56vh;}
}