@font-face { font-family:"LaroSoft"; font-weight:400; font-style:normal; font-display:swap;
    src:local("Laro Soft"),
        url(fonts/laro-01.woff2) format("woff2"); }
  @font-face { font-family:"LaroSoft"; font-weight:500; font-style:normal; font-display:swap;
    src:local("Laro Soft"),
        url(fonts/laro-01.woff2) format("woff2"); }
  @font-face { font-family:"LaroSoft"; font-weight:600; font-style:normal; font-display:swap;
    src:local("Laro Soft Medium"),
        url(fonts/laro-02.woff2) format("woff2"); }
  @font-face { font-family:"LaroSoft"; font-weight:700; font-style:normal; font-display:swap;
    src:local("Laro Soft SemiBold"),
        url(fonts/laro-03.woff2) format("woff2"); }
  @font-face { font-family:"LaroSoft"; font-weight:800; font-style:normal; font-display:swap;
    src:local("Laro Soft Bold"),
        url(fonts/laro-04.woff2) format("woff2"); }
  @font-face { font-family:"LaroSoft"; font-weight:900; font-style:normal; font-display:swap;
    src:local("Laro Soft Black"),
        url(fonts/laro-05.woff2) format("woff2"); }

  :root {
    /* the descent: each section sits one stop deeper than the last */
    --surface: #EAF7F9;
    --foam:    #DEF3F6;
    --shallow: #76B6C4;
    --mid:     #1B6E9B;
    --deep:    #064273;
    --abyss:   #041E38;
    --pink:    #FF007F;
    --sand:    #F5EADB;
    --ink:     #041E38;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--abyss);
    font-family: "LaroSoft", sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }
  img { display: block; max-width: 100%; }
  a { color: inherit; }

  .wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }

  /* ---------- depth rail ---------- */
  .rail {
    position: fixed;
    left: 40px; top: 0;
    height: 100vh;
    z-index: 40;
    display: flex; flex-direction: column; align-items: center;
    gap: 16px;
    padding: 42px 0;
    pointer-events: none;
  }
  .rail-track {
    position: relative;
    flex: 1 1 auto;
    width: 3px;
    background: rgba(255,255,255,.26);
    border-radius: 3px;
  }
  .rail-fill {
    position: absolute; top: 0; left: 0;
    width: 3px; height: 0;
    background: var(--pink);
    border-radius: 3px;
  }
  .rail-tick {
    position: absolute; left: 50%;
    width: 11px; height: 1px; margin-left: -5.5px;
    background: rgba(255,255,255,.4);
  }
  .rail-dot {
    position: absolute; left: 50%; top: 0;
    width: 14px; height: 14px; margin-left: -7px; margin-top: -7px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 0 6px rgba(255,0,127,.2);
  }
  .rail-cursor {
    position: absolute; left: 20px; top: 0;
    transform: translateY(-50%);
    font-size: 17px; font-weight: 900; letter-spacing: .02em;
    color: var(--pink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .rail-end {
    font-size: 12px; font-weight: 800; letter-spacing: .16em;
    color: rgba(255,255,255,.7);
    font-variant-numeric: tabular-nums;
  }
  .rail.is-light .rail-track { background: rgba(4,30,56,.2); }
  .rail.is-light .rail-tick  { background: rgba(4,30,56,.32); }
  .rail.is-light .rail-end   { color: rgba(4,30,56,.66); }

  /* ---------- shared type ---------- */
  .eyebrow {
    font-size: 13px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    color: #9C0049;
    margin: 0 0 22px;
  }
  .eyebrow.on-dark  { color: #7FD4E8; }
  h1, h2, h3 { margin: 0; font-weight: 900; }
  h2 { font-size: 52px; line-height: 1.12; letter-spacing: -.01em; }
  p  { margin: 0; font-weight: 400; }
  .lede { font-size: 21px; line-height: 1.55; }

  .btn {
    display: inline-block;
    padding: 17px 34px;
    border-radius: 999px;
    font-size: 19px; font-weight: 700;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn-pink  { background: var(--pink); color: #fff; }
  .btn-pink:hover { background: #E00070; }
  .btn-ghost { border: 2px solid currentColor; padding: 15px 32px; }

  /* ---------- 1. surface / hero ---------- */
  .surface {
    position: relative;
    background: linear-gradient(180deg, var(--surface) 0%, var(--foam) 58%, #CFE9EF 100%);
    padding: 54px 0 130px;
    overflow: hidden;
  }
  .shafts {            /* light coming down through the water */
    position: absolute; inset: -20% -10% auto -10%; height: 130%;
    background:
      linear-gradient(104deg, rgba(255,255,255,.85) 0 2.5%, transparent 2.5% 13%),
      linear-gradient(97deg,  rgba(255,255,255,.60) 0 1.6%, transparent 1.6% 8%),
      linear-gradient(110deg, rgba(255,255,255,.45) 0 4%, transparent 4% 21%),
      linear-gradient(92deg,  rgba(255,255,255,.35) 0 1.2%, transparent 1.2% 6%);
    pointer-events: none;
  }
  .topbar {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 84px;
  }
  .mark img { height: 44px; width: auto; }
  .nav { display: flex; gap: 34px; font-size: 15px; font-weight: 600; color: var(--deep); }
  .nav a { text-decoration: none; opacity: .82; }
  .nav a:hover { opacity: 1; }

  .hero { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 300px; gap: 64px; align-items: center; }
  .hero h1 { font-size: 74px; line-height: .94; letter-spacing: -.025em; color: var(--deep); }
  .hero .role {
    margin: 22px 0 0;
    font-size: 22px; font-weight: 700; line-height: 1.4;
    color: var(--mid);
  }
  .hero .lede { margin: 26px 0 0; max-width: 30em; color: var(--deep); }
  .hero-cta { margin-top: 38px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
  .hero-cta .btn-ghost { color: var(--deep); }

  .portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 0;
    background: rgba(6,66,115,.07);
    border: 2px dashed rgba(6,66,115,.35);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    font-size: 14px; font-weight: 600; line-height: 1.5;
    color: rgba(6,66,115,.6);
    padding: 24px;
  }
  .portrait.has-img { border: 0; background: none; padding: 0; }
  .portrait img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 38%;
    border-radius: inherit;
  }

  /* ---------- 2. shallows / who ---------- */
  .shallows {
    background: linear-gradient(180deg, #CFE9EF 0%, #9FCEDC 100%);
    padding: 120px 0 130px;
    color: #052E4B;
  }
  .who { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .who h2 { color: #04283F; max-width: 11em; }
  .who .lede { color: var(--deep); }
  .who .lede + .lede { margin-top: 20px; }

  /* ---------- 3. descent / services ---------- */
  .descent {
    background: linear-gradient(180deg, #9FCEDC 0%, #0E5A85 9%, var(--deep) 26%, #05355C 100%);
    padding: 130px 0 140px;
    color: #EAF7F9;
  }
  .descent h2 { color: #fff; max-width: 13em; }
  .descent .intro { margin: 24px 0 0; max-width: 34em; color: rgba(234,247,249,.85); }
  .stops { margin-top: 76px; display: grid; gap: 0; }
  .stop {
    display: grid; grid-template-columns: 132px 1fr 1fr; gap: 44px;
    padding: 34px 0;
    border-top: 1px solid rgba(255,255,255,.22);
    align-items: baseline;
  }
  .stop:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
  .stop-depth {
    font-size: 15px; font-weight: 800; letter-spacing: .1em;
    color: #7FD4E8;
    font-variant-numeric: tabular-nums;
  }
  .stop h3 { font-size: 30px; line-height: 1.15; color: #fff; }
  .stop p { font-size: 17px; line-height: 1.6; color: rgba(234,247,249,.82); }

  /* ---------- 4. deep / proof ---------- */
  .deep {
    background: var(--deep);
    padding: 120px 0;
    color: #EAF7F9;
  }
  .deep h2 { color: #fff; text-align: center; margin-bottom: 18px; }
  .deep .sub { text-align: center; color: rgba(234,247,249,.8); max-width: 36em; margin: 0 auto 72px; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .stat {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    padding: 34px 30px;
  }
  .stat-num { font-size: 54px; font-weight: 900; line-height: 1; color: #FF66AC; }
  .stat-cap { margin-top: 12px; font-size: 16px; line-height: 1.5; color: rgba(234,247,249,.85); }
  .stat-src { margin-top: 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(234,247,249,.72); }

  .quote {
    margin-top: 72px;
    background: var(--sand);
    color: var(--ink);
    border-radius: 22px;
    padding: 48px 60px;
    max-width: 44em;
  }
  .quote blockquote { margin: 0; font-size: 27px; line-height: 1.42; font-weight: 700; }
  .quote .attr { margin-top: 20px; font-size: 15px; font-weight: 600; color: #6A5A44; }


  /* ---------- 4b. wreck / case study ---------- */
  .wreck {
    background: linear-gradient(180deg, var(--deep) 0%, #05395F 100%);
    padding: 120px 0 130px;
    color: #DCEEF5;
  }
  .wreck h2 { color: #fff; max-width: 13em; }
  .case-head { display: grid; grid-template-columns: 1fr 360px; gap: 72px; align-items: end; }
  .case-head .sub { color: rgba(220,238,245,.82); font-size: 19px; line-height: 1.6; }
  .case-body { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
  .case-body p { font-size: 18px; line-height: 1.68; color: rgba(220,238,245,.86); }
  .case-body p + p { margin-top: 20px; }
  .case-body p:first-child { font-size: 21px; color: #EAF7F9; }
  .case-lists { display: grid; gap: 34px; align-content: start; }
  .case-list h3 {
    font-size: 12px; font-weight: 800; letter-spacing: .17em;
    text-transform: uppercase; color: #7FD4E8; margin: 0 0 14px;
  }
  .case-list p { font-size: 17px; line-height: 1.6; color: rgba(220,238,245,.9); }
  .case-list b { color: #fff; font-weight: 800; }
  .case-note {
    margin-top: 44px; padding-top: 30px;
    border-top: 1px solid rgba(127,212,232,.28);
    display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: baseline;
  }
  .case-note span { font-size: 17px; color: rgba(220,238,245,.9); }
  .case-note span b { color: #FF66AC; font-weight: 800; }
  .case-link {
    display: inline-block; margin-top: 34px;
    font-size: 16px; font-weight: 800; color: #7FD4E8;
    text-decoration: none; border-bottom: 2px solid rgba(127,212,232,.45);
    padding-bottom: 3px;
  }
  .case-link:hover { color: #fff; border-bottom-color: #fff; }

  /* ---------- 5. abyss / about ---------- */
  .abyss {
    background: linear-gradient(180deg, #05355C 0%, var(--abyss) 58%);
    padding: 130px 0 140px;
    color: #DCEEF5;
  }
  .about { display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: center; }
  .about-shot {
    aspect-ratio: 4 / 5; border-radius: 18px;
    border: 2px dashed rgba(220,238,245,.35);
    background: rgba(255,255,255,.04);
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 14px; font-weight: 600; line-height: 1.5; color: rgba(220,238,245,.6); padding: 24px;
  }
  .about-shot.has-img { border: 0; background: none; padding: 0; overflow: hidden; }
  .about-shot.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
  .about h2 { color: #fff; }
  .about p { margin-top: 22px; font-size: 18px; line-height: 1.65; color: rgba(220,238,245,.82); }
  .about p:first-of-type { font-size: 21px; color: #EAF7F9; }


  .strip { margin-top: 56px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 760px; }
  .strip figure { margin: 0; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; }
  .strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .strip-cap { margin-top: 16px; font-size: 14px; font-weight: 700; color: rgba(220,238,245,.55); }

  /* ---------- 6. ascent / cta ---------- */
  .ascent {
    background: linear-gradient(180deg, var(--abyss) 0%, var(--deep) 52%, #0E5A85 100%);
    padding: 140px 0 120px;
    text-align: center;
  }
  .ascent h2 { color: #fff; font-size: 62px; }
  .ascent .lede { margin: 26px auto 0; max-width: 32em; color: rgba(255,255,255,.88); }
  .ascent .btn { margin-top: 44px; }
  .ascent .note { margin-top: 26px; font-size: 15px; font-weight: 700; color: #EAF7F9; }

  footer {
    background: #9FCEDC;
    padding: 40px 0 56px;
    color: #05304E;
    font-size: 14px; font-weight: 700;
  }
  .foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
  .foot a { text-decoration: none; opacity: .75; }
  .foot a:hover { opacity: 1; }

  /* ---------- responsive ---------- */
  @media (max-width: 1240px) {
    .rail { display: none; }
  }
  @media (max-width: 1000px) {
    .hero, .who, .about, .quote { grid-template-columns: 1fr !important; }
  .quote-legacy { grid-template-columns: 1fr; gap: 44px; }
    .stats { grid-template-columns: 1fr; }
    .stop { grid-template-columns: 90px 1fr; }
    .stop p { grid-column: 2; }
    .hero h1 { font-size: 62px; }
    h2 { font-size: 38px; }
    .ascent h2 { font-size: 42px; }
    .portrait { max-width: 420px; }
    .quote { grid-template-columns: 1fr !important; }
  .quote-legacy { padding: 38px 32px; }
  }
  @media (max-width: 620px) {
    .wrap { padding: 0 22px; }
    .nav { display: none; }
    .hero h1 { font-size: 46px; }
    h2 { font-size: 31px; }
    .lede { font-size: 18px; }
    .quote blockquote { font-size: 21px; }
    .stat-num { font-size: 42px; }
  }

/* ============ multi-page site additions ============ */

/* nav */



/* hero, larger portrait */
.hero { grid-template-columns: 1fr 460px !important; gap: 68px !important; }
.portrait { aspect-ratio: 4/5; }

/* scattered photography */
.scatter { position: relative; }
.drop { position: absolute; border-radius: 14px; overflow: hidden; line-height: 0;
        box-shadow: 0 26px 60px rgba(4,30,56,.28); }
.drop img { width: 100%; height: auto; display: block; }
.drop figcaption {
  line-height: 1.35;
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 10px; font-size: 11px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(4,30,56,.72));
}
.drop-a { width: 300px; right: -26px;  top: -54px; }
.drop-b { width: 250px; left: -38px;   bottom: -60px; }
.drop-c { width: 420px; right: -34px;  bottom: -70px; }
.drop-d { width: 230px; right: 2%;     top: -40px; }

.who { position: relative; }
.who-photo { position: static; width: 320px; margin: 46px 0 0; transform: translateX(-26px); }

/* about, bigger portrait again */
.about { grid-template-columns: 340px 1fr !important; gap: 68px !important; }

/* teaser links out to the other pages */
.more {
  display: inline-block; margin-top: 40px;
  font-size: 16px; font-weight: 800; text-decoration: none;
  color: var(--deep); border-bottom: 2px solid rgba(6,66,115,.4); padding-bottom: 3px;
}
.more:hover { border-bottom-color: var(--deep); }
.more.on-dark { color: #7FD4E8; border-bottom-color: rgba(127,212,232,.45); }
.more.on-dark:hover { color: #fff; border-bottom-color: #fff; }

/* case teaser on the home page */
.teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 78px;
          border-top: 1px solid rgba(127,212,232,.28); padding-top: 54px; }
.teaser h3 { font-size: 34px; line-height: 1.12; color: #fff; margin: 14px 0 0; }
.teaser p  { margin-top: 18px; font-size: 18px; line-height: 1.6; color: rgba(220,238,245,.86); }
.teaser .logos { margin-top: 22px; font-size: 15px; font-weight: 800; color: #7FD4E8; line-height: 1.7; }

@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr !important; }
  .about { grid-template-columns: 1fr !important; }
  .drop { position: static; width: auto !important; max-width: 420px; margin: 34px 0 0;
          box-shadow: none; }
  .teaser { grid-template-columns: 1fr; gap: 34px; }
}

/* ============ header, measured off pinkfinsmgmt.com ============ */
/* bar #76B6C4, 89px tall, full width, 5% side padding, everything on one row
   centred at the bar's middle. Logo left, nav centred, socials right, no button. */
:root { --header-h: 89px; }

.siteheader { position: sticky; top: 0; z-index: 60; background: var(--shallow); }
.hdr-bar {
  height: var(--header-h);
  padding: 0 5%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.siteheader .mark { justify-self: start; line-height: 0; }
/* Pink Fins' logo file carries vertical padding, so its 63px render lands the
   wordmark at a 20px cap height. Mariya's file is cropped to the artwork, so
   39px gives the same 20px cap and the same 159px width. */
.siteheader .mark img { height: 39px; width: auto; display: block; }

/* nav: LaroSoft 16 / 700 (SemiBold), 50px apart, navy, pink when current */
.siteheader .nav { display: flex; align-items: center; gap: 50px; margin: 0; padding: 0; }
.siteheader .nav > li { position: relative; list-style: none; }
.siteheader .nav > li > a {
  display: inline-block;
  font-family: "LaroSoft", system-ui, sans-serif;
  font-size: 16px; font-weight: 700; line-height: 20px;
  color: var(--deep); text-decoration: none; white-space: nowrap;
}
.siteheader .nav > li > a:hover { color: var(--pink); }
.siteheader .nav > li > a.is-here { color: var(--pink); }
.has-sub > a::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; margin: -3px 0 0 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* dropdown: #DEF3F6, 13px radius, items 13/600, 10px 20px */
.subnav {
  position: absolute; top: calc(100% + 18px); left: -20px; margin: 0; padding: 0;
  background: var(--foam); border-radius: 13px; overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s;
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav { opacity: 1; visibility: visible; }
.subnav li { list-style: none; }
.subnav a {
  display: block; padding: 10px 20px;
  font-family: "LaroSoft", system-ui, sans-serif;
  font-size: 13px; font-weight: 600; color: var(--deep);
  text-decoration: none; white-space: nowrap;
}
.subnav a:hover { color: var(--pink); }

/* socials: 18px navy glyphs, 20px apart, no boxes */
.socials { justify-self: end; display: flex; align-items: center; gap: 20px; }
.socials a { display: block; line-height: 0; color: var(--deep); }
.socials a:hover { color: var(--pink); }
.socials svg { width: 18px; height: 18px; fill: currentColor; display: block; }

.rail { top: calc(var(--header-h) + 1px) !important; height: calc(100vh - var(--header-h) - 1px); z-index: 40; }
.surface { padding-top: 92px !important; }

@media (max-width: 1150px) {
  :root { --header-h: auto; }
  .hdr-bar { grid-template-columns: 1fr; gap: 16px; padding: 18px 5%; }
  .siteheader .mark, .socials { justify-self: start; }
  .siteheader .nav { flex-direction: column; align-items: flex-start; gap: 13px; }
  .siteheader .nav > li { width: 100%; }
  .subnav { position: static; opacity: 1; visibility: visible; background: transparent;
            border-radius: 0; padding: 4px 0 0 16px; }
  .subnav a { padding: 5px 0; }
  .has-sub > a::after { display: none; }
}

/* ============ one continuous descent, lightest to darkest ============ */
/* Each section's gradient ends on the colour the next one begins with, so the
   page reads as a single dive rather than six stacked blocks. The light-to-dark
   crossover is placed inside section two's bottom padding, where there is no
   text, because dimmed body copy stops passing contrast above #15618C. */

.surface  { background: linear-gradient(180deg, #EAF7F9 0%, #E2F2F5 60%, #DEF3F6 100%) !important; }
.shallows { background: linear-gradient(180deg, #DEF3F6 0%, #CFE9EF 42%, #9FCEDC 66%,
                                                #4C8DAE 88%, #15618C 100%) !important; }
.descent  { background: linear-gradient(180deg, #15618C 0%, #0E5A85 100%) !important; }
.deep     { background: linear-gradient(180deg, #0E5A85 0%, #064273 100%) !important; }
.abyss    { background: linear-gradient(180deg, #064273 0%, #05355C 100%) !important; }
.ascent   { background: linear-gradient(180deg, #05355C 0%, #041E38 100%) !important; }
footer    { background: #041E38 !important; color: #A9C9D8 !important; }
footer a  { color: #A9C9D8; }
footer img { opacity: 1; }

/* a hairline where each section leaves off */
.shallows, .descent, .deep, .abyss, .ascent, footer { position: relative; }
.shallows::before, .descent::before, .deep::before,
.abyss::before, .ascent::before, footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,.34); pointer-events: none; z-index: 3;
}
.descent::before, .deep::before, .abyss::before, .ascent::before, footer::before {
  background: rgba(255,255,255,.16);
}

/* body copy in the upper dark zone needs a touch more lift than it had */
.descent .stop p { color: rgba(228,242,247,.92); }
.rail { transition: opacity .25s ease; }

/* ============ footer back to the header's colour ============ */
footer   { background: var(--shallow) !important; color: var(--deep) !important; }
footer a { color: var(--deep); opacity: .8; }
footer a:hover { opacity: 1; }
footer img { opacity: 1; }

/* ============ every divider runs the full width ============ */
/* Section boundaries and the rules inside sections were a mix of full-bleed
   and 1092px content-column. They all go edge to edge now. */

/* section boundaries */
.shallows::before { background: rgba(6,66,115,.22); }   /* light background needs a dark line, not a white one */
.descent::before, .deep::before, .abyss::before, .ascent::before { background: rgba(255,255,255,.20); }
footer::before    { background: rgba(6,66,115,.22); }

/* Rules INSIDE a section (the depth rows, the case-study split) stay in the
   content column. They are not section boundaries, so they read as shorter. */
.rail-end { transition: opacity .2s ease; }

/* ---- soft edges ---- */
.portrait { border-radius: 18px !important; }
.portrait img { border-radius: inherit; }

/* ---- the swim-through photo sits beside the intro, not on top of the list ---- */
.descent-head {
  display: grid; grid-template-columns: 1fr 340px; gap: 64px;
  align-items: end; margin-bottom: 58px;
}
.descent-photo { position: relative; width: 100%; margin: 0; }   /* relative, not static: the caption is absolutely positioned inside it */
.descent-head .intro { margin-bottom: 0; }
@media (max-width: 1000px) {
  .descent-head { grid-template-columns: 1fr; gap: 34px; }
  .descent-photo { max-width: 360px; }
}

/* ---- FAQ ---- */
/* Sits between About and the CTA, so the gradient chain shifts:
   abyss now ends at #05355C, faq runs #05355C to #042A4C, ascent takes it to #041E38. */
.abyss  { background: linear-gradient(180deg, #064273 0%, #05355C 100%) !important; }
.faq    { background: linear-gradient(180deg, #05355C 0%, #042A4C 100%) !important;
          padding: 118px 0 126px; color: #DCEEF5; position: relative; }
.ascent { background: linear-gradient(180deg, #042A4C 0%, #041E38 100%) !important; }
.faq::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
               background: rgba(255,255,255,.20); z-index: 3; }

.faq h2 { color: #fff; margin: 14px 0 0; max-width: 16em; }
.faqs { margin-top: 56px; max-width: 900px; }

.faqs details {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  overflow: hidden;
}
.faqs details + details { margin-top: 14px; }
.faqs details[open] { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.26); }

.faqs summary {
  list-style: none; cursor: pointer;
  padding: 22px 60px 22px 26px; position: relative;
  font-size: 19px; font-weight: 700; line-height: 1.4; color: #fff;
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary:hover { color: #FF66AC; }
.faqs summary::after {
  content: ""; position: absolute; right: 26px; top: 50%;
  width: 9px; height: 9px; margin-top: -7px;
  border-right: 2.5px solid var(--pink); border-bottom: 2.5px solid var(--pink);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faqs details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }

.faqs .ans { padding: 0 60px 24px 26px; }
.faqs .ans p { margin: 0; font-size: 17.5px; line-height: 1.66; color: rgba(220,238,245,.88); }

@media (max-width: 700px) {
  .faqs summary { font-size: 17px; padding: 18px 48px 18px 20px; }
  .faqs .ans { padding: 0 48px 20px 20px; }
}

/* anchored sections clear the sticky header */
section[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

/* ---- FAQ spans the content column, was capped at 900px and read off-centre ---- */
.faqs { max-width: none; }

/* ---- Who I take on: the paragraph starts level with the heading, not the eyebrow ---- */
.who {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 72px; row-gap: 0; align-items: start;
}
.who-eyebrow { grid-column: 1; grid-row: 1; margin: 0 0 20px; }
.who-left    { grid-column: 1; grid-row: 2; }
.who-right   { grid-column: 2; grid-row: 2; }
.who-left h2 { margin-top: 0; }
.who-right .lede:first-child { margin-top: 0; }

/* ---- case study photo: square, soft, larger ---- */
.drop { border-radius: 18px; }
.teaser { grid-template-columns: 1fr 470px; gap: 66px; }
.teaser-photo {
  position: relative; width: 100%; margin: 0;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 26px 58px rgba(0,0,0,.34);
}
.teaser-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

/* ============ footer ============ */
.foot-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1.25fr 1.15fr;
  gap: 56px; align-items: start;
}
.foot-logo { height: 34px; width: auto; display: block; }
.foot-brand p {
  margin: 20px 0 0; max-width: none;
  font-size: 15.5px; line-height: 1.62; font-weight: 600; color: var(--deep);
}
.foot-socials { margin-top: 24px; gap: 18px; }
.foot-socials svg { width: 19px; height: 19px; }

.foot-col h3 {
  margin: 0 0 18px; font-size: 12px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(4,40,66,.6);
}
.foot-col ul { margin: 0; padding: 0; list-style: none; }
.foot-col li + li { margin-top: 11px; }
.foot-col a { font-size: 15.5px; font-weight: 700; color: var(--deep); text-decoration: none; opacity: .85; }
.foot-col a:hover { opacity: 1; color: #05304E; text-decoration: underline; }
.foot-contact p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; font-weight: 700; color: var(--deep); }
.foot-contact .muted { font-weight: 500; color: rgba(4,40,66,.72); }
.foot-cta {
  display: inline-block; margin-top: 8px;
  background: var(--pink); color: #fff !important; opacity: 1 !important;
  font-size: 14px; font-weight: 800; padding: 13px 24px; border-radius: 100px;
  text-decoration: none !important;
}
.foot-cta:hover { background: #E10070; }

.foot-bar {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid rgba(4,40,66,.2);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.foot-bar p { margin: 0; font-size: 14px; font-weight: 600; color: rgba(4,40,66,.75); }
.foot-bar a { color: var(--deep); font-weight: 700; }

@media (max-width: 1000px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 42px; }
  .teaser { grid-template-columns: 1fr; }
  .teaser-photo { max-width: 470px; }
  .who { grid-template-columns: 1fr; }
  .who-eyebrow, .who-left, .who-right { grid-column: 1; }
  .who-eyebrow { grid-row: 1; } .who-left { grid-row: 2; } .who-right { grid-row: 3; margin-top: 30px; }
}
@media (max-width: 620px) { .foot-grid { grid-template-columns: 1fr; gap: 36px; } }
.foot-socials { justify-self: start !important; }
.foot-cta { white-space: nowrap; }

/* footer lines up with the header: full width, same 5% side padding */
.foot-wrap { width: 100%; padding: 0 5%; }

/* case study photo: smaller, and the row balanced around it */
.teaser { grid-template-columns: 1fr 360px; gap: 72px; align-items: center; }
.teaser-photo { max-width: 360px; }

/* the 360px photo column must still collapse on narrow screens; this rule has to
   come after the one that sets it, or it loses on source order */
@media (max-width: 1000px) {
  .teaser { grid-template-columns: 1fr; gap: 36px; }
  .teaser-photo { max-width: 360px; width: 100%; }
}

/* ---- the depth marker is Mariya's diver artwork ---- */
.rail-dot {
  width: 72px; height: 42px;
  margin-left: -36px; margin-top: -21px;
  border-radius: 0; background: none; box-shadow: none;
  filter: drop-shadow(0 3px 8px rgba(4,30,56,.42));
}
.rail-dot img { width: 100%; height: 100%; display: block; }
.rail-cursor { left: 40px; }

/* ---- case study block: equal air above and below ---- */
.deep { padding-bottom: 82px; }
.teaser { padding-top: 82px; }

/* ---- footer, revised ---- */
.foot-where { margin-top: 22px !important; font-size: 15.5px; line-height: 1.6; font-weight: 700; color: var(--deep); }
.foot-where .muted { font-weight: 500; color: rgba(4,40,66,.72); }

.foot-connect p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.foot-connect a { font-size: 15.5px; font-weight: 700; color: var(--deep); text-decoration: none; opacity: .85; }
.foot-connect a:hover { opacity: 1; text-decoration: underline; }
.foot-h3-gap { margin-top: 26px !important; }
.foot-socials { justify-self: start !important; margin: 20px 0 0; gap: 18px; }
.foot-socials svg { width: 19px; height: 19px; }

.foot-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
}
.foot-bar p { margin: 0; }
.foot-made { text-align: center; }
.foot-legal { text-align: right; }
.foot-legal span { opacity: .5; margin: 0 6px; }
.heart { color: var(--pink); font-size: 15px; }

@media (max-width: 760px) {
  .foot-bar { grid-template-columns: 1fr; text-align: left; }
  .foot-made, .foot-legal { text-align: left; }
}

/* ---- footer: worldwide line, Start Here column ---- */
.foot-where {
  display: flex; align-items: center; gap: 9px;
  margin-top: 22px !important;
  font-size: 15.5px; font-weight: 600; color: var(--deep);
}
.foot-where .globe { width: 21px; height: 21px; flex: none; color: var(--deep); }
.foot-connect .foot-h3-gap { margin-top: 20px !important; }
.foot-socials { margin: 18px 0 0 !important; }

/* ============ program page ============ */
.program-hero h1 { max-width: 12em; }
.who-two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 40px; }

/* phases */
.phases { margin-top: 56px; }
.phase { display: grid; grid-template-columns: 96px 1fr; gap: 34px; padding: 40px 0;
         border-top: 1px solid rgba(255,255,255,.22); scroll-margin-top: calc(var(--header-h) + 20px); }
.phase-num { font-size: 40px; font-weight: 900; line-height: 1; color: rgba(127,212,232,.55); }
.phase-body h3 { font-size: 34px; line-height: 1.1; color: #fff; margin: 0; }
.phase-sub { margin: 10px 0 0; font-size: 19px; font-weight: 700; color: #7FD4E8; }
.phase-body ul { margin: 22px 0 0; padding: 0 0 0 20px; }
.phase-body li { margin: 0 0 10px; font-size: 17.5px; line-height: 1.6; color: rgba(228,242,247,.9); }
.phase-note { margin: 20px 0 0; font-size: 17px; line-height: 1.6; font-weight: 700; color: #fff; max-width: 44em; }

/* what you get */
.gets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; }
.get { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
       border-radius: 16px; padding: 26px 24px; }
.get h3 { margin: 0 0 10px; font-size: 19px; color: #fff; }
.get p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(228,242,247,.86); }

/* timeline */
.timeline { margin-top: 64px; border-top: 1px solid rgba(255,255,255,.2); }
.tl { display: grid; grid-template-columns: 150px 1fr; gap: 34px; padding: 30px 0;
      border-bottom: 1px solid rgba(255,255,255,.12); }
.tl-when { font-size: 13px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: #7FD4E8; padding-top: 6px; }
.tl h3 { margin: 0 0 8px; font-size: 25px; color: #fff; }
.tl p { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(228,242,247,.88); }
.tl-note { margin-top: 28px; font-size: 17.5px; line-height: 1.6; font-weight: 700; color: #fff; max-width: 46em; }

/* two paths */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 46px; }
.path { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
        border-radius: 18px; padding: 32px 30px; }
.path-tag { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #FF66AC; }
.path h3 { margin: 12px 0 10px; font-size: 27px; color: #fff; }
.path p { margin: 0; font-size: 17px; line-height: 1.62; color: rgba(228,242,247,.88); }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.price { position: relative; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
         border-radius: 18px; padding: 32px 28px 30px; }
.price.is-main { background: rgba(255,0,127,.12); border-color: rgba(255,0,127,.45); }
.price-tag { display: inline-block; background: var(--pink); color: #fff;
             font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
             padding: 5px 11px; border-radius: 100px; margin-bottom: 16px; }
.price h3 { margin: 0; font-size: 22px; line-height: 1.2; color: #fff; }
.price-when { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: rgba(228,242,247,.62); }
.price-big { margin-top: 20px; font-size: 52px; font-weight: 900; line-height: 1; color: #fff; letter-spacing: -.02em; }
.price-terms { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: rgba(228,242,247,.82); }
.price-or { margin: 18px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .14em;
            text-transform: uppercase; color: rgba(228,242,247,.5); }
.price-alt { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(228,242,247,.9); }
.price-alt b { color: #fff; }

.price-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px;
               margin-top: 46px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.18); }
.price-notes h4 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .15em;
                  text-transform: uppercase; color: #7FD4E8; }
.price-notes p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(228,242,247,.86); }

@media (max-width: 1000px) {
  .who-two, .paths, .price-notes { grid-template-columns: 1fr; gap: 28px; }
  .gets, .price-grid { grid-template-columns: 1fr; }
  .phase, .tl { grid-template-columns: 1fr; gap: 14px; }
}

/* the five phases stack on a phone; the 90px + 44px gutter was pushing the row wider than the screen */
@media (max-width: 620px) {
  .stop { grid-template-columns: 1fr !important; gap: 10px; }
  .stop p { grid-column: auto !important; }
  .stop h3 { font-size: 26px; }
}

/* program hero: the h1 had line-height 1, so the descender on "90-Day" sat straight
   on top of the line below it. .role is also scoped to .hero, so it got no styling here. */
.prog-h1 {
  font-size: 58px; line-height: 1.06; letter-spacing: -.02em;
  color: var(--deep); max-width: 13em; margin: 0 0 24px;
}
.prog-role {
  margin: 0; max-width: 30em;
  font-size: 22px; font-weight: 700; line-height: 1.4; color: var(--mid);
}
.prog-lede { margin: 22px 0 0 !important; max-width: 36em; }
.program-page .hero-cta { margin-top: 38px; }
@media (max-width: 700px) { .prog-h1 { font-size: 40px; } .prog-role { font-size: 19px; } }


/* ---- program hero image: same 4:5 crop and 460px column as the home page ---- */
.prog-hero { display: grid; grid-template-columns: 1fr 460px; gap: 64px; align-items: center; }
.prog-shot {
  position: relative; width: 100%; margin: 0;
  aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  box-shadow: 0 26px 58px rgba(4,30,56,.26);
}
.prog-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1000px) {
  .prog-hero { grid-template-columns: 1fr; gap: 34px; }
  .prog-shot { max-width: 380px; }
}



/* ---- footer proportions ---- */
/* Header bar is 89px. Standard practice puts the footer block at roughly
   that again in top padding, with the legal bar tighter underneath. The
   three link columns were 239/298/274 wide, which is what read as uneven. */
footer { padding: 84px 0 36px !important; }
/* Four EQUAL columns. With a 2fr brand column the brand paragraph stopped at
   its cap and left a ~350px hole before the first link column, so the left
   block looked stranded against the margin while the three link columns
   bunched on the right. Equal columns put every column start the same
   distance apart across the full width. */
/* Equal-width columns still left a hole at the far right, because the last
   column's links are short and the column was wide. Content-sized tracks plus
   space-between makes the first column start on the left margin, the last one
   END on the right margin, and every gap between them identical. */
.foot-grid {
  grid-template-columns: minmax(280px, 400px) auto auto auto !important;
  justify-content: space-between;
  column-gap: 48px !important; row-gap: 0 !important;
}
.foot-col li + li { margin-top: 12px; }
.foot-connect p { margin: 0; }
.foot-connect .foot-h3-gap { margin-top: 24px !important; }
.foot-socials { margin: 16px 0 0 !important; }
.foot-bar { margin-top: 60px !important; padding-top: 26px !important; }

/* ---- content width stays where it was; the sections open from the middle ---- */

/* the footer grid above uses !important, so its responsive collapse has to as well */
@media (max-width: 1000px) {
  .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 42px !important; }
}
@media (max-width: 620px) {
  .foot-grid { grid-template-columns: 1fr !important; gap: 34px !important; }
}
/* ---------- two-column sections only ----------
   Only sections that are actually split into two halves get widened. They
   reach up to 70px further into each margin than the one-column sections,
   and the growth is tied to the viewport so the left edge holds a constant
   distance from the depth meter instead of creeping toward it. Below 1380px
   the spread is zero and everything sits on the same 1140 column. */
:root { --spread: clamp(0px, (100vw - 1380px) / 2, 70px); }

.wrap.hero, .wrap.prog-hero, .wrap.who, .wrap.about, .wrap.teaser {
  max-width: calc(1140px + 2 * var(--spread));
}
/* .descent-head, .case-head and .case-body are NOT widened. They sit inside a
   .wrap that also holds one-column content directly beneath them, so pushing
   them outward would leave the heading out of line with its own section. They
   get the wider gutter only. */

/* and the two halves push apart from the centre */
.hero, .prog-hero { gap: 120px !important; }
/* column-gap only: .who is a two-row grid (eyebrow above, columns below), so a
   plain `gap` also opens a 118px row gap and strands the eyebrow far above the
   heading. The row spacing comes from .who-eyebrow's own margin. */
.who     { column-gap: 118px !important; row-gap: 0 !important; }
.about   { gap: 110px !important; }
.teaser  { gap: 110px !important; }
.descent-head { gap: 100px; }
.case-head    { gap: 100px; }
.case-body    { gap: 96px; }

/* card rows are not two halves, so they keep an ordinary gutter */
.paths   { gap: 30px; }
.gets, .price-grid { gap: 26px; }

/* below the two-column breakpoints everything stacks, so the wide gutter has
   to come back down or it turns into dead vertical space */
@media (max-width: 1180px) {
  .hero, .prog-hero, .about, .teaser { gap: 36px !important; }
  .who { column-gap: 36px !important; row-gap: 0 !important; }
  .descent-head, .case-head, .case-body { gap: 36px !important; }
}

/* Safety clamp, not a widening: at the point where the centred 1140 column
   would slide in behind the depth meter (around 1330px), narrow it instead so
   the first character always clears the diver. */
@media (min-width: 1041px) and (max-width: 1330px) {
  .wrap { max-width: calc(100vw - 260px); }
  /* the two-column sections set their own max-width above, so the clamp has
     to be restated for them or they slide back behind the diver */
  .wrap.hero, .wrap.prog-hero, .wrap.who, .wrap.about, .wrap.teaser {
    max-width: calc(100vw - 260px);
  }
}

/* Once .drop goes static and stacks, the -26px nudge that pulls the photo
   toward the margin on desktop pushes it off the left edge instead. */
@media (max-width: 1180px) {
  .who-photo { transform: none !important; margin-top: 34px !important; }
}

/* .drop went static when it stacks, which left its absolutely positioned
   caption anchoring to the section instead of the photo and dropping it to
   the bottom of the section. Relative keeps it in flow and keeps the caption
   on the image. */
@media (max-width: 1180px) {
  .drop { position: relative !important; }
}

/* ---- after the ninety days: photo beside the two stacked paths ---- */
.paths-cluster {
  display: grid; grid-template-columns: 1fr 380px; gap: 56px;
  align-items: stretch; margin-top: 46px;
}
.paths-photo { position: relative; width: 100%; margin: 0; align-self: stretch; }
/* the photo fills the column so its top and bottom line up with the cards */
.paths-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paths-cluster .paths {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  margin-top: 0;
  align-content: stretch;
}
@media (max-width: 1180px) {
  .paths-cluster { grid-template-columns: 1fr; gap: 32px; }
  .paths-photo { max-width: 420px; }
  .paths-photo img { height: auto; }
}

/* ---- program page: eight sections, not seven ----
   The program page runs one section longer than the home page because the FAQ
   sits between Investment and the close. Both were using the .faq step, so the
   ramp restarted at #05355C halfway down and the page got lighter again at that
   boundary. Investment now takes the first half of that step and the FAQ the
   second, so the descent stays monotonic from the surface to the footer. */
.faq#investment { background: linear-gradient(180deg, #05355C 0%, #042F54 100%) !important; }
.faq-b          { background: linear-gradient(180deg, #042F54 0%, #042A4C 100%) !important; }

/* ---- footer sits on the same column as the page content ----
   5% padding put the footer edges at the header's edges, which on a wide
   screen is far outside the body copy above it and forced 320px gaps between
   the four columns. The footer now uses the same centred column as the
   two-column sections, so its left and right margins are equal to each other
   and to the content above, and the gaps come down with it. */
.foot-wrap {
  width: 100%;
  max-width: calc(1140px + 2 * var(--spread));
  margin: 0 auto;
  padding: 0 24px !important;
}
@media (min-width: 1041px) and (max-width: 1330px) {
  .foot-wrap { max-width: calc(100vw - 260px); }
}
@media (max-width: 1040px) {
  .foot-wrap { max-width: none; padding: 0 5% !important; }
}

/* ---- optical alignment of the section label to its heading ----
   The labels are letterspaced caps with no left side bearing, while Laro's
   display sizes carry 2-3px of it, so the label's first letter sits left of
   the heading's first letter even though both boxes start on the same line.
   Measured at 1970: label ink 369, h1 ink 372, h2 ink 370. */
.hero .eyebrow, .prog-hero .eyebrow { margin-left: 3px; }
.who-eyebrow, .descent-head .eyebrow, .case-head .eyebrow { margin-left: 2px; }

/* ================= about page ================= */

/* four principles: the two-card grid, but 2x2 and without the tag reading
   like a choice between paths */
.rules { grid-template-columns: 1fr 1fr; gap: 30px !important; margin-top: 46px; }
.rules .path-tag { color: #7FD4E8; }

/* ---- featured, grouped by kind ---- */
.feat-group {
  margin: 54px 0 22px; font-size: 13px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: #7FD4E8;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.16);
}
.feat-group:first-of-type { margin-top: 0; }

/* the video card: a real still from her own library behind the play button,
   rather than a YouTube embed, so the page makes no third-party request */
.watch {
  display: grid; grid-template-columns: 420px 1fr; gap: 34px; align-items: center;
  padding: 24px; text-decoration: none;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px; transition: background .18s ease, border-color .18s ease;
}
.watch:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); }
.watch-shot {
  position: relative; display: block; border-radius: 14px; overflow: hidden;
  aspect-ratio: 16 / 9; line-height: 0;
  background: linear-gradient(150deg, #0B4E76, #06355A);
}
.watch-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.watch-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 74px; height: 74px; border-radius: 50%; background: var(--pink);
  box-shadow: 0 10px 30px rgba(4,30,56,.45);
}
.watch-play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%);
  border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
}
.watch-body { display: block; }
.watch-kicker {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: #7FD4E8;
}
.watch-title { display: block; margin-top: 10px; font-size: 30px; font-weight: 800; color: #fff; line-height: 1.16; }
.watch-meta { display: block; margin-top: 10px; font-size: 15px; font-weight: 700; color: rgba(228,242,247,.82); }

.press { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.press-item {
  display: grid; grid-template-columns: 62px 1fr; gap: 18px; align-items: start;
  padding: 24px 26px; text-decoration: none;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; transition: background .18s ease, border-color .18s ease;
}
.press-item:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.30); }
/* a placeholder tile until the real artwork is dropped in: swap the span for
   an <img> and it keeps the same box */
.press-thumb {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(160deg, rgba(127,212,232,.24), rgba(255,0,127,.22));
  border: 1px solid rgba(255,255,255,.20);
  font-size: 17px; font-weight: 900; letter-spacing: .04em; color: #fff;
}
.press-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.press-body { display: block; }
.press-src {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: #7FD4E8;
}
.press-title { display: block; margin-top: 8px; font-size: 19px; font-weight: 800; color: #fff; line-height: 1.25; }
.press-when { display: block; margin-top: 8px; font-size: 14px; font-weight: 700; color: rgba(228,242,247,.72); }

/* the names, set as words rather than logos we do not have the rights to */
.logos-strip {
  display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 44px;
  font-size: 19px; font-weight: 800; color: #7FD4E8;
}

/* the off-the-clock block reuses the paths cluster, text side only */
.faq .paths-cluster h2 { color: #fff; margin: 14px 0 0; }
.faq .paths-cluster .lede { margin-top: 20px; color: rgba(228,242,247,.88); }
.more-wrap { margin-top: 26px; }

@media (max-width: 1000px) {
  .rules, .press { grid-template-columns: 1fr !important; }
}
@media (max-width: 1000px) {
  .watch { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 620px) {
  .watch { padding: 18px; }
  .watch-title { font-size: 24px; }
  .watch-play { width: 58px; height: 58px; }
  .watch-play::after { border-width: 11px 0 11px 18px; }
}

/* a section head with no photo beside it: left aligned, not the two-column
   head, and not the centred treatment the deep section applies by default */
.sec-head { margin-bottom: 54px; }
.sec-head h2 { text-align: left !important; margin: 14px 0 0; color: #fff; max-width: 15em; }
.sec-head .intro { margin: 20px 0 0; max-width: 34em; }

/* a group with a single entry gets a full-width row rather than a lone narrow
   card stranded in a three-up grid */
.press-wide { grid-template-columns: 1fr; }
.press-wide .press-item { grid-template-columns: 72px 1fr; align-items: center; padding: 26px 30px; }
.press-wide .press-thumb { width: 72px; height: 72px; font-size: 19px; }
.press-wide .press-title { font-size: 22px; }

/* YouTube only guarantees the 4:3 hqdefault still, which letterboxes a 16:9
   video. When we fall back to it, scale past the bars. */
.yt-hq { transform: scale(1.34); }

/* the three panel recordings: thumbnail on top, title under */
.vids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.vid {
  display: block; text-decoration: none; padding: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; transition: background .18s ease, border-color .18s ease;
}
.vid:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.30); }
.vid-shot {
  position: relative; display: block; border-radius: 12px; overflow: hidden;
  aspect-ratio: 16 / 9; line-height: 0; margin-bottom: 18px;
  background: linear-gradient(150deg, #0B4E76, #06355A);
}
.vid-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-play { width: 54px; height: 54px; }
.vid-play::after { border-width: 10px 0 10px 16px; }
.vid .press-src { padding: 0 6px; }
.vid-title {
  display: block; margin: 8px 6px 10px; font-size: 19px; font-weight: 800;
  color: #fff; line-height: 1.25;
}

/* the thumbnails are hotlinked from YouTube and the publisher, so the tile
   keeps its own background behind them: if an image ever fails to load the
   card still reads as a deliberate tile rather than an empty box */
.press-thumb img { border-radius: 11px; }

@media (max-width: 1000px) {
  .vids { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .vids { grid-template-columns: 1fr; }
}

/* a second wide video card sits directly under the first */
.watch + .watch { margin-top: 24px; }

/* the article cards show the actual page screenshot from the Pink Fins
   featured page, so they get the taller frame and sit to the top of the
   image where the masthead and headline are */
.shot-page { aspect-ratio: 4 / 3; background: #fff; }
.shot-page img { object-position: top center; }
.vid-when {
  display: block; margin: 0 6px 6px; font-size: 14px; font-weight: 700;
  color: rgba(228,242,247,.72);
}

/* keep faces in frame when a portrait is cropped into the square tile */
.press-thumb img { object-fit: cover; object-position: top center; }

/* "Community Highlights" needed about ten more pixels than the card gave it,
   so the tile gutter and the side padding come in rather than the type going
   down a size */
.press-item { grid-template-columns: 62px 1fr; gap: 14px; padding: 24px 20px; }
.press-title { letter-spacing: -.005em; }

/* ---- client coverage: the real marks on white tiles ----
   The logos arrive in different colours and aspect ratios, so each one sits
   on its own white tile at a common height rather than being recoloured. */
.logo-wall {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 46px 40px; margin-top: 46px; align-items: center; justify-items: center;
}
.logo-tile {
  display: flex; align-items: center; justify-content: center;
  height: 96px; padding: 0 22px; background: #fff; border-radius: 14px;
}
.logo-tile img { max-width: 100%; max-height: 44px; width: auto; height: auto; display: block; }
/* a squarish mark needs more height than a wordmark to read at the same weight */
.logo-tile.tall img { max-height: 66px; }
.logo-more {
  margin: 26px 0 0; font-size: 17px; font-weight: 800; color: #7FD4E8; line-height: 1.7;
}


/* ---- the marks in her own colour ----
   Each logo is keyed to its own silhouette and filled with the brand teal, so
   eight different house styles read as one wall instead of a row of white
   boxes. No tile, they sit straight on the water. */
.logo-tile { background: none; height: auto; padding: 0; }
.logo-tile img { opacity: .92; transition: opacity .18s ease; width: auto; max-width: 100%; }

.logo-tile:hover img { opacity: 1; }
.logo-wall { align-items: center; }
@media (max-width: 1000px) {
  .logo-wall { grid-template-columns: repeat(2, 1fr); gap: 38px 30px; }
}

/* ================= contact page ================= */

.form-h2   { margin: 14px 0 0; color: var(--deep); max-width: 14em; }
.form-intro{ margin: 20px 0 0; max-width: 34em; color: var(--deep); }

.cform { margin-top: 46px; }
/* the form runs the full content column so its right edge lines up with the
   heading above it and the sections either side */
.f-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px;
}
.f { display: block; }
.f-wide { grid-column: 1 / -1; }
.f-label {
  display: block; margin-bottom: 9px;
  font-size: 13px; font-weight: 800; letter-spacing: .10em;
  text-transform: uppercase; color: var(--deep);
}
.f-label b { color: var(--pink); font-weight: 800; }
.cform input,
.cform select,
.cform textarea {
  width: 100%; box-sizing: border-box;
  padding: 15px 16px; font: inherit; font-size: 17px; font-weight: 600;
  color: var(--deep); background: #fff;
  border: 1.5px solid rgba(6,66,115,.22); border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cform input::placeholder,
.cform textarea::placeholder { color: rgba(7,58,90,.45); font-weight: 500; }
.cform input:focus,
.cform select:focus,
.cform textarea:focus {
  outline: none; border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255,0,127,.14);
}
.cform input:user-invalid { border-color: #C2185B; }   /* error state, deliberately not the brand pink */
.cform select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23064273' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
  padding-right: 42px;
}
.cform textarea { resize: vertical; min-height: 130px; line-height: 1.55; }

/* a honeypot: real people never fill this, bots usually do */
.f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.f-send { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 34px; }
.f-note { margin: 0; font-size: 15px; font-weight: 700; color: var(--mid); }
.f-status { margin: 20px 0 0; font-size: 16px; font-weight: 700; min-height: 1px; }
.f-status.ok  { color: #0B6E3F; }
.f-status.bad { color: #C2185B; }

/* ---- socials ---- */
.social-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px;
}
.social-card {
  display: block; padding: 26px 28px; text-decoration: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px; transition: background .18s ease, border-color .18s ease;
}
.social-card:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); }
.social-ico { display: block; color: #7FD4E8; }
.social-ico svg { width: 26px; height: 26px; fill: currentColor; }
.social-name { display: block; margin-top: 14px; font-size: 21px; font-weight: 800; color: #fff; }
.social-sub  { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; color: rgba(228,242,247,.72); }

/* the contact page runs five sections, so the close picks up where the deep
   section leaves off instead of restarting lighter */
.contact-page .ascent { background: linear-gradient(180deg, #064273 0%, #041E38 100%) !important; }

@media (max-width: 1000px) {
  .social-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .f-grid { grid-template-columns: 1fr; }
  .social-grid { grid-template-columns: 1fr; }
}

/* ================= case studies ================= */

/* where the work landed: three plain lists rather than borrowed logos */
.placed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 6px; align-items: start; }
.placed-col {
  padding: 30px 32px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16); border-radius: 18px;
}
.placed-col h3 {
  margin: 0 0 18px; font-size: 13px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: #7FD4E8;
}
.placed-col ul { margin: 0; padding: 0; list-style: none; }
.placed-col li {
  font-size: 18px; font-weight: 700; color: #fff; line-height: 1.5;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.10);
}
.placed-col li:last-child { border-bottom: 0; }
/* only the "and others" line is dimmed, never a real entry */
.placed-col li.more-items { color: rgba(228,242,247,.7); }

.pullout {
  margin-top: 40px; padding: 34px 38px;
  border-left: 4px solid var(--pink);
  background: rgba(255,255,255,.05); border-radius: 0 16px 16px 0;
}
.pullout p {
  margin: 0; font-size: 23px; line-height: 1.5; font-weight: 700; color: #fff; max-width: 40em;
}

/* the two shorter studies lead with their number */
.case-stat {
  margin-top: 8px; font-size: 54px; font-weight: 900; line-height: 1;
  color: #FF66AC; letter-spacing: -.02em;
}
.case-stat-cap { margin: 12px 0 18px !important; font-size: 17px; font-weight: 700; color: #fff !important; }
.case-second {
  margin-top: 16px !important; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 17px; color: rgba(228,242,247,.88) !important;
}
.case-second b { color: #FF66AC; font-weight: 900; }

.nda { max-width: 40em; }
.nda .lede + .lede { margin-top: 20px; }

@media (max-width: 1000px) {
  .placed { grid-template-columns: 1fr; }
  .pullout p { font-size: 20px; }
  .case-stat { font-size: 44px; }
}

/* ================= blog ================= */

.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 48px; }
/* frosted rather than white: a solid white box sits on top of the water
   instead of in it, and nothing else on the site does that */
.post {
  display: flex; flex-direction: column;
  padding: 30px 32px 34px;
  background: rgba(255,255,255,.46);
  border: 1.5px solid rgba(6,66,115,.16); border-radius: 18px;
  backdrop-filter: blur(2px);
  transition: background .18s ease, border-color .18s ease;
}
.post:hover { background: rgba(255,255,255,.62); border-color: rgba(6,66,115,.28); }
.post-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.post-topic {
  font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pink);
}
/* the honest label: no dates on posts that do not exist yet, and the cards
   are not links, so nobody clicks through to nothing */
.post-soon {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #0B4E76; background: rgba(6,66,115,.12);
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.post h3 {
  margin: 18px 0 0; font-size: 25px; line-height: 1.2;
  color: var(--deep); letter-spacing: -.005em;
}
.post p { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--deep); }

.blog-page .ascent { background: linear-gradient(180deg, #0E5A85 0%, #041E38 100%) !important; }

@media (max-width: 1100px) { .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .posts { grid-template-columns: 1fr; } }

/* ================= privacy and terms ================= */
/* No depth rail on these two. They are utility pages, and a long read wants a
   background that stays light the whole way down rather than descending into
   navy under the paragraphs. */

.legal-h1 { font-size: 62px; line-height: 1.06; color: var(--deep); max-width: 12em; margin: 14px 0 0; }
.legal-lede { margin: 24px 0 0; max-width: 34em; }
.legal-date {
  margin: 26px 0 0; font-size: 13px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mid);
}
.legal-page .surface { padding-bottom: 86px; }

.legal { background: linear-gradient(180deg, #DEF3F6 0%, #CFE9EF 100%); padding: 86px 0 110px; position: relative; }
.legal::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(6,66,115,.22);
}
/* the body lines up with the headline above it rather than being centred
   in its own column */
.legal-body { max-width: 1140px; }
.legal-sec { max-width: 820px; }

.legal-sec + .legal-sec { margin-top: 52px; padding-top: 52px; border-top: 1px solid rgba(6,66,115,.16); }
.legal-sec h2 {
  display: flex; gap: 18px; align-items: baseline;
  font-size: 30px; line-height: 1.2; color: var(--deep); margin: 0 0 18px;
}
.legal-sec h2 span {
  flex: none; font-size: 15px; font-weight: 900; letter-spacing: .06em;
  color: var(--pink); transform: translateY(-2px);
}
.legal-sec p {
  margin: 0; font-size: 18px; line-height: 1.68; font-weight: 500; color: var(--deep);
}
.legal-sec p + p { margin-top: 16px; }
.legal-sec a { color: var(--deep); font-weight: 700; border-bottom: 1px solid rgba(6,66,115,.4); }
.legal-sec a:hover { color: var(--pink); border-bottom-color: var(--pink); }

/* a visible note to ourselves: delete this styling and the bracketed line
   once the jurisdiction is confirmed */
.legal-todo { color: var(--pink); font-weight: 800; }

@media (max-width: 700px) {
  .legal-h1 { font-size: 40px; }
  .legal-sec h2 { font-size: 24px; gap: 12px; }
  .legal-sec p { font-size: 17px; }
}

/* ---- section labels in the brand pink, everywhere ----
   The old #9C0049 was a maroon, not the brand colour. These are the real
   #FF007F now. Note for later: at 13px that measures 3.45:1 on the pale
   water, under the 4.5:1 AA line for text this size. Taking the label to
   19px bold, or darkening it to #D6005F, would clear it. */
.eyebrow { color: var(--pink); }

/* the new headline is a longer line than the old one, so it comes down a
   size to hold three lines instead of running to four */
.hero h1 { font-size: 50px; }


/* ---- body copy on the light sections is the brand navy ----
   The default was --ink (#041E38), which is the abyss colour and reads as
   near black on pale water. --deep is the navy from the palette, and it
   still measures 9.4:1 on the lightest section and 8.1:1 on the darkest of
   the light ones, so nothing is lost in legibility. */
.surface, .shallows, .legal { color: var(--deep); }

/* ---- footer text in the brand navy, not a washed-out grey ----
   These were navy at 60 to 75 percent opacity, which on the teal reads as
   slate rather than as a brand colour. The pink is not an option down here:
   it only reaches 1.67:1 on #76B6C4, so it would be unreadable. Full-strength
   --deep measures 4.55:1 and is the brand navy. */
.foot-col h3 { color: var(--deep); }
.foot-bar p { color: var(--deep); }
.foot-contact .muted, .foot-where .muted { color: var(--deep); }
.foot-bar { border-top-color: rgba(6,66,115,.28); }

/* .94 was tight enough that the g in "strategist" landed on the d below it.
   Laro's descenders are long, so the headline needs 1.18 to clear them.
   Measured: at 1.12 the two lines still merge into one band of ink, at 1.18
   there are 4px of daylight. */
.hero h1 { line-height: 1.24; }

/* ---- headings on light sections are the brand navy ----
   #04283F is darker than anything in the palette and reads as near black on
   the pale water. --deep is the navy, at 9.4:1 on the lightest section. */
.who h2 { color: var(--deep); }
h1, h2, h3 { color: var(--deep); }
.deep h2, .descent h2, .abyss h2, .faq h2, .ascent h2,
.deep h3, .descent h3, .abyss h3, .faq h3, .ascent h3,
.teaser h3, .path h3, .stop h3, .phase h3, .social-name,
.watch-title, .press-title, .vid-title, .sec-head h2 { color: #fff; }

/* longer headline: step it down with the viewport so it stays four lines */
@media (max-width: 1180px) { .hero h1 { font-size: 44px !important; } }
@media (max-width: 860px)  { .hero h1 { font-size: 40px !important; } }
@media (max-width: 620px)  { .hero h1 { font-size: 34px !important; } }

/* ---------- layout fixes ---------- */

/* a <button> carries the UA border; every other .btn is an <a> with none,
   so the submit button was drawing an outline the others do not have */
.btn { line-height: 1.5; }
button.btn {
  border: 0; font-family: inherit; font-size: 19px; font-weight: 700;
  line-height: 1.5; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
button.btn-ghost { border: 2px solid currentColor; }

/* the cluster photo sat 26px left of the heading above it */
.who-photo { transform: none !important; margin-top: 34px !important; }

/* .more already carries margin-top: 40px, so .more-wrap's own 26px stacked
   on top of it and left a 66px hole above the link */
.more-wrap { margin-top: 0 !important; }
.who-left .more { margin-top: 28px; }

/* let the text column set the row height: the image was contributing its own
   intrinsic height and leaving dead space under the text beside it */
.paths-photo { overflow: hidden; min-height: 0; }
.paths-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1180px) {
  .paths-photo img { position: static; height: auto; }
}

/* ============================ mobile header ============================
   The old header had no menu: `.nav { display: none }` at 620px lost to the
   later, more specific `.siteheader .nav { display: flex }`, so on a phone every
   link stacked down the screen. Measured, the desktop bar needs 1057px to fit
   mark + nav + socials, so the drawer takes over at and below 1150px and the
   gap tightens between 1151 and 1240px.
   ====================================================================== */

/* desktop: the wrapper dissolves so .nav and .socials stay direct grid items */
.nav-drawer { display: contents; }
.nav-toggle { display: none; }

@media (max-width: 1240px) and (min-width: 1151px) {
  .siteheader .nav { gap: 34px !important; }
}

/* 1150px matches the existing breakpoint where the old header collapsed into a
   stacked column, so the drawer replaces those rules outright instead of
   fighting them. At 1151px the tightened bar needs 986px and still fits. */
@media (max-width: 1150px) {
  :root { --header-h: 64px !important; }

  .hdr-bar {
    height: var(--header-h) !important;
    grid-template-columns: 1fr auto !important;
    gap: 0 !important;
    padding: 0 20px !important;
    align-items: center !important;
  }
  .siteheader { position: sticky; top: 0; }
  .siteheader .mark { justify-self: start !important; }
  .siteheader .mark img { height: 34px !important; }

  /* the button */
  .nav-toggle {
    display: block; justify-self: end;
    width: 44px; height: 44px;          /* a real 44px tap target */
    padding: 0; margin: 0; border: 0; background: none;
    cursor: pointer; -webkit-appearance: none; appearance: none;
    position: relative; z-index: 2;
  }
  .nav-toggle .bars,
  .nav-toggle .bars::before,
  .nav-toggle .bars::after {
    position: absolute; left: 11px; width: 22px; height: 2.5px;
    border-radius: 2px; background: var(--deep);
    transition: transform .26s ease, opacity .16s ease, top .26s ease;
  }
  .nav-toggle .bars        { top: 21px; }
  .nav-toggle .bars::before{ content: ""; top: -7px; left: 0; }
  .nav-toggle .bars::after { content: ""; top:  7px; left: 0; }

  /* open: the three bars fold into a cross */
  .nav-toggle[aria-expanded="true"] .bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars::after  { top: 0; transform: rotate(-45deg); }

  /* the drawer */
  .nav-drawer {
    display: block;
    position: fixed; top: var(--header-h); left: 0; right: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    background: linear-gradient(180deg, #0E5A85 0%, #064273 100%);
    padding: 8px 20px 26px;
    transform: translateY(-12px); opacity: 0;
    visibility: hidden; pointer-events: none;
    transition: transform .26s ease, opacity .2s ease, visibility 0s linear .26s;
    box-shadow: 0 18px 40px rgba(4,30,56,.28);
    z-index: 59;
  }
  .siteheader.is-open .nav-drawer {
    transform: translateY(0); opacity: 1;
    visibility: visible; pointer-events: auto;
    transition: transform .26s ease, opacity .2s ease, visibility 0s;
  }

  .siteheader .nav {
    display: flex !important; flex-direction: column !important;
    align-items: stretch !important; gap: 0 !important;
    margin: 0 !important; padding: 0 !important;
  }
  .siteheader .nav > li { width: 100%; }
  .siteheader .nav > li + li { border-top: 1px solid rgba(255,255,255,.14); }
  .siteheader .nav > li > a {
    display: block; padding: 17px 2px;
    font-size: 19px; line-height: 1.25;
    color: #EAF7F9 !important; white-space: normal;
  }
  .siteheader .nav > li > a.is-here,
  .siteheader .nav > li > a:hover { color: var(--pink) !important; }

  .siteheader .socials {
    justify-self: stretch !important;
    display: flex; gap: 26px;
    width: 100%; box-sizing: border-box;   /* the rule above it must span the drawer */
    margin-top: 0; padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .siteheader .socials a { color: #9FCEDC; }
  .siteheader .socials a:hover { color: var(--pink); }
  .siteheader .socials svg { width: 21px; height: 21px; }

  /* dim the page behind the drawer */
  .nav-scrim {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: rgba(4,30,56,.42);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
    z-index: 58;
  }
  .siteheader.is-open ~ .nav-scrim,
  .nav-scrim.is-on { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }

  /* the first section clears the shorter bar */
  .surface { padding-top: 34px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-toggle .bars,
  .nav-toggle .bars::before, .nav-toggle .bars::after,
  .nav-scrim { transition: none !important; }
}

/* ===================== mobile header, Pink Fins layout =====================
   Mariya asked for the Pink Fins phone header: logo, then the menu button,
   then the social icons, all in one row on the teal bar. The drawer below
   holds the page links only. These rules come after the drawer block above
   so they win; several need !important for the same reason as elsewhere. */
@media (max-width: 1150px) {
  .hdr-bar {
    grid-template-columns: 1fr auto 1fr !important;
    column-gap: 12px !important;
  }
  .nav-toggle { justify-self: center; margin: 0; }
  .nav-toggle .bars,
  .nav-toggle .bars::before,
  .nav-toggle .bars::after { height: 3px; width: 24px; left: 10px; }
  .nav-toggle .bars::before { left: 0; }
  .nav-toggle .bars::after  { left: 0; }

  .siteheader .socials {
    justify-self: end !important;
    display: flex !important; align-items: center;
    gap: 16px !important;
    width: auto !important;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important;
  }
  .siteheader .socials a { color: var(--deep) !important; display: flex; }
  .siteheader .socials a:hover { color: var(--pink) !important; }
  .siteheader .socials svg { width: 20px !important; height: 20px !important; }
}
@media (max-width: 440px) {
  .hdr-bar { column-gap: 10px !important; padding: 0 14px !important; }
  .siteheader .mark img { height: 28px !important; }
  .nav-toggle { width: 40px; }
  .nav-toggle .bars { left: 8px; }
  .siteheader .socials { gap: 11px !important; }
  .siteheader .socials svg { width: 17px !important; height: 17px !important; }
}
@media (max-width: 360px) {
  .siteheader .mark img { height: 24px !important; }
  .siteheader .socials { gap: 8px !important; }
  .siteheader .socials svg { width: 15px !important; height: 15px !important; }
}

/* The wordmark sits in the top 55% of the logo image (the fin hangs below it),
   so centring the icons on the bar leaves them low. Lift them to the text line:
   about 0.24 of the logo height at each size. */
@media (max-width: 1150px) { .siteheader .socials { transform: translateY(-8px); } }
@media (max-width: 440px)  { .siteheader .socials { transform: translateY(-7px); } }
@media (max-width: 360px)  { .siteheader .socials { transform: translateY(-6px); } }