@import url('tokens.css');

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:auto;background:var(--canvas)}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{
  position:fixed;top:-60px;left:1rem;z-index:200;
  background:var(--panel);color:var(--text-primary);
  padding:.75rem 1.25rem;border-radius:8px;border:1px solid var(--panel-line);
  font-family:var(--font-mono);font-size:.85rem;
  transition:top .25s var(--ease-out);
}
.skip-link:focus{top:1rem}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- fixed background environment ---------- */
.env-layer{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 18% 8%, rgba(201,147,47,.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 92%, rgba(147,162,188,.06) 0%, transparent 60%),
    var(--canvas-deep);
  background-attachment:fixed;
}
.env-layer::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
  animation:grain-drift 72s steps(6) infinite;
}
@keyframes grain-drift{
  0%{transform:translate(0,0)}
  16%{transform:translate(-2%,1%)}
  33%{transform:translate(1%,-2%)}
  50%{transform:translate(-1%,2%)}
  66%{transform:translate(2%,1%)}
  83%{transform:translate(-2%,-1%)}
  100%{transform:translate(0,0)}
}

/* ---------- nav ---------- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.25rem,4vw,3rem);
  background:linear-gradient(to bottom, rgba(8,14,23,.82), rgba(8,14,23,0));
  backdrop-filter:blur(6px);
}
.site-nav .brand{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em;
  color:var(--text-primary);text-decoration:none;
}
.site-nav .brand svg{width:26px;height:26px;flex:none}
.site-nav .cta{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;
  padding:.6rem 1.1rem;border:1px solid var(--panel-line);border-radius:999px;
  transition:border-color .3s var(--ease-out),background .3s var(--ease-out);
  text-decoration:none;
}
.site-nav .cta:hover{border-color:var(--accent);background:rgba(201,147,47,.08)}
@media (pointer:coarse){.site-nav .cta{min-height:44px;display:inline-flex;align-items:center}}

/* ---------- hero ---------- */
.hero{position:relative;height:400vh}
.hero-stage{
  position:sticky;top:0;height:100vh;width:100%;
  overflow:hidden;background:var(--canvas-deep);
}
.stage-media{position:absolute;inset:0}
.poster{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:1;transition:opacity .6s var(--ease-out);
}
.hero-stage.video-ready .poster{opacity:0}
#hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s var(--ease-out);
  will-change:transform;transform:translateZ(0);
}
.hero-stage.video-ready #hero-video{opacity:1}

.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 130% 95% at 50% 45%,rgba(8,12,20,0) 32%,rgba(8,12,20,.68) 100%);
}

.load-ring{
  position:absolute;left:50%;top:50%;width:52px;height:52px;
  transform:translate(-50%,-50%);color:var(--accent);
  opacity:1;transition:opacity .4s var(--ease-out);pointer-events:none;
}
.hero-stage.video-ready .load-ring,.hero-stage.video-failed .load-ring{opacity:0}

.scroll-cue{
  position:absolute;left:50%;bottom:clamp(1.5rem,4vh,3rem);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:var(--text-secondary);font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.12em;opacity:1;transition:opacity .5s var(--ease-out);
}
.hero.past .scroll-cue{opacity:0}
.scroll-cue svg{width:14px;height:20px;animation:cue-bob 2.2s var(--ease-in-out) infinite;animation-delay:-1.1s}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

.band{
  position:absolute;left:0;right:0;
  display:flex;flex-direction:column;
  padding:0 clamp(1.5rem,7vw,6rem);
  opacity:0;pointer-events:none;
}
.band::before{
  content:"";position:absolute;inset:-6%;pointer-events:none;
  opacity:calc(.3 + .7*var(--k,1));
  background:radial-gradient(ellipse 76% 60% at 50% 50%,rgba(5,7,12,.66) 0%,rgba(5,7,12,.42) 46%,rgba(5,7,12,0) 76%);
}
.band-inner{position:relative;z-index:1;max-width:44ch}
.band[data-band="1"]{top:0;height:100vh;justify-content:flex-end;padding-bottom:clamp(6rem,16vh,10rem)}
.band[data-band="2"]{top:0;height:100vh;align-items:flex-end;justify-content:center}
.band[data-band="2"] .band-inner{max-width:38ch;text-align:right}
.band[data-band="3"]{top:0;height:100vh;justify-content:center;align-items:center;text-align:center}
.band[data-band="3"] .band-inner{max-width:32ch}

.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--accent);text-shadow:var(--tshadow);margin-bottom:.9rem;
  display:flex;align-items:center;gap:.6rem;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.band[data-band="3"] .eyebrow{justify-content:center}

.band h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,5.4vw,4.2rem);line-height:1.02;letter-spacing:-.01em;
  color:var(--text-primary);text-shadow:var(--tshadow);
}
.band p{
  font-family:var(--font-body);font-size:clamp(1rem,1.6vw,1.2rem);
  color:var(--text-primary);text-shadow:var(--tshadow);line-height:1.6;
  margin-top:1.1rem;max-width:36ch;
}
.band[data-band="2"] p{margin-left:auto}

.band .cta-row{margin-top:1.6rem;display:flex;gap:1rem;justify-content:center}

.w{display:inline-block;overflow:visible}
.c{display:inline-block;will-change:transform,opacity}

/* word-by-word rise */
.rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*.5em));
}
/* drift-down */
.drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-22px));
}
/* settle: staged headline -> subline -> cta */
.settle h2 .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*.6em)) scale(calc(.94 + .06*var(--kc)));
}
.settle p{
  --ks:clamp(0,(var(--k,0) - .5)*4,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*10px));
}
.settle .cta-row{
  --kb:clamp(0,(var(--k,0) - .68)*5,1);
  opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*10px));
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-mono);font-size:.85rem;letter-spacing:.05em;
  padding:.85rem 1.6rem;border-radius:999px;text-decoration:none;
  transition:transform .25s var(--ease-out),background .25s var(--ease-out),border-color .25s var(--ease-out);
  text-shadow:none;display:inline-flex;align-items:center;gap:.5rem;
}
.btn-primary{background:var(--accent);color:#150e02}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(241,236,226,.45);color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--text-primary);transform:translateY(-2px)}
@media (pointer:coarse){.btn{min-height:44px}}

/* ---------- below-fold ---------- */
main{position:relative;background:var(--canvas)}
.section{padding:clamp(4.5rem,10vw,8rem) clamp(1.5rem,7vw,6rem);position:relative}
.section-head{max-width:60ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.kicker{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--accent);margin-bottom:.9rem;display:block;
}
.section h2.headline{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.06;letter-spacing:-.01em;
}
.section .lede{
  margin-top:1rem;color:var(--text-secondary);font-size:clamp(1rem,1.3vw,1.15rem);
  max-width:52ch;line-height:1.65;
}

/* trust strip */
.trust{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;background:var(--panel-line);border:1px solid var(--panel-line);border-radius:14px;overflow:hidden;
}
.trust .item{
  background:var(--panel);padding:1.6rem 1.5rem;
  display:flex;flex-direction:column;gap:.4rem;
}
.trust .item .num{font-family:var(--font-display);font-size:1.9rem;color:var(--text-primary)}
.trust .item .label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--text-secondary)}

/* services */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:900px){.services-grid{grid-template-columns:1fr}}
.service-card{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;
  padding:2rem 1.75rem;display:flex;flex-direction:column;gap:1rem;
  transition:border-color .35s var(--ease-out),transform .35s var(--ease-out);
}
.service-card:hover{border-color:var(--accent-muted);transform:translateY(-4px)}
.service-card .icon{width:38px;height:38px;color:var(--accent)}
.service-card h3{font-family:var(--font-display);font-weight:600;font-size:1.4rem}
.service-card p{color:var(--text-secondary);font-size:.98rem;line-height:1.6}

/* process */
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;counter-reset:step}
@media (max-width:900px){.process{grid-template-columns:1fr}}
.step{position:relative;padding:2rem 0 0}
.step .step-num{
  font-family:var(--font-mono);color:var(--accent);font-size:.8rem;letter-spacing:.1em;
  display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;
}
.step .step-num::before{content:"";width:2.2rem;height:1px;background:var(--panel-line)}
.step h3{font-family:var(--font-display);font-weight:600;font-size:1.3rem;margin-bottom:.6rem}
.step p{color:var(--text-secondary);font-size:.96rem;line-height:1.6}

/* clearance check (interactive moment) */
.clearance{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:20px;
  padding:clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center;
  position:relative;overflow:hidden;
}
.clearance::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(201,147,47,.05) 0 1px,transparent 1px 3px);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,#000 0%,transparent 78%);
}
@media (max-width:820px){.clearance{grid-template-columns:1fr}}
.clearance-copy h2{margin-bottom:.9rem}
.clearance-copy p{color:var(--text-secondary);line-height:1.65;max-width:46ch}
.clearance-action{display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.clearance-btn{
  position:relative;width:132px;height:132px;border-radius:50%;
  border:1px solid var(--border-interactive);background:var(--canvas-deep);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1rem;touch-action:none;user-select:none;cursor:pointer;
  box-shadow:0 0 calc(6px + 34px*var(--p,0)) calc(1px + 4px*var(--p,0)) rgba(201,147,47,calc(.1 + .5*var(--p,0)));
  transition:box-shadow .12s linear;
}
.clearance-btn.done{border-color:var(--accent);animation:clearance-pulse .5s var(--ease-out)}
@keyframes clearance-pulse{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
.clearance-btn svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.clearance-btn svg circle{fill:none}
.clearance-btn svg circle.ticks{stroke:var(--panel-line);stroke-width:1;stroke-dasharray:1 7.6}
.clearance-btn svg circle.track{stroke:var(--panel-line);stroke-width:2}
.clearance-btn svg circle.sweep{
  stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:38 338;
  opacity:.4;transform-origin:66px 66px;animation:clearance-sweep-spin 4.5s linear infinite;
}
.clearance-btn svg circle.fill{
  stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:376;
  stroke-dashoffset:calc(376 - 376*var(--p,0));transition:stroke-dashoffset .06s linear;
}
@keyframes clearance-sweep-spin{to{transform:rotate(360deg)}}
.clearance-readout{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.3rem}
.clearance-readout .pct{
  font-family:var(--font-display);font-weight:700;font-size:1.9rem;color:var(--text-primary);
  line-height:1;font-variant-numeric:tabular-nums;
}
.clearance-readout .status{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.07em;color:var(--text-secondary);
  max-width:9ch;line-height:1.3;
}
.clearance-btn.done .clearance-readout .status{color:var(--accent)}
.clearance-hint{font-family:var(--font-mono);font-size:.72rem;color:var(--text-tertiary);letter-spacing:.05em}
.clearance-result{
  display:flex;flex-direction:column;gap:.6rem;width:100%;max-width:280px;
}
.clearance-result .row{
  display:flex;align-items:center;gap:.7rem;font-family:var(--font-mono);font-size:.78rem;
  color:var(--text-tertiary);opacity:.3;transform:translateX(0);
  transition:opacity .4s var(--ease-out),color .4s var(--ease-out),transform .4s var(--ease-out);
}
.clearance-result .row.on{opacity:1;color:var(--text-primary);transform:translateX(3px)}
.clearance-result .row .mark{width:14px;height:14px;flex:none;color:var(--accent);transition:transform .35s var(--ease-out)}
.clearance-result .row.on .mark{transform:scale(1.15)}
.clearance-sweep{
  position:absolute;top:0;bottom:0;width:40%;left:-40%;
  background:linear-gradient(100deg,transparent,rgba(201,147,47,.22),transparent);
  pointer-events:none;
}
.clearance.swept .clearance-sweep{animation:sweep-run 1.1s var(--ease-in-out) forwards}
@keyframes sweep-run{to{left:140%}}

/* FAQ */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--panel-line)}
.faq-item{border-bottom:1px solid var(--panel-line)}
.faq-q{
  width:100%;text-align:left;padding:1.5rem 0;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;font-family:var(--font-body);font-weight:600;font-size:1.05rem;
}
.faq-q .plus{flex:none;width:18px;height:18px;position:relative;color:var(--accent)}
.faq-q .plus::before,.faq-q .plus::after{
  content:"";position:absolute;background:currentColor;
  transition:transform .3s var(--ease-out);
}
.faq-q .plus::before{left:0;top:50%;width:100%;height:2px;transform:translateY(-50%)}
.faq-q .plus::after{top:0;left:50%;height:100%;width:2px;transform:translateX(-50%)}
.faq-item.open .faq-q .plus::after{transform:translateX(-50%) rotate(90deg);opacity:0}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out);
}
.faq-item.open .faq-a{max-height:220px}
.faq-a p{color:var(--text-secondary);padding-bottom:1.5rem;line-height:1.65;max-width:60ch}

/* contact */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr}}
.contact-info .line{display:flex;flex-direction:column;gap:.2rem;margin-bottom:1.4rem}
.contact-info .line span:first-child{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--text-tertiary)}
.contact-info .line a,.contact-info .line span:last-child{font-size:1.05rem;color:var(--text-primary);text-decoration:none}
.contact-info .line a:hover{color:var(--accent)}

.form-field{margin-bottom:1.1rem;display:flex;flex-direction:column;gap:.4rem}
.form-field label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--text-secondary)}
.form-field input,.form-field textarea{
  background:var(--panel);border:1px solid var(--border-interactive);border-radius:10px;
  padding:.85rem 1rem;color:var(--text-primary);font-family:var(--font-body);font-size:.98rem;
  transition:border-color .25s var(--ease-out);resize:vertical;
}
.form-field input:focus,.form-field textarea:focus{border-color:var(--accent);outline:none}
.form-success{
  display:none;background:var(--panel);border:1px solid var(--accent-muted);border-radius:14px;
  padding:2rem;text-align:center;
}
.form-success.show{display:block}
.form-success .mark{width:32px;height:32px;color:var(--accent);margin:0 auto .8rem}
#contact-form.hidden{display:none}

.section-closing{position:relative;overflow:hidden}
.section-closing::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url('hero-ending.jpg') center 30%/cover no-repeat;
  opacity:.22;
}
.section-closing::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to bottom, var(--canvas) 0%, rgba(12,20,32,.75) 30%, var(--canvas) 88%);
}
.section-closing > *{position:relative;z-index:1}

footer{
  border-top:1px solid var(--panel-line);padding:clamp(3rem,6vw,4rem) clamp(1.5rem,7vw,6rem);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;
}
footer .foot-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.85rem}
footer .foot-brand svg{width:22px;height:22px}
footer .foot-links{display:flex;gap:1.6rem;flex-wrap:wrap}
footer .foot-links a{font-family:var(--font-mono);font-size:.78rem;color:var(--text-secondary);text-decoration:none}
footer .foot-links a:hover{color:var(--accent)}
footer .disclosure{
  width:100%;font-size:.82rem;color:var(--text-tertiary);max-width:70ch;line-height:1.6;
  padding-top:1.6rem;border-top:1px solid var(--panel-line);
}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-group .reveal:nth-child(1){transition-delay:0ms}
.reveal-group .reveal:nth-child(2){transition-delay:90ms}
.reveal-group .reveal:nth-child(3){transition-delay:180ms}
.reveal-group.in .reveal:nth-child(1),
.reveal-group.in .reveal:nth-child(2),
.reveal-group.in .reveal:nth-child(3){transition-delay:0ms}

/* ---------- vector motif: perimeter line ---------- */
.motif-line{position:absolute;pointer-events:none;opacity:.5}
.motif-line path{
  stroke:var(--accent-muted);stroke-width:1;fill:none;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.4s var(--ease-out);
}
.reveal.in .motif-line path{stroke-dashoffset:0}

/* ---------- static hero (five-gate fallback) ---------- */
.static-hero{display:none}
@media (max-width:720px),
  (orientation:portrait) and (max-width:1024px),
  (orientation:portrait) and (pointer:coarse),
  (orientation:landscape) and (pointer:coarse) and (max-height:560px),
  (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .hero-stage{position:relative;height:100svh;min-height:560px}
  .band,.scroll-cue,.load-ring{display:none}
  .static-hero{
    display:flex;position:absolute;inset:0;flex-direction:column;justify-content:flex-end;
    padding:0 clamp(1.5rem,7vw,4rem) clamp(3rem,10vh,5rem);
  }
  .static-hero .eyebrow{opacity:1}
  .static-hero h1{
    font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,9vw,3.4rem);
    line-height:1.03;text-shadow:var(--tshadow);max-width:14ch;
  }
  .static-hero p{
    margin-top:1rem;font-size:1.05rem;color:var(--text-primary);text-shadow:var(--tshadow);
    max-width:34ch;
  }
  .static-hero .cta-row{margin-top:1.6rem;display:flex;gap:1rem;flex-wrap:wrap}
}

@media (max-height:560px) and (orientation:landscape){
  .scroll-cue{display:none}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .env-layer::after{animation:none}
}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}