/* Sharper Sense website — one stylesheet. Change colors, type and spacing here. */
:root {
  color-scheme: only light;  /* the design already mixes light and dark sections: keep browsers' forced dark modes
                                (Chrome and Edge "Auto Dark Mode") from repainting it, which hid the Defense menu */
  --ink: #0B0B0C;            /* near-black: text, dark sections */
  --ink-2: #141518;         /* tone-on-tone surface inside dark sections */
  --line-dark: #26282D;
  --text-dark-2: #A7ADB7; /* secondary text on dark */
  --white: #FFFFFF;
  --surface: #F3F4F5;       /* light grey section background */
  --line: #E3E5E8;
  --text: #0B0B0C;
  --text-2: #5C6470;        /* secondary text on light */
  --body: #2A2D33;          /* paragraph text on light */
  --blue: #0057D9;          /* the one accent: links, buttons */
  --blue-on-dark: #5C9BFF;
  --font-body: 'Barlow', sans-serif;
  --font-display: 'Barlow Semi Condensed', sans-serif;
  --container: 1200px;
  --gutter: 32px;
  --section-y: 112px;
  --radius: 4px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: var(--blue); }
a, button { transition: opacity .15s ease; }
a:hover, button:hover { opacity: .82; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
input, select, textarea, button { font-family: var(--font-body); font-size: 16px; }
input::placeholder, textarea::placeholder { color: #8A9099; }

/* type */
.h1 { font-weight: 700; font-size: clamp(46px, 5.6vw, 80px); line-height: .98; letter-spacing: -.01em; }
.h2 { font-weight: 600; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -.005em; }
.h2--sub { font-size: clamp(28px, 2.6vw, 36px); }
.h3 { font-weight: 600; font-size: 24px; line-height: 1.15; }
.label { font-size: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.lede { font-size: 20px; line-height: 1.55; color: var(--body); }
.p { font-size: 17px; line-height: 1.6; color: var(--body); }
.h1, .h2, .h3 { text-wrap: balance; } .lede, .p, .point__d, .stat__t { text-wrap: pretty; }
.small { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.muted { color: var(--text-2); }
.measure { max-width: 560px; }
.nowrap { white-space: nowrap; }
.measure-wide { max-width: 760px; }
.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 36px; } .mt-5 { margin-top: 48px; } .mt-6 { margin-top: 64px; }

/* layout */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; background: var(--white); color: var(--text); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--ink); color: var(--white); }
.section--dark .label { color: var(--text-dark-2); }
.section--dark .lede, .section--dark .p { color: var(--text-dark-2); }
.section--dark .small, .section--dark .muted { color: var(--text-dark-2); }
.section--dark a { color: var(--blue-on-dark); }
.section--tight { padding: 72px 0; }
.section--flush { padding: 0; }
.grid { display: grid; gap: 40px 32px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid--split { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px 80px; align-items: start; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row--between { justify-content: space-between; gap: 20px 40px; }
.row--end { align-items: flex-end; }
.rule { border-top: 1px solid var(--line); }
.section--dark .rule { border-color: var(--line-dark); }

/* header and footer */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.site-header .container { padding-top: 14px; padding-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: currentColor; text-decoration: none; min-height: 44px; }
.brand__mark { flex: none; display: block; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .06em; line-height: 1; }
/* header logo: a little larger than the footer's. It is on screen from the first frame, out of focus, and sharpens
   as the page loads (a blur, not motion, so it also plays when the visitor's system asks for reduced motion) */
.site-header .brand { gap: 12px; animation: brand-focus 1.4s cubic-bezier(.4, 0, .2, 1) .15s both; }
.site-header .brand__mark { width: 27px; height: 31px; }
.site-header .brand__name { font-size: 22px; }
@keyframes brand-focus { from { filter: blur(4px); } to { filter: blur(0); } }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.site-nav a { color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 500; padding: 12px 10px; }
.site-nav a[aria-current="page"] { color: var(--blue); }
.site-footer { background: var(--ink); color: var(--text-dark-2); padding: 72px 0 40px; border-top: 1px solid var(--line-dark); }
.site-footer .brand { color: var(--white); }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 40px 32px; }
.site-footer nav, .site-footer__col { display: flex; flex-direction: column; gap: 4px; }
.site-footer .label { color: var(--text-dark-2); margin-bottom: 8px; }
.site-footer a { color: #E3E5E8; text-decoration: none; padding: 6px 0; font-size: 15px; }
.site-footer a .site-footer__for { color: var(--text-dark-2); }
.site-footer__legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: 13px; line-height: 1.6; }
.site-footer__legal a { display: inline; padding: 0; color: #E3E5E8; }

/* buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--radius); text-decoration: none; font-size: 17px; font-weight: 600; cursor: pointer; }
.btn--primary { background: var(--blue); color: var(--white); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--outline { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.section--dark .btn--outline { border-color: var(--white); color: var(--white); }
.section--dark .btn--white { color: var(--ink); } .section--dark .btn--primary, .section--dark .btn--ink { color: var(--white); }
.btn--disabled { background: var(--line); color: var(--text-2); cursor: not-allowed; }
button.btn, button.link { font: inherit; font-weight: 600; } button.link { background: none; border: 0; padding: 0; cursor: pointer; }
.link { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); text-decoration: none; font-size: 16px; font-weight: 600; }
.section--dark .link { color: var(--blue-on-dark); }
.link--plain { color: var(--ink); }
.section--dark .link--plain { color: var(--white); }
.link-list { display: flex; flex-wrap: wrap; gap: 12px 28px; }

/* split hero: text on the 1200px grid, photo running to the edge */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); align-items: stretch; }
.split__text { display: flex; flex-direction: column; justify-content: center; padding: 96px var(--gutter) 96px max(var(--gutter), calc(100% - var(--container) / 2 + var(--gutter))); min-width: 0; }
.split__text--right { padding: 96px max(var(--gutter), calc(100% - var(--container) / 2 + var(--gutter))) 96px var(--gutter); }
/* two columns that line up with the split rows above: left column on the page edge, right column with the right-hand split text */
.grid--split-align { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px calc(var(--gutter) * 2); }
/* text beside a figure: narrower text column, wider figure */
.grid--5-7 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 64px; align-items: center; }
/* match: the text column runs exactly as tall as the figure beside it (top and bottom lines up) */
.grid--match { align-items: stretch; }
.stack-fill { display: flex; flex-direction: column; justify-content: space-between; }
/* questions: a narrow heading column beside the list */
.grid--faq { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
@media (max-width: 959px) { .grid--split-align, .grid--5-7, .grid--faq { grid-template-columns: minmax(0, 1fr); } }
.split__photo { position: relative; min-height: 640px; }
.split__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split--short .split__photo { min-height: 520px; }
.split__photo--contain img { object-fit: contain; background: var(--white); }
.split__photo--surface, .split__photo--surface img { background: var(--surface); }
.split__photo--ink, .split__photo--ink img { background: var(--ink); }
.split__photo--pad img { padding: 48px; }
/* float: a cut-out product sitting on the page itself, no panel or shadow behind it (the clear film shows by its own edges) */
.split__photo--float { display: flex; align-items: center; justify-content: center; padding: 48px; } .split--short .split__photo--float { min-height: 0; }
.split__photo--float img { position: static; width: min(100%, 540px); height: auto; }
.split__photo--float.split__photo--large img { width: min(100%, 660px); }
.split__photo--float.split__photo--tall img { width: auto; max-width: 100%; height: clamp(340px, 38vw, 540px); }
/* keep floating photos inside the page grid: their outer edge stops where the text and nav stop */
.split__photo--float.split__photo--at-right { padding-right: max(var(--gutter), calc(100% - var(--container) / 2 + var(--gutter))); padding-left: var(--gutter); }
.split__photo--float.split__photo--at-left { padding-left: max(var(--gutter), calc(100% - var(--container) / 2 + var(--gutter))); padding-right: var(--gutter); }
.split--short .split__text, .split--short .split__text--right { padding-top: 72px; padding-bottom: 72px; }
/* photo hero: full-bleed photo behind the header, text lower right */
.site-header--overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 5; background: transparent; border-bottom-color: transparent; }
/* frosted: for a photo whose top is dark or busy, a light glass bar keeps the ink logo and links readable */
.site-header--frost { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom-color: rgba(11, 11, 12, .06); }
.photo-hero { position: relative; width: 100%; aspect-ratio: var(--ratio, 16 / 10); min-height: 600px; max-height: 960px; overflow: hidden; background: var(--ink); color: var(--white); }
/* --zoom (with --zoom-origin) enlarges a photo inside its frame, e.g. to bring a subject in from the edge; --zoom-wide
   sets a different zoom from 1600px wide */
.photo-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: var(--zoom-origin, 50% 50%); }
.photo-hero picture { display: contents; }
@media (min-width: 1600px) { .photo-hero__img { object-position: var(--pos-wide, var(--pos, 50% 50%)); transform: scale(var(--zoom-wide, var(--zoom, 1))); } }
@media (min-width: 2200px) { .photo-hero__img { object-position: var(--pos-xwide, var(--pos-wide, var(--pos, 50% 50%))); } }
/* shading behind the text: starts 140px above the text wherever it lands, fades in from the left so the subject stays bright */
.photo-hero__text::before { content: ''; position: absolute; z-index: -1; top: -200px; bottom: -240px; left: -18vw; right: -50vw; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0) 0, rgba(11, 11, 12, .3) 90px, rgba(11, 11, 12, .62) 200px, rgba(11, 11, 12, .82) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 9vw, #000 18vw); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 9vw, #000 18vw); }
.photo-hero__inner { position: absolute; inset: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gutter) * 2); align-items: end; padding-bottom: 72px; }
.photo-hero__text { grid-column: 2; position: relative; z-index: 0; text-shadow: 0 1px 14px rgba(11, 11, 12, .35); }
.photo-hero .label { color: var(--white); } .photo-hero .lede { color: rgba(255, 255, 255, .92); }
.photo-hero .btn--outline { border-color: var(--white); color: var(--white); }
/* text on the left: same shading, mirrored so it fades out toward the subject on the right */
.photo-hero--left .photo-hero__text { grid-column: 1; }
.photo-hero--left .photo-hero__text::before { left: -50vw; right: -12vw;
  -webkit-mask-image: linear-gradient(270deg, transparent 0, rgba(0, 0, 0, .35) 6vw, #000 12vw); mask-image: linear-gradient(270deg, transparent 0, rgba(0, 0, 0, .35) 6vw, #000 12vw); }
/* text high on the right and wider, so a long headline takes two lines: for photos whose subject fills the lower half */
.photo-hero--top .photo-hero__inner { align-items: start; padding-top: 116px; padding-bottom: 0; }
.photo-hero--wide .photo-hero__text { grid-column: 1 / -1; justify-self: end; width: min(100%, 780px); }
/* text on the left and wider, so a long headline keeps to two lines; the shading stops before the subject */
.photo-hero--left.photo-hero--wide .photo-hero__text { justify-self: start; width: min(100%, 720px); }
.photo-hero--left.photo-hero--wide .photo-hero__text::before { right: -6vw; -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 6vw); mask-image: linear-gradient(270deg, transparent 0, #000 6vw); }
.photo-hero--top .photo-hero__text::before { top: -36px; bottom: -36px; left: -10vw;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0) 0, rgba(11, 11, 12, .55) 36px, rgba(11, 11, 12, .6) calc(100% - 72px), rgba(11, 11, 12, 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 5vw, #000 10vw); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 5vw, #000 10vw); }
/* light: ink text on a soft white veil, for bright photos */
.photo-hero__inner { z-index: 1; }
.photo-hero.photo-hero--light::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .88) 0, rgba(255, 255, 255, .6) 55%, rgba(255, 255, 255, 0) 100%); }
.photo-hero.photo-hero--light { background: var(--white); color: var(--ink); }
.photo-hero.photo-hero--light .photo-hero__text { text-shadow: none; }
.photo-hero.photo-hero--light .label { color: var(--text-2); } .photo-hero.photo-hero--light .lede { color: var(--ink); }
.photo-hero.photo-hero--light .btn--outline { border-color: var(--ink); color: var(--ink); }
.photo-hero.photo-hero--light .photo-hero__text::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .84) 36px, rgba(255, 255, 255, .86) calc(100% - 72px), rgba(255, 255, 255, 0) 100%); }
/* light + high text: the veil runs up to the top edge, so the area above the text stays light (no darker band under the header) */
.photo-hero--top.photo-hero--light .photo-hero__text::before { top: -160px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86) 0, rgba(255, 255, 255, .86) calc(100% - 72px), rgba(255, 255, 255, 0) 100%); }
@media (max-width: 959px) {
  .site-header--overlay { position: static; background: var(--white); border-bottom-color: var(--line); }
  .photo-hero { aspect-ratio: auto; min-height: 0; max-height: none; overflow: visible; }
  .photo-hero__img { position: relative; height: auto; aspect-ratio: 4 / 3; object-position: var(--pos-mobile, var(--pos, 50% 50%)); transform: none; }
  .photo-hero__text::before { display: none; }
  .photo-hero__inner { position: relative; inset: auto; grid-template-columns: minmax(0, 1fr); padding: 40px var(--gutter) 56px; }
  .photo-hero__text, .photo-hero--left .photo-hero__text { grid-column: 1; text-shadow: none; }
  .photo-hero .btn--outline { border-color: var(--white); color: var(--white); }
}
@media (max-width: 1279px) {
  .photo-hero--top { aspect-ratio: auto; min-height: 0; max-height: none; overflow: visible; }
  .photo-hero--top .photo-hero__img { position: relative; height: auto; transform: none; }
  .photo-hero--top .photo-hero__text::before { display: none; }
  .photo-hero--top .photo-hero__inner { position: relative; inset: auto; grid-template-columns: minmax(0, 1fr); padding: 48px var(--gutter) 64px; }
  .photo-hero--top .photo-hero__text { grid-column: 1; justify-self: stretch; width: auto; text-shadow: none; }
}
@media (min-width: 960px) and (max-width: 1279px) { .photo-hero--top .photo-hero__img { aspect-ratio: 16 / 9; } }
.band { height: 520px; margin: 0; }
/* wide: a full-bleed widescreen photo; taller crop on phones so the subject stays large */
.band--wide { height: auto; aspect-ratio: 12 / 5; max-height: 720px; }
@media (max-width: 720px) { .band--wide { aspect-ratio: 4 / 3; } }
.band img { width: 100%; height: 100%; object-fit: cover; }
.figure { margin: 0; } .figure.mt-5 { margin-top: 48px; } .figure.mt-6 { margin-top: 64px; }
.figure img { width: 100%; height: auto; }
.figure figcaption { margin-top: 12px; font-size: 14px; color: var(--text-2); }
.plate { background: var(--surface); padding: 32px; }
/* grey cards turn white on grey sections so they stay visible */
.section--surface .plate, .section--surface .wall__cell { background: var(--white); }

/* facts strip */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact { padding: 20px 24px 20px 0; }
.fact__value { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.1; }
.fact__note { margin-top: 6px; font-size: 15px; color: var(--text-2); }
.section--dark .facts { border-color: var(--line-dark); } .section--dark .fact__note { color: var(--text-dark-2); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 40px 32px; }
.stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { border-top: 1px solid var(--line-dark); padding-top: 20px; }
.stat__n { font-family: var(--font-display); font-weight: 700; font-size: clamp(56px, 6vw, 88px); line-height: 1; color: var(--blue-on-dark); }
.stat__t { margin-top: 10px; font-size: 16px; color: var(--text-dark-2); }
.section--light .stat { border-color: var(--line); } .section--light .stat__n { color: var(--blue); } .section--light .stat__t { color: var(--text-2); }
.stat__src { margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--white); }
.section--light .stat__src { color: var(--ink); }

/* points: titled lines with a rule above, no boxes */
.points { display: grid; gap: 40px 32px; }
.points--1 { grid-template-columns: minmax(0, 1fr); }
.points--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.points--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.points--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.point { border-top: 1px solid var(--line); padding-top: 20px; }
.points--compact { gap: 14px 32px; } .points--compact .point { padding-top: 16px; } .points--compact .point__n { margin-bottom: 8px; } .points--compact .point__d { margin-top: 6px; }
.section--dark .point { border-color: var(--line-dark); }
.point__n { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--blue); }
.section--dark .point__n { color: var(--blue-on-dark); }
.point__t { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.15; }
.point__d { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.section--dark .point__d { color: var(--text-dark-2); }
.point .link { margin-top: 16px; }

/* names row (supporters, investors, journals): static text, no logos */
.names { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px 40px; align-items: start; padding: 28px 0; border-top: 1px solid var(--line); }
.section--dark .names { border-color: var(--line-dark); }
.names .label { padding-top: 4px; }
.names--stacked { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.names ul { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.names li { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.2; }

/* people */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(calc(50% - 12px), 180px), 1fr)); gap: 32px 24px; }
.person img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--surface); }
.person__name { margin-top: 14px; font-size: 17px; font-weight: 600; }
.person__role { margin-top: 4px; font-size: 15px; color: var(--text-2); }
.person__bio { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--body); }
.person .link { margin-top: 10px; font-size: 15px; }
.person__ph { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; background: #E8E8EC; font-family: var(--font-display); font-weight: 600; font-size: 44px; color: var(--text-2); }
/* investor and supporter names as a wall of tiles */
.wall + .wall { margin-top: 48px; }
.wall__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.wall__grid li { display: flex; }
.wall__cell { flex: 1 1 auto; color: inherit; text-decoration: none; transition: background-color .15s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 104px; padding: 18px 14px; background: var(--surface); }
a.wall__cell:hover, a.wall__cell:focus-visible { background: #E6E8EC; } a.wall__cell:hover .wall__name { text-decoration: underline; text-underline-offset: 3px; }
.wall__name { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.2; }
.wall__note { margin-top: 6px; font-size: 13px; color: var(--text-2); }
@media (max-width: 959px) { .wall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* spec table */
.spec { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 14px 32px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.spec:last-child { border-bottom: 1px solid var(--line); }
.section--dark .spec { border-color: var(--line-dark); }
.spec dt { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.section--dark .spec dt { color: var(--text-dark-2); }
.spec dd { margin: 0; font-size: 17px; line-height: 1.5; }

/* forms */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px 20px; align-content: start; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-size: 15px; font-weight: 600; padding: 0; }
.input { min-height: 48px; padding: 0 14px; border: 1px solid #C9CDD4; border-radius: var(--radius); background: var(--white); color: var(--ink); font: inherit; font-size: 16px; width: 100%; }
textarea.input { padding: 12px 14px; min-height: 120px; resize: vertical; line-height: 1.5; }
select.input { padding: 0 12px; }
.section--dark .input { background: var(--ink-2); border-color: var(--line-dark); color: var(--white); }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--blue); margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid #C9CDD4; border-radius: var(--radius); font-size: 15px; cursor: pointer; }
.section--dark .chip { border-color: var(--line-dark); background: var(--ink-2); }
.chip input { width: 18px; height: 18px; accent-color: var(--blue); margin: 0; }
.field label.chip { padding: 0 16px 0 12px; font-size: 15px; font-weight: 500; background: var(--white); }
.chip:has(input:checked) { border-color: var(--blue); background: #EEF4FF; }
.field label.check { font-weight: 500; }
.form__note { grid-column: 1 / -1; margin: -6px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.section--dark .form__note { color: var(--text-dark-2); }
.form__actions { grid-column: 1 / -1; }
.form .btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.form__error { grid-column: 1 / -1; margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.form__thanks { margin-top: 28px; padding: 28px; background: var(--surface); }

/* faq / accordion */
/* disclosure: native <details>, no script. .disc-list stacks several; .disc--small for secondary detail */
.disc-list { border-bottom: 1px solid var(--line); }
.disc { border-top: 1px solid var(--line); }
.disc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 0; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--ink); cursor: pointer; }
.disc > summary::-webkit-details-marker { display: none; }
.disc > summary h3 { font: inherit; margin: 0; }
.disc > summary::after { content: '+'; flex: none; font-size: 28px; font-weight: 400; line-height: 1; color: var(--blue); }
.disc[open] > summary::after { content: '–'; }
.disc__body { padding: 0 0 24px; max-width: 760px; font-size: 17px; line-height: 1.65; color: var(--body); }
.disc--small > summary { min-height: 52px; padding: 12px 0; font-family: var(--font-body); font-size: 16px; }
.disc--small > summary::after { font-size: 22px; }
.disc--small .disc__body { font-size: 16px; padding-bottom: 20px; }
.disc--plain { border-top: 0; } .disc--plain > summary { min-height: 44px; padding: 8px 0; justify-content: flex-start; gap: 12px; color: var(--blue); }
.section--dark .disc, .section--dark .disc-list { border-color: var(--line-dark); }
.section--dark .disc > summary { color: var(--white); } .section--dark .disc > summary::after { color: var(--blue-on-dark); }
.section--dark .disc__body { color: var(--text-dark-2); } .section--dark .disc--plain > summary { color: var(--blue-on-dark); }

/* cta list */
.cta-list a { display: flex; flex-direction: column; gap: 6px; padding: 28px 0; border-top: 1px solid var(--line-dark); color: var(--white); text-decoration: none; }
.cta-list__t { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.1; }
.cta-list__t span { color: var(--blue-on-dark); }
.cta-list__s { font-size: 15px; color: var(--text-dark-2); }

/* modal (team bios, contact forms) */
.scrim { position: absolute; inset: 0; z-index: 40; background: rgba(11, 11, 12, .55); border: 0; padding: 0; cursor: default; }
.modal { position: absolute; z-index: 41; left: 50%; transform: translateX(-50%); width: min(760px, calc(100% - 32px)); background: var(--white); color: var(--ink); padding: 32px; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); }
.modal__head { display: flex; gap: 20px; align-items: center; }
.modal__head img { width: 88px; height: 88px; object-fit: cover; }
.modal__name { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.1; }
.modal__role { margin-top: 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); font-weight: 600; }
.modal__close { align-self: flex-start; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
.modal__body { margin-top: 24px; font-size: 17px; line-height: 1.65; color: var(--body); }
.modal--form { width: min(880px, calc(100% - 32px)); }
.modal--form .form { margin-top: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* closing call-to-action band: heading left, actions right */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: center; }
.cta__actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
.cta__alt { margin: 0; font-size: 15px; line-height: 1.4; color: var(--text-dark-2); }
.cta__alt a { color: var(--white); font-weight: 500; text-decoration: none; }
.cta__alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.section--light .cta__alt a { color: var(--ink); }
@media (max-width: 720px) { .cta__actions { align-items: flex-start; text-align: left; } }
.cta--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.cta--2 .btn { min-width: 260px; } /* the two offers get equal-width buttons */
@media (max-width: 720px) { .cta { grid-template-columns: minmax(0, 1fr); } .modal--form .form { grid-template-columns: minmax(0, 1fr); } }

/* press */
.press-card { display: flex; flex-direction: column; min-height: 220px; padding: 28px; background: var(--ink); color: var(--white); text-decoration: none; }
.press-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.press-card__meta .outlet { color: var(--blue-on-dark); } .press-card__meta .date { color: var(--text-dark-2); font-weight: 500; }
.press-card__title { margin-top: 18px; font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; }
.press-card__more { margin-top: auto; padding-top: 24px; font-size: 16px; font-weight: 600; color: var(--blue-on-dark); }
.press-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.press-row__date { font-size: 14px; color: var(--text-2); }
.press-row__outlet { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.press-row__title { display: block; margin-top: 4px; font-size: 18px; line-height: 1.4; font-weight: 500; }
/* careers: role cards, readable tags, apply block in the role pop-up */
.apply-card { display: flex; flex-direction: column; padding: 36px; }
.apply-card__action { margin-top: auto; padding-top: 28px; } .apply-card__action .btn { width: 100%; justify-content: center; }
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px; }
.role { display: flex; flex-direction: column; align-items: flex-start; background: var(--white); padding: 32px; }
.role__title { font-size: 28px; }
.role__more { margin-top: auto; padding-top: 24px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 6px 12px; border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.3; }
.role__list { padding-left: 20px; list-style: disc; font-size: 16px; } .role__list li { margin-top: 4px; }
.role-apply { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.press-row__tag { padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }

/* brand board */
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 16px; }
.swatch { border: 1px solid var(--line); }
.swatch__chip { height: 96px; }
.swatch__meta { padding: 12px 14px; font-size: 14px; }
.swatch__meta b { display: block; font-family: var(--font-display); font-size: 16px; }

[data-if] { display: contents; } [data-if][hidden] { display: none; }

@media (max-width: 959px) {
  .split__text, .split__text--right { padding: 72px var(--gutter); }
  .split__photo--float.split__photo--at-right, .split__photo--float.split__photo--at-left { padding: 32px var(--gutter); }
}

@media (max-width: 720px) {
  :root { --section-y: 80px; --gutter: 20px; }
  .split__text, .split__text--right { padding: 64px var(--gutter); }
  .split__photo { min-height: 420px; }
  .band { height: 360px; }
  .names { grid-template-columns: minmax(0, 1fr); }
  .stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}