/* DATUM: the nav's Products menu and the menu on small screens.
   Its own file so every page can carry it, the V3.5-based home included,
   which does not load datum.css. Load after the page's own styles; with
   assets/nav-menu.js. Bump ?v= on every change. */

/* ---------- nav: products ----------
   Products opens the three industries, in words, over a band of the same
   grained light as the hero and the footer. The light swells under the one
   the pointer is on, and it means "live": warm under Aviation, the product
   today; under Maritime and Rail, still to come, it cools to grey. Their
   columns still lead somewhere: to the contact form, to register interest.
   The panel opens downward out of the word and its columns arrive one
   after another. Where the pointer is shows twice already, in the name
   brightening and the light swelling under it, so there is no highlight
   box as well. datum.js paints the light, only while the panel is open. */
.nav-drop { position: relative; display: flex; align-items: center; pointer-events: auto; }
/* a bridge over the gap, so the pointer can travel from the word to the panel */
.nav-drop::after { content: ""; position: absolute; left: -24px; right: -24px; top: 100%; height: 22px; }
.nav-drop > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-drop > a svg { width: 9px; height: 9px; opacity: .7; transition: transform .45s var(--ease, cubic-bezier(.16, 1, .3, 1)); }
.nav-drop:hover > a, .nav-drop:focus-within > a { color: var(--ink, #f5f2ef); }
.nav-drop:hover > a svg, .nav-drop:focus-within > a svg { transform: rotate(180deg); }
.drop {
  position: absolute; top: calc(100% + 16px); left: 50%; width: 624px; transform: translateX(-40%);   /* 624, not 600: room for "Airframe · Engines · Inventory" on one line */
  border-radius: 20px; overflow: hidden;
  /* over the hero the glass goes nearly solid, so the hero's glow does not
     tint the whole panel through it (see --over-hero below) */
  background: rgba(14,13,12, calc(.94 + .05 * var(--over-hero, 0))); border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  opacity: 0; visibility: hidden; translate: 0 -6px; clip-path: inset(0 0 100% 0 round 20px);
  transition: opacity .25s var(--ease, cubic-bezier(.16, 1, .3, 1)), translate .5s var(--ease, cubic-bezier(.16, 1, .3, 1)), clip-path .45s var(--ease, cubic-bezier(.16, 1, .3, 1)), visibility 0s linear .45s;
}
.nav-drop:hover .drop, .nav-drop:focus-within .drop {
  opacity: 1; visibility: visible; translate: 0 0; clip-path: inset(0 0 0 0 round 20px);
  transition: opacity .3s var(--ease, cubic-bezier(.16, 1, .3, 1)), translate .6s var(--ease, cubic-bezier(.16, 1, .3, 1)), clip-path .75s var(--ease, cubic-bezier(.16, 1, .3, 1)), visibility 0s;
}
/* One light per screen. Over the hero, its glow is the light: the menu
   makes only an ember of its own, and its top edge catches the hero's
   instead, brightest in the middle, as if that light were landing on it.
   Further down, with the hero's glow gone, the band comes back in full.
   datum.js sets --over-hero on the nav, 1 at the top of a page with a
   hero glow, easing to 0 as the glow is scrolled away.Where its edge is
   lit, and how much, is measured (--lx, --ly, --li: see "catching the
   hero's light" in datum.js), so the light comes from where the glow is. */
.drop-light { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; mix-blend-mode: screen; pointer-events: none;
  opacity: calc(1 - .68 * var(--over-hero, 0)); }
/* review: Versions "Menu over the hero: Full glow" keeps the band at full strength at the top of a page too */
html[data-menudim="full"] .drop-light { opacity: 1; }
.drop::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(circle 460px at var(--lx, 50%) var(--ly, -60px), rgba(255,160,64, calc(.7 * var(--li, 0))), rgba(244,107,1, calc(.18 * var(--li, 0))) 45%, transparent 78%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.drop::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle 420px at var(--lx, 50%) var(--ly, -60px), rgba(228,74,0, calc(.12 * var(--li, 0))), transparent 70%); }
.drop-items { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 10px; }
.nav-links .drop-items a {
  position: relative; display: grid; align-content: start; gap: 6px; padding: 16px 16px 78px; border-radius: 12px; color: var(--ink-2, #b4aea8);
  opacity: 0; translate: 0 8px; transition: color .4s var(--ease, cubic-bezier(.16, 1, .3, 1)), opacity .2s var(--ease, cubic-bezier(.16, 1, .3, 1)), translate .2s var(--ease, cubic-bezier(.16, 1, .3, 1));
}
.nav-drop:hover .drop-items a, .nav-drop:focus-within .drop-items a {
  opacity: 1; translate: 0 0;
  transition: color .4s var(--ease, cubic-bezier(.16, 1, .3, 1)), opacity .5s var(--ease, cubic-bezier(.16, 1, .3, 1)) calc(var(--i, 0) * 60ms + 140ms), translate .7s var(--ease, cubic-bezier(.16, 1, .3, 1)) calc(var(--i, 0) * 60ms + 140ms);
}
.nav-links .drop-items a:hover, .nav-links .drop-items a.on, .nav-links .drop-items a:focus-visible { color: var(--ink, #f5f2ef); }
.d-idx { font-family: var(--brand, "Michroma", "Arial Black", sans-serif); font-size: 8px; letter-spacing: .14em; color: var(--mute, #8a837c); }
.d-name { font-size: 22px; letter-spacing: -.03em; line-height: 1.1; }
.d-sub { font-size: 12.5px; line-height: 1.45; color: var(--mute, #8a837c); text-wrap: pretty; }
/* Aviation's three products by name, as the brother's menu has them: plain words, not links */
.d-feats { margin-top: 4px; font-size: 12.5px; color: var(--ink-2, #b4aea8); }
/* under the three industries, the Aviation products by name: a slim row that comes in with the cards */
.drop-items .d-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 4px; padding: 12px 16px 6px;
  border-top: 1px solid var(--rule, rgba(255,255,255,.08)); font-size: 13.5px; opacity: 0; translate: 0 8px;
  transition: opacity .2s var(--ease, cubic-bezier(.16, 1, .3, 1)), translate .2s var(--ease, cubic-bezier(.16, 1, .3, 1)); }
.nav-drop:hover .drop-items .d-row, .nav-drop:focus-within .drop-items .d-row { opacity: 1; translate: 0 0;
  transition: opacity .5s var(--ease, cubic-bezier(.16, 1, .3, 1)) 330ms, translate .7s var(--ease, cubic-bezier(.16, 1, .3, 1)) 330ms; }
.drop-items .d-row span { margin-right: 4px; font-family: var(--brand, "Michroma", "Arial Black", sans-serif); font-size: 7.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute, #8a837c); }
.nav-links .drop-items .d-row a { display: inline; padding: 4px 0; border-radius: 0; opacity: 1; translate: none; color: var(--ink-2, #b4aea8); transition: color .3s var(--ease, cubic-bezier(.16, 1, .3, 1)); }
.nav-links .drop-items .d-row a:hover, .nav-links .drop-items .d-row a:focus-visible { color: var(--ink, #f5f2ef); }
.d-tag { justify-self: start; margin-top: 6px; font-family: var(--brand, "Michroma", "Arial Black", sans-serif); font-size: 7px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute, #8a837c);
  padding: 6px 9px 5px; border-radius: 999px; border: 1px solid var(--rule-2, rgba(255,255,255,.13)); white-space: nowrap; }

/* ---------- nav: the menu on small screens ----------
   Where the links do not fit, one button opens them over the whole screen:
   the pages in large type, the three industries under Products with the
   same live light and quiet "coming soon", and the grained light rising
   along the bottom. datum.js builds it from the nav, so a page needs no
   extra markup. */
.nav-menu { display: none; pointer-events: auto; width: 42px; height: 42px; margin-left: 10px; border-radius: 50%;
  border: 1px solid var(--rule-2, rgba(255,255,255,.13)); background: rgba(10,9,8,.5); color: var(--ink, #f5f2ef); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); align-items: center; justify-content: center; }
.nav-menu svg { width: 16px; height: 16px; }
/* The layer reaches 160px past every edge of the screen, its content kept inside by padding (2026-10-24, the user: on a phone the menu
   "gets pushed" and shows the glow and a black part under it). A phone's address bar grows and shrinks and a fixed layer can lag behind
   it, which uncovers the page; this way there is nothing to uncover. */
.msheet { position: fixed; inset: -160px 0; padding: 160px 0; box-sizing: border-box; z-index: 60; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
  background: radial-gradient(90% 40% at 50% 0%, rgba(255,112,8,.2), transparent 72%), #000;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease, cubic-bezier(.16, 1, .3, 1)), visibility 0s linear .35s; }
.msheet.open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease, cubic-bezier(.16, 1, .3, 1)), visibility 0s; }
/* the menu brings its own link and button styles (2026-10-18). It is built on every page, and some pages
   (Products) style their links one by one with no page-wide reset: there its links came out blue and
   underlined, and its Contact us button plain text. */
.msheet { color: var(--ink, #f5f2ef); }
.msheet a, .nav-drop .drop a { color: inherit; text-decoration: none; }
.msheet-foot .pill { display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; border: 0; border-radius: 999px;
  background: var(--ink, #f5f2ef); color: #050505; font-size: 13px; font-weight: 500; line-height: 1; }
.msheet-top { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter, clamp(20px, 5vw, 80px)); }
.msheet-top .nav-menu { display: inline-flex; margin: 0; }
.msheet-nav { display: grid; align-content: start; padding: 18px var(--gutter, clamp(20px, 5vw, 80px)) 24px; overflow-y: auto; }
.msheet-nav > a, .msheet-nav > .msub { opacity: 0; translate: 0 14px; transition: opacity .2s var(--ease, cubic-bezier(.16, 1, .3, 1)), translate .2s var(--ease, cubic-bezier(.16, 1, .3, 1)); }
.msheet.open .msheet-nav > a, .msheet.open .msheet-nav > .msub {
  opacity: 1; translate: 0 0; transition: opacity .55s var(--ease, cubic-bezier(.16, 1, .3, 1)) calc(var(--i, 0) * 55ms + 100ms), translate .8s var(--ease, cubic-bezier(.16, 1, .3, 1)) calc(var(--i, 0) * 55ms + 100ms); }
.msheet-nav > a { padding: 8px 0; font-size: clamp(32px, 9vw, 44px); font-weight: 300; line-height: 1.1; letter-spacing: -.045em; color: var(--ink, #f5f2ef); }
/* the page you are on is not singled out in orange (2026-10-18, the user): every page reads the same, in white */
.msheet-nav > a[aria-current="page"] { color: var(--ink, #f5f2ef); }
/* the industries under Products: no rules between them (2026-10-18), only their own small step in */
.msub { display: grid; margin: 0 0 12px; padding-left: 2px; }
.msub a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
.msub .d-name { font-size: 18px; color: var(--ink-2, #b4aea8); }
.msub .d-tag { margin: 0; }
.msub a:first-child .d-name { color: var(--ink, #f5f2ef); }
.msub .mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 9px 0; }
.msub .mrow span { width: 100%; font-family: var(--brand, "Michroma", "Arial Black", sans-serif); font-size: 7.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute, #8a837c); }
.msub .mrow a { display: inline; padding: 0; border: 0; font-size: 16px; color: var(--ink-2, #b4aea8); }
.msheet-foot { position: relative; display: flex; justify-content: center; padding: 26px var(--gutter, clamp(20px, 5vw, 80px)) calc(40px + env(safe-area-inset-bottom)); }
.msheet-foot .pill { position: relative; z-index: 1; }
.msheet-light { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 190px; mix-blend-mode: screen; pointer-events: none; }
html.msheet-on, html.msheet-on body { overflow: hidden; }
/* Once the menu is up, the page behind it is hidden, so if anything is ever uncovered it is plain black, not the page's glow; it also
   stops the browser painting a page nobody can see. It waits for the fade-in, and comes back at once on close. */
html.msheet-on { background: #000; }
html.msheet-on body > *:not(.msheet) { visibility: hidden; transition: visibility 0s linear .4s; }
/* A link to another page fades the menu through black, instead of cutting from the menu to a black page and a glow that arrives late */
.msheet::after { content: ""; position: absolute; inset: 0; z-index: 5; background: #000; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.msheet.leaving::after { opacity: 1; }

@media (max-width: 900px) {
  .nav .wrap > .pill { margin-left: auto; }
  .nav-menu { display: inline-flex; }
  /* a bigger Contact us and menu button on a phone (2026-10-24, the user: they felt small), then the header's a step back
     (the user: a tad big, and the one at the foot of the open menu small): the header's words 14px, 43px tall, the menu
     button 44px, and the header is left there (the user, "that was fine"). The one at the foot of the open menu is the one
     that was made bigger, then a little less wide and high again (the user): 16px words, about 180px by 47px */
  html[data-roll] .nav .wrap > .pill { font-size: 14px; padding-block: 10.5px; padding-inline: 24px; }
  .nav-menu { width: 44px; height: 44px; margin-left: 12px; }
  .msheet-foot .pill { font-size: 16px; padding: 15px 40px; min-width: 180px; }
  .nav-menu svg { width: 18px; height: 18px; }
}
/* Pulling the page down at its top (a phone, and a laptop's trackpad) used to stretch it and show a strip of plain black above the
   hero's glow (the user, 2026-10-24); the page now stops at its top. */
html, body { overscroll-behavior-y: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-drop .drop, .drop-items a, .msheet, .msheet-nav > *, .msheet::after { transition: none !important; }
}

/* ---------- buttons ----------
   A pill's label rolls: the word goes up and out and the same word comes in
   from below. The copy is a text shadow, so a screen reader hears the word
   once. An arrow button's arrow leaves the way it points and another
   arrives. nav-menu.js wraps the label; nothing else moves. */
.pill { overflow: hidden; }
.pill:hover { transform: none; }
.pill-t { display: block; text-shadow: 0 2.8em 0 currentColor; transition: transform .55s var(--ease, cubic-bezier(.16, 1, .3, 1)); }
/* the roll answers a real hover (a mouse) and keyboard focus. On a phone a tap counts as hover too, so the label
   rolled as the page was leaving, which looked like a glitch: there a tap just goes (2026-10-18) */
.pill:focus-visible .pill-t { transform: translateY(-2.8em); }
@media (hover: hover) { .pill:hover .pill-t { transform: translateY(-2.8em); } }
.arw-in { display: flex; width: 18px; overflow: hidden; }
.arw-in svg { flex: 0 0 18px; transition: transform .5s var(--ease, cubic-bezier(.16, 1, .3, 1)); }
.arw-next .arw-in svg { transform: translateX(-100%); }
@media (hover: hover) {
  .arw-next:hover:not(:disabled) .arw-in svg { transform: translateX(0); }
  .arw-prev:hover:not(:disabled) .arw-in svg { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) { .pill-t, .arw-in svg { transition: none; } }

/* phones (2026-10-20): no blue anywhere a link is touched. Android flashes a blue box over whatever is tapped
   (the browser's tap highlight); the buttons answer a press themselves. And if an iPhone still turns an address,
   number or date into a link (the format-detection meta in each head asks it not to), it wears the text round it. */
html { -webkit-tap-highlight-color: transparent; }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit !important; }

/* the menu's round buttons (open, close): a quiet white ring when focused, not the site's orange one */
.nav-menu:focus-visible { outline: 1.5px solid rgba(245,242,239,.55); outline-offset: 3px; }

/* ---------- review: two site-wide choices from the brother's notes (2026-10-19), set by palette.js ----------
   Nav when scrolled (data-navshade): "much darker once you scroll, but not a solid bar". The shade under the
   bar is deeper and longer (black at the top, still .86 under the logo and links, then a short fade), and
   still fades to nothing, so there is no edge; "blur" also softens what passes under it.
   Button labels (data-roll): off = the label stays put on hover ("Contact us" rolling into "Contact us" says
   nothing); the arrow buttons keep their swap. */
html[data-navshade="dark"] .nav::before, html[data-navshade="blur"] .nav::before {
  height: clamp(120px, 12vw, 156px);
  background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.97) 50%, rgba(0,0,0,.86) 72%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
html[data-navshade="blur"] .nav::before { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* "soft" (2026-10-20, the user: "a bit darker, not way more, keep the same fade"): the default since. The same
   shade as before with the same soft edge, a step deeper under the links (.62 -> .78 halfway down) and a little
   longer, so the words passing under the nav stop competing with it. "now" is the shade before this. */
html[data-navshade="soft"] .nav::before {
  height: clamp(128px, 13vw, 172px);
  /* an eased fall-off (many stops, no mask) so there is no point where the shade seems to stop */
  background: linear-gradient(180deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.95) 18%, rgba(0,0,0,.86) 36%, rgba(0,0,0,.70) 52%,
    rgba(0,0,0,.48) 66%, rgba(0,0,0,.27) 79%, rgba(0,0,0,.11) 90%, rgba(0,0,0,.03) 96%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: none; mask-image: none;
}
html[data-roll="off"] .pill:hover .pill-t, html[data-roll="off"] .pill:focus-visible .pill-t { transform: none; }
/* Button labels "arrow" (2026-10-20, the user's pick from the button lab, C "Arrow arrives"; the default since): the
   words stay; on hover they step 9px left and a small arrow slides in where they were, so the button says where the
   click goes instead of rolling into the same words. The button keeps its size (a few px more padding either side
   leaves the room). Touch screens have no hover, so there the arrow is simply shown, the words already stepped
   aside. nav-menu.js gives every pill its .pill-ar; it hides under every other choice. */
.pill-ar { display: none; }
html[data-roll="arrow"] .pill { position: relative; padding-inline: 27px; }
html[data-roll="arrow"] .pill.pill-sm { padding-inline: 23px; }
html[data-roll="arrow"] .pill-t { text-shadow: none; transition: transform .5s var(--ease, cubic-bezier(.16, 1, .3, 1)); }
html[data-roll="arrow"] .pill-ar { display: block; position: absolute; right: 13px; top: 50%; width: 12px; height: 12px; margin-top: -6px; overflow: hidden; pointer-events: none; }
html[data-roll="arrow"] .pill-sm .pill-ar { right: 11px; }
html[data-roll="arrow"] .pill-ar svg { display: block; width: 12px; height: 12px; opacity: 0; transform: translateX(-9px);
  transition: transform .5s var(--ease, cubic-bezier(.16, 1, .3, 1)), opacity .3s var(--ease, cubic-bezier(.16, 1, .3, 1)); }
html[data-roll="arrow"] .pill:focus-visible .pill-t { transform: translateX(-9px); }
html[data-roll="arrow"] .pill:focus-visible .pill-ar svg { opacity: 1; transform: none; }
@media (hover: hover) {
  html[data-roll="arrow"] .pill:hover .pill-t { transform: translateX(-9px); }
  html[data-roll="arrow"] .pill:hover .pill-ar svg { opacity: 1; transform: none; }
}
/* Touch screens (2026-10-20, the user: the arrow is nice as a hover effect, so with no hover, no arrow): the words
   alone, centred. Shown all the time, as before, is Versions "Arrow on phones: Before". */
@media (hover: none) {
  html[data-roll="arrow"][data-pillphone="arrow"] .pill .pill-t { transform: translateX(-9px); }
  html[data-roll="arrow"][data-pillphone="arrow"] .pill .pill-ar svg { opacity: 1; transform: none; }
}
/* Which arrow (2026-10-20, the user: "a more modern chevron"; Versions "Arrow"). nav-menu.js draws all of them in
   the one svg and this shows the chosen one: the line arrow (before), a plain chevron, the diagonal one that rises
   in from the lower left, and a chevron whose shaft draws in behind it once it has arrived. */
.pill-ar path { display: none; }
html:not([data-pillar]) .pill-ar .ar-chev, [data-pillar="line"] .pill-ar .ar-line, [data-pillar="chev"] .pill-ar .ar-chev,
[data-pillar="diag"] .pill-ar .ar-diag, [data-pillar="grow"] .pill-ar :is(.ar-shaft, .ar-head) { display: inline; }
html[data-roll="arrow"][data-pillar="diag"] .pill-ar svg { transform: translate(-7px, 7px); }
.pill-ar .ar-shaft { stroke-dasharray: 10; stroke-dashoffset: 10; transition: stroke-dashoffset .4s var(--ease, cubic-bezier(.16, 1, .3, 1)) .12s; }
html[data-roll="arrow"] .pill:focus-visible .ar-shaft { stroke-dashoffset: 0; }
@media (hover: hover) { html[data-roll="arrow"] .pill:hover .ar-shaft { stroke-dashoffset: 0; } }
@media (hover: none) { html[data-roll="arrow"][data-pillphone="arrow"] .pill .ar-shaft { stroke-dashoffset: 0; } }
/* Footer, Versions "Footer" (2026-10-23, the user: the footer on phones looks tired; is there a more traditional
   layout). Simple: the two link groups that need a heading, Products and Company. How to reach us sits under the
   name as plain lines, without a Contact heading, and Privacy and Terms move into the bottom row beside the
   copyright, where most company sites keep them. Four headed columns become two, and on a phone the footer gets
   about a third shorter. The pieces it uses are in every footer's markup and stay hidden until it is chosen;
   :has() keeps a page that lacks them (an older footer) from losing its columns. */
.footer .footer-reach, .footer .footer-legal { display: none; }      /* .footer first: the pages' own .footer-bottom nav { display: flex } outranks a bare class */
html[data-foot="simple"] .footer:has(.footer-reach) :is([data-col="legal"], [data-col="contact"]) { display: none; }
html[data-foot="simple"] .footer-reach { display: grid; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--ink-2, #b4aea8); font-size: 15px; }
html[data-foot="simple"] .footer-reach a { color: inherit; transition: color .3s ease; }
html[data-foot="simple"] .footer-reach a:hover { color: var(--ink, #f5f2ef); }
html[data-foot="simple"] .footer-legal { display: flex; gap: 24px; }
html[data-foot="simple"] .footer-legal a { color: inherit; transition: color .3s ease; }
html[data-foot="simple"] .footer-legal a:hover { color: var(--ink, #f5f2ef); }
@media (min-width: 961px) {
  /* the two groups stay where Products and Company stand today, with an empty track to their right: pushed to
     the far right they sat on the brightest part of the horizon, which rises to the right */
  html[data-foot="simple"] .footer-top { grid-template-columns: 1fr auto auto minmax(0, .85fr); column-gap: clamp(56px, 7vw, 112px); }
}
@media (max-width: 600px) {
  html[data-foot="simple"] .footer-top { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  /* the copyright, Privacy and Terms on one line, left-aligned. On a phone the horizon sits a fixed height above
     the bottom, so a second line would run into its light, and the right end of the row is where the
     back-to-top button sits */
  html[data-foot="simple"] .footer-bottom { justify-content: flex-start; flex-wrap: nowrap; gap: 18px; }
  html[data-foot="simple"] .footer-legal { gap: 18px; }
}