/* ══════════════════════════════════════════════════════════════════════════
   Broadhead Digital — hand-built, deliberately sharing nothing with the client
   template. If my own site looks like the samples, the samples stop being
   evidence of anything.

   The structural idea is a rail: a narrow left column carrying numbered
   section markers and short labels in mono, against a wide right column of
   content. Nothing in the client kit does that — those are all centred
   single-column bands separated by full-width rules.

   Dark ground on purpose: it reads as a workshop rather than a brochure, and
   it makes the screenshots — which are all light — the brightest thing on the
   page. The samples should be what your eye lands on.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family:'Instrument Sans'; font-weight:400 700; font-display:swap;
             src:url('/assets/instrument-sans.woff2') format('woff2'); }
@font-face { font-family:'Plex Mono'; font-weight:400 500; font-display:swap;
             src:url('/assets/ibm-plex-mono.woff2') format('woff2'); }

:root {
  --ink:#12110F;          /* near-black, warm */
  --ink-2:#191714;
  --bone:#EFEAE1;
  --dim:#9A9287;
  --faint:#655E55;
  --rule:#2A2621;
  --brass:#C9924E;
  --display:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --rail:172px;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--ink); color:var(--bone);
  font:17px/1.6 var(--display);
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:var(--brass); }
.wrap { max-width:1180px; margin:0 auto; padding:0 28px; }

h1,h2,h3 { margin:0; letter-spacing:-0.03em; line-height:1.05; text-wrap:balance; font-weight:600; }
h1 { font-size:clamp(38px,6.4vw,76px); letter-spacing:-0.042em; }
h2 { font-size:clamp(26px,3.4vw,40px); }
h3 { font-size:19px; letter-spacing:-0.02em; }
p { margin:0 0 1em; }
.lede { font-size:clamp(17px,1.9vw,20px); color:var(--dim); max-width:56ch; }

.label {
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
}

/* ── Masthead ───────────────────────────────────────────────────────────── */
.mast { border-bottom:1px solid var(--rule); position:sticky; top:0; background:var(--ink); z-index:40; }
.mast .wrap { display:flex; align-items:center; gap:22px; min-height:64px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--bone); }
.logo svg { width:19px; height:19px; flex:none; }
.logo b { font-weight:600; letter-spacing:-0.03em; font-size:17px; }
.mast nav { margin-left:auto; display:flex; gap:24px; }
.mast nav a { font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
              color:var(--dim); text-decoration:none; }
.mast nav a:hover { color:var(--brass); }
@media (max-width:820px) { .mast nav { display:none; } }

/* ── The rail ───────────────────────────────────────────────────────────────
   Every section is a two-column grid: marker on the left, content on the
   right. This is the page's whole structural signature. */
.sec { border-bottom:1px solid var(--rule); }
.sec > .wrap { display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:44px;
               padding-top:clamp(48px,7vw,88px); padding-bottom:clamp(48px,7vw,88px); }
.marker { position:sticky; top:96px; align-self:start; }
.marker .num { font-family:var(--mono); font-size:11px; color:var(--brass); letter-spacing:.16em; display:block; margin-bottom:8px; }
.marker .name { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
@media (max-width:900px) {
  .sec > .wrap { grid-template-columns:1fr; gap:18px; }
  .marker { position:static; display:flex; gap:12px; align-items:baseline; }
  .marker .num { margin-bottom:0; }
}

/* ── Opening ────────────────────────────────────────────────────────────────
   Full-bleed dark field behind the type. This is the single biggest thing
   separating a page that looks built from one that looks typeset — a headline
   sitting on a flat colour reads as a document, the same headline over a dark
   textured field reads as a site. The overlay is doing real work: it keeps the
   text at full contrast no matter what sits behind it. */
.open {
  position:relative; border-bottom:1px solid var(--rule);
  background:#0B0A09 url('/assets/hero.jpg') center/cover no-repeat;
  isolation:isolate;
}
.open::after {
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(11,10,9,.62) 0%,rgba(11,10,9,.78) 55%,var(--ink) 100%);
}
.open .wrap { padding:clamp(72px,12vw,150px) 28px clamp(52px,7vw,88px); }
.open .eyebrow {
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); display:block; margin-bottom:20px;
}
.open h1 { max-width:16ch; margin-bottom:26px; }
.open .lede { margin-bottom:34px; }
.open .cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero-rig { margin:56px 0 66px; max-width:790px; }
@media (max-width:600px) { .hero-rig { margin:38px 0 0; } }

.btn {
  display:inline-flex; align-items:center; gap:8px; padding:13px 22px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.11em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--brass); border-radius:2px;
}
.btn.fill { background:var(--brass); color:var(--ink); font-weight:500; }
.btn.fill:hover { background:var(--bone); border-color:var(--bone); }
.btn.line { color:var(--brass); }
.btn.line:hover { background:var(--brass); color:var(--ink); }

.facts { display:flex; gap:0; flex-wrap:wrap; margin-top:44px; border-top:1px solid var(--rule); }
.fact { padding:20px 34px 0 0; }
.fact b { display:block; font-size:26px; letter-spacing:-0.03em; margin-bottom:3px; }
.fact span { font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); }

/* ── Device frames ───────────────────────────────────────────────────────────
   Browser chrome and a phone bezel around the real screenshots. No photography
   needed, and it does three things at once: the screenshots read as products
   rather than pictures, the frames add the depth a flat page was missing, and
   showing desktop beside mobile demonstrates the mobile-first argument the copy
   is making. Drawn in CSS so there is no mockup image to keep in sync. */
.rig { position:relative; }

.browser {
  border:1px solid #322C25; border-radius:8px; overflow:hidden; background:#1A1714;
  box-shadow:0 30px 60px -24px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,.05) inset;
}
.browser .bar {
  display:flex; align-items:center; gap:6px; padding:9px 12px;
  background:#221E1A; border-bottom:1px solid #322C25;
}
.browser .dot { width:9px; height:9px; border-radius:50%; background:#3E3730; flex:none; }
.browser .addr {
  margin-left:8px; flex:1; height:18px; border-radius:9px; background:#191612;
  display:flex; align-items:center; padding:0 10px;
  font-family:var(--mono); font-size:9.5px; color:var(--faint); letter-spacing:.04em;
  overflow:hidden; white-space:nowrap;
}
.browser img { width:100%; display:block; }

/* Phone overlapping the browser's lower-left, the way a real device sits in
   front of a monitor. */
.phone {
  position:absolute; right:-18px; bottom:-46px; width:27%; min-width:132px; max-width:196px;
  border:6px solid #2A251F; border-radius:22px; overflow:hidden; background:#0F0D0B;
  /* A hard dark ring plus a long shadow is what separates it from the screen
     behind it — without both it reads as a glitch in the screenshot rather
     than a second device. */
  box-shadow:0 0 0 1px #4A4238, 0 30px 60px -16px rgba(0,0,0,1);
}
.phone::before {
  content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:32%; height:4px; border-radius:3px; background:#3E3730; z-index:2;
}
.phone img { width:100%; display:block; }

@media (max-width:600px) { .phone { display:none; } }

/* ── Samples ────────────────────────────────────────────────────────────── */
.shots {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr));
  gap:30px; margin-top:26px;
}
.shot { display:block; text-decoration:none; color:inherit; }
.shot .browser { transition:transform .28s ease, box-shadow .28s ease; }
.shot:hover .browser { transform:translateY(-4px); box-shadow:0 38px 70px -22px rgba(0,0,0,1); }
.shot-cap { padding-top:15px; }
.shots .browser { border-radius:6px; }
.shot-img img { width:100%; aspect-ratio:1200/760; object-fit:cover; object-position:top center;
                transition:transform .3s ease; }
.shot:hover .shot-img img { transform:scale(1.02); }
.shot:hover h3 { color:var(--brass); }
.shot-kind { font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
             color:var(--brass); display:block; margin-bottom:6px; }
.shot h3 { font-size:18px; }
.shot:hover h3 { color:var(--brass); }

/* ── Steps ──────────────────────────────────────────────────────────────── */
.steps { display:grid; gap:0; }
.step { display:grid; grid-template-columns:38px 1fr; gap:20px; padding:22px 0; border-top:1px solid var(--rule); }
.step:first-child { border-top:0; padding-top:0; }
.step .n { font-family:var(--mono); font-size:12px; color:var(--brass); letter-spacing:.1em; padding-top:4px; }
.step p { color:var(--dim); margin:5px 0 0; font-size:16px; }

/* ── Pricing ────────────────────────────────────────────────────────────── */
.tiers { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:1px;
         background:var(--rule); border:1px solid var(--rule); border-radius:3px; overflow:hidden; }
.tier { background:var(--ink); padding:28px 24px 30px; position:relative; }
.tier .t-name { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.tier .t-price { font-size:38px; letter-spacing:-0.04em; margin:12px 0 2px; }
.tier .t-price sub { font-size:14px; letter-spacing:0; color:var(--dim); vertical-align:baseline; }
.tier .t-note { color:var(--dim); font-size:15px; margin:0; }
.tier.hi { background:var(--ink-2); }
.tier.hi::before {
  content:'Most take this'; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--brass); font-size:0; overflow:hidden;
}

.covers { list-style:none; margin:26px 0 0; padding:0;
          display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:10px 30px; }
.covers li { display:flex; gap:10px; color:var(--dim); font-size:15.5px; }
.covers li::before { content:'—'; color:var(--brass); }

/* ── Colour band ─────────────────────────────────────────────────────────────
   Borrowed idea, done quieter: a solid block of the accent before the footer.
   On a long dark page it breaks the sheet and gives the eye somewhere to land
   at the point where you actually want someone to act. */
.band-cta { background:var(--brass); color:#17140F; border-bottom:1px solid var(--rule); }
.band-cta .wrap { padding:clamp(40px,5vw,64px) 28px; display:flex; gap:26px;
                  align-items:center; justify-content:space-between; flex-wrap:wrap; }
.band-cta h2 { max-width:22ch; color:#17140F; }
.band-cta p { margin:8px 0 0; color:#3D3323; max-width:44ch; }
.band-cta .btn { border-color:#17140F; color:#17140F; background:transparent; }
.band-cta .btn:hover { background:#17140F; color:var(--brass); }

/* ── Close ──────────────────────────────────────────────────────────────── */
.foot { padding:44px 0 56px; }
.foot .wrap { display:flex; gap:18px; flex-wrap:wrap; align-items:baseline; justify-content:space-between; }
.foot .label { color:var(--faint); }

.disclose { border:1px solid var(--rule); border-left:2px solid var(--brass); border-radius:2px;
            padding:16px 18px; color:var(--dim); font-size:15px; margin-top:30px; }

a:focus-visible,.btn:focus-visible,.shot:focus-visible { outline:2px solid var(--brass); outline-offset:4px; }
@media (prefers-reduced-motion:reduce) { .shot-img img { transition:none; } html { scroll-behavior:auto; } }