/* Tarnfield: an editorial page in black (or white), with Apple-style glass on the few things that float:
   the top bar, the buttons and the frames around real screens. One page, no script. See DESIGN.md. */
@font-face { font-family: 'Schibsted Grotesk'; src: url('fonts/schibsted-grotesk-latin.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@property --num { syntax: '<integer>'; inherits: false; initial-value: 0; }

:root {
  --bg: #000;
  --ink: #f5f5f7;
  --soft: #a1a1a6;          /* 7.9:1 on the page */
  --line: rgb(255 255 255 / 0.12);
  --accent: #f2c230;        /* gorse: the main button */
  --accent-line: #f2c230;   /* gorse: links, focus */
  --on-accent: #000;
  --mark-water: #f2c230;    /* the logo's reflection */
  /* Glass: a thin tinted sheet, a bright top edge where light catches it, and depth beneath. */
  --glass-fill: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.05)); /* taste-skill-ignore: Apple glass and gloss, Cam's request (2 Nov 2026) */
  --glass-edge: rgb(255 255 255 / 0.2);
  --glass-light: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -1px 0 rgb(255 255 255 / 0.08), inset 0 0 24px rgb(255 255 255 / 0.04);
  --glass-drop: 0 12px 40px -12px rgb(0 0 0 / 0.7); /* taste-skill-ignore: Apple glass and gloss, Cam's request (2 Nov 2026) */
  --sheen: linear-gradient(115deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0) 42%); /* taste-skill-ignore: Apple glass and gloss, Cam's request (2 Nov 2026) */

  --display: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --pad: max(20px, 5vw);
  --wide: 1240px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #fff;
    --ink: #1d1d1f;
    --soft: #6e6e73;        /* 5.1:1 on the page */
    --line: rgb(0 0 0 / 0.12);
    --accent-line: #7d5c00;
    --on-accent: #1d1d1f;
    --mark-water: #a07800;
    --glass-fill: linear-gradient(180deg, rgb(255 255 255 / 0.82), rgb(255 255 255 / 0.56)); /* taste-skill-ignore: Apple glass and gloss, Cam's request (2 Nov 2026) */
    --glass-edge: rgb(0 0 0 / 0.08);
    --glass-light: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(0 0 0 / 0.04);
    --glass-drop: 0 12px 40px -14px rgb(0 0 0 / 0.22); /* taste-skill-ignore: Apple glass and gloss, Cam's request (2 Nov 2026) */
    --sheen: linear-gradient(115deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 42%); /* taste-skill-ignore: Apple glass and gloss, Cam's request (2 Nov 2026) */
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark light; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.5 var(--text); letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); text-wrap: balance; }
p, ul, ol { margin: 0; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--accent); color: var(--on-accent); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; }
.ic { flex: 0 0 auto; }
.wrap { width: min(var(--wide), 100% - 2 * var(--pad)); margin-inline: auto; }
.soft { color: var(--soft); }
.skip { position: fixed; left: var(--pad); top: 12px; z-index: 40; padding: 10px 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); text-decoration: none; transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

/* Glass: used only on what floats above the page. */
.glass { position: relative; background: var(--glass-fill); border: 1px solid var(--glass-edge); box-shadow: var(--glass-light), var(--glass-drop); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); } /* taste-skill-ignore: Apple glass and gloss, Cam's request (2 Nov 2026) */
@media (prefers-reduced-transparency: reduce) { .glass { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* taste-skill-ignore: Apple glass and gloss, Cam's request (2 Nov 2026) */

/* Buttons: the main one is a glossy gorse capsule; the second is glass. */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 600; text-decoration: none; touch-action: manipulation; }
.pill:not(.glass) { background: linear-gradient(180deg, #ffd964, #f2c230 55%, #e3b11c); color: #000; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65), inset 0 -1px 0 rgb(0 0 0 / 0.14), 0 10px 28px -10px rgb(242 194 48 / 0.6); } /* taste-skill-ignore: Apple glass and gloss, Cam's request (2 Nov 2026) */
.pill.glass { color: var(--ink); }
.pill-sm { min-height: 40px; padding: 0 18px; font-size: 15px; }

/* Top bar: a floating glass capsule. The page slides under it, and a highlight crosses it as you scroll. */
.nav { position: fixed; inset: 12px 0 auto; z-index: 30; padding-inline: var(--pad); pointer-events: none; }
.nav-in { display: flex; align-items: center; gap: 24px; width: min(1000px, 100%); min-height: 56px; margin-inline: auto; padding: 0 8px 0 20px; border-radius: 999px; overflow: hidden; pointer-events: auto; }
.nav-in::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--sheen); pointer-events: none; }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 17px/1 var(--display); letter-spacing: -0.02em; text-decoration: none; }
.nav-mark { width: 18px; height: 24px; overflow: visible; }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--soft); font-size: 15px; text-decoration: none; }
@media (max-width: 760px) { .nav-links { display: none; } .nav .pill { margin-left: auto; } }

.mark-t { fill: var(--ink); }
.mark-water { fill: var(--mark-water); }

/* Hero: the name stands on still water, its reflection rippling beneath, like the logo. Left-aligned, big. */
.hero { padding: clamp(120px, 18vh, 200px) 0 56px; }
.word { padding-inline: max(var(--pad), (100% - var(--wide)) / 2); overflow-x: clip; }
.word { font-size: clamp(4.5rem, 1rem + 15.5vw, 17rem); }
.name, .name-reflect { font: 800 1em/0.8 var(--display); letter-spacing: -0.062em; margin-left: -0.045em; }
/* The still reflection, where the water (src/water.js) cannot run: the name mirrored below its baseline, cropped to
   its lower part, faded with depth and gently bent. No lines across it, to match the water. */
.reflect { height: 0.36em; margin-top: var(--reflect-gap, -0.02em); overflow: hidden; clip-path: inset(0); user-select: none; pointer-events: none;
  mask: linear-gradient(to bottom, rgb(0 0 0 / 0.5), transparent 90%) no-repeat; /* taste-skill-ignore: the water reflection's fade, Cam's request (2 Nov 2026) */
  -webkit-mask: linear-gradient(to bottom, rgb(0 0 0 / 0.5), transparent 90%) no-repeat; } /* taste-skill-ignore: the water reflection's fade, Cam's request (2 Nov 2026) */
.name-reflect { transform: scaleY(-1); }
/* The water (src/water.js) takes the still reflection's place where it can run, in the same spot. */
.word { position: relative; }
.water { position: absolute; left: 0; width: 100%; pointer-events: none; opacity: 0; }
.has-water .water { opacity: 1; }
.has-water .reflect { visibility: hidden; }
.hero-row { margin-top: 40px; }
.hero-sub { max-width: 26ch; font: 600 clamp(1.375rem, 1rem + 1.2vw, 2rem)/1.15 var(--display); letter-spacing: -0.025em; }
.flag { width: 21px; height: 14px; border-radius: 2px; outline: 1px solid var(--line); }
.dot { width: 8px; height: 8px; margin-inline: 6px 7px; border-radius: 50%; background: var(--accent-line); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }

/* Showcase: real screens on a glossy floor, sliding past on their own (see Motion). */
.showcase { padding-bottom: clamp(72px, 12vh, 140px); perspective: 1600px; }
.strip { overflow-x: auto; padding: 8px var(--pad) 90px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; }
.strip-track { display: flex; gap: 18px; width: max-content; }
.strip img { height: clamp(170px, 21vw, 310px); width: auto; border-radius: 14px; border: 1px solid var(--line); scroll-snap-align: start; -webkit-box-reflect: below 6px linear-gradient(transparent 62%, rgb(255 255 255 / 0.2)); } /* taste-skill-ignore: Apple glass and gloss, Cam's request (2 Nov 2026) */
.strip .copy { display: none; }
.strip:focus-visible { outline-offset: -3px; }

/* Statement: the bio, set large and left. Each word lights up as it passes (see Motion). */
.statement { padding-block: 0 clamp(96px, 14vh, 160px); }
.reveal { max-width: 21em; font: 600 clamp(1.625rem, 1rem + 1.7vw, 2.75rem)/1.16 var(--display); letter-spacing: -0.03em; }
.reveal a { text-decoration-thickness: 2px; text-underline-offset: 7px; }

/* Section heads: title left, a short line beside it on wide screens. */
.sec-head { display: grid; gap: 12px 48px; margin-bottom: clamp(32px, 5vh, 56px); }
@media (min-width: 960px) { .sec-head { grid-template-columns: 7fr 4fr; align-items: end; } }
.sec-h { font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4.5rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.045em; }
.lede { max-width: 30ch; color: var(--soft); font-size: 1.25rem; line-height: 1.4; }
.sec { padding-block: clamp(88px, 13vh, 144px) 0; }

/* Work: one project per band, divided by a fine rule. Text one side, its screens in glass frames the other. */
.proj { display: grid; gap: 36px 72px; padding-block: clamp(48px, 8vh, 96px); border-top: 1px solid var(--line); } /* taste-skill-ignore: fine rules between items, the editorial look Cam chose over boxes (2 Nov 2026) */
@media (min-width: 1000px) {
  .proj { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .proj:nth-of-type(even) .proj-text { order: 2; }
}
.kind { margin-top: 6px; color: var(--soft); font-size: 15px; }
.proj-h { font-size: clamp(2rem, 1.4rem + 1.7vw, 2.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.045em; }
.proj-what { margin-top: 16px; font-size: 1.25rem; line-height: 1.42; }
.k { margin-top: 24px; font: 600 15px/1.3 var(--text); color: var(--soft); letter-spacing: 0; }
.k + p { margin-top: 4px; }
.row { margin-top: 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* taste-skill-ignore: fine rules between items, the editorial look Cam chose over boxes (2 Nov 2026) */
.row summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; font-weight: 600; cursor: pointer; list-style: none; }
.row summary::-webkit-details-marker { display: none; }
/* A closed case study keeps its text out of the layout altogether, not just out of sight. */
.row:not([open]) > :not(summary) { display: none; }
.row-body { padding-bottom: 20px; }
.row-body .k:first-child { margin-top: 4px; }
.row[open] summary .ic { transform: rotate(45deg); }
.links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; }
.links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }
.credit { margin-top: 16px; color: var(--soft); font-size: 15px; line-height: 1.45; }
.proj-media { display: grid; }
.frame { position: relative; padding: 8px; border-radius: 22px; background: var(--glass-fill); border: 1px solid var(--glass-edge); box-shadow: var(--glass-light), var(--glass-drop); } /* taste-skill-ignore: Apple glass and gloss, Cam's request (2 Nov 2026) */
.frame img { width: 100%; border-radius: 14px; }
.frame::after { content: ''; position: absolute; inset: 8px; border-radius: 14px; background: var(--sheen); pointer-events: none; }
.frame.small { width: 54%; margin: -18% 0 0 auto; }
.proj:nth-of-type(even) .frame.small { margin: -18% auto 0 0; }

/* Test results, set like a spec sheet. */
.spec { list-style: none; padding: 0; border-top: 1px solid var(--line); } /* taste-skill-ignore: fine rules between items, the editorial look Cam chose over boxes (2 Nov 2026) */
.spec li { display: grid; grid-template-columns: minmax(7ch, 3fr) 9fr; align-items: baseline; gap: 8px 32px; padding-block: 22px; border-bottom: 1px solid var(--line); } /* taste-skill-ignore: fine rules between items, the editorial look Cam chose over boxes (2 Nov 2026) */
.spec-n { font: 700 clamp(2.5rem, 1.4rem + 3.2vw, 4.5rem)/1 var(--display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.count { --num: var(--to); counter-reset: n var(--num); }
.count::after { content: counter(n); }
.spec-t { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.spec-t span { display: block; margin-top: 2px; color: var(--soft); font-size: 15px; font-weight: 400; letter-spacing: 0; }

/* What we can build: a list, not a grid of boxes. */
.svc { list-style: none; padding: 0; border-top: 1px solid var(--line); } /* taste-skill-ignore: fine rules between items, the editorial look Cam chose over boxes (2 Nov 2026) */
.svc-row { display: grid; gap: 10px 48px; padding-block: 28px; border-bottom: 1px solid var(--line); } /* taste-skill-ignore: fine rules between items, the editorial look Cam chose over boxes (2 Nov 2026) */
@media (min-width: 900px) { .svc-row { grid-template-columns: 4fr 5fr 3fr; align-items: baseline; } }
.svc-row h3 { font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
.svc-row ul { list-style: none; padding: 0; display: grid; gap: 4px; color: var(--soft); }
.eg { color: var(--accent-line); font-size: 15px; line-height: 1.4; }

/* How a project runs: three steps along a line that fills as you read. */
.steps-wrap { position: relative; }
.steps-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); overflow: hidden; } /* taste-skill-ignore: the process line that fills as you read, a moving element not a divider (2 Nov 2026) */
.steps-fill { position: absolute; inset: 0; background: var(--accent-line); transform-origin: left; }
.steps { list-style: none; padding: 0; display: grid; gap: 32px 56px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); counter-reset: step; }
.steps li { padding-top: 26px; counter-increment: step; }
.steps li::before { content: counter(step); display: block; margin-bottom: 18px; color: var(--soft); font: 600 15px/1 var(--text); }
.say { font: 700 clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem)/1.15 var(--display); letter-spacing: -0.03em; }
.steps .soft { margin-top: 12px; }

/* The team: two columns, no boxes. */
.people { list-style: none; padding: 0; display: grid; gap: 40px 72px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); border-top: 1px solid var(--line); padding-top: 32px; } /* taste-skill-ignore: fine rules between items, the editorial look Cam chose over boxes (2 Nov 2026) */
.pname { font: 700 clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem)/1.1 var(--display); letter-spacing: -0.04em; }
.prole { margin-top: 8px; color: var(--soft); }
.plines { list-style: none; padding: 0; margin-top: 4px; color: var(--soft); }
.plinks { display: grid; gap: 0; margin-top: 18px; }
.plinks a { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; } /* taste-skill-ignore: fine rules between items, the editorial look Cam chose over boxes (2 Nov 2026) */
.plinks .handle { margin-left: auto; color: var(--soft); font-weight: 400; }

/* Closing: the second way in, for anyone who read to the end. */
.closing { padding-block: clamp(96px, 13vh, 144px) clamp(72px, 10vh, 112px); }
.closing-h { max-width: 13ch; font-size: clamp(3rem, 1.4rem + 5.4vw, 7rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.055em; }
.closing > p { max-width: 36ch; margin-top: 24px; color: var(--soft); font-size: 1.25rem; line-height: 1.4; }
.write { color: var(--soft); }
.addr { text-decoration-color: var(--line); }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 32px 0 40px; } /* taste-skill-ignore: fine rules between items, the editorial look Cam chose over boxes (2 Nov 2026) */
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; color: var(--soft); font-size: 15px; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font: 700 17px/1 var(--display); }
.foot-brand .nav-mark { width: 14px; height: 19px; }
.facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.fine { margin-left: auto; }
@media (max-width: 760px) { .fine { margin-left: 0; } }

@media (hover: hover) and (pointer: fine) {
  .pill { transition: filter 150ms ease, transform 160ms var(--ease); }
  .pill:hover { filter: brightness(1.06); }
  .nav-links a:hover { color: var(--ink); }
  .plinks a:hover .handle { color: var(--ink); }
  .addr:hover { text-decoration-color: var(--accent-line); }
  .row summary:hover .ic { color: var(--accent-line); }
}

/* Motion. A few signature moves, nothing on every section. Nothing moves under reduced motion. Scroll-linked
   motion only where the browser supports it; elsewhere the page shows its finished state. Text is moved or
   recoloured, never faded, so it always meets contrast. */
@media (prefers-reduced-motion: no-preference) {
  .pill:active { transform: scale(0.97); }
  .row summary .ic { transition: transform 200ms var(--ease); }
  .rise { animation: rise 800ms var(--ease) both; }
  .r1 { animation-delay: 60ms; } .r2 { animation-delay: 180ms; } .r3 { animation-delay: 260ms; }
  /* The still reflection waits a moment so the water, where it can run, arrives first and rises with the name
     (water.js keeps the two in step). If the water is late, it fades in as the still reflection fades out. */
  .reflect { filter: url(#ripple); animation: rise 1200ms var(--ease) 1500ms both; }
  .has-water .water { animation: water-in 900ms var(--ease) both; }
  .has-water .reflect { visibility: visible; animation: water-out 900ms var(--ease) both; }
  .has-water.water-early .reflect { visibility: hidden; animation: none; }

  /* The strip: one slow, even slide with no seam. Hovering, tapping or tabbing to it pauses it. */
  .strip { overflow: hidden; padding-inline: 0; scroll-snap-type: none; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } /* taste-skill-ignore: Apple glass and gloss, Cam's request (2 Nov 2026) */
  .strip .copy { display: block; }
  .strip-track { margin-left: var(--pad); animation: slide 160s linear infinite; will-change: transform; }
  .strip:hover .strip-track, .strip:focus .strip-track { animation-play-state: paused; }

  @supports (animation-timeline: view()) {
    /* Light crosses the glass bar as the page moves under it. */
    .nav-in::after { animation: sheen linear both; animation-timeline: scroll(root); }
    /* The strip stands up off the page as it arrives. */
    .strip { animation: stand linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; transform-origin: 50% 100%; }
    /* The bio lights up word by word. */
    .reveal .w { animation: light linear both; animation-timeline: view(); animation-range: cover 20% cover 40%; }
    /* Each project's screens tilt up into place. */
    .proj-media { animation: tilt-up linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; transform-origin: 50% 100%; }
    /* Figures count up, finishing once the row is fully on screen. */
    .count { animation: count linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    /* The process line fills as you read the steps. */
    .steps-fill { animation: fill linear both; animation-timeline: view(); animation-range: cover 15% cover 55%; }
  }
}
@media (prefers-reduced-motion: reduce) { .reflect { filter: none; } }
@keyframes water-in { from { opacity: 0; } }
@keyframes water-out { to { opacity: 0; visibility: hidden; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes slide { to { transform: translateX(calc(-50% - 9px)); } }
@keyframes sheen { from { translate: -60% 0; } to { translate: 60% 0; } }
@keyframes stand { from { transform: rotateX(22deg) scale(0.92); } to { transform: none; } }
@keyframes light { from { color: var(--soft); } to { color: var(--ink); } }
@keyframes tilt-up { from { transform: perspective(1400px) rotateX(14deg) translateY(64px) scale(0.93); } to { transform: none; } }
@keyframes count { from { --num: 0; } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Rhythm: the services list follows the test results closely; they read as one argument. */
#build { padding-top: clamp(64px, 9vh, 104px); }

/* Enquiry page (start.html): the heading and promise on the left, the form on the right; one column on phones.
   Fields are plain rounded boxes with a fine edge, the same radius as the screenshot frames. */
.start { display: grid; gap: 48px 72px; padding-block: clamp(120px, 16vh, 180px) clamp(72px, 10vh, 112px); }
@media (min-width: 900px) { .start { grid-template-columns: 5fr 7fr; align-items: start; } .start-intro { position: sticky; top: 120px; } }
.start-h { font: 800 clamp(3rem, 1.4rem + 5.4vw, 6rem)/0.92 var(--display); letter-spacing: -0.055em; }
.start-lede { max-width: 32ch; margin-top: 24px; color: var(--soft); font-size: 1.25rem; line-height: 1.4; }
.enquiry { display: grid; gap: 28px; }
.pair { display: grid; gap: 28px; }
@media (min-width: 560px) { .pair { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; }
.hint { margin-top: -4px; color: var(--soft); font-size: 15px; }
.field input, .field textarea { width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid var(--field); border-radius: 14px; background: transparent; color: var(--ink); font: inherit; font-size: 17px; } /* taste-skill-ignore: form fields need a visible edge */
.field textarea { min-height: 168px; line-height: 1.5; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.privacy { color: var(--soft); font-size: 15px; }
.enquiry .cta { margin-top: 0; }
button.pill { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.form-status { padding: 14px 16px; border: 1px solid var(--glass-edge); border-radius: 14px; } /* taste-skill-ignore: the form's answer, boxed so it is noticed */
.form-status:empty { display: none; }
/* Field edges at 3:1 against the page in both themes, so every box can be found (WCAG non-text contrast). */
:root { --field: rgb(255 255 255 / 0.38); }
@media (prefers-color-scheme: light) { :root { --field: rgb(0 0 0 / 0.45); } }

/* Privacy policy: one readable column, sections divided by space rather than rules. */
.legal { max-width: 72ch; padding-block: clamp(120px, 16vh, 180px) clamp(72px, 10vh, 112px); margin-inline: max(var(--pad), (100% - var(--wide)) / 2); }
.legal-updated { margin-top: 20px; color: var(--soft); }
.legal-part { margin-top: 48px; }
.legal-part h2 { font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--display); letter-spacing: -0.02em; }
.legal-part p, .legal-part ul { margin-top: 14px; line-height: 1.6; }
.legal-part ul { padding-left: 1.25em; list-style: disc; }
.legal-part li + li { margin-top: 6px; }
.legal a, .fine a { text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.count[data-to="282"] { --to: 282; }
.count[data-to="200"] { --to: 200; }
.count[data-to="136"] { --to: 136; }
.count[data-to="106"] { --to: 106; }
.count[data-to="100"] { --to: 100; }