/* =============================================================================
   L & L Interactive: v2 stylesheet
   Ported from the Claude Design system project (tokens + components), with a
   layout layer added: the design kit was a desktop-only React prototype using
   inline styles, so every multi-column grid here is rebuilt mobile-first.
   Single file, single request: no @import waterfall.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Fonts: Manrope (headings) / Inter (body), self-hosted woff2.
   -------------------------------------------------------------------------- */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/manrope-variable.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:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-variable.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}

/* -----------------------------------------------------------------------------
   2. Colour tokens: base palette copied verbatim from the design system.
   -------------------------------------------------------------------------- */
:root{
  --color-white:#ffffff;
  --color-neutral-lightest:#f2f2f2;
  --color-neutral-lighter:#d9d9da;
  --color-neutral-light:#b3b4b6;
  --color-neutral:#808285;
  --color-neutral-dark:#4d5054;
  --color-neutral-darker:#1b1e24;
  --color-neutral-darkest:#02050c;

  /* Transparency ramps: the only overlay/alpha system in the brand. */
  --color-white-5:rgba(255,255,255,.05);
  --color-white-10:rgba(255,255,255,.10);
  --color-white-15:rgba(255,255,255,.15);
  --color-white-20:rgba(255,255,255,.20);
  --color-white-30:rgba(255,255,255,.30);
  --color-white-40:rgba(255,255,255,.40);
  --color-white-50:rgba(255,255,255,.50);
  --color-white-60:rgba(255,255,255,.60);
  --color-neutral-darkest-5:rgba(2,5,12,.05);
  --color-neutral-darkest-10:rgba(2,5,12,.10);
  --color-neutral-darkest-15:rgba(2,5,12,.15);
  --color-neutral-darkest-20:rgba(2,5,12,.20);
  --color-neutral-darkest-30:rgba(2,5,12,.30);
  --color-neutral-darkest-40:rgba(2,5,12,.40);
  --color-neutral-darkest-50:rgba(2,5,12,.50);
  --color-neutral-darkest-60:rgba(2,5,12,.60);

  /* Blue Ribbon: the action blue. Primary button fill. */
  --color-blue-ribbon-lightest:#e5f0fd;
  --color-blue-ribbon-lighter:#cce2fc;
  --color-blue-ribbon-light:#4c9af6;
  --color-blue-ribbon:#0070f3;
  --color-blue-ribbon-dark:#0059c2;
  --color-blue-ribbon-darker:#002c61;
  --color-blue-ribbon-darkest:#002148;

  /* Melrose: pale blue, reserved for tints and rare accents. */
  --color-melrose-light:#c6d7ff;
  --color-melrose:#aec6ff;
  --color-melrose-dark:#8b9ecc;

  /* Semantic aliases. Scheme classes override the scheme-* set per section. */
  --color-scheme-background:var(--color-neutral-darkest);
  --color-scheme-foreground:var(--color-neutral-darker);
  --color-scheme-text:var(--color-white);
  --color-scheme-border:var(--color-white-20);
  --color-scheme-btn-text:var(--color-white);
}

/* -----------------------------------------------------------------------------
   3. Typography scale: mobile on :root, desktop swapped at 992px.
   -------------------------------------------------------------------------- */
:root{
  --font-heading:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-weight-bold:700;

  --text-h1:2.5rem;    --text-h1-line-height:1.15;
  --text-h2:2rem;      --text-h2-line-height:1.2;
  --text-h3:1.75rem;   --text-h3-line-height:1.2;
  --text-h4:1.375rem;  --text-h4-line-height:1.3;
  --text-h5:1.1875rem; --text-h5-line-height:1.4;
  --text-h6:1.0625rem; --text-h6-line-height:1.4;

  --text-large:1.0625rem; --text-large-line-height:1.55;
  --text-medium:1rem;     --text-medium-line-height:1.6;
  --text-regular:0.9375rem;--text-regular-line-height:1.6;
  --text-small:0.875rem;  --text-small-line-height:1.55;
  --text-tiny:0.75rem;    --text-tiny-line-height:1.5;

  /* Display numerals: the stat figures. Not part of the h-scale. */
  --text-stat:3rem;
  --text-stat-line-height:1.1;
}
@media (min-width:768px){
  :root{
    --text-h1:3.5rem;
    --text-h2:2.625rem;
    --text-h3:2.25rem;
    --text-h4:1.75rem;
    --text-h5:1.375rem;
    --text-h6:1.1875rem;
    --text-stat:4rem;
  }
}
@media (min-width:992px){
  :root{
    --text-h1:4.5rem;
    --text-h2:3.25rem;
    --text-h3:2.75rem;
    --text-h4:2.25rem;
    --text-h5:1.75rem;
    --text-h6:1.375rem;
    --text-large:1.375rem;
    --text-medium:1.125rem;
    --text-regular:1rem;
    --text-small:0.875rem;
    --text-tiny:0.75rem;
    --text-stat:5rem;
  }
}

/* -----------------------------------------------------------------------------
   4. Spacing + radii.
   -------------------------------------------------------------------------- */
:root{
  --spacing-1:0.25rem; --spacing-2:0.5rem;  --spacing-3:0.75rem;
  --spacing-4:1rem;    --spacing-5:1.25rem; --spacing-6:1.5rem;
  --spacing-8:2rem;    --spacing-10:2.5rem; --spacing-12:3rem;
  --spacing-16:4rem;   --spacing-18:4.5rem; --spacing-20:5rem;
  --spacing-24:6rem;   --spacing-28:7rem;   --spacing-30:7.5rem;

  /* Section rhythm: px-[5%] with a 16/24/28 vertical ramp. */
  --section-padding-inline:5%;
  --section-padding-block:var(--spacing-16);

  --container-lg:48rem;
  --container-xl:64rem;
  --container-xxl:80rem;
  --container-max:var(--container-xxl);

  /* Gaps between the two halves of a split layout, and between grid cards. */
  --gap-split:3rem;
  --gap-grid:1.5rem;
  --head-gap:3rem;

  --radius-button:6.25rem;
  --radius-badge:6.25rem;
  --radius-card:0.5rem;
  --radius-image:0.5rem;
  --radius-checkbox:0.25rem;
  --radius-form:0.75rem;
  --divider-width:1px;

  --nav-height:4.5rem;
}
@media (min-width:768px){
  :root{--section-padding-block:var(--spacing-24);--gap-grid:2rem;--head-gap:4rem}
}
@media (min-width:992px){
  :root{--section-padding-block:var(--spacing-28);--gap-split:5rem;--head-gap:5rem}
}

/* -----------------------------------------------------------------------------
   5. Colour schemes. Every section carries exactly one scheme class; all text,
      surface and border colours inside it resolve from these four variables.
   -------------------------------------------------------------------------- */
.scheme-1{
  --color-scheme-background:var(--color-neutral-darkest);
  --color-scheme-foreground:var(--color-neutral-darker);
  --color-scheme-text:var(--color-white);
  --color-scheme-border:var(--color-white-20);
  --color-scheme-btn-text:var(--color-white);
  background-color:var(--color-scheme-background);color:var(--color-scheme-text)
}
.scheme-2{
  --color-scheme-background:var(--color-neutral-darker);
  --color-scheme-foreground:var(--color-neutral-darkest);
  --color-scheme-text:var(--color-white);
  --color-scheme-border:var(--color-white-20);
  --color-scheme-btn-text:var(--color-white);
  background-color:var(--color-scheme-background);color:var(--color-scheme-text)
}
/* Deviation from the design kit, deliberate: the kit pairs scheme-3's grey
   background (#4d5054) with a #808285 card and white text, which lands at about
   3:1 and fails WCAG AA for body copy. Cards here use the darker surface
   instead, and `.muted` drops its transparency, so text stays legible. */
.scheme-3{
  --color-scheme-background:var(--color-neutral-dark);
  --color-scheme-foreground:var(--color-neutral-darker);
  --color-scheme-text:var(--color-white);
  --color-scheme-border:var(--color-white-20);
  --color-scheme-btn-text:var(--color-white);
  background-color:var(--color-scheme-background);color:var(--color-scheme-text)
}
.scheme-4{
  --color-scheme-background:var(--color-neutral-lightest);
  --color-scheme-foreground:var(--color-white);
  --color-scheme-text:var(--color-neutral-darkest);
  --color-scheme-border:var(--color-neutral-darkest-15);
  --color-scheme-btn-text:var(--color-white);
  background-color:var(--color-scheme-background);color:var(--color-scheme-text)
}
/* Modifier classes that ride alongside a scheme. */
.alternate{--is-alternate:1}
.btn-light{--btn-override:light}
.btn-dark{--btn-override:dark}

/* -----------------------------------------------------------------------------
   6. Base elements.
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* `clip` rather than `hidden`: it stops sideways scroll without turning the
   root into a scroll container, which would break `position:sticky`. */
html{scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-medium);
  line-height:var(--text-medium-line-height);
  background-color:var(--color-neutral-darkest);
  color:var(--color-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);margin:0;font-weight:var(--font-weight-bold);letter-spacing:-0.01em;text-wrap:balance}
h1{font-size:var(--text-h1);line-height:var(--text-h1-line-height)}
h2{font-size:var(--text-h2);line-height:var(--text-h2-line-height)}
h3{font-size:var(--text-h3);line-height:var(--text-h3-line-height)}
h4{font-size:var(--text-h4);line-height:var(--text-h4-line-height)}
h5{font-size:var(--text-h5);line-height:var(--text-h5-line-height)}
h6{font-size:var(--text-h6);line-height:var(--text-h6-line-height)}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none;transition:opacity .2s ease-in-out,color .2s ease-in-out}
a:hover{opacity:.8}
a.underline,.prose a{text-decoration:underline;text-underline-offset:.2em}
button:not(:disabled),[role="button"]:not(:disabled){cursor:pointer}
img{display:block;max-width:100%}
svg{display:block}
hr,.divider{border:0;height:var(--divider-width);width:100%;background-color:var(--color-scheme-border);margin:0}
ul,ol{margin:0}

/* Visible focus ring for keyboard users: the design kit removed outlines entirely. */
:focus-visible{outline:2px solid var(--color-blue-ribbon-light);outline-offset:3px;border-radius:2px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--color-blue-ribbon);color:#fff;
  padding:.75rem 1.25rem;border-radius:0 0 var(--radius-card) 0;font-weight:600;
}
.skip-link:focus{left:0}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* -----------------------------------------------------------------------------
   7. Layout primitives.
   -------------------------------------------------------------------------- */
.container{margin-inline:auto;max-width:var(--container-max);width:100%}
.container--lg{max-width:var(--container-lg)}
.container--xl{max-width:var(--container-xl)}
.section{padding-inline:var(--section-padding-inline);padding-block:var(--section-padding-block)}
.section--tight{padding-block:var(--spacing-16)}

.text-large{font-size:var(--text-large);line-height:var(--text-large-line-height)}
.text-medium{font-size:var(--text-medium);line-height:var(--text-medium-line-height)}
.text-regular{font-size:var(--text-regular);line-height:var(--text-regular-line-height)}
.text-small{font-size:var(--text-small);line-height:var(--text-small-line-height)}
.text-tiny{font-size:var(--text-tiny);line-height:var(--text-tiny-line-height)}
.text-center{text-align:center}
.muted{color:color-mix(in srgb,var(--color-scheme-text),transparent 28%)}
/* On the mid-grey scheme, any transparency drops body copy below AA. */
.scheme-3 .muted{color:var(--color-scheme-text)}

/* Eyebrow: the small bold label opening nearly every section. */
.eyebrow{font-weight:600;margin-bottom:1rem;font-size:var(--text-medium)}

/* Section head: eyebrow + h2 + lead. */
.section-head{max-width:48rem;margin-bottom:var(--head-gap)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head h2,.section-head h1{margin-bottom:1.5rem}

/* Split: stacks on mobile, two columns from 992px. */
.split{display:grid;gap:var(--gap-split);align-items:center}
.split--start{align-items:start}
@media (min-width:992px){
  .split{grid-template-columns:1fr 1fr}
  .split--narrow-first{grid-template-columns:.75fr 1fr}
  .split--wide-first{grid-template-columns:1fr .75fr}
  .split--half-first{grid-template-columns:.5fr 1fr}
  /* Puts the media above the copy on mobile but to the left on desktop. */
  .split--media-first > .split__media{order:-1}
}
/* On mobile the media always follows the copy unless flagged. */
.split__media{order:1}
.split--media-lead > .split__media{order:-1}

/* Card grids. */
.grid{display:grid;gap:var(--gap-grid)}
@media (min-width:600px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:600px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:992px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .grid--2-lg{grid-template-columns:repeat(2,1fr)}
}
.grid--portfolio{row-gap:3rem}
@media (min-width:768px){.grid--portfolio{grid-template-columns:repeat(2,1fr);column-gap:3rem;row-gap:4rem}}

.stack{display:grid;gap:2rem}
.stack--sm{gap:1rem}
.stack--lg{gap:3rem}

/* Button rows wrap rather than overflow on narrow screens. */
.btn-row{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.btn-row--center{justify-content:center}

.media{width:100%;border-radius:var(--radius-image);object-fit:cover}
.media--16x9{aspect-ratio:16/9}
.media--3x2{aspect-ratio:3/2}
.media--1x1{aspect-ratio:1/1}
.media--tall{aspect-ratio:4/5}

.bullets{margin:1rem 0;padding-left:1.25rem;list-style:disc}
.bullets li{margin:.375rem 0;padding-left:.5rem}

.check-list{display:grid;gap:1rem;padding:0;margin:0;list-style:none}
.check-list li{display:flex;align-items:flex-start;gap:1rem}
.check-list svg{flex:none;margin-top:.15rem;color:var(--color-blue-ribbon-light)}

/* Stat figure. */
.stat{font-family:var(--font-heading);font-weight:700;font-size:var(--text-stat);line-height:var(--text-stat-line-height)}
.stat--sm{font-size:var(--text-h2)}

.sticky-col{position:sticky;top:calc(var(--nav-height) + 2rem)}
@media (max-width:991px){.sticky-col{position:static}}

/* -----------------------------------------------------------------------------
   8. Buttons.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  border-radius:var(--radius-button);white-space:nowrap;
  border:1px solid transparent;font-family:var(--font-body);
  font-size:var(--text-regular);line-height:1.4;
  transition:all .2s ease-in-out;background:none;color:inherit;
  padding:.75rem 1.5rem;font-weight:500;text-align:center;
}
.btn:disabled{pointer-events:none;opacity:.5}
.btn:hover{opacity:1}
.btn--sm{padding:.5rem 1.25rem;font-size:var(--text-small)}
.btn--block{width:100%}

.btn--primary{border-color:var(--color-blue-ribbon);background-color:var(--color-blue-ribbon);color:var(--color-scheme-btn-text)}
.btn--primary:hover{border-color:var(--color-blue-ribbon-dark);background-color:var(--color-blue-ribbon-dark)}
.btn-dark .btn--primary{border-color:var(--color-neutral-darkest);background-color:var(--color-neutral-darkest);color:var(--color-white)}
.btn-dark .btn--primary:hover{border-color:var(--color-neutral-darker);background-color:var(--color-neutral-darker)}
.btn-light .btn--primary{border-color:var(--color-white);background-color:var(--color-white);color:var(--color-neutral-darkest)}
.btn-light .btn--primary:hover{border-color:var(--color-neutral-lighter);background-color:var(--color-neutral-lighter)}

.btn--secondary{border-color:transparent;background-color:var(--color-white-10);backdrop-filter:blur(10px)}
.btn--secondary:hover{background-color:var(--color-white-20)}
.scheme-4 .btn--secondary{background-color:var(--color-neutral-darkest-5)}
.scheme-4 .btn--secondary:hover{background-color:var(--color-neutral-darkest-15)}

/* Text link with a chevron: the "LinkAction" of the design kit. */
.link-action{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--color-scheme-text);font-weight:500;font-size:var(--text-regular);
  padding:0;background:none;border:0;
}
.link-action svg{transition:transform .2s ease-in-out}
.link-action:hover svg{transform:translateX(3px)}

/* -----------------------------------------------------------------------------
   9. Badge / Card.
   -------------------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;border:1px solid var(--color-white-10);
  border-radius:var(--radius-badge);padding:.25rem .625rem;
  font-size:var(--text-small);line-height:var(--text-small-line-height);
  font-weight:600;background-color:var(--color-white-10);color:var(--color-white);
}
.badge--outline{border-color:var(--color-scheme-border);background:transparent;color:var(--color-scheme-text)}
.badge--accent{border-color:rgba(0,112,243,.3);background-color:rgba(0,112,243,.15);color:var(--color-melrose)}
.badge-row{display:flex;flex-wrap:wrap;gap:.5rem}

.card{
  overflow:hidden;border-radius:var(--radius-card);border:0;
  background-color:var(--color-scheme-foreground);color:var(--color-scheme-text);
}
.card--pad{padding:1.75rem}
@media (min-width:768px){.card--pad{padding:2rem}}
.card--flush{background:transparent}
.card--outline{border:1px solid var(--color-scheme-border);background:transparent}
.card__body{padding:1.5rem}
.card__media{width:100%;height:16rem;object-fit:cover}
@media (min-width:768px){.card__media{height:20rem}}
/* Interactive cards lift very slightly: 200ms, no bounce. */
.card--link{display:block;transition:transform .2s ease-in-out,background-color .2s ease-in-out}
.card--link:hover{transform:translateY(-3px);opacity:1}

.icon-lg{color:var(--color-melrose);margin-bottom:1.5rem}

/* Brand plate. Managed networks lead with the partner's own mark rather than
   photography, so the card is honest about whose brand it is. */
.brandplate{
  aspect-ratio:3/2;width:100%;
  display:grid;place-items:center;padding:2rem;
  background:
    radial-gradient(110% 90% at 50% 0%, rgba(255,255,255,.07), transparent 62%),
    linear-gradient(158deg, var(--plate-a) 0%, var(--plate-b) 100%);
}
.brandplate img{width:min(56%,15rem);height:auto;object-fit:contain}
.brandplate--winterust{--plate-a:#12304a;--plate-b:#050b12}
.brandplate--spoonkid-rust{--plate-a:#123243;--plate-b:#070f15}

/* The same mark, used as a badge over a photographic pane on the Work page. */
.pane__logo{
  display:flex;align-items:center;
  height:2.75rem;margin-block:1.25rem .25rem;
}
@media (min-width:768px){.pane__logo{height:3.5rem}}
.pane__logo img{height:100%;width:auto;object-fit:contain}

/* -----------------------------------------------------------------------------
   10. Navbar.
   -------------------------------------------------------------------------- */
.navbar{
  position:sticky;top:0;z-index:999;
  padding-inline:var(--section-padding-inline);
  min-height:var(--nav-height);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--color-scheme-border);
  background-color:rgba(2,5,12,.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.navbar__brand{
  display:flex;align-items:center;gap:.625rem;
  font-family:var(--font-heading);font-weight:700;
  letter-spacing:-0.02em;font-size:1.125rem;flex:none;
}
.navbar__brand img{width:1.75rem;height:1.75rem}
.navbar__toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;border:0;background:none;color:inherit;
  margin-right:-.5rem;
}
.navbar__toggle .icon-close,.navbar__toggle[aria-expanded="true"] .icon-open{display:none}
.navbar__toggle[aria-expanded="true"] .icon-close{display:block}

.navbar__menu{display:flex;align-items:center;gap:.25rem}
.navbar__link{padding:.5rem 1rem;font-size:var(--text-regular);opacity:.85}
.navbar__link:hover,.navbar__link[aria-current="page"]{opacity:1}
.navbar__actions{display:flex;align-items:center;gap:1rem;flex:none}
/* Only shown inside the mobile panel: see the max-width:991px block below. */
.navbar__cta{display:none}

.navbar__group{position:relative}
.navbar__group > .navbar__link{display:flex;align-items:center;gap:.375rem;width:100%;background:none;border:0;color:inherit;font:inherit;text-align:left}
.navbar__group > .navbar__link svg{transition:transform .3s}
.navbar__group > .navbar__link[aria-expanded="true"] svg{transform:rotate(180deg)}
.navbar__dropdown{
  display:none;position:absolute;top:100%;left:0;z-index:50;
  min-width:15rem;padding:.5rem;
  border:1px solid var(--color-scheme-border);
  background-color:var(--color-neutral-darkest);
  border-radius:var(--radius-card);
}
.navbar__dropdown a{display:block;padding:.625rem 1rem;font-size:var(--text-regular);border-radius:calc(var(--radius-card) - 2px)}
.navbar__dropdown a:hover{background-color:var(--color-white-10);opacity:1}
@media (min-width:992px){
  .navbar__toggle{display:none}
  .navbar__group:hover .navbar__dropdown,
  .navbar__group:focus-within .navbar__dropdown{display:block}
}
@media (max-width:991px){
  .navbar{flex-wrap:wrap;padding-block:.75rem}
  /* Brand + burger + CTA together exceed a 390px viewport, so the CTA moves
     into the panel and reappears there as .navbar__cta. */
  .navbar__actions{display:none}
  .navbar__cta{display:flex;margin-top:1rem}
  .navbar__menu{
    display:none;order:3;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
    padding-block:.75rem 1.25rem;
    border-top:1px solid var(--color-scheme-border);
    margin-top:.75rem;
  }
  .navbar[data-open="true"] .navbar__menu{display:flex}
  .navbar__link{padding:.75rem .25rem;font-size:var(--text-large)}
  .navbar__dropdown{
    position:static;display:block;border:0;background:none;padding:0 0 .5rem .75rem;
  }
  .navbar__dropdown a{padding:.5rem .25rem;font-size:var(--text-regular);opacity:.85}
  .navbar__group > .navbar__link svg{display:none}
}

/* -----------------------------------------------------------------------------
   11. Footer.
   -------------------------------------------------------------------------- */
.footer{padding-inline:var(--section-padding-inline);padding-block:4rem}
@media (min-width:768px){.footer{padding-block:5rem}}
.footer__top{display:grid;gap:2.5rem;padding-bottom:3rem}
@media (min-width:992px){.footer__top{grid-template-columns:1fr .5fr;column-gap:8vw;padding-bottom:5rem}}
.footer__cols{display:grid;gap:2rem}
@media (min-width:600px){.footer__cols{grid-template-columns:repeat(2,1fr)}}
@media (min-width:992px){.footer__cols{grid-template-columns:repeat(4,1fr);column-gap:2rem;row-gap:2.5rem}}
.footer__brand{font-family:var(--font-heading);font-weight:700;letter-spacing:-.02em;font-size:1.125rem;display:flex;align-items:center;gap:.625rem}
.footer__brand img{width:1.75rem;height:1.75rem}
.footer h2{margin-bottom:1rem;font-weight:600;font-size:1rem}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{padding-block:.5rem;font-size:var(--text-small)}
.footer__bottom{
  display:flex;flex-direction:column;gap:1.5rem;
  padding-top:2rem;font-size:var(--text-small);
}
@media (min-width:768px){.footer__bottom{flex-direction:row;align-items:center;justify-content:space-between}}
.footer__legal{display:flex;flex-wrap:wrap;gap:1.5rem;list-style:none;margin:0;padding:0}
.footer__legal a{text-decoration:underline;text-underline-offset:.2em}
.footer__social{display:flex;align-items:center;gap:1rem}
.footer__social a{display:inline-flex;color:var(--color-white-60)}
.footer__social a:hover{color:var(--color-white);opacity:1}

/* -----------------------------------------------------------------------------
   12. Marquee: the one ambient motion in the system (partner strip).
   -------------------------------------------------------------------------- */
@keyframes loop-horizontally{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.marquee{display:flex;align-items:center;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;flex:none;align-items:center;animation:loop-horizontally 32s linear infinite}
.marquee__item{
  margin-inline:2rem;flex:none;
  font-family:var(--font-heading);font-weight:700;font-size:1.25rem;
  white-space:nowrap;color:var(--color-white-60);
}
@media (min-width:768px){.marquee__item{margin-inline:2.5rem;font-size:1.5rem}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* -----------------------------------------------------------------------------
   13. Accordion (FAQ): native <details>, so it works without JavaScript.
   -------------------------------------------------------------------------- */
.faq{display:grid;gap:1rem}
.faq__item{
  border-radius:var(--radius-card);
  background-color:var(--color-scheme-foreground);
  overflow:hidden;
}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.25rem 1.5rem;font-weight:700;list-style:none;cursor:pointer;
  font-size:var(--text-medium);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary svg{flex:none;transition:transform .3s}
.faq__item[open] summary svg{transform:rotate(45deg)}
.faq__answer{padding:0 1.5rem 1.5rem}

/* -----------------------------------------------------------------------------
   14. Tabs: progressive enhancement. Without JS all panels stay visible.
   -------------------------------------------------------------------------- */
.tabs__list{display:flex;gap:1.5rem;flex-wrap:wrap}
.tabs__trigger{
  border:0;border-bottom:2px solid transparent;background:transparent;color:inherit;
  font:inherit;padding:.5rem 0;opacity:.5;transition:all .2s ease-in-out;white-space:nowrap;
}
.tabs__trigger[aria-selected="true"]{border-bottom-color:var(--color-scheme-text);opacity:1}
.tabs__panel[hidden]{display:none}
/* The fade is applied by JS on switch only. Animating on load would delay the
   first paint of panel content and risk leaving it faded if the run is cut short. */
.tabs__panel[data-enter]{animation:fade-in .3s ease}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* Vertical rail variant: the capability tab card. */
.railtabs{display:grid}
@media (min-width:992px){
  .railtabs{grid-template-columns:1fr 1.5fr}
  .railtabs--reverse{grid-template-columns:1.5fr 1fr}
  .railtabs__list{border-right:1px solid var(--color-scheme-border)}
  .railtabs--reverse .railtabs__list{border-right:0;border-left:1px solid var(--color-scheme-border);order:2}
  .railtabs--reverse .railtabs__panels{order:1}
}
.railtabs__list{display:grid;grid-auto-rows:min-content}
.railtabs__trigger{
  border:0;background:var(--color-scheme-background);color:inherit;
  text-align:left;justify-content:flex-start;
  padding:1.125rem 1.5rem;
  font-family:var(--font-heading);font-weight:700;font-size:var(--text-h6);
  transition:background-color .2s ease-in-out;
  border-bottom:1px solid var(--color-scheme-border);
}
.railtabs__trigger:last-child{border-bottom:0}
.railtabs__trigger[aria-selected="true"]{background:var(--color-scheme-foreground)}
@media (min-width:992px){
  .railtabs__trigger{padding:1.5rem 2rem;font-size:var(--text-h5)}
}
.railtabs__panel{padding:2rem 1.5rem}
@media (min-width:992px){.railtabs__panel{padding:4rem}}

/* Stacked "accordion tab" variant beside a media panel. */
.stacktabs__trigger{
  display:block;width:100%;text-align:left;
  border:0;border-bottom:1px solid var(--color-scheme-border);
  background:transparent;color:inherit;font:inherit;
  padding:1.5rem 0;opacity:.35;transition:opacity .2s ease-in-out;
}
.stacktabs__trigger[aria-selected="true"]{opacity:1}
.stacktabs__trigger h3{font-size:var(--text-h4)}
/* Body copy stays in the markup for crawlers but only shows for the open item.
   With JS off the first item is open, so the section still reads. */
.stacktabs__trigger p{display:none;margin-top:1rem;font-size:var(--text-regular)}
.stacktabs__trigger[aria-selected="true"] p{display:block}

/* -----------------------------------------------------------------------------
   15. Process rail (Services): horizontal on desktop, vertical on mobile.
   -------------------------------------------------------------------------- */
/* Vertical on mobile, horizontal on desktop. The connector is its own element
   rather than a pseudo-element so it stops at the next dot instead of running
   to the viewport edge. */
.process{display:grid;gap:2.5rem}
.process__step{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:stretch}
.process__rail{display:flex;flex-direction:column;align-items:center}
.process__dot{
  width:.9375rem;height:.9375rem;flex:none;border-radius:9999px;
  background:var(--color-scheme-text);margin-top:.5rem;
}
.process__line{width:3px;flex:1;min-height:1rem;margin-top:.5rem;background:var(--color-white-20)}
.process__step:last-child .process__line{display:none}
@media (min-width:992px){
  .process{grid-template-columns:repeat(5,1fr);gap:0;margin-top:1rem}
  .process__step{grid-template-columns:1fr;grid-template-rows:1fr max-content 1fr;gap:1rem}
  .process__rail{grid-row:2;flex-direction:row;align-items:center;width:100%}
  .process__dot{margin-top:0}
  .process__line{width:auto;height:3px;min-height:0;margin-top:0;background:var(--color-scheme-text)}
  .process__copy{grid-row:3;padding-right:1.5rem}
  .process__step:nth-child(even) .process__copy{grid-row:1}
}

/* -----------------------------------------------------------------------------
   16. Timeline (About / Work): the v1 journey rail, rebuilt on the v2 tokens.
   -------------------------------------------------------------------------- */
.timeline{display:grid;gap:0}
.timeline__year{
  font-family:var(--font-heading);font-weight:800;font-size:var(--text-tiny);
  letter-spacing:.22em;text-transform:uppercase;color:var(--color-white-30);
  padding:2rem 0 1rem 2.375rem;
}
.timeline__row{display:grid;grid-template-columns:auto 1fr;gap:0}
.timeline__spine{display:flex;flex-direction:column;align-items:center;width:1.5rem}
.timeline__dot{
  width:11px;height:11px;border-radius:50%;flex:none;margin-top:.5rem;
  border:2px solid var(--color-neutral-darkest);background:var(--color-blue-ribbon);
  position:relative;z-index:1;
}
.timeline__line{width:2px;flex:1;min-height:1.25rem;background:var(--color-white-10)}
.timeline__content{padding:0 0 .875rem 1.125rem;min-width:0}
.timeline__card{background:var(--color-neutral-darker);border-radius:var(--radius-card);padding:1rem 1.25rem}
.timeline__date{
  font-size:var(--text-tiny);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--color-white-40);margin-bottom:.375rem;
}
.timeline__card h3{font-size:var(--text-h6);margin-bottom:.375rem}
.timeline__card p{font-size:var(--text-small);color:var(--color-white-60)}
.timeline__figures{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:.875rem}
.timeline__figure b{display:block;font-family:var(--font-heading);font-size:var(--text-h6)}
.timeline__figure span{font-size:var(--text-tiny);color:var(--color-white-40);text-transform:uppercase;letter-spacing:.08em}

/* -----------------------------------------------------------------------------
   17. Forms.
   -------------------------------------------------------------------------- */
.field{display:grid;width:100%;gap:.5rem}
.field label{font-size:var(--text-regular);font-weight:500}
.input,.textarea,select.input{
  display:flex;width:100%;background-color:transparent;
  font-family:var(--font-body);font-size:var(--text-regular);line-height:1.5;
  min-height:2.75rem;padding:.625rem 0;border:0;
  border-bottom:1px solid var(--color-white-20);
  color:var(--color-scheme-text);transition:border-color .2s ease-in-out;
  border-radius:0;
}
.input::placeholder,.textarea::placeholder{color:var(--color-white-40)}
.input:focus,.textarea:focus,select.input:focus{outline:none;border-bottom-color:var(--color-blue-ribbon-light)}
.input:focus-visible,.textarea:focus-visible,select.input:focus-visible{outline:2px solid var(--color-blue-ribbon-light);outline-offset:3px}
.textarea{min-height:10rem;resize:vertical;padding-block:.75rem}
select.input{appearance:none;cursor:pointer;padding-right:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .25rem center}
select.input option{background:var(--color-neutral-darker);color:var(--color-white)}
.field-row{display:grid;gap:1.5rem}
@media (min-width:600px){.field-row{grid-template-columns:1fr 1fr}}
.choice{display:flex;align-items:center;gap:.625rem;font-size:var(--text-regular)}
.choice input{
  width:1.125rem;height:1.125rem;flex:none;margin:0;
  accent-color:var(--color-blue-ribbon);
}
.choice-grid{display:grid;gap:.875rem 1.5rem;grid-template-columns:1fr 1fr}
@media (min-width:600px){.choice-grid{grid-template-columns:repeat(3,1fr)}}
.form-note{font-size:var(--text-small);color:var(--color-white-60)}

/* Honeypot: hidden from people, visible to naive bots. */
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* -----------------------------------------------------------------------------
   18. Contact channels.
   -------------------------------------------------------------------------- */
.channels{display:grid;gap:2.5rem}
@media (min-width:600px){.channels{grid-template-columns:1fr 1fr}}
.channel h3{margin-bottom:.5rem;font-size:var(--text-h6)}
.channel p{margin-bottom:.5rem;font-size:var(--text-regular)}
.channel svg{margin-bottom:1rem;color:var(--color-melrose)}

/* -----------------------------------------------------------------------------
   19. Prose (legal pages).
   -------------------------------------------------------------------------- */
.prose{max-width:48rem}
.prose h2{font-size:var(--text-h4);margin-block:2.5rem 1rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--text-h6);margin-block:1.75rem .75rem}
.prose p,.prose li{font-size:var(--text-regular);line-height:1.7;color:color-mix(in srgb,var(--color-scheme-text),transparent 15%)}
.prose p{margin-bottom:1rem}
.prose ul,.prose ol{margin:0 0 1rem;padding-left:1.25rem}
.prose li{margin-bottom:.5rem}
.prose a{color:var(--color-melrose)}

/* -----------------------------------------------------------------------------
   20. Work / portfolio panes.
   -------------------------------------------------------------------------- */
.pane{
  position:relative;overflow:hidden;border-radius:var(--radius-card);
  background-color:var(--color-neutral-darker);
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:28rem;padding:2rem;
}
@media (min-width:768px){.pane{min-height:34rem;padding:3rem}}
/* The Rust screenshots are bright daylight shots, so the plate carries more of
   the image than it used to and the scrim only darkens where the copy sits. */
.pane__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.pane__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,5,12,.15) 0%,rgba(2,5,12,.62) 42%,rgba(2,5,12,.93) 78%,rgba(2,5,12,.97) 100%);
}
.pane__body{position:relative;z-index:1}
.pane h2,.pane h3{margin-bottom:1rem}

.figures{display:grid;gap:1.5rem;margin-top:2rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){.figures{grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}}
.figure b{display:block;font-family:var(--font-heading);font-weight:700;font-size:var(--text-h4);line-height:1.1}
.figure span{display:block;margin-top:.375rem;font-size:var(--text-small);color:var(--color-white-60)}

.tag-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.tag{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .875rem;border-radius:var(--radius-card);
  background:var(--color-white-5);border:1px solid var(--color-white-10);
  font-size:var(--text-small);
}
.tag svg{color:var(--color-blue-ribbon-light)}

/* Charity ledger. */
.ledger{display:grid;gap:1rem}
@media (min-width:600px){.ledger{grid-template-columns:repeat(2,1fr)}}
@media (min-width:992px){.ledger{grid-template-columns:repeat(3,1fr)}}
.ledger__item{
  border-radius:var(--radius-card);padding:1.25rem;
  border:1px solid var(--color-white-10);background:var(--color-white-5);
}
.ledger__item--accent{border-color:rgba(0,112,243,.25);background:rgba(0,112,243,.10)}
.ledger__item h3{font-size:var(--text-h6);margin-bottom:.25rem}
.ledger__item p{font-size:var(--text-small);color:var(--color-white-60);margin-bottom:.75rem}
.ledger__item b{font-family:var(--font-heading);font-size:var(--text-h5)}

/* Three-image cluster (PlatformSync use cases). The design kit overlapped these
   absolutely; with real photography that reads as clutter, so they are offset
   on a grid instead: same asymmetry, nothing obscured. */
.cluster{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);align-items:start}
.cluster img{width:100%;object-fit:cover;border-radius:var(--radius-image);aspect-ratio:3/2}
.cluster img:first-child{grid-column:1/-1;aspect-ratio:16/9}
@media (min-width:992px){
  .cluster{grid-template-columns:1fr 1fr;gap:1.5rem}
  .cluster img:first-child{grid-column:1/-1}
  .cluster img:nth-child(2){margin-top:1.5rem}
}

/* -----------------------------------------------------------------------------
   21. Application page (/apply). Server-rendered by a Cloudflare Function that
       reuses this stylesheet.

       Deliberate deviation from the design kit: its form control is a bare
       bottom border, which reads fine on the five-field contact form but
       disappears on a thirty-eight question application. Controls here get a
       real surface, a border and a focus ring, so the visitor can see where to
       type. Everything else stays on the same tokens.
   -------------------------------------------------------------------------- */

/* Conditional questions. The server marks hidden ones with data-hidden, but the
   rule that acts on it is gated behind a class apply.js adds to <html>. That is
   deliberate: if the script ever failed to load, the questions would otherwise
   become permanently unreachable and nothing would look wrong. Keying off the
   script itself fails open. The cost is a brief flash before it runs. */
html.js .apply-field[data-hidden]{display:none}
/* A section whose questions are all closed hides with them. */
html.js .apply-card[data-hidden]{display:none}

/* ---------- hero ---------- */
.apply-hero h1{margin-bottom:1.25rem}
.apply-hero__lead{max-width:44rem}
.apply-meta{
  display:flex;flex-wrap:wrap;gap:1.75rem;
  list-style:none;margin:2rem 0 0;padding:0;
}
.apply-meta li{
  display:flex;align-items:baseline;gap:.45rem;
  font-size:var(--text-small);color:var(--color-white-50);
}
.apply-meta span{
  font-family:var(--font-heading);font-weight:700;font-size:var(--text-h6);
  color:var(--color-white);font-variant-numeric:tabular-nums;
}

/* ---------- layout: sticky section rail beside the form ---------- */
.apply-layout{display:grid;gap:2rem}
.apply-main{min-width:0;max-width:44rem}
@media (min-width:1120px){
  .apply-layout{grid-template-columns:14rem minmax(0,1fr);column-gap:4rem;align-items:start}
}

.apply-rail{display:none}
@media (min-width:1120px){
  .apply-rail{display:block;position:sticky;top:calc(var(--nav-height) + 2rem)}
}
.apply-rail__label{
  font-size:var(--text-tiny);text-transform:uppercase;letter-spacing:.14em;
  color:var(--color-white-40);margin:0 0 .75rem;padding-left:.85rem;
}
.apply-rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.125rem}
.apply-rail a{
  display:flex;gap:.75rem;align-items:baseline;
  padding:.5rem .75rem;border-radius:6px;
  font-size:var(--text-small);line-height:1.4;color:var(--color-white-50);
  border-left:2px solid transparent;
}
.apply-rail a:hover{background:var(--color-white-5);color:var(--color-white);opacity:1}
.apply-rail a.is-active{
  background:rgba(0,112,243,.10);color:var(--color-white);
  border-left-color:var(--color-blue-ribbon);
}
.apply-rail__num{
  font-variant-numeric:tabular-nums;font-size:var(--text-tiny);
  color:var(--color-white-30);flex:none;
}
.apply-rail a.is-active .apply-rail__num{color:var(--color-blue-ribbon-light)}

/* ---------- who you are ---------- */
.apply-who{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;margin-bottom:1.5rem;
  border-radius:var(--radius-card);
  background:var(--color-scheme-foreground);
  border:1px solid var(--color-white-10);
}
.apply-who__id{display:flex;align-items:center;gap:.875rem;min-width:0}
.apply-who__avatar{border-radius:8px;flex:none;width:40px;height:40px}
.apply-who__avatar--blank{background:var(--color-white-10);display:block}
.apply-who__text{display:flex;flex-direction:column;min-width:0}
.apply-who__label{
  font-size:var(--text-tiny);letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-white-40);
}
.apply-who strong{font-family:var(--font-heading);font-size:var(--text-h6);line-height:1.3}
.apply-who__id64{
  font-size:var(--text-tiny);color:var(--color-white-30);
  font-variant-numeric:tabular-nums;
}
.apply-who__out{margin:0}

/* ---------- the form ---------- */
.apply-form{display:flex;flex-direction:column;gap:1.5rem}

.apply-card{
  border:1px solid var(--color-white-10);
  border-radius:var(--radius-card);
  background:var(--color-scheme-foreground);
  padding:1.5rem 1.25rem;margin:0;
  scroll-margin-top:calc(var(--nav-height) + 1.5rem);
}
@media (min-width:768px){.apply-card{padding:2rem 2.25rem}}

/* A <legend> is positioned on the fieldset border by default, which cuts a
   notch through the card edge. Floating it takes it out of that treatment while
   keeping the element semantic. */
.apply-card__head{
  float:left;display:flex;align-items:baseline;gap:.875rem;
  width:100%;padding:0 0 1.25rem;margin-bottom:1.75rem;
  border-bottom:1px solid var(--color-white-10);
}
.apply-card__fields{clear:both}
.apply-card__num{
  font-family:var(--font-heading);font-weight:800;font-size:var(--text-small);
  color:var(--color-blue-ribbon-light);font-variant-numeric:tabular-nums;flex:none;
}
.apply-card__title{
  font-family:var(--font-heading);font-weight:700;
  font-size:var(--text-h5);line-height:1.25;
}
.apply-card__fields{display:flex;flex-direction:column;gap:1.75rem;clear:both}

/* ---------- a single question ---------- */
.apply-field{display:flex;flex-direction:column;gap:.5rem}
.apply-field > label,.apply-field .field__label{
  font-size:var(--text-regular);font-weight:600;line-height:1.45;
}
.field__help{
  font-size:var(--text-small);color:var(--color-white-50);
  margin:-.25rem 0 .125rem;line-height:1.5;
}
.field__error{
  font-size:var(--text-small);color:var(--color-melrose);margin:.125rem 0 0;
}
.req{color:var(--color-blue-ribbon-light);font-weight:400}

/* Controls get a real surface. See the note at the top of this section. */
.apply-form .input,
.apply-form .textarea,
.apply-form select.input{
  background-color:var(--color-white-5);
  border:1px solid var(--color-white-15);
  border-radius:8px;
  padding:.7rem .875rem;
  min-height:2.875rem;
  font-size:var(--text-regular);
  line-height:1.5;
  color:var(--color-white);
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.apply-form .input:hover,
.apply-form .textarea:hover,
.apply-form select.input:hover{border-color:var(--color-white-30)}
.apply-form .input:focus,
.apply-form .textarea:focus,
.apply-form select.input:focus{
  outline:none;
  border-color:var(--color-blue-ribbon);
  background-color:var(--color-white-10);
  box-shadow:0 0 0 3px rgba(0,112,243,.28);
}
.apply-form .input::placeholder,
.apply-form .textarea::placeholder{color:var(--color-white-30)}
.apply-form .textarea{min-height:9rem;resize:vertical}
.apply-form select.input{padding-right:2.5rem;background-position:right .75rem center;cursor:pointer}
.apply-form input[type="date"]{color-scheme:dark}
.apply-field--error .input,
.apply-field--error .textarea,
.apply-field--error select.input{border-color:var(--color-melrose)}

/* Choices read as pickable tiles rather than loose dots. */
.choice-grid{display:grid;gap:.625rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
.apply-form .choice{
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem .875rem;
  border:1px solid var(--color-white-15);
  border-radius:8px;
  background-color:var(--color-white-5);
  font-size:var(--text-regular);line-height:1.4;
  cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.apply-form .choice:hover{border-color:var(--color-white-30);background-color:var(--color-white-10)}
.apply-form .choice:has(input:checked){
  border-color:var(--color-blue-ribbon);
  background-color:rgba(0,112,243,.14);
}
.apply-form .choice:has(input:focus-visible){box-shadow:0 0 0 3px rgba(0,112,243,.28)}
.apply-form .choice input{flex:none}
/* A lone tickbox is a statement, not a grid of options. */
.apply-field > .choice{align-self:flex-start;min-width:min(100%,22rem)}

.field__count{
  font-size:var(--text-tiny);color:var(--color-white-30);
  text-align:right;font-variant-numeric:tabular-nums;margin:0;
}
.field__count.is-close{color:var(--color-white-60)}
.field__count.is-over{color:var(--color-melrose)}

/* ---------- submit ---------- */
.apply-submit{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;
  padding:1.5rem;border-radius:var(--radius-card);
  background:var(--color-scheme-foreground);
  border:1px solid var(--color-white-10);
}
@media (min-width:768px){.apply-submit{padding:1.75rem 2.25rem}}
.apply-submit__copy{min-width:0;flex:1 1 16rem}
.apply-submit__title{
  font-family:var(--font-heading);font-weight:700;
  font-size:var(--text-h6);margin-bottom:.25rem;
}
.apply-submit__action{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.apply-submit .btn{padding:.85rem 2rem;font-size:var(--text-regular)}
.apply-submit .btn:disabled{opacity:.6}
.form-note{font-size:var(--text-small);color:var(--color-white-50);margin:0}

/* ---------- notices ---------- */
.apply-errors{
  margin:0;padding-left:1.1rem;
  display:flex;flex-direction:column;gap:.35rem;font-size:var(--text-regular);
}
.notice{
  border-radius:var(--radius-card);padding:1.5rem;
  background:var(--color-scheme-foreground);
  border:1px solid var(--color-white-10);
  border-left:3px solid var(--color-blue-ribbon);
  margin-bottom:1.5rem;max-width:44rem;
}
.notice:focus-visible{outline:2px solid var(--color-blue-ribbon-light);outline-offset:3px}
.notice--error{border-left-color:var(--color-melrose)}
.notice--good{border-left-color:var(--color-blue-ribbon-light)}
@media (min-width:768px){.notice{padding:2rem}}

.apply-ref{
  margin-top:1.5rem;padding:1rem 1.25rem;border-radius:var(--radius-card);
  background:var(--color-white-5);border:1px solid var(--color-white-10);
  font-size:var(--text-regular);
}
.apply-ref span{
  display:block;margin-top:.25rem;
  font-size:var(--text-small);color:var(--color-white-50);
}

/* Product brand plates and hero lockups. Same treatment as the network marks:
   the product leads with its own logo rather than an abstract render. */
.brandplate--platformsync{--plate-a:#153576;--plate-b:#050d1a}
.brandplate--lnlmtr{--plate-a:#0a2d52;--plate-b:#04101c}
.brandplate--platformsync img{width:min(74%,20rem)}
.brandplate--lnlmtr img{width:min(54%,14rem)}

.brand-lockup{display:flex;align-items:center;height:2.5rem;margin-bottom:1.5rem}
@media (min-width:768px){.brand-lockup{height:3.25rem}}
.brand-lockup img{height:100%;width:auto;object-fit:contain}
.brand-lockup--center{justify-content:center}
.brand-lockup--icon{height:3.25rem}
@media (min-width:768px){.brand-lockup--icon{height:4rem}}