/* Think Design — base styles. Layout values live inline in index.html (ported 1:1 from the
   Claude Design source); this file holds globals, hover/focus states, responsive switches,
   dynamic states driven by js/main.js and the media placeholder slot. */

html,body{margin:0;padding:0}
body{background:#F2F3F4;color:#0F1113;font-family:Geist,system-ui,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:#0F1113}
a:hover{color:#2F74B5}
::placeholder{color:rgba(15,17,19,.42)}
::selection{background:#2F74B5;color:#F7F8F9}
[hidden]{display:none!important}
/* Safari < 16 has no overflow-x:clip; fall back to hidden (body's overflow propagates to the viewport, so sticky still works). */
@supports not (overflow-x:clip){ body{overflow-x:hidden} }

/* ---------- Responsive switches (design breakpoint: 900px) ---------- */
@media (max-width:899.98px){ .only-wide{display:none!important} }
@media (min-width:900px){ .only-narrow{display:none!important} }

.services-intro{position:relative}
/* Offset only applies while pinned; on narrow screens it would push the intro down over the first card. */
@media (min-width:900px){ .services-intro{position:sticky;top:120px} }

.process-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
@media (min-width:900px){ .process-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* The 4-column checkerboard puts steps 3 and 4 after their drawings; below it, reorder so each drawing follows its step. */
@media (max-width:899.98px){
  .process-grid > :nth-child(5){order:6} .process-grid > :nth-child(6){order:5}
  .process-grid > :nth-child(7){order:8} .process-grid > :nth-child(8){order:7}
  .process-grid > :nth-child(n+9){order:9}
  .process-grid > *{min-height:0!important}
  .process-grid > :not(.process-dwg){min-height:200px!important}
}

/* Service cards pin and stack only at the wide layout; on narrow screens a card is taller than the viewport. */
@media (max-width:899.98px){ #serviceStack [data-card]{position:relative!important;top:auto!important;margin-bottom:16px!important} }

/* Header CTA moves into the mobile menu on small phones, where it would crowd the logo. */
@media (max-width:599.98px){ .nav-cta{display:none!important} }

/* Hero: heavier scrim on narrow screens, where the copy covers most of the image. */
@media (max-width:899.98px){ .hero-scrim{background:linear-gradient(180deg, rgba(6,9,13,.6) 0%, rgba(6,9,13,.2) 16%, rgba(6,9,13,.45) 32%, rgba(6,9,13,.9) 100%)!important} }

#baSlider:focus-visible{outline:2px solid #8EC6EE!important;outline-offset:4px}
/* Images inside the slider must not start a native image drag, which would cancel the slider drag. */
#baSlider .media{pointer-events:none}

/* ---------- Header (transparent over hero, solid after) ---------- */
.site-header{background:rgba(242,243,244,0);color:#F7F8F9;border-bottom:1px solid rgba(15,17,19,0);backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .4s ease, color .4s ease, border-color .4s ease}
.site-header.is-solid{background:rgba(242,243,244,.9);color:#0F1113;border-bottom-color:rgba(15,17,19,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav-cta{background:#F7F8F9;color:#0F1113;transition:background .4s, color .4s}
.site-header.is-solid .nav-cta{background:#0F1113;color:#F7F8F9}
.site-header a.nav-cta:hover{color:#0F1113}
.site-header.is-solid a.nav-cta:hover{color:#F7F8F9}

/* ---------- Hover / focus states ---------- */
.h-dim:hover{opacity:.6}
.h-white:hover{background:#FFFFFF!important}
.h-underline:hover{border-bottom-color:#8EC6EE!important}
.h-blue:hover{color:#8EC6EE!important;border-bottom-color:#8EC6EE!important}
.h-border:hover{border-color:#0F1113!important}
.h-cell:hover{background:#161A1F}
.h-black:hover{background:#000!important}
.h-tint:hover{background:rgba(15,17,19,.06)!important}
.h-zoom{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.h-zoom:hover{transform:scale(1.03)}
.h-zoom.h-zoom--sm:hover{transform:scale(1.02)}
.f-input:focus{border-bottom-color:#0F1113!important}

/* ---------- Approach: wall faces rising out of the plan (height driven by --wh from js/main.js) ---------- */
.wall{position:absolute;background:#F1EEE9;box-shadow:inset 0 0 0 1px rgba(15,17,19,.2)}
.wall--h{height:var(--wh,0);transform-origin:50% 0;transform:rotateX(90deg)}
.wall--v{width:var(--wh,0);transform-origin:0 50%;transform:rotateY(-90deg);background:#E4E0D9}
.wall--glass{background:rgba(176,204,226,.22);background-image:linear-gradient(rgba(15,17,19,.35),rgba(15,17,19,.35)),linear-gradient(rgba(15,17,19,.35),rgba(15,17,19,.35)),linear-gradient(rgba(15,17,19,.35),rgba(15,17,19,.35));background-size:100% 1px,100% 1px,100% 1px;background-position:0 13.2%,0 39.5%,0 65.8%;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(15,17,19,.35)}

/* ---------- Media slot (placeholder until a real asset is supplied) ---------- */
.media{overflow:hidden;font-family:Geist,sans-serif}
.media__bg{position:absolute;inset:0}
.media--light .media__bg{background-color:#D3D9DF;background-image:radial-gradient(ellipse 80% 70% at 28% 22%, rgba(255,255,255,.6), rgba(255,255,255,0) 70%), repeating-linear-gradient(-45deg, rgba(15,20,26,.065) 0 1px, rgba(15,20,26,0) 1px 11px)}
.media--dark .media__bg{background-color:#141A21;background-image:radial-gradient(ellipse 70% 60% at 68% 38%, rgba(110,170,225,.18), rgba(110,170,225,0) 70%), repeating-linear-gradient(-45deg, rgba(235,240,245,.05) 0 1px, rgba(235,240,245,0) 1px 11px)}
.media__corner{position:absolute;width:14px;height:14px;--line:rgba(15,20,26,.4)}
.media--dark .media__corner{--line:rgba(235,240,245,.35)}
.media__corner--tl{top:16px;left:16px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.media__corner--tr{top:16px;right:16px;border-top:1px solid var(--line);border-right:1px solid var(--line)}
.media__corner--bl{bottom:16px;left:16px;border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
.media__corner--br{bottom:16px;right:16px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.media__play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;border:1px solid rgba(15,20,26,.5);display:flex;align-items:center;justify-content:center}
.media__play::after{content:"";width:0;height:0;margin-left:5px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid #0F1113}
.media--dark .media__play{border-color:rgba(235,240,245,.55)}
.media--dark .media__play::after{border-left-color:#EEF1F4}
.media__label{position:absolute;left:30px;bottom:28px;right:30px;display:flex;flex-direction:column;gap:5px;color:#0F1113;max-width:440px}
.media--dark .media__label{color:#EEF1F4}
.media__id{display:flex;align-items:center;gap:8px;font:500 11px/1.2 'Geist Mono',monospace;letter-spacing:.06em}
.media__id::before{content:"";width:6px;height:6px;border-radius:50%;background:#2F74B5;flex:none}
.media--dark .media__id::before{background:#8EC6EE}
.media__note{font-size:13px;line-height:1.4;color:#3F4954;text-wrap:pretty}
.media--dark .media__note{color:#A6B2BE}
.media__kind{position:absolute;top:28px;right:30px;font:500 10px/1 'Geist Mono',monospace;letter-spacing:.08em;color:#3F4954}
.media--dark .media__kind{color:#A6B2BE}
.media__src{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Poster still in a video slot that has no file yet */
.media__src + .media__play{z-index:1;background:rgba(6,9,13,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.media__badge{position:absolute;left:20px;bottom:20px;z-index:1;padding:8px 12px;background:#F7F8F9;color:#0F1113;font:500 13px/1 Geist,sans-serif}