/* Self-hosted fonts — do not replace with a Google Fonts <link>.
   The danielswick.com CSP is `default-src 'self'` with style-src not
   allowing fonts.googleapis.com and no font-src at all, so Google-hosted
   webfonts are BLOCKED. The page still renders — it silently falls back to
   system-ui — which is why this fails invisibly to curl and to anyone not
   looking at a real browser. Self-hosting also keeps the CSP untouched (it
   lives in the Caddyfile, a tripwire file), drops a third-party request per
   visitor, and is faster.
   All three families are OFL-licensed, which permits redistribution.
   Regenerate: see fonts/README.md */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* danielswick.com — warm editorial theme (Sept 2026 redesign)
   Class names are unchanged from the previous stylesheet so every page,
   including the six capability spokes, picks this up with no markup edits. */
:root{
  --bg:#f7f3ec; --surface:#fff; --surface-2:#f3eee6; --surface-3:#efe9df;
  --sand:#efe6d8; --sand-2:#e8d9c6;
  --ink:#1b1815; --ink-2:#5b544b; --ink-3:#6f665e; --ink-4:#9b9184;
  --accent:#c8613a; --accent-hover:#b0522e; --accent-light:#e8a17f;
  /* Text-only shade of the accent: >= 4.5:1 on every light background (sand-2 included).
     Small accent-coloured text uses this; fills, the hero headline (large) and buttons keep --accent. */
  --accent-text:#9c4826;
  /* Accent FILLS under white text: #c8613a gave 4.0:1, these give 5.1:1 and 6.2:1 (Daniel ok'd 2026-10-12). */
  --accent-fill:#b0522e; --accent-fill-hover:#9c4826;
  --on-dark-muted:#b5ab9d; --success:#3ba55d;
  --line:rgba(27,24,21,.08); --line-dark:rgba(247,243,236,.10);
  --max:1180px; --gutter:clamp(20px,5vw,48px);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased; text-wrap:pretty}
a{color:var(--ink); text-decoration:none}
a:hover{color:var(--accent)}
::selection{background:var(--accent-fill); color:#fff}
/* height:auto is load-bearing, not boilerplate. Every <img> here carries
   width/height attributes for layout stability, and those attributes supply a
   USED height — which makes `aspect-ratio` inert, because aspect-ratio only
   applies when the other dimension is auto. Without this, .proof-row img
   computed 88x425 instead of 88x55: the right width, the raw file's height,
   and object-fit:cover cropping each thumbnail to a tall vertical sliver.
   Measured on the live page 2026-09-04. .who img overrides with an explicit
   height and is unaffected. */
img{display:block; max-width:100%; height:auto}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
h1,h2,h3{font-family:var(--display); line-height:1.05; margin:0 0 .5em; text-wrap:balance}
h1{font-size:clamp(34px,7vw,80px); line-height:.98; letter-spacing:-.04em; font-weight:800}
h2{font-size:clamp(28px,4.5vw,52px); line-height:1.02; letter-spacing:-.035em; font-weight:800}
h3{font-size:21px; letter-spacing:-.02em; font-weight:700}
.muted{color:var(--ink-2)}
.accent{color:var(--accent)}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-text); font-weight:500; margin:0 0 14px}

/* NAV */
header{position:sticky; top:0; z-index:50; background:rgba(247,243,236,.85);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
nav{position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--max); margin:0 auto; padding:10px var(--gutter)}
nav .brand{display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:700;
  font-size:17px; letter-spacing:-.02em; white-space:nowrap}
nav .brand a{display:inline-flex; align-items:center; gap:12px; min-height:44px; color:inherit}
nav .mark{width:34px; height:34px; border-radius:10px; background:var(--ink); color:var(--bg);
  display:grid; place-items:center; font-size:14px; font-weight:800; letter-spacing:-.03em; flex:none}
nav ul{display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0}
nav ul a{color:var(--ink-2); font-size:14.5px; font-weight:500; display:flex; align-items:center;
  min-height:44px; padding:0 12px; border-radius:999px; white-space:nowrap}
nav ul a:hover,nav ul a[aria-current]{color:var(--ink)}
nav ul a[aria-current]{color:var(--accent-text)}
nav ul a.nav-cta{background:var(--ink); color:#fff; font-weight:600; padding:0 20px; margin-left:8px}
nav ul a.nav-cta:hover{background:var(--accent-fill); color:#fff}
.nav-toggle{display:none; width:44px; height:44px; border:1px solid rgba(27,24,21,.12); border-radius:12px;
  background:#fff; cursor:pointer; padding:0 12px; flex-direction:column; justify-content:center; gap:5px}
/* Explicit width, deliberately. These spans had none and relied on flex
   cross-axis stretch to size themselves; measured on the live page they came
   out 0px wide, so the mobile menu button rendered as an empty 44x44 outline
   on every page and there was no way to open the nav on a phone. A navigation
   control should not depend on inherited layout behaviour to be visible. */
.nav-toggle span{display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; flex:none}
@media(max-width:820px){
  nav.has-toggle .nav-toggle{display:flex}
  nav.has-toggle ul{display:none; position:absolute; left:0; right:0; top:100%; background:var(--bg);
    border-bottom:1px solid var(--line); padding:12px var(--gutter) 20px; flex-direction:column;
    align-items:stretch; gap:4px; box-shadow:0 20px 40px rgba(27,24,21,.1)}
  nav.has-toggle.open ul{display:flex}
  nav.has-toggle ul a{padding:14px 4px; font-size:18px; font-weight:600; color:var(--ink);
    border-bottom:1px solid var(--line); border-radius:0; min-height:0}
  nav.has-toggle ul a.nav-cta{margin:12px 0 0; justify-content:center; background:var(--accent-fill); color:#fff;
    border:0; border-radius:999px; padding:14px 20px; font-size:16px}
}

/* BUTTONS */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 28px;
  border-radius:999px; font-weight:600; font-size:16px; border:1px solid transparent; cursor:pointer;
  font-family:var(--body); transition:background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--accent-fill); color:#fff; box-shadow:0 8px 24px rgba(200,97,58,.28)}
.btn-primary:hover{background:var(--accent-fill-hover); color:#fff}
.btn-ghost{background:#fff; color:var(--ink); border-color:rgba(27,24,21,.15)}
.btn-ghost:hover{border-color:var(--ink); color:var(--ink)}
.btn-dark{background:var(--ink); color:var(--bg)}
.btn-dark:hover{background:var(--accent-fill); color:#fff}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* SECTIONS */
section{padding:clamp(64px,8vw,96px) 0}

/* HERO */
.hero{position:relative; overflow:hidden; padding:clamp(48px,8vw,80px) 0 64px}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse 700px 500px at 85% 20%, rgba(200,97,58,.14), transparent 65%)}
.hero-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:48px; align-items:center}
.hero .status{display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid rgba(27,24,21,.1);
  border-radius:999px; padding:8px 14px 8px 10px; font-size:13px; font-weight:500; color:var(--ink-2); margin:0 0 26px}
.hero .status::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--success)}
.hero h1{margin:0 0 26px}
.hero p.lead{font-size:clamp(16px,2vw,19px); line-height:1.55; color:var(--ink-2); max-width:540px; margin:0 0 30px}
.stats{display:flex; flex-wrap:wrap; gap:24px 36px; margin:40px 0 0; padding:24px 0 0; list-style:none; border-top:1px solid rgba(27,24,21,.1)}
.stats b{display:block; font-family:var(--display); font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1.1}
.stats span{display:block; font-size:13px; color:var(--ink-2); margin-top:2px}
.portrait{position:relative; justify-self:center; width:380px; max-width:calc(100% - 20px); margin-top:8px}
.portrait::before{content:""; position:absolute; inset:18px -18px -18px 18px; background:var(--sand-2); border-radius:28px}
.portrait img{position:relative; width:100%; height:auto; border-radius:28px; box-shadow:0 24px 60px rgba(27,24,21,.18)}
.portrait .badge{position:absolute; left:-28px; bottom:36px; background:#fff; border-radius:16px; padding:14px 18px;
  box-shadow:0 12px 32px rgba(27,24,21,.14); display:flex; align-items:center; gap:12px; animation:float 5s ease-in-out infinite}
.portrait .badge b{width:38px; height:38px; border-radius:10px; background:var(--accent-fill); color:#fff; display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:15px; flex:none}
.portrait .badge span{font-size:13.5px; line-height:1.3}
.portrait .badge span small{display:block; color:var(--ink-2); font-size:13.5px}
@media(max-width:540px){ .portrait .badge{left:-8px} }
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* SECTION HEADERS */
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px; flex-wrap:wrap}
.sec-head h2{margin:0}
.sec-head p{margin:0; max-width:400px; color:var(--ink-2)}

/* WORK GRID */
.grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:20px;
  overflow:hidden; color:inherit; transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.card:hover{transform:translateY(-6px); box-shadow:0 24px 48px rgba(27,24,21,.12); color:inherit}
.shot{background:var(--surface-3); padding:12px 12px 0; border-bottom:1px solid rgba(27,24,21,.06)}
.shot::before{content:"\25CF\2002\25CF\2002\25CF"; display:block; color:#d8cfc2; font-size:9px; letter-spacing:.1em; padding:2px 4px 10px}
.shot img{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:10px 10px 0 0}
.card-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px; flex:1}
.card h3{margin:0; display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.card h3::after{content:"Visit \2197"; font-family:var(--body); font-size:12px; font-weight:600; color:var(--accent-text); white-space:nowrap}
.card p{margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-2); flex:1}
.tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.tag{font-family:var(--mono); font-size:11px; color:var(--ink-2); background:var(--surface-2); border-radius:999px; padding:4px 9px}
.host{font-family:var(--mono); font-size:11px; color:var(--ink-3); order:-1}

/* WHAT I BUILD (dark band) */
.band{background:var(--ink); color:var(--bg); border-radius:clamp(24px,4vw,40px) clamp(24px,4vw,40px) 0 0}
.band section{padding:clamp(56px,8vw,88px) 0}
.band .eyebrow{color:var(--accent-light)}
.band .re .eyebrow,.re .eyebrow{color:var(--accent-text)}  /* .re is a sand card inside the dark band */
.band-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:48px; align-items:start}
/* Sticky ONLY once .band-grid is genuinely two columns. Its auto-fit tracks
   collapse to a single column at roughly 896px, and a sticky first child there
   pins the heading in place while the capability cards scroll underneath it,
   overlapping the text. Reported on Android 2026-09-05; measured at 390px as
   one 390px column with the heading still position:sticky. 940px is chosen to
   sit clear of the collapse point rather than on it. */
@media(min-width:940px){ .band-grid>div:first-child{position:sticky; top:100px} }
.band-grid p{color:var(--on-dark-muted); max-width:380px}
.band a.more{color:var(--bg); font-weight:600; border-bottom:2px solid var(--accent); padding-bottom:2px}
.band a.more:hover{color:var(--accent-light)}
.caps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:14px}
.cap{display:flex; flex-direction:column; gap:10px; background:rgba(247,243,236,.05); border:1px solid var(--line-dark);
  border-radius:18px; padding:24px 22px; color:var(--bg); transition:background .2s,border-color .2s}
.cap:hover{background:rgba(200,97,58,.14); border-color:rgba(200,97,58,.5); color:var(--bg)}
.cap small{font-family:var(--mono); font-size:11px; color:var(--accent-light)}
.cap b{font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-.02em}
.cap span{font-size:13.5px; line-height:1.5; color:var(--on-dark-muted)}

/* REAL ESTATE — brokerage outranks the person (README rule 5). */
#real-estate{padding:0 0 88px}
.re{background:var(--sand); color:var(--ink); border-radius:28px; padding:clamp(28px,5vw,56px) clamp(24px,5vw,60px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:40px; align-items:center}
.brokerage{font-family:var(--display); font-size:clamp(24px,3.8vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1.05; margin:0 0 10px}
.re .agent{font-size:15px; color:var(--ink-2); margin:0 0 18px; font-weight:600}
.re .muted{max-width:520px; margin:0}
.re .side{display:flex; flex-direction:column; gap:14px; align-items:flex-start; justify-self:end}

/* CONTACT */
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:56px; align-items:start}
.contact-grid h2{margin:0 0 18px}
.contact-grid .muted{max-width:400px}
.who{display:inline-flex; align-items:center; gap:14px; margin-top:28px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px}
.who img{width:44px; height:44px; border-radius:50%; object-fit:cover}
.who span{font-size:13.5px; line-height:1.4}
.who span small{display:block; color:var(--ink-2); font-size:13.5px}

form{background:#fff; border:1px solid var(--line); border-radius:24px; padding:clamp(20px,4vw,32px);
  box-shadow:0 20px 50px rgba(27,24,21,.06)}
.field{margin-bottom:14px}
.row2{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
label{display:block; font-size:13px; font-weight:600; margin-bottom:6px}
label .req{color:var(--accent-text)}
input,textarea{width:100%; padding:14px 16px; background:var(--bg); color:var(--ink); border:1px solid transparent;
  border-radius:12px; font:inherit; font-size:15px}
textarea{resize:vertical}
input:focus,textarea:focus{outline:none; border-color:var(--accent); background:#fff}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.hp input{width:1px; height:1px; padding:0; border:0}
.consent{font-size:12px; color:var(--ink-3); margin:14px 0 16px; max-width:56ch}
.consent a{color:var(--ink-2); text-decoration:underline}
.optin{display:flex; gap:10px; align-items:flex-start; margin:0 0 18px; font-size:12.5px; color:var(--ink-3); line-height:1.5; cursor:pointer; font-weight:400}
/* 24px is WCAG 2.5.8 (AA) minimum target size. The wrapping <label> already made
   the effective tap area 308x75, so this was never blocking anyone; it just made
   the box itself awkward to aim at. */
.optin input{width:24px; height:24px; min-width:24px; margin:0; accent-color:var(--accent)}
.optin span{flex:1}
form .btn{width:100%}
#formMsg{margin-top:16px; font-size:14px; display:none; padding:12px 14px; border-radius:12px}
#formMsg.ok{display:block; background:rgba(59,165,93,.1); border:1px solid var(--success); color:#22713a}
#formMsg.err{display:block; background:rgba(200,97,58,.1); border:1px solid var(--accent); color:var(--accent-hover)}

footer{border-top:1px solid var(--line); padding:28px 0; font-size:13px; color:var(--ink-3)}
footer .wrap{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-left:var(--gutter); padding-right:var(--gutter)}
footer p{margin:0}
footer a{color:var(--ink-2)}
footer p a{text-decoration:underline}

/* Scroll reveal (nav.js adds .reveal.in) */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}

/* ── Capability pages ─────────────────────────────────────────────────────── */
.crumb{font-family:var(--mono); font-size:12px; color:var(--ink-3); margin:0 0 26px}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--ink)}
.lede{font-size:clamp(16px,2vw,18px); color:var(--ink-2); max-width:600px; line-height:1.55}
.prose{max-width:70ch}
.prose p{margin:0 0 1.15em; color:var(--ink-2)}
.prose h2{margin:2.2em 0 .6em; font-size:clamp(26px,3vw,36px)}
.prose h3{margin:1.8em 0 .4em; font-size:20px}
.prose ul{margin:0 0 1.3em; padding-left:1.15em; color:var(--ink-2)}
.prose li{margin:0 0 .5em}
.prose strong{color:var(--ink)}
.callout{background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px 26px; margin:1.8em 0}
.callout p{margin:0; color:var(--ink)}
.callout p:last-child{margin-bottom:0}
.proof{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); margin:1.6em 0 2em}
.proof .card-body{padding:22px 22px 24px}
.endcta{background:var(--ink); color:var(--bg); border-radius:24px; padding:clamp(28px,4vw,48px) clamp(20px,4vw,44px); margin-top:12px}
.endcta h2{font-size:clamp(24px,3vw,32px); margin:0 0 8px}
.endcta .muted{color:var(--on-dark-muted)}
.endcta form .muted{color:var(--ink-2)}  /* the form is a white card inside the dark band */
.endcta a{color:var(--bg); text-decoration:underline}
.endcta a:hover{color:var(--accent-light)}
.endcta form{margin-top:22px; color:var(--ink); box-shadow:none}
.endcta form a{color:var(--ink-2)}
.endcta .btn{text-decoration:none}

/* Capabilities hub — article layout */
.cap-list{display:flex; flex-direction:column; gap:20px}
.cap-article{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:32px; background:#fff;
  border:1px solid var(--line); border-radius:24px; padding:clamp(24px,4vw,40px) clamp(20px,4vw,44px); color:inherit}
.cap-article:hover{color:inherit}
.cap-article .num{font-family:var(--mono); font-size:12px; color:var(--accent-text); display:block; margin-bottom:14px}
.cap-article h2{font-size:clamp(26px,3vw,32px); margin:0 0 14px}
.cap-article p{margin:0 0 6px; color:var(--ink-2)}
.cap-article .more{display:inline-block; margin-top:12px; font-weight:600; color:var(--ink); border-bottom:2px solid var(--accent); padding-bottom:2px}
.cap-article .more:hover{color:var(--accent)}
.proof-list{display:flex; flex-direction:column; gap:10px}
.proof-list .label{font-size:12.5px; font-weight:600; color:var(--ink-3)}
.proof-row{display:flex; align-items:center; gap:14px; background:var(--bg); border-radius:14px; padding:12px; color:inherit; transition:background .2s}
.proof-row:hover{background:var(--sand); color:inherit}
.proof-row img{width:88px; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:8px; flex:none}
.proof-row .t{flex:1; display:flex; flex-direction:column; gap:2px}
.proof-row .t b{font-family:var(--display); font-size:16px; font-weight:700}
.proof-row .t small{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.proof-row .go{font-size:12px; font-weight:600; color:var(--accent-text); white-space:nowrap}