/* ==========================================================================
   KILLPIN — shared stylesheet
   Palette: sampled directly from the KillPIN logo (2026-08-26).
   Crimson #9A0621 from the diamond and the "Kill" wordmark; slate #6A7A83
   from "PIN" as the secondary. Light editorial base, crimson feature bands.
   ========================================================================== */

:root{
  /* brand — sampled from killpin-logo-original.png.
     #9a0621 is the logo crimson, #6a7a83 the slate in "PIN". This replaced an
     earlier red taken off the hero car, which was a warmer, orange-leaning red
     and visibly disagreed with the logo. Every value used behind white text
     clears WCAG AA (>=4.5:1). */
  --brand-deep:#6d0417;
  --brand:#9a0621;        /* 8.67:1 on white — the logo crimson */
  --brand-bright:#c0183a; /* 6.01:1 on white — lifted for dark surfaces */
  --brand-300:#f0899f;
  --brand-tint:#fff1f4;
  --brand-tint-2:#ffdae2;

  /* secondary — the slate from the "PIN" half of the wordmark */
  --slate:#6a7a83;
  --slate-deep:#4f5d66;

  /* neutrals — cool wine cast so they sit under the crimson */
  --ink:#170d11;
  --ink-2:#3d2f35;
  --muted:#6d5d63;
  --dim:#96858b;
  --line:#ece2e5;
  --line-2:#dacdd1;
  --bg:#ffffff;
  --bg-alt:#faf7f8;
  --dark:#130610;
  --dark-2:#210b18;

  --display:'Manrope',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --max:1200px;
  --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.08;color:var(--ink)}
h1{font-size:clamp(2.4rem,5.4vw,4rem)}
h2{font-size:clamp(1.9rem,3.8vw,2.85rem)}
h3{font-size:1.3rem;letter-spacing:-.02em;line-height:1.3;font-weight:700}
p{color:var(--muted)}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-2);max-width:62ch;line-height:1.6}

/* eyebrow label */
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--brand);
  display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:18px;height:1.5px;background:var(--brand);flex-shrink:0}
.eyebrow.plain::before{display:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:9px;
  font-family:var(--body);font-size:15px;font-weight:600;
  background:var(--brand);color:#fff;border:1.5px solid var(--brand);
  transition:background .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
  cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--brand-deep);border-color:var(--brand-deep);transform:translateY(-1px);box-shadow:0 10px 26px rgba(154,6,33,.26)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:transparent;border-color:var(--brand);color:var(--brand);box-shadow:none}
.btn.on-dark{background:var(--brand-bright);border-color:var(--brand-bright)}
.btn.on-dark.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn.on-dark.ghost:hover{border-color:#fff;color:#fff}
.btn.lg{padding:16px 32px;font-size:16px}
.cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}

/* ---------- top bar ---------- */
.topbar{background:var(--dark);color:rgba(255,255,255,.62);font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:42px;gap:20px}
.topbar strong{color:#fff;font-weight:600}
.topbar a{color:#fff;font-weight:600}
.topbar .cred{display:flex;align-items:center;gap:10px}
.topbar .cred b{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;
  border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:2px 7px;color:rgba(255,255,255,.8);
}

/* ---------- nav ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:28px}
/* Real logo lockup. Two files: the dark wordmark for light surfaces and a
   white-wordmark variant for the near-black footer, where the crimson-on-black
   original would be unreadable. */
.brand{display:flex;align-items:center;gap:11px}
.brand .logo{height:36px;width:auto;display:block}
.brand small{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.14em;
  color:var(--dim);text-transform:uppercase;white-space:nowrap;
  align-self:flex-end;padding-bottom:5px;
}
header.site.scrolled .brand .logo{height:30px}
footer.site .brand .logo{height:34px}
footer.site .brand small{color:rgba(255,255,255,.45)}
@media(max-width:640px){.brand .logo{height:30px}.brand small{display:none}}
nav.main{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500}
nav.main > a,nav.main .drop > button{
  color:var(--ink-2);background:none;border:none;font:inherit;cursor:pointer;
  padding:6px 0;position:relative;transition:color .2s;display:flex;align-items:center;gap:6px;
}
nav.main > a:hover,nav.main .drop > button:hover,nav.main a.active{color:var(--brand)}
nav.main a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--brand)}
.drop{position:relative}
.drop-menu{
  position:absolute;top:calc(100% + 14px);left:-18px;min-width:290px;
  background:#fff;border:1px solid var(--line);border-radius:13px;
  box-shadow:0 20px 50px rgba(20,9,16,.13);padding:9px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.drop:hover .drop-menu,.drop:focus-within .drop-menu{opacity:1;visibility:visible;transform:none}
.drop-menu a{display:block;padding:12px 14px;border-radius:9px;transition:background .18s}
.drop-menu a:hover{background:var(--brand-tint)}
.drop-menu b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);font-family:var(--display);letter-spacing:-.01em}
.drop-menu span{display:block;font-size:13px;color:var(--muted);line-height:1.45;margin-top:2px}
.navtoggle{display:none;background:none;border:1px solid var(--line-2);border-radius:8px;padding:9px 12px;cursor:pointer;font-size:17px}

/* mobile nav */
.mobnav{display:none;border-bottom:1px solid var(--line);background:#fff;padding:14px 0 22px}
.mobnav.open{display:block}
.mobnav a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-weight:600}
.mobnav .btn{margin-top:18px;width:100%}

/* ---------- sections ---------- */
section{padding:96px 0}
section.tight{padding:72px 0}
section.alt{background:var(--bg-alt);border-block:1px solid var(--line)}
section.dark{background:var(--dark);color:rgba(255,255,255,.72)}
section.dark h1,section.dark h2,section.dark h3,section.dark h4{color:#fff}
section.dark p{color:rgba(255,255,255,.66)}
section.dark .lead{color:rgba(255,255,255,.78)}
section.dark .eyebrow{color:var(--brand-300)}
section.dark .eyebrow::before{background:var(--brand-300)}
.sec-head{max-width:68ch;margin-bottom:52px}
.sec-head h2{margin:18px 0 18px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}

/* ---------- page hero (inner pages) ---------- */
.pagehero{background:var(--dark);color:#fff;padding:72px 0 78px;position:relative;overflow:hidden}
.pagehero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(760px 380px at 82% 12%,rgba(196,24,95,.30),transparent 62%);
}
.pagehero .wrap{position:relative}
.pagehero h1{color:#fff;margin:18px 0 20px;max-width:20ch}
.pagehero .lead{color:rgba(255,255,255,.76)}
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42)}
/* brand red is too dark to read over a darkened photo — lift it */
.pagehero .eyebrow{color:var(--brand-300)}
.pagehero .eyebrow::before{background:var(--brand-300)}
.crumbs a:hover{color:#fff}

/* ---------- grids & cards ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.wide-left{grid-template-columns:1.15fr .85fr}
.split.wide-right{grid-template-columns:.85fr 1.15fr}

.card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;padding:30px 28px;
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease),transform .28s var(--ease);
}
.card:hover{border-color:var(--line-2);box-shadow:0 14px 40px rgba(20,9,16,.07);transform:translateY(-2px)}
.card h3{margin:14px 0 11px}
.card p{font-size:15.2px}
.card .num{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--brand);font-weight:500;
}
section.dark .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.11)}
section.dark .card:hover{border-color:rgba(255,255,255,.22);box-shadow:none}
section.dark .card .num{color:var(--brand-300)}

.icard{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.icard img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--bg-alt)}
.icard .body{padding:26px 26px 30px}

/* figure with white-cutout artwork */
.figure{
  border:1px solid var(--line);border-radius:18px;background:var(--bg-alt);
  padding:26px;position:relative;overflow:hidden;
}
.figure img{width:100%}
.figure figcaption{
  margin-top:16px;padding-top:15px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);
}
.figure.plain{background:#fff}

/* ---------- feature list ---------- */
.ticks{list-style:none;display:flex;flex-direction:column;gap:14px}
.ticks li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--ink-2)}
.ticks li::before{
  content:"";width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:2px;
  background:var(--brand-tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239a0621' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/12px no-repeat;
}
section.dark .ticks li{color:rgba(255,255,255,.78)}
section.dark .ticks li::before{background-color:rgba(232,120,168,.16)}
.crosses li::before{
  background:#f2ecef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2393858c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ---------- stat / credential strip ---------- */
.creds{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.cred{padding:30px 26px;border-right:1px solid var(--line)}
.cred:last-child{border-right:none}
.cred .yr{font-family:var(--display);font-size:1.9rem;font-weight:800;color:var(--brand);letter-spacing:-.03em}
.cred p{font-size:14.2px;margin-top:9px}
section.dark .creds{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.11)}
section.dark .cred{border-right-color:rgba(255,255,255,.11)}
section.dark .cred .yr{color:var(--brand-300)}

/* ---------- comparison table ---------- */
.compare{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare th,.compare td{padding:17px 22px;text-align:left;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
.compare thead th{background:var(--bg-alt);font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.compare thead th:first-child{width:32%}
.compare tbody th{font-weight:600;color:var(--ink);font-family:var(--body)}
.compare td{color:var(--muted)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:none}
.compare .yes{color:var(--brand);font-weight:600}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:24px 44px 24px 0;cursor:pointer;list-style:none;position:relative;
  font-family:var(--display);font-weight:700;font-size:1.08rem;letter-spacing:-.015em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:29px;width:12px;height:12px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 60px 26px 0;font-size:15.5px}

/* ---------- quote ---------- */
.quote{
  border-left:3px solid var(--brand);padding:6px 0 6px 30px;max-width:70ch;
}
.quote p{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.4;color:var(--ink);letter-spacing:-.02em}
.quote .who{margin-top:16px;font-size:14px;color:var(--muted);font-family:var(--body);font-weight:400}
section.dark .quote p{color:#fff}
section.dark .quote{border-left-color:var(--brand-300)}

/* ---------- CTA band ---------- */
.band{
  background:linear-gradient(135deg,var(--brand-deep),var(--brand-bright));
  color:#fff;border-radius:20px;padding:56px 52px;
  display:grid;grid-template-columns:1.4fr auto;gap:40px;align-items:center;
}
.band h2{color:#fff;margin-bottom:14px}
.band p{color:rgba(255,255,255,.86);max-width:52ch}
.band .btn{background:#fff;color:var(--brand-deep);border-color:#fff}
.band .btn:hover{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.9);box-shadow:none}
.band .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}

/* ---------- footer ---------- */
footer.site{background:var(--dark);color:rgba(255,255,255,.6);padding:64px 0 34px}
footer.site .brand{color:#fff}
footer.site .brand small{color:rgba(255,255,255,.45)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;margin-bottom:46px}
footer.site h4{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:18px;
}
footer.site ul{list-style:none;display:flex;flex-direction:column;gap:11px}
footer.site li a{font-size:14.5px;color:rgba(255,255,255,.68);transition:color .2s}
footer.site li a:hover{color:var(--brand-300)}
footer.site .blurb{font-size:14.5px;max-width:36ch;margin-top:16px;color:rgba(255,255,255,.6)}
.fbot{
  border-top:1px solid rgba(255,255,255,.11);padding-top:26px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13px;color:rgba(255,255,255,.42);
}

/* ---------- reveal ----------
   Gated on html.js so the page is fully readable with JavaScript disabled or
   failed. Without this gate an unstyled/JS-less visitor sees a blank page. */
html.js .rv{opacity:0;transform:translateY(16px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  nav.main,header.site .btn{display:none}
  .navtoggle{display:block}
  .split,.split.wide-left,.split.wide-right{grid-template-columns:1fr;gap:40px}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .creds{grid-template-columns:1fr 1fr}
  .cred:nth-child(2){border-right:none}
  .cred:nth-child(1),.cred:nth-child(2){border-bottom:1px solid var(--line)}
  .band{grid-template-columns:1fr;padding:44px 34px}
  .fgrid{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  section{padding:66px 0}
  .grid-2,.grid-3,.grid-4,.creds{grid-template-columns:1fr}
  .cred{border-right:none;border-bottom:1px solid var(--line)}
  .cred:last-child{border-bottom:none}
  .topbar .cred{display:none}
  .compare thead th:first-child{width:auto}
  .compare th,.compare td{padding:14px 15px;font-size:14px}
  .fgrid{grid-template-columns:1fr}
  .quote{padding-left:20px}
}

/* ==========================================================================
   RICH SURFACES
   Added 2026-08-20. The available photography tops out at 537px wide, so
   depth here comes from layering, glow and motion rather than large images.
   Photographic bands are heavily darkened and slightly blurred on purpose —
   that hides the low resolution and reads as atmosphere instead of a
   stretched asset.
   ========================================================================== */

/* ---- scroll progress ---- */
.progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--brand),var(--brand-bright));
  transition:width .1s linear;
}

/* ---- nav shrink ---- */
header.site{transition:height .3s var(--ease),box-shadow .3s var(--ease)}
header.site.scrolled{box-shadow:0 6px 30px rgba(20,7,8,.10)}
header.site.scrolled .wrap{height:62px}
header.site .wrap{transition:height .3s var(--ease)}

/* ---- HERO STAGE ---- */
.stage{
  position:relative;background:var(--dark);color:#fff;
  padding:118px 0 126px;overflow:hidden;isolation:isolate;
}
.stage::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(980px 560px at 50% 34%,rgba(192,24,58,.28),transparent 64%),
    radial-gradient(680px 440px at 50% 96%,rgba(192,24,58,.11),transparent 68%);
}
/* faint technical grid */
.stage::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(900px 560px at 50% 45%,#000,transparent 76%);
}
.stage h1{color:#fff;font-size:clamp(2.7rem,6.6vw,5.1rem);margin:24px 0 26px}
/* Gradient headline. Near-horizontal so each line runs red -> blue rather than
   line one being red and line two blue. @supports guarded so browsers without
   background-clip:text keep the solid white fallback instead of transparent
   (i.e. invisible) text. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stage h1{
    background:linear-gradient(96deg,#ffffff 0%,#f4f6f7 34%,#e8687f 72%,#c0183a 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    padding-bottom:.06em;   /* descenders get clipped without this */
  }
}
.stage .lead{color:rgba(255,255,255,.76)}
.stage .eyebrow{color:var(--brand-300)}
.stage .eyebrow::before{background:var(--brand-300)}
/* Centred typographic hero. The car was pulled 2026-08-26 (read as tacky, and
   it was the same Civic that appears elsewhere), so the headline carries the
   whole stage on its own and gets the extra width. */
.stage .wrap{position:relative;max-width:1000px;text-align:center}
.stage .eyebrow{justify-content:center}
.stage .lead{margin-inline:auto}
.stage .cta-row{justify-content:center;margin-top:38px}
.stage .chips{justify-content:center;margin-top:34px}

.stage-car{position:relative;display:grid;place-items:center}
.stage-car img{position:relative;z-index:2;filter:drop-shadow(0 46px 44px rgba(0,0,0,.62))}
.stage-car::before{  /* pooled light under the car */
  content:"";position:absolute;z-index:1;width:86%;height:52%;bottom:6%;
  background:radial-gradient(closest-side,rgba(220,32,38,.55),transparent 72%);
  filter:blur(26px);
}

/* floating spec chips over the stage */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:99px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.055);backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.chip i{font-style:normal;width:5px;height:5px;border-radius:50%;background:var(--brand-bright);
  box-shadow:0 0 0 3px rgba(192,24,58,.24)}

/* ---- PHOTO CARD ---- */
.photocard{
  position:relative;display:block;border-radius:16px;overflow:hidden;
  aspect-ratio:4/3.1;background:var(--dark-2);
}
.photocard img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease);
}
.photocard:hover img{transform:scale(1.08)}
.photocard .veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,3,4,.10) 24%,rgba(10,3,4,.72) 62%,rgba(10,3,4,.95));
}
.photocard .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 24px}
.photocard .cap .num{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--brand-300);
}
.photocard .cap h3{color:#fff;margin:9px 0 8px;font-size:1.24rem}
.photocard .cap p{color:rgba(255,255,255,.72);font-size:14px;line-height:1.5}

/* ---- FULL-BLEED PHOTOGRAPHIC BAND ---- */
.bleed{
  position:relative;overflow:hidden;padding:112px 0;
  display:grid;place-items:center;text-align:center;color:#fff;
}
.bleed > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:brightness(.34) saturate(.85) blur(2px);transform:scale(1.06);
}
.bleed::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(760px 420px at 50% 50%,rgba(192,24,58,.20),transparent 70%);
}
.bleed .wrap{position:relative;z-index:2}
.bleed h2{color:#fff;margin:20px auto 20px;max-width:20ch}
.bleed .lead{color:rgba(255,255,255,.82);margin-inline:auto}
.bleed .eyebrow{color:var(--brand-300)}
.bleed .eyebrow::before{background:var(--brand-300)}

/* ---- COLLAGE (overlapping stack) ---- */
.collage{position:relative;min-height:430px}
.collage img{
  position:absolute;border-radius:14px;object-fit:cover;
  box-shadow:0 26px 60px rgba(20,7,8,.26);
}
.collage img:nth-child(1){width:66%;height:62%;top:0;left:0;z-index:1}
.collage img:nth-child(2){width:56%;height:56%;bottom:0;right:0;z-index:3;border:7px solid #fff}
.collage img:nth-child(3){width:34%;height:30%;bottom:16%;left:6%;z-index:2;border:6px solid #fff}
.collage .badge{
  position:absolute;z-index:4;right:2%;top:6%;
  background:var(--brand);color:#fff;border-radius:12px;padding:16px 20px;
  box-shadow:0 18px 40px rgba(109,4,23,.34);max-width:190px;
}
.collage .badge strong{display:block;font-family:var(--display);font-size:1.5rem;letter-spacing:-.03em}
.collage .badge span{font-size:12.5px;opacity:.9;line-height:1.4;display:block;margin-top:3px}

/* ---- MARQUEE ---- */
.marquee{overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;gap:46px;width:max-content;animation:kp-slide 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{
  font-family:var(--display);font-weight:700;font-size:1.22rem;letter-spacing:-.02em;
  color:var(--dim);white-space:nowrap;transition:color .3s;
}
.marquee span:hover{color:var(--brand)}
@keyframes kp-slide{to{transform:translateX(calc(-50% - 23px))}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---- IMAGE TIMELINE ---- */
.tl{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:14px}
/* Photos were removed from the timeline 2026-08-26 (decorative stock, and one
   of them was the same Civic again), so the rule sits at dot height now. */
.tl::before{
  content:"";position:absolute;left:0;right:0;top:7px;height:2px;
  background:linear-gradient(90deg,var(--brand-tint-2),var(--brand),var(--brand-tint-2));
}
.tl-item{position:relative}
.tl-item img{width:100%;height:130px;object-fit:cover;border-radius:12px}
.tl-item .dot{
  width:15px;height:15px;border-radius:50%;background:var(--brand);
  border:3px solid #fff;box-shadow:0 0 0 3px var(--brand-tint-2);
  margin:0 auto 20px;position:relative;z-index:2;
}
.tl-item .yr{font-family:var(--display);font-weight:800;font-size:1.55rem;color:var(--brand);
  letter-spacing:-.03em;text-align:center}
.tl-item p{font-size:14px;text-align:center;margin-top:8px}

/* ---- section heading with photographic backdrop (inner pages) ---- */
.pagehero.shot > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:brightness(.3) saturate(.8) blur(2px);transform:scale(1.06);
}
.pagehero.shot::before{z-index:1}
.pagehero.shot .wrap{z-index:2}

@media(max-width:1024px){
  .stage .wrap{grid-template-columns:1fr;gap:44px}
  .tl{grid-template-columns:1fr 1fr;gap:30px}
  .tl::before{display:none}
  .collage{min-height:360px}
}
@media(max-width:640px){
  .stage{padding:70px 0 80px}
  .tl{grid-template-columns:1fr}
  .collage{min-height:300px}
  .collage img:nth-child(3){display:none}
  .bleed{padding:80px 0}
}

/* ==========================================================================
   FORMS — real markup, added 2026-09-01 when the relay went in.
   ========================================================================== */
.field{margin-top:18px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.field label span{font-weight:400;color:var(--dim)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:9px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink);
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field-row.three{grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.field-row,.field-row.three{grid-template-columns:1fr}}
.formnote{font-size:13.5px;margin-top:16px}
/* Honeypot. Positioned off-screen rather than display:none — some bots skip
   anything hidden that way, and the whole point is that they fill it in. */
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}