/* ===========================================================
   SoCalMHS — public site
   Design tokens + base + components
   =========================================================== */

:root{
  /* Surfaces */
  --paper:        #FAF8F5;
  --paper-2:      #F3EFE9;
  --paper-3:      #EAE4DB;
  --ink:          #131412;
  --ink-soft:     #1C1D1A;

  /* Text */
  --text:         #131412;
  --text-2:       #4A4A44;
  --text-muted:   #6E6E66;

  /* Lines */
  --line:         #DED8CE;
  --line-strong:  #C6BEB1;

  /* Accent — restrained warm clay */
  --accent:       #9C4526;
  --accent-deep:  #7C351C;

  /* On-dark */
  --d-text:       #F3EFE9;
  --d-text-2:     #B6B2A9;
  --d-line:       rgba(243,239,233,0.16);
  --d-line-2:     rgba(243,239,233,0.30);
  --d-accent:     #E2A07C;

  /* Type */
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* No monospace anywhere: labels, buttons and nav use the sans above. */

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1220px;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

h1,h2,h3,h4{
  margin:0;
  font-weight:600;
  letter-spacing:-0.025em;
  line-height:1.05;
  text-wrap:balance;
}
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

a{ color:inherit; }

::selection{ background:var(--ink); color:var(--paper); }

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

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.85rem 1.25rem; font:600 .82rem/1 var(--sans);
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* ---------- Layout primitives ---------- */

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

.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(3rem,6vw,5.5rem); }
.section--rule{ border-top:1px solid var(--line); }

.section-dark{
  background:var(--ink);
  color:var(--d-text);
}
.section-dark h1,.section-dark h2,.section-dark h3{ color:var(--d-text); }

/* ---------- Type helpers ---------- */

.eyebrow{
  font:600 .75rem/1.55 var(--sans);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin:0 0 1.25rem;
}
.section-dark .eyebrow{ color:var(--d-text-2); }
.eyebrow--accent{ color:var(--accent); }
.section-dark .eyebrow--accent{ color:var(--d-accent); }

.h-display{ font-size:clamp(2.6rem, 7.2vw, 5.1rem); letter-spacing:-0.035em; }
.h-xl{ font-size:clamp(2.05rem, 4.6vw, 3.35rem); letter-spacing:-0.03em; }
.h-lg{ font-size:clamp(1.55rem, 3vw, 2.15rem); }
.h-md{ font-size:clamp(1.2rem, 2.1vw, 1.45rem); letter-spacing:-0.015em; }

.lede{
  font-size:clamp(1.05rem, 1.45vw, 1.24rem);
  line-height:1.55;
  color:var(--text-2);
  max-width:56ch;
}
.section-dark .lede{ color:var(--d-text-2); }

.prose{ color:var(--text-2); max-width:62ch; line-height:1.7; }
.prose + .prose{ margin-top:1.1rem; }
.section-dark .prose{ color:var(--d-text-2); }

.measure-sm{ max-width:44ch; }

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font:600 .8rem/1 var(--sans);
  letter-spacing:.07em; text-transform:uppercase;
  text-decoration:none;
  padding:1.05rem 1.7rem;
  border:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover{ background:var(--accent); border-color:var(--accent); }
.btn:active{ transform:translateY(1px); }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn--ghost:hover{ background:transparent; color:var(--accent); border-color:var(--accent); }

.section-dark .btn{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.section-dark .btn:hover{ background:var(--d-accent); border-color:var(--d-accent); color:var(--ink); }
.section-dark .btn--ghost{ background:transparent; color:var(--d-text); border-color:var(--d-line-2); }
.section-dark .btn--ghost:hover{ color:var(--d-accent); border-color:var(--d-accent); background:transparent; }

.btn[aria-disabled="true"],
.btn--disabled{
  background:transparent; color:var(--text-muted);
  border-color:var(--line); cursor:not-allowed;
}
.section-dark .btn--disabled{ background:transparent; color:var(--d-text-2); border-color:var(--d-line); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

.textlink{
  font:600 .8rem/1 var(--sans);
  letter-spacing:.07em; text-transform:uppercase;
  text-decoration:none; color:var(--accent);
  border-bottom:1px solid currentColor; padding-bottom:.35rem;
}
.textlink:hover{ color:var(--ink); }

/* ---------- Header ---------- */

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,248,245,0.97);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:76px;
}

.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.brand-logo{ height:34px; width:auto; }
.brand-logo.is-missing{ display:none; }
.brand-fallback{
  font-size:1.22rem; font-weight:500; letter-spacing:.02em;
  border:1.5px solid var(--ink); padding:.3rem .7rem; line-height:1;
  white-space:nowrap;
}

.site-nav ul{ display:flex; align-items:center; gap:.4rem; }
.site-nav a{
  display:inline-block;
  font-size:.9rem; font-weight:500; letter-spacing:.005em;
  text-decoration:none; color:var(--text-2);
  padding:.55rem .8rem;
  transition:color .16s ease;
}
.site-nav a:hover{ color:var(--ink); }

.site-nav .nav-bos{
  margin-left:.55rem;
  border:1px solid var(--line-strong);
  color:var(--ink);
  font:600 .8rem/1 var(--sans);
  letter-spacing:.07em; text-transform:uppercase;
  padding:.62rem .95rem;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.site-nav .nav-bos:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.site-nav[data-active="home"]    a[data-nav="home"],
.site-nav[data-active="services"] a[data-nav="services"],
.site-nav[data-active="about"]   a[data-nav="about"],
.site-nav[data-active="contact"] a[data-nav="contact"]{
  color:var(--ink); font-weight:600;
}
.site-nav[data-active="bos"] a[data-nav="bos"]{
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}

.nav-toggle{
  display:none;
  align-items:center; gap:.6rem;
  background:none; border:1px solid var(--line-strong);
  padding:.6rem .85rem; cursor:pointer;
  font:600 .78rem/1 var(--sans); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink);
}
.nav-toggle-bars{ display:inline-flex; flex-direction:column; gap:4px; width:16px; }
.nav-toggle-bars span{ display:block; height:1.5px; background:currentColor; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child{ transform:translateY(2.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child{ transform:translateY(-2.75px) rotate(-45deg); }

@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; }
  .site-nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:.5rem var(--gutter) 1.75rem;
    display:none;
  }
  .site-nav.is-open{ display:block; }
  .site-nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .site-nav a{
    display:block;
    padding:1.05rem .1rem; font-size:1.05rem;
    border-bottom:1px solid var(--line);
  }
  .site-nav .nav-bos{
    display:block; margin:1.1rem 0; text-align:center;
    border:1px solid var(--ink); padding:1rem; font-size:.82rem;
  }
  .site-nav[data-active="bos"] a[data-nav="bos"]{ border-color:var(--ink); }
}

/* ---------- Hero ---------- */

.hero{ padding-block:clamp(4rem, 10vw, 9rem) clamp(3.5rem, 7vw, 6.5rem); }
.hero h1{ margin-bottom:1.9rem; max-width:17ch; }
.hero .lede{ margin-bottom:2.6rem; }
.hero--page h1{ max-width:20ch; }

.hero-meta{
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem;
  margin-top:3.5rem; padding-top:1.6rem; border-top:1px solid var(--line);
  font:600 .76rem/1.6 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-muted);
}

/* ---------- Section headers ---------- */

.section-head{ margin-bottom:clamp(2.5rem, 5vw, 4rem); }
.section-head h2{ max-width:20ch; }
.section-head .lede{ margin-top:1.5rem; }

/* ---------- Numbered service blocks (editorial rows) ---------- */

.rows{ border-top:1px solid var(--line); }
.row-block{
  display:grid; gap:1.6rem;
  padding-block:clamp(2.5rem, 4.5vw, 3.75rem);
  border-bottom:1px solid var(--line);
}
.row-block__index{
  font:600 .77rem/1.5 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
}
.row-block__title{ margin:.9rem 0 0; }
.row-block__headline{ margin:0 0 1.1rem; }
.row-block__body .prose{ margin-bottom:1.6rem; }

@media (min-width: 860px){
  .row-block{ grid-template-columns: 4fr 8fr; gap:3rem; }
  .row-block__head{ position:sticky; top:110px; align-self:start; }
}

/* ---------- Tag / capability lists ---------- */

.caplist{
  display:grid; gap:.05rem .5rem;
  grid-template-columns:1fr;
}
@media (min-width:560px){ .caplist{ grid-template-columns:1fr 1fr; } }

.caplist li{
  display:flex; gap:.7rem; align-items:baseline;
  padding:.55rem 0; border-top:1px solid var(--line);
  font-size:.94rem; color:var(--text-2);
}
.caplist li::before{
  content:""; flex:0 0 auto; width:6px; height:6px; margin-top:.45rem;
  background:var(--accent); transform:rotate(45deg);
}
.section-dark .caplist li{ border-color:var(--d-line); color:var(--d-text-2); }
.section-dark .caplist li::before{ background:var(--d-accent); }

/* ---------- Cards ---------- */

.card-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:700px){ .card-grid--2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:700px){ .card-grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1020px){ .card-grid--3{ grid-template-columns:repeat(3,1fr); } }

.card{
  background:var(--paper);
  padding:clamp(1.6rem,2.6vw,2.25rem);
  display:flex; flex-direction:column; gap:.85rem;
  transition:background .2s ease;
}
.card:hover{ background:var(--paper-2); }
.card__label{
  font:600 .74rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
}
.card__title{ font-size:1.15rem; font-weight:600; letter-spacing:-0.01em; }
.card__body{ color:var(--text-2); font-size:.95rem; line-height:1.65; }

.section-dark .card-grid{ background:var(--d-line); border-color:var(--d-line); }
.section-dark .card{ background:var(--ink); }
.section-dark .card:hover{ background:var(--ink-soft); }
.section-dark .card__label{ color:var(--d-accent); }
.section-dark .card__body{ color:var(--d-text-2); }

/* ---------- BOS feature (home) ---------- */

.bos-feature{ position:relative; overflow:hidden; }
.bos-feature__grid{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:980px){ .bos-feature__grid{ grid-template-columns:5fr 7fr; align-items:start; } }

.bos-mark{
  font-size:clamp(4.2rem, 13vw, 8.5rem);
  font-weight:700; letter-spacing:-0.055em; line-height:.85;
  margin:0;
}
.bos-mark__sub{
  display:block; margin-top:1.1rem;
  font:600 .82rem/1.4 var(--sans); letter-spacing:.15em; text-transform:uppercase;
  color:var(--d-accent);
}

.bos-lines{
  border-left:2px solid var(--d-accent);
  padding-left:clamp(1.25rem,2.5vw,2rem);
  margin-bottom:2.25rem;
}
.bos-lines p{
  font-size:clamp(1.15rem,2.1vw,1.6rem);
  font-weight:500; letter-spacing:-0.02em; line-height:1.35;
  color:var(--d-text);
}
.bos-lines p + p{ margin-top:.3rem; }
.bos-lines p:last-child{ color:var(--d-accent); }

/* ---------- Check BOS First ---------- */

.checkfirst h2{
  font-size:clamp(2.4rem, 8vw, 5.5rem);
  letter-spacing:-0.04em; line-height:.95;
}
.qa-list{ margin-top:clamp(2.5rem,5vw,3.5rem); border-top:1px solid var(--d-line); }
.qa-list li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
  padding:1.1rem 0; border-bottom:1px solid var(--d-line);
}
.qa-list .q{ font-size:clamp(1.05rem,2vw,1.35rem); font-weight:500; letter-spacing:-0.015em; }
.qa-list .a{
  margin-left:auto;
  font:600 .79rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--d-accent);
}

.pronounce{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--d-line);
  display:flex; flex-wrap:wrap; gap:.4rem 2.5rem;
  font:500 .82rem/1.6 var(--sans); letter-spacing:.07em; text-transform:uppercase;
  color:var(--d-text-2);
}
.pronounce strong{ color:var(--d-text); font-weight:600; }

/* ---------- Split panels (BOS Core / Facility Config) ---------- */

.split{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:860px){ .split{ grid-template-columns:1fr 1fr; } }
.split__panel{ background:var(--paper); padding:clamp(1.75rem,3.2vw,2.75rem); }
.split__panel--alt{ background:var(--paper-2); }
/* Core lists single-column, Configuration two-column, so the two panels
   land at roughly equal height instead of leaving one half empty. */
.split__panel .caplist{ grid-template-columns:1fr; }
@media (min-width:560px){ .split__panel--alt .caplist{ grid-template-columns:1fr 1fr; } }

/* ---------- Program card (BOS | One Path) ---------- */

.program-card{
  border:1px solid var(--d-line-2);
  padding:clamp(1.75rem,3.5vw,3rem);
  display:grid; gap:1.75rem;
}
@media (min-width:900px){
  .program-card{ grid-template-columns:1fr auto; align-items:center; gap:3rem; }
}
.program-card__name{
  font-size:clamp(1.5rem,3vw,2.1rem); font-weight:600; letter-spacing:-0.02em;
}
.program-card__name span{ color:var(--d-accent); font-weight:400; }
.program-card__type{
  margin-top:.5rem;
  font:600 .77rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--d-text-2);
}
.badge{
  display:inline-block; margin-bottom:1.1rem;
  font:600 .72rem/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink); background:var(--d-accent);
  padding:.45rem .7rem;
}
.program-card__desc{ margin-top:1.2rem; color:var(--d-text-2); max-width:52ch; line-height:1.65; }
.access-note{
  margin-top:.85rem;
  font:500 .74rem/1.5 var(--sans); letter-spacing:.07em; text-transform:uppercase;
  color:var(--d-text-2);
}

/* ---------- Callout / notice ---------- */

.notice{
  border-left:2px solid var(--accent);
  padding:1.1rem 0 1.1rem 1.3rem;
  color:var(--text-2); font-size:.95rem; line-height:1.65;
  max-width:62ch;
}
.section-dark .notice{ border-color:var(--d-accent); color:var(--d-text-2); }

.boundaries{ margin-top:2.5rem; display:grid; gap:.05rem; max-width:62ch; }
.boundaries li{
  padding:.7rem 0; border-top:1px solid var(--d-line);
  font-size:.95rem; color:var(--d-text-2);
}
.boundaries li strong{ color:var(--d-text); font-weight:600; }

/* ---------- Stat / statement band ---------- */

.statement{ max-width:24ch; font-size:clamp(1.9rem,4.4vw,3.1rem); letter-spacing:-0.03em; line-height:1.08; }

.cta-final{ text-align:left; }
.cta-final h2{ font-size:clamp(2.1rem,6vw,4rem); letter-spacing:-0.035em; line-height:1.02; }
.cta-final h2 span{ display:block; }
.cta-final h2 span:nth-child(2){ color:var(--d-text-2); }
.cta-final h2 span:nth-child(3){ color:var(--d-accent); }
.cta-final .btn-row{ margin-top:clamp(2.25rem,4vw,3rem); }

/* ---------- Two-column editorial ---------- */

.two-col{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
@media (min-width:900px){ .two-col{ grid-template-columns:5fr 7fr; } }
.two-col--even{ grid-template-columns:1fr; }
@media (min-width:900px){ .two-col--even{ grid-template-columns:1fr 1fr; } }

/* ---------- Placeholder block (content the client must supply) ---------- */

.placeholder{
  border:1px dashed var(--line-strong);
  background:var(--paper-2);
  padding:clamp(1.5rem,3vw,2.25rem);
}
.placeholder__tag{
  display:inline-block; margin-bottom:.9rem;
  font:600 .72rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
}
.placeholder p{ color:var(--text-2); font-size:.95rem; line-height:1.65; max-width:60ch; }
.placeholder p + p{ margin-top:.7rem; }

/* ---------- Contact form ---------- */

.contact-grid{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); }
@media (min-width:960px){ .contact-grid{ grid-template-columns:5fr 7fr; } }

/* Honeypot field: present in the DOM for bots, never rendered for people.
   Netlify is told about it via the form's netlify-honeypot attribute. */
.hp-field{ display:none; }

/* The "Direct" details block is omitted entirely when nothing is configured
   (see scripts/build.py -> contact_details). This spaces the following block
   only when something actually precedes it, so the aside never opens with a
   stray top margin. */
.contact-aside > * + .eyebrow{ margin-top:clamp(2rem,4vw,2.75rem); }

.form-notice{
  border:1px solid var(--line-strong);
  background:var(--paper-2);
  padding:1.15rem 1.35rem;
  margin-bottom:2.25rem;
}
.form-notice p{ font-size:.9rem; line-height:1.6; color:var(--text-2); }
.form-notice p:first-child{ color:var(--text); font-weight:600; margin-bottom:.4rem; }

.field{ display:block; margin-bottom:1.5rem; }
.field__label{
  display:block; margin-bottom:.55rem;
  font:600 .76rem/1 var(--sans); letter-spacing:.07em; text-transform:uppercase;
  color:var(--text);
}
.field__label .opt{ color:var(--text-muted); font-weight:500; }
.field input,
.field select,
.field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--text);
  background:var(--paper); border:1px solid var(--line-strong); border-radius:0;
  padding:.85rem .95rem; transition:border-color .16s ease;
  -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:2.75rem;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 1px var(--accent); }
.field textarea{ min-height:170px; resize:vertical; }

.form-status{ margin-top:1.5rem; padding:1rem 1.2rem; border:1px solid var(--line-strong); background:var(--paper-2); font-size:.92rem; line-height:1.6; color:var(--text-2); }
.form-status[hidden]{ display:none; }

.contact-aside dt{
  font:600 .75rem/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:.5rem;
}
.contact-aside dd{ margin:0 0 1.75rem; font-size:1.02rem; color:var(--text); }
.contact-aside dd a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line-strong); }
.contact-aside dd a:hover{ border-color:var(--accent); }
.contact-aside .todo{ color:var(--accent); font:600 .82rem/1.5 var(--sans); letter-spacing:.01em; }

/* ---------- Footer ---------- */

.site-footer{
  background:var(--ink); color:var(--d-text);
  border-top:1px solid var(--d-line);
  padding-block:clamp(3.5rem,6vw,5.5rem) 2.25rem;
}
.footer-top{ display:grid; gap:2.75rem; padding-bottom:3rem; border-bottom:1px solid var(--d-line); }
@media (min-width:820px){ .footer-top{ grid-template-columns:5fr 3fr 4fr; gap:3rem; } }

.footer-wordmark{
  display:inline-block; font-size:1.3rem; font-weight:500; letter-spacing:.02em; line-height:1;
  border:1.5px solid var(--d-text); padding:.35rem .75rem;
}
.footer-tagline{ margin-top:1.1rem; color:var(--d-text-2); font-size:.95rem; max-width:30ch; }

.footer-nav .eyebrow,.footer-product .eyebrow{ color:var(--d-text-2); margin-bottom:1.1rem; }
.footer-nav li + li{ margin-top:.6rem; }
.footer-nav a{ text-decoration:none; color:var(--d-text); font-size:.98rem; border-bottom:1px solid transparent; }
.footer-nav a:hover{ border-color:var(--d-accent); color:var(--d-accent); }

.footer-product-name{ font-size:1rem; font-weight:600; letter-spacing:-0.01em; }
.footer-product-name span{ color:var(--d-accent); font-weight:400; padding-inline:.15rem; }
.footer-product-note{
  margin-top:.5rem;
  font:600 .74rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--d-text-2);
}

.footer-bottom{
  margin-top:2.25rem;
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
  font-size:.8rem; color:var(--d-text-2); line-height:1.6;
}

/* ===========================================================
   MEDIA & LAYOUT VARIETY
   Figures, split compositions, full-bleed bands, overlaps,
   and the BOS browser frame. Colors and type are unchanged —
   these components only introduce layout rhythm.
   =========================================================== */

/* ---------- Figures ----------
   Every image sits in a fixed-ratio frame so swapping a photo in
   never shifts the layout. Placeholders and real photos both crop
   to the same box. */

.fig{
  margin:0;
  position:relative; overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--line);
}
.fig img{ display:block; width:100%; height:100%; object-fit:cover; }
.section-dark .fig{ background:var(--ink-soft); border-color:var(--d-line); }

.fig--portrait  { aspect-ratio:4/5; }
.fig--tall      { aspect-ratio:6/7; }
.fig--landscape { aspect-ratio:4/3; }
.fig--wide      { aspect-ratio:12/5; }
.fig--band      { aspect-ratio:16/9; }
@media (min-width:760px){ .fig--band{ aspect-ratio:12/5; } }
.fig--wideband  { aspect-ratio:16/10; }
@media (min-width:760px){ .fig--wideband{ aspect-ratio:24/11; } }

.fig__caption{
  margin-top:.9rem;
  font-size:.85rem; line-height:1.5; color:var(--text-muted);
  max-width:52ch;
}
.section-dark .fig__caption{ color:var(--d-text-2); }

/* ---------- Split media (image + text) ----------
   Source order decides which side the image lands on at desktop and
   which element comes first when the layout stacks on mobile. */

.split-media{ display:grid; gap:clamp(2.25rem,4.5vw,4rem); align-items:center; }
@media (min-width:900px){
  .split-media{ grid-template-columns:1fr 1fr; }
  .split-media--text-wide{ grid-template-columns:5fr 7fr; }
  .split-media--media-wide{ grid-template-columns:7fr 5fr; }
  .split-media--top{ align-items:start; }
  /* When the text column runs much taller than the image, pin the image so it
     tracks the reader instead of leaving a dead column of white space. */
  .split-media--sticky{ align-items:start; }
  .split-media--sticky .fig{ position:sticky; top:104px; }
}

/* ---------- Hero split ---------- */

.hero-grid{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
@media (min-width:960px){
  .hero-grid{ grid-template-columns:7fr 5fr; }
}
.hero--split{ padding-block:clamp(3rem,6vw,6rem) clamp(3.5rem,7vw,6rem); }
/* The split hero gives the headline a narrower column, so it takes a slightly
   smaller ceiling than the full-width page heroes to stay at three lines. */
.hero--split h1{ font-size:clamp(2.5rem,5.4vw,4.15rem); max-width:15ch; }

/* ---------- Full-bleed band ----------
   Breaks out of the container to run edge to edge. */

.band{ padding:0; }
.band .fig{ border-inline:0; }
.band--inset{ padding-block:0; }

/* ---------- Overlapping composition ----------
   A text panel pulled up over the bottom of a full-width image.
   Used sparingly — twice on the whole site. */

.overlap{ position:relative; }
.overlap__panel{
  position:relative; z-index:1;
  background:var(--paper);
  border:1px solid var(--line);
  padding:clamp(1.75rem,3.5vw,3rem);
  margin-top:clamp(-2.5rem,-4vw,-4.5rem);
}
@media (min-width:900px){
  .overlap__panel{
    max-width:min(760px,64%);
    margin-top:clamp(-4rem,-6vw,-7rem);
  }
  .overlap--right .overlap__panel{ margin-left:auto; }
}
.section-dark .overlap__panel{ background:var(--ink); border-color:var(--d-line-2); }

/* ---------- BOS browser frame ----------
   A neutral window chrome so a real BOS screenshot reads as product
   without inventing any interface detail. */

.device{
  border:1px solid var(--d-line-2);
  background:var(--ink-soft);
}
.device__bar{
  display:flex; align-items:center; gap:.4rem;
  padding:.75rem .95rem;
  border-bottom:1px solid var(--d-line);
}
.device__dot{ width:8px; height:8px; background:var(--d-line-2); flex:0 0 auto; }
.device__url{
  margin-left:.85rem;
  font-size:.74rem; letter-spacing:.02em; color:var(--d-text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.device__screen{ aspect-ratio:16/10; background:var(--ink); overflow:hidden; }
.device__screen img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.device__note{
  margin-top:1rem;
  font-size:.85rem; line-height:1.5; color:var(--d-text-2); max-width:48ch;
}

/* Light-surface variant of the frame. */
.device--light{ border-color:var(--line-strong); background:var(--paper-2); }
.device--light .device__bar{ border-color:var(--line); }
.device--light .device__dot{ background:var(--line-strong); }
.device--light .device__url{ color:var(--text-muted); }
.device--light .device__screen{ background:var(--paper); }
.device--light .device__note{ color:var(--text-muted); }

/* ---------- Statement block over quiet space ---------- */

.statement-block{ max-width:22ch; }
.measure-lg{ max-width:20ch; }

/* Two prose columns — an alternative to the label/body two-col grid. */
.prose-columns{ display:grid; gap:clamp(1.25rem,3vw,2.75rem); }
@media (min-width:820px){ .prose-columns{ grid-template-columns:1fr 1fr; } }
.prose-columns .prose{ max-width:52ch; }
.prose-columns .prose + .prose{ margin-top:0; }
.statement-lg{
  font-size:clamp(1.85rem,3.6vw,2.7rem);
  letter-spacing:-0.03em; line-height:1.08;
  max-width:18ch;
}

/* ---------- Utilities ---------- */
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}