/* ---------- Design tokens ---------- */
  /* ============================================================
     BRAND PALETTE — sampled directly from soilogo_small.png:
       medium purple #886AAE, light lavender #B7A7CF, magenta/orchid #A64599
     Roles below are tuned from those three source colors for WCAG AA
     contrast (darkened for backgrounds-with-white-text, lightened for
     accents-on-dark-backgrounds). Change only the values below to
     re-theme the whole page.
     ============================================================ */
  :root{
    --ink:      #241B33;   /* near-black, deep plum, for body text */
    --plum:     #665083;   /* dark-medium purple — section bg + accent text on light */
    --plum-dk:  #4C3B64;   /* deeper purple for hover states */
    --clay:     #A64599;   /* orchid/magenta from the logo figure — primary accent + CTA */
    --clay-dk:  #8A3880;   /* darker orchid for hover */
    --gold:     #D9CEEA;   /* light lavender from the logo dots — accents on dark backgrounds */
    --gold-dk:  #C7B9DC;
    --paper:    #FBF9FD;   /* near-white with a whisper of lavender */
    --sand:     #F1EBF7;   /* soft lavender-gray panel background */
    --sand-line:#E1D3EC;
    --cream-line:#E7DCF0;
    --white:    #FFFFFF;
    --ink-soft: #4A3F58;   /* softened body text on paper */

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --fs-h1: clamp(2.6rem, 1.9rem + 3.2vw, 4.8rem);
    --fs-h2: clamp(2rem, 1.6rem + 1.8vw, 3.1rem);
    --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
    --fs-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
    --fs-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
    --fs-small: 1rem;

    --max-w: 1180px;
    --radius: 20px;
    --radius-sm: 12px;

    --dur: 0.25s;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  }

  *,*::before,*::after{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }

  body{
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
  }

  img{ max-width: 100%; display: block; }

  h1,h2,h3,h4{
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.12;
    margin: 0 0 0.5em;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  h1{ font-size: var(--fs-h1); font-weight: 500; }
  h2{ font-size: var(--fs-h2); }
  h3{ font-size: var(--fs-h3); }

  p{ margin: 0 0 1.1em; }
  p:last-child{ margin-bottom: 0; }

  a{ color: inherit; }

  ul{ margin: 0; padding: 0; list-style: none; }

  .container{
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
  }

  .eyebrow{
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clay);
    margin: 0 0 1rem;
  }
  .eyebrow.on-dark{ color: var(--gold); }

  /* ---------- Focus & accessibility ---------- */
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible{
    outline: 3px solid var(--clay);
    outline-offset: 3px;
    border-radius: 4px;
  }
  .skip-link{
    position: absolute;
    left: 1rem;
    top: -4rem;
    background: var(--ink);
    color: var(--white);
    padding: 0.9rem 1.4rem;
    border-radius: 0 0 10px 10px;
    font-weight: 700;
    z-index: 1000;
    transition: top var(--dur) ease;
    text-decoration: none;
  }
  .skip-link:focus{ top: 0; }
  .visually-hidden{
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0; padding: 0; margin: -1px;
  }

  /* ---------- Buttons ---------- */
  .btn{
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.95em 1.9em;
    border-radius: 999px;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--dur) ease, background var(--dur) ease, border-color var(--dur) ease;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .btn:hover{ transform: translateY(-2px); }
  .btn-primary{ background: var(--clay); color: var(--white); }
  .btn-primary:hover{ background: var(--clay-dk); }
  .btn-outline{ background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
  .btn-outline:hover{ border-color: var(--white); background: rgba(255,255,255,0.08); }
  .btn-outline-dark{ background: transparent; color: var(--ink); border-color: var(--ink); }
  .btn-outline-dark:hover{ background: var(--ink); color: var(--white); }
  .btn-block{ width: 100%; justify-content: center; }

  .btn-row{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
  }

  /* ---------- Header ---------- */
  .site-header{
    position: sticky;
    top: 0;
    z-index: 500;
    background: rgba(251,249,253,0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cream-line);
  }
  .header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .brand{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--ink);
    flex-shrink: 0;
  }
  .brand-logo{
    height: 76px;
    width: auto;
    display: block;
  }
  .brand-mark{
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .brand-mark span{ color: var(--clay); }

  .main-nav{ display: flex; align-items: center; gap: 1.8rem; flex-shrink: 1; min-width: 0; }
  .main-nav ul{ display: flex; gap: 1.7rem; flex-wrap: nowrap; }
  .main-nav li{ flex-shrink: 0; }
  .main-nav a{
    text-decoration: none;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--ink);
    padding: 0.4rem 0.1rem;
    border-bottom: 2px solid transparent;
    transition: border-color var(--dur) ease, color var(--dur) ease;
    white-space: nowrap;
  }
  .main-nav a:hover{ border-color: var(--clay); color: var(--plum); }

  /* CTA button that lives inside the mobile slide-out menu only */
  .nav-mobile-cta{ display: none; }

  .header-cta{ display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }

  .nav-toggle{
    display: none;
    background: none;
    border: 2px solid var(--ink);
    border-radius: 10px;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .nav-toggle svg{ width: 24px; height: 24px; }

  /* Switches to the slide-out mobile menu below 1240px. Raised from a
     typical 900px breakpoint because six nav items plus a full-size
     logo need more room before they can share one row comfortably. */
  @media (max-width: 1240px){
    .main-nav{
      position: fixed;
      inset: 0;
      top: 96px;
      background: var(--paper);
      flex-direction: column;
      align-items: stretch;
      padding: 1.5rem clamp(1.25rem,4vw,3rem) 2rem;
      transform: translateX(100%);
      transition: transform var(--dur) ease;
      overflow-y: auto;
    }
    .main-nav.is-open{ transform: translateX(0); }
    .main-nav ul{ flex-direction: column; gap: 0; flex-wrap: wrap; }
    .main-nav li{ border-bottom: 1px solid var(--cream-line); }
    .main-nav a{ display: block; padding: 1.1rem 0.2rem; font-size: 1.2rem; white-space: normal; }
    .nav-mobile-cta{ display: block; margin-top: 1.5rem; }
    .nav-toggle{ display: inline-flex; }
  }

  /* Smallest phones: logo + header CTA + toggle can outgrow the viewport
     in a single unwrapped row, so both shrink to guarantee a fit. */
  @media (max-width: 420px){
    .brand-logo{ height: 52px; }
    .header-inner{ gap: 0.75rem; }
    .header-cta{ gap: 0.6rem; }
    .header-cta .btn-primary{ padding: 0.7em 1.1em; font-size: 0.88rem; }
    .nav-toggle{ width: 44px; height: 44px; }
    .nav-toggle svg{ width: 20px; height: 20px; }
  }

  /* ---------- Section shells ---------- */
  section{ padding: clamp(3.5rem, 7vw, 6.5rem) 0; position: relative; }
  .section-paper{ background: var(--paper); }
  .section-sand{ background: var(--sand); }
  .section-dark{ background: var(--ink); color: #ECE6F2; }
  .section-dark h1, .section-dark h2, .section-dark h3{ color: var(--white); }
  .section-plum{ background: var(--plum); color: #EFE8F5; }
  .section-plum h1, .section-plum h2, .section-plum h3{ color: var(--white); }

  .section-head{ max-width: 760px; margin: 0 0 3rem; }
  .section-head.centered{ margin-left: auto; margin-right: auto; text-align: center; }
  .lead{ font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.55; }
  .section-dark .lead, .section-plum .lead{ color: rgba(255,255,255,0.82); }

  /* ---------- Shade band signature ---------- */
  .shade-bands{
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }
  .shade-bands svg{ width: 100%; height: 100%; }

  /* ---------- Hero ---------- */
  .hero{
    position: relative;
    padding-top: clamp(3.5rem, 8vw, 6rem);
    padding-bottom: clamp(3.5rem, 8vw, 6rem);
    overflow: hidden;
  }
  .hero-inner{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  .hero-copy p.lead{ margin-bottom: 2rem; }
  .hero-art{
    position: relative;
    aspect-ratio: 4/5;
  }
  .hero-art::before, .hero-art::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: clamp(50px, 9vw, 130px) 22px clamp(50px, 9vw, 130px) 22px;
    z-index: 0;
  }
  .hero-art::before{
    background: var(--clay);
    transform: rotate(-3deg) translate(-14px, 14px);
    opacity: 0.9;
  }
  .hero-art::after{
    background: var(--gold);
    transform: rotate(2.5deg) translate(12px, -10px);
    opacity: 0.85;
  }
  .hero-art img{
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: clamp(50px, 9vw, 130px) 22px clamp(50px, 9vw, 130px) 22px;
    box-shadow: 0 22px 50px -18px rgba(36,27,47,0.4);
  }
  .hero-badge{
    position: absolute;
    z-index: 2;
    top: clamp(-1.25rem, -2vw, -0.75rem);
    right: clamp(-1rem, -2vw, -0.5rem);
    background: var(--plum);
    padding: 1rem 1.3rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 14px 34px -12px rgba(36,27,47,0.4);
    max-width: 220px;
    transform: rotate(3deg);
  }
  .hero-badge .num{
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--gold);
    display: block;
    line-height: 1;
    margin-bottom: 0.2rem;
  }
  .hero-badge .cap{ font-size: 0.9rem; color: rgba(255,255,255,0.9); font-weight: 600; }

  @media (max-width: 880px){
    .hero-inner{ grid-template-columns: 1fr; }
    .hero-art{ order: -1; max-width: 380px; margin: 1.5rem auto 0; }
    .hero-badge{ top: -1rem; right: 0.5rem; }
  }

  /* ---------- Trust strip ---------- */
  .trust-strip{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem 2rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--cream-line);
    border-bottom: 1px solid var(--cream-line);
  }
  .trust-item{
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 600;
    color: var(--plum);
    font-size: 1.02rem;
  }
  .trust-item svg{ width: 22px; height: 22px; flex-shrink: 0; color: var(--clay); }

  /* ---------- Mission / About intro ---------- */
  .mission-grid{
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  @media (max-width: 860px){ .mission-grid{ grid-template-columns: 1fr; } }

  .quote-block{
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
    border-left: 5px solid var(--clay);
    padding-left: 1.5rem;
  }
  .quote-block cite{
    display: block;
    font-family: var(--font-body);
    font-style: normal;
    font-size: 1rem;
    font-weight: 700;
    color: var(--plum);
    margin-top: 1rem;
    letter-spacing: 0.02em;
  }

  /* ---------- About / bio ---------- */
  .about-grid{
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  @media (max-width: 860px){ .about-grid{ grid-template-columns: 1fr; } }
  .about-photo{
    position: relative;
    aspect-ratio: 3/4;
  }
  .about-photo::before, .about-photo::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: clamp(40px, 7vw, 100px) 20px clamp(40px, 7vw, 100px) 20px;
    z-index: 0;
  }
  .about-photo::before{
    background: var(--plum);
    transform: rotate(-3deg) translate(-12px, 12px);
    opacity: 0.9;
  }
  .about-photo::after{
    background: var(--gold);
    transform: rotate(2.5deg) translate(10px, -8px);
    opacity: 0.85;
  }
  .about-photo img{
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: clamp(40px, 7vw, 100px) 20px clamp(40px, 7vw, 100px) 20px;
    box-shadow: 0 20px 46px -16px rgba(36,27,47,0.38);
  }
  .credentials{
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--cream-line);
    display: grid;
    gap: 0.9rem;
  }
  .credentials li{
    display: flex;
    gap: 0.8rem;
    align-items: baseline;
    font-weight: 600;
    color: var(--ink);
  }
  .credentials li::before{
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--clay);
    flex-shrink: 0;
    transform: translateY(-2px);
  }

  /* ---------- Team / careers ---------- */
  .team-grid{
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
  }
  @media (max-width: 860px){ .team-grid{ grid-template-columns: 1fr; } }
  .team-art{
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4/3;
  }
  .team-art img{ width: 100%; height: 100%; object-fit: cover; }

  /* ---------- Services ---------- */
  .services-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
  @media (max-width: 980px){ .services-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px){ .services-grid{ grid-template-columns: 1fr; } }

  .service-card{
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 2rem 1.9rem;
    border-top: 6px solid var(--shade-color, var(--clay));
    box-shadow: 0 10px 28px -18px rgba(36,27,47,0.35);
  }
  .service-card h3{ font-size: 1.35rem; margin-bottom: 0.6rem; }
  .service-card p{ color: var(--ink-soft); font-size: 1.05rem; }
  .service-card:nth-child(1){ --shade-color: #B7A7CF; }
  .service-card:nth-child(2){ --shade-color: #9F8AC4; }
  .service-card:nth-child(3){ --shade-color: #886AAE; }
  .service-card:nth-child(4){ --shade-color: #7A5B9E; }
  .service-card:nth-child(5){ --shade-color: #A64599; }
  .service-card:nth-child(6){ --shade-color: #665083; }

  /* ---------- Supervision ---------- */
  .sup-grid{
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  @media (max-width: 900px){ .sup-grid{ grid-template-columns: 1fr; } }

  .topic-list{
    display: grid;
    gap: 0.85rem;
    margin-top: 1.75rem;
  }
  .topic-list li{
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    font-size: 1.05rem;
    color: rgba(255,255,255,0.9);
  }
  .topic-list li svg{ width: 22px; height: 22px; flex-shrink: 0; margin-top: 0.15rem; color: var(--gold); }

  .price-card{
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius);
    padding: 2.2rem;
  }
  .price-card h3{ color: var(--white); font-size: 1.2rem; margin-bottom: 1.4rem; }
  .price-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }
  .price-row:last-of-type{ border-bottom: none; }
  .price-row .label{ font-weight: 600; color: rgba(255,255,255,0.92); }
  .price-row .amount{ font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); white-space: nowrap; }
  .price-note{
    margin-top: 1.5rem;
    font-size: 0.98rem;
    color: rgba(255,255,255,0.75);
  }

  /* ---------- Rates ---------- */
  .rates-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    margin-top: 1rem;
  }
  @media (max-width: 720px){ .rates-grid{ grid-template-columns: 1fr; } }
  .rates-card{
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 2rem 1.9rem;
    border: 1px solid var(--sand-line);
  }
  .rates-card h3{ font-size: 1.25rem; margin-bottom: 0.9rem; }
  .rates-card p{ color: var(--ink-soft); }
  .insurer-list{
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.1rem;
  }
  .insurer-pill{
    background: var(--sand);
    color: var(--plum);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.5em 1.1em;
    border-radius: 999px;
  }

  /* ---------- Contact / CTA ---------- */
  .contact-grid{
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(2.5rem, 5vw, 5rem);
  }
  @media (max-width: 880px){ .contact-grid{ grid-template-columns: 1fr; } }

  .info-list{ display: grid; gap: 1.6rem; margin-top: 2rem; }
  .info-item{ display: flex; gap: 1rem; align-items: flex-start; }
  .info-item svg{ width: 26px; height: 26px; flex-shrink: 0; color: var(--gold); margin-top: 0.2rem; }
  .info-item h3{ font-size: 1.1rem; color: var(--white); margin-bottom: 0.2rem; }
  .info-item p, .info-item a{ color: rgba(255,255,255,0.82); text-decoration: none; font-size: 1.05rem; }
  .info-item a:hover{ text-decoration: underline; }

  .consult-card{
    background: var(--white);
    color: var(--ink);
    border-radius: var(--radius);
    padding: clamp(2rem, 4vw, 2.75rem);
  }
  .consult-card h1, .consult-card h2, .consult-card h3{ color: var(--ink); font-size: 1.5rem; }
  .consult-card p{ color: var(--ink-soft); }
  .consult-card .btn{ margin-top: 1.5rem; }

  /* ---------- Footer ---------- */
  .site-footer{
    background: var(--ink);
    color: rgba(255,255,255,0.65);
    padding: 3rem 0 2rem;
    font-size: 0.98rem;
  }
  .footer-top{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }
  .footer-brand .brand-mark{ color: var(--white); }
  .footer-brand p{ margin-top: 0.75rem; max-width: 320px; color: rgba(255,255,255,0.6); }
  .footer-cols{ display: flex; gap: 3.5rem; flex-wrap: wrap; }
  .footer-col h4{
    font-family: var(--font-body);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
  }
  .footer-col ul{ display: grid; gap: 0.7rem; }
  .footer-col a{ text-decoration: none; color: rgba(255,255,255,0.75); }
  .footer-col a:hover{ color: var(--white); text-decoration: underline; }
  .footer-bottom{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.75rem;
  }
  .social-row{ display: flex; gap: 1rem; }
  .social-row a{
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    color: var(--white);
    transition: background var(--dur) ease, border-color var(--dur) ease;
  }
  .social-row a:hover{ background: var(--plum); border-color: var(--plum); }
  .social-row svg{ width: 20px; height: 20px; }

  /* ---------- Small print / crisis banner ---------- */
  .safety-note{
    background: var(--sand);
    border-bottom: 1px solid var(--sand-line);
    text-align: center;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    color: var(--plum);
    font-weight: 600;
  }

/* ---------- Multi-page additions ---------- */

/* Interior page intro banner (replaces the full hero on non-home pages) */
.page-intro{ padding-top: clamp(2.75rem, 6vw, 4.5rem); padding-bottom: clamp(2.75rem, 6vw, 4.5rem); }
.page-intro h1{ font-size: var(--fs-h2); font-weight: 600; }
.page-intro .lead{ max-width: 680px; }

/* Active nav link, set via JS based on current page */
.main-nav a[aria-current="page"]{
  border-color: var(--clay);
  color: var(--clay);
}

/* Reusable bottom CTA band, injected on every page except Contact */
.cta-band{ background: var(--plum); color: var(--white); padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.cta-band-inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.75rem;
}
.cta-band h2{ color: var(--white); font-size: var(--fs-h3); margin-bottom: 0.35rem; }
.cta-band p{ color: rgba(255,255,255,0.85); margin: 0; font-size: 1.1rem; }
.cta-band .btn-row{ margin-top: 0; flex-wrap: nowrap; }
@media (max-width: 640px){
  .cta-band .btn-row{ flex-wrap: wrap; width: 100%; }
  .cta-band .btn-row .btn{ flex: 1 1 auto; }
}

/* ---------- FAQ accordion (Supervision page) ---------- */
.faq-list{ display: grid; gap: 1rem; margin-top: 1rem; }
.faq-item{
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius-sm);
  padding: 1.5rem 1.75rem;
}
.faq-item summary{
  cursor: pointer;
  font-weight: 700;
  font-size: 1.15rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: '+';
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--clay);
  flex-shrink: 0;
  line-height: 1;
}
.faq-item[open] summary::after{ content: '\2212'; }
.faq-item .faq-answer{ margin-top: 1rem; color: var(--ink-soft); font-size: 1.05rem; }
.faq-item .faq-answer p:last-child{ margin-bottom: 0; }
.faq-note{ margin-top: 1.5rem; font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- Careers: position cards ---------- */
.positions-grid{ display: grid; gap: 1.75rem; margin-top: 2rem; }
.position-card{
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--sand-line);
  box-shadow: 0 10px 28px -18px rgba(36,27,47,0.35);
}
.position-card .position-meta{
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.5rem;
  display: block;
}
.position-card h3{ font-size: 1.5rem; margin-bottom: 0.6rem; }
.position-card > p{ color: var(--ink-soft); font-size: 1.05rem; }
.position-list{ display: grid; gap: 0.65rem; margin: 1.35rem 0 1.5rem; }
.position-list li{ display: flex; gap: 0.65rem; align-items: flex-start; color: var(--ink-soft); font-size: 1.02rem; }
.position-list li::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--clay);
  flex-shrink: 0;
  margin-top: 0.55em;
}

/* ---------- Application form ---------- */
.apply-form{ display: grid; gap: 1.75rem; max-width: 720px; }
.form-row{ display: grid; gap: 0.6rem; }
.form-row label{ font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.form-row .form-help{ font-size: 0.95rem; font-weight: 400; color: var(--ink-soft); margin-top: -0.2rem; }
.form-cols-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-cols-3{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; }
@media (max-width: 700px){
  .form-cols-2, .form-cols-3{ grid-template-columns: 1fr; }
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
select, textarea{
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--sand-line);
  border-radius: 10px;
  padding: 0.85em 1em;
  width: 100%;
}
textarea{ min-height: 130px; resize: vertical; }
select{ cursor: pointer; }

fieldset{ border: none; padding: 0; margin: 0; }
fieldset legend{ font-weight: 700; font-size: 1.05rem; color: var(--ink); padding: 0; margin-bottom: 0.6rem; }
.radio-group{ display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.radio-option{ display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.02rem; cursor: pointer; }
.radio-option input{ width: 18px; height: 18px; accent-color: var(--clay); cursor: pointer; }

.hp-field{ position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.form-note{ font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- Standalone bio page ---------- */
.bio-credential-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--sand-line);
}
@media (max-width: 760px){ .bio-credential-grid{ grid-template-columns: 1fr; gap: 1.75rem; } }
.bio-credential-col h3{ font-size: 1.05rem; margin-bottom: 0.9rem; color: var(--clay); }
.bio-credential-col ul{ display: grid; gap: 0.7rem; }
.bio-credential-col li{ font-size: 1rem; color: var(--ink-soft); line-height: 1.45; }
.bio-credential-col li strong{ color: var(--ink); display: block; font-weight: 700; }

.speaking-stat{
  display: inline-flex;
  flex-direction: column;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.75rem;
  margin: 1.5rem 0;
}
.speaking-stat .num{ font-family: var(--font-display); font-size: 2rem; color: var(--gold); line-height: 1; }
.speaking-stat .cap{ font-size: 0.95rem; color: rgba(255,255,255,0.8); margin-top: 0.35rem; }

.topic-pills{ display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.topic-pill{
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--white);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5em 1.1em;
  border-radius: 999px;
}

.format-list{ display: grid; gap: 0.65rem; margin: 1.25rem 0 0; }
.format-list li{ display: flex; gap: 0.65rem; align-items: flex-start; color: rgba(255,255,255,0.88); font-size: 1.02rem; }
.format-list li::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: 0.6em; }

.featured-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--sand);
  border-radius: 999px;
  padding: 0.7em 1.3em;
  font-weight: 700;
  color: var(--plum);
  text-decoration: none;
  margin-top: 0.5rem;
}
.featured-badge:hover{ background: var(--sand-line); }

/* ---------- Bio page: logo strip & testimonial ---------- */
.logo-strip{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem 1.5rem;
  margin-top: 2rem;
  padding: 2.25rem 2rem;
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
}
@media (max-width: 900px){ .logo-strip{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){ .logo-strip{ grid-template-columns: repeat(2, 1fr); } }
.logo-item{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; }
.logo-item img{
  max-height: 56px;
  width: auto;
  max-width: 100%;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter var(--dur) ease, opacity var(--dur) ease;
}
.logo-item:hover img{ filter: grayscale(0%); opacity: 1; }
.logo-caption{ font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); line-height: 1.35; margin: 0; }
.logo-placeholder-mark{
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--sand-line);
  border: 2px dashed var(--sand-line);
  border-radius: 999px;
  width: 56px;
}

.signature-talk{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  padding: 1.5rem 1.75rem;
  margin-top: 1.25rem;
}
.signature-talk h3{ color: var(--white); font-size: 1.15rem; margin-bottom: 0.5rem; }
.signature-talk p{ color: rgba(255,255,255,0.85); font-size: 1rem; margin: 0; }

.testimonial-quote{
  border-left: 4px solid var(--gold);
  padding-left: 1.5rem;
  margin-top: 2rem;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.92);
  font-style: italic;
}
.testimonial-quote cite{
  display: block;
  margin-top: 0.85rem;
  font-style: normal;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
}
.testimonial-quote cite span{ display: block; font-weight: 400; color: rgba(255,255,255,0.75); }

/* ---------- Bio length toggle ---------- */
.bio-toggle{
  display: inline-flex;
  background: var(--sand);
  border-radius: 999px;
  padding: 0.3rem;
  gap: 0.3rem;
  margin-bottom: 1.75rem;
}
.bio-toggle-btn{
  border: none;
  background: transparent;
  padding: 0.55em 1.4em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--dur) ease, color var(--dur) ease;
}
.bio-toggle-btn:hover{ color: var(--ink); }
.bio-toggle-btn.is-active{
  background: var(--white);
  color: var(--clay);
  box-shadow: 0 2px 8px rgba(36,27,47,0.14);
}

/* ---------- Speaking section two-column layout ---------- */
.speaking-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 2rem;
  align-items: start;
}
@media (max-width: 860px){ .speaking-grid{ grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Privacy reassurance note (near forms) ---------- */
.privacy-note{
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--sand);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.4rem;
  margin: 1.5rem 0 2rem;
  max-width: 720px;
}
.privacy-note svg{ width: 22px; height: 22px; flex-shrink: 0; color: var(--clay); margin-top: 0.15rem; }
.privacy-note p{ margin: 0; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5; }
.privacy-note strong{ color: var(--ink); }

/* ---------- Trust badges near forms ---------- */
.trust-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}
.trust-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: 999px;
  padding: 0.55em 1.1em;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--plum);
}
.trust-badge svg{ width: 16px; height: 16px; color: var(--clay); flex-shrink: 0; }