/* ============================================================
   BIGLOW - biglow.com
   "BIGLOW OS" design system

   A studio that builds digital, presented as beautifully-made
   software. Bone paper, hard ink lines, electric blue, window
   chrome, mono metadata. Fun on hover, serious underneath.

   - Paper #EBE9E1 · Panel #FCFBF7 · Ink #101010 · Blue #1C26F0
   - Display/UI: Archivo (incl. Expanded axis). Meta: IBM Plex Mono.
   - Hard 1px borders. Offset shadows. No blur, no gradients.
   ============================================================ */

:root {
  --paper: #EBE9E1;
  --paper-deep: #E2DFD4;
  --panel: #FCFBF7;
  --ink: #101010;
  --ink-soft: #2B2B28;
  --ink-muted: #5E5B53; /* AA: 5.6:1 on paper, 5.1:1 on paper-deep */
  --line: #101010;
  --line-soft: #D3D0C4;
  --blue: #1C26F0;
  --blue-deep: #1218A8;
  --blue-ghost: #E4E5FB;
  --dark: #0C0C0C;
  --paper-on-dark: rgba(235, 233, 225, 1);
  --green: #1FA044;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);

  --nav-h: 64px;
  --bar-h: 40px;

  --shadow: 5px 5px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow-blue: 7px 7px 0 var(--blue);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.7, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--blue); color: #fff; }

a { color: inherit; text-decoration: none; transition: color 180ms var(--ease); }
a:hover { color: var(--blue); }

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* Page-level fade for soft transitions */
body.page-fade { opacity: 0; transition: opacity 260ms ease; }
body.page-fade.is-ready { opacity: 1; }
body.page-fade.is-leaving { opacity: 0; transition-duration: 200ms; }

/* ---------- Layout primitives ---------- */

.container {
  width: 100%;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.rule { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }

/* ---------- Typography ---------- */

/* Big signage type - Archivo pushed wide and heavy, set in caps. */
.display {
  font-family: var(--sans);
  font-weight: 900;
  font-stretch: 122%;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5.6vw, 5.25rem);
  line-height: 0.96;
  letter-spacing: -0.015em;
  margin: 0;
}

.display-md {
  font-family: var(--sans);
  font-weight: 850;
  font-stretch: 118%;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}

.display-sm {
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 114%;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0;
}

/* Mono metadata label - the system voice. */
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  display: inline-block;
}

.label::before { content: "/ "; color: var(--blue); }
.label.no-slash::before { content: none; }
.label-light { color: rgba(235, 233, 225, 0.6); }

.mono { font-family: var(--mono); }

.accent { color: var(--blue); }

/* ---------- Animated link underline ---------- */

.link-u {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.link-u::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--u-origin, left) center;
  transition: transform 320ms var(--ease);
}

.link-u:hover::after { transform: scaleX(1); }

/* ---------- Buttons - OS push buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 0.85rem 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: transform 140ms var(--ease-snap), box-shadow 140ms var(--ease-snap),
              background 180ms var(--ease), color 180ms var(--ease);
}
.btn:hover { color: var(--ink); background: var(--blue-ghost); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

.btn-blue { background: var(--blue); color: #fff; border-color: var(--ink); }
.btn-blue:hover { background: var(--blue-deep); color: #fff; }

.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--blue); color: #fff; }

/* ---------- Window chrome ---------- */

.win {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.win-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  min-height: 34px;
}

.win-dots {
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}
.win-dots i {
  width: 9px; height: 9px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: inline-block;
  background: transparent;
  transition: background 180ms var(--ease);
}

.win-name {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win:hover .win-dots i:nth-child(1) { background: var(--blue); }
.win:hover .win-dots i:nth-child(2) { background: var(--ink); }
.win:hover .win-dots i:nth-child(3) { background: var(--blue); }

/* ---------- Boot overlay (injected by JS on the home page) ---------- */

.boot {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--dark);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 420ms var(--ease);
}
.boot.is-done { opacity: 0; pointer-events: none; }

.boot-inner { width: min(420px, 78vw); text-align: left; }

.boot-mark {
  font-family: var(--sans);
  font-weight: 900;
  font-stretch: 122%;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.01em;
  margin-bottom: 1.75rem;
}
.boot-mark sup { font-size: 0.35em; font-weight: 600; letter-spacing: 0; }

.boot-track {
  height: 14px;
  border: 1px solid var(--paper);
  padding: 2px;
  margin-bottom: 0.8rem;
}
.boot-fill { height: 100%; width: 0%; background: var(--blue); }

.boot-log {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(235, 233, 225, 0.65);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: 1.3em;
}

/* ---------- Nav - the menu bar ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding-left: var(--gutter); padding-right: var(--gutter);
}

.wordmark {
  font-family: var(--sans);
  font-weight: 900;
  font-stretch: 122%;
  font-size: 21px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  flex: 0 0 auto;
}
.wordmark sup {
  font-size: 8px;
  font-weight: 600;
  font-stretch: 100%;
  margin-top: 1px;
}
.wordmark:hover { color: var(--blue); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}

.nav-links a {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding: 0.35rem 0;
}

.nav-links a.is-current { color: var(--blue); }
.nav-links a.is-current::before { content: "● "; font-size: 7px; vertical-align: 2px; }

.nav-status {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex: 0 0 auto;
}

.nav-avail {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 0.45rem 0.8rem;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 140ms var(--ease-snap), box-shadow 140ms var(--ease-snap), background 180ms var(--ease);
  white-space: nowrap;
}
.nav-avail:hover { background: var(--blue-ghost); color: var(--ink); }
.nav-avail:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.nav-avail .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (max-width: 980px) { .nav-avail { display: none; } }

/* Mobile nav toggle (hidden on desktop, injected by JS) */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 0.5rem 0.9rem;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
  background: var(--panel);
}
.nav-toggle:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-block; }
}

/* Full-screen mobile overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease);
}
.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.nav-overlay-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) clamp(1.25rem, 4vw, 2rem);
}

.nav-overlay-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--nav-h);
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}

.nav-close {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 2px 2px 0 var(--ink);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

.nav-menu {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1.2vw, 0.8rem);
}

.nav-menu a {
  font-family: var(--sans);
  font-weight: 900;
  font-stretch: 122%;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 10vw, 4.5rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease), transform 480ms var(--ease);
}
.nav-menu a .idx {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}
.nav-overlay.is-open .nav-menu a {
  opacity: 1;
  transform: none;
}
.nav-overlay.is-open .nav-menu a:nth-child(1) { transition-delay: 60ms; }
.nav-overlay.is-open .nav-menu a:nth-child(2) { transition-delay: 110ms; }
.nav-overlay.is-open .nav-menu a:nth-child(3) { transition-delay: 160ms; }
.nav-overlay.is-open .nav-menu a:nth-child(4) { transition-delay: 210ms; }
.nav-overlay.is-open .nav-menu a:nth-child(5) { transition-delay: 260ms; }
.nav-overlay.is-open .nav-menu a:nth-child(6) { transition-delay: 310ms; }

.nav-menu a.is-current { color: var(--blue); }

.nav-overlay-foot {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms var(--ease) 300ms, transform 480ms var(--ease) 300ms;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.nav-overlay.is-open .nav-overlay-foot {
  opacity: 1;
  transform: none;
}
.nav-overlay-foot a { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .nav-menu a,
  .nav-overlay-foot { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Reveal animations ---------- */

.fade {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
.fade.is-in { opacity: 1; transform: none; }

.stagger .line,
.stagger .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms var(--ease), transform 620ms var(--ease);
  will-change: opacity, transform;
}
.stagger.is-in .line,
.stagger.is-in .word {
  opacity: 1;
  transform: none;
}
.stagger .line { display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor-block { animation: none !important; opacity: 1 !important; }
  .fade, .stagger .word, .stagger .line { opacity: 1 !important; transform: none !important; transition: none !important; }
  body.page-fade, body.page-fade.is-leaving { opacity: 1 !important; transition: none !important; }
  .nav-avail .dot { animation: none; }
  .ticker-track, .marquee-clients .marquee-track, .footer .blink, .hero-foot .scroll-cue .arrow { animation: none !important; }
}

/* ---------- Hero (home) ---------- */

.hero {
  min-height: min(86svh, 780px);
  display: flex; flex-direction: column;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
  position: relative;
}

.hero h1 { font-size: clamp(2.6rem, 7vw, 6.25rem); line-height: 0.94; }

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-mid { flex: 1 1 auto; display: flex; align-items: center; }

.hero h1 {
  max-width: 100%;
  position: relative;
  z-index: 2;
}
.hero h1 a { color: inherit; }
.hero h1 .line { display: block; }
.hero h1 .line-move { color: var(--blue); position: relative; width: max-content; max-width: 100%; }
.hero h1 .line-move .cursor-block {
  display: inline-block;
  width: 0.5em;
  height: 0.78em;
  background: var(--blue);
  margin-left: 0.08em;
  vertical-align: baseline;
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }

.hero-sub {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 44ch;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Floating work window in the hero - draggable, cycles through shots. */
.hero-win {
  position: absolute;
  right: clamp(0rem, 4vw, 3rem);
  top: 18%;
  width: clamp(240px, 24vw, 380px);
  z-index: 3;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.hero-win.is-bouncing { right: auto; top: 0; left: 0; will-change: transform; }
.hero-win.is-dragging { cursor: grabbing; }
.hero-win .shot-frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-deep);
  position: relative;
}
.hero-win .shot-frame img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 420ms var(--ease);
}
.hero-win .shot-frame img.is-on { opacity: 1; }
.hero-win .win-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.85rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.hero-win .win-foot .cap { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .hero-win { display: none; }
}

.hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-wrap: wrap;
}

.hero-foot .scroll-cue {
  display: inline-flex; align-items: center; gap: 0.5rem;
  letter-spacing: 0.14em;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color 200ms var(--ease);
}
.hero-foot .scroll-cue:hover { color: var(--blue); }

.hero-foot .scroll-cue .arrow {
  display: inline-block;
  animation: scrollNudge 2.4s var(--ease) infinite;
}

@keyframes scrollNudge {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ---------- Ticker - blue system band ---------- */

.ticker {
  background: var(--blue);
  color: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.8rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 2.75rem;
  padding-left: 2.75rem;
  font-family: var(--mono);
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  animation: marquee 48s linear infinite;
  will-change: transform;
}

.ticker-track .sep { font-size: 0.6em; opacity: 0.8; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Section header ---------- */

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: clamp(2rem, 4.5vw, 3.5rem);
  gap: 2rem; flex-wrap: wrap;
}

.section-head .head-r {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- Work grid - framed windows ---------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  margin: 0; padding: 0;
  list-style: none;
}

@media (max-width: 1080px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .work-grid { grid-template-columns: 1fr; } }

.work-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform 220ms var(--ease-snap), box-shadow 220ms var(--ease-snap);
}
.work-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-blue);
  color: inherit;
}
.work-card:active { transform: translate(0, 0); box-shadow: var(--shadow-sm); }

.work-card .frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.work-card .frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.work-card:hover .frame img { transform: scale(1.045); }

.work-card .frame--logo {
  background: var(--dark);
  display: flex; align-items: center; justify-content: center;
  padding: 2.25rem;
}
.work-card .frame--logo img {
  object-fit: contain;
  width: 72%; height: auto;
  max-height: 60%;
}

.work-card .card-body {
  padding: 0.95rem 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.work-card .name {
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 114%;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.05;
  letter-spacing: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.work-card .name .arrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.85em;
  color: var(--blue);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.work-card:hover .name .arrow { opacity: 1; transform: none; }

.work-card .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Filter chips row (work page) */
.filter-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.filter-chip {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 0.5rem 0.95rem;
  box-shadow: 2px 2px 0 var(--ink);
  transition: background 160ms var(--ease), color 160ms var(--ease),
              transform 120ms var(--ease-snap), box-shadow 120ms var(--ease-snap);
}
.filter-chip:hover { background: var(--blue-ghost); }
.filter-chip:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
.filter-chip[aria-pressed="true"] {
  background: var(--blue);
  color: #fff;
}
.filter-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.work-grid .is-filtered-out { display: none; }

/* ---------- Client logos - dark band marquee ---------- */

.marquee-clients {
  background: var(--dark);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.marquee-clients .marquee-clip {
  overflow: hidden;
  white-space: nowrap;
  padding: clamp(1.5rem, 2.4vw, 2.25rem) 0;
}
.marquee-clients .band-label {
  position: absolute;
  top: 0; left: var(--gutter);
  transform: translateY(-50%);
  background: var(--dark);
  border: 1px solid var(--paper);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  z-index: 2;
}
.marquee-clients .marquee-track {
  display: inline-flex;
  gap: 0;
  animation: marquee 60s linear infinite;
  will-change: transform;
}
/* Freeze the belt while the cursor is over it - easier to aim at a logo. */
.marquee-clients:hover .marquee-track { animation-play-state: paused; }
.client-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 clamp(1.5rem, 2.5vw, 2.25rem);
}
.client-logo {
  height: clamp(1.4rem, 2.4vw, 1.9rem);
  width: auto;
  max-width: clamp(7rem, 12vw, 10rem);
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: opacity 220ms var(--ease);
}
.client-logo:hover { opacity: 1; }
@media (max-width: 540px) {
  .client-cell { padding: 0 1.1rem; }
  .client-logo { height: 1.35rem; max-width: 6.5rem; }
  .marquee-clients .marquee-clip { padding: 1.1rem 0; }
}

/* ---------- Home: paired About + Services panels ---------- */

.home-pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  align-items: stretch;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.panel .panel-body {
  padding: clamp(1.25rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.panel h3 {
  margin: 0.9rem 0 0.9rem;
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 114%;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.05;
  max-width: 20ch;
}
.panel p {
  margin: 0 0 1.4rem 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 44ch;
}
.panel .panel-links {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

@media (max-width: 820px) {
  .home-pair-grid { grid-template-columns: 1fr; }
}

/* ---------- CTA - the big blue screen ---------- */

.cta {
  background: var(--blue);
  color: #fff;
  border-top: 1px solid var(--line);
  padding: clamp(5rem, 11vw, 9.5rem) var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta .display { color: #fff; position: relative; z-index: 1; }

.cta .sub {
  margin: 1.5rem auto 0;
  max-width: 44ch;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

.cta .email-link {
  display: inline-block;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 1rem 1.75rem;
  transition: transform 140ms var(--ease-snap), box-shadow 140ms var(--ease-snap), background 180ms var(--ease);
  position: relative;
  z-index: 1;
}
.cta .email-link:hover { background: #fff; color: var(--blue); }
.cta .email-link:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }

.cta .cta-foot {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  position: relative;
  z-index: 1;
}
.cta .cta-foot a { color: rgba(255,255,255,0.85); }
.cta .cta-foot a:hover { color: #fff; }

/* ---------- Subscribe strip ---------- */

.subscribe {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.subscribe-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.subscribe-text h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 114%;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.05;
}
.subscribe-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 180ms var(--ease-snap);
}
.subscribe-row:focus-within { box-shadow: 3px 3px 0 var(--blue); }
.subscribe-form input[type="email"] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0.95rem 1rem;
  font: 400 15px/1.4 var(--mono);
  color: var(--ink);
  outline: none;
}
.subscribe-form input[type="email"]::placeholder {
  color: var(--ink-muted);
  opacity: 0.7;
}
.subscribe-form button {
  background: var(--ink);
  border: 0;
  border-left: 1px solid var(--line);
  padding: 0 1.25rem;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms var(--ease);
}
.subscribe-form button:hover { background: var(--blue); color: #fff; }
.subscribe-form button:disabled { opacity: 0.5; cursor: progress; }
.subscribe-form { position: relative; }
.subscribe-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0.55rem 0 0;
  min-height: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

@media (max-width: 720px) {
  .subscribe-inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- Footer - status bar ---------- */

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0 var(--gutter);
  min-height: var(--bar-h);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
  background: var(--paper);
  flex-wrap: wrap;
}

.footer .seg {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0;
}
.footer .seg + .seg { border-left: 1px solid var(--line-soft); padding-left: 1rem; }
.footer .foot-l, .footer .foot-r { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer .dot-g { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.footer a { color: var(--ink); }
.footer .blink { animation: blink 1.2s steps(1) infinite; color: var(--blue); }

@media (max-width: 640px) {
  .footer { padding-top: 0.35rem; padding-bottom: 0.35rem; }
  .footer .seg-time { display: none; }
}

/* ---------- Page header (interior pages) ---------- */

.page-header {
  padding-top: calc(var(--nav-h) + clamp(1.75rem, 3.5vw, 3rem));
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.page-header .label { display: block; margin-bottom: clamp(0.75rem, 1.4vw, 1.1rem); }
.page-header .hero-sub { margin-top: clamp(1.25rem, 2vw, 1.75rem); }


/* ---------- Case (work detail) ---------- */

.case-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 900px) {
  .case-row { grid-template-columns: 1fr; gap: 1.75rem; }
}

.case-win {
  display: block;
  max-width: 100%;
}
a.case-win {
  transition: transform 220ms var(--ease-snap), box-shadow 220ms var(--ease-snap);
}
a.case-win:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-blue);
  color: inherit;
}
a.case-win .frame img { transition: transform 700ms var(--ease); }
a.case-win:hover .frame img { transform: scale(1.03); }

.case-copy .label { display: block; margin-bottom: 1rem; }
.case-copy p {
  font-size: 1.02rem;
  line-height: 1.75;
  margin: 0 0 1.3em 0;
  color: var(--ink-soft);
  max-width: 58ch;
}
.case-copy p:last-child { margin-bottom: 0; }
.case-copy .visit {
  margin-top: 1.6rem;
}

.case-win .frame {
  background: var(--paper-deep);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.case-win .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-win .frame--logo {
  background: var(--dark);
  display: flex; align-items: center; justify-content: center;
}
.case-win .frame--logo img {
  width: auto; height: auto;
  max-width: 60%; max-height: 45%;
  object-fit: contain;
}

.case-meta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.case-meta > div {
  padding: 1rem 1.1rem;
  min-width: 0;
}
.case-meta > div + div { border-left: 1px solid var(--line-soft); }
.case-meta .label { display: block; margin-bottom: 0.45rem; font-size: 9.5px; }
.case-meta .val {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.45;
  overflow-wrap: break-word;
}

@media (max-width: 820px) {
  .case-meta { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .case-meta > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; }
  .case-meta > div + div { border-left: 0; }
  .case-meta > div:nth-child(even) { border-left: 1px solid var(--line-soft); }
  .case-meta > div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}

.case-body {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.case-body .col-l .label { display: block; margin-bottom: 1rem; }
.case-body .col-r p {
  font-size: 1.02rem;
  line-height: 1.75;
  margin: 0 0 1.3em 0;
  color: var(--ink-soft);
  max-width: 62ch;
}
.case-body .col-r p:last-child { margin-bottom: 0; }

.shot {
  position: relative;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  width: 100%;
  overflow: hidden;
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.shot-grid .shot { aspect-ratio: 4 / 5; }
@media (max-width: 820px) { .shot-grid { grid-template-columns: 1fr; } }

.case-next {
  border-top: 1px solid var(--line);
  margin-top: clamp(4rem, 8vw, 7rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1.5rem;
}
.case-next .label { display: block; margin-bottom: 0.6rem; }
.case-next .next-name {
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 114%;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1;
}

/* ---------- Info sections (about / services / pricing) ---------- */

.lede p {
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 114%;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.2vw, 2.75rem);
  line-height: 1.08;
  margin: 0 0 1.2em 0;
  max-width: 30ch;
}
.lede .accent { color: var(--blue); }

.info-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.info-grid + .info-grid { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.info-grid .col-l .label { display: block; margin-bottom: 1.1rem; }
.info-grid .col-l h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 114%;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.3vw, 1.9rem);
  line-height: 1.08;
  max-width: 18ch;
}
.info-grid .col-r p {
  font-size: 1.02rem;
  line-height: 1.75;
  margin: 0 0 1.4em 0;
  color: var(--ink-soft);
  max-width: 62ch;
}
.info-grid .col-r p:last-child { margin-bottom: 0; }
.info-grid .col-r em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

@media (max-width: 820px) {
  .info-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* Anchored pricing blocks land clear of the fixed nav */
.info-grid[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* Mono deliverables line under service/pricing copy */
.inc {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.inc::before { content: "\2192  "; color: var(--blue); }

/* Facts strip - spec cells */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  margin-top: clamp(4rem, 8vw, 6rem);
}
.facts .fact {
  padding: clamp(1.25rem, 2.4vw, 2rem);
}
.facts .fact + .fact { border-left: 1px solid var(--line); }
.facts .fact .label { display: block; margin-bottom: 0.6rem; }
.facts .fact .val {
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 114%;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  color: var(--ink);
  line-height: 1.12;
}
@media (max-width: 820px) {
  .facts { grid-template-columns: 1fr; }
  .facts .fact + .fact { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Closer note ---------- */

.closer {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
  text-align: center;
}
.closer p {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.contact-left .display-md { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); max-width: 22ch; }
.contact-left .meta-line { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; margin-bottom: 0.5rem; color: var(--ink); }
.contact-left .meta-line.muted { color: var(--ink-muted); font-size: 12px; }

.form-shell { position: relative; }
.form-shell .form,
.form-shell .form-success {
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.form-shell .form.is-leaving {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}
.form-shell .form-success {
  opacity: 0;
  transform: translateY(6px);
}
.form-shell .form-success.is-on {
  opacity: 1;
  transform: none;
}
.form[hidden], .form-success[hidden] { display: none !important; }

.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.25rem, 2.4vw, 2rem);
}
.field { display: flex; flex-direction: column; gap: 0.55rem; position: relative; }
.field label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color 200ms var(--ease);
}
.field:focus-within label { color: var(--blue); }
.field input, .field select, .field textarea {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0.8rem 0.9rem;
  font: 400 15px/1.45 var(--sans);
  color: var(--ink);
  border-radius: 0; outline: none;
  transition: box-shadow 180ms var(--ease-snap), background 180ms var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-muted); opacity: 0.6; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
  cursor: pointer;
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field select:focus, .field textarea:focus {
  background: var(--panel);
  box-shadow: 3px 3px 0 var(--blue);
}

/* Multi-select chips */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding-top: 0.35rem;
}
.checkbox-group label {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
  user-select: none;
  line-height: 1;
  box-shadow: 2px 2px 0 var(--ink);
  transition: background 160ms var(--ease), color 160ms var(--ease),
              transform 120ms var(--ease-snap), box-shadow 120ms var(--ease-snap);
}
.checkbox-group label:hover { background: var(--blue-ghost); }
.checkbox-group label:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
.checkbox-group input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0; opacity: 0;
  pointer-events: none;
}
.checkbox-group label:has(input[type="checkbox"]:checked) {
  background: var(--blue);
  color: #fff;
}
.checkbox-group label:focus-within {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.submit {
  align-self: flex-start;
  margin-top: 0.5rem;
  background: var(--blue);
  color: #fff;
  border: 1px solid var(--line);
  padding: 0.95rem 1.75rem;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 180ms var(--ease), transform 140ms var(--ease-snap), box-shadow 140ms var(--ease-snap);
}
.submit:hover { background: var(--blue-deep); }
.submit:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--ink); }
.submit:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.submit:disabled { opacity: 0.55; cursor: progress; }

.form-success { padding: clamp(1.25rem, 2.4vw, 2rem); }

@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- Testimonial ---------- */

.testi .testi-win {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 760px;
}
.testi blockquote {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem) 0;
}
.testi blockquote p {
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
}
.testi figure { margin: 0; }
.testi figcaption {
  padding: 1.1rem clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
}

/* ---------- FAQ - OS accordion rows ---------- */

.faq {
  margin-top: clamp(3rem, 6vw, 5rem);
  /* Anchor landing: keep the section top clear of the fixed nav. */
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.faq .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.faq details {
  border: 1px solid var(--line);
  background: var(--panel);
  margin-bottom: -1px;
}
.faq details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.02rem;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.faq details summary::-webkit-details-marker { display: none; }
.faq details summary::before {
  content: "+";
  font-family: var(--mono);
  font-weight: 600;
  color: var(--blue);
  flex: 0 0 auto;
}
.faq details[open] summary::before { content: "\2013"; }
.faq details summary:hover { background: var(--blue-ghost); }

.faq details .faq-a {
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  padding: 1rem 1.2rem 1.25rem 2.6rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 68ch;
}
.faq details .faq-a a { text-decoration: underline; text-underline-offset: 3px; }
.faq details .faq-a a:hover { color: var(--blue); }

/* ---------- Partner portal ---------- */

.portal-wrap {
  min-height: calc(100svh - var(--nav-h) - var(--bar-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 3rem;
}

.portal-win { width: min(440px, 100%); }
.portal-body { padding: clamp(1.5rem, 3vw, 2.25rem); }
.portal-body .label { display: block; margin-bottom: 1rem; }
.portal-body h1 {
  margin: 0 0 0.75rem;
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 114%;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.02;
}
.portal-body .sub {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  line-height: 1.7;
  margin: 0 0 1.5rem;
}
.portal-field { display: flex; gap: 0; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-sm); transition: box-shadow 180ms var(--ease-snap); }
.portal-field:focus-within { box-shadow: 3px 3px 0 var(--blue); }
.portal-field input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  padding: 0.9rem 1rem;
  font: 500 15px/1.4 var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink);
}
.portal-field button {
  background: var(--ink); color: var(--paper);
  border: 0; border-left: 1px solid var(--line);
  padding: 0 1.25rem;
  font-family: var(--mono); font-weight: 600; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms var(--ease);
}
.portal-field button:hover { background: var(--blue); }
.portal-status {
  min-height: 1.4em;
  margin: 0.8rem 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--blue);
}
.portal-win.is-denied { animation: deny 320ms var(--ease-snap); }
@keyframes deny {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  55% { transform: translateX(6px); }
  80% { transform: translateX(-3px); }
}

/* Unlocked view */
.portal-open { width: min(760px, 100%); }
.portal-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.portal-tiles a,
.portal-tiles button {
  padding: 1.4rem 1.2rem;
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line-soft);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 160ms var(--ease);
}
.portal-tiles a:last-child,
.portal-tiles button:last-child { border-right: 0; }
.portal-tiles a:hover,
.portal-tiles button:hover { background: var(--blue-ghost); color: inherit; }
.portal-tiles .t {
  font-family: var(--sans); font-weight: 800; font-stretch: 114%;
  text-transform: uppercase; font-size: 1rem; display: block; margin-bottom: 0.4rem;
}
.portal-tiles .d {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--ink-muted); line-height: 1.6;
}
@media (max-width: 700px) {
  .portal-tiles { grid-template-columns: 1fr; }
  .portal-tiles a,
  .portal-tiles button { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .portal-tiles a:last-child,
  .portal-tiles button:last-child { border-bottom: 0; }
}

/* ---------- Modals - in-portal forms ---------- */

.modal-ov {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(16, 16, 16, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  opacity: 0;
  transition: opacity 240ms var(--ease);
}
.modal-ov.is-open { opacity: 1; }
.modal-ov[hidden] { display: none; }

.modal-win {
  width: min(560px, 100%);
  max-height: min(88svh, 900px);
  overflow-y: auto;
  transform: translateY(10px);
  transition: transform 240ms var(--ease);
}
.modal-ov.is-open .modal-win { transform: none; }

.modal-close {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 0.35rem 0.7rem;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  flex: 0 0 auto;
}
.modal-close:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }

.modal-body { padding: clamp(1.25rem, 3vw, 1.75rem); }
.modal-body .display-sm { margin-bottom: 1.25rem; }
.modal-body .form { padding: 0; }
.modal-body .modal-success p {
  margin: 0.75rem 0 0;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 540px) {
  .modal-ov { align-items: flex-end; padding: 0; }
  .modal-win { max-height: 92svh; width: 100%; box-shadow: none; border-left: 0; border-right: 0; border-bottom: 0; }
}

/* ---------- Screensaver - idle easter egg ---------- */

.saver {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--ease);
  overflow: hidden;
}
.saver.is-on { opacity: 1; pointer-events: auto; cursor: none; }

.saver-logo {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--sans);
  font-weight: 900;
  font-stretch: 122%;
  text-transform: uppercase;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--blue);
  will-change: transform;
  white-space: nowrap;
}
.saver-logo sup { font-size: 0.32em; font-weight: 600; }

.saver-hint {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(235, 233, 225, 0.4);
  white-space: nowrap;
}

/* ---------- Visually hidden ---------- */

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ---------- Small-screen adjustments ---------- */

@media (max-width: 820px) {
  :root { --nav-h: 56px; }
  .wordmark { font-size: 18px; }
  .hero { min-height: min(66svh, 780px); }
  .display { font-size: clamp(1.9rem, 9vw, 3.2rem); }
}

/* ---------- Blue masthead ----------
   The top of every page is the brand plate: white BIGLOW on blue, the same
   lockup that goes out on invoices and in email. Paper picks up again under
   the ticker on the home page, and under the header everywhere else. */
.nav { background: var(--blue); border-bottom-color: var(--blue); }
.nav .wordmark,
.nav-links a { color: var(--panel); }
.nav-avail {
  color: var(--panel);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.4);
}
.nav-avail:hover { background: rgba(255, 255, 255, 0.18); }

.hero {
  background: var(--blue);
  color: var(--panel);
  min-height: 0;
  padding-top: calc(var(--nav-h) + clamp(2rem, 4.5vw, 3.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hero-top { margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem); }
.hero .label { color: rgba(255, 255, 255, 0.72); }
.hero .display,
.hero .display a,
.hero .type-word { color: var(--panel); }
.hero .cursor-block { background: var(--panel); }
.hero h1.display {
  font-size: clamp(2.8rem, 9vw, 8rem);
  letter-spacing: -0.035em;
  line-height: 0.9;
}
.hero .hero-sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  max-width: 34ch;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

/* The window now sits on the plate, so it takes a white edge rather than the
   ink one, and the drop shadow goes to a deeper blue-black. */
.hero-win {
  top: auto;
  bottom: auto;
  right: clamp(1rem, 5vw, 4rem);
  width: clamp(260px, 26vw, 400px);
  height: auto;
  border-color: var(--panel);
  box-shadow: 12px 12px 0 rgba(6, 8, 60, 0.45);
}
.hero-win .win-bar { background: var(--panel); }

/* Blue under blue reads flat, so the ticker carries the plate into ink. */
.ticker {
  background: var(--ink);
  color: var(--paper);
  border-top-color: var(--ink);
  border-bottom-color: var(--ink);
}
.ticker .sep { color: var(--blue); }

/* Inner pages: the header block is the plate. */
.page-header {
  background: var(--blue);
  color: var(--panel);
  padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.page-header .label { color: rgba(255, 255, 255, 0.72); }
.page-header .display,
.page-header h1 { color: var(--panel); }
.page-header .hero-sub,
.page-header > p { color: rgba(255, 255, 255, 0.88); }

/* The about and services frames already read as windows; the title bars were
   repeating the same three dots a third and fourth time, so they lose them. */
.home-pair .win-bar { min-height: 0; padding: 0.45rem 0.85rem; }
.home-pair .win-dots { display: none; }

/* The current-page link was blue, which disappears against the plate. */
.nav-links a.is-current { color: var(--panel); }

/* Give whatever follows the plate a little air, so filter rows and opening
   statements do not butt straight up against the blue. */
.page-header + section { padding-top: clamp(1.25rem, 2.5vw, 2rem); }

/* The nav slides out of the way on the way down and comes straight back on
   the first upward scroll, so the plate is not permanently eating the top. */
.nav { transition: transform 320ms var(--ease-snap); }
.nav.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* Long-form legal copy, such as the privacy policy: one readable column. */
.legal {
  max-width: 72ch;
  padding-top: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.legal .updated {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.75rem;
}
.legal h2 {
  font-family: var(--sans);
  font-weight: 900;
  font-stretch: 122%;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: clamp(2.25rem, 4vw, 3rem) 0 0.85rem;
}
.legal p,
.legal li { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal li { margin-bottom: 0.45rem; }
.legal strong { color: var(--ink); font-weight: 700; }
.legal a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Accessibility ---------- */

/* Skip link: hidden until a keyboard user tabs to it. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  padding: 10px 14px; background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 13px; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--paper); }

/* Moving belts pause on hover or keyboard focus (WCAG 2.2.2). */
.ticker:hover .ticker-track,
.marquee-clip:focus-within .marquee-track { animation-play-state: paused; }

/* Homepage services summary */
.home-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.home-services li { background: var(--panel); padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.home-services h3 { margin: 0 0 0.5rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.home-services p { margin: 0; color: var(--ink-soft); }
@media (max-width: 900px) { .home-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .home-services { grid-template-columns: 1fr; } }
.section-head h2.label { margin: 0; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.14em; }

/* Instagram: footer icon, contact link, homepage feed */
.footer .foot-ig { display: inline-flex; align-items: center; color: var(--ink); }
.footer .foot-ig:hover, .footer .foot-ig:focus-visible { color: var(--blue); }
.ig-icon { display: inline-block; vertical-align: -3px; }
.contact-social { margin-top: 1.5rem; }
.contact-social a { display: inline-flex; align-items: center; gap: 0.5rem; }
.ig-feed { min-height: 1px; }