/* =========================================================
     EDITABLE BRAND TOKENS
     Change colors, fonts, and the logo here. Everything else
     in the page references these variables.
     ========================================================= */
  :root{
    --charcoal:      #242424;
    --charcoal-soft:#2f2f2f;
    --white:         #ffffff;
    --gold:          #C9A24B;
    --gold-dim:      #a3813a;
    --blue-bg:       #EAF2FB;
    --blue-text:     #0C447C;

    --ink:           #1c1c1c;
    --ink-muted:     #5c5c5c;
    --hairline:      rgba(255,255,255,0.14);
    --hairline-dark: rgba(0,0,0,0.10);

    --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --container-max: 1200px;
    --gutter: 1.25rem;
  }

  /* =========================================================
     RESET
     ========================================================= */
  *,*::before,*::after{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; }
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--white);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{ max-width:100%; height:auto; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ margin:0; padding:0; list-style:none; }
  h1,h2,h3,p{ margin:0; }
  button{ font-family:inherit; }

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

  .container{
    width:100%;
    max-width:var(--container-max);
    margin-inline:auto;
    padding-inline:var(--gutter);
  }

  @media (min-width:768px){
    :root{ --gutter: 2rem; }
  }
  @media (min-width:1200px){
    :root{ --gutter: 2.5rem; }
  }

  /* =========================================================
     LOGO — both pieces are plain image files, swappable by
     replacing the files at:
       /assets/logo-mark.svg   (the "S" mark)
       /assets/wordmark.svg    (the "SONATH" wordmark)
     Just overwrite those two files with your own artwork
     (any image format works — svg, png, etc; update the
     <img src="..."> paths in the HTML if you rename them).
     Sizing below is handled purely via CSS height, and width
     scales automatically (height:auto is set globally on img).
     ========================================================= */

  .logo{
    display:inline-flex;
    align-items:center;
    gap:0.7rem;
  }
  .logo-mark{
    height:38px;
    width:auto;
    flex-shrink:0;
  }
  .logo-word-img{
    width:200px;
    height:auto;
  }

  /* Footer variant: slightly smaller lockup, same files */
  .footer .logo-mark{ height:28px; }
  .footer .logo-word-img{ width:70px; }

  /* =========================================================
     BUTTONS
     ========================================================= */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0.85rem 1.9rem;
    font-family:var(--font-body);
    font-weight:500;
    font-size:0.95rem;
    letter-spacing:0.02em;
    border-radius:2px;
    cursor:pointer;
    transition:background-color 160ms ease, color 160ms ease, border-color 160ms ease;
    white-space:nowrap;
  }
  .btn-outline-gold{
    background:transparent;
    border:1px solid var(--gold);
    color:var(--gold);
  }
  .btn-outline-gold:hover{
    background:var(--gold);
    color:var(--charcoal);
  }
  .btn-filled-gold{
    background:var(--gold);
    border:1px solid var(--gold);
    color:var(--charcoal);
  }
  .btn-filled-gold:hover{
    background:var(--gold-dim);
    border-color:var(--gold-dim);
  }

  /* =========================================================
     HEADER
     ========================================================= */
  .site-header{
    background:var(--charcoal);
    padding-block:1.1rem;
  }
  .site-header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  /* =========================================================
     NAVIGATION — Option B (minimal, right-aligned)
     Desktop: .nav-right (links + CTA) shown, .nav-toggle hidden.
     Mobile: .nav-right hidden, .nav-toggle (hamburger) shown;
     clicking it toggles .is-open on #mobileMenu (see main.js).
     ========================================================= */
  .nav-right{
    display:none;
    align-items:center;
    gap:2.2rem;
  }
  .nav-links{
    display:flex;
    align-items:center;
    gap:2rem;
  }
  .nav-links a{
    font-family:var(--font-body);
    font-size:0.85rem;
    font-weight:500;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.6);
  }
  .nav-links a:hover{ color:var(--white); }
  .nav-links a[aria-current="page"]{ color:var(--gold); }

  .nav-toggle{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:44px;
    height:44px;
    margin:-13px -10px;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
  }
  .nav-toggle span{
    width:24px;
    display:block;
    height:2px;
    background:var(--white);
    border-radius:1px;
  }

  .mobile-menu{
    display:none;
    background:var(--charcoal);
    padding:1.5rem 1.25rem 2rem;
    border-top:1px solid var(--hairline);
  }
  .mobile-menu.is-open{ display:block; }
  .mobile-menu nav{
    display:flex;
    flex-direction:column;
    gap:1.4rem;
    margin-bottom:1.8rem;
  }
  .mobile-menu nav a{
    font-family:var(--font-display);
    font-weight:500;
    font-size:1.3rem;
    color:var(--white);
  }
  .mobile-menu nav a[aria-current="page"]{ color:var(--gold); }
  .mobile-menu .btn{ width:100%; }

  @media (min-width:900px){
    .nav-right{ display:flex; }
    .nav-toggle{ display:none; }
    .mobile-menu{ display:none !important; }
  }

  /* =========================================================
     HERO
     ========================================================= */
  .hero{
    background:var(--charcoal);
    padding-block: 4.5rem 5rem;
  }
  .hero .container{
    max-width:780px;
  }
  .hero-eyebrow{
    font-family:var(--font-body);
    font-weight:500;
    font-size:0.8rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:1.1rem;
  }
  .hero h1{
    font-family:var(--font-display);
    font-weight:500;
    color:var(--white);
    font-size:clamp(2rem, 6vw, 3.4rem);
    line-height:1.14;
    letter-spacing:-0.01em;
  }
  .hero p{
    margin-top:1.4rem;
    color:rgba(255,255,255,0.72);
    font-size:clamp(1rem, 2vw, 1.15rem);
    max-width:46ch;
    line-height:1.6;
  }
  .hero .btn{
    margin-top:2.4rem;
  }

  /* =========================================================
     WHAT WE DO
     ========================================================= */
  .section{
    padding-block:4rem;
  }
  .section-head{
    max-width:640px;
    margin-bottom:2.6rem;
  }
  .section-eyebrow{
    font-family:var(--font-body);
    font-weight:500;
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-muted);
    margin-bottom:0.75rem;
  }
  .section-head h2{
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(1.5rem, 3vw, 2.1rem);
    color:var(--ink);
    letter-spacing:-0.01em;
  }

  .services{
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    background:var(--hairline-dark);
    border:1px solid var(--hairline-dark);
  }
  @media (min-width:480px){
    .services{ grid-template-columns:repeat(3,1fr); }
  }
  .service-card{
    background:var(--white);
    padding:2.2rem 1.8rem;
  }
  .service-card .index{
    font-family:var(--font-display);
    font-size:0.85rem;
    color:var(--gold);
    letter-spacing:0.08em;
    margin-bottom:1rem;
    display:block;
  }
  .service-card h3{
    font-family:var(--font-display);
    font-weight:500;
    font-size:1.15rem;
    color:var(--ink);
    margin-bottom:0.6rem;
  }
  .service-card p{
    color:var(--ink-muted);
    font-size:0.95rem;
    line-height:1.55;
  }

  /* =========================================================
     HOW WE WORK — light blue band
     ========================================================= */
  .process{
    background:var(--blue-bg);
  }
  .process .section-eyebrow{ color:var(--blue-text); opacity:0.75; }
  .process .section-head h2{ color:var(--blue-text); }

  /* Reusable light-blue band, same treatment as .process,
     for use on interior pages (founders section, etc.) */
  .band-blue{
    background:var(--blue-bg);
  }
  .band-blue .section-eyebrow{ color:var(--blue-text); opacity:0.75; }
  .band-blue .section-head h2{ color:var(--blue-text); }

  .process-line{
    display:flex;
    flex-direction:column;
    gap:1.6rem;
  }
  @media (min-width:768px){
    .process-line{
      flex-direction:row;
      align-items:stretch;
      gap:0;
    }
  }
  .process-step{
    display:flex;
    flex-direction:column;
    gap:0.4rem;
    flex:1;
    position:relative;
    padding-inline-start:1.3rem;
    border-left:2px solid var(--blue-text);
  }
  @media (min-width:768px){
    .process-step{
      padding-inline-start:0;
      padding-top:1.5rem;
      border-left:none;
      border-top:2px solid var(--blue-text);
      padding-inline-end:1.5rem;
      margin-inline-end:1rem;
    }
    .process-step:last-child{ margin-inline-end:0; }
  }
  .process-step .num{
    font-family:var(--font-display);
    font-size:0.8rem;
    letter-spacing:0.1em;
    color:var(--blue-text);
    opacity:0.6;
  }
  .process-step .label{
    font-family:var(--font-display);
    font-weight:500;
    font-size:1.05rem;
    color:var(--blue-text);
  }

  /* =========================================================
     FOUNDERS TEASER
     ========================================================= */
  .founders .container{
    max-width:760px;
    text-align:left;
  }
  .founders p{
    font-size:clamp(1.05rem, 2vw, 1.25rem);
    line-height:1.6;
    color:var(--ink);
  }
  .founders .founders-link{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    margin-top:1.5rem;
    font-weight:500;
    color:var(--blue-text);
    border-bottom:1px solid currentColor;
    padding:19px 0 2px;
    margin-block:1.5rem -17px;
    font-size:0.95rem;
  }
  .founders .founders-link:hover{ opacity:0.75; }

  /* =========================================================
     FINAL CTA
     ========================================================= */
  .final-cta{
    background:var(--charcoal);
    text-align:left;
  }
  .final-cta .container{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1.6rem;
    max-width:640px;
  }
  .final-cta h2{
    font-family:var(--font-display);
    font-weight:500;
    color:var(--white);
    font-size:clamp(1.7rem, 4vw, 2.4rem);
  }

  /* =========================================================
     FOOTER
     ========================================================= */
  .site-footer{
    background:var(--charcoal);
    padding-block:2.8rem 2.2rem;
    border-top:1px solid var(--hairline);
  }
  .footer-top{
    display:flex;
    flex-direction:column;
    gap:1.8rem;
    padding-bottom:2.2rem;
    margin-bottom:1.8rem;
    border-bottom:1px solid var(--hairline);
  }
  @media (min-width:768px){
    .footer-top{
      flex-direction:row;
      align-items:center;
      justify-content:space-between;
    }
  }

  /* Contact strip — deliberately prominent, not buried */
  .footer-contact{
    display:flex;
    flex-direction:column;
    gap:0.7rem;
  }
  @media (min-width:560px){
    .footer-contact{
      flex-direction:row;
      flex-wrap:wrap;
      gap:1.8rem;
    }
  }
  .footer-contact a{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    color:var(--white);
    font-size:0.95rem;
    font-weight:500;
    min-height:44px;
  }
  .footer-contact a:hover{ color:var(--gold); }
  .footer-contact .label{
    color:rgba(255,255,255,0.45);
    font-weight:400;
    font-size:0.82rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
  }

  .footer-bottom{
    display:flex;
    flex-direction:column;
    gap:1.4rem;
  }
  @media (min-width:768px){
    .footer-bottom{
      flex-direction:row;
      align-items:center;
      justify-content:space-between;
    }
  }
  .footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
  }
  .footer-links a{
    color:rgba(255,255,255,0.72);
    font-size:0.9rem;
  }
  .footer-links a:hover{ color:var(--gold); }
  .footer-meta{
    display:flex;
    flex-direction:column;
    gap:0.25rem;
  }
  .footer-copy{
    color:rgba(255,255,255,0.45);
    font-size:0.82rem;
  }
  .footer-credit{
    color:rgba(255,255,255,0.32);
    font-size:0.78rem;
  }

  /* =========================================================
     INTERIOR PAGE HERO
     Shorter charcoal intro band used at the top of every page
     other than the homepage (about, services, work, contact,
     privacy, terms). Matches the homepage hero's visual language.
     ========================================================= */
  .interior-hero{
    background:var(--charcoal);
    padding-block:3.2rem 3.6rem;
  }
  .interior-hero .container{ max-width:780px; }
  .interior-hero .hero-eyebrow{
    font-family:var(--font-body);
    font-weight:500;
    font-size:0.8rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:1rem;
  }
  .interior-hero h1{
    font-family:var(--font-display);
    font-weight:500;
    color:var(--white);
    font-size:clamp(1.9rem, 5vw, 2.8rem);
    line-height:1.16;
    letter-spacing:-0.01em;
  }
  .interior-hero p{
    margin-top:1.1rem;
    color:rgba(255,255,255,0.72);
    font-size:clamp(1rem, 2vw, 1.1rem);
    max-width:56ch;
    line-height:1.6;
  }

  /* =========================================================
     FOUNDERS GRID (about.html)
     ========================================================= */
  .founders-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    background:var(--hairline-dark);
    border:1px solid var(--hairline-dark);
    margin-top:2rem;
  }
  @media (min-width:600px){
    .founders-grid{ grid-template-columns:1fr 1fr; }
  }
  .founder-card{
    background:var(--white);
    padding:2.2rem 1.8rem;
  }
  .founder-card .founder-name{
    font-family:var(--font-display);
    font-weight:500;
    font-size:1.25rem;
    color:var(--ink);
  }
  .founder-card .founder-title{
    display:block;
    font-family:var(--font-body);
    font-weight:500;
    font-size:0.78rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--gold-dim);
    margin-top:0.35rem;
    margin-bottom:1rem;
  }
  .founder-card p{
    color:var(--ink-muted);
    font-size:0.95rem;
    line-height:1.6;
  }

  /* =========================================================
     PROSE CONTENT (about story, generic long-form text)
     ========================================================= */
  .prose{
    max-width:70ch;
  }
  .prose p + p{ margin-top:1.1rem; }
  .prose p{
    color:var(--ink-muted);
    font-size:1.02rem;
    line-height:1.7;
  }

  /* =========================================================
     SERVICES DETAIL LIST (services.html)
     ========================================================= */
  .service-detail-list{
    display:flex;
    flex-direction:column;
  }
  .service-detail{
    display:grid;
    grid-template-columns:1fr;
    gap:1rem;
    padding-block:2.4rem;
    border-top:1px solid var(--hairline-dark);
  }
  .service-detail:last-child{ border-bottom:1px solid var(--hairline-dark); }
  @media (min-width:768px){
    .service-detail{
      grid-template-columns:220px 1fr;
      gap:2.5rem;
    }
  }
  .service-detail .index{
    font-family:var(--font-display);
    font-size:0.85rem;
    color:var(--gold);
    letter-spacing:0.08em;
    display:block;
    margin-bottom:0.6rem;
  }
  .service-detail h3{
    font-family:var(--font-display);
    font-weight:500;
    font-size:1.3rem;
    color:var(--ink);
  }
  .service-detail-body p{
    color:var(--ink-muted);
    font-size:0.98rem;
    line-height:1.65;
    max-width:62ch;
  }
  .service-detail-list.detail-list{
    margin-top:1.1rem;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
  }
  .service-includes{
    margin-top:1.1rem;
    display:flex;
    flex-wrap:wrap;
    gap:0.6rem 1.6rem;
  }
  .service-includes span{
    font-size:0.86rem;
    color:var(--ink-muted);
    position:relative;
    padding-left:1rem;
  }
  .service-includes span::before{
    content:"";
    position:absolute;
    left:0; top:0.5em;
    width:5px; height:5px;
    background:var(--gold);
    border-radius:50%;
  }

  /* =========================================================
     PROCESS DETAIL (work.html)
     ========================================================= */
  .process-detail-list{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .process-detail-step{
    display:grid;
    grid-template-columns:1fr;
    gap:0.6rem;
    padding-block:2rem;
    border-top:1px solid var(--blue-text);
    border-top-color:rgba(12,68,124,0.18);
  }
  .process-detail-step:last-child{ border-bottom:1px solid rgba(12,68,124,0.18); }
  @media (min-width:768px){
    .process-detail-step{
      grid-template-columns:180px 1fr;
      gap:2rem;
      align-items:baseline;
    }
  }
  .process-detail-step .num{
    font-family:var(--font-display);
    font-weight:500;
    font-size:0.85rem;
    letter-spacing:0.08em;
    color:var(--blue-text);
    opacity:0.6;
  }
  .process-detail-step .label{
    font-family:var(--font-display);
    font-weight:500;
    font-size:1.15rem;
    color:var(--blue-text);
    display:block;
    margin-top:0.2rem;
  }
  .process-detail-step p{
    color:var(--blue-text);
    opacity:0.85;
    font-size:0.95rem;
    line-height:1.6;
    max-width:56ch;
    margin-top:0.4rem;
  }

  .capabilities-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    background:var(--hairline-dark);
    border:1px solid var(--hairline-dark);
  }
  @media (min-width:600px){
    .capabilities-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (min-width:1000px){
    .capabilities-grid{ grid-template-columns:repeat(3,1fr); }
  }
  .capability-card{
    background:var(--white);
    padding:1.9rem 1.6rem;
  }
  .capability-card h4{
    font-family:var(--font-display);
    font-weight:500;
    font-size:1rem;
    color:var(--ink);
    margin-bottom:0.7rem;
  }
  .capability-card p{
    color:var(--ink-muted);
    font-size:0.9rem;
    line-height:1.6;
  }

  /* =========================================================
     CONTACT PAGE
     ========================================================= */
  .contact-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:2.6rem;
  }
  @media (min-width:900px){
    .contact-grid{
      grid-template-columns:0.9fr 1.1fr;
      gap:3.5rem;
    }
  }
  .contact-details{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
  }
  .contact-detail-item{
    display:flex;
    flex-direction:column;
    gap:0.3rem;
  }
  .contact-detail-item .label{
    font-family:var(--font-body);
    font-weight:500;
    font-size:0.78rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-muted);
  }
  .contact-detail-item a{
    font-family:var(--font-display);
    font-weight:500;
    font-size:1.15rem;
    color:var(--ink);
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .contact-detail-item a:hover{ color:var(--gold-dim); }

  .contact-form{
    display:flex;
    flex-direction:column;
    gap:1.2rem;
  }
  .form-field{
    display:flex;
    flex-direction:column;
    gap:0.45rem;
  }
  .form-field label{
    font-family:var(--font-body);
    font-weight:500;
    font-size:0.85rem;
    color:var(--ink);
  }
  .form-field input,
  .form-field textarea{
    font-family:var(--font-body);
    font-size:0.95rem;
    color:var(--ink);
    background:var(--white);
    border:1px solid rgba(0,0,0,0.18);
    border-radius:2px;
    padding:0.8rem 0.9rem;
    min-height:44px;
    transition:border-color 160ms ease;
  }
  .form-field textarea{
    min-height:130px;
    resize:vertical;
  }
  .form-field input:focus,
  .form-field textarea:focus{
    outline:none;
    border-color:var(--gold);
  }
  .form-note{
    font-size:0.82rem;
    color:var(--ink-muted);
  }
  .form-status{
    font-size:0.88rem;
    color:var(--blue-text);
    display:none;
  }
  .form-status.is-visible{ display:block; }

  /* =========================================================
     LEGAL CONTENT (privacy.html, terms.html)
     ========================================================= */
  .legal-content{
    max-width:72ch;
  }
  .legal-content .updated{
    font-size:0.85rem;
    color:var(--ink-muted);
    margin-bottom:2rem;
  }
  .legal-content h2{
    font-family:var(--font-display);
    font-weight:500;
    font-size:1.2rem;
    color:var(--ink);
    margin-top:2.2rem;
    margin-bottom:0.8rem;
  }
  .legal-content h2:first-of-type{ margin-top:0; }
  .legal-content p{
    color:var(--ink-muted);
    font-size:0.98rem;
    line-height:1.7;
  }
  .legal-content p + p{ margin-top:0.9rem; }
  .legal-content ul{
    margin-top:0.9rem;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
  }
  .legal-content li{
    color:var(--ink-muted);
    font-size:0.98rem;
    line-height:1.6;
    padding-left:1.1rem;
    position:relative;
  }
  .legal-content li::before{
    content:"";
    position:absolute;
    left:0; top:0.6em;
    width:5px; height:5px;
    background:var(--gold);
    border-radius:50%;
  }