/* =========================================================================
   Sidus Strategic Solutions — visual system  (V0.5 "Constellation", paper & ink)
   Cool paper ground · deep-blue node accent · editorial-luxe.
   The Constellation brand direction (brand pack, Further 01) carried end to end.

   V0.5 = V0.4.1's build with the Constellation direction applied to BOTH halves
   of what a direction is: its palette AND its mark. Structure, copy, type ramp,
   motion timing and the calm (base V0.3) hero rig are untouched — this is a
   re-skin, not a redesign, so it can be judged against V0.4.1 on the direction
   alone.

   --- What Constellation is ---
   From the brand pack: "points of light, connected — one system from separate
   parts." The mark is a diamond OUTLINE with its two axes drawn through it, a
   round node at each vertex, a larger node at the centre, and two loose stars
   off-axis. Two things follow, and both are load-bearing here:

     1. The diamond survives as the FRAME, not as the atom. Sidus DNA is still a
        diamond (Sidus / Naledi = "star"), but in this direction the repeated
        small unit is a round NODE. So every 5-7px diamond speck this build
        inherited — eyebrow bullets, rule pips, proof separators, step markers —
        is a circle here. That swap is the direction, not a detail: leave the
        specks as diamonds and the page is still wearing the old mark in
        miniature while the logo wears a new one.

     2. Points are CONNECTED. The line through a node is as much the mark as the
        node is, which is why the hero draws its axes full width and the ambient
        canvas keeps its linking threads.

   --- The palette, and why it is the card's, not a lookalike ---
   Constellation ships four hexes: #0B1120 · #4E6288 · #9FB6D8 · #EAF2FF. The
   card shows them as a DARK ground; this build is light, so the ramp is used
   inverted — #0B1120 becomes the ink, #EAF2FF becomes the alternating band —
   but every value below is one of those four or a measured step between them.
   Nothing was hue-shifted to "make it work"; the direction has to survive
   contact with the page to be worth choosing.

   --- Inherited from V0.4.1, still true, do not "simplify" away ---
     · HUE does the separating. A neutral accent on paper lands on the same value
       as the body text and the page collapses into grey mush. Constellation's
       blue cast is doing that job here, which is why the neutrals stay cool.
     · Accents are METAL, and on paper the trick is the LIGHT band: a specular
       streak through an otherwise deep ramp. The streak is Constellation's own
       #4E6288 — see --metal.
     · Paper does not emit light, it receives it. Every glow is a cast SHADOW;
       --glow-accent stays `none`. A glow on paper reads as smudge.
   ========================================================================= */

/* ---- Self-hosted variable fonts (offline, no CDN) ---- */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---- Tokens ---- */
:root {
  /* The ground is Constellation's #EAF2FF, used twice: lifted a step for the page
     and at full strength for the alternating band, which therefore still sinks
     BELOW the ground exactly as V0.4.1's did. */
  --paper:      #F5F8FE;   /* page ground — #EAF2FF lifted one step */
  --paper-2:    #EAF2FF;   /* alternating band — Constellation's lightest, as shipped */
  --surface:    #FFFFFF;   /* cards, panels — lift toward white */
  --surface-2:  #FFFFFF;   /* raised / hover — white is the ceiling, so hover lifts
                              by SHADOW instead of by value; see --shadow-lift */
  /* Alphas run a touch higher than V0.4.1's (.13/.20/.34). Constellation's accent
     is a LIGHTER blue than the graphite it replaces, so the same alpha laid down
     a visibly fainter hairline; these restore the drawn weight. */
  --hair:         rgba(78, 98, 136, 0.15);
  --hair-2:       rgba(78, 98, 136, 0.22);
  --hair-accent:  rgba(78, 98, 136, 0.38);

  /* neutrals stay cool, for the same reason V0.4.1's did: to keep a gap the accent
     can live in. Warm greys here would close it and mute the blue cast. */
  --text:       #0B1120;   /* Constellation's ground hex, serving as the ink */
  --body:       #44557A;
  /* --muted is held to the same AA parity rule V0.4.1 set: it must clear 4.5:1 on
     ALL THREE grounds, not just the page. Measured: paper 5.11, paper-2 4.83,
     white 5.44. Lightening it to match the old speck-grey by eye drops paper-2
     under 4.5 — the band is the tightest of the three and is what pins this. */
  --muted:      #5B6A88;

  --accent:        #4E6288;  /* Constellation's mid, as shipped — 5.76:1 on paper */
  --accent-strong: #17264A;  /* the emphatic end — a measured step toward #0B1120 */
  --accent-soft:   #9FB6D8;  /* Constellation's light-mid, as shipped — decorative only */
  --accent-wash:   rgba(78, 98, 136, 0.10);
  --accent-rgb:    78, 98, 136;

  /* Small labels (eyebrows, chapter indices, card numbers). On black these needed
     a specular halo to stop them flattening into the surrounding greys. On paper
     they don't: a dark blue label separates from --muted body text by hue AND by
     value at once. So the halo is removed outright rather than inverted — a glow
     on paper reads as smudge, not as light. --glow-accent is kept (as `none`) so
     the rules that used it stay structurally identical to V0.3.2. */
  --accent-label:  #43567C;
  --glow-accent:   none;

  /* The button metal ramp — dark, with a LIGHT specular streak at 62%. On paper the
     metal is dark, so what sells it as polished is the highlight, not the shadow.
     Three of the four stops are Constellation's own hexes: the deep end is #0B1120
     and the streak is #4E6288. That streak is the brightest point of the button's
     background, so the button's own label (#F6F9FF) has to clear 4.5:1 against it
     — this measures 5.81:1, up from V0.4.1's 4.86:1, because Constellation's mid
     is darker than the #52709A streak it replaces. Headroom, not a regression. */
  --metal: linear-gradient(180deg, #3A4C70 0%, #0B1120 34%, #4E6288 62%, #101A31 100%);

  /* Paper needs elevation that black didn't: a white card on a near-white ground
     reads as unfinished with only a hairline. Soft and layered, never a hard edge.
     Tinted to the Constellation ground rather than a neutral grey, so the shadow
     under a card is the same blue the rest of the page is lit by. */
  --shadow-card: 0 1px 2px rgba(11, 17, 32, 0.04), 0 8px 24px rgba(23, 38, 74, 0.06);
  --shadow-lift: 0 2px 6px rgba(11, 17, 32, 0.06), 0 16px 40px rgba(23, 38, 74, 0.11);

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Type ramp. One size per role, one weight per role. Every serif display
         element picks from this list — nothing sets an ad-hoc size or weight. --- */
  --fs-display:   clamp(2.3rem, 5.2vw, 3.85rem);   /* hero headline only */
  --fs-promise:   clamp(1.32rem, 2.4vw, 1.82rem);  /* hero promise line */
  --fs-statement: clamp(2rem, 3.9vw, 3rem);        /* h2 · gap quote · about statement */
  --fs-vm:        clamp(1.15rem, 2vw, 1.5rem);     /* vision / mission cards */
  --fs-h3:        clamp(1.2rem, 2vw, 1.4rem);      /* card + step headings */
  --fs-lead:      clamp(1.05rem, 1.6vw, 1.22rem);
  --fs-body:      0.95rem;
  --fs-micro:     0.72rem;                          /* eyebrows, labels, step nums */

  --w-display: 620;   /* hero only — deliberately the boldest thing on the page */
  --w-head:    500;   /* every other serif display element */
  --w-body:    400;

  --wrap: 1160px;
  --gap: clamp(1.5rem, 4vw, 3rem);
  --section-y: clamp(4.75rem, 10vw, 8.5rem);
  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(var(--accent-rgb), 0.18); color: var(--text); }

:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; border-radius: 4px; }

/* ---- Filmic grain (fixed, whole page) ----
   `overlay` is a dark-ground blend: on paper it barely registers, and what does
   register reads as grey dirt. `multiply` at a lower opacity darkens only, which
   is what paper tooth actually does to light. */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--serif); color: var(--text);
  font-weight: var(--w-head); line-height: 1.08; letter-spacing: -0.015em;
  text-wrap: balance; margin: 0;
}
h2 { font-size: var(--fs-statement); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }
p { margin: 0; }
em { font-style: italic; }

.eyebrow {
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-label);
  text-shadow: var(--glow-accent);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
/* A NODE, not a diamond speck — see rule 1 in the header note. Same 6px footprint
   and the same cast shadow; only the silhouette changes. Every other small mark on
   the page follows this one. */
.eyebrow::before {
  content: ""; width: 6px; height: 6px; background: var(--accent);
  border-radius: 50%; box-shadow: 0 1px 3px rgba(var(--accent-rgb), 0.35);
}

/* chapter kicker: faint serif index + eyebrow */
.kicker { display: flex; align-items: baseline; gap: 0.9rem; }
.kicker__idx {
  font-family: var(--serif); font-size: 0.95rem; font-weight: var(--w-head);
  color: var(--accent-label); text-shadow: var(--glow-accent);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  position: relative; padding-right: 0.9rem;
}
.kicker__idx::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 0.5rem; height: 1px;
  background: var(--hair-accent);
}
.kicker--center { justify-content: center; }

.lead { color: var(--body); font-size: var(--fs-lead); line-height: 1.65; }
.measure { max-width: 62ch; }

/* ---- Layout ---- */
.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; scroll-margin-top: 92px; }
.section--alt { background: var(--paper-2); }
.section__head { max-width: 64ch; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.section__head h2 { margin-top: 1rem; }
.section__head .lead { margin-top: 1.1rem; max-width: 58ch; }

/* Divider with a node. This is now the mark's own cross-axis in miniature — a
   line running through a lit point — which is why it reads as Constellation
   rather than as a generic ornament. */
.starrule { display: flex; align-items: center; gap: 1rem; color: var(--hair-accent); }
.starrule::before, .starrule::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--hair-2), transparent);
}
.starrule i {
  width: 7px; height: 7px; background: var(--accent); border-radius: 50%; flex: none;
  box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.32);
}

/* ---- Navigation ---- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(245, 248, 254, 0.85);   /* --paper, translucent */
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--hair);
  padding-block: 0.65rem;
}
/* ---- The lockup ----
   V0.4.1 set the logo as a raster PNG (her supplied mark + wordmark, flattened).
   Constellation ships a redrawn VECTOR mark, so the lockup is rebuilt as inline
   SVG + live text: it scales without a 2x asset, it inherits --text and --accent
   instead of being baked, and the nav's shrink-on-scroll becomes a font-size
   change rather than a resample. The proportions are the brand pack's own
   (mark : wordmark ≈ 2.4 : 1, tagline tracked to 0.26em).

   The tagline holds a 8px floor rather than scaling with the mark. At the brand
   pack's ratio it would land near 5px in the nav — the PNG it replaces was no
   better, but "no worse than the thing we're fixing" isn't the bar. */
.nav__logo { display: inline-flex; align-items: center; gap: 0.62rem; }
.lockup__mark {
  width: 34px; height: 34px; flex: none; display: block; overflow: visible;
  transition: width 0.4s var(--ease), height 0.4s var(--ease);
}
.lockup__text { display: flex; flex-direction: column; gap: 0.14rem; line-height: 1; }
.lockup__name {
  font-family: var(--sans); font-size: 0.98rem; font-weight: 600;
  letter-spacing: 0.16em; color: var(--text);
  transition: font-size 0.4s var(--ease);
}
.lockup__tag {
  font-family: var(--sans); font-size: 0.5rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent);
}
/* The PNG lockup this replaces was one image and could not wrap. Live text can,
   and does: at 390px the nav squeezes the tagline onto two lines and the lockup
   stops looking like a logo. Both lines are pinned. */
.lockup__name, .lockup__tag { white-space: nowrap; }
.nav.is-stuck .lockup__mark { width: 29px; height: 29px; }
.nav.is-stuck .lockup__name { font-size: 0.88rem; }

/* The mark's own parts, shared by every instance (nav, footer, hero is separate).
   Strokes carry the frame, fills carry the light — inverted to ink on paper, so
   the "points of light" are the DARKEST things in the mark rather than the
   brightest. Same inversion the whole build runs on. */
.lockup__mark .mk-frame { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0.55; }
.lockup__mark .mk-node  { fill: var(--text); }
.lockup__mark .mk-star  { fill: var(--accent); opacity: 0.75; }
.nav__links { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.2rem); }
.nav__links a.link { font-size: 0.9rem; color: var(--body); position: relative; transition: color 0.25s var(--ease); }
.nav__links a.link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: var(--accent); transition: width 0.3s var(--ease);
}
.nav__links a.link:hover { color: var(--text); }
.nav__links a.link:hover::after { width: 100%; }
.nav__links a.link.is-active { color: var(--text); }
.nav__links a.link.is-active::after { width: 100%; background: var(--accent); opacity: 0.8; }

@media (max-width: 720px) { .nav__links .link { display: none; } }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 600;
  letter-spacing: 0.01em; padding: 0.8rem 1.4rem; border-radius: 999px;
  cursor: pointer; border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
/* the primary button is the dark metal on paper — the inverse of V0.3, where it
   was the light metal on black. Same object, same ramp logic, opposite ground.
   Class name kept as .btn--silver so the markup stays identical across versions. */
.btn--silver {
  background: var(--metal);
  color: #F6F9FF; box-shadow: 0 8px 30px -12px rgba(var(--accent-rgb), 0.42);
}
.btn--silver:hover { transform: translateY(-2px); box-shadow: 0 14px 38px -12px rgba(var(--accent-rgb), 0.55); }
.btn--silver:hover svg { transform: translateX(3px); }
.btn--ghost { border-color: var(--hair-2); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-strong); transform: translateY(-2px); }

/* ============================ HERO ============================ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding-block: 7rem 6rem; overflow: hidden;
}
#stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* Inherited from V0.4.1 unchanged (only the accent inside it is Constellation's):
   base V0.3's original THREE-layer rig, inverted, where V0.4 carries V0.3.2's six.
   No dedicated headline vignette here and none needed: V0.3.2 added one to darken
   black behind white type, but on paper the ground is already the bright end, so
   ink type has its contrast for free. This is the single biggest reason this hero
   reads calm rather than lit — and keeping it is what makes V0.5 a fair test of
   the DIRECTION rather than of a new hero. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* jewel halo — a cool tint pooling around the dark mark */
    radial-gradient(48% 55% at 78% 30%, rgba(var(--accent-rgb), 0.07), transparent 60%),
    /* faint lower-left fill so the frame isn't one-sided */
    radial-gradient(60% 50% at 12% 108%, rgba(var(--accent-rgb), 0.04), transparent 60%),
    /* centering wash, settling into the paper ground */
    radial-gradient(100% 100% at 30% 55%, rgba(255, 255, 255, 0.34), var(--paper) 80%);
}
.hero .wrap { position: relative; z-index: 3; }
.hero__inner { max-width: 48rem; }
.hero__eyebrow { margin-bottom: 1.6rem; }

/* The headline — the boldest, clearest thing on the page, by request. */
.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--w-display);
  line-height: 1.03; letter-spacing: -0.028em;
  max-width: 20ch;
}
.hero__title span { display: block; }

.hero__rule { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.7rem; max-width: 20rem; }
.hero__rule i {
  width: 6px; height: 6px; background: var(--accent); border-radius: 50%; flex: none;
  box-shadow: 0 1px 4px rgba(var(--accent-rgb), 0.35);
}
.hero__rule::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, var(--hair-accent), transparent);
}

/* The promise line kept from V0.1, demoted below the tagline but still large. */
.hero__promise {
  margin-top: 1.1rem; max-width: 30ch;
  font-family: var(--serif); font-style: italic; font-weight: var(--w-body);
  font-size: var(--fs-promise); line-height: 1.3;
  color: var(--accent);
}
.hero__promise em { color: var(--accent-strong); font-style: italic; }

.hero__sub {
  margin-top: 1.5rem; max-width: 50ch;
  font-size: var(--fs-lead); line-height: 1.62; color: var(--body);
}
.hero__cta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* proof strip */
.hero__proof {
  position: absolute; left: 0; right: 0; bottom: 2.4rem; z-index: 3;
  width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto;
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  color: var(--muted); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.hero__proof i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; opacity: 0.7; }
.hero__scroll {
  position: absolute; right: clamp(1.25rem, 4vw, 2.5rem); bottom: 2.1rem; z-index: 3;
  color: var(--muted); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.hero__scroll span { width: 1px; height: 42px; background: linear-gradient(var(--accent), transparent); }

/* ---------------- Diamond constellation (hero focal) ---------------- */
.facets {
  position: absolute; z-index: 2; pointer-events: none;
  right: -2vw; top: 50%;
  transform: translate(0, calc(-50% + var(--py, 0px)));
  will-change: transform;
  width: clamp(430px, 45vw, 700px); aspect-ratio: 1;
}
.facets svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; }

/* No .jewel-aura, no .facets__stage entrance, no ring draw-in and no .fx-spark
   here — those are V0.3.1/.2 additions and this build is base V0.3. The jewel
   simply IS, breathing on its ring clocks; it never announces itself on load.
   (The markup has no pathLength="1" either, so nothing is left half-drawn.) */

/* Raking sheen — a soft light source turning slowly behind the jewel. On paper it
   turns into a raking SHADOW instead, which reads the same way: the surface looks
   lit from a moving source rather than painted. Still the one thing here allowed
   to rotate — it is a formless blur, not a diamond, so spinning it costs nothing. */
.facets::before {
  content: ""; position: absolute; inset: 8%; z-index: 0;
  border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(var(--accent-rgb), 0.07) 38deg,
    transparent 96deg,
    transparent 200deg,
    rgba(var(--accent-rgb), 0.045) 250deg,
    transparent 312deg);
  filter: blur(26px);
  animation: sheen-turn 26s linear infinite;
}
@keyframes sheen-turn { to { transform: rotate(360deg); } }

/* The core scales about its OWN centre; the frames breathe about the shared centre
   of the viewBox. Two different transform-boxes — don't collapse them into one. */
.fx { transform-box: fill-box; transform-origin: center; }
.ring { transform-box: view-box; transform-origin: 320px 320px; }

/* --- Frame: the diamond outlines and the two axes drawn through them. ---
   V0.4.1 stacked FOUR concentric diamonds here. Constellation is a sparser mark —
   one diamond, its axes, its nodes — so the hero carries two frames, not four:
   the mark itself, and one faint outer echo that the axes run out to. Any more and
   the nested-rings read comes back and the mark stops being legible at a glance. */
.fx-frame { fill: none; stroke: rgba(var(--accent-rgb), 0.46); stroke-width: 1.3; }
.fx--outer { stroke: rgba(var(--accent-rgb), 0.20); stroke-width: 1.1; }

/* The axes are as much the mark as the nodes are — "points of light, CONNECTED".
   They fade toward the rim so the outer frame stays the quietest thing in the
   drawing while the crossing at the centre stays the loudest. */
.fx-axis { stroke: url(#axis); stroke-width: 1.2; fill: none; }

/* a soft bloom under the whole mark. On paper this is what gives it WEIGHT —
   the dark mark casts onto the page instead of glowing off it. */
.fx-halo {
  fill: rgba(var(--accent-rgb), 0.05); stroke: none;
  filter: blur(26px);
}

/* Nodes are round, and they are the DARKEST things in the drawing. On the brand
   pack's dark card these are the lit points; inverted onto paper, "lit" means
   deepest ink, exactly as the headline is. */
.fx-node { fill: var(--accent-strong); filter: drop-shadow(0 1px 2px rgba(var(--accent-rgb), 0.45)); }
/* The outer frame's nodes and the loose stars are the SUPPORTING points — they
   must never compete with the mark's own five. Held back by fill AND by a
   shallower twinkle (see fx-twinkle-soft); no static opacity here, because the
   twinkle animates that property and would simply overwrite it. */
.fx-node--outer { fill: var(--accent); }
.fx-star { fill: var(--accent); }
.fx-core {
  fill: url(#metal);   /* not a flat fill — the ramp is what makes it metal */
  filter: drop-shadow(0 6px 16px rgba(var(--accent-rgb), 0.28));
}

/* --- Travelling stars (the orbiters, reclaimed from V0.1) ---
   V0.4.1 needed a two-element rig here: an outer <g> carrying the orbit and an
   inner .orbiter__upright cancelling it, because a DIAMOND satellite that rolls
   as it travels flattens into a tilted rectangle. Constellation's loose stars are
   circles, and a circle is rotationally symmetric — so the counter-rotation has
   nothing left to cancel and the inner group is gone from both the markup and
   here. Deleted rather than left inert: an unexplained no-op is worse than the
   history it preserves. (If a future direction puts diamonds back on these
   orbits, the cancel-group has to come back with them.) */
.orbiter { transform-box: view-box; transform-origin: 320px 320px; }
@keyframes orbit-run { to { transform: rotate(360deg); } }

.orbiter--a { animation: orbit-run 44s linear infinite; }
.orbiter--b { animation: orbit-run 66s linear infinite reverse; }
.orbiter--c { animation: orbit-run 88s linear infinite; }

/* --- motion. The frames must NOT rotate. Constellation's diamond is very nearly
       square (the mark is 72 tall by 68 wide, and the hero holds that ratio), and
       a near-square is exactly the shape that reads as a DIAMOND at 45° and as a
       tilted box at any other angle — so rotation is even less survivable here
       than it was for V0.4.1's tall jewel. Instead each frame breathes about the
       shared centre on its own non-harmonic clock: the mark pulses like a field
       of light and the silhouette stays a diamond at every frame. --- */
@keyframes ring-breathe {
  0%, 100% { transform: scale(1);     opacity: 0.72; }
  50%      { transform: scale(1.045); opacity: 1; }
}
@keyframes fx-twinkle {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
/* the supporting points' swing — same clock, shallower and dimmer */
@keyframes fx-twinkle-soft {
  0%, 100% { opacity: 0.22; }
  50%      { opacity: 0.62; }
}
@keyframes fx-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.14); }
}
@keyframes fx-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.facets svg { animation: fx-drift 28s ease-in-out infinite; }

/* durations stay deliberately non-harmonic — the two frames never resync, so the
   pulse never reads as a repeating sonar ping. Same clocks V0.4.1 gave its
   equivalent rings, so the hero breathes at exactly the tempo it did before. */
.ring--mark  { animation: ring-breathe 11.5s ease-in-out infinite; animation-delay: -2.2s; }
.ring--outer { animation: ring-breathe 17.5s ease-in-out infinite; animation-delay: -8.4s; }

.fx-node, .fx-star { animation: fx-twinkle 6s ease-in-out infinite; }
/* order-dependent: this only overrides the NAME, inheriting the clock above.
   Keep it after that rule — the selectors tie on specificity. */
.fx-node--outer, .fx-star { animation-name: fx-twinkle-soft; }
.nd--a { animation-delay: -0.4s } .nd--b { animation-delay: -1.9s }
.nd--c { animation-delay: -3.1s } .nd--d { animation-delay: -4.6s }
.nd--e { animation-delay: -2.3s } .nd--f { animation-delay: -5.2s }
.nd--g { animation-delay: -1.1s } .nd--h { animation-delay: -3.8s }
.nd--i { animation-delay: -0.9s } .nd--j { animation-delay: -4.1s }
.nd--k { animation-delay: -2.7s } .nd--l { animation-delay: -5.6s }
.nd--m { animation-delay: -1.5s } .nd--n { animation-delay: -3.4s }
.nd--o { animation-delay: -5.9s } .nd--p { animation-delay: -2.1s }

.fx-core { animation: fx-pulse 7s ease-in-out infinite; }

/* hero line-reveal on load (only hidden when JS is present to reveal it) */
.js .reveal-line { opacity: 0; transform: translateY(18px); }
.js body.is-ready .reveal-line {
  animation: line-in 0.9s var(--ease) forwards;
}
.hero__eyebrow.reveal-line { animation-delay: 0.05s; }
.hero__title .reveal-line:nth-child(1) { animation-delay: 0.16s; }
.hero__title .reveal-line:nth-child(2) { animation-delay: 0.28s; }
.hero__rule.reveal-line { animation-delay: 0.40s; }
.hero__promise.reveal-line { animation-delay: 0.48s; }
.hero__sub.reveal-line { animation-delay: 0.60s; }
.hero__cta.reveal-line { animation-delay: 0.72s; }
.hero__proof.reveal-line { animation-delay: 0.88s; }
/* No filter on the hero lines: a lingering filter layer (even blur(0)) disables
   subpixel AA and softens the text vs. the other versions. Rise + fade only.
   This matters MORE on paper than it did on black — dark-on-light is exactly
   where subpixel AA does its most visible work. */
@keyframes line-in { to { opacity: 1; transform: none; } }

/* ---- 01 · About / two-column ---- */
.about__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.about__statement { margin-top: 1.3rem; line-height: 1.22; }
.about__statement em { color: var(--accent); }
.about__body .lead { margin-bottom: 1.1rem; }
.about__body p + p { margin-top: 1.1rem; }

/* ============================ 02 · THE GAP ============================ */
.gap { text-align: center; overflow: hidden; }
.gap .kicker { margin-bottom: 2rem; }
.gap__quote {
  margin: 0 auto; max-width: 22ch; font-family: var(--serif);
  font-size: var(--fs-statement); line-height: 1.18; color: var(--text);
  font-weight: var(--w-head); letter-spacing: -0.015em;
}
.gap__quote em { color: var(--accent); }
.gap__resolve {
  margin: 1.8rem auto 0; max-width: 40ch; color: var(--body);
  font-size: var(--fs-lead);
}
.gap__rule { max-width: 220px; margin: 2.8rem auto 0; }

/* ---- Vision / Mission (north star band) ---- */
.northstar__rule { max-width: 260px; margin: 0 auto clamp(2.6rem, 5vw, 3.6rem); }
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.vm__card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: clamp(1.8rem, 3vw, 2.6rem);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.vm__card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: linear-gradient(var(--accent), transparent);
}
.vm__card .eyebrow { margin-bottom: 1rem; }
.vm__text {
  font-family: var(--serif); font-size: var(--fs-vm);
  line-height: 1.35; color: var(--text); font-weight: var(--w-head);
  letter-spacing: -0.01em;
}

/* ---- Values ---- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.value { padding: 1.75rem 0 0; border-top: 1px solid var(--hair-2); position: relative; }
.value::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 42px; height: 2px;
  background: var(--accent); transition: width 0.35s var(--ease);
}
.value:hover::before { width: 100%; }
.value h3 { margin-bottom: 0.6rem; }
.value p { font-size: var(--fs-body); color: var(--muted); }

/* ---- Services / The S ---- */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.svc__card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: clamp(1.8rem, 2.8vw, 2.3rem);
  min-height: 15rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
              background 0.35s var(--ease), box-shadow 0.35s var(--ease);
  position: relative; overflow: hidden;
}
.svc__card::before { /* ghosted big index — a faint DARK ghost on paper */
  content: attr(data-n); position: absolute; right: 0.4rem; bottom: -1.2rem;
  /* 0.025, not the dark build's 0.02: ink-on-white at equal alpha reads slightly
     heavier than white-on-ink, so matching the NUMBER would overshoot the ghost */
  font-family: var(--serif); font-size: 8rem; line-height: 1; color: rgba(11, 17, 32, 0.025);
  pointer-events: none;
}
.svc__card::after { /* top accent sweep on hover */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
/* white is the ceiling, so the hover lift is carried by the SHADOW rather than by
   a step up in surface value the way it was on black */
.svc__card:hover {
  transform: translateY(-4px); border-color: var(--hair-accent);
  background: var(--surface-2); box-shadow: var(--shadow-lift);
}
.svc__card:hover::after { opacity: 1; }
.svc__num {
  font-family: var(--serif); font-size: 0.95rem; color: var(--accent-label);
  text-shadow: var(--glow-accent);
  font-variant-numeric: tabular-nums; letter-spacing: 0.05em;
  display: inline-block; margin-bottom: 1.1rem;
}
.svc__card h3 { margin-bottom: 0.7rem; position: relative; }
.svc__card p { font-size: var(--fs-body); color: var(--muted); position: relative; }
.svc__go {
  margin-top: 1.2rem; display: inline-flex; align-items: center; color: var(--accent);
  opacity: 0; transform: translateX(-6px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.svc__go svg { width: 20px; height: 20px; }
.svc__card:hover .svc__go { opacity: 1; transform: none; }

/* ---- Approach — connected node path ----
   This section was already the mark's idea in list form: separate points held on
   one line. Under Constellation it stops being an analogy — the markers are the
   mark's own nodes, and .path::before is the axis they sit on. */
.approach { position: relative; }
.path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; position: relative; }
.path::before {
  content: ""; position: absolute; top: 9px; left: 6%; right: 6%; height: 1px;
  background: linear-gradient(90deg, var(--hair-accent), var(--accent), var(--hair-accent)); opacity: 0.6;
}
.step { position: relative; padding-top: 2.6rem; }
/* 12px, not the 14px the diamond used: a rotated square is measured corner to
   corner, so matching the NUMBER would give a circle with visibly more ink than
   the marker it replaces. This matches the optical size instead. */
.step__node {
  position: absolute; top: 4px; left: 0; width: 12px; height: 12px;
  background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.10), 0 2px 8px rgba(var(--accent-rgb), 0.30);
}
.step__num { font-size: var(--fs-micro); letter-spacing: 0.2em; color: var(--accent-label);
  text-transform: uppercase; font-weight: 600; margin-bottom: 0.5rem; display: block;
  text-shadow: var(--glow-accent); }
.step h3 { margin-bottom: 0.55rem; }
.step p { font-size: var(--fs-body); color: var(--muted); }

/* ---- Contact ---- */
.contact { text-align: center; }
.contact__inner {
  max-width: 760px; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--hair-accent);
  border-radius: 20px; padding: clamp(2.6rem, 6vw, 4.5rem);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.contact__inner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, rgba(var(--accent-rgb), 0.07), transparent 70%);
}
.contact__inner > * { position: relative; }
.contact__eyebrow { justify-content: center; }
.contact h2 { margin: 1rem 0; }
.contact .lead { max-width: 46ch; margin: 0 auto 2rem; }
.contact__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.contact__meta { margin-top: 2.2rem; color: var(--muted); font-size: 0.9rem;
  display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.contact__meta a { color: var(--body); border-bottom: 1px solid var(--hair-accent); }
.contact__meta a:hover { color: var(--accent-strong); }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--hair); padding-block: 3.5rem 2.5rem; }
.footer__grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }
/* The footer wears the lockup one step larger than the nav — it is the sign-off,
   and it has the room the nav doesn't. */
.footer__logo { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.footer__logo .lockup__mark { width: 42px; height: 42px; }
.footer__logo .lockup__name { font-size: 1.2rem; }
.footer__logo .lockup__tag { font-size: 0.56rem; }
.footer__tag { color: var(--muted); font-size: 0.92rem; max-width: 30ch; }
.footer__keys { display: flex; gap: 0.75rem; flex-wrap: wrap; color: var(--body);
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1.2rem; }
.footer__keys span { color: var(--accent-label); }
.footer__col h4 { font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.9rem; }
.footer__col a { display: block; color: var(--body); font-size: 0.92rem; margin-bottom: 0.4rem; }
.footer__col a:hover { color: var(--accent-strong); }
.footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: 0.82rem; }

/* ---- Scroll reveal ---- (initial hidden state applies ONLY when JS is active) */
.reveal { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(24px); filter: blur(4px); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .js .reveal-line { opacity: 1; transform: none; filter: none; animation: none !important; }
  .hero__scroll span { display: none; }
  /* the mark holds its finished pose: frames unbreathed, nodes fully visible.
     The travelling stars simply stop where they are — being circles, there is no
     mid-roll pose for them to be caught in. */
  .facets svg, .ring, .fx-node, .fx-star, .fx-core,
  .facets::before, .orbiter { animation: none !important; }
  /* frozen at the TOP of each point's own swing, not all at 1 — flattening the
     supporting points to full strength would hand a reduced-motion viewer a
     busier mark than everyone else sees. */
  .fx-node { opacity: 1; }
  .fx-node--outer, .fx-star { opacity: 0.62; }
}

/* ---- Responsive ---- */
@media (max-width: 1040px) {
  .facets { right: -20vw; opacity: 0.55; }
}
@media (max-width: 940px) {
  .about__grid { grid-template-columns: 1fr; }
  .svc { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); }
  .path { grid-template-columns: 1fr 1fr; }
  .path::before { display: none; }
  .hero__scroll { display: none; }
  /* keep the diamonds on small screens — they're the motif now — but drop them
     behind the type and well down in contrast so the headline still wins */
  .facets {
    right: -26vw; top: 40%; z-index: 1; opacity: 0.42;
    width: clamp(420px, 95vw, 620px);
  }
}
@media (max-width: 620px) {
  .vm { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .path { grid-template-columns: 1fr; }
  .footer__grid { flex-direction: column; }
  .hero__proof { display: none; }
  .facets { opacity: 0.34; }
  /* Nav only: the tagline goes, leaving mark + wordmark. Pinning it to one line
     (above) makes the lockup wider than the PNG it replaces, and the nav has a
     full-size CTA next to it — this drops the lockup to ~106px, NARROWER than
     V0.4.1's image, so the button gets more room here than it used to have.
     The footer keeps its tagline: single column, no competition for width. */
  .nav__logo .lockup__tag { display: none; }
}

/* =========================================================================
   PREVIEW HARNESS — not part of the Sidus design system.
   Two things that belong to the preview rather than to the brand:
     1. .vswitch — fixed version switcher, so a reviewer can reach the chooser
        or a sibling version from anywhere without using the Back button.
     2. .powered — the maker's credit in the footer.
   Both stay quiet on purpose: this must read as Naledi's site with NexusIQ as
   the enabler behind it, never as a co-brand.
   Delete this block (and its markup) when a version is promoted to production.
   ========================================================================= */

/* ---- Version switcher ---- */
.vswitch {
  position: fixed; z-index: 80;
  left: 50%; bottom: 1rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.2rem;
  padding: 0.32rem 0.38rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid var(--hair-2);
  box-shadow: 0 10px 30px -12px rgba(11, 17, 32, 0.30);
  font-family: var(--sans); font-size: 0.73rem; line-height: 1;
}
.vswitch__all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.72rem; border-radius: 999px;
  color: var(--body); letter-spacing: 0.02em; white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.vswitch__all::before {
  content: ""; width: 6px; height: 6px; background: var(--accent);
  border-radius: 50%; flex: none;
}
.vswitch__all:hover { color: var(--text); background: rgba(11, 17, 32, 0.06); }
.vswitch__rule { width: 1px; height: 15px; background: var(--hair-2); margin-inline: 0.18rem; flex: none; }
.vswitch__v {
  padding: 0.42rem 0.6rem; border-radius: 999px;
  color: var(--muted); font-weight: 600; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.vswitch__v:hover { color: var(--text); background: rgba(11, 17, 32, 0.06); }
.vswitch__v.is-current {
  color: #F6F9FF; background: linear-gradient(180deg, var(--accent), var(--accent-strong));
}
.vswitch__v.is-soon { opacity: 0.38; cursor: default; }
.vswitch__v.is-soon:hover { background: none; color: var(--muted); }

/* ---- Maker's credit ----
   The NexusIQ lockup is used exactly as supplied: its own brand guide forbids
   recolouring or restyling it. Because THIS version is a light ground, the
   correct supplied asset is the LIGHT-background lockup (nexusiq-apex-ink.png,
   rendered from the guide's logos/nexusiq-logo-full.svg) — not the white one the
   dark versions use, which would be invisible here. Same rule, opposite asset:
   it fits by being SMALL and well spaced, never by being recoloured to her palette.
   Height 30px keeps it above the guide's 120px minimum lockup width. */
.powered {
  margin-top: 2.4rem; padding-top: 1.8rem;
  border-top: 1px solid var(--hair);
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  text-align: center;
}
.powered__label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); opacity: 0.75;
}
.powered__logo { display: inline-block; }
.powered__logo img { height: 30px; width: auto; }
.powered__legal {
  font-size: 0.7rem; color: var(--muted); opacity: 0.6; letter-spacing: 0.01em;
  max-width: 68ch; line-height: 1.5;
}

/* The switcher is position:fixed, so it floats over whatever is at the bottom of
   the page — without this it sits on top of the last line of her footer (the
   company registration number). Reserve its height plus breathing room. */
.footer { padding-bottom: 5.5rem; }

/* Same problem at the top of the page: the hero's decorative proof strip lives
   bottom-centre too, and the pill lands squarely on "Botswana & beyond". Lift
   the strip clear while the harness is present — it goes back when this block
   is deleted. Must clear the strip's wrapped two-line height at ~700px wide. */
.hero__proof { bottom: 5.2rem; }

@media (max-width: 620px) {
  /* The pill row grows every time a version is added. At seven pills it already
     overran a 390px viewport — SILENTLY, because body{overflow-x:hidden} clips it
     instead of scrolling, so the outermost version just vanished off the edge.
     Two fixes, belt and braces: tighten the pills so the common 390px case still
     fits outright, and cap the bar to the viewport with a scroll so no version is
     ever unreachable however many get added later.
     flex:none is load-bearing — flex items shrink by default, so without it the
     pills squash to fit instead of scrolling. */
  .vswitch {
    font-size: 0.68rem; gap: 0.1rem;
    max-width: calc(100vw - 1.5rem);
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .vswitch::-webkit-scrollbar { display: none; }
  .vswitch__all span { display: none; }
  /* Pin the way back. Once the bar scrolls the current pill into view (see the
     script beside the .vswitch markup), "All versions" would otherwise be carried
     off the left edge — trading one unreachable control for another. Sticky keeps
     it parked while the pills slide underneath, so both the escape hatch and your
     current position are visible at once.

     Two pieces of paint, and neither is decoration:

       · The -8px shadow slab covers the bar's own horizontal padding. That strip
         is part of the scrollable area, so without it a pill stays visible in the
         ~6px to the LEFT of the pinned one. A negative margin-left does NOT fix
         this — once the element is stuck its border box is clamped to the
         scrollport edge and the margin is ignored, so it has to be painted over.
       · ::after is a short dissolve on the RIGHT. A hard edge there (a 1px rule,
         or just the pill's own boundary) slices whichever pill happens to be
         passing under it clean through the middle of a glyph — "V0.4" renders as
         "0.4" and reads as a rendering fault. Fading it out over 16px is what
         makes the pill look pinned rather than broken.

     Both use an OPAQUE colour, not the bar's translucent fill — pills visible
     THROUGH the pinned pill is the same fault by another route. It is the bar's
     own colour with the alpha removed, so the seam doesn't show. */
  .vswitch__all {
    position: sticky; left: 0; z-index: 1;
    padding-inline: 0.6rem 0.5rem;
    background: #FFFFFF;
    box-shadow: -8px 0 0 #FFFFFF;
    flex: none;   /* flex items shrink by default; without this the pill squashes
                     instead of the bar scrolling */
  }
  .vswitch__all::after {
    content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 16px;
    background: linear-gradient(90deg, #FFFFFF, rgba(0, 0, 0, 0));
    pointer-events: none;
  }
  /* diamond only, keep the pill narrow */
  .vswitch__v { padding-inline: 0.42rem; flex: none; }
  .vswitch__rule { margin-inline: 0.1rem; }
}