/*
Theme Name: Alma Advisors
Theme URI: https://happyonline.gr/
Author: Happyonline
Author URI: https://happyonline.gr/
Description: Custom theme for almaadvisors.com — Happyonline (st base).
Version: 1.0.0
Tested up to: 7.1
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: st
*/

/* ==========================================================================
   Fonts — Syne, self-hosted (variable weight 400–800), split by script so
   the Greek subset only downloads when Greek text is on the page.
   ========================================================================== */
@font-face { font-family: 'Syne'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('assets/fonts/syne-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Syne'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('assets/fonts/syne-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Syne'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('assets/fonts/syne-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

/* WordPress admin bar (logged-in preview only): keep the fixed header below it */
body.admin-bar [data-alma-header] { top: 32px; }
body.admin-bar [data-el="mobile"] { top: calc(var(--alma-head, 68px) + 32px) !important; }
/* ==========================================================================
   Alma Advisors — shared stylesheet
   Ported from the approved homepage. Extend, never duplicate.
   Components in here: header + mega nav, mobile drawer, breadcrumb band,
   page head, on-page description, section pattern, service card, stat strip,
   sector tag, office block, person card, FAQ accordion, CTA band, footer,
   sticky section nav, back-to-top, reveal animations.
   Later templates add: tombstone card, article card, report card,
   testimonial pull, filter bar, form field set.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root {
  --deep: #003E3A;
  --deeper: #00312E;
  --deepest: #002220;
  --green: #198757;
  --forest: #0F6B44;
  --mint: #31C594;
  --support: #598D9D;
  --eyebrow: #3D6C7A;
  --cream: #F6F4EF;
  --cream-2: #EFEBE2;
  --mint-wash: #E7F1EB;
  --near-black: #101A18;
  --body: #3A4744;
  --muted: #8B968F;
  --muted-deep: #5C6B66;

  --shell: max(1800px, 93.75vw);
  --gutter: clamp(20px, 4vw, max(40px, 2.0833vw));
  --section-y: clamp(72px, 8vw, max(140px, 7.2917vw));

  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alma-head-rest, 63px) + 12px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--near-black);
  font-family: Syne, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
img, video { max-width: 100%; }

/* the UA `hidden` rule loses to author display rules such as .grid */
[hidden] { display: none !important; }

a { color: var(--deep); text-decoration: none; }
a:hover { color: var(--green); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }
::placeholder { color: var(--muted); }
::selection { background: var(--mint); color: var(--deep); }

/* --- scrollbar ---------------------------------------------------------- */
html { scrollbar-width: thin; scrollbar-color: var(--forest) rgba(16,26,24,0.07); scrollbar-gutter: stable; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(16,26,24,0.055); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--forest) 0%, var(--deep) 100%);
  border: 3px solid transparent; background-clip: padding-box; border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--mint) 0%, var(--forest) 100%); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
[data-rail]::-webkit-scrollbar { height: 0; width: 0; display: none; }
[data-rail] { scrollbar-width: none; -ms-overflow-style: none; }

/* --- custom cursor ------------------------------------------------------ */
html[data-cursor="on"], html[data-cursor="on"] *,
html[data-cursor="on"] *::before, html[data-cursor="on"] *::after { cursor: none !important; }
#alma-ring, #alma-dot {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none; border-radius: 50%; will-change: transform;
}
#alma-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(15,107,68,0.55);
  transition: width .22s ease, height .22s ease, margin .22s ease,
    background-color .22s ease, border-color .22s ease, opacity .2s linear;
}
#alma-dot {
  width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--forest);
  transition: opacity .2s linear, width .18s ease, height .18s ease, margin .18s ease, background-color .22s ease;
}
html[data-cursor-scheme="light"] #alma-ring { border-color: rgba(246,244,239,0.7); }
html[data-cursor-scheme="light"] #alma-dot { background: var(--mint); }
html[data-cursor-state="link"] #alma-ring {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  background: rgba(49,197,148,0.14); border-color: var(--mint);
}
html[data-cursor-state="link"] #alma-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; }

/* --- layout primitives -------------------------------------------------- */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section--cream { background: var(--cream); }
.section--white { background: #FFFFFF; }
.section--dark { background: var(--deeper); color: var(--cream); }

.eyebrow {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--eyebrow); font-weight: 700;
}
.section--dark .eyebrow { color: var(--mint); }
.topic .eyebrow { color: var(--forest); font-size: 12px; letter-spacing: 0.16em; }
.topic__body .h2 { font-size: clamp(19px, 2.35vw, 33px); line-height: 1.12; }

.h2 {
  margin-top: 18px;
  font-size: clamp(21px, 2.6vw, 36px); line-height: 1.1;
  letter-spacing: -0.04em; font-weight: 700; color: var(--deep);
  max-width: 26ch; text-wrap: pretty;
}
.section--dark .h2 { color: var(--cream); }

.h3 {
  font-size: clamp(16px, 1.35vw, 20px); line-height: 1.24;
  letter-spacing: -0.03em; font-weight: 700; color: var(--deep);
  text-wrap: balance;
}
.section--dark .h3 { color: var(--cream); }

.lede {
  margin-top: 20px; font-size: clamp(16px, 1.01vw, 19px); line-height: 1.75;
  color: var(--body); max-width: 54ch; text-wrap: pretty;
}
.section--dark .lede { color: rgba(246,244,239,0.8); }

.measure { max-width: 64ch; }
.prose p { font-size: 16px; line-height: 1.8; color: var(--body); text-wrap: pretty; }
.prose p + p { margin-top: 18px; }
.prose.prose--invert p { color: rgba(246,244,239,0.78); }

/* --- buttons and links -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 16px 32px;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  transition: background-color .3s linear, color .3s linear, transform .3s linear, border-color .3s linear;
  border: 1px solid transparent;
}
.btn svg { display: block; flex: 0 0 auto; }
.btn--solid { background: var(--deep); color: var(--cream); border: 1px solid var(--deep); }
.btn--solid:hover { background: var(--forest); border-color: var(--forest); transform: translateY(-2px); }
.btn--light { background: var(--cream); color: var(--deep); }
.btn--light:hover { background: var(--forest); color: var(--cream); transform: translateY(-2px); }

.link-rule {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; color: var(--deep);
  border-bottom: 2px solid var(--mint); padding-bottom: 4px;
  transition: color .3s linear;
}
.link-rule:hover { color: var(--green); }
.link-rule svg { display: block; }
.page-head .link-rule { color: var(--cream); border-bottom-color: rgba(246,244,239,0.4); }
.page-head .link-rule:hover { color: var(--mint); border-bottom-color: var(--mint); }
.section--dark .link-rule { color: var(--cream); }
.section--dark .link-rule:hover { color: var(--mint); }

/* --- breadcrumb band ---------------------------------------------------- */
.crumbs {
  position: absolute; top: var(--alma-head-rest, 62px); left: 0; right: 0; z-index: 2;
  background: transparent; border: 0;
}
.crumbs__inner {
  max-width: var(--shell); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; flex-wrap: nowrap; gap: 4px 8px;
  font-size: 13px; line-height: 1.5;
}
.crumbs a { color: rgba(246,244,239,0.72); transition: color .3s linear; min-height: 0; display: inline; }
.crumbs a:hover { color: var(--mint); }
.crumbs [aria-current="page"] { color: var(--cream); font-weight: 700; }
.crumbs__sep { color: rgba(246,244,239,0.4); font-weight: 400; padding: 0 2px; }

h1, h2, h3, h4, .h2, .h3 { font-family: Syne, Arial, sans-serif; }

/* --- page head ---------------------------------------------------------- */
.page-head {
  position: relative; overflow: hidden;
  background: var(--deep);
  min-height: clamp(340px, 42vh, 520px);
  min-height: clamp(340px, 42svh, 520px);
  display: grid; align-items: center;
  padding: calc(var(--alma-head-rest, 62px) + clamp(58px, 6vw, max(104px, 5.4167vw))) 0 clamp(40px, 5vw, max(76px, 3.9583vw));
}
/* listing pages lead with their content, so the green band is a strip, not a hero */
.page-head--compact {
  /* declared after .page-head so it wins on equal specificity */
  min-height: 0;
  padding-top: calc(var(--alma-head-rest, 62px) + clamp(74px, 6.4vw, max(96px, 5vw)));
  padding-bottom: clamp(34px, 3.4vw, max(54px, 2.8125vw));
}
.section--tight { padding: clamp(34px, 3.6vw, max(56px, 2.9167vw)) 0 var(--section-y); }
.page-head__media {
  position: absolute; inset: 0;
  background-color: var(--deep);
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.page-head__veil {
  position: absolute; inset: 0;
  background: linear-gradient(102deg, rgba(0,49,46,0.95) 0%, rgba(0,49,46,0.82) 34%, rgba(0,49,46,0.5) 70%, rgba(0,49,46,0.28) 100%);
}
.page-head__veil-2 {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,49,46,0.34) 0%, rgba(0,49,46,0) 26%, rgba(0,49,46,0.06) 62%, rgba(0,34,32,0.42) 100%);
}
.page-head__inner {
  position: relative; max-width: var(--shell); margin: 0 auto;
  padding: 0 var(--gutter); width: 100%;
  /* align-items keeps inline children (the rule link) at their own width —
     a flex column stretches them full-width by default */
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
/* Shared floor so every internal hero is the same height whatever the length of
   its h1 and standfirst. Only above 700px: on phones the heroes are never seen
   side by side and a floor would just add dead space above the fold. */

.page-head .eyebrow { color: var(--mint); }
.page-head h1 {
  margin-top: clamp(18px, 2.2vw, max(28px, 1.4583vw));
  font-size: clamp(25px, 3.5vw, 50px); line-height: 1.06;
  letter-spacing: -0.045em; font-weight: 700; color: var(--cream);
  max-width: 24ch; text-wrap: pretty;
}
.page-head__standfirst {
  margin-top: clamp(18px, 2.2vw, max(28px, 1.4583vw));
  font-size: clamp(14px, 1.16vw, 18px); line-height: 1.7;
  color: rgba(246,244,239,0.82); max-width: 62ch; text-wrap: pretty;
}
.page-head .btn { margin-top: clamp(26px, 3.2vw, max(40px, 2.0833vw)); }

/* --- on-page description ------------------------------------------------ */
.describe {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 4.4vw, max(80px, 4.1667vw)); align-items: start;
}

.describe__cols { columns: 2; column-gap: clamp(24px, 2.6vw, max(44px, 2.2917vw)); margin-top: 26px; }

.describe__cols p { break-inside: avoid; }
.describe__globe { position: relative; width: 100%; height: clamp(320px, 34vw, max(520px, 27.0833vw)); }
.describe__globe alma-globe { display: block; width: 100%; height: 100%; }

/* --- generic card grid -------------------------------------------------- */
.grid { display: grid; gap: clamp(14px, 1.5vw, max(22px, 1.1458vw)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.2vw, max(34px, 1.7708vw));
  background: #FFFFFF; border: 1px solid rgba(16,26,24,0.1);
  transition: border-color .3s linear, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .3s linear;
}
.card:hover { border-color: rgba(15,107,68,0.32); box-shadow: 0 16px 44px -30px rgba(0,62,58,0.45); }
a.card:hover { transform: translateY(-4px); }

/* service card */
.service { min-height: clamp(200px, 17vw, max(250px, 13.0208vw)); }
.service .h3 { margin-top: 16px; }
.service__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: clamp(20px, 2.2vw, 30px);
  border: 1px solid rgba(15,107,68,0.28); color: var(--forest);
  transition: border-color .3s linear, background-color .3s linear, color .3s linear;
}
.service__icon svg { display: block; }
.card.service:hover .service__icon { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.service__body {
  margin-top: 16px; font-size: 15px; line-height: 1.7; color: var(--body); text-wrap: pretty; }

/* --- stat strip ---------------------------------------------------------
   Mirrors the homepage IMAP strip exactly: a mint rule above, five columns
   stepping to three then two, dividers between cells in a row. */
.stats {
  margin-top: clamp(48px, 5vw, max(80px, 4.1667vw));
  padding-top: clamp(28px, 2.8vw, max(42px, 2.1875vw));
  border-top: 1px solid rgba(49,197,148,0.4);
  width: 100%;
}
.stats__grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, max(40px, 2.0833vw)) 0;
}

.stat {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 clamp(30px, 3.6vw, max(68px, 3.5417vw));
}

/* dividers sit between cells within a row, never at the start of one */
.stat + .stat { border-left: 1px solid rgba(49,197,148,0.32); }
.stat:nth-child(5n+1) { border-left: 0; padding-left: 0; }

.stat__value {
  font-size: clamp(34px, 3.6vw, max(60px, 3.125vw)); line-height: 1;
  letter-spacing: -0.05em; font-weight: 700; color: var(--mint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* the currency mark reads as a mark, not a numeral */
.stat__value .stat__pre { font-size: 0.55em; letter-spacing: -0.02em; }
.stat__label {
  margin-top: 13px; font-size: 11px; line-height: 1.4; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(246,244,239,0.86); font-weight: 700;
  white-space: nowrap;
}

/* --- IMAP band ---------------------------------------------------------- */
.imap { position: relative; overflow: hidden; background: var(--deep); }
.imap__still {
  position: absolute; left: 0; right: 0; top: -12%; width: 100%; height: 124%;
  object-fit: cover; object-position: 22% center;
  background-position: 22% center; background-size: cover; background-repeat: no-repeat;
  transform: scaleX(-1); will-change: transform;
  filter: grayscale(1) contrast(1.12) brightness(1.04);
  mix-blend-mode: soft-light; opacity: 0.9; pointer-events: none;
}
.imap__inner {
  position: relative; width: 100%; max-width: var(--shell); margin: 0 auto;
  padding: clamp(64px, 7vw, max(110px, 5.7292vw)) var(--gutter);
  display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; align-items: center;
}
.imap__cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(28px, 3vw, max(40px, 2.0833vw)); min-height: 52px; padding: 15px 28px;
  border: 1px solid rgba(246,244,239,0.4); color: var(--cream);
  font-size: 14px; font-weight: 700;
  transition: background-color .3s linear, border-color .3s linear, color .3s linear;
}
.imap__cta:hover { background: var(--cream); border-color: var(--cream); color: var(--deep); }
.imap__cta svg { display: block; }

/* --- sector tags -------------------------------------------------------- */

/* --- person card -------------------------------------------------------- */
.people { margin-top: clamp(30px, 3.4vw, max(52px, 2.7083vw)); }
.person {
  display: flex; flex-direction: column;
  background: #FFFFFF; border: 1px solid rgba(16,26,24,0.1);
  transition: border-color .3s linear, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .3s linear;
}
a.person:hover { border-color: rgba(15,107,68,0.32); transform: translateY(-4px); box-shadow: 0 18px 48px -30px rgba(0,62,58,0.45); }
.person__portrait {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--deep);
  display: grid; place-items: center;
}
.person__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.person__initials {
  font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; letter-spacing: -0.04em;
  color: rgba(246,244,239,0.55);
}
.person__ext {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center; width: 30px; height: 30px;
  background: rgba(0,49,46,0.72); color: var(--mint);
  transition: background-color .3s linear, color .3s linear;
}
.person__ext svg { display: block; }
a.person:hover .person__ext { background: var(--mint); color: var(--deep); }
.person__meta { padding: clamp(18px, 1.8vw, max(24px, 1.25vw)); display: flex; flex-direction: column; gap: 6px; }
.person__name { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.2; letter-spacing: -0.03em; font-weight: 700; color: var(--deep); }
.person__role { font-size: 14px; line-height: 1.5; color: var(--body); }
.person__qual { font-size: 0.72em; letter-spacing: 0.02em; color: var(--muted); font-weight: 700; }
.person__tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.person__tag {
  padding: 6px 10px; background: rgba(49,197,148,0.12);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--forest);
}
.people--short .person__portrait { aspect-ratio: 4 / 5; }
.people--short .person__meta { padding: clamp(16px, 1.5vw, max(20px, 1.0417vw)); }

/* --- topic blocks (alternating, hub + topic mode) ----------------------- */
.topic {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 68px); align-items: center;
}

.topic--flip .topic__media { order: -1; }
.topic__media { position: relative; aspect-ratio: 4 / 3; background: var(--cream-2); overflow: hidden; }
.topic__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
/* the image is the second hotspot for the topic, alongside Read more */
.topic__medialink { display: block; width: 100%; height: 100%; }
.topic__medialink:focus-visible { outline: 2px solid var(--mint); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) {
  .topic__media:hover img { transform: scale(1.03); }
}
.topic__body p { margin-top: 16px; max-width: 44ch; font-size: 16px; line-height: 1.8; color: var(--body); text-wrap: pretty; }

/* --- topic-page components ----------------------------------------------
   The expanded-topic slot takes .options (option cards). The numbered-stage
   and comparison-table variants were removed with the topic singles that
   used them. */

/* variant C — option cards */

.option {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.2vw, 32px);
  background: #FFFFFF; border: 1px solid rgba(16,26,24,0.12);
  transition: border-color .3s linear, transform .35s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) and (pointer: fine) {
  .option:hover { border-color: rgba(15,107,68,0.4); transform: translateY(-3px); }
}

/* --- FAQ accordion ------------------------------------------------------ */
.faq { margin-top: clamp(26px, 2.8vw, 40px); border-top: 1px solid rgba(16,26,24,0.16); }
.faq__row { border-bottom: 1px solid rgba(16,26,24,0.16); }
.faq__q {
  width: 100%; min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(12px, 1.4vw, max(20px, 1.0417vw));
  background: none; border: 0; padding: 20px 7px 20px 0; cursor: pointer;
  text-align: left; font-family: inherit;
  font-size: clamp(14px, 1.14vw, 17px); line-height: 1.35; letter-spacing: -0.025em;
  font-weight: 700; color: var(--deep);
  transition: color .3s linear;
}
.faq__q:hover { color: var(--green); }
.faq__q > span:first-child { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.faq__icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px;
  color: var(--mint); transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
.faq__icon svg { display: block; }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(135deg); }
.faq__panel {
  display: grid; grid-template-rows: 0px;
  transition: grid-template-rows .4s cubic-bezier(.22,.61,.36,1);
}
.faq__panel[data-open="1"] { grid-template-rows: auto; }
.faq__panel > div { overflow: hidden; min-height: 0; }
.faq__panel p {
  padding: 0 clamp(28px, 3vw, max(44px, 2.2917vw)) 24px 0;
  font-size: 16px; line-height: 1.8; color: var(--body); max-width: 68ch; text-wrap: pretty;
}

/* --- CTA band ----------------------------------------------------------- */
.cta { position: relative; overflow: hidden; background: var(--deeper); padding: var(--section-y) 0; }
.cta__media {
  position: absolute; inset: 0;
  background-color: var(--deeper);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: contrast(1.04) brightness(1.06); mix-blend-mode: luminosity; opacity: 0.85;
}
.cta__veil { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, rgba(0,49,46,0.34) 0%, rgba(0,42,39,0.6) 58%, rgba(0,34,32,0.88) 100%); }
.cta__veil-2 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,34,32,0.55) 0%, rgba(0,34,32,0) 22%, rgba(0,34,32,0) 78%, rgba(0,34,32,0.6) 100%); }
.cta__inner { position: relative; max-width: none; margin: 0; padding: 0; }
.cta__box { max-width: none; margin: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta__box .eyebrow { color: var(--mint); }
.cta__box h2 { margin-top: 18px; font-size: clamp(22px, 2.99vw, 42px); line-height: 1.08; letter-spacing: -0.04em; font-weight: 700; color: var(--cream); max-width: 22ch; text-wrap: balance; }
.cta__box p { margin-top: 20px; font-size: clamp(16px, 1.01vw, 19px); line-height: 1.75; color: rgba(246,244,239,0.8); max-width: 54ch; text-wrap: pretty; }
.cta__box .btn { margin-top: clamp(28px, 3vw, max(40px, 2.0833vw)); }

/* --- footer ------------------------------------------------------------- */
.footer { background: linear-gradient(180deg, var(--deeper) 0%, var(--deepest) 100%); padding: clamp(52px, 9vw, max(150px, 7.8125vw)) 0 0; }
.footer__inner { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.footer__logo { display: inline-flex; align-items: center; margin-bottom: clamp(28px, 4.4vw, max(68px, 3.5417vw)); }
.footer__logo img { display: block; width: clamp(150px, 13vw, max(192px, 10vw)); height: auto; filter: url(#almaInkLight); }
.footer__grid {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: clamp(34px, 3.6vw, max(60px, 3.125vw)) clamp(30px, 3.2vw, 64px);
}

.footer__col { flex: 0 1 auto; min-width: 0; }

.footer__label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mint); font-weight: 700; }
.footer__toggle {
  display: none; width: 100%; min-height: 50px;
  align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-family: inherit;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mint); font-weight: 700;
}

.footer__toggle-icon { flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; transition: transform .38s cubic-bezier(.22,.61,.36,1); }
.footer__toggle-icon svg { display: block; }
.footer__toggle[aria-expanded="true"] .footer__toggle-icon { transform: rotate(135deg); }
.footer__panel { display: grid; grid-template-rows: 1fr; }
.footer__panel > div { min-height: 0; }

.footer__links { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }

.footer__links a { font-size: 15px; line-height: 1.55; color: rgba(246,244,239,0.72); transition: color .3s linear; }

.footer__links a:hover { color: var(--mint); }
.footer__links a[aria-current="page"] { color: var(--mint); }

.footer__offices { flex: 0 1 auto; }

.footer__offices-grid { margin-top: 20px; display: flex; flex-wrap: wrap; gap: clamp(24px, 2.6vw, max(44px, 2.2917vw)); }
.footer__city { font-size: 15px; letter-spacing: -0.015em; color: var(--cream); font-weight: 700; }
.footer__addr { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.footer__addr p { font-size: 15px; line-height: 1.7; color: rgba(246,244,239,0.72); }
.footer__addr a { font-size: 15px; line-height: 1.55; color: var(--mint); transition: color .3s linear; }
.footer__addr a:hover { color: var(--cream); }
.footer__social { margin-top: clamp(28px, 2.6vw, max(40px, 2.0833vw)); }
.footer__social-row { margin-top: 16px; display: flex; align-items: center; gap: 22px; }
.footer__social-row a { font-size: 15px; line-height: 1.55; color: var(--cream); transition: color .3s linear; }
.footer__social-row a:hover { color: var(--mint); }

.footer__base {
  margin-top: clamp(40px, 5vw, max(80px, 4.1667vw));
  padding: clamp(22px, 2.4vw, max(32px, 1.6667vw)) 0 clamp(26px, 3vw, max(40px, 2.0833vw));
  border-top: 1px solid rgba(246,244,239,0.14);
  display: flex; flex-wrap: wrap; gap: 10px clamp(24px, 3vw, max(48px, 2.5vw));
  align-items: center; justify-content: space-between;
}

.footer__base p { font-size: 14px; line-height: 1.6; color: rgba(246,244,239,0.72); }
.footer__base a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .3s linear; }
.footer__base a:hover { color: var(--cream); }

/* --- back to top -------------------------------------------------------- */
.to-top {
  position: fixed; right: clamp(16px, 2.4vw, max(32px, 1.6667vw)); bottom: clamp(16px, 2.4vw, max(32px, 1.6667vw));
  z-index: 60; width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--mint); color: var(--deep); border: 1px solid var(--mint);
  border-radius: 50%; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s linear, transform .3s linear, background-color .3s linear, border-color .3s linear;
}
.to-top[data-visible="1"] { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--cream); border-color: var(--cream); }
.to-top svg { display: block; }

/* --- skip link ---------------------------------------------------------- */
.skip { position: absolute; left: -9999px; top: 0; padding: 12px 18px; background: var(--deep); color: var(--cream); z-index: 200; }
.skip:focus { left: 12px; top: 12px; }

/* --- touch and motion --------------------------------------------------- */
@media (hover: none) {
  a:hover, button:hover, .card:hover, a.card:hover, a.person:hover { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --- resolution type tiers ---------------------------------------------
   1920 keeps the base sizes. 2K and 4K step up once each so copy holds its
   proportion in the wider container. Discrete steps, never continuous vw. */

/* --- mega links on laptops ----------------------------------------------
   The panels are inline-styled by js/site.js, so the override needs
   !important. Four columns are too tight below 1280. */

/* alternating full-bleed tint bands (topic track) */
.band { padding: clamp(48px, 5.4vw, 88px) 0; }
.band--white { background: #FFFFFF; }
.band--cream { background: var(--cream); }

/* --- pre-hydration baseline ---------------------------------------------
   site.js styles the header entirely from JS. Before it runs, first paint
   must already match its resting state, or the header renders in flow with
   every dropdown link visible and then animates into place. */
[data-alma-header] {
  position: fixed; top: 0; left: 0; right: 0; z-index: 130;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 -1px 0 rgba(246,244,239,0.16);
}
[data-alma-header] [data-el="inner"] {
  max-width: var(--shell); margin: 0 auto;
  display: flex; align-items: center;
  gap: clamp(16px, 3vw, max(40px, 2.0833vw));
  padding: clamp(14px, 1.3vw, max(20px, 1.0417vw)) var(--gutter);
}
[data-alma-header] [data-el="logoimg"] { display: block; width: clamp(158px, 13.6vw, 204px); height: auto; }
[data-alma-header] [data-el="back"] { display: none; }
html:not([data-alma-ready]) [id^="mega-"],
html:not([data-alma-ready]) [data-el="scrim"],
html:not([data-alma-ready]) [data-el="mobile"] { opacity: 0; visibility: hidden; pointer-events: none; }
html:not([data-alma-ready]) [data-alma-header],
html:not([data-alma-ready]) [data-alma-header] * { transition: none !important; }
/* every header child except the logo is JS-styled — keep them out of the
   first paint so no raw buttons or link lists flash before hydration */
html:not([data-alma-ready]) [data-alma-header] [data-el="inner"] > *:not([data-el="logo"]) { visibility: hidden; }
html:not([data-alma-ready]) [data-alma-header] [data-el="inner"] { min-height: 63px; }

/* --- filter bar --------------------------------------------------------- */
.filterbar .drop { flex: 0 0 auto; }
.filterbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
}
.filterbar .results-count { margin-left: auto; }
.filterbar [data-tx-clear] { flex: 0 0 auto; }

/* --- sticky filter bar ---------------------------------------------------
   The listing is long, so the filters follow the reader down. It parks under
   the fixed header (site.js keeps --alma-head-rest current) and carries its
   own white field plus a hairline, so tombstones scroll cleanly beneath it.
   Offset from --alma-head (the live height, which follows the shrink), never
   --alma-head-rest (the taller resting height).
   Static below 700px: there the bar wraps to two rows and would eat the
   viewport it is meant to help you read. */

.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 11px 18px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--body); background: transparent; border: 1px solid rgba(16,26,24,0.2);
  transition: color .25s linear, border-color .25s linear, background-color .25s linear;
}
.chip:hover { color: var(--deep); border-color: var(--deep); }
.chip[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--cream); }

.drop { position: relative; }

/* the trigger reads as a labelled field: quiet label, value in brand green */
.drop__btn {
  display: inline-flex; align-items: center; gap: 14px;
  position: relative; min-height: 56px; min-width: 288px; padding: 8px 18px; cursor: pointer;
  font-family: inherit; text-align: left;
  color: var(--body); background: #FFFFFF;
  border: 1px solid rgba(16,26,24,0.2);
  transition: border-color .25s linear, box-shadow .25s linear, background-color .25s linear;
}
.drop__btn > span:first-child {
  display: block; min-width: 0;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--deep);
}
.drop__btn::before {
  content: attr(data-label);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--eyebrow); font-weight: 700;
  position: absolute; top: 10px; left: 19px; pointer-events: none;
}
.drop__btn [data-drop-text] { display: block; margin-top: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop__btn svg { flex: 0 0 auto; margin-left: auto; color: var(--forest); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) and (pointer: fine) {
  .drop__btn:hover { border-color: rgba(0,62,58,0.55); }
}
.drop__btn:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.drop__btn[aria-expanded="true"] {
  border-color: var(--deep);
  box-shadow: 0 14px 34px -22px rgba(0,62,58,0.5);
}
.drop__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* an applied filter is legible without opening the menu */
.drop__btn[data-active="1"] { border-color: var(--deep); box-shadow: inset 3px 0 0 0 var(--forest); }
.drop__btn[data-active="1"] [data-drop-text] { color: var(--forest); }

.drop__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
  min-width: 288px; max-height: 340px; overflow-y: auto;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid rgba(16,26,24,0.14);
  box-shadow: 0 30px 60px -32px rgba(0,20,18,0.55);
  display: flex; flex-direction: column;
  animation: dropIn .22s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .drop__panel { animation: none; } }
.drop__panel[hidden] { display: none; }

.drop__opt {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  text-align: left; min-height: 44px; padding: 11px 12px 11px 34px; cursor: pointer;
  font-family: inherit; font-size: 14px; letter-spacing: -0.01em;
  color: var(--body); background: transparent; border: 0;
  transition: background-color .18s linear, color .18s linear;
}
.drop__opt + .drop__opt { box-shadow: inset 0 1px 0 0 rgba(16,26,24,0.07); }
@media (hover: hover) and (pointer: fine) {
  .drop__opt:hover { background: var(--mint-wash); color: var(--deep); }
}
.drop__opt:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; }
.drop__opt[aria-pressed="true"] { color: var(--deep); font-weight: 700; background: var(--mint-wash); }
/* tick sits in the gutter, so labels stay aligned whatever the state */
.drop__opt::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px;
  margin-top: -7px;
  opacity: 0; transform: scale(.7);
  transition: opacity .18s linear, transform .22s cubic-bezier(.22,.61,.36,1);
}
.drop__opt[aria-pressed="true"]::before { opacity: 1; transform: none; }

.search {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px; min-width: 260px;
  background: #FFFFFF; border: 1px solid rgba(16,26,24,0.2);
  transition: border-color .25s linear;
}
.search:focus-within { border-color: var(--deep); }
.search input {
  flex: 1 1 0; min-width: 0; border: 0; background: none; outline: none;
  font-family: inherit; font-size: 13px; letter-spacing: -0.01em; color: var(--deep);
  padding: 11px 0;
}
.search input::placeholder { color: var(--muted-deep); }
.search svg { flex: 0 0 auto; color: var(--eyebrow); }

.results-bar {
  margin-top: clamp(26px, 2.8vw, 42px); padding-top: 20px;
  border-top: 1px solid rgba(16,26,24,0.16);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px;
}
.results-count { font-size: 14px; letter-spacing: -0.01em; color: var(--body); font-variant-numeric: tabular-nums; }
.results-count b { color: var(--deep); }

/* --- transaction cards (verbatim from the homepage rail) ---------------- */
.tombs { grid-auto-flow: row; grid-auto-rows: auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(16px, 1.6vw, max(24px, 1.25vw));
  row-gap: clamp(34px, 3.4vw, max(52px, 2.7083vw));
}

.tomb {
  background: transparent; display: flex; flex-direction: column;
  text-decoration: none; transition: transform .4s linear;
 
 
}
.tomb[hidden] { display: none; }
.tomb__crop { overflow: hidden; }
.tomb__tile {
  position: relative; display: flex; flex-direction: column;
  aspect-ratio: 4 / 3;
  padding: clamp(18px, 1.6vw, max(24px, 1.25vw));
  transition: transform .5s linear;
  background-color: #0B2B28;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.tomb__tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,49,46,0.6) 0%, rgba(0,49,46,0.22) 55%, rgba(0,49,46,0.66) 100%);
  transition: opacity .4s linear;
}
.tomb__ind {
  margin-top: 18px; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #5A6560; font-weight: 700;
}
.tomb__mark {
  margin-top: 10px; font-size: clamp(17px, 1.5vw, 24px); line-height: 1.15;
  letter-spacing: -0.03em; font-weight: 700; color: #003E3A;
}
.tomb__mark--conf { color: #5C6B66; }
.tomb__line { margin-top: 10px; font-size: 15px; line-height: 1.65; color: #3A4744; flex: 1; }
.tomb__cta {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; color: #003E3A; transition: color .3s linear;
}
.tomb__cta span { color: #31C594; display: grid; place-items: center; }
.tomb__cta svg { display: block; }

@media (hover: hover) and (pointer: fine) {
  .tomb:hover { transform: translateY(-6px); }
  .tomb:hover .tomb__tile { transform: scale(1.06); }
  .tomb:hover .tomb__tile::after { opacity: 0.72; }
  .tomb:hover .tomb__cta { color: #198757; }
}
.tomb:focus-visible { outline: 2px solid #198757; outline-offset: 4px; }

.empty { padding: clamp(40px, 5vw, 72px) clamp(20px, 2vw, 30px); background: #FFFFFF; text-align: center; }
.empty p { font-size: 16px; line-height: 1.7; color: var(--body); }
.empty[hidden] { display: none; }

.arts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 26px);
}

.art {
  position: relative; display: flex; flex-direction: column;
  background: var(--cream); border: 1px solid rgba(16,26,24,0.08);
  text-decoration: none;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s linear, border-color .35s linear;
}
.art:hover { transform: translateY(-6px); box-shadow: 0 34px 52px -32px rgba(0,62,58,0.45); border-color: rgba(15,107,68,0.3); }
.art[hidden] { display: none; }

.art__crop { position: relative; overflow: hidden; }
.art__tile {
  display: block; aspect-ratio: 3 / 2;
  background-color: #DCD8CE; background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.art:hover .art__tile { transform: scale(1.05); }
.art__tag {
  position: absolute; top: 14px; left: 14px;
  padding: 7px 12px; background: rgba(246,244,239,0.94); color: var(--forest);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
}

.art__body {
  padding: clamp(26px, 2.2vw, max(36px, 1.875vw)) clamp(26px, 2.2vw, max(36px, 1.875vw)) 0;
  display: flex; flex-direction: column; flex: 1;
}
.art__title {
  margin: 0; display: block;
  font-size: clamp(16px, 1.32vw, 19px); line-height: 1.3;
  letter-spacing: -0.03em; font-weight: 700; color: var(--deep); text-wrap: pretty;
}
.art__excerpt { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--body); flex: 1; }

.art__foot {
  margin: clamp(22px, 2vw, max(30px, 1.5625vw)) clamp(26px, 2.2vw, max(36px, 1.875vw)) 0;
  padding: 16px 0 clamp(22px, 2vw, max(30px, 1.5625vw));
  border-top: 1px solid rgba(16,26,24,0.1);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.art__meta { font-size: 12px; letter-spacing: 0.06em; color: var(--eyebrow); font-weight: 600; }
.art__read {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--deep); transition: color .3s linear;
}
.art:hover .art__read { color: var(--green); }
.art__read span { color: var(--mint); display: grid; place-items: center; }

/* --- pagination --------------------------------------------------------- */
.pager { margin-top: clamp(30px, 3.2vw, 48px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pager__link, .pager__cur {
  min-width: 44px; min-height: 44px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none;
  border: 1px solid rgba(16,26,24,0.2); color: var(--body);
  transition: color .25s linear, border-color .25s linear, background-color .25s linear;
}
.pager__link:hover { color: var(--deep); border-color: var(--deep); }
.pager__cur { background: var(--deep); border-color: var(--deep); color: var(--cream); }
.pager__spacer { flex: 1 1 auto; }

/* --- mega-menu links ----------------------------------------------------
   Styled here rather than from site.js so :hover is not outgunned by an
   inline style. site.js sets only opacity/transform/transition-delay. */
[data-megalink] {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; font-size: 15px; font-weight: 500; color: #101A18;
  text-decoration: none;
  border-bottom: 1px solid rgba(16,26,24,0.08);
  transition: color .3s linear, border-color .3s linear, padding .34s cubic-bezier(.22,.61,.36,1),
              opacity .3s linear, transform .3s linear;
}
/* mint rule that wipes in from the left */
[data-megalink]::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--mint);
  transition: width .38s cubic-bezier(.22,.61,.36,1);
}
[data-megalink] svg { transition: transform .34s cubic-bezier(.22,.61,.36,1); }
[data-megalink] > span:last-child { transition: opacity .3s linear; opacity: 0.55; }

@media (hover: hover) and (pointer: fine) {
  [data-megalink]:hover { color: var(--forest); padding-left: 12px; }
  [data-megalink]:hover::before { width: 100%; }
  [data-megalink]:hover svg { transform: translateX(4px); }
  [data-megalink]:hover > span:last-child { opacity: 1; }
}
[data-megalink]:focus-visible { color: var(--forest); padding-left: 12px; outline-offset: 4px; }
[data-megalink]:focus-visible::before { width: 100%; }
[data-megalink][aria-current="page"] { color: var(--forest); }
[data-megalink][aria-current="page"]::before { width: 100%; background: rgba(49,197,148,0.5); }

/* --- article detail ------------------------------------------------------ */
.artdoc { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1120px; margin: 0 auto; }

/* share and back, closing the article */
.artend {
  margin-top: clamp(38px, 4vw, 62px); padding-top: clamp(24px, 2.6vw, 36px);
  border-top: 1px solid rgba(16,26,24,0.16);
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 22px;
}
.artend__share { position: relative; display: flex; flex-direction: column; gap: 12px; }
.artend__btns { display: flex; gap: 10px; }
.rail__label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--eyebrow); font-weight: 700;
}
.rail__btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  color: var(--deep); background: transparent;
  border: 1px solid rgba(16,26,24,0.18); cursor: pointer;
  transition: background-color .25s linear, border-color .25s linear, color .25s linear;
}
@media (hover: hover) and (pointer: fine) {
  .rail__btn:hover { background: var(--deep); border-color: var(--deep); color: var(--cream); }
}
.rail__btn:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

/* the centred column governs the measure */
.artbody { max-width: none; }
.artbody p { max-width: 88ch; font-size: 18px; line-height: 1.8; color: var(--body); text-wrap: pretty; }
.artbody p + p { margin-top: 20px; }
.artbody h2 {
  margin: clamp(38px, 4vw, 62px) 0 16px;
  font-size: clamp(21px, 2vw, 30px); line-height: 1.16;
  letter-spacing: -0.038em; font-weight: 700; color: var(--deep); text-wrap: balance;
}
.artbody h3 {
  margin: clamp(28px, 3vw, 44px) 0 12px;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.25;
  letter-spacing: -0.03em; font-weight: 700; color: var(--deep);
}
.artbody ul { margin-top: 18px; padding-left: 22px; }
.artbody li { max-width: 88ch; font-size: 18px; line-height: 1.75; color: var(--body); }
.artbody li + li { margin-top: 10px; }
.artbody a:not(.btn):not(.link-rule) { color: var(--forest); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* --- article head: copy left, featured image right --------------------- */
.page-head__inner.arthero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
  gap: clamp(30px, 3.6vw, max(72px, 3.75vw));
  align-items: center;
}

.arthero__copy { display: flex; flex-direction: column; }
.page-head:has(.arthero) {
  padding-top: calc(var(--alma-head-rest, 62px) + clamp(52px, 4.6vw, max(72px, 3.75vw)));
  padding-bottom: clamp(32px, 3.4vw, max(52px, 2.7083vw));
}

.arthero__media { margin: 0; }
.arthero__crop {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background: rgba(0,34,32,0.55);
}
.arthero__crop img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- quoted statements inside article prose ----------------------------- */
.prose blockquote {
  margin: clamp(26px, 2.8vw, 40px) 0;
  padding-left: clamp(20px, 2.2vw, 32px);
  border-left: 2px solid var(--mint);
}
.prose blockquote p {
  font-size: clamp(17px, 1.25vw, 20px); line-height: 1.65;
  letter-spacing: -0.015em; color: var(--deep); text-wrap: pretty;
}
.prose blockquote p + p { margin-top: 14px; }

/* --- gated report download --------------------------------------------- */
.gate {
  margin-top: clamp(22px, 2.4vw, 32px);
  padding: clamp(26px, 2.8vw, 42px);
  background: var(--mint-wash); border: 1px solid rgba(16,26,24,0.1);
}
.gate__label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--eyebrow); font-weight: 700;
}
.gate__title {
  margin-top: 12px;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2;
  letter-spacing: -0.035em; font-weight: 700; color: var(--deep);
}
.gate__meta {
  margin-top: 10px; font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--eyebrow); font-weight: 700;
}
.gate__error {
  margin-top: clamp(12px, 1.4vw, 16px);
  font-size: 14px; line-height: 1.6; font-weight: 700; color: #8A2B22;
}
.gate__error[hidden], .gate__done[hidden] { display: none; }
.gate__done {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: 16px; line-height: 1.7; color: var(--deep); font-weight: 700;
}
.gate__done .link-rule { margin-left: 6px; }
.gate__field input[aria-invalid="true"] { border-color: #8A2B22; }
.gate__note {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: 14px; line-height: 1.6; color: var(--body); max-width: 60ch;
}
.gate__form { position: relative; margin-top: clamp(20px, 2.2vw, 30px); max-width: 560px; }
.gate__field { position: relative; display: flex; flex-direction: column; gap: 9px; }
.gate__field > span {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--eyebrow); font-weight: 700;
}
.gate__field abbr { color: var(--forest); text-decoration: none; }
.gate__field input {
  min-height: 60px; padding: 12px 228px 12px 18px;
  font-family: inherit; font-size: 15px; color: var(--near-black);
  background: #FFFFFF; border: 1px solid rgba(16,26,24,0.22);
  transition: border-color .25s linear;
}
.gate__field input::placeholder { color: var(--muted); }
.gate__field input:focus { outline: 0; border-color: var(--forest); }
.gate__form .btn {
  position: absolute; right: 5px; bottom: 5px;
  min-height: 50px; padding: 12px 20px; font-size: 14px;
}
.gate__form .btn svg { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.gate__form .btn:hover { transform: none; }
.gate__form .btn:hover svg { transform: translateY(2px); }

/* --- report library ----------------------------------------------------- */

.rep__sector {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--forest); font-weight: 700;
}

/* report library — a single list, one row per report */
.shelflist { border-top: 1px solid rgba(16,26,24,0.16); }
.repline {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 200px 176px;
  gap: clamp(18px, 2vw, 34px); align-items: center;
  padding: clamp(20px, 2vw, 28px) 0;
  border-bottom: 1px solid rgba(16,26,24,0.14);
  text-decoration: none; transition: background-color .25s linear;
}
.repline:hover { background: rgba(255,255,255,0.6); }
.repline[hidden] { display: none; }

.repline__cover {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--cream-2); border: 1px solid rgba(16,26,24,0.16);
}
.repline__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* sectors with no photography yet — brand field rather than a misleading image */
.repline__field {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--deep); color: rgba(49,197,148,0.9);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
}
.rep__sector {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--forest); font-weight: 700;
}
.repline__main { display: block; min-width: 0; }
.repline__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.repline__flag {
  padding: 4px 9px; background: var(--forest); color: var(--cream);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
}
.repline__title {
  display: block; margin-top: 8px;
  font-size: clamp(17px, 1.35vw, 21px); line-height: 1.24;
  letter-spacing: -0.03em; font-weight: 700; color: var(--deep); text-wrap: pretty;
}
.repline__desc {
  display: block; margin-top: 8px;
  font-size: 15px; line-height: 1.6; color: var(--body); text-wrap: pretty;
}
.repline__meta {
  display: flex; flex-wrap: wrap; gap: 4px 9px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-deep); font-weight: 700; font-variant-numeric: tabular-nums;
}
.repline__meta span:not(:last-child)::after { content: " ·"; }
.repline__cta { display: flex; justify-content: flex-end; }

.repline__cta > span {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 13px 22px;
  background: transparent; border: 1px solid var(--deep); color: var(--deep);
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  transition: background-color .25s linear, border-color .25s linear, color .25s linear;
}
.repline__cta svg { display: block; flex: 0 0 auto; transition: transform .25s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) and (pointer: fine) {
  .repline:hover .repline__cta > span { background: var(--deep); color: var(--cream); }
  .repline:hover .repline__cta svg { transform: translateX(3px); }
}

/* --- report detail ------------------------------------------------------ */
.rmeta {
  margin-top: clamp(16px, 1.8vw, 22px);
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(246,244,239,0.72); font-weight: 700;
}
.rmeta span:not(:last-child)::after { content: " ·"; }

/* what is inside */
.chapters {
  list-style: none; margin-top: clamp(22px, 2.4vw, 32px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 2.6vw, 44px);
}

.chapter {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px; align-items: start;
  padding: clamp(16px, 1.7vw, 22px) 0;
  border-top: 1px solid rgba(16,26,24,0.14);
}
/* the top rule opens each column, so both columns start level */

.chapter__n {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: var(--mint-wash); color: var(--forest);
  font-size: 12px; letter-spacing: 0.04em; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chapter__body { display: grid; gap: 7px; padding-top: 4px; }
.chapter__label {
  font-size: clamp(16px, 1.25vw, 18px); line-height: 1.25;
  letter-spacing: -0.03em; font-weight: 700; color: var(--deep);
}
.chapter__sum { font-size: 14px; line-height: 1.6; color: var(--body); text-wrap: pretty; }

/* the stat strip gains a reading line under each figure */

/* extract */

/* download block */

/* three related cards rather than four */
.arts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* key findings — one card per figure */
.findings {
  margin-top: clamp(22px, 2.4vw, 32px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
}

.finding {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--cream);
  border-top: 2px solid var(--forest);
}
.artbody .finding__fig, .finding__fig {
  max-width: none; font-size: clamp(32px, 3vw, 46px); line-height: 1;
  letter-spacing: -0.045em; font-weight: 700; color: var(--forest);
  font-variant-numeric: tabular-nums;
}
.artbody .finding__label, .finding__label {
  max-width: none; margin-top: 14px; font-size: 11px; line-height: 1.45; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--eyebrow); font-weight: 700;
}
.artbody .finding__read, .finding__read {
  max-width: none; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(16,26,24,0.14);
  font-size: 14px; line-height: 1.6; color: var(--body); text-wrap: pretty;
}

/* --- contact ------------------------------------------------------------ */
.cgrid {
  display: grid; grid-template-columns: 3fr minmax(0, 1fr);
  gap: clamp(32px, 4vw, 88px); align-items: start;
}

.cform { margin-top: clamp(26px, 2.8vw, 40px); display: grid; gap: clamp(18px, 2vw, 24px); max-width: 760px; }
/* Floating labels: the label sits inside the field and rises on focus or
   when filled. The markup keeps real <label for> elements — this is
   presentation only, never placeholder-as-label. Fields carry a blank
   placeholder so :placeholder-shown reports emptiness. */
.cfield { position: relative; }
.cfield__label {
  position: absolute; left: 18px; top: 18px; z-index: 1;
  transform-origin: left top; pointer-events: none;
  font-size: 16px; letter-spacing: -0.01em; color: var(--muted-deep); font-weight: 400;
  transition: transform .18s cubic-bezier(.22,.61,.36,1), color .18s linear;
  max-width: calc(100% - 36px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cfield__label abbr { color: var(--forest); text-decoration: none; }
.cfield__opt { color: var(--muted); font-weight: 400; }

.cfield__input {
  width: 100%; min-height: 62px; padding: 26px 18px 10px;
  font-family: inherit; font-size: 16px; color: var(--near-black);
  background: #FFFFFF; border: 1px solid rgba(16,26,24,0.22);
  transition: border-color .25s linear, box-shadow .25s linear;
}
textarea.cfield__input { min-height: 156px; resize: vertical; line-height: 1.65; padding-top: 28px; }
.cfield__input::placeholder { color: transparent; }
/* a genuine format hint shows once the label has floated out of the way */
.cfield:has(.cfield__input:focus) .cfield__input::placeholder { color: var(--muted); }
.cfield__input:hover { border-color: rgba(16,26,24,0.36); }
.cfield__input:focus {
  outline: 0; border-color: var(--forest);
  box-shadow: inset 0 -2px 0 0 var(--forest);
}
.cfield__input[aria-invalid="true"] { border-color: #8A2B22; }

/* the raised state — focused, filled, or a control that is never empty */
.cfield:has(.cfield__input:focus) .cfield__label,
.cfield:has(.cfield__input:not(:placeholder-shown)) .cfield__label,
.cfield:has(select) .cfield__label,
.cfield--file .cfield__label {
  transform: translateY(-11px) scale(0.68);
  color: var(--eyebrow); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.cfield:has(.cfield__input:focus) .cfield__label { color: var(--forest); }
.cfield:has(.cfield__input[aria-invalid="true"]) .cfield__label { color: #8A2B22; }
/* no :has — labels stay raised, which is legible if less lively */
@supports not selector(:has(*)) {
  .cfield__label {
    transform: translateY(-11px) scale(0.68);
    color: var(--eyebrow); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  }
}

.cfield__err { margin-top: 8px; font-size: 13px; line-height: 1.5; font-weight: 700; color: #8A2B22; }
.cfield__err[hidden] { display: none; }
.cfield__hint { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--muted-deep); }

/* honeypot: out of sight and out of the tab order */
.cform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(18px, 2vw, 26px); }
.cform__note { font-size: 13px; line-height: 1.6; color: var(--muted-deep); }
.cform__error {
  padding: 14px 16px; background: rgba(138,43,34,0.07);
  border-left: 3px solid #8A2B22;
  font-size: 14px; line-height: 1.6; font-weight: 700; color: #8A2B22;
}
.cform__error[hidden], .cform__done[hidden] { display: none; }
.cform__done {
  margin-top: clamp(26px, 2.8vw, 40px);
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--mint-wash);
  font-size: 17px; line-height: 1.7; color: var(--deep); font-weight: 700;
  max-width: 760px;
}

/* direct contact */
.direct { border-top: 2px solid var(--deep); padding-top: clamp(22px, 2.4vw, 30px); }
.direct__h {
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2;
  letter-spacing: -0.035em; font-weight: 700; color: var(--deep);
}
.pcard { padding: clamp(18px, 1.8vw, 24px) 0; border-bottom: 1px solid rgba(16,26,24,0.14); }
.pcard:first-of-type { margin-top: clamp(10px, 1.2vw, 16px); border-top: 1px solid rgba(16,26,24,0.14); }
.pcard__name { font-size: 17px; line-height: 1.2; letter-spacing: -0.03em; font-weight: 700; color: var(--deep); }
.pcard__role { margin-top: 5px; font-size: 13px; letter-spacing: 0.02em; color: var(--muted-deep); font-weight: 700; }
.pcard__row { margin-top: 9px; font-size: 15px; line-height: 1.5; }
.pcard__row a { color: var(--forest); text-decoration: none; border-bottom: 1px solid rgba(15,107,68,0.3); }
.pcard__row a:hover { border-bottom-color: var(--forest); }
.direct__conf {
  margin-top: clamp(20px, 2.2vw, 28px);
  font-size: 14px; line-height: 1.7; color: var(--body);
}

/* offices */
.offices {
  margin-top: clamp(26px, 2.8vw, 42px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
}

.office { background: #FFFFFF; border: 1px solid rgba(16,26,24,0.1); display: flex; flex-direction: column; }
/* CMS: replace with a static map export; the field keeps the block honest until then */
.office__map {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--cream-2);
}
.office__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.office__body { padding: clamp(22px, 2.2vw, 32px); }
.office__city { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.15; letter-spacing: -0.04em; font-weight: 700; color: var(--deep); }
.office__country { margin-top: 6px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--eyebrow); font-weight: 700; }
.office__row { margin-top: 8px; font-size: 15px; line-height: 1.6; }
.office__row:first-of-type { margin-top: clamp(16px, 1.8vw, 22px); }
.office__row a { color: var(--forest); text-decoration: none; border-bottom: 1px solid rgba(15,107,68,0.3); }
.office__row a:hover { border-bottom-color: var(--forest); }

/* what happens next */
.steps {
  list-style: none; margin-top: clamp(26px, 2.8vw, 42px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}

.step { display: grid; gap: 14px; padding-top: clamp(16px, 1.8vw, 22px); border-top: 2px solid var(--forest); }
.step__n { font-size: 12px; letter-spacing: 0.1em; font-weight: 700; color: var(--forest); font-variant-numeric: tabular-nums; }
.step__body { display: grid; gap: 8px; }
.step__label { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.2; letter-spacing: -0.03em; font-weight: 700; color: var(--deep); }
.step__detail { font-size: 14px; line-height: 1.65; color: var(--body); text-wrap: pretty; }

/* --- header CTA ---------------------------------------------------------
   Styled here, not from site.js, so :hover is not outgunned by an inline
   style. The fill wipes in from the left in both header states. */
[data-alma-header] [data-el="cta"] {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; flex: 0 0 auto;
  min-height: 46px; padding: 12px clamp(18px, 2.4vw, max(38px, 1.9792vw));
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  text-decoration: none;
  transition: color .32s linear, border-color .32s linear, background-color .32s linear;
}
[data-alma-header] [data-el="cta"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .44s cubic-bezier(.22,.61,.36,1);
}
[data-alma-header] [data-el="cta"]:focus-visible { outline: 2px solid #31C594; outline-offset: 3px; }

/* over the hero: outlined, fills cream */
[data-alma-header][data-over-hero="1"] [data-el="cta"] {
  background: transparent; color: #F6F4EF; border: 1px solid rgba(246,244,239,0.5);
}
[data-alma-header][data-over-hero="1"] [data-el="cta"]::before { background: #F6F4EF; }

/* scrolled: solid green, deepens to forest */
[data-alma-header][data-over-hero="0"] [data-el="cta"] {
  background: #003E3A; color: #F6F4EF; border: 1px solid #003E3A;
}
[data-alma-header][data-over-hero="0"] [data-el="cta"]::before { background: #0F6B44; }

@media (hover: hover) and (pointer: fine) {
  [data-alma-header] [data-el="cta"]:hover::before { transform: scaleX(1); }
  [data-alma-header][data-over-hero="1"] [data-el="cta"]:hover { color: #003E3A !important; border-color: #F6F4EF !important; }
  [data-alma-header][data-over-hero="0"] [data-el="cta"]:hover { color: #F6F4EF !important; border-color: #0F6B44 !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-alma-header] [data-el="cta"]::before { transition: none; }
}

/* --- responsive corrections ---------------------------------------------
   The filter fields carry a 288px floor so they read as form controls on
   desktop. That floor overflows a phone, so below the laptop tier they share
   the row, and on phones they take it outright. */

/* breadcrumbs wrap rather than push the page wide */
.crumbs__inner { flex-wrap: wrap; row-gap: 4px; }

/* the contact form and its confirmation follow the column, not a fixed cap */

/* tap targets on the pager and filter options never fall below 44px */

/* long words in headings must not force a scrollbar on narrow phones */

/* --- touch targets -------------------------------------------------------
   Contact links sit at 19px to keep the cards tight on desktop. On a touch
   device that is well under the 44px minimum, so the hit area grows there
   without changing the type size. */

/* --- page loader ---------------------------------------------------------
   The wordmark is drawn left to right, then the overlay lifts. Driven purely
   by CSS animation with fill-mode forwards, so it can never trap the page if
   scripts fail. Reduced-motion users get a still logo and a short fade. */
html[data-loaded="1"] .loader { display: none; }
.loader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  /* deep-green gradient from the palette: #002220 → #003E3A → #00312E */
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(15,107,68,0.34) 0%, rgba(15,107,68,0) 60%),
    linear-gradient(158deg, #002220 0%, #003E3A 48%, #00312E 100%);
  will-change: opacity;
  animation: loaderOut .5s cubic-bezier(.4,0,.2,1) .72s forwards;
}
/* a soft mint bloom behind the mark, breathing under the wordmark */
.loader::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 44% at 50% 50%, rgba(49,197,148,0.22) 0%, rgba(49,197,148,0) 68%);
  animation: loaderBreathe 2.1s ease-in-out infinite;
}
.loader__mark {
  width: clamp(180px, 26vw, 320px); height: auto; display: block;
  opacity: 0;
  filter: brightness(0) invert(1);
  animation: loaderFade .95s cubic-bezier(.33,0,.25,1) .05s forwards;
}
/* the mark fades up, holds, then fades away with the overlay */
@keyframes loaderFade {
  0%   { opacity: 0; transform: scale(.985); }
  38%  { opacity: 1; transform: scale(1); }
  74%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.012); }
}
@keyframes loaderBreathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .68; transform: scale(1.03); }
}
@keyframes loaderOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }
/* progress track under the wordmark; the fill runs with the write */
.loader__rule {
  position: absolute; top: calc(50% + clamp(30px, 4vw, 46px));
  height: 2px; background: rgba(246,244,239,0.18);
  width: clamp(180px, 26vw, 320px);
  overflow: hidden;
}
.loader__rule::after {
  content: ""; position: absolute; inset: 0;
  background: var(--mint, #31C594);
  transform: scaleX(0); transform-origin: left center;
  animation: loaderRule 1.05s cubic-bezier(.22,.61,.36,1) .05s forwards;
}
@keyframes loaderRule {
  0%   { transform: scaleX(0); }
  55%  { transform: scaleX(.62); }
  100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .loader { animation: loaderOut .3s linear .5s forwards; }
  .loader::before { animation: none; }
  .loader__mark { opacity: 1; animation: none; filter: brightness(0) invert(1); }
  .loader__rule::after { animation: none; transform: scaleX(1); }
}

/* --- careers ------------------------------------------------------------ */
.measure--wide { max-width: none; }

/* what it is like here: a numbered rail beside each block, so the four read
   as a sequence rather than as four equal tiles */
.cultures { margin-top: clamp(30px, 3.2vw, 50px); display: grid; gap: 0; }
.culture {
  display: grid; grid-template-columns: clamp(64px, 7vw, 108px) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  padding: clamp(24px, 2.8vw, 40px) 0;
  border-top: 1px solid rgba(16,26,24,0.14);
}
.culture:last-child { border-bottom: 1px solid rgba(16,26,24,0.14); }

.culture__rail { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.culture__n {
  font-size: clamp(24px, 2.2vw, 34px); line-height: 1;
  letter-spacing: -0.05em; font-weight: 700; color: var(--forest);
  font-variant-numeric: tabular-nums;
}
.culture__line { display: block; width: 28px; height: 2px; background: var(--mint); }

.culture__body { display: grid; gap: 12px; }
.culture__h {
  font-size: clamp(19px, 1.7vw, 26px); line-height: 1.16;
  letter-spacing: -0.04em; font-weight: 700; color: var(--deep);
  max-width: 30ch; text-wrap: balance;
}
.culture__p {
  max-width: 64ch;
  font-size: 16px; line-height: 1.75; color: var(--body); text-wrap: pretty;
}

/* how we hire: four steps along a single connected line */
.hsteps {
  list-style: none; margin-top: clamp(34px, 3.6vw, 56px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 34px);
}

.hstep { position: relative; display: grid; gap: 0; }
.hstep__track { position: relative; height: 2px; background: rgba(16,26,24,0.14); }
.hstep__dot {
  position: absolute; left: 0; top: 50%;
  width: 11px; height: 11px; margin-top: -5.5px;
  border-radius: 50%; background: var(--mint);
}
.hstep__n {
  margin-top: clamp(18px, 2vw, 26px);
  font-size: 11px; letter-spacing: 0.16em; font-weight: 700;
  color: var(--forest); font-variant-numeric: tabular-nums;
}
.hstep__label {
  margin-top: 10px;
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.2;
  letter-spacing: -0.035em; font-weight: 700; color: var(--deep);
  text-wrap: balance;
}
.hstep__when {
  margin-top: 8px; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--eyebrow); font-weight: 700;
}
.hstep__detail {
  margin-top: 12px; font-size: 15px; line-height: 1.7;
  color: var(--body); text-wrap: pretty;
}

/* open roles */
.roles { margin-top: clamp(26px, 2.8vw, 42px); display: grid; gap: clamp(14px, 1.4vw, 20px); }
.role { background: #FFFFFF; border: 1px solid rgba(16,26,24,0.14); transition: border-color .3s linear; }
.role:hover { border-color: rgba(0,62,58,0.32); }
.role__head {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) auto;
  gap: clamp(18px, 2.4vw, 40px); align-items: start;
  padding: clamp(22px, 2.4vw, 34px);
}

.role__title {
  font-size: clamp(19px, 1.7vw, 25px); line-height: 1.15;
  letter-spacing: -0.04em; font-weight: 700; color: var(--deep);
  text-wrap: balance;
}
.role__meta {
  margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--eyebrow); font-weight: 700;
}
.role__meta span:not(:last-child)::after { content: " ·"; }
.role__sum { font-size: 15px; line-height: 1.75; color: var(--body); text-wrap: pretty; }
.role__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(14px, 1.6vw, 22px); }
.role__more {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 0; cursor: pointer;
  background: none; border: 0; font-family: inherit;
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--deep);
}
.role__more > span:first-child { border-bottom: 1px solid rgba(0,62,58,0.3); padding-bottom: 2px; transition: border-color .25s linear; }
.role__more:hover > span:first-child { border-bottom-color: var(--forest); }
.role__caret { display: grid; place-items: center; color: var(--forest); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.role__more[aria-expanded="true"] .role__caret { transform: rotate(180deg); }
.role__panel {
  display: grid; grid-template-rows: 0px;
  transition: grid-template-rows .42s cubic-bezier(.22,.61,.36,1);
}
.role__panel > div { overflow: hidden; min-height: 0; }
.role__panel[data-open="1"] { grid-template-rows: auto; }
.role__panel > div > * { padding-left: clamp(22px, 2.4vw, 34px); padding-right: clamp(22px, 2.4vw, 34px); }
.role__panelLabel {
  padding-top: clamp(4px, 0.6vw, 8px);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--eyebrow); font-weight: 700;
}
.role__list {
  list-style: none; margin-top: 16px;
  padding-bottom: clamp(24px, 2.6vw, 36px);
  display: grid; gap: 12px; max-width: 78ch;
}
.role__list li {
  position: relative; padding-left: 22px;
  font-size: 15px; line-height: 1.75; color: var(--body); text-wrap: pretty;
}
.role__list li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 8px; height: 1px; background: var(--mint);
}

/* designed empty state */
.noroles {
  margin-top: clamp(26px, 2.8vw, 42px);
  padding: clamp(34px, 4vw, 62px) clamp(24px, 2.6vw, 40px);
  background: #FFFFFF; border: 1px solid rgba(16,26,24,0.14);
  text-align: center;
}
.noroles[hidden] { display: none; }
.noroles__label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--eyebrow); font-weight: 700;
}
.noroles__lede {
  margin: 16px auto 0; max-width: 62ch;
  font-size: 16px; line-height: 1.75; color: var(--body); text-wrap: pretty;
}
.noroles .btn { margin-top: clamp(22px, 2.4vw, 32px); }

/* application form, centred on the page */
.agrid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.agrid > div { max-width: 820px; }
.aform { max-width: none; }
.aform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }

.cfield__selwrap { position: relative; }
.cfield__selwrap select { width: 100%; appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer; }
.cfield__selcaret {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; pointer-events: none; color: var(--forest);
}
.cfield--file input[type="file"] { padding: 28px 14px 12px; cursor: pointer; font-size: 14px; }
.cfield--file input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 9px 16px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--cream); background: var(--deep); border: 1px solid var(--deep);
  transition: background-color .25s linear;
}
.cfield--file input[type="file"]:hover::file-selector-button { background: var(--forest); border-color: var(--forest); }

/* closing link */
.closer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 2.6vw, 44px); align-items: end;
}

/* --- reveals -------------------------------------------------------------
   Declared LAST and with doubled attribute selectors, because component
   classes such as .tomb and .art declare their own `transition` shorthand
   for hover; at equal specificity the later rule replaced the reveal
   transition entirely and the elements snapped instead of fading.

   Only opacity and transform animate. Elements are promoted to their own
   layer only while actually moving ([data-revealing]); JS strips the reveal
   attributes once finished, so component hover transitions return untouched.
   data-reveal="1"     copy and blocks rise into place
   data-reveal="clip"  media is wiped open from the bottom
   data-reveal="left"  asides drift in from the side
   data-stagger        children reveal in sequence (delays set in JS) */
[data-reveal][data-reveal] {
  opacity: 0;
  transform: none;
  transition: opacity .72s cubic-bezier(.22,.61,.36,1),
              transform .82s cubic-bezier(.22,.61,.36,1);
}
[data-reveal][data-revealing="1"] { will-change: opacity; }
[data-reveal][data-shown="1"] { opacity: 1; transform: none; }

/* media opens rather than moves — the image holds still inside the wipe */
[data-reveal="clip"][data-reveal] {
  clip-path: inset(0 0 8% 0);
  transform: none;
  transition: opacity .72s cubic-bezier(.22,.61,.36,1),
              transform .82s cubic-bezier(.22,.61,.36,1),
              clip-path .9s cubic-bezier(.22,.61,.36,1);
}
[data-reveal="clip"][data-shown="1"] { clip-path: inset(0 0 0 0); transform: none; }

[data-reveal="left"][data-reveal] { transform: none; }
[data-reveal="right"][data-reveal] { transform: none; }

/* headings settle a touch further, so the eye lands on them first */
[data-reveal="head"][data-reveal] { transform: none; }

/* anything already on screen at first paint is simply present: a burst of
   staggered entrances competing with the loader lift reads as a glitch */
[data-reveal][data-instant="1"] {
  transition: none;
  opacity: 1; transform: none; clip-path: none;
}

/* --- topic long-read ----------------------------------------------------
   The level-2 service topic template. A sticky rail carries progress and
   the section list; the article sits beside it. Every component inside the
   article is sized by CONTAINER query rather than viewport, so the same
   markup works whether or not the rail is present — which is what makes one
   template serve every topic in both tracks. */

.topicdoc { background: #FFFFFF; padding: clamp(44px, 5vw, max(88px, 4.5833vw)) 0; }
.topicdoc__grid--full { grid-template-columns: minmax(0, 1fr) !important; }
.topicdoc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

/* --- sticky reading rail --- */
/* native scroll-driven progress where supported; a static track where not,
   so nothing depends on it */
@supports (animation-timeline: scroll()) {
  }

/* --- the article column: a query container --- */
.topicbody { container-type: inline-size; container-name: topic; }

.tsec__eyebrow {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700; color: var(--forest);
}
.tsec__h {
  margin-top: 14px;
  font-size: clamp(23px, 2.6vw, 38px); line-height: 1.1;
  letter-spacing: -0.04em; font-weight: 700; color: var(--deep);
  max-width: 30ch; text-wrap: balance;
}
.tsec .prose { margin-top: clamp(20px, 2.2vw, 30px); max-width: 68ch; }
.prose--lede p {
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6;
  letter-spacing: -0.02em; color: var(--deep);
}
.tfig { margin-top: clamp(28px, 3vw, 44px); }
.tfig img { width: 100%; height: auto; display: block; }

/* --- variant C: option cards --- */
.options {
  margin-top: clamp(26px, 2.8vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.4vw, 20px);
  background: transparent;
}
@container topic (min-width: 700px) {
  .options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.option__h {
  margin-top: 12px;
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.18;
  letter-spacing: -0.035em; font-weight: 700; color: var(--deep);
}
.option p { margin-top: 12px; font-size: 14.5px; line-height: 1.7; color: var(--body); text-wrap: pretty; }

/* --- factor list --- */
.factors {
  padding-left: 0;
  list-style: none; margin-top: clamp(24px, 2.6vw, 36px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.4vw, 20px);
  background: transparent;
}
@container topic (min-width: 620px) {
  .factors {
  padding-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.factor {
  position: relative; background: #FFFFFF;
  padding: clamp(20px, 2.2vw, 28px) clamp(18px, 2vw, 26px);  border-top: 2px solid rgba(15,107,68,0.3);
  border-left: 1px solid rgba(16,26,24,0.14);
  padding-left: clamp(14px, 1.5vw, 20px);
}
/* a hairline in the accent, its position encoding the direction of travel */
.factor::before {
  content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 26px;
  background: var(--mint);
}
.factor[data-dir="down"]::before { background: var(--support, #598D9D); }
.factor[data-dir="flat"]::before { background: rgba(15,107,68,0.5); }
.factor__label {
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.2;
  letter-spacing: -0.03em; font-weight: 700; color: var(--deep);
}
.factor__body { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--body); text-wrap: pretty; }

/* --- previous / next ----------------------------------------------------
   Replaces the list of sibling topics: two decisions rather than six. */
.topicnav {
  background: var(--deeper);
  padding: clamp(38px, 4.4vw, 72px) var(--gutter);
  /* the footer opens on the same deep green, so the band needs a rule of its
     own to read as a separate block — the same tint as the tile divider */
  border-bottom: 1px solid rgba(49,197,148,0.22);
}
.topicnav__pair {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: rgba(49,197,148,0.22);
}

/* at either end of a track one side is absent, and the other takes the row */
.topicnav__pair:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

.topicnav__side {
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto auto 1fr; gap: 12px;
  min-height: clamp(170px, 15vw, 230px);
  padding: clamp(24px, 2.8vw, 40px);
  background: var(--deeper); text-decoration: none;
  transition: background-color .34s linear;
}
/* the accent sweeps from the edge the arrow points to */
.topicnav__side::after {
  content: ""; position: absolute; bottom: 0; height: 2px; width: 0;
  background: var(--mint);
  transition: width .46s cubic-bezier(.22,.61,.36,1);
}
.topicnav__side--prev::after { right: 0; }
.topicnav__side--next::after { left: 0; }
@media (hover: hover) and (pointer: fine) {
  .topicnav__side:hover { background: var(--deepest); }
  .topicnav__side:hover::after { width: 100%; }
  .topicnav__side:hover .topicnav__h { color: var(--mint); }
  .topicnav__side:hover .topicnav__dir svg { transform: translateX(var(--nudge, 4px)); }
}
.topicnav__side:focus-visible { outline: 2px solid var(--mint); outline-offset: -4px; }
.topicnav__side--prev { --nudge: -4px; }
.topicnav__side--next { text-align: right; justify-items: end; }

.topicnav__dir {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700; color: var(--mint);
}
.topicnav__dir svg { transition: transform .34s cubic-bezier(.22,.61,.36,1); }
.topicnav__label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--mint);
}
.topicnav__h {
  align-self: end;
  font-size: clamp(19px, 1.9vw, 28px); line-height: 1.15;
  letter-spacing: -0.04em; font-weight: 700; color: var(--cream);
  transition: color .28s linear;
  max-width: 26ch; text-wrap: balance;
}
/* mobile: two compact rows — the label and the eyebrow-sized heading only,
   at a fraction of the desktop padding, so it reads as navigation rather
   than a second hero */

/* --- 404 -----------------------------------------------------------------
   Full-bleed deep green from the header down to the footer, which opens on
   the same colour — so the page reads as one field rather than a band. */
.notfound {
  background: var(--deeper);
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(var(--alma-head-rest, 62px) + clamp(56px, 7vw, 120px)) 0 clamp(56px, 7vw, 120px);
}
.notfound__inner { display: flex; flex-direction: column; align-items: flex-start; }
.notfound__code {
  font-size: clamp(84px, 18vw, 260px); line-height: 0.82;
  letter-spacing: -0.06em; font-weight: 700;
  color: rgba(49,197,148,0.16);
  margin-bottom: clamp(18px, 2.4vw, 40px);
}
.notfound .eyebrow { color: var(--mint); }
.notfound h1 {
  margin-top: clamp(16px, 2vw, 26px);
  font-size: clamp(28px, 4.2vw, 62px); line-height: 1.04;
  letter-spacing: -0.045em; font-weight: 700; color: var(--cream);
  max-width: 18ch; text-wrap: balance;
}
.notfound__lede {
  margin-top: clamp(18px, 2.2vw, 28px);
  font-size: clamp(15px, 1.16vw, 18px); line-height: 1.7;
  color: rgba(246,244,239,0.8); max-width: 54ch; text-wrap: pretty;
}
.notfound__links {
  margin-top: clamp(34px, 4vw, 60px);
  width: 100%; max-width: 780px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 56px);
}

.notfound__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 14px 0;
  border-top: 1px solid rgba(246,244,239,0.18);
  font-size: 15px; font-weight: 600; color: var(--cream);
  transition: color .3s linear, padding .3s linear, border-color .3s linear;
}
.notfound__arrow { display: grid; place-items: center; color: var(--mint); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.notfound__arrow svg { display: block; }
@media (hover: hover) and (pointer: fine) {
  .notfound__links a:hover { color: var(--mint); padding-left: 10px; border-top-color: var(--mint); }
  .notfound__links a:hover .notfound__arrow { transform: translateX(5px); }
}
.notfound__cta { margin-top: clamp(34px, 4vw, 56px); }

/* --- transaction detail: deal facts --------------------------------------
   Opens the article body with the same fields the listing filters on. Thin
   rules and uppercase labels, so it reads as part of the page rather than a
   card dropped into it. */
.dealfacts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 clamp(32px, 3.6vw, 54px);
  border-top: 1px solid rgba(16,26,24,0.16);
}

.dealfacts__row {
  padding: clamp(14px, 1.4vw, 20px) clamp(20px, 2vw, 32px) clamp(14px, 1.4vw, 20px) 0;
  border-bottom: 1px solid rgba(16,26,24,0.16);
}
.dealfacts dt {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--eyebrow); font-weight: 700;
}
.dealfacts dd {
  margin: 7px 0 0; font-size: 17px; line-height: 1.4;
  letter-spacing: -0.02em; font-weight: 600; color: var(--deep); text-wrap: pretty;
}

/* --- topic intro: copy left, supporting image right -------------------- */
.tintro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr);
  gap: clamp(26px, 3.2vw, 60px); align-items: start;
}

.tintro .tfig { margin: 0; }
/* the image tracks the copy rather than running the column's full height */
.tintro .tfig img { aspect-ratio: 4 / 3; object-fit: cover; }

/* --- topic sections: full-bleed colour bands ---------------------------
   Each .tsec paints its own band edge to edge via a pseudo-element, so the
   article column keeps its measure while the colour runs the full width.
   Rhythm: white, cream, mint wash, deep green, white. */
.tsec {
  position: relative;
  padding: clamp(46px, 5vw, 84px) 0;
  /* the shadow spread paints the band edge to edge in normal order; the clip
     stops that spread from creating a horizontal scroll axis */
  background: #FFFFFF;
  box-shadow: 0 0 0 100vmax #FFFFFF;
  clip-path: inset(0 -100vmax);
}
.tsec:nth-of-type(2) { background: var(--cream); box-shadow: 0 0 0 100vmax var(--cream); }
.tsec:nth-of-type(3) { background: var(--mint-wash); box-shadow: 0 0 0 100vmax var(--mint-wash); }

/* the dark band inverts its type */

/* the direction hook the template documents, made visible */
.factor[data-dir="up"] { border-top-color: var(--forest); }
.factor[data-dir="flat"] { border-top-color: rgba(15,107,68,0.34); }
.factor[data-dir="down"] { border-top-color: var(--support, #598D9D); }

/* the About mega group holds four links — keep them on one row */
[data-links="about"] { grid-template-columns: repeat(4, minmax(0, 200px)) !important; }

/* --- header panels: closed by default ------------------------------------
   js/site.js writes the open/closed state as inline styles. On pages whose
   body is re-rendered from JS those inline styles can be dropped, which used
   to leave every mega panel fully visible. These rules are the fallback. */
[id^="mega-"] {
  position: absolute; top: 100%; left: 0; right: 0;
  display: grid; grid-template-rows: 0fr;
  opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden;
}
[data-el="scrim"] {
  position: absolute; inset: 100% 0 auto 0; height: 100vh;
  opacity: 0; visibility: hidden; pointer-events: none;
}
[data-el="mobile"] {
  position: fixed; inset: 0; z-index: 140;
  /* js/site.js writes opacity/transform/visibility inline; it does NOT write
     pointer-events, so declaring it here would never be cleared. */
  visibility: hidden;
}
/* [data-el="msub"] is fully controlled inline by js/site.js — no fallback
   here, or its opacity/pointer-events would never be cleared. */

/* --- burger: resting default --------------------------------------------
   js/site.js writes the open/closed bar geometry as inline styles. Where a
   re-render drops them, these rules keep the control looking correct. */
[data-el="burger"] {
  position: relative; display: block; width: 44px; height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
[data-el="burger"] [data-bar] {
  position: absolute; left: 50%; top: 50%; height: 1px; width: 22px;
  background: #31C594; border-radius: 2px;
  transition: transform .4s cubic-bezier(.65,.05,.36,1), opacity .2s linear,
              width .4s cubic-bezier(.65,.05,.36,1), background-color .3s linear;
}
[data-el="burger"] [data-bar="1"] { transform: translate(-50%, calc(-50% - 6px)); }
[data-el="burger"] [data-bar="2"] { width: 15px; transform: translate(-50%, -50%); }
[data-el="burger"] [data-bar="3"] { transform: translate(-50%, calc(-50% + 6px)); }

/* --- language, footer base row -------------------------------------------
   The switcher lives in the mobile drawer above the CTA. Desktop has no
   drawer, so the same control appears here to keep /el/ reachable. */
[data-el="langfoot"] {
  display: none; align-items: center; min-height: 44px; padding: 0 12px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(246,244,239,0.72); transition: color .25s linear;
}

@media (hover: hover) and (pointer: fine) { [data-el="langfoot"]:hover { color: var(--mint); } }
[data-el="langfoot"]:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* --- language menu: state from aria --------------------------------------
   js/site.js writes these inline too, but aria-expanded is the state that
   survives a re-render, so the visible result is keyed off it. */
[data-el="langmenu"] {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
}
[data-el="langtrigger"][aria-expanded="true"] ~ [data-el="langmenu"],
[data-el="langtrigger"][aria-expanded="true"] + [data-el="langmenu"] {
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  transform: none !important;
}
[data-el="lang"] [data-el="langcaret"] { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
[data-el="langtrigger"][aria-expanded="true"] [data-el="langcaret"] { transform: rotate(180deg) !important; }

/* --- mega panels: state from aria ----------------------------------------
   js/site.js also writes these inline, but aria-expanded on the trigger is
   the state that survives a re-render, so the visible result is keyed to it. */
[data-alma-header]:has([data-trigger="owners"][aria-expanded="true"]) #mega-owners {
  grid-template-rows: 1fr !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
[data-alma-header]:has([data-trigger="pe"][aria-expanded="true"]) #mega-pe {
  grid-template-rows: 1fr !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
[data-alma-header]:has([data-trigger="about"][aria-expanded="true"]) #mega-about {
  grid-template-rows: 1fr !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
[data-alma-header]:has([data-trigger][aria-expanded="true"]) [data-el="scrim"] {
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
}

/* --- topic contact: single centred column -------------------------------- */
.measure--center { margin-left: auto; margin-right: auto; text-align: center; }
.cform-wrap { max-width: 720px; margin-left: auto; margin-right: auto; }
.cform-wrap .cform { max-width: none; }
.cform-wrap .cform__done { max-width: none; }

/* --- logo ink: resting default -------------------------------------------
   js/site.js swaps the SVG filter per header state. Until it runs the mark
   would paint dark over the green hero, so the light tint is the default. */
[data-alma-header] [data-el="logoimg"] { filter: url(#almaInkLight); }
[data-alma-header][data-over-hero="0"] [data-el="logoimg"] { filter: url(#almaInkDark); }

/* --- header CTA: resting default -----------------------------------------
   js/site.js styles this inline; a DC re-render can drop that, so the button
   keeps its shape either way. */
[data-alma-header] [data-el="cta"] {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; min-height: 46px;
  padding: 12px clamp(18px, 2.4vw, max(38px, 1.9792vw));
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  flex: 0 0 auto; text-decoration: none;
  border: 1px solid rgba(246,244,239,0.5); color: #F6F4EF;
}
[data-alma-header][data-over-hero="0"] [data-el="cta"] {
  background: #003E3A; border-color: #003E3A; color: #F6F4EF;
}


/* ==========================================================================
   WordPress port — classes that replace the inline styles of the mega
   panels and the mobile drawer (main.js only writes state-dependent styles
   to the containers; these are the static parts).
   ========================================================================== */
.mega__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: clamp(52px, 5.5vw, max(88px, 4.5833vw)) var(--gutter);
  display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr);
  gap: clamp(32px, 5vw, max(88px, 4.5833vw));
}
.mega__eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--eyebrow); font-weight: 700; margin-bottom: 12px; }
.mega__pitch { font-size: 15px; line-height: 1.5; letter-spacing: -0.02em; color: var(--deep); font-weight: 700; max-width: 22ch; }
.mega__cta {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 13px 22px; background: var(--deep); color: var(--cream);
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none;
  transition: background-color .3s linear, transform .3s linear;
}
.mega__cta:hover { background: var(--forest); color: var(--cream); transform: translateY(-2px); }
.mega__links {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, max(18px, 0.9375vw)) clamp(36px, 4vw, max(72px, 3.75vw));
  max-width: 1180px;
}
.mega__links--compact {
  grid-template-columns: repeat(3, minmax(0, 240px));
  gap: clamp(10px, 1.2vw, 18px) clamp(36px, 4vw, 72px);
  max-width: none; margin-left: auto; justify-content: end;
}
.mega__arrow { color: var(--mint); display: grid; place-items: center; }

/* mobile drawer */
.mdrawer__stage { position: relative; flex: 1; overflow: hidden; }
.mnav__label { flex: 1 1 0; min-width: 0; }
.mnav__icon { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; color: var(--mint); }
.mnav__icon--sm { width: 16px; height: 16px; }
.msub__all {
  margin: 16px 0 4px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; background: var(--deep); color: var(--cream); text-decoration: none;
}
.msub__all:hover { color: var(--cream); background: var(--forest); }
.msub__all-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msub__all-eyebrow { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mint); font-weight: 700; }
.msub__all-label { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.msub__all-icon { flex: 0 0 auto; display: grid; place-items: center; }
.msub__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 14px 0; font-size: 14px; color: var(--body);
  border-top: 1px solid rgba(16,26,24,0.08);
  transition: color .3s linear, padding .3s linear;
}
.msub__link:first-of-type { margin-top: 18px; }
.msub__link:hover, .msub__link[aria-current="page"] { color: var(--deep); padding-left: 6px; }