/* ============================================================================
   STAGE 3 — COMPONENTS
   ========================================================================= */

/* ---------------------------------------------------------------- BUTTONS */

.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink);
  display:inline-flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-5);
  min-height:48px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:var(--border) solid var(--btn-bd);
  border-radius:var(--radius);
  font-size:var(--fs-sm); font-weight:var(--fw-semi);
  letter-spacing:-0.005em;
  line-height:var(--lh-ui);
  cursor:pointer;
  transition:background var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease),
             color var(--dur-1) var(--ease),
             transform var(--dur-1) var(--ease);
}
.btn:hover{ --btn-bg:var(--burgundy); --btn-bd:var(--burgundy); }
.btn:active{ --btn-bg:var(--burgundy-deep); --btn-bd:var(--burgundy-deep); transform:translateY(1px); }

.btn--accent{ --btn-bg:var(--burgundy); --btn-bd:var(--burgundy); }
.btn--accent:hover{ --btn-bg:var(--burgundy-lift); --btn-bd:var(--burgundy-lift); }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--line-strong); }
.btn--ghost:hover{ --btn-bg:transparent; --btn-fg:var(--accent); --btn-bd:var(--accent); }
.is-dark .btn--ghost{ --btn-fg:var(--d-text); --btn-bd:var(--d-line-strong); }
.is-dark .btn--ghost:hover{ --btn-fg:#fff; --btn-bd:#fff; }

.btn--onDark{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff; }
.btn--onDark:hover{ --btn-bg:var(--burgundy); --btn-fg:#fff; --btn-bd:var(--burgundy); }

.btn--lg{ min-height:56px; padding:var(--space-4) var(--space-6); font-size:var(--fs-body); }
.btn--block{ display:flex; width:100%; justify-content:center; }

/* Pill CTA. The boxy filled rectangle was the single most dating element in
   the header; the softer silhouette also agrees with the 10px media radius. */
.btn--pill{
  border-radius:var(--radius-pill);
  min-height:44px;
  padding:var(--space-2) var(--space-3) var(--space-2) var(--space-5);
  gap:var(--space-3);
  font-family:var(--font-display);
  font-size:0.9375rem;
  letter-spacing:-0.012em;
}
/* The arrow gets its own disc, so the button reads as an action, not a label */
.btn--pill .btn__arrow{
  display:grid; place-items:center;
  width:28px; height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  transition:background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.btn--pill:hover .btn__arrow{ background:rgba(255,255,255,.28); transform:translateX(2px); }
.btn--pill.btn--onDark .btn__arrow{ background:rgba(17,18,20,.10); }
.btn--pill.btn--onDark:hover .btn__arrow{ background:rgba(255,255,255,.24); }

/* Arrow that advances on hover — the "outpace" micro-gesture */
.btn__arrow{ transition:transform var(--dur-2) var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

/* Text link with a rule that draws in from the left */
.tlink{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-weight:var(--fw-semi); font-size:var(--fs-sm);
  padding-bottom:2px;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-size:0% 1px;
  background-position:0 100%;
  transition:background-size var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
}
.tlink:hover{ color:var(--accent); background-size:100% 1px; }
.is-dark .tlink:hover{ color:var(--focus-on-dark); }
.tlink .btn__arrow{ transition:transform var(--dur-2) var(--ease); }
.tlink:hover .btn__arrow{ transform:translateX(4px); }

/* ------------------------------------------------------------------- HERO */
/* The hero was a single column in a 12-col grid, which left the right third
   empty and made the page read as a lead-capture landing rather than a firm.
   Two columns: the claim on the left, the evidence on the right.          */

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,0.65fr);
  gap:var(--space-9) var(--space-10);
  align-items:center;
}
@media (max-width:1080px){
  .hero__grid{ grid-template-columns:1fr; gap:var(--space-8); }
}

.hero__panel{
  padding:var(--space-6);
  border:var(--border) solid var(--d-line);
  border-radius:var(--radius-media);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}

.hero__stats{ margin:var(--space-5) 0 0; display:flex; flex-direction:column; }
.hero__stat{
  padding-block:var(--space-4);
  border-top:var(--border) solid var(--d-line);
}
.hero__stat:first-child{ border-top:0; padding-top:0; }
.hero__stat dt{ display:flex; align-items:baseline; gap:var(--space-2); }
.hero__stat dd{ margin:var(--space-1) 0 0; font-size:var(--fs-sm); }

.hero__stat-n{
  font-family:var(--font-display);
  font-size:clamp(2rem,3.2vw,2.75rem);
  font-weight:var(--fw-semi);
  line-height:1;
  letter-spacing:var(--ls-display);
  font-variant-numeric:tabular-nums;
  color:var(--d-text);
}

.hero__panel-foot{
  margin-top:var(--space-5);
  padding-top:var(--space-4);
  border-top:var(--border) solid var(--d-line);
  color:var(--d-text-faint);
}

/* phase strip */
.hero__phases{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--grid-gap);
  margin-top:var(--space-10);
  padding-top:var(--space-6);
  border-top:var(--border) solid var(--d-line);
}
@media (max-width:760px){ .hero__phases{ grid-template-columns:1fr; gap:var(--space-5); } }

.hero__phase{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2) var(--space-3); }
.hero__phase-name{
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  font-weight:var(--fw-semi);
  letter-spacing:var(--ls-heading);
}
.hero__phase-claim{ font-size:var(--fs-sm); flex:1 1 100%; }

/* ----------------------------------------------------------------- HEADER */

.header{
  position:fixed; inset:0 0 auto 0;
  z-index:var(--z-header);
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:var(--border) solid transparent;
  transition:background var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease),
             height var(--dur-2) var(--ease);
}
.header__inner{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-6);
}
/* Once scrolled, the header is always the light bar — on every page, over
   every section. A dark stuck bar over light content was both inconsistent
   and, on the dark-hero pages, invisible: the light-text rule below is
   scoped to :not(.is-stuck), so a dark stuck bar left dark text on dark. */
.header.is-stuck{
  background:color-mix(in srgb,var(--off-white) 96%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line);
  height:var(--header-h-sm);
}

.brand{ display:flex; align-items:center; flex:none; position:relative; }
/* The lockup is 3.24:1, so height drives the footprint. 38px keeps
   "CONSULTING" legible rather than reducing it to a grey smear. */
.brand img{ height:38px; width:auto; transition:height var(--dur-2) var(--ease); }
.header.is-stuck .brand img{ height:32px; }

/* Two lockups, cross-faded — the wordmark has to invert with the bar. */
.brand__onLight{ display:block; }
.brand__onDark { display:none; }
.header.is-onDark:not(.is-stuck) .brand__onLight{ display:none; }
.header.is-onDark:not(.is-stuck) .brand__onDark { display:block; }

.nav{ display:flex; align-items:center; gap:var(--space-7); }
.nav__link{
  position:relative;
  font-family:var(--font-display);
  font-size:0.9375rem;              /* 15px — 14 read undersized and generic */
  font-weight:var(--fw-medium);
  letter-spacing:-0.012em;
  color:var(--nav-fg,var(--text));
  padding-block:var(--space-2);
  transition:color var(--dur-1) var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-2) var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--accent); }

/* Light type only while the header is transparent over a dark hero. Every
   one of these must stay scoped to :not(.is-stuck) — the stuck bar is light. */
.header.is-onDark:not(.is-stuck) .nav__link,
.header.is-onDark:not(.is-stuck) .brand,
.header.is-onDark:not(.is-stuck) .navtoggle{ --nav-fg:var(--d-text); color:var(--d-text); }
.header.is-onDark:not(.is-stuck) .nav__link[aria-current="page"]{ color:var(--focus-on-dark); }
.header.is-onDark:not(.is-stuck) .nav__link::after{ background:var(--focus-on-dark); }

.header__cta{ flex:none; }

/* Mobile toggle */
.navtoggle{
  display:none; width:44px; height:44px;
  align-items:center; justify-content:center;
  margin-right:calc(var(--space-3) * -1);
}
.navtoggle__bars{ display:block; width:22px; height:10px; position:relative; }
.navtoggle__bars i{
  position:absolute; left:0; width:100%; height:1.5px;
  background:currentColor;
  transition:transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}
.navtoggle__bars i:first-child{ top:0; }
.navtoggle__bars i:last-child{ bottom:0; }
[aria-expanded="true"] .navtoggle__bars i:first-child{ transform:translateY(4.5px) rotate(45deg); }
[aria-expanded="true"] .navtoggle__bars i:last-child{ transform:translateY(-4.5px) rotate(-45deg); }

@media (max-width:1024px){
  .nav,.header__cta{ display:none; }
  .navtoggle{ display:flex; }
}

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:var(--z-menu);
  background:var(--ink); color:var(--d-text);
  padding:calc(var(--header-h) + var(--space-6)) var(--page-pad) var(--space-8);
  display:flex; flex-direction:column; justify-content:space-between;
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
}
.drawer.is-open{ transform:none; visibility:visible; transition-delay:0s; }
.drawer__list{ display:flex; flex-direction:column; gap:var(--space-1); }
.drawer__link{
  display:flex; align-items:baseline; gap:var(--space-4);
  padding-block:var(--space-4);
  border-bottom:var(--border) solid var(--d-line);
  font-family:var(--font-display);
  font-size:var(--fs-h3); font-weight:var(--fw-medium);
  letter-spacing:var(--ls-heading);
}
.drawer__link .numeral{ color:var(--focus-on-dark); }
.drawer__foot{ display:flex; flex-direction:column; gap:var(--space-4); }

/* ------------------------------------------------------------------ CARDS */

.card{
  position:relative;
  display:flex; flex-direction:column;
  gap:var(--space-4);
  padding:var(--space-6);
  background:var(--bg-raised);
  border:var(--border) solid var(--line);
  border-radius:var(--radius);
  transition:border-color var(--dur-2) var(--ease),
             transform var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.is-dark .card{ background:var(--d-bg-raised); }
.is-dark .card:hover{ box-shadow:none; border-color:var(--d-line-strong); }

/* Card whose whole surface is a link, without nesting interactive elements */
.card--link .card__title a::after{ content:""; position:absolute; inset:0; }

.card__title{ font-size:var(--fs-h4); }
.card__meta{
  display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4);
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-mono); color:var(--text-faint);
  text-transform:uppercase;
}

/* Capability row — editorial, not an icon tile */
.capability{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--space-5) var(--space-7);
  align-items:start;
  padding-block:var(--space-7);
  border-top:var(--border) solid var(--line);
  transition:background var(--dur-2) var(--ease);
}
.capability:last-child{ border-bottom:var(--border) solid var(--line); }
.capability__n{ padding-top:.35em; }
.capability__title{ font-size:var(--fs-h3); }
.capability__title a{
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat; background-size:0% 1px; background-position:0 100%;
  transition:background-size var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
  padding-bottom:3px;
}
.capability:hover .capability__title a{ background-size:100% 1px; color:var(--accent); }
.capability__tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); }

@media (max-width:900px){
  .capability{ grid-template-columns:auto minmax(0,1fr); gap:var(--space-4); }
  .capability__body{ grid-column:1 / -1; }
}

/* Homepage capability grid — the summary view. The full .capability rows are
   still used on /services.php where the depth belongs. */
.capgrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:var(--border) solid var(--line);
}
@media (max-width:900px){ .capgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .capgrid{ grid-template-columns:1fr; } }

.capcard{
  background:var(--bg);
  padding:var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-3);
  transition:background var(--dur-2) var(--ease);
}
.capcard:hover{ background:var(--bg-raised); }
.capcard__title{ font-size:var(--fs-h4); }
.capcard__title a{
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat; background-size:0% 1px; background-position:0 100%;
  padding-bottom:2px;
  transition:background-size var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
}
.capcard:hover .capcard__title a{ background-size:100% 1px; color:var(--accent); }
.capcard p{ font-size:var(--fs-sm); margin-top:auto; }

/* -------------------------------------------------------------- BADGE/TAG */

.tag{
  display:inline-flex; align-items:center;
  padding:5px var(--space-3);
  border:var(--border) solid var(--line);
  border-radius:var(--radius-pill);
  font-size:var(--fs-xs); color:var(--text-muted);
  white-space:nowrap;
}
.tag--accent{ border-color:color-mix(in srgb,var(--burgundy) 40%,transparent); color:var(--accent); }

/* Content the client still has to supply — deliberately visible, never fake */
.tbd{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:4px var(--space-3);
  border:1px dashed color-mix(in srgb,var(--burgundy) 55%,transparent);
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--burgundy) 6%,transparent);
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-mono); text-transform:uppercase;
  color:var(--burgundy);
}
.is-dark .tbd{ color:#E8859A; border-color:#7A2233; background:rgba(143,16,35,.18); }

/* --------------------------------------------------------------- STAGE ROW */

.stages{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--grid-gap); }
@media (max-width:820px){ .stages{ grid-template-columns:1fr; } }

.stage{
  position:relative;
  padding-top:var(--space-5);
  border-top:2px solid var(--line);
  transition:border-color var(--dur-2) var(--ease);
}
.stage.is-in{ border-top-color:var(--accent); }
.stage__label{
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--text-faint);
}
.stage__name{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  font-weight:var(--fw-semi);
  letter-spacing:var(--ls-heading);
  margin-block:var(--space-2) var(--space-3);
}
.stage__steps{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5); }

/* ------------------------------------------------------------------ STATS */

.stat__value{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,4.4vw,3.75rem);
  font-weight:var(--fw-semi);
  letter-spacing:var(--ls-display);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat__label{ margin-top:var(--space-3); color:var(--text-muted); font-size:var(--fs-sm); }

/* ------------------------------------------------------------------- TEAM */

/* Five across on desktop — the whole team readable in one glance. Steps down
   to 3 / 2 / 1 rather than letting the portraits get too small to read. */
.team-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--space-7) var(--grid-gap);
  align-items:start;
}
@media (max-width:1180px){ .team-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px) { .team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .team-grid{ grid-template-columns:1fr; } }

.person__portrait{
  position:relative;
  aspect-ratio:4/5;
  width:100%;
  max-width:var(--portrait-w,264px);   /* the card stays wide; the image doesn't */
  background:var(--bg-raised);
  border:var(--border) solid var(--line);
  border-radius:var(--radius-media);
  overflow:hidden;
  margin-bottom:var(--space-5);
}
.person__portrait img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04); transition:filter var(--dur-3) var(--ease); }
.person:hover .person__portrait img{ filter:grayscale(0); }

/* Placeholder that reads as designed, not as a broken image */
.person__initials{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3rem); font-weight:var(--fw-medium);
  letter-spacing:0.02em;
  color:var(--text-faint);
  background:
    linear-gradient(var(--line),var(--line)) 50% 0/1px 100% no-repeat,
    var(--bg-raised);
}
.person__role{ color:var(--accent); font-size:var(--fs-sm); font-weight:var(--fw-medium); }

/* The source bios run from 124 to 310 characters, so cards cannot bottom out
   evenly without either padding short ones or truncating long ones. Portrait,
   name and role align across the row; only the paragraph tail varies, which is
   how an editorial grid is meant to behave. */
.person__blurb{
  margin-top:var(--space-3);
  font-size:var(--fs-sm);
  line-height:1.55;
  text-wrap:pretty;
}

/* ------------------------------------------------------------------ FORMS */

.field{ display:flex; flex-direction:column; gap:var(--space-2); }
.field__label{ font-size:var(--fs-sm); font-weight:var(--fw-medium); }
.field__req{ color:var(--accent); }
.field__hint{ font-size:var(--fs-xs); color:var(--text-faint); }
.field__error{ font-size:var(--fs-xs); color:var(--burgundy-lift); font-weight:var(--fw-medium); }

.input,.textarea,.select{
  width:100%;
  padding:var(--space-3) var(--space-4);
  min-height:48px;
  background:var(--bg-raised);
  color:var(--text);
  border:var(--border) solid var(--line-strong);
  border-radius:var(--radius);
  font-size:var(--fs-body);
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.textarea{ min-height:150px; resize:vertical; line-height:var(--lh-body); }
.input:focus,.textarea:focus,.select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--burgundy) 14%,transparent);
}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{ border-color:var(--burgundy-lift); }
.select{ appearance:none; padding-right:var(--space-8); cursor:pointer; }

/* Honeypot — hidden from people, reachable by naive bots */
.hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; }

/* ------------------------------------------------------------ PHOTO BAND */
/* Architectural texture behind a dark section. The image is already graded
   toward the ink tone, and a gradient sits over it so type never has to fight
   the photograph. Reads as material, not as stock photography. */
.band{
  position:relative;
  isolation:isolate;
  background:var(--ink);
}
.band::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background-image:var(--band-img);
  background-size:cover;
  background-position:center;
  opacity:.85;
}
.band::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,
              rgba(17,18,20,.94) 0%,
              rgba(17,18,20,.80) 42%,
              rgba(17,18,20,.55) 100%);
}
@media (max-width:760px){
  .band::after{ background:linear-gradient(180deg,rgba(17,18,20,.86),rgba(17,18,20,.94)); }
}

/* ----------------------------------------------------------------- FOOTER */

.footer{ background:var(--ink); color:var(--d-text); padding-block:var(--space-9) var(--space-6); }
.footer__top{ display:grid; grid-template-columns:1.4fr repeat(4,minmax(0,1fr)); gap:var(--space-7) var(--grid-gap); }
@media (max-width:1024px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__top{ grid-template-columns:1fr; } }

.footer__heading{
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--d-text-faint);
  margin-bottom:var(--space-4);
}
.footer__list{ display:flex; flex-direction:column; gap:var(--space-3); }
.footer__list a{ font-size:var(--fs-sm); color:var(--d-text-muted); transition:color var(--dur-1) var(--ease); }
.footer__list a:hover{ color:#fff; }

/* Three-up bar: copyright, attribution, legal links. The middle column is
   centred against the bar itself rather than the gap between its neighbours,
   so it stays put whatever length the other two are. */
.footer__bar{
  margin-top:var(--space-8);
  padding-top:var(--space-5);
  border-top:var(--border) solid var(--d-line);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--space-4) var(--space-6);
  font-size:var(--fs-xs); color:var(--d-text-faint);
}
.footer__bar > :last-child{ justify-self:end; }
@media (max-width:760px){
  .footer__bar{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .footer__bar > :last-child{ justify-self:center; }
}

/* Attribution — red on hover, with a rule that draws in from the left. */
.footer__by{ margin:0; white-space:nowrap; }
.footer__by a{
  color:var(--d-text-muted);
  font-weight:var(--fw-semi);
  padding-bottom:2px;
  background-image:linear-gradient(var(--burgundy-lift),var(--burgundy-lift));
  background-repeat:no-repeat;
  background-size:0% 1px;
  background-position:0 100%;
  transition:background-size var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
}
.footer__by a:hover,
.footer__by a:focus-visible{
  color:var(--burgundy-lift);
  background-size:100% 1px;
}

/* --------------------------------------------------------------- socials */
.social{ display:flex; gap:var(--space-3); margin-top:var(--space-5); }
.social__link{
  display:grid; place-items:center;
  width:38px; height:38px;
  border:var(--border) solid var(--d-line);
  border-radius:50%;
  color:var(--d-text-muted);
  transition:color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease),
             transform var(--dur-2) var(--ease);
}
.social__link:hover,
.social__link:focus-visible{
  color:#fff;
  border-color:var(--burgundy-lift);
  background:var(--burgundy-lift);
  transform:translateY(-2px);
}

/* -------------------------------------------------------------- ACCORDION */

.acc__item{ border-bottom:var(--border) solid var(--line); }
.acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
  padding-block:var(--space-5);
  text-align:left;
  font-family:var(--font-display); font-size:var(--fs-h4); font-weight:var(--fw-medium);
  transition:color var(--dur-1) var(--ease);
}
.acc__btn:hover{ color:var(--accent); }
.acc__icon{ flex:none; transition:transform var(--dur-2) var(--ease); }
.acc__btn[aria-expanded="true"] .acc__icon{ transform:rotate(45deg); color:var(--accent); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-3) var(--ease); }
.acc__panel > div{ overflow:hidden; }
.acc__btn[aria-expanded="true"] + .acc__panel{ grid-template-rows:1fr; }
.acc__body{ padding-bottom:var(--space-5); color:var(--text-muted); max-width:70ch; }