:root {
      --ink: #3D5A7A;
      --ink-deep: #2A4360;
      --ink-night: #1B2F47;
      --sea: #A3BBD2;
      --sea-pale: #C9D8E6;
      --mist: #EAF0F6;          /* cool sea-mist — replaces warm cream-deep */
      --cream: #F9F5EE;         /* near-white with a hint of warmth — was #F4ECDC */
      --cream-paper: #FFFFFF;   /* clean white for card surfaces */
      --brick: #B86E4A;         /* secondary accent — used sparingly */
      --brick-deep: #9A5736;
      --brick-pale: #E2C2AC;
      --paper-line: #DDE3EA;    /* cool, neutral divider line — was warm tan */
      --muted: #4A5868;
      --quiet: #7A8696;

      --display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
      --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

      --radius: 10px;       /* buttons, inputs, cards */
      --radius-lg: 18px;    /* feature images, larger panels */
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 90px; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: var(--sans);
      color: var(--ink-deep);
      background: var(--cream);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img, video, svg { display: block; max-width: 100%; }
    a { color: inherit; }
    button, input { font: inherit; }
    ::selection { background: var(--brick); color: var(--cream); }

    .eyebrow {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: var(--ink);
      margin: 0 0 24px;
      display: inline-flex;
      align-items: center;
      gap: 14px;
    }
    .eyebrow::before, .eyebrow.both::after {
      content: '';
      width: 28px; height: 1px;
      background: var(--ink);
    }
    .eyebrow.dark { color: var(--sea-pale); }
    .eyebrow.dark::before, .eyebrow.dark::after { background: var(--sea-pale); }

    /* ============================ TOPBAR ============================ */
    .topbar {
      position: fixed; top: 0; left: 0; right: 0;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 24px 40px;
      z-index: 50;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.92);
      transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
    }
    .topbar.scrolled {
      background: var(--ink-night);
      padding-top: 14px; padding-bottom: 14px;
      box-shadow: 0 1px 0 rgba(201, 216, 230, 0.16);
    }
    .topbar .seal {
      width: 64px; height: 64px;
      border-radius: 50%;
      background: rgba(255,255,255,0.94);
      overflow: hidden;
      flex-shrink: 0;
      transition: width 0.35s ease, height 0.35s ease;
    }
    .topbar.scrolled .seal { width: 52px; height: 52px; }
    .brand-lockup { justify-self: start; display: flex; align-items: center; gap: 14px; }
    .topbar .seal img { width: 100%; height: 100%; object-fit: contain; }
    .topbar .opening {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.22em;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.82);
    }
    .topnav { display: flex; align-items: center; gap: 32px; justify-self: center; }
    .topnav a {
      color: rgba(255,255,255,0.82);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .topnav a:hover { color: #FFFFFF; }
    .topbar .join {
      padding: 11px 22px;
      border: 1px solid rgba(255,255,255,0.55);
      border-radius: var(--radius);
      color: #FFFFFF;
      text-decoration: none;
      transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
    }
    .topbar .join { justify-self: end; }
    .topbar .join:hover { background: #FFFFFF; color: var(--ink-deep); border-color: #FFFFFF; }

    /* ============================ HERO — full video, no band ============================ */
    .hero {
      position: sticky;
      top: 0;
      z-index: 0;
      height: 100vh;
      min-height: 720px;
      background: var(--ink-night);
      color: var(--cream);
      overflow: hidden;
      isolation: isolate;
    }
    /* everything after the hero scrolls up over the pinned hero (tide effect) */
    .scroll-over { position: relative; z-index: 1; }
    /* footer is a <main> sibling now (for the landmark) — keep it above the sticky hero */
    footer.site { position: relative; z-index: 1; }
    .hero-media { position: absolute; inset: 0; z-index: 0; }
    .hero-media img,
    .hero-media video {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .hero-media img { position: absolute; inset: 0; object-position: center 55%; z-index: 0; }
    .hero-media video { position: absolute; inset: 0; object-position: center 60%; z-index: 1; }
    .hero-scrim {
      position: absolute; inset: 0;
      background:
        linear-gradient(to top,
          rgba(20, 36, 56, 0.78) 0%,
          rgba(20, 36, 56, 0.42) 32%,
          rgba(20, 36, 56, 0.20) 58%,
          rgba(20, 36, 56, 0.46) 100%),
        rgba(20, 36, 56, 0.12);
      z-index: 1;
    }
    .hero-inner {
      position: relative;
      z-index: 3;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: clamp(64px, 10vh, 120px);
    }
    .hero-inner .lead-in {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.84);
      margin: 0 0 28px;
      display: inline-flex;
      align-items: center;
      gap: 14px;
    }
    .hero-inner .lead-in::before {
      content: '';
      width: 40px; height: 1px;
      background: rgba(255,255,255,0.6);
    }
    .hero h1 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(64px, 10vw, 152px);
      line-height: 0.96;
      letter-spacing: -0.03em;
      margin: 0 0 40px;
      color: #FFFFFF;
      max-width: 16ch;
    }
    .hero h1 .light {
      font-weight: 300;
      color: var(--sea-pale);
    }
    .hero-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 32px;
      flex-wrap: wrap;
    }
    .hero-row .left {
      font-family: var(--sans);
      font-size: clamp(16px, 1.4vw, 19px);
      font-weight: 400;
      line-height: 1.55;
      color: rgba(255,255,255,0.86);
      max-width: 42ch;
      margin: 0;
    }
    .hero-row .right {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.78);
      text-align: right;
      line-height: 1.9;
    }
    .hero-row .right .pin {
      color: var(--sea-pale);
      margin-right: 8px;
    }

    /* ============================ NAME STORY (reverted to V1 centered) ============================ */
    .story {
      position: relative;
      background: var(--cream);
      padding: clamp(120px, 18vh, 180px) 48px clamp(96px, 14vh, 140px);
      text-align: center;
    }
    .story-rise { will-change: transform; }
    /* Seal cutout at the top — visual link from hero into paper */
    .story .seal-inset {
      position: absolute;
      top: 0; left: 50%;
      transform: translate(-50%, -50%);
      will-change: transform;
      width: 132px; height: 132px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--cream);
      box-shadow: 0 0 0 1px var(--ink), 0 0 0 14px var(--cream);
    }
    .story .seal-inset img { width: 100%; height: 100%; object-fit: contain; }

    .story h2 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(36px, 4.4vw, 56px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--ink-deep);
      max-width: 18ch;
      margin: 0 auto 32px;
    }
    .story h2 .light {
      font-weight: 300;
      color: var(--ink);
      font-style: italic;
    }
    .story-prose {
      max-width: 640px;
      margin: 0 auto;
    }
    .story-prose p {
      font-family: var(--sans);
      font-size: clamp(17px, 1.3vw, 19px);
      line-height: 1.7;
      color: var(--muted);
      margin: 0 0 1.2em;
    }
    .story-prose p:last-child { margin-bottom: 0; }
    .story-prose em { color: var(--ink); font-style: italic; }

    .signature {
      margin-top: 40px;
      font-family: var(--sans);
      font-style: italic;
      font-size: 18px;
      color: var(--ink);
    }
    .signature::before {
      content: '— ';
      color: var(--ink);
      font-style: normal;
    }

    /* Signup inline beneath story */
    .signup {
      max-width: 540px;
      margin: 56px auto 0;
    }
    .signup .label {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--ink);
      margin: 0 0 16px;
    }
    .ml-form {
      display: flex;
      border: 1px solid var(--ink-deep);
      background: var(--cream-paper);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .ml-form input {
      flex: 1;
      padding: 18px 22px;
      border: 0;
      background: transparent;
      font-family: var(--sans);
      font-size: 15px;
      color: var(--ink-deep);
      outline: none;
    }
    .ml-form input::placeholder { color: var(--quiet); font-style: italic; }
    .ml-form button {
      padding: 18px 30px;
      background: var(--ink-deep);
      color: #FFFFFF;
      border: 0;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.25s ease;
    }
    .ml-form button:hover { background: var(--ink-night); }
    .ml-foot {
      font-size: 12px;
      color: var(--quiet);
      margin: 14px 0 0;
      font-family: var(--sans);
      font-style: italic;
    }

    /* ============================ EDITORIAL IMAGE BAND — Santa Barbara dog ============================ */
    .image-band {
      position: relative;
      height: clamp(420px, 62vh, 640px);
      overflow: hidden;
      background: var(--ink-night);
    }
    .image-band img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 35%;
    }
    .image-band::after {
      content: '';
      position: absolute; inset: 0;
      background: rgba(27, 47, 71, 0.40);
    }
    .image-band .caption {
      position: relative;
      z-index: 2;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
      height: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding-bottom: 56px;
      gap: 32px;
    }
    .image-band .caption .line {
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(20px, 1.8vw, 28px);
      line-height: 1.35;
      color: #FFFFFF;
      max-width: 32ch;
      margin: 0;
    }
    .image-band .caption .credit {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.8);
      text-align: right;
      line-height: 1.6;
    }
    .image-band .caption .credit .dot { color: var(--sea-pale); margin: 0 6px; }

    /* ============================ BRICK PULL-QUOTE ============================ */
    .quote {
      position: relative;
      padding: clamp(120px, 20vh, 200px) 48px;
      background-color: var(--brick-deep);
      background-image: url('../images/brick-wall.jpg');
      background-size: cover;
      background-position: center 55%;
      color: var(--cream);
      text-align: center;
      isolation: isolate;
    }
    .quote::before {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(to top,
          rgba(20, 36, 56, 0.78) 0%,
          rgba(20, 36, 56, 0.42) 32%,
          rgba(20, 36, 56, 0.20) 58%,
          rgba(20, 36, 56, 0.46) 100%),
        rgba(20, 36, 56, 0.12);
      z-index: 0;
    }
    .quote-inner {
      position: relative;
      z-index: 1;
      max-width: 1100px;
      margin: 0 auto;
    }
    .quote-text {
      font-family: var(--display);
      font-weight: 400;
      color: #FFFFFF;
      margin: 0;
      max-width: 42ch;
      text-align: left;
      text-shadow: 0 2px 28px rgba(20, 36, 56, 0.55);
    }
    .quote-text .lead {
      display: block;
      font-weight: 600;
      font-size: clamp(40px, 6vw, 84px);
      line-height: 1.02;
      letter-spacing: -0.03em;
      max-width: 14ch;
      margin: 0;
    }
    .quote-text .light {
      display: block;
      font-weight: 300;
      font-size: clamp(20px, 2.4vw, 32px);
      line-height: 1.25;
      letter-spacing: -0.01em;
      color: var(--sea-pale);
      font-style: italic;
      max-width: 38ch;
      margin: 0.6em 0 0;
    }
    .quote-attr {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.78);
      display: inline-flex;
      align-items: center;
      gap: 16px;
      text-shadow: 0 2px 20px rgba(20, 36, 56, 0.5);
    }
    .quote-attr::before,
    .quote-attr::after {
      content: '';
      width: 32px; height: 1px;
      background: rgba(255,255,255,0.5);
    }

    /* ============================ SERVICES — split: list + image ============================ */
    /* Services + FAQ sit on one shared blue->cream gradient */
    .grad-blue-cream { background: linear-gradient(to bottom, var(--mist) 0%, var(--cream) 100%); }
    .services {
      background: transparent;
      padding: 0;
    }
    .services-grid {
      max-width: 1440px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .services-list-col {
      padding: clamp(96px, 16vh, 160px) clamp(40px, 6vw, 88px) clamp(96px, 16vh, 160px);
    }
    .services-image-col {
      position: relative;
      min-height: 600px;
      overflow: hidden;
      border-radius: var(--radius-lg);
    }
    .services-image-col img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: 30% 45%;
    }

    .services-head h2 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(36px, 4.4vw, 60px);
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: var(--ink-deep);
      margin: 0 0 24px;
      max-width: 18ch;
    }
    .services-head h2 .light {
      font-weight: 300;
      color: var(--ink);
      font-style: italic;
    }
    .services-head .lede {
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.6;
      color: var(--muted);
      margin: 0 0 64px;
      max-width: 36ch;
    }

    .services-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .service {
      display: grid;
      grid-template-columns: 36px 1fr;
      column-gap: 24px;
      padding: 28px 0;
      border-top: 1px solid var(--paper-line);
      align-items: baseline;
    }
    .service:last-child { border-bottom: 1px solid var(--paper-line); }
    .service .num {
      font-family: var(--display);
      font-weight: 400;
      font-size: 14px;
      letter-spacing: 0.16em;
      color: var(--ink);
      padding-top: 6px;
    }
    .service h3 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(22px, 2.2vw, 28px);
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: var(--ink-deep);
      margin: 0 0 8px;
    }
    .service p {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.6;
      color: var(--muted);
      margin: 0;
      max-width: 48ch;
    }

    /* ============================ Q&A ============================ */
    .qa {
      background: transparent;
      padding: clamp(96px, 16vh, 160px) 0;
    }
    .qa-wrap {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 48px;
    }
    .qa-head {
      text-align: center;
      margin-bottom: 56px;
    }
    .qa-head .eyebrow {
      display: inline-block;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--ink);
      margin: 0 0 22px;
    }
    .qa-head h2 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(34px, 4.4vw, 56px);
      line-height: 1.04;
      letter-spacing: -0.025em;
      color: var(--ink-deep);
      margin: 0 auto;
      max-width: 20ch;
    }
    .qa-head h2 .light { font-weight: 300; color: var(--ink); font-style: italic; }

    /* accordion */
    .qa-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 64px;
      border-top: 1px solid var(--paper-line);
      align-content: start;
    }
    .qa-item {
      border-bottom: 1px solid var(--paper-line);
      align-self: start;
    }
    .qa-q {
      width: 100%;
      background: none;
      border: 0;
      cursor: pointer;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      padding: 26px 2px;
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(17px, 1.9vw, 21px);
      line-height: 1.32;
      letter-spacing: -0.01em;
      color: var(--ink-deep);
      transition: color .25s ease;
    }
    .qa-q:hover { color: var(--ink); }
    .qa-q:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
    .qa-item.is-open .qa-q { color: var(--ink); }

    .qa-icon {
      flex: none;
      position: relative;
      width: 18px; height: 18px;
      margin-top: 2px;
    }
    .qa-icon::before, .qa-icon::after {
      content: '';
      position: absolute;
      background: var(--ink);
      transition: transform .3s ease, opacity .3s ease;
    }
    .qa-icon::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
    .qa-icon::after  { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
    .qa-item.is-open .qa-icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }

    .qa-a-wrap {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1);
    }
    .qa-item.is-open .qa-a-wrap { grid-template-rows: 1fr; }
    .qa-a { overflow: hidden; min-height: 0; }
    .qa-a-inner {
      padding: 2px 2px 30px;
      max-width: 62ch;
      font-family: var(--sans);
      font-size: 15.5px;
      line-height: 1.65;
      color: var(--muted);
    }
    .qa-a-inner p { margin: 0 0 0.7em; }
    .qa-a-inner p:last-child { margin-bottom: 0; }
    .qa-a-inner a { color: var(--ink-deep); text-decoration: underline; text-decoration-color: var(--sea); text-underline-offset: 3px; }

    /* ============================ CAREERS ============================ */
    .careers {
      background: var(--ink-night);
      color: var(--cream);
      padding: clamp(96px, 16vh, 160px) 48px;
    }
    .careers-wrap {
      max-width: 1240px;
      margin: 0 auto;
    }
    .careers-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 32px;
      padding-bottom: 28px;
      border-bottom: 1px solid rgba(201, 216, 230, 0.28);
      margin-bottom: 64px;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--sea-pale);
    }
    .careers-top .ed { color: rgba(244, 236, 220, 0.72); }

    .careers-grid {
      display: grid;
      grid-template-columns: 5fr 4fr;
      gap: 72px;
      align-items: start;
    }
    .careers-grid h2 {
      font-family: var(--display);
      font-weight: 600;
      font-size: clamp(48px, 7.2vw, 112px);
      line-height: 0.92;
      letter-spacing: -0.035em;
      color: #FFFFFF;
      margin: 0 0 24px;
    }
    .careers-grid h2 .light {
      display: block;
      font-weight: 300;
      color: var(--sea-pale);
      font-style: italic;
      font-size: 0.42em;
      letter-spacing: -0.015em;
      margin-top: 20px;
      line-height: 1.25;
    }
    .careers-grid .right p {
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.65;
      color: rgba(233, 240, 247, 0.90);
      margin: 0 0 1.2em;
    }
    .careers-grid .right p em { color: var(--sea-pale); font-style: italic; font-weight: 500; }

    .careers-roles {
      margin-top: 56px;
      display: block;
      border-top: 1px solid var(--paper-line);
    }
    .careers-roles .role {
      width: 100%;
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--paper-line);
      border-radius: 0;
      padding: 26px 6px;
      cursor: pointer;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 28px;
      text-align: left;
      transition: padding-left 0.28s ease, color 0.2s ease;
    }
    .careers-roles .role:hover { padding-left: 16px; }
    .careers-roles .role .role-title {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(21px, 2.4vw, 30px);
      color: var(--ink-deep);
      line-height: 1.2;
      letter-spacing: -0.012em;
      transition: color 0.2s ease;
    }
    .careers-roles .role:hover .role-title { color: var(--ink); }
    .careers-roles .role .ab {
      flex: none;
      font-family: var(--sans);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--ink);
      white-space: nowrap;
    }

    .careers-benefits {
      margin: 32px 0 0;
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.6;
      color: rgba(201, 216, 230, 0.72);
      max-width: 72ch;
    }

    /* careers application form */
    .careers-apply-bar { margin-top: 44px; }
    #apply-toggle.is-open { display: none; }

    .careers-apply {
      margin-top: 44px;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 56px;
      align-items: stretch;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.45s ease, transform 0.45s ease;
    }
    .careers-apply[hidden] { display: none; }
    .careers-apply.revealed { opacity: 1; transform: none; }
    .careers-form-head {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(28px, 3.2vw, 40px);
      line-height: 1.02;
      letter-spacing: -0.02em;
      color: #FFFFFF;
      margin: 0 0 12px;
    }
    .careers-form-sub {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.6;
      color: rgba(201, 216, 230, 0.78);
      margin: 0 0 32px;
      max-width: 44ch;
    }
    .careers-apply-image {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      min-height: 100%;
    }
    .careers-apply-image img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .careers-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px 24px;
    }
    .careers-form .field { display: flex; flex-direction: column; gap: 8px; }
    .careers-form .field-file,
    .careers-form .btn-apply { grid-column: 1 / -1; }
    .careers-form label {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--sea-pale);
    }
    .careers-form input,
    .careers-form select {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(201, 216, 230, 0.3);
      border-radius: var(--radius);
      padding: 14px 16px;
      color: #FFFFFF;
      font-family: var(--sans);
      font-size: 15px;
      width: 100%;
    }
    .careers-form input:focus,
    .careers-form select:focus {
      outline: none;
      border-color: var(--sea-pale);
      background: rgba(255, 255, 255, 0.1);
    }
    .careers-form select option { color: var(--ink-night); }
    .careers-form input[type="file"] { padding: 11px 14px; color: rgba(255, 255, 255, 0.72); }
    .careers-form input[type="file"]::file-selector-button {
      margin-right: 14px;
      padding: 8px 16px;
      border: 1px solid rgba(201, 216, 230, 0.4);
      border-radius: var(--radius);
      background: transparent;
      color: var(--sea-pale);
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .careers-form .btn-apply { justify-self: start; cursor: pointer; margin-top: 6px; }

    .form-sent {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.55;
      color: var(--ink-deep);
      margin: 8px 0 0;
    }
    .careers-apply .form-sent,
    .closer-signup .form-sent { color: var(--sea-pale); }
    .btn-apply {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 18px 36px;
      background: var(--cream);
      color: var(--ink-deep);
      border: 0;
      border-radius: var(--radius);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background 0.25s ease, transform 0.2s ease;
    }
    .btn-apply:hover {
      background: #FFFFFF;
      transform: translateY(-1px);
    }
    .btn-apply svg { width: 16px; height: 16px; }

    /* ============================ INVITATION — address + signup ============================ */
    .invite {
      background: var(--cream);
      padding: clamp(96px, 16vh, 160px) 0 80px;
    }
    .invite-wrap {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 48px;
    }
    .invite-top {
      padding-bottom: 56px;
      margin-bottom: 56px;
      border-bottom: 1px solid var(--paper-line);
    }
    .invite-top .eyebrow {
      display: inline-block;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--ink);
      margin: 0 0 22px;
    }
    .invite-top h2 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(40px, 6vw, 88px);
      line-height: 0.96;
      letter-spacing: -0.03em;
      color: var(--ink-deep);
      margin: 0;
      max-width: 16ch;
    }
    .invite-top h2 .light { font-weight: 300; color: var(--ink); font-style: italic; }
    .invite-top .right p {
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.6;
      color: var(--muted);
      margin: 0;
      max-width: 44ch;
    }

    .invite-card {
      margin-top: 80px;
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 80px;
      align-items: start;
    }
    .address .line1 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(36px, 4.4vw, 56px);
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: var(--ink-deep);
      margin: 0 0 6px;
    }
    .address .line2 {
      font-family: var(--display);
      font-weight: 300;
      font-size: clamp(20px, 1.8vw, 26px);
      color: var(--ink);
      margin: 0 0 14px;
      letter-spacing: -0.015em;
      font-style: italic;
    }
    /* Address → Google Maps directions link (contact card) */
    .address .addr-link {
      display: block;
      text-decoration: none;
      color: inherit;
      margin: 0 0 36px;
    }
    .address .addr-link .line2 { margin-bottom: 14px; }
    .address .addr-link .directions {
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink);
      transition: color .2s ease, transform .2s ease;
    }
    .address .addr-link:hover .line1,
    .address .addr-link:focus-visible .line1 { color: var(--ink); }
    .address .addr-link:hover .directions,
    .address .addr-link:focus-visible .directions { color: var(--ink-deep); }
    /* Address → Google Maps directions link (hero) */
    .hero-row .right .addr-link {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
      text-decoration-color: rgba(255, 255, 255, 0.35);
      transition: text-decoration-color .2s ease, color .2s ease;
    }
    .hero-row .right .addr-link:hover,
    .hero-row .right .addr-link:focus-visible {
      color: var(--sea-pale);
      text-decoration-color: var(--sea-pale);
    }
    .address-grid {
      display: grid;
      grid-template-columns: repeat(2, auto);
      column-gap: 48px;
      row-gap: 24px;
      padding-top: 32px;
      border-top: 1px solid var(--paper-line);
    }
    .address-grid .k {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--ink);
      margin: 0 0 8px;
    }
    .address-grid .v {
      font-family: var(--sans);
      font-size: 16px;
      color: var(--ink-deep);
      line-height: 1.5;
      margin: 0;
    }

    .closer-signup {
      padding: 36px 36px 40px;
      background: var(--ink-deep);
      color: var(--cream);
      border-radius: var(--radius-lg);
    }
    .closer-signup .small {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--sea-pale);
      margin: 0 0 16px;
    }
    .closer-signup h3 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(24px, 2.4vw, 30px);
      line-height: 1.2;
      letter-spacing: -0.015em;
      color: #FFFFFF;
      margin: 0 0 24px;
    }
    .closer-signup h3 .light { font-weight: 300; color: var(--sea-pale); font-style: italic; }
    .closer-signup form { display: flex; flex-direction: column; gap: 10px; }
    .closer-signup input {
      padding: 14px 16px;
      border: 1px solid rgba(201, 216, 230, 0.4);
      border-radius: var(--radius);
      background: transparent;
      color: #FFFFFF;
      font-family: var(--sans);
      font-size: 14px;
      outline: none;
    }
    .closer-signup input::placeholder { color: rgba(244, 236, 220, 0.55); font-style: italic; }
    .closer-signup button {
      padding: 14px 16px;
      background: var(--sea);
      color: var(--ink-deep);
      border: 0;
      border-radius: var(--radius);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.25s ease;
    }
    .closer-signup button:hover { background: var(--sea-pale); }
    .closer-signup .fine {
      font-family: var(--sans);
      font-style: italic;
      font-size: 13px;
      color: rgba(244, 236, 220, 0.82);
      margin: 14px 0 0;
    }

    /* ============================ FOOTER ============================ */
    footer.site {
      background: var(--ink-night);
      color: var(--cream);
      padding: 64px 48px 32px;
    }
    footer.site .wrap {
      max-width: 1240px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 32px;
      padding-bottom: 32px;
      border-bottom: 1px solid rgba(201, 216, 230, 0.18);
    }
    footer.site .brand { display: flex; align-items: center; gap: 18px; }
    footer.site .seal {
      width: 84px; height: 84px;
      border-radius: 50%;
      background: var(--cream);
      overflow: hidden;
      flex-shrink: 0;
    }
    footer.site .seal img { width: 100%; height: 100%; object-fit: contain; }
    footer.site .brand .footer-opening {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--sea-pale);
      margin-top: 6px;
    }
    footer.site .brand .name {
      font-family: var(--display);
      font-size: 17px;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 1.15;
      letter-spacing: -0.005em;
    }
    footer.site .brand .tag {
      font-family: var(--sans);
      font-style: italic;
      font-size: 13px;
      color: var(--sea-pale);
      margin-top: 2px;
    }
    footer.site nav {
      display: flex;
      gap: 28px;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }
    footer.site nav a {
      color: rgba(201, 216, 230, 0.82);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    footer.site nav a:hover { color: var(--sea-pale); }
    footer.site .bottom {
      max-width: 1240px;
      margin: 24px auto 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(201, 216, 230, 0.8);
    }
    footer.site .bottom .credit {
      font-family: var(--sans);
      font-style: italic;
      font-weight: 400;
      font-size: 13px;
      letter-spacing: 0;
      text-transform: none;
    }
    footer.site .bottom .credit a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-thickness: 1px;
      text-decoration-color: rgba(201, 216, 230, 0.4);
      transition: color .2s ease, text-decoration-color .2s ease;
    }
    footer.site .bottom .credit a:hover {
      color: var(--sea-pale);
      text-decoration-color: var(--sea-pale);
    }

    /* ============================ Reveal ============================ */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .reveal.in { opacity: 1; transform: translateY(0); }

    @media (prefers-reduced-motion: reduce) {
      .hero video { display: none; }
      .reveal { opacity: 1; transform: none; transition: none; }
      html { scroll-behavior: auto; }
    }

    /* ============================ Mobile ============================ */
    @media (max-width: 920px) {
      .topbar { padding: 18px 22px; }
      .topbar.scrolled { padding: 12px 22px; }
      .topnav { display: none; }
      .topbar .opening { display: none; }
      .hero-inner { padding: 0 24px clamp(40px, 8vh, 80px); }
      .hero h1 { font-size: clamp(48px, 14vw, 80px); max-width: 14ch; }
      .hero-row .right { text-align: left; }

      .quote { background-size: cover; background-position: 50% 56%; }

      .story { padding: 96px 24px 80px; }
      .story .seal-inset { width: 104px; height: 104px; }

      .image-band, .quiet { height: clamp(320px, 52vh, 480px); }
      .image-band .caption { flex-direction: column; align-items: flex-start; padding: 0 24px 40px; }
      .image-band .caption .credit { text-align: left; }

      .quote { padding: 80px 24px; }

      .services-grid { grid-template-columns: 1fr; }
      .services-list-col { padding: 80px 24px; }
      .services-image-col { min-height: 420px; order: -1; }

      .qa-wrap { padding: 0 24px; }
      .qa-list { grid-template-columns: 1fr; column-gap: 0; }
      .qa-q { padding: 22px 2px; }

      .careers { padding: 80px 24px; }
      .careers-grid { grid-template-columns: 1fr; gap: 40px; }
      .careers-roles { grid-template-columns: 1fr; gap: 14px; }
      .careers-apply { grid-template-columns: 1fr; gap: 32px; }
      .careers-form { grid-template-columns: 1fr; }
      .careers-apply-image { min-height: 320px; order: -1; }

      .invite-wrap { padding: 0 24px; }
      .invite-top, .invite-card { grid-template-columns: 1fr; gap: 32px; }
      .invite-top { padding-bottom: 48px; }
      .invite-card { margin-top: 48px; }
      .address-grid { grid-template-columns: 1fr; column-gap: 0; }

      footer.site { padding: 48px 24px 24px; }
      footer.site .wrap { flex-direction: column; align-items: flex-start; gap: 28px; }
      footer.site nav { flex-wrap: wrap; gap: 14px 22px; }
      footer.site .bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
    }

    /* ===== Small phones (<=400px): stack inline pairs that crowd ===== */
    @media (max-width: 400px) {
      /* Mailing-list signup: stack email input above a full-width button
         (was inline; the button got clipped by .ml-form overflow:hidden) */
      .ml-form { flex-direction: column; }
      .ml-form input { width: 100%; }
      .ml-form button {
        width: 100%;
        padding: 16px 22px;
        border-top: 1px solid var(--ink-deep);
      }

      /* Careers role rows: stack the title above its badge so the
         nowrap badge stops running off the right edge */
      .careers-roles .role { flex-direction: column; align-items: flex-start; gap: 8px; }
      .careers-roles .role .ab { white-space: normal; }
    }
/* ===== Dedicated careers page (careers.html) ===== */
.careers.is-page { padding-top: clamp(80px, 12vh, 130px); }
.careers.is-page .careers-grid h2 { font-size: clamp(38px, 5vw, 68px); }
.careers.is-page .careers-grid h2 .light { display: inline; font-size: 1em; }

/* ===== Hiring teaser band (splash -> links to careers.html) ===== */
.hiring-teaser {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--ink-night);
  background-image: url('../images/santa-barbara-coast.jpg');
  background-size: cover;
  background-position: center 35%;
  color: #FFFFFF;
  padding: clamp(96px, 15vh, 150px) 48px;
}
.hiring-teaser::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(20, 36, 56, 0.74);
  z-index: 0;
}
.hiring-teaser-wrap { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; text-align: center; }
.hiring-teaser .eyebrow { display: inline-block; padding-bottom: 10px; margin: 0 0 22px; border-bottom: 1px solid rgba(201, 216, 230, 0.45); color: var(--sea-pale); }
.hiring-teaser h2 { font-family: var(--display); font-weight: 500; font-size: clamp(36px, 5vw, 64px); line-height: 1.0; letter-spacing: -0.025em; color: #FFFFFF; margin: 0 auto 18px; }
.hiring-teaser h2 .light { font-weight: 300; font-style: italic; color: var(--sea-pale); }
.hiring-teaser .lede { font-family: var(--sans); font-size: 17px; line-height: 1.6; color: rgba(201, 216, 230, 0.82); max-width: 56ch; margin: 0 auto 36px; }

/* ===== Careers page = LIGHT content theme (navy header + footer bookend it) ===== */
.careers.is-page { background: linear-gradient(to bottom, var(--mist) 0%, var(--cream) 100%); color: var(--ink-deep); }
.careers.is-page .careers-top { color: var(--ink); border-bottom-color: var(--paper-line); }
.careers.is-page .careers-grid h2 { color: var(--ink-deep); }
.careers.is-page .careers-grid .right p { color: var(--muted); }
.careers.is-page .careers-grid .right p em { color: var(--ink); }
.careers.is-page .careers-roles .role { border-bottom-color: var(--paper-line); }
.careers.is-page .careers-benefits { color: var(--muted); }
.careers.is-page .careers-form-head { color: var(--ink-deep); }
.careers.is-page .careers-form-sub { color: var(--muted); }
.careers.is-page .careers-form label { color: var(--ink); }
.careers.is-page .careers-form input,
.careers.is-page .careers-form select { background: var(--cream-paper); border-color: var(--paper-line); color: var(--ink-deep); }
.careers.is-page .careers-form input::placeholder { color: var(--quiet); }
.careers.is-page .careers-form input:focus,
.careers.is-page .careers-form select:focus { border-color: var(--ink); background: var(--cream-paper); }
.careers.is-page .careers-form input[type="file"] { color: var(--muted); }
.careers.is-page .careers-form input[type="file"]::file-selector-button { border-color: var(--paper-line); color: var(--ink); }
.careers.is-page .btn-apply { background: var(--ink-deep); color: #FFFFFF; }
.careers.is-page .btn-apply:hover { background: var(--ink-night); }
.careers.is-page .form-sent { color: var(--ink-deep); }

/* ===== Careers page hero + emotional pull-quote ===== */
.careers-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink-night);
  color: #FFFFFF;
  isolation: isolate;
}
.careers-hero-media { position: absolute; inset: 0; z-index: 0; }
.careers-hero-media img,
.careers-hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.careers-hero-media img { z-index: 0; }
.careers-hero-media video { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .careers-hero-media video { display: none; }
}
.careers-hero .scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(20, 36, 56, 0.84) 0%, rgba(20, 36, 56, 0.34) 46%, rgba(20, 36, 56, 0.34) 100%),
    rgba(20, 36, 56, 0.08);
  z-index: 1;
}
.careers-hero .inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px clamp(56px, 9vh, 110px);
}
.careers-hero .eyebrow { margin: 0 0 24px; color: rgba(255, 255, 255, 0.92); }
.careers-hero .eyebrow::before, .careers-hero .eyebrow::after { background: rgba(255, 255, 255, 0.55); }
.careers-hero h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(46px, 7.4vw, 108px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  margin: 0;
  max-width: 15ch;
  text-shadow: 0 2px 30px rgba(20, 36, 56, 0.4);
}
.careers-hero h1 .light { font-weight: 300; font-style: italic; color: var(--sea-pale); }

.careers-perks {
  margin: clamp(72px, 11vh, 120px) auto 0;
  max-width: 780px;
  text-align: center;
}
.careers.is-page .careers-quote {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-deep);
  text-align: center;
  max-width: 22ch;
  margin: 0 auto 20px;
}
.careers.is-page .careers-quote .light { font-weight: 300; font-style: italic; color: var(--ink); }
.careers.is-page .careers-perks .careers-benefits {
  margin: 0 auto;
  max-width: 58ch;
  text-align: center;
}

@media (max-width: 920px) {
  .careers-hero { min-height: 72vh; }
  .careers-hero .inner { padding: 0 24px clamp(40px, 7vh, 72px); }
}