/* ============================================================
     LISBON ECONOMICS — full cover page
     Palette: light blue liquid-glass aesthetic
     ============================================================ */
  :root {
    /* Inks */
    --ink:        #15161B;
    --ink-soft:   #3C3D44;
    --ink-mute:   #70717A;

    /* Papers — pale blue-whites */
    --paper:      #FAFAFA;
    --paper-2:    #D4D4D7;
    --paper-3:    #C6C6CA;

    /* Blues */
    --blue-deep:  #1A3C78;     /* anchor accent */
    --blue-mid:   #274C8E;
    --blue-soft:  #3F5C92;
    --blue-pale:  #D7D8DC;
    --blue-glass: rgba(26, 60, 120, 0.08);

    /* Lines */
    --line:       rgba(20, 21, 26, 0.10);
    --line-soft:  rgba(20, 21, 26, 0.05);
    --white:      #FFFFFF;
    --gold:       #C9A24B;     /* warm accent for dim hero */
    --burgundy:   #7C2233;     /* italic accent on grey (.caps) sections */
    /* Dark-blue backgrounds as a slight gradient to a darker blue */
    --blue-grad:      linear-gradient(180deg, #000F33 0%, #00081B 100%);
    --blue-grad-deep: linear-gradient(180deg, #00091E 0%, #00040D 100%);  /* "Who we are" — very dark blue */
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html {
    scroll-behavior: smooth;
    /* Offset anchor jumps so section headings land below the fixed nav pill
       (nav sits at top:1.25rem and is ~81px tall) instead of under it.
       Then scroll past HALF of the empty space above the heading — i.e. half of
       (the 1.5rem breathing + the section's own top padding) — so the gap after a
       nav click is halved. clamp() mirrors section.section's padding-top. */
    scroll-padding-top: calc(1.25rem + 81px + 1.5rem - (1.5rem + clamp(5rem, 9vw, 8rem)) / 2);
  }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  /* === LIQUID GLASS NAV === */
  .nav-wrap {
    position: fixed; top: 1.25rem; left: 50%;
    transform: translateX(-50%); z-index: 200;
    width: min(95%, 1320px);
  }
  .nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.15rem 2.1rem;
    background: rgba(0, 15, 51, 0.6);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.10) inset,
      0 18px 50px -16px rgba(0, 0, 0, 0.45);
  }
  .brand {
    display: flex; align-items: center; gap: 0.7rem;
    text-decoration: none; color: var(--ink);
  }
  .brand-logo {
    height: 42px; width: auto; display: block;
  }
  .brand .mark {
    width: 34px; height: 34px;
    background: var(--ink);
    color: var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Lora', serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    border-radius: 4px;
  }
  .brand .word {
    font-family: 'Lora', serif;
    font-weight: 500;
    font-size: 1.02rem;
    letter-spacing: -0.005em;
    line-height: 1;
  }
  .brand .word small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-top: 3px;
  }
  .nav-links { display: flex; gap: 2.3rem; align-items: center; }
  .nav-links a {
    color: rgba(255, 255, 255, 0.88); text-decoration: none;
    font-size: 0.96rem; font-weight: 500;
    letter-spacing: 0.005em;
    transition: color 200ms ease;
  }
  .nav-links a:hover { color: var(--gold); }
  .nav-cta {
    background: var(--white); color: var(--ink);
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    font-size: 0.85rem; font-weight: 500;
    text-decoration: none;
    transition: all 200ms ease;
  }
  .nav-cta:hover { background: var(--gold); color: var(--ink); }
  .nav-links a.nav-cta { color: var(--ink); }
  .nav-links a.nav-cta:hover { color: var(--ink); }

  /* === HERO === */
  .hero {
    position: fixed; top: 0; left: 0; right: 0;
    height: 100vh; z-index: 0;
    display: flex; align-items: flex-start;
    overflow: hidden;
    padding: 8rem 5% 4rem;   /* top room for the larger floating nav */
  }
  /* page scrolls up over the pinned hero */
  .page-body {
    position: relative; z-index: 1;
    margin-top: 100vh;
    background: var(--paper);
  }
  /* Belém photo — shown at its original colour (no grading) */
  .hero-photo {
    position: absolute; inset: 0; z-index: 0;
    background-image: url("belem_source.jpg");
    background-size: cover;
    background-position: center 92%;
    animation: kenBurns 28s ease-in-out infinite alternate;
    filter: none;
    opacity: 1;
  }
  @keyframes kenBurns {
    0%   { transform: scale(1.04) translate(0, 0); }
    100% { transform: scale(1.14) translate(-2.5%, -2%); }
  }
  /* Wash on the LEFT HALF only — strong enough behind the headline/lede for
     legibility, fading to ZERO-alpha white by 50% so the right half is
     pixel-identical to the original photo */
  .hero-wash {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg,
      rgba(249, 249, 250, 0.96) 0%,
      rgba(249, 249, 250, 0.94) 20%,
      rgba(249, 249, 250, 0.82) 32%,
      rgba(249, 249, 250, 0.50) 42%,
      rgba(249, 249, 250, 0.00) 50%);
  }
  .hero-inner {
    position: relative; z-index: 3;
    max-width: 1320px; width: 100%; margin: 0 auto;
    margin-top: 2.5rem;   /* drop the hero text down, clear of the floating nav */
  }
  /* headline on top (full width); below it a row of [lede | card] */
  .hero-row {
    display: flex; align-items: stretch; justify-content: space-between; gap: 2rem;
  }
  /* the lede (left) and the card (right) share this row, so the card's height
     follows the lede's height and its top/bottom align with the lede's */
  .hero-row .lede { margin-bottom: 0; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-size: 0.74rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.22em;
    color: var(--blue-deep);
    margin-bottom: 1.5rem;
  }
  .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--blue-deep); }
  h1.headline {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(2.6rem, 5.3vw, 6.25rem);
    line-height: 0.98;
    letter-spacing: -0.028em;
    color: var(--ink);
    margin-bottom: 2.25rem;   /* more breathing room between the title and the lede */
  }
  h1.headline em {
    font-style: italic;
    font-weight: 400;
    color: var(--blue-deep);
  }
  .lede {
    font-family: 'Lora', serif;
    font-optical-sizing: auto;
    font-size: clamp(1.54rem, calc(1.35vw + 0.42rem), 1.94rem);
    line-height: 1.38;
    color: #000000;
    max-width: clamp(31rem, 36vw, 42rem);
    margin-bottom: 2.5rem;
    font-weight: 300;
    /* Indent to align the left edge under the "a" of "that wins cases"
       (0.722 = width of "th" ÷ headline font-size in Fraunces 400). */
    margin-left: calc(clamp(2.6rem, 5.3vw, 6.25rem) * 0.722);
  }
  .cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }
  .btn {
    padding: 0.95rem 1.7rem; border-radius: 999px;
    font-size: 0.94rem; font-weight: 500;
    text-decoration: none; display: inline-flex; align-items: center; gap: 0.55rem;
    transition: all 250ms ease;
  }
  .btn-primary { background: var(--ink); color: var(--paper); }
  .btn-primary:hover {
    background: var(--blue-deep); transform: translateY(-2px);
    box-shadow: 0 14px 32px -14px rgba(18, 20, 28, 0.55);
  }
  .btn-secondary {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--ink);
    border: 1px solid rgba(20, 21, 26, 0.22);
  }
  .btn-secondary:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

  /* Right-side credential card */
  .cred-card {
    background: rgba(0, 15, 51, 0.5);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    padding: 27px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.10) inset,
      0 30px 80px -30px rgba(0, 0, 0, 0.6);
  }
  /* right column — an oblong that mirrors the .lede paragraph: same width clamp,
     and its height follows the lede's (top line aligns with the lede's first line,
     bottom with its last line, via .hero-row align-items:stretch). Right inset
     stays the text's left-inset mirror; it leans left as the lede widens. */
  .hero-card {
    flex: 0 1 auto;
    width: clamp(36rem, 48vw, 46rem);
    display: flex; flex-direction: column;
    margin-top: -11px;   /* align label's bottom with the lede's first-line bottom */
  }
  .cred-card .lbl {
    font-family: 'Inter', sans-serif;
    font-size: 0.93rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--white);
    margin-bottom: 1.5rem;
  }
  .cred-list { list-style: none; display: flex; flex-direction: column; gap: 1.05rem; flex: 1; justify-content: space-between; }
  .cred-list li {
    display: flex; align-items: flex-start; gap: 1.1rem;
    padding-bottom: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .cred-list li:last-child { border: none; padding-bottom: 0; }
  .cred-fig {
    font-family: 'Lora', serif; font-weight: 400;
    font-size: 2.30rem; line-height: 1;
    color: var(--gold); letter-spacing: -0.025em;
    flex-shrink: 0; min-width: 4.2rem;
  }
  .cred-body { font-size: 1.13rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
  .cred-body strong { color: var(--white); font-weight: 600; }



  /* === TRUST STRIP === */
  .trust {
    background: var(--white);
    padding: 2.5rem 5%;
    border-bottom: 1px solid var(--line);
  }
  .trust-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; gap: 3rem;
    flex-wrap: wrap;
  }
  .trust-lbl {
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink-mute);
    flex-shrink: 0;
  }
  .trust-items {
    display: flex; gap: 2.5rem; flex-wrap: wrap;
    font-family: 'Lora', serif;
    font-size: 0.98rem; color: var(--ink-soft);
    font-weight: 400;
  }
  .trust-items span { display: inline-flex; align-items: center; gap: 0.5rem; }
  .trust-items span::before {
    content: ''; width: 5px; height: 5px;
    border-radius: 50%; background: var(--blue-mid);
  }

  /* === SECTION SCAFFOLDING === */
  section.section {
    padding: clamp(5rem, 9vw, 8rem) 5%;
    position: relative;
  }
  .section-inner { max-width: 1200px; margin: 0 auto; }
  .section-head {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    margin-bottom: 4.5rem;
    align-items: center;
  }
  .section-tag {
    font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--blue-deep);
    margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.6rem;
  }
  .section-tag::before {
    content: ''; width: 24px; height: 1px; background: var(--blue-deep);
  }
  .section-title {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(2rem, 3.4vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
  }
  .section-title em { font-style: italic; color: var(--blue-deep); font-weight: 300; }
  .section-desc {
    font-family: 'Lora', serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 1.05rem; line-height: 1.6;
    color: var(--ink-soft);
    max-width: 36rem;
  }
  /* "Who we are" (#experts) — black section, white text, gold "One network." */
  #experts .section-tag { color: var(--gold); }
  #experts .section-tag::before { background: var(--gold); }
  #experts .section-title { color: #FFFFFF; }
  #experts .section-title em { color: var(--gold); }
  #experts .section-desc { color: rgba(255, 255, 255, 0.82); }
  /* Why we exist / Narrative-Evidence / What we do / A track record:
     match the member-page blurb size and drop the blurb 6px */
  #about .section-desc, #method .section-desc, #whatwedo .section-desc, #network .section-desc {
    font-size: calc(1.05rem + 5px);
    position: relative; top: 6px;
  }
  /* Pin the "Who we are" title/blurb band; the expert tiles scroll up
     underneath it. Opaque bg (matches the top of --blue-grad-deep) hides
     the cards behind it; band bottom sits a touch below the "One network." line. */
  #experts .section-head {
    position: sticky;
    top: calc(1.25rem + 81px);   /* pin just below the floating nav (same as .pin) */
    z-index: 5;
    background: #00091E;
    padding-top: 1.9rem;
    padding-bottom: 18px;
    margin-bottom: 2.5rem;
  }
  /* extend the band's dark fill full-bleed and up through the nav zone, so the
     expert tiles stay hidden as they scroll up past the pinned title */
  #experts .section-head::before {
    content: '';
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 100vw;
    top: calc(-1.25rem - 81px);   /* reach the viewport top when pinned */
    bottom: 0;
    background: #00091E;
    z-index: -1;
  }
  #experts .more { color: var(--gold); }

  /* === CAPABILITIES (3 columns) === */
  .caps {
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  }
  .caps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .cap {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 2.5rem 2.25rem;
    transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
  }
  .cap::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--blue-deep), var(--blue-soft));
    transform: scaleX(0); transform-origin: left;
    transition: transform 400ms ease;
  }
  .cap:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 28px 60px -28px rgba(18, 20, 28, 0.28);
  }
  .cap:hover::before { transform: scaleX(1); }
  .cap-num {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 0.85rem; color: var(--blue-mid);
    letter-spacing: 0.06em;
    margin-bottom: 2rem;
  }
  .cap h3 {
    font-family: 'Lora', serif;
    font-weight: 500;
    font-size: 1.55rem;
    line-height: 1.15;
    letter-spacing: -0.018em;
    margin-bottom: 1rem;
    color: var(--ink);
  }
  .cap p {
    font-size: 0.95rem; line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 0;
  }
  .cap .more {
    font-size: 0.86rem; font-weight: 500;
    color: var(--blue-deep);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: gap 200ms ease;
    margin-top: 1rem;   /* deliberate gap above link (was none — link hugged the paragraph) */
  }
  .cap:hover .more { gap: 0.7rem; }

  /* #about: trim wasted vertical space by ~33%. Outer (red): header->tiles gap
     (section-head margin) and tiles->section-end gap (padding-bottom). Inner
     (green): each tile's own top/bottom padding. Scoped to #about so the other
     .caps sections (#whatwedo, #stack) keep their spacing. */
  #about .section-head { margin-bottom: 3rem; }                 /* 4.5rem  -> -33% */
  #about            { padding-bottom: clamp(3.35rem, 6vw, 5.35rem); } /* clamp(5,9vw,8) -> -33% */
  #about .cap       { padding-top: 1.67rem; padding-bottom: 1.67rem; } /* 2.5rem -> -33% */

  /* === PINNED STACKING SECTIONS ===
     Inside a .pinstack wrapper, .pin sections stick to the top while the
     following opaque section scrolls up and covers them. The wrapper bounds
     the stickiness so it releases cleanly after the covering section. */
  .pinstack { position: relative; }
  /* Every pinned section sticks just below the nav and fills the viewport, so the
     next section scrolls up and fully covers the one above it. */
  .pinstack .pin {
    position: sticky;
    top: calc(1.25rem + 81px);
    padding-top: 1.9rem;
    min-height: 100vh;
  }

  /* Halved section gaps at the two requested junctions
     (default section padding is clamp(5rem, 9vw, 8rem)). */
  #whatwedo    { padding-bottom: clamp(2.5rem, 4.5vw, 4rem); }
  #experts  { padding-top:    clamp(2.5rem, 4.5vw, 4rem); }
  #services{ padding-bottom: clamp(2.5rem, 4.5vw, 4rem); }
  #stack    { padding-top:    clamp(2.5rem, 4.5vw, 4rem); }

  /* Anchor landing: every nav button should stop with the same small empty
     space above its heading as "Who we are" (#experts), which lands ~0.75rem
     below the nav. #experts has half the top padding of a regular section
     (clamp(2.5rem,4.5vw,4rem) vs clamp(5rem,9vw,8rem)); the CTA has its own
     pad. These scroll-margin overrides cancel that extra padding so #about,
     #services, #cases, #publications and #engage all land at the #experts gap. */
  /* Anchor landing: every nav button should stop with the same gap above its
     heading as "Who we are" (#experts), whose eyebrow lands ~clamp(2.5..4rem)
     below the nav. Each section's heading sits a different distance below its
     own top (regular padding vs the black header band on matters/insights vs the
     CTA pad), so each scroll-margin below cancels that and lands on the #experts
     gap. (Computed offsets — nudge the rem constants if a stop is slightly off.) */
  #about, #services {
    scroll-margin-top: calc(1.9rem - clamp(2.5rem, 4.5vw, 4rem));
  }
  #cases, #publications {
    scroll-margin-top: calc(-0.25rem - clamp(2.5rem, 4.5vw, 4rem));
  }
  #engage {
    scroll-margin-top: calc(1.9rem + clamp(2.5rem, 4.5vw, 4rem) - clamp(4rem, 7vw, 6rem));
  }

  /* === CAPABILITY STACK ===
     Header (eyebrow + title + blurb) sits in a full-width DARK-BLUE bar with
     light text — same mechanic as the matters/insights black header band, but
     blue. The cards below keep the light .caps theme. The title em is set
     upright (no wavy Fraunces italic). Bar colour is a single-value tweak. */
  #stack .section-head {
    position: relative;
    z-index: 1;
    background: var(--blue-deep);
    padding: 2.6rem 0;
    margin-bottom: 3.4rem;
  }
  #stack .section-head::before {
    content: '';
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 100vw; top: 0; bottom: 0;
    background: var(--blue-deep);
    z-index: -1;
  }
  #stack .section-tag { color: #FFFFFF; }
  #stack .section-tag::before { background: #FFFFFF; }
  #stack .section-title { color: #FFFFFF; }
  #stack .section-title em { font-style: normal; color: var(--gold); }  /* upright — no wavy italic */
  #stack .section-desc { color: rgba(255, 255, 255, 0.82); }

  /* === NETWORK SECTION (dark blue, light text) === */
  .network {
    background: var(--blue-grad);
    color: var(--paper);
    overflow: hidden;
  }
  .network .section-tag,
  .network .section-tag::before { color: var(--blue-pale); background-color: var(--blue-pale); }
  .network .section-title { color: var(--paper); }
  .network .section-title em { color: var(--gold); }
  .network .section-desc { color: rgba(249, 249, 250, 0.78); }
  .network::before {
    content: ''; position: absolute; inset: 0;
    background-image:
      radial-gradient(ellipse 50% 60% at 80% 30%, rgba(216, 217, 220, 0.12), transparent 60%),
      radial-gradient(ellipse 60% 50% at 15% 80%, rgba(26, 60, 120, 0.30), transparent 60%);
    pointer-events: none;
  }
  .network-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(216, 217, 220, 0.2);
    border: 1px solid rgba(216, 217, 220, 0.2);
    border-radius: 24px;
    overflow: hidden;
    position: relative; z-index: 1;
  }
  .stat {
    background: #000F33;
    padding: 3rem 2.5rem;
    position: relative;
  }
  .stat-figure {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--gold);
    margin-bottom: 1.25rem;
  }
  .stat-figure .unit {
    font-size: 0.55em;
    color: var(--gold);
    margin-left: 0.2em;
    font-weight: 300;
  }
  .stat-label {
    font-size: 0.92rem; line-height: 1.5;
    color: rgba(249, 249, 250, 0.82);
    max-width: 16rem;
  }
  .stat-lbl-top {
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--blue-pale);
    margin-bottom: 1.25rem;
  }

  /* === PRACTICE AREAS (alt to caps — denser) === */
  .practice .practice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .practice-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 2.5rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: start;
    transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .practice-card:hover {
    border-color: var(--blue-soft);
    box-shadow: 0 28px 60px -28px rgba(18, 20, 28, 0.22);
    transform: translateY(-4px);
  }
  .practice-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Lora', serif;
    font-size: 1.4rem;
    color: var(--blue-deep);
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px -4px rgba(18, 20, 28, 0.12);
  }
  .practice-card h3 {
    font-family: 'Lora', serif;
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-bottom: 0.65rem;
    color: var(--ink);
  }
  .practice-card p {
    font-size: 0.92rem; line-height: 1.55;
    color: var(--ink-soft);
  }
  .practice-tags {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
    margin-top: 1rem;
  }
  .practice-tags span {
    font-size: 0.72rem;
    padding: 0.25rem 0.7rem;
    background: var(--blue-glass);
    color: var(--blue-deep);
    border-radius: 999px;
    font-weight: 500;
  }
  /* "Who we work with" character boxes — dark blue with a gold formal-script initial */
  #services .practice-icon {
    background: #000F33;
    color: var(--gold);
    font-family: 'Pinyon Script', cursive;
    font-size: 1.69rem;   /* 65% of former 2.6rem; box stays 56px */
    font-weight: 400;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    -webkit-text-stroke: 0.45px var(--gold);   /* 0.7px scaled to ~65% to keep stroke proportional */
    paint-order: stroke fill;
    border: 1px solid rgba(201, 162, 75, 0.35);
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.4);
  }
  #services .practice-icon span {
    display: block;
    transform: translate(-0.1em, 0.08em);   /* counter Pinyon's left bearing + high baseline */
  }

  /* === SELECTED MATTERS === */
  .matters {
    background: var(--paper);
  }
  .matters-list {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--line);
  }
  .matter {
    display: grid;
    grid-template-columns: 100px 200px 1fr auto;
    gap: 2rem;
    padding: 2rem 1rem;
    border-bottom: 1px solid var(--line);
    align-items: center;
    transition: background 250ms ease;
  }
  .matter:hover { background: var(--paper-2); }
  .matter-year {
    font-family: 'Lora', serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--blue-deep);
    letter-spacing: -0.01em;
  }
  .matter-tag {
    font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-mute);
  }
  .matter-title {
    font-family: 'Lora', serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
  .matter-jur {
    font-size: 0.85rem;
    color: var(--ink-soft);
    background: var(--white);
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-weight: 500;
  }

  /* === INSIGHTS PREVIEW === */
  .insights {
    background: #0F1E3C;   /* same blue as the footer */
  }
  /* Insights is a deep dark-blue section: header text is white only (no gold).
     The tiles keep their own colours (white cards, blue meta/links). */
  #publications .section-tag { color: #FFFFFF; }
  #publications .section-tag::before { background: #FFFFFF; }
  #publications .section-title { color: #FFFFFF; }
  #publications .section-title em { color: #FFFFFF; }
  #publications .section-desc { color: rgba(255, 255, 255, 0.82); }
  /* Alternating editorial rows: text on one side, a (placeholder) figure box on
     the other, sides flipping every row. Heading reads as the lead element. */
  .insights-timeline {
    display: flex; flex-direction: column;
    gap: clamp(3.5rem, 6vw, 6.5rem);
  }
  .insight-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    text-decoration: none;
    color: #FFFFFF;
  }
  .insight-row:nth-child(even) .insight-text   { order: 2; }
  .insight-row:nth-child(even) .insight-figure { order: 1; }
  .insight-text { display: flex; flex-direction: column; }
  .insight-meta {
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1.1rem;
  }
  .insight-row h3 {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(1.7rem, 2.8vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin-bottom: 1.1rem;
  }
  .insight-row p {
    font-size: 1rem; line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 1.6rem;
    max-width: 34rem;
  }
  .insight-row .read {
    font-size: 0.85rem; font-weight: 500;
    color: #FFFFFF;
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: gap 200ms ease;
  }
  .insight-row:hover .read { gap: 0.8rem; }
  .insight-figure {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;            /* clip video/img children to the rounded box */
    background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.26);
    transition: border-color 350ms ease, transform 350ms ease;
  }
  /* Real art (video/img) fills the box and is masked to its rounded-rect shape.
     object-fit: cover crops the 16/9 source into the 4/3 (desktop) or 16/9
     (mobile) figure; border-radius: inherit + overflow: hidden do the masking. */
  .insight-figure.has-video,
  .insight-figure.has-img { background: none; }
  .insight-figure video,
  .insight-figure img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
  }
  .insight-row:hover .insight-figure {
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-4px);
  }
  .insight-figure svg { width: 48px; height: 48px; }
  @media (max-width: 900px) {
    .insight-row { grid-template-columns: 1fr; gap: 1.4rem; }
    .insight-row:nth-child(even) .insight-text   { order: 1; }
    .insight-row:nth-child(even) .insight-figure { order: 2; }
    .insight-figure { aspect-ratio: 16 / 9; }
  }

  /* === CTA STRIP === */
  .cta-strip {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(4rem, 7vw, 6rem) 5%;
    position: relative; overflow: hidden;
  }
  .cta-strip::before {
    content: ''; position: absolute;
    top: -40%; right: -10%;
    width: 60%; height: 180%;
    background: radial-gradient(ellipse at center, rgba(26, 60, 120, 0.35), transparent 60%);
    pointer-events: none;
  }
  .cta-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1.4fr 1fr;
    gap: 4rem; align-items: start;
    position: relative; z-index: 1;
  }
  .cta-strip h2 {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 3.2vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -0.022em;
    margin-bottom: 1.25rem;
  }
  .cta-strip h2 em { font-style: italic; color: var(--blue-pale); font-weight: 300; }
  .cta-strip p {
    color: rgba(249, 249, 250, 0.78);
    font-size: 1.05rem; line-height: 1.6;
    max-width: 30rem;
  }
  .cta-actions {
    display: flex; flex-direction: column; gap: 1rem;
    /* Nudge the button down so its top edge meets the CAP height of the
       heading's first line, not the h2 line-box top. 0.217 * font-size is the
       measured cap-top offset for Fraunces at line-height 1.1; expressed against
       the same clamp() so it tracks the responsive heading size. */
    margin-top: calc(0.217 * clamp(1.8rem, 3.2vw, 2.7rem));
  }
  .cta-actions .btn-primary { background: var(--paper); color: var(--ink); justify-content: center; font-size: 1.05rem; }
  .cta-actions .btn-primary:hover { background: var(--blue-pale); }
  .cta-actions .btn-secondary {
    background: transparent; color: var(--paper);
    border-color: rgba(249, 249, 250, 0.35);
  }
  .cta-actions .btn-secondary:hover {
    background: rgba(249, 249, 250, 0.1);
    border-color: var(--paper);
    color: var(--paper);
  }

  /* === FOOTER === */
  footer {
    background: #0F1E3C;
    color: rgba(249, 249, 250, 0.75);
    padding: 4rem 5% 2.5rem;
  }
  .footer-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3.5rem;
    margin-bottom: 3rem;
  }
  .footer-brand .brand .mark {
    background: var(--paper); color: var(--ink);
  }
  .footer-brand .brand .word { color: var(--paper); }
  .footer-brand .brand .word small { color: rgba(249, 249, 250, 0.55); }
  .footer-brand .brand-logo { height: 48px; }
  .footer-brand p {
    margin-top: 1.5rem;
    font-size: 0.9rem; line-height: 1.6;
    max-width: 22rem;
  }
  footer h4 {
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--blue-pale);
    margin-bottom: 1.25rem;
  }
  footer ul { list-style: none; }
  footer ul li { margin-bottom: 0.65rem; }
  footer ul a {
    color: rgba(249, 249, 250, 0.75);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 200ms ease;
  }
  footer ul a:hover { color: var(--paper); }
  .footer-meta {
    border-top: 1px solid rgba(249, 249, 250, 0.12);
    padding-top: 1.5rem;
    display: flex; justify-content: space-between;
    align-items: center; flex-wrap: wrap; gap: 1rem;
    max-width: 1200px; margin: 0 auto;
    font-size: 0.82rem;
  }
  .footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
  .footer-legal a { color: rgba(249, 249, 250, 0.55); text-decoration: none; }
  .footer-legal a:hover { color: var(--paper); }

  /* === MOBILE === */
  @media (max-width: 900px) {
    .pinstack .pin { position: static; min-height: 0; }   /* no pinning on mobile — normal flow */
    #experts .section-head { position: static; background: transparent; padding-top: 0; padding-bottom: 0; }
    #experts .section-head::before { display: none; }
    .hero-inner, .section-head, .practice-grid, .insights-grid, .caps-grid,
    .network-stats, .cta-inner, .footer-inner { grid-template-columns: 1fr !important; }
    .cta-actions { margin-top: 0; }   /* stacked layout — no cap-align offset needed */
    .matter { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.5rem 0.5rem; }
    .nav-links { display: none; }
    .nav-cta { padding: 0.5rem 1rem; }
    .hero { position: relative; height: auto; min-height: 100vh; flex-direction: column; }
    .page-body { margin-top: 0; }
    .hero-inner { margin-top: 0; }
    .hero-row { flex-direction: column; }
    .hero-card { width: 100%; aspect-ratio: auto; margin-top: 2rem; }
  }

  /* === SHORT VIEWPORTS (desktop widths) ===
     The hero is normally pinned (fixed, 100vh, overflow:hidden) with the page
     scrolling up over it — which means anything taller than the viewport is
     clipped and unreachable. On short/zoomed screens the headline + lede + card
     exceed 100vh, so here we (a) unpin the hero into normal flow (nothing can be
     clipped; the small remainder is reachable by scroll) and (b) tighten the
     vertical rhythm so it still fits on load on typical laptops. Large displays
     (taller than 880px) keep the pinned scroll-over effect. */
  @media (min-width: 901px) and (max-height: 920px) {
    .hero {
      position: relative; height: auto; min-height: 100vh;
      padding-top: 6.75rem; padding-bottom: 2.5rem;
    }
    .page-body { margin-top: 0; }
    .hero-inner { margin-top: 4rem; }
    h1.headline {
      font-size: min(clamp(2.6rem, 5.3vw, 6.25rem), 9.2vh);
      margin-bottom: 4rem;
    }
    .lede { line-height: 1.32; margin-bottom: 0; }
    .cred-card { padding: 20px; }
    .cred-list { gap: 0.7rem; }
    .cred-list li { padding-bottom: 0.7rem; }
    .hero-card { margin-top: -8px; }
  }

  /* === VERY SHORT VIEWPORTS — tighten a little further === */
  @media (min-width: 901px) and (max-height: 720px) {
    .hero { padding-top: 6.5rem; padding-bottom: 1rem; }
    .hero-inner { margin-top: 2.5rem; }
    h1.headline { font-size: min(clamp(2.6rem, 5.3vw, 6.25rem), 8vh); margin-bottom: 2.5rem; }
    .lede {
      font-size: clamp(1.28rem, 1vw + 0.38rem, 1.55rem);
      line-height: 1.25;
    }
    .cred-card .lbl { margin-bottom: 1rem; }
    .cred-list { gap: 0.55rem; }
    .cred-list li { padding-bottom: 0.55rem; }
  }

  /* === HOME #experts — portrait-capable === */
  #experts .practice-card { grid-template-columns: 110px 1fr; gap: 1.6rem; }
  #experts .practice-icon {
    width: 127px; height: 127px;
    border-radius: 18px;
    font-family: 'Lora', serif;
    font-size: 3.2rem; font-weight: 400;
    background-size: cover; background-position: center;
    overflow: hidden; position: relative;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 20px -8px rgba(18, 20, 28, 0.22);
  }
  #experts .practice-icon.portrait-fallback {
    background: linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%);
    color: var(--blue-deep);
  }
  #experts .practice-icon.portrait-ai {
    background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-mid) 100%);
    color: var(--paper);
  }
  #experts .practice-grid { display: flex; flex-direction: column; gap: 1.45rem; }
  /* Expert cards: full-bleed portrait on the left (mockup style) — 15% larger */
  #experts .practice-card {
    padding: 0; gap: 0;
    grid-template-columns: 180px 1fr;
    align-items: stretch;
    overflow: hidden;
    min-height: 175px;
  }
  #experts .practice-card h3 { font-size: 1.5rem; }
  #experts .practice-card p { font-size: 1rem; }
  #experts .practice-card > div { padding: 1.95rem 2.3rem; align-self: center; }
  #experts .practice-photo {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 22%;
    display: block;
  }
  @media (max-width: 900px) {
    #experts .practice-card { grid-template-columns: 129px 1fr; gap: 0; min-height: 147px; }
    #experts .practice-card > div { padding: 1.4rem 1.5rem; }
  }

  /* === Scroll fade-in / fade-out (editorial, McKinsey-style) ===
     Applied to the insight rows and the #experts member cards. Gated on
     .js-fade so content is fully visible if JS is off; disabled for users
     who prefer reduced motion. The IntersectionObserver toggles .in. */
  .js-fade .fade-item {
    opacity: 0;
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
  }
  .js-fade .fade-item.in { opacity: 1; }
  .js-fade .insight-row.fade-item { transform: translateY(30px); }
  .js-fade .insight-row.fade-item.in { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .js-fade .fade-item {
      opacity: 1 !important; transform: none !important; transition: none !important;
    }
  }


  /* ============================================================
     AUDIENCES — publications-style timeline, light section.
     Title matches the "Five audiences" heading size; text and image meet at
     the centre (split from the middle) and swap sides each row; the placeholder
     image box is compact so the words lead.
     ============================================================ */
  #services .insight-row {
    color: var(--ink);
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  /* split from the centre: each element hugs the central gap; sides swap per row */
  #services .insight-text   { justify-self: end;   max-width: 30rem; }
  #services .insight-figure { justify-self: start; width: 100%; max-width: 18rem; }
  #services .insight-row:nth-child(even) .insight-text   { justify-self: start; }
  #services .insight-row:nth-child(even) .insight-figure { justify-self: end; }
  #services .insight-row h3 {
    color: var(--ink);
    font-size: clamp(2rem, 3.4vw, 3.1rem);   /* matches .section-title ("Five audiences") */
    line-height: 1.05;
  }
  #services .insight-row p {
    color: var(--ink-soft);
    font-size: clamp(0.94rem, 1.2vw, 1.1rem);   /* 15% smaller than before */
    line-height: 1.55;
  }
  #services .insight-figure {
    background: linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%);
    border: 1px solid var(--line);
    color: var(--blue-mid);
  }
  #services .insight-row:hover .insight-figure { border-color: var(--blue-soft); }
  #services .insight-row .practice-tags { margin-top: 1.2rem; }
  @media (max-width: 900px) {
    #services .insight-row,
    #services .insight-row:nth-child(even) { grid-template-columns: 1fr; }
    #services .insight-text,
    #services .insight-figure,
    #services .insight-row:nth-child(even) .insight-text,
    #services .insight-row:nth-child(even) .insight-figure { justify-self: stretch; }
    #services .insight-text   { max-width: none; }
    #services .insight-figure { max-width: none; }
  }

  /* ============================================================
     TRACK RECORD + INSIGHTS — full-width black header band.
     The eyebrow + title sit in a black bar spanning the page width; the
     section body below keeps its own background (matters = grey, insights = blue).
     ============================================================ */
  #cases .section-head,
  #publications .section-head {
    position: relative;
    z-index: 1;
    background: #000000;
    padding: 2.6rem 0;
    margin-bottom: 3.4rem;
  }
  #cases .section-head::before,
  #publications .section-head::before {
    content: '';
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 100vw; top: 0; bottom: 0;
    background: #000000;
    z-index: -1;
  }
  /* track-record header text -> light on the black bar (body stays grey) */
  #cases .section-tag { color: #FFFFFF; }
  #cases .section-tag::before { background: #FFFFFF; }
  #cases .section-title { color: #FFFFFF; }
  #cases .section-title em { color: var(--gold); }
  #cases .section-desc { color: rgba(255, 255, 255, 0.82); }

  /* ============================================================
     INSIGHTS — each tile is a full-width band, alternating blue / black,
     starting with blue. Bands butt together (no gap) for a clean stack.
     ============================================================ */
  #publications .insights-timeline { gap: 0; }
  #publications .insight-row {
    position: relative;
    z-index: 1;
    padding: clamp(2.6rem, 5vw, 4.5rem) 0;
  }
  #publications .insight-row::before {
    content: '';
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 100vw; top: 0; bottom: 0;
    z-index: -1;
  }
  #publications .insight-row:nth-child(odd)::before  { background: #102347; }   /* blue */
  #publications .insight-row:nth-child(even)::before { background: #000000; }   /* black */
  /* Per-tile colour overrides (win over the nth-child alternation via source
     order). Used to pin a band's colour independent of its position — e.g. so
     "Pass-on …" stays blue after a tile above it was removed. */
  #publications .insight-row.insight-row--blue::before  { background: #102347; }
  #publications .insight-row.insight-row--black::before { background: #000000; }

  /* Apple tile blends into the pure-black band: its image background is already
     #000000, so drop the figure's hairline border (default + hover) — the rounded
     box edge then disappears and the apple appears to float in the band. */
  #publications .insight-row--black .insight-figure,
  #publications .insight-row--black:hover .insight-figure { border-color: transparent; }

  /* Tighten the black-header sections (#publications + #cases) so the first
     row/tile lands in view when the nav anchor jumps here: drop the section-head's
     wasted bottom-margin band and trim its padding. #publications also shrinks its
     first tile's top padding; #cases keeps its first .matter's normal padding. */
  #cases .section-head,
  #publications .section-head { margin-bottom: 0; padding-top: 2.1rem; padding-bottom: 2.1rem; }
  #publications .insight-row:first-child { padding-top: clamp(1.1rem, 1.8vw, 1.6rem); }

  /* ---- Publication thumbnails: "documentary" Ken Burns pan/zoom ----
     Scoped to #publications image figures so the #services <video> figures are left
     alone. .insight-figure already masks its children (overflow:hidden +
     border-radius); here the masked <img> is oversized and slow-panned. The zoom
     swing is deliberately large (~1.10 -> 1.30) so the motion reads clearly rather
     than as an imperceptible creep. Variants + staggered durations/delays keep the
     seven tiles from drifting in lockstep; 'alternate' eases back instead of
     snapping. object-position (e.g. the inline 'right' on the Lady-Justice tile)
     sets the framing; the transform animates on top of it. */
  #publications .insight-figure.has-img img {
    transform-origin: center;
    will-change: transform;
    animation: kenburns-a 20s ease-in-out infinite alternate;
  }
  #publications .insight-row:nth-child(1) .insight-figure img { animation-name: kenburns-a; animation-duration: 19s; }
  #publications .insight-row:nth-child(2) .insight-figure img { animation-name: kenburns-c; animation-duration: 23s; animation-delay: -3s; }
  #publications .insight-row:nth-child(3) .insight-figure img { animation-name: kenburns-b; animation-duration: 21s; animation-delay: -6s; }
  #publications .insight-row:nth-child(4) .insight-figure img { animation-name: kenburns-d; animation-duration: 24s; animation-delay: -9s; }
  #publications .insight-row:nth-child(5) .insight-figure img { animation-name: kenburns-a; animation-duration: 22s; animation-delay: -12s; }
  #publications .insight-row:nth-child(6) .insight-figure img { animation-name: kenburns-c; animation-duration: 20s; animation-delay: -5s; }
  #publications .insight-row:nth-child(7) .insight-figure img { animation-name: kenburns-d; animation-duration: 25s; animation-delay: -8s; }

  @keyframes kenburns-a { from { transform: scale(1.10) translate(0%, 0%);   } to { transform: scale(1.30) translate(-3%, -3%); } }
  @keyframes kenburns-b { from { transform: scale(1.30) translate(3%, 2%);   } to { transform: scale(1.10) translate(0%, 0%);   } }
  @keyframes kenburns-c { from { transform: scale(1.12) translate(-3%, 3%);  } to { transform: scale(1.28) translate(3%, -3%);  } }
  @keyframes kenburns-d { from { transform: scale(1.28) translate(-3%, -3%); } to { transform: scale(1.12) translate(3%, 3%);   } }

  @media (prefers-reduced-motion: reduce) {
    #publications .insight-figure.has-img img { animation: none; transform: scale(1.06); }
  }

/* ===== EN / PT language switch (nav) ===== */
.lang-switch{position:relative;display:inline-flex;align-items:center;margin-left:0.7rem;font-family:'Inter',sans-serif;}
.lang-current{display:inline-flex;align-items:center;gap:0.3rem;background:none;border:1px solid rgba(255,255,255,0.30);color:#fff;font:inherit;font-size:0.8rem;font-weight:500;letter-spacing:0.06em;padding:0.36rem 0.72rem;border-radius:999px;cursor:pointer;line-height:1;transition:border-color .15s ease;}
.lang-current:hover{border-color:rgba(255,255,255,0.65);}
.lang-caret{font-size:0.62em;opacity:0.8;}
.lang-menu{display:none;position:absolute;top:calc(100% + 0.5rem);right:0;min-width:4.6rem;list-style:none;margin:0;padding:0.3rem;background:#fff;border-radius:0.6rem;box-shadow:0 12px 34px rgba(10,22,50,0.28);z-index:80;}
.lang-switch::after{content:"";position:absolute;top:100%;right:0;width:4.8rem;height:0.7rem;}
.lang-switch:hover .lang-menu,.lang-switch:focus-within .lang-menu{display:block;}
.lang-menu li{margin:0;}
.lang-menu a{display:block;padding:0.42rem 0.7rem;border-radius:0.4rem;color:var(--blue-deep,#14233f);text-decoration:none;font-size:0.82rem;font-weight:600;letter-spacing:0.06em;}
.lang-menu a:hover{background:var(--blue-glass,rgba(20,35,63,0.08));}
.lang-menu a.is-active{color:#9aa3b2;pointer-events:none;}

/* hover bridge: keep menu open while moving cursor from button to menu */
.lang-current{position:relative;}
.lang-current::after{content:"";position:absolute;left:0;right:0;top:100%;height:0.6rem;}

/* boxed language options (EN / PT each in a little box) */
.lang-menu{padding:0.32rem;}
.lang-menu a{border:1px solid rgba(20,35,63,0.22);text-align:center;}
.lang-menu li + li{margin-top:0.3rem;}
.lang-menu a.is-active{border-color:rgba(20,35,63,0.12);}

/* ===== mobile hamburger nav ===== */
.nav { position: relative; }
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 40px; padding: 0 10px; flex: none;
  background: none; border: 1px solid rgba(255,255,255,0.30);
  border-radius: 12px; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; width: 100%; background: #fff;
  border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; top: calc(100% + 0.7rem); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0.15rem;
    background: rgba(0,15,51,0.97);
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.14); border-radius: 20px;
    padding: 0.85rem 1rem 1.05rem;
    box-shadow: 0 22px 55px -18px rgba(0,0,0,0.6);
  }
  .nav:not(.nav-open) .nav-links { display: none; }
  .nav.nav-open .nav-links { display: flex; }
  .nav-links a { padding: 0.7rem 0.5rem; font-size: 1rem; }
  .nav-links a.nav-cta { text-align: center; margin-top: 0.45rem; }
  .lang-switch { margin-top: 0.5rem; align-self: flex-start; }
  .nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ===== FAILSAFE: pinned-section overflow protection =====
   The pinned "How we work" (#method) and "What we do" (#whatwedo) sections stick
   under the nav while the next section scrolls over them. If the window is too
   short to show a whole section beneath the pinned nav, their lower content would
   be hidden below the fold / behind the OS taskbar or dock before the covering
   section arrives. Below ~880px of viewport height we release the pin so these
   sections scroll normally and every part of them is guaranteed visible. */
@media (max-height: 880px) {
  .pinstack .pin { position: static; min-height: 0; }
}

/* Italic accent words in the grey (.caps) sections go burgundy.
   #about and #whatwedo use the paper->paper-2 grey gradient; #stack is also
   .caps but its title sits on a dark band, so its #stack em rule (gold) wins. */
.caps .section-title em { color: var(--burgundy); }