/* MYD Capital Partners — design system
   Primary: Parliament Blue #39598A. Layout rhythm inspired by editorial consulting sites. */
:root {
  --blue: #39598a;          /* Parliament Blue — primary */
  --blue-700: #2d4870;
  --blue-800: #22385a;
  --navy: #142339;          /* deep backgrounds */
  --ink: #152032;           /* body text */
  --muted: #56647a;
  --slate: #3d5577;         /* card surfaces */
  --sky: #b9cce8;           /* accent on dark */
  --sky-2: #dfe8f5;
  --mist: #f1f4f8;          /* light section */
  --line: #d7dfea;
  --white: #fff;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 4px;
  --header-h: 84px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-800); }
h1, h2, h3, .h1, .h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; color: var(--navy); margin: 0 0 .5em; }
h1, .h1 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); font-weight: 300; }
h2, .h2 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); }
p { margin: 0 0 1.1em; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 920px; }
.center { text-align: center; }
.section { padding: clamp(72px, 9vw, 128px) 0; }
.section-mist { background: var(--mist); }
.section-navy { background: var(--navy); color: #d9e2ef; }
.section-navy h2 { color: #fff; }
.eyebrow { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.center .eyebrow { justify-content: center; }
.eyebrow-light { color: var(--sky); }
.section-title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom: 32px; }
.statement { font-family: var(--serif); font-weight: 300; font-size: clamp(1.45rem, 2.5vw, 2.15rem); line-height: 1.35; color: var(--navy); letter-spacing: -0.01em; margin: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 15px 24px; border-radius: 999px; border: 1.5px solid transparent; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); cursor: pointer; line-height: 1; white-space: nowrap; }
.btn .ico { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-800); color: #fff; }
.btn-outline { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--sky-2); color: var(--navy); }
.btn-ghost-light { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-sm { padding: 11px 18px; font-size: 12px; }
.rel-go { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-top: auto; }
.rel-go .ico { width: 15px; height: 15px; transition: transform .25s var(--ease); }
a:hover .rel-go .ico { transform: translateX(4px); }
.ico { flex: none; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(20,35,57,.07); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 20px; }
.header-cta { flex: none; }
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo img { display: block; height: 57px; width: auto; }
.logo-light img { height: 64px; }
.main-nav { margin-left: auto; align-self: stretch; }
.main-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; height: 100%; }
.nav-item { position: relative; display: flex; align-items: stretch; }
.nav-item.has-mega { position: static; }
.nav-link { display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; text-transform: uppercase; color: var(--navy); text-decoration: none; transition: color .2s, box-shadow .25s var(--ease); }
.nav-link .chev { width: 11px; height: 11px; opacity: .6; transition: transform .3s var(--ease); }
.nav-item.is-active > .nav-link { color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }
.nav-item.is-open > .nav-link { color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }
.nav-item.is-open > .nav-link .chev { transform: rotate(180deg); }
.sub-toggle, .mega-back, .nav-lang-item { display: none; }

/* Mega menu: a full-width panel under the header. Opened by main.js with hover intent
   (.is-open); without JavaScript, hover and keyboard focus open it through CSS. */
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 34px 60px -20px rgba(20,35,57,.22); visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0); transition: clip-path .45s var(--ease), opacity .3s var(--ease), visibility 0s linear .45s; }
.nav-item.is-open > .mega, html:not(.js) .has-mega:hover > .mega, .has-mega:has(:focus-visible) > .mega { visibility: visible; opacity: 1; clip-path: inset(0 0 -80px 0); transition-delay: 0s; }
.mega-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, 1.1fr); gap: 56px; padding-top: 44px; padding-bottom: 52px; }
.mega-g2 { grid-template-columns: minmax(0, .8fr) minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, 1fr); gap: 44px; }
.mega-intro { display: flex; flex-direction: column; gap: 14px; padding-right: 8px; }
.mega-title { font-family: var(--serif); font-weight: 300; font-size: 2rem; line-height: 1.15; color: var(--navy); margin: 0; letter-spacing: -0.01em; }
.mega-text { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.mega-all, .mega-head a { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); text-decoration: none; margin-top: 6px; }
.mega-all .ico, .mega-head .ico { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.mega-all:hover .ico, .mega-head a:hover .ico { transform: translateX(4px); }
.mega-head { margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mega-head a { margin: 0; font-size: 12px; letter-spacing: .12em; }
.mega-group ul { list-style: none; margin: 0; padding: 0; }
.mega-group li { opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.nav-item.is-open .mega-group li, html:not(.js) .has-mega:hover .mega-group li, .has-mega:has(:focus-visible) .mega-group li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 32ms + 90ms); }
.mega-link { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 13px 0 13px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--navy); transition: padding .3s var(--ease), color .2s; }
.mega-link::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: var(--blue); transition: width .3s var(--ease); }
/* Phone-only row. It has to follow .mega-link, whose display:flex would otherwise bring it
   back on desktop with an unsized arrow. */
.mega-hub-row { display: none; }
.mega-link:hover, .mega-link.is-current { color: var(--blue); padding-left: 22px; }
.mega-link:hover::before, .mega-link.is-current::before { width: 12px; }
.ml-label { font-size: 16px; font-weight: 500; line-height: 1.35; }
.ml-brand { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mega-g2 .mega-link { padding-top: 9px; padding-bottom: 9px; }
.mega-g2 .ml-label { font-size: 15px; }
.mega-preview { display: flex; flex-direction: column; gap: 18px; }
.mp-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--mist); }
.mp-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.07); transition: opacity .55s var(--ease), transform 1.4s var(--ease); }
.mp-img.is-active { opacity: 1; transform: scale(1); }
.mp-caps { display: grid; }
.mp-cap { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.mp-cap.is-active { opacity: 1; transform: none; }
.mp-title { margin: 0 0 6px; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; color: var(--navy); }
.mp-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.mega-scrim { position: fixed; left: 0; right: 0; bottom: 0; top: var(--header-h); z-index: 1; background: rgba(20,35,57,.38); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.site-header.mega-open .mega-scrim { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mega, .mega-group li, .mp-img, .mp-cap { transition: none !important; transform: none !important; }
}
.menu-toggle { display: none; flex: none; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; position: relative; cursor: pointer; }
.menu-toggle span { position: absolute; left: 13px; right: 13px; height: 1.8px; background: var(--navy); transition: transform .25s, top .25s; }
.menu-toggle span:first-child { top: 18px; } .menu-toggle span:last-child { top: 26px; }
.menu-open .menu-toggle span:first-child { top: 22px; transform: rotate(45deg); }
.menu-open .menu-toggle span:last-child { top: 22px; transform: rotate(-45deg); }

/* Hero slider */
.hero { position: relative; height: calc(100svh - var(--header-h)); min-height: 620px; max-height: 920px; background: var(--navy); overflow: hidden; color: #fff; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 1s; }
.slide.is-active { opacity: 1; visibility: visible; }
.slide-media { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); transition: transform 7s linear; }
.slide.is-active .slide-media { transform: scale(1); }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,26,44,.86) 0%, rgba(14,26,44,.55) 45%, rgba(14,26,44,.15) 100%), linear-gradient(0deg, rgba(14,26,44,.7) 0%, transparent 35%); }
.slide-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 110px; }
.slide-inner > * { max-width: 760px; }
.slide h1, .slide .h1 { color: #fff; margin-bottom: 22px; }
.slide-count { font-size: 15px; letter-spacing: .12em; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.slide-count strong { color: #fff; font-weight: 600; }
.slide-rule { display: inline-block; width: 180px; height: 1px; background: rgba(255,255,255,.45); }
.slide-brand { font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--sky); margin: 0 0 10px; }
.slide-sub { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; color: rgba(255,255,255,.88); max-width: 620px; margin-bottom: 34px; }
.slide-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.slide.is-active .slide-inner > * { animation: rise .9s var(--ease) both; }
.slide.is-active .slide-inner > *:nth-child(2) { animation-delay: .08s; }
.slide.is-active .slide-inner > *:nth-child(3) { animation-delay: .16s; }
.slide.is-active .slide-inner > *:nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.slide-tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.slide-tab { text-align: left; background: rgba(10,20,36,.35); backdrop-filter: blur(6px); border: 0; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.65); padding: 20px 24px 24px; cursor: pointer; font-family: var(--sans); position: relative; display: flex; flex-direction: column; gap: 6px; transition: background .3s, color .3s; }
.slide-tab + .slide-tab { border-left: 1px solid rgba(255,255,255,.12); }
.slide-tab:hover, .slide-tab.is-active { color: #fff; background: rgba(10,20,36,.6); }
.tab-num { font-size: 12px; letter-spacing: .12em; }
.tab-label { font-size: 16px; font-weight: 500; }
.tab-bar { position: absolute; top: -1px; left: 0; right: 0; height: 2px; }
.tab-bar i { display: block; height: 100%; width: 0; background: #fff; }
.slide-tab.is-active .tab-bar i { animation: fill var(--slide-ms, 7000ms) linear forwards; }
.hero.is-paused .slide-tab.is-active .tab-bar i { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }

/* Trust strip */
.trust { border-bottom: 1px solid var(--line); }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-list li { padding: 34px 28px 34px 0; display: flex; flex-direction: column; gap: 4px; }
.trust-list li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.trust-list strong { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--navy); line-height: 1.25; }
.trust-list span { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.intro-statement .statement { font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
.statement-body { margin-top: clamp(26px, 3vw, 38px); }
.statement-body p:last-child { margin-bottom: 0; }

/* Section heads */
.section-head { margin-bottom: 52px; }
.section-head h2 { margin: 0; max-width: 720px; }
.section-head.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; }
.section-head.split p { color: var(--muted); margin-bottom: 22px; }

/* Audience cards */
.aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.aud-card { display: flex; flex-direction: column; background: #fff; text-decoration: none; color: var(--ink); overflow: hidden; border-radius: var(--radius); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.aud-card:hover { box-shadow: 0 22px 50px rgba(20,35,57,.14); transform: translateY(-3px); color: var(--ink); }
.aud-media { aspect-ratio: 16/8; background-size: cover; background-position: center; transition: transform .8s var(--ease); }
.aud-card:hover .aud-media { transform: scale(1.03); }
.aud-body { padding: 34px 36px 38px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.aud-title { font-family: var(--serif); font-size: 1.75rem; color: var(--navy); line-height: 1.2; }
.aud-text { color: var(--muted); }

/* Method steps */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 32px; row-gap: 0; }
.step-card { position: relative; padding: 32px 0 38px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink); border-top: 1px solid var(--line); transition: background .3s; }
.step-card::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--blue); transition: width .5s var(--ease); }
.step-card:hover::before { width: 100%; }
.step-card:hover { color: var(--ink); }
.step-num { font-size: 13px; letter-spacing: .12em; color: var(--muted); }
.step-abbr { font-family: var(--serif); font-size: 3.6rem; font-weight: 300; line-height: 1; color: var(--blue); }
.step-title { font-family: var(--serif); font-size: 1.55rem; font-weight: 300; color: var(--navy); line-height: 1.2; }
.step-text { color: var(--muted); font-size: 15.5px; }
@media (max-width: 1240px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* Feature band */
.feature-band { position: relative; background-size: cover; background-position: center; color: #fff; padding: clamp(110px, 14vw, 190px) 0; }
.feature-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,35,57,.92), rgba(57,89,138,.72) 60%, rgba(57,89,138,.35)); }
.feature-inner { position: relative; max-width: var(--wrap); }
.feature-inner h2 { color: #fff; max-width: 760px; }
.feature-inner p { max-width: 680px; color: rgba(255,255,255,.88); font-size: 1.1rem; margin-bottom: 32px; }

/* Reach */
.reach { display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: center; }
.reach p { color: #c9d5e6; font-size: 1.08rem; }
.regions { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.18); }
.regions li { display: flex; align-items: baseline; gap: 22px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.18); font-family: var(--serif); font-size: 1.55rem; color: #fff; font-weight: 300; }
.regions li span { font-family: var(--sans); font-size: 12px; letter-spacing: .12em; color: var(--sky); }

/* Sector cards */
.sec-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.sec-card { grid-column: span 2; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--mist); border-radius: var(--radius); overflow: hidden; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.sec-card:nth-child(4), .sec-card:nth-child(5) { grid-column: span 3; }
.sec-grid-7 .sec-card:nth-child(6), .sec-grid-7 .sec-card:nth-child(7) { grid-column: span 3; }
.sec-card:hover { box-shadow: 0 20px 44px rgba(20,35,57,.13); transform: translateY(-3px); color: var(--ink); }
.sec-media { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.sec-body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sec-title { font-family: var(--serif); font-size: 1.4rem; color: var(--navy); line-height: 1.25; }
.sec-text { color: var(--muted); font-size: 15.5px; margin-bottom: 8px; }

/* Knowledge cards */
.k-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.k-card { display: flex; flex-direction: column; background: var(--slate); color: #fff; text-decoration: none; border-radius: var(--radius); overflow: hidden; transition: background .3s, transform .3s var(--ease); min-height: 300px; }
.k-card:hover { background: var(--blue); color: #fff; transform: translateY(-3px); }
.k-card .rel-kind { color: var(--sky); }
.k-card .rel-go { color: #fff; }
.k-inner { padding: 30px 30px 32px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.k-grid:not(.k-grid-home) .k-card { padding: 30px 30px 32px; gap: 14px; }
.k-title { font-family: var(--serif); font-size: 1.45rem; line-height: 1.25; }
.k-text { color: rgba(255,255,255,.8); font-size: 15.5px; }
.k-media { aspect-ratio: 16/9; background-size: cover; background-position: center; }
.k-grid-home .k-card-feature { grid-row: span 1; }
.rel-kind { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }

/* Assessment teaser */
.assess-teaser { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
.assess-teaser p { color: var(--muted); margin-bottom: 30px; }
.dims { list-style: none; margin: 0; padding: 0; counter-reset: d; }
.dims li { display: flex; gap: 20px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 1.4rem; color: var(--navy); }
.dims li:first-child { border-top: 1px solid var(--line); }
.dims li span { font-family: var(--sans); font-size: 12px; color: var(--blue); letter-spacing: .12em; font-weight: 700; }

/* CTA band */
.cta-band { background: var(--blue); color: #fff; padding: clamp(64px, 8vw, 104px) 0; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; right: -120px; top: -160px; width: 520px; height: 520px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.cta-band::after { content: ""; position: absolute; right: 40px; top: -40px; width: 300px; height: 300px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.cta-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { color: rgba(255,255,255,.86); margin: 0; max-width: 620px; }
.cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* The home page's closing band carries the photograph the discretion band used to. */
.cta-band-photo { background: var(--navy) center / cover no-repeat; }
.cta-band-photo::before, .cta-band-photo::after { display: none; }
.cta-band-photo .feature-overlay { z-index: 0; }
.cta-band-light { background: var(--mist); color: var(--ink); border-top: 1px solid var(--line); }
.cta-band-light::before { border-color: rgba(57,89,138,.14); }
.cta-band-light::after { border-color: rgba(57,89,138,.1); }
.cta-band-light h2 { color: var(--navy); }
.cta-band-light p { color: var(--muted); }

/* Page hero */
.page-hero { position: relative; color: #fff; background: var(--navy); min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; }
.page-hero-media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,26,44,.9) 0%, rgba(14,26,44,.62) 55%, rgba(14,26,44,.3) 100%); }
.page-hero-inner { position: relative; z-index: 2; padding-top: 64px; padding-bottom: 64px; }
.page-hero h1 { color: #fff; max-width: 900px; font-size: clamp(2.2rem, 4.4vw, 3.7rem); margin-bottom: 12px; }
.page-hero .eyebrow { color: var(--sky); }
.hero-meta { color: rgba(255,255,255,.72); font-size: 14px; letter-spacing: .04em; margin: 8px 0 0; }
.crumbs ol { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: rgba(255,255,255,.7); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs a { color: rgba(255,255,255,.85); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

/* Article */
.article-shell { padding: clamp(56px, 7vw, 96px) 0; }
.article-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 72px; align-items: start; }
.article-grid:not(:has(.toc)) { grid-template-columns: minmax(0, 1fr); }
.article-grid:not(:has(.toc)) .prose { margin: 0 auto; }
.toc { position: sticky; top: calc(var(--header-h) + 32px); border-top: 2px solid var(--blue); padding-top: 18px; }
.toc-title { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; padding: 7px 0 7px 14px; font-size: 14.5px; line-height: 1.4; color: var(--muted); text-decoration: none; border-left: 2px solid var(--line); transition: all .2s; }
.toc a:hover, .toc a.is-current { color: var(--blue); border-left-color: var(--blue); }
.prose { max-width: 760px; }
.prose-wide { max-width: 860px; }
.prose .lead { font-family: var(--serif); font-weight: 300; font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.45; color: var(--navy); margin-bottom: 1.4em; padding-bottom: 1.2em; border-bottom: 1px solid var(--line); }
.prose h2 { margin-top: 1.9em; font-size: clamp(1.65rem, 2.4vw, 2.1rem); }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.3em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--blue); }
.prose strong { color: var(--navy); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose blockquote { margin: 1.6em 0; padding: 6px 0 6px 26px; border-left: 3px solid var(--blue); font-family: var(--serif); font-size: 1.25rem; color: var(--navy); }
.table-wrap { overflow-x: auto; margin: 1.6em 0 2em; border: 1px solid var(--line); border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.prose th { background: var(--navy); color: #fff; text-align: left; font-weight: 600; padding: 14px 16px; font-size: 13.5px; letter-spacing: .02em; }
.prose td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.prose tr:nth-child(even) td { background: var(--mist); }
.sources { margin-top: 3em; padding-top: 1.4em; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.sources h3 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.sources ol { padding-left: 1.2em; margin: 0; }

/* FAQ */
.faq { margin-top: 2.4em; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 0; font-family: var(--serif); font-size: 1.22rem; color: var(--navy); line-height: 1.35; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); position: relative; transition: background .2s, border-color .2s; }
.faq-item summary i::before, .faq-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--blue); transform: translate(-50%, -50%); transition: transform .25s; }
.faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] summary i { background: var(--blue); border-color: var(--blue); }
.faq-item[open] summary i::before, .faq-item[open] summary i::after { background: #fff; }
.faq-item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { padding: 0 60px 22px 0; color: var(--muted); }
.faq-a p:last-child { margin-bottom: 0; }

/* Related + hub grids */
.related { padding: 0 0 clamp(64px, 8vw, 104px); }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rel-card { display: flex; flex-direction: column; gap: 14px; min-height: 210px; padding: 28px 28px 30px; background: var(--mist); border-top: 2px solid var(--blue); text-decoration: none; color: var(--ink); transition: background .25s, transform .25s var(--ease); }
.rel-card:hover { background: var(--sky-2); color: var(--ink); transform: translateY(-3px); }
.rel-title { font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; color: var(--navy); }
.hub-grid { padding: 0 0 clamp(64px, 8vw, 104px); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .card-grid-4, .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .card-grid-4, .card-grid-3 { grid-template-columns: 1fr; } }
.img-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--mist); border-radius: var(--radius); overflow: hidden; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.img-card:hover { box-shadow: 0 20px 44px rgba(20,35,57,.13); transform: translateY(-3px); color: var(--ink); }
.img-card-media { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.img-card-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.img-card-title { font-family: var(--serif); font-size: 1.3rem; color: var(--navy); line-height: 1.25; }
.img-card-text { color: var(--muted); font-size: 15px; margin-bottom: 6px; }

/* Knowledge hub */
.k-tools { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; margin-top: 24px; }
.tool-card { display: flex; flex-direction: column; gap: 14px; padding: 34px 32px; background: var(--blue); color: #fff; text-decoration: none; border-radius: var(--radius); transition: background .25s, transform .25s var(--ease); }
.tool-card:hover { background: var(--blue-800); color: #fff; transform: translateY(-3px); }
.tool-card .rel-kind { color: var(--sky); } .tool-card .rel-go { color: #fff; }
.tool-card .k-text { color: rgba(255,255,255,.82); }
.tool-card-alt { background: var(--mist); color: var(--ink); border-top: 2px solid var(--blue); }
.tool-card-alt:hover { background: var(--sky-2); color: var(--ink); }
.tool-card-alt .rel-kind, .tool-card-alt .rel-go { color: var(--blue); }
.tool-card-alt .k-title { color: var(--navy); } .tool-card-alt .k-text { color: var(--muted); }
.series-note { margin-top: 56px; padding: 36px 40px; border: 1px dashed var(--line); border-radius: var(--radius); }
.series-note h3 { margin-bottom: 8px; } .series-note p:last-child { margin: 0; color: var(--muted); }

/* Glossary */
.gl-search { margin: 36px 0 18px; max-width: 520px; }
.gl-search input { width: 100%; font: inherit; padding: 15px 20px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.gl-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(57,89,138,.15); }
.az { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0; position: sticky; top: var(--header-h); background: #fff; z-index: 5; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.az a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--navy); }
.az a:hover { background: var(--blue); color: #fff; }
.gl-group { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.gl-letter { font-size: 3.2rem; font-weight: 300; color: var(--blue); margin: 0; line-height: 1; }
.gl-term { padding: 6px 0 20px; max-width: 820px; }
.gl-term + .gl-term { border-top: 1px dashed var(--line); padding-top: 22px; }
.gl-term h3 { font-size: 1.3rem; margin: 0 0 8px; }
.gl-term p { color: var(--muted); margin-bottom: .6em; }
.gl-term:target { background: var(--sky-2); margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
.gl-empty { color: var(--muted); padding: 24px 0; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.contact-main .lead { font-family: var(--serif); font-weight: 300; font-size: 1.45rem; line-height: 1.45; color: var(--navy); }
.contact-side { background: var(--mist); padding: 36px 36px 20px; border-top: 2px solid var(--blue); }
.contact-side h2 { font-size: 1.45rem; margin-top: 1.4em; }
.contact-side h2:first-child { margin-top: 0; }
.contact-form { margin-top: 28px; }
.conf-note { display: flex; gap: 16px; align-items: flex-start; padding: 18px 22px; background: var(--sky-2); border-radius: var(--radius); margin-bottom: 30px; font-size: 15px; }
.conf-note svg { width: 24px; height: 24px; color: var(--blue); flex: none; margin-top: 2px; }
.conf-note p { margin: 0; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; margin-bottom: 28px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; color: var(--navy); }
.field label span[aria-hidden] { color: var(--blue); }
.field .opt { font-weight: 400; color: var(--muted); font-size: 12.5px; margin-left: 4px; }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; padding: 13px 15px; border: 1px solid #c3cedd; border-radius: var(--radius); background: #fff; color: var(--ink); width: 100%; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2339598a' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(57,89,138,.15); }
.field.has-error input, .field.has-error select { border-color: #b3261e; }
.help { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.45; }
.form-status { margin-top: 16px; font-size: 15px; color: var(--blue-800); }
.form-status.is-ok { color: #1c6b46; font-weight: 500; }
.form-status.is-error { color: #b3261e; }
.form-status:empty { margin: 0; }
.form-legal { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
/* Honeypot: off-screen rather than display:none, which simple bots learn to skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin-bottom: 22px; min-height: 65px; }
.contact-form button[type="submit"][disabled] { opacity: .6; cursor: default; }

/* Assessment */
.assess-wrap { max-width: 980px; }
.assess-intro .lead { margin-bottom: .8em; border: 0; padding: 0; }
.assess-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0; padding: 0; margin: 28px 0 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.assess-facts li { flex: 1; min-width: 140px; padding: 18px 0; font-size: 14px; color: var(--muted); }
.assess-facts strong { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 300; color: var(--blue); line-height: 1.1; }
.assess { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(20,35,57,.08); overflow: hidden; }
.assess-progress { display: flex; align-items: center; gap: 18px; padding: 22px 32px; border-bottom: 1px solid var(--line); background: var(--mist); font-size: 13px; letter-spacing: .06em; color: var(--muted); }
.assess-progress .bar { flex: 1; height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
.assess-progress .bar i { display: block; height: 100%; background: var(--blue); transition: width .4s var(--ease); }
.assess-body { padding: 40px 40px 32px; }
.assess-dim { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.assess-q { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.8rem); color: var(--navy); line-height: 1.3; margin-bottom: 26px; }
.assess-opts { display: grid; gap: 12px; }
.assess-opt { display: flex; align-items: center; gap: 16px; text-align: left; font: inherit; font-size: 16px; padding: 17px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s; }
.assess-opt:hover { border-color: var(--blue); background: var(--mist); }
.assess-opt.is-selected { border-color: var(--blue); background: var(--sky-2); }
.assess-opt .dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #9fb0c7; position: relative; }
.assess-opt.is-selected .dot { border-color: var(--blue); }
.assess-opt.is-selected .dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--blue); }
.assess-nav { display: flex; justify-content: space-between; gap: 12px; padding: 0 40px 36px; }
.assess-nav .btn[disabled] { opacity: .4; pointer-events: none; }
.assess-result { padding: 44px 40px; }
.score-top { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center; padding-bottom: 32px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.score-ring { width: 200px; height: 200px; position: relative; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring .num { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-family: var(--serif); font-size: 3.2rem; font-weight: 300; color: var(--navy); line-height: 1; }
.score-ring .num small { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: .12em; color: var(--muted); margin-top: 6px; }
.score-band { font-family: var(--serif); font-size: 2rem; color: var(--navy); margin: 0 0 10px; }
.dim-rows { display: grid; gap: 22px; }
.dim-row-head { display: flex; justify-content: space-between; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.dim-row-head span:last-child { color: var(--blue); }
.dim-bar { height: 8px; background: var(--mist); border-radius: 8px; overflow: hidden; }
.dim-bar i { display: block; height: 100%; background: var(--blue); border-radius: 8px; transition: width .8s var(--ease); }
.dim-row p { font-size: 15px; color: var(--muted); margin: 10px 0 0; }
.result-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); }
.assess-note { font-size: 14px; color: var(--muted); margin-top: 28px; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* Footer */
.site-footer { background: var(--navy); color: #b9c6d9; padding: 84px 0 32px; font-size: 15px; }
.site-footer a { color: #dbe4f1; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.f-top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.12); }
.f-tag { font-family: var(--serif); font-size: 1.2rem; color: #fff; margin: 22px 0 18px; font-weight: 300; }
.site-footer address { font-style: normal; line-height: 1.8; }
.f-col h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); margin: 6px 0 16px; }
.site-footer .f-col h4 a { color: inherit; }
.f-col ul { list-style: none; margin: 0; padding: 0; }
.f-col li { margin-bottom: 10px; line-height: 1.4; }
.f-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 28px; font-size: 13.5px; }
.f-links { display: flex; flex-wrap: wrap; gap: 22px; }

/* Press & Brand Kit */
.press-intro { padding-bottom: clamp(48px, 6vw, 72px); }
.press-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 40px; }
.press-jump ol { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 28px; }
.press-jump a { font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; }
.press-jump a:hover { color: var(--blue); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line); }
.facts div { padding: 22px 24px 22px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.facts dd { margin: 0; color: var(--navy); line-height: 1.5; }
.bp-grid { display: grid; grid-template-columns: 1fr 1.3fr 1.6fr; gap: 24px; align-items: start; }
.bp-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 10px; background: #fff; }
.bp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.bp-card p { font-size: 15.5px; }
.copy-btn { font: 700 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; cursor: pointer; flex: none; transition: background .2s, color .2s, border-color .2s; }
.copy-btn:hover { border-color: var(--blue); }
.copy-btn.is-done { background: var(--blue); border-color: var(--blue); color: #fff; }
.logo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.logo-tile { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.logo-prev { aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 12% 14%; }
.logo-prev img { width: 100%; max-height: 100%; object-fit: contain; }
.logo-prev img[src*="mark"] { width: auto; height: 70%; }
.logo-prev img[src*="avatar"] { width: auto; height: 80%; border-radius: 50%; }
.bg-light { background: var(--mist); } .bg-white { background: #fff; border-bottom: 1px solid var(--line); }
.bg-navy { background: var(--navy); } .bg-blue { background: var(--blue); }
.logo-tile figcaption { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.lt-name { font-weight: 700; color: var(--navy); }
.lt-use { font-size: 14.5px; color: var(--muted); margin-bottom: 10px; }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.rule { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rule figcaption { padding: 22px 26px 8px; }
.rule h3 { margin: 0 0 8px; font-size: 1.35rem; }
.rule p { color: var(--muted); font-size: 15.5px; }
.rule-prev { background: var(--mist); min-height: 220px; display: grid; place-items: center; padding: 32px; }
.cs-box { --x: 37px; position: relative; padding: var(--x); outline: 1px dashed var(--blue); outline-offset: 0; background: repeating-linear-gradient(45deg, rgba(57,89,138,.07) 0 6px, transparent 6px 12px); }
.cs-box svg { display: block; width: 210px; height: auto; background: var(--mist); }
.cs-box::before, .cs-box::after { content: "x"; position: absolute; font: italic 13px/1 var(--serif); color: var(--blue); }
.cs-box::before { top: 4px; left: 50%; } .cs-box::after { left: 7px; top: 50%; transform: translateY(-50%); }
.minsize { display: flex; align-items: flex-end; justify-content: center; gap: 48px; }
.ms-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ms-logo svg { width: 140px; height: auto; display: block; }
.ms-mark svg { width: 32px; height: 32px; display: block; }
.ms-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.swatch { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.sw-chip { height: 140px; }
.sw-edge { border-bottom: 1px solid var(--line); }
.sw-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.sw-name { font-weight: 700; color: var(--navy); }
.sw-codes { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--ink); min-height: 30px; }
.sw-codes .copy-btn { padding: 6px 10px; font-size: 10.5px; }
.sw-role { font-size: 13.5px; color: var(--muted); line-height: 1.45; margin-top: 4px; }
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.type-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 32px 28px; display: flex; flex-direction: column; }
.type-sample { font-size: clamp(5rem, 9vw, 7.5rem); line-height: 1; color: var(--blue); margin: 18px 0 10px; font-weight: 500; }
.type-sample.serif { font-weight: 300; }
.serif { font-family: var(--serif); }
.type-name { font-size: 1.5rem; color: var(--navy); margin-bottom: 8px; font-weight: 600; }
.type-name.serif { font-weight: 400; }
.type-line { color: var(--muted); margin-bottom: 22px; }
.press-prose { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.press-prose .prose h2 { margin-top: 0; }
#media .cta-inner p { margin-bottom: 0; }
#media strong { color: #fff; }

/* Research reports */
.key-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 8px 0 40px; border-top: 2px solid var(--navy); }
.kf { padding: 20px 20px 18px 0; display: flex; flex-direction: column; gap: 8px; }
.kf + .kf { padding-left: 20px; border-left: 1px solid var(--line); }
.kf-val { font-family: var(--sans); font-weight: 600; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; color: var(--navy); letter-spacing: -0.02em; }
.kf-label { font-size: 14px; line-height: 1.45; color: var(--muted); }
.chart { margin: 2.2em 0 2.6em; padding: 26px 26px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.chart figcaption { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.ch-num { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.ch-title { font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--navy); line-height: 1.35; }
.ch-sub { font-size: 14px; color: var(--muted); }
.ch-legend { list-style: none; padding: 0 !important; margin: 0 0 10px !important; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13.5px; color: var(--ink); }
.ch-legend li { margin: 0; display: flex; align-items: center; gap: 8px; }
.ch-legend li::marker { content: none; }
.ch-legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.chart svg text { font-size: 12px; fill: #56647a; }
.chart svg text.val { font-size: 12.5px; font-weight: 600; fill: var(--navy); }
.chart svg .hit { fill: transparent; cursor: default; }
.chart svg .hit:hover { fill: rgba(57,89,138,.05); }
.ch-note { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.ch-data { margin-top: 12px; font-size: 14px; }
.ch-data summary { cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.ch-data .table-wrap { margin: 12px 0 4px; }
.ch-data table { min-width: 0 !important; font-variant-numeric: tabular-nums; }
.ch-data tbody th { text-align: left; font-weight: 600; color: var(--navy); background: none; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 14px; letter-spacing: 0; }
.ch-tip { position: fixed; z-index: 80; pointer-events: none; background: var(--navy); color: #fff; font-size: 13px; line-height: 1.5; padding: 8px 12px; border-radius: 4px; white-space: pre-line; box-shadow: 0 6px 20px rgba(20,35,57,.2); opacity: 0; transition: opacity .12s; }
.ch-tip.is-on { opacity: 1; }
.ch-tip b { display: block; font-weight: 700; }
.references { margin-top: 3em; padding-top: 1.4em; border-top: 1px solid var(--line); }
.references ol { font-size: 14.5px; color: var(--muted); }
.references li { margin-bottom: .7em; overflow-wrap: anywhere; }
.references em { color: var(--ink); }
.report-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
.report-card { display: flex; flex-direction: column; gap: 10px; padding: 34px 36px; background: var(--navy); color: #d9e2ef; text-decoration: none; border-radius: var(--radius); }
.report-card .rel-kind { color: var(--sky); } .report-card .k-title { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); } .report-card .rel-go { color: #fff; }

/* Report maps (dark band) */
.chart-map { background: #0E1A2C; border-color: #0E1A2C; color: #C7D4E6; padding: 30px 30px 22px; }
.chart-map .ch-num { color: #7FAEE4; }
.chart-map .ch-title { color: #fff; }
.chart-map .ch-sub, .chart-map .ch-note { color: #93A6C0; }
.chart-map .ch-data summary { color: #7FAEE4; }
.chart-map .ch-data table { color: #C7D4E6; }
.chart-map .ch-data th { background: #16253C; color: #fff; }
.chart-map .ch-data tbody th { background: none; color: #fff; border-top-color: #22334d; }
.chart-map .ch-data td { border-top-color: #22334d; }
.chart-map .ch-data tr:nth-child(even) td, .chart-map .ch-data tr:nth-child(even) { background: #122034; }
.chart-map .table-wrap { border-color: #22334d; }
.chart-map svg text { fill: #93A6C0; }
.chart-map svg text.map-legend-title { fill: #C7D4E6; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.chart-map svg text.map-legend { font-size: 11px; }
.chart-map .hit-shape { transition: fill-opacity .15s; cursor: default; }
.chart-map path.hit-shape:hover { fill-opacity: .75; }
.chart-map .flow { fill: none; stroke: #8FC2FF; stroke-linecap: round; opacity: .95; }
.chart-map .flow-glow { fill: none; stroke: #4A7FC4; stroke-linecap: round; opacity: .28; filter: blur(2px); }
.chart-map .flow-hit { fill: none; stroke: transparent; }
.chart-map .flow-hit:hover { stroke: rgba(143,194,255,.18); }
.chart-map .flow-dot { fill: #DCEBFF; stroke: #0E1A2C; stroke-width: 1; }
.chart-map .flow-dest { fill: #FFFFFF; stroke: #0E1A2C; stroke-width: 1.5; }
.chart-map svg text.map-flow-label { fill: #E7EFFB; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  paint-order: stroke; stroke: #0E1A2C; stroke-width: 3px; stroke-linejoin: round; }

@media (max-width: 960px) {
  .chart-map { border-radius: 0; }
}

@media (max-width: 720px) {
  /* A world map keeps its aspect ratio, so on a phone it takes the full screen width and larger type. */
  .map-band .wrap { padding: 0; }
  .map-band .chart figcaption, .map-band .ch-note, .map-band .ch-data { padding-left: var(--gutter); padding-right: var(--gutter); }
  .map-band .chart svg { border-radius: 0; }
  .chart-map svg text.map-legend, .chart-map svg text.map-legend-title { font-size: 17px; }
  .chart-map svg text.map-flow-label { font-size: 20px; stroke-width: 4px; }
  .chart-map .flow-dot { r: 4; }
  .chart-map .flow-dest { r: 6; }
}

.map-band { background: #0E1A2C; padding: clamp(40px, 6vw, 80px) 0; }
.map-band .chart-map { margin: 0; padding: 0; border: 0; background: none; }
.map-band .chart figcaption { margin-bottom: 18px; }
.map-band .ch-title { font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-family: var(--serif); font-weight: 300; letter-spacing: -0.01em; }
.map-band .chart svg { border-radius: var(--radius); }
.article-shell-cont { padding-top: clamp(40px, 5vw, 72px); }

/* Responsive */
@media (max-width: 1260px) {
  .main-nav, .header-cta, .mega-scrim { display: none; }
  .menu-toggle { display: block; }
  /* Phone menu: two levels. The first shows only the five sections, set large and quiet;
     a section slides in over it as its own screen with a way back. */
  body.menu-open { overflow: hidden; }
  .nav-link { text-transform: none; letter-spacing: 0; }
  .menu-open .main-nav { display: block; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; background: #fff; overflow-x: hidden; overflow-y: auto; padding: 20px var(--gutter) 40px; }
  .menu-open .main-nav > ul { flex-direction: column; gap: 0; height: auto; }
  /* Only the rows move aside: a transform on the list would trap the fixed section screens inside it. */
  .menu-open .nav-link, .menu-open .sub-toggle { transition: transform .4s var(--ease), opacity .3s; }
  .menu-open .main-nav.is-drilled .nav-link, .menu-open .main-nav.is-drilled .sub-toggle { transform: translateX(-24%); opacity: 0; }
  /* Entrance animations fill backwards only: a leftover transform would trap the fixed section screens. */
  .menu-open .nav-item { position: static; align-items: center; animation: rise .5s var(--ease) backwards; animation-delay: calc(var(--n, 0) * 45ms + 60ms); }
  .menu-open .nav-link { flex: 1; padding: 16px 0; font-family: var(--serif); font-weight: 300; font-size: 1.75rem; line-height: 1.2; color: var(--navy); box-shadow: none !important; }
  .menu-open .nav-item.is-active > .nav-link { color: var(--blue); }
  /* Structure comes from rules and tints, not type: a line between sections, a grey band
     heading each section screen, a grey box for the language choice. */
  .menu-open .main-nav > ul > .nav-item { border-bottom: 1px solid var(--line); }
  .menu-open .nav-link .chev { display: none; }
  .menu-open .sub-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); cursor: pointer; }
  .menu-open .sub-toggle .chev { width: 16px; height: 16px; transform: rotate(-90deg); }
  .menu-open .mega { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; display: block; overflow-y: auto; background: #fff; border: 0; box-shadow: none; opacity: 1; clip-path: none; visibility: hidden; transform: translateX(100%); transition: transform .4s var(--ease), visibility 0s linear .4s; }
  .menu-open .nav-item.is-sub-open > .mega { visibility: visible; transform: none; transition-delay: 0s; }
  .menu-open .mega-inner { display: block; padding-top: 0; padding-bottom: 40px; }
  .menu-open .mega-back { display: flex; align-items: center; gap: 6px; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 18px var(--gutter) 6px; border: 0; background: var(--mist); font: 600 14px var(--sans); color: var(--muted); cursor: pointer; }
  .menu-open .mega-back .ico { width: 16px; height: 16px; }
  .menu-open .mega-intro { display: block; margin: 0 calc(-1 * var(--gutter)) 8px; padding: 8px var(--gutter) 24px; background: var(--mist); border-bottom: 1px solid var(--line); }
  .menu-open .mega-title { font-size: 2rem; margin-bottom: 8px; }
  .menu-open .mega-text, .menu-open .mega-preview { display: none; }
  .menu-open .mega-link { gap: 5px; }
  .menu-open .ml-brand { font-size: 11px; letter-spacing: .12em; color: var(--blue); }
  .menu-open .mega-all { margin: 0; }
  .menu-open .mega-group li { opacity: 1; transform: none; }
  .menu-open .nav-item.is-sub-open .mega-group li { animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms + 120ms); }
  .menu-open .mega-group + .mega-group { margin-top: 18px; }
  .menu-open .mega-head { border: 0; padding: 22px 0 12px; margin: 0; border-bottom: 1px solid var(--line); }
  .menu-open .mega-group-hub .mega-hub-row { border-top: 1px solid var(--line); margin-top: 10px; }
  .menu-open .mega-link { padding: 15px 0; border-bottom: 1px solid var(--line); }
  .menu-open .mega-link:hover { padding-left: 0; }
  .menu-open .mega-link::before { display: none; }
  .menu-open .ml-label { font-size: 17px; font-weight: 400; }
  .header-inner > .lang { display: none; }
  .menu-open .nav-lang-item { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; padding: 14px 16px; background: var(--mist); border-radius: var(--radius); animation: rise .5s var(--ease) backwards; animation-delay: .3s; transition: opacity .3s; }
  .menu-open .main-nav.is-drilled .nav-lang-item { opacity: 0; }
  .nav-lang-label { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .nav-lang-item .lang { margin: 0; font-size: 14px; background: #fff; }
  .nav-lang-item .lang-cur, .nav-lang-item .lang-opt { padding: 8px 16px; }
  .nav-lang-item .l-full { display: inline; }
  .nav-lang-item .l-abbr { display: none; }
  /* The seven sectors are one row here, not seven: the sectors page lists them. */
  .menu-open .mega-group-hub ul { display: none; }
  .menu-open .mega-group-hub .mega-head { display: none; }
  .menu-open .mega-hub-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: var(--navy); }
  .menu-open .mega-hub-row .ico { width: 16px; height: 16px; color: var(--blue); }
  .f-top { grid-template-columns: 1fr 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .trust-list { grid-template-columns: 1fr 1fr; }
  .trust-list li:nth-child(3) { padding-left: 0; border-left: 0; }
  .trust-list li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .section-head.split, .reach, .assess-teaser, .cta-inner, .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .aud-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step-card { padding: 28px 0 30px; }
  .sec-grid { grid-template-columns: 1fr 1fr; }
  .sec-card, .sec-grid .sec-card:nth-child(n) { grid-column: auto; }
  .sec-card, .sec-card:nth-child(4), .sec-card:nth-child(5) { grid-column: span 1; }
  .k-grid, .rel-grid, .k-tools { grid-template-columns: 1fr 1fr; }
  .article-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
  .facts, .logo-grid { grid-template-columns: 1fr 1fr; }
  .bp-grid, .rules, .type-grid, .press-prose { grid-template-columns: 1fr; gap: 24px; }
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .key-figs { grid-template-columns: 1fr 1fr; }
  .kf:nth-child(3) { padding-left: 0; border-left: 0; }
  .kf:nth-child(n+3) { border-top: 1px solid var(--line); }
  .slide-tab .tab-label { font-size: 14px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .intro-statement .statement, .statement { font-size: 1.35rem; }
  :root { --header-h: 70px; }
  .logo img { height: 46px; }
  .hero { min-height: 640px; }
  .slide-inner { padding-bottom: 90px; }
  .slide-rule { width: 80px; }
  .slide-tabs { grid-template-columns: repeat(3, 1fr); }
  .slide-tab { padding: 14px 12px 16px; }
  .slide-tab .tab-label { display: none; }
  .slide-actions .btn { width: 100%; justify-content: space-between; }
  .trust-list { grid-template-columns: 1fr; }
  .trust-list li, .trust-list li + li { padding: 22px 0; border-left: 0; border-top: 1px solid var(--line); }
  .trust-list li:first-child { border-top: 0; }
  .sec-grid, .k-grid, .rel-grid, .k-tools, .fields { grid-template-columns: 1fr; }
  .sec-card, .sec-grid .sec-card:nth-child(n) { grid-column: auto; }
  .steps { grid-template-columns: 1fr; }
  .facts, .logo-grid { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: 1fr 1fr; gap: 14px; }
  .sw-chip { height: 84px; }
  .sw-body { padding: 14px; }
  .press-actions .btn { width: 100%; justify-content: space-between; }
  .minsize { gap: 28px; }
  .chart { padding: 18px 14px 12px; margin-left: calc(var(--gutter) * -0.5); margin-right: calc(var(--gutter) * -0.5); }
  .chart svg text, .chart svg text.val { font-size: 21px; }
  .kf-val { font-size: 1.7rem; }
  .gl-group { grid-template-columns: 1fr; gap: 8px; }
  .score-top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .assess-body, .assess-result { padding: 28px 22px; }
  .assess-nav { padding: 0 22px 26px; }
  .assess-progress { padding: 18px 22px; }
  .faq-a { padding-right: 0; }
  .contact-side { padding: 28px 22px 12px; }
  .page-hero { min-height: 380px; }
  .crumbs ol { margin-bottom: 26px; }
  .btn { white-space: normal; }
  .f-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .f-col a { overflow-wrap: break-word; }
  .table-wrap { overflow: visible; }
  .prose table { min-width: 0; font-size: 15px; }
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: 100%; }
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose tr { padding: 16px 18px; border-top: 1px solid var(--line); }
  .prose tbody tr:first-child { border-top: 0; }
  .prose tr:nth-child(even) { background: var(--mist); }
  .prose tr:nth-child(even) td { background: none; }
  .prose td { padding: 0; border: 0; overflow-wrap: break-word; }
  .prose td + td { margin-top: 10px; }
  .prose td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
}
/* Team --------------------------------------------------------------------
   The founder's letter is the longest prose block on the site, so it stays dark
   text on a light ground. The depth comes from the frame instead: a navy plate
   offset behind the portrait, a rule opening the heading, and a gradient that
   keeps the band from reading as one flat slab. */
/* The page's own hero photograph, echoed at a whisper behind the top of the letter
   and gone before the long prose starts, so nothing competes with reading. The image
   comes from PAGE_IMAGE, so it follows the hero if that ever changes.
   No overflow:hidden here — that would turn .founder into a scroll container and
   kill the portrait's sticky behaviour. */
.founder-wash { position: absolute; inset: 0 0 auto 0; height: min(80vh, 880px); overflow: hidden; opacity: .34; filter: grayscale(.75) contrast(.9); mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 10%, rgba(0,0,0,1) 38%, rgba(0,0,0,.8) 66%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 10%, rgba(0,0,0,1) 38%, rgba(0,0,0,.8) 66%, transparent 100%); }
/* The layer overhangs its frame by 30% top and bottom so the parallax has room to
   travel without ever exposing an edge: at 16% the drift is 225px against 264px of
   overhang. main.js drives the transform. */
.founder-wash-img { position: absolute; inset: -30% 0; background: center / cover no-repeat; will-change: transform; }
.founder { position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(160deg, var(--white) 0%, var(--mist) 46%, #e7edf6 100%); }
.founder-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 5vw, 84px); align-items: start; }

.founder-portrait { margin: 0; position: sticky; top: calc(var(--header-h) + 32px); }
.founder-portrait::before { content: ""; position: absolute; left: -22px; top: 18px; width: 100%; aspect-ratio: 4 / 5; background: var(--navy); border-radius: var(--radius); }
.founder-photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; background: var(--sky-2) center 22% / cover no-repeat; border-radius: var(--radius); box-shadow: 0 22px 48px -26px rgba(20, 35, 57, .55); }
.founder-sign { position: relative; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.founder-sign strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; line-height: 1.3; color: var(--navy); }
.founder-sign span { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }

.founder-note > :first-child { margin-top: 0; }
.founder-note h2 { position: relative; margin-top: 0; padding-top: 30px; }
.founder-note h2::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 2px; background: var(--blue); }
.founder-note h2 + p { font-family: var(--serif); font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--navy); }

.team-group-title { position: relative; margin: clamp(40px, 5vw, 64px) 0 26px; padding-top: 18px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.team-group-title::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: var(--blue); }
.section-title + .team-group-title { margin-top: 8px; }
/* Groups come in sixes: one row on desktop, then three and two across, so no row is left half full. */
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(26px, 3vw, 40px) clamp(16px, 2vw, 28px); }
.team-card { margin: 0; }
.team-photo { display: block; width: 100%; aspect-ratio: 4 / 5; background: var(--mist) center 22% / cover no-repeat; border: 1px solid var(--line); border-radius: var(--radius); }
.team-name { margin: 15px 0 0; font-family: var(--serif); font-size: 1.08rem; line-height: 1.3; color: var(--navy); }
.team-role { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

.founder-photo.is-empty, .team-photo.is-empty { display: grid; place-items: center; }
.founder-photo .ph, .team-photo .ph { width: 44%; height: auto; fill: #c0cee1; }
.founder-photo .ph { fill: #a8bdda; }

@media (max-width: 960px) {
  .founder-grid { grid-template-columns: 1fr; }
  .founder-portrait { position: relative; top: auto; width: min(240px, 68%); margin-inline: auto; text-align: center; }
  .founder-portrait::before { left: -14px; top: 16px; }
}
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .founder-wash-img { transform: none !important; }
}
@media print {
  .site-header, .site-footer, .cta-band, .page-hero-media, .assess-nav, .result-actions { display: none !important; }
  .page-hero { min-height: 0; background: #fff; color: var(--ink); } .page-hero::after { display: none; }
  .page-hero h1 { color: var(--navy); } .assess { box-shadow: none; }
  .toc, .related, .ch-data summary, .ch-tip { display: none !important; }
  .chart { break-inside: avoid; border: 0; padding: 0; }
  .ch-data[open] { display: none; }
  .references a::after { content: " " attr(href); font-size: 11px; }
}

/* Footer: two offices */
.f-office { display: block; margin-bottom: 14px; }
.f-office strong { display: block; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); margin-bottom: 4px; }

/* Language switcher */
.lang { display: flex; align-items: center; gap: 2px; margin-left: 18px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; letter-spacing: .04em; }
.lang-cur, .lang-opt { padding: 4px 11px; border-radius: 999px; line-height: 1; }
.lang-cur { background: var(--navy); color: #fff; font-weight: 600; }
.lang-opt { color: var(--muted); text-decoration: none; transition: color .2s, background .2s; }
.lang-opt:hover { color: var(--navy); background: var(--mist); }
/* The header row is logo + nav + language switcher + CTA, and it all has to fit inside
   the 1280px wrap. Turkish menu labels run far longer than their English counterparts
   ("Kimlere Hizmet Veriyoruz" alone is 232px), and with the full language names the row
   measured 1339px: on a 1440px screen that pushed the CTA off the right edge and gave
   the page a horizontal scrollbar, and on a wider screen it left the CTA hanging past
   the content column. So the switcher shows TR/EN everywhere rather than the full names,
   and below 1340px the CTA steps aside as well. */
.l-full { display: none; }
.l-abbr { display: inline; }
.lang { margin-left: 12px; gap: 0; }
.lang-cur, .lang-opt { padding: 4px 9px; }
.header-inner { gap: 14px; }
@media (max-width: 1340px) { .header-cta { display: none; } }
@media (max-width: 760px) {
  .lang { margin-left: auto; margin-right: 8px; }
  .lang-cur, .lang-opt { padding: 4px 8px; }
}

/* Home: focus areas — the heading in the first cell, then one tile per area. A tile's
   photograph fades in behind it on hover or focus; at rest the grid is quiet text. */
/* Every row the same height: the heading cell is kept compact enough to match the tiles. */
.focus-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
.focus-list { display: contents; list-style: none; }
.focus-list li { display: flex; }
.focus-head { display: flex; flex-direction: column; align-items: flex-start; padding: 4px 20px 0 0; }
.focus-head .eyebrow { margin-bottom: 12px; }
.focus-head h2 { margin-bottom: 10px; font-size: clamp(1.8rem, 2.4vw, 2.2rem); }
.focus-head p:not(.eyebrow) { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0 0 16px; }
.focus-head .btn { margin-top: auto; }
.focus-row { position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 240px; padding: 26px 26px 24px; overflow: hidden; background: #fff; border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.focus-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,35,57,.62), rgba(20,35,57,.9)); opacity: 0; transition: opacity .5s var(--ease); }
.fr-thumb { position: absolute; inset: 0; z-index: -2; background: var(--navy) center / cover no-repeat; opacity: 0; transform: scale(1.08); transition: opacity .6s var(--ease), transform 1.4s var(--ease); }
.fr-num { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--blue); transition: color .3s; }
.fr-body { display: flex; flex-direction: column; gap: 10px; }
.fr-title { font-family: var(--serif); font-size: 1.3rem; line-height: 1.25; color: var(--navy); transition: color .3s; }
.fr-text { color: var(--muted); font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s; }
.fr-go { margin-top: auto; color: var(--blue); transition: color .3s, transform .3s var(--ease); }
.fr-go .ico { width: 18px; height: 18px; }
.focus-row:hover, .focus-row:focus-visible { color: #fff; transform: translateY(-3px); box-shadow: 0 22px 44px rgba(20,35,57,.18); }
.focus-row:hover .fr-thumb, .focus-row:focus-visible .fr-thumb { opacity: 1; transform: scale(1); }
.focus-row:hover::before, .focus-row:focus-visible::before { opacity: 1; }
.focus-row:hover .fr-title, .focus-row:focus-visible .fr-title, .focus-row:hover .fr-go, .focus-row:focus-visible .fr-go { color: #fff; }
.focus-row:hover .fr-text, .focus-row:focus-visible .fr-text { color: rgba(255,255,255,.85); }
.focus-row:hover .fr-num, .focus-row:focus-visible .fr-num { color: var(--sky); }
.focus-row:hover .fr-go { transform: translateX(4px); }
@media (max-width: 1240px) { .focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }  /* heading + 7 tiles: even rows at 4 or 2 columns, never 3 */
@media (max-width: 960px) {
  .focus-grid { display: block; }
  .focus-head { padding: 0 0 28px; }
  .focus-head .btn { margin-top: 0; }
  .focus-list { display: block; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .focus-list li { display: block; }
  .focus-row, .focus-row:hover { display: grid; grid-template-columns: 64px minmax(0, 1fr) 20px; gap: 16px; align-items: start; min-height: 0; padding: 18px 0; background: none; border-radius: 0; border-bottom: 1px solid var(--line); transform: none; box-shadow: none; color: var(--ink); }
  .focus-row::before, .fr-num { display: none; }
  .fr-thumb, .focus-row:hover .fr-thumb { position: static; z-index: auto; width: 64px; height: 64px; border-radius: var(--radius); background-color: var(--mist); opacity: 1; transform: none; }
  .fr-body { gap: 6px; }
  .fr-title, .focus-row:hover .fr-title { font-size: 1.2rem; color: var(--navy); }
  .fr-text, .focus-row:hover .fr-text { font-size: 15px; color: var(--muted); -webkit-line-clamp: 2; }
  .fr-go, .focus-row:hover .fr-go { margin-top: 0; padding-top: 4px; color: var(--blue); opacity: .5; transform: none; }
}

/* Built by main.js for the strip only; in the desktop grid it would mean nothing.
   It has to precede the phone rules below, or it would override them. */
.focus-dots { display: none; }

/* Phones: the seven audiences become a swipeable strip. As a list they put some
   1,200px of near-identical rows on the page; as cards they take a third of that, the
   photograph earns its place at card size, and the next card peeking past the edge
   says there is more without a label asking to be swiped. */
@media (max-width: 640px) {
  .focus-list {
    display: flex; gap: 14px; border-top: 0;
    margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 2px;
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none;
  }
  .focus-list::-webkit-scrollbar { display: none; }
  .focus-list li { display: flex; flex: 0 0 76%; max-width: 300px; scroll-snap-align: start; }
  .focus-row, .focus-row:hover {
    flex: 1; display: flex; flex-direction: column; gap: 0; padding: 0 0 16px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  }
  .fr-thumb, .focus-row:hover .fr-thumb { width: 100%; height: 128px; border-radius: 0; }
  .fr-num { display: block; padding: 16px 18px 0; }
  .fr-body { padding: 6px 18px 0; }
  .fr-text, .focus-row:hover .fr-text { font-size: 14.5px; -webkit-line-clamp: 3; }
  .fr-go, .focus-row:hover .fr-go { margin-top: auto; padding: 14px 18px 0; opacity: 1; }

  .focus-dots { display: flex; justify-content: center; gap: 2px; padding-top: 18px; }
  .focus-dot { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
  .focus-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c3cede; transition: width .3s var(--ease), background .3s; }
  .focus-dot[aria-current="true"]::before { width: 18px; border-radius: 3px; background: var(--blue); }
}

/* International reach: figures and regions */
.reach-box { margin: 2.6em 0 1em; padding: clamp(28px, 4vw, 48px); background: var(--navy); color: #d9e2ef; border-radius: var(--radius); }
.reach-box ul { list-style: none; margin: 0; padding: 0; }
.reach-box li::marker { content: none; }
.reach-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-bottom: 28px; margin-bottom: 8px !important; border-bottom: 1px solid rgba(255,255,255,.18); }
.reach-figs li { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.reach-figs strong { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; color: #fff; }
.reach-figs span { font-size: 13px; letter-spacing: .06em; color: var(--sky); }
.reach-box .regions { border-top: 0; }
.reach-box .regions li { margin: 0; font-size: 1.3rem; padding: 14px 0; }
.reach-box .regions li:last-child { border-bottom: 0; }
@media (max-width: 640px) { .reach-figs { grid-template-columns: 1fr 1fr; } }

/* News */
.news-empty { margin: 2.4em 0 1em; padding: 32px 34px; background: var(--mist); border-left: 3px solid var(--blue); border-radius: var(--radius); }
.news-empty p { margin: 0 0 18px; color: var(--muted); }
.news-empty .news-empty-title { margin-bottom: 8px; font-family: var(--serif); font-size: 1.4rem; color: var(--navy); }
.news-list { list-style: none; margin: 2em 0 0; padding: 0; border-top: 1px solid var(--line); }
.news-item { padding: 24px 0; border-bottom: 1px solid var(--line); margin: 0; }
.news-item time { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.news-item h3 { margin: 8px 0 6px; }
.news-item p { margin: 0; color: var(--muted); }

/* Home services head: the intro sits directly under the heading. */
.svc-head h2 { max-width: none; }
.svc-intro { max-width: 760px; margin: 18px 0 0; color: var(--muted); font-size: 1.05rem; }