/* Advocacia Coutinho, site institucional
   EB Garamond (títulos) + Lato (texto). Marfim, preto e dourado. */

/* Web fonts served from the site itself (no visitor data goes to Google); SIL Open Font License */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../assets/fonts/eb-garamond.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../assets/fonts/eb-garamond-italic.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/lato-700.woff2") format("woff2"); }

/* Fallbacks sized to the web fonts, so the swap does not move the layout */
@font-face { font-family: "EB Garamond Fallback"; src: local("Georgia"); size-adjust: 87.2%; }
@font-face { font-family: "Lato Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 96%; }

:root {
  --white: #ffffff;
  --ivory: #f6f3ee;
  --ivory-2: #ebe5da;
  --paper: #f3f1ec;
  --dark: #101113;
  --dark-2: #17181b;
  --dark-3: #1e1f23;
  --ink: #15161a;
  --text: #3a3833;
  --muted: #67625a;
  --on-dark: #f3f0ea;
  --on-dark-muted: #b9b2a6;
  --gold: #b8924f;
  --gold-light: #d4b67c;
  --gold-deep: #7f5f27;
  --champagne: #c9a66b;
  --champagne-hi: #d9bb84;
  --champagne-edge: #a8844a;
  --line: rgba(184, 146, 79, 0.32);
  --gold-grad: linear-gradient(135deg, #8f6b2e 0%, #c9a66b 45%, #e3cb98 60%, #a07a38 100%);

  --serif: "EB Garamond", "EB Garamond Fallback", "Times New Roman", serif;
  --sans: "Lato", "Lato Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --container: 1200px;
  --pad: clamp(20px, 4vw, 40px);
  --section: clamp(80px, 10vw, 140px);
  --hh: 88px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hh) + 12px); scroll-padding-bottom: 104px; }
body {
  margin: 0; background: var(--white); color: var(--text);
  font-family: var(--sans); font-size: 1.125rem; line-height: 1.7; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, li { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-family: var(--serif); font-weight: 500; color: var(--ink); line-height: 1.12; letter-spacing: -0.01em; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, summary { touch-action: manipulation; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
::selection { background: var(--champagne); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 200; background: var(--ink); color: var(--white); padding: 12px 18px; font-weight: 600; }
.skip:focus { top: 12px; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section); }
/* Two sections on the same background read as one: no doubled gap between them */
.section:not(.bg-ivory):not(.bg-dark) + .section:not(.bg-ivory):not(.bg-dark), .section.bg-ivory + .section.bg-ivory, .section.bg-dark + .section.bg-dark { padding-top: 0; }
.bg-ivory { background: var(--ivory); }
.bg-dark { background: var(--dark); color: var(--on-dark-muted); }
.bg-dark h1, .bg-dark h2, .bg-dark h3 { color: var(--white); }

/* ---------- Type helpers ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep);
}
.kicker::before { content: ""; width: 36px; height: 1px; background: currentColor; }
.bg-dark .kicker, .hero .kicker, .cta-band .kicker { color: var(--gold-light); }
.title { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem); margin-top: 18px; }
.lead { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); color: var(--text); margin-top: 22px; max-width: 46em; }
.bg-dark .lead { color: var(--on-dark-muted); }
.center { text-align: center; }
.center .kicker { justify-content: center; }
.center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 30px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease), transform 500ms var(--ease-out);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); }
.btn:active { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(0.98); }
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%); transform: translateX(-120%); transition: transform 800ms var(--ease); }
.btn-gold:hover::after { transform: translateX(120%); }
.btn-gold { background: var(--champagne); color: var(--ink); border-color: var(--champagne-edge); }
.btn-gold:hover { background: var(--champagne-hi); }
.btn-line { border-color: rgba(255, 255, 255, 0.55); color: var(--white); }
.btn-line:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-dark-line { border-color: var(--ink); color: var(--ink); }
.btn-dark-line:hover { background: var(--ink); color: var(--white); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; padding-block: 11px; margin-block: -11px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep);
  transition: gap 250ms var(--ease), color 250ms var(--ease);
}
.link-arrow svg { width: 16px; height: 16px; }
.link-arrow:hover { gap: 16px; color: var(--ink); }
.bg-dark .link-arrow { color: var(--gold-light); }
.bg-dark .link-arrow:hover { color: var(--white); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--hh);
  background: var(--white); border-bottom: 1px solid rgba(184, 137, 58, 0.25);
  transition: height 300ms var(--ease), box-shadow 300ms var(--ease), transform 600ms var(--ease-out);
}
.site-header.hide { transform: translateY(-100%); }
.site-header.scrolled { --hh: 72px; box-shadow: 0 8px 30px rgba(16, 17, 19, 0.08); }
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { position: relative; isolation: isolate; display: inline-flex; }
.brand img { height: 58px; width: auto; transition: height 300ms var(--ease); mix-blend-mode: multiply; }
.site-header.scrolled .brand img { height: 48px; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav a:not(.btn) {
  position: relative; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); padding-block: 8px;
}
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease); }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--gold-deep); }
.nav .btn { min-height: 46px; padding: 0 22px; }
.menu-btn { display: none; min-width: 48px; height: 48px; align-items: center; justify-content: center; gap: 12px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.menu-btn .lbl { order: -1; }
.menu-btn span[aria-hidden], .menu-btn span[aria-hidden]::before, .menu-btn span[aria-hidden]::after { display: block; width: 26px; height: 2px; background: var(--ink); position: relative; content: ""; }
.menu-btn span[aria-hidden]::before { position: absolute; top: -8px; }
.menu-btn span[aria-hidden]::after { position: absolute; top: 8px; }

.nav-panel { position: fixed; inset: 0; z-index: 150; background: #000; color: var(--on-dark); display: flex; flex-direction: column; padding: 24px var(--pad) 40px; }
.nav-panel[hidden] { display: none; }
.nav-panel .top { display: flex; justify-content: space-between; align-items: center; height: 56px; }
.nav-panel .top img { height: 40px; width: auto; }
.nav-panel .close { min-width: 48px; min-height: 48px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); }
.nav-panel nav { margin-top: 40px; display: grid; }
.nav-panel nav a { font-family: var(--serif); font-size: 2.1rem; color: var(--white); padding-block: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.nav-panel:focus { outline: none; }
.nav-panel nav a[aria-current="page"] { color: var(--gold-light); }
.nav-panel .meta { margin-top: auto; font-size: 0.875rem; color: var(--on-dark-muted); }
.nav-panel .meta a { color: var(--gold-light); }

/* ---------- Hero (home) ---------- */
/* Deep graphite stage: a warm pool of light behind the copy, the partners' studio photo melting into the dark on every side */
.hero { position: relative; min-height: calc(100svh - var(--hh)); display: flex; align-items: center; color: var(--on-dark); overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 60% 70% at 18% 45%, #1d1e22 0%, rgba(29, 30, 34, 0) 70%), linear-gradient(180deg, #0f1012 0%, #0b0c0e 100%); }
/* Fine film grain gives the dark a printed, tactile finish */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.07; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* The wide studio photo keeps grey air on both sides of the partners, so the fades land on backdrop, never on a shoulder */
.hero-media {
  position: absolute; bottom: 0; z-index: -2; height: min(100%, 58vw, 1025px); aspect-ratio: 1500 / 1250; right: -2.5vw; clip-path: inset(0 0 0 2px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 1%, rgba(0, 0, 0, 0.45) 6%, #000 13%), radial-gradient(ellipse 85% 62% at 56% 62%, #000 66%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, transparent 1%, rgba(0, 0, 0, 0.45) 6%, #000 13%), radial-gradient(ellipse 85% 62% at 56% 62%, #000 66%, transparent 100%);
  mask-composite: intersect;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
/* Studio grey sinks toward the room's graphite at the edges; the partners stay in clean light */
.hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 52% 62% at 50% 40%, rgba(11, 12, 14, 0) 55%, rgba(11, 12, 14, 0.5) 100%), linear-gradient(90deg, rgba(11, 12, 14, 0.35) 0%, rgba(11, 12, 14, 0) 22%); }
.hero .container { padding-block: clamp(48px, 5vw, 80px); position: relative; z-index: 1; }
.hero-copy { max-width: 540px; position: relative; }
.hero .kicker { color: var(--gold-light); letter-spacing: 0.28em; }
.hero h1 { color: var(--white); font-size: clamp(2.6rem, 1.5rem + 2.9vw, 3.9rem); line-height: 1.04; margin-top: 22px; letter-spacing: -0.015em; }
.hero h1 em, .hero h1 em .wi { font-style: italic; color: var(--gold-light);
  background: linear-gradient(100deg, #b98d45 0%, #e9cf98 38%, #f6e3b4 50%, #d4b27a 64%, #a8823f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: 0.06em; }
.hero .lead { color: #cfc8bc; margin-top: 26px; max-width: 32em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-facts { position: relative; display: flex; flex-wrap: wrap; gap: 14px 0; margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(212, 182, 124, 0.28); }
.hero-facts div { display: grid; padding-inline: 0 36px; }
.hero-facts div + div { padding-left: 36px; border-left: 1px solid rgba(212, 182, 124, 0.28); }
.hero-facts b { font-family: var(--serif); font-size: 2.2rem; font-weight: 500; color: var(--gold-light); line-height: 1.1; }
.hero-facts span { margin-top: 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-muted); }

/* ---------- Page hero (inner) ---------- */
.page-hero { position: relative; background: var(--paper); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--ivory-2); }
.page-hero::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 48%); z-index: -1; background: url("../assets/img/kv-right.jpg") left center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.page-hero.has-photo h1 { max-width: 10em; }
.page-hero.has-photo .lead { max-width: 34em; }
.page-hero.has-photo::before { background: var(--ph-img) center 22% / cover no-repeat; width: min(640px, 50%); }
.page-hero .container { padding-block: clamp(72px, 9vw, 128px) clamp(64px, 8vw, 104px); }
.crumbs { display: flex; gap: 10px; font-size: 0.9375rem; font-weight: 500; color: var(--muted); }
.crumbs a:hover { color: var(--gold-deep); }
.crumbs span[aria-hidden] { color: var(--gold-deep); }
.page-hero h1 { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.5rem); margin-top: 22px; max-width: 14em; }
.page-hero .lead { max-width: 40em; }

/* ---------- Stats band ---------- */
.stats { background: var(--ivory); border-bottom: 1px solid var(--ivory-2); }
.stats ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats li { padding: clamp(28px, 4vw, 44px) 24px; text-align: center; border-left: 1px solid rgba(184, 137, 58, 0.25); }
.stats li:first-child { border-left: 0; }
.stats b { display: block; font-family: var(--serif); font-size: clamp(2.4rem, 1.6rem + 2vw, 3.4rem); font-weight: 500; color: var(--ink); line-height: 1; }
.stats span { display: block; margin-top: 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* ---------- Split (about) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media { position: relative; }
.split-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split-media::after { content: ""; position: absolute; inset: 24px -24px -24px 24px; border: 1px solid var(--gold); z-index: -1; }
.split-media { isolation: isolate; }
.split-media .badge {
  position: absolute; left: -1px; bottom: 32px; background: var(--dark); color: var(--white); padding: 22px 28px; max-width: 70%;
}
.split-media .badge b { display: block; font-family: var(--serif); font-size: 2.4rem; font-weight: 500; line-height: 1; color: var(--gold-light); }
.split-media .badge span { display: block; margin-top: 8px; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-muted); }
.split-copy p + p { margin-top: 1.1em; }
.split-copy .lead + p { margin-top: 1.1em; }
.split-copy .actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.sign { margin-top: 30px; font-family: var(--serif); font-size: 1.5rem; font-style: italic; color: var(--ink); line-height: 1.35; }

/* ---------- Practice areas ---------- */
.areas-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 64px; align-items: end; margin-bottom: 56px; }
.areas-head .lead { max-width: 36em; margin-top: 0; }
.areas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(184, 137, 58, 0.35); }
.area-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease); }
.area-card:hover::before { transform: scaleX(1); }
.area-card { position: relative; padding: clamp(32px, 4vw, 52px); display: flex; flex-direction: column; overflow: hidden; }
.area-card.feature { background: var(--dark); color: var(--on-dark-muted); }
.area-card.gold { background: var(--dark-2); color: var(--on-dark-muted); }
.area-card.gold.alt { background: var(--dark-3); }
.area-card .icon { width: 48px; height: 48px; color: var(--gold-light); }
.area-card.gold .icon { color: var(--gold-light); }
.area-card h3 { font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); color: var(--white); margin-top: 26px; }

.area-card .tag { display: block; margin-top: 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-light); }
.area-card.gold .tag { color: var(--gold-light); }
.area-card p { margin-top: 20px; }
.area-card ul { margin-top: 22px; display: grid; gap: 6px; }

.area-card li { position: relative; padding-left: 18px; font-size: 0.9375rem; }
.area-card li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 7px; height: 1px; background: currentColor; }
.area-card .foot { margin-top: auto; padding-top: 32px; }
.area-card .foot .link-arrow { color: var(--gold-light); }
.area-card.feature .foot .link-arrow { color: var(--gold-light); }
.area-card .foot .link-arrow:hover { color: var(--white); }
.area-card .ghost { position: absolute; right: -40px; bottom: -40px; width: 260px; opacity: 0.06; pointer-events: none; }

/* ---------- Values ---------- */
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: 64px; }
.value { padding-top: 28px; border-top: 1px solid rgba(184, 137, 58, 0.45); }
.value svg { width: 40px; height: 40px; color: var(--gold); }
.value h3 { font-size: 1.6rem; margin-top: 18px; }
.value p { margin-top: 10px; font-size: 0.9375rem; color: var(--muted); }

/* ---------- Team ---------- */
.team-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 56px; }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.member { display: block; }
.member .ph { position: relative; overflow: hidden; background: var(--dark-2); }
.member .ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; transition: transform 900ms var(--ease); }
.member:hover .ph img { transform: scale(calc(var(--z, 1) * 1.04)); }
.member .ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.member:hover .ph::after { transform: scaleX(1); }
.member .info { padding-top: 22px; }
.member .role { display: block; margin-top: 6px; font-size: 0.9375rem; font-weight: 500; line-height: 1.5; color: var(--gold-deep); }
.bg-dark .member .role { color: var(--gold-light); }
.member h3 { font-size: 1.9rem; }
.member .oab { margin-top: 4px; font-size: 0.875rem; color: var(--muted); }
.bg-dark .member .oab { color: var(--on-dark-muted); }

/* ---------- Units ---------- */
.units-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.unit, .contact-card { transition: transform 400ms var(--ease), box-shadow 400ms var(--ease); }
@media (hover: hover) { .unit:hover, .contact-card:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(16, 17, 19, 0.1); } }
.unit { background: var(--white); padding: 32px 28px; display: flex; flex-direction: column; border-top: 3px solid var(--gold); box-shadow: 0 10px 40px rgba(16, 17, 19, 0.06); }
.unit > svg { width: 28px; height: 28px; color: var(--gold); }
.unit h3 { font-size: 1.6rem; margin-top: 16px; }
.unit .city { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); margin-top: 2px; }
.unit address { font-style: normal; margin-top: 16px; font-size: 0.9375rem; line-height: 1.65; color: var(--text); }
.unit .link-arrow { margin-top: auto; padding-top: 22px; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; background: var(--dark); color: var(--on-dark-muted); overflow: hidden; isolation: isolate; }
.cta-band { border-top: 1px solid rgba(216, 180, 104, 0.35); }
.cta-alt { margin-top: 16px; max-width: 40em; }
.cta-alt a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.cta-alt a:hover { color: var(--white); }
.cta-band .container { padding-block: clamp(72px, 8vw, 112px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px 64px; }
.cta-band h2 { color: var(--white); font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem); max-width: 16em; margin-top: 16px; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Footer ---------- */
.site-footer { background: #000; color: var(--on-dark-muted); font-size: 0.9375rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.site-footer .top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px; padding-block: 88px 64px; }
.site-footer .logo img { height: 56px; width: auto; }
.site-footer .about { margin-top: 24px; max-width: 26em; line-height: 1.7; }
.site-footer .ft { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 18px; }
.site-footer li + li { margin-top: 8px; }
.site-footer a { transition: color 200ms var(--ease); }
.site-footer a:hover { color: var(--white); }
.site-footer address { font-style: normal; line-height: 1.6; }
.site-footer address + address { margin-top: 14px; }
.site-footer address b { display: block; color: var(--on-dark); font-weight: 600; }
.social { display: flex; gap: 10px; margin-top: 22px; }
.social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(216, 180, 104, 0.45); color: var(--gold-light); transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.social a:hover { background: var(--champagne); color: var(--ink); border-color: var(--champagne); }
.social svg { width: 18px; height: 18px; }
.site-footer .bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-block: 28px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 0.875rem; }
.site-footer .bottom p { max-width: 70ch; }

/* ---------- WhatsApp float ---------- */
.wa {
  position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 62px; height: 62px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: #25d366; color: var(--white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); transition: transform 300ms var(--ease);
}
.wa:hover { background: #1ebe5b; }
.wa svg { width: 32px; height: 32px; }
.wa { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); }
.wa:hover { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1.06); }
.wa.is-hidden { opacity: 0; transform: scale(0.6); pointer-events: none; }
.wa { transition: transform 500ms var(--ease-out), opacity 300ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease); }

/* ---------- Inner page blocks ---------- */
.area-tag { display: block; margin-top: 14px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); }
.partners-h { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(184, 137, 58, 0.3); font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.partners { margin-top: 16px; display: grid; gap: 14px; }
.partners a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; }
.partners img { width: 64px; height: 80px; object-fit: cover; object-position: 50% 18%; }
.partners b { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink); line-height: 1.2; transition: color 200ms var(--ease); }
.partners span { font-size: 0.875rem; color: var(--muted); }
.partners a:hover b { color: var(--gold-deep); }
.prose p { max-width: 44em; }
.prose p + p { margin-top: 1.1em; }
.timeline { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(184, 137, 58, 0.45); }
.timeline li { position: relative; padding: 36px 28px 0 0; }
.timeline li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); }
.timeline b { display: block; font-family: var(--serif); font-size: 1.9rem; font-weight: 500; color: var(--ink); line-height: 1.1; }
.timeline p { margin-top: 10px; font-size: 0.9375rem; color: var(--muted); }
.mvv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(184, 137, 58, 0.3); margin-top: 56px; }
.mvv > div { background: var(--dark-2); padding: clamp(32px, 4vw, 48px); }
.mvv h3 { font-size: 2rem; color: var(--white); }
.mvv p { margin-top: 14px; color: var(--on-dark-muted); }
.mvv ul { margin-top: 14px; display: grid; gap: 6px; }
.mvv li::before { content: "—  "; color: var(--gold-light); }

.area-index { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(48px, 6vw, 80px); }
.area-index a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid rgba(184, 137, 58, 0.45); font-size: 0.875rem; font-weight: 600; color: var(--ink); transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.area-index a:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.area-detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.area-detail + .area-detail { margin-top: var(--section); padding-top: var(--section); border-top: 1px solid rgba(184, 137, 58, 0.3); }
.area-detail .side { position: sticky; top: calc(var(--hh) + 32px); }
.area-detail .side .num { font-family: var(--serif); font-size: 1.1rem; font-style: italic; color: var(--gold-deep); }
.area-detail .side h2 { font-size: clamp(2.6rem, 1.6rem + 3vw, 4rem); margin-top: 8px; }
.area-detail .side img { margin-top: 32px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(184, 137, 58, 0.3); margin-top: 36px; }
.topics li { background: var(--white); padding: 26px 26px 28px; }
.topics li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bg-ivory .topics li { background: var(--ivory); }
.topics b { display: block; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.topics span { display: block; margin-top: 8px; font-size: 0.9375rem; color: var(--muted); line-height: 1.6; }

.profile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.profile + .profile { margin-top: var(--section); }
.profile.reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.profile.reverse .profile-media { order: 2; }
.profile-media { position: relative; isolation: isolate; }
.profile-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; }
.profile-media::after { content: ""; position: absolute; inset: 24px -24px -24px 24px; border: 1px solid var(--gold); z-index: -1; }
.profile.reverse .profile-media::after { inset: 24px 24px -24px -24px; }
.profile h2 { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); margin-top: 14px; }
.profile .oab { margin-top: 10px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); }
.profile .bio { margin-top: 28px; }
.profile .bio p + p { margin-top: 1.1em; }
.profile dl { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(184, 137, 58, 0.3); }
.profile dl div { background: var(--ivory); padding: 20px 22px; }
.bg-ivory .profile dl div { background: var(--white); }
.profile dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.profile dd { margin-top: 6px; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); line-height: 1.25; }

.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contact-card { background: var(--white); padding: 36px 32px; border-top: 3px solid var(--gold); box-shadow: 0 10px 40px rgba(16, 17, 19, 0.06); display: flex; flex-direction: column; }
.contact-card > svg { width: 30px; height: 30px; color: var(--gold); }
.contact-card h2 { font-size: 1.7rem; margin-top: 16px; }
.contact-card p { margin-top: 8px; color: var(--muted); font-size: 0.9375rem; }
.contact-card .contact-value { margin-top: 18px; font-weight: 600; color: var(--ink); word-break: break-word; }
.contact-card .contact-value a { color: inherit; text-decoration: none; line-height: 1.7; }
.contact-card .contact-value a:hover { color: var(--gold); }
.contact-card .card-actions { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- First contact ---------- */
.fc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.fc-head .title { margin-top: 0; }
.fc-seal { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; color: var(--ink); font-weight: 500; max-width: 30em; }
.fc-seal svg { width: 26px; height: 26px; flex: none; color: var(--gold-deep); margin-top: 2px; }
.fc-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }
.fc-steps { counter-reset: step; display: grid; gap: 0; }
.fc-steps li { counter-increment: step; position: relative; padding: 28px 0 28px 84px; border-top: 1px solid rgba(184, 137, 58, 0.35); }
.fc-steps li:last-child { border-bottom: 1px solid rgba(184, 137, 58, 0.35); }
.fc-steps li::before { content: counter(step); position: absolute; left: 0; top: 18px; font-family: var(--serif); font-size: 3.2rem; line-height: 1; color: var(--gold); }
.fc-steps b { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; color: var(--ink); line-height: 1.2; }
.fc-steps p { margin-top: 8px; color: var(--muted); }
.bg-dark .fc-seal { color: var(--on-dark); }
.bg-dark .fc-steps b { color: var(--white); }
.bg-dark .fc-steps p { color: var(--on-dark-muted); }

/* ---------- Where (home) ---------- */
.where-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.where-grid .title { margin-top: 0; }
.where-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(184, 137, 58, 0.3); }
.where-list li { background: var(--ivory); }
.where-list a { padding: 28px 26px; display: grid; gap: 4px; height: 100%; transition: background-color 250ms var(--ease); }
.where-list a:hover { background: var(--white); }
.where-list .go { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); }
.where-list .go svg { width: 16px; height: 16px; margin: 0; color: currentColor; }
.where-list svg { width: 24px; height: 24px; color: var(--gold-deep); margin-bottom: 8px; }
.where-list b { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; color: var(--ink); line-height: 1.2; }
.where-list span { font-size: 0.9375rem; color: var(--muted); }

/* ---------- Privacy policy ---------- */
.legal { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--hh) + 32px); }
.legal-date { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); }
.legal-toc ol { margin-top: 18px; counter-reset: toc; border-top: 1px solid rgba(184, 137, 58, 0.3); }
.legal-toc li { counter-increment: toc; border-bottom: 1px solid rgba(184, 137, 58, 0.3); }
.legal-toc a { display: flex; gap: 14px; padding-block: 10px; font-size: 0.9375rem; color: var(--text); transition: color 200ms var(--ease); }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--gold-deep); font-weight: 600; }
.legal-toc a:hover { color: var(--gold-deep); }
.legal-block + .legal-block { margin-top: 48px; padding-top: 48px; border-top: 1px solid rgba(184, 137, 58, 0.25); }
.legal-block h2 { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); }
.legal-block p, .legal-block ul { margin-top: 16px; max-width: 44em; }
.legal-block ul { display: grid; gap: 8px; }
.legal-block li { position: relative; padding-left: 22px; }
.legal-block li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: var(--gold); }
.legal-block strong { color: var(--ink); }
.legal-block a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.todo { background: #fbecc4; color: var(--ink); padding: 0 4px; }
.ft-legal { margin-left: 10px; color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .legal { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .ft-legal { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0; }
}

.panel-cta { margin-top: 32px; width: 100%; }
.ft-note { margin-top: 14px; color: var(--on-dark-muted); }

/* ---------- Smooth scroll, frames, progress ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.frame { position: relative; overflow: hidden; }
.progress { position: fixed; left: 0; top: 0; z-index: 130; width: 100%; height: 2px; background: var(--gold-grad); transform: scaleX(var(--p, 0)); transform-origin: left; pointer-events: none; }
.topics li { transition: background-color 400ms var(--ease); }
.topics li:hover { background: var(--ivory); }
.bg-ivory .topics li:hover { background: var(--white); }

/* ---------- LED backlight behind photos ---------- */
/* A band of gold light glows past the edges of each photo; main.js adds the .led layer and sends the band right as the
   page scrolls down and back left as it scrolls up. The band moves by transform, so phones slide it on the GPU without repainting. */
.member { position: relative; isolation: isolate; }
.led { --fx: 24px; --fy: 24px; position: absolute; inset: calc(var(--fy) * -1) calc(var(--fx) * -1); z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fx), #000 calc(100% - var(--fx)), transparent 100%), linear-gradient(180deg, transparent 0, #000 var(--fy), #000 calc(100% - var(--fy)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fx), #000 calc(100% - var(--fx)), transparent 100%), linear-gradient(180deg, transparent 0, #000 var(--fy), #000 calc(100% - var(--fy)), transparent 100%);
  mask-composite: intersect; }
.led i { position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(90deg, rgba(201, 158, 80, 0) 0%, rgba(201, 158, 80, 0.55) 30%, rgba(214, 176, 104, 1) 50%, rgba(201, 158, 80, 0.55) 70%, rgba(201, 158, 80, 0) 100%);
  transform: translate3d(-100%, 0, 0); transition: transform 5.5s cubic-bezier(0.33, 0, 0.67, 1); will-change: transform; }
.led.on i { transform: translate3d(222.3%, 0, 0); }
.member > .led { --fx: 16px; --fy: 16px; inset: auto; top: -16px; left: -16px; width: calc(100% + 32px); aspect-ratio: 4 / 5; }
.member > .led i { background: linear-gradient(90deg, rgba(232, 204, 140, 0) 0%, rgba(232, 204, 140, 0.55) 30%, rgba(240, 214, 152, 1) 50%, rgba(232, 204, 140, 0.55) 70%, rgba(232, 204, 140, 0) 100%); }
/* The Home photo of the three partners glows stronger and wider */
.split-media:has(img[src*="equipe-banco"]) > .led { --fx: 36px; --fy: 36px; }
.split-media:has(img[src*="equipe-banco"]) > .led i { width: 50%;
  background: linear-gradient(90deg, rgba(214, 172, 92, 0) 0%, rgba(214, 172, 92, 0.85) 28%, rgba(236, 200, 124, 1) 50%, rgba(214, 172, 92, 0.85) 72%, rgba(214, 172, 92, 0) 100%); }
.split-media:has(img[src*="equipe-banco"]) > .led.on i { transform: translate3d(200%, 0, 0); }
@media (max-width: 860px) {
  .split-media > .led, .profile-media > .led { --fx: 12px; --fy: 20px; }
  .split-media:has(img[src*="equipe-banco"]) > .led { --fx: 18px; --fy: 30px; }
  .member > .led { --fx: 12px; --fy: 12px; top: 50%; left: -12px; width: 120px; height: 144px; margin-top: -72px; aspect-ratio: auto; }
}
/* Without motion a resting band reads as a stain on the photo, so the light is simply left out */
@media (prefers-reduced-motion: reduce) { .led { display: none; } }

/* Hairlines between grid cells belong to the cells, so a cell still waiting to fade in leaves no gold block behind */
.areas-grid, .topics, .mvv, .where-list { background: none; }
.areas-grid > *, .topics li, .mvv > div, .where-list li { box-shadow: 0 0 0 1px rgba(184, 137, 58, 0.3); }
html { -webkit-tap-highlight-color: transparent; }

/* iPhone edges: content clears the notch and the home bar now that the page runs edge to edge (viewport-fit=cover) */
.container { padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right)); }
.site-footer .bottom { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.nav-panel { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }

/* Touch screens get a quiet press response in place of hover */
@media (hover: none) {
  .area-card, .unit, .contact-card, .topics li, .where-list a, .member, .area-index a { transition: transform 250ms var(--ease), background-color 250ms var(--ease); }
  .area-card:active, .unit:active, .contact-card:active, .where-list a:active, .member:active { transform: scale(0.985); }
  .area-index a:active { background: var(--ink); color: var(--white); }
}

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translate3d(0, 24px, 0); filter: blur(4px); transition: opacity 1100ms var(--ease-out) var(--d, 0ms), transform 1300ms var(--ease-out) var(--d, 0ms), filter 1100ms var(--ease-out) var(--d, 0ms); }
  html.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
  html.js .words[data-reveal] { transform: none; filter: none; }

  /* A round glow of gold light travels behind the logo when the site opens, and the logo settles in from a slight zoom */
  .brand::before { content: ""; position: absolute; top: 50%; left: -46px; width: 92px; height: 92px; margin-top: -46px; z-index: -1; pointer-events: none; opacity: 0; border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 206, 136, 1) 0%, rgba(226, 188, 112, 0.75) 32%, rgba(222, 186, 112, 0.25) 56%, rgba(222, 186, 112, 0) 72%);
    filter: blur(4px) saturate(1.3);
    animation: brand-orb 3.4s cubic-bezier(0.4, 0, 0.3, 1) 0.9s both; }
  @keyframes brand-orb {
    0% { left: -46px; opacity: 0; }
    18% { opacity: 1; }
    74% { opacity: 1; }
    100% { left: calc(100% - 46px); opacity: 0; }
  }
  .brand:hover::before { animation: brand-orb-again 2.8s cubic-bezier(0.4, 0, 0.3, 1) both; }
  @keyframes brand-orb-again {
    0% { left: -46px; opacity: 0; }
    18% { opacity: 1; }
    74% { opacity: 1; }
    100% { left: calc(100% - 46px); opacity: 0; }
  }
  .brand img { animation: brand-zoom 1.4s var(--ease-out) 0.15s both; }
  @keyframes brand-zoom { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }

  /* Hero: a band of light sweeps left to right without end, behind the copy and softly across the partners */
  .hero::after { content: ""; position: absolute; top: 50%; left: 0; width: min(46vw, 640px); aspect-ratio: 1; margin-top: calc(min(46vw, 640px) / -2); z-index: -1; pointer-events: none; border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 226, 178, 0.55) 0%, rgba(232, 204, 140, 0.28) 30%, rgba(232, 204, 140, 0.08) 55%, rgba(232, 204, 140, 0) 70%);
    mix-blend-mode: screen; filter: blur(10px); transform: translateX(-60%);
    animation: hero-orb 9s cubic-bezier(0.45, 0, 0.25, 1) 1.2s infinite; }
  @keyframes hero-orb {
    0% { transform: translateX(-60%); opacity: 0; }
    10% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateX(calc(100vw + 10%)); opacity: 0; }
  }

  /* Words rise from behind a mask */
  .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.05em 0.12em; margin: 0 -0.05em -0.12em; }
  html.js .w > .wi { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform 1200ms var(--ease-out) calc(var(--d, 0ms) + var(--wi) * 55ms); }
  html.js .in .w > .wi { transform: none; }

  /* Hero photo settles from a slow zoom and drifts with the scroll */
  @property --hs { syntax: "<number>"; inherits: false; initial-value: 1.06; }
  .hero-media img { transform: translate3d(0, var(--py, 0px), 0) scale(var(--hs)); animation: hero-settle 2.6s var(--ease-out) both; }
  @keyframes hero-settle { from { --hs: 1.2; } to { --hs: 1.06; } }

  /* Portraits drift inside their frames */
  .frame img { transform: translate3d(0, var(--py, 0px), 0) scale(var(--z, 1.08)); transform-origin: 50% 8%; }
  .member .ph img { transform: scale(var(--z, 1)); }
  .page-hero::before { top: -80px; bottom: -80px; transform: translate3d(0, var(--py, 0px), 0); }

  /* A soft light follows the cursor on cards */
  .area-card::after, .unit::after, .contact-card::after, .topics li::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 500ms var(--ease); background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(184, 146, 79, 0.12), transparent 60%); }
  .area-card::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 182, 124, 0.14), transparent 60%); }
  .area-card:hover::after, .unit:hover::after, .contact-card:hover::after, .topics li:hover::after { opacity: 1; }
  .unit, .contact-card, .topics li { position: relative; overflow: hidden; }

  /* The one authored moment: the hero opens like a curtain, the copy comes into focus */
  .hero-media { animation: hero-wipe 1.6s var(--ease) 0.1s both; }
  @keyframes hero-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 2px); } }
  html.js .hero [data-reveal] { filter: blur(8px); transition: opacity 1100ms var(--ease) var(--d, 0ms), transform 1100ms var(--ease) var(--d, 0ms), filter 1100ms var(--ease) var(--d, 0ms); }
  html.js .hero [data-reveal].in { filter: none; }
  html.js .hero-facts { border-top-color: transparent; }
  html.js .hero-facts::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(212, 182, 124, 0.28); transform: scaleX(0); transform-origin: left; transition: transform 1400ms var(--ease) 400ms; }
  html.js .hero-facts.in::before { transform: scaleX(1); }

  /* Portraits unveil upward as they enter */
  html.js .split-media[data-reveal] .frame, html.js .profile-media[data-reveal] .frame, html.js .member[data-reveal] .ph { clip-path: inset(100% 0 0 0); transition: clip-path 1500ms var(--ease-out) calc(var(--d, 0ms) + 120ms); }
  html.js .split-media[data-reveal].in .frame, html.js .profile-media[data-reveal].in .frame, html.js .member[data-reveal].in .ph { clip-path: inset(0 0 0 0); }

  /* Mobile menu slides its links in */
  .nav-panel:not([hidden]) { animation: panel-in 360ms var(--ease) both; }
  .nav-panel:not([hidden]) nav a, .nav-panel:not([hidden]) .panel-cta { animation: item-in 600ms var(--ease) both; }
  .nav-panel:not([hidden]) nav a:nth-child(2) { animation-delay: 50ms; }
  .nav-panel:not([hidden]) nav a:nth-child(3) { animation-delay: 100ms; }
  .nav-panel:not([hidden]) nav a:nth-child(4) { animation-delay: 150ms; }
  .nav-panel:not([hidden]) nav a:nth-child(5) { animation-delay: 200ms; }
  .nav-panel:not([hidden]) .panel-cta { animation-delay: 260ms; }
  @keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes item-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

  /* Soft cross-fade between pages (Chrome, Edge, Safari 18+) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 220ms ease both; }
  ::view-transition-new(root) { animation: vt-in 420ms var(--ease) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

  /* Phones and tablets: lighter reveals (no blur, which stutters on mobile GPUs) and the hero light floats over the partners */
  @media (max-width: 1080px) {
    html.js [data-reveal], html.js .hero [data-reveal] { filter: none; transform: translate3d(0, 18px, 0); transition: opacity 900ms var(--ease-out) var(--d, 0ms), transform 1000ms var(--ease-out) var(--d, 0ms); }
    html.js [data-reveal].in, html.js .hero [data-reveal].in { transform: none; }
    .hero-media { animation-name: hero-wipe-full; }
    @keyframes hero-wipe-full { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
    .hero::after { top: 6%; margin-top: 0; width: min(88vw, 620px); z-index: 1;
      background: radial-gradient(circle, rgba(246, 226, 178, 0.42) 0%, rgba(232, 204, 140, 0.2) 30%, rgba(232, 204, 140, 0.06) 55%, rgba(232, 204, 140, 0) 70%);
      animation-duration: 7s; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .profile dl { grid-template-columns: 1fr; }
  .profile dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 22px; }
  .profile dd { margin-top: 0; text-align: right; }
}
@media (max-width: 1240px) {
  .nav { gap: 18px; }
  .nav a:not(.btn) { letter-spacing: 0.04em; }
}
@media (max-width: 1080px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-media { position: relative; inset: auto; z-index: 0; width: 100%; height: auto; aspect-ratio: 16 / 10; max-height: 62svh; transform: none; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%); mask-image: linear-gradient(180deg, #000 80%, transparent 99%); overflow: hidden; }
  .hero .kicker { letter-spacing: 0.2em; }
  .hero .kicker::before { display: none; }
  .hero-media::after { background: linear-gradient(180deg, rgba(16, 17, 19, 0) 55%, var(--dark) 100%); }
  .hero-media img { position: absolute; inset: 0; object-position: 50% 15%; }
  .hero .container { padding-block: 8px 64px; }
  .hero { background: var(--dark); }
  .hero-media { clip-path: none; }
  .hero-copy { max-width: 720px; }
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .units-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  :root { --hh: 72px; }
  .brand img, .site-header.scrolled .brand img { height: 48px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .hero::before { display: none; }
  .hero-media { position: relative; inset: auto; z-index: 0; aspect-ratio: 1100 / 1000; max-height: none; }
  .hero-media::before { display: none; }
  .hero-media::after { content: ""; position: absolute; top: auto; left: 0; right: 0; bottom: 0; height: 35%; background: linear-gradient(180deg, rgba(16, 17, 19, 0) 0%, var(--dark) 94%); }
  .hero-media img { position: absolute; inset: 0; object-position: 50% 12%; }
  .hero .container { padding-block: 8px 56px; }
  .stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li:nth-child(3) { border-left: 0; }
  .stats li:nth-child(n + 3) { border-top: 1px solid rgba(184, 137, 58, 0.25); }
  .split, .area-detail, .profile, .profile.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-media, .profile.reverse .profile-media { order: 0; }
  .split-media::after, .profile-media::after { inset: 16px -12px -16px 12px !important; }
  .areas-grid { grid-template-columns: 1fr; }
  .areas-head, .fc-grid, .where-grid { grid-template-columns: 1fr; }
  .hero-copy { display: flex; flex-direction: column; }
  .hero-copy .hero-actions { order: 2; margin-top: 28px; }
  .hero-copy .lead { order: 3; }
  .hero-copy .hero-facts { order: 4; }
  .site-footer .bottom { padding-bottom: 96px; }
  .area-card.feature { grid-row: auto; }
  .area-card.feature ul { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; gap: 0; }
  .member { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; padding-block: 18px; border-top: 1px solid rgba(216, 180, 104, 0.2); }
  .member:last-child { border-bottom: 1px solid rgba(216, 180, 104, 0.2); }
  .member .ph img { aspect-ratio: 4 / 5; }
  .member .info { padding-top: 0; }
  .member h3 { font-size: 1.6rem; }
  .cta-band .container { grid-template-columns: 1fr; align-items: start; }
  .page-hero.has-photo::before { display: none; }
  .timeline { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .mvv { grid-template-columns: 1fr; }
  .area-detail .side { position: static; }
  .topics { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .where-list { grid-template-columns: 1fr; }
  .fc-steps li { padding-left: 64px; }
  .fc-steps li::before { font-size: 2.6rem; }
  :root { --section: 64px; }
  .area-detail + .area-detail { margin-top: 56px; padding-top: 56px; }
  .units-grid, .values { grid-template-columns: 1fr; }
  .site-footer .top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "brand brand" "nav units" "contact contact"; gap: 36px 20px; padding-block: 56px 40px; }
  .site-footer .top > :nth-child(1) { grid-area: brand; }
  .site-footer .top > :nth-child(2) { grid-area: nav; }
  .site-footer .top > :nth-child(3) { grid-area: contact; }
  .site-footer .top > :nth-child(4) { grid-area: units; }
  .site-footer .logo img { height: 48px; }
  .site-footer .ft { margin-bottom: 8px; }
  .btn { padding: 0 20px; gap: 10px; letter-spacing: 0.05em; }
  .contact-card, .unit { padding: 30px 22px; }
  .page-hero .container { padding-block: 48px 44px; }
  .areas-head, .team-head { margin-bottom: 36px; }
  .split-media .badge { padding: 16px 20px; }
  .split-media .badge b { font-size: 2rem; }
  .timeline { grid-template-columns: 1fr; }
  .hero-actions .btn, .cta-band .btn, .fc-actions .btn, .area-detail .btn, .card-actions .btn { width: 100%; }
  .site-footer li + li { margin-top: 0; }
  .site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
  .hero-facts { gap: 18px 28px; }
  .wa { right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: 56px; height: 56px; }
}