/* =========================================================
   Suhail — Claude AI setup proposal
   Direction: warm merch-shop "work order"
   ========================================================= */

:root{
  --paper:      #F4EFE4;
  --paper-2:    #FBF8F1;
  --paper-deep: #ECE3D2;
  --ink:        #221F1A;
  --ink-soft:   #6B6459;
  --teal:       #1E5F58;
  --teal-deep:  #143F3A;
  --ochre:      #D89A3C;
  --stamp:      #C6492E;
  --line:       #DCD3C1;
  --line-dk:    #C4B79E;

  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --disp: "Bricolage Grotesque", "Inter", sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --wrap: 1080px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* ---------- shared type ---------- */
.eyebrow, .section-label, .dispatch__label, .case__kicker,
.rates__k, .foot__meta, .ticker, .nav__cta, .brand__sub{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
}
.section-label{
  font-size:12px;
  color:var(--teal);
  margin:0 0 14px;
}
.section-label--light{ color:var(--ochre); }
.section-title{
  font-family:var(--disp);
  font-weight:700;
  font-size:clamp(30px,5vw,52px);
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0 0 44px;
  max-width:20ch;
}
.section-title--light{ color:var(--paper); }
.u-teal{ color:var(--teal); }
.u-hand{ font-style:italic; color:var(--ochre); font-family:var(--disp); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--bg); color:var(--fg);
  font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none;
  padding:14px 22px; border:2px solid var(--ink);
  border-radius:2px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  box-shadow:4px 4px 0 var(--teal-deep);
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--teal-deep); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--teal-deep); }
.btn--sm{ padding:9px 15px; font-size:11px; box-shadow:3px 3px 0 var(--teal-deep); }
.btn--lg{ padding:16px 26px; font-size:14px; }
.btn--xl{ padding:20px 34px; font-size:16px; box-shadow:6px 6px 0 var(--teal-deep); }
.btn--ghost{
  --bg:transparent; --fg:var(--ink);
  box-shadow:4px 4px 0 var(--line-dk);
}
.btn--ghost:hover{ box-shadow:6px 6px 0 var(--line-dk); background:var(--paper-2); }
.btn:focus-visible{ outline:3px solid var(--ochre); outline-offset:3px; }

/* ---------- ticker ---------- */
.ticker{
  background:var(--ink); color:var(--paper);
  overflow:hidden; white-space:nowrap;
  border-bottom:2px solid var(--ink);
  font-size:11px; padding:7px 0;
}
.ticker__track{ display:inline-block; animation:ticker 26s linear infinite; }
.ticker__track span{ padding:0 14px; }
.ticker .dot{ color:var(--ochre); padding:0 2px; }
@keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(244,239,228,.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand__mark{
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--teal); color:var(--paper);
  font-family:var(--disp); font-weight:800; font-size:18px;
  border-radius:3px; box-shadow:2px 2px 0 var(--teal-deep);
}
.brand__text{ display:flex; flex-direction:column; line-height:1.05; font-family:var(--disp); font-weight:700; font-size:18px; }
.brand__sub{ font-size:9px; font-weight:400; color:var(--ink-soft); letter-spacing:.12em; margin-top:2px; }
.nav__cta{ text-decoration:none; }

/* ---------- sections base ---------- */
.hero, .read, .approach, .answers, .honest, .proof, .why, .final{
  padding-top:96px; padding-bottom:96px;
}

/* ---------- hero ---------- */
.hero{ padding-top:72px; padding-bottom:80px; position:relative; overflow:hidden; }
.hero::after{
  content:""; position:absolute; right:-140px; top:40px;
  width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(216,154,60,.28), transparent 70%);
  pointer-events:none;
}
.hero__title{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(34px,6.4vw,72px);
  line-height:1.02; letter-spacing:-.03em;
  margin:0 0 26px; max-width:16ch;
}
.hero__lede{ font-size:clamp(17px,2.2vw,21px); max-width:60ch; color:#3b362f; margin:0 0 34px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:40px; }
.hero__chips{
  list-style:none; margin:0; padding:26px 0 0; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px;
}
.hero__chips li{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  background:var(--paper-2); border:1px solid var(--line);
  padding:8px 13px; border-radius:2px;
}
.hero__chips li::before{ content:"✓ "; color:var(--teal); font-weight:700; }
.br-lg{ display:none; }

/* ---------- read (their words) ---------- */
.read{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.read__grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.read__card{
  background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--ochre);
  padding:24px 24px 22px; border-radius:3px;
}
.read__you{
  font-family:var(--disp); font-style:italic; font-weight:500;
  font-size:19px; line-height:1.3; margin:0 0 14px; color:var(--teal-deep);
}
.read__me{ margin:0; font-size:15.5px; color:#3b362f; }
.read__me span{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--stamp); display:inline-block; margin-right:4px; }

/* ---------- approach steps ---------- */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:2px solid var(--ink); border-left:2px solid var(--ink); }
.step{ padding:30px 28px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); background:var(--paper-2); position:relative; }
.step__no{ font-family:var(--mono); font-weight:700; font-size:13px; color:var(--ochre); }
.step__title{ font-family:var(--disp); font-weight:700; font-size:23px; margin:10px 0 8px; letter-spacing:-.01em; }
.step p{ margin:0; color:#3b362f; font-size:15.5px; }

/* ---------- answers (dark work-order) ---------- */
.answers{ background:var(--teal-deep); color:var(--paper); }
.answer{
  background:#1a4a45; border:1px solid #2c6660; border-radius:5px;
  margin-bottom:22px; overflow:hidden;
}
.answer__tag{
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; font-weight:700;
  background:#123833; color:var(--paper);
  padding:16px 24px; border-bottom:1px solid #2c6660;
  display:flex; align-items:center; gap:12px;
}
.answer__tag span{
  background:var(--ochre); color:var(--teal-deep);
  width:28px; height:28px; display:grid; place-items:center; border-radius:3px;
  font-weight:700; flex:none;
}
.answer__body{ padding:24px; }
.answer__body p{ margin:0 0 14px; color:#e8e2d4; }
.answer__body p:last-child{ margin-bottom:0; }
.answer__list{ margin:0 0 14px; padding-left:0; list-style:none; display:grid; gap:12px; }
.answer__list li{ padding-left:24px; position:relative; color:#e8e2d4; }
.answer__list li::before{ content:"→"; position:absolute; left:0; color:var(--ochre); font-weight:700; }
.answer__list strong{ color:var(--paper); }
.answer__note{ font-size:14.5px; color:#b9d1cd !important; border-top:1px dashed #2c6660; padding-top:14px; }

.rates{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.rates__item{ background:#123833; border:1px solid #2c6660; border-radius:4px; padding:20px; }
.rates__k{ font-size:11px; color:var(--ochre); display:block; margin-bottom:8px; }
.rates__v{ font-family:var(--disp); font-weight:700; font-size:24px; display:block; line-height:1.1; }
.rates__v--edit{ color:var(--ochre); border:1px dashed var(--ochre); padding:4px 10px; border-radius:3px; font-size:18px; }
.rates__note{ display:block; margin-top:10px; font-size:14px; color:#b9d1cd; }

/* ---------- honest / dispatch widget ---------- */
.honest__lede{ font-size:clamp(17px,2vw,20px); max-width:62ch; color:#3b362f; margin:-24px 0 40px; }
.dispatch{ border:2px solid var(--ink); border-radius:5px; background:var(--paper-2); overflow:hidden; box-shadow:6px 6px 0 var(--line-dk); }
.dispatch__head{ background:var(--ink); color:var(--paper); display:flex; justify-content:space-between; align-items:center; padding:11px 18px; }
.dispatch__label{ font-size:12px; color:var(--ochre); }
.dispatch__hint{ font-family:var(--mono); font-size:11px; color:#b9b2a4; }
.dispatch__tabs{ display:flex; flex-wrap:wrap; gap:0; border-bottom:2px solid var(--ink); }
.dtab{
  flex:1 1 auto; min-width:140px; cursor:pointer;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;
  background:var(--paper-deep); color:var(--ink);
  border:0; border-right:2px solid var(--ink);
  padding:15px 14px; transition:background .15s ease;
}
.dtab:last-child{ border-right:0; }
.dtab:hover{ background:#e2d8c4; }
.dtab.is-active{ background:var(--teal); color:var(--paper); }
.dtab:focus-visible{ outline:3px solid var(--ochre); outline-offset:-3px; }
.dispatch__panel{ padding:26px 24px; }
.dp{ display:grid; grid-template-columns:1.1fr 1fr; gap:22px; align-items:start; }
.dp__lead h3{ font-family:var(--disp); font-weight:700; font-size:22px; margin:0 0 6px; }
.dp__lead .dp__task{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--teal); }
.dp__lead p{ margin:12px 0 0; color:#3b362f; font-size:15.5px; }
.dp__meta{ display:grid; gap:12px; }
.dp__stat{ background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:14px 16px; }
.dp__stat .k{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); display:block; margin-bottom:3px; }
.dp__stat .v{ font-family:var(--disp); font-weight:700; font-size:19px; }
.dp__stat--catch{ border-left:4px solid var(--stamp); background:#faf1ea; }
.dp__stat--catch .v{ font-family:var(--sans); font-weight:500; font-size:14.5px; line-height:1.45; }

.pull{ margin:40px 0 0; padding:26px 30px; border-left:5px solid var(--ochre); background:var(--paper-2); border-radius:0 4px 4px 0; }
.pull p{ margin:0; font-family:var(--disp); font-style:italic; font-weight:500; font-size:clamp(18px,2.4vw,24px); line-height:1.35; color:var(--teal-deep); }

/* ---------- proof ---------- */
.proof{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.case{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-bottom:56px; }
.case__media{ border:2px solid var(--ink); border-radius:5px; overflow:hidden; box-shadow:8px 8px 0 var(--teal-deep); }
.case__media img{ width:100%; height:auto; }
.case__kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--teal); margin:0 0 10px; }
.case__title{ font-family:var(--disp); font-weight:700; font-size:clamp(24px,3vw,32px); margin:0 0 12px; letter-spacing:-.01em; }
.case__body > p{ color:#3b362f; }
.case__stat{ margin:18px 0 0; font-size:16px; }
.case__stat .count{ font-family:var(--disp); font-weight:800; font-size:40px; color:var(--stamp); line-height:1; margin-right:6px; }
.case__stat em{ font-style:normal; color:var(--ink-soft); font-size:15px; }

.receipt{ background:var(--paper); border:1px dashed var(--line-dk); border-radius:4px; padding:16px 18px; margin:18px 0 4px; font-family:var(--mono); font-size:13px; }
.receipt__head{ font-size:11px; letter-spacing:.1em; color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:8px; }
.receipt__head span{ color:var(--teal); }
.receipt__row{ display:flex; justify-content:space-between; padding:5px 0; color:#3b362f; }
.receipt__row--total{ border-top:1px solid var(--ink); margin-top:6px; padding-top:9px; font-weight:700; color:var(--ink); font-size:15px; }

.cases-2up{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:34px; }
.minicase{ background:var(--paper); border:2px solid var(--ink); border-radius:5px; padding:0 0 22px; overflow:hidden; box-shadow:5px 5px 0 var(--line-dk); }
.minicase__media{ border-bottom:2px solid var(--ink); }
.minicase .case__kicker{ padding:20px 22px 0; margin-bottom:6px; }
.minicase__title{ font-family:var(--disp); font-weight:700; font-size:22px; margin:0 22px 8px; }
.minicase p:last-child{ margin:0 22px; color:#3b362f; font-size:15px; }
.minicase--text{ padding-top:0; }
.minicase__badge{ font-size:30px; padding:24px 22px 4px; }
.proof__more{ font-size:15.5px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:22px; margin:0; max-width:70ch; }

/* ---------- why ---------- */
.why{ background:var(--ink); color:var(--paper); }
.why__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.why__item{ background:#2c2822; border:1px solid #423c33; border-top:3px solid var(--ochre); border-radius:4px; padding:26px 24px; }
.why__item h3{ font-family:var(--disp); font-weight:700; font-size:20px; margin:0 0 10px; }
.why__item p{ margin:0; color:#cfc8ba; font-size:15.5px; }

/* ---------- final ---------- */
.final{ text-align:center; }
.final__inner{ max-width:720px; }
.final__title{ font-family:var(--disp); font-weight:800; font-size:clamp(28px,4.6vw,46px); line-height:1.06; letter-spacing:-.02em; margin:0 auto 20px; }
.final__lede{ font-size:clamp(16px,2vw,19px); color:#3b362f; max-width:56ch; margin:0 auto 34px; }
.final__ps{
  max-width:60ch; margin:34px auto 0; padding:16px 22px;
  background:var(--paper-2); border:1px dashed var(--line-dk); border-radius:4px;
  font-family:var(--disp); font-style:italic; font-size:clamp(15px,1.8vw,18px);
  color:var(--teal-deep); line-height:1.45;
}
.final__ps span{ font-family:var(--mono); font-style:normal; font-size:11px; letter-spacing:.12em; color:var(--stamp); margin-right:6px; }
.final__ps strong{ color:var(--ink); }

/* ---------- footer ---------- */
.foot{ background:var(--teal-deep); color:var(--paper); padding:26px 0; }
.foot__inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:center; font-family:var(--mono); font-size:12px; }
.foot__meta{ color:#9dbcb7; }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .read__grid, .steps, .rates, .dp, .case, .cases-2up, .why__grid{ grid-template-columns:1fr; }
  .step{ border-left:2px solid var(--ink); }
  .steps{ border-left:2px solid var(--ink); }
  .case__media{ box-shadow:5px 5px 0 var(--teal-deep); }
  .case{ gap:26px; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .wrap{ padding:0 18px; }
  .hero, .read, .approach, .answers, .honest, .proof, .why, .final{ padding-top:64px; padding-bottom:64px; }
  .dtab{ min-width:0; flex:1 1 100%; border-right:0; border-bottom:2px solid var(--ink); }
  .dtab:last-child{ border-bottom:0; }
  .nav__cta{ display:none; }
  .hero__actions .btn{ width:100%; justify-content:center; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .ticker__track{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn{ transition:none; }
}