/* ============================================================
   Shared component layer — one vocabulary for every marketing
   page. Values come from tokens.css; pages may scope these
   components but never restyle them. Page layout stays in each
   surface's own sheet.

   No global reset lives here on purpose: components carry their
   own margins, so adding this file to a page changes nothing
   until its classes are used.

   NOTE: CSS ships to the live site verbatim — comments here are
   public. Keep internal names out of them.
   ============================================================ */

/* ---------- type scale ---------- */
/* A section label reads as interface, not as a headline shouted small.
   Uppercase set at 900 with open tracking is the dated version of this
   pattern; weight alone is enough to separate a label from the prose
   under it, at the same size. */
.ui-eyebrow {
  font-size: 13.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--color-arrived);
  margin: 0 0 14px;
}
.ui-eyebrow--ondark { color: var(--color-arrived-lift-soft); }

.ui-display {
  font-size: clamp(40px, 5.6vw, 66px); font-weight: 900; line-height: 1.04;
  letter-spacing: -0.03em; text-wrap: balance; margin: 0;
}
.ui-display--sub { font-size: clamp(38px, 4.6vw, 58px); }

.ui-lead { font-size: 18px; line-height: 1.6; max-width: 60ch; margin: 0; }
.ui-lead--ondark { color: rgba(250, 246, 241, 0.78); }

.ui-h2 {
  font-size: clamp(28px, 3vw, 40px); font-weight: 900; line-height: 1.12;
  letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 18px;
}

/* ---------- buttons ----------
   One button. Raised finish (top sheen + inset rim + bottom bevel +
   drop shadow), ember fill, pill geometry from the radius ramp. */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 800; line-height: 20px;
  color: #fff; text-decoration: none; border: none; cursor: pointer;
  border-radius: var(--radius-pill);
  /* Optically centred, not box-centred. Figtree's ink for a line without
     descenders sits about half a pixel below the middle of its own line
     box, so the label reads low when the box is centred perfectly. Half a
     pixel off the top padding onto the bottom puts the ink on the centre. */
  padding: 12.5px 26px 13.5px;
  background: var(--color-action);
  /* One light source, from above. The rim is the fill colour laid outside
     the shape, which thickens it by half a pixel so antialiasing cannot
     erode the edge — an inset dark rim would darken the inner edge and
     optically shrink the pill instead. No bottom bevel: a dark band along
     the base implies a second light from below, arguing with the sheen. */
  box-shadow: 0 0 0 0.5px var(--color-action),
              inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
              0 1px 2px 0 rgba(28, 22, 16, 0.16),
              0 6px 14px -4px rgba(28, 22, 16, 0.30);
  transition: background var(--duration-micro) var(--ease-remyt),
              box-shadow var(--duration-standard) var(--ease-remyt),
              transform var(--duration-micro) var(--ease-remyt);
}
.ui-btn:hover {
  background: var(--color-action-hover);
  box-shadow: 0 0 0 0.5px var(--color-action-hover),
              inset 0 1px 0 0 rgba(233, 228, 218, 0.10),
              0 8px 24px rgba(224, 78, 42, 0.38);
}
/* On a dark ground a drop shadow is invisible work — there is nothing left
   to darken. Lift there comes from the lit top edge, a hint of contact at
   the base, and the fill's own light spilling onto what sits behind it. */
.ui-btn.on-dark {
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
              inset 0 -1px 0 0 rgba(28, 22, 16, 0.28),
              0 1px 1px 0 rgba(10, 8, 6, 0.30),
              0 4px 12px -4px rgba(10, 8, 6, 0.55),
              0 6px 20px -8px rgba(224, 78, 42, 0.55);
}
.ui-btn.on-dark:hover {
  background: var(--color-action-lift);
  /* The glow is pulled in with a negative spread rather than spread wider:
     a wide halo at low alpha reads as haze around the button, a tight one
     at high alpha reads as the button being hot. */
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.34),
              inset 0 -1px 0 0 rgba(28, 22, 16, 0.24),
              0 1px 1px 0 rgba(10, 8, 6, 0.30),
              0 6px 16px -6px rgba(10, 8, 6, 0.5),
              0 8px 26px -6px rgba(240, 102, 63, 0.85);
}
.ui-btn:active { transform: scale(0.97); background: var(--color-action-active); }

/* Ghost: same geometry and finish family, quiet surface. Dark grounds by
   default; --light is the cream/white-ground variant. */
.ui-btn--ghost {
  color: rgba(233, 228, 218, 0.74);
  background: rgba(233, 228, 218, 0.05);
  box-shadow: inset 0 1px 0 0 rgba(233, 228, 218, 0.10),
              inset 0 0 0 1px rgba(233, 228, 218, 0.16),
              inset 0 -2px 0 0 rgba(28, 22, 16, 0.22),
              0 1px 2px 0 rgba(28, 22, 16, 0.30);
}
.ui-btn--ghost:hover { background: rgba(233, 228, 218, 0.12); color: #fff; box-shadow:
              inset 0 1px 0 0 rgba(233, 228, 218, 0.10),
              inset 0 0 0 1px rgba(233, 228, 218, 0.16),
              inset 0 -2px 0 0 rgba(28, 22, 16, 0.22),
              0 1px 2px 0 rgba(28, 22, 16, 0.30); }
.ui-btn--ghost-light {
  color: var(--foreground);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--color-warm-300),
              inset 0 -2px 0 0 rgba(34, 30, 25, 0.06),
              0 1px 2px 0 rgba(34, 30, 25, 0.08);
}
.ui-btn--ghost-light:hover { background: var(--color-warm-50); color: var(--foreground); }

/* Outline: the secondary action on dark grounds — the same teal-outline
   vocabulary as the nav control, at full button size. Reads enabled next
   to the raised ember primary; ghost stays for tertiary/quiet uses. */
.ui-btn--outline {
  color: var(--color-arrived-lift-soft);
  background: rgba(19, 166, 160, 0.07);
  border: var(--stroke) solid var(--color-arrived-lift);
  box-shadow: none;
}
.ui-btn--outline:hover { background: rgba(19, 166, 160, 0.16); color: #fff; box-shadow: none; }
.ui-btn--outline:active { background: rgba(19, 166, 160, 0.22); }

/* Quiet: the flat teal outline pill for nav chrome. Scripting may flip it
   ember while no in-page action is on screen — the one-ember rule. */
.ui-btn--quiet {
  font-size: 13.5px; font-weight: 800; padding: 7.5px 18px 8.5px;
  color: var(--color-arrived-lift-soft);
  background: transparent;
  border: var(--stroke) solid var(--color-arrived-lift);
  box-shadow: none;
  transition: background var(--duration-micro) var(--ease-remyt),
              color var(--duration-micro) var(--ease-remyt),
              border-color var(--duration-micro) var(--ease-remyt);
}
.ui-btn--quiet:hover { background: rgba(19, 166, 160, 0.14); box-shadow: none; }
.ui-btn--quiet:active { transform: none; background: rgba(19, 166, 160, 0.2); }
/* Ember inside the pill. The pill is a dark glass surface, so this takes
   the dark-ground recipe — a lit top edge and the fill's own light spilling
   behind it — not the contact-and-lift shadow that belongs on cream. */
.ui-btn--quiet.is-ember {
  background: var(--color-action); color: #fff;
  /* The outline state's 2px border has to go, not just change colour: an
     inset shadow is drawn from the PADDING box, so a border leaves an
     unlit band ringing the lit interior. The padding takes the border's
     place so the control does not change size. */
  border-width: 0; padding: 9.5px 20px 10.5px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.26),
              inset 0 -1px 0 0 rgba(28, 22, 16, 0.24),
              0 4px 14px -6px rgba(224, 78, 42, 0.65);
}
.ui-btn--quiet.is-ember:hover {
  background: var(--color-action-hover);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.30),
              inset 0 -1px 0 0 rgba(28, 22, 16, 0.24),
              0 6px 20px -6px rgba(240, 102, 63, 0.8);
}

.ui-btn--sm { font-size: 14px; padding: 10.5px 20px 11.5px; }

.ui-btn:focus-visible {
  outline: 2px solid var(--color-arrived-lift); outline-offset: 2px;
}

/* ---------- nav: bare overlay over the hero, then a floating pill ---------- */
.ui-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: center;
  padding: 24px 36px; pointer-events: none;
}
.ui-nav-inner {
  width: 100%; max-width: var(--nav-max, 1100px);
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: auto;
}
/* Mark-only header: the logo centers and nothing competes with the
   page's own first action. */
.ui-nav-inner--center { justify-content: center; }
.ui-nav-links { display: flex; align-items: center; gap: 28px; }
.ui-navlink {
  font-size: 13px; font-weight: 600; color: rgba(233, 228, 218, 0.62);
  text-decoration: none; cursor: pointer;
  transition: color var(--duration-micro) ease;
}
.ui-navlink:hover { color: #fff; }
.ui-navlink.is-active { color: #fff; }
.ui-navlink.is-active::after {
  content: ""; display: block; height: 2px; border-radius: 2px;
  background: var(--color-arrived-lift); margin-top: 4px;
}
.ui-logo {
  display: inline-flex; align-items: center; color: #fff; cursor: pointer;
  transition: color var(--duration-micro) ease, transform var(--duration-micro) ease;
  -webkit-tap-highlight-color: transparent;
}
.ui-logo:hover { color: var(--color-arrived-lift-soft); }
.ui-logo:active { transform: scale(0.97); }
.ui-logo:focus-visible { outline: 2px solid var(--color-arrived-lift); outline-offset: 3px; border-radius: 4px; }

/* The pill: shown by scripting once the hero scrolls away. Without
   scripts it never appears and the in-page controls carry everything. */
.ui-pill {
  position: fixed; left: 0; right: 0; top: -90px; margin: 0 auto;
  width: fit-content; z-index: 60;
  display: flex; align-items: center; gap: 22px;
  padding: 8px 8px 8px 20px;
  /* Opaque, not glass. This floats over the page, so whatever it crosses is
     hidden for as long as a reader rests there — and at 68% the text behind it
     came through the blur as a smear, which reads as a rendering fault rather
     than as a layer. Depth here answers "is this on another plane?", and a
     plane you can half-see through is not answering it. The rim and the cast
     shadow carry the separation instead. */
  background: var(--color-warm-900);
  border: 1px solid rgba(233, 228, 218, 0.14);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 34px rgba(26, 23, 19, 0.34);
  opacity: 0; pointer-events: none;
  transition: top 0.4s var(--ease-remyt), opacity 0.3s ease;
}
.ui-pill.show { top: 14px; opacity: 1; pointer-events: auto; }
.ui-pill .ui-nav-links { gap: 24px; }

/* ---------- footer ---------- */
.ui-foot {
  background: var(--surface-dark); color: var(--color-warm-50);
  border-top: 1px solid rgba(233, 228, 218, 0.1);
  padding: 60px 36px 0; overflow: hidden;
}
.ui-foot-inner { max-width: 1100px; margin: 0 auto; }
.ui-foot-cols { display: flex; flex-wrap: wrap; gap: 40px 56px; justify-content: space-between; }
.ui-foot-tagline { max-width: 280px; }
.ui-foot-tagline p { font-size: 13px; line-height: 1.6; color: rgba(233, 228, 218, 0.5); margin: 14px 0 0; }
.ui-fhead {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  color: rgba(233, 228, 218, 0.45); margin: 0 0 16px;
}
.ui-foot-col { display: flex; flex-direction: column; gap: 12px; }
.ui-flink {
  font-size: 13px; color: rgba(233, 228, 218, 0.55); text-decoration: none;
  transition: color var(--duration-micro) ease;
}
.ui-flink:hover { color: #fff; }
/* A link with a one-line context caption riding inside the anchor —
   used for the cross-surface links. */
.ui-flink--rich { display: block; }
.ui-flink-sub {
  display: block; font-size: 11px; line-height: 1.5; max-width: 26ch;
  color: rgba(233, 228, 218, 0.34); margin-top: 2px;
  transition: color var(--duration-micro) ease;
}
.ui-flink--rich:hover .ui-flink-sub { color: rgba(233, 228, 218, 0.55); }
.ui-flink-line { display: inline-flex; align-items: center; gap: 8px; }
.ui-flink-arrow { flex: none; opacity: 0.65; transition: transform var(--duration-micro) ease, opacity var(--duration-micro) ease; }
.ui-flink--rich:hover .ui-flink-arrow { transform: translateX(3px); opacity: 1; }
/* The wordmark at architectural scale — a surface, not a control. */
.ui-foot-mark {
  display: block; width: 100%; height: auto;
  color: rgba(233, 228, 218, 0.07);
  margin: 44px 0 24px;
}
.ui-foot-legal {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 22px 0 30px;
  border-top: 1px solid rgba(233, 228, 218, 0.08);
  font-size: 12px; color: rgba(233, 228, 218, 0.42);
}
.ui-foot-legal p { margin: 0; }
.ui-foot-legal .ui-flink { font-size: 12px; }

/* ---------- cards & panels ---------- */
.ui-card {
  background: var(--card);
  border-radius: var(--radius-card); padding: 26px 24px;
  /* The rim is a shadow, not a border: it leaves the box model alone, can
     go to half a pixel on dense screens, and animates in the same property
     as the lift. The wide ambient under it is nearly invisible on its own
     and is what stops a white card looking pasted onto the cream. */
  box-shadow: 0 0 0 1px var(--color-warm-100),
              0 24px 68px 0 rgba(28, 22, 16, 0.05);
}
.ui-card--accent {
  position: relative; overflow: hidden; border: none;
  background: linear-gradient(155deg, var(--color-arrived) 0%, var(--color-arrived-deep) 100%);
  box-shadow: 0 16px 34px rgba(10, 117, 115, 0.32);
  color: #fff;
}
.ui-card--accent::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.4px);
  background-size: 16px 16px; opacity: 0.5;
}
.ui-card--accent > * { position: relative; z-index: 2; }
.ui-inset {
  background: var(--color-warm-50);
  border-radius: var(--radius-input); padding: 14px 16px;
  box-shadow: 0 0 0 1px var(--color-warm-100);
}
.ui-inset--glass {
  background: rgba(255, 255, 255, 0.14); border: none;
  border-radius: var(--radius-input); padding: 14px 16px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  /* Bright rim inside, dark rim outside — the edge then survives on both
     the light and dark halves of whatever it is laid over. */
  /* The bright rim is deliberately faint. A near-opaque white ring is a
     light-ground recipe; over a dark or saturated ground it stops reading
     as a lit edge and starts reading as a drawn white line down the top
     and left of the panel. */
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
              0 0 0 0.5px rgba(28, 22, 16, 0.16),
              inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}

/* ---------- figure captions ---------- */
.ui-railcap {
  text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0;
  color: var(--muted-foreground); padding: 16px 8px 6px;
}
.ui-figcap {
  text-align: center; font-size: 12.5px; font-style: italic;
  color: var(--muted-foreground); padding: 0 8px 10px;
}

/* ---------- narrow screens ----------
   The header and the pill both carry the mark and the action all the way
   down; the text links step aside rather than spilling off the edge —
   every one of them also lives in the footer, so nothing becomes
   unreachable. No drawer: these surfaces are short and the action is
   always the same one. */
@media (max-width: 700px) {
  .ui-nav { padding: 18px 20px; }
  .ui-navlink { display: none; }
  .ui-nav-links { gap: 0; }
  .ui-pill { gap: 14px; padding: 7px 7px 7px 16px; }
}