/* collaboration.flocoffee.id: Flo family. White paper, black ink, halftone dots.
   Poppins 300 display, Lato text, Inter 500 for small UI labels and numerals.
   The hero figure (size, still, canvas, labels) is styled only by /assets/hero/hero.css. */

:root {
  --paper: #FFFFFF;
  --paper-2: #F6F6F4;
  --ink: #111111;
  --ink-2: #555555;
  --line: #E4E4E0;
  --line-2: #CFCFCA;
  --max: 1200px;

  --gut: 16px;
  --top-h: 60px;
  --display: "Poppins", system-ui, sans-serif;
  --text: "Lato", system-ui, sans-serif;
  --ui: "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);          /* exponential ease-out */
  --band-text: #CACAC4;                          /* secondary text on the black band, 11:1 */
  --band-line: #3A3A37;
  --placeholder: #6E6E6A;                        /* 5.1:1 on white */
  --field-line: #8A8A85;                         /* input and pill borders, 3.5:1 on white (WCAG 1.4.11) */
}
@media (min-width: 720px) { :root { --gut: 32px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--top-h);
  caret-color: var(--ink);
  accent-color: var(--ink);
  scrollbar-color: var(--line-2) var(--paper);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--ink); color: var(--paper); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p, h1, h2, h3, ul, ol, dl, dd, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
button { font: inherit; color: inherit; }

h1, h2, h3 { font-family: var(--display); font-weight: 300; text-wrap: balance; }
h1 { font-size: clamp(44px, 8vw, 96px); letter-spacing: -0.03em; line-height: 1.02; }
h2 { font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -0.02em; line-height: 1.08; }
h3 { font-size: 21px; font-weight: 400; letter-spacing: -0.005em; line-height: 1.3; }
.num { font-family: var(--ui); font-weight: 500; font-variant-numeric: tabular-nums; font-size: .94em; }

/* Languages: every text exists in both; the html lang decides which one shows. */
html[lang="id"] [data-l="en"], html[lang="en"] [data-l="id"] { display: none !important; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.skip {
  position: absolute; left: 12px; top: 10px; z-index: 50;
  padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 500 14px/1 var(--ui); text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font: 700 16px/1.15 var(--text); text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.btn:hover { background: #2E2E2E; border-color: #2E2E2E; }
.btn:active { transform: translateY(1px); }
.btn .i { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.btn:hover .i { transform: translateX(3px); }
.btn-2 { background: transparent; color: var(--ink); }
.btn-2:hover { background: var(--paper-2); border-color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px;
}
.link:hover { text-decoration-thickness: 2px; }
.link .i { width: 16px; height: 16px; }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20; height: var(--top-h);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 12px; height: 100%; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; min-width: 0; }
.brand img { width: 52px; height: auto; }
.brand-sub {
  font: 300 18px/1 var(--display); letter-spacing: -0.01em; white-space: nowrap;
  padding: 3px 0 3px 10px; border-left: 1px solid var(--line-2);
}
.top-nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
  display: none; padding: 10px; border-radius: 4px;
  font: 500 14px/1 var(--ui); color: var(--ink-2); text-decoration: none;
}
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
.pill-link {
  position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  border: 1px solid var(--ink); border-radius: 999px; margin-left: 8px;
  font: 500 13px/1 var(--ui); color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.pill-link:hover { background: var(--ink); color: var(--paper); }
.pill-link::after, .lang button::after { content: ""; position: absolute; inset: -6px -2px; }  /* 44px touch target */
.lang { display: flex; flex: none; }
.lang button {
  position: relative; min-height: 34px; padding: 0 11px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 500 12px/1 var(--ui); letter-spacing: .04em;
}
.lang button:first-child { border-radius: 999px 0 0 999px; }
.lang button:last-child { border-radius: 0 999px 999px 0; border-left: 0; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lang button:focus-visible { outline-offset: 2px; z-index: 1; }
@media (min-width: 720px) {
  .nav-link { display: inline-flex; }
}
@media (max-width: 419px) {
  .top-in { gap: 8px; }
  .brand { gap: 8px; }
  .brand img { width: 44px; }
  .brand-sub { font-size: 15px; padding-left: 8px; }
  .pill-link { padding: 0 11px; margin-left: 0; }
  .lang button { padding: 0 9px; }
}

/* ---------- hero ---------- */
/* The art comes first, right under the bar (hero.css sizes it); the H1 starts a short step below it. */
.hero-copy { padding-top: clamp(28px, 5vh, 56px); }
.hero-row { display: grid; gap: 20px; margin-top: clamp(16px, 2vw, 28px); }
.lede {
  font: 300 clamp(18px, calc(1vw + 12px), 22px)/1.45 var(--display); letter-spacing: -0.005em;
  max-width: 32em; text-wrap: pretty;
}
@media (min-width: 1024px) {
  .hero-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; }
  .hero-cta { padding-bottom: 4px; }
}

/* The three doors: large typographic rows, not cards. */
.tracks { margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line-2); }
/* Phones: glyph | name | arrow on the first line, the description runs on under the arrow. */
.track {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; column-gap: 14px; row-gap: 3px;
  align-items: center; padding: 13px 0;
  border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none;
  transition: border-color .2s;
}
.track .glyph { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; }
.track-name { grid-column: 2; grid-row: 1; font: 300 27px/1.12 var(--display); letter-spacing: -0.02em; }
.track-desc { grid-column: 2 / 4; grid-row: 2; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.track-arrow { grid-column: 3; grid-row: 1; width: 22px; height: 22px; transition: transform .45s var(--ease); }
.track:hover, .track:focus-visible { border-bottom-color: var(--ink); }
.track:hover .track-arrow, .track:focus-visible .track-arrow { transform: translateX(5px); }
.track:focus-visible { outline-offset: 4px; }
@media (min-width: 720px) {
  .track { grid-template-columns: 52px minmax(0, 1fr) 26px; column-gap: 20px; padding: 16px 0; }
  .track .glyph { width: 52px; height: 52px; }
  .track-name { font-size: 32px; }
  .track-desc { grid-column: 2; font-size: 16px; }
  .track-arrow { grid-row: 1 / span 2; width: 26px; height: 26px; }
}
@media (min-width: 1024px) {
  .track { grid-template-columns: 52px minmax(180px, .8fr) minmax(0, 2.4fr) 26px; column-gap: 28px; }
  .track .glyph, .track-name, .track-desc, .track-arrow { grid-row: 1; }
  .track-desc { grid-column: 3; font-size: 17px; }
  .track-arrow { grid-column: 4; }
  .track-name { font-size: clamp(32px, 3vw, 40px); }
}

.glyph { display: block; flex: none; }
.glyph img { width: 100%; height: 100%; }
img[data-broken] { visibility: hidden; }

/* Hero art (figure#hero-art): size, still, canvas and labels all come from /assets/hero/hero.css + hero.js. */

/* ---------- sections ---------- */
.sec { padding-block: clamp(72px, 9vw, 128px); border-top: 1px solid var(--line); }
.hero + .sec { border-top: 0; }
.sec-after-band { border-top: 0; }
.sec-head { display: grid; gap: 20px; }
/* Phones: the glyph sits above the heading so the heading gets the full width; from 720px it sits beside it. */
.sec-title { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sec-title .glyph { width: 44px; height: 44px; }
@media (min-width: 720px) {
  .sec-title { flex-direction: row; gap: 16px; }
  .sec-title .glyph { width: 48px; height: 48px; margin-top: .1em; }
}
.sec-lede { color: var(--ink-2); max-width: 62ch; }
@media (min-width: 1024px) {
  .sec-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .sec-lede { font-size: 19px; line-height: 1.6; padding-top: .5em; }
  .sec-title .glyph { width: 56px; height: 56px; }
}
.part { margin-top: clamp(48px, 6vw, 80px); }
.part-title { margin-bottom: 20px; }
.part-lede { color: var(--ink-2); margin: -8px 0 24px; max-width: 62ch; }
.part-note { margin-top: 28px; color: var(--ink-2); max-width: 62ch; }
.sec-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(44px, 5.5vw, 72px); }
.link-quiet { font-weight: 400; }

/* Lists with a small ink dot: the page's only bullet. */
.dots { border-top: 1px solid var(--line); }
.dots li { position: relative; padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); }
.dots li::before {
  content: ""; position: absolute; left: 3px; top: calc(11px + .8em - 3px);
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink);
}

/* A flow: dots on a hairline that grow toward the goal (halftone: size carries the meaning). */
.flow { display: grid; gap: 28px; }
.flow > li { position: relative; padding-left: 44px; }
.flow-dot {
  position: absolute; left: 12px; top: 12px; width: var(--d, 8px); height: var(--d, 8px);
  border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%);
}
.flow > li:not(:last-child)::before {
  content: ""; position: absolute; left: 12px; top: 12px; height: calc(100% + 28px);
  border-left: 1px solid var(--line-2); transform: translateX(-.5px);
}
.flow-t { display: block; font: 700 17px/1.4 var(--text); }
.flow p { margin-top: 4px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.flow-4 > li:nth-child(1) { --d: 7px; }
.flow-4 > li:nth-child(2) { --d: 11px; }
.flow-4 > li:nth-child(3) { --d: 15px; }
.flow-4 > li:nth-child(4) { --d: 22px; }
.flow-3 > li:nth-child(1) { --d: 8px; }
.flow-3 > li:nth-child(2) { --d: 14px; }
.flow-3 > li:nth-child(3) { --d: 22px; }
@media (min-width: 1024px) {
  .flow-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .flow-4 > li { padding: 40px 0 0; }
  .flow-4 .flow-dot { left: 11px; top: 11px; }
  .flow-4 > li:not(:last-child)::before {
    left: 11px; top: 11px; width: calc(100% + 32px); height: 0;
    border-left: 0; border-top: 1px solid var(--line-2); transform: translateY(-.5px);
  }
}

/* Two lists side by side */
.duo { display: grid; gap: 48px; }
@media (min-width: 860px) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }

/* Brand: two formats, a rule between them */
.formats { display: grid; gap: 56px; }
.format-lede { margin-bottom: 20px; max-width: 52ch; }
.format-note { margin-top: 20px; color: var(--ink-2); font-size: 16px; max-width: 56ch; }
@media (min-width: 860px) {
  .formats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .format:first-child { padding-right: clamp(32px, 4vw, 56px); }
  .format + .format { padding-left: clamp(32px, 4vw, 56px); border-left: 1px solid var(--line); }
}

.facts { border-top: 1px solid var(--line); }
.facts > div {
  display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 2px 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.facts dt { font: 500 13px/1.5 var(--ui); color: var(--ink-2); }
.facts dd { font-size: 16px; line-height: 1.55; min-width: 0; overflow-wrap: anywhere; }
.facts dd a { text-decoration-color: var(--line-2); }
.facts dd a:hover { text-decoration-color: var(--ink); }
.dd-note { display: block; margin-top: 2px; color: var(--ink-2); font-size: 15px; }
.dd-link { font-size: 15px; }

/* The "bukan beli putus" line, set large */
.statement { margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid var(--ink); }
.statement-big {
  font: 300 clamp(30px, 4.6vw, 58px)/1.1 var(--display); letter-spacing: -0.025em;
  max-width: 21ch; text-wrap: balance;
}
.statement-note { margin-top: 20px; color: var(--ink-2); max-width: 58ch; }

/* ---------- principles: the one black band ---------- */
.band { background: var(--ink); color: var(--paper); padding-block: clamp(72px, 9vw, 128px); }
.band ::selection { background: var(--paper); color: var(--ink); }
.band :focus-visible { outline-color: var(--paper); }
.band a { text-decoration-color: rgba(255, 255, 255, .5); }
.band a:hover { text-decoration-color: var(--paper); }
.principles { margin-top: clamp(36px, 4.5vw, 56px); border-top: 1px solid var(--band-line); }
.principles li { display: grid; gap: 10px; padding: 24px 0 28px; border-bottom: 1px solid var(--band-line); }
.principle { font: 300 clamp(25px, 2.9vw, 38px)/1.18 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.principles li > p:not(.principle) { color: var(--band-text); max-width: 54ch; }
@media (min-width: 900px) {
  .principles li { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; padding: 32px 0 36px; align-items: baseline; }
}

/* ---------- riset ---------- */
.who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--line); }
.who li { padding: 16px 0 20px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.who-name { display: block; margin-bottom: 6px; font: 400 21px/1.3 var(--display); letter-spacing: -0.005em; color: var(--ink); }
@media (min-width: 900px) { .who { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; } }

/* Upstream to downstream: one ink axis with a node per stage and an arrowhead at the far end. */
.spread { display: grid; gap: 40px; }
.stage { position: relative; padding-top: 24px; border-top: 1px solid var(--ink); }
.stage::before {
  content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.stage-name { display: block; font: 300 clamp(32px, 3.4vw, 44px)/1.04 var(--display); letter-spacing: -0.025em; }
.stage-sub { display: block; margin-top: 8px; font: 500 13px/1.5 var(--ui); color: var(--ink-2); }
.stage .dots { margin-top: 18px; }
.stage-note { margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
@media (min-width: 900px) {
  .spread { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .stage { padding-right: clamp(24px, 3vw, 40px); }
  .spread::after {
    content: ""; position: absolute; right: 1px; top: -4px; width: 8px; height: 8px;
    border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); transform: rotate(45deg);
  }
}

/* Projects: name and public subtitle, then the description with its status line after it (never above the name). */
.projects { border-top: 1px solid var(--line-2); }
.project {
  display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 12px 16px; padding: 20px 0;
  border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none; transition: border-color .2s;
}
.project-head, .project-body { display: grid; align-content: start; min-width: 0; }
.project-head { grid-column: 1; grid-row: 1; gap: 2px; }
.project-body { grid-column: 1 / -1; gap: 10px; }
.project-name { font: 400 21px/1.3 var(--display); letter-spacing: -0.005em; }
.project-sub { font: 400 15px/1.45 var(--text); color: var(--ink-2); }
.project-sub::first-letter { text-transform: uppercase; }
.project-desc { font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 64ch; }
.status { position: relative; padding-left: 16px; font: 500 13px/1.45 var(--ui); color: var(--ink); max-width: 60ch; }
.status::before {
  content: ""; position: absolute; left: 0; top: calc(.725em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--ink);
}
.project-arrow { grid-column: 2; grid-row: 1; align-self: start; width: 20px; height: 20px; margin-top: 4px; transition: transform .45s var(--ease); }
.project:hover, .project:focus-visible { border-bottom-color: var(--ink); }
.project:hover .project-arrow, .project:focus-visible .project-arrow { transform: translate(2px, -2px); }
.project:hover .project-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (min-width: 1024px) {
  .project { grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr) 20px; gap: 32px; padding: 24px 0; align-items: start; }
  .project-body { grid-column: 2; grid-row: 1; }
  .project-arrow { grid-column: 3; }
}

/* ---------- contact ---------- */
/* Phones: intro, form, then the direct lines. Desktop: intro and lines on the left, the form on the right. */
.contact { display: grid; gap: 48px; grid-template-areas: "intro" "form" "lines"; }
.contact-intro { grid-area: intro; }
.contact > .form { grid-area: form; }
.contact > .lines { grid-area: lines; }
.contact-intro .sec-lede { margin-top: 20px; }
.contact-intro .flow { margin-top: 36px; }
@media (min-width: 1024px) {
  .contact {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
    grid-template-areas: "intro form" "lines form"; column-gap: clamp(56px, 6vw, 96px); row-gap: 44px; align-items: start;
  }
  .contact-intro .sec-lede { font-size: 17px; padding-top: 0; }
}

.form { display: grid; gap: 22px; padding: 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); min-width: 0; }
@media (min-width: 560px) { .form { padding: 32px; } }
.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field > legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; }
fieldset.field > legend + * { clear: both; }
.lbl { font: 500 14px/1.35 var(--ui); color: var(--ink); }
.opt { margin-left: 6px; font-style: normal; color: var(--ink-2); }
.row2 { display: grid; gap: 22px; }
.input {
  width: 100%; min-height: 48px; padding: 11px 12px;
  border: 1px solid var(--field-line); border-radius: 4px; background: var(--paper); color: var(--ink);
  font: 400 16px/1.4 var(--text); transition: border-color .15s;
}
.input:hover { border-color: var(--ink-2); }
.input:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.input::placeholder { color: var(--placeholder); opacity: 1; }
textarea.input { min-height: 124px; resize: vertical; }
.input[aria-invalid="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.hint { font: 500 13px/1.45 var(--ui); color: var(--ink-2); }
.hint-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.count { flex: none; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.count.is-near { color: var(--ink); }
.count.is-over { padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.form-required { margin-bottom: -4px; }
/* Without JavaScript (no html.js) the form cannot work: show only its note with direct links, and hide the ID/EN switch. */
html:not(.js) .form > :not(noscript) { display: none !important; }
html:not(.js) .lang { display: none !important; }
.form-nojs { font-size: 16px; line-height: 1.6; }

/* Track-specific fields and labels follow form[data-jalur]. */
.form [data-for] { display: none; }
.form[data-jalur="roastery"] [data-for="roastery"],
.form[data-jalur="brand"] [data-for="brand"],
.form[data-jalur="riset"] [data-for="riset"] { display: grid; }
.form [data-org] { display: none; }
.form:not([data-jalur]) [data-org="none"],
.form[data-jalur="roastery"] [data-org="roastery"],
.form[data-jalur="brand"] [data-org="brand"],
.form[data-jalur="riset"] [data-org="riset"] { display: inline; }
.form [data-hint] { display: none; }
.form:not([data-jalur]) [data-hint="none"],
.form[data-jalur="roastery"] [data-hint="roastery"],
.form[data-jalur="brand"] [data-hint="brand"],
.form[data-jalur="riset"] [data-hint="riset"] { display: inline; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; display: inline-flex; }
.pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pill-face {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--field-line); border-radius: 999px; background: var(--paper);
  font: 500 15px/1.2 var(--ui); color: var(--ink); transition: border-color .15s, background-color .15s, color .15s;
}
.pill:hover .pill-face { border-color: var(--ink-2); }
.pill input:checked + .pill-face { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pill input:focus-visible + .pill-face { outline: 2px solid var(--ink); outline-offset: 3px; }
.field.is-invalid .pill-face { border-color: var(--ink); }

.err { display: flex; align-items: flex-start; gap: 8px; font: 500 14px/1.45 var(--ui); color: var(--ink); }
/* The summary stays rendered (empty, zero height) so its live region is announced when it fills. */
.err-summary { font: 500 14px/1.45 var(--ui); color: var(--ink); }
.err-summary:not(:empty) { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.err::before, .err-summary:not(:empty)::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.2v4.9' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.7' r='1.05' fill='%23fff'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.actions .btn { flex: 1 1 220px; }
.form-note { margin-top: -6px; }
.sent { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.sent-msg { font-size: 16px; max-width: 56ch; }
.sent-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sent-text { min-height: 0; font-size: 15px; line-height: 1.5; resize: vertical; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 80px; }
  .faq > h2 { position: sticky; top: calc(var(--top-h) + 40px); align-self: start; }
}
.faq-list { border-top: 1px solid var(--line-2); }
.faq-list details { border-bottom: 1px solid var(--line-2); }
.faq-list summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 20px; align-items: center;
  padding: 18px 0; cursor: pointer; list-style: none; font: 700 17px/1.45 var(--text);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover .q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.faq-list summary:focus-visible { outline-offset: 4px; }
.plus-v { transform-box: fill-box; transform-origin: center; transition: transform .45s var(--ease); }
details[open] .plus-v { transform: scaleY(0); }
.faq-a { padding: 0 36px 22px 0; color: var(--ink-2); }
.faq-a p { max-width: 64ch; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 56px 0 36px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }
.foot-grid { display: grid; gap: 36px; }
.foot-logo { display: inline-block; margin-bottom: 16px; }
.foot-logo img { width: 52px; }
.foot-h { margin-bottom: 12px; font: 500 13px/1.3 var(--ui); color: var(--ink); letter-spacing: 0; }
.foot-links { columns: 2; column-gap: 24px; }
.foot-links li { break-inside: avoid; padding-bottom: 2px; }
.foot-links a, .facts dd a { display: inline-block; padding-block: 6px; }
.foot-links small { display: block; font: 500 12px/1.4 var(--ui); color: var(--ink-2); }
.foot-privacy { font-size: 14px; max-width: 62ch; }
.foot-privacy a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }
.foot-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font: 500 13px/1.4 var(--ui); }
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; }
}

/* ---------- 404 ---------- */
.nf { padding-block: clamp(72px, 12vw, 160px); }
.nf h1 { font-size: clamp(40px, 6vw, 72px); max-width: 14ch; }
.nf p { margin-top: 20px; color: var(--ink-2); max-width: 46ch; }
.nf .sec-cta { margin-top: 36px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn .i, .track, .track-arrow, .project, .project-arrow, .pill-link, .pill-face, .input, .plus-v { transition: none !important; }
}