/* fs-mobile.css — the responsive layer for index.html.
 *
 * The Claude Design export ships its own @media rules (1180px and 860px,
 * in the <style> of the <head>). They were written at desktop width and
 * treat everything under 860px as one "phone" tier, so a 768px tablet gets
 * 20px gutters and a 54px headline, and a few things still collide or
 * overflow. This file loads after the export's CSS and adds the tiers it
 * lacks:
 *
 *   ≤1180  tablet landscape   — the talent portrait overflow
 *   ≤860   tablet portrait    — the mobile menu; the hero fills its box;
 *          (601–860)            tablets get 36px gutters and larger type
 *                               than phones; reveal-on-scroll and the
 *                               hero intro (fs-mobile.js sets the hooks)
 *   ≤600   phone              — a 100svh hero with the copy on the dark
 *                               part of the gradient, a 53px sticky bar,
 *                               two-across stat grids, the recruiting
 *                               photograph above its copy instead of
 *                               behind it, tighter section rhythm,
 *                               full-width buttons
 *
 * It is linked (not inlined) so that it survives a re-import: hand edits
 * to index.html are overwritten by tools/import-dc.mjs; this file is not.
 * Selectors follow the export's own convention of matching on inline style
 * fragments ([style*="…"]), since the export has no classes. The
 * `!important`s are needed because the styles they override are inline.
 *
 * Every image the importer dimensioned gets `height: auto`: the `height`
 * attribute is a presentational hint that otherwise wins over the design's
 * inline `aspect-ratio`, which rendered the overview photographs 597px and
 * 885px tall at every width (c89). Inline heights still win.
 */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img[width][height] { height: auto; }

/* ── Touch feedback (every width, touch screens only) ─────────────────── */
@media (hover: none) {
  a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  a:active, button:active { transition-duration: 80ms; }
  [data-screen-label] a[style*="padding: 1"]:active, [data-fx-nav] a[style*="padding: 1"]:active,
  [data-fx-prev]:active, [data-fx-next]:active, [data-fx-menu-btn]:active, #fx-menu > header > button:active { transform: scale(0.97); }
  [data-spec-head]:active, #fx-menu > nav > a:active, #contact a:active { opacity: 0.6; }
}

/* ── Spec accordion: the body fades in when a row opens ──────────────── */
/* The export's script toggles display, which cannot transition on its own;
   @starting-style gives the first frame a state to transition from. Browsers
   without it show the body at once, as before. */
@media (prefers-reduced-motion: no-preference) {
  [data-spec-body] { transition: opacity 280ms ease, translate 280ms cubic-bezier(0.22, 1, 0.36, 1); }
  @starting-style { [data-spec-body] { opacity: 0; translate: 0 -6px; } }
}

/* ── Mobile menu (markup built by fs-mobile.js) ────────────────────────── */
[data-fx-menu-btn] { display: none; }
#fx-menu[hidden] { display: none; }
#fx-menu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: #080F26; color: #F7F5EE;
  opacity: 0; transition: opacity 240ms ease;
}
#fx-menu[data-open] { opacity: 1; }
#fx-menu > header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; min-height: 60px; border-bottom: 1px solid rgba(247,245,238,0.18);
}
#fx-menu > header > a { display: flex; align-items: center; gap: 12px; color: #F7F5EE; }
#fx-menu > header > a > span:first-child { width: 28px; height: 22px; display: block; }
#fx-menu > header > a > span:last-child { font-weight: 700; font-size: 19px; letter-spacing: -0.02em; white-space: nowrap; }
#fx-menu > header > button,
[data-fx-menu-btn] {
  font: inherit; font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  background: none; border: 1px solid rgba(247,245,238,0.55); color: #F7F5EE;
  padding: 0 12px; min-height: 36px; cursor: pointer; line-height: 1;
}
#fx-menu > nav { display: flex; flex-direction: column; padding-top: 6px; }
#fx-menu > nav > a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid rgba(247,245,238,0.14);
  color: #F7F5EE; font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -0.025em;
}
#fx-menu > nav > a > small {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500; font-size: 11px; letter-spacing: 0.18em; color: #AFC2F2; min-width: 2ch;
}
#fx-menu > nav > a:hover, #fx-menu > nav > a:active { color: #AFC2F2; }
#fx-menu > footer {
  margin-top: auto; padding-top: 28px;
  display: flex; flex-direction: column; gap: 4px;
  font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
#fx-menu > footer > a { color: #AFC2F2; padding: 6px 0; }
#fx-menu > footer > a:hover { color: #F7F5EE; }
/* the links rise in one after another as the panel fades up */
@media (prefers-reduced-motion: no-preference) {
  #fx-menu > nav > a, #fx-menu > footer {
    opacity: 0; transform: translateY(16px);
    transition: opacity 360ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms;
  }
  #fx-menu[data-open] > nav > a, #fx-menu[data-open] > footer { opacity: 1; transform: none; }
  #fx-menu[data-open] > nav > a:nth-child(1) { transition-delay: 40ms; }
  #fx-menu[data-open] > nav > a:nth-child(2) { transition-delay: 80ms; }
  #fx-menu[data-open] > nav > a:nth-child(3) { transition-delay: 120ms; }
  #fx-menu[data-open] > nav > a:nth-child(4) { transition-delay: 160ms; }
  #fx-menu[data-open] > nav > a:nth-child(5) { transition-delay: 200ms; }
  #fx-menu[data-open] > nav > a:nth-child(6) { transition-delay: 240ms; }
  #fx-menu[data-open] > nav > a:nth-child(7) { transition-delay: 280ms; }
  #fx-menu[data-open] > nav > a:nth-child(n+8) { transition-delay: 320ms; }
  #fx-menu[data-open] > footer { transition-delay: 340ms; }
}

/* ── Tablet landscape (≤1180) ─────────────────────────────────────────── */
@media (max-width: 1180px) {
  /* aspect-ratio 3/2 plus the export's min-height forced the portrait to
     540px wide inside a 444px column: 56px of horizontal overflow at 1024 */
  #talent figure { min-height: 0 !important; }
}

/* ── Tablet portrait and phones (≤860) ────────────────────────────────── */
@media (max-width: 860px) {
  /* a section jumped to from the menu lands under the sticky bar otherwise */
  html { scroll-padding-top: 56px; }
  /* the three bios and the six role families stack (the 4/5/6-column grids already do) */
  [style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; row-gap: 32px !important; }
  /* footer link rows wrap instead of running off the right edge */
  #contact [style*="display: flex"] { flex-wrap: wrap !important; }

  [data-fx-menu-btn] { display: inline-flex; align-items: center; }
  [data-fx-nav] [data-fx-menu-btn] { color: #14171C; border-color: rgba(20,23,28,0.35); }
  /* the group that held the nav links now holds Contact + Menu */
  div:has(> [data-fx-navlinks]) { gap: 10px !important; }
  /* the hero is a box the copy sits at the bottom of, over the dark end
     of the gradient; the export's height: auto left the copy at the top
     and an empty band beneath it */
  #top { min-height: 78svh !important; }
  #top > div:last-child { min-height: inherit !important; }
  /* the email strip under the hero keeps the desktop gutters otherwise */
  [style*="padding: 13px 64px"] { padding: 12px 20px !important; flex-direction: column; align-items: flex-start; gap: 2px; }
  [style*="padding: 13px 64px"] > a { padding: 5px 0; }
  /* talent: the recruiting band grows with its text instead of holding a
     fixed 2.25:1 box; the photograph stays behind it */
  #careers [data-fx-recruit] { min-height: 0 !important; }
  #careers [data-fx-recruit] > div:last-child { position: relative !important; inset: auto !important; padding: 240px 28px 32px !important; }
  #careers [data-fx-roles] { row-gap: 0 !important; }
  /* the slideshow arrows sit on the photo, not over its edge */
  [data-fx-prev], [data-fx-next] { width: 42px !important; height: 42px !important; }
  [data-fx-prev] { left: 12px !important; }
  [data-fx-next] { right: 12px !important; }

  /* ── Motion (fs-mobile.js sets data-fx-reveal on section blocks) ──── */
  @media (prefers-reduced-motion: no-preference) {
    [data-fx-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 640ms ease, transform 820ms cubic-bezier(0.22, 1, 0.36, 1); }
    [data-fx-reveal="in"] { opacity: 1; transform: none; }
    [data-fx-i="1"] { transition-delay: 70ms; }
    [data-fx-i="2"] { transition-delay: 140ms; }
    [data-fx-i="3"] { transition-delay: 210ms; }
    [data-fx-i="4"] { transition-delay: 280ms; }
    [data-fx-i="5"] { transition-delay: 350ms; }
    [data-fx-i="6"] { transition-delay: 420ms; }
    [data-fx-i="7"] { transition-delay: 490ms; }
    /* the hero on load: the photograph settles from a slightly closer crop
       while the location, headline, paragraph and buttons rise in turn */
    #top > img { animation: fx-drift 9s cubic-bezier(0.22, 1, 0.36, 1) both; }
    #top > div > div:last-child > div > * { animation: fx-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
    #top > div > div:last-child > div > :nth-child(1) { animation-delay: 120ms; }
    #top > div > div:last-child > div > :nth-child(2) { animation-delay: 220ms; }
    #top > div > div:last-child > div > :nth-child(3) { animation-delay: 340ms; }
    #top > div > div:last-child > div > :nth-child(4) { animation-delay: 460ms; }
  }
}
@keyframes fx-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fx-drift { from { transform: scale(1.42) translateY(8.5%); } to { transform: scale(1.32) translateY(8.5%); } }

/* ── Tablet portrait only (601–860): undo the phone-sized defaults ────── */
@media (min-width: 601px) and (max-width: 860px) {
  #top > div > div:first-child, #top > div > div:last-child, [data-fx-nav],
  #overview, #product, #mill, #talent, #careers, #strategic, #future, #contact { padding-left: 36px !important; padding-right: 36px !important; }
  [style*="padding: 13px 64px"] { padding-left: 36px !important; padding-right: 36px !important; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
  #overview, #product, #mill, #talent, #careers, #strategic, #future { padding-top: 88px !important; padding-bottom: 80px !important; }
  #top h1 { font-size: 76px !important; }
  #top p { font-size: 20px !important; }
  h2 { font-size: 52px !important; }
  #talent h3 { font-size: 32px !important; }
  #mill h3 { font-size: 38px !important; }
  /* stats: three across, not a 1,000px-tall column */
  [style*="repeat(5, 1fr)"], [style*="repeat(6, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; row-gap: 36px !important; }
  [style*="repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  /* the two overview photographs sit side by side again */
  #overview [style*="1fr 1fr; gap: 24px"] { grid-template-columns: 1fr 1fr !important; }
  /* the six role families sit two across on a tablet */
  #careers [data-fx-roles] { grid-template-columns: 1fr 1fr !important; column-gap: 32px !important; }
  #careers [data-fx-recruit] > div:last-child { padding: 240px 36px 36px !important; }
}

/* ── Phones (≤600) ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* ── Header bars: 53px sticky, 60px in the hero (were 73 and 85) ──── */
  [data-fx-nav] { padding-top: 8px !important; padding-bottom: 8px !important; }
  [data-fx-nav] > a > span:first-child { width: 24px !important; height: 19px !important; }
  [data-fx-nav] [data-fx-brand] { font-size: 16px !important; }
  [data-fx-nav] [data-fx-menu-btn] { min-height: 36px; }
  #top > div > div:first-child { padding-top: 10px !important; padding-bottom: 10px !important; min-height: 60px; }
  #top > div > div:first-child > a > span:first-child { width: 27px !important; height: 21px !important; }
  #top [data-fx-brand] { font-size: 18px !important; }
  /* brand + Contact + Menu do not fit beside each other in 350px: the
     header keeps Menu (Contact is its last entry) and never wraps */
  #top > div > div:first-child, [data-fx-nav] { flex-wrap: nowrap !important; }
  div:has(> [data-fx-navlinks]) > a[href="#contact"] { display: none !important; }

  /* ── Hero: the first screen, photograph above, copy on the dark end ── */
  #top { min-height: 100svh !important; }
  #top > div:last-child { min-height: inherit !important; }
  /* the export's gradient is clear to 82% up, and phone copy reaches that
     high; this one is opaque enough behind every line of it */
  #top > div:nth-child(2) { background:
    linear-gradient(to bottom, rgba(8,15,38,0.34) 0%, rgba(8,15,38,0) 22%),
    linear-gradient(to top, rgba(8,15,38,0.97) 0%, rgba(8,15,38,0.86) 34%, rgba(8,15,38,0.56) 58%, rgba(8,15,38,0.12) 80%, rgba(8,15,38,0) 100%) !important; }
  #top > div > div:last-child { padding-bottom: 28px !important; }
  #top [style*="gap: 20px; max-width: 1040px"] { gap: 14px !important; }
  /* "Repowering" at 54px is 313px wide; a 360px phone has 320px */
  #top h1 { font-size: clamp(42px, 13.5vw, 54px) !important; }
  #top p { font-size: 17px !important; line-height: 1.45 !important; color: rgba(247,245,238,0.96) !important; }
  /* hero and contact calls to action: full width, one under the other */
  #top > div > div:last-child a[style*="padding: 1"], #contact a[style*="padding: 1"] { flex: 1 1 100%; text-align: center; }
  #top > div > div:last-child a[style*="padding: 1"] { padding: 15px 16px !important; font-size: 11px !important; }
  #top > div > div:last-child [style*="gap: 16px; margin-top: 8px"] { gap: 10px !important; margin-top: 4px !important; }
  /* the email strip: each address on one line at 350px */
  [style*="padding: 13px 64px"] { font-size: 11px !important; letter-spacing: 0.08em !important; }
  h2 { font-size: clamp(32px, 9.6vw, 38px) !important; }

  /* ── Section rhythm: 64/56 top and bottom, ~26px label-to-headline ─── */
  #overview, #product, #mill, #talent, #careers, #strategic, #future { padding-top: 64px !important; padding-bottom: 56px !important; }
  #contact { padding-top: 64px !important; }
  #overview > h2, #talent > h2, #mill > h2 { margin-top: 26px !important; }
  #product > [style*="margin-top: 60px"], #strategic > [style*="margin-top: 60px"], #future > [style*="margin-top: 60px"] { margin-top: 26px !important; row-gap: 40px !important; }
  #overview > [style*="margin-top: 40px"], #mill > [style*="margin-top: 52px"] { margin-top: 24px !important; row-gap: 26px !important; }
  #talent > [style*="margin-top: 48px"] { margin-top: 28px !important; row-gap: 28px !important; }
  #overview [style*="1fr 1fr; gap: 24px"] { margin-top: 40px !important; gap: 16px !important; }
  #mill figure[data-fx-slides] { margin-top: 44px !important; }
  #mill > [style*="margin-top: 72px"] { margin-top: 48px !important; }
  #careers [data-fx-recruit] { margin-top: 26px !important; }
  #careers #roles { margin-top: 56px !important; }
  #careers [data-fx-roles] { margin-top: 20px !important; }
  #future figure { order: 2; }
  #contact [style*="margin-top: 104px"] { margin-top: 56px !important; }

  /* ── Light text on the blue-black field ───────────────────────────── */
  #mill p, #careers p, #strategic p, #contact p { color: rgba(247,245,238,0.95) !important; }
  #careers [data-fx-roles] p { color: rgba(247,245,238,0.88) !important; }
  /* the DOE quotation: a heavier cut of the italic, since the thin one in
     red on navy loses its strokes at phone size */
  #strategic blockquote > div:first-child { font-size: 24px !important; font-weight: 500 !important; line-height: 1.3 !important; }

  /* ── Overview stats: two across, not a 900px column ────────────────── */
  [style*="repeat(5, 1fr)"] { grid-template-columns: 1fr 1fr !important; gap: 28px 20px !important; margin-top: 40px !important; }
  [style*="repeat(5, 1fr)"] > div { padding-top: 14px !important; }
  [style*="repeat(5, 1fr)"] [style*="font-size: 46px"] { font-size: 34px !important; white-space: nowrap; }
  [style*="repeat(5, 1fr)"] [style*="font-size: 26px"] { font-size: 19px !important; }
  [style*="repeat(5, 1fr)"] [style*="font-size: 11.5px"] { font-size: 10.5px !important; letter-spacing: 0.14em !important; margin-top: 8px !important; white-space: normal !important; }

  /* ── Product: the spec accordion's label sits above the value instead of
     colliding with it in a 92px column ─────────────────────────────── */
  [style*="118px 1fr 24px"] { grid-template-columns: 1fr 20px !important; gap: 3px 14px !important; padding: 14px 18px !important; }
  [style*="118px 1fr 24px"] > span:nth-child(1) { grid-column: 1; grid-row: 1; }
  [style*="118px 1fr 24px"] > span:nth-child(2) { grid-column: 1; grid-row: 2; }
  [style*="118px 1fr 24px"] > span:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  [data-spec-body] { padding-left: 18px !important; padding-right: 18px !important; }
  #product [style*="padding: 15px 24px"] { padding-left: 18px !important; padding-right: 18px !important; }
  /* "For buyers" box */
  #product [style*="padding: 28px 28px 30px"] { padding: 24px 20px 26px !important; gap: 16px !important; }
  #product [style*="font-size: 26px"] { font-size: 23px !important; }

  /* ── Mill: the two-up slideshow shows one 4:3 photograph at a time ──── */
  #mill [data-fx-track] { --fx-per: 1 !important; }
  #mill [data-fx-slide] { aspect-ratio: 4 / 3 !important; }
  #mill [data-fx-slides] > div { outline-offset: 8px !important; }
  #mill figcaption { margin-top: 18px !important; }
  #mill [style*="padding: 40px 44px 44px"] { padding: 26px 20px 28px !important; }
  #mill h3 { font-size: 30px !important; }

  /* ── Careers: the photograph sits above the copy, not behind it ─────── */
  /* At 350px wide the band was ~900px tall with the copy over the truck and
     a scrim thin enough to read the truck through it. The image becomes a
     4:3 block on top, the gradient goes, and the copy sits on the field. */
  #careers [data-fx-recruit] > img { position: relative !important; inset: auto !important; height: auto !important; aspect-ratio: 4 / 3; object-position: 50% 45% !important; }
  #careers [data-fx-recruit] > div:nth-child(2) { display: none !important; }
  #careers [data-fx-recruit] > div:last-child { padding: 22px 18px 24px !important; }
  #careers [data-fx-recruit] [style*="gap: 22px; max-width: 760px"] { gap: 14px !important; }
  #careers [data-fx-recruit] h2 { text-shadow: none !important; }
  #careers [data-fx-recruit] p { text-shadow: none !important; font-size: 17px !important; }
  #careers [data-fx-recruit] a[style*="padding: 1"] { flex: 1 1 100%; text-align: center; padding: 15px 16px !important; }
  #careers [data-fx-roles] > div { padding: 18px 0 24px !important; }

  /* ── Strategic: four stats two across, the button under them ────────── */
  #strategic [style*="1fr 480px"] > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  #strategic [style*="210px 1fr"] { grid-template-columns: 1fr !important; gap: 8px !important; padding: 14px 0 18px !important; }
  #strategic [style*="210px 1fr"] > div:first-child { font-size: clamp(28px, 8.6vw, 34px) !important; white-space: nowrap; }
  #strategic [style*="210px 1fr"] > div:last-child { font-size: 10.5px !important; letter-spacing: 0.14em !important; line-height: 1.5 !important; }
  #strategic [style*="210px 1fr"]:nth-child(3) { border-bottom: 1px solid rgba(247,245,238,0.16); }
  #strategic [style*="1fr 480px"] > div:last-child > a { grid-column: 1 / -1; margin-top: 24px !important; }
  #strategic blockquote { margin-top: 6px !important; padding-top: 22px !important; }

  /* ── Footer ────────────────────────────────────────────────────────── */
  #contact [style*="gap: 26px"] { gap: 4px 18px !important; }
  #contact [style*="gap: 26px"] > a { padding: 7px 0; }
  #contact [style*="margin-top: 28px"] { flex-direction: column; gap: 6px !important; margin-top: 20px !important; }
}

@media (max-width: 360px) {
  #overview, #product, #mill, #talent, #careers, #strategic, #future, #contact,
  #top > div > div:first-child, #top > div > div:last-child, [data-fx-nav] { padding-left: 16px !important; padding-right: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
