/* ==========================================================================
   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}
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%)}
}