/* Fidelity Endeavor — built 2026-09-14 from the design system. Do not edit by hand. */
/* Fidelity Endeavor — webfonts. Variable fonts; weights are ranges. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-VariableItalic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* Fidelity Endeavor — colour.
   The house has three values and no accent. Brand accents live ONLY inside
   their own brand sections, as hairlines or marks — never fills, never gradients,
   never adjacent to one another. */

:root {
  /* --- House palette (the only colours the parent chrome may use) --- */
  --paper: #FBFAF7;   /* canvas — never pure white */
  --ink:   #171E2A;   /* type, hairline rules, dark sections */
  --muted: #5A6B7B;   /* secondary type only — never a fill */

  /* --- Ink at opacity, for hairlines and washes over paper --- */
  --ink-88: rgba(23, 30, 42, 0.88);
  --ink-64: rgba(23, 30, 42, 0.64);
  --ink-40: rgba(23, 30, 42, 0.40);
  --ink-16: rgba(23, 30, 42, 0.16);
  --ink-10: rgba(23, 30, 42, 0.10);
  --hairline: rgba(23, 30, 42, 0.14);  /* the standard 1px rule */
  --hairline-strong: rgba(23, 30, 42, 0.28);

  /* --- Paper at opacity, for type and rules over ink (dark sections) --- */
  --paper-88: rgba(251, 250, 247, 0.88);
  --paper-64: rgba(251, 250, 247, 0.64);
  --paper-40: rgba(251, 250, 247, 0.40);
  --hairline-inverse: rgba(251, 250, 247, 0.18);

  /* --- Semantic aliases (house) --- */
  --surface:        var(--paper);
  --surface-ink:    var(--ink);      /* dark section background */
  --text-primary:   var(--ink);
  --text-secondary: var(--muted);
  --text-inverse:   var(--paper);
  --text-inverse-secondary: var(--paper-64);
  --rule:           var(--hairline);
  --rule-strong:    var(--hairline-strong);
  --rule-inverse:   var(--hairline-inverse);

  /* --- Brand accents — SCOPED USE ONLY (see [data-brand]) --- */
  --folven-brass: #96825C;   /* FOLVEN — aged brass */
  --aurin-aurum:  #B8924A;   /* AURIN — aurum */
}

/* Brand accents are exposed as --brand-accent only within a scoped section.
   Consumers set data-brand="folven" | "aurin" on the brand block. Nothing
   outside such a block should reference --brand-accent. */
[data-brand="folven"] { --brand-accent: var(--folven-brass); }
[data-brand="aurin"]  { --brand-accent: var(--aurin-aurum); }

/* Fidelity Endeavor — typography.
   Headlines always serif (Newsreader). Body always sans (Switzer). Data mono.
   ALL CAPS only at 12px / +80 tracking for eyebrows. Body line-height 1.5–1.6.
   Italics for emphasis; never bold inside a body paragraph. */

:root {
  /* --- Families --- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Switzer", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Weights (restrained; body never goes bold) --- */
  --weight-display: 400;      /* Newsreader regular */
  --weight-body: 400;
  --weight-body-medium: 500;  /* UI labels only, not body paragraphs */
  --weight-mono: 400;

  /* --- Type scale (px). Display in serif, sizes generous. --- */
  --size-display-xl: 76px;   /* hero headline */
  --size-display-l:  56px;
  --size-display-m:  40px;
  --size-display-s:  30px;   /* sub-heads */
  --size-title:      22px;   /* card / block titles */
  --size-body-l:     19px;   /* lede paragraphs */
  --size-body:       17px;   /* default body */
  --size-body-s:     15px;   /* captions, secondary */
  --size-eyebrow:    12px;   /* ALL CAPS eyebrow — the only all-caps size */
  --size-data:       13px;   /* mono registration numbers, dates */

  /* --- Line heights --- */
  --leading-display: 1.08;
  --leading-title:   1.2;
  --leading-body:    1.55;   /* within 1.5–1.6 */
  --leading-tight:   1.3;

  /* --- Tracking --- */
  --tracking-eyebrow: 0.08em;   /* +80 */
  --tracking-display: -0.01em;  /* subtle optical tightening on large serif */
  --tracking-normal:  0;
  --tracking-data:    0.02em;
}

/* Fidelity Endeavor — space & motion.
   Generous negative space is the premium signal. Hairline rules instead of
   boxes and cards. Motion slow and physical — custom easing only. */

:root {
  /* --- Spacing scale (px) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;   /* section rhythm on large surfaces */

  /* --- Measure --- */
  --measure: 66ch;         /* body column */
  --measure-narrow: 46ch;

  /* --- Corners: the house barely rounds anything --- */
  --radius-0: 0px;
  --radius-hair: 2px;      /* marks, chips */
  --radius-s: 4px;

  /* --- Borders --- */
  --border-hairline: 1px;

  /* --- Motion: physical easing, transform + opacity only --- */
  --ease-physical: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ /* settle */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */ /* long slow arrival */
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);         /* @kind other */
  --dur-fast: 220ms;  /* @kind other */
  --dur-base: 420ms;  /* @kind other */
  --dur-slow: 720ms;  /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    /* Reduced alternative: keep opacity fades, drop travel and duration */
    --dur-fast: 120ms;  /* @kind other */
    --dur-base: 160ms;  /* @kind other */
    --dur-slow: 200ms;  /* @kind other */
  }
}

/* Fidelity Endeavor — base element defaults.
   Sets the paper canvas, the type defaults, sensible links. Kept minimal:
   the system speaks through hairlines and space, not through element chrome. */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

/* Headlines — always serif, sentence case, regular weight */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--size-display-l); }
h2 { font-size: var(--size-display-m); }
h3 { font-size: var(--size-display-s); }
h4 { font-size: var(--size-title); line-height: var(--leading-title); letter-spacing: 0; }

p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }

em { font-style: italic; }        /* emphasis is italic, not bold */
strong { font-weight: var(--weight-body-medium); }

/* Links — ink, underlined on the hairline; slow physical fade */
a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
  transition: border-color var(--dur-base) var(--ease-physical),
              opacity var(--dur-base) var(--ease-physical);
}
a:hover { border-bottom-color: var(--ink); }

/* Eyebrow — the only all-caps treatment in the system */
.fe-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1;
}

/* Hairline rule — used instead of boxes and cards */
.fe-rule { border: 0; border-top: 1px solid var(--rule); height: 0; margin: 0; }

::selection { background: var(--ink); color: var(--paper); }


/* ── Static-export additions ──────────────────────────────────────────────
   Light-only palette: declaring the scheme stops the browser painting
   native select menus, inputs and autofill dark against the paper ground. */
:root{color-scheme:light}
img,svg{max-width:100%}

/* Disclosure — the design system's React component, as plain markup. */
.fe-disclosure{border-top:1px solid var(--hairline)}
.fe-disc-toggle{all:unset;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;cursor:pointer;padding:20px 0;font-family:var(--font-display);font-size:20px;color:var(--ink)}
.fe-disc-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.fe-disc-sign{font-family:var(--font-mono);font-size:20px;color:var(--muted);transition:transform var(--dur-base) var(--ease-entrance)}
.fe-disclosure[data-open="true"] .fe-disc-sign{transform:rotate(45deg)}
.fe-disc-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--dur-slow) var(--ease-entrance),opacity var(--dur-base) var(--ease-entrance)}
.fe-disclosure[data-open="true"] .fe-disc-panel{grid-template-rows:1fr;opacity:1}
.fe-disc-panel > div{overflow:hidden}
.fe-disc-body{padding-bottom:24px;color:var(--muted);font-size:16px;line-height:1.55;max-width:var(--measure)}

/* ── Page ── */

.fe-header{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:28px 0 20px;border-bottom:1px solid var(--hairline)}
.fe-nav{display:flex;gap:26px;align-items:baseline;flex-wrap:wrap;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:0.08em}
.fe-nav a{border-bottom:none;transition:color var(--dur-base) var(--ease-entrance)}
.fe-nav a:hover{color:var(--ink)}
/* The design system sets the field transition as an inline style, so overriding
   its curve needs !important — the only place this stylesheet uses it for easing. */
.fe-field{transition:border-color var(--dur-base) var(--ease-entrance) !important}
/* BrandMark sets its 12px discipline line to the brand accent inline, which
   measures 3.6:1 (brass) and 2.8:1 (aurum) on paper — both below the 4.5:1
   AA floor for small text. The accent keeps the 2px rule, which is
   decorative and exempt; the text moves to muted at 5.3:1. Inline style, so
   this needs !important. */
[data-brand] > div:first-child{color:var(--muted) !important}
.fe-skip{position:absolute;left:-9999px;top:0}
.fe-skip:focus{left:16px;top:12px;z-index:20;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:2px;border-bottom:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:860px){[data-stack]{--stack-cols:1fr !important}}
.fe-folio{position:absolute;top:clamp(44px,7vw,96px);right:0;font-family:var(--font-display);font-size:clamp(96px,13vw,196px);line-height:0.8;color:var(--ink-10);letter-spacing:-0.02em;pointer-events:none;user-select:none;z-index:0}
@media(max-width:900px){.fe-folio{display:none}}
  #contact .fe-folio{top:auto;bottom:clamp(16px,3vw,40px)}
/* In contact the right column is the form, so a top-right folio lands on the field
   underlines. It sits in the empty space below the form instead. */
#contact .fe-folio{top:auto;bottom:clamp(16px,3vw,40px)}

/* Hero — slow abstract wash, kept strictly to house tones (no brand accent here) */
.fe-hero-wash{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;-webkit-mask-image:radial-gradient(100% 85% at 50% 40%,#000 25%,transparent 92%);mask-image:radial-gradient(100% 85% at 50% 40%,#000 25%,transparent 92%)}
.fe-hero-wash span{position:absolute;border-radius:50%}
.fe-hero-wash span:nth-child(1){width:52vw;height:52vw;left:-14%;top:-18%;background:radial-gradient(circle closest-side,var(--ink-16),transparent 72%);animation:fe-drift-a 36s var(--ease-physical) infinite alternate}
.fe-hero-wash span:nth-child(2){width:42vw;height:42vw;right:-14%;top:-4%;background:radial-gradient(circle closest-side,var(--ink-10),transparent 74%);animation:fe-drift-b 44s var(--ease-physical) infinite alternate}
.fe-hero-wash span:nth-child(3){width:34vw;height:34vw;left:22%;bottom:-22%;background:radial-gradient(circle closest-side,var(--ink-10),transparent 76%);animation:fe-drift-c 50s var(--ease-physical) infinite alternate}
@keyframes fe-drift-a{from{transform:translate(0,0) scale(1)}to{transform:translate(6%,8%) scale(1.14)}}
@keyframes fe-drift-b{from{transform:translate(0,0) scale(1)}to{transform:translate(-8%,6%) scale(0.88)}}
@keyframes fe-drift-c{from{transform:translate(0,0) scale(1)}to{transform:translate(5%,-7%) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.fe-hero-wash span{animation:none}}

/* Hero — primary CTA: hairline outline, ink fill slides in on hover (transform, not color-swap) */
/* Used as both a link (hero) and a submit button (contact), so the button chrome is reset here. */
.fe-cta{position:relative;display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;overflow:hidden;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;border-radius:var(--radius-hair);border:1px solid var(--ink);color:var(--ink);font-family:var(--font-body);font-size:15px;font-weight:500;letter-spacing:0.01em;isolation:isolate;border-bottom:1px solid var(--ink) !important;transition:color var(--dur-base) var(--ease-entrance),transform var(--dur-fast) var(--ease-entrance)}
.fe-cta-fill{position:absolute;inset:0;background:linear-gradient(100deg,var(--ink) 0%,#2B3A52 100%);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-slow) var(--ease-entrance);z-index:-1}
.fe-cta:hover .fe-cta-fill,.fe-cta:focus-visible .fe-cta-fill{transform:scaleX(1)}
.fe-cta:hover,.fe-cta:focus-visible{color:var(--paper)}
.fe-cta-arrow{transition:transform var(--dur-base) var(--ease-entrance)}
.fe-cta:hover .fe-cta-arrow{transform:translateX(3px)}
.fe-cta:active{transform:translateY(1px) !important}

/* Hero — floating stat card: hairline + soft depth instead of a heavy card, tilts on hover via JS */
.fe-float-card{position:relative;padding:16px 20px 18px;background:var(--paper-88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--hairline);border-radius:var(--radius-s);box-shadow:0 1px 2px var(--ink-10);transition:transform var(--dur-base) var(--ease-entrance),box-shadow var(--dur-base) var(--ease-entrance)}
.fe-float-card:hover{box-shadow:0 26px 46px -22px var(--ink-16),0 2px 5px var(--ink-10)}

/* Capabilities — bento of hairline cells. Depth comes from shadow and light, not fills;
   radius stays at the house 4px and the beam is ink, never an accent. */
@property --beam-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.fe-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.fe-bento-cell{min-width:0}
.fe-bento-cell--feature{grid-column:span 2;grid-row:span 2}
.fe-bento-cell--wide{grid-column:span 3}
.fe-bento-inner{position:relative;height:100%;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,32px);border:1px solid var(--hairline);border-radius:var(--radius-s);background:var(--paper);box-shadow:0 1px 2px var(--ink-10);overflow:hidden;transition:transform var(--dur-base) var(--ease-entrance),box-shadow var(--dur-base) var(--ease-entrance),border-color var(--dur-base) var(--ease-entrance)}
.fe-bento-icon{color:var(--ink);transition:transform var(--dur-base) var(--ease-entrance)}
/* border beam: a single ink hairline segment tracking the perimeter */
.fe-bento-inner::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--beam-angle),transparent 0turn,transparent 0.58turn,var(--ink-40) 0.75turn,transparent 0.92turn);-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);mask-composite:exclude;opacity:0;transition:opacity var(--dur-base) var(--ease-entrance);pointer-events:none;z-index:2}
@keyframes fe-beam-spin{to{--beam-angle:1turn}}
/* Width-gated, not hover-gated: touch-capable Windows laptops report hover:none
   even with a mouse attached, which would disable all of this. */
@media(min-width:861px),(hover:hover){
  .fe-bento-cell:hover .fe-bento-inner{transform:translateY(-4px);box-shadow:0 28px 48px -24px var(--ink-16),0 2px 6px var(--ink-10);border-color:var(--hairline-strong)}
  .fe-bento-cell:hover .fe-bento-inner::before{opacity:1;animation:fe-beam-spin 4.5s linear infinite}
  .fe-bento-cell:hover .fe-bento-icon{transform:var(--icon-hover,translateY(-2px))}
}
@media(max-width:1000px){
  .fe-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fe-bento-cell--feature{grid-column:span 2;grid-row:auto}
  .fe-bento-cell--wide{grid-column:span 2}
}
@media(max-width:640px){
  .fe-bento{grid-template-columns:minmax(0,1fr)}
  .fe-bento-cell--feature,.fe-bento-cell--wide{grid-column:span 1}
}
/* Reduced motion keeps the beam (it travels, the layout does not) and drops the lift. */
@media(prefers-reduced-motion:reduce){
  .fe-bento-cell:hover .fe-bento-inner,.fe-bento-cell:hover .fe-bento-icon{transform:none}
}

/* Record — counters sit under their own 2px rule, in the display serif with tabular figures
   so the width never shifts while ticking. */
.fe-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.fe-stat{border-top:2px solid var(--ink);padding-top:18px;min-width:0}
.fe-stat-num{font-family:var(--font-display);font-size:clamp(44px,6vw,72px);line-height:1;letter-spacing:-0.02em;color:var(--ink);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.fe-stat-num small{font-size:0.42em;letter-spacing:0.02em;color:var(--muted);margin-left:2px}
.fe-stat-label{margin-top:14px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.07em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.fe-stat-note{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
@media(max-width:900px){.fe-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.fe-stats{grid-template-columns:minmax(0,1fr)}}

/* Milestone tabs — a sliding ink rule, and panels that cross-fade through a soft blur */
.fe-tabs{position:relative;display:flex;flex-wrap:wrap;border-bottom:1px solid var(--hairline)}
.fe-tab{appearance:none;background:none;border:0;border-radius:0;padding:14px 22px 16px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color var(--dur-base) var(--ease-entrance)}
.fe-tab:first-child{padding-left:0}
.fe-tab:hover,.fe-tab[aria-selected="true"]{color:var(--ink)}
.fe-tab-indicator{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ink);transition:transform var(--dur-base) var(--ease-entrance),width var(--dur-base) var(--ease-entrance);pointer-events:none}
/* The container reserves the tallest panel once (set in JS) rather than transitioning
   height — animating height lays out every frame, and the system is transform/opacity only. */
.fe-panels{position:relative;margin-top:clamp(28px,4vw,44px)}
.fe-panel{position:absolute;top:0;left:0;right:0;opacity:0;transform:translateX(20px);filter:blur(6px);pointer-events:none;transition:opacity var(--dur-base) var(--ease-entrance),transform var(--dur-slow) var(--ease-entrance),filter var(--dur-base) var(--ease-entrance)}
.fe-panel[data-state="leaving"]{transform:translateX(-20px)}
.fe-panel[data-state="active"]{opacity:1;transform:none;filter:blur(0);pointer-events:auto}
@media(prefers-reduced-motion:reduce){
  .fe-panel,.fe-panel[data-state="leaving"]{transform:none;filter:none}
}

/* Contact — each door is a rule that darkens, the same idiom as a focused field.
   There is no error colour in the palette, so an invalid field thickens its rule
   to ink and states the problem in words. */
.fe-door{border-top:1px solid var(--hairline);padding-top:18px;transition:border-top-color var(--dur-base) var(--ease-entrance)}
.fe-door:hover,.fe-door:focus-within{border-top-color:var(--ink)}
.fe-door dt{font-family:var(--font-mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.fe-door dd{margin:8px 0 0}
.fe-door-note{font-size:15px;color:var(--muted)}

.fe-select{width:100%;border:0;border-bottom:1px solid var(--hairline-strong);background:transparent;font-family:var(--font-body);font-size:17px;line-height:1.5;color:var(--ink);padding:8px 0;outline:none;border-radius:0;appearance:none;-webkit-appearance:none;transition:border-color var(--dur-base) var(--ease-entrance)}
.fe-select:focus{border-bottom-color:var(--ink)}
.fe-select-wrap{position:relative}
.fe-select-wrap::after{content:"";position:absolute;right:2px;bottom:16px;width:7px;height:7px;border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);transform:rotate(45deg);pointer-events:none}
.fe-field-error{display:block;font-family:var(--font-mono);font-size:12px;line-height:1.5;letter-spacing:0.02em;color:var(--ink);margin-top:7px}
.fe-field-error:empty{margin-top:0}
.fe-field[aria-invalid="true"]{border-bottom-width:2px;border-bottom-color:var(--ink)}
.fe-form-status{font-family:var(--font-mono);font-size:13px;line-height:1.6;letter-spacing:0.02em;color:var(--muted)}

/* Footer */
.fe-footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(28px,5vw,64px)}
@media(max-width:760px){.fe-footer-cols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fe-footer-cols{grid-template-columns:1fr}}
.fe-footer-head{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.fe-footer-link{display:inline-block;font-size:15px;color:var(--muted);border-bottom:1px solid transparent !important;padding:4px 0;transition:color var(--dur-base) var(--ease-entrance)}
.fe-footer-link:hover{color:var(--ink)}
.fe-totop{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid transparent !important;transition:color var(--dur-base) var(--ease-entrance)}
.fe-totop:hover{color:var(--ink)}
.fe-totop span{transition:transform var(--dur-base) var(--ease-entrance)}
.fe-totop:hover span{transform:translateY(-3px)}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile. Everything collapses to one column via [data-stack] and the grid
   breakpoints above; what follows repairs the things a stack alone leaves
   broken, and re-points the micro-interactions at touch.
   ───────────────────────────────────────────────────────────────────────── */

/* The tab strip must never wrap: the sliding indicator is positioned from
   offsetLeft within the strip, so a second row would leave it stranded on
   the bottom edge under the wrong tab. It scrolls instead, and JS centres
   the selected tab. */
@media(max-width:760px){
  .fe-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fe-tabs::-webkit-scrollbar{display:none}
  .fe-tab{flex:0 0 auto}
}

@media(max-width:640px){
  /* The nav used to be display:none here, which left a phone with no
     navigation at all. It becomes a full-bleed scrolling strip instead. */
  .fe-header{flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:16px}
  .fe-nav{flex-wrap:nowrap;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;width:100%;margin:0 calc(-1 * clamp(24px,5vw,40px));padding:0 clamp(24px,5vw,40px)}
  .fe-nav::-webkit-scrollbar{display:none}
  .fe-nav a{flex:0 0 auto;padding:8px 20px 8px 0;white-space:nowrap}

  /* 15px links at 4px padding are a ~27px target; lift them to ~44px. */
  .fe-footer-link{padding:11px 0}
  .fe-totop{padding:13px 0}
}

/* Touch has no cursor, so the beam, the ambient glow, the card tilt and the
   magnetic pull have no honest equivalent — they stay desktop-only rather
   than being faked. What replaces them: a press state on the things that are
   actually interactive, and the icon settling in as its card arrives. */
@media(hover:none){
  .fe-bento-inner{transition:transform var(--dur-fast) var(--ease-entrance),box-shadow var(--dur-fast) var(--ease-entrance)}
  .fe-tab:active,.fe-footer-link:active,.fe-totop:active{color:var(--ink)}
  .fe-cta:active .fe-cta-fill{transform:scaleX(1)}
  .fe-cta:active{color:var(--paper)}
  .fe-bento-cell[data-rev-state="shown"] .fe-bento-icon{animation:fe-icon-settle var(--dur-slow) var(--ease-entrance) both}
}
@keyframes fe-icon-settle{from{transform:translateY(-5px);opacity:0.35}to{transform:none;opacity:1}}
/* reduced motion keeps the arrival, drops the travel — as everywhere else here */
@keyframes fe-icon-fade{from{opacity:0.35}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .fe-bento-cell[data-rev-state="shown"] .fe-bento-icon{animation-name:fe-icon-fade}
}
  
/* Reduced motion is ON in this environment, and tokens/spacing.css collapses the
   durations to 120/160/200ms — too short for any easing curve to read as anything
   but a snap. Duration is not what causes vestibular trouble; travel is, and travel
   is already dropped in the blocks above (no slide, no blur, no tilt, no parallax
   drift). So the durations are restored to near-full here and the curve gets room to
   breathe. Scoped to this page — tokens/spacing.css is untouched. Delete this block
   to return to the systems own reduced-motion timing. */
@media(prefers-reduced-motion:reduce){
  :root{--dur-fast:200ms;--dur-base:360ms;--dur-slow:560ms}
}