/* ==========================================================================
   UNIT STRENGTH — site.css
   Ported from unit-strength-site-prototype-v2.html (approved visual source).
   Organization: tokens → base → components → header/nav → hero →
                 sections → responsive → reduced-motion
   ========================================================================== */

/* ============================== TOKENS ============================== */
:root{
  --ink:#0A0B0C;      /* page background */
  --ink2:#0D0E10;     /* card/panel background */
  --line:#1B1C1F;     /* borders, dividers */
  --bone:#F4F4F5;     /* primary text */
  --fog:#C9CACD;      /* secondary text */
  --smoke:#9A9CA0;    /* muted text */
  --crimson:#9B1C1C;  /* primary buttons, accents */
  --ember:#C0392B;    /* hovers, eyebrows, highlights */
  --display:'Anton','Arial Narrow',Impact,sans-serif;
  --body:'Inter',-apple-system,'Helvetica Neue',sans-serif;
}

/* ============================== BASE ============================== */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--ink);color:var(--bone);font-family:var(--body);overflow-x:hidden;}
::selection{background:var(--crimson);color:var(--bone);}
a:focus-visible,button:focus-visible{outline:2px solid var(--ember);outline-offset:3px;}

.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(18px,4.5vw,48px);}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--ember);}
h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(32px,6vw,56px);line-height:1;letter-spacing:.5px;margin:10px 0 0;}
.lede{color:var(--fog);font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.65;max-width:56ch;margin-top:14px;}
section{padding:clamp(56px,9vw,110px) 0;border-top:1px solid var(--line);}

/* ============================== COMPONENTS ============================== */
.btn{display:inline-block;background:var(--crimson);color:var(--bone);text-decoration:none;font-weight:600;font-size:14.5px;padding:13px 24px;border-radius:6px;border:1px solid transparent;cursor:pointer;font-family:var(--body);}
.btn:hover{background:var(--ember);}
.btn.ghost{background:transparent;border:1px solid rgba(244,244,245,.28);color:var(--bone);font-weight:500;}
.btn.ghost:hover{border-color:rgba(244,244,245,.6);background:rgba(244,244,245,.04);}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

/* logo mark (shared by header + footer) */
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--bone);}
.mark .ring{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--crimson);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:13px;color:var(--ember);}
.mark .word{font-family:var(--display);font-size:15px;letter-spacing:2.5px;text-transform:uppercase;}
.mark .logo-img{height:34px;width:auto;display:block;}

/* ============================== HEADER / NAV ============================== */
/* Shared nav markup used both in the hero overlay (home) and the solid
   site-header (inner pages). */
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;}
.links{display:flex;align-items:center;gap:22px;}
.links a:not(.btn){color:var(--smoke);text-decoration:none;font-size:13.5px;font-weight:500;}
.links a:not(.btn):hover{color:var(--bone);}
.links a[aria-current="page"]{color:var(--bone);}
.links .btn{padding:11px 20px;}

/* solid header for non-hero pages */
.site-header{position:sticky;top:0;z-index:60;background:rgba(10,11,12,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.site-header .nav{padding:clamp(14px,2.4vw,20px) 0;}

/* hamburger — the one component not in the prototype */
.hamburger{display:none;flex:none;width:42px;height:42px;border:1px solid var(--line);background:var(--ink2);border-radius:8px;cursor:pointer;position:relative;padding:0;}
.hamburger span{position:absolute;left:11px;right:11px;height:2px;background:var(--bone);transition:transform .3s ease,opacity .2s ease;}
.hamburger span:nth-child(1){top:14px;}
.hamburger span:nth-child(2){top:20px;}
.hamburger span:nth-child(3){top:26px;}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* mobile slide-down panel */
.mobile-panel{display:none;overflow:hidden;max-height:0;transition:max-height .4s cubic-bezier(.22,1,.36,1);background:var(--ink2);border-bottom:1px solid var(--line);}
.mobile-panel .mobile-links{display:flex;flex-direction:column;padding:6px 0 14px;}
.mobile-panel a{color:var(--fog);text-decoration:none;font-size:16px;font-weight:500;padding:15px clamp(18px,4.5vw,48px);border-top:1px solid var(--line);}
.mobile-panel a[aria-current="page"]{color:var(--bone);}
.mobile-panel a:active,.mobile-panel a:hover{color:var(--bone);background:rgba(244,244,245,.03);}
/* hero-overlay variant: sits inside .fg-top, flowing full-bleed directly under the hero nav */
.fg-top{flex:none;}
.hero .mobile-panel{border-top:1px solid var(--line);margin:14px calc(-1 * clamp(18px,4.5vw,48px)) 0;}

/* ============================== HERO ============================== */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;border-top:none;padding:0;}
.panels{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;}
.panel{position:relative;overflow:hidden;will-change:transform;}
.panel svg,.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.p-left,.p-right{transform:translateY(-103%);}
.p-mid{transform:translateY(103%);}
.play .p-left{animation:dropIn 1.05s cubic-bezier(.22,1,.36,1) .12s forwards;}
.play .p-mid{animation:riseIn 1.05s cubic-bezier(.22,1,.36,1) .3s forwards;}
.play .p-right{animation:dropIn 1.05s cubic-bezier(.22,1,.36,1) .48s forwards;}
@keyframes dropIn{to{transform:translateY(0);}}
@keyframes riseIn{to{transform:translateY(0);}}
.scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(6,7,8,.94) 0%, rgba(6,7,8,.55) 40%, rgba(6,7,8,.16) 72%, rgba(6,7,8,.4) 100%);pointer-events:none;}
.fg{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,3vw,34px) clamp(18px,4.5vw,48px);}
.fg .nav,.fg .stack{opacity:0;transform:translateY(14px);}
.play ~ .fg .nav{animation:fadeUp .7s ease .95s forwards;}
.play ~ .fg .stack{animation:fadeUp .8s ease 1.1s forwards;}
@keyframes fadeUp{to{opacity:1;transform:translateY(0);}}
/* hero nav links render on the dark scrim — lift them off --smoke slightly */
.hero .links a:not(.btn){color:var(--fog);}
.hero .links a:not(.btn):hover{color:var(--bone);}
h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(46px,9.5vw,104px);line-height:.94;letter-spacing:.5px;}
h1 .hollow{color:transparent;-webkit-text-stroke:1.5px var(--bone);}
.sub{margin-top:18px;max-width:46ch;color:var(--fog);font-size:clamp(14.5px,1.6vw,17px);line-height:1.6;}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.micro{margin-top:16px;font-size:12.5px;color:var(--smoke);}
.micro b{color:var(--fog);font-weight:600;}

/* ============================== PAGE INTRO (inner pages) ============================== */
.page-intro{padding-top:clamp(48px,7vw,84px);}

/* ============================== WHO IT'S FOR ============================== */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:34px;}
.tile{border:1px solid var(--line);background:var(--ink2);border-radius:10px;padding:22px 20px;}
.tile .sq{width:10px;height:10px;background:var(--crimson);margin-bottom:16px;}
.tile h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:21px;letter-spacing:.5px;}
.tile p{color:var(--smoke);font-size:13.5px;line-height:1.6;margin-top:8px;}

/* ============================== SERVICES (click to expand) ============================== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:34px;align-items:start;}
.card{border:1px solid var(--line);background:var(--ink2);border-radius:12px;overflow:hidden;}
.card.open{border-color:#3a2224;}
.card-head{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;background:none;border:none;text-align:left;padding:24px 22px;cursor:pointer;color:var(--bone);font-family:var(--body);}
.card-head .l h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:26px;letter-spacing:.5px;}
.price{margin-top:8px;font-size:14px;color:var(--fog);}
.price b{color:var(--ember);font-weight:600;font-size:16px;}
.chev{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid #2a2b2f;display:flex;align-items:center;justify-content:center;color:var(--smoke);font-size:16px;transition:transform .35s ease;}
.card.open .chev{transform:rotate(45deg);color:var(--ember);border-color:#4a2a2c;}
.card-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.22,1,.36,1);}
.card-body-in{padding:0 22px 24px;}
.card-body h4{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ember);margin:16px 0 10px;}
.card-body ul{list-style:none;}
.card-body li{position:relative;padding-left:18px;color:var(--fog);font-size:14px;line-height:1.6;margin-bottom:9px;}
.card-body li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--crimson);}
.card-body .fine{color:var(--smoke);font-size:12.5px;line-height:1.6;margin-top:14px;}
.card-body .btn{margin-top:18px;}
.tap-hint{margin-top:14px;font-size:12.5px;color:var(--smoke);}

/* services preview (home) — compact, non-expanding */
.svc-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:34px;align-items:start;}
.svc-preview .card{padding:24px 22px;}
.svc-preview h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:26px;letter-spacing:.5px;}
.svc-preview .price{margin-top:8px;}
.svc-preview .arrow{display:inline-block;margin-top:18px;color:var(--ember);text-decoration:none;font-size:14px;font-weight:600;}
.svc-preview .arrow:hover{color:var(--bone);}

/* ============================== HOW IT WORKS ============================== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:34px;counter-reset:step;}
.step{border-top:2px solid var(--crimson);padding-top:16px;}
.step .n{font-family:var(--display);font-size:34px;color:#3a3b40;line-height:1;}
.step h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:20px;margin-top:8px;letter-spacing:.5px;}
.step p{color:var(--smoke);font-size:13.5px;line-height:1.6;margin-top:8px;}

/* ============================== ABOUT ============================== */
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(20px,4vw,48px);align-items:center;margin-top:34px;}
.photo{aspect-ratio:4/5;border:1px dashed #3a3b3e;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--smoke);font-size:12.5px;background:var(--ink2);text-align:center;padding:20px;}
.about .txt p{color:var(--fog);font-size:15px;line-height:1.75;margin-bottom:14px;}
.draft{display:inline-block;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--ember);border:1px solid #4a2a2c;padding:5px 10px;border-radius:999px;margin-bottom:14px;}

/* ============================== FAQ ============================== */
.faq{margin-top:30px;border-top:1px solid var(--line);}
.q{border-bottom:1px solid var(--line);}
.q-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;background:none;border:none;cursor:pointer;text-align:left;padding:20px 2px;color:var(--bone);font-family:var(--body);font-size:15.5px;font-weight:500;}
.q-head .chev{width:28px;height:28px;font-size:14px;}
.q.open .q-head .chev{transform:rotate(45deg);color:var(--ember);border-color:#4a2a2c;}
.q-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,1,.36,1);}
.q-body p{color:var(--smoke);font-size:14px;line-height:1.7;padding:0 2px 20px;max-width:70ch;}

/* ============================== CONTACT ============================== */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(20px,4vw,40px);margin-top:34px;align-items:start;}
.form-embed{min-height:320px;}
.form-embed iframe{display:block;width:100%;border:0;}
.contact-aside p{color:var(--fog);font-size:14.5px;line-height:1.7;}
.contact-aside .aside-btns{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.contact-aside .micro{margin-top:16px;}

/* ============================== STUB PAGES ============================== */
.stub{min-height:44vh;}
.stub p{color:var(--fog);font-size:16px;line-height:1.7;margin-top:16px;max-width:56ch;}

/* ============================== LEGAL DOCS ============================== */
.legal-doc{max-width:72ch;margin-top:22px;}
.legal-doc .legal-meta{color:var(--smoke);font-size:13px;margin-bottom:20px;}
.legal-doc p{color:var(--fog);font-size:15px;line-height:1.75;margin-bottom:16px;}
.legal-doc h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:20px;letter-spacing:.5px;margin:28px 0 10px;}
.legal-doc ul{list-style:none;margin:0 0 16px;}
.legal-doc li{position:relative;padding-left:18px;color:var(--fog);font-size:15px;line-height:1.7;margin-bottom:8px;}
.legal-doc li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;background:var(--crimson);}
.legal-doc a{color:var(--ember);text-decoration:none;}
.legal-doc a:hover{color:var(--bone);}

/* ============================== SOCIAL PROOF ============================== */
.proof .testimonial{position:relative;margin-top:26px;border:1px solid var(--line);background:var(--ink2);border-radius:14px;padding:clamp(24px,4vw,44px);max-width:760px;}
.proof .stars{color:var(--ember);font-size:19px;letter-spacing:4px;}
.proof blockquote{font-family:var(--body);font-weight:500;font-size:clamp(19px,2.5vw,27px);line-height:1.4;color:var(--bone);margin:16px 0 26px;}
.proof figcaption .who{display:flex;align-items:center;gap:14px;}
.proof .avatar{width:48px;height:48px;border-radius:50%;background:var(--ink);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:15px;letter-spacing:1px;color:var(--fog);flex-shrink:0;}
.proof figcaption b{color:var(--bone);font-weight:600;}
.proof .meta{color:var(--smoke);font-size:13px;}

/* ============================== ASSURANCE STRIP ============================== */
.assurance{background:var(--ink2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;}
.assurance .row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px clamp(20px,4vw,40px);list-style:none;}
.assurance li{position:relative;padding-left:20px;color:var(--fog);font-size:14px;line-height:1.4;}
.assurance li::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;transform:translateY(-50%);background:var(--crimson);}
.assurance b{color:var(--bone);font-weight:600;}

/* ============================== CTA BAND + FOOTER ============================== */
.band{background:var(--ink2);}
.band .inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;}
.band h2{font-size:clamp(30px,5vw,48px);}
.band .note-sm{color:var(--smoke);font-size:12.5px;margin-top:10px;max-width:52ch;line-height:1.6;}
footer{border-top:1px solid var(--line);padding:34px 0 90px;}
.foot{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-start;}
.foot a:not(.mark){color:var(--smoke);text-decoration:none;font-size:13px;margin-right:18px;}
.foot a:not(.mark):hover{color:var(--bone);}
.foot .legal{color:#6f7073;font-size:12px;line-height:1.7;max-width:64ch;margin-top:14px;}

/* ============================== RESPONSIVE ============================== */
@media(max-width:720px){
  .about{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  /* hide desktop text links; keep Apply + hamburger visible */
  .links a:not(.btn){display:none;}
  .hamburger{display:block;}
  .mobile-panel{display:block;}
}

/* ============================== REDUCED MOTION ============================== */
@media (prefers-reduced-motion: reduce){
  .p-left,.p-mid,.p-right{transform:none;animation:none !important;}
  .fg .nav,.fg .stack{opacity:1;transform:none;animation:none !important;}
  .reveal{opacity:1;transform:none;transition:none;}
  .mobile-panel{transition:none;}
  html{scroll-behavior:auto;}
}