/* ============ Consultations — scroll story ============ */

:root{
  --ink:#0a0a0a;
  --ink-2:#141414;
  --paper:#f6f5f2;
  --paper-card:#eceae5;
  --line:#ffffff;
  --muted:#8a8a86;
  --muted-dark:#6b6b67;
  --accent:#0a0a0a;          /* monochrome accent */
  --fast: cubic-bezier(.16,1,.3,1);
  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; }
body{
  font-family:var(--sans);
  background:#0a0a0a;
  color:#fff;
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:var(--mono); }

/* generic image placeholder */
.ph{
  position:relative;
  background-color:#dad8d2;
  background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 8px, rgba(0,0,0,0) 8px 16px);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.ph[data-dark]{
  background-color:#1b1b1b;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 8px, rgba(255,255,255,0) 8px 16px);
}
.ph > .ph-tag{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(0,0,0,.4); padding:4px 8px;
  border:1px dashed rgba(0,0,0,.22); border-radius:4px;
  background:rgba(255,255,255,.35);
}
.ph[data-dark] > .ph-tag{ color:rgba(255,255,255,.45); border-color:rgba(255,255,255,.2); background:rgba(0,0,0,.25); }

/* ============ shared act scaffold ============ */
.act{ position:relative; }
.pin{ position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden; }
.wrap{ max-width:1280px; margin:0 auto; padding:0 6vw; width:100%; }

/* ====================================================== */
/* ACT 1 — black hero                                     */
/* ====================================================== */
#act1{ height:165vh; background:#0a0a0a; position:relative; z-index:1; }
#act1 .pin{ background:#0a0a0a; }
.hero-stage{ position:absolute; inset:0; display:flex; align-items:flex-start; }
.hero-copy{ position:relative; z-index:3; padding-top:15vh; transition:opacity .1s linear; }
.eyebrow{
  font-family:var(--mono); font-size:13px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--muted); margin-bottom:26px;
}
.hero-issue{
  font-weight:800; line-height:.9; letter-spacing:-.03em;
  font-size:clamp(80px, 18vw, 280px);
  color:#fff;
}
.hero-sub{
  margin-top:30px; display:flex; flex-direction:column; gap:14px;
  font-weight:500; letter-spacing:-.01em;
  font-size:clamp(20px, 2.4vw, 34px);
  color:#5d5d5a;
}
.hero-sub span{ display:flex; align-items:baseline; gap:14px; transition:color .4s var(--fast); }
.hero-sub span::before{
  content:''; width:9px; height:9px; border-radius:50%;
  background:currentColor; transform:translateY(-2px); flex:none; transition:background .4s var(--fast);
}
.hero-scrollcue{
  position:absolute; left:6vw; bottom:34px; z-index:3;
  font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:#555;
  display:flex; align-items:center; gap:10px;
}
.hero-scrollcue .bar{ width:46px; height:1px; background:#444; position:relative; overflow:hidden; }
.hero-scrollcue .bar::after{ content:''; position:absolute; inset:0; width:40%; background:#fff; animation:cue 2.2s var(--fast) infinite; }
@keyframes cue{ 0%{ transform:translateX(-120%);} 100%{ transform:translateX(280%);} }

/* hero header — "pwn-all" returns to the main site (← arrow reads as "back"),
   fades out as you scroll into the transition */
.hero-nav{
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; align-items:center; gap:16px;
  padding:30px 6vw;
  font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  opacity: calc(1 - clamp(0, var(--p1)/0.16, 1));
}
.brand-back{
  display:inline-flex; align-items:center; gap:9px;
  color:#fff; text-decoration:none;
  padding:9px 16px 9px 11px; border:1px solid rgba(255,255,255,.2); border-radius:999px;
  transition:background .3s var(--fast), border-color .3s var(--fast);
}
.brand-back:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.45); }
.brand-arrow{ width:15px; height:15px; flex:none; transition:transform .3s var(--fast); }
.brand-back:hover .brand-arrow{ transform:translateX(-4px); }
.brand-ctx{ color:#5d5d5a; }
@media (max-width:560px){ .brand-ctx{ display:none; } }

/* curly line svg (act1) — JS sets --l1x/--l1y so its start sits on the "?" dot;
   the rise + draw are pure-CSS scroll-driven animations (see @supports block) */
.line-svg{
  position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none;
  transform:translate(var(--l1x,0px), var(--l1y,0px));
}
.line-svg path{ fill:none; stroke:#fff; stroke-width:1.4; stroke-linecap:round; vector-effect:non-scaling-stroke; will-change:stroke-dashoffset, opacity; }
#line1{ stroke-dasharray:1; stroke-dashoffset:0; }   /* base: drawn (fallback if no scroll-timeline) */

/* straighten/expander: a thin vertical bar sitting on the line's axis that
   widens until its colour floods the screen */
.straight{
  position:absolute; top:0; bottom:0; left:50%; width:5px;
  background:var(--paper); z-index:4; transform-origin:center center;
  transform:translateX(-50%) scaleX(0); will-change:transform;
}

/* ====================================================== */
/* ACT 2 — white: problems / one solution                 */
/* ====================================================== */
#act2{ background:var(--paper); color:var(--ink); height:110vh; position:relative; z-index:2; }
#act2 .pin{ background:var(--paper); display:flex; align-items:center; overflow:visible; }
#act2 .pin > .wrap{ position:relative; z-index:3; }
/* while act2 rises into view the content is held fixed-centred (it appears in
   place via opacity, instead of scrolling up); released to flow once pinned */
#act2 .pin > .wrap.holding{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100%; max-width:1280px; padding:0 6vw; z-index:3; pointer-events:none;
}
.dot-clip{ position:absolute; inset:0; overflow:hidden; z-index:7; pointer-events:none; }
.a2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center; width:100%; }
.a2-copy .eyebrow{ color:var(--muted-dark); }
.a2-head{
  font-weight:800; letter-spacing:-.03em; line-height:.96;
  font-size:clamp(40px, 5.4vw, 86px); color:var(--ink);
}
.a2-head em{ font-style:normal; color:var(--muted); }
.a2-text{
  margin-top:30px; max-width:30ch;
  font-size:clamp(16px,1.25vw,19px); line-height:1.6; color:var(--muted-dark);
}
.a2-text .placeholder{
  display:inline-block; margin-top:18px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:#a7a49d; border:1px dashed #cdc9c0; border-radius:6px; padding:8px 12px;
}

/* vertical rotating slides (right column) — two independent masked scrollers */
.reel{ position:relative; z-index:3; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.reel-col-clip{
  position:relative; height:78vh; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
}
.reel-col{ position:absolute; top:0; left:0; right:0; display:flex; flex-direction:column; gap:20px; will-change:transform; }
.reel-card{
  flex:none; border-radius:20px; overflow:hidden; height:300px;
  box-shadow:0 18px 50px -28px rgba(0,0,0,.4);
}
.reel-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.reel-col[data-dir="up"]{ animation:reelUp 30s linear infinite; }
.reel-col[data-dir="down"]{ animation:reelDown 34s linear infinite; }
@keyframes reelUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes reelDown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }

/* second curly line (weaves under/over the cards) + dot */
.line2-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.line2-svg.behind{ z-index:2; }   /* below the cards */
.line2-svg.front{ z-index:5; }    /* above the cards */
.line2-svg path{ fill:none; stroke:#0a0a0a; stroke-width:1.4; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.dot{
  position:absolute; z-index:7; border-radius:50%;
  background:#0a0a0a; width:14px; height:14px;
  transform:translate(-50%,-50%); will-change:width,height;
  opacity:0; backface-visibility:hidden;
}

/* ====================================================== */
/* ACT 3 — services, dark, stacking                       */
/* ====================================================== */
#act3{ background:#0a0a0a; color:#fff; position:relative; z-index:3; }
.svc-head{ padding:18vh 0 4vh; }
.svc-head .eyebrow{ color:#6a6a66; }
.svc-head h2{
  font-weight:800; letter-spacing:-.03em; line-height:.98;
  font-size:clamp(34px,4.4vw,68px); max-width:16ch;
}
.svc-stack{ position:relative; isolation:isolate; }
.svc-card{
  position:sticky; top:14vh;
  background:var(--paper); color:var(--ink); border-radius:26px;
  padding:54px clamp(28px,4vw,64px);
  display:grid; grid-template-columns:1.1fr 1fr; gap:4vw; align-items:center;
  height:86dvh; overflow:hidden; margin-bottom:8vh;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
  transform-origin:center top;

}
.svc-num{ font-family:var(--mono); font-size:13px; letter-spacing:.2em; color:var(--muted-dark); }
.svc-card h3{
  margin-top:18px; font-weight:800; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(28px,3vw,46px);
}
.svc-card p{
  margin-top:20px; max-width:34ch; color:var(--muted-dark);
  font-size:clamp(15px,1.2vw,18px); line-height:1.6;
}
.svc-card .svc-kicker{
  font-weight:600; letter-spacing:-.01em; color:var(--muted-dark);
  font-size:clamp(15px,1.2vw,18px); margin-top:16px;
}
.svc-card .svc-deliver{
  margin-top:24px; padding-top:18px; border-top:1px solid rgba(0,0,0,.12);
  font-family:var(--mono); font-size:12px; letter-spacing:.02em;
  line-height:1.5; color:var(--muted-dark); max-width:36ch;
}
.svc-card .svc-deliver b{ color:var(--ink); font-weight:700; }
.svc-card .svc-link{
  margin-top:26px; display:inline-flex; align-items:center; gap:12px; white-space:nowrap;
  font-weight:600; font-size:15px; color:var(--ink);
  border:1px solid rgba(0,0,0,.18); border-radius:999px; padding:13px 20px 13px 22px;
  text-decoration:none; transition:background .3s var(--fast), color .3s var(--fast);
}
.svc-card .svc-link:hover{ background:var(--ink); color:#fff; }
.svc-card .svc-link svg{ width:15px; height:15px; }
.svc-media{ width:100%; height:100%; border-radius:18px; overflow:hidden; align-self:stretch; }
.svc-media img{ width:100%; height:100%; object-fit:fill; display:block; }

/* ====================================================== */
/* ACT 4 — contact form, white                            */
/* ====================================================== */
#act4{ background:var(--paper); color:var(--ink); padding:18vh 0 10vh; position:relative; z-index:4; }
.form-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:4vw; align-items:start; }
.form-left .eyebrow{ color:var(--muted-dark); }
.form-left h2{
  font-weight:800; letter-spacing:-.03em; line-height:.98;
  font-size:clamp(40px,5vw,80px);
}
.form-left .lead{ margin-top:24px; max-width:34ch; color:var(--muted-dark); font-size:18px; line-height:1.6; }

/* encrypted contact channels */
.channels{ display:flex; flex-direction:column; gap:16px; padding-top:8px; }
.ch-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ch-btn{
  display:flex; flex-direction:row; align-items:center; gap:16px; text-decoration:none; position:relative; min-width:0;
  border:1px solid rgba(0,0,0,.16); border-radius:16px; padding:22px 48px 22px 22px;
  color:var(--ink); background:transparent; text-align:left; font:inherit; cursor:pointer;
  transition:background .3s var(--fast), color .3s var(--fast), border-color .3s var(--fast), transform .3s var(--fast);
}
.ch-btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-2px); }
.ch-glyph{
  flex:none; width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,0,0,.14); transition:border-color .3s var(--fast), background .3s var(--fast);
}
.ch-glyph svg{ width:22px; height:22px; }
.ch-btn:hover .ch-glyph{ border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08); }
.ch-txt{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.ch-k{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-dark); transition:color .3s var(--fast); }
.ch-btn:hover .ch-k{ color:rgba(255,255,255,.6); }
.ch-v{ font-weight:600; font-size:clamp(15px,1.25vw,18px); letter-spacing:-.01em; }
/* small phones: let the two-column channel buttons shrink instead of overflowing */
@media (max-width:480px){
  .ch-row{ gap:10px; }
  .ch-btn{ gap:11px; padding:16px 16px 16px 14px; }
  .ch-glyph{ width:36px; height:36px; border-radius:9px; }
  .ch-glyph svg{ width:18px; height:18px; }
  .ch-v{ font-size:14px; overflow-wrap:anywhere; }
  .ch-k{ font-size:10px; letter-spacing:.14em; }
  .ch-ic{ display:none; }
}
.ch-ic{ width:16px; height:16px; position:absolute; top:20px; right:20px; opacity:.55; transition:opacity .3s var(--fast), transform .3s var(--fast); }
.ch-btn:hover .ch-ic{ opacity:1; }
.ch-details{ display:flex; flex-direction:column; }
.ch-details > summary{ list-style:none; }
.ch-details > summary::-webkit-details-marker{ display:none; }
.ch-details[open] .ch-chev{ transform:rotate(180deg); }
.ch-explain{ display:none; }
.channels:has(.ch-details[open]) .ch-explain{ display:block; }
.ch-explain{
  border:1px solid rgba(0,0,0,.12); border-radius:16px; padding:22px 24px; background:rgba(0,0,0,.025);
}
.ch-explain p{ max-width:62ch; color:var(--muted-dark); font-size:15px; line-height:1.65; }
.ch-note{
  margin-top:8px; font-family:var(--mono); font-size:12px; line-height:1.7;
  letter-spacing:.01em; color:var(--muted-dark);
}
.foot{ margin-top:14vh; padding-top:36px; border-top:1px solid #d8d4cc; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.foot .mark{ font-weight:800; letter-spacing:-.02em; font-size:20px; }
.foot .mono{ font-size:12px; color:var(--muted-dark); letter-spacing:.06em; }

/* responsive */
@media (max-width:880px){
  /* block 2: copy + "up" reel stack on the left, "down" reel runs full height right */
  .a2-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"copy down" "up down";
    align-items:start; gap:20px 4vw;
  }
  .a2-copy{ grid-area:copy; }
  .reel{ display:contents; }
  .reel-col-clip.up{ grid-area:up; height:30vh; min-height:0; }
  .reel-col-clip.down{ grid-area:down; align-self:stretch; height:auto; min-height:0; }
  .svc-card{ grid-template-columns:1fr; gap:20px; min-height:auto; padding:0 0 28px; overflow:hidden; }
  .svc-card > div:not(.svc-media){ padding:0 clamp(18px,5vw,28px); }
  .svc-media{ height:52vw; max-height:240px; width:100%; border-radius:26px 26px 0 0; order:-1; }
  .svc-media img{ object-fit:cover; }
  .form-grid{ grid-template-columns:1fr; gap:7vh; }
}

/* ====================================================== */
/* SCROLL MOTION — defined entirely in CSS                */
/* All motion is expressed here with calc()/clamp() from  */
/* three scroll-progress variables. JS only publishes      */
/* those numbers (--p1, --p2 pinned progress; --e2 act2    */
/* entry progress) + measures the two glyph anchors.       */
/* (CSS scroll-driven view-timelines don't advance in this */
/*  embedded preview, so progress is published instead —   */
/*  the visual definitions all live in CSS.)               */
/* ====================================================== */
@property --p1{ syntax:'<number>'; inherits:true; initial-value:0; }
@property --p2{ syntax:'<number>'; inherits:true; initial-value:0; }
@property --c2{ syntax:'<number>'; inherits:true; initial-value:1; }
:root{ --p1:0; --p2:0; --c2:1; }

/* ---- ACT 1 ---- */
/* line draws (dashoffset 1→0 over p1 0→0.72) then fades out (0.88→0.98) */
#line1{
  stroke-dasharray:1;
  stroke-dashoffset: calc(1 - clamp(0, var(--p1)/0.72, 1));
  opacity: calc(1 - clamp(0, (var(--p1) - 0.88)/0.10, 1));
}
/* line rises with the hero (p1 0.42→0.72) */
.line-svg{
  transform: translate(var(--l1x,0px),
             calc(var(--l1y,0px) - clamp(0, (var(--p1) - 0.42)/0.30, 1) * 95vh));
}
/* hero hangs, then rises + fades */
.hero-copy{
  transform: translateY(calc(clamp(0, (var(--p1) - 0.42)/0.30, 1) * -95vh));
  opacity: calc(1 - clamp(0, (var(--p1) - 0.50)/0.22, 1));
}
/* flood bar widens (ease-in via squared progress) to cover the screen 0.80→1.0 */
.straight{
  --fl: clamp(0, (var(--p1) - 0.80)/0.20, 1);
  transform: translateX(-50%) scaleX(calc(var(--fl) * var(--fl) * 1700));
}
.hero-scrollcue{ opacity: calc(1 - clamp(0, var(--p1)/0.12, 1)); }
/* sub-lines light up one by one as the line draws (currentColor feeds the dot) */
.hero-sub span{ --draw1: clamp(0, var(--p1)/0.72, 1); }
.hero-sub span:nth-child(1){ color: color-mix(in srgb, #5d5d5a, #ededeb calc(clamp(0,(var(--draw1) - 0.16)/0.03,1) * 100%)); }
.hero-sub span:nth-child(2){ color: color-mix(in srgb, #5d5d5a, #ededeb calc(clamp(0,(var(--draw1) - 0.34)/0.03,1) * 100%)); }
.hero-sub span:nth-child(3){ color: color-mix(in srgb, #5d5d5a, #ededeb calc(clamp(0,(var(--draw1) - 0.52)/0.03,1) * 100%)); }

/* ---- ACT 2 ---- */
/* content fades in (opacity only — centred via the .holding fixed position) */
.a2-grid{ opacity: var(--c2, 1); }
/* dot grows out of the "." (pinned progress, tiny until 0.225, ease-in) */
.dot{
  --dg: clamp(0, (var(--p2) - 0.225)/0.775, 1);
  width:  calc(14px + var(--dg) * var(--dg) * 320vmax);
  height: calc(14px + var(--dg) * var(--dg) * 320vmax);
  opacity: clamp(0, var(--dg)/0.02, 1);
}