/* ===== Dispatch design system — tagbrown.com ===== */
:root{
  --paper:#f6f2e9;      /* page background */
  --ink:#1b1d22;        /* primary text */
  --navy:#2a3b56;       /* headings, links, secondary buttons */
  --rust:#b5662e;       /* kicker, numerals, accents */
  --rust-cta:#a85c27;   /* CTA button bg only — darker for WCAG AA on white text */
  --panel:#ede7da;      /* "why me" panel background */
  --muted:#686c76;      /* nav links, captions — darkened to meet WCAG AA (4.5:1) on paper */
  --body-soft:#3c3f47;  /* section ledes */
  --rule:rgba(0,0,0,.10);
  --maxw:920px;
  /* Horizontal padding grows on wide screens to center content in a --maxw column,
     while full-width backgrounds (hero, why panel) still bleed edge to edge.
     Floors at 44px; the mobile breakpoint overrides to 22px. */
  --pad-x:max(44px, calc((100% - var(--maxw)) / 2));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}

/* Visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--navy);outline-offset:2px;border-radius:3px;
}

/* ---- Nav ---- */
.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px var(--pad-x);
  border-bottom:1px solid rgba(0,0,0,.12);
  background:var(--paper);
}
.nav .logo{font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:600;text-decoration:none;color:var(--ink)}
.nav .links{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);display:flex;gap:18px}
.nav .links a{text-decoration:none;color:var(--muted);transition:color .15s}
.nav .links a:hover,.nav .links a[aria-current="page"]{color:var(--navy)}

/* ---- Shared primitives ---- */
.seclabel{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rust);padding:36px var(--pad-x) 0;
}
.section{padding:8px var(--pad-x) 30px}
.btn{
  display:inline-block;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;
  padding:12px 22px;border-radius:4px;background:var(--navy);color:#fff;
  text-decoration:none;margin-top:16px;transition:filter .12s;
}
.btn:hover{filter:brightness(1.08)}
.btn.rust{background:var(--rust-cta)}
.btn-row{margin-top:18px}
.btn-row .btn+.btn{margin-left:10px}
.link-navy{color:var(--navy)}

/* ---- Footer ---- */
.site-foot{
  border-top:1px solid var(--rule);
  padding:30px var(--pad-x);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
}
.site-foot .logo{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--ink);text-decoration:none}
.site-foot .links{display:flex;gap:16px}
.site-foot a{color:var(--muted);text-decoration:none}
.site-foot a:hover{color:var(--navy)}
.site-foot .legal{color:var(--muted)}

/* ---- Hero ---- */
.hero{
  background-image:linear-gradient(rgba(16,20,32,.44),rgba(16,20,32,.54)),url('../images/hero.webp');
  background-size:cover;background-position:center;
  padding:84px var(--pad-x) 72px;
}
.hero .kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:#e7c9a8}
.hero h1{
  font-family:'Cormorant Garamond',serif;font-weight:600;font-size:58px;line-height:1.02;
  margin:16px 0 18px;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.5);max-width:18ch;
}
.hero .sub{font-size:17px;color:rgba(255,255,255,.92);max-width:58ch}
.hero .cta{margin-top:26px}
.hero .cta a{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:500;padding:12px 22px;border-radius:4px;
  text-decoration:none;margin-right:10px;display:inline-block;transition:filter .12s;
}
.hero .cta a:hover{filter:brightness(1.06)}
.hero .cta a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hero .cta .p{background:var(--rust-cta);color:#fff}
.hero .cta .s{border:1px solid rgba(255,255,255,.6);color:#fff}

/* ---- Interior page hero (no image) ---- */
.page-hero{padding:64px var(--pad-x) 8px}
.page-hero .kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust)}
.page-hero h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:46px;line-height:1.05;margin:14px 0 14px;color:var(--ink);max-width:20ch}
.page-hero .lede{font-size:17px;color:var(--body-soft);max-width:62ch}

/* ---- Homepage: numbered "How I help" rows ---- */
.num-sec{display:grid;grid-template-columns:84px 1fr;gap:28px;padding:26px 0;border-top:1px solid var(--rule)}
.num-sec .n{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--rust)}
.num-sec .h{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:28px;color:var(--navy)}
.num-sec .lede{font-size:15px;color:var(--body-soft);margin-top:8px;max-width:64ch}

/* ---- Pillar-2 tool grid with accessible tooltips ---- */
.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 28px;margin-top:18px;max-width:780px}
.use{position:relative;display:flex;gap:9px;align-items:baseline;font-size:14px;color:var(--navy)}
.use .dot{color:var(--rust);font-family:'JetBrains Mono',monospace}
.use .t{
  all:unset;font-family:'Inter',sans-serif;font-size:14px;color:var(--navy);
  border-bottom:1px dotted rgba(42,59,86,.45);cursor:default;
}
.use .t:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}
.use .tip{
  position:absolute;left:18px;top:150%;width:240px;background:var(--ink);color:#f3ece0;
  font-size:12.5px;line-height:1.45;padding:9px 12px;border-radius:6px;z-index:9;
  box-shadow:0 10px 28px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .12s;
}
.use:hover .tip,.use:focus-within .tip{opacity:1}

/* ---- Why-me panel ---- */
.why{background:var(--panel);padding:58px var(--pad-x)}
.why .inner{max-width:700px;margin:0 auto;text-align:center}
.why .h{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:30px;color:var(--navy)}
.why .lede{font-size:17px;line-height:1.62;color:#39414c;margin-top:14px}

/* ---- Closing CTA ---- */
.foot-cta{padding:46px var(--pad-x) 50px;text-align:center}
.foot-cta .h{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:30px;color:var(--ink)}

/* ---- "See the work" portfolio link under How I help / Services ---- */
.see-work-row{padding:18px 0 4px}
.see-work-row a{margin-left:112px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--navy);text-decoration:none;border-bottom:1px dotted var(--navy)}
.see-work-row a:hover{color:var(--rust);border-color:var(--rust)}
@media(max-width:760px){.see-work-row a{margin-left:60px}}

/* ---- Services page ---- */
.svc{padding:8px var(--pad-x) 30px}
.svc .block{padding:30px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:84px 1fr;gap:28px}
.svc .block .n{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--rust)}
.svc .block h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:30px;color:var(--navy)}
.svc .block p{font-size:15px;color:var(--body-soft);margin-top:10px;max-width:64ch}
.svc .block ul{margin:14px 0 0 0;padding:0;list-style:none;max-width:64ch}
.svc .block li{font-size:14.5px;color:var(--body-soft);padding:6px 0 6px 18px;position:relative}
.svc .block li::before{content:"+";position:absolute;left:0;color:var(--rust);font-family:'JetBrains Mono',monospace}

/* ---- Work page ---- */
.work{padding:8px var(--pad-x) 20px}
.case{padding:34px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.case .shot{border-radius:8px;overflow:hidden;border:1px solid var(--rule);box-shadow:0 14px 34px rgba(0,0,0,.10);background:var(--panel);aspect-ratio:16/10}
.case .shot img{width:100%;height:100%;object-fit:cover}
.case .meta .tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.case .meta h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:28px;color:var(--navy);margin:8px 0}
.case .meta p{font-size:15px;color:var(--body-soft);max-width:52ch}
.case .meta a.visit{display:inline-block;margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--navy);text-decoration:none;border-bottom:1px dotted var(--navy)}
.case.flip .shot{order:2}
.tools-cases{border-top:1px solid var(--rule);padding:30px 0}
.tools-cases h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:28px;color:var(--navy)}
.tools-cases .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:18px}
.tools-cases .item h3{font-family:'Inter',sans-serif;font-size:15px;font-weight:600;color:var(--ink)}
.tools-cases .item p{font-size:14.5px;color:var(--body-soft);margin-top:6px;max-width:50ch}

/* ---- About page ---- */
.about{padding:8px var(--pad-x) 20px}
.about>*{max-width:70ch}
.about p{font-size:16px;color:var(--body-soft);margin-top:18px;line-height:1.66}
.about h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:26px;color:var(--navy);margin-top:34px}
.about .pull{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--navy);line-height:1.35;border-left:3px solid var(--rust);padding-left:18px;margin:30px 0}

/* ---- Contact page ---- */
.contact{padding:8px var(--pad-x) 40px;display:grid;grid-template-columns:1fr 1fr;gap:48px}
.contact .col h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:24px;color:var(--navy)}
.contact .col p{font-size:15px;color:var(--body-soft);margin-top:10px;max-width:46ch}
.contact form{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.contact label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px}
.contact input,.contact textarea{
  font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid rgba(0,0,0,.18);border-radius:5px;padding:11px 12px;width:100%;
}
.contact textarea{min-height:120px;resize:vertical}
.contact .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact button{
  font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:#fff;background:var(--rust-cta);
  border:none;border-radius:4px;padding:12px 22px;cursor:pointer;align-self:flex-start;margin-top:4px;
}
.contact button:hover{filter:brightness(1.08)}
.contact button[disabled]{opacity:.6;cursor:default}
.contact .status{font-size:14px;margin-top:6px;min-height:1.2em}
.contact .status.ok{color:#2f7d3a}
.contact .status.err{color:#a33}
.contact .or{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);margin-top:14px}

/* ---- Motion ---- */
.fade-up{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.fade-up.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fade-up{opacity:1;transform:none;transition:none}}

/* ---- Responsive ---- */
@media(max-width:760px){
  :root{--pad-x:22px}
  .hero h1{font-size:40px}
  .page-hero h1{font-size:34px}
  .uses{grid-template-columns:1fr}
  .use{flex-wrap:wrap}
  .use .tip{position:static;opacity:1;width:auto;background:none;color:var(--muted);box-shadow:none;padding:2px 0 0 18px;font-size:12.5px;flex-basis:100%}
  .num-sec{grid-template-columns:46px 1fr;gap:14px}
  .svc .block{grid-template-columns:1fr;gap:8px}
  .case{grid-template-columns:1fr}
  .case.flip .shot{order:0}
  .tools-cases .grid{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr;gap:28px}
}