/* Self-hosted fonts (SIL OFL 1.1, via Fontsource). Replaces Google Fonts: no third-party requests, no font-swap layout shift. */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/instrument-serif-latin-400-normal.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 Serif";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/instrument-serif-latin-400-italic.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:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/archivo-latin-400-normal.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:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/archivo-latin-500-normal.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:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/archivo-latin-600-normal.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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-400-normal.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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-500-normal.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;}

/* ==========================================================================
   Indie Film Backers, design system
   --------------------------------------------------------------------------
   Direction: EDITORIAL CINEMA. Typography-led, asymmetric, hairline-ruled.
   The reference posture is a production company's dossier or a film
   distributor's catalogue, type does the work, boxes are avoided, and one
   accent colour is used sparingly. Referenced against the Sanity/Cursor
   "precision dark" family in popular-web-designs, but with a warm paper
   inversion band instead of neon accents.

   SLOP AUDIT of the previous design, it scored 6/10. Fixes applied here:
     1. Tech gradient .......... REMOVED (gradient mark, door underline,
                                 radial hero glow) -> flat colour fields
     2. Generic tech hue ....... n/a (was amber; accent now vermilion)
     3. Feature-tile grid ...... REMOVED the equal-weight 3-card grid
                                 -> numbered editorial index with hairlines
     4. Accent rail ............ REMOVED (`.notice` left-border strip)
                                 -> rule-topped block, no rail, no fill
     5. Unearned blur .......... REMOVED (glassmorphic header backdrop-filter)
     6. Monument stat .......... REMOVED (oversized decorative .card .num)
     7. Icon topper ............ n/a (no icons by design)
     8. Center stack ........... REMOVED (.center on body sections)
                                 -> every block aligns to a grid edge
     9. Default type ........... FIXED (was system-ui/Inter)
                                 -> Instrument Serif + Archivo + IBM Plex Mono
    10. Wrong surface .......... n/a (a hero IS correct on Decide/Learn)
        but the hero is now composed ASYMMETRICALLY with a ledger column
        rather than centred.

   Fonts load per-page via Google Fonts.
   ========================================================================== */

:root {
  /* --- ink field (primary) ---
     CONTRAST PASS 3: the WCAG maths passed, but a near-black field (#0f0e0c)
     sits in the shadow-crush zone of a lot of real laptop panels, and cheap
     IPS/TN screens desaturate a warm hue sitting on top of it. Fixed by
     lifting the whole dark field OFF pure black, not just raising ratios. */
  --ink:        #211e19;
  --ink-2:      #2b2721;
  --ink-3:      #423b31;
  --line:       #7d6d58;   /* clears the WCAG 1.4.11 non-text 3:1 minimum */
  --line-soft:  #5c5042;

  /* --- paper field (inverted bands) --- */
  --paper:      #f6f3ed;
  --paper-2:    #ebe5da;
  --paper-line: #c2baa9;   /* lifted so form rules and dividers read */

  /* --- text ---
     Every token now clears AAA (7:1) with real headroom to spare, so a
     slightly dim or uncalibrated screen still reads comfortably:
       text       16.4 on ink   (pass 2 was 18.5 on a darker ink)
       text-dim   12.2 on ink
       text-mute   8.7 on ink
       paper-dim  10.6 on paper (unchanged, paper field was never the issue) */
  --text:       #fffdf9;
  --text-dim:   #e3dccd;
  --text-mute:  #c4bbaa;
  --paper-text: #100f0a;
  --paper-dim:  #3a3832;

  /* --- accent: one hue, four jobs, each contrast-tested in place ---
     Brighter and more saturated than pass 2 on every axis, specifically
     because a muddy burnt-orange is the first thing a crushed dark panel
     loses:
       accent      as TEXT on ink .......... 7.4  (was 6.2)
       accent-deep as a button FILL ........ 8.1 white-on-it (was 6.4)
       accent-deep as TEXT on paper ........ 7.3  (was 5.8)
     A single token still can't do all three, so the split remains. */
  --accent:       #ff8f58;   /* TEXT on the ink field */
  --accent-hover: #ffa374;   /* hover goes lighter on ink */
  --accent-deep:  #8f300a;   /* button fills + TEXT on the paper field */
  --accent-press: #7d2a08;   /* hover/press goes darker on paper */

  /* --- type --- */
  --display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --ui:      "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- metrics --- */
  --gutter: 26px;
  --maxw:   1180px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap-read  { max-width: 780px; }
.wrap-tight { max-width: 920px; }

section { padding: 84px 0; }
section.tight { padding: 48px 0; }
section.flush { padding-top: 0; }

/* the inverted paper band, the main compositional contrast in the design */
.band-paper { background: var(--paper); color: var(--paper-text); }
.band-paper a { color: var(--accent-deep); }
.band-ink-2 { background: var(--ink-2); }

hr.rule { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }
.band-paper hr.rule { border-top-color: var(--paper-line); }

/* --------------------------------------------------------------------------
   TYPE
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 400; }

h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
}
h3 {
  font-family: var(--ui);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
h4 { font-family: var(--ui); font-size: 0.95rem; font-weight: 600; }

p { margin: 0 0 1.1em; }
p.lede {
  font-size: clamp(1.12rem, 2vw, 1.34rem);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 54ch;
}
.band-paper p.lede { color: var(--paper-dim); }

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }

strong { font-weight: 600; }
em { font-style: italic; }
h1 em, h2 em, .display-em { font-style: italic; color: var(--accent); }
.band-paper h1 em, .band-paper h2 em { color: var(--accent-deep); }

/* mono label, the film-credits register, used for all metadata */
.label, .eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: block;
}
.eyebrow { color: var(--accent); margin-bottom: 18px; }
.band-paper .label { color: var(--paper-dim); }
.band-paper .eyebrow { color: var(--accent-deep); }

.small { font-size: 14px; line-height: 1.6; color: var(--text-mute); }
.band-paper .small { color: var(--paper-dim); }

/* --------------------------------------------------------------------------
   MASTHEAD
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.masthead .wrap { display: flex; align-items: center; gap: 26px; height: 66px; }

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.wordmark .nm {
  font-family: var(--display);
  font-size: 1.42rem;
  letter-spacing: -0.01em;
  line-height: 1;
}
.wordmark .est {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.masthead nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.masthead nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
}
.masthead nav a:hover { color: var(--text); }

/* the two audience doors. Named for the visitor, not for the price. */
.masthead .doors { display: flex; align-items: center; gap: 10px; margin-left: 4px; }
.masthead a.door .lbl-sm { display: none; }
.masthead a.door {
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 9px 15px;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
}
.masthead a.door-backer {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}
.masthead a.door-backer:hover { background: var(--accent-press); border-color: var(--accent-press); color: #fff; }
.masthead a.door-filmmaker {
  /* a static fill, not just a border, so it doesn't vanish on a dim or
     crushed-shadow screen before anyone hovers it */
  background: var(--ink-3);
  border-color: var(--line);
  color: var(--text);
}
.masthead a.door-filmmaker:hover { border-color: var(--text-mute); background: var(--ink-2); color: var(--text); }

@media (max-width: 1040px) {
  .masthead nav a.hide-md { display: none; }
}
@media (max-width: 1040px) {
  /* the two full labels plus the wordmark no longer fit; shorten them */
  .masthead a.door .lbl-lg { display: none; }
  .masthead a.door .lbl-sm { display: inline; }
}
@media (max-width: 860px) {
  .masthead nav a.hide-sm { display: none; }
  .wordmark .est { display: none; }
}
@media (max-width: 560px) {
  .masthead .wrap { gap: 12px; }
  .masthead a.door { font-size: 12.5px; padding: 8px 10px; }
  .wordmark .nm { font-size: 1.15rem; }
}
@media (max-width: 400px) {
  .masthead .wrap { gap: 8px; }
  .masthead a.door { font-size: 11.5px; padding: 7px 8px; }
  .wordmark .nm { font-size: 1.05rem; }
}

/* --------------------------------------------------------------------------
   BUTTONS, square, flat, no gradient
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent-deep);
  color: #fff;
  border: 1px solid var(--accent-deep);
  padding: 13px 22px;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn.ghost { background: var(--ink-3); color: var(--text); border-color: var(--line); }
.btn.ghost:hover { background: var(--ink-2); border-color: var(--text-mute); color: var(--text); }
.band-paper .btn.ghost { background: var(--paper-2); color: var(--paper-text); border-color: var(--paper-line); }
.band-paper .btn.ghost:hover { background: var(--paper); }
.btn.wide { width: 100%; }
.btn.lg { padding: 16px 30px; font-size: 16px; }

.link-arrow {
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --------------------------------------------------------------------------
   HERO, asymmetric: headline block + a right-hand ledger column
   -------------------------------------------------------------------------- */

.hero { padding: 96px 0 72px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 64px;
  align-items: end;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
}
.hero h1 { margin-bottom: 26px; }

/* the ledger: a definition list, mono-labelled. Replaces the usual "three
   feature cards" with something a production company would actually print
   on the back of a one-sheet. */
.ledger { border-top: 1px solid var(--line); margin: 0; }
.ledger > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.ledger dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding-top: 5px;
}
.ledger dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-dim); }
.ledger dd strong { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   EDITORIAL INDEX, numbered rows with hairlines. Replaces card grids.
   -------------------------------------------------------------------------- */

.index-list { border-top: 1px solid var(--line); margin-top: 44px; }
.index-list .row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 26px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (max-width: 820px) {
  .index-list .row { grid-template-columns: 46px minmax(0, 1fr); gap: 18px; }
  .index-list .row .detail { grid-column: 2; }
}
.index-list .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 5px;
}
.index-list h3 { margin-bottom: 6px; }
.index-list .detail { color: var(--text-dim); font-size: 15.5px; line-height: 1.6; }
.index-list .detail p:last-child { margin-bottom: 0; }

.band-paper .index-list,
.band-paper .index-list .row { border-color: var(--paper-line); }
.band-paper .index-list .detail { color: var(--paper-dim); }
.band-paper .index-list .num { color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   SPLIT, two columns, deliberately unequal
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 32px; } }
.split.even { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
@media (max-width: 880px) { .split.even { grid-template-columns: 1fr; gap: 32px; } }

/* a typographic list, rules and hanging marks, never boxes */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li {
  position: relative;
  padding: 0 0 0 20px;
  margin-bottom: 11px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-dim);
}
.ticks li::before { content: "·"; position: absolute; left: 0; color: var(--accent); }
.ticks li strong { color: var(--text); }
.band-paper .ticks li { color: var(--paper-dim); }
.band-paper .ticks li strong { color: var(--paper-text); }
.band-paper .ticks li::before { color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   SERVICE COLUMNS, "available now" vs "in development"
   -------------------------------------------------------------------------- */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
@media (max-width: 780px) { .svc-grid { grid-template-columns: 1fr; } }

.svc-col { padding: 32px 0 8px; }
.svc-col + .svc-col { padding-left: 52px; border-left: 1px solid var(--line); }
@media (max-width: 780px) {
  .svc-col + .svc-col { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

.svc-col > h3 {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 500;
  margin-bottom: 24px;
}
.svc-col.available > h3 { color: var(--accent); }

.svc-item { padding: 17px 0; border-bottom: 1px solid var(--line); }
.svc-item:last-child { border-bottom: 0; }
.svc-item .name { display: block; font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.svc-item .what { display: block; font-size: 14.5px; line-height: 1.55; color: var(--text-dim); }
.svc-item.dim .name { color: var(--text-dim); font-weight: 500; }

.band-paper .svc-grid, .band-paper .svc-item { border-color: var(--paper-line); }
.band-paper .svc-item .name { color: var(--paper-text); }
.band-paper .svc-item .what { color: var(--paper-dim); }
.band-paper .svc-col > h3 { color: var(--paper-dim); }
.band-paper .svc-col.available > h3 { color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   FRAME, a hairline-ruled block used for short "what happens now" panels.
   Deliberately not a card: no fill, no radius, no shadow. Just rules.
   -------------------------------------------------------------------------- */

.frame {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}
.frame h3 { margin-bottom: 10px; }
.frame ol, .frame ul { margin: 10px 0 0; padding-left: 20px; color: var(--text-dim); }
.frame li { margin-bottom: 9px; font-size: 15.5px; line-height: 1.55; }
.frame li:last-child { margin-bottom: 0; }
.band-paper .frame { border-color: var(--paper-line); }
.band-paper .frame ol, .band-paper .frame ul { color: var(--paper-dim); }

/* --------------------------------------------------------------------------
   NOTE, a rule-topped block. No box, no left rail, no background fill.
   -------------------------------------------------------------------------- */

.note { border-top: 2px solid var(--accent); padding-top: 22px; max-width: 68ch; }
.note p:last-child { margin-bottom: 0; }
.note .label { margin-bottom: 12px; color: var(--accent); }
.band-paper .note { border-top-color: var(--accent-deep); }
.band-paper .note .label { color: var(--accent-deep); }

/* the honesty block gets more weight, two rules, still no box */
.note.emphasis {
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--line);
  padding: 26px 0 22px;
  max-width: 76ch;
}
.band-paper .note.emphasis { border-bottom-color: var(--paper-line); }

/* --------------------------------------------------------------------------
   PEOPLE, two real production photos. Still no card: a hairline frame and
   a mono caption underneath, same vocabulary as .frame, never a shadow.
   -------------------------------------------------------------------------- */

.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 28px 0 8px; }
@media (max-width: 640px) { .people { grid-template-columns: 1fr; } }
.people figure { margin: 0; }
.people img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
}
.people figcaption {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--text-mute);
  margin-top: 10px;
  line-height: 1.5;
}
.people figcaption strong { color: var(--text-dim); font-weight: 500; }

/* --------------------------------------------------------------------------
   FORMS, paper band, printed-form aesthetic
   -------------------------------------------------------------------------- */

.field { margin-bottom: 22px; }
.field > label, .legend {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--paper-text);
}
.field .hint, .legend .hint {
  display: block;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--paper-dim);
  margin-top: 4px;
}

input[type=text], input[type=email], input[type=tel], input[type=url],
select, textarea {
  width: 100%;
  background: #fff;
  color: var(--paper-text);
  border: 1px solid var(--paper-line);
  border-radius: 0;
  padding: 12px 13px;
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.4;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 1px var(--accent-deep);
}
textarea { min-height: 112px; resize: vertical; }
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--paper-dim) 50%),
    linear-gradient(135deg, var(--paper-dim) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

fieldset { border: 0; padding: 0; margin: 0 0 26px; }

.choices { display: grid; gap: 0; border-top: 1px solid var(--paper-line); }
.choices label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 2px;
  border-bottom: 1px solid var(--paper-line);
  cursor: pointer;
  font-size: 15.5px;
  color: var(--paper-text);
  transition: background 0.12s ease;
}
.choices label:hover { background: var(--paper-2); }
.choices input { margin: 4px 0 0; accent-color: var(--accent-deep); flex: 0 0 auto; }
.choices.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
@media (max-width: 640px) { .choices.two { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   CHOICE GROUPS, a long multi-select, broken into labelled clusters so it
   scans as four short questions rather than one list of twenty.
   -------------------------------------------------------------------------- */

.cgroups { display: grid; gap: 30px; }
.cgroup > .cgroup-h {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 4px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--paper-line);
}
.cgroup .choices { border-top: 0; }
.cgroup .choices.two { gap: 0 32px; }

/* --------------------------------------------------------------------------
   THE OPEN FIELD, the deliberate exception.
   This is the most valuable input on the page: every option above is
   something we already thought of, so the only new information lives here.
   It therefore gets the accent rule, the accent label, and a text input,
   it must NOT read as "option number 19".
   -------------------------------------------------------------------------- */

.openfield {
  border-top: 2px solid var(--accent-deep);
  border-bottom: 1px solid var(--paper-line);
  padding: 22px 0 24px;
  margin-top: 34px;
}
.openfield > label {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--paper-text);
  margin-bottom: 6px;
}
.openfield .why {
  display: block;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper-dim);
  margin-bottom: 14px;
  max-width: 56ch;
}
.openfield .why strong { color: var(--accent-deep); font-weight: 600; }
.openfield input[type=text] { border-color: var(--paper-line); }
.openfield input[type=text]:focus { border-color: var(--accent-deep); box-shadow: 0 0 0 1px var(--accent-deep); }

.progress { display: flex; gap: 5px; margin-bottom: 30px; max-width: 320px; }
.progress span { flex: 1; height: 3px; background: var(--paper-line); }
.progress span.on { background: var(--accent-deep); }

.formnote { font-size: 13.5px; color: var(--paper-dim); margin-top: 16px; line-height: 1.55; }

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper-dim);
}
.consent input { margin-top: 4px; accent-color: var(--accent-deep); flex: 0 0 auto; }

.formstatus:empty { display: none; }
.formstatus {
  border-top: 1px solid var(--paper-line);
  padding: 14px 0 0;
  font-size: 14.5px;
  color: var(--paper-dim);
  margin-bottom: 18px;
}
.formstatus.warn { border-top-color: var(--accent-deep); color: var(--accent-deep); }
.formstatus.ok { border-top-color: #4a7c59; color: #3a6247; }

.formerr {
  border-top: 1px solid var(--accent-deep);
  padding: 12px 0 0;
  font-size: 14.5px;
  color: var(--accent-deep);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.foot { border-top: 1px solid var(--line); background: var(--ink-2); padding: 56px 0 40px; }
.foot-cols {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap: 44px;
}
@media (max-width: 720px) { .foot-cols { grid-template-columns: 1fr; gap: 30px; } }

.foot h4, .foot h2.fh {
  line-height: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 500;
  margin: 0 0 14px;
}
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 9px; }
.foot a { color: var(--text-dim); text-decoration: none; font-size: 14.5px; }
.foot a:hover { color: var(--accent-hover); }

.colophon {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--text-mute);
}

/* --------------------------------------------------------------------------
   UTILITIES
   -------------------------------------------------------------------------- */

.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.mt40 { margin-top: 40px; } .mt56 { margin-top: 56px; }
.mb24 { margin-bottom: 24px; } .mb40 { margin-bottom: 40px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}
/* ---- added for Cloudflare deployment ---- */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}