/* the pH studio — one stylesheet for one page.
   Tokens first, then layout, then sections in document order.
   The spectrum gradient is the pH-indicator strip that carries the brand. */

:root{
  --paper:#FAF9F5; --paper-alt:#F5F4EF; --field:#FFFFFF; --placeholder:#EDECE6;
  --ink:#1A1915; --ink-soft:#46443E; --muted:#5C5A53; --muted-2:#67655E;
  --faint:#8A887F; --faint-2:#A2A096;
  --line:#E6E4DC; --line-2:#DDDBD2; --line-3:#EBE9E2;
  --accent:#1A1915; --on-accent:#FAF9F5;
  --link-hover:#3B7F86; --violet:#4E4A87; --rust:#B8452F; --olive:#8FA34B; --navy:#34618F;
  --spectrum: linear-gradient(90deg, #B8452F, #D07A3A, #DDB94A, #8FA34B, #4E8C63, #3B7F86, #34618F, #4E4A87);
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:'Karla', 'Helvetica Neue', Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --section-y:116px;
}
*, ::before, ::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
section[id]{ scroll-margin-top:var(--anchor-offset, 98px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, ::before, ::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:clip; }
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--link-hover); }
img{ max-width:100%; height:auto; display:block; }
input, textarea, button{ font-family:inherit; }
.wrap{ width:100%; max-width:1340px; margin:0 auto; padding:0 34px; }
.section{ padding-top:calc(var(--section-y) - 26px); padding-bottom:var(--section-y); }
.band{ background:var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.g2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:80px; }
.g2n{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:64px; }
.g3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:56px; }
.stack{ display:flex; flex-direction:column; }
.rule{ width:100%; height:3px; border-radius:2px; background:var(--spectrum); }
.head-mark{ display:flex; flex-direction:column; align-items:stretch; gap:11px; width:fit-content; max-width:100%; }
.head-mark__rule{ display:block; height:2.5px; width:100%; border-radius:2px; background:var(--spectrum); }
.head-mark .eyebrow + .head-mark__rule{ margin-top:-2px; }
.rule--band{ height:5px; border-radius:0; }
.section-end{ height:5px; width:100%; background:var(--spectrum); border-radius:0; }
.eyebrow{ font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--violet); margin:0; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; color:var(--ink); margin:0; }
h1{ font-size:clamp(38px, 4.9vw, 64px); line-height:1.04; letter-spacing:-0.022em; max-width:19ch; }
h1 em{ font-style:italic; color:var(--violet); }
h2{ font-size:clamp(32px, 4vw, 50px); line-height:1.08; letter-spacing:-0.014em; }
h3{ font-size:27px; line-height:1.18; }
.lede{ margin:0; font-size:19px; line-height:1.6; color:var(--muted); max-width:none; }
.hero .lede{ white-space:nowrap; font-size:clamp(15px, 1.42vw, 19px); }
.prose{ margin:0; font-size:18px; line-height:1.7; color:var(--ink-soft); }
.body{ margin:0; font-size:17px; line-height:1.62; color:var(--muted); }
.section-head{ display:flex; flex-direction:column; gap:16px; margin-bottom:64px; }
.btn{ display:inline-block; padding:16px 30px; border:0; border-radius:2px; background:var(--accent); color:var(--on-accent); font-size:15px; font-weight:500; letter-spacing:0.01em; cursor:pointer; }
.btn:hover{ color:var(--on-accent); opacity:0.88; }
.btn--sm{ padding:13px 24px; font-size:14px; }
.btn--quiet{ background:none; color:var(--muted); padding:0 0 3px; border-bottom:1px solid #C9C1B4; border-radius:0; }
.btn--quiet:hover{ opacity:1; }



section{ position:relative; isolation:isolate; }

/* ---------- NAV ---------- */
.site-nav{ border-bottom:1px solid var(--line); position:sticky; top:0; z-index:900; background:var(--paper); }
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:26px; padding-bottom:26px; gap:24px; }
.brand{ display:inline-flex; flex-direction:column; align-items:stretch; gap:7px; flex-shrink:0; }
.brand__words{
  font-family:var(--serif); font-weight:400; font-size:30px; line-height:1;
  letter-spacing:-0.015em; color:var(--ink); white-space:nowrap;
}
.brand__rule{
  display:block; height:2.5px; width:100%; border-radius:2px;
  background:var(--spectrum);
}
.brand--lg .brand__words{ font-size:38px; }
.brand--lg .brand__rule{ height:3px; }
.nav-links{ display:flex; gap:10px; align-items:center; }
.nav-links a{ padding:9px 15px; border:1px solid var(--line-2); border-radius:2px; background:var(--field); box-shadow:0 1px 0 rgba(26,25,21,0.043); font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; transition:color .15s, border-color .15s, background-color .15s; }
.nav-links a:hover{ color:var(--ink); border-color:var(--faint-2); background:var(--paper-alt); }
.site-nav .btn{ flex-shrink:0; white-space:nowrap; }
.nav-links .mobile-cta{ display:none; }

.menu-btn{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:var(--field); border:1px solid var(--line-2); border-radius:2px; cursor:pointer; width:44px; height:44px; flex-shrink:0; z-index:20; position:relative; }
.menu-btn span{ width:20px; height:1.5px; background:var(--ink); display:block; transition:transform .25s ease, opacity .25s ease; }
body.nav-open .menu-btn span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.nav-open .menu-btn span:nth-child(2){ opacity:0; }
body.nav-open .menu-btn span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.nav-overlay{ display:none; position:fixed; inset:0; background:rgba(26,25,21,0.35); z-index:800; opacity:0; pointer-events:none; transition:opacity .3s ease; }
body.nav-open .nav-overlay{ display:block; opacity:1; pointer-events:auto; }

/* ---------- HERO ---------- */
.hero .wrap{ padding-top:52px; padding-bottom:44px; }
.hero__inner{ display:flex; flex-direction:column; gap:26px; }
.hero__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:60px; flex-wrap:wrap; }
.hero__cta{ display:flex; gap:26px; align-items:center; flex-shrink:0; }

.hero__clients{
  margin-top:4px; padding-top:22px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 32px;
}

.rule--band-wrap{ height:5px; }

/* ---------- CLIENTS ---------- */
.clients{ border-bottom:1px solid var(--line); background:var(--paper-alt); }
.clients .wrap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 32px; padding-top:28px; padding-bottom:28px; }
.clients__label{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); }
.clients__list{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 26px; margin:0; padding:0; list-style:none; }
.client{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }
.client + .client::before{ content:""; display:inline-block; width:1px; height:11px; margin-right:26px; background:var(--line-2); vertical-align:-1px; }

/* ---------- SERVICES — three distinct pillars ---------- */
.g3{ gap:28px; }
.service{
  display:flex; flex-direction:column; gap:16px;
  background:var(--paper-alt);
  border:1px solid var(--line-2);
  border-radius:3px;
  border-top:none;
  padding:30px 28px 32px;
  position:relative;
  box-shadow:0 1px 2px rgba(26,25,21,0.03), 0 10px 24px -18px rgba(26,25,21,0.22);
  transition:box-shadow .25s ease, transform .25s ease, background-color .25s ease;
}
.service::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:3px 3px 0 0;
}
.service--1::before{ background:var(--rust); }
.service--2::before{ background:var(--olive); }
.service--3::before{ background:var(--navy); }
.service:hover{
  background:#fff;
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(26,25,21,0.04), 0 18px 34px -20px rgba(26,25,21,0.3);
}
.service__num{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em; margin:0; }
.service__num--1{ color:var(--rust); }
.service__num--2{ color:var(--olive); }
.service__num--3{ color:var(--navy); }
.service h3{ font-size:25px; }
.service p{ margin:0; font-size:16px; line-height:1.65; color:var(--muted); }
.service ul{ display:flex; flex-direction:column; gap:9px; margin:0; padding:8px 0 0; list-style:none; border-top:1px solid var(--line-3); margin-top:4px; }
.service ul li{ font-size:14px; line-height:1.55; color:var(--muted-2); padding-left:14px; position:relative; }
.service ul li::before{ content:"—"; position:absolute; left:0; color:var(--faint-2); }

/* ---------- TESTIMONIALS ---------- */
#testimonials .section-head{ margin-bottom:36px; }
.quote-grid{ gap:28px; }
.quote-card{
  display:flex; flex-direction:column; gap:20px;
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:3px;
  border-top:none;
  padding:30px 22px 28px;
  position:relative;
  box-shadow:0 1px 2px rgba(26,25,21,0.03), 0 10px 24px -18px rgba(26,25,21,0.22);
  transition:box-shadow .25s ease, transform .25s ease, background-color .25s ease;
}
.quote-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:3px 3px 0 0;
}
.quote-card--1::before{ background:var(--rust); }
.quote-card--2::before{ background:var(--olive); }
.quote-card--3::before{ background:var(--navy); }
.quote-card:hover{
  background:#fff;
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(26,25,21,0.04), 0 18px 34px -20px rgba(26,25,21,0.3);
}
.quote-card blockquote{ margin:0; }
.quote-card blockquote p{ margin:0; font-family:var(--sans); font-style:normal; font-weight:400; font-size:16px; line-height:1.62; color:var(--ink-soft); }
.quote-ellipsis{ color:var(--faint-2); }
.quote-card figcaption{ display:flex; flex-direction:column; gap:4px; padding-top:16px; border-top:1px solid var(--line-3); margin-top:auto; }
.quote-name{ font-family:var(--sans); font-size:15.5px; font-weight:700; color:var(--ink); }
.quote-role{ font-family:var(--sans); font-size:12.5px; line-height:1.5; letter-spacing:-0.005em; color:var(--muted); white-space:nowrap; }
.quote-company{ font-family:var(--sans); font-size:12.5px; line-height:1.5; letter-spacing:-0.005em; color:var(--muted); white-space:nowrap; }
.quote-source{ margin-top:40px; font-size:14px; color:var(--muted); text-align:center; }
.quote-source a{ border-bottom:1px solid var(--line-2); }
.quote-source a:hover{ color:var(--violet); border-bottom-color:var(--violet); }

/* ---------- SPECIALTY ---------- */
.formats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:56px; margin:0; padding:0; }
.format{ display:flex; flex-direction:column; gap:12px; }
.format dt{ font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); margin:0; }
.format dd{ margin:0; font-size:17px; line-height:1.6; color:var(--ink-soft); }
.pull{ margin:44px 0 0; font-family:var(--serif); font-size:clamp(18px, 2vw, 26px); line-height:1.3; letter-spacing:-0.01em; color:var(--ink); max-width:none; white-space:nowrap; }
.pull__em{ font-style:italic; color:var(--violet); }

/* ---------- WORK ---------- */
.work-group + .work-group{ margin-top:72px; }
.work-group__head{
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  padding-bottom:0; margin-bottom:30px;
}
.work-group__title{
  font-family:var(--serif); font-size:30px; font-weight:400; letter-spacing:-0.012em;
  text-transform:none; color:var(--ink); margin:0; line-height:1.1;
}
.work-group__note{ margin:0; font-size:15px; line-height:1.6; color:var(--muted); }

/* bench: 4 across, each with a description */
.bench-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px; margin:0; padding:0; list-style:none; }
.bench-item{ display:flex; flex-direction:column; gap:9px; padding-top:18px; position:relative; }
.bench-item::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; border-radius:2px;
  background:var(--spectrum); background-size:400% 100%;
  opacity:0.85; transition:opacity .25s ease;
}
.bench-item:nth-child(1)::before{ background-position:0% 50%; }
.bench-item:nth-child(2)::before{ background-position:33% 50%; }
.bench-item:nth-child(3)::before{ background-position:66% 50%; }
.bench-item:nth-child(4)::before{ background-position:100% 50%; }
.bench-item:hover::before{ opacity:1; }
.bench-item__brand{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
}
.bench-item__title{ font-family:var(--serif); font-size:22px; line-height:1.15; color:var(--ink); }
.bench-item__desc{ font-size:14px; line-height:1.6; color:var(--muted-2); }

/* led: compact even row, no descriptions needed */
.led-grid{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:26px; margin:0; padding:0; list-style:none; }
.led-item{ display:flex; flex-direction:column; gap:8px; padding-top:18px; position:relative; }
.led-item::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; border-radius:2px;
  background:var(--spectrum); background-size:500% 100%;
  opacity:0.85; transition:opacity .25s ease;
}
.led-item:nth-child(1)::before{ background-position:0% 50%; }
.led-item:nth-child(2)::before{ background-position:25% 50%; }
.led-item:nth-child(3)::before{ background-position:50% 50%; }
.led-item:nth-child(4)::before{ background-position:75% 50%; }
.led-item:nth-child(5)::before{ background-position:100% 50%; }
.led-item:hover::before{ opacity:1; }
.led-item__brand{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
}
.led-item__title{ font-family:var(--serif); font-size:20px; font-weight:400; line-height:1.15; color:var(--ink); }
.led-item__desc{ font-size:14px; line-height:1.6; color:var(--muted-2); }

.footnotes{ margin-top:76px; padding-top:44px; border-top:1px solid var(--line-2); }
.footnote{ display:flex; flex-direction:column; gap:12px; }
.footnote__label{ font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); }
.footnote__text{ font-size:15px; line-height:1.68; color:var(--muted-2); }

/* ---------- FOUNDER — photo now blended into the palette ---------- */
.founder{ align-items:start; }
.founder__photo-wrap{ position:relative; width:100%; max-width:400px; margin-top:28px; }
.founder__photo-wrap::before{
  content:"";
  position:absolute; inset:-18px;
  background:
    radial-gradient(ellipse 70% 60% at 25% 20%, rgba(184,69,47,0.10), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 85%, rgba(78,74,135,0.12), transparent 60%),
    var(--paper-alt);
  border-radius:8px;
  z-index:0;
}
.founder__portrait{
  position:relative; z-index:1;
  width:100%; aspect-ratio:4/5; border:1px solid var(--line-2); border-radius:2px;
  background:var(--placeholder); object-fit:cover;
  filter:sepia(12%) saturate(82%) contrast(0.97) brightness(1.02);
  box-shadow:0 20px 40px -24px rgba(26,25,21,0.35);
}
.founder__bio{ display:flex; flex-direction:column; gap:19px; }
.founder__bio .prose{ font-size:16px; line-height:1.72; }
.brand-inline{
  display:inline-flex; flex-direction:column; align-items:stretch;
  gap:2px; vertical-align:baseline; color:var(--ink);
  transition:color .2s ease;
}
.brand-inline__words{
  font-family:var(--serif); font-size:1.14em; line-height:1;
  letter-spacing:-0.015em; white-space:nowrap;
}
.brand-inline__rule{
  display:block; height:2px; width:100%; border-radius:2px;
  background:var(--spectrum); opacity:0.85; transition:opacity .2s ease;
}
.brand-inline:hover{ color:var(--violet); }
.brand-inline:hover .brand-inline__rule{ opacity:1; }
.li-link{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  margin-top:6px; padding:11px 18px;
  border:1px solid var(--line-2); border-radius:2px; background:var(--field);
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.li-link:hover{ border-color:var(--violet); color:var(--violet); background:#fff; }
.li-link svg{ flex-shrink:0; }
.site-footer__meta a{ color:var(--ink-soft); border-bottom:1px solid var(--line-2); }
.site-footer__meta a:hover{ color:var(--violet); border-bottom-color:var(--violet); }
#about h2{ font-size:clamp(28px, 3.2vw, 40px); }

/* ---------- FAQ — now a real accordion ---------- */
.faq-col{ display:flex; flex-direction:column; gap:1px; background:var(--line-2); }
.faq-item{ background:var(--paper-alt); }
#faq.band .faq-col{ background:var(--line-2); }
.faq-q{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; width:100%; text-align:left; background:none; border:0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 22px; }
.faq-q h3{ font-family:var(--sans); font-size:16px; font-weight:500; line-height:1.4; color:var(--ink); }
.faq-q .plus{ font-family:var(--mono); font-size:18px; color:var(--faint); flex-shrink:0; transition:transform .3s ease; line-height:1; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); color:var(--violet); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a p{ margin:0; padding:0 22px 22px; font-size:15px; line-height:1.65; color:var(--muted-2); max-width:56ch; }

/* ---------- CONTACT ---------- */
.contact-form{ display:flex; flex-direction:column; gap:22px; }
.formG{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); }
.field input, .field textarea{ width:100%; padding:0 14px; border:1px solid var(--line-2); border-radius:2px; background:var(--field); font-size:15px; color:var(--ink); }
.field input{ height:48px; }
.field textarea{ padding:13px 14px; line-height:1.6; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--violet); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-foot{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding-top:4px; }
.form-note{ font-size:13px; color:var(--faint); line-height:1.5; }
.form-status{ font-size:14px; line-height:1.5; margin:0; }
.form-status[data-state="ok"]{ color:var(--olive); }

/* ---------- FOOTER ---------- */
.site-footer{ border-top:1px solid var(--line); background:var(--paper-alt); }
.site-footer .wrap{ padding-top:64px; padding-bottom:56px; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; }
.site-footer__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; flex-grow:1; }
.site-footer__meta{ display:flex; flex-direction:column; gap:6px; text-align:right; font-size:13px; color:var(--faint); }

/* ---------- AVAILABILITY STATUS ---------- */
.avail-status{
  display:inline-flex; align-items:center; gap:11px;
  margin-top:30px; padding:13px 20px;
  border-radius:7px; background:rgba(78,140,99,0.14);
  box-shadow:inset 0 0 0 1px rgba(78,140,99,0.36);
  font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:0.002em;
  color:#2E6B49; width:fit-content;
}
.avail-status__dot{
  position:relative; width:9px; height:9px; border-radius:50%; background:#4E8C63; flex-shrink:0;
}
.avail-status__dot::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid #4E8C63; opacity:0.55;
  animation:availPulse 2.6s ease-out infinite;
}
@keyframes availPulse{
  0%{ transform:scale(0.6); opacity:0.6; }
  75%{ transform:scale(1.35); opacity:0; }
  100%{ transform:scale(1.35); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .avail-status__dot::after{ animation:none; opacity:0; }
}
.contact-alt{ margin:22px 0 0; font-size:15px; line-height:1.6; color:var(--muted); }
.contact-alt a{ border-bottom:1px solid var(--line-2); }
.contact-alt a:hover{ color:var(--violet); border-bottom-color:var(--violet); }

@media (max-width:1080px){
  .bench-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px; }
  .led-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
}

@media (max-width:900px){
  .wrap{ padding:0 22px; }
  .g2, .g2n, .g3, .formats{ grid-template-columns:1fr; gap:40px; }
  .hero__foot{ align-items:flex-start; }
  section#specialty .g2{ gap:44px; }

  .nav-links{
    position:fixed; top:0; right:0; height:100dvh; width:80%; max-width:320px;
    background:var(--paper-alt); flex-direction:column; align-items:stretch;
    padding:100px 26px 40px; gap:10px;
    transform:translateX(100%); transition:transform .35s ease, visibility .35s;
    visibility:hidden; pointer-events:none; overflow-y:auto;
    box-shadow:-16px 0 40px rgba(26,25,21,0.18);
    z-index:10; border-left:1px solid var(--line);
  }
  .nav-links a{ text-align:left; padding:14px 16px; font-size:13px; }
  body.nav-open .nav-links{ transform:translateX(0); visibility:visible; pointer-events:auto; }
  .site-nav .btn{ display:none; }
  .nav-links .mobile-cta{ display:block; margin-top:10px; background:var(--accent); color:var(--on-accent); text-align:center; border-color:var(--accent); }
  .menu-btn{ display:flex; }
  .brand__words{ font-size:25px; }
  .site-nav .wrap{ padding-top:18px; padding-bottom:18px; }
  .section{ padding-top:54px; padding-bottom:72px; }
  section[id]{ scroll-margin-top:var(--anchor-offset, 78px); }
  .hero .wrap{ padding-top:44px; padding-bottom:44px; }
  .hero__inner{ gap:28px; }
  .hero__cta{ flex-direction:column; align-items:flex-start; gap:18px; width:100%; }
  .hero__cta .btn{ width:100%; text-align:center; }
  .hero__clients{ padding-top:24px; margin-top:6px; gap:10px 22px; }
  .pull{ white-space:normal; font-size:19px; }
  .hero .lede{ white-space:normal; font-size:16px; }
  .g3{ gap:20px; }
  .service{ padding:26px 22px 28px; }
  .bench-grid{ grid-template-columns:1fr 1fr; gap:26px; }
  .led-grid{ grid-template-columns:1fr 1fr; gap:22px; }
  .work-group + .work-group{ margin-top:52px; }
  /* Full-width cards on one column: the attribution has room to wrap. */
  .quote-role, .quote-company{ white-space:normal; }
}

/* ---------- shipped-site additions (not in the design file) ---------- */

/* Keyboard-only escape hatch past the nav. */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--on-accent);
  padding:12px 20px; border-radius:2px; font-size:14px;
}
.skip-link:focus{ left:12px; top:12px; color:var(--on-accent); }

/* 404.html uses the short spectrum rule. */
.rule--short{ width:96px; }

/* Six pills plus the CTA overrun the bar between the 900px drawer breakpoint
   and roughly 1100px — at 1024px the CTA is pushed past the wrap padding.
   Shave the pills rather than let anything spill. Bounded below 901px so it
   cannot leak into the mobile drawer's own type. */
@media (min-width:901px) and (max-width:1100px){
  .nav-links{ gap:6px; }
  .nav-links a{ padding:8px 11px; font-size:10px; letter-spacing:0.1em; }
}

/* Web3Forms can fail after a 200; the form says so in this colour. */
.form-status[data-state="error"]{ color:var(--rust); }