/* ===========================================================================
   Sand Point Software — production stylesheet
   Built from design_handoff_sandpoint_homepage. Every colour, size, weight and
   spacing value is transcribed from homepage.dc.html, which the handoff README
   designates as the source of truth for those values.

   The prototype used inline styles throughout; those are consolidated here as
   tokens and classes. That is a code-organisation change with no visual
   difference — the rendered result matches the handoff.
   =========================================================================== */

/* --- self-hosted fonts: no Google Fonts request in production -------------
   Space Grotesk and Public Sans are VARIABLE fonts, so one file each covers
   every weight the design uses (3 and 4 respectively). --------------------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk-var.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('fonts/public-sans-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --- design tokens --------------------------------------------------------
   Hex FALLBACKS first, authoritative OKLCH under @supports. OKLCH needs
   Chrome 111+/Safari 15.4+/Firefox 113+; without a fallback an older browser
   drops the declaration entirely and renders an unstyled element rather than
   an approximately-correct one. ------------------------------------------ */
:root {
  --ink950: #14171c;  --ink900: #1c1f25;  --ink800: #22262d;
  --ink700: #363c44;  --ink650: #3e444c;  --ink500: #6a7078;
  --ink-body: #b7bbc0; --ink-quote: #c4c8cd; --ink-white: #f4f1ec;
  --paper50: #f9f7f3; --paper75: #fbf9f6; --paper100: #efece7;
  --paper-line: #d6d2cb; --paper-dot: #b6b1a9;
  --text950: #22262c; --text600: #5b616a;
  --beacon: #e89a5c; --beacon-hover: #d98c4d; --beacon-deep: #a85f2c;
  --error: #a33f36;

  --maxw: 1200px;
  --gutter: clamp(24px, 5vw, 64px);
  --section-y: clamp(80px, 10vw, 140px);
  --font-head: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
@supports (color: oklch(0.5 0.1 250)) {
  :root {
    --ink950: oklch(0.16 0.014 252);  --ink900: oklch(0.20 0.014 252);
    --ink800: oklch(0.24 0.015 252);  --ink700: oklch(0.34 0.016 252);
    --ink650: oklch(0.38 0.016 252);  --ink500: oklch(0.55 0.016 252);
    --ink-body: oklch(0.78 0.01 252); --ink-quote: oklch(0.82 0.01 252);
    --ink-white: oklch(0.96 0.006 75);
    --paper50: oklch(0.975 0.005 75); --paper75: oklch(0.98 0.005 75);
    --paper100: oklch(0.945 0.007 75); --paper-line: oklch(0.87 0.008 75);
    --paper-dot: oklch(0.75 0.01 75);
    --text950: oklch(0.23 0.012 252); --text600: oklch(0.48 0.014 252);
    --beacon: oklch(0.74 0.13 63); --beacon-hover: oklch(0.69 0.13 63);
    --beacon-deep: oklch(0.53 0.14 50); --error: oklch(0.5 0.16 25);
  }
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* The `hidden` attribute must beat any `display` a component sets, or a rule
   like `.done { display: flex }` silently defeats it. That is not theoretical:
   the success panel rendered under the live form until this rule existed,
   because .done's own display won on specificity. One authoritative rule is
   safer than remembering a [hidden] guard on every component. */
[hidden] { display: none !important; }html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); background: var(--paper50); -webkit-font-smoothing: antialiased; }
a { color: var(--beacon-deep); text-decoration: none; }
a:hover { color: var(--beacon); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; margin: 0; }
p { margin: 0; }

/* Explicit, visible focus ring on every interactive element — the handoff
   requires this rather than relying on or removing browser defaults. */
:focus-visible { outline: 2px solid var(--beacon-deep); outline-offset: 3px; }
.nav :focus-visible, .hero :focus-visible,
.section--dark :focus-visible, .section--darker :focus-visible { outline-color: var(--beacon); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--beacon); color: var(--ink950);
  padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 600; font-size: 14px;
}
.skip-link:focus { left: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; }

/* --- the mark: pure CSS, no image asset ----------------------------------
   A rounded tile clipping a beacon arc and a filled dot at its bottom-left
   corner, exactly as specified in the handoff. --------------------------- */
.mark { position: relative; display: inline-block; overflow: hidden; flex-shrink: 0; background: var(--ink950); }
.mark__arc, .mark__dot { position: absolute; border-radius: 50%; }
.mark__arc { border-style: solid; border-color: var(--beacon); opacity: 0.6; }
.mark__dot { background: var(--beacon); }

.mark--nav { width: 40px; height: 40px; border-radius: 9px; }
.mark--nav .mark__arc { width: 32px; height: 32px; left: -16px; bottom: -16px; border-width: 2.5px; }
.mark--nav .mark__dot { width: 16px; height: 16px; left: -8px; bottom: -8px; }
.mark--footer { width: 32px; height: 32px; border-radius: 8px; }
.mark--footer .mark__arc { width: 26px; height: 26px; left: -13px; bottom: -13px; border-width: 2px; }
.mark--footer .mark__dot { width: 13px; height: 13px; left: -6.5px; bottom: -6.5px; }
.mark--success { width: 56px; height: 56px; border-radius: 14px; }
.mark--success .mark__arc { width: 45px; height: 45px; left: -22.5px; bottom: -22.5px; border-width: 3px; }
.mark--success .mark__dot { width: 20px; height: 20px; left: -10px; bottom: -10px; }

.wordmark { font-family: var(--font-head); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap; }
.wordmark b { color: var(--ink-white); font-weight: 500; }
.wordmark i { color: var(--ink500); font-style: normal; }
.brand { display: flex; align-items: center; gap: 12px; }

/* --- buttons -------------------------------------------------------------- */
.btn { font-family: var(--font-body); font-weight: 600; border: none; border-radius: 8px;
       cursor: pointer; transition: background .15s; display: inline-flex;
       align-items: center; justify-content: center; }
.btn--primary { background: var(--beacon); color: var(--ink950); }
.btn--primary:hover { background: var(--beacon-hover); color: var(--ink950); }
.btn--nav  { padding: 11px 22px; font-size: 14px; }
.btn--hero { padding: 16px 30px; font-size: 15px; }
.btn--cta  { padding: 18px 36px; font-size: 16px; }
.btn--ghost { background: transparent; color: var(--ink-white); padding: 16px 30px;
              font-size: 15px; border: 1px solid var(--ink650); }
.btn--ghost:hover { background: var(--ink800); color: var(--ink-white); }
.btn--dark { background: var(--ink950); color: var(--ink-white); padding: 12px 28px; font-size: 14px; }
.btn--dark:hover { background: var(--ink800); }
.nav .btn:focus-visible, .hero .btn:focus-visible,
.section--dark .btn:focus-visible { outline: 2px solid var(--ink-white); outline-offset: 2px; }

/* Inline text-style button used in the "Our Job" card. */
.btn--link { background: none; border: none; padding: 0; cursor: pointer;
             color: var(--beacon); font-family: var(--font-body); font-weight: 600;
             font-size: 15px; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.btn--link:hover { text-decoration: underline; }
.chevron { width: 7px; height: 7px; border-top: 1.5px solid var(--beacon);
           border-right: 1.5px solid var(--beacon); transform: rotate(45deg); }

/* --- eyebrow -------------------------------------------------------------- */
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
           text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
                   background: currentColor; display: inline-block; flex-shrink: 0; }
.eyebrow--dark { color: var(--beacon); }
.eyebrow--light { color: var(--beacon-deep); }

/* --- sections ------------------------------------------------------------- */
.section { padding: var(--section-y) var(--gutter); scroll-margin-top: 80px; }
.section--dark { background: var(--ink950); }
.section--darker { background: var(--ink900); }
.section--paper { background: var(--paper50); }
.section--paper100 { background: var(--paper100); }

/* --- nav ------------------------------------------------------------------ */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center;
       justify-content: space-between; padding: 16px var(--gutter);
       background: var(--ink950); border-bottom: 1px solid var(--ink700); gap: 24px; }
.nav__links { display: flex; align-items: center; gap: 36px; }
.nav__links a { font-family: var(--font-body); font-weight: 500; font-size: 15px;
                color: var(--ink-body); border-radius: 4px; }
.nav__links a:hover { color: var(--ink-white); }
.nav__toggle { display: none; background: none; border: none; cursor: pointer;
               width: 40px; height: 40px; align-items: center; justify-content: center;
               border-radius: 8px; padding: 0; }
.nav__bars { position: relative; display: block; width: 20px; height: 14px; }
.nav__bars span { position: absolute; left: 0; width: 20px; height: 1.5px;
                  background: var(--ink-white); transition: transform .2s, opacity .2s; }
.nav__bars span:nth-child(1) { top: 0; }
.nav__bars span:nth-child(2) { top: 6.25px; }
.nav__bars span:nth-child(3) { top: 12.5px; }

/* Mobile menu open state: hamburger becomes an X, full-height dark panel. */
.nav[data-open="true"] .nav__bars span:nth-child(1) { top: 6.25px; transform: rotate(45deg); }
.nav[data-open="true"] .nav__bars span:nth-child(2) { opacity: 0; }
.nav[data-open="true"] .nav__bars span:nth-child(3) { top: 6.25px; transform: rotate(-45deg); }

.nav__panel { display: none; }
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav > .btn--nav { display: none; }
  .nav__toggle { display: flex; }
  .nav__panel {
    display: none; position: fixed; inset: 72px 0 0 0; background: var(--ink950);
    z-index: 49; padding: 8px var(--gutter) var(--gutter); overflow-y: auto;
    flex-direction: column;
  }
  .nav[data-open="true"] .nav__panel { display: flex; }
  .nav__panel a { display: flex; align-items: center; height: 56px;
                  border-bottom: 1px solid var(--ink700); color: var(--ink-white);
                  font-family: var(--font-body); font-size: 17px; font-weight: 500; }
  .nav__panel .btn { width: 100%; margin-top: 24px; padding: 16px; font-size: 16px; }
  body[data-menu="open"] { overflow: hidden; }
}

/* --- hero ----------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--ink950);
        padding: clamp(90px,14vw,150px) var(--gutter) clamp(80px,10vw,120px);
        scroll-margin-top: 80px; }
.hero__motif { position: absolute; right: -160px; bottom: -320px; width: 900px;
               height: 900px; z-index: 0; pointer-events: none; }
.hero__motif span { position: absolute; border-radius: 50%; }
.hero__glow { width: 260px; height: 260px; left: -130px; bottom: -130px;
              background: radial-gradient(circle, var(--beacon), transparent 70%); opacity: 0.35; }
.hero__dot  { width: 64px; height: 64px; left: -32px; bottom: -32px; background: var(--beacon);
              animation: beaconPulse 3.6s ease-in-out infinite; }
.hero__ring1 { width: 260px; height: 260px; left: -130px; bottom: -130px; border: 2px solid var(--beacon); opacity: 0.4; }
.hero__ring2 { width: 480px; height: 480px; left: -240px; bottom: -240px; border: 1.5px solid var(--beacon); opacity: 0.22; }
.hero__ring3 { width: 760px; height: 760px; left: -380px; bottom: -380px; border: 1px solid var(--beacon); opacity: 0.12; }
.hero__beam { width: 3px; height: 420px; left: 0; bottom: 0; background: var(--beacon);
              opacity: 0.22; border-radius: 0 !important; transform-origin: 0 100%; transform: rotate(45deg); }
.hero__horizon { position: absolute; right: 0; width: 42%; top: 62%; height: 1px;
                 background: var(--ink700); z-index: 0; }
.hero__inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; }
.hero__col { max-width: 680px; display: flex; flex-direction: column; gap: 28px; }
.hero h1 { font-size: clamp(40px,5.5vw,68px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink-white); }
.hero__sub { font-size: 20px; line-height: 1.55; color: var(--ink-body); max-width: 540px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }

@keyframes beaconPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
/* The pulse is the only animation in the design, so reduced-motion handling is
   a single override rather than a systemic concern. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__dot { animation: none; opacity: 1; transform: none; }
  * { transition-duration: .01ms !important; }
}

/* --- services: editorial list, hairline separated -------------------------
   Rows are NOT links and get no chevron — nothing here navigates anywhere
   yet, so nothing should look like it does. The background wash is the only
   hover treatment. ------------------------------------------------------- */
.head-row { display: flex; justify-content: space-between; align-items: flex-end;
            gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
.head-col { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.head-col h2 { font-size: clamp(32px,4vw,44px); line-height: 1.1; color: var(--text950); }
.head-note { font-size: 16px; line-height: 1.6; color: var(--text600); max-width: 320px; }
.section--dark .head-col h2, .section--darker .head-col h2 { color: var(--ink-white); }
.section--dark .head-note, .section--darker .head-note { color: var(--ink-body); }

.svc-list { border-top: 1px solid var(--paper-line); }
.svc-row { display: flex; align-items: baseline; gap: 32px; padding: 30px 4px;
           border-bottom: 1px solid var(--paper-line); transition: background .15s; }
.svc-row:hover { background: var(--paper100); }
.svc-row__n { font-family: var(--font-mono); font-size: 13px; color: var(--beacon-deep);
              width: 32px; flex-shrink: 0; }
.svc-row h3 { font-size: 22px; color: var(--text950); width: 260px; flex-shrink: 0; }
.svc-row p { font-size: 16px; line-height: 1.6; color: var(--text600); flex: 1; }

/* --- approach: quotes + sticky "Our Job" card ----------------------------- */
.approach { max-width: var(--maxw); margin: 0 auto; display: grid;
            grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.approach h2 { font-size: clamp(30px,3.6vw,40px); line-height: 1.2; color: var(--ink-white);
               margin: 18px 0 40px; max-width: 560px; }
.quotes { display: flex; flex-direction: column; gap: 18px; }
.quotes p { font-family: var(--font-head); font-weight: 500; font-size: 19px; line-height: 1.5;
            color: var(--ink-quote); border-left: 2px solid var(--ink700); padding-left: 18px; }
.job-card { position: sticky; top: 110px; background: var(--ink900);
            border: 1px solid var(--ink700); border-radius: 16px; padding: 40px;
            display: flex; flex-direction: column; gap: 20px; }
.job-card__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
                     text-transform: uppercase; color: var(--beacon); }
.job-card h3 { font-size: 26px; line-height: 1.3; color: var(--ink-white); }
.job-card p { font-size: 16px; line-height: 1.65; color: var(--ink-body); }

/* --- capability tiles ----------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.tile { display: flex; flex-direction: column; border: 1px solid var(--paper-line);
        border-radius: 14px; overflow: hidden; background: var(--paper50); }
.tile__ph { aspect-ratio: 16 / 10; background-color: var(--paper100);
            background-image: repeating-linear-gradient(135deg, var(--paper-line) 0px,
              var(--paper-line) 1.5px, transparent 1.5px, transparent 14px);
            display: flex; align-items: center; justify-content: center; }
.tile__ph span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
                 text-transform: uppercase; color: var(--text600); background: var(--paper50);
                 padding: 6px 12px; border-radius: 20px; border: 1px solid var(--paper-line); }
.tile__body { display: flex; flex-direction: column; gap: 12px; padding: 28px; }
.tile__body h3 { font-size: 22px; color: var(--text950); }
.tile__body p { font-size: 15px; line-height: 1.6; color: var(--text600); }

/* --- process --------------------------------------------------------------
   The Build<->Verify bracket is positioned from the ACTUAL left-aligned dot
   centres. The handoff hard-codes left:52%/width:17%, correct only near
   1200px; deriving both from the column count and gap makes it land correctly
   at every width while producing the same result at the verified sizes.
   ------------------------------------------------------------------------- */
.proc { position: relative; display: flex; justify-content: space-between;
        gap: var(--proc-gap); margin-top: 76px;
        --proc-gap: 16px; --proc-cols: 6; }
.proc::before { content: ''; position: absolute; left: 0; right: 0; top: 11px;
                height: 1px; background: var(--ink700); z-index: 0; }
/* The Build<->Verify bracket is drawn as a pseudo-element on the BUILD STEP
   ITSELF, not absolutely positioned by percentage.
   The handoff hard-codes left:52%/width:17%, which is only correct near 1200px
   and which its own README flags as fragile ("if the row wraps... the bracket
   stops lining up"). Anchoring to Build's own box makes it exact at every
   width AND re-anchor itself for free at the tablet and mobile layouts, where
   Build/Verify move. Distance from Build's dot centre to Verify's is one
   column width plus one gap, i.e. calc(100% + gap) measured from Build. */
.proc__step[data-step="4"]::after {
  content: ''; position: absolute; left: 11px; top: 0;
  width: calc(100% + var(--proc-gap)); height: 22px;
  border: 1.5px solid var(--beacon); border-bottom: none;
  border-radius: 11px 11px 0 0; opacity: 0.7; z-index: 1; pointer-events: none;
}
/* Down-pointing arrow at the Build end: "verification can send us back a step". */
.proc__step[data-step="4"]::before {
  content: ''; position: absolute; left: 7.5px; top: 18px; width: 7px; height: 7px;
  border-top: 1.5px solid var(--beacon); border-right: 1.5px solid var(--beacon);
  transform: rotate(135deg); opacity: 0.85; z-index: 2; pointer-events: none;
}
.proc__step { position: relative; z-index: 1; flex: 1; display: flex;
              flex-direction: column; gap: 16px; min-width: 100px; }
.proc__mark { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--beacon);
              background: var(--ink900); display: flex; align-items: center; justify-content: center; }
.proc__mark i { width: 7px; height: 7px; border-radius: 50%; background: var(--beacon); font-style: normal; }
.proc__n { font-family: var(--font-mono); font-size: 12px; color: var(--ink500); }
.proc__step h4 { font-size: 19px; color: var(--ink-white); }
.proc__step p { font-size: 14px; line-height: 1.55; color: var(--ink-body); }

/* --- philosophy ----------------------------------------------------------- */
.philosophy { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column;
              align-items: center; gap: 24px; text-align: center; }
.philosophy h2 { font-size: clamp(30px,4.2vw,44px); line-height: 1.25; color: var(--text950); }
.philosophy p { font-size: 17px; line-height: 1.7; color: var(--text600); }
.tags { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
        justify-content: center; margin-top: 8px; }
.tags span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
             text-transform: uppercase; color: var(--text600); }
.tags i { color: var(--paper-dot); font-style: normal; }

/* --- final CTA + footer --------------------------------------------------- */
.contact { background: var(--ink950); padding: clamp(100px,12vw,160px) var(--gutter) 0;
           scroll-margin-top: 80px; }
.contact__inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column;
                  align-items: center; gap: 28px; text-align: center; }
.contact h2 { font-size: clamp(34px,4.5vw,52px); line-height: 1.1; color: var(--ink-white); }
.contact__sub { font-size: 19px; line-height: 1.6; color: var(--ink-body); }

.footer { max-width: var(--maxw); margin: 120px auto 0; }
.footer__cols { display: flex; justify-content: space-between; gap: 40px;
                flex-wrap: wrap; padding-bottom: 48px; }
.footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 260px; }
.footer__brand .wordmark { font-size: 16px; }
.footer__brand p { font-size: 14px; line-height: 1.6; color: var(--ink500); }
.footer__col { display: flex; flex-direction: column; gap: 16px; }
.footer__h { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
             text-transform: uppercase; color: var(--ink500); }
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__links a { font-family: var(--font-body); font-size: 14px; color: var(--ink-body); border-radius: 4px; }
.footer__links a:hover { color: var(--ink-white); }
.footer__contact { font-size: 14px; line-height: 1.6; color: var(--ink500); max-width: 240px; }
.footer__bar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
               padding: 28px 0 40px; border-top: 1px solid var(--ink700); }
.footer__bar span { font-family: var(--font-body); font-size: 13px; color: var(--ink500); }

/* --- inquiry modal -------------------------------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(20,23,28,0.72); z-index: 200;
         display: flex; align-items: center; justify-content: center; padding: 24px; }
@supports (background: oklch(0.5 0.1 250 / 0.5)) {
  .scrim { background: oklch(0.16 0.014 252 / 0.72); }
}
.modal { background: var(--paper50); border-radius: 20px; max-width: 560px; width: 100%;
         max-height: 90vh; overflow-y: auto; padding: 44px; position: relative;
         /* Makes the dialog a query container so the name/email pair can stack
            based on the DIALOG's width rather than the viewport's — correct on
            a narrow desktop window, not only on a phone. */
         container-type: inline-size;
         box-shadow: 0 24px 64px rgba(20,23,28,0.35); }
.modal__close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px;
                border-radius: 8px; border: none; background: transparent; display: flex;
                align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.modal__close:hover { background: var(--paper100); }
.modal__close span { width: 14px; height: 14px; position: relative; display: block; }
.modal__close span::before, .modal__close span::after {
  content: ''; position: absolute; top: 6px; left: 0; width: 14px; height: 1.5px; background: var(--text600); }
.modal__close span::before { transform: rotate(45deg); }
.modal__close span::after  { transform: rotate(-45deg); }
.modal__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; padding-right: 28px; }
.modal__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
                  text-transform: uppercase; color: var(--beacon-deep); }
.modal__head h2 { font-size: 25px; line-height: 1.25; color: var(--text950); }
.modal__head p { font-size: 14.5px; line-height: 1.55; color: var(--text600); margin-top: 4px; }

.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--pair { display: flex; gap: 14px; flex-wrap: wrap; }
.field--pair .field { flex: 1; min-width: 180px; }
.field label { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--text950); }
.req { color: var(--beacon-deep); }
.opt { color: var(--text600); font-weight: 400; }
.field input, .field textarea {
  font-family: var(--font-body); font-size: 15px; color: var(--text950);
  padding: 12px 14px; border-radius: 8px; border: 1.5px solid var(--paper-line);
  background: var(--paper75); width: 100%; }
.field textarea { min-height: 70px; resize: vertical; }
.field textarea.short { min-height: 60px; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--beacon-deep);
  box-shadow: 0 0 0 3px rgba(232,154,92,0.18); }
@supports (box-shadow: 0 0 0 3px oklch(0.74 0.13 63 / 0.18)) {
  .field input:focus, .field textarea:focus { box-shadow: 0 0 0 3px oklch(0.74 0.13 63 / 0.18); }
}
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: var(--error); }
.err { font-family: var(--font-body); font-size: 12.5px; color: var(--error); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--font-body); font-size: 13.5px; font-weight: 500; padding: 9px 16px;
        border-radius: 999px; cursor: pointer; border: 1.5px solid var(--paper-line);
        background: var(--paper75); color: var(--text600); }
.chip[aria-pressed="true"] { border-color: var(--beacon-deep); color: var(--beacon-deep);
                             background: rgba(232,154,92,0.16); }
@supports (background: oklch(0.74 0.13 63 / 0.16)) {
  .chip[aria-pressed="true"] { background: oklch(0.74 0.13 63 / 0.16); }
}
.submit { background: var(--beacon); color: var(--ink950); padding: 16px; border-radius: 8px;
          border: none; cursor: pointer; font-family: var(--font-body); font-weight: 600;
          font-size: 15px; margin-top: 4px; }
.submit:hover { background: var(--beacon-hover); }
.submit[disabled] { opacity: 0.65; cursor: progress; }
.form__error { font-family: var(--font-body); font-size: 14px; line-height: 1.5;
               color: var(--error); border: 1.5px solid var(--error); border-radius: 8px;
               padding: 12px 14px; background: rgba(163,63,54,0.06); }

.done { display: flex; flex-direction: column; align-items: center; text-align: center;
        gap: 16px; padding: 24px 0 8px; }
.done h2 { font-size: 24px; color: var(--text950); }
.done p { font-size: 15px; line-height: 1.6; color: var(--text600); max-width: 380px; }

/* ===========================================================================
   RESPONSIVE
   Tablet and mobile are real, distinct layouts for the sections the handoff
   calls out — not desktop CSS that happens to wrap.
   =========================================================================== */

/* --- tablet (~820px): Process becomes two rows of three ------------------- */
@media (max-width: 1000px) {
  .approach { grid-template-columns: 1fr; gap: 40px; }
  .job-card { position: static; }

  .proc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px var(--proc-gap);
          --proc-cols: 3; }
  /* One hairline per ROW rather than one across the whole block: each step
     draws its own connector to the next, and the last in each row draws none. */
  .proc::before { display: none; }
  .proc__step { position: relative; }
  .proc__step::after { content: ''; position: absolute; left: 11px; top: 11px;
                       width: calc(100% + var(--proc-gap)); height: 1px;
                       background: var(--ink700); z-index: 0; }
  .proc__step[data-step="3"]::after, .proc__step[data-step="6"]::after { display: none; }
  /* Re-assert the bracket over the generic connector rule above. */
  .proc__step[data-step="4"]::after {
    top: 0; height: 22px; background: none;
    border: 1.5px solid var(--beacon); border-bottom: none;
    border-radius: 11px 11px 0 0; opacity: 0.7; z-index: 1; display: block; }
}

/* --- mobile: Process becomes a vertical timeline -------------------------- */
@media (max-width: 640px) {
  .proc { display: flex; flex-direction: column; gap: 0; margin-top: 48px; }
  .proc::before { display: none; }
  .proc__step { flex-direction: column; gap: 10px; padding: 0 0 32px 40px; min-width: 0; }
  .proc__step:last-child { padding-bottom: 0; }
  .proc__mark { position: absolute; left: 0; top: 0; }
  /* Vertical connector down the left, from this dot to the next. */
  .proc__step::after { content: ''; position: absolute; left: 10.5px; top: 22px;
                       width: 1px; height: calc(100% - 22px);
                       background: var(--ink700); z-index: 0; }
  .proc__step:last-child::after { display: none; }
  /* Build<->Verify becomes a vertical bracket to the RIGHT of the line. */
  .proc__step[data-step="4"]::after {
    left: 21px; top: 11px; width: 18px; height: calc(100% + 11px);
    background: none; border: 1.5px solid var(--beacon); border-left: none;
    border-radius: 0 9px 9px 0; opacity: 0.7; z-index: 1; }
  .proc__step[data-step="4"]::before {
    left: 24px; top: calc(100% + 8px); transform: rotate(-135deg); }
}

/* --- services / tiles / hero / footer at small sizes ---------------------- */
@media (max-width: 860px) {
  .svc-row { flex-wrap: wrap; gap: 8px 16px; }
  .svc-row h3 { width: auto; }
  .svc-row p { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .tiles { grid-template-columns: 1fr; gap: 24px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__sub { font-size: 18px; }
  .footer__cols { flex-direction: column; gap: 32px; }
  .modal { padding: 28px 22px; border-radius: 16px; }
  .field--pair { flex-direction: column; gap: 18px; }
}
/* The handoff specifies the name/email pair stacking below ~380px of dialog
   width; the modal is fluid, so this is keyed to the dialog, not the device. */
@container (max-width: 380px) { .field--pair { flex-direction: column; } }