/* ==========================================================================
   Summit Intake Systems — styles.css
   15_SITE_2026-09-14 · one-page rebuild · SKELETON
   Brand of record: 03_SIS/04_MARKETING/brand/BRAND_CANON_v1_2026-09-14.md
     Charcoal #111111 · Glacier Cyan #00E7EF (dark grounds only) · Glacier Teal #0AA4AC
   Dark-only. No light bands. Fonts ruled 2026-09-15: Archivo / IBM Plex Sans / IBM Plex Mono.
   ========================================================================== */
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/ibm-plex-sans-var.woff2") format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --ink-000:#111111;--ink-050:#191919;--ink-100:#202020;--ink-150:#282828;--ink-200:#313131;--ink-300:#3d3d3d;--ink-400:#4f4f4f;--ink-500:#6b6b6b;
  --brand:#00e7ef;--brand-hover:#6ff3f8;--brand-dim:rgba(0,231,239,.15);--brand-glow:rgba(0,231,239,.25);--brand-teal:#0aa4ac;
  --text-1:#f2f2f2;--text-2:#a6a6a6;--text-3:#8f8f8f;
  --font:"IBM Plex Sans",system-ui,sans-serif;--disp:"Archivo","Helvetica Neue",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --fs-xs:.8125rem;--fs-sm:.9375rem;--fs-base:1.0625rem;--fs-md:1.1875rem;
  --fs-h1:clamp(3.5rem,9vw + .5rem,6.5rem);--fs-h2:clamp(1.85rem,2.9vw + .5rem,2.8rem);--fs-h3:1.25rem;
  --r:8px;--r-lg:16px;--r-pill:999px;
  --section-y:clamp(3.5rem,7vw,6.25rem);
  --shadow-lg:0 18px 50px -24px rgba(0,0,0,.6);
  --focus:#00e7ef;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink-000);color:var(--text-1);font-family:var(--font);font-size:var(--fs-base);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--text-1);text-decoration:none}
a:hover{color:var(--brand)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
h1,h2,h3{font-family:var(--disp);margin:0;letter-spacing:-.01em;line-height:1.08}
h1{font-size:var(--fs-h1);font-weight:800;line-height:.98}
/* 2026-09-22: home big line is a <p class="hero__title">; the keyword subhead is the real <h1>. Same look as before. */
.hero__title{font-family:var(--disp);margin:0;letter-spacing:-.01em;font-size:var(--fs-h1);font-weight:800;line-height:.98}
h1.hero__kicker{line-height:inherit}
h2{font-size:var(--fs-h2);font-weight:800}
h3{font-size:var(--fs-h3);font-weight:800}
p{margin:0}
.wrap{max-width:75rem;margin:0 auto;padding:0 1.25rem}
@media(min-width:48em){.wrap{padding:0 2.5rem}}
.section{padding:var(--section-y) 0}
/* sticky nav is 4.75rem tall — keep anchored content from landing under it */
section[id],#intake{scroll-margin-top:5.5rem}
.section--raised{background:var(--ink-050);border-top:1px solid var(--ink-150);border-bottom:1px solid var(--ink-150)}
.glow{background:radial-gradient(60% 50% at 70% 30%,rgba(0,231,239,.12),rgba(17,17,17,0) 70%)}
.eyebrow{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--brand)}
.lede{font-size:var(--fs-md);color:var(--text-2);max-width:46rem}
.stack{display:flex;flex-direction:column;gap:.875rem}
.head{display:flex;flex-direction:column;gap:.875rem;max-width:46rem;margin-bottom:2.5rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.75rem 2rem;border-radius:var(--r-pill);font-family:var(--disp);font-weight:700;font-size:var(--fs-sm);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--ink-000)}
.btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--ink-000);box-shadow:0 10px 30px -6px rgba(0,231,239,.28);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--ink-400);color:var(--text-1)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.btn-ink{background:var(--ink-000);border-color:var(--ink-000);color:var(--text-1)}
.btn-ink:hover{background:var(--ink-150);color:var(--text-1)}
.btn-lg{min-height:3.5rem;padding:.875rem 2.25rem;font-size:var(--fs-base)}
.btn-block{width:100%}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(17,17,17,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--ink-150)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:4.75rem;gap:1.5rem}
.nav__logo{height:34px;width:auto}
.nav__list{display:none;align-items:center;gap:2rem;font-family:var(--disp);font-weight:700;font-size:var(--fs-sm)}
.nav__list a span{color:var(--brand)}
@media(min-width:48em){.nav__list{display:flex}}
.nav .btn{min-height:2.75rem;padding:.625rem 1.5rem}

/* hero — full-bleed photograph, copy on the shaded left */
.hero{position:relative;overflow:hidden;min-height:clamp(560px,88vh,900px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3rem,8vw,5.5rem) 0 clamp(3rem,6vw,4.5rem)}
.hero__bg{position:absolute;inset:0;display:block}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* 100% keeps the billboard whole at 16:9 and 16:10 — 70% cut "WEBSITES" mid-word */
  object-position:100% 40%}
.hero__shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(17,17,17,.92) 0%,rgba(17,17,17,.78) 45%,rgba(17,17,17,.35) 100%),
             linear-gradient(180deg,rgba(17,17,17,.15) 0%,rgba(17,17,17,0) 40%,#111111 100%)}
.hero .wrap{width:100%}
.hero__grid{position:relative;z-index:1;display:block}
.hero__copy{display:flex;flex-direction:column;gap:1.75rem;max-width:40rem}
/* "Websites." reads as a lit sign, not a blur: a tight inner core so the letter
   edges stay hard, then two wide low-alpha halos for the bleed. */
.glow-word{color:var(--text-1);
  text-shadow:0 0 6px rgba(0,231,239,.50),0 0 18px rgba(0,231,239,.34),0 0 48px rgba(0,231,239,.18);
  animation:glowPulse 4s ease-in-out infinite alternate}
@keyframes glowPulse{
  from{text-shadow:0 0 5px rgba(0,231,239,.35),0 0 14px rgba(0,231,239,.24),0 0 38px rgba(0,231,239,.13)}
  to{text-shadow:0 0 8px rgba(0,231,239,.65),0 0 23px rgba(0,231,239,.44),0 0 60px rgba(0,231,239,.23)}}
@media(prefers-reduced-motion:reduce){
  .glow-word{animation:none;
    text-shadow:0 0 6px rgba(0,231,239,.50),0 0 18px rgba(0,231,239,.34),0 0 48px rgba(0,231,239,.18)}}

.hero__price{font-family:var(--disp);font-weight:700;font-size:clamp(1.375rem,2.2vw + .5rem,1.75rem);line-height:1.25}
.hero__price span{color:var(--brand)}
.hero__body{font-size:var(--fs-md);color:var(--text-2);max-width:32rem}
.hero__proof span,.hero__body{text-shadow:0 1px 12px rgba(17,17,17,.75)}
.hero__ctas{display:flex;gap:.875rem;align-items:center;flex-wrap:wrap}
.hero__proof{display:flex;gap:1.5rem;flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3)}
.video{position:relative;border-radius:var(--r-lg);border:1px solid var(--ink-300);background:linear-gradient(180deg,var(--ink-100),var(--ink-050));overflow:hidden;box-shadow:var(--shadow-lg)}
.video--hero{aspect-ratio:16/10}
.video--vsl{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.875rem}
.video__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,231,239,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,231,239,.06) 1px,transparent 1px);background-size:32px 32px}
.video__dots{position:absolute;left:20px;top:16px;display:flex;gap:6px}
.video__dots span{width:10px;height:10px;border-radius:50%;background:var(--ink-300)}
.video__term{position:absolute;left:20px;top:44px;right:20px;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--ink-500)}
.video__term .c{color:var(--brand)}.video__term .m{color:var(--text-3)}.video__term .w{color:var(--text-1)}
.video__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.play{width:76px;height:76px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 12px var(--brand-dim);cursor:pointer}
.play svg{fill:var(--ink-000);margin-left:4px}
.video__pip{position:absolute;right:20px;bottom:16px;width:120px;height:78px;border-radius:var(--r);border:1px solid var(--ink-400);background:var(--ink-150);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--text-3)}
.video__cap{font-family:var(--mono);font-size:12px;color:var(--ink-500);text-align:center;margin-top:.75rem}
.video__caption{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--text-3);text-align:center}
.placeholder{font-family:var(--mono);font-size:12px;color:var(--ink-500)}

/* the work */
.pills{display:flex;flex-wrap:wrap;gap:.625rem;margin-bottom:2rem}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:.625rem 1.125rem;border-radius:var(--r-pill);border:1px solid var(--ink-300);background:transparent;color:var(--text-2);font-family:var(--disp);font-weight:700;font-size:var(--fs-sm);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.pill:hover{border-color:var(--brand);color:var(--text-1)}
.pill[aria-selected="true"]{border-color:var(--brand);background:var(--brand-dim);color:var(--text-1)}
.card{background:var(--ink-050);border:1px solid var(--ink-300);border-radius:var(--r-lg)}
/* all three panels ship in the HTML; JS toggles [hidden] on the two that aren't selected.
   .work sets display:grid, which beats the UA [hidden] rule — so re-assert it here. */
.work-list{display:flex;flex-direction:column;gap:1.25rem}
.work[hidden]{display:none}
.work{display:grid;overflow:hidden}
@media(min-width:62em){.work{grid-template-columns:1.15fr .85fr}}
.work__shot{padding:1.25rem;background:var(--ink-100);border-bottom:1px solid var(--ink-300)}
@media(min-width:62em){.work__shot{border-bottom:0;border-right:1px solid var(--ink-300)}}
.shot{border-radius:12px;border:1px solid var(--ink-300);overflow:hidden;background:var(--ink-100);aspect-ratio:16/10}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.shot--sample{display:flex;align-items:center;justify-content:center;background-image:linear-gradient(rgba(0,231,239,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,231,239,.05) 1px,transparent 1px);background-size:32px 32px}
.work__copy{padding:2.25rem;display:flex;flex-direction:column;gap:1.125rem;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:.375rem .75rem;border-radius:var(--r-pill);border:1px solid var(--ink-300);color:var(--text-2)}
.chip--live{border-color:var(--brand-teal);color:var(--brand)}
.work__link{font-family:var(--mono);font-size:.875rem;color:var(--brand)}
.work__copy h3{font-size:1.75rem}
.work__copy p{color:var(--text-2)}

/* six things */
.grid-3{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:40em){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:62em){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{padding:1.75rem;display:flex;flex-direction:column;gap:.875rem}
.tile p{color:var(--text-2);font-size:1rem}
.icon{width:24px;height:24px;stroke:var(--brand);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* vsl */
.vsl{display:grid;gap:2.5rem;align-items:center}
@media(min-width:62em){.vsl{grid-template-columns:.9fr 1.1fr;gap:3.5rem}}
.vsl__note{color:var(--text-3);font-size:1rem}

/* steps */
.steps{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:48em){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* padding-left/right would push step text out of alignment with every other
   section's left edge, and detach the rule from the copy it belongs to */
.step{display:flex;flex-direction:column;gap:.75rem;padding:1.375rem 0 0;border-top:2px solid var(--brand)}
.step--later{border-top-color:var(--ink-300)}
.step__num{font-family:var(--mono);font-size:var(--fs-xs);color:var(--brand)}
.step--later .step__num{color:var(--text-2)}
.step h3{font-size:1.375rem}
.step p{color:var(--text-2);font-size:1rem}

/* pricing + form */
.offer{display:grid;gap:2rem;align-items:start}
@media(min-width:62em){.offer{grid-template-columns:1fr 1fr;gap:2.5rem}}
.price{padding:2.5rem;display:flex;flex-direction:column;gap:1.5rem}
.price__row{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
.price__amount{font-family:var(--disp);font-weight:800;font-size:4.5rem;line-height:1}
.price__unit{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-2)}
.checks{display:flex;flex-direction:column;gap:.625rem;font-size:1rem}
.checks div{display:flex;gap:.75rem;align-items:flex-start}
.checks .icon{width:20px;height:20px;flex:none;margin-top:3px}
.founding{padding:1rem 1.125rem;border-radius:var(--r);background:rgba(0,231,239,.08);border:1px solid rgba(0,231,239,.25);font-size:var(--fs-sm)}
.form{padding:2.5rem;display:flex;flex-direction:column;gap:1.375rem;border-color:var(--brand-teal)}
.form h2{font-size:2rem}
.form__grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:40em){.form__grid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.375rem}
.field label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.field input,.field select{height:3rem;background:var(--ink-050);border:1px solid var(--ink-300);border-radius:var(--r);color:var(--text-1);padding:0 .875rem;font-family:var(--font);font-size:1rem;width:100%}
.field input::placeholder{color:var(--ink-500)}
.field input:focus,.field select:focus{border-color:var(--brand);outline:none}
.form__fine{font-family:var(--mono);font-size:var(--fs-xs);line-height:1.6;color:var(--text-3)}

/* building state */
.building{display:none;flex-direction:column;gap:1.5rem}
.form[data-state="building"] .form__body{display:none}
.form[data-state="building"] .building{display:flex}
.building__clock{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.building__time{font-family:var(--disp);font-weight:800;font-size:3.5rem;line-height:1;color:var(--brand)}
.progress{display:flex;flex-direction:column;gap:.875rem}
.progress div{display:flex;align-items:center;gap:.875rem;color:var(--text-3)}
.progress .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink-300);flex:none;display:flex;align-items:center;justify-content:center}
.progress .is-done{color:var(--text-1)}.progress .is-done .dot{border-color:var(--brand);background:var(--brand)}
.progress .is-now{color:var(--text-1)}.progress .is-now .dot{border-color:var(--brand);box-shadow:0 0 0 6px var(--brand-dim)}
.progress .is-now .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand)}

/* faq */
.faq{max-width:56rem}
.faq details{border-top:1px solid var(--ink-300);padding:1.25rem 0}
.faq details:last-child{border-bottom:1px solid var(--ink-300)}
.faq summary{font-family:var(--disp);font-weight:700;font-size:var(--fs-md);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--brand);font-size:1.25rem}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:.75rem;color:var(--text-2);font-size:1rem}

/* closer */
.closer{background:var(--brand);color:var(--ink-000);padding:clamp(3rem,6vw,5rem) 0}
.closer .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.closer h2{color:var(--ink-000);font-size:clamp(1.75rem,3vw + .5rem,2.5rem)}
.closer p{color:var(--ink-000);opacity:.8}

/* footer */
.footer{padding:3.5rem 0;border-top:1px solid var(--ink-150)}
.footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:2.5rem;flex-wrap:wrap}
.footer__brand{display:flex;flex-direction:column;gap:.875rem;max-width:22rem}
/* column flex defaults to align-items:stretch, which blows width:auto up to the
   full column and distorts the logo — pin it back to its intrinsic ratio */
.footer__brand img{align-self:flex-start;flex:none}
.footer__tag{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--brand)}
.footer__brand p{font-size:.875rem;color:var(--text-3)}
.footer__cols{display:flex;gap:4rem;flex-wrap:wrap;font-size:var(--fs-sm)}
.footer__col{display:flex;flex-direction:column;gap:.625rem}
.footer__h{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500)}

/* legal pages */
.legal h1{margin-bottom:1.25rem}
.legal h2{margin:2.75rem 0 1rem}
.legal h3{margin:2rem 0 .75rem;font-size:1.375rem}
.legal p{margin:0 0 1rem;color:var(--text-2)}
.legal p:last-child{margin-bottom:0}
.legal ul,.legal ol{margin:0 0 1.25rem;padding-left:1.25rem;color:var(--text-2);display:flex;flex-direction:column;gap:.5rem}
.legal a{color:var(--brand);text-decoration:underline;text-decoration-color:var(--brand-dim)}
.legal a:hover{color:var(--brand-hover)}
.legal strong,.legal em{color:var(--text-1)}
.legal .hero__note{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3);margin-top:.5rem}
.legal .callout{background:var(--ink-050);border:1px solid var(--ink-300);border-radius:var(--r-lg);padding:1.5rem 1.75rem;margin:1.75rem 0}
.legal .callout h3{margin-top:0}
.legal .callout p{margin-bottom:.75rem}
.legal .callout p:last-child{margin-bottom:0}
.legal .checklist{list-style:none;padding-left:0;margin:1.5rem 0}
.legal .checklist li{position:relative;padding-left:1.75rem;color:var(--text-2)}
.legal .checklist li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.legal .badge-row{list-style:none;display:flex;flex-wrap:wrap;gap:.625rem;padding-left:0;margin:1.25rem 0}
.legal .badge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:.375rem .75rem;border-radius:var(--r-pill);border:1px solid var(--ink-300);color:var(--text-2)}
.legal .badge--accent{border-color:var(--brand-teal);color:var(--brand)}
.legal .price-line{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin:1.5rem 0}
.legal .table-wrap{overflow-x:auto;margin:1.5rem 0}
.legal .table{width:100%;border-collapse:collapse;font-size:.9375rem}
.legal .table caption{caption-side:top;text-align:left;color:var(--text-3);font-size:.8125rem;margin-bottom:.75rem}
.legal .table th,.legal .table td{border:1px solid var(--ink-300);padding:.75rem 1rem;text-align:left;vertical-align:top;color:var(--text-2)}
.legal .table thead th{color:var(--text-1);background:var(--ink-050);font-family:var(--disp)}
.legal .btn-row{display:flex;flex-wrap:wrap;gap:.875rem;margin:1.75rem 0}
.legal .checkbox-field{display:flex;gap:.75rem;align-items:flex-start;margin:.25rem 0 1.5rem}
.legal .checkbox-field input{margin-top:.35rem;flex:none;width:18px;height:18px}
.legal .checkbox-field label{color:var(--text-2);font-size:.9375rem;line-height:1.6}
.legal .field__hint{font-size:.875rem;color:var(--text-3);min-height:1.25rem;margin:0}
.legal .mb-0{margin-bottom:0}
.legal .mt-5{margin-top:1.5rem}
.legal .mt-6{margin-top:2rem}
.legal .muted{color:var(--text-3)}
.legal .small{font-size:.875rem}

/* ==========================================================================
   Small-screen layout corrections (QA 2026-09-14)
   Layout only — no palette, copy or structural changes.
   ========================================================================== */
@media(max-width:47.99em){
  /* 2.5rem of card padding leaves ~270px of usable line at 390px — too tight */
  .price,.form{padding:1.75rem}
  .work__copy{padding:1.75rem}
  /* stacked CTAs of different widths read as ragged; make the stack deliberate */
  .hero__ctas{flex-direction:column;align-items:stretch}
  .hero__ctas .btn{width:100%}
  /* 4rem between two columns is a hole once the footer wraps */
  .footer__cols{gap:2rem 2.5rem}
  /* hero photo: portrait crop, heavier flat shade so every line clears AA */
  .hero__bg img{object-position:90% 30%}
  /* heavy over the grey copy up top, lighter where only buttons sit so Drew reads,
     then the same fade into the charcoal page */
  .hero__shade{background:linear-gradient(180deg,rgba(17,17,17,.15) 0%,rgba(17,17,17,0) 40%,#111111 100%),
               linear-gradient(180deg,rgba(17,17,17,.86) 0%,rgba(17,17,17,.86) 60%,rgba(17,17,17,.56) 73%,rgba(17,17,17,.56) 100%)}
}

/* the work — six builds + the "see all our work" button (2026-09-21) */
.pills--bar{align-items:center}
.pill-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.625rem 1.25rem;border-radius:var(--r-pill);border:1px solid var(--brand);background:var(--brand);color:var(--ink-000);font-family:var(--disp);font-weight:700;font-size:var(--fs-sm);white-space:nowrap;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
.pill-cta:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--ink-000);box-shadow:0 10px 30px -8px rgba(0,231,239,.3);transform:translateY(-1px)}
@media(min-width:62em){.pill-cta{margin-left:auto}}
@media(max-width:61.99em){.pill-cta{width:100%}}
.chip--collab{border-color:var(--ink-400);color:var(--text-2)}

/* /our-work — the full grid */
.workgrid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:44em){.workgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:70em){.workgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wcard{display:flex;flex-direction:column;overflow:hidden}
.wcard[hidden]{display:none}
.wcard__shot{position:relative;border-bottom:1px solid var(--ink-300);background:var(--ink-100)}
.wcard__shot .shot{border:0;border-radius:0}
.wcard__chip{position:absolute;left:.75rem;bottom:.75rem;z-index:2;background:rgba(17,17,17,.7);backdrop-filter:blur(4px)}
.wcard__body{display:flex;flex-direction:column;gap:.75rem;padding:1.5rem;flex:1}
.wcard__cat{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.wcard__body p{color:var(--text-2);font-size:1rem}
.wcard__foot{margin-top:auto;padding-top:.5rem;display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}
.page-head{padding-top:clamp(2.5rem,5vw,4rem)}
.page-head h1{font-size:clamp(2.25rem,4.5vw + .5rem,3.75rem);font-weight:800;font-family:var(--disp);line-height:1.04;margin:0}
.count{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:1.25rem}


/* ---- 2026-09-21 gap-analysis additions: nav phone, hero sub-line, replaces table ---- */
.nav__right{display:flex;align-items:center;gap:1rem}
.nav__tel{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-2);text-decoration:none;white-space:nowrap}
.nav__tel .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav__tel:hover{color:var(--brand)}
.nav__tel span{display:none}
@media(min-width:40em){.nav__tel span{display:inline}}
.hero__body--sub{color:var(--text-3);font-size:var(--fs-base);margin-top:-.75rem}
.replaces{padding:0;overflow:hidden}
.replaces table{width:100%;border-collapse:collapse;font-size:1rem}
.replaces th,.replaces td{text-align:left;padding:1rem 1.25rem;border-bottom:1px solid var(--ink-150);vertical-align:top}
.replaces th{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:500}
.replaces td:last-child{color:var(--text-2)}
.replaces tfoot td{border-bottom:0;background:rgba(0,231,239,.08);color:var(--text-1);font-family:var(--disp);font-weight:700}
.replaces tfoot td:last-child{color:var(--brand)}
.replaces__note{padding:1rem 1.25rem 1.25rem;font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3);line-height:1.6}
@media(max-width:39.99em){.replaces th,.replaces td{padding:.875rem 1rem;font-size:.9375rem}}
.closer p a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.form .btn-ghost.btn-block{margin-top:-.5rem;white-space:normal;text-align:center}

/* ---- start-the-clock entry pop-up (two pages, video on top) ---- */
.clock{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0}
.clock[hidden]{display:none}
.clock__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.clock__card{position:relative;width:100%;max-width:34rem;max-height:96vh;overflow:auto;background:var(--ink-050);border:1px solid var(--brand-teal);border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-lg);animation:clockIn .35s ease-out}
@media(min-width:48em){.clock{align-items:center;padding:1.5rem}.clock__card{border-bottom:1px solid var(--brand-teal);border-radius:var(--r-lg);max-height:92vh}}
@keyframes clockIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.clock__card{animation:none}}
.clock__x{position:absolute;top:.625rem;right:.625rem;z-index:3;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--ink-400);background:rgba(17,17,17,.7);color:var(--text-1);font-size:1.5rem;line-height:1;cursor:pointer}
.clock__x:hover{border-color:var(--brand);color:var(--brand)}
.clock__video{position:relative;background:#000;border-bottom:1px solid var(--ink-300);aspect-ratio:16/9;overflow:hidden}
.clock__video[hidden]{display:none}
.clock__video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.clock__video video::cue{font-family:var(--font);font-size:.95rem;background:rgba(17,17,17,.75);color:#fff}
.clock__sound{position:absolute;left:.75rem;bottom:.75rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;min-height:2.25rem;padding:.4rem .9rem;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.35);background:rgba(17,17,17,.7);color:#fff;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;cursor:pointer}
.clock__sound::before{content:"";width:0;height:0;border-left:8px solid var(--brand);border-top:5px solid transparent;border-bottom:5px solid transparent}
.clock__sound-off{display:none}
.clock__video.is-sound .clock__sound-on{display:none}
.clock__video.is-sound .clock__sound-off{display:inline}
.clock__video.is-sound .clock__sound::before{border-left-color:#fff}
.clock__form{position:relative;padding:1.5rem;display:flex;flex-direction:column}
@media(min-width:48em){.clock__form{padding:2rem}}
.clock__step{display:flex;flex-direction:column;gap:1rem}
.clock__step[hidden]{display:none}
.clock__step h2{font-size:1.5rem;line-height:1.15}
@media(min-width:48em){.clock__step h2{font-size:1.75rem}}
.clock__lede{color:var(--text-2);font-size:.9375rem;line-height:1.55}
.clock__step .form__grid{gap:.75rem}
@media(min-width:40em){.clock__step .form__grid{grid-template-columns:1fr 1fr}.clock__step .field--wide{grid-column:1/-1}}
.clock__step textarea{background:var(--ink-050);border:1px solid var(--ink-300);border-radius:var(--r);color:var(--text-1);padding:.625rem .875rem;font-family:var(--font);font-size:1rem;width:100%;resize:vertical;min-height:3rem}
.clock__step textarea:focus{border-color:var(--brand);outline:none}
.clock__step textarea::placeholder{color:var(--ink-500)}
.clock__btns{display:grid;gap:.625rem;grid-template-columns:1fr}
@media(min-width:40em){.clock__btns{grid-template-columns:1fr 1.15fr}}
.clock__btns .btn{white-space:normal;text-align:center}
.clock__skip{background:none;border:0;color:var(--text-3);font-family:var(--mono);font-size:var(--fs-xs);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:.25rem;align-self:center}
.clock__skip:hover{color:var(--text-1)}
body.clock-open{overflow:hidden}

/* ---- 2026-09-21c: trade pages, audit page, footer columns ---- */
.page-head .hero__price{margin-top:.25rem}
.footer__cols{flex-wrap:wrap}
.footer__col a{display:block}
@media(min-width:48em){.footer__cols{display:grid;grid-template-columns:repeat(4,auto);gap:2.5rem}}
.tile h3{margin-bottom:.375rem}

/* ---- 2026-09-22 quick-fix pass ---- */
/* heading look without heading semantics (hidden form states, pop-up steps) */
.h2{font-family:var(--disp);margin:0;letter-spacing:-.01em;line-height:1.08;font-size:var(--fs-h2);font-weight:800}
.form .h2{font-size:2rem}
.clock__step .h2{font-size:1.5rem;line-height:1.15}
@media(min-width:48em){.clock__step .h2{font-size:1.75rem}}
/* hero keyword line under the H1 */
.hero__kicker{margin-top:-1rem;text-shadow:0 1px 12px rgba(17,17,17,.75)}
/* contrast: links on the cyan closer, footer column headings */
.closer p a,.closer p a:hover{color:var(--ink-000)}
.footer__h{color:var(--text-3)}
/* trade pages: in-body text links are underlined (not buttons/nav) */
.trade p a:not(.btn):not(.pill-cta){text-decoration:underline;text-underline-offset:3px}
/* work tabs: tablist is now an inner wrapper; the CTA sits beside it */
.pills__tabs{display:flex;flex-wrap:wrap;gap:.625rem;align-items:center;flex:1 1 auto;min-width:0}
@media(min-width:62em){.pills--bar{flex-wrap:nowrap}.pills__tabs{flex:0 1 auto}}
/* pop-up video: YouTube facade */
.clock__video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clock__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ==========================================================================
   CLIENT LOGO BAR (added 2026-09-22) — index.html, between .hero and #work
   Mono by default so mixed logos sit together; full color on hover/focus.
   --invert = dark-on-transparent logos (US Bio, Perdido Key): white silhouette.
   --team   = on the build team (not sole-built); tiny dot marker.
   ========================================================================== */
.logobar{padding:clamp(1.75rem,4vw,2.75rem) 0;border-top:1px solid var(--ink-150)}
.logobar__eyebrow{text-align:center;margin-bottom:1.25rem}
.logobar__row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.25rem 2.5rem}
.logobar__row li{margin:0}
.logobar__item{position:relative;display:flex;align-items:center;justify-content:center;height:3.5rem;padding:.25rem .25rem;border-radius:var(--r)}
.logobar__item img{height:2.75rem;width:auto;max-width:11rem;object-fit:contain;filter:grayscale(1) brightness(1.5);opacity:.62;transition:filter .2s ease,opacity .2s ease}
.logobar__item--invert img{filter:brightness(0) invert(1);opacity:.55}
.logobar__item:hover img,.logobar__item:focus-visible img{filter:none;opacity:1}
.logobar__item--invert:hover img,.logobar__item--invert:focus-visible img{filter:brightness(0) invert(1);opacity:1}
.logobar__word{font-family:Georgia,"Times New Roman",serif;font-size:1.3rem;font-weight:600;line-height:1;color:var(--text-2);text-align:center;letter-spacing:.01em;transition:color .2s ease}
.logobar__word small{display:block;font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;margin-top:.35rem}
.logobar__item--word:hover .logobar__word,.logobar__item--word:focus-visible .logobar__word{color:#C49A3C}
.logobar__item--team::after{content:"";position:absolute;top:.2rem;right:-.35rem;width:5px;height:5px;border-radius:50%;background:var(--ink-400)}
@media(max-width:40em){
  .logobar__row{gap:1rem 1.75rem}
  .logobar__item{height:2.75rem}
  .logobar__item img{height:2.1rem;max-width:8.5rem}
  .logobar__word{font-size:1.05rem}
}

/* ---- 2026-09-22 new-pages ---- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:.5rem}
.dtable{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:38rem}
.dtable th,.dtable td{text-align:left;padding:.875rem 1rem;border-bottom:1px solid var(--ink-150);vertical-align:top}
.dtable thead th{font-family:var(--disp);color:var(--text-1);background:var(--ink-100);white-space:nowrap}
.dtable tbody th{color:var(--text-1);font-weight:600}
.dtable td{color:var(--text-2)}
.dtable tr.is-us th,.dtable tr.is-us td{background:var(--brand-dim)}
.dtable caption{caption-side:bottom;text-align:left;color:var(--text-3);font-size:.8125rem;padding:.875rem 1rem}
.prose{display:flex;flex-direction:column;gap:1rem}
.prose>h2,.prose>p,.prose>ul,.prose>ol,.prose>.card.note{max-width:46rem}
.prose>p,.prose li{color:var(--text-2)}
.prose .answer,.page-head .answer{color:var(--text-1)}
.prose ul,.prose ol{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.content p a:not(.btn),.content li a:not(.btn),.content td a,.content th a{text-decoration:underline;text-underline-offset:3px}
.updated{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3)}
.related{display:flex;flex-wrap:wrap;gap:.625rem}
.related .chip:hover{border-color:var(--brand);color:var(--brand)}
.hub-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:40em){.hub-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:62em){.hub-grid{grid-template-columns:repeat(3,1fr)}}
.hub-card{padding:1.5rem;display:flex;flex-direction:column;gap:.625rem;align-items:flex-start}
.hub-card:hover{border-color:var(--brand);color:var(--text-1)}
.hub-card__title{font-family:var(--disp);font-weight:800;font-size:1.25rem}
.hub-card__line{color:var(--text-2);font-size:var(--fs-sm)}
.about-photo{margin:2rem 0 0;overflow:hidden;max-width:56rem}
.about-photo img{display:block;width:100%;height:auto}
.note{padding:1.25rem 1.5rem}
.note p{color:var(--text-2)}
.sources{font-size:var(--fs-sm);word-break:break-all}