/* Hallmark · refine pass · pre-emit critique: P4 H4 E4 S4 R5 V4 · fonts: Cormorant Garamond + Jost (2) · contrast: navy stat band + bold display · motion: one-shot swash draw only */
/* Staglabs course landing page. Antler Global house style.
   Palette and voice from antler-house-style. Type system from antler-global.com
   (Cormorant Garamond display, Jost body and labels). Two-font system. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Jost:wght@300;400;500;600;700&display=swap');

:root{
  --navy:#21384F; --navy-2:#27496A; --ink-blue:#304254;
  --amber:#F9982F; --gold:#CB962E; --terracotta:#B26546; --clay:#9B4819;
  --cream:#F4F1E8; --ivory:#FFF8ED; --paper:#FBF9F3; --ink:#191919; --green:#3FB68B;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --amber-deep:#C9761A; --muted:#9a917f;
  --maxw:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper);
  font-size:18px; line-height:1.65; font-weight:300;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.6rem;}

h1,h2,h3{font-family:var(--serif); color:var(--navy); font-weight:600; letter-spacing:-.01em; margin:0;}
h1{font-size:clamp(3.1rem,7.4vw,5.4rem); line-height:1; font-weight:700; letter-spacing:-.022em;}
h2{font-size:clamp(2rem,4vw,2.9rem); line-height:1.08;}
h3{font-size:1.4rem; font-weight:600;}
p{margin:.7rem 0;}
a{color:var(--navy); text-decoration:none;}

.eyebrow{
  font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--clay); margin:0 0 1.1rem;
}

/* ---- buttons ---- */
.btn{
  display:inline-block; font-family:var(--sans); font-weight:600; font-size:1.02rem;
  padding:.95rem 1.9rem; border-radius:4px; cursor:pointer;
  transition:transform .14s var(--ease-out), box-shadow .14s var(--ease-out), background .14s;
  letter-spacing:.01em;
}
.btn:focus-visible{outline:3px solid var(--navy); outline-offset:3px;}
.band-navy .btn:focus-visible, .cta-final .btn:focus-visible{outline-color:var(--ivory);}
.btn-primary{background:var(--amber); color:var(--navy); border:0;
  box-shadow:0 3px 0 var(--amber-deep), 0 14px 26px -12px rgba(249,152,47,.85);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 6px 0 var(--amber-deep), 0 22px 36px -14px rgba(249,152,47,.95);}
.btn-primary:active{transform:translateY(-1px); box-shadow:0 2px 0 var(--amber-deep), 0 10px 20px -12px rgba(249,152,47,.8);}
.btn-ghost{background:transparent; color:var(--navy); border:1px solid var(--navy);}
.btn-ghost:hover{background:var(--navy); color:var(--ivory);}
.btn-ghost-light{background:transparent; color:var(--ivory); border:1px solid rgba(255,248,237,.5);}
.btn-ghost-light:hover{background:var(--ivory); color:var(--navy);}

/* ---- nav ---- */
.nav{display:flex; align-items:center; justify-content:space-between; padding:1.3rem 0;}
.nav .brand{font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--navy); letter-spacing:.01em;}
.nav .brand small{font-family:var(--sans); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--clay); display:block; margin-top:.1rem; font-weight:500;}
.nav .antler img{height:40px; display:block;}

/* ---- hero ---- */
.hero{background:linear-gradient(180deg,var(--ivory),var(--paper)); padding:3rem 0 5rem; border-bottom:1px solid var(--cream);}
.hero h1{margin:.4rem 0 1.2rem; max-width:18ch;}
.hero .lede{font-size:1.3rem; color:var(--ink-blue); max-width:46ch; margin:0 0 1rem;}
.hero .sub{font-size:1.05rem; color:var(--ink); max-width:50ch; margin:0 0 2rem;}
.hero .cta-row{display:flex; gap:1rem; flex-wrap:wrap; align-items:center;}
.hero .note{font-family:var(--sans); font-size:.78rem; color:var(--ink-blue); margin-top:1.4rem; letter-spacing:.02em;}

/* ---- section scaffolding ---- */
section{padding:4.5rem 0;}
.section-head{max-width:60ch; margin-bottom:2.6rem;}
.section-head h2{margin-bottom:.6rem;}
.section-head p{font-size:1.15rem; color:var(--ink-blue);}
.rule{height:1px; background:var(--gold); opacity:.75; border:0; margin:0;}

/* ---- the one idea (navy band) ---- */
.band-navy{background:var(--navy); color:var(--ivory);}
.band-navy h2,.band-navy h3{color:var(--ivory);}
.band-navy .eyebrow{color:var(--amber);}
.idea{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2rem;}
.idea .step{padding:1.4rem 1.5rem; background:rgba(255,248,237,.05); border-left:2px solid var(--amber); border-radius:0 6px 6px 0;}
.idea .step .n{font-family:var(--sans); font-size:.74rem; letter-spacing:.16em; color:var(--amber); text-transform:uppercase;}
.idea .step h3{font-size:1.25rem; margin:.4rem 0 .3rem;}
.idea .step p{margin:0; color:rgba(255,248,237,.82); font-size:.98rem;}

/* ---- module grid ---- */
.modules{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem;}
.mod{background:var(--cream); border:1px solid #d8ccb2; border-radius:8px; padding:1.4rem 1.5rem; display:flex; gap:1.1rem; align-items:flex-start;}
.mod .num{font-family:var(--serif); font-size:2.1rem; font-weight:600; color:var(--terracotta); line-height:1; min-width:1.6rem;}
.mod h3{font-size:1.18rem; margin:0 0 .25rem; color:var(--navy);}
.mod p{margin:0; color:var(--ink-blue); font-size:.98rem; line-height:1.5;}

/* ---- who it's for ---- */
.cols3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
.card{background:var(--paper); border:1px solid var(--cream); border-top:3px solid var(--terracotta); border-radius:8px; padding:1.6rem;}
.card h3{margin:0 0 .5rem;}
.card p{margin:0; color:var(--ink-blue); font-size:1rem;}

/* ---- ladder ---- */
.ladder{counter-reset:rung; margin-top:1.5rem;}
.ladder .rung{display:flex; gap:1.2rem; padding:1.2rem 0; border-top:1px solid var(--cream); align-items:baseline;}
.ladder .rung:first-child{border-top:0;}
.ladder .rung::before{counter-increment:rung; content:counter(rung); font-family:var(--serif); font-size:1.5rem; color:var(--amber); font-weight:600; min-width:1.4rem;}
.ladder .rung b{color:var(--navy); font-weight:600;}
.ladder .rung span{color:var(--ink-blue);}

/* ---- final CTA ---- */
.cta-final{background:linear-gradient(160deg,var(--navy),var(--navy-2)); color:var(--ivory); text-align:center;}
.cta-final h2{color:var(--ivory); max-width:20ch; margin:0 auto 1rem;}
.cta-final p{color:rgba(255,248,237,.85); max-width:50ch; margin:0 auto 2rem; font-size:1.15rem;}
.cta-final .cta-row{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}
.cta-final .price{font-family:var(--sans); font-size:.8rem; letter-spacing:.04em; color:rgba(255,248,237,.7); margin-top:1.6rem;}

/* ---- footer ---- */
footer{background:var(--navy); color:rgba(255,248,237,.8); padding:3rem 0 2.4rem; border-top:1px solid var(--navy-2);}
footer .grid{display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start;}
footer img{height:46px; margin-bottom:1rem;}
footer .tag{font-family:var(--serif); font-size:1.3rem; color:var(--ivory); max-width:24ch;}
footer a{color:var(--amber);}
footer .meta{font-family:var(--sans); font-size:.76rem; letter-spacing:.03em; color:rgba(255,248,237,.55); margin-top:2rem; line-height:1.7;}

/* ---- overflow guard ---- */
html,body{overflow-x:clip;}

/* ---- hand-drawn underline swash (one-shot draw on load, then static) ---- */
.swish{position:relative; white-space:nowrap;}
.swish-line{position:absolute; left:-.04em; bottom:-.14em; width:calc(100% + .08em); height:.38em; overflow:visible; pointer-events:none;}
.swish-line path{
  fill:none; stroke:var(--amber); stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1;
  animation:swish-draw .9s var(--ease-out) .35s forwards;
}
@keyframes swish-draw{ to{ stroke-dashoffset:0; } }

/* ---- by the numbers band (static, no animation) ---- */
.stats{background:var(--navy); color:var(--ivory); text-align:center;}
.stats .row{display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; align-items:start;}
.stat .n{font-family:var(--serif); font-weight:700; font-size:clamp(3rem,7vw,4.8rem); line-height:1; color:var(--amber); font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.stat .l{font-family:var(--sans); font-weight:400; font-size:.98rem; color:rgba(255,248,237,.82); margin-top:.5rem; letter-spacing:.01em;}

@media (prefers-reduced-motion: reduce){
  .swish-line path{ animation:none; stroke-dashoffset:0; }
  .btn{ transition:none; }
}

/* ---- hero split + product card ---- */
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center;}
.hero-copy{min-width:0;}
.hero-art{position:relative; min-width:0; display:flex; justify-content:center;}
.brief-card{
  background:var(--paper); border:1px solid #e7dfca; border-radius:16px; padding:1.5rem 1.6rem; width:100%; max-width:25rem;
  box-shadow:0 34px 64px -34px rgba(33,56,79,.5); transform:rotate(-2.2deg);
}
.brief-card .tag{font-family:var(--sans); font-weight:600; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--clay);}
.brief-card h4{font-family:var(--serif); color:var(--navy); font-size:1.4rem; font-weight:600; margin:.25rem 0 .9rem;}
.brief-card .line{display:flex; gap:.6rem; align-items:flex-start; padding:.5rem 0; border-top:1px solid #efe9d8; font-size:.96rem; color:var(--ink-blue); line-height:1.4;}
.brief-card .line:first-of-type{border-top:0;}
.brief-card .line.muted{color:var(--muted);}
.ckwrap{flex:0 0 auto; color:var(--amber); margin-top:.12rem; display:inline-flex;}
.line.muted .ckwrap{color:var(--muted);}
.ck{width:16px; height:16px; display:block;}
.brief-card .stamp{margin-top:1.1rem; display:inline-flex; gap:.45rem; align-items:center; font-family:var(--sans); font-weight:600; font-size:.82rem; color:var(--navy); background:#f4ecd6; padding:.4rem .8rem; border-radius:999px;}
.brief-card .stamp .ck{color:var(--amber);}

/* ---- one-idea step icons ---- */
.step-ic{width:30px; height:30px; color:var(--amber); margin-bottom:.5rem; display:block;}

/* ---- scattered brand motif ---- */
.has-motif{position:relative; overflow:clip;}
.has-motif > .wrap{position:relative; z-index:1;}
.motif{position:absolute; pointer-events:none; opacity:.05; z-index:0; width:340px; height:auto; top:-30px; right:-40px; transform:rotate(8deg);}

/* ---- responsive ---- */
@media (max-width:820px){
  .idea,.modules,.cols3,.stats .row,.hero-grid{grid-template-columns:1fr;}
  body{font-size:17px;}
  section{padding:3.4rem 0;}
  .hero-art{margin-top:1.4rem;}
  .brief-card{transform:rotate(0deg);}
  .motif{width:200px; opacity:.04;}
}