/* ============================================================
   Peninsula Advisors
   Cascade layers keep specificity flat and predictable.
   Later layers win regardless of selector weight — no !important.
   ============================================================ */
@layer reset, tokens, base, layout, components, motion, utilities;

/* ---------- RESET ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img, svg, video { display: block; max-width: 100%; }
  input, textarea, button, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  ul { list-style: none; }
  a { color: inherit; }
  :target { scroll-margin-block-start: 6rem; }
}

/* ---------- TOKENS ---------- */
@layer tokens {
  :root {
    /* Palette — navy depth range, one cool accent, one metallic */
    --ink-900: #071627;
    --ink-800: #0B1E34;
    --ink-700: #112A46;
    --ink-600: #1A3A5F;
    --ink-500: #234A73;
    --sky:     #6EC1FF;
    --azure:   #2C7BE5;
    --azure-ink: #2361B8;  /* darker azure for text on light — #2C7BE5 was only 4.14:1 */
    --gold:    #C9A84C;
    --cream:   #F9F6F0;
    --paper:   #FFFFFF;
    --slate:   #4E5866;   /* was #5F6B7A — 5.03:1 contrast, now 6.69:1 */
    --rule:    #E4E0D8;
    --text:    #14202E;

    /* Alpha variants derived from tokens rather than hard-coded rgba.
       Percentages raised for legibility — the muted tier was 42% white, which
       measured 3.76:1 on navy and failed the 4.5:1 AA minimum for body text.
       Steps kept distinct so the three-level hierarchy still reads. */
    --on-dark-100: color-mix(in srgb, #fff 95%, transparent);  /* 13.4:1 on ink-700 */
    --on-dark-70:  color-mix(in srgb, #fff 72%, transparent);  /* was 62% — now 8.18:1 */
    --on-dark-45:  color-mix(in srgb, #fff 58%, transparent);  /* was 42% — now 5.88:1 */
    --hairline:    color-mix(in srgb, var(--sky) 14%, transparent);
    --glass:       color-mix(in srgb, var(--ink-900) 88%, transparent);

    /* Type */
    --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
    --body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --step--1: 0.78rem;
    --step-0:  1rem;
    --step-1:  clamp(1.15rem, 0.4vw + 1.05rem, 1.35rem);
    --step-2:  clamp(1.5rem, 1vw + 1.25rem, 1.9rem);
    --step-3:  clamp(2.1rem, 2.4vw + 1.4rem, 3rem);
    --step-4:  clamp(2.6rem, 5vw + 1rem, 4.6rem);
    --tracking-wide: 0.18em;

    /* Space & shape */
    --gutter: clamp(1.25rem, 4vw, 2rem);
    --section-y: clamp(4.5rem, 9vw, 7.5rem);
    --measure: 62ch;
    --shell: 1240px;
    --r-sm: 4px;
    --r-md: 10px;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Section colour schemes — set once, inherited by children */
  .theme-dark {
    --bg: var(--ink-700);
    --fg: var(--on-dark-100);
    --fg-muted: var(--on-dark-45);
    --eyebrow: var(--sky);
    --edge: var(--hairline);
  }
  .theme-light {
    --bg: var(--cream);
    --fg: var(--text);
    --fg-muted: var(--slate);
    --eyebrow: var(--ink-600);
    --edge: var(--rule);
  }
}

/* ---------- BASE ---------- */
@layer base {
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--body);
    font-size: var(--step-0);
    font-weight: 300;
    line-height: 1.65;
    color: var(--text);
    background: var(--ink-800);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 500;
    line-height: 1.12;
    text-wrap: balance;
  }
  p { text-wrap: pretty; }

  :focus-visible {
    outline: 2px solid var(--sky);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: 12px;
    z-index: 2000;
    padding: 0.7rem 1rem;
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink-700);
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
  }
  .skip-link:focus-visible { inset-block-start: 12px; }
}

/* ---------- LAYOUT ---------- */
@layer layout {
  .shell {
    max-inline-size: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section {
    padding-block: var(--section-y);
    background: var(--bg);
    color: var(--fg);
  }

  .section-head { margin-block-end: clamp(2.5rem, 5vw, 3.5rem); }

  .eyebrow {
    display: block;
    margin-block-end: 0.9rem;
    color: var(--eyebrow);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .section-title { font-size: var(--step-3); color: var(--fg); }

  .section-intro {
    max-inline-size: var(--measure);
    margin-block-start: 1rem;
    color: var(--fg-muted);
    font-size: var(--step-1);
    line-height: 1.6;
  }
}

/* ---------- COMPONENTS ---------- */
@layer components {

  /* --- Navigation --- */
  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    background: var(--glass);
    backdrop-filter: blur(16px);
    border-block-end: 1px solid var(--hairline);
  }
  .nav-inner {
    display: flex;
    align-items: center;       /* was flex-start — items floated to the top */
    justify-content: space-between;
    gap: 1rem;
    block-size: 76px;
  }
  .nav-logo {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--paper);
    text-decoration: none;
  }
  .nav-logo span { color: var(--sky); font-weight: 400; }

  .nav-links { display: flex; align-items: center; }
  .nav-links a {
    display: block;
    padding: 0.55rem 0.85rem;
    border-radius: var(--r-sm);
    color: var(--on-dark-45);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.25s var(--ease);
  }
  .nav-links a:hover { color: var(--paper); }
  .nav-links a[aria-current="true"] { color: var(--sky); }

  .nav-toggle { display: none; padding: 0.6rem; }
  .nav-toggle span {
    display: block;
    inline-size: 20px;
    block-size: 1.5px;
    margin-block: 5px;
    border-radius: 1px;
    background: var(--paper);
    transition: transform 0.3s var(--ease), opacity 0.2s;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* --- Hero --- */
  .hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-block-size: 100svh;
    overflow: hidden;
    background:
      radial-gradient(ellipse 120% 80% at 80% 30%, color-mix(in srgb, var(--ink-500) 40%, transparent), transparent 55%),
      linear-gradient(175deg, var(--ink-900) 0%, var(--ink-800) 38%, var(--ink-700) 72%, var(--ink-600) 100%);
  }
  .hero-photo {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: -2;
    inline-size: 52vw;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* Scrim keeps the headline legible over the photograph at every width */
  .hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      100deg,
      var(--ink-900) 0%,
      var(--ink-900) 30%,
      color-mix(in srgb, var(--ink-800) 78%, transparent) 52%,
      color-mix(in srgb, var(--ink-800) 22%, transparent) 100%);
  }

  .hero-content { padding-block: 9rem 7rem; }
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 1.5rem;
    color: var(--sky);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .hero-eyebrow::before {
    content: "";
    inline-size: 32px;
    block-size: 1px;
    background: currentColor;
  }
  .hero h1 {
    max-inline-size: 15ch;
    margin-block-end: 1.5rem;
    font-size: var(--step-4);
    color: var(--paper);
  }
  .hero h1 em { display: block; font-style: italic; color: var(--sky); }
  .hero-sub {
    max-inline-size: 52ch;
    margin-block-end: 2.75rem;
    color: var(--on-dark-70);
    font-size: var(--step-1);
    line-height: 1.7;
  }

  /* --- Coastline motif: the peninsula, drawn as a hairline --- */
  .shoreline {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: -1;
    block-size: 34%;
    overflow: hidden;
    opacity: 0.5;
    pointer-events: none;
  }
  .shoreline svg {
    position: absolute;
    inset-block-end: -8px;
    inset-inline-start: -50%;
    inline-size: 200%;
  }
  .shoreline path { fill: none; stroke-width: 1; }
  .shoreline .tide-1 { stroke: color-mix(in srgb, var(--sky) 45%, transparent); }
  .shoreline .tide-2 { stroke: color-mix(in srgb, var(--sky) 22%, transparent); }

  /* --- Buttons --- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 2rem;
    border-radius: var(--r-sm);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
  }
  .btn-ghost {
    border: 1px solid color-mix(in srgb, var(--sky) 40%, transparent);
    color: var(--sky);
  }
  .btn-ghost:hover {
    background: color-mix(in srgb, var(--sky) 12%, transparent);
    border-color: var(--sky);
  }
  .btn-solid { background: var(--ink-700); color: var(--paper); }
  .btn-solid:hover { background: var(--ink-600); }
  .btn svg { inline-size: 16px; block-size: 16px; transition: transform 0.3s var(--ease); }
  .btn:hover svg { transform: translateX(4px); }

  /* --- Two-column feature block --- */
  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .prose > p + p { margin-block-start: 1.2rem; }
  .prose p { color: var(--fg-muted); font-size: 1.02rem; line-height: 1.85; }

  /* --- Pillars --- */
  .pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-block-start: 2.5rem;
  }
  .pillar {
    padding: 1.6rem 1.25rem;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    background: color-mix(in srgb, #fff 3%, transparent);
    text-align: center;
    transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .pillar:hover {
    background: color-mix(in srgb, var(--sky) 6%, transparent);
    border-color: color-mix(in srgb, var(--sky) 32%, transparent);
    transform: translateY(-2px);
  }
  .pillar svg { inline-size: 26px; block-size: 26px; margin-inline: auto; margin-block-end: 0.75rem; color: var(--sky); }
  .pillar h3 { margin-block-end: 0.35rem; font-size: 1rem; font-weight: 600; color: var(--paper); }
  .pillar p { font-size: 0.79rem; line-height: 1.5; color: var(--on-dark-45); }

  /* --- Figures / imagery --- */
  .figure {
    position: relative;
    aspect-ratio: 4 / 3;        /* inherited from the old placeholder so crops stay consistent */
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--hairline);
    background: linear-gradient(155deg, var(--ink-700), var(--ink-500));
  }
  .figure img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .figure figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.5rem;
    background: linear-gradient(transparent, color-mix(in srgb, var(--ink-900) 92%, transparent));
    color: var(--on-dark-70);
    font-size: 0.85rem;
    font-style: italic;
  }

  /* --- Service panels --- */
  .panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
  }
  .panel {
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--paper);
    overflow: hidden;
    transition: box-shadow 0.3s var(--ease);
  }
  .panel:hover { box-shadow: 0 12px 40px rgb(7 22 39 / 0.07); }
  .panel-head {
    display: flex;
    align-items: center;      /* was flex-start — icon sat above the title */
    gap: 1rem;
    padding: 2rem 2rem 1.5rem;
    border-block-end: 1px solid var(--rule);
  }
  .panel-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 8px;
    background: var(--ink-700);
    color: var(--sky);
  }
  .panel-icon svg { inline-size: 22px; block-size: 22px; }
  .panel-head h3 { font-size: 1.5rem; font-weight: 600; color: var(--ink-700); }
  .panel-body { padding: 1.5rem 2rem 2rem; }
  .panel-list li {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding-block: 0.7rem;
    border-block-end: 1px solid color-mix(in srgb, var(--ink-900) 5%, transparent);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--slate);
  }
  .panel-list li:last-child { border-block-end: 0; }
  .panel-list li::before {
    content: "";
    flex: 0 0 auto;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--azure);
  }

  /* --- Industry cards --- */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
  }
  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 1.5rem;
    border: 1px solid color-mix(in srgb, #fff 6%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, #fff 3%, transparent);
    overflow: hidden;
    text-align: center;
    transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
  }
  .card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    block-size: 3px;
    background: linear-gradient(90deg, var(--sky), var(--azure));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
  }
  .card:hover::before { transform: scaleX(1); }
  .card:hover {
    background: color-mix(in srgb, #fff 6%, transparent);
    border-color: color-mix(in srgb, var(--sky) 22%, transparent);
    transform: translateY(-3px);
  }
  .card svg { inline-size: 30px; block-size: 30px; margin-inline: auto; margin-block-end: 1rem; color: var(--sky); }
  .card h3 { margin-block-end: 0.5rem; font-size: 1.2rem; font-weight: 600; color: var(--paper); }
  .card p { font-size: 0.84rem; line-height: 1.55; color: var(--on-dark-45); }

  /* --- Team --- */
  .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }
  .partner {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--paper);
    overflow: hidden;
    transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .partner:hover { box-shadow: 0 10px 35px rgb(7 22 39 / 0.08); transform: translateY(-3px); }
  .partner-photo {
    display: grid;
    grid-template-areas: "stack";   /* photo and initials share one cell */
    grid-template-rows: 240px;      /* definite row — img block-size:100% needs
                                       something concrete to resolve against, or it
                                       falls back to the photo's natural height and
                                       spills over the bio below */
    place-items: center;            /* was flex-start — initials sat in the corner */
    block-size: 240px;
    overflow: hidden;               /* belt and braces: nothing escapes the frame */
    background: linear-gradient(155deg, var(--ink-700) 0%, var(--ink-600) 60%, var(--ink-500) 100%);
  }
  .partner-photo > * { grid-area: stack; min-inline-size: 0; min-block-size: 0; }
  /* Initials sit underneath and show through only if the photo fails to load */
  .partner-photo img {
    inline-size: 100%;
    block-size: 240px;              /* explicit, not a percentage — cannot collapse */
    object-fit: cover;
    object-position: center 22%;    /* bias upward so faces sit in frame */
  }
  .partner-initials {
    font-family: var(--display);
    font-size: 2.8rem;
    color: color-mix(in srgb, var(--sky) 28%, transparent);
    letter-spacing: 0.05em;
  }
  .partner-info {
    display: flex;
    flex-direction: column;
    flex: 1;                  /* fill the card so .bio has slack to absorb below */
    gap: 0.15rem;
    padding: 1.25rem 1.5rem 1.5rem;
  }
  .partner-name { font-size: 1.2rem; font-weight: 600; color: var(--ink-700); }
  .partner-role {
    color: var(--azure-ink);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .partner-lede { margin-block-start: 0.7rem; font-size: 0.88rem; line-height: 1.6; color: var(--slate); }

  /* Full bios collapse by default — three walls of text side by side don't get read.
     margin-auto eats the uneven slack left by ledes of different lengths, so the
     "Full biography" links land on one line across all three cards. The gap above
     is padding, not margin — margin-auto collapses to 0 on the tallest card. */
  .bio { margin-block-start: auto; padding-block-start: 0.9rem; }
  .bio summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-600);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
  }
  .bio summary::-webkit-details-marker { display: none; }
  .bio summary::after {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s var(--ease);
  }
  .bio[open] summary::after { transform: translateY(1px) rotate(-135deg); }
  .bio summary:hover { color: var(--azure-ink); }
  .bio-body { padding-block-start: 0.8rem; }
  .bio-body p { font-size: 0.85rem; line-height: 1.7; color: var(--slate); }
  .bio-body p + p { margin-block-start: 0.7rem; }

  /* --- Locations --- */
  .locations {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 2rem;
    padding-block-start: 2rem;
    border-block-start: 1px solid color-mix(in srgb, #fff 8%, transparent);
  }
  .location {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid color-mix(in srgb, #fff 8%, transparent);
    border-radius: 999px;
    color: var(--on-dark-70);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
  }
  .location::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--sky);
  }

  /* --- Contact --- */
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .offices { display: grid; gap: 1.5rem; }
  .office {
    padding: 1.5rem;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--paper);
  }
  .office h3 { margin-block-end: 0.4rem; font-size: 1.15rem; font-weight: 600; color: var(--ink-700); }
  .office address { font-style: normal; font-size: 0.9rem; line-height: 1.7; color: var(--slate); }

  .form { display: grid; gap: 0.9rem; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .field { display: grid; gap: 0.35rem; }
  .field label {
    color: var(--ink-600);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .field :is(input, textarea) {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--paper);
    font-size: 0.92rem;
    font-weight: 300;
    transition: border-color 0.2s var(--ease);
  }
  .field :is(input, textarea):focus-visible { border-color: var(--azure); outline-offset: 1px; }
  .field textarea { resize: vertical; min-block-size: 120px; }
  .field :is(input, textarea):user-invalid { border-color: #B4432F; }
  .field .error { color: #B4432F; font-size: 0.72rem; min-block-size: 0; }
  .field :is(input, textarea):user-invalid ~ .error::before { content: attr(data-msg); }

  .form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-block-start: 0.5rem; }
  .form-status[data-state="ok"] { color: #1E6B4F; font-size: 0.85rem; font-weight: 500; }
  .form-status[data-state="error"] { color: #B4432F; font-size: 0.85rem; font-weight: 500; }

  /* --- Legal pages (privacy, terms) --- */
  .legal {
    padding-block: clamp(3rem, 6vw, 5rem);
    background: var(--cream);
    color: var(--text);
  }
  .legal-shell { max-inline-size: 46rem; margin-inline: auto; padding-inline: 1.5rem; }
  .legal-back {
    display: inline-block;
    margin-block-end: 1.5rem;
    color: var(--azure-ink);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .legal-back:hover { text-decoration: underline; }
  .legal h1 {
    margin-block-end: 0.5rem;
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 600;
    color: var(--ink-700);
  }
  .legal-updated { margin-block-end: 2.5rem; font-size: 0.8rem; color: var(--slate); }
  .legal h2 {
    margin-block: 2.25rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-600);
  }
  .legal p { margin-block-end: 1rem; font-size: 0.92rem; line-height: 1.75; color: var(--slate); }
  .legal ul { margin-block-end: 1rem; padding-inline-start: 1.1rem; }
  .legal li {
    margin-block-end: 0.4rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--slate);
    list-style: disc;
  }
  .legal a { color: var(--azure-ink); }

  /* --- Footer --- */
  .footer {
    padding-block: 3rem;
    background: var(--ink-800);
    border-block-start: 1px solid var(--hairline);
    color: var(--on-dark-45);
  }
  .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-block-end: 2rem;
    border-block-end: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  }
  .footer-logo { font-family: var(--display); font-size: 1.2rem; font-weight: 600; color: var(--paper); }
  .footer-logo span { color: var(--sky); }
  .footer-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
  .footer-nav a { font-size: 0.75rem; text-decoration: none; transition: color 0.2s; }
  .footer-nav a:hover { color: var(--sky); }
  /* One authoritative disclosure. The original repeated this on every
     section via `main section::after`, which overlapped the content. */
  .disclosure {
    max-inline-size: 88ch;
    margin-block-start: 2rem;
    font-size: 0.72rem;
    line-height: 1.6;
    color: color-mix(in srgb, #fff 32%, transparent);
  }
  .copyright { margin-block-start: 1rem; font-size: 0.72rem; }
}

/* ---------- MOTION ---------- */
@layer motion {
  @keyframes rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes drift {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(2.5%); }
  }

  .lift { opacity: 0; animation: rise 0.8s var(--ease) forwards; }
  .lift:nth-child(1) { animation-delay: 0.25s; }
  .lift:nth-child(2) { animation-delay: 0.4s; }
  .lift:nth-child(3) { animation-delay: 0.55s; }
  .lift:nth-child(4) { animation-delay: 0.7s; }

  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .reveal.is-visible { opacity: 1; transform: none; }

  .tide-1 { animation: drift 14s ease-in-out infinite; }
  .tide-2 { animation: drift 18s ease-in-out infinite reverse; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .lift, .reveal { opacity: 1; transform: none; }
  }
}

/* ---------- UTILITIES & RESPONSIVE ---------- */
@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @media (width <= 1024px) {
    .split, .contact-grid { grid-template-columns: 1fr; }
    .hero-photo { inline-size: 100%; }
    .hero-scrim {
      background: linear-gradient(
        170deg,
        color-mix(in srgb, var(--ink-900) 92%, transparent) 0%,
        color-mix(in srgb, var(--ink-800) 80%, transparent) 60%,
        color-mix(in srgb, var(--ink-700) 70%, transparent) 100%);
    }
  }

  @media (width <= 768px) {
    .nav-toggle { display: block; }
    .nav-links {
      position: absolute;
      inset: 76px 0 auto 0;
      display: none;
      flex-direction: column;
      align-items: stretch;
      gap: 0.25rem;
      padding: 1.25rem var(--gutter) 1.75rem;
      background: var(--ink-800);
      border-block-end: 1px solid var(--hairline);
    }
    .nav-links[data-open="true"] { display: flex; }
    .nav-links a { padding-block: 0.7rem; font-size: 0.8rem; }
    .hero-content { padding-block: 8rem 4rem; }
    .field-row { grid-template-columns: 1fr; }
    .footer-top { flex-direction: column; align-items: flex-start; }
  }

  @media print {
    .nav, .shoreline, .hero-photo, .btn { display: none; }
    .section { background: #fff; color: #000; padding-block: 1rem; }
    .bio-body { display: block; }
  }
}
@layer components {
  .legal-header {
    padding-block: 1.5rem;
    background: var(--ink-800);
    border-block-end: 1px solid var(--hairline);
  }
  .legal-header .nav-logo { text-decoration: none; }
}