/* ===== INDEX (HOMEPAGE) ===== */
:root {
    --ink:#0a0a0a;
    --board:#111310;
    --paper:#fdfbf2;
    --yellow:#ffd400;
    --yellow-dim:#c9a600;
    --charcoal:#1c1e1a;
    --line-on-ink: rgba(255,214,0,0.22);
    --line-on-paper: rgba(10,10,10,0.16);
    --maxw:1180px;
  }
* {box-sizing:border-box;}
html {scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce) {
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
.chalk, h1, h2, h3.big {
    font-family:'Fraunces', serif;
    font-weight:400;
    line-height:1.05;
    margin:0;
  }
a {color:inherit;}
.wrap {max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.mono {font-family:'Space Mono', monospace;}
:focus-visible {outline:3px solid var(--ink); outline-offset:3px;}
.on-ink :focus-visible {outline-color:var(--yellow);}
.grid-tex {
    background-image:
      repeating-linear-gradient(0deg, rgba(10,10,10,0.045) 0, rgba(10,10,10,0.045) 1px, transparent 1px, transparent 34px),
      repeating-linear-gradient(90deg, rgba(10,10,10,0.045) 0, rgba(10,10,10,0.045) 1px, transparent 1px, transparent 34px);
  }
.dust-tex {
    background-image: radial-gradient(rgba(255,214,0,0.06) 1px, transparent 1px);
    background-size: 22px 22px;
  }
header {
    position:sticky; top:0; z-index:50;
    background:var(--ink);
    border-bottom:1px solid var(--line-on-ink);
  }
.navbar {
    max-width:var(--maxw); margin:0 auto; padding:16px 28px;
    display:flex; align-items:center; justify-content:space-between;
    color:var(--paper);
  }
.logo {
    font-family:'Fraunces', serif;
    font-size:23px;
    color:var(--paper);
    text-decoration:none;
    display:flex; align-items:center; gap:9px;
  }
.logo .dot {width:11px; height:11px; background:var(--yellow); display:inline-block; border-radius:50%;}
nav.links {display:flex; gap:32px; font-size:14px; font-weight:500;}
nav.links a {text-decoration:none; color:var(--paper); opacity:0.85; padding:4px 0; border-bottom:1px solid transparent;}
nav.links a:hover {opacity:1; border-color:var(--yellow);}
.nav-cta {
    background:var(--yellow); color:var(--ink); text-decoration:none;
    padding:10px 18px; font-size:13.5px; font-weight:600;
    border:1px solid var(--yellow); border-radius:3px;
  }
.nav-cta:hover {background:transparent; color:var(--yellow);}
.hero {
    background:var(--board); color:var(--paper);
    position:relative; overflow:hidden;
    border-bottom:1px solid var(--line-on-ink);
  }
.hero-grid {
    max-width:var(--maxw); margin:0 auto; padding:70px 28px 0;
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px;
    align-items:end; position:relative; z-index:1;
  }
.hero-tag {
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Space Mono', monospace; font-size:12px;
    color:var(--yellow); border:1px solid var(--line-on-ink);
    padding:6px 12px; margin-bottom:24px; border-radius:20px;
  }
.hero h1 {
    font-size:clamp(34px, 4.6vw, 60px);
    color:var(--yellow);
    max-width:680px;
  }
.underline-wrap {position:relative; display:inline-block;}
.underline-wrap svg {position:absolute; left:-2%; bottom:-10px; width:104%; height:16px;}
.hero p.lead {
    max-width:480px; margin-top:24px;
    font-size:16.5px; line-height:1.6; color:rgba(253,251,242,0.78);
    font-family:'Inter',sans-serif;
  }
.hero-actions {display:flex; gap:16px; margin-top:32px; flex-wrap:wrap;}
.btn-hero {
    background:var(--yellow); color:var(--ink); text-decoration:none;
    padding:17px 30px; font-weight:700; font-size:15.5px;
    border:1px solid var(--yellow); border-radius:3px; font-family:'Inter',sans-serif;
    box-shadow:0 4px 14px rgba(255,214,0,0.18);
  }
.btn-hero:hover {background:transparent; color:var(--yellow);}
.btn-ghost {
    color:var(--paper); text-decoration:none; padding:14px 8px;
    font-weight:500; font-size:14.5px; border-bottom:1px solid var(--line-on-ink);
    font-family:'Inter',sans-serif;
  }
.btn-ghost:hover {border-color:var(--yellow); color:var(--yellow);}
.phone {
    justify-self:end; width:220px; border:3px solid var(--charcoal);
    background:#0d0d0d; border-radius:24px; padding:9px;
    box-shadow:0 0 0 1px var(--line-on-ink);
    transform:rotate(2.5deg);
  }
.phone-screen {
    background:linear-gradient(165deg,#1c1e18 0%, #0a0a0a 60%);
    border-radius:15px; aspect-ratio:9/16; position:relative; overflow:hidden;
    border:1px solid var(--line-on-ink);
  }
.phone-topbar {position:absolute; top:10px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:center;}
.phone-topbar .mono {font-size:9px; color:rgba(253,251,242,0.55);}
.reel-progress {position:absolute; top:8px; left:12px; right:12px; height:2px; background:rgba(255,255,255,0.18);}
.reel-progress span {display:block; width:58%; height:100%; background:var(--yellow);}
.caption-block {
    position:absolute; left:12px; right:32px; bottom:52px;
    font-size:11px; line-height:1.4; color:var(--paper); font-family:'Inter',sans-serif;
  }
.caption-block b {color:var(--yellow); display:block; font-family:'Fraunces',serif; font-size:14px; margin-bottom:6px;}
.reel-icons {position:absolute; right:8px; bottom:52px; display:flex; flex-direction:column; gap:13px; align-items:center;}
.reel-icons .ic {font-family:'Space Mono',monospace; font-size:9px; color:var(--paper); text-align:center;}
.reel-icons .shape {width:25px; height:25px; border:1.5px solid var(--paper); border-radius:50%; margin-bottom:3px;}
.phone-bottom {position:absolute; left:12px; bottom:13px; font-family:'Space Mono',monospace; font-size:8px; color:rgba(253,251,242,0.5);}
.hero-bottom-strip {
    max-width:var(--maxw); margin:52px auto 0; padding:20px 28px;
    border-top:1px solid var(--line-on-ink);
    display:flex; gap:0; flex-wrap:wrap; position:relative; z-index:1;
  }
.hero-bottom-strip .stat {flex:1; min-width:150px; padding:16px 0;}
.hero-bottom-strip .stat + .stat {border-left:1px solid var(--line-on-ink); padding-left:26px;}
.hero-bottom-strip .num {font-family:'Fraunces',serif; font-size:28px; color:var(--yellow);}
.hero-bottom-strip .label {font-size:12.5px; color:rgba(253,251,242,0.65); margin-top:4px; line-height:1.4;}
.marquee-wrap {background:var(--yellow); border-bottom:1px solid var(--ink); overflow:hidden;}
.marquee-track {
    display:flex; white-space:nowrap; width:max-content;
    animation:scroll 34s linear infinite;
    padding:13px 0;
  }
.marquee-track span {
    font-family:'Fraunces', serif; font-size:17px;
    color:var(--ink); padding:0 24px; display:inline-flex; align-items:center; gap:24px;
  }
.marquee-track span::after {content:"•"; font-size:14px;}
@keyframes scroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.big-numbers {background:var(--board); border-bottom:1px solid var(--line-on-ink); padding:52px 0;}
.bn-grid {display:flex; flex-wrap:wrap; gap:0;}
.bn-stat {flex:1; min-width:220px; padding:0 32px; text-align:center;}
.bn-stat + .bn-stat {border-left:1px solid var(--line-on-ink);}
.bn-num {font-family:'Fraunces',serif; font-weight:700; font-size:clamp(34px,5vw,54px); color:var(--yellow); line-height:1;}
.bn-label {font-size:13.5px; color:rgba(253,251,242,0.7); margin-top:10px; line-height:1.5; max-width:220px; margin-left:auto; margin-right:auto;}
@media (max-width:700px) {
    .bn-stat{border-left:none !important; padding:20px 16px; border-top:1px solid var(--line-on-ink);}
    .bn-stat:first-child{border-top:none;}
  }
@keyframes riseIn { from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
.hero-tag, .hero h1, .hero p.lead, .hero-actions { opacity:0; animation:riseIn 0.7s ease-out forwards; }
.hero-tag {animation-delay:0.05s;}
.hero h1 {animation-delay:0.18s;}
.hero p.lead {animation-delay:0.32s;}
.hero-actions {animation-delay:0.46s;}
.phone {opacity:0; animation:riseIn 0.8s ease-out forwards; animation-delay:0.3s;}
@keyframes scrub { 0%{width:8%;} 45%{width:80%;} 70%{width:58%;} 100%{width:96%;} }
.reel-progress span {animation:scrub 6s ease-in-out infinite;}
.service, .audience, .client-card {transition:transform 0.2s ease, box-shadow 0.2s ease;}
.service:hover, .audience:hover {transform:translateY(-3px);}
.client-card:hover {transform:translateY(-3px); box-shadow:0 10px 0 -6px rgba(10,10,10,0.14);}
.client-card:hover .brand {color:var(--yellow-dim);}
.btn-hero, .btn-dark, .nav-cta {transition:transform 0.12s ease, background 0.15s ease, color 0.15s ease;}
.btn-hero:active, .btn-dark:active, .nav-cta:active {transform:scale(0.96);}
.stamp {opacity:0; transform:translateY(6px); transition:transform 0.4s ease, opacity 0.4s ease;}
.stamp.stamp-in {opacity:1; transform:translateY(0);}
.section {padding:88px 0;}
.section.on-ink {background:var(--board); color:var(--paper);}
.kicker {
    font-family:'Space Mono', monospace; font-size:12.5px;
    color:var(--yellow-dim); margin-bottom:12px;
  }
.on-ink .kicker {color:var(--yellow);}
.section h2 {font-size:clamp(26px,3.6vw,40px); max-width:620px; color:var(--ink);}
.section.on-ink h2 {color:var(--yellow);}
.section-head {display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:52px;}
.section-head p {max-width:320px; font-size:14.5px; line-height:1.6; color:#4a4a44;}
.on-ink .section-head p {color:rgba(253,251,242,0.72);}
.audience-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line-on-paper);}
.img-slot {
    border:1px dashed rgba(10,10,10,0.28); background:rgba(10,10,10,0.03);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; color:#6a6a62; gap:6px;
  }
.img-slot .icon {font-size:16px;}
.img-slot .txt {font-family:'Space Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:0.02em;}
.audience-thumb {width:100%; height:120px; object-fit:cover; display:block; margin-bottom:16px;}
.audience .img-slot {height:120px; margin-bottom:16px; padding:16px;}
.audience {padding:26px 22px 28px; border-right:1px solid var(--line-on-paper); border-bottom:1px solid var(--line-on-paper); min-height:170px;}
.audience:last-child {border-right:none;}
.audience .tag {font-family:'Space Mono',monospace; font-size:10.5px; color:var(--yellow-dim); background:rgba(255,214,0,0.14); display:inline-block; padding:3px 8px; border-radius:3px; margin-bottom:14px;}
.audience h3 {font-family:'Inter',sans-serif; font-weight:700; font-size:17px; margin:0 0 10px;}
.audience p {font-size:13.5px; line-height:1.55; color:#4a4a44; margin:0;}
.services {display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line-on-ink);}
.service {padding:30px 22px 0; border-right:1px solid var(--line-on-ink); border-bottom:1px solid var(--line-on-ink); min-height:210px;}
.service:last-child {border-right:none;}
.service .n {font-family:'Space Mono',monospace; font-size:13px; color:var(--yellow); font-weight:700;}
.service h3 {font-size:19px; margin:18px 0 10px; font-family:'Inter',sans-serif; font-weight:700;}
.service p {font-size:13.5px; line-height:1.6; color:rgba(253,251,242,0.7); margin:0 0 24px;}
.clients-grid {display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-on-paper); border:1px solid var(--line-on-paper);}
.client-card {background:var(--paper); padding:34px 30px; min-height:190px; display:flex; flex-direction:column; justify-content:space-between;}
.client-photo-strip {display:flex; gap:1px; margin:-34px -30px 22px; overflow:hidden;}
.client-photo-strip img {width:50%; height:110px; object-fit:cover; display:block;}
.client-photo-strip.single img {width:100%;}
.client-card .top {display:flex; justify-content:space-between; align-items:flex-start;}
.client-card .brand {font-family:'Fraunces',serif; font-size:24px; color:var(--ink);}
.client-card .tag {font-family:'Space Mono',monospace; font-size:10.5px; color:var(--ink); background:var(--yellow); padding:5px 9px; white-space:nowrap; border-radius:3px;}
.client-card p {font-size:13.5px; line-height:1.6; color:#4a4a44; max-width:400px; margin:0;}
.process-list {border-top:1px solid var(--line-on-paper);}
.p-row {display:grid; grid-template-columns:64px 1fr 1.4fr; gap:22px; padding:28px 0; border-bottom:1px solid var(--line-on-paper); align-items:baseline;}
.p-row .n {font-family:'Space Mono',monospace; font-size:13px; color:var(--yellow-dim); font-weight:700;}
.p-row h3 {font-size:19px; font-family:'Inter',sans-serif; font-weight:700;}
.p-row p {font-size:13.5px; line-height:1.6; color:#4a4a44; margin:0;}
.cta {background:var(--yellow); color:var(--ink); padding:90px 0; text-align:left; position:relative;}
.cta h2 {font-size:clamp(28px,4.4vw,48px); max-width:680px; color:var(--ink);}
.cta .row {display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-top:18px;}
.cta p {font-size:15px; max-width:400px; line-height:1.55; font-family:'Inter',sans-serif;}
.cta .btn-dark {background:var(--ink); color:var(--yellow); text-decoration:none; padding:15px 26px; font-weight:600; font-size:14.5px; border:1px solid var(--ink); white-space:nowrap; border-radius:3px; font-family:'Inter',sans-serif;}
.cta .btn-dark:hover {background:transparent; color:var(--ink);}
.stamp {
    position:absolute; top:40px; right:28px;
    border:1px solid var(--ink); border-radius:3px;
    display:flex; align-items:center; gap:8px;
    padding:10px 16px; font-family:'Space Mono',monospace; font-size:11.5px;
    letter-spacing:0.02em; text-transform:uppercase;
  }
footer {background:var(--board); color:rgba(253,251,242,0.6); padding:44px 0 28px;}
.footer-grid {display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; padding-bottom:28px; border-bottom:1px solid var(--line-on-ink);}
footer .logo {margin-bottom:10px;}
.footer-cols {display:flex; gap:56px; flex-wrap:wrap;}
.footer-col h4 {font-size:12px; font-family:'Space Mono',monospace; color:var(--yellow); margin:0 0 12px; font-weight:400;}
.footer-col a {display:block; text-decoration:none; color:rgba(253,251,242,0.72); font-size:13.5px; margin-bottom:8px;}
.footer-col a:hover {color:var(--yellow);}
.footer-bottom {display:flex; justify-content:space-between; padding-top:20px; font-size:12px; flex-wrap:wrap; gap:10px;}
@media (max-width:860px) {
    nav.links{display:none;}
    .hero-grid{grid-template-columns:1fr;}
    .phone{justify-self:start; margin-top:36px;}
    .services, .audience-grid{grid-template-columns:1fr 1fr;}
    .clients-grid{grid-template-columns:1fr;}
    .p-row{grid-template-columns:44px 1fr;}
    .p-row p{grid-column:1/-1;}
    .stamp{position:static; margin-bottom:24px;}
  }
@media (max-width:520px) {
    .services, .audience-grid{grid-template-columns:1fr;}
    .hero-bottom-strip .stat{border-left:none !important; padding-left:0 !important;}
  }
.sticky-cta {
    position:fixed; bottom:24px; right:24px; z-index:80;
    background:var(--yellow); color:var(--ink); text-decoration:none;
    padding:15px 24px; font-weight:700; font-size:14.5px; border-radius:30px;
    border:1px solid var(--ink); box-shadow:0 4px 18px rgba(0,0,0,0.25);
    display:flex; align-items:center; gap:8px;
    transition:transform 0.15s ease, box-shadow 0.15s ease;
  }
.sticky-cta:hover {transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,0.3);}
.sticky-cta:active {transform:scale(0.96);}
@keyframes ctaPulse {
    0%, 100%{box-shadow:0 4px 18px rgba(0,0,0,0.25), 0 0 0 0 rgba(255,214,0,0.5);}
    50%{box-shadow:0 4px 18px rgba(0,0,0,0.25), 0 0 0 8px rgba(255,214,0,0);}
  }
.sticky-cta {animation:ctaPulse 2.8s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce) { .sticky-cta{animation:none;} }
@media (max-width:600px) {
    .sticky-cta{padding:13px 18px; font-size:13.5px; bottom:16px; right:16px;}
  }

/* ===== SERVICES ===== */
body {margin:0; background:var(--paper); color:var(--ink); font-family:'Inter', sans-serif; -webkit-font-smoothing:antialiased;}
h1,h2,h3.big {font-family:'Fraunces', serif; font-weight:400; line-height:1.05; margin:0;}
header {position:sticky; top:0; z-index:50; background:var(--ink); border-bottom:1px solid var(--line-on-ink);}
.navbar {max-width:var(--maxw); margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; color:var(--paper);}
.logo {font-family:'Fraunces', serif; font-size:23px; color:var(--paper); text-decoration:none; display:flex; align-items:center; gap:9px;}
nav.links a:hover, nav.links a.current {opacity:1; border-color:var(--yellow);}
.nav-cta {background:var(--yellow); color:var(--ink); text-decoration:none; padding:10px 18px; font-size:13.5px; font-weight:600; border:1px solid var(--yellow); border-radius:3px; transition:transform 0.12s ease, background 0.15s ease, color 0.15s ease;}
.nav-cta:active {transform:scale(0.96);}
.hero {background:var(--board); color:var(--paper); border-bottom:1px solid var(--line-on-ink);}
.hero-inner {max-width:var(--maxw); margin:0 auto; padding:64px 28px 52px;}
@keyframes riseIn { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.hero-tag, .hero h1, .hero p.lead {opacity:0; animation:riseIn 0.6s ease-out forwards;}
.hero-tag {animation-delay:0.03s;}
.hero h1 {animation-delay:0.14s;}
.hero p.lead {animation-delay:0.26s;}
.hero-tag {display:inline-flex; align-items:center; gap:8px; font-family:'Space Mono', monospace; font-size:12px; color:var(--yellow); border:1px solid var(--line-on-ink); padding:6px 12px; margin-bottom:20px; border-radius:20px;}
.hero h1 {font-size:clamp(30px, 4.4vw, 52px); color:var(--yellow); max-width:660px;}
.hero p.lead {max-width:540px; margin-top:18px; font-size:16px; line-height:1.6; color:rgba(253,251,242,0.78);}
.overview-strip {border-top:1px solid var(--line-on-ink); display:flex; flex-wrap:wrap;}
.overview-strip .stat {flex:1; min-width:180px; padding:20px 28px;}
.overview-strip .stat + .stat {border-left:1px solid var(--line-on-ink);}
.overview-strip .num {font-family:'Fraunces',serif; font-size:26px; color:var(--yellow);}
.overview-strip .label {font-size:12.5px; color:rgba(253,251,242,0.65); margin-top:4px; line-height:1.4;}
.kicker {font-family:'Space Mono', monospace; font-size:12.5px; color:var(--yellow-dim); margin-bottom:12px;}
.section h2 {font-size:clamp(26px,3.6vw,40px); max-width:640px;}
.section-head {max-width:640px; margin-bottom:56px;}
.section-head p {font-size:15px; line-height:1.6; color:#4a4a44; margin-top:12px;}
.service-block {border-top:1px solid var(--line-on-paper); padding:44px 0;}
.service-block:last-child {border-bottom:1px solid var(--line-on-paper);}
.sb-head {display:flex; align-items:baseline; gap:20px; margin-bottom:18px; flex-wrap:wrap;}
.sb-head .n {font-family:'Space Mono',monospace; font-size:14px; color:var(--yellow-dim); font-weight:700;}
.sb-head h3 {font-family:'Fraunces',serif; font-weight:600; font-size:26px;}
.sb-tags {display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;}
.sb-tags span {font-family:'Space Mono',monospace; font-size:10.5px; color:var(--yellow-dim); background:rgba(255,214,0,0.14); padding:4px 9px; border-radius:3px; text-transform:uppercase;}
.sb-desc {font-size:15px; line-height:1.65; color:#3a3a34; max-width:640px; margin-bottom:24px;}
.sb-cols {display:grid; grid-template-columns:1fr 1fr; gap:32px;}
.sb-col h4 {font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.03em; color:var(--yellow-dim); margin:0 0 12px;}
.sb-col ul {margin:0; padding-left:18px; font-size:14px; line-height:1.7; color:#3a3a34;}
.sb-col ul li {margin-bottom:2px;}
.addons-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line-on-ink);}
.addon {padding:28px 24px; border-right:1px solid var(--line-on-ink); border-bottom:1px solid var(--line-on-ink); min-height:150px;}
.addon:nth-child(3n) {border-right:none;}
.addon h4 {font-family:'Fraunces',serif; font-weight:600; font-size:18px; margin:0 0 10px;}
.addon p {font-size:13.5px; line-height:1.6; color:rgba(253,251,242,0.72); margin:0;}
.pricing-box {border:1px solid var(--line-on-paper); padding:36px 36px; display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:center;}
.pricing-box .txt {max-width:600px;}
.pricing-box h3 {font-family:'Fraunces',serif; font-weight:600; font-size:22px; margin:0 0 12px;}
.pricing-box p {font-size:14.5px; line-height:1.65; color:#3a3a34; margin:0;}
.pricing-box .btn-primary {background:var(--ink); color:var(--yellow); text-decoration:none; padding:14px 24px; font-weight:600; font-size:14.5px; border-radius:3px; white-space:nowrap; transition:transform 0.12s ease;}
.pricing-box .btn-primary:active {transform:scale(0.97);}
.faq-list {border-top:1px solid var(--line-on-paper);}
details {border-bottom:1px solid var(--line-on-paper); padding:22px 0;}
summary {cursor:pointer; font-family:'Fraunces',serif; font-weight:600; font-size:18px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;}
summary::-webkit-details-marker {display:none;}
summary::after {content:"+"; font-family:'Space Mono',monospace; font-size:20px; color:var(--yellow-dim); flex-shrink:0;}
details[open] summary::after {content:"–";}
details p {font-size:14.5px; line-height:1.65; color:#4a4a44; margin:14px 0 0; max-width:640px;}
.cta {background:var(--yellow); color:var(--ink); padding:80px 0;}
.cta h2 {font-size:clamp(26px,3.8vw,42px); max-width:620px;}
.cta p {font-size:15px; max-width:400px; line-height:1.55;}
.cta .btn-dark {background:var(--ink); color:var(--yellow); text-decoration:none; padding:15px 26px; font-weight:600; font-size:14.5px; border:1px solid var(--ink); white-space:nowrap; border-radius:3px; transition:transform 0.12s ease, background 0.15s ease, color 0.15s ease;}
.cta .btn-dark:active {transform:scale(0.97);}
footer {background:var(--board); color:rgba(253,251,242,0.6); padding:36px 0 26px; border-top:1px solid var(--line-on-ink);}
.footer-bottom {display:flex; justify-content:space-between; font-size:12px; flex-wrap:wrap; gap:10px; max-width:var(--maxw); margin:0 auto; padding:0 28px;}
@media (max-width:860px) {
    nav.links{display:none;}
    .sb-cols{grid-template-columns:1fr;}
    .addons-grid{grid-template-columns:1fr 1fr;}
    .addon:nth-child(3n){border-right:1px solid var(--line-on-ink);}
    .addon:nth-child(2n){border-right:none;}
    .pricing-box{flex-direction:column; align-items:flex-start;}
  }
@media (max-width:520px) {
    .addons-grid{grid-template-columns:1fr;}
    .addon{border-right:none !important;}
  }

/* ===== PROCESS ===== */
.stage {border-top:1px solid var(--line-on-paper); padding:44px 0;}
.stage:last-child {border-bottom:1px solid var(--line-on-paper);}
.stage-head {display:flex; align-items:baseline; gap:20px; margin-bottom:22px; flex-wrap:wrap;}
.stage-head .n {font-family:'Space Mono',monospace; font-size:14px; color:var(--yellow-dim); font-weight:700;}
.stage-head h3 {font-family:'Fraunces',serif; font-weight:600; font-size:26px;}
.stage-head .dur {font-family:'Space Mono',monospace; font-size:11.5px; color:#6a6a62; background:rgba(10,10,10,0.05); padding:5px 10px; border-radius:3px;}
.stage-desc {font-size:15px; line-height:1.65; color:#3a3a34; max-width:620px; margin-bottom:26px;}
.stage-cols {display:grid; grid-template-columns:1fr 1fr; gap:32px;}
.stage-col h4 {font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.03em; color:var(--yellow-dim); margin:0 0 12px;}
.stage-col ul {margin:0; padding-left:18px; font-size:14px; line-height:1.7; color:#3a3a34;}
.stage-col ul li {margin-bottom:2px;}
.timeline {position:relative; padding-top:10px;}
.timeline-bar {position:relative; height:2px; background:var(--line-on-ink); margin:36px 0 0;}
.timeline-points {display:flex; justify-content:space-between;}
.t-point {flex:1; text-align:center; position:relative; padding-top:22px;}
.t-point::before {content:""; position:absolute; top:0; left:50%; transform:translate(-50%,-50%); width:12px; height:12px; background:var(--yellow); border-radius:50%; border:3px solid var(--board);}
.t-point .week {font-family:'Space Mono',monospace; font-size:11px; color:var(--yellow); margin-bottom:6px;}
.t-point .what {font-size:13.5px; line-height:1.5; color:rgba(253,251,242,0.8); max-width:150px; margin:0 auto;}
summary::after {content:"+"; font-family:'Space Mono',monospace; font-size:20px; color:var(--yellow-dim); flex-shrink:0; transition:transform 0.2s ease;}
@media (max-width:860px) {
    nav.links{display:none;}
    .stage-cols{grid-template-columns:1fr;}
    .timeline-points{flex-wrap:wrap; gap:24px 0;}
    .t-point{flex:0 0 50%;}
  }

/* ===== BOOK A CALL ===== */
@media (prefers-reduced-motion: reduce) {
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }
h1,h2,h3.chalk {font-family:'Fraunces', serif; font-weight:400; line-height:1.05; margin:0;}
.hero-tag {
    display:inline-flex; align-items:center; gap:8px; font-family:'Space Mono', monospace; font-size:12px;
    color:var(--yellow); border:1px solid var(--line-on-ink); padding:6px 12px; margin-bottom:20px; border-radius:20px;
  }
.hero h1 {font-size:clamp(30px, 4.4vw, 52px); color:var(--yellow); max-width:640px;}
.hero p.lead {max-width:520px; margin-top:18px; font-size:16px; line-height:1.6; color:rgba(253,251,242,0.78);}
.section {padding:70px 0 96px;}
.book-grid {display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:start;}
.field {margin-bottom:28px;}
.field label {
    display:block; font-family:'Space Mono', monospace; font-size:11.5px; color:var(--yellow-dim);
    text-transform:uppercase; letter-spacing:0.03em; margin-bottom:8px;
  }
.field input, .field select, .field textarea {
    width:100%; border:none; border-bottom:1px solid var(--line-on-paper); background:transparent;
    font-family:'Inter',sans-serif; font-size:16px; color:var(--ink); padding:8px 2px;
  }
.field select {appearance:none; -webkit-appearance:none; background-image:none; cursor:pointer;}
.field textarea {resize:vertical; min-height:90px; line-height:1.5;}
.field input:focus, .field select:focus, .field textarea:focus {outline:none; border-bottom:2px solid var(--ink);}
.field-row {display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.submit-row {display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:8px;}
.btn-primary {
    background:var(--ink); color:var(--yellow); text-decoration:none; border:1px solid var(--ink);
    padding:15px 26px; font-weight:600; font-size:14.5px; border-radius:3px; cursor:pointer;
    font-family:'Inter',sans-serif; transition:transform 0.12s ease, background 0.15s ease, color 0.15s ease;
  }
.btn-primary:hover {background:transparent; color:var(--ink);}
.btn-primary:active {transform:scale(0.97);}
.form-note {font-size:12.5px; color:#6a6a62; max-width:340px; line-height:1.5;}
.status-msg {font-size:13.5px; font-weight:600; display:none;}
.status-msg.show {display:block;}
.side-card {border:1px solid var(--line-on-paper); padding:26px 26px 28px; margin-bottom:20px;}
.side-card h3 {font-family:'Inter',sans-serif; font-weight:700; font-size:16px; margin:0 0 18px;}
.step {display:flex; gap:14px; margin-bottom:16px;}
.step:last-child {margin-bottom:0;}
.step .n {font-family:'Space Mono',monospace; font-size:12px; color:var(--yellow-dim); font-weight:700; padding-top:2px;}
.step .t {font-size:13.5px; line-height:1.55; color:#3a3a34;}
.step .t b {display:block; font-family:'Inter',sans-serif; font-weight:700; color:var(--ink); font-size:14.5px; margin-bottom:2px;}
.contact-card {background:var(--ink); color:var(--paper); padding:26px 26px 28px; border:1px solid var(--line-on-ink);}
.contact-card h3 {color:var(--paper); font-family:'Inter',sans-serif; font-weight:700; font-size:16px; margin:0 0 16px;}
.contact-card a {display:block; text-decoration:none; color:var(--yellow); font-size:14.5px; margin-bottom:10px; font-weight:600;}
.contact-card .loc {font-size:13px; color:rgba(253,251,242,0.6); margin-top:14px;}
@media (max-width:860px) {
    nav.links{display:none;}
    .book-grid{grid-template-columns:1fr;}
    .field-row{grid-template-columns:1fr;}
  }

/* ===== CONTACT ===== */
.hero-inner {max-width:var(--maxw); margin:0 auto; padding:64px 28px 56px;}
.contact-grid {display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:start;}
.field {margin-bottom:26px;}
.field label {display:block; font-family:'Space Mono', monospace; font-size:11.5px; color:var(--yellow-dim); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:8px;}
.field input, .field select, .field textarea {width:100%; border:none; border-bottom:1px solid var(--line-on-paper); background:transparent; font-family:'Inter',sans-serif; font-size:16px; color:var(--ink); padding:8px 2px;}
.field select {appearance:none; -webkit-appearance:none; cursor:pointer;}
.field textarea {resize:vertical; min-height:100px; line-height:1.5;}
.submit-row {display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px;}
.btn-primary {background:var(--ink); color:var(--yellow); text-decoration:none; border:1px solid var(--ink); padding:15px 26px; font-weight:600; font-size:14.5px; border-radius:3px; cursor:pointer; font-family:'Inter',sans-serif; transition:transform 0.12s ease, background 0.15s ease, color 0.15s ease;}
.contact-card {background:var(--ink); color:var(--paper); padding:28px 26px 30px; border:1px solid var(--line-on-ink); margin-bottom:20px;}
.contact-card .row {display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line-on-ink);}
.contact-card .row:last-of-type {border-bottom:none;}
.contact-card .row .k {font-family:'Space Mono',monospace; font-size:11px; color:rgba(253,251,242,0.55); text-transform:uppercase;}
.contact-card .row a, .contact-card .row span.v {font-size:14.5px; font-weight:600; color:var(--yellow); text-decoration:none;}
.contact-card .loc {font-size:13px; color:rgba(253,251,242,0.6); margin-top:16px;}
.redirect-card {border:1px solid var(--line-on-paper); padding:26px; }
.redirect-card h3 {font-family:'Fraunces',serif; font-weight:600; font-size:18px; margin:0 0 10px;}
.redirect-card p {font-size:13.5px; line-height:1.6; color:#4a4a44; margin:0 0 16px;}
.redirect-card a.link {font-family:'Inter',sans-serif; font-weight:600; font-size:14px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px;}
@media (max-width:860px) {
    nav.links{display:none;}
    .contact-grid{grid-template-columns:1fr;}
    .field-row{grid-template-columns:1fr;}
  }

/* ===== CASE STUDY: KIET ===== */
:root {
    --ink:#0a0a0a;
    --board:#111310;
    --paper:#fdfbf2;
    --yellow:#ffd400;
    --yellow-dim:#c9a600;
    --line-on-ink: rgba(255,214,0,0.22);
    --line-on-paper: rgba(10,10,10,0.16);
    --maxw:1180px;
  }
.nav-cta {background:var(--yellow); color:var(--ink); text-decoration:none; padding:10px 18px; font-size:13.5px; font-weight:600; border:1px solid var(--yellow); border-radius:3px; transition:transform 0.12s ease;}
.hero-inner {max-width:var(--maxw); margin:0 auto; padding:60px 28px 0;}
.breadcrumb {font-family:'Space Mono',monospace; font-size:12px; color:rgba(253,251,242,0.55); margin-bottom:22px;}
.breadcrumb a {color:var(--yellow); text-decoration:none;}
.hero-tags {display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px;}
.hero-tags span {font-family:'Space Mono',monospace; font-size:11px; color:var(--yellow); border:1px solid var(--line-on-ink); padding:5px 10px; border-radius:20px; text-transform:uppercase;}
.hero h1 {font-size:clamp(30px, 4.6vw, 54px); color:var(--yellow); max-width:760px;}
.hero p.lead {max-width:600px; margin-top:18px; font-size:16px; line-height:1.6; color:rgba(253,251,242,0.78);}
.overview-strip {border-top:1px solid var(--line-on-ink); display:flex; flex-wrap:wrap; margin-top:44px;}
.overview-strip .k {font-family:'Space Mono',monospace; font-size:11px; color:rgba(253,251,242,0.55); text-transform:uppercase; margin-bottom:6px;}
.overview-strip .v {font-family:'Fraunces',serif; font-size:19px; color:var(--yellow); line-height:1.3;}
.img-slot {
    border:1px dashed rgba(10,10,10,0.28); background:rgba(10,10,10,0.03);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:36px 20px; color:#6a6a62; gap:8px;
  }
.img-slot .icon {font-size:22px;}
.img-slot .txt {font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.02em;}
.on-ink .img-slot {border-color:var(--line-on-ink); background:rgba(255,214,0,0.03); color:rgba(253,251,242,0.5);}
.section {padding:80px 0;}
.section h2 {font-size:clamp(24px,3.2vw,36px); max-width:620px;}
.section-head {max-width:660px; margin-bottom:44px;}
.section-head p {font-size:15px; line-height:1.65; color:#3a3a34; margin-top:12px;}
.on-ink .section-head p {color:rgba(253,251,242,0.75);}
.two-col {display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;}
.two-col p {font-size:15px; line-height:1.7; color:#3a3a34;}
.on-ink .two-col p {color:rgba(253,251,242,0.78);}
.formats-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-on-paper); border:1px solid var(--line-on-paper);}
.format-card {background:var(--paper); display:flex; flex-direction:column;}
.format-card .fc-body {padding:22px 20px;}
.format-card h4 {font-family:'Fraunces',serif; font-weight:600; font-size:17px; margin:0 0 8px;}
.format-card p {font-size:13.5px; line-height:1.6; color:#4a4a44; margin:0;}
.note-box {border:1px solid var(--line-on-paper); padding:28px 30px; font-size:14px; line-height:1.65; color:#4a4a44;}
.note-box b {color:var(--ink);}
.cta {background:var(--yellow); color:var(--ink); padding:76px 0;}
.cta h2 {font-size:clamp(26px,3.6vw,40px); max-width:600px; font-family:'Fraunces',serif;}
.cta .row {display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap; margin-top:16px;}
.cta p {font-size:14.5px; max-width:380px; line-height:1.55;}
.cta .btn-dark {background:var(--ink); color:var(--yellow); text-decoration:none; padding:15px 26px; font-weight:600; font-size:14.5px; border-radius:3px; white-space:nowrap; transition:transform 0.12s ease;}
footer {background:var(--board); color:rgba(253,251,242,0.6); padding:34px 0 24px; border-top:1px solid var(--line-on-ink);}
@media (max-width:860px) {
    nav.links{display:none;}
    .two-col{grid-template-columns:1fr;}
    .formats-grid{grid-template-columns:1fr 1fr;}
  }
@media (max-width:520px) {
    .formats-grid{grid-template-columns:1fr;}
  }