/* ============ TOKENS ============ */
:root{
  --ink:#1F1F1F;
  --white:#FFFFFF;
  --bone:#F1F1F1;
  --mist:#BCCFD3;
  --pink:#F10061;
  --lime:#C6FF00;
  --max:1280px;
  --pad:80px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--white);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
::selection{background:var(--lime);color:var(--ink);}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}

/* ============ TYPE SCALE ============ */
.label{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;}
.h-hero{font-size:clamp(54px,8.4vw,118px);font-weight:900;line-height:.96;letter-spacing:-.03em;}
.h-section{font-size:clamp(34px,4.2vw,55px);font-weight:700;line-height:1.05;letter-spacing:-.02em;}
.h-card{font-size:21px;font-weight:700;letter-spacing:-.01em;line-height:1.25;}
.quote{font-size:clamp(30px,4vw,48px);font-weight:300;font-style:italic;line-height:1.2;letter-spacing:-.01em;}
.body-l{font-size:18px;font-weight:300;line-height:1.6;}
.body{font-size:15px;font-weight:300;line-height:1.65;}
.body-s{font-size:13px;font-weight:400;line-height:1.6;}

/* ============ SECTIONS ============ */
section{padding:150px 0;}
.s-dark{background:var(--ink);color:var(--white);}
.s-bone{background:var(--bone);color:var(--ink);}
.s-white{background:var(--white);color:var(--ink);}
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:72px;}
.sec-head .dot{width:8px;height:8px;background:var(--pink);flex:none;}
.s-dark .label{color:var(--mist);}
.s-bone .label,.s-white .label{color:#8a8a8a;}
.offset{margin-left:38.2%;}
@media(max-width:900px){.offset{margin-left:0;}}

/* ============ BUTTONS ============ */
.btn{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:19px 34px;border:1px solid transparent;cursor:pointer;transition:all .25s ease;}
.btn-lime{background:var(--lime);color:var(--ink);}
.btn-lime:hover{background:var(--white);border-color:var(--ink);}
.btn-ghost-w{border-color:var(--white);color:var(--white);background:transparent;}
.btn-ghost-w:hover{background:var(--white);color:var(--ink);}
.btn-ink{background:var(--ink);color:var(--white);}
.btn-ink:hover{background:var(--pink);}
.btn-ghost-k{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn-ghost-k:hover{background:var(--ink);color:var(--white);}
.btn-pink{background:var(--pink);color:var(--white);}
.btn-pink:hover{background:var(--ink);}
.arrow-link{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:inherit;border-bottom:1px solid currentColor;padding-bottom:4px;transition:opacity .2s;}
.arrow-link:hover{opacity:.55;}

/* ============ NAV ============ */
nav{position:sticky;top:0;z-index:50;background:rgba(31,31,31,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);}
.nav-in{max-width:var(--max);margin:0 auto;padding:26px var(--pad);display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:baseline;gap:5px;text-decoration:none;}
.logo .the{font-size:11px;font-weight:300;color:var(--pink);}
.logo .mark{font-size:17px;font-weight:900;color:var(--white);letter-spacing:-.02em;}
.nav-links{display:flex;gap:44px;}
.nav-links a{font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--white);text-decoration:none;transition:color .2s;}
.nav-links a:hover{color:var(--lime);}
.nav-links a.active{color:var(--lime);}

/* ============ BREADCRUMB ============ */
.breadcrumb{padding:20px 0;border-bottom:1px solid rgba(0,0,0,.08);}
.breadcrumb-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:flex;gap:12px;align-items:center;}
.breadcrumb a{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#999;text-decoration:none;}
.breadcrumb a:hover{color:var(--pink);}
.breadcrumb span{font-size:11px;color:#ccc;}
.breadcrumb .current{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);}

/* ============ GRIDS ============ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}

/* ============ CARDS (generic) ============ */
.card{border:1px solid rgba(31,31,31,.18);padding:36px 30px;transition:all .25s ease;background:transparent;}
.s-dark .card{border-color:rgba(255,255,255,.16);}
.card:hover{border-color:var(--pink);}
.card .tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a;margin-bottom:18px;}
.card .q{font-size:17px;font-weight:700;line-height:1.35;margin-bottom:14px;}
.card .to{font-size:12px;letter-spacing:.06em;color:#6b6b6b;}

/* ============ PRACTICE CARDS ============ */
.p-card{border:1px solid rgba(31,31,31,.18);padding:42px 34px;transition:border-color .25s;}
.p-card:hover{border-color:var(--pink);}
.p-card .num{font-size:11px;letter-spacing:.16em;color:#8a8a8a;margin-bottom:26px;}
.p-card .phase{font-size:30px;font-weight:900;letter-spacing:-.02em;line-height:1;}
.p-card .alias{font-size:11px;letter-spacing:.2em;text-transform:lowercase;color:var(--pink);margin:8px 0 26px;}
.p-card .what{font-size:16px;font-weight:700;margin-bottom:12px;line-height:1.4;}
.p-card .desc{font-size:13px;font-weight:300;color:#555;line-height:1.65;}
.p-card .items{margin-top:24px;padding-top:24px;border-top:1px solid rgba(0,0,0,.1);}
.p-card .items li{font-size:12px;font-weight:300;color:#777;line-height:2;list-style:none;padding-left:14px;position:relative;}
.p-card .items li::before{content:"—";position:absolute;left:0;color:var(--pink);}

/* ============ WORK CARDS ============ */
.case{text-decoration:none;color:inherit;display:block;}
.case .ph{aspect-ratio:4/3;background:#2b2b2b;display:flex;align-items:center;justify-content:center;color:#555;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;transition:background .3s;}
.s-bone .case .ph{background:#ddd;color:#aaa;}
.s-white .case .ph{background:#e8e8e8;color:#aaa;}
.case:hover .ph{background:#333;}
.case .nm{font-size:16px;font-weight:700;margin-bottom:4px;}
.case .mt{font-size:12px;color:var(--mist);letter-spacing:.04em;}
.s-bone .case .mt,.s-white .case .mt{color:#999;}

/* ============ PROCESS STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.step{border-top:2px solid var(--ink);padding-top:22px;}
.s-dark .step{border-top-color:rgba(255,255,255,.3);}
.step .wk{font-size:11px;letter-spacing:.14em;color:#8a8a8a;margin-bottom:12px;}
.step .tt{font-size:18px;font-weight:700;margin-bottom:10px;}
.step p{font-size:13px;font-weight:300;color:#555;line-height:1.6;}
.s-dark .step p{color:var(--mist);}

/* ============ VOICES ============ */
.v-card{background:var(--white);padding:42px 38px;}
.s-dark .v-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}
.v-card .vq{font-size:19px;font-weight:300;font-style:italic;line-height:1.5;margin-bottom:30px;}
.v-who{display:flex;align-items:center;gap:14px;}
.v-who .av{width:40px;height:40px;background:var(--mist);flex:none;}
.v-who .nm{font-size:13px;font-weight:700;}
.v-who .rl{font-size:12px;color:#777;}

/* ============ FAQ ============ */
.faq{border-top:1px solid rgba(31,31,31,.15);}
.s-dark .faq{border-top-color:rgba(255,255,255,.15);}
.faq-item{border-bottom:1px solid rgba(31,31,31,.15);padding:26px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;}
.s-dark .faq-item{border-bottom-color:rgba(255,255,255,.15);}
.faq-item .fq{font-size:16px;font-weight:500;}
.faq-item .pl{font-size:22px;font-weight:300;color:#999;transition:transform .25s,color .25s;}
.faq-item:hover .pl{color:var(--pink);}
.faq-a{display:none;padding:0 0 26px;max-width:640px;font-size:14px;font-weight:300;color:#555;line-height:1.7;}
.s-dark .faq-a{color:var(--mist);}
.faq-item.open + .faq-a{display:block;}
.faq-item.open .pl{transform:rotate(45deg);color:var(--pink);}

/* ============ YES/NO ============ */
.yn{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.yn-col{background:var(--white);padding:38px 34px;}
.yn-col .yt{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px;display:block;}
.yn-col p{font-size:14px;font-weight:300;line-height:1.75;color:#444;}
.yn .no .yt{color:var(--pink);}

/* ============ PRICING TIERS ============ */
.tier{border:1px solid rgba(31,31,31,.15);padding:36px 34px;transition:border-color .25s;display:grid;grid-template-columns:200px 1fr auto;gap:32px;align-items:center;}
.tier:hover{border-color:var(--pink);}
.tier.featured{background:var(--ink);color:var(--white);border-color:var(--ink);}
.tier.featured:hover{border-color:var(--pink);}
.tier .t-num{font-size:11px;letter-spacing:.14em;color:#999;margin-bottom:8px;}
.tier.featured .t-num{color:var(--mist);}
.tier .t-name{font-size:20px;font-weight:700;}
.tier .t-desc{font-size:14px;font-weight:300;line-height:1.6;color:#555;}
.tier.featured .t-desc{color:var(--mist);}
.tier .t-price{font-size:20px;font-weight:700;white-space:nowrap;text-align:right;}

/* ============ SHOP ============ */
.sh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sh-card{background:var(--bone);padding:0;display:flex;flex-direction:column;overflow:hidden;transition:all .25s;border:1px solid transparent;text-decoration:none;color:var(--ink);}
.sh-card:hover{border-color:var(--pink);}
.sh-card .sh-img{aspect-ratio:1;background:#ddd;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:12px;letter-spacing:.1em;text-transform:uppercase;}
.sh-card .sh-info{padding:20px 22px;}
.sh-card .sh-name{font-size:15px;font-weight:700;margin-bottom:4px;}
.sh-card .sh-price{font-size:12px;color:#777;}
.sh-card .sh-free{color:var(--pink);font-weight:700;}

/* ============ FORM ============ */
.form-wrap{max-width:640px;}
.field{margin-bottom:28px;}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;color:#555;}
.field input,.field textarea,.field select{
  width:100%;padding:18px 20px;border:1px solid rgba(31,31,31,.2);
  font-family:inherit;font-size:15px;font-weight:300;color:var(--ink);
  background:transparent;transition:border-color .2s;outline:none;
  -webkit-appearance:none;border-radius:0;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--pink);}
.field textarea{min-height:140px;resize:vertical;}

/* ============ INVITE / CTA ============ */
.invite-block{text-align:center;padding:190px 0;}
.invite-block .quote{margin-bottom:36px;}
.invite-block p{max-width:540px;margin:0 auto 48px;color:rgba(255,255,255,.8);}

/* ============ PAGE HERO (inner pages) ============ */
.page-hero{padding:120px 0 100px;background:var(--ink);color:var(--white);}
.page-hero .meta{margin-bottom:48px;display:flex;gap:24px;color:var(--mist);}
.page-hero h1{max-width:860px;margin-bottom:32px;}
.page-hero .sub{max-width:560px;color:rgba(255,255,255,.75);}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:var(--white);border-top:1px solid rgba(255,255,255,.08);}
.f-top{max-width:var(--max);margin:0 auto;padding:90px var(--pad) 70px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;}
.f-col .ft{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px;}
.f-col a,.f-col span{display:block;font-size:13px;font-weight:300;color:var(--mist);text-decoration:none;line-height:2.1;}
.f-col a:hover{color:var(--lime);}
.f-brand .tagline{font-size:14px;font-weight:300;color:var(--mist);line-height:1.6;margin:18px 0;}
.f-mega{max-width:var(--max);margin:0 auto;padding:30px var(--pad) 0;overflow:hidden;}
.f-mega .big{font-size:clamp(80px,14.5vw,205px);font-weight:900;letter-spacing:-.04em;line-height:.9;color:var(--white);white-space:nowrap;}
.f-mega .big .the{font-size:.18em;font-weight:300;color:var(--pink);vertical-align:super;letter-spacing:0;}
.f-legal{max-width:var(--max);margin:0 auto;padding:32px var(--pad) 40px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:11px;letter-spacing:.08em;color:#666;text-transform:uppercase;}

/* ============ SCROLL REVEAL ============ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  :root{--pad:40px;}
  .grid-3,.steps,.sh-grid{grid-template-columns:1fr 1fr;}
  .f-top{grid-template-columns:1fr 1fr;}
  .tier{grid-template-columns:1fr auto;gap:20px;}
  .tier .t-desc{grid-column:1/-1;grid-row:2;}
}
@media(max-width:680px){
  :root{--pad:24px;}
  section{padding:96px 0;}
  .page-hero{padding:80px 0 72px;}
  .invite-block{padding:120px 0;}
  .grid-3,.grid-2,.steps,.yn,.sh-grid{grid-template-columns:1fr;}
  .nav-links{gap:20px;}
  .nav-links a{font-size:10px;letter-spacing:.06em;}
  .f-top{grid-template-columns:1fr;padding:64px var(--pad) 40px;}
  .sec-head{margin-bottom:48px;}
  .tier{grid-template-columns:1fr;gap:14px;}
  .tier .t-price{text-align:left;}
}
