/* ══════════════════════════════════════════════════════════════════════════
   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:1280px; 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);
  display:grid; grid-template-columns:var(--rail) minmax(0,1fr); column-gap:44px;
  align-content:start;
}
.open .wrap > * { grid-column:2; }
.open .eyebrow {
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); display:block; margin:0;
  grid-column:1; grid-row:1; padding-top:clamp(4px,1vw,18px);
}
.open h1 { max-width:16ch; margin-bottom:26px; grid-row:1; }
.open .lede { margin-bottom:34px; }
.open .cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero-rig { margin:56px 0 66px; }
@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:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
          margin-top:44px; border-top:1px solid var(--rule); }
.fact { padding:20px 24px 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; }

/* Five samples in a two-column grid leaves the fifth stranded next to an empty
   cell. Running the last one full width fills the row, and the change of
   rhythm at the end of the set reads as a choice rather than a leftover. It
   gets a shallower crop so a single sample doesn't outweigh the four above. */
@media (min-width:901px) {
  .shots .shot:last-child { grid-column:1 / -1; }
  .shots .shot:last-child .shot-img img { aspect-ratio:1200/430; }
}
.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;
                  padding-left:calc(28px + var(--rail) + 44px); }
.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; } }

/* ── Below the rail ─────────────────────────────────────────────────────────
   The rail collapses under 900px. These live at the end of the file on
   purpose: they have the same specificity as the .open and .band-cta rules
   above, so source order is the only thing that makes them win. Declared up
   with the other breakpoint they lost silently, and the hero kept a 172px
   rail on a 320px screen — a 48px content column that the buttons burst. */
@media (max-width:900px) {
  .open .wrap { grid-template-columns:1fr; column-gap:0; }
  .open .wrap > * { grid-column:1; }
  .open .eyebrow { grid-column:1; grid-row:auto; padding-top:0; margin-bottom:18px; }
  .open h1 { grid-row:auto; }
  .band-cta .wrap { padding-left:28px; }
}