/* ============================================================
   Tiedrich Global — Components
   Each block below is one reusable piece: buttons, navigation,
   cards, media components, footer.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   ShineButton — primary CTA
   Navy (or inverse) fill, uppercase, looping diagonal gloss
   sweep, teal gradient border on hover. 4px radius.
   ──────────────────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--sm { padding: 0.75rem 1.375rem; font-size: 0.75rem; }

/* Shine sweep — a diagonal gloss that crosses the button on a loop. */
.btn--shine { overflow: hidden; isolation: isolate; }
.btn--shine::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -80%;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(18deg);
  pointer-events: none;
  animation: tgShineSweep 4.5s ease-in-out infinite;
}

@keyframes tgShineSweep {
  0%   { left: -80%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

.btn--primary {
  background: var(--color-navy);
  color: var(--color-white);
  box-shadow: 0 1px 2px rgba(23, 48, 97, 0.20), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn--primary:hover {
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(23, 48, 97, 0.35), inset 0 1px 0 rgba(255,255,255,0.08),
              0 0 0 1px var(--color-teal);
}

.btn--inverse {
  background: var(--color-white);
  color: var(--color-navy);
  box-shadow: 0 1px 2px rgba(3, 17, 33, 0.28);
}
.btn--inverse:hover {
  color: var(--color-navy);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(3, 17, 33, 0.4), 0 0 0 1px var(--color-teal);
}
.btn--inverse.btn--shine::after {
  background: linear-gradient(90deg, rgba(37,138,160,0) 0%, rgba(37,138,160,0.22) 50%, rgba(37,138,160,0) 100%);
}

/* Ghost / secondary — Title Case, not uppercase */
.btn--ghost {
  padding: 0.875rem 1.75rem;
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}
.btn--ghost:hover { background: rgba(23, 48, 97, 0.06); color: var(--color-navy); }
.btn--ghost.btn--sm { padding: 0.75rem 1.5rem; font-size: 0.9375rem; }

.btn--ghost-light {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.35);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.10); color: var(--color-white); }

.btn-row { display: flex; gap: 0.875rem; flex-wrap: wrap; }

/* ────────────────────────────────────────────────────────────
   Corner logo — fixed, shrinks on scroll (see js/main.js)
   ──────────────────────────────────────────────────────────── */

.corner-logo {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 600;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: 0 8px 24px rgba(23, 48, 97, 0.12);
  transition: box-shadow 0.4s ease;
}
/* "GLOBAL STRATEGIES" is only 49px of the 684px lockup, so at 72px it rendered
   about 5px tall and Lee could not read it. 104px puts it near 7.5px — roughly
   an 11px type size — which is the most the corner chip can carry before it
   starts crowding the nav. The supplied logo-horizontal.svg is an empty
   wrapper (its <image> tags have no href), so there is no alternative lockup. */
.corner-logo__word { height: 104px; width: auto; }
.corner-logo__mark { height: 54px; width: auto; display: none; }

/* Down to 1024 the navbar still reserves the gutter on the left, so the full
   lockup — name included — stays visible, just smaller. Below that the navbar
   reclaims the gutter and only the hex mark fits. */
/* Extended from 1279px to 1319px on 10 Sept: with six nav items the centred
   pill sits only 10px off the full-size lockup at exactly 1280px. Holding
   the 80px lockup through 1319px keeps ~68px clear across that band. */
@media (min-width: 768px) and (max-width: 1319px) {
  .corner-logo__word { height: 80px !important; }
}
@media (max-width: 1023px) {
  .corner-logo__word { display: none; }
  .corner-logo__mark { display: block; }
}
/* On phones the navbar leaves the top of the viewport entirely (it docks to
   the bottom), so the gutter that forced the mark-only chip at tablet widths
   is free again and the full name comes back — Lee could not see "Tiedrich
   Global Strategies" on her phone (29 Aug). 76px puts "GLOBAL STRATEGIES"
   near 5.5px, which is ~16 device pixels at 3x, and the lockup lands at
   about 183px wide inside a 375px viewport. */
@media (max-width: 767px) {
  .corner-logo { top: 0.75rem; left: 0.75rem; padding: 0.25rem 0.5rem; }
  .corner-logo__word { display: block; height: 58px; }
  .corner-logo__mark { display: none; }
}
/* Narrow phones (SE, mini): the lockup and the pill have to share ~320px,
   so both step down again. Sizes here are mirrored by the `narrow` tier in
   setupCornerLogo() — the scroll shrink writes inline heights that would
   otherwise outrank this block. */
@media (max-width: 374px) {
  .corner-logo__word { height: 46px; }
  .navbar { padding: 0 0.5rem; }
}

/* ────────────────────────────────────────────────────────────
   TubelightNavbar — floating centered pill with a sliding
   teal "lamp" over the active item.
   ──────────────────────────────────────────────────────────── */

.navbar {
  position: fixed;
  top: 1.5rem;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  /* The gutter used to be a flat `calc(1.5rem + 300px)` on the left, which
     reserved room for the corner lockup but centred the pill inside what was
     left over — so it sat 150px right of true centre at every desktop width
     (Ed, 1 Sept). The padding is symmetric now, so the pill is centred on the
     viewport. A truly centred pill only fouls the lockup at narrow desktop
     widths, so the left gutter grows just enough to clear it there and is
     inert above. The threshold depends on the pill's width: it was 1100px
     with five items, and moved to 1200px when "Speaking" made six (10 Sept,
     pill 535px -> 642px). At 1024px this adds 176px (an 88px nudge); at
     1200px nothing. Clearance holds at ~28px across that whole band.
     RE-MEASURE THIS whenever a nav item is added or removed. */
  padding: 0 1.5rem;
  padding-left: max(1.5rem, calc(1.5rem + 1200px - 100vw));
  pointer-events: none;
}
.navbar__pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: 0 8px 24px rgba(23, 48, 97, 0.12);
  pointer-events: auto;
}

/* the sliding lamp */
.navbar__lamp {
  position: absolute;
  top: 0.375rem;
  bottom: 0.375rem;
  left: 0;
  width: 0;
  border-radius: var(--radius-full);
  background: rgba(37, 138, 160, 0.10);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.navbar__lamp::before {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-teal);
  box-shadow: 0 0 12px 2px rgba(37, 138, 160, 0.6);
}
.navbar__lamp.is-idle { transition: none; }

.navbar__item { position: relative; }
.navbar__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.625rem 1.125rem;
  border-radius: var(--radius-full);
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.navbar__link:hover { color: var(--color-navy); background: rgba(23, 48, 97, 0.05); }
.navbar__link[aria-current="page"] { color: var(--color-navy); font-weight: var(--weight-semibold); }

.navbar__caret { width: 10px; height: 10px; flex-shrink: 0; transition: transform 0.2s ease; }
.navbar__item--has-menu:hover .navbar__caret,
.navbar__item--has-menu:focus-within .navbar__caret { transform: rotate(180deg); }

/* dropdown */
.navbar__menu {
  position: absolute;
  top: calc(100% + 0.625rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 16rem;
  padding: 0.5rem;
  margin: 0;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.navbar__item--has-menu:hover .navbar__menu,
.navbar__item--has-menu:focus-within .navbar__menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.navbar__menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-button);
  font-size: 0.875rem;
  color: var(--color-text);
  text-decoration: none;
}
.navbar__menu a:hover { background: var(--color-surface); color: var(--color-navy); }

/* ── Hamburger (phones only) ──────────────────────────────────────────
   Lee asked for a menu that expands on click rather than a row of icons
   (1 Sept). The button is the only thing on screen until it is opened;
   the pill then becomes a panel underneath it, with the text labels and
   the section links that the icon row could not carry. */
.navbar__toggle {
  display: none;
  pointer-events: auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: 0 8px 24px rgba(23, 48, 97, 0.12);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
}
.navbar__toggle:focus-visible { outline: 3px solid var(--color-teal); outline-offset: 3px; }

/* three bars drawn from one element: the bar itself plus its two edges */
.navbar__burger, .navbar__burger::before, .navbar__burger::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.28s ease, opacity 0.2s ease;
}
.navbar__burger { position: relative; }
.navbar__burger::before, .navbar__burger::after { content: ""; position: absolute; left: 0; }
.navbar__burger::before { top: -6px; }
.navbar__burger::after  { top: 6px; }

/* open state: the bars cross into an X */
.navbar.is-open .navbar__burger { background: transparent; }
.navbar.is-open .navbar__burger::before { transform: translateY(6px) rotate(45deg); }
.navbar.is-open .navbar__burger::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023px) {
  .navbar { padding-left: 1rem; padding-right: 1rem; }
  .navbar__pill { gap: 0; padding: 0.25rem; }
  .navbar__link { padding: 0.5rem 0.7rem; font-size: 0.8125rem; }
  .navbar__menu { display: none; }
}
/* On phones the nav is a hamburger at the top right (Lee, 1 Sept). It was an
   icon row before that, and docked to the bottom of the viewport before that.
   Collapsed, only the button shows, so the lockup keeps the left of the band. */
@media (max-width: 767px) {
  .navbar {
    top: 0.75rem;
    bottom: auto;
    padding: 0 0.75rem;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
  }
  .navbar__toggle { display: inline-flex; }

  /* the pill becomes the dropdown panel */
  .navbar__pill {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    width: min(17rem, calc(100vw - 1.5rem));
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
    border-radius: var(--radius-card);
    /* opaque, not the pill's 0.9 alpha: as a full panel the page showed
       through it and the links became hard to read */
    background: var(--color-white);
    box-shadow: 0 18px 40px rgba(23, 48, 97, 0.22);
  }
  .navbar.is-open .navbar__pill { display: flex; }

  /* the sliding lamp is a horizontal device; it has no meaning in a column */
  .navbar__lamp { display: none; }

  .navbar__item { display: block; width: 100%; }
  .navbar__link {
    justify-content: flex-start;
    gap: 0.625rem;
    padding: 0.7rem 0.75rem;
    font-size: 0.9375rem;
    border-radius: var(--radius-sm, 0.5rem);
  }
  .navbar__link > span { display: inline; }
  .navbar__icon { display: block; width: 19px; height: 19px; flex-shrink: 0; }
  .navbar__caret { display: none; }

  /* the section links the icon row had to drop are back, indented under
     their parent — this is the content Lee could not reach from a phone */
  .navbar__menu {
    display: block;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 0.25rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    border-left: 2px solid var(--color-border);
    margin-left: 1.55rem;
  }
  .navbar__menu a {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
  }
}
.navbar__icon { display: none; }
@media (max-width: 767px) { .navbar__icon { display: block; } }

/* ────────────────────────────────────────────────────────────
   Dark band — replaces the photographic section backgrounds.
   A deep navy ground, a lattice drawn from the hex mark, and a
   soft wash in the brand blue and teal so the surface has depth
   without a photograph behind it.
   ──────────────────────────────────────────────────────────── */

.band--dark {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, var(--color-navy-900) 0%, #062247 55%, var(--color-navy-800) 100%);
  color: var(--color-white);
}

/* the lattice */
.band--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('../assets/img/texture-diamond.svg');
  background-size: 88px 120px;
  background-repeat: repeat;
  opacity: 0.06;
  pointer-events: none;
}

/* a slow wash so the ground is never flat */
.band--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(52% 62% at 78% 18%, rgba(37, 138, 160, 0.26), transparent 68%),
    radial-gradient(46% 58% at 12% 88%, rgba(26, 98, 168, 0.30), transparent 70%);
  pointer-events: none;
}

/* Deliberately no blanket colour rules here: a dark band can contain
   light-surfaced children (the flip cards, the quote card), and a
   descendant selector would wash their text out. Section copy opts in
   via the --on-dark modifiers instead. */

/* Rounded inset variant, for bands that sit within the page rather than
   running full-bleed. */
.band--inset {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  border-radius: var(--radius-band);
  overflow: hidden;
}
@media (max-width: 991px) { .band--inset { margin-left: 0.75rem; margin-right: 0.75rem; } }

/* Gradient joins so light sections meet dark ones without a hard seam. */
.band-fade {
  height: 6rem;
  border: 0;
  margin: 0;
  padding: 0;
}
/* A continuous ramp. The previous stop held near-white for the first 45%, which
   read as a white gap above the footer rather than a transition. 24 Aug. */
.band-fade--to-dark   { background: linear-gradient(to bottom, var(--color-white) 0%, #B9C6D6 34%, #33506F 68%, var(--color-navy-900) 100%); }
.band-fade--from-dark { background: linear-gradient(to bottom, var(--color-navy-900) 0%, #33506F 32%, #B9C6D6 66%, var(--color-white) 100%); }
@media (max-width: 767px) { .band-fade { height: 3.5rem; } }

/* ────────────────────────────────────────────────────────────
   Cards
   ──────────────────────────────────────────────────────────── */

.card {
  background: var(--color-white);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.card--elevated { border-color: transparent; box-shadow: var(--shadow-elevated); }

.tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-tag);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  color: var(--color-navy);
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
}
.badge--teal    { background: var(--color-teal); color: var(--color-white); }
.badge--outline { border: 1px solid var(--color-border); color: var(--color-text-secondary); }

/* ────────────────────────────────────────────────────────────
   Flip card — front/back faces, identical box at rest and
   hovered, light border on the dark back face.
   ──────────────────────────────────────────────────────────── */

/* Both faces share one grid cell, so the card takes the height of its
   tallest face automatically — no fixed row heights to maintain per
   breakpoint, and nothing clips when copy changes length. */
.flip {
  position: relative;
  height: 100%;
  border-radius: var(--radius-card);
  cursor: pointer;
  /* A real 3D context. Without a perspective WebKit rasterises the rotated
     back face flat and small caps type on it goes soft (Lee, 29 Aug). */
  perspective: 1600px;
}
.flip:focus-visible { outline: 3px solid var(--color-teal); outline-offset: 3px; }
.flip__inner {
  display: grid;
  width: 100%;
  height: 100%;
  transition: transform 1.35s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}
/* The rotation is driven by .is-flipped from js/main.js, not by :focus-within.
   On touch nothing ever removed focus, so a card opened by a tap stayed open;
   on desktop, clicking one and moving the mouse away left it focused and stuck
   the same way (Lee, 29 Aug). Hover stays as an affordance, but only on
   devices that genuinely hover. */
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .flip:hover .flip__inner { transform: rotateY(180deg); }
}

.flip__face {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 1.5rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip__face--front { background: var(--color-white); border: 1px solid var(--color-border); }
.flip__face--back {
  transform: rotateY(180deg);
  background: var(--color-navy);
  border: 1px solid rgba(255, 255, 255, 0.2);
  gap: 0.75rem;
}

/* backface-visibility alone is not enough: on iOS the away-facing side still
   bled through and Lee could read the front copy behind the answer (1 Sept).
   The hidden face is therefore switched off outright, as a step rather than a
   fade, at the moment the card passes 90deg and is edge-on.

   That moment is 177ms, NOT half of 1.35s. cubic-bezier(0.22, 1, 0.36, 1) is a
   steep ease-out that turns 91deg in the first 180ms and spends the remaining
   1.17s creeping through the last 89deg. Timing the swap at 675ms left the card
   blank for ~0.5s in the middle of every flip, because the front had already
   turned away while the back was still transparent. Keep this delay and the
   transform duration above in step: 13.1% of whatever the duration is. */
.flip__face { opacity: 1; transition: opacity 0s linear 0.177s; }
.flip__face--back { opacity: 0; }
.flip.is-flipped .flip__face--front { opacity: 0; }
.flip.is-flipped .flip__face--back { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .flip:hover .flip__face--front { opacity: 0; }
  .flip:hover .flip__face--back { opacity: 1; }
}

/* slow teal wash drifting across the front face */
.flip__face--front::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(37,138,160,0.16) 0%, rgba(26,98,168,0.10) 35%, rgba(79,182,204,0.05) 60%, rgba(255,255,255,0) 80%);
  background-size: 240% 240%;
  animation: tgCardFlow 8s ease-in-out infinite;
}
.flip__face--front > * { position: relative; z-index: 1; }

/* The cards turn on hover/focus. With the instruction line gone, this
   corner glyph is the affordance. */
.flip__face--front::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(37, 138, 160, 0.45);
  background:
    linear-gradient(to right, var(--color-teal) 0 100%) center / 9px 1.5px no-repeat,
    linear-gradient(to bottom, var(--color-teal) 0 100%) center / 1.5px 9px no-repeat;
  opacity: 0.75;
  transition: transform 0.35s ease, opacity 0.2s ease;
}
.flip.is-flipped .flip__face--front::after { opacity: 0; transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .flip:hover .flip__face--front::after { opacity: 0; transform: rotate(90deg); }
}

@keyframes tgCardFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.flip__quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.25rem;
  line-height: 0.7;
  color: var(--color-teal);
}
.flip__title {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
}
.flip__text {
  font-size: 0.9375rem;
  font-weight: var(--weight-regular);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
/* the same label also sits on the light face, where sky blue is unreadable */
.flip__face--front .flip__label--dark { color: var(--color-teal-ink); }
.flip__label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  color: var(--color-sky);
}
.flip__answer {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .flip:hover .flip__inner, .flip.is-flipped .flip__inner { transform: none; }
  .flip__face--front::before { animation: none; }
  /* no rotation to hide behind, so the faces swap with no delay */
  .flip__face { transition: none; }
  .flip.is-flipped .flip__face--back { transform: none; }
}

/* ────────────────────────────────────────────────────────────
   Portrait frame — static card around a photograph
   ──────────────────────────────────────────────────────────── */

.portrait-frame {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(0, 38, 77, 0.08);
  box-shadow: 0 24px 60px rgba(0, 38, 97, 0.18);
}

/* ────────────────────────────────────────────────────────────
   Logo marquee — press band
   ──────────────────────────────────────────────────────────── */

.marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 4rem;
  animation: tgMarquee 34s linear infinite;
}
/* The marks link out to the coverage, so the reel stops under the cursor
   rather than speeding up — you cannot click a moving target. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__track img { height: 40px; width: auto; object-fit: contain; flex-shrink: 0; opacity: 0.95; }
.marquee__track img.is-small { height: 30px; }

.marquee__track a {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.marquee__track a:hover img { opacity: 1; }
.marquee__track a:hover { transform: translateY(-2px); }
.marquee__track a:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 6px; }

@keyframes tgMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ────────────────────────────────────────────────────────────
   GalleryFan — fanned card stack; active image lifted,
   neighbours fan out with rotation and depth.
   ──────────────────────────────────────────────────────────── */

.fan { position: relative; overflow: hidden; }
.fan__stage {
  position: relative;
  height: 490px;
  perspective: 1400px;
}
.fan__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 460px;
  height: 330px;
  margin: -165px 0 0 -230px;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 6px solid var(--color-white);
  box-shadow: 0 18px 44px rgba(0, 38, 77, 0.22);
  background: var(--color-white);
  cursor: pointer;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.75s ease, filter 0.75s ease;
  will-change: transform;
}
.fan__item img { width: 100%; height: 100%; object-fit: cover; }
.fan__item.is-active { z-index: 10; }

.fan__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: -2.5rem;
  position: relative;
  z-index: 60;
}
.fan__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.fan__dot.is-active { background: var(--color-navy); transform: scale(1.25); }

@media (max-width: 767px) {
  .fan__stage { height: 300px; }
  .fan__item { width: 260px; height: 190px; margin: -95px 0 0 -130px; border-width: 4px; }
}

/* ────────────────────────────────────────────────────────────
   VerticalTabs — auto-advancing progress rail + synced image
   ──────────────────────────────────────────────────────────── */

.vtabs {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: center;
}
.vtabs__list { display: flex; flex-direction: column; }
.vtabs__item {
  position: relative;
  width: 100%;
  padding: 1.5rem 1.25rem 1.5rem 2rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  cursor: pointer;
}
.vtabs__item:last-child { border-bottom: 0; }

/* the rail: a track with a fill that grows while the tab is active */
.vtabs__rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-border);
}
.vtabs__rail::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 0;
  background: var(--color-teal);
}
.vtabs__item.is-active .vtabs__rail::after { height: 100%; transition: height 5s linear; }

.vtabs__num {
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  color: var(--color-teal);
  margin-right: 0.625rem;
}
.vtabs__title {
  display: inline;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-text-secondary);
  transition: color 0.3s ease;
}
.vtabs__item.is-active .vtabs__title { color: var(--color-text); }
.vtabs__desc {
  display: block;
  max-height: 0;
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  transition: max-height 0.45s ease, opacity 0.35s ease, margin 0.45s ease;
  opacity: 0;
}
.vtabs__item.is-active .vtabs__desc { max-height: 10rem; opacity: 1; margin-top: 0.625rem; }

.vtabs__media { position: relative; display: flex; justify-content: center; }
.vtabs__panel {
  position: relative;
  width: 70%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.vtabs__panel img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s ease, transform 0.9s ease;
}
.vtabs__panel img.is-active { opacity: 1; transform: none; }

@media (max-width: 991px) {
  .vtabs { grid-template-columns: 1fr; gap: 2.5rem; }
  .vtabs__media { order: -1; }
  .vtabs__panel { width: 100%; }
  .vtabs__title { font-size: 1.125rem; }
}

/* ────────────────────────────────────────────────────────────
   Testimonial carousel
   ──────────────────────────────────────────────────────────── */

.quote-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 2.5rem;
  min-height: 240px;
}
.quote-card__mark {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  line-height: 0.6;
  color: var(--color-teal);
  margin-bottom: 1rem;
}
.quote-card__text {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 1.75rem;
}
.quote-card__attr {
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.carousel__slide { display: none; }
.carousel__slide.is-active { display: block; animation: tgFadeUp 0.5s ease both; }

.carousel__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}
.carousel__dots { display: flex; gap: 0.5rem; align-items: center; }
.carousel__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background 0.2s ease;
}
.carousel__dot.is-active { background: var(--color-navy); }
.carousel__arrows { display: flex; gap: 0.625rem; }
.carousel__arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-navy);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.carousel__arrow:hover { background: rgba(23, 48, 97, 0.06); }

@keyframes tgFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}


/* ────────────────────────────────────────────────────────────
   FAQ accordion
   ──────────────────────────────────────────────────────────── */

.faq__item { border-top: 1px solid var(--color-border); }
.faq__item:last-child { border-bottom: 1px solid var(--color-border); }
.faq__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.375rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.faq__question {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  color: var(--color-text);
  margin: 0;
}
.faq__caret {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}
.faq__trigger[aria-expanded="true"] .faq__caret { transform: rotate(180deg); }
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.faq__trigger[aria-expanded="true"] + .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__answer {
  font-size: 1rem;
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  padding: 0 3rem 1.375rem 0;
}
@media (max-width: 575px) { .faq__answer { padding-right: 0; } }

/* ────────────────────────────────────────────────────────────
   Footer
   ──────────────────────────────────────────────────────────── */

.footer {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-900);
  color: var(--color-white);
  padding: 4.5rem var(--section-px) 0;
}
/* the footer sits on a narrower measure than the rest of the page */
.footer .container { max-width: 71rem; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: 3rem;
  padding-bottom: 3rem;
}
.footer__brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
/* the full lockup replaces the mark + typed wordmark (24 Aug). Sized like the
   corner logo, which runs at 104px, because "GLOBAL STRATEGIES" is only 49px
   of the artwork's 684 and stops being readable much below this. */
.footer__brand img { height: 92px; width: auto; }
.footer__wordmark {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  color: var(--color-white);
}
.footer__blurb {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  max-width: 22rem;
}
.footer__heading {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  color: var(--color-white);
  margin: 0 0 1.25rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.footer__list a,
.footer__contact a {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.footer__list a:hover, .footer__contact a:hover { color: var(--color-teal); }
.footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.footer__contact li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.72); }
.footer__contact svg { flex-shrink: 0; color: var(--color-teal); }

.footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer__social { display: flex; gap: 1rem; }
.footer__social a { color: rgba(255, 255, 255, 0.6); display: inline-flex; }
.footer__social a:hover { color: var(--color-teal); }
.footer__legal { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.footer__legal a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.footer__legal a:hover { color: var(--color-teal); }

/* oversized outlined wordmark across the base */
.footer__watermark {
  display: block;
  width: 100%;
  padding: 5rem 0;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 5.1vw, 74px);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(127, 201, 216, 0.22);
  user-select: none;
  pointer-events: none;
}

@media (max-width: 991px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 575px) {
  .footer { padding-top: 3.5rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bar { justify-content: flex-start; }
  /* keep the bottom nav pill from covering the footer bar */
  .footer__watermark { padding: 2.5rem 0 5.5rem; }
}

/* "Tap to learn more", sitting beside the + marker in the front face's bottom
   right corner. Lives here, not in pages.css, because the homepage does not load
   pages.css — that is why this text was rendering unstyled (inheriting white on
   a white card) on the Why Leaders Call Us cards. The + is
   `.flip__face--front::after`: 22px, right 1rem, bottom 1rem, so the padding
   below clears it. Both fade together on flip. */
.flip__hint {
  /* clears the 22px marker sitting at right:1rem, and drops onto its optical
     row (marker centre is 27px up from the card's bottom edge) */
  margin: auto 0 -0.5rem 0;
  align-self: flex-end;
  padding: 0.75rem 2.25rem 0 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 22px;
  color: var(--color-teal);
  transition: opacity 0.2s ease;
}
.flip.is-flipped .flip__hint { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .flip:hover .flip__hint { opacity: 0; }
}

@media (max-width: 575px) { .footer__brand img { height: 74px; } }