/* =========================================================
   Four Chords Enterprises Limited: design system + site styles
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --navy: #14243b;
  --navy-2: #1b2f4c;
  --navy-3: #243c5f;
  --gold: #c6a667;
  --gold-hover: #d4b880;
  --gold-text: #8a6d33; /* gold-toned text on light surfaces (AA) */
  --gold-soft: #e9dcbf;
  --ivory: #f5f2eb;
  --ivory-2: #ebe5d8;
  --graphite: #343a40;
  --white: #fff;

  /* Semantic */
  --text: var(--graphite);
  --text-muted: #5b636b;
  --heading: var(--navy);
  --surface: var(--white);
  --surface-alt: var(--ivory);
  --line: rgba(20, 36, 59, 0.12);
  --line-strong: #8c939b;
  --focus: var(--navy);
  --error: #b42318;
  --error-bg: #fdf0ee;
  --success: #1d6b45;
  --success-bg: #ecf6f0;
  --info-bg: #eef2f7;

  /* Type */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --fs-h2: clamp(1.875rem, 1.35rem + 2.1vw, 3rem);
  --fs-h1: clamp(2.375rem, 1.5rem + 3.6vw, 4.5rem);

  /* Spacing scale (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: clamp(64px, 5vw + 40px, 120px);
  --gutter: clamp(16px, 3vw, 32px);
  --max: 1280px;

  /* Shape & depth */
  --r-sm: 3px;
  --r: 6px;
  --r-lg: 10px;
  --sh-1: 0 1px 2px rgba(20, 36, 59, 0.06), 0 2px 8px -2px rgba(20, 36, 59, 0.08);
  --sh-2: 0 2px 4px rgba(20, 36, 59, 0.05), 0 18px 40px -16px rgba(20, 36, 59, 0.25);
  --sh-3: 0 30px 60px -24px rgba(10, 20, 36, 0.45);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t: 220ms;
  --slant: 19.3deg; /* angle of the logo bars */
  --hdr-h: 80px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body {
  margin: 0;
  font: 400 var(--fs-md)/1.65 var(--font-body);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--heading); margin: 0 0 var(--s-4); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold-soft); color: var(--navy); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }
main, .ftr { overflow-x: clip; }
[hidden] { display: none !important; }

.hdr, .ftr, .hero, .phero, .sec--navy, .ctaband, .mnav, .why { --focus: var(--gold); }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--gold); color: var(--navy); padding: 12px 18px; font-weight: 600; border-radius: var(--r-sm); }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.lead { font-size: var(--fs-lg); line-height: 1.6; color: var(--text-muted); max-width: 62ch; }
.i { width: 20px; height: 20px; flex: none; }
.i--xs { width: 13px; height: 13px; display: inline-block; vertical-align: -1px; margin-left: 5px; opacity: 0.7; }

.eyebrow { font: 600 var(--fs-xs)/1.4 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: var(--s-4); display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ''; width: 28px; height: 2px; background: currentColor; transform: skewX(calc(var(--slant) * -1)); }
.eyebrow--gold { color: var(--gold); }

/* ---------- 3. Buttons & links ---------- */
.btn {
  --bg: var(--gold); --fg: var(--navy); --bd: var(--gold);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 13px 24px;
  font: 600 var(--fs-sm)/1.2 var(--font-body); letter-spacing: 0.01em;
  color: var(--fg); background: var(--bg); border: 1.5px solid var(--bd); border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.btn .i { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:hover .i { transform: translateX(3px); }
.btn:active { transform: translateY(0); }
.btn--gold:hover { --bg: var(--gold-hover); --bd: var(--gold-hover); box-shadow: 0 10px 24px -12px rgba(198, 166, 103, 0.8); }
.btn--navy { --bg: var(--navy); --fg: var(--white); --bd: var(--navy); }
.btn--navy:hover { --bg: var(--navy-3); --bd: var(--navy-3); }
.btn--outline { --bg: transparent; --fg: var(--navy); --bd: var(--navy); }
.btn--outline:hover { --bg: var(--navy); --fg: var(--white); }
.btn--ghost-light { --bg: transparent; --fg: var(--white); --bd: rgba(255, 255, 255, 0.45); }
.btn--ghost-light:hover { --bd: var(--gold); --fg: var(--gold); }
.btn--ghost-light .i { transform: none !important; }
.btn--sm { min-height: 44px; padding: 10px 18px; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading .i { opacity: 0; }
.btn.is-loading::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid var(--fg); border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.tlink { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--fs-sm)/1.3 var(--font-body); color: var(--navy); text-decoration: none; position: relative; }
.tlink .i { width: 16px; height: 16px; color: var(--gold-text); transition: transform var(--t) var(--ease); }
a.tlink:hover, .dcard:hover .tlink, .pcard:hover .tlink, .acard:hover .tlink { text-decoration: underline; }
a.tlink:hover .i, .dcard:hover .tlink .i, .pcard:hover .tlink .i, .acard:hover .tlink .i { transform: translateX(4px); }

.chip { display: inline-flex; align-items: center; padding: 4px 10px; font: 600 var(--fs-xs)/1.2 var(--font-body); letter-spacing: 0.04em; color: var(--navy); background: var(--ivory); border-radius: 100px; }

.status { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--fs-xs)/1.2 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-3); }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status--operating { color: var(--success); }
.status--enquiries { color: #1f5c99; }
.status--byenquiry { color: var(--gold-text); }
.status--development { color: #6b5a8a; }
.status--development .status__dot { background: transparent; border: 2px solid currentColor; }

/* ---------- 4. Header ---------- */
.hdr { position: sticky; top: 0; z-index: 100; background: rgba(20, 36, 59, 0.97); color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: box-shadow var(--t) var(--ease); }
@supports (backdrop-filter: blur(1px)) { .hdr { background: rgba(20, 36, 59, 0.9); backdrop-filter: saturate(140%) blur(14px); } }
.hdr.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6); }
.hdr__in { display: flex; align-items: center; gap: var(--s-5); height: var(--hdr-h); transition: height var(--t) var(--ease); }
.hdr.is-scrolled .hdr__in { height: 66px; }
.brand { display: block; flex: none; margin-right: auto; }
.logo { overflow: visible; }
.logo .lg-bars, .mark .lg-bars { fill: var(--gold); }
.logo .lg-t { font-family: 'Montserrat', var(--font-display); fill: currentColor; }
.logo--h { height: 44px; width: auto; transition: height var(--t) var(--ease); }
.hdr.is-scrolled .logo--h { height: 38px; }

.nav__list { display: flex; align-items: center; list-style: none; gap: 2px; }
.nav__list > li { position: relative; display: flex; align-items: center; }
.nav__a { display: block; padding: 10px 12px; font: 500 var(--fs-sm)/1 var(--font-body); color: rgba(255, 255, 255, 0.82); text-decoration: none; border-radius: var(--r-sm); position: relative; transition: color var(--t); }
.nav__a:hover { color: var(--white); }
.nav__a[aria-current='page'] { color: var(--white); }
.nav__a[aria-current='page']::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--gold); }
.has-dd .nav__a { padding-right: 2px; }
.dd-btn { display: grid; place-items: center; width: 28px; height: 32px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, 0.7); cursor: pointer; border-radius: var(--r-sm); }
.dd-btn .i { width: 15px; height: 15px; transition: transform var(--t) var(--ease); }
.has-dd.open .dd-btn .i { transform: rotate(180deg); }
.dd {
  position: absolute; top: calc(100% + 10px); left: -16px; width: 380px;
  background: var(--white); color: var(--text); border-radius: var(--r); box-shadow: var(--sh-3);
  padding: var(--s-3); opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
  --focus: var(--navy);
}
.dd::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.dd--wide { width: 600px; left: -180px; }
.dd--wide ul { display: grid; grid-template-columns: 1fr 1fr; }
.has-dd.open .dd, .has-dd:hover .dd { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd ul { list-style: none; }
.dd li a { display: flex; gap: 14px; padding: 12px; border-radius: var(--r-sm); text-decoration: none; transition: background var(--t); }
.dd li a:hover { background: var(--ivory); }
.dd strong { display: block; font: 600 var(--fs-sm)/1.3 var(--font-body); color: var(--navy); }
.dd small { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; margin-top: 2px; }
.dd__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--ivory); color: var(--gold-text); }
.dd__all { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 14px 12px 8px; border-top: 1px solid var(--line); font: 600 var(--fs-sm)/1 var(--font-body); color: var(--navy); text-decoration: none; }
.dd__all .i { width: 16px; color: var(--gold-text); }
.dd__all:hover { text-decoration: underline; }

.menu-btn { display: none; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--r-sm); background: none; color: var(--white); cursor: pointer; }
.menu-btn__close { display: none; }
.menu-btn[aria-expanded='true'] .menu-btn__open { display: none; }
.menu-btn[aria-expanded='true'] .menu-btn__close { display: block; }

.mnav { position: fixed; inset: var(--hdr-h) 0 0; background: var(--navy); overflow-y: auto; padding: var(--s-5) var(--gutter) var(--s-8); display: grid; gap: var(--s-6); align-content: start; }
.mnav[hidden] { display: none; }
.mnav__list { list-style: none; }
.mnav__list a { display: flex; align-items: center; min-height: 56px; font: 700 1.5rem/1.2 var(--font-display); color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); letter-spacing: -0.01em; }
.mnav__list a[aria-current='page'] { color: var(--gold); }
.mnav__sub ul { list-style: none; display: grid; gap: 2px; }
.mnav__sub a { display: flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.mnav__cta { display: grid; gap: var(--s-5); }
.mnav__contact { display: grid; gap: 4px; }
.mnav__contact a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.mnav__contact .i { color: var(--gold); }
body.menu-open { overflow: hidden; }
/* backdrop-filter would make the header the containing block for the fixed menu */
body.menu-open .hdr { backdrop-filter: none; background: var(--navy); }

@media (max-width: 1140px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
}
@media (max-width: 560px) {
  :root { --hdr-h: 68px; }
  .logo--h, .hdr.is-scrolled .logo--h { height: 34px; }
  .hdr__cta { display: none; }
  .hdr.is-scrolled .hdr__in { height: var(--hdr-h); }
}

/* ---------- 5. Breadcrumbs ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.65); margin-bottom: var(--s-6); }
.crumbs li + li::before { content: '/'; margin-right: 6px; opacity: 0.5; }
.crumbs a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.crumbs a:hover { color: var(--gold); text-decoration: underline; }
.crumbs [aria-current] { color: var(--gold); }

/* ---------- 6. Sections ---------- */
.sec { padding-block: var(--section); position: relative; }
.sec--ivory { background: var(--ivory); }
.sec--navy { background: var(--navy); color: rgba(255, 255, 255, 0.82); }
.sec--navy h2, .sec--navy h3 { color: var(--white); }
.sec--navy .lead { color: rgba(255, 255, 255, 0.72); }
.sec--navy .eyebrow { color: var(--gold); }
.sec--tight { padding-block: calc(var(--section) * 0.6); }
.shead { max-width: 760px; margin-bottom: var(--s-7); }
.shead--center { margin-inline: auto; text-align: center; }
.shead--center .eyebrow { justify-content: center; }
.shead--center .lead { margin-inline: auto; }
.shead--row { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: var(--s-5); flex-wrap: wrap; }
.shead--row > div { max-width: 720px; }

/* Slanted transition between sections, echoing the bars */
.slant-top { position: relative; }
.slant-top::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 48px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%); pointer-events: none; }

.g2, .g3, .g4 { display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 7. Home hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--navy); color: rgba(255, 255, 255, 0.82); isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 70% at 85% 40%, rgba(198, 166, 103, 0.16), transparent 70%),
  radial-gradient(50% 60% at 0% 100%, rgba(36, 60, 95, 0.9), transparent 70%); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.5; background-image: repeating-linear-gradient(calc(90deg + var(--slant)), transparent 0 46px, rgba(255, 255, 255, 0.025) 46px 47px); }
/* Particle network (drawn by site.js); faded behind the headline so text stays readable. */
.hero__net { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 35%, #000 70%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 35%, #000 70%);
  animation: netIn 1.6s 300ms var(--ease) both; }
@keyframes netIn { from { opacity: 0; } }
.hero__grid { display: grid; gap: var(--s-7); align-items: center; padding-block: clamp(56px, 7vw, 112px) clamp(48px, 6vw, 96px); }
.hero h1 { color: var(--white); max-width: 13ch; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero .lead { color: rgba(255, 255, 255, 0.75); max-width: 50ch; }
.hero__visual { position: relative; }
.hero__svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.35)); }
.hero__svg .hb { transform-box: fill-box; transform-origin: bottom; }
.js .hero__svg .hb { animation: rise 900ms var(--ease) both; }
.js .hero__svg .hb:nth-child(2) { animation-delay: 90ms; }
.js .hero__svg .hb:nth-child(3) { animation-delay: 180ms; }
.js .hero__svg .hb:nth-child(4) { animation-delay: 270ms; }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
.hero__legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); list-style: none; margin-top: var(--s-6); font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.7); }
.hero__legend li { display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.hero__legend .sw { width: 14px; height: 18px; }
.hero__legend a { color: inherit; text-decoration: none; }
.hero__legend a:hover { color: var(--gold); text-decoration: underline; }
.hero__strip { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.hero__strip ul { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); list-style: none; padding-block: var(--s-5); font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.7); }
.hero__strip li { display: flex; align-items: center; gap: 10px; }
.hero__strip .i { color: var(--gold); width: 18px; }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: min(calc(100vh - var(--hdr-h) - 70px), 720px); }
  .hero__visual { margin-right: calc(var(--gutter) * -1); }
}
@media (max-width: 560px) { .hero__legend { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 8. Inner page hero ---------- */
.phero { position: relative; overflow: hidden; background: var(--navy); color: rgba(255, 255, 255, 0.8); padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 104px); }
.phero h1 { color: var(--white); font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem); max-width: 18ch; }
.phero .lead { color: rgba(255, 255, 255, 0.75); }
.phero__bars { position: absolute; right: -6%; bottom: -18%; width: min(52vw, 640px); opacity: 0.12; pointer-events: none; }
.phero__mark .lg-bars { fill: var(--gold); }
.phero__grid { display: grid; gap: var(--s-7); align-items: end; position: relative; }
@media (min-width: 960px) { .phero__grid:has(.phero__aside) { grid-template-columns: 1.4fr 1fr; } }
.phero__aside { position: relative; }
.phero--split .phero__aside .art { aspect-ratio: 4 / 3; border-radius: var(--r); }

/* ---------- 9. Art panels ---------- */
.art { position: relative; overflow: hidden; width: 100%; height: 100%; background: var(--navy); }
.art > span { position: absolute; bottom: -6%; width: 22%; height: 66%; clip-path: polygon(42% 0, 100% 0, 58% 100%, 0 100%); transition: transform 600ms var(--ease); }
.art > span:nth-child(1) { left: 6%; }
.art > span:nth-child(2) { left: 25%; bottom: 14%; }
.art > span:nth-child(3) { left: 42%; }
.art > span:nth-child(4) { left: 61%; bottom: 14%; }
.art--tech { background-color: var(--navy-2); background-image: linear-gradient(rgba(198, 166, 103, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(198, 166, 103, 0.12) 1px, transparent 1px); background-size: 22px 22px; }
.art--tech > span { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(198, 166, 103, 0.4); }
.art--tech > span:nth-child(4) { background: var(--gold); }
.art--tech > span:nth-child(2) { background: linear-gradient(rgba(198, 166, 103, 0.5), rgba(198, 166, 103, 0.05)); }
.art--glow { background: radial-gradient(80% 90% at 30% 20%, #fbf8f1, transparent 60%), linear-gradient(140deg, #f5f2eb 0%, #ead9b6 55%, #c9a96b 100%); }
.art--glow > span { background: rgba(255, 255, 255, 0.55); }
.art--glow > span:nth-child(3) { background: rgba(20, 36, 59, 0.85); }
.art--gold { background: linear-gradient(150deg, #d3b77e, #b8975a); }
.art--gold > span { background: rgba(20, 36, 59, 0.12); }
.art--gold > span:nth-child(1), .art--gold > span:nth-child(4) { background: var(--navy); }
.art--navy { background: radial-gradient(70% 80% at 80% 10%, var(--navy-3), var(--navy) 70%); }
.art--navy > span { background: rgba(198, 166, 103, 0.18); }
.art--navy > span:nth-child(2) { background: var(--gold); }
.art--brand { display: grid; place-items: center; background: var(--ivory); }
.art__mark { width: 58%; }
.art__mark .lg-bars { fill: var(--gold); }
.art--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 700ms var(--ease); }

/* ---------- 10. Cards ---------- */
.stretch { text-decoration: none; }
.stretch::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.stretch:focus-visible { outline: none; }
.dcard:focus-within, .pcard:focus-within, .acard:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }

.dcard { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t); }
.dcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent; }
.dcard:hover .art > span { transform: translateY(-6%); }
.dcard:hover .art--photo img, .pcard:hover .art--photo img { transform: scale(1.04); }
.dcard__media { position: relative; aspect-ratio: 16 / 10; }
.dcard__icon { position: absolute; left: var(--s-5); bottom: -22px; display: grid; place-items: center; width: 48px; height: 48px; background: var(--gold); color: var(--navy); border-radius: var(--r-sm); box-shadow: var(--sh-1); }
.dcard__body { padding: calc(var(--s-6) + 6px) var(--s-5) var(--s-5); display: flex; flex-direction: column; flex: 1; }
.dcard__body h3 { margin-bottom: var(--s-2); }
.dcard__body > p { color: var(--text-muted); font-size: var(--fs-sm); }
.dcard__body .tlink { margin-top: auto; padding-top: var(--s-4); }
.ticks { list-style: none; display: grid; gap: 8px; margin: var(--s-2) 0 var(--s-4); font-size: var(--fs-sm); }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .i { width: 18px; height: 18px; margin-top: 3px; color: var(--gold-text); }
.sec--navy .ticks .i { color: var(--gold); }

.scard { position: relative; display: flex; flex-direction: column; padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t); overflow: hidden; }
.scard::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease); }
.scard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent; }
.scard:hover::before, .scard:focus-within::before { transform: scaleX(1); }
.scard__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--s-5); background: var(--ivory); color: var(--navy); border-radius: var(--r-sm); transition: background var(--t), color var(--t); }
.scard:hover .scard__icon { background: var(--navy); color: var(--gold); }
.scard__icon .i { width: 24px; height: 24px; }
.scard__cat { font: 600 var(--fs-xs)/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); margin-bottom: var(--s-3); }
.scard h3 { margin-bottom: var(--s-3); }
.scard > p { color: var(--text-muted); font-size: var(--fs-sm); }
.scard__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.scard > p + .scard__links { margin-top: auto; }
.scard > p { margin-bottom: var(--s-5); }
.scard__quote { font-size: var(--fs-sm); color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--line-strong); min-height: 44px; display: inline-flex; align-items: center; }
.scard__quote:hover { color: var(--navy); text-decoration-color: var(--gold); }
.scard .tlink { min-height: 44px; }

.pcard { position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.pcard:not(.pcard--ph):hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.pcard__media { position: relative; aspect-ratio: 4 / 3; }
.pcard__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.pcard__body > p:not(.pcard__cat) { color: var(--text-muted); font-size: var(--fs-sm); }
.pcard__body .tlink, .pcard__body > .muted { margin-top: auto; padding-top: var(--s-3); }
.pcard__cat { font: 600 var(--fs-xs)/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); margin-bottom: var(--s-3); }
.pcard--ph .pcard__media { opacity: 0.55; filter: grayscale(0.4); }
.pcard--ph { border-style: dashed; border-color: var(--line-strong); background: transparent; }
.ph-badge { position: absolute; top: var(--s-4); left: var(--s-4); padding: 5px 10px; font: 600 11px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; background: var(--white); color: var(--navy); border-radius: var(--r-sm); }
@media (min-width: 1024px) {
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .pgrid--feature .pcard:first-child { grid-column: span 2; grid-row: span 2; }
  .pgrid--feature .pcard:first-child .pcard__media { aspect-ratio: 16 / 10; flex: 1; }
  .pgrid--feature .pcard:first-child .pcard__body { flex: none; }
  .pgrid--feature .pcard:first-child h3 { font-size: 1.75rem; }
}

.acard { position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.acard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.acard__media { aspect-ratio: 16 / 9; }
.acard__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.acard__body > p:not(.acard__meta) { color: var(--text-muted); font-size: var(--fs-sm); }
.acard__body .tlink { margin-top: auto; padding-top: var(--s-3); }
.acard__meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--s-3); }

.tcard { margin: 0; padding: var(--s-6); background: var(--surface); border-radius: var(--r); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-5); }
.tcard__q { width: 34px; fill: var(--gold); }
.tcard blockquote { margin: 0; font: 500 1.1875rem/1.55 var(--font-display); color: var(--navy); }
.tcard figcaption { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); display: grid; font-size: var(--fs-sm); }
.tcard figcaption span { color: var(--text-muted); }

/* Chord identifiers: one swatch color per chord, matching the hero bars */
.sw { display: inline-block; flex: none; width: 12px; height: 16px; transform: skewX(calc(var(--slant) * -1)); vertical-align: -2px; }
.sw--technology { background: #22385a; box-shadow: inset 0 0 0 1px var(--gold); }
.sw--creative { background: #8d7a63; }
.sw--enterprise { background: #e9d7b1; box-shadow: inset 0 0 0 1px rgba(20, 36, 59, 0.25); }
.sw--opportunities { background: var(--gold); }
.chord-label { display: flex; align-items: center; gap: 10px; font: 600 var(--fs-xs)/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); margin-bottom: var(--s-3); }
.sec--navy .chord-label, .phero .chord-label { color: var(--gold); }
.dcard__verb { font: 600 var(--fs-md)/1.4 var(--font-display); color: var(--navy) !important; margin-bottom: var(--s-2); }
.dcard__body > .status { margin: var(--s-2) 0 0; }

/* Client journey */
.journey { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) { .journey { grid-template-columns: 0.8fr 1.4fr; gap: var(--s-9); } }
.journey__steps { list-style: none; display: grid; gap: var(--s-3); counter-reset: js; }
@media (min-width: 560px) { .journey__steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .journey__steps { grid-template-columns: repeat(3, 1fr); } }
.journey__steps li { counter-increment: js; position: relative; display: grid; gap: 4px; align-content: start; padding: var(--s-4) 40px var(--s-4) calc(var(--s-5) + 26px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.journey__steps li::before { content: counter(js, decimal-leading-zero); position: absolute; top: var(--s-4); right: var(--s-4); font: 800 var(--fs-xs)/1 var(--font-display); color: var(--text-muted); letter-spacing: 0.08em; }
.journey__steps .sw { position: absolute; left: var(--s-5); top: 20px; }
.journey__steps strong { color: var(--navy); font-family: var(--font-display); }
.journey__steps span { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }
.journey__legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); font-size: var(--fs-sm); }
.journey__legend li { display: flex; align-items: center; gap: 8px; }
.journey__note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--s-4); }

/* Audiences */
.auds { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
@media (min-width: 900px) { .auds { grid-template-columns: repeat(3, 1fr); } }
.auds div { display: flex; gap: var(--s-4); padding: var(--s-5); background: var(--ivory); border-radius: var(--r); }
.auds .i { width: 26px; height: 26px; color: var(--gold-text); }
.auds strong { display: block; color: var(--navy); font-family: var(--font-display); margin-bottom: 2px; }
.auds span { font-size: var(--fs-sm); color: var(--text-muted); }

/* Brand pillars (tagline / promise / philosophy) */
.pillars { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillars div { padding: var(--s-6); border-top: 2px solid var(--gold); background: var(--white); border-radius: 0 0 var(--r) var(--r); }
.pillars small { display: block; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); margin-bottom: var(--s-3); }
.pillars strong { display: block; font: 700 1.375rem/1.3 var(--font-display); color: var(--navy); margin-bottom: var(--s-2); }
.pillars span { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------- 11. Home sections ---------- */
.about-split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) { .about-split { grid-template-columns: 1fr 1.05fr; gap: var(--s-9); } }
.about-split__media { position: relative; aspect-ratio: 5 / 6; }
.about-split__media .art { clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
.about-split__badge { position: absolute; right: 6%; bottom: 8%; background: var(--navy); color: var(--white); padding: var(--s-5); max-width: 240px; border-left: 3px solid var(--gold); box-shadow: var(--sh-2); }
.about-split__badge strong { display: block; font: 700 1.5rem/1.2 var(--font-display); color: var(--gold); margin-bottom: 4px; }
.about-split__badge span { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.8); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: var(--s-6) 0; border-top: 1px solid var(--line); }
.facts div { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.facts dd { margin: 0; font: 700 var(--fs-md)/1.35 var(--font-display); color: var(--navy); }

.why { display: grid; gap: var(--s-5); counter-reset: why; }
@media (min-width: 720px) { .why { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .why { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); padding-top: 48px; } .why__item:nth-child(even) { transform: translateY(-48px); } }
.why__item { position: relative; padding: var(--s-6) var(--s-6) var(--s-7); isolation: isolate; counter-increment: why; }
.why__item::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); border-top: 2px solid var(--gold); transform: skewX(calc(var(--slant) * -0.5)); transform-origin: bottom; transition: background var(--t); }
.why__item:hover::before { background: linear-gradient(180deg, rgba(198, 166, 103, 0.14), rgba(255, 255, 255, 0.02)); }
.why__item::after { content: '0' counter(why); position: absolute; top: var(--s-5); right: var(--s-6); font: 800 0.875rem/1 var(--font-display); color: rgba(255, 255, 255, 0.35); letter-spacing: 0.1em; }
.why__item .i { width: 30px; height: 30px; color: var(--gold); margin-bottom: var(--s-6); }
.why__item h3 { color: var(--white); }
.why__item p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.72); }
.why-note { margin-top: var(--s-6); font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.5); }

.partner { display: grid; gap: var(--s-7); align-items: center; background: var(--surface); border-radius: var(--r-lg); padding: clamp(28px, 5vw, 72px); position: relative; overflow: hidden; box-shadow: var(--sh-1); }
@media (min-width: 960px) { .partner { grid-template-columns: 1.1fr 1fr; } }
.partner::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 240px; background: var(--gold); opacity: 0.14; transform: skewX(calc(var(--slant) * -1)); }
.aud { list-style: none; display: grid; gap: 0; }
.aud li { display: flex; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.aud li:first-child { border-top: 1px solid var(--line); }
.aud .i { width: 24px; height: 24px; color: var(--gold-text); margin-top: 2px; }
.aud strong { display: block; color: var(--navy); font-family: var(--font-display); }
.aud span { font-size: var(--fs-sm); color: var(--text-muted); }

.ctaband { position: relative; overflow: hidden; background: var(--navy); color: rgba(255, 255, 255, 0.8); padding-block: clamp(64px, 8vw, 112px); }
.ctaband::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 80% at 100% 50%, rgba(198, 166, 103, 0.18), transparent 70%); }
.ctaband__bars { position: absolute; right: 4%; top: 50%; width: min(46vw, 560px); transform: translateY(-50%); opacity: 0.16; }
.ctaband__mark .lg-bars { fill: var(--gold); }
.ctaband__in { position: relative; display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 960px) { .ctaband__in { grid-template-columns: 1.4fr auto; } .ctaband .actions { margin-top: 0; } }
.ctaband h2 { color: var(--white); font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); letter-spacing: -0.03em; }
.ctaband .lead { color: rgba(255, 255, 255, 0.75); }

/* ---------- 12. Ecosystem diagram ---------- */
.eco { position: relative; display: grid; justify-items: center; gap: var(--s-7); }
.eco__parent { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-7); background: var(--navy); color: var(--white); border-radius: var(--r); box-shadow: var(--sh-2); position: relative; text-align: center; }
.eco__parent .logo--v { width: 180px; }
.eco__parent small { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.eco__kids { list-style: none; display: grid; gap: var(--s-4); width: 100%; position: relative; }
.eco__node { display: grid; gap: var(--s-2); height: 100%; align-content: start; }
.eco__main { position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; transition: border-color var(--t), transform var(--t) var(--ease), box-shadow var(--t); }
.eco__main:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--sh-1); }
.eco__main strong { font: 700 var(--fs-md)/1.3 var(--font-display); color: var(--navy); }
.eco__main .chord-label { margin-bottom: 4px; }
.eco__main .status { margin: 6px 0 0; }
.eco__brands { list-style: none; display: grid; gap: var(--s-2); padding-left: var(--s-5); border-left: 2px solid var(--gold-soft); margin-left: var(--s-5); }
.eco__brands a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; font-size: var(--fs-sm); font-weight: 500; color: var(--navy); background: var(--white); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); text-decoration: none; }
.eco__brands a:hover { border-color: var(--gold); border-style: solid; }
.eco__brands .i { width: 16px; height: 16px; color: var(--gold-text); }
.eco__brands .i--xs { width: 12px; height: 12px; margin-left: auto; }
.eco__future { border-style: dashed !important; border-color: var(--line-strong) !important; background: transparent !important; color: var(--text-muted); }
.eco__future strong { color: var(--text-muted) !important; }
@media (min-width: 900px) {
  .eco__kids { grid-template-columns: repeat(4, 1fr); padding-top: 40px; }
  .eco__kids::before { left: 12.5% !important; right: 12.5% !important; }
  .eco__kids::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: var(--gold); }
  .eco__kids > li { position: relative; }
  .eco__kids > li::before { content: ''; position: absolute; top: -40px; left: 50%; width: 2px; height: 40px; background: var(--gold); }
  .eco__kids > li:last-child::before { background: repeating-linear-gradient(var(--line-strong) 0 4px, transparent 4px 8px); }
  .eco::before { content: ''; position: absolute; left: 50%; top: calc(100% - 100% + 0px); }
  .eco__parent::after { content: ''; position: absolute; left: 50%; bottom: -48px; width: 2px; height: 48px; background: var(--gold); }
}
@media (max-width: 899px) {
  .eco__kids { padding-left: var(--s-6); }
  .eco__kids::before { content: ''; position: absolute; left: 10px; top: -48px; bottom: 30px; width: 2px; background: var(--gold); }
  .eco__kids > li { position: relative; }
  .eco__kids > li::before { content: ''; position: absolute; left: calc(var(--s-6) * -1 + 10px); top: 30px; width: calc(var(--s-6) - 10px); height: 2px; background: var(--gold); }
}

/* ---------- 13. Service detail ---------- */
.aside-card { background: var(--white); color: var(--text); border-radius: var(--r); padding: var(--s-6); box-shadow: var(--sh-3); --focus: var(--navy); }
.aside-card h2 { font-size: 1.375rem; margin-bottom: var(--s-3); }
.aside-card p { font-size: var(--fs-sm); color: var(--text-muted); }
.aside-card .btn { width: 100%; margin-top: var(--s-4); }
.aside-card__alt { display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: center; margin-top: var(--s-4); font-size: var(--fs-sm); }
.aside-card__alt a { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; color: var(--navy); }
.aside-card__alt .i { width: 16px; color: var(--gold-text); }

.chal { list-style: none; display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .chal { grid-template-columns: 1fr 1fr; } }
.chal li { display: flex; gap: var(--s-4); padding: var(--s-5); background: var(--white); border-radius: var(--r); border-left: 3px solid var(--gold); font-weight: 500; color: var(--navy); }
.chal .i { color: var(--gold-text); margin-top: 3px; }

.deliv { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .deliv { grid-template-columns: 1fr 1.3fr; } }
.deliv .ticks { grid-template-columns: 1fr; gap: 0; font-size: var(--fs-md); margin: 0; }
@media (min-width: 720px) { .deliv .ticks { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }
.deliv .ticks li { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }

.outc { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .outc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .outc { grid-template-columns: repeat(4, 1fr); } }
.outc div { padding: var(--s-6) var(--s-5); border-top: 2px solid var(--gold); background: rgba(255, 255, 255, 0.04); }
.outc strong { display: block; font: 700 1.25rem/1.2 var(--font-display); color: var(--white); margin-bottom: var(--s-2); }
.outc p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.72); }

.proc { list-style: none; display: grid; gap: var(--s-5); counter-reset: proc; }
@media (min-width: 720px) { .proc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .proc { grid-template-columns: repeat(4, 1fr); } .proc li:not(:last-child)::after { content: ''; position: absolute; top: 27px; left: 64px; right: -12px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); } }
.proc li { position: relative; counter-increment: proc; }
.proc li::before { content: counter(proc); display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--s-5); font: 800 1.25rem/1 var(--font-display); color: var(--navy); background: var(--gold); clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); }
.proc h3 { margin-bottom: var(--s-2); }
.proc p { font-size: var(--fs-sm); color: var(--text-muted); }

.faq { border-top: 1px solid var(--line); max-width: 880px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 64px; padding: var(--s-4) 0; cursor: pointer; list-style: none; font: 600 var(--fs-md)/1.4 var(--font-display); color: var(--navy); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold-text); }
.faq__ico { width: 22px; height: 22px; color: var(--gold-text); transition: transform var(--t) var(--ease); }
.faq__item[open] .faq__ico { transform: rotate(45deg); }
.faq__a { padding: 0 var(--s-7) var(--s-5) 0; color: var(--text-muted); }
.js .faq__item[open] .faq__a { animation: fadeDown 260ms var(--ease); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } }

.sticky-cta { display: none; }
@media (max-width: 899px) {
  .has-sticky .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: var(--s-3); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(20, 36, 59, 0.3); transform: translateY(110%); transition: transform var(--t) var(--ease); }
  .has-sticky .sticky-cta.is-on { transform: none; }
  .sticky-cta .btn--gold { flex: 1; }
  .sticky-cta .btn--outline { width: 50px; padding: 0; }
  .has-sticky .wa-fab { display: none; }
  .has-sticky .ftr { padding-bottom: 80px; }
}

/* ---------- 14. Filters & search ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.filter { min-height: 44px; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 100px; background: var(--white); color: var(--navy); font: 500 var(--fs-sm)/1 var(--font-body); cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t); }
.filter:hover { border-color: var(--navy); }
.filter[aria-pressed='true'] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center; margin-bottom: var(--s-6); }
.toolbar .filters { margin: 0; }
.search { position: relative; flex: 0 1 320px; }
.search .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); width: 18px; }
.search input { width: 100%; min-height: 48px; padding: 10px 14px 10px 42px; border: 1px solid var(--line-strong); border-radius: 100px; background: var(--white); }
.search input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(198, 166, 103, 0.45); }
.empty { padding: var(--s-7); text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--text-muted); }
[data-filter-item][hidden] { display: none !important; }

/* ---------- 15. Forms ---------- */
.form { display: grid; gap: var(--s-5); }
.form-row { display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; align-content: start; }
.field > label, .fs > legend { font: 600 var(--fs-sm)/1.3 var(--font-body); color: var(--navy); }
.req { color: var(--error); margin-left: 2px; }
.opt-tag { font-weight: 400; color: var(--text-muted); font-size: var(--fs-xs); margin-left: 6px; }
.help { font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }
.input, .select, .textarea { width: 100%; min-height: 52px; padding: 12px 14px; background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--r-sm); transition: border-color var(--t), box-shadow var(--t); }
.textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2314243B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--navy-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(198, 166, 103, 0.5); }
.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--error); background: var(--error-bg); }
.input:disabled { background: var(--ivory); cursor: not-allowed; }
.err { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-xs); color: var(--error); font-weight: 500; margin: 0; }
.err .i { width: 15px; height: 15px; margin-top: 1px; }
.err[hidden] { display: none; }
.fs { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-3); min-width: 0; }
.fs > legend { padding: 0; margin-bottom: var(--s-3); }
.fs--invalid .optcard, .fs--invalid .check { border-color: var(--error); }

.opts { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .opts--2 { grid-template-columns: 1fr 1fr; } .opts--3 { grid-template-columns: repeat(3, 1fr); } }
.optcard { position: relative; display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4) var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--white); cursor: pointer; transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.optcard:hover { border-color: var(--navy); }
.optcard:has(input:checked) { border-color: var(--navy); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--navy); }
.optcard:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.optcard input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--navy); flex: none; }
.optcard .i { width: 24px; height: 24px; color: var(--gold-text); flex: none; }
.optcard strong { display: block; color: var(--navy); font-weight: 600; line-height: 1.35; }
.optcard small { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.optcard--sm { padding: 12px 16px; align-items: center; }
.optcard--sm input { margin: 0; }
.check { display: flex; gap: var(--s-3); align-items: flex-start; cursor: pointer; font-size: var(--fs-sm); line-height: 1.5; }
.check input { margin: 2px 0 0; width: 20px; height: 20px; accent-color: var(--navy); flex: none; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { display: flex; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r); font-size: var(--fs-sm); border: 1px solid transparent; }
.alert .i { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.alert strong { display: block; color: inherit; }
.alert ul { margin: 6px 0 0 18px; }
.alert a { font-weight: 600; }
.alert--error { background: var(--error-bg); color: #7a1a12; border-color: rgba(180, 35, 24, 0.25); }
.alert--success { background: var(--success-bg); color: #134a30; border-color: rgba(29, 107, 69, 0.25); }
.alert--info { background: var(--info-bg); color: var(--navy); border-color: rgba(20, 36, 59, 0.12); }
.alert--gold { background: #faf5ea; color: var(--navy); border-color: var(--gold-soft); }
.alert__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.alert[hidden] { display: none; }

.form-card { background: var(--white); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 48px); box-shadow: var(--sh-2); position: relative; }
.form-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.form-foot .btn--outline .i { transform: none !important; }

/* Multi-step quote */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin-bottom: var(--s-6); counter-reset: st; }
.steps li { counter-increment: st; display: grid; gap: 10px; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }
.steps li::before { content: ''; height: 4px; border-radius: 2px; background: var(--ivory-2); transition: background 400ms var(--ease); }
.steps li span::before { content: counter(st) '. '; }
.steps li.is-done::before, .steps li.is-current::before { background: var(--gold); }
.steps li.is-current { color: var(--navy); font-weight: 700; }
@media (max-width: 640px) { .steps li span { display: none; } .steps li.is-current span { display: inline; position: absolute; } .steps { position: relative; padding-bottom: 22px; } .steps li.is-current span { left: 0; bottom: 0; } }
.step { display: grid; gap: var(--s-5); }
.step[hidden] { display: none; }
.step__title { font-size: 1.5rem; margin: 0; }
.step__title:focus { outline: none; }
.cond[hidden] { display: none; }
.review { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.review section { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.review section:last-child { border-bottom: 0; }
.review header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.review h3 { font-size: var(--fs-sm); margin: 0; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-text); font-family: var(--font-body); }
.review button { border: 0; background: none; color: var(--navy); text-decoration: underline; cursor: pointer; font-size: var(--fs-sm); min-height: 36px; padding: 0 6px; }
.review dl { margin: 0; display: grid; grid-template-columns: minmax(110px, 0.6fr) 1.4fr; gap: 6px var(--s-4); font-size: var(--fs-sm); }
.review dt { color: var(--text-muted); }
.review dd { margin: 0; color: var(--navy); word-break: break-word; }
.done { text-align: center; display: grid; justify-items: center; gap: var(--s-4); padding-block: var(--s-6); }
.done__ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--success-bg); color: var(--success); }
.done__ico .i { width: 34px; height: 34px; }
.done h2:focus { outline: none; }
.done .ref { font: 600 var(--fs-sm)/1 var(--font-body); padding: 10px 16px; border-radius: 100px; background: var(--ivory); color: var(--navy); }
.done ol { text-align: left; max-width: 440px; margin: 0 auto; padding-left: 20px; display: grid; gap: 6px; color: var(--text-muted); font-size: var(--fs-sm); }

.quote-layout { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) { .quote-layout { grid-template-columns: 1fr 340px; } }
.quote-side { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) { .quote-side { position: sticky; top: calc(var(--hdr-h) + 24px); } }
.side-box { padding: var(--s-5); border-radius: var(--r); background: var(--white); border: 1px solid var(--line); }
.side-box h2 { font-size: 1.125rem; margin-bottom: var(--s-3); }
.side-box ol, .side-box ul { padding-left: 18px; display: grid; gap: 8px; font-size: var(--fs-sm); color: var(--text-muted); }
.contact-lines { list-style: none; padding: 0 !important; }
.contact-lines a { display: flex; gap: 10px; align-items: center; min-height: 40px; color: var(--navy); text-decoration: none; font-weight: 500; }
.contact-lines a:hover { text-decoration: underline; }
.contact-lines .i { width: 18px; color: var(--gold-text); }

/* Contact routes */
.routes { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .routes { grid-template-columns: repeat(3, 1fr); } }
.route { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); background: var(--white); border-radius: var(--r); border-top: 3px solid var(--gold); box-shadow: var(--sh-1); }
.route .i { width: 28px; height: 28px; color: var(--gold-text); }
.route h2 { font-size: 1.375rem; margin: 0; }
.route p { font-size: var(--fs-sm); color: var(--text-muted); }
.route .tlink { margin-top: auto; }
.channels { display: grid; gap: var(--s-3); }
.channel { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--white); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; transition: border-color var(--t), transform var(--t) var(--ease); }
a.channel:hover { border-color: var(--gold); transform: translateX(3px); }
.channel > .i { width: 40px; height: 40px; padding: 9px; border-radius: var(--r-sm); background: var(--ivory); color: var(--navy); }
.channel small { display: block; font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.channel strong { color: var(--navy); font-weight: 600; word-break: break-word; }
.channel--wa > .i { background: #e7f6ec; color: #17803d; }

/* ---------- 16. Article / prose ---------- */
.prose { max-width: 70ch; font-size: 1.125rem; line-height: 1.75; }
.prose h2 { font-size: 1.625rem; margin: var(--s-7) 0 var(--s-3); }
.prose p, .prose ul, .prose ol { margin-bottom: var(--s-5); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 8px; }
.prose li::marker { color: var(--gold-text); font-weight: 700; }
.prose a { color: var(--navy); font-weight: 600; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.prose strong { color: var(--navy); }
.prose > p:first-child { font-size: 1.25rem; color: var(--navy); }
.art-hero { aspect-ratio: 21 / 8; border-radius: var(--r); overflow: hidden; margin-top: calc(var(--s-8) * -1); position: relative; box-shadow: var(--sh-2); }
.ameta { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.7); margin-top: var(--s-5); }
.ameta .chip { background: rgba(255, 255, 255, 0.1); color: var(--gold); }
.legal { max-width: 78ch; }
.legal h2 { font-size: 1.375rem; margin: var(--s-7) 0 var(--s-3); }
.legal ul { padding-left: 1.3em; margin-bottom: var(--s-4); display: grid; gap: 6px; }
.note { padding: var(--s-4) var(--s-5); background: var(--ivory); border-left: 3px solid var(--gold); border-radius: var(--r-sm); font-size: var(--fs-sm); }

/* Case study */
.cs-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-5); padding: var(--s-5) 0; margin-top: var(--s-6); border-top: 1px solid rgba(255, 255, 255, 0.14); }
.cs-meta dt { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.cs-meta dd { margin: 0; color: var(--white); font-weight: 500; }
.cs-meta a { color: var(--white); }
.cs-body { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .cs-body { grid-template-columns: 260px 1fr; gap: var(--s-9); } .cs-body h2 { position: sticky; top: calc(var(--hdr-h) + 24px); } }
.cs-body h2 { font-size: 1.5rem; }
.cs-block + .cs-block { margin-top: var(--s-8); }
.art--img { background: var(--white); }
.art--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pcard__media .art--img, .art-hero .art--img { border-bottom: 1px solid var(--line); }
.art--cover img { object-fit: cover; object-position: center top; }
.cs-gallery { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.cs-gallery figure { margin: 0; }
.cs-gallery img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); border: 1px solid var(--line); box-shadow: var(--sh-1); background: var(--white); }
.cs-gallery figcaption { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--graphite); }
.cs-gallery--wide { grid-column: 1 / -1; }

/* Careers */
.jlist { display: grid; gap: var(--s-4); }
.jcard { position: relative; display: flex; align-items: center; gap: var(--s-5); padding: var(--s-6); background: var(--white); border: 1px solid var(--line); border-radius: var(--r); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.jcard:hover { border-color: var(--gold); box-shadow: var(--sh-1); }
.jcard__main { flex: 1; min-width: 0; }
.jcard h3 { font-size: 1.375rem; margin: 6px 0 var(--s-2); }
.jcard__meta { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--s-3); margin-top: var(--s-4); }
.jcard__go { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ivory); color: var(--navy); flex: none; transition: background var(--t) var(--ease), transform var(--t) var(--ease); }
.jcard:hover .jcard__go { background: var(--gold); transform: translateX(4px); }
.jcard__go .i { width: 20px; height: 20px; }
@media (max-width: 599px) { .jcard__go { display: none; } }

/* About */
.mv { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .mv { grid-template-columns: 1fr 1fr; } }
.mv > div { padding: clamp(24px, 4vw, 48px); border-radius: var(--r); background: var(--white); position: relative; overflow: hidden; }
.mv .i { width: 32px; height: 32px; color: var(--gold-text); margin-bottom: var(--s-5); }
.mv p { font: 600 clamp(1.25rem, 1rem + 0.8vw, 1.625rem)/1.4 var(--font-display); color: var(--navy); letter-spacing: -0.01em; }
.vals { list-style: none; display: grid; gap: 0; counter-reset: v; }
@media (min-width: 900px) { .vals { grid-template-columns: repeat(5, 1fr); } }
.vals li { padding: var(--s-6) var(--s-5); border-left: 1px solid var(--line); counter-increment: v; }
.vals li::before { content: '0' counter(v); display: block; font: 800 var(--fs-xs)/1 var(--font-display); color: var(--gold-text); letter-spacing: 0.12em; margin-bottom: var(--s-5); }
.vals strong { display: block; font: 700 1.25rem/1.2 var(--font-display); color: var(--navy); margin-bottom: var(--s-2); }
.vals span { font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 899px) { .vals li { border-left: 0; border-top: 1px solid var(--line); padding-inline: 0; } }
.chords { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) { .chords { grid-template-columns: 1fr 1fr; } }
.chords__mark { max-width: 440px; }
.chords__mark .lg-bars { fill: var(--gold); }
.chords__list { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.chords__list li { display: flex; gap: var(--s-4); align-items: center; color: rgba(255, 255, 255, 0.85); }
.chords__list i { flex: none; width: 14px; height: 22px; background: var(--gold); transform: skewX(calc(var(--slant) * -1)); }
.gov { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--white); border-radius: var(--r); overflow: hidden; }
.gov th, .gov td { text-align: left; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); vertical-align: top; }
.gov th { width: 40%; color: var(--text-muted); font-weight: 500; }
.gov td { color: var(--navy); font-weight: 600; }
.gov tr:last-child th, .gov tr:last-child td { border-bottom: 0; }
.timeline { list-style: none; position: relative; padding-left: var(--s-6); display: grid; gap: var(--s-6); }
.timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--gold-soft); }
.timeline li { position: relative; }
.timeline li::before { content: ''; position: absolute; left: calc(var(--s-6) * -1); top: 6px; width: 14px; height: 14px; background: var(--gold); transform: skewX(calc(var(--slant) * -1)); }
.timeline time { font: 700 var(--fs-sm)/1 var(--font-display); color: var(--gold-text); letter-spacing: 0.04em; }
.timeline strong { display: block; color: var(--navy); font-family: var(--font-display); font-size: 1.125rem; margin: 6px 0 4px; }
.timeline .is-next::before { background: transparent; border: 2px dashed var(--gold); }
.leader-ph { display: flex; gap: var(--s-5); align-items: center; padding: var(--s-5); border: 1px dashed var(--line-strong); border-radius: var(--r); }
.leader-ph__av { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--ivory-2); display: grid; place-items: center; color: var(--text-muted); }

/* ---------- 17. Footer ---------- */
.ftr { background: #0f1c2f; color: rgba(255, 255, 255, 0.7); padding-top: clamp(56px, 6vw, 88px); font-size: var(--fs-sm); position: relative; }
.ftr::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold) 0 25%, transparent 25% 27%, var(--gold) 27% 50%, transparent 50% 52%, var(--gold) 52% 75%, transparent 75% 77%, var(--gold) 77%); opacity: 0.85; }
.ftr__top { display: grid; gap: var(--s-7) var(--s-6); padding-bottom: var(--s-8); }
@media (min-width: 720px) { .ftr__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ftr__top { grid-template-columns: 1.6fr 0.8fr 1fr 1.2fr 1.2fr; } }
.ftr__logo { display: block; width: 190px; color: var(--white); margin-bottom: var(--s-5); }
.ftr__brand p { max-width: 34ch; }
.ftr__tag { font: 700 var(--fs-sm)/1.4 var(--font-display); color: var(--gold) !important; letter-spacing: 0.04em; padding-top: var(--s-4); border-top: 1px solid rgba(198, 166, 103, 0.3); display: inline-block; }
.ftr h2 { font: 600 var(--fs-xs)/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-5); }
.ftr ul { list-style: none; display: grid; gap: 4px; }
.ftr__col a { display: inline-flex; align-items: center; min-height: 32px; color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.ftr__col a:hover { color: var(--white); text-decoration: underline; }
.ftr__contact { margin-bottom: var(--s-5); }
.ftr__contact a, .ftr__contact span { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; word-break: break-all; }
.ftr__contact .i { width: 17px; color: var(--gold); }
.ftr__social { display: flex !important; gap: var(--s-4) !important; margin-bottom: var(--s-5); }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-5); border-top: 1px solid rgba(198, 166, 103, 0.22); font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.55); }
.ftr__bottom p { margin: 0; }
.ftr__bottom ul { display: flex; gap: var(--s-5); }
.ftr__bottom a { color: rgba(255, 255, 255, 0.7); min-height: 32px; display: inline-flex; align-items: center; }

.wa-fab { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #1f9d55; color: var(--white); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.4); transition: transform var(--t) var(--ease); }
.wa-fab:hover { transform: scale(1.06); }
.wa-fab .i { width: 26px; height: 26px; }

/* ---------- 18. Styleguide ---------- */
.sg-sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-4); }
.sg-sw div { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); font-size: var(--fs-xs); }
.sg-sw i { display: block; height: 88px; }
.sg-sw p { padding: 10px 12px; margin: 0; }
.sg-sw b { display: block; color: var(--navy); font-size: var(--fs-sm); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.sg-row--dark { background: var(--navy); --focus: var(--gold); }
.sg-block + .sg-block { margin-top: var(--s-8); }
.sg-block > h2 { font-size: 1.5rem; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); margin-bottom: var(--s-5); }
.sg-type > * { margin-bottom: var(--s-4); }
.sg-space { display: grid; gap: 8px; }
.sg-space div { display: flex; align-items: center; gap: var(--s-4); font-size: var(--fs-xs); }
.sg-space i { height: 14px; background: var(--gold); display: block; }

/* ---------- 19. Motion ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Eyebrow rules draw in; tick lists cascade once their block is revealed. */
.js .reveal .eyebrow::before, .js .reveal.eyebrow::before { width: 0; transition: width 700ms 200ms var(--ease); }
.js .reveal.is-in .eyebrow::before, .js .reveal.is-in.eyebrow::before { width: 28px; }
.js .reveal.ticks > li { opacity: 0; transform: translateX(-10px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.js .reveal.ticks.is-in > li { opacity: 1; transform: none; }
.js .reveal.ticks > li:nth-child(2) { transition-delay: 70ms; } .js .reveal.ticks > li:nth-child(3) { transition-delay: 140ms; }
.js .reveal.ticks > li:nth-child(4) { transition-delay: 210ms; } .js .reveal.ticks > li:nth-child(5) { transition-delay: 280ms; }
.js .reveal.ticks > li:nth-child(n + 6) { transition-delay: 350ms; }

/* Home hero headline: letters fade in one after another, like soft typing. */
.hero h1.is-split .word { display: inline-block; }
.hero h1.is-split .ch { display: inline-block; animation: charIn 520ms calc(150ms + var(--i) * 38ms) var(--ease) backwards; transform: translateY(calc(var(--lift, 0) * -10px)) scale(calc(1 + var(--lift, 0) * 0.08)); transition: transform 250ms var(--ease), color 250ms var(--ease), text-shadow 250ms var(--ease); }
.hero h1.is-split .ch[style*='--lift'] { text-shadow: 0 0 calc(var(--lift) * 24px) rgba(198, 166, 103, 0.7); }
/* A glint of light keeps travelling through the gold line, letter by letter. */
.hero h1.is-split em .ch { animation: charIn 520ms calc(150ms + var(--i) * 38ms) var(--ease) backwards, glint 5.5s calc(2.4s + var(--i) * 55ms) ease-in-out infinite; }
@keyframes charIn { from { opacity: 0; transform: translateY(0.18em); filter: blur(6px); } }
@keyframes glint { 0%, 12%, 100% { color: var(--gold); text-shadow: none; } 6% { color: #fff3d6; text-shadow: 0 0 18px rgba(233, 215, 177, 0.85); } }
/* Typed eyebrow with caret. */
.hero .eyebrow .type::after { content: ''; display: inline-block; width: 2px; height: 1.1em; margin-left: 4px; vertical-align: -0.2em; background: var(--gold); animation: caret 900ms steps(1) infinite; }
.hero .eyebrow .type.is-done::after { opacity: 0; animation: none; transition: opacity 400ms; }
@keyframes caret { 50% { opacity: 0; } }
.hero .lead, .hero .actions, .hero__legend { animation: fadeUp 800ms 600ms var(--ease) both; }
.hero .actions { animation-delay: 750ms; } .hero__legend { animation-delay: 900ms; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }
.hero__svg .hb { transition: translate 500ms var(--ease); }

/* Hero bars breathe gently once they have risen. */
.js .hero__svg .hb:nth-child(odd) > :first-child { animation: breathe 6s 1.2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.86; } }

/* Scroll-linked parallax (value set by site.js). */
.plx { translate: 0 var(--py, 0); will-change: translate; }
.art-hero .plx, .phero__aside .plx, .about-split__media .plx { scale: 1.08; }

/* Cards: tilt + pointer spotlight. */
.tilt { position: relative; transform-style: preserve-3d; will-change: transform; transition: transform 300ms var(--ease), box-shadow var(--t) var(--ease), border-color var(--t); }
.tilt::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 300ms var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(198, 166, 103, 0.16), transparent 45%); }
.tilt:hover::after { opacity: 1; }

/* Buttons: the pull is set by site.js; shine sweeps across on hover. */
.btn { transition-property: background, color, border-color, transform, box-shadow, translate; position: relative; overflow: hidden; isolation: isolate; }
.btn--gold::before, .btn--navy::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform 700ms var(--ease); }
.btn--gold:hover::before, .btn--navy:hover::before { transform: translateX(120%); }

/* Header slides away when scrolling down, back when scrolling up. */
.hdr { transition: box-shadow var(--t) var(--ease), transform 350ms var(--ease); }
.hdr.is-hidden { transform: translateY(-100%); }

/* Scroll progress and back to top. */
.scroll-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; background: linear-gradient(90deg, var(--gold), #e9d7b1); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.to-top { position: fixed; right: 20px; bottom: 88px; z-index: 80; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--navy); box-shadow: var(--sh-1); cursor: pointer; opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity 300ms var(--ease), transform 300ms var(--ease), background var(--t); }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--gold); border-color: var(--gold); }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.has-sticky .to-top { bottom: 96px; }
@media print { .scroll-prog, .to-top { display: none !important; } }

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

/* ---------- 20. Print ---------- */
@media print { .hdr, .ftr, .wa-fab, .sticky-cta, .ctaband { display: none !important; } .phero, .hero { background: none; color: #000; } .phero h1 { color: #000; } }