/* ==========================================================================
   MECANDRIA — frontend stylesheet (static, no build step)
   Sections: tokens · base · layout · nav · buttons · hero · home sections ·
             inner pages · articles · forms · footer · motion utilities
   ========================================================================== */

:root {
  /* Warm Ivory: ivory surfaces, ink text, magenta + coral lead, teal labels. Accents are the deep,
     text-safe versions of the logo colours. The footer is the one dark band (see .site-footer). */
  --bg: #FBF8F3;
  --bg-2: #F4EEE5;
  --bg-3: #FFFFFF;
  --line: rgba(90, 80, 70, .16);
  --line-2: rgba(90, 80, 70, .28);
  --text: #1D1B2F;
  --muted: #5A5568;
  --dim: #6E6878;

  --magenta: #C70049;
  --coral: #C2301A;
  --cyan: #00728A;
  --aqua: #00775F;
  --teal: #00775F;
  --purple: #5B2EE6;
  --blue: #2a5bff;

  --grad-brand: linear-gradient(100deg, var(--magenta), var(--coral));
  --grad-cool: linear-gradient(100deg, var(--cyan), var(--aqua));

  --font: "Aptos", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1280px;
  --radius: 14px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --nav-h: 0px;          /* the header sits in the page flow and scrolls away, so page tops need no room for it */
  --nav-sticky-h: 88px;  /* floating capsule shown after scrolling: sticky panels and anchors clear it */
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); color-scheme: light; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.04; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--magenta); color: #fff; }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: #fff; color: #000; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 12px; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(20px, 2.5vw, 32px) clamp(48px, 5.5vw, 80px); }
.section.final { padding-block: clamp(88px, 12vw, 168px); }   /* closing CTA bands keep their room */ 
.section--tight { padding-block: clamp(20px, 2.5vw, 32px) clamp(40px, 4.5vw, 64px); }
.section--alt { background: var(--bg-2); }
.rule-top { border-top: 1px solid var(--line); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--aqua);
}
.eyebrow .num { color: var(--dim); font-variant-numeric: tabular-nums; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow.no-line::before { display: none; }

.h-xl { font-size: clamp(2.6rem, 7.2vw, 6.4rem); }
.h-lg { font-size: clamp(1.5rem, .8rem + 2.95vw, 3.5rem); text-transform: uppercase; }
.h-md { font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -.015em; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.3rem); color: var(--muted); max-width: 62ch; }
.grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-cool { background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }
.section-head { display: grid; gap: 22px; margin-bottom: clamp(40px, 6vw, 80px); max-width: 900px; }

/* ---------- site header (markup in assets/js/components.js, behaviour in navigation.js) ----------
   The Aditi storefront header, in Mecandria colours, without its message strip. Top of page:
   email bar | centred logo | location, our work, button; then a light link row with cyan
   separators and a sliding gradient pill. Once scrolled past,
   a floating capsule takes over. Phones get menu | logo | our work + button, a full-width email
   bar and a drawer menu. The header scrolls with the page (it is not fixed). */
site-header, site-footer { display: block; }
site-header {
  --sh-ink: #1D1B2F;                                            /* icons, dark buttons */
  --sh-accent: linear-gradient(100deg, var(--magenta), var(--coral));   /* pill, main button, current drawer link */
  --sh-accent-text: #C70049;                                    /* hover text on light surfaces */
  --sh-hairline: rgba(90, 80, 70, .24);
  --sh-hairline-2: rgba(90, 80, 70, .36);
  --sh-sep: var(--coral);                                        /* link-row separators, focus ring */
  --sh-glow: var(--aqua);
  --sh-label: #00775F;                                          /* small headings on light surfaces */
  --sh-surface: #FFFDF9;
  --sh-cream: #F6F1E9;
  --sh-cream-2: #EEE7DB;
  --sh-text: #1D1B2F;
  --sh-muted: #5A5568;
  --sh-faint: #6E6878;
  --sh-border: rgba(90, 80, 70, .4);
  --sh-rule: rgba(90, 80, 70, .22);
  --sh-shadow: rgba(29, 27, 47, .28);
  --sh-pill-shadow: rgba(199, 0, 73, .4);
  font-family: var(--font);
  color-scheme: light;                                          /* light surfaces: light scrollbars and controls */
}
html.sh-lock { overflow: hidden; }
site-header p { margin: 0; }
site-header :focus-visible { outline: 2px solid var(--sh-sep); outline-offset: 2px; }
.sh-ico { width: 24px; height: 24px; }

.sh { position: relative; z-index: 50; background: var(--sh-surface); box-shadow: 0 1px 0 var(--sh-hairline); }
.sh-main {
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 64px auto;
  grid-template-areas: "menu logo actions" "search search search";
  align-items: center; column-gap: 12px; padding: 0 12px 12px;
}
.sh-menu-btn { grid-area: menu; justify-self: start; }
.sh-logo { grid-area: logo; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 2px 0; }
.sh-logo .mark { height: 30px; width: auto; }
.sh-logo .word { height: 10px; width: auto; filter: brightness(0); }
.sh-actions { grid-area: actions; justify-self: end; display: flex; align-items: center; gap: 6px; }
.sh-search--main { grid-area: search; }

.sh-icon-btn {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 9999px; background: transparent; color: var(--sh-ink);
  transition: background-color .2s, color .2s;
}
.sh-icon-btn:hover { background: rgba(199, 0, 73, .07); color: var(--sh-accent-text); }
.sh-round { border: 1px solid var(--sh-hairline-2); }

/* email bar (the search field's place) */
.sh-search {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 4px 0 14px;
  border: 1px solid var(--sh-border); border-radius: 9999px; background: var(--sh-cream); color: var(--sh-muted);
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.sh-search:hover, .sh-search:focus-visible { border-color: var(--sh-sep); background: var(--sh-surface); box-shadow: 0 0 0 3px rgba(199, 0, 73, .14); }
.sh-search-icon { width: 20px; height: 20px; flex: none; }
.sh-search-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.2; color: var(--sh-text); }
.sh-search-go {
  flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 16px;
  border-radius: 9999px; background: var(--sh-ink); border: 1px solid var(--sh-hairline-2); color: #fff;
  font-size: 10.5px; line-height: 1; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: background-color .2s;
}
.sh-search:hover .sh-search-go { background: #3A3650; }

/* location / our work: icon with a caps label underneath on desktop */
.sh-action { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; border-radius: 8px; color: var(--sh-ink); }
.sh-action:hover { color: var(--sh-accent-text); }
.sh-action--loc { display: none; }
.sh-action-label { display: none; font-size: 9.5px; line-height: 1; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--sh-muted); }
.sh-action:hover .sh-action-label { color: var(--sh-accent-text); }

/* main button: a solid gradient pill */
.sh-bag {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; flex: none;
  border-radius: 9999px; background: var(--sh-accent); color: #fff; box-shadow: 0 8px 18px -10px var(--sh-pill-shadow);
  transition: filter .2s, box-shadow .2s;
}
.sh-bag:hover { filter: brightness(.93); box-shadow: 0 10px 22px -10px var(--sh-pill-shadow); }
.sh-bag .sh-ico { width: 20px; height: 20px; }
.sh-bag-label { display: none; font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }

/* link row with separators and the sliding pill */
.sh-nav { display: none; }
.sh-link {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 2px; padding: 8px 14px;
  border-radius: 9999px; color: var(--sh-muted); font-size: 11px; line-height: 16px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; transition: color .3s ease;
}
.sh-link:hover { color: var(--sh-accent-text); }
.sh-link.is-lit, .sh-link.is-lit:hover { color: #fff; }
.sh-sep { font-size: 7px; line-height: 1; color: var(--sh-sep); }
.sh-pill {
  position: absolute; left: 0; top: 50%; width: 0; height: 34px; margin-top: -17px; border-radius: 9999px;
  background: var(--sh-accent); box-shadow: 0 6px 14px -6px var(--sh-pill-shadow); opacity: 0; pointer-events: none;
}
.sh-pill.is-on { opacity: 1; }
.sh-pill.is-ready { transition: transform .42s cubic-bezier(.22, 1, .36, 1), width .42s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; }

/* floating capsule (after scrolling), on a light band that spans the viewport */
.sh-capsule {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70; padding: 10px;
  background: var(--sh-cream); border-bottom: 1px solid var(--sh-hairline); box-shadow: 0 14px 30px -22px var(--sh-shadow);
  opacity: 0; transform: translate3d(0, -140%, 0); pointer-events: none;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.sh-capsule.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.sh-capsule-bar {
  position: relative; max-width: 1216px; margin: 0 auto; display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center;   /* side columns never shrink under the brand or buttons */
  column-gap: 10px; height: 56px; padding: 0 6px; border-radius: 9999px; background: var(--sh-surface);
  border: 1px solid rgba(90, 80, 70, .3); box-shadow: 0 8px 20px -14px rgba(29, 27, 47, .3);
}
.sh-brand { grid-column: 1; justify-self: start; margin-left: 8px; display: flex; align-items: center; gap: 8px; border-radius: 9999px; }
.sh-brand > .mark { height: 26px; width: auto; }
.sh-word { display: flex; flex-direction: column; gap: 4px; }
.sh-word .word { height: 11px; width: auto; filter: brightness(0); }
.sh-word small { color: var(--sh-label); font-size: 6.6px; line-height: 1; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sh-cnav { display: none; grid-column: 2; }
.sh-cactions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 4px; }
.sh-cwide { display: none; }
.sh-bag--compact .sh-bag-label { display: none; }

/* drawer menu: slides in from the left once navigation.js adds .is-open, and is hidden after sliding out */
.sh-overlay { position: fixed; inset: 0; z-index: 100; }
.sh-overlay[hidden] { display: none; }
.sh-overlay-scrim { position: absolute; inset: 0; background: rgba(29, 27, 47, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; }
.sh-drawer {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(340px, 88vw); display: flex; flex-direction: column;
  background: var(--sh-cream); border-right: 1px solid var(--sh-hairline-2); box-shadow: 16px 0 50px -16px rgba(29, 27, 47, .3);
  transform: translate3d(-100%, 0, 0); transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}
.sh-overlay.is-open .sh-overlay-scrim { opacity: 1; }
.sh-overlay.is-open .sh-drawer { transform: none; }
.sh-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--sh-hairline); background: var(--sh-surface); }
.sh-drawer-brand { display: flex; align-items: center; gap: 10px; }
.sh-drawer-brand .mark { height: 30px; width: auto; }
.sh-drawer-brand .word { height: 13px; width: auto; filter: brightness(0); }
.sh-drawer-body { flex: 1; overflow-y: auto; padding: 16px; overscroll-behavior: contain; }
.sh-hello { display: flex; align-items: center; gap: 12px; }
.sh-avatar { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 9999px; background: var(--sh-cream-2); }
.sh-avatar .mark { width: 24px; height: auto; }
.sh-hello-title { font-size: 20px; line-height: 1.15; font-weight: 700; color: var(--sh-ink); }
.sh-hello-sub { font-size: 12.5px; line-height: 1.4; color: var(--sh-muted); }
.sh-drawer-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin-top: 14px;
  border-radius: 6px; background: var(--sh-ink); border: 1px solid var(--sh-hairline-2); color: #fff;
  font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.sh-drawer-cta .sh-ico { width: 18px; height: 18px; }
.sh-drawer-heading { margin: 22px 0 8px; color: var(--sh-label); font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.sh-drawer-links { display: flex; flex-direction: column; gap: 2px; }
.sh-drawer-link {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 9999px;
  color: var(--sh-muted); font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.sh-drawer-link .sh-ico { width: 20px; height: 20px; }
.sh-drawer-link:hover { background: var(--sh-cream-2); color: var(--sh-accent-text); }
.sh-drawer-link[aria-current="page"] { background: var(--sh-accent); color: #fff; }
.sh-drawer-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.sh-drawer-foot a {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 9999px;
  border: 1px solid var(--sh-hairline-2); background: var(--sh-surface); color: var(--sh-accent-text);
  font-size: 10.5px; line-height: 1; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.sh-drawer-foot .sh-ico { width: 18px; height: 18px; }

@media (min-width: 640px) {
  .sh-main { padding: 0 20px 12px; }
}
@media (max-width: 1023px) {
  :root { --nav-sticky-h: 76px; }
}
@media (min-width: 1024px) {
  .sh { box-shadow: none; }
  .sh-main { grid-template-rows: 88px; grid-template-areas: "search logo actions"; column-gap: 24px; padding: 0 32px; }
  .sh-menu-btn { display: none; }
  .sh-logo { gap: 7px; }
  .sh-logo .mark { height: 42px; }
  .sh-logo .word { height: 14px; }
  .sh-search--main { justify-self: start; width: min(100%, 340px); }
  .sh-actions { gap: 14px; }
  .sh-action--loc { display: inline-flex; }
  .sh-action--work { display: none; }
  .sh-action-label { display: block; }
  .sh-bag { height: 44px; padding: 0 16px; }
  .sh-bag-label { display: inline; }
  .sh-nav {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 50px;
    background: var(--sh-cream); border-top: 1px solid var(--sh-hairline); border-bottom: 1px solid var(--sh-hairline-2);
  }
  .sh-capsule { padding: 12px 24px; }
  .sh-capsule-bar { height: 64px; padding: 0 8px; }
  .sh-brand { margin-left: 12px; }
  .sh-brand > .mark { height: 32px; }
  .sh-word .word { height: 13px; }
  .sh-cwide { display: inline-grid; }
}
@media (min-width: 1280px) {
  .sh-main { padding: 0 64px; }
  .sh-search--main { width: 360px; }
  .sh-action--work { display: inline-flex; }
  .sh-cnav { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 9999px; background: rgba(29, 27, 47, .05); }
  .sh-cnav .sh-link { padding: 9px 11px; letter-spacing: .16em; }
  .sh-cmenu { display: none; }
  .sh-bag--compact .sh-bag-label { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-pill.is-ready, .sh-capsule, .sh-drawer, .sh-overlay-scrim { transition: none; }
}

/* ---------- buttons ---------- */
.btn {
  --pad-y: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: var(--pad-y) 28px; border-radius: 999px; border: 1px solid transparent;
  font-size: 13.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, border-color .3s;
}
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: 0 10px 40px -12px rgba(199, 0, 73, .45); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -12px rgba(194, 48, 26, .5); }
.btn-ghost { border-color: var(--line-2); color: var(--text); background: rgba(255, 255, 255, .7); }
.btn-ghost:hover { border-color: var(--aqua); color: var(--aqua); transform: translateY(-2px); }
.btn-sm { --pad-y: 11px; padding-inline: 20px; font-size: 12px; }
.link-arrow { display: inline-flex; gap: 10px; align-items: center; font-weight: 700; font-size: 13.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--magenta); }
.link-arrow .arrow { transition: transform .3s var(--ease); }
.link-arrow:hover .arrow { transform: translateX(5px); }

/* ==========================================================================
   SHARED ATMOSPHERE (.atmos) — inner page heroes and CTA bands.
   CSS keyframes only; independent of scroll, hover, mouse or click.
   ========================================================================== */
.atmos { position: absolute; inset: 0; z-index: -1; overflow: hidden; background:
  radial-gradient(120% 90% at 50% 120%, #F1E7DA 0%, transparent 60%), var(--bg); }
.atmos .blob { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; opacity: .8; }
.atmos .b1 { width: 62vmax; height: 62vmax; left: -18vmax; top: -22vmax; background: radial-gradient(circle at 40% 40%, rgba(255, 75, 51, .3), rgba(255, 75, 51, 0) 68%); animation: drift-a 19s ease-in-out infinite alternate; }
.atmos .b2 { width: 56vmax; height: 46vmax; right: -16vmax; top: 4vmax; background: radial-gradient(circle at 50% 50%, rgba(0, 211, 164, .26), rgba(0, 169, 204, .1) 50%, transparent 72%); animation: drift-b 15s ease-in-out infinite alternate; }
.atmos .b3 { width: 42vmax; height: 34vmax; left: 22vw; bottom: -24vmax; background: radial-gradient(circle, rgba(255, 12, 107, .2), rgba(255, 12, 107, 0) 68%); animation: drift-c 17s ease-in-out infinite alternate; }
.atmos .b4 { width: 34vmax; height: 34vmax; left: 38vw; top: -8vmax; background: radial-gradient(circle, rgba(106, 61, 255, .14), transparent 70%); animation: drift-d 11s ease-in-out infinite alternate; opacity: .65; }
.atmos .b5 { width: 28vmax; height: 20vmax; right: 8vw; bottom: -6vmax; background: radial-gradient(circle, rgba(255, 140, 90, .22), transparent 70%); animation: drift-a 13s ease-in-out infinite alternate-reverse; opacity: .55; }
.atmos::after { /* vignette keeps the headline readable */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 30% 50%, rgba(251, 248, 243, .55), transparent 75%), linear-gradient(to bottom, transparent 70%, var(--bg) 100%);
}
.atmos .grain { position: absolute; inset: 0; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

@keyframes drift-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(14vw, 10vh, 0) scale(1.18); } }
@keyframes drift-b { 0% { transform: translate3d(0, 0, 0) scale(1.05); } 100% { transform: translate3d(-18vw, 8vh, 0) scale(.88); } }
@keyframes drift-c { 0% { transform: translate3d(0, 0, 0) scale(.9); } 100% { transform: translate3d(-12vw, -12vh, 0) scale(1.15); } }
@keyframes drift-d { 0% { transform: translate3d(-6vw, 0, 0) scale(.95); } 100% { transform: translate3d(8vw, 8vh, 0) scale(1.12); } }

/* ==========================================================================
   HOME HERO (.hx) — stable typography over a slowly moving atmosphere.

   Hierarchy (desktop): pill → 28px → headline (2 lines) → 24px → lead (≤52ch)
   → 36px → CTAs (12px apart) · micro-text pinned to the bottom edge.

   Background layers, back to front:
     1 base      ivory with a warm glow at the bottom
     2 .hx-tap   five rows of huge outlined letters sliding slowly left and right:
                 MECANDRIA • IT SERVICES & SOLUTIONS (rows 1, 3, 5) alternating with
                 the motto TALENT • TECHNOLOGY • TRANSFORMATION (rows 2, 4); the middle
                 row is tinted with a faint brand gradient
     3 ::after   centre shade + edge vignette + fade into the page

   Each row holds its line four times and slides by half its width, so the loop is
   seamless. Pure CSS: starts on load, never reads scroll, hover or mouse. hero.js
   only pauses the rows while the hero is off screen; reduced motion keeps them still.
   ========================================================================== */
.hx {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  padding: calc(var(--nav-h) + 48px) 0 120px;
  text-align: center;
}

/* ---- 1 · base ---- */
.hx-bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(140% 90% at 50% 110%, #F1E7DA 0%, transparent 60%), #FBF8F3;
  contain: strict;
}

/* ---- 2 · word tapestry (sized by the hero's height, so it scales on every screen) ---- */
.hx-bg { container-type: size; }
.hx-tap { position: absolute; inset: -4% 0; display: grid; align-content: space-between; }
.hx-row {
  display: flex; width: max-content; white-space: nowrap;
  font-size: 15.5cqh; font-weight: 900; line-height: 1; letter-spacing: -.03em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.2px rgba(29, 27, 47, .1);
  animation: hx-slide 70s linear infinite; will-change: transform;
}
.hx-row:nth-child(even) { animation-direction: reverse; animation-duration: 80s; }
.hx-row:nth-child(3) {
  -webkit-text-stroke: 0;
  background: linear-gradient(90deg, rgba(199, 0, 73, .06), rgba(0, 119, 95, .06), rgba(91, 46, 230, .06));
  -webkit-background-clip: text; background-clip: text;
}
.hx-row span { padding-right: .5em; }
@keyframes hx-slide { to { transform: translateX(-50%); } }

/* ---- 3 · readability shade + vignette + hand-off to the next section ---- */
.hx-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(46% 38% at 50% 50%, rgba(251, 248, 243, .7), rgba(251, 248, 243, .3) 60%, transparent 100%),
    radial-gradient(125% 110% at 50% 45%, transparent 58%, rgba(241, 231, 218, .7) 100%),
    linear-gradient(to bottom, transparent 72%, var(--bg) 100%);
}
/* static fine grain: hides gradient banding on dark screens; never animated */
.hx-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---- content ---- */
.hx-content { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.hx-content > * { max-width: 100%; }
.hx-pill {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid #E5DDD0; background: rgba(255, 255, 255, .7);
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.hx-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--magenta); opacity: .8; flex: none; }
.hx-title {
  margin-top: 28px;
  font-size: clamp(2.05rem, 1.15rem + 4.1vw, 4.9rem); font-weight: 800;
  line-height: 1.02; letter-spacing: -.035em; text-transform: uppercase; color: var(--text);
}
.hx-title span { display: block; }
.hx-title .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hx-lead {
  margin: 24px auto 0; max-width: 52ch;
  font-size: clamp(1rem, .92rem + .35vw, 1.16rem); line-height: 1.65; color: var(--muted);
}
.hx-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.hx-actions .btn { --pad-y: 15px; padding-inline: 26px; font-size: 12.5px; letter-spacing: .1em; }
.btn-light { background: #1D1B2F; color: #FBF8F3; }
.btn-light:hover { transform: translateY(-2px); background: #3A3650; box-shadow: 0 14px 40px -16px rgba(29, 27, 47, .45); }
.hx .btn-ghost { background: #FFFFFF; border-color: #D9D0C2; }
.hx .btn-ghost:hover { border-color: var(--aqua); color: var(--aqua); }

/* micro-text pinned to the bottom edge; also a quiet scroll hint */
.hx-micro {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 12px; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--dim);
  transition: color .3s;
}
.hx-micro:hover { color: var(--text); }
.hx-micro i { width: 1px; height: 34px; background: linear-gradient(to bottom, rgba(199, 0, 73, .55), transparent); transform-origin: top; animation: hx-cue 3.2s ease-in-out infinite; }
@keyframes hx-cue { 0% { transform: scaleY(0); opacity: 0; } 35% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* one-off, gentle entrance on load (not scroll-linked) */
.hx-in { animation: hx-rise 1.1s var(--ease) both; }
.hx-in:nth-child(2) { animation-delay: .1s; } .hx-in:nth-child(3) { animation-delay: .2s; } .hx-in:nth-child(4) { animation-delay: .3s; }
@keyframes hx-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---- responsive ---- */
@media (min-width: 1100px) { .hx-title span { white-space: nowrap; } }   /* exactly two lines on laptops+ */
@media (max-height: 760px) and (min-width: 900px) {                       /* short laptop screens */
  .hx { padding-bottom: 96px; }
  .hx-title { margin-top: 22px; font-size: clamp(2rem, 4.2vw, 4.1rem); }
  .hx-actions { margin-top: 28px; }
}
@media (max-width: 899px) {                                               /* tablet */
  .hx-title { font-size: clamp(2.05rem, 6.6vw, 3.4rem); }
}
@media (max-width: 600px) {                                               /* mobile: fewer, smaller layers */
  .hx { padding: calc(var(--nav-h) + 36px) 0 104px; }
  .hx-pill { font-size: 10px; letter-spacing: .12em; padding: 7px 14px; }
  .hx-title { margin-top: 22px; font-size: clamp(1.8rem, 8.6vw, 2.5rem); letter-spacing: -.03em; }
  .hx-lead { margin-top: 18px; font-size: .98rem; }
  .hx-actions { flex-direction: column; width: 100%; max-width: 360px; margin-inline: auto; margin-top: 28px; }
  .hx-actions .btn { width: 100%; }
  .hx-row { -webkit-text-stroke-width: 1px; }
  .hx-micro { letter-spacing: .22em; font-size: 9.5px; }
}
@media (max-width: 380px) {                                               /* 320–375px: let the pill wrap cleanly */
  .hx-pill { display: inline-block; white-space: normal; text-align: center; line-height: 1.6; border-radius: 18px; letter-spacing: .1em; }
  .hx-pill .dot { display: none; }
  .hx-actions .btn { white-space: normal; padding-inline: 18px; font-size: 11.5px; letter-spacing: .08em; }
  .hx-micro { letter-spacing: .16em; font-size: 9px; }
}

/* ---- reduced motion: a composed, static frame of the same tapestry ---- */
@media (prefers-reduced-motion: reduce) {
  .hx-row, .hx-micro i, .hx-in { animation: none !important; }
  .hx-row:nth-child(even) { transform: translateX(-18%); }   /* offset the rows so the still frame reads as a tapestry */
  .hx-micro i { opacity: .5; }
}


.page-hero { padding: calc(var(--nav-h) + clamp(64px, 10vw, 140px)) 0 clamp(48px, 7vw, 96px); position: relative; overflow: hidden; isolation: isolate; }
.page-hero .atmos .blob { opacity: .5; }
.page-hero h1 { font-size: clamp(2.3rem, 6vw, 5.2rem); letter-spacing: -.03em; max-width: 18ch; margin: 22px 0; }

/* ==========================================================================
   HOME 01 — Problem explorer
   ========================================================================== */
.explorer { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.problem-list { display: grid; gap: 4px; }
.problem-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 20px 4px;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 600; color: var(--muted); transition: color .3s, padding-left .35s var(--ease);
}
.problem-btn .idx { font-size: 12px; letter-spacing: .15em; color: var(--dim); font-variant-numeric: tabular-nums; }
.problem-btn:hover { color: var(--text); }
.problem-btn[aria-selected="true"] { color: var(--text); padding-left: 14px; border-bottom-color: var(--magenta); }
.problem-btn[aria-selected="true"] .idx { color: var(--magenta); }

.stage-panel { border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6)); padding: clamp(22px, 3.2vw, 44px); min-height: 460px; position: relative; overflow: hidden; }
.stage-panel::before { content: ""; position: absolute; width: 420px; height: 420px; right: -140px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 75, 51, .14), transparent 70%); filter: blur(30px); pointer-events: none; }
.stage-title { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 8px; position: relative; }
.stage-sub { color: var(--muted); max-width: 52ch; position: relative; }
.pipeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; margin-top: 34px; align-items: stretch; position: relative; }
.node { border: 1px solid var(--line); border-radius: 16px; padding: 20px 18px; background: rgba(255, 255, 255, .8); display: grid; gap: 14px; align-content: start; transition: border-color .5s, box-shadow .5s, background .5s; }
.node .tag { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--dim); }
.node h4 { font-size: 1.1rem; letter-spacing: -.01em; }
.node p { font-size: .93rem; color: var(--muted); margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.node.n1 .chip { border-style: dashed; transform: rotate(var(--r, 0deg)); }
.node.n2 { border-color: rgba(0, 119, 95, .4); }
.node.n2 .chip { border-color: rgba(0, 119, 95, .45); color: var(--aqua); }
.node.n3 { border-color: rgba(199, 0, 73, .45); box-shadow: 0 0 60px -20px rgba(199, 0, 73, .3); }
.node.n3 .tag { color: var(--magenta); }
.node.n3 .chip { border-color: rgba(194, 48, 26, .45); color: #A8321A; background: rgba(199, 0, 73, .06); }
.link { align-self: center; color: var(--dim); font-size: 22px; }
.stage-panel[data-playing="true"] .link { color: var(--aqua); }
@media (max-width: 1000px) { .explorer { grid-template-columns: 1fr; } .stage-panel { min-height: 0; } }
@media (max-width: 760px) { .pipeline { grid-template-columns: 1fr; } .link { transform: rotate(90deg); justify-self: center; } }

/* ==========================================================================
   HOME 02 — Talent · Technology · Transformation
   ========================================================================== */
.ttt { position: relative; display: grid; gap: clamp(36px, 6vw, 80px); }
.ttt-line { position: absolute; left: 22px; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
.ttt-line i { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--magenta), var(--purple), var(--aqua)); transform-origin: top; transform: scaleY(var(--p, 1)); }
.ttt-row { display: grid; grid-template-columns: 46px 1fr; gap: clamp(20px, 4vw, 56px); position: relative; }
.ttt-dot { width: 46px; height: 46px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--muted); z-index: 1; }
.ttt-row:nth-child(2) .ttt-dot { border-color: var(--magenta); color: var(--magenta); }
.ttt-row:nth-child(3) .ttt-dot { border-color: var(--purple); color: var(--purple); }
.ttt-row:nth-child(4) .ttt-dot { border-color: var(--aqua); color: var(--aqua); }
.ttt-word { font-size: clamp(2.6rem, 9vw, 8rem); letter-spacing: -.045em; line-height: .95; text-transform: uppercase; }
.ttt-row p { font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: var(--muted); margin-top: 14px; max-width: 40ch; }
.ttt-row .then { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin-top: 18px; }

/* ==========================================================================
   HOME 03 — What can we transform
   ========================================================================== */
.transform-list { border-top: 1px solid var(--line); }
.t-row {
  display: grid; grid-template-columns: 60px minmax(0, 1.2fr) minmax(0, 1fr) 40px; align-items: center; gap: 24px;
  padding: clamp(24px, 3.2vw, 40px) 0; border-bottom: 1px solid var(--line); position: relative; transition: padding .45s var(--ease);
}
.t-row::before { content: ""; position: absolute; inset: 0 -20px; background: linear-gradient(90deg, rgba(199, 0, 73, .06), rgba(0, 119, 95, .05)); opacity: 0; transition: opacity .4s; border-radius: 14px; z-index: -1; }
.t-row:hover::before { opacity: 1; }
.t-row:hover { padding-left: 10px; }
.t-num { font-size: 13px; color: var(--dim); letter-spacing: .15em; }
.t-name { font-size: clamp(1.4rem, 3vw, 2.5rem); letter-spacing: -.025em; }
.t-shift { display: flex; align-items: center; gap: 14px; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 600; flex-wrap: wrap; }
.t-shift .from { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(29, 27, 47, .3); }
.t-shift .to { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-shift .to-cool { background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-shift .sep { color: var(--dim); }
.t-go { color: var(--dim); font-size: 22px; transition: transform .35s var(--ease), color .3s; justify-self: end; }
.t-row:hover .t-go { transform: translateX(6px); color: var(--aqua); }
@media (max-width: 820px) { .t-row { grid-template-columns: 36px 1fr; } .t-shift { grid-column: 2; } .t-go { display: none; } }

/* ==========================================================================
   HOME 04 — We don't start with technology
   ========================================================================== */
.statement { min-height: 100svh; display: grid; align-content: center; position: relative; overflow: hidden; isolation: isolate; }
.statement .atmos .blob { opacity: .45; }
.stmt-line { font-size: clamp(1.5rem, .8rem + 2.95vw, 3.5rem); text-transform: uppercase; letter-spacing: -.04em; line-height: 1; }
.stmt-stack { display: grid; gap: clamp(20px, 3vw, 40px); }
.stmt-stack .s1 { color: var(--dim); }
.stmt-stack .s2 { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stmt-stack .s3 { font-size: clamp(1.4rem, 3.4vw, 3rem); letter-spacing: -.02em; color: var(--text); max-width: 26ch; }
.process { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: clamp(56px, 8vw, 110px); border-top: 1px solid var(--line-2); }
.step { padding: 26px 22px 6px 0; position: relative; }
.step::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--magenta)); box-shadow: 0 0 18px var(--c, var(--magenta)); }
.step .n { font-size: 12px; letter-spacing: .18em; color: var(--dim); }
.step h4 { font-size: clamp(1.2rem, 1.9vw, 1.6rem); margin: 8px 0; }
.step p { font-size: .94rem; color: var(--muted); margin: 0; max-width: 24ch; }
.step:nth-child(1) { --c: var(--magenta); } .step:nth-child(2) { --c: var(--coral); } .step:nth-child(3) { --c: var(--purple); } .step:nth-child(4) { --c: var(--blue); } .step:nth-child(5) { --c: var(--aqua); }
@media (max-width: 900px) { .process { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line-2); margin-left: 4px; } .step { padding: 10px 0 22px 26px; } .step::before { top: 16px; left: -4px; } .step p { max-width: none; } }

/* ==========================================================================
   HOME 05 — Built by Mecandria
   ========================================================================== */
.showcase { display: grid; gap: clamp(72px, 10vw, 140px); }
.product { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.product.flip .shot-wrap { order: 2; }
.shot-wrap { position: relative; }
.shot-wrap::before { content: ""; position: absolute; inset: -8% -6%; background: radial-gradient(60% 60% at 50% 50%, var(--glow, rgba(255, 75, 51, .2)), transparent 70%); filter: blur(30px); z-index: -1; }
.browser { border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: #FFFFFF; box-shadow: 0 40px 100px -40px rgba(29, 27, 47, .35); }
.browser .bar { display: flex; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #F6F1E9; }
.browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.browser img { width: 100%; height: auto; }
.product-meta .code { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .2em; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--aqua); margin-bottom: 18px; }
.product-meta h3 { font-size: clamp(2rem, 3.6vw, 3.1rem); margin-bottom: 8px; }
.product-meta h3 a:hover { color: var(--teal); }
.product-meta .product-more { margin-top: 26px; }
.so-inline, .tm-inline { color: var(--teal); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(0, 119, 95, .35); text-underline-offset: 3px; }
.so-inline:hover, .tm-inline:hover { text-decoration-color: currentColor; }
.product-meta .for { color: var(--muted); margin-bottom: 30px; }
.cso { display: grid; gap: 0; border-top: 1px solid var(--line); }
.cso > div { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cso dt { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--c, var(--magenta)); padding-top: 3px; }
.cso dd { margin: 0; font-size: .97rem; color: var(--muted); }
.cso > div:nth-child(2) { --c: var(--purple); } .cso > div:nth-child(3) { --c: var(--aqua); }
.cso > div:nth-child(2) dt { color: var(--purple); }
.modules { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; }
.modules span { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); color: var(--muted); }
@media (max-width: 960px) { .product { grid-template-columns: 1fr; } .product.flip .shot-wrap { order: 0; } .cso > div { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- testimonials placeholder ---------- */
.quote-empty {
  border: 1px dashed var(--line-2); border-radius: 24px; padding: clamp(32px, 6vw, 80px);
  display: grid; gap: 18px; justify-items: start; position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, .8), transparent);
}
.quote-empty .mark { font-size: clamp(5rem, 12vw, 9rem); line-height: .6; color: var(--line-2); font-weight: 700; }
.quote-empty h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); max-width: 22ch; }
.badge { display: inline-block; font-size: 11px; letter-spacing: .18em; font-weight: 700; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: #FFF0EA; color: #A8321A; border: 1px solid #F5C8BA; }

/* ---------- final CTA ---------- */
.final { text-align: center; overflow: hidden; isolation: isolate; }
.final h2 { font-size: clamp(1.5rem, .8rem + 2.95vw, 3.5rem); text-transform: uppercase; letter-spacing: -.045em; line-height: .95; }
.final p { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.3rem); margin: 28px auto 40px; max-width: 46ch; }

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.prose p { color: var(--muted); max-width: 64ch; }
.prose p strong { color: var(--text); }

.spectrum-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 32px; }
.spectrum-bar div { padding: 18px 16px 0 0; border-top: 2px solid var(--c); }
.spectrum-bar b { display: block; font-size: 1.05rem; }
.spectrum-bar span { font-size: .88rem; color: var(--muted); }
.spectrum-bar div:nth-child(1) { --c: var(--dim); } .spectrum-bar div:nth-child(2) { --c: var(--coral); } .spectrum-bar div:nth-child(3) { --c: var(--purple); } .spectrum-bar div:nth-child(4) { --c: var(--blue); } .spectrum-bar div:nth-child(5) { --c: var(--aqua); }
@media (max-width: 760px) { .spectrum-bar { grid-template-columns: 1fr; gap: 14px; } }

.shifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.shifts > div { padding: 28px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.shifts .from { color: var(--dim); font-size: .95rem; }
.shifts .to { font-size: 1.3rem; font-weight: 700; margin-top: 4px; }

.sol { padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 90px); scroll-margin-top: calc(var(--nav-sticky-h) + 10px); }
.sol .area { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--aqua); font-weight: 700; }
.sol h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); margin: 14px 0 18px; }
.sol .ft { display: flex; flex-wrap: wrap; gap: 8px 14px; font-weight: 600; margin-top: 24px; align-items: center; }
.sol .ft .from { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(29, 27, 47, .3); }
.points li { padding: 16px 0 16px 28px; border-bottom: 1px solid var(--line); position: relative; color: var(--muted); }
.points li:first-child { border-top: 1px solid var(--line); }
.points li::before { content: ""; position: absolute; left: 4px; top: 25px; width: 8px; height: 8px; background: var(--grad-brand); border-radius: 50%; }
@media (max-width: 900px) { .sol { grid-template-columns: 1fr; } }

.chip-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-nav a, .filters button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; color: var(--muted); background: transparent; transition: all .25s; }
.chip-nav a:hover, .filters button:hover { border-color: var(--aqua); color: var(--text); }
.filters button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }

.client-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.client { border: 1px solid var(--line); border-radius: 18px; padding: 30px; display: grid; gap: 12px; align-content: start; background: rgba(255, 255, 255, .75); transition: border-color .3s, transform .4s var(--ease); }
.client:hover { border-color: var(--line-2); transform: translateY(-4px); }
.client .kind { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--aqua); }
.client h3 { font-size: 1.5rem; }
.client p { color: var(--muted); font-size: .96rem; margin: 0; }
.client .loc { color: var(--dim); font-size: .88rem; }

/* insights list */
.post-list { border-top: 1px solid var(--line); }
.post { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; gap: 28px; padding: 34px 0; border-bottom: 1px solid var(--line); align-items: start; transition: padding .4s var(--ease); }
.post:hover { padding-left: 12px; }
.post .meta { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); display: grid; gap: 6px; }
.post .cat { color: var(--aqua); font-weight: 700; }
.post h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); letter-spacing: -.02em; }
.post p { color: var(--muted); margin: 10px 0 0; max-width: 62ch; }
.post .go { color: var(--dim); font-size: 22px; transition: transform .3s var(--ease), color .3s; }
.post:hover .go { transform: translateX(6px); color: var(--aqua); }
.post[hidden] { display: none; }
@media (max-width: 720px) { .post { grid-template-columns: 1fr; gap: 12px; } .post .go { display: none; } }


/* forms */
.form-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 100px); }
@media (max-width: 900px) { .form-wrap { grid-template-columns: 1fr; } }
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; background: #FFFFFF; border: 1px solid var(--line-2); border-radius: 12px; padding: 15px 16px;
  color: var(--text); font: inherit; transition: border-color .25s, background .25s;
}
.field select option { background: #FFFFFF; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--aqua); background: rgba(0, 119, 95, .04); }
.field .err { color: #B3261E; font-size: .85rem; min-height: 1.1em; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: #D0384A; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 600px) { .row-2 { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; }
.form-ok { display: none; border: 1px solid rgba(0, 119, 95, .4); background: rgba(0, 119, 95, .06); border-radius: 14px; padding: 22px; }
.form-ok.show { display: block; }
.note { font-size: .85rem; color: var(--dim); }
.info-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.info-list > div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.info-list dt { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); font-weight: 700; margin-bottom: 4px; }
.info-list dd { margin: 0; }
.legal { max-width: 760px; }
.legal h2 { font-size: 1.5rem; margin: 2em 0 .5em; }
.legal p, .legal li { color: var(--muted); }
.legal ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; margin-bottom: 1em; }
.draft-note { border: 1px solid rgba(194, 48, 26, .35); background: rgba(255, 75, 51, .07); padding: 14px 18px; border-radius: 12px; font-size: .92rem; color: #A8321A; margin-bottom: 36px; }
.err-code { font-size: clamp(7rem, 26vw, 20rem); line-height: .85; letter-spacing: -.06em; font-weight: 800; }

/* ---------- footer ----------
   The one dark band in the warm-ivory palette: warm glow from the top, gradient top edge.
   It redefines the text, line and accent tokens so everything inside reads light on dark.
   Four columns on desktop; logo full width over three columns on tablets; two columns on phones. */
.site-footer {
  --text: #FBF8F3; --muted: #B9B3C4; --dim: #9C96A8; --line: rgba(255, 255, 255, .12); --line-2: rgba(255, 255, 255, .22);
  --aqua: #4FD8C0; --magenta: #FF4D8D;
  position: relative; padding: clamp(60px, 8vw, 96px) 0 30px; color: var(--text);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(255, 75, 51, .14), transparent 70%),
    radial-gradient(40% 60% at 88% 100%, rgba(0, 211, 164, .08), transparent 70%),
    #1D1B2F;
}
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; opacity: .75;
  background: linear-gradient(90deg, transparent, #4FD8C0 25%, #FF4B33 55%, var(--magenta) 80%, transparent);
}
.foot-grid { display: grid; grid-template-columns: 1.55fr 1fr 1.1fr 1.15fr; gap: 48px; }
.foot-logo { display: flex; align-items: center; gap: 12px; width: fit-content; }
.foot-logo .mark { height: 40px; width: auto; }
.foot-logo .word { height: 16px; width: auto; }
.foot-tag { margin: 18px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--aqua); }
.foot-blurb { margin: 12px 0 0; color: var(--muted); max-width: 36ch; }
.foot-mail {
  display: inline-flex; align-items: center; gap: 10px; height: 50px; margin-top: 26px; padding: 0 5px 0 16px;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .06); color: var(--muted);
  transition: border-color .2s;
}
.foot-mail:hover { border-color: var(--aqua); }
.foot-mail .sh-ico { width: 18px; height: 18px; flex: none; }
.foot-mail span { font-size: 15px; color: var(--text); white-space: nowrap; }
.foot-mail b {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px;
  background: #FBF8F3; color: #1D1B2F; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.site-footer h5 {
  display: flex; align-items: center; gap: 10px; margin: 8px 0 22px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--aqua);
}
.site-footer h5::before { content: ""; width: 20px; height: 1px; background: currentColor; opacity: .7; }
.foot-list { display: grid; gap: 12px; }
.foot-list a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); transition: color .2s; }
.foot-list a::after { content: "→"; color: var(--aqua); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.foot-list a:hover { color: #fff; }
.foot-list a:hover::after { opacity: 1; transform: none; }
.foot-touch li { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); }
.foot-touch .sh-ico { width: 18px; height: 18px; flex: none; margin-top: 5px; color: var(--aqua); }
.foot-bottom {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  margin-top: 72px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--dim);
}
.foot-legal { display: flex; gap: 22px; }
.foot-legal a { transition: color .2s; } .foot-legal a:hover { color: var(--text); }
.foot-motto {
  justify-self: end; display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #E4DFD6;
}
.foot-ping { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 4px rgba(79, 216, 192, .16); }
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; margin-top: 56px; }
  .foot-motto { justify-self: center; }
}
@media (max-width: 640px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px 18px; }
  .foot-touch { grid-column: 1 / -1; }
  .foot-mail { display: flex; width: 100%; }
  .foot-mail span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
  .site-footer h5 { margin-bottom: 12px; }
  .foot-list { gap: 0; font-size: 15.5px; }
  .foot-list a { min-height: 44px; padding-block: 6px; line-height: 1.3; }   /* comfortable tap targets; long names wrap as one item */
  .foot-list a::after { display: none; }                                    /* hover arrow: no hover on touch, and it costs width */
  .foot-touch .sh-ico { margin-top: 13px; }
  .foot-touch li > span { padding-block: 10px; }
  .foot-bottom { margin-top: 44px; font-size: 13px; }
  .foot-legal { min-height: 44px; align-items: center; }
  .foot-motto { font-size: 10px; letter-spacing: .12em; }
}

/* ==========================================================================
   MOTION UTILITIES
   .js is set by assets/js/main.js; content stays visible without JS.
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .atmos .blob { animation: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   HOME sections — editorial layouts
   ========================================================================== */

.friction { border-top: 1px solid var(--line); }
.friction li { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: center; padding: clamp(24px, 3vw, 38px) 0; border-bottom: 1px solid var(--line); transition: padding .45s var(--ease); }
.friction .fi { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-2); border-radius: 12px; color: var(--dim); transition: color .3s, border-color .3s; }
.friction .fi svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.friction h3 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); letter-spacing: -.025em; transition: color .3s; }
.friction p { margin: 0; color: var(--muted); }
.friction li:hover { padding-left: 14px; }
.friction li:hover h3 { color: var(--aqua); }
.friction li:hover .fi { color: var(--magenta); border-color: var(--magenta); }
@media (max-width: 760px) { .friction li { grid-template-columns: 40px 1fr; gap: 8px 14px; } .friction .fi { width: 40px; height: 40px; border-radius: 10px; } .friction .fi svg { width: 19px; height: 19px; } .friction p { grid-column: 2; } }

.tabs { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.tabs--h { grid-template-columns: 1fr; }
.tabs .tablist { display: grid; gap: 4px; }
.tabs--h .tablist { display: flex; flex-wrap: wrap; gap: 10px; }
.tabs--h .problem-btn { width: auto; border: 1px solid var(--line-2); border-radius: 999px; padding: 12px 22px; font-size: 1rem; gap: 12px; }
.tabs--h .problem-btn[aria-selected="true"] { background: var(--text); color: var(--bg); padding-left: 22px; border-color: var(--text); }
.tabs--h .problem-btn[aria-selected="true"] .idx { color: var(--bg); }
.tab-panel { border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px, 4vw, 52px); background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.6)); position: relative; overflow: hidden; }
.tab-panel::before { content: ""; position: absolute; width: 380px; height: 380px; right: -140px; top: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(255,75,51,.14), transparent 70%); filter: blur(30px); }
.tab-panel[hidden] { display: none; }
.tab-panel.show { animation: panel-in .55s var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tab-panel h3 { font-size: clamp(1.6rem, 3vw, 2.5rem); margin-bottom: 14px; position: relative; }
.tab-panel p { color: var(--muted); max-width: 52ch; position: relative; font-size: 1.05rem; }
.tab-panel .ft { display: flex; flex-wrap: wrap; gap: 8px 14px; font-weight: 600; margin: 26px 0; position: relative; }
.tab-panel .ft .from { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(29, 27, 47, .3); }
.tab-panel .step-n { font-size: 12px; letter-spacing: .2em; color: var(--aqua); text-transform: uppercase; font-weight: 700; display: block; margin-bottom: 14px; position: relative; }
@media (max-width: 1000px) { .tabs { grid-template-columns: 1fr; } }

/* Trust: client quotes sit still in a two-column grid */
.trust-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 8px 0 0; padding: 0; list-style: none; }
.trust-set > li { display: flex; }
.trust-card { width: 100%; margin: 0; background: var(--bg-3); border: 1px solid var(--line); border-radius: 18px; padding: 30px 30px 26px; display: grid; grid-template-rows: 1fr auto; gap: 22px; box-shadow: 0 18px 40px -30px rgba(29, 27, 47, .35); }
.trust-card blockquote { margin: 0; position: relative; padding-top: 34px; }
.trust-card blockquote::before { content: "\201C"; position: absolute; top: -14px; left: -2px; font-size: 4.2rem; line-height: 1; font-weight: 800; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trust-card p { margin: 0; color: var(--text); font-size: .98rem; line-height: 1.65; }
.trust-card figcaption { display: grid; justify-items: start; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.trust-card .name { font-weight: 700; font-size: .95rem; }
.trust-card .trust-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); border: 1px solid rgba(0, 119, 95, .3); border-radius: 999px; padding: 4px 10px; }
@keyframes trust-scroll { to { transform: translateX(-50%); } }   /* used by the client logo strip below */

/* Partners (home): copy on the left; on the right a tinted panel running off the page edge,
   with white logo tiles stepping through it. --per = tiles in view, read by interactions.js */
.partners { overflow: hidden; padding-block: clamp(56px, 7vw, 110px); }
.partners-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.partners-copy { display: grid; justify-items: start; gap: 20px; }
.partners-copy .h-lg { margin: 0; }
.partners-quote { margin: 0; max-width: 42ch; color: var(--muted); font-size: 1.02rem; line-height: 1.8; }
.partners-nav { display: inline-flex; margin-top: 12px; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 26px -20px rgba(29, 27, 47, .5); }
.partners-btn { width: 64px; height: 54px; display: grid; place-items: center; border: 0; background: var(--bg-2); color: var(--text); font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: background .25s ease, color .25s ease; }
.partners-btn + .partners-btn { border-left: 3px solid var(--magenta); }
.partners-btn:hover { background: var(--text); color: var(--bg); }
.partners-btn:focus-visible { outline: 2px solid var(--magenta); outline-offset: -4px; }
.partners-stage { --per: 3; position: relative; padding-block: clamp(48px, 6vw, 96px); }
.partners-stage::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: 18%; right: -100vw; background: radial-gradient(rgba(0, 119, 95, .14) 1px, transparent 1.2px) 0 0 / 9px 9px, rgba(0, 119, 95, .07); border-radius: 24px 0 0 24px; }
.partners-viewport { position: relative; z-index: 1; overflow-x: auto; scroll-snap-type: x mandatory; }
.js .partners-viewport { overflow: hidden; }
.partners-track { --gap: 24px; display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; transition: transform .7s var(--ease); }
.partner-tile { flex: 0 0 calc((100% - var(--gap) * (var(--per) - 1)) / var(--per)); height: 160px; box-sizing: border-box; padding: 22px 26px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 34px -28px rgba(29, 27, 47, .45); scroll-snap-align: start; }
.partner-tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* a linked logo opens the client's live site; the link's ::after stretches over the whole tile (home + testimonials) */
.partner-tile, .logo-tile { position: relative; transition: transform .35s var(--ease), border-color .3s ease, box-shadow .3s ease; }
.logo-link { display: block; height: 100%; }
.logo-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.logo-link:focus-visible { outline: none; }
.logo-link:focus-visible::after { outline: 2px solid var(--magenta); outline-offset: -3px; border-radius: 14px; }
.partner-tile:has(.logo-link):hover, .logo-tile:has(.logo-link):hover { transform: translateY(-4px); border-color: rgba(0, 119, 95, .45); box-shadow: 0 22px 38px -26px rgba(29, 27, 47, .55); }
.partner-tile.is-fill { padding: 8px 14px; background: #D63489; border-color: #D63489; }   /* the logo file has its own pink ground */
.partners-dots { position: relative; z-index: 1; display: flex; gap: 8px; margin-top: 26px; }
.partners-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(0, 119, 95, .3); cursor: pointer; transition: width .35s var(--ease), background .35s ease; }
.partners-dots button[aria-current="true"] { width: 28px; background: var(--teal); }
@media (max-width: 1000px) {
  .partners-grid { grid-template-columns: 1fr; }
  .partners-stage { --per: 2; }
  .partners-stage::before { left: 10%; }
}
@media (max-width: 560px) { .partner-tile { height: 120px; padding: 16px 18px; } .partners-track { --gap: 14px; } .partners-stage::before { left: 18%; } }

/* Client logos (testimonials hero): the same sideways loop as the home quotes, on white tiles */
.client-logos { min-width: 0; margin-top: clamp(40px, 5vw, 64px); }   /* min-width: the testimonials hero is a grid, and the long track must not widen its column */
.client-logos-h { margin-top: 0; margin-bottom: 18px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.logo-marquee { overflow: hidden; padding: 6px 0 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logo-track { display: flex; width: max-content; animation: trust-scroll 40s linear infinite reverse; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-set { display: flex; gap: 20px; padding: 0 20px 0 0; margin: 0; list-style: none; }
.logo-tile { width: 200px; height: 110px; flex: none; box-sizing: border-box; padding: 14px 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 30px -26px rgba(29, 27, 47, .4); overflow: hidden; }
.logo-tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
.logo-tile.is-fill { padding: 6px 12px; background: #D63489; border-color: #D63489; }   /* the logo file has its own pink ground, so the tile takes that colour */
@media (max-width: 640px) { .logo-tile { width: 150px; height: 86px; padding: 10px 16px; } .logo-track { animation-duration: 30s; } }
@media (max-width: 760px) { .trust-set { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .trust-card { padding: 24px 22px 22px; } .trust-card p { font-size: .92rem; } }
@media (prefers-reduced-motion: reduce) {
  .partners-track { transition: none; }
  .logo-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .logo-track { animation: none; padding-left: var(--gutter); }
  .logo-set[aria-hidden] { display: none; }
}

/* TTT reveal: rows use [data-reveal] with staggered delays; the line draws once the block is in view */
.js .ttt .ttt-line i { transform: scaleY(0); transition: transform 2.2s var(--ease) .2s; }
.js .ttt.is-in .ttt-line i { transform: scaleY(1); }
.js .ttt[data-reveal] { opacity: 1; transform: none; }
.ttt-word { font-weight: 700; }

/* ==========================================================================
   SITE INTRO — first page opened in a tab (driven by assets/js/site-intro.js)
   ========================================================================== */
#site-intro {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, var(--bg-3) 0%, var(--bg-2) 45%, var(--bg) 100%);
}
.intro-play #site-intro { display: flex; animation: mc-failsafe 0s linear 7s forwards; }
@keyframes mc-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }
/* hold the page's own entrance animations on their first frame until the intro lifts */
.intro-play main *, .intro-play main *::before, .intro-play main *::after { animation-play-state: paused !important; }

/* kinetic-words intro (site-intro.js adds the stripes and panels): the stripes are the screen
   and slide apart on exit; each word panel wipes in on the M's diagonal */
.intro-stripes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.intro-stripe { position: absolute; top: -10%; height: 120%; width: 31%; background: var(--bg-2); transform: skewX(-14deg); }
.intro-panel { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); }
.intro-panel--1 { background: linear-gradient(100deg, #ff0c6b, #ff4b33); color: #1D1B2F; }
.intro-panel--2 { background: linear-gradient(100deg, #00a9cc, #00e2f3); color: #1D1B2F; }
.intro-panel--3 { background: #1D1B2F; }
.intro-word { display: block; overflow: hidden; padding: .06em .04em; font-size: var(--fs); line-height: 1; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
.intro-word .intro-ch { display: inline-block; }
.intro-panel--1 .intro-word { --fs: min(17vw, 30vh); }
.intro-panel--2 .intro-word { --fs: min(11.5vw, 22vh); }
.intro-panel--3 .intro-word { --fs: min(8.6vw, 17vh); }
.intro-inner {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 24px;
  opacity: 0; /* shown by site-intro.js once the sequence starts */
}
.intro-logo { width: clamp(96px, 13vw, 150px); height: auto; }
.intro-name {
  margin: 22px 0 0; overflow: hidden; padding: 0 0 .08em .14em; /* left pad balances the trailing letter-spacing */
  font-size: clamp(32px, 6.4vw, 68px); line-height: 1.15; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text);
}
.intro-name .intro-ch { display: inline-block; will-change: transform; }
.intro-line { display: block; width: 88px; height: 2px; margin: 20px 0 16px; border-radius: 2px; background: linear-gradient(90deg, var(--magenta), var(--coral) 45%, var(--cyan) 55%, var(--aqua)); }
.intro-sub {
  margin: 0; padding-left: .42em; /* balance the trailing letter-spacing */
  font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: .42em; text-transform: uppercase; color: var(--aqua);
}
.intro-tag { margin: 22px 0 0; font-size: clamp(15px, 1.8vw, 18px); line-height: 1.5; color: var(--muted); }
.intro-skip {
  position: absolute; z-index: 4; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .7);
  color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .06em;
  transition: color .2s, border-color .2s;
}
.intro-skip:hover { color: var(--text); border-color: var(--aqua); }

/* ==========================================================================
   PAGE TRANSITIONS — moving between pages of the site (cross-document View
   Transitions: Chrome/Edge, Safari 18.2+; other browsers load the page as before).
   The old page fades and lifts, the new one rises in; the header stays
   still and the nav pill slides to the new page's link. Off for reduced motion.
   Set-up (first-frame hold, prerender on hover) is in assets/js/components.js.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
#site-header { view-transition-name: mc-header; }
#site-nav .sh-pill.is-on { view-transition-name: mc-pill; }
/* each menu label is captured on its own, so it stays above the sliding pill (one per MENU item in components.js) */
#site-nav .sh-link:nth-of-type(1) { view-transition-name: mc-nav-1; }
#site-nav .sh-link:nth-of-type(2) { view-transition-name: mc-nav-2; }
#site-nav .sh-link:nth-of-type(3) { view-transition-name: mc-nav-3; }
#site-nav .sh-link:nth-of-type(4) { view-transition-name: mc-nav-4; }
#site-nav .sh-link:nth-of-type(5) { view-transition-name: mc-nav-5; }
#site-nav .sh-link:nth-of-type(6) { view-transition-name: mc-nav-6; }
#site-nav .sh-link:nth-of-type(7) { view-transition-name: mc-nav-7; }
.sh-capsule.is-visible { view-transition-name: mc-capsule; }
/* scrolled past the header (capsule showing) it would fly in from above, and with the drawer
   open it would float over the drawer, so then it joins the page fade instead */
html:has(.sh-capsule.is-visible) #site-header,
html:has(.sh-capsule.is-visible) #site-nav .sh-pill, html:has(.sh-capsule.is-visible) #site-nav .sh-link,
html.sh-lock #site-header, html.sh-lock #site-nav .sh-pill, html.sh-lock #site-nav .sh-link, html.sh-lock .sh-capsule { view-transition-name: none; }

::view-transition { background: var(--bg); }   /* no light gap between the two pages */
::view-transition-old(root) { animation: mc-page-out .28s cubic-bezier(.4, 0, 1, 1) both; mix-blend-mode: normal; }
::view-transition-new(root) { animation: mc-page-in .5s var(--ease) .08s both; mix-blend-mode: normal; }
@keyframes mc-page-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes mc-page-in { from { opacity: 0; transform: translateY(16px); } }
/* the pill slides with its own easing and keeps its height while its width changes */
::view-transition-group(mc-pill) { animation-duration: .45s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(mc-pill), ::view-transition-new(mc-pill) { height: 100%; }

/* reached from another page in this tab (html.mc-arrived, set by components.js):
   the hero's own entrance is quicker, so it settles together with the transition */
.mc-arrived :is(.hx-in, .wa-in, .bm-in, .ct-rise, .in-rise, .tm-rise) { animation-duration: .7s; }