/* ==========================================================================
   ASEVA - styles.css
   Structure:
     1. Design tokens        (colours, type, spacing - edit here first)
     2. Base & typography
     3. Layout helpers
     4. Header & navigation
     5. Buttons & links
     6. Sections & content blocks
     7. Figures (hero survey drawing, corridor map, chain diagram)
     8. Contact form
     9. Footer
    10. Motion & reduced-motion
    11. Responsive
   ========================================================================== */

/* 1. DESIGN TOKENS ======================================================== */

:root {
  /* Colour. Brand green is an accent only: links, active nav, thin rules,
     buttons and small marks. It never covers large areas. */
  --paper:        #FAF8F4;   /* warm off-white, main background          */
  --paper-alt:    #F1EEE7;   /* slightly deeper warm tone, for banding   */
  --white:        #FFFFFF;
  --ink:          #2A3327;   /* warm dark olive, headings   12.4:1       */
  --body:         #55564D;   /* warm grey, body copy         7.0:1       */
  --muted:        #6A6B60;   /* captions and meta            5.1:1       */
  --green:        #6BA34F;   /* brand accent: rules, marks, dark-bg links */
  --green-ink:    #46722F;   /* readable green: links, buttons  5.3:1    */
  --green-deep:   #375A24;   /* hover state                             */
  --graphite:     #1E1D1A;   /* footer and closing band                 */
  --line:         #E3DFD6;   /* hairlines                               */
  --line-strong:  #D3CEC1;

  /* Type */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale (8px base) */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4.5rem;
  --s7: 6.5rem;

  /* Shape: one small radius system, deliberately restrained */
  --radius: 4px;

  /* Layout */
  --container: 1140px;
  --measure: 66ch;
  --header-h: 72px;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* 2. BASE & TYPOGRAPHY ==================================================== */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 400;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.35rem, 1.55rem + 3.1vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.021em;
}

h2 {
  font-size: clamp(1.85rem, 1.4rem + 1.7vw, 2.7rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
}

h3 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 var(--s1);
}

p { margin: 0 0 var(--s3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--ink); }

/* Lead paragraph, used once per page under the h1 */
.lead {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink);
}

.prose { max-width: var(--measure); }

.caption {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  margin: var(--s3) 0 0;
}

/* 3. LAYOUT HELPERS ======================================================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding-block: clamp(3.5rem, 7vw, var(--s7)); }
.section--alt { background: var(--paper-alt); }
.section--tight { padding-block: clamp(2.5rem, 5vw, var(--s6)); }

/* A hairline that carries the section break rather than decorating it */
.section--ruled { border-top: 1px solid var(--line); }

.section-head { max-width: var(--measure); margin-bottom: var(--s5); }
.section-head p:last-child { margin-bottom: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: var(--s2) var(--s3);
  z-index: 60;
}
.skip-link:focus { left: 0; }

/* 4. HEADER & NAVIGATION ================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; }
.brand img { display: block; height: 38px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }

.nav a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding-block: var(--s1);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav a:hover::after { transform: scaleX(1); }
}

.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 0.45rem;
  cursor: pointer;
  line-height: 0;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

/* 5. BUTTONS & LINKS ====================================================== */

a { color: var(--green-ink); }
a:hover { color: var(--green-deep); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 170ms var(--ease-out),
              border-color 170ms var(--ease-out),
              color 170ms var(--ease-out),
              transform 110ms var(--ease-out);
}

.btn--primary { background: var(--green-ink); color: var(--white); }
.btn--primary:hover { background: var(--green-deep); color: var(--white); }

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn--light { background: var(--white); color: var(--graphite); }
.btn--light:hover { background: #EFEDE6; color: var(--graphite); }

.btn:active { transform: scale(0.98); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}

/* Quick cross-page links shown only on a stacked hero (Solutions, About),
   see the mobile breakpoint below. Desktop's side-by-side layout has
   nowhere for this dead space to open up, so it stays hidden there. */
.hero-cross-nav { display: none; }

:focus-visible {
  outline: 2px solid var(--green-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 6. SECTIONS & CONTENT BLOCKS ============================================ */

/* Hero -------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 78vh, 780px);
  padding-block: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}

/* .container spans the full hero, but only the copy inside it is ever
   drawn on; the rest is empty space sitting, at a higher stacking order,
   directly over the globe underneath. pointer-events: none here, restored
   on the three actual pieces of copy, lets hover and click pass through
   the empty two thirds to the canvas, the same fix Solutions needed for
   its clickable sectors. */
.hero > .container { position: relative; z-index: 1; pointer-events: none; }
.hero-copy, .hero .lead, .hero .btn-row { pointer-events: auto; }
.hero h1 {
  margin-bottom: var(--s3);
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
}

/* Fixed widths, not ch: the column must stay roughly a third of a wide
   screen so the globe keeps the rest of the room. */
.hero-copy { max-width: 30rem; }
.hero .lead { max-width: 26rem; }

/* The globe sits behind the copy and is faded out across the text column,
   so the left side stays clean paper and the drawing lives in the space
   that was empty before. Adjust the gradient stops to move that boundary.
   pointer-events is off by default (About's sphere, sharing this class, has
   nothing to hover), turned back on for the Home globe alone below, since
   only that one has ports to hover or tap. */
.hero-globe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg,
      transparent 0%, transparent 30%, rgba(0, 0, 0, 0.06) 35%,
      rgba(0, 0, 0, 0.22) 39%, rgba(0, 0, 0, 0.45) 43%,
      rgba(0, 0, 0, 0.70) 47%, rgba(0, 0, 0, 0.90) 50%, #000 54%);
  mask-image: linear-gradient(100deg,
      transparent 0%, transparent 30%, rgba(0, 0, 0, 0.06) 35%,
      rgba(0, 0, 0, 0.22) 39%, rgba(0, 0, 0, 0.45) 43%,
      rgba(0, 0, 0, 0.70) 47%, rgba(0, 0, 0, 0.90) 50%, #000 54%);
}
#hero-globe { pointer-events: auto; }

/* About hero: copy left, sphere right, same structure as the Home hero -----
   Identical rules to .hero/.hero-copy, kept as its own class rather than
   reused directly, since .hero is tied in CLAUDE.md to the Home globe
   specifically. js/about-globe.js draws the sphere with the same palette,
   oversized and cropped by .hero-globe's own mask, just held still and
   carrying a small node network instead of country outlines. */
.about-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 78vh, 780px);
  padding-block: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.about-hero > .container { position: relative; z-index: 1; }
.about-hero h1 { margin-bottom: var(--s3); }
.about-hero-copy { max-width: 30rem; }
.about-hero .lead { max-width: 26rem; }

/* Page header used on Solutions / Contact ----------------------------------- */
.page-head { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.page-head h1 { max-width: 20ch; }
.page-head .lead { max-width: 54ch; margin-top: var(--s3); }

/* Definition rows: label on the left, explanation on the right.
   Used for the three areas on Home. Hairline between rows only. */
.rows { border-top: 1px solid var(--line); }

.row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1rem, 4vw, 3.5rem);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.row-label { display: flex; align-items: baseline; gap: 0.75rem; }
.row-label h3 { margin: 0; font-size: 1.15rem; }
.row-icon { color: var(--green); flex: none; transform: translateY(3px); }
.row-icon svg { width: 20px; height: 20px; display: block; }
.row p { margin: 0; max-width: 56ch; }

/* Solution blocks --------------------------------------------------------- */
.block {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + var(--s3));
}
.block:first-of-type { border-top: 0; }
.block h2 { max-width: 20ch; }
.block > p { max-width: var(--measure); }

.block-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* Plain lists with a small green mark. No side stripes, no cards. */
.marked { list-style: none; margin: 0; padding: 0; }
.marked li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
  max-width: 52ch;
}
.marked li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 1px;
  background: var(--green);
}
.marked li:last-child { margin-bottom: 0; }

/* Partners ------------------------------------------------------------------
   The one named exception to the anonymous partner network (see CLAUDE.md):
   four long term technology partners, shown with their own logo, pulled
   from their own site. Plain rows, same hairline rhythm as .row and .block
   elsewhere, no card chrome. Logos are reproduced as given, not recoloured. */
.partners { border-top: 1px solid var(--line); }

.partner {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: center;
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
}
.partner:last-child { border-bottom: 0; }

.partner-logo { display: flex; align-items: center; height: 44px; }
.partner-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }

.partner-body p { margin: 0; max-width: 52ch; }

/* Closing band ------------------------------------------------------------ */
.band {
  background: var(--graphite);
  color: #C9C7BE;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.band h2 { color: var(--white); max-width: 22ch; }
.band p { max-width: 46ch; margin-bottom: 0; }
.band .btn-row { margin-top: var(--s4); }

/* 7. FIGURES ============================================================== */

.figure { margin: 0; }
.figure svg { display: block; width: 100%; height: auto; }

/* Solutions hero: a sphere with four sectors, one design with Home --------
   Same structure as the Home hero (js/globe.js): copy on the left, an
   oversized sphere cropped by the section on the right, faded out across
   the text column by the same mask gradient. js/solutions-globe.js draws
   it with the hero globe's own palette (paper/land/graticule/limb), except
   the "land" is four wavy-bordered sectors, one per direction, each a
   slightly different tone so they read apart the way countries do. */

.solutions-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 62vh, 640px);
  padding-block: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
/* .container is full width so the copy column can sit inside the usual
   grid, but only the left third of it actually holds anything: the rest
   was sitting over the sphere, at a higher stacking order, quietly
   swallowing clicks and hovers on whichever sector fell underneath it
   (the top two, at this section's proportions - the bottom two happened
   to clear the copy block's own height and were never affected).
   pointer-events: none here, restored on the copy column itself, lets a
   click pass straight through the empty two-thirds to the canvas. */
.solutions-hero > .container { position: relative; z-index: 1; pointer-events: none; }
.solutions-hero h1 {
  margin-bottom: var(--s3);
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
}
.solutions-hero-copy { max-width: 30rem; pointer-events: auto; }
.solutions-hero .lead { max-width: 26rem; }

.hub-globe-wrap {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(100deg,
      transparent 0%, transparent 30%, rgba(0, 0, 0, 0.06) 35%,
      rgba(0, 0, 0, 0.22) 39%, rgba(0, 0, 0, 0.45) 43%,
      rgba(0, 0, 0, 0.70) 47%, rgba(0, 0, 0, 0.90) 50%, #000 54%);
  mask-image: linear-gradient(100deg,
      transparent 0%, transparent 30%, rgba(0, 0, 0, 0.06) 35%,
      rgba(0, 0, 0, 0.22) 39%, rgba(0, 0, 0, 0.45) 43%,
      rgba(0, 0, 0, 0.70) 47%, rgba(0, 0, 0, 0.90) 50%, #000 54%);
}
.hub-globe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The names live inside the sphere's own sectors, clickable there for
   a mouse. These links are the real, always-accessible fallback: off
   screen until a keyboard visitor tabs to one, same as .skip-link, so
   nobody has to find a moving target on a canvas. */
.hub-legend { list-style: none; margin: 0; padding: 0; }
.hub-legend-btn {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 500;
  padding: var(--s2) var(--s3);
}
.hub-legend-btn:focus { left: 0; }

/* 8. CONTACT FORM ========================================================= */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.contact-details p { margin-bottom: var(--s2); }
.contact-details .label--spaced { margin-top: var(--s4); }

.contact-details .label {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.field { margin-bottom: var(--s3); }

.field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color 160ms var(--ease-out);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }

.field input:hover,
.field textarea:hover { border-color: var(--muted); }

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--green-ink);
  outline: 2px solid var(--green-ink);
  outline-offset: 1px;
}

.field textarea { resize: vertical; min-height: 9rem; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  margin-bottom: var(--s3);
  font-size: 0.95rem;
}
.notice--ok { background: #E8F0E2; color: #2F5220; border: 1px solid #C6DCB8; }
.notice--error { background: #F6E7E4; color: #7A2E22; border: 1px solid #E5C6C0; }

/* 9. FOOTER =============================================================== */

.site-footer {
  background: var(--graphite);
  color: #A8A79C;
  padding-block: var(--s6) var(--s4);
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: var(--s5);
  padding-bottom: var(--s5);
}

.site-footer h3 {
  color: #C9C7BE;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--s2);
}

.site-footer p { color: #A8A79C; margin-bottom: 0.35rem; }
.site-footer a { color: var(--green); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 0.4rem; }

.footer-brand p { max-width: 34ch; }

.footer-base {
  border-top: 1px solid #34322D;
  padding-top: var(--s3);
  color: #7E7D74;
  font-size: 0.85rem;
}

/* 10. MOTION ============================================================== */

/* The globe is drawn and rotated in js/globe.js, which honours the
   reduced-motion setting by rendering a single static frame. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* 11. RESPONSIVE ========================================================== */

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: var(--s2) clamp(1.25rem, 4vw, 2.5rem) var(--s3);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding-block: 0.8rem; font-size: 1.05rem; }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--green-ink); }
  .nav .btn { margin-top: var(--s2); justify-content: center; }

  .row { grid-template-columns: 1fr; gap: var(--s2); }
  .block-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }

  /* Partner logos come from each partner's own site, at whatever aspect
     ratio and internal padding they shipped with; the 140px column that
     keeps them aligned on desktop just isn't enough to also keep them
     looking even on a narrow phone. Name and description carry the block
     on mobile instead. */
  .partner { grid-template-columns: 1fr; }
  .partner-logo { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .hero-copy { max-width: none; }
  .hero .lead { max-width: none; }
  .about-hero-copy { max-width: none; }
  .about-hero .lead { max-width: none; }

  /* Taller hero, so the globe has room under the copy instead of behind it.
     Text pins to the top instead of centring: with align-items: center
     (the desktop default) still active, a short headline like Home's
     leaves the flex box centring it in a tall empty box, so the title
     floats deep into the page below a blank gap instead of sitting near
     the nav like Solutions and About's longer headline happened to.
     Solutions had this fix already; Home and About did not. */
  .hero, .about-hero {
    align-items: flex-start;
    padding-top: clamp(2.5rem, 6vw, 4rem);
    min-height: clamp(620px, 88vh, 880px);
    min-height: clamp(620px, 88svh, 880px);
  }

  /* Stacked hero: the fade turns vertical and starts below the buttons, so
     the copy always sits on clean paper. */
  .hero-globe {
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%, transparent 50%, rgba(0, 0, 0, 0.06) 57%,
        rgba(0, 0, 0, 0.20) 62%, rgba(0, 0, 0, 0.42) 67%,
        rgba(0, 0, 0, 0.66) 72%, rgba(0, 0, 0, 0.86) 76%, #000 81%);
    mask-image: linear-gradient(to bottom,
        transparent 0%, transparent 50%, rgba(0, 0, 0, 0.06) 57%,
        rgba(0, 0, 0, 0.20) 62%, rgba(0, 0, 0, 0.42) 67%,
        rgba(0, 0, 0, 0.66) 72%, rgba(0, 0, 0, 0.86) 76%, #000 81%);
  }

  .solutions-hero-copy { max-width: none; }
  .solutions-hero .lead { max-width: none; }
  .solutions-hero {
    /* Text pins to the top instead of centring, so it cannot float down
       into the circle's space regardless of how many lines it wraps to. */
    align-items: flex-start;
    padding-top: clamp(2.5rem, 6vw, 4rem);
    min-height: clamp(680px, 92vh, 880px);
    min-height: clamp(680px, 92svh, 880px);
  }
  /* No fade here, unlike .hero-globe: .hero-cross-nav already draws a
     clean, opaque edge between the copy and the sphere, so the sphere
     itself should read at one even opacity top to bottom, not half-pale
     the way a fade tuned for a longer, button-less gap left it. */
  .hub-globe-wrap {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-cross-nav { display: flex; margin-top: var(--s3); }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; justify-content: center; }
  }