:root {
    /* Warm paper set, sampled from origami-robotics.com's own custom
       properties (--cream #f3efe8, --paper #f7f4ee, --dark #1a1815).
       --mute is 62% and not 58%: on this ground 58% measures 4.18:1, under
       the 4.5:1 body-text floor. 62% measures 4.71:1. */
    --page: #F3EFE8;
    --bg: var(--page);
    --surface: #F7F4EE;
    --ink: #1A1815;
    --ink-soft: rgba(26, 24, 21, .74);
    --mute: rgba(26, 24, 21, .62);
    --line: rgba(26, 24, 21, .14);
    --rule: rgba(26, 24, 21, .32);
    --accent: #FF5A1F;
    /* The orange is a fill, never a text colour here: #FF5A1F on paper is
       2.72:1. Ink on the orange is 5.68:1, so the fill flips its own text. */
    --on-accent: #1A1815;
    --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    /* Their role titles and closing heading are set in a serif. A system
       stack gets the same editorial weight with no webfont request. */
    --serif: ui-serif, "Iowan Old Style", "Source Serif 4", Palatino, Georgia, serif;
    --pad: clamp(16px, 3vw, 32px);
    --hero-gap: clamp(18px, 3.5vh, 40px);
    --lede-space: clamp(96px, 19vh, 180px);
    --max: 1200px;
    --radius: 20px;
    --nav: 64px;
    /* how far the dark hero dissolves into the paper at each end */
    --hero-fade: clamp(200px, 38vh, 400px);

    /* Engraved headings. The letterform is a gradient clipped to the glyphs,
       with a light lip below and a dark lip above, so the type reads as cut
       into the paper rather than printed on it. Lit from above, which is why
       the highlight sits at +1px and the shadow at -1px. */
    --engrave-fill: linear-gradient(165deg, rgba(26, 24, 21, .58) 0%, rgba(26, 24, 21, .74) 52%, rgba(26, 24, 21, .62) 100%);
    /* The lip has to sit just above the paper, not near white. At .95 of
       rgb(255,252,246) it glowed under every stroke and the type read as
       outlined rather than cut. */
    --engrave-lip: 0 1px 0 rgba(255, 253, 249, .62), 0 -1px 0 rgba(40, 30, 15, .3);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* The film is baked on rgb(11,16,21) and cannot be made transparent, so the
   hero keeps the dark set and reads as one deliberate cinematic band. Paper
   behind it would put a hard black rectangle on cream. Origami gets a light
   ground for free because their hero is a live <canvas>, not a movie. */
.hero {
    --bg: #020506;
    --surface: #0C1116;
    --ink: #EAE8E3;
    --ink-soft: rgba(234, 232, 227, .74);
    --mute: rgba(234, 232, 227, .58);
    --line: rgba(234, 232, 227, .14);
    --rule: rgba(234, 232, 227, .34);
    --on-accent: #EAE8E3;
    --engrave-fill:
        linear-gradient(100deg, rgba(255, 214, 182, 0) 8%, rgba(255, 214, 182, .30) 25%, rgba(255, 214, 182, 0) 46%),
        linear-gradient(165deg, rgba(255, 150, 98, .97) 0%, rgba(252, 104, 44, .95) 54%, rgba(255, 132, 74, .96) 100%);
    --engrave-lip: 0 -1px 1.5px rgba(10, 7, 5, .68), 0 .5px 1.5px rgba(255, 196, 158, .30);
    position: relative;
    background: var(--bg);
    color: var(--ink);
}
/* Starts 1px inside the hero: the hero height is a fractional svh value, so
   abutting exactly leaves an anti-aliased hairline at the seam. Stops are
   interpolated in linear light on a smoothstep, because a plain two-stop
   sRGB ramp from near-black to paper goes muddy through the middle. */
.hero::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: calc(var(--hero-fade) + 1px); background: linear-gradient(to bottom, var(--bg) 0%, #070A0B 10%, #121415 20%, #212323 30%, #353636 40%, #4C4D4C 50%, #676765 60%, #858581 70%, #A7A5A1 80%, #CBC9C3 90%, var(--page) 100%); pointer-events: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
h1, h2 { font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
section[id], h1[id], h2[id] { scroll-margin-top: calc(var(--nav) + 16px); }
.dot { color: var(--accent); }

/* Falls back to plain ink where background-clip:text is unsupported, because
   transparent text with no clip is invisible text. */
.engraved { color: var(--ink); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .engraved {
        color: transparent;
        background-image: var(--engrave-fill);
        -webkit-background-clip: text;
                background-clip: text;
        text-shadow: var(--engrave-lip);
    }
}

/* The cut is what makes this read as engraved, and it is also what makes the
   letter faces dark: the lip covers the glyph, so the face measures 1.91:1
   against the ground and the type is legible mainly by its lit edge. Anyone
   who has asked their OS for more contrast should get the fill instead. */
@media (prefers-contrast: more) {
    .engraved, .lede h1 span { text-shadow: none; }
}

.skip { position: absolute; left: 16px; top: -60px; z-index: 20; padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: 6px; }
.skip:focus { top: 12px; }

/* nav: aligned to the content column */
.topbar { position: sticky; top: 0; z-index: 10; height: var(--nav); display: flex; align-items: center; justify-content: space-between; padding-inline: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); background: var(--bg); }
/* Only the home page opens on the dark band, and it is the only page with a
   .hero, so match on that rather than threading a template flag through the
   shared partial. The nav then sits inside the dark instead of ruling a line
   across the top of it. Without :has() the nav simply stays paper. */
body:has(.hero) .topbar { transition: background .25s ease, color .25s ease; --bg: #020506; --ink: #EAE8E3; --ink-soft: rgba(234, 232, 227, .74); --on-accent: #EAE8E3; background: var(--bg); color: var(--ink); }
/* Restates background and color as well as the tokens. Not strictly needed,
   the token change alone repaints, but it keeps the flip readable next to
   the rule it overrides. */
.past-hero body:has(.hero) .topbar { --bg: var(--page); --ink: #1A1815; --ink-soft: rgba(26, 24, 21, .74); --on-accent: #1A1815; background: var(--page); color: #1A1815; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.brand svg { width: 9px; height: 29px; display: block; }
.brand--small { font-size: 16px; }
.topbar__end { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.navlink { font: 500 13px/1 var(--font); color: var(--ink-soft); transition: color .2s ease; }
.navlink:hover, .navlink[aria-current="page"] { color: var(--ink); }

.pill { display: inline-flex; align-items: center; justify-content: center; height: 37px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: 500 13px/1 var(--font); cursor: pointer; transition: background .2s, transform .2s; }
.pill:hover { background: var(--accent); color: var(--on-accent); }
.pill:active { transform: scale(.98); }
.pill--wide { height: 45px; padding: 0 28px; font-size: 14px; }
.cta--quiet { min-height: 38px; padding: 0 18px; font-size: 10px; }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 34px; border: 1px solid var(--rule); border-radius: 0; background: none; color: var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, background .2s; }
.cta:hover { border-color: var(--ink); background: var(--surface); }
.cta:active { transform: scale(.99); }

/* Hero. Landscape pins the film full-bleed for the length of .hero and the
   scroll position drives the frame. Portrait does not pin at all: a 16:9 film
   is only ~265px tall on a phone, so pinning it inside a full viewport left it
   floating in dead space. There it sits in normal flow with the headline right
   under it, which fills the screen.
   Both get a masked top and bottom edge so the film dissolves into the page
   rather than cutting against it, whatever frame is on screen. */
.hero { position: relative; }
.hero__sticky { position: relative; display: grid; place-items: center; align-content: center; gap: var(--hero-gap); }
.hero__film { display: block; width: 100%; height: auto; margin-inline: auto; background: var(--bg);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 76%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 76%, transparent 100%); }
.scroll-cue { display: none; }

.has-scroll-film .hero { height: 560svh; }
.has-scroll-film .hero__sticky { position: sticky; top: var(--nav); height: calc(100svh - var(--nav)); overflow: clip; }
.has-scroll-film .hero__film { width: min(100%, calc((100svh - var(--nav) - var(--lede-space)) * 16 / 9)); }
/* the headline now sits in the frame, so the cue moves out of its way */
.has-scroll-film .scroll-cue { display: block; position: absolute; right: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); bottom: 16px; margin: 0; font-size: 12px; color: var(--mute); opacity: var(--cue-opacity, 1); pointer-events: none; }
.scroll-cue span { display: inline-block; margin-left: 9px; }

.lede { width: 100%; padding-inline: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); }
.lede h1 { max-width: 22ch; font-size: clamp(31px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.045em; }
.lede h1 span { color: #79828E; }
/* The second line keeps its own colour, so it opts out of the parent's clip
   and stays flat while line one is carved. Give it a dimmer fill of its own. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .lede h1 span {
        color: transparent;
        background-image:
            linear-gradient(100deg, rgba(255, 214, 182, 0) 8%, rgba(255, 214, 182, .26) 25%, rgba(255, 214, 182, 0) 46%),
            linear-gradient(165deg, rgba(240, 134, 86, .94) 0%, rgba(236, 94, 38, .92) 54%, rgba(240, 118, 64, .93) 100%);
        -webkit-background-clip: text;
                background-clip: text;
    }
}

/* what we do */
.about { max-width: var(--max); margin-inline: auto; padding: calc(28px + var(--hero-fade)) var(--pad) 0; }
.kicker { display: flex; align-items: center; gap: 11px; font: 500 14px/1.4 var(--font); letter-spacing: -.015em; }
.kicker__dash { width: 20px; height: 2px; background: var(--accent); }
.rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 36px; }
.rows__row { padding-top: 22px; border-top: 1px solid var(--line); }
.rows dt { display: flex; justify-content: space-between; align-items: baseline; font-size: clamp(21px, 2.4vw, 29px); letter-spacing: -.035em; }
.step-number { order: 1; font: 400 13px/1.4 var(--mono); color: var(--mute); letter-spacing: 0; }
.rows dd { margin-top: 20px; max-width: 29ch; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

.careers { max-width: var(--max); margin-inline: auto; padding: clamp(80px, 12vh, 130px) var(--pad) 0; }
.careers__lead { margin-top: 18px; max-width: 56ch; font: 400 13px/1.8 var(--mono); color: var(--ink-soft); }
.rolecard { margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: clamp(18px, 3vw, 48px); padding: 28px 14px; margin-inline: -14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .18s ease; }
.rolecard:hover { background: var(--surface); }
.rolecard__id { display: block; min-width: 0; }
.rolecard__title { display: block; font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); font-weight: 400; line-height: 1.1; }
.rolecard__meta { display: block; margin-top: 10px; font: 400 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.rolecard__pitch { font: 400 13px/1.7 var(--mono); color: var(--ink-soft); }
.rolecard__go { font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.rolecard:hover .rolecard__go { color: var(--ink); }
.careers__alt { margin-top: 26px; font: 400 12px/1.6 var(--mono); color: var(--mute); }

/* careers page */
.page { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.masthead { padding: clamp(56px, 10vh, 108px) 0 clamp(48px, 8vh, 86px); }
.eyebrow { font: 500 10px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.masthead h1 { margin-top: 20px; max-width: 18ch; font-family: var(--serif); font-size: clamp(38px, 6vw, 68px); font-weight: 400; line-height: 1.04; letter-spacing: -.015em; }
.masthead__lead { margin-top: 26px; max-width: 64ch; font: 400 13px/1.8 var(--mono); color: var(--ink-soft); }
.group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 18px; }
.group__head h2 { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); font-weight: 400; letter-spacing: -.01em; }
.group__meta { font: 400 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.apply { padding: clamp(80px, 13vh, 150px) 0 clamp(64px, 10vh, 110px); }
.apply h2 { margin-top: 18px; font-family: var(--serif); font-size: clamp(30px, 4.4vw, 48px); font-weight: 400; line-height: 1.06; letter-spacing: -.01em; }
.apply__lead { margin-top: 16px; max-width: 52ch; font: 400 13px/1.8 var(--mono); color: var(--ink-soft); }
.form--apply { max-width: 620px; margin-top: 36px; }
.form--apply .cta { justify-self: start; margin-top: 12px; }
.field select { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 0; background: var(--surface); font: 16px/1.5 var(--font); color: var(--ink); letter-spacing: 0; text-transform: none; }
.apply__alt { margin-top: 24px; font: 400 12px/1.6 var(--mono); color: var(--mute); }

/* One disclosure per role. <details> gives the open/close behaviour, the
   keyboard handling and the accessible name for free, so this needs no JS. */
.role { border-top: 1px solid var(--line); }
.careers .role:last-of-type { border-bottom: 1px solid var(--line); }
.role__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 28px; align-items: start; gap: clamp(18px, 3vw, 48px); padding: 30px 12px; margin-inline: -12px; cursor: pointer; list-style: none; transition: background .18s ease; }
.role__head::-webkit-details-marker { display: none; }
.role__head:hover, .role[open] .role__head { background: var(--surface); }
.role__head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.role__id { min-width: 0; }
.role__cat { font: 500 10px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.role__title { margin-top: 12px; font-family: var(--serif); font-size: clamp(25px, 3vw, 36px); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; }
.role__tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.role__tags li { padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px; font: 400 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.role__pitch { font: 400 13px/1.7 var(--mono); color: var(--ink-soft); }
.role__toggle { justify-self: end; align-self: center; width: 22px; height: 22px; display: grid; place-items: center; font: 400 19px/1 var(--mono); color: var(--mute); }
.role__toggle::before { content: "+"; }
.role[open] .role__toggle::before { content: "\00d7"; }
.role__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(28px, 5vw, 72px); padding: 8px 0 52px; }
.microlabel { font: 500 10px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.role__main .microlabel { margin-top: 34px; }
.role__main .microlabel:first-child { margin-top: 0; }
.role__prose { margin-top: 16px; max-width: 74ch; font: 400 13px/1.8 var(--mono); color: var(--ink-soft); }
.role__list { margin-top: 16px; display: grid; gap: 11px; list-style: none; }
.role__list li { position: relative; padding-left: 20px; max-width: 80ch; font: 400 13px/1.7 var(--mono); color: var(--ink-soft); }
.role__list li::before { content: "\2022"; position: absolute; left: 2px; color: var(--mute); }
.role__aside { align-self: start; padding: 26px; border: 1px solid var(--rule); }
.role__include { margin-top: 16px; display: grid; gap: 12px; padding-left: 18px; }
.role__include li { font: 400 13px/1.7 var(--mono); color: var(--ink-soft); }
.role__aside .cta { width: 100%; margin-top: 14px; }

/* where it started: its own page, one line and the original clip */
.origin-page { min-height: calc(100svh - var(--nav) - 92px); display: grid; align-items: center; }
.origin { max-width: var(--max); margin-inline: auto; width: 100%; padding: clamp(48px, 8vh, 104px) var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(28px, 5vw, 80px); align-items: center; }
.origin__copy p { margin-top: 20px; max-width: 26ch; font-size: clamp(20px, 2.6vw, 31px); line-height: 1.28; letter-spacing: -.03em; font-weight: 600; }
.origin__copy p.origin__note { max-width: 44ch; margin-top: 24px; font-size: 15px; line-height: 1.55; letter-spacing: 0; font-weight: 400; color: var(--ink-soft); }
.origin__film { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.origin__video { display: block; width: 100%; height: auto; }

/* the whole frame is the play control; the sound chip sits above it */
.playpause { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.playpause:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.flash { position: absolute; inset: 0; z-index: 2; margin: auto; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 999px; background: rgba(9, 15, 21, .58); color: var(--ink); opacity: 0; pointer-events: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.flash svg { width: 22px; height: 22px; display: block; }
.flash.is-on { animation: flash .5s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes flash {
      0% { opacity: 0; transform: scale(.78); }
     26% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.16); }
}
.sound { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(234, 232, 227, .18); border-radius: 999px; background: rgba(9, 15, 21, .62); color: var(--ink); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.sound:hover { background: rgba(9, 15, 21, .85); border-color: rgba(234, 232, 227, .38); }
.sound:active { transform: scale(.94); }
.sound svg { width: 16px; height: 16px; display: block; }

/* contact */
.contact { max-width: 560px; margin-inline: auto; padding: clamp(110px, 17vh, 180px) var(--pad) clamp(96px, 14vh, 150px); text-align: center; }
.contact h2 { font-family: var(--serif); font-size: clamp(38px, 5.4vw, 58px); font-weight: 400; line-height: 1.06; letter-spacing: -.01em; }
.contact__lead { margin-top: 18px; font: 400 12px/1.7 var(--mono); color: var(--mute); }
.contact__alt { margin-top: 28px; font: 400 12px/1.6 var(--mono); color: var(--mute); }
.link { border-bottom: 1px solid var(--line); transition: color .2s, border-color .2s; }
.link:hover { color: var(--accent); border-color: var(--accent); }

.talk { margin-top: 40px; }
.talk > summary { display: inline-flex; list-style: none; }
.talk > summary::-webkit-details-marker { display: none; }
.form { display: grid; gap: 16px; margin-top: 40px; text-align: left; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; font: 500 12px/1.4 var(--font); letter-spacing: .02em; text-transform: uppercase; color: var(--mute); }
.field input, .field textarea { width: 100%; padding: 0 14px; border: 1px solid var(--rule); border-radius: 0; background: var(--surface); font: 16px/1.5 var(--font); color: var(--ink); letter-spacing: 0; text-transform: none; transition: border-color .15s; }
.field input { height: 48px; }
.field textarea { padding: 12px 14px; resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field ::placeholder { color: var(--mute); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .cta { justify-self: center; margin-top: 12px; }
.form__flash { padding: 12px 14px; border-radius: 12px; font-size: 14px; background: var(--surface); border: 1px solid var(--line); }
.form__flash--error { border-color: var(--accent); }

/* footer */
.footer { max-width: var(--max); margin-inline: auto; margin-top: clamp(56px, 9vh, 92px); padding: 26px var(--pad) 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); }
.footer__line { font: 400 12px/1.6 var(--mono); color: var(--mute); }
.footer__fine { font: 400 11px/1.6 var(--mono); color: var(--mute); }

/* Portrait keeps the pin. Letting the film sit in normal flow here was a bug:
   a 16:9 film is only ~265px tall on a phone, so it cleared the top of the
   screen after ~320px of scroll, which is 27% of the way through the scrub.
   The film's first second is a near-still hold, so all anyone ever saw was a
   frozen frame before it scrolled away, and the other six seconds ran off
   screen. Pinned, the film stays put for the whole eight seconds. */
@media (max-aspect-ratio: 13/10) {
    .has-scroll-film .hero { height: 400svh; }
    /* A 16:9 film is a 221px strip on a phone. Cropping to 5:4 makes it 314px.
       object-position 63% is the only window that keeps both the robot, which
       spans 19-77% of frame width, and the baked title, which runs to 89%. */
    .has-scroll-film .hero__film { width: 100%; margin-left: 0; aspect-ratio: 5 / 4; object-fit: cover; object-position: 63% center; }
    .has-scroll-film .hero__sticky { align-content: start; padding-top: 4vh; }
}

@media (max-width: 900px) {
    .origin { grid-template-columns: 1fr; gap: 28px; justify-items: start; }
    .origin__film { width: 100%; max-width: 340px; }
    .origin-page { min-height: 0; }
}

@media (max-width: 720px) {
    :root { --radius: 12px; --nav: 56px; --pad: 22px; }
    /* the baked "ultra inspection" title ends at 89% of frame width, so 10% a
       side is the whole safe crop budget. It buys ~20% more film height. */
    :root { --lede-space: 0px; }
    .brand { font-size: 17px; }
    /* mark + 3 items needs 361px at the previous spacing, which overflows a
       360px Android by a pixel. This buys it back. */
    .topbar__end { gap: 12px; }
    .pill { min-height: 44px; padding: 0 14px; }
    .lede h1 { font-size: clamp(30px, 8vw, 40px); max-width: 18ch; line-height: 1.12; letter-spacing: -.035em; }
    .rows { grid-template-columns: 1fr; gap: 26px; margin-top: 28px; }
    .rows__row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; padding-top: 22px; }
    .rows dt { display: block; font-size: 21px; }
    .step-number { display: block; margin-bottom: 14px; }
    .rows dd { margin-top: 26px; font-size: 15px; }
    .about { padding-top: 40px; }
    .contact { padding-top: 80px; padding-bottom: 80px; }
    .contact h2 { font-size: clamp(32px, 9vw, 40px); }
    .form__row { grid-template-columns: 1fr; }
    .field input { height: 48px; }
    .form .cta { width: 100%; }
    .rolecard { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .group__head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .footer { flex-direction: column; align-items: flex-start; gap: 12px; }
    .role__head { grid-template-columns: minmax(0, 1fr) 22px; gap: 16px; padding: 24px 10px; }
    .role__pitch { grid-column: 1 / -1; }
    .role__toggle { grid-row: 1; grid-column: 2; }
    .role__panel { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
}
@media (max-height: 540px) and (min-width: 721px) {
    .lede h1 { font-size: 26px; }
    .lede h1 br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero__film { -webkit-mask-image: none; mask-image: none; }
    .pill, .link, .field input, .field textarea, .sound, .navlink { transition: none; }
    .flash.is-on { animation-duration: .5s; }
}