/* ============================================================
   .shock — pages.css
   Session 3 deliverable. The NEW shared component classes the
   core public pages need (/work/, /about/, /pricing/, /contact/,
   /request-quote/, /models/, /locations/, /faq/).
   Builds on shock.css tokens/vars — does NOT redefine them and
   does NOT touch shock.css.
   Brand authority: dotshock_master_prompt_EXECUTION.md §1 + §7.4–7.9.
   RULES baked in:
     · red (--red) used <=2% of surface area, NEVER on text
     · --faint is decorative ONLY — never body copy
     · all interactive states have visible :focus-visible (inherits
       the global red ring from shock.css)
     · AA contrast: body/secondary copy uses --text or --dim (>=4.5:1)
     · responsive: every grid collapses to a single column on mobile
     · max 4 editorial 1px red frame-lines per page — the components
       here that emit a red hairline are flagged inline so a page
       author can keep the page total <=4
   ============================================================ */

/* ============================================================
   1. PAGE-HERO — compact inner-page hero
   Shorter than the homepage/service hero. Used by /about/,
   /pricing/, /models/, /locations/, /faq/, /contact/.
   Tinted placeholder cover is optional (add .page-hero--cover).
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  /* Unified hero system — consistent height tiers (Editorial/Utility default) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(300px, 44vh, 460px);
  padding-block: clamp(40px, 7vw, 88px);
}
/* Height tiers — Section (detail / category) and Flagship (hubs / landings).
   Base .page-hero = Editorial/Utility. Homepage .hero + .svc-intro = Flagship;
   .svc-hero (service detail) = Section. Kept in numeric sync below. */
.page-hero--section  { min-height: clamp(380px, 58vh, 600px); }
.page-hero--flagship { min-height: clamp(520px, 82vh, 860px); }
@media (max-width: 720px) {
  .page-hero--flagship { min-height: clamp(440px, 72vh, 600px); }
  .page-hero--section  { min-height: clamp(320px, 50vh, 460px); }
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
}
.page-hero__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-hero__kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--red); /* editorial frame-line (counts toward the 4/page max) */
}
.page-hero h1,
.page-hero__inner h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  max-width: 20ch;
}
.page-hero__sub {
  margin-top: 20px;
  font-size: clamp(1.02rem, 1.9vw, 1.28rem);
  color: var(--text);
  font-weight: 400;
  max-width: 56ch;
}
.page-hero__cta {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Optional tinted placeholder cover behind the hero text.
   Owner swaps by setting background-image on .page-hero__cover. */
.page-hero--cover { padding-block: clamp(72px, 11vw, 152px); }
.page-hero__cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(155deg, var(--ph-a, #20202a) 0%, var(--ph-b, #0e0e13) 100%);
}
/* Real <img>/<video> cover for SEO + LCP (sits over the gradient fallback) */
.page-hero__cover img,
.page-hero__cover video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero--cover .page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(12, 12, 15, 0.32) 0%, rgba(12, 12, 15, 0.12) 42%, rgba(12, 12, 15, 0.92) 100%),
    linear-gradient(90deg, rgba(12, 12, 15, 0.68) 0%, rgba(12, 12, 15, 0) 56%);
}
.page-hero__ph-note {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: var(--gutter);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint); /* decorative placeholder label — never body text */
  border: 1px dashed var(--line2);
  border-radius: 3px;
  padding: 3px 6px;
  opacity: 0.75;
}

/* ============================================================
   2. PROSE — readable text column (/about/, legal, FAQ intros)
   A single measured column for long-form editorial copy.
   ============================================================ */
.prose {
  max-width: 68ch;
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.7;
}
.prose > * + * { margin-top: 1.1em; }
.prose p { color: var(--dim); } /* AA contrast (>=4.5:1) on --surface/--panel */
.prose p.prose__lead {
  color: var(--text);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 32ch;
}
.prose h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 1.7em;
}
.prose h3 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 1.5em;
}
.prose a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line2);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) var(--ease);
}
.prose a:hover { text-decoration-color: var(--text); }
.prose strong, .prose b { color: var(--text); font-weight: 700; }
.prose ul { display: flex; flex-direction: column; gap: 10px; margin-top: 1.1em; }
.prose ul li {
  position: relative;
  padding-left: 22px;
  color: var(--dim);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--line2); /* neutral marker — not red, not faint text */
}
/* Compact factual rows (e.g. equipment list on /about/). */
.prose__spec {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) 1fr;
  gap: 4px 20px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  border-top: 1px solid var(--line);
  margin-top: 1.4em;
  padding-top: 1.2em;
}
.prose__spec dt { color: var(--dim); letter-spacing: 0.02em; }
.prose__spec dd { color: var(--text); margin: 0; }
.prose__spec dt + dd { margin-bottom: 8px; }

@media (max-width: 560px) {
  .prose__spec { grid-template-columns: 1fr; gap: 2px; }
  .prose__spec dd { margin-bottom: 12px; }
}

/* ============================================================
   3. SPLIT — two-column dual-audience layout
   For /models/ and /locations/ (client side | applicant side).
   A 1px hairline divider between the panels; stacks on mobile.
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.split__panel {
  background: var(--panel);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
}
/* The applicant/form side reads as the primary action — slightly raised. */
.split__panel--form { background: var(--panel2); }
.split__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 16px;
}
.split__title {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.split__body {
  margin-top: 16px;
  color: var(--dim);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 44ch;
}
.split__body + .split__body { margin-top: 12px; }
.split__cta { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }
/* When the panel holds a form, push the form to fill and the helper
   note to the bottom. */
.split__panel > .form { margin-top: 24px; }

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

/* ============================================================
   4. FORM SYSTEM
   .form .field .field__label .input .textarea .select
   .checkrow .btn-submit — visible focus + error states.
   Used by /request-quote/, /contact/, /models/, /locations/.
   ============================================================ */
.form { display: flex; flex-direction: column; gap: 22px; }

/* Two-up field rows on wider viewports. */
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; gap: 8px; }

.field__label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.005em;
}
/* Required marker — a glyph, not a red text colour (red never on text). */
.field__label .req {
  color: var(--red);
  margin-left: 2px;
  font-weight: 700;
}
.field__hint {
  font-size: 0.82rem;
  color: var(--dim); /* AA contrast — secondary helper text */
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

/* Shared control surface for input / textarea / select. */
.input,
.textarea,
.select {
  width: 100%;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  padding: 0.85em 1em;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: var(--dim); opacity: 1; }
.input:hover,
.textarea:hover,
.select:hover { border-color: var(--text); }

/* Focus — visible ring even for mouse users on form controls. */
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--text);
  background: var(--panel);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 28%, transparent);
}
/* Keyboard users still get the global red :focus-visible ring. */
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  box-shadow: none;
}

.textarea { min-height: 140px; resize: vertical; line-height: 1.55; }

/* Custom select chevron (drawn, not red). */
.select {
  padding-right: 2.6em;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--dim) 50%),
    linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.select option { background: var(--panel); color: var(--text); }

/* Error state — red border + a small mark, but the message text stays
   readable (--text), never red (§1/§7: red never on text). */
.field--error .input,
.field--error .textarea,
.field--error .select {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}
.field__error {
  display: none;
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
  align-items: center;
  gap: 7px;
}
.field--error .field__error { display: flex; }
.field__error::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red); /* small non-text indicator */
}

/* File input — styled, accessible, intentional placeholder state. */
.field__file {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px dashed var(--line2);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--surface);
  color: var(--dim);
  font-size: 0.9rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field__file:hover { border-color: var(--text); }
.field__file input[type="file"] { flex: 1; min-width: 0; color: var(--dim); font-size: 0.85rem; }
.field__file input[type="file"]::file-selector-button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--panel2);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  padding: 0.5em 1em;
  margin-right: 14px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.field__file input[type="file"]::file-selector-button:hover { border-color: var(--text); }

/* Checkbox / radio row (GDPR consent, multi-select tiles). */
.checkrow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.94rem;
  color: var(--dim);
  line-height: 1.5;
}
.checkrow input[type="checkbox"],
.checkrow input[type="radio"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--red); /* native control tint only — not text */
  cursor: pointer;
}
.checkrow label,
.checkrow span { cursor: pointer; }
.checkrow a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* Selectable service/budget/timeline tiles (request-quote steps). */
.choicegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.choice {
  position: relative;
  display: flex;
  background: var(--panel);
  transition: background var(--dur) var(--ease);
}
.choice:hover { background: var(--panel2); }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice__face {
  flex: 1;
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius);
}
.choice__name { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.choice__sub { font-size: 0.86rem; color: var(--dim); line-height: 1.45; }
.choice input:checked ~ .choice__face {
  border-color: var(--red); /* selected outline — frame motif, no red text */
  background: color-mix(in srgb, var(--red) 7%, var(--panel));
}
.choice input:focus-visible ~ .choice__face {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}
/* Single-column choices on the cramped ~478–560px zone (most conversion-critical step). */
@media (max-width: 560px) {
  .choicegrid { grid-template-columns: 1fr; }
}
/* Unanswered required radio group on submit — non-text frame indicator. */
.choicegrid--error {
  box-shadow: 0 0 0 1px var(--red);
  border-radius: var(--radius);
}

/* Submit button — a filled primary action sized for forms. */
.btn-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--surface);
  background: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.95em 1.7em;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-submit:hover { background: #fff; transform: translateY(-1px); }
.btn-submit:active { transform: translateY(0); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Form-level success / error banners (after submit). */
.form__note {
  border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line2));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--green) 6%, var(--panel2));
  padding: 16px 18px;
  font-size: 0.95rem;
  color: var(--text);
}
.form__note--error {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line2));
  background: color-mix(in srgb, var(--red) 6%, var(--panel2));
}

/* Inline success panel that replaces a network-form after a valid submit
   (models / locations applications). Mirrors .form__note treatment. */
.form-success {
  border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--green) 6%, var(--panel2));
  padding: clamp(20px, 3vw, 28px);
}
.form-success:focus { outline: none; }
.form-success__badge {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.form-success p:last-child { color: var(--text); line-height: 1.6; }

/* ============================================================
   5. RATE CARDS — pricing (/pricing/, /bs/pricing/)
   3-column card grid, each a panel with a line-item list.
   ============================================================ */
.ratecard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.ratecard {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  padding: clamp(26px, 3vw, 36px);
  transition: background var(--dur) var(--ease);
}
.ratecard:hover { background: var(--panel2); }
/* One featured card (e.g. Combined photo+video) gets a quiet red top rule. */
.ratecard--featured { background: var(--panel2); }
.ratecard--featured::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--red); /* frame-line (counts toward the 4/page max) */
  margin-bottom: 20px;
}
.ratecard__kind {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
}
.ratecard__name {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.ratecard__anchor {
  margin-top: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.96rem;
  color: var(--dim);
}
.ratecard__anchor b { color: var(--text); font-weight: 700; }
.ratecard__lines {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}
.ratecard__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 0.95rem;
}
.ratecard__line dt { color: var(--dim); flex: 1; }
.ratecard__line dd {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  white-space: nowrap;
  text-align: right;
}
.ratecard__foot {
  margin-top: auto;
  padding-top: 22px;
}
/* Small "from" tag for emphasised lead prices. */
.ratecard__from {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

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

/* ============================================================
   6. FAQ — accessible accordion (/pricing/, /faq/)
   Native <details>/<summary> = keyboard + screen-reader free.
   Works fully without JS; JS only enhances (single-open, etc.).
   ============================================================ */
.faq {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 880px;
}
.faq-item {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.faq-item:last-child { border-bottom: 0; }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px clamp(20px, 3vw, 28px);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: background var(--dur) var(--ease);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--panel2); }
.faq-item > summary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}
/* Plus/minus glyph, drawn from two bars (not red). */
.faq-item__icon {
  flex: none;
  position: relative;
  width: 16px;
  height: 16px;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--dim);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq-item__icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq-item__icon::after  { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.faq-item[open] .faq-item__icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq-item[open] > summary { color: var(--text); }
.faq-item[open] .faq-item__icon::before { background: var(--text); }

.faq-item__body {
  padding: 0 clamp(20px, 3vw, 28px) 24px;
  color: var(--dim); /* AA contrast secondary copy */
  font-size: 0.98rem;
  line-height: 1.62;
  max-width: 62ch;
}
.faq-item__body p + p { margin-top: 0.9em; }
.faq-item__body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   7. FILTER TABS — portfolio tabs (/work/)
   5 tabs, horizontal scroll on mobile, no dropdowns.
   Implement as <button role="tab"> in a role="tablist".
   ============================================================ */
.filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
  margin-bottom: 14px;
}
/* Per-category capability line under the work filters */
.work-cap {
  font-size: 0.92rem; color: var(--dim); line-height: 1.5;
  margin: 0 0 clamp(20px, 3.5vw, 34px); max-width: 60ch;
  transition: opacity var(--dur) var(--ease);
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
  position: relative;
  flex: none;
  background: none;
  border: 0;
  padding: 12px 14px 16px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--dim);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.filter-tab:hover { color: var(--text); }
.filter-tab::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--red); /* active underline — frame motif, never text */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.filter-tab[aria-selected="true"] {
  color: var(--text);
}
.filter-tab[aria-selected="true"]::after { transform: scaleX(1); }
.filter-tab:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -3px;
  border-radius: 2px;
}
/* Optional count chip beside a tab label. */
.filter-tab__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
  margin-left: 6px;
}

/* ============================================================
   8. MASONRY — portfolio grid (3col / 2col / 1col)
   CSS columns give a natural masonry for mixed portrait/landscape
   crops without JS. Items must avoid breaking across columns.
   ============================================================ */
.masonry {
  column-count: 3;
  column-gap: 14px;
}
.masonry-item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 14px;
  break-inside: avoid;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  isolation: isolate;
  cursor: pointer;
}
/* CRITICAL: an author display rule above beats the UA [hidden] rule, so the
   filter's item.hidden=true wouldn't actually hide tiles. Restore it. */
.masonry-item[hidden] { display: none !important; }
/* Video tiles: a real clip that plays on hover; its own first frame is the poster */
.masonry-item__video {
  display: block; width: 100%; aspect-ratio: var(--ar, 16/9);
  object-fit: cover; background: #0c0c0f;
  transition: transform 0.5s var(--ease);
}
.masonry-item.is-video:hover .masonry-item__video { transform: scale(1.04); }
/* Intentional tinted placeholder until owner supplies the original.
   Owner swaps by setting background-image on .masonry-item__cover and
   removing the .masonry-item__ph-note. Aspect ratios vary per item via
   an inline --ar (e.g. style="--ar:4/5"). */
.masonry-item__cover {
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 4 / 5);
  background:
    linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);
  transition: transform 0.5s var(--ease);
}
.masonry-item__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}
.masonry-item img,
.masonry-item video {
  display: block;
  width: 100%;
  height: auto;
}
.masonry-item:hover .masonry-item__cover,
.masonry-item:hover img { transform: scale(1.04); }
.masonry-item__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(12, 12, 15, 0) 55%, rgba(12, 12, 15, 0.5) 100%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.masonry-item:hover .masonry-item__scrim { opacity: 1; }
.masonry-item:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
/* Video item — play glyph overlay; clip autoplays muted on hover via JS. */
.masonry-item__play {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  display: grid;
  place-items: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.masonry-item__play svg { width: 14px; height: 14px; color: var(--text); margin-left: 2px; }
.masonry-item__ph-note {
  position: absolute;
  z-index: 2;
  bottom: 12px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint); /* decorative placeholder label — never body text */
  border: 1px dashed var(--line2);
  border-radius: 3px;
  padding: 3px 6px;
  opacity: 0.7;
}

@media (max-width: 900px) {
  .masonry { column-count: 2; }
}
@media (max-width: 560px) {
  .masonry { column-count: 1; }
}

/* Load-more footer for the grid. */
.masonry-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 44px);
}

/* ============================================================
   9. LIGHTBOX — fullscreen overlay (/work/)
   Minimal. Near-black backdrop. Media fills viewport. Arrow nav,
   ESC to close, swipe on mobile. Single CTA at the bottom.
   Hidden by default; JS toggles [hidden] / .is-open.
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 8, 0.96);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox[hidden] { display: none; }

.lightbox__stage {
  position: relative;
  max-width: min(92vw, 1400px);
  max-height: 84vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__media {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  background: var(--panel);
}
/* Placeholder media inside the lightbox keeps a sensible frame size. */
.lightbox__media--ph {
  width: min(80vw, 900px);
  aspect-ratio: 3 / 2;
  background:
    linear-gradient(155deg, #1c1c24 0%, #101015 100%);
}

/* Controls. */
.lightbox__btn {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line2);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lightbox__btn:hover { border-color: var(--text); background: var(--panel2); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__close { top: clamp(16px, 4vh, 32px); right: clamp(16px, 4vw, 32px); }
.lightbox__prev  { left: clamp(8px, 3vw, 28px);  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: clamp(8px, 3vw, 28px); top: 50%; transform: translateY(-50%); }
.lightbox__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Position counter + single action — no title/caption/metadata. */
.lightbox__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 4vh, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-inline: var(--gutter);
}
.lightbox__count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dim);
}
/* The only CTA on the page per §7.4. Ghost button on dark backdrop. */
.lightbox__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  padding: 0.8em 1.4em;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lightbox__cta:hover { border-color: var(--text); background: var(--panel2); }
.lightbox__cta .arrow { transition: transform var(--dur) var(--ease); }
.lightbox__cta:hover .arrow { transform: translateX(4px); }

@media (max-width: 560px) {
  .lightbox__prev { left: 6px; }
  .lightbox__next { right: 6px; }
  .lightbox__btn { width: 42px; height: 42px; }
}

/* ============================================================
   SHARED — section intro helper used across S3 pages
   (a compact lead block above grids/forms; mirrors .section-head
   but reusable inside split panels and pricing intros).
   ============================================================ */
.page-lead {
  max-width: 64ch;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.page-lead p {
  color: var(--dim);
  font-size: 1.08rem;
  line-height: 1.6;
}
.page-lead p + p { margin-top: 0.9em; }

/* Step indicator for the multi-step /request-quote/ brief form. */
.stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: clamp(28px, 4vw, 40px);
}
.stepper__step { display: inline-flex; align-items: center; gap: 8px; }
.stepper__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  display: grid;
  place-items: center;
  color: var(--dim);
}
.stepper__step[aria-current="step"] .stepper__num {
  border-color: var(--red); /* current-step marker — outline only, no red text */
  color: var(--text);
}
.stepper__step[data-done="true"] .stepper__num { border-color: var(--text); color: var(--text); }
/* Completed steps become keyboard-focusable / clickable via quote.js — show the affordance. */
.stepper__step[data-done="true"] { cursor: pointer; }
.stepper__step[data-done="true"]:hover .stepper__num { border-color: var(--red); }
.stepper__step[role="button"]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}
.stepper__sep { width: 18px; height: 1px; background: var(--line2); }


/* ── Footer newsletter (sitewide) ───────────────────────────── */
.footer-news { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; justify-content: space-between;
  padding: 26px 0; margin: 8px 0 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.footer-news h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.footer-news p { color: var(--dim); font-size: 13.5px; margin: 0; max-width: 46ch; }
.news-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.news-form .input { min-width: 220px; }
.news-msg { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; color: var(--dim); }
@media (max-width: 640px){ .footer-news { flex-direction: column; align-items: flex-start; } .news-form { width: 100%; } .news-form .input { flex: 1; } }


/* Portfolio masonry slots (pre-wired) — /assets/portfolio/work-01..40.jpg.
   Image layered over the gradient fallback; nothing breaks until files exist. */
.masonry-item[data-index="0"] .masonry-item__cover{background:url("/assets/portfolio/work-01.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="1"] .masonry-item__cover{background:url("/assets/portfolio/work-02.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="2"] .masonry-item__cover{background:url("/assets/portfolio/work-03.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="3"] .masonry-item__cover{background:url("/assets/portfolio/work-04.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="4"] .masonry-item__cover{background:url("/assets/portfolio/work-05.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="5"] .masonry-item__cover{background:url("/assets/portfolio/work-06.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="6"] .masonry-item__cover{background:url("/assets/portfolio/work-07.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="7"] .masonry-item__cover{background:url("/assets/portfolio/work-08.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="8"] .masonry-item__cover{background:url("/assets/portfolio/work-09.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="9"] .masonry-item__cover{background:url("/assets/portfolio/work-10.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="10"] .masonry-item__cover{background:url("/assets/portfolio/work-11.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="11"] .masonry-item__cover{background:url("/assets/portfolio/work-12.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="12"] .masonry-item__cover{background:url("/assets/portfolio/work-13.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="13"] .masonry-item__cover{background:url("/assets/portfolio/work-14.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="14"] .masonry-item__cover{background:url("/assets/portfolio/work-15.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="15"] .masonry-item__cover{background:url("/assets/portfolio/work-16.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="16"] .masonry-item__cover{background:url("/assets/portfolio/work-17.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="17"] .masonry-item__cover{background:url("/assets/portfolio/work-18.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="18"] .masonry-item__cover{background:url("/assets/portfolio/work-19.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="19"] .masonry-item__cover{background:url("/assets/portfolio/work-20.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="20"] .masonry-item__cover{background:url("/assets/portfolio/work-21.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="21"] .masonry-item__cover{background:url("/assets/portfolio/work-22.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="22"] .masonry-item__cover{background:url("/assets/portfolio/work-23.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="23"] .masonry-item__cover{background:url("/assets/portfolio/work-24.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="24"] .masonry-item__cover{background:url("/assets/portfolio/work-25.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="25"] .masonry-item__cover{background:url("/assets/portfolio/work-26.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="26"] .masonry-item__cover{background:url("/assets/portfolio/work-27.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="27"] .masonry-item__cover{background:url("/assets/portfolio/work-28.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="28"] .masonry-item__cover{background:url("/assets/portfolio/work-29.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="29"] .masonry-item__cover{background:url("/assets/portfolio/work-30.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="30"] .masonry-item__cover{background:url("/assets/portfolio/work-31.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="31"] .masonry-item__cover{background:url("/assets/portfolio/work-32.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="32"] .masonry-item__cover{background:url("/assets/portfolio/work-33.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="33"] .masonry-item__cover{background:url("/assets/portfolio/work-34.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="34"] .masonry-item__cover{background:url("/assets/portfolio/work-35.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="35"] .masonry-item__cover{background:url("/assets/portfolio/work-36.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="36"] .masonry-item__cover{background:url("/assets/portfolio/work-37.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="37"] .masonry-item__cover{background:url("/assets/portfolio/work-38.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="38"] .masonry-item__cover{background:url("/assets/portfolio/work-39.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item[data-index="39"] .masonry-item__cover{background:url("/assets/portfolio/work-40.jpg") center/cover no-repeat, linear-gradient(155deg, var(--ph-a, #1c1c24) 0%, var(--ph-b, #101015) 100%);}
.masonry-item__ph-note{display:none;}

/* ============================================================
   PAGE-SUBNAV — sticky in-page anchor navigation
   Shared by all content pages. Inline variant on suite/tag was
   the prototype; now extracted here so every page can use it.
   ============================================================ */
.page-subnav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.page-subnav::-webkit-scrollbar { display: none; }
.pnav-inner {
  display: flex;
  white-space: nowrap;
}
.pnav-inner a {
  display: block;
  padding: 10px 15px;
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.pnav-inner a:hover,
.pnav-inner a.pnav-on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}