/* ═══ DIRECTION B — "AFTER HOURS" ═══
   Cinematic dark. The photograph does the work. Scroll-driven Method.   */

.after body,body.after{background:var(--midnight);}

/* ── HERO ── */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; padding-bottom:clamp(3rem,7vh,6rem);}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1.12); animation:heroZoom 18s var(--ease-out) forwards;}
@keyframes heroZoom{to{transform:scale(1);}}
.hero-bg::after{content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,13,10,.58) 0%, rgba(15,13,10,.12) 32%, rgba(15,13,10,.5) 72%, rgba(15,13,10,.95) 100%),
    radial-gradient(120% 80% at 70% 30%, transparent 40%, rgba(15,13,10,.55) 100%);}
.hero-grain{position:absolute; inset:0; z-index:1; opacity:.05; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.hero .wrap{position:relative; z-index:2; width:100%;}
.hero-eyebrow{margin-bottom:1.6rem;}
.hero h1{font-size:clamp(2.9rem,8.2vw,8.2rem); line-height:.96; letter-spacing:-.02em; max-width:16ch;}
.hero h1 .ln{display:block; overflow:hidden;}
/* Hero entrance — CSS auto-play, no JS/preanim gate (so the LCP element isn't
   held at opacity:0 until script runs). Headline is transform-only → paints
   from frame 1 (LCP-friendly); sub/actions/meta fade up on load. */
@keyframes ah-line-rise { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes ah-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero h1 .ln > span{display:block; animation:ah-line-rise 1.1s var(--ease-out) both;}
.hero h1 .ln:nth-child(2) > span{animation-delay:.12s;}
.hero h1 .ln:nth-child(3) > span{animation-delay:.24s;}
.hero-sub{max-width:46ch; color:var(--mist); font-size:clamp(.95rem,1.4vw,1.12rem); line-height:1.8;
  margin-top:2rem; animation:ah-fade-up .8s var(--ease-out) .25s both;}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.6rem;
  animation:ah-fade-up .8s var(--ease-out) .4s both;}
.hero-meta{position:absolute; right:var(--pad); bottom:clamp(3rem,7vh,6rem); z-index:2;
  display:flex; flex-direction:column; gap:1.4rem; text-align:right; align-items:flex-end;
  animation:ah-fade-up .9s var(--ease-out) .55s both;}
.hero-meta .v{font-family:var(--serif); font-size:2.6rem; color:var(--gold); line-height:1;}
.hero-meta .k{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist); margin-top:.3rem;}
.hero-meta .item{position:relative; padding-right:1.2rem; border-right:1px solid var(--gold-line);}

.scrollcue{position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--mist-dim);
  font-size:.56rem; letter-spacing:.28em; text-transform:uppercase;}
.scrollcue .ln{width:1px; height:40px; background:linear-gradient(var(--gold),transparent);
  animation:cueline 2.4s var(--ease) infinite;}
@keyframes cueline{0%,100%{transform:scaleY(.4); transform-origin:top;}50%{transform:scaleY(1);}}

/* ── STATEMENT ── */
.statement{padding:clamp(7rem,16vh,13rem) 0;}
.statement .big{font-family:var(--serif); font-size:clamp(1.9rem,4.4vw,4rem); line-height:1.18; font-weight:300;
  max-width:24ch; letter-spacing:-.01em;}
.statement .big .dim{color:var(--mist-dim);}
.statement .meta{display:flex; gap:3rem; margin-top:3.4rem; flex-wrap:wrap; align-items:baseline;}
.statement .meta span{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist);}

/* ═══ SCROLL-DRIVEN NEST METHOD (signature) ═══ */
.method{position:relative; background:var(--midnight-2);
  border-top:1px solid var(--steel-line); border-bottom:1px solid var(--steel-line);}
.method-sticky{position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column;}
.method-track{height:300vh;} /* 4 stages — tightened from 400vh to remove trailing black scroll */

.method-head{position:absolute; top:clamp(5rem,12vh,8rem); left:0; right:0; z-index:5;}
.method-head .wrap{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;}
.method-counter{font-family:var(--serif); font-size:.95rem; color:var(--mist); letter-spacing:.1em;}
.method-counter b{color:var(--gold); font-weight:300; font-size:1.4rem;}

/* giant morphing letter — copper-metallic, layered */
.method-letter{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1;}
.method-letter::before{content:''; position:absolute; width:52vmin; height:52vmin; border-radius:50%;
  background:radial-gradient(circle, rgba(184,115,51,.14), transparent 66%); filter:blur(30px); pointer-events:none;}
.method-letter span{font-family:var(--serif); font-weight:300; font-size:min(82vh,58vw); line-height:1;
  position:absolute; opacity:0; transform:scale(1.08); transition:opacity .8s var(--ease), transform 1s var(--ease);
  color:transparent; -webkit-text-stroke:1.4px rgba(184,115,51,.20);}
.method-letter span.act{opacity:1; transform:none; -webkit-text-stroke:1.6px rgba(184,115,51,.46);}

/* faint blueprint backdrop (replaces old photos) */
.method-grid{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(90deg, var(--steel-line) 1px, transparent 1px);
  background-size:calc(100% / 12) 100%; opacity:.45;
  -webkit-mask-image:radial-gradient(125% 95% at 50% 50%, #000 28%, transparent 82%);
  mask-image:radial-gradient(125% 95% at 50% 50%, #000 28%, transparent 82%);}

.method-stages{position:relative; z-index:4; margin:auto 0; width:100%;}
.method-stage{position:absolute; left:0; right:0; opacity:0; transform:translateY(40px);
  transition:opacity .6s var(--ease), transform .7s var(--ease); pointer-events:none;}
.method-stage.act{opacity:1; transform:none; pointer-events:auto;}
.method-stage .wrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center;}
.method-stage .week{font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem;}
.method-stage h2{font-size:clamp(2.6rem,6vw,5rem);}
.method-stage h2 b{font-weight:300; color:var(--gold); font-style:italic;}
.method-stage p{color:var(--mist); max-width:42ch; margin-top:1.6rem; font-size:1.02rem;}
.method-stage .pts{margin-top:1.8rem; display:flex; flex-direction:column; gap:.8rem;}
.method-stage .pts div{display:flex; gap:.9rem; align-items:baseline; color:var(--text); font-size:.9rem;}
.method-stage .pts div::before{content:''; width:6px; height:6px; background:var(--gold); flex:none; transform:translateY(-1px);}

/* progress rail */
.method-rail{position:absolute; bottom:clamp(3rem,8vh,5rem); left:0; right:0; z-index:5;}
.method-rail .wrap{display:flex; gap:1px;}
.method-rail .seg{flex:1; height:2px; background:var(--steel-line); position:relative; overflow:hidden;}
.method-rail .seg i{position:absolute; inset:0; background:var(--gold); transform:scaleX(0); transform-origin:left;}
.method-rail .labels{display:flex; gap:1px; margin-top:1rem;}
.method-rail .labels span{flex:1; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mist-dim); transition:color .4s;}
.method-rail .labels span.act{color:var(--gold);}

/* ── SERVICES (editorial list) ── */
.svc{padding:clamp(6rem,12vh,9rem) 0;}
.sec-head{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:end; margin-bottom:4rem;}
.sec-head h2{margin-top:1.4rem;}
.sec-head p{color:var(--mist); max-width:40ch; align-self:end;}
.svc-list{border-top:1px solid var(--steel-line);}
.svc-row{display:grid; grid-template-columns:auto 1.4fr 2fr auto; gap:2rem; align-items:center;
  padding:1.9rem 0; border-bottom:1px solid var(--steel-line); position:relative; transition:padding .4s var(--ease);}
.svc-row::before{content:''; position:absolute; left:-100vw; right:-100vw; top:0; bottom:0; z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(184,115,51,.05),transparent); opacity:0; transition:opacity .4s;}
.svc-row:hover{padding-left:1.4rem;}
.svc-row:hover::before{opacity:1;}
.svc-row .n{font-family:var(--serif); font-size:1.1rem; color:var(--gold);}
.svc-row .nm{font-family:var(--serif); font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.1;}
.svc-row .nm em{font-style:italic;}
.svc-row .d{color:var(--mist); font-size:.86rem; line-height:1.7;}
.svc-row .d strong{color:var(--text); font-weight:500;}
.svc-row .act{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist);
  display:inline-flex; gap:.5rem; align-items:center; white-space:nowrap; transition:color .3s;}
.svc-row:hover .act{color:var(--gold);}
.svc-row:hover .act .ar{transform:translateX(4px);}
.svc-row .act .ar{transition:transform .3s;}

/* ── WORK ── */
.work{padding:clamp(6rem,12vh,9rem) 0; background:var(--midnight-2); border-top:1px solid var(--steel-line);}
.cases{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--steel-line);
  border:1px solid var(--steel-line);}
.case{background:var(--midnight-2); padding:0; overflow:hidden;}
.case-img{aspect-ratio:4/3; overflow:hidden;}
.case-img img{width:100%; height:100%; object-fit:cover; filter:brightness(.78) saturate(.9);
  transition:transform 1.2s var(--ease), filter .6s;}
.case:hover .case-img img{transform:scale(1.06); filter:brightness(.92) saturate(1);}
.case-body{padding:1.8rem;}
.case-meta{display:flex; justify-content:space-between; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist-dim);}
.case-meta .t{color:var(--gold);}
.case h3{font-size:1.5rem; margin-top:1.1rem; line-height:1.18;}
.case h3 em{font-style:italic;}
.case-res{display:flex; gap:2rem; margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--steel-line);}
.case-res .rn{font-family:var(--serif); font-size:1.8rem; color:var(--gold);}
.case-res .rl{font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mist-dim); margin-top:.2rem;}

/* ── SENTRIX ── */
.sentrix{padding:clamp(6rem,13vh,10rem) 0; position:relative; overflow:hidden; background:var(--midnight);}

.sentrix-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; position:relative; z-index:2;}
.sx-suite{font-family:var(--serif); display:inline-flex; align-items:baseline; font-weight:300;}
.sx-suite img{width:.86em; height:.86em; transform:translateY(.06em); margin:0 -.04em;}
.sx-cards{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--steel-line); border:1px solid var(--steel-line);}
.sx-card{background:var(--midnight-2); padding:1.6rem; min-height:150px; display:flex; flex-direction:column;
  justify-content:space-between; transition:background .4s;}
.sx-card:hover{background:var(--slate);}
.sx-card .tag{font-family:var(--serif); font-size:2rem; color:var(--gold); line-height:1;}
.sx-card .nm{font-family:var(--serif); font-size:1.15rem; margin-top:1rem;}
.sx-card .nm em{font-style:normal; color:var(--gold);}
.sx-card .dsc{font-size:.78rem; color:var(--mist); line-height:1.6; margin-top:.5rem;}
.sx-stat{font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist-dim); margin-top:1rem;}
.sx-stat.live{color:var(--status-live); display:inline-flex; align-items:center; gap:.4rem;}
.sx-stat.live::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--status-live);
  animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* ── DIAGNOSTIC ── */
.diag{position:relative; overflow:hidden; border-top:1px solid var(--steel-line);}
.diag-grid{display:grid; grid-template-columns:1fr 1fr; min-height:62vh;}
.diag-photo{position:relative; overflow:hidden;}
.diag-photo img{width:100%; height:100%; object-fit:cover; min-height:100%;}
.diag-photo::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 40%,var(--midnight) 100%);}
.diag-body{display:flex; flex-direction:column; justify-content:center; padding:clamp(3rem,7vw,6rem);}
.diag-body h2{margin-top:1.4rem;}
.diag-body p{color:var(--mist); max-width:40ch; margin-top:1.4rem;}
.diag-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--steel-line);
  border:1px solid var(--steel-line); margin-top:2.4rem; max-width:440px;}
.diag-stats div{background:var(--midnight); padding:1.1rem;}
.diag-stats .n{font-family:var(--serif); font-size:1.8rem; color:var(--gold);}
.diag-stats .l{font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist-dim); margin-top:.2rem;}

/* ── ABOUT ── */
.about{padding:clamp(6rem,12vh,9rem) 0; border-top:1px solid var(--steel-line);}
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2.5rem,6vw,6rem); align-items:center;}
.about-photo{position:relative;}
.about-photo img{width:100%; height:auto; display:block; filter:saturate(.97);}
.about-photo .cap{position:absolute; bottom:0; left:0; right:0; padding:1.2rem 1.4rem;
  background:linear-gradient(transparent,rgba(15,13,10,.92)); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mist);}
.about-body h2{margin-top:1.4rem;}
.about-body p{color:var(--mist); margin-top:1.4rem;}
.ped{margin-top:2.4rem; border-top:1px solid var(--steel-line); padding-top:1.6rem;}
.ped h3{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 1rem;}
.ped ul{list-style:none; margin:0; padding:0; display:grid; gap:.7rem;}
.ped li{font-size:.86rem; color:var(--mist); display:flex; gap:.8rem;}
.ped li b{color:var(--text); font-weight:400; font-family:var(--serif); font-size:1rem;}

/* ── CTA BAND ── */
.cta{position:relative; padding:clamp(6rem,14vh,11rem) 0; text-align:center; overflow:hidden;
  background:var(--black-deep);}
.cta-water{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:var(--serif);
  font-size:min(34vw,30rem); color:rgba(184,115,51,.035); pointer-events:none; white-space:nowrap; line-height:1;}
.cta .inner{position:relative; z-index:2;}
.cta h2{font-size:clamp(2.4rem,6vw,5rem); max-width:16ch; margin:1.6rem auto 0;}
.cta p{color:var(--mist); max-width:42ch; margin:1.6rem auto 0;}
.cta-actions{display:flex; gap:1rem; justify-content:center; margin-top:2.6rem; flex-wrap:wrap;}

/* ── CONTACT ── */
.contact{padding:clamp(5rem,10vh,8rem) 0; background:var(--midnight-2); border-top:1px solid var(--steel-line);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem);}
.contact-info h2{margin-top:1.4rem; max-width:18ch;}
.contact-info p{color:var(--mist); margin-top:1.4rem; max-width:42ch;}
.contact-list{margin-top:2.4rem; display:flex; flex-direction:column; gap:1rem;}
.contact-list a,.contact-list span{font-family:var(--serif); font-size:1.4rem; color:var(--text); transition:color .3s;}
.contact-list a:hover{color:var(--gold);}
.contact-form{display:flex; flex-direction:column; gap:1px; background:var(--steel-line); border:1px solid var(--steel-line);}
.contact-form .frow{display:grid; grid-template-columns:1fr 1fr; gap:1px;}
.contact-form input,.contact-form select,.contact-form textarea{
  background:var(--midnight); border:0; padding:1.1rem 1.2rem; color:var(--text); font-family:var(--sans);
  font-size:.9rem; font-weight:300; width:100%;}
.contact-form textarea{min-height:120px; resize:vertical;}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--mist-dim);}
.contact-form :focus{outline:1px solid var(--gold); outline-offset:-1px;}
.contact-form .submit{background:var(--midnight); padding:1.2rem;}
.contact-note{font-size:.7rem; color:var(--mist-dim); padding:0 1.2rem 1rem; background:var(--midnight);}

@media(max-width:900px){
  .method-stage .wrap,.sentrix-grid,.diag-grid,.about-grid,.contact-grid,.sec-head{grid-template-columns:1fr;}
  .cases,.sx-cards{grid-template-columns:1fr;}
  .svc-row{grid-template-columns:auto 1fr; gap:.6rem 1.2rem;}
  .svc-row .d{grid-column:2;} .svc-row .act{grid-column:2; justify-self:start;}
  .diag-photo{min-height:40vh;} .hero-meta{position:static; flex-direction:row; text-align:left; align-items:flex-start; margin-top:2.4rem; flex-wrap:wrap;}
  .hero-meta .item{border-right:0; border-left:1px solid var(--gold-line); padding-left:1rem; padding-right:0;}
}