/* ===========================================================================
   Sui Generis Technologies
   Design system.

   Direction: an institutional records register. The company sells information
   governance, so the page is organised the way a classification scheme is —
   every service, product and industry carries a real reference code set in
   mono, section headings sit in a narrow left spine like a file margin, and
   rules are hairlines rather than shadows. Navy carries authority, gold is
   spent sparingly on the single active line.
   =========================================================================== */

:root {
  /* Brand */
  --navy: #0F3D6E;
  --navy-800: #0B3159;
  --navy-900: #072541;
  --gold: #C8A23A;
  --gold-400: #DDBE6A;
  --gold-200: #EFE0B4;
  --gold-050: #FBF6E9;

  /* Neutrals */
  --paper: #FFFFFF;
  --grey: #F4F6F8;
  --grey-200: #E9EDF2;
  --line: #E1E7ED;
  --line-strong: #C9D3DE;
  --ink: #141E29;
  --slate: #56687A;
  --slate-light: #7E8FA0;

  /* Type */
  --display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Rhythm */
  --gutter: 28px;
  --max: 1240px;
  --spine: 210px;
  --spine-gap: 64px;
  --section-y: 104px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

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

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold); }

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--navy-900);
  letter-spacing: -0.015em;
  line-height: 1.14;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3.3vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.25; }
h4 { font-size: 1.05rem; font-family: var(--body); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; color: #fff; }

/* ----------------------------------------------------------------- Utilities */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  display: block;
  font-weight: 500;
}

.code {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--slate-light);
  text-transform: uppercase;
}

.lede {
  font-size: 1.12rem;
  line-height: 1.72;
  color: var(--slate);
  max-width: 62ch;
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

.gold-rule {
  width: 54px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 26px;
}

.text-center { text-align: center; }
.mono { font-family: var(--mono); }

/* ------------------------------------------------------------------ Sections */
.section { padding: var(--section-y) 0; }
.section--tight { padding: 72px 0; }
.section--grey { background: var(--grey); }
.section--navy { background: var(--navy); color: #E7EDF4; }
.section--navy h2,
.section--navy h3 { color: #fff; }
.section--navy .lede { color: #B8C7D8; }
.section--navy .code { color: rgba(255, 255, 255, 0.45); }

/* The spine: a narrow left margin that carries the reference code and label,
   the way a register carries its index. Content sits in the wide column. */
.spine {
  display: grid;
  grid-template-columns: var(--spine) minmax(0, 1fr);
  gap: var(--spine-gap);
  align-items: start;
}
.spine__index { position: sticky; top: 120px; }
.spine__index .code { display: block; margin-bottom: 8px; }
.spine__index .spine__label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  border-top: 2px solid var(--gold);
  padding-top: 12px;
  display: block;
}
.section--navy .spine__index .spine__label { color: #fff; }

.sec-head { margin-bottom: 54px; max-width: 66ch; }
.sec-head p { color: var(--slate); }
.section--navy .sec-head p { color: #B8C7D8; }

/* -------------------------------------------------------------------- Header */
.utility {
  background: var(--navy-900);
  color: #A9BED4;
  font-size: 0.78rem;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.utility .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 40px;
  flex-wrap: wrap;
}
.utility a { color: #A9BED4; }
.utility a:hover { color: var(--gold-400); }
.utility__set { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.utility .icon { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 6px; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s var(--ease);
}
.masthead.is-stuck { box-shadow: 0 1px 24px rgba(7, 37, 65, 0.09); }
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 80px;
}

.brand { display: flex; align-items: center; gap: 13px; }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__text { line-height: 1.05; }
.brand__name {
  font-family: var(--display);
  font-size: 1.16rem;
  color: var(--navy-900);
  letter-spacing: -0.01em;
  display: block;
}
.brand__sub {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--slate-light);
  display: block;
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: inline-block;
  padding: 9px 13px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--navy); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.has-menu { position: relative; }
.has-menu > .nav__link::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-right: 7px;
  opacity: 0.5;
}
.menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  min-width: 320px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  box-shadow: 0 20px 48px rgba(7, 37, 65, 0.13);
}
.has-menu:hover .menu,
.has-menu:focus-within .menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu a {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 9px 12px;
  color: var(--ink);
  font-size: 0.88rem;
  transition: background 0.18s var(--ease);
}
.menu a:hover { background: var(--gold-050); color: var(--navy); }
.menu a .code { font-size: 0.6rem; }
.menu__foot {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding: 12px 12px 4px;
}
.menu__foot a { display: block; grid-template-columns: none; padding: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  width: 44px;
  height: 42px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--navy);
  position: relative;
  transition: background 0.2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  background: var(--navy);
  transition: transform 0.26s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------------- Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  font-family: var(--body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1.5px solid var(--navy);
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  transition: background 0.24s var(--ease), color 0.24s var(--ease), border-color 0.24s var(--ease);
}
.btn:hover { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.btn .icon { width: 17px; height: 17px; transition: transform 0.26s var(--ease); }
.btn:hover .icon { transform: translateX(4px); }

.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--navy-900); }
.btn--gold:hover { background: var(--gold-400); border-color: var(--gold-400); color: var(--navy-900); }

.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }

.btn--light { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.btn--light:hover { background: #fff; border-color: #fff; color: var(--navy-900); }

.btn--sm { padding: 10px 18px; font-size: 0.8rem; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 500;
}
.link-more .icon { width: 15px; height: 15px; transition: transform 0.26s var(--ease); }
.link-more:hover .icon { transform: translateX(5px); }

/* ---------------------------------------------------------------------- Hero */
.hero {
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 96px 0 0;
}
/* Faint ledger ruling — the page's own paper, not decoration for its own sake */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 100% 34px;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 620px;
  height: 620px;
  border: 1px solid rgba(200, 162, 58, 0.22);
  border-radius: 50%;
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 72px;
  align-items: center;
  padding-bottom: 84px;
}
.hero h1 { color: #fff; margin-bottom: 24px; }
.hero h1 em {
  font-style: italic;
  color: var(--gold-400);
}
.hero__lede { color: #C2D2E3; font-size: 1.16rem; line-height: 1.7; max-width: 54ch; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* Signature element: the capability register. A live index of what the firm
   does, coded and ruled like a records schedule, cycling one active line. */
.register {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.035);
  padding: 8px;
}
.register__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.register__row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 13px 18px;
  position: relative;
  color: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.register__row:last-child { border-bottom: 0; }
.register__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease);
}
.register__row .code {
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.3s var(--ease);
}
.register__row .register__name {
  font-size: 0.95rem;
  font-weight: 500;
}
.register__row:hover,
.register__row.is-active {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.register__row:hover::before,
.register__row.is-active::before { transform: scaleY(1); }
.register__row:hover .code,
.register__row.is-active .code { color: var(--gold-400); }

.hero__strip {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(7, 37, 65, 0.45);
  position: relative;
  z-index: 1;
}
.hero__strip .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.stat__value {
  font-family: var(--display);
  font-size: 1.9rem;
  color: var(--gold-400);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.stat__label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* ------------------------------------------------------------- Page headings */
.pagehead {
  background: var(--navy);
  color: #fff;
  padding: 74px 0 68px;
  position: relative;
  overflow: hidden;
}
.pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 100% 34px;
}
.pagehead .wrap { position: relative; }
.pagehead h1 { color: #fff; max-width: 20ch; margin-bottom: 18px; }
.pagehead .lede { color: #C2D2E3; }
.pagehead__meta {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.crumbs {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 22px;
}
.crumbs a { color: rgba(255, 255, 255, 0.75); }
.crumbs a:hover { color: var(--gold-400); }
.crumbs span { margin: 0 9px; opacity: 0.5; }

/* --------------------------------------------------------------------- Cards */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--paper);
  padding: 36px 32px 34px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background 0.3s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.36s var(--ease);
}
.card:hover::before { transform: scaleX(1); }
.card:hover { background: #FCFDFE; }
.card .icon--lg { width: 30px; height: 30px; color: var(--navy); margin-bottom: 22px; stroke-width: 1.25; }
.card h3 { margin-bottom: 12px; }
.card h3 a { color: inherit; }
.card p { color: var(--slate); font-size: 0.95rem; flex: 1; }
.card .code { display: block; margin-bottom: 16px; }
.card .link-more { margin-top: 22px; }

.card--flat { border: 1px solid var(--line); background: var(--paper); }

/* Tiles: dense list of named capabilities */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.tile {
  background: var(--paper);
  padding: 18px 20px;
  font-size: 0.88rem;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--ink);
  transition: background 0.24s var(--ease);
}
.tile:hover { background: var(--gold-050); }
.tile .icon { width: 15px; height: 15px; color: var(--gold); flex: none; margin-top: 4px; stroke-width: 2; }
.section--navy .tiles { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.16); }
.section--navy .tile { background: var(--navy); color: #DCE6F0; }
.section--navy .tile:hover { background: var(--navy-800); }

/* Outcome list with hanging index */
.outcomes { display: grid; gap: 0; }
.outcome {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 26px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.outcome:last-child { border-bottom: 1px solid var(--line); }
.outcome h4 { margin: 0 0 8px; color: var(--navy-900); font-size: 1.06rem; }
.outcome p { color: var(--slate); font-size: 0.95rem; margin: 0; }

/* ------------------------------------------------------------------- Feature */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px;
  align-items: center;
}
.split--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  padding: 38px 36px;
}
.panel--navy {
  background: var(--navy);
  border-color: var(--navy);
  color: #DCE6F0;
}
.panel--navy h3 { color: #fff; }

.figure {
  border: 1px solid var(--line);
  background: var(--grey);
  padding: 34px;
}
.figure__caption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------------- Ledgers */
.ledger { border-top: 1px solid var(--line); }
.ledger__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  transition: background 0.24s var(--ease), padding-left 0.24s var(--ease);
}
.ledger__row:hover { background: var(--gold-050); padding-left: 14px; }
.ledger__row h3 { margin: 0 0 4px; font-size: 1.18rem; }
.ledger__row p { margin: 0; color: var(--slate); font-size: 0.93rem; }
.ledger__row .icon { width: 18px; height: 18px; color: var(--navy); }

/* ----------------------------------------------------------------- Accordion */
.accordion { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 24px 46px 24px 0;
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--navy-900);
  cursor: pointer;
  position: relative;
  line-height: 1.5;
}
.acc__btn::after,
.acc__btn::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  background: var(--gold);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.acc__btn::before { width: 15px; height: 1.5px; margin-top: -0.75px; }
.acc__btn::after { width: 1.5px; height: 15px; margin-top: -7.5px; right: 14.75px; }
.acc__btn[aria-expanded="true"]::after { transform: rotate(90deg); opacity: 0; }
.acc__panel {
  display: none;
  padding: 0 40px 26px 0;
  color: var(--slate);
  max-width: 76ch;
}
.acc__panel.is-open { display: block; }

/* --------------------------------------------------------------------- Forms */
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 9px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line-strong);
  background: #fff;
  font-family: var(--body);
  font-size: 0.96rem;
  color: var(--ink);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15, 61, 110, 0.1);
}
.field--error input,
.field--error textarea,
.field--error select { border-color: #B4342F; }
.field__error { color: #B4342F; font-size: 0.83rem; margin-top: 7px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.notice {
  border-left: 3px solid var(--gold);
  background: var(--gold-050);
  padding: 18px 22px;
  margin-bottom: 28px;
  font-size: 0.95rem;
}
.notice--error { border-left-color: #B4342F; background: #FDF2F1; }

/* ------------------------------------------------------------------ CTA band */
.cta-band {
  background: var(--navy-900);
  color: #fff;
  padding: 76px 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 22%, transparent 22%);
}
.cta-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 54px;
  align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { color: #B8C7D8; max-width: 56ch; margin: 0; }
.cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* -------------------------------------------------------------------- Footer */
.footer { background: var(--navy-900); color: #A9BED4; padding: 76px 0 0; font-size: 0.9rem; }
.footer h4 {
  color: #fff;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 20px;
  font-weight: 500;
}
.footer a { color: #A9BED4; }
.footer a:hover { color: var(--gold-400); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
  gap: 54px;
  padding-bottom: 56px;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 11px; }
.footer .brand__name { color: #fff; }
.footer .brand__sub { color: rgba(255, 255, 255, 0.45); }
.footer__blurb { margin: 22px 0 0; max-width: 34ch; line-height: 1.7; }
.footer__contact { list-style: none; margin: 22px 0 0; padding: 0; }
.footer__contact li { display: flex; gap: 11px; margin-bottom: 12px; align-items: flex-start; }
.footer__contact .icon { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 4px; }

.subscribe { display: flex; gap: 0; margin-top: 18px; }
.subscribe input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--body);
  font-size: 0.88rem;
}
.subscribe input::placeholder { color: rgba(255, 255, 255, 0.4); }
.subscribe input:focus { outline: none; border-color: var(--gold); }
.subscribe button {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--navy-900);
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.84rem;
  padding: 0 20px;
  cursor: pointer;
  transition: background 0.24s var(--ease);
}
.subscribe button:hover { background: var(--gold-400); }

.colophon {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 24px 0 30px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}
.colophon__links { display: flex; gap: 22px; flex-wrap: wrap; }

/* --------------------------------------------------------------------- Prose */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.7em; }
.prose p { color: #29394A; }
.prose-list { padding-left: 0; list-style: none; margin: 0 0 1.4em; }
.prose-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  color: #29394A;
}
.prose-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 11px;
  width: 7px;
  height: 1.5px;
  background: var(--gold);
}
.prose blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 30px;
  border-left: 2px solid var(--gold);
  font-family: var(--display);
  font-size: 1.34rem;
  line-height: 1.5;
  color: var(--navy-900);
  font-style: italic;
}

/* ------------------------------------------------------------------ Insights */
.post-card { display: flex; flex-direction: column; }
.post-card__meta {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin-bottom: 16px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.post-card__meta .tag { color: var(--gold); }

/* ----------------------------------------------------------------- Leadership */
.leader {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 62px;
  align-items: start;
}
.portrait {
  background: var(--navy);
  border-top: 3px solid var(--gold);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait__initials {
  font-family: var(--display);
  font-size: 3.6rem;
  color: var(--gold-400);
  letter-spacing: 0.04em;
}
.leader__role {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}

/* --------------------------------------------------------------------- Table */
.table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.table th,
.table td { text-align: left; padding: 15px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 500;
  border-bottom: 1px solid var(--line-strong);
}

/* ------------------------------------------------------------------- Reveals */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ Responsive */
@media (max-width: 1080px) {
  :root { --spine: 160px; --spine-gap: 40px; --section-y: 84px; }
  .hero__grid { grid-template-columns: 1fr; gap: 52px; padding-bottom: 64px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 44px; }
}

@media (max-width: 900px) {
  .masthead .wrap { min-height: 68px; }
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: 68px 0 auto;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 20px 30px;
    border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0.26s;
    box-shadow: 0 22px 40px rgba(7, 37, 65, 0.12);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__link { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 18px; justify-content: center; }
  .menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    border-left: 2px solid var(--gold);
    box-shadow: none;
    min-width: 0;
    padding: 4px 0 12px 14px;
    display: none;
  }
  .has-menu.is-open .menu { display: block; }
  .has-menu > .nav__link::before { float: right; margin: 8px 4px 0 0; transition: transform 0.24s var(--ease); }
  .has-menu.is-open > .nav__link::before { transform: rotate(225deg) translateY(-4px); }
  .menu a { grid-template-columns: 66px 1fr; padding: 10px 6px; }

  .spine { grid-template-columns: 1fr; gap: 22px; }
  .spine__index { position: static; display: flex; gap: 16px; align-items: baseline; }
  .spine__index .code { margin: 0; }
  .spine__index .spine__label { border-top: 0; border-left: 2px solid var(--gold); padding: 0 0 0 12px; }

  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .split, .split--wide { grid-template-columns: 1fr; gap: 44px; }
  .leader { grid-template-columns: 1fr; gap: 34px; }
  .portrait { max-width: 260px; }
  .cta-band__grid { grid-template-columns: 1fr; gap: 30px; }
  .hero__strip .wrap { grid-template-columns: 1fr 1fr; gap: 26px; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; --section-y: 64px; }
  body { font-size: 16px; }
  .utility .wrap { min-height: 0; padding-top: 8px; padding-bottom: 8px; font-size: 0.72rem; }
  .utility__set { gap: 14px; }
  .utility__set--hide { display: none; }
  .hero { padding-top: 60px; }
  .register__row { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .ledger__row { grid-template-columns: 1fr; gap: 8px; }
  .ledger__row .icon { display: none; }
  .outcome { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .card { padding: 30px 24px; }
  .tiles { grid-template-columns: 1fr; }
  .subscribe { flex-direction: column; }
  .subscribe button { padding: 13px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .masthead, .utility, .footer, .cta-band, .nav-toggle { display: none; }
  body { font-size: 11pt; }
  .hero, .pagehead { background: #fff; color: #000; }
  .hero h1, .pagehead h1 { color: #000; }
}

/* ------------------------------------------------------------ Media in prose
   Images placed in a body box. Widths and captions are fixed by the design
   system so an uploaded photograph cannot break the text column. */
.figure-img {
  margin: 2.4em 0;
  padding: 0;
}
.figure-img img {
  width: 100%;
  border: 1px solid var(--line);
}
.figure-img figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--slate-light);
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

/* Breaks out past the text column on wide screens. */
.figure-img--wide { margin-left: -80px; margin-right: -80px; }

.figure-img--left,
.figure-img--right {
  width: 46%;
  margin-top: 0.6em;
  margin-bottom: 1.4em;
}
.figure-img--left { float: left; margin-right: 34px; }
.figure-img--right { float: right; margin-left: 34px; }

.prose::after { content: ""; display: block; clear: both; }

.inline-img {
  display: inline-block;
  max-height: 1.5em;
  width: auto;
  vertical-align: -0.3em;
  margin: 0 2px;
}

/* A link to an uploaded document is marked so readers know it downloads. */
.prose a[href$=".pdf"]::after,
.prose a[href$=".docx"]::after,
.prose a[href$=".xlsx"]::after,
.prose a[href$=".pptx"]::after,
.prose a[href$=".zip"]::after {
  content: "↓";
  font-family: var(--mono);
  font-size: 0.8em;
  margin-left: 5px;
  color: var(--gold);
}

@media (max-width: 1080px) {
  .figure-img--wide { margin-left: 0; margin-right: 0; }
}
@media (max-width: 620px) {
  .figure-img--left,
  .figure-img--right { float: none; width: 100%; margin-left: 0; margin-right: 0; }
}

/* ------------------------------------------------------------- Contact dock
   WhatsApp, live chat and the assistant, gathered into one launcher so the
   corner of the page holds a single object rather than three competing ones. */
/* A class that sets display outranks the browser's own [hidden] rule, so the
   hidden attribute must be re-asserted here or nothing in the dock can close. */
.chat-dock [hidden] { display: none !important; }

.chat-dock {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.chat-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.chat-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-right: 3px solid var(--gold);
  color: var(--ink);
  padding: 11px 16px;
  font: 500 0.85rem/1 var(--body);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(7, 37, 65, 0.14);
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
              transform 0.22s var(--ease);
}
.chat-action:hover { transform: translateX(-3px); }
.chat-action:hover { background: var(--gold-050); color: var(--navy); }
.chat-action svg { width: 19px; height: 19px; flex: none; }
.chat-action--wa { border-right-color: #25D366; }
.chat-action--wa svg { color: #25D366; }

.chat-panel {
  width: min(380px, calc(100vw - 36px));
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  box-shadow: 0 22px 60px rgba(7, 37, 65, 0.24);
  display: flex;
  flex-direction: column;
  max-height: min(560px, calc(100vh - 130px));
}
.chat-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--navy);
  color: #fff;
}
.chat-panel__head strong { display: block; font-size: 0.95rem; }
.chat-panel__head span {
  display: block;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.68);
  margin-top: 3px;
  line-height: 1.4;
}
.chat-panel__close {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.chat-panel__close:hover { color: #fff; }

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.9rem;
  line-height: 1.6;
}
.chat-msg { max-width: 88%; padding: 11px 14px; }
.chat-msg--bot { background: var(--grey); color: var(--ink); align-self: flex-start; }
.chat-msg--me { background: var(--navy); color: #fff; align-self: flex-end; }
.chat-msg--me a { color: var(--gold-400); }
.chat-msg.is-thinking { color: var(--slate-light); letter-spacing: 0.2em; }

.chat-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 18px 14px;
}
.chat-suggest button {
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--navy);
  font: 500 0.76rem/1.3 var(--body);
  padding: 8px 11px;
  cursor: pointer;
  text-align: left;
}
.chat-suggest button:hover { background: var(--gold-050); border-color: var(--gold); }

.chat-form { display: flex; border-top: 1px solid var(--line); }
.chat-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 14px 16px;
  font: 0.9rem/1.4 var(--body);
  color: var(--ink);
}
.chat-form input:focus { outline: none; background: #FCFDFE; }
.chat-form button {
  border: 0;
  background: var(--gold);
  color: var(--navy-900);
  padding: 0 18px;
  cursor: pointer;
}
.chat-form button:hover { background: var(--gold-400); }
.chat-form button svg { width: 18px; height: 18px; }

.chat-foot {
  margin: 0;
  padding: 10px 18px 12px;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--slate-light);
  background: var(--grey);
}

/* The SMTP transcript */
.smtp-log {
  background: var(--navy-900);
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.7;
}
.smtp-log__row { display: flex; gap: 12px; white-space: pre-wrap; word-break: break-word; }
.smtp-log__dir { color: rgba(255, 255, 255, 0.35); flex: none; width: 12px; }
.smtp-log__row--out .smtp-log__text { color: var(--gold-400); }
.smtp-log__row--in .smtp-log__text { color: #DCE6F0; }
.smtp-log__row--info .smtp-log__text { color: rgba(255, 255, 255, 0.5); }
.smtp-log__row--error .smtp-log__text { color: #F09A94; }

@media (max-width: 620px) {
  .chat-dock { right: 14px; bottom: 14px; gap: 10px; }
  .chat-action span { display: none; }
  .chat-action { padding: 12px; border-right-width: 2px; }
  .chat-action svg { width: 21px; height: 21px; }
  .chat-panel { max-height: calc(100vh - 90px); }
}

@media print { .chat-dock { display: none; } }

/* ===========================================================================
   APPEARANCE LAYER
   Everything below is driven by the Admin Center. The base stylesheet above
   is untouched, so removing this block returns the site to its native design.

   Tokens supplied by the engine: --radius, --radius-lg, --shadow, --shadow-lg,
   --border-w, --base-size, --h1-scale, plus the theme colour set.
   =========================================================================== */

:root {
  --radius: 0px;
  --radius-lg: 0px;
  --shadow: none;
  --shadow-lg: none;
  --border-w: 1px;
  --base-size: 16.5px;
  --h1-scale: 3.9rem;
}

body { font-size: var(--base-size); }
h1 { font-size: clamp(2.4rem, 5vw, var(--h1-scale)); }

/* Shape and weight follow the design style */
.card,
.panel,
.figure,
.tile,
.chat-panel,
.chat-action,
.register,
.menu,
.field input,
.field select,
.field textarea,
.subscribe input,
.portrait,
.figure-img img { border-radius: var(--radius); }

.grid,
.tiles { border-radius: var(--radius); overflow: hidden; }

.btn,
.subscribe button,
.chat-form button { border-radius: var(--radius); }

.card:hover { box-shadow: var(--shadow); }
.panel { box-shadow: var(--shadow); }
.menu,
.chat-panel { box-shadow: var(--shadow-lg); }

.card--flat,
.panel,
.figure,
.table th { border-width: var(--border-w); }

/* Statistics band, used by layouts that place stats as their own section */
.statband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.section--navy .statband .stat__value { color: var(--gold-400); }
.section--navy .statband .stat__label { color: rgba(255, 255, 255, 0.62); }
.statband .stat__value { color: var(--navy); }
.statband .stat__label { color: var(--slate); }
@media (max-width: 900px) { .statband { grid-template-columns: 1fr 1fr; gap: 26px; } }

/* ---------------------------------------------------- Style: Minimalist ---
   Strips the register apparatus: no margin index, no reference codes. */
.sty-minimalist .spine { grid-template-columns: 1fr; gap: 0; }
.sty-minimalist .spine__index { display: none; }
.sty-minimalist .card .code,
.sty-minimalist .ledger__row .code,
.sty-minimalist .register .code { display: none; }
.sty-minimalist .card { padding: 28px 0; background: transparent; }
.sty-minimalist .grid { background: transparent; border: 0; gap: 44px; }
.sty-minimalist .card::before { display: none; }
.sty-minimalist .eyebrow { color: var(--slate-light); }

/* ----------------------------------------------- Style: Luxury Executive ---
   Wide tracking, centred section heads, very deep rhythm. */
.sty-luxury-executive .spine { grid-template-columns: 1fr; gap: 0; }
.sty-luxury-executive .spine__index { display: none; }
.sty-luxury-executive .sec-head { max-width: 74ch; margin-bottom: 64px; }
.sty-luxury-executive h1,
.sty-luxury-executive h2 { letter-spacing: -0.02em; }
.sty-luxury-executive .eyebrow { letter-spacing: 0.34em; }
.sty-luxury-executive .btn { letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.76rem; padding: 16px 30px; }
.sty-luxury-executive .card { padding: 44px 38px; }
.sty-luxury-executive .hero__grid { padding-bottom: 110px; }

/* --------------------------------------------------- Style: Glass/Modern ---
   Translucent surfaces over a tinted page. */
.sty-glass-modern body,
body.sty-glass-modern { background: linear-gradient(180deg, var(--grey) 0%, var(--paper) 46%); }
.sty-glass-modern .card,
.sty-glass-modern .panel {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow);
}
.sty-glass-modern .grid { background: transparent; border: 0; gap: 18px; }
.sty-glass-modern .card::before { display: none; }
.sty-glass-modern .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.sty-glass-modern .card { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sty-glass-modern .tiles { background: transparent; border: 0; gap: 10px; }
.sty-glass-modern .tile { background: rgba(255, 255, 255, 0.66); border: 1px solid var(--line); }
.sty-glass-modern .masthead { background: rgba(255, 255, 255, 0.78); }

/* ----------------------------------------------- Style: Bold Contemporary ---
   Heavy rules, flat blocks, an offset shadow instead of a soft one. */
.sty-bold-contemporary .grid,
.sty-bold-contemporary .tiles { background: var(--ink); border: 2px solid var(--ink); gap: 2px; }
.sty-bold-contemporary .card,
.sty-bold-contemporary .panel { border: 0; }
.sty-bold-contemporary .panel { border: 2px solid var(--ink); border-top-width: 6px; }
.sty-bold-contemporary .card::before { height: 6px; }
.sty-bold-contemporary .btn { border-width: 2px; font-weight: 700; }
.sty-bold-contemporary .btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.sty-bold-contemporary h1,
.sty-bold-contemporary h2 { letter-spacing: -0.035em; font-weight: 800; }
.sty-bold-contemporary .gold-rule { height: 6px; width: 72px; }
.sty-bold-contemporary .ledger__row { border-bottom-width: 2px; }

/* ------------------------------------------------ Style: Technology/Digital ---
   Mono metadata, tight grid, visible structure. */
.sty-technology-digital .code { color: var(--gold); }
.sty-technology-digital .spine__label { border-top-width: 3px; }
.sty-technology-digital .card { border-left: 3px solid transparent; transition: border-color .25s var(--ease); }
.sty-technology-digital .card:hover { border-left-color: var(--gold); }
.sty-technology-digital .sec-head h2::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  background: var(--gold);
  margin-bottom: 16px;
}

/* ------------------------------------------------------ Style: Editorial ---
   Journal setting: a rule above every section head, narrow measure. */
.sty-editorial .sec-head { border-top: 2px solid var(--ink); padding-top: 20px; }
.sty-editorial .prose { max-width: 66ch; }
.sty-editorial .lede { font-family: var(--display); font-size: 1.28rem; line-height: 1.6; color: var(--ink); }
.sty-editorial .card h3 { font-size: 1.4rem; }
.sty-editorial .grid { gap: 1px; }
.sty-editorial .eyebrow { color: var(--ink); border-bottom: 1px solid var(--gold); display: inline-block; padding-bottom: 3px; }

/* Style rules must never darken text that sits on a dark surface. Any style
   that recolours the eyebrow or a heading is reverted inside the hero, the
   page banner and navy sections. */
.hero .eyebrow,
.pagehead .eyebrow,
.section--navy .eyebrow,
.cta-band .eyebrow,
.panel--navy .eyebrow {
  color: var(--gold) !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.section--navy .sec-head h2::before { background: var(--gold); }
.sty-editorial .section--navy .sec-head,
.sty-editorial .hero .sec-head { border-top-color: rgba(255, 255, 255, 0.3); }
.section--navy .prose p,
.section--navy .prose-list li { color: #C2D2E3; }

/* ------------------------------------------ Style: Elegant Institutional ---
   Symmetrical, centred, lightly ornamented. */
.sty-elegant-institutional .sec-head { text-align: center; margin-left: auto; margin-right: auto; }
.sty-elegant-institutional .sec-head .gold-rule { margin-left: auto; margin-right: auto; }
.sty-elegant-institutional .spine { grid-template-columns: 1fr; }
.sty-elegant-institutional .spine__index { display: none; }
.sty-elegant-institutional .card { text-align: center; align-items: center; }
.sty-elegant-institutional .card .icon--lg { margin-left: auto; margin-right: auto; }
.sty-elegant-institutional .card .link-more { justify-content: center; }

/* ------------------------------------------------ Style: Classic Corporate ---
   Restrained; keeps the spine but softens the register language. */
.sty-classic-corporate .code { letter-spacing: 0.1em; text-transform: none; }
.sty-classic-corporate .card { box-shadow: var(--shadow); }

/* --------------------------------------------- Style: Modern Professional ---
   Cards lift, grid gaps replace hairlines. */
.sty-modern-professional .grid { background: transparent; border: 0; gap: 20px; }
.sty-modern-professional .card { border: 1px solid var(--line); box-shadow: var(--shadow); }
.sty-modern-professional .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.sty-modern-professional .card { transition: transform .26s var(--ease), box-shadow .26s var(--ease); }
.sty-modern-professional .tiles { background: transparent; border: 0; gap: 10px; }
.sty-modern-professional .tile { border: 1px solid var(--line); }

/* The preview bar shown to an administrator viewing an unpublished draft */
.preview-bar {
  background: var(--gold);
  color: var(--navy-900);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  padding: 10px var(--gutter);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.preview-bar a { color: var(--navy-900); text-decoration: underline; }

@media (max-width: 900px) {
  .sty-minimalist .spine,
  .sty-luxury-executive .spine,
  .sty-elegant-institutional .spine { gap: 0; }
}