/* ==========================================================================
   Sinaa Partners — site stylesheet
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* The header is sticky and 76px tall, so anything an in-page link or
   scrollIntoView() jumps to would otherwise land underneath it. Only applies
   at the moment an element is scrolled to. */
[id] { scroll-margin-top: calc(76px + var(--s-5)); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--text-body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.01em; }
h4 { font-size: 1.0625rem; letter-spacing: 0; }
p  { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
img, svg { max-width: 100%; }

a { color: var(--gold-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-dark :focus-visible { outline-color: var(--gold-lt); }  /* 7:1 on ink */

.skip {
  position: absolute; left: var(--s-4); top: var(--s-4); z-index: 200;
  background: var(--white); color: var(--navy); font-weight: 600;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-md);
  /* transform, not top: `top` relayouts every frame, and -200% keeps the link
     clear of the viewport even if the transform never resolves. */
  transform: translateY(-200%);
  transition: transform .15s ease;
}
.skip:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .skip { transition: none; } }

/* --- Layout primitives ---------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--wide { max-width: 1400px; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 1.5rem + 5vw, 5rem); }
.section--warm { background: var(--surface-warm); }
.section--warm-deep { background: var(--surface-warm-deep); }
.section--dark { background: var(--surface-dark); }
.on-dark { color: var(--text-muted-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--text-on-dark); }
.on-dark a { color: var(--gold-lt); }
.on-dark a:hover { color: var(--white); }

.stack > * + * { margin-top: var(--s-4); }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--text-body); max-width: 60ch; }
.on-dark .lead { color: var(--text-muted-dark); }
.center { margin-inline: auto; text-align: center; }
.center p { margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-accent); margin: 0 0 var(--s-4);
}
.on-dark .eyebrow { color: var(--text-accent-dark); }
.eyebrow::before {
  content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: .7;
}
.center .eyebrow::before { display: none; }

.grid { display: grid; gap: var(--s-6); }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.split { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 950px) { .split { grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: var(--s-8); align-items: start; } }
@media (min-width: 950px) { .split--even { grid-template-columns: 1fr 1fr; } }
/* The right column top-aligns with the eyebrow, which reads as sitting high
   against the heading beside it. Drop it by exactly the eyebrow's own block
   -- its line box (body line-height 1.65) plus its bottom margin -- so its
   first line meets the h2. Only on the two sections the review marked. */
@media (min-width: 950px) {
  .split--align-heading > :nth-child(2) {
    padding-top: calc(var(--t-eyebrow) * 1.65 + var(--s-4));
  }
}

.sticky { position: sticky; top: 6.5rem; }
@media (max-width: 949px) { .sticky { position: static; } }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.01em; line-height: 1;
  padding: 0.95rem 1.6rem; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }
/* Gold fill carries INK text: 4.82:1. White on gold would be 3.97:1 and fail. */
.btn--primary { background: var(--gold); color: var(--ink); }
.btn--primary:hover { background: var(--gold-lt); color: var(--ink); }
.btn--dark { background: var(--navy); color: var(--white); }
.btn--dark:hover { background: var(--navy-2); color: var(--white); }
.btn--ghost { border-color: var(--rule-strong); color: var(--navy); background: transparent; }
.btn--ghost:hover { border-color: var(--navy); background: var(--white); color: var(--navy); }
.on-dark .btn--ghost { border-color: var(--rule-dark); color: var(--white); }
.on-dark .btn--ghost:hover { border-color: var(--gold-lt); background: rgba(201,147,47,.1); color: var(--white); }
/* .on-dark a { color: gold } would otherwise win over .btn--primary and put
   gold text on a gold fill. Restore the AA-checked pairings explicitly. */
.on-dark .btn--primary, .on-dark .btn--primary:hover { color: var(--ink); }
.on-dark .btn--dark, .on-dark .btn--dark:hover { color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.center .btn-row { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem;
  color: var(--gold-text); text-decoration: none;
  border-bottom: 1px solid var(--edge-gold); padding-bottom: 2px;
}
.link-arrow:hover { color: var(--navy); border-color: var(--navy); }
.link-arrow::after { content: "→"; transition: transform .18s ease; }
.link-arrow:hover::after { transform: translateX(3px); }
.on-dark .link-arrow { color: var(--gold-lt); border-color: var(--gold-lt); }
.on-dark .link-arrow:hover { color: var(--white); border-color: var(--white); }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
/* Translucency is decoration here, not information: when the reader has asked
   for less of it, make the bar solid and drop the blur entirely. */
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--white); backdrop-filter: none; }
}
/* With increased contrast the hairline borders are the first thing to go. */
@media (prefers-contrast: more) {
  .site-header { background: var(--white); backdrop-filter: none; border-bottom-color: var(--navy); }
  .card, .table-wrap, input, select, textarea { border-color: var(--rule-strong); }
  :focus-visible { outline-width: 3px; }
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 76px;
}
/* The lockup is one flat artwork, so there is no type to style here: height
   drives it and the width follows the 3.586:1 ink box. */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
/* The lockup is inline SVG whose ink is currentColor, so its colour lives
   here. Both rules also cover :hover, because `a:hover` and `.on-dark a`
   would otherwise repaint the wordmark gold. The gold ring and the slate
   accents are fixed in the artwork and identical in both supplied files. */
.logo, .logo:hover { color: #060827; }
.on-dark .logo--on-dark, .on-dark .logo--on-dark:hover { color: #F3E4CB; }
/* max-width: none defeats the global `img, svg { max-width: 100% }`: as a
   flex item the lockup would otherwise be squeezed by a crowded nav, which
   holds the height and eats the width -- i.e. distorts the wordmark. */
/* Height is the one number that matters here. "PARTNERS" is only 46 of the
   artwork's 277 ink units, so it renders at 16.6% of whatever height we set:
   at 48px that is 8.0px, which is below the size those thin, wide-tracked
   caps can resolve at -- the word read as a grey smear. 56px puts it at
   9.3px, where it reads. The footer is not boxed in by a header bar, so it
   takes 64px and PARTNERS gets 10.6px. */
.logo__lockup { display: block; height: var(--logo-h, 56px); width: auto; max-width: none; }
.site-footer .logo__lockup { --logo-h: 64px; }

/* The footer logo sat further from the tagline than its margin suggested.
   Two invisible contributors: the link is inline-level, so the parent's line
   box reserves descender space under it, and the mark itself hangs ~8px below
   the PARTNERS wordmark. Blockifying the link removes the first, which leaves
   the margin describing the gap people actually see. */
.site-footer .logo { display: flex; }

.nav { display: none; }
@media (min-width: 1040px) { .nav { display: flex; align-items: center; gap: var(--s-2); } }
.nav__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500;
  color: var(--navy); text-decoration: none;
  padding: 0.6rem 0.85rem; border-radius: var(--r-md);
  background: none; border: 0; cursor: pointer;
}
.nav__link:hover { background: var(--cream-2); color: var(--navy); }
/* Solutions is one control: it navigates on click and reveals the panel on
   hover or focus. */
.nav__item--mega { position: relative; }
.nav__link--mega { gap: 0.35rem; }
.nav__link--mega[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.nav__caret { transition: transform .15s ease; }
@media (prefers-reduced-motion: reduce) { .nav__caret { transition: none; } }
/* The panel sits 12px below the link. Without this the pointer crosses dead
   space on the way down and the menu closes under it. */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__link[aria-current="page"] { color: var(--gold-text); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; margin-top: 2.35rem; width: 1.1rem; height: 2px; background: var(--gold);
}
.nav__item { position: relative; }
.nav__caret { width: 9px; height: 9px; transition: transform .18s ease; }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  width: min(680px, 82vw); background: var(--white);
  border: 1px solid var(--rule); border-top: 2px solid var(--gold);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  padding: var(--s-5); display: grid; gap: var(--s-2);
  grid-template-columns: 1fr 1fr;
}
.mega[hidden] { display: none; }
.mega__item { display: block; padding: var(--s-4); border-radius: var(--r-md); text-decoration: none; }
.mega__item:hover { background: var(--cream-2); }
.mega__num {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; color: var(--gold-text); display: block; margin-bottom: 4px;
}
.mega__title { font-family: var(--font-display); font-weight: 600; color: var(--navy); display: block; margin-bottom: 4px; }
.mega__desc { font-size: var(--t-small); color: var(--text-body); display: block; line-height: 1.5; }

.header__cta { display: none; }
@media (min-width: 1040px) { .header__cta { display: inline-flex; } }

.burger {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 600;
  background: none; border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  color: var(--navy); padding: 0.6rem 0.9rem; cursor: pointer;
}
@media (min-width: 1040px) { .burger { display: none; } }
.burger svg { width: 16px; height: 16px; }

.drawer {
  border-top: 1px solid var(--rule); background: var(--white);
  padding: var(--s-5) 0 var(--s-7);
}
.drawer[hidden] { display: none; }
@media (min-width: 1040px) { .drawer { display: none !important; } }
.drawer__group { border-bottom: 1px solid var(--rule); padding: var(--s-4) 0; }
.drawer__label {
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text);
  margin: 0 0 var(--s-3);
}
.drawer a {
  display: block; font-family: var(--font-display); font-weight: 500;
  color: var(--navy); text-decoration: none; padding: 0.5rem 0; font-size: 1.0625rem;
}
.drawer a:hover { color: var(--gold-text); }

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--text-muted-dark); }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__bg svg { position: absolute; right: -8%; top: 50%; transform: translateY(-50%); height: 128%; width: auto; opacity: .38; }
@media (max-width: 899px) { .hero__bg svg { right: -32%; opacity: .2; } }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 15% 20%, rgba(109,133,172,.16), transparent 70%);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(4.5rem, 2rem + 11vw, 9rem); }
.hero h1 { font-size: var(--t-hero); color: var(--white); max-width: 17ch; margin-bottom: var(--s-5); }
.hero .lead { max-width: 54ch; font-size: clamp(1.1rem, 1rem + 0.55vw, 1.45rem); }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--rule-dark);
}
.hero__meta div { min-width: 8rem; }
.hero__meta dt {
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 6px;
}
.hero__meta dd { margin: 0; color: var(--white); font-size: var(--t-small); max-width: 22ch; }

.page-hero { background: var(--ink); color: var(--text-muted-dark); position: relative; overflow: hidden; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 85% 10%, rgba(169,118,29,.18), transparent 70%);
}
.page-hero__inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem); }
.page-hero h1 { color: var(--white); max-width: 20ch; }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card p { max-width: none; }
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--edge-gold); box-shadow: var(--shadow-1); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { a.card:hover { transform: none; } }
.on-dark .card, .card--dark {
  background: var(--navy-2); border-color: var(--rule-dark); color: var(--text-muted-dark);
}
/* .card--dark also appears inside light sections, where .on-dark is not in
   scope — so it has to restate its own heading and accent colours. */
.card--dark h2, .card--dark h3, .card--dark h4 { color: var(--white); }
.card--dark .card__num { color: var(--gold-lt); }
.card--dark .ticks li::before { background: var(--gold-lt); }
.card--dark a:not(.btn) { color: var(--gold-lt); }

/* Function cards: the dark treatment is the hover state, shared by all six,
   rather than a permanent style on one of them. Scoped to this grid so the
   rest of the site's cards keep their own behaviour.
   Named properties, never `all` — and the icon rides on currentColor so it
   inverts with the card instead of needing its own rule.
   .wcard joins the same system so the site has one hover language for
   non-link card grids rather than three. */
.grid--hover-dark :is(.card, .wcard) {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.card__icon { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; color: var(--gold); transition: color .2s ease; }
.grid--hover-dark :is(.card, .wcard) :is(h2, h3),
.grid--hover-dark :is(.card__num, .wcard__num) { transition: color .2s ease; }
.card__top .card__rule { margin: 0; }

/* The micro-interaction: the gold accent is what acknowledges the pointer,
   whichever form that accent takes on a given card. Where there is an icon it
   grows a touch; where the rule is the only accent -- the technology
   verticals, which the deck gives no icon -- the rule draws itself out.
   Custom ease-out rather than the built-in one, which is too limp to read at
   this size and duration, and transform only, so both composite instead of
   relaying out. */
.grid--hover-dark :is(.card__icon, .wcard__icon) {
  transition: color .2s ease, transform .18s cubic-bezier(.23, 1, .32, 1);
}
.grid--hover-dark .card__rule {
  transform-origin: left center;
  transition: background-color .2s ease, transform .22s cubic-bezier(.23, 1, .32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .grid--hover-dark :is(.card, .wcard):hover {
    background: var(--navy-2); border-color: var(--rule-dark); color: var(--text-muted-dark);
  }
  .grid--hover-dark :is(.card, .wcard):hover :is(h2, h3) { color: var(--white); }
  .grid--hover-dark :is(.card, .wcard):hover :is(.card__icon, .wcard__icon) {
    color: var(--gold-lt); transform: scale(1.08);
  }
    .grid--hover-dark .card:hover .card__rule { background: var(--gold-lt); transform: scaleX(1.6); }
  /* The numbered cards use --gold-text, which is tuned for light grounds and
     goes muddy on navy. */
  .grid--hover-dark :is(.card, .wcard):hover :is(.card__num, .wcard__num) { color: var(--gold-lt); }
}
@media (prefers-reduced-motion: reduce) {
  .grid--hover-dark :is(.card, .wcard),
  .grid--hover-dark :is(.card, .wcard) :is(h2, h3),
  .card__icon, .wcard__icon { transition: none; }
  /* Reduced motion keeps the colour change, which carries the meaning, and
     drops the movement, which does not. */
    .grid--hover-dark :is(.card, .wcard):hover :is(.card__icon, .wcard__icon),
  .grid--hover-dark .card:hover .card__rule { transform: none; }
  .grid--hover-dark .card__rule { transition: none; }
}
.card__num {
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.18em; color: var(--gold-text);
}
.on-dark .card__num { color: var(--gold-lt); }
.card__rule { width: 2.5rem; height: 2px; background: var(--gold); margin: var(--s-1) 0 var(--s-2); }
.card :is(h2, h3) { margin-bottom: 0; }
/* These section-opening titles are h2 so the document outline is sequential
   -- they sit directly under the page h1 in a section with no heading of its
   own. The level is semantic; the size stays on the h3 step. .tile and
   .grid--4 restate their own smaller size later in the file. */
.card h2, .tile h2, .steps h2 { font-size: var(--t-h3); letter-spacing: -0.01em; }
.card--pillar :is(h2, h3) { min-height: 2.5em; }
@supports (height: 1lh) { .card--pillar :is(h2, h3) { min-height: 2lh; } }
.card .link-arrow { margin-top: auto; padding-top: var(--s-4); align-self: flex-start; }

/* Four cards across leaves ~250px of column; the h3 scale breaks words. */
.grid--4 .card :is(h2, h3) { font-size: 1.0625rem; letter-spacing: 0; }
.grid--4 .card p { font-size: var(--t-small); }

.card--pillar { border-top: 3px solid var(--gold); }
.card--flat { background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: var(--s-5) 0 0; }
.on-dark .card--flat { border-top-color: var(--rule-dark); background: transparent; }

/* --- Why-us cards (offer deck slide 12) ------------------------------------ */
/* The deck draws these as rounded boxes: the number and title on one line,
   the icon held in the top-right corner away from the words, body underneath.
   Tighter padding and small body text than .card, because the deck's box is
   wide and short rather than square. */
.why-grid { gap: var(--s-4); }
.wcard {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 14px; padding: var(--s-4) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.wcard__top {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-3);
}
.wcard__num {
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.18em; color: var(--gold-text);
}
/* minmax(0,1fr) above lets this shrink; without it a long title would push
   the icon out of the box. */
.wcard__top > :is(h2, h3, h4) { margin: 0; font-size: 1.0625rem; letter-spacing: 0; }
.wcard__icon { width: 1.5rem; height: 1.5rem; color: var(--gold); }
.wcard p { margin: 0; font-size: var(--t-small); line-height: 1.5; max-width: none; }

/* --- Lists ---------------------------------------------------------------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.ticks li { position: relative; padding-left: 2rem; max-width: var(--measure); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.8em;
  width: 0.7rem; height: 0.7rem; background: var(--gold);
  /* Centred on the first line, not offset from the top of the line box, so
     the diamond stays level with the words at any size. */
  transform: translateY(-50%) rotate(45deg); /* the diamond from the mark */
}
.on-dark .ticks li::before { background: var(--gold-lt); }
/* Slide 14: in a two-column split the list started level with the eyebrow,
   floating above the heading it belongs to. Drop it to the heading's line.
   Only while the columns are side by side -- stacked, it would be a gap. */
@media (min-width: 950px) { .ticks--drop { padding-top: 2.8rem; } }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.facts li { display: flex; gap: var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); min-width: 0; }
/* An email address or URL carries no break opportunity, so on a narrow phone
   it pushed the page sideways rather than wrapping. */
.facts a, .facts span { overflow-wrap: anywhere; }
/* Same 24px-target treatment as the footer links: pad the hit area out, pull
   the identical amount back as margin, so nothing in the layout moves. */
.facts a { display: inline-block; padding-block: 3px; margin-block: -3px; }
/* Below this the 11rem label column and the value cannot both fit, so the
   row stacks instead of overflowing. */
@media (max-width: 560px) {
  .facts li { display: grid; gap: var(--s-1); }
  .facts dt, .facts b { flex: none; }
}
.on-dark .facts li { border-bottom-color: var(--rule-dark); }
.facts dt, .facts b {
  font-family: var(--font-display); font-weight: 600; color: var(--text-strong);
  flex: 0 0 11rem;
}
.on-dark .facts b { color: var(--white); }

/* --- Numbered process ----------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); counter-reset: step; }
@media (min-width: 800px) { .steps--row { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } }
@media (min-width: 800px) { .steps--3 { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; position: relative; padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.on-dark .steps li { border-top-color: var(--rule-dark); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.14em; color: var(--gold-text); display: block; margin-bottom: var(--s-3);
}
.on-dark .steps li::before { color: var(--gold-lt); }
.steps :is(h2, h3, h4) { margin-bottom: var(--s-2); }
.steps p { font-size: var(--t-small); max-width: 34ch; }

/* --- Flywheel ------------------------------------------------------------- */
.loop { display: grid; gap: var(--s-5); align-items: stretch; container-type: inline-size; }
.loop > .card { height: 100%; }
/* minmax(0,1fr), not 1fr: a bare fr track will not shrink below its
   content, so a long card title pushed this row out of its column and
   scrolled the page sideways. */
@media (min-width: 900px) {
  .loop { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: center; }
}
/* On the home page this row lives in a narrow split column: the viewport is
   1280px but each card gets 161px, which a word like "Consultancy" overflows
   by 35px. A media query cannot see that -- the container can. */
@container (max-width: 760px) {
  .loop .card { padding: var(--s-5); }
  .loop .card :is(h2, h3) { font-size: 1.0625rem; letter-spacing: 0; }
}
/* Safety net for browsers without container queries: break inside the card
   rather than spill outside it. */
.loop .card :is(h2, h3) { overflow-wrap: break-word; }

.loop__arrow { display: none; color: var(--gold-text); font-size: 1.5rem; }
.on-dark .loop__arrow { color: var(--gold-lt); }
@media (min-width: 900px) { .loop__arrow { display: block; } }
.loop__note {
  margin-top: var(--s-6); padding: var(--s-5); border: 1px dashed var(--rule-dark);
  border-radius: var(--r-lg); text-align: center; color: var(--gold-lt);
  max-width: 44rem; margin-inline: auto;
  font-family: var(--font-display); font-size: var(--t-small); font-weight: 500;
}

/* --- Stat / pull ---------------------------------------------------------- */
.pull {
  border-left: 3px solid var(--gold); padding: var(--s-2) 0 var(--s-2) var(--s-5);
  font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500;
  color: var(--text-strong); line-height: 1.4; letter-spacing: -0.01em; max-width: 40ch;
}
.on-dark .pull { color: var(--white); border-left-color: var(--gold-lt); }

/* --- Sector tiles --------------------------------------------------------- */
/* Sector tiles: warm ground, a gold diamond lifted from the mark, and the
   sector's own glyph held in the top corner away from the words. */
.tile {
  border: 1px solid transparent; border-radius: 14px; padding: var(--s-5);
  background: var(--cream-2); display: flex; flex-direction: column; gap: var(--s-3);
}
.tile__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4);
}
.tile__icon {
  width: 1.5rem; height: 1.5rem; flex: 0 0 auto; color: var(--gold);
  /* currentColor drives the stroke, so the glyph follows the token. */
}
.tile :is(h2, h3) {
  font-size: 1.0625rem; margin: 0; position: relative; padding-left: 1.5rem;
  color: var(--navy);
}
.tile :is(h2, h3)::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 0.6rem; height: 0.6rem; background: var(--gold);
  transform: translateY(-50%) rotate(45deg); /* the diamond from the mark */
}
.tile p { font-size: var(--t-small); margin: 0; max-width: none; padding-left: 1.5rem; }
@media (hover: hover) and (pointer: fine) {
  .tile { transition: border-color .15s ease; }
  .tile:hover { border-color: var(--edge-gold); }
}
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } }

/* --- Table ---------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg); }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--t-small); }
th, td { text-align: left; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th {
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy);
  background: var(--cream-2); border-bottom: 2px solid var(--gold);
}
tbody tr:last-child td { border-bottom: 0; }
th[scope="row"] { color: var(--text-strong); font-weight: 600; }

/* --- Forms ---------------------------------------------------------------- */
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.field label { font-family: var(--font-display); font-weight: 600; font-size: var(--t-small); color: var(--text-strong); }
.field .hint { font-size: var(--t-small); color: var(--text-body); }
input, select, textarea {
  font-family: var(--font-body); font-size: var(--t-body); color: var(--text-strong);
  background: var(--white); border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  padding: 0.8rem 0.9rem; width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--gold); }
textarea { min-height: 8rem; resize: vertical; }
/* No top border: a two-line legend would cut through it. */
fieldset { border: 0; border-bottom: 1px solid var(--rule); padding: 0 0 var(--s-5); margin: 0 0 var(--s-5); }
legend { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--text-strong); padding: 0; margin-bottom: var(--s-4); line-height: 1.3; }
.choices { display: grid; gap: var(--s-3); }
.choice { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-small); cursor: pointer; }
.choice input { width: auto; margin-top: 0.25rem; flex: none; }

/* --- Scan (readiness) ----------------------------------------------------- */
.scan__result {
  border: 1px solid var(--rule); border-top: 3px solid var(--gold);
  border-radius: var(--r-lg); padding: var(--s-6); background: var(--cream-2);
}
/* The fill level IS the information, so fill-against-track has to clear 3:1
   (SC 1.4.11). Gold on --rule measured 2.83:1; on white it is 3.97:1. The
   hairline keeps the empty track visible against the cream card. */
.meter {
  height: 10px; border-radius: 999px; overflow: hidden; margin: var(--s-4) 0;
  background: var(--white); border: 1px solid var(--rule-strong);
}
.meter__fill {
  /* The fill is a <span>: without this it stays an inline box, which ignores
     width, height and transform alike -- so the bar never rendered at all. */
  display: block;
  height: 100%; background: var(--gold); width: 100%;
  /* scaleX rather than width: the bar is painted once and only composited
     after that. site.js sets the scale. */
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s ease;
}
@media (prefers-reduced-motion: reduce) { .meter__fill { transition: none; } }

/* --- CTA band ------------------------------------------------------------- */
.cta-band { background: var(--navy); color: var(--text-muted-dark); position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 100% at 90% 50%, rgba(169,118,29,.22), transparent 70%);
}
.cta-band > * { position: relative; z-index: 2; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--text-muted-dark); padding-block: var(--s-8) var(--s-6); }
.site-footer h2 { font-size: var(--t-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: var(--s-4); font-weight: 600; }
.footer__grid { display: grid; gap: var(--s-7); }
/* Two columns first, so the long Solutions labels are not squeezed on a
   tablet. */
@media (min-width: 620px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
/* Then the full row. The three link columns size to their own content
   (`auto` = max-content here) rather than taking an equal quarter each, so
   "Technology & Services: Services" keeps one line and the short Company
   list stops hoarding width. The brand column absorbs what is left, which
   means a renamed link rebalances the row on its own. */
@media (min-width: 1000px) {
  /* Equal link columns, so the three headings sit at even intervals. They
     were sized to their own content, which put 271px between Solutions and
     Company but only 138px between Company and Get started. max-content is
     the floor, so "Technology & Services: Services" still holds one line. */
  .footer__grid {
    grid-template-columns: minmax(14rem, 1fr) repeat(3, minmax(max-content, 1fr));
    column-gap: var(--s-8);
  }
}
.footer__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.footer__nav a {
  color: var(--text-muted-dark); text-decoration: none; font-size: var(--t-small);
  /* The text box is 18px tall, under the 24px target minimum. Pad the hit
     area out and pull the same amount back, so the target clears 24px
     without moving a pixel of the layout. */
  display: inline-block; padding-block: 4px; margin-block: -4px;
}
.footer__nav a:hover { color: var(--white); text-decoration: underline; }
.footer__bar {
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: var(--t-small); color: var(--text-muted-dark);
}
/* 18px of link text, under the 24px target minimum -- padded out and pulled
   back, as in .footer__nav and .facts. */
.footer__bar a { display: inline-block; padding-block: 4px; margin-block: -4px; }

/* --- Page-load intro ------------------------------------------------------ */
/* Two bands part to uncover the page while the real header lockup flies home.
   Everything animated here is transform or opacity, so it composites. */
.intro { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
/* Set by the inline head script when this is internal navigation rather than
   an arrival or a reload, so the cover never paints at all. */
.intro-skip .intro { display: none; }
/* 50.5%, not 50%: a half-pixel viewport height would otherwise leave a hairline
   of page showing down the middle of the cover. */
.intro__band {
  position: absolute; left: 0; right: 0; height: 50.5%;
  background: var(--surface); will-change: transform;
}
.intro__band--top { top: 0; }
.intro__band--bottom { bottom: 0; }
/* Positioned from the real lockup's measured box, so `transform: none` at the
   end lands it exactly on the header copy. */
.intro__logo {
  position: absolute; top: 0; left: 0;
  transform-origin: top left; will-change: transform;
}
.intro__logo .logo__lockup { display: block; }

/* The loading beat. The reference pulses three bars on scaleY; our lockup has
   no bars, and squashing letterforms would deform the wordmark, so the same
   staggered rhythm rides on the five SINAA letters' opacity instead. The
   letters are the svg's first five paths, authored right-to-left, so the
   delays count down to read S-I-N-A-A. No separate spinner. */
@keyframes intro-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }
.intro__logo.is-waiting svg > path:nth-of-type(-n+5) {
  animation: intro-pulse 1.05s ease-in-out infinite;
}
.intro__logo.is-waiting svg > path:nth-of-type(5) { animation-delay: 0s; }
.intro__logo.is-waiting svg > path:nth-of-type(4) { animation-delay: .09s; }
.intro__logo.is-waiting svg > path:nth-of-type(3) { animation-delay: .18s; }
.intro__logo.is-waiting svg > path:nth-of-type(2) { animation-delay: .27s; }
.intro__logo.is-waiting svg > path:nth-of-type(1) { animation-delay: .36s; }

/* The reveal. The bands leave and the lockup glides home on the same curve. */
.intro.is-out .intro__band, .intro.is-out .intro__logo {
  transition: transform 1s cubic-bezier(.76, 0, .24, 1);
}
.intro.is-out .intro__band--top { transform: translateY(-100%); }
.intro.is-out .intro__band--bottom { transform: translateY(100%); }
.intro.is-out .intro__logo { transform: none; }
.intro.is-done { display: none; }

/* The real lockup is hidden only while the flying copy stands in for it. */
.intro-active .site-header .logo__lockup { opacity: 0; }

/* Reduced motion: no intro at all, and the cover never exists. */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .intro-active .site-header .logo__lockup { opacity: 1; }
}

/* --- Reveal --------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }