/* ==========================================================================
   THS Creative — Shared Design System
   One stylesheet for every page. Page-specific content lives in the page's
   own HTML; this file holds only the reusable framework: resets, theme
   tokens, typography, nav, hero, stat bar, capability cards, detail
   sections, culture/quote blocks, freelance form, CTA, footer, modal,
   theme switcher, and scroll-reveal animation.
   ========================================================================== */

/* Self-hosted Inter/Livvic — moved here from home.css 2026-07-06 so every page
   (not just the homepage) gets these from one place instead of the 8 subpages
   pulling the same two families from the Google Fonts CDN. Also closes a real
   coverage gap: the CDN link only requested Inter 400/600/900 and Livvic
   400/600 — anything else (Livvic 500/700, other Inter weights) was being
   browser-synthesized on subpages. This variable Inter file covers the full
   100-900 range; Livvic ships as four static weight files. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2'),
       url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Livvic';
  src: url('../fonts/Livvic-Regular.woff2') format('woff2'),
       url('../fonts/Livvic-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Livvic';
  src: url('../fonts/Livvic-Medium.woff2') format('woff2'),
       url('../fonts/Livvic-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Livvic';
  src: url('../fonts/Livvic-SemiBold.woff2') format('woff2'),
       url('../fonts/Livvic-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Livvic';
  src: url('../fonts/Livvic-Bold.woff2') format('woff2'),
       url('../fonts/Livvic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green: #6cc72b;
  --green-dark: #457f1b;
  --plum: #352332;
  --white: #ffffff;
  --gray-mid: #e0e0e0;
  --text: #1a1a1a;
  --text-muted: #666666;
  --yellow: #ffed24;
  /* --cream, --black, --gray-light added 2026-07-02 when the homepage moved onto
     this shared file — previously only declared in the homepage's own <style>
     block, meaning no other page had a variable for the official brand cream
     (Softbox Glow, #fffdde per the brand guide). Now every page can reference it. */
  --cream: #fffdde;
  --black: #111111;
  --gray-light: #f4f4f0;
  --radius: 12px;
  --s-bg: #ffffff;
  --s-text: #352332;
  --s-muted: #666666;
  --s-subtle: rgba(53,35,50,0.08);
  --s-border: rgba(53,35,50,0.1);
  --s-fade: #ffffff;
}
/* overscroll-behavior-x (not overflow-x) stops the horizontal rubber-band bounce from
   revealing html's green background past the page edge, WITHOUT touching overflow-x on
   html — that property was tried and reverted July 13, 2026: it broke WebKit's native
   momentum-scroll physics (scroll felt "stuck, small give, releases" — see decisions.md,
   July 10 entry). overscroll-behavior is a different mechanism (controls only the bounce/
   chaining animation at the scroll boundary, not the scroll container itself), so it
   shouldn't carry the same side effect — needs a real-device check same as everything else
   this sandbox can't verify with actual touch input. */
html { scroll-behavior: smooth; background: var(--green); overscroll-behavior-x: none; }
body { font-family: 'Livvic', sans-serif; color: var(--text); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; overscroll-behavior-x: none; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

.t-label { font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.04em; color: var(--green); }
h1, h2, h3 { font-family: 'Inter', sans-serif; font-weight: 900; letter-spacing: -0.02em; line-height: 1.0; }

/* ---- Nav ---- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--green); box-shadow: 0 2px 20px rgba(0,0,0,0.15); height: 60px; }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-logo img { height: 44px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 15px; color: var(--white); transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--yellow); }
.nav-dropdown-label { font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 15px; color: var(--white); cursor: default; }
.nav-dropdown:hover .nav-dropdown-label, .nav-dropdown:focus-within .nav-dropdown-label, .nav-dropdown-label.active { color: var(--yellow); }
.nav-dropdown { position: relative; }
.nav-caret { font-size: 9px; margin-left: 4px; opacity: 0.7; }
.nav-dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 230px; margin-top: 10px; padding: 8px; background: var(--plum); border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,0.25); list-style: none; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 50; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu li a { display: block; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #fff; border-radius: 6px; white-space: nowrap; }
.nav-dropdown-menu li a:hover { background: rgba(255,255,255,0.12); color: var(--yellow); }
.nav-cta { background: var(--white); color: var(--green-dark) !important; padding: 8px 20px; border-radius: var(--radius); }
.nav-cta:hover { background: var(--yellow); }
.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; z-index: 200; }
.nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Page hero ---- */
.page-hero { background: var(--plum); padding: 140px 32px 80px; }
.page-hero-inner { max-width: 1136px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.page-hero-left .t-label { color: var(--yellow); margin-bottom: 20px; }
.page-hero-left h1 { font-size: clamp(44px, 5vw, 72px); color: var(--white); line-height: 0.98; margin-bottom: 24px; }
.page-hero-left h1 em { font-style: normal; color: var(--green); }
.page-hero-left p { font-size: 18px; color: rgba(255,255,255,0.75); max-width: 480px; line-height: 1.65; margin-bottom: 32px; }
.btn-primary { background: var(--green); color: var(--white); padding: 14px 32px; border-radius: var(--radius); font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 16px; transition: background 0.2s, transform 0.15s; display: inline-block; }
.btn-primary:hover { background: var(--green-dark); transform: translateY(-1px); }

/* ---- About hero portal (circular fisheye shot, no card/box) ---- */
.about-hero-portal { position: relative; display: flex; align-items: center; justify-content: center; }
.about-hero-portal-img { display: block; width: 100%; height: auto; max-width: 739px; aspect-ratio: 1/1; object-fit: contain; transform: rotate(-4deg); filter: drop-shadow(0 24px 44px rgba(0,0,0,0.4)); }

/* ---- Page hero — video variant (full-bleed background video, homepage-style) ---- */
.page-hero--video { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.page-hero-video-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.page-hero-video-bg iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.page-hero-video-bg video, .page-hero-video-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero-video-overlay { position: absolute; inset: 0; background: rgba(53,35,50,0); z-index: 1; }
.page-hero--video .page-hero-inner { position: relative; z-index: 3; grid-template-columns: 1fr; width: 100%; }
.page-hero--video .page-hero-left { max-width: 640px; background: rgba(20,13,19,0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 16px; padding: 36px 40px; }

/* TEST — 30% plum overlay on video, no text panel (scoped to .page-hero--overlay-test only, added 2026-07-10) */
.page-hero--overlay-test .page-hero-video-overlay { background: rgba(53,35,50,0.3); }
.page-hero--overlay-test .page-hero-left { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; padding: 0; }

.media-placeholder { background: rgba(255,255,255,0.06); border: 2px dashed rgba(255,255,255,0.2); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255,255,255,0.4); font-family: 'Livvic', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; aspect-ratio: 4/3; }
.media-placeholder svg { width: 32px; height: 32px; stroke: rgba(255,255,255,0.3); fill: none; stroke-width: 1.5; }
.media-placeholder-light { background: var(--s-subtle); border: 2px dashed var(--s-border); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--s-muted); font-family: 'Livvic', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.media-placeholder-light svg { width: 28px; height: 28px; stroke: var(--s-muted); fill: none; stroke-width: 1.5; opacity: 0.5; }

/* ---- Stat bar ---- */
.stat-bar { background: var(--plum); padding: 40px 48px; }
.stat-bar-inner { max-width: 1136px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat-item { text-align: center; display: flex; flex-direction: column; align-items: center; }
.stat-number { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(36px, 4vw, 56px); color: var(--green); line-height: 0.9; letter-spacing: -0.03em; white-space: nowrap; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 8px; }
.stat-label { font-family: 'Livvic', sans-serif; font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 600; letter-spacing: 0.03em; }
.stat-bar--light { background: var(--s-bg); }
.stat-bar--light .stat-label { color: var(--s-text); opacity: 0.7; }

/* ---- Studio rental callout block ---- */
.studio-rental-section { background: var(--s-bg); padding: 40px 32px; }
@media (max-width: 640px) { .studio-rental-section { padding: 32px 20px; } }
.studio-rental-inner { max-width: 1136px; margin: 0 auto; }
.studio-block { background: var(--green); border: 1px solid var(--green); border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.studio-block-img { min-height: 320px; }
.studio-block-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.studio-block-text { padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.studio-block-text h3 { font-size: clamp(24px, 3vw, 36px); color: var(--white); margin-bottom: 12px; }
.studio-block-text p:not(.t-label) { font-size: 16px; color: rgba(255,255,255,0.9); max-width: 480px; line-height: 1.6; margin-bottom: 24px; }
.studio-block .btn-outline { border-color: var(--white); color: var(--white); align-self: flex-start; }
.studio-block .btn-outline:hover { background: var(--white); color: var(--green); }
.btn-outline { display: inline-block; border: 2px solid var(--green); color: var(--green); padding: 12px 28px; border-radius: var(--radius); font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 15px; transition: background 0.2s, color 0.2s; flex-shrink: 0; }
.btn-outline:hover { background: var(--green); color: var(--plum); }
@media (max-width: 640px) { .studio-block { grid-template-columns: 1fr; } .studio-block-img { min-height: 220px; } .studio-block-text { padding: 32px 24px; } }

/* ---- Capability cards ---- */
.capabilities { background: var(--s-bg); padding: 96px 32px; }
.capabilities-inner { max-width: 1136px; margin: 0 auto; }
.section-intro { max-width: 720px; margin-bottom: 80px; }
.section-intro h2 { font-size: clamp(32px, 4vw, 52px); color: var(--s-text); margin-bottom: 20px; }
.section-intro p:not(.t-label) { font-size: 18px; color: var(--s-text); line-height: 1.7; }
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px) { .cap-grid { grid-template-columns: 1fr 1fr; } }
.cap-card { background: var(--s-subtle); border: 1px solid var(--s-border); border-radius: 16px; padding: 36px; }
.cap-card-icon { width: 48px; height: 48px; background: var(--green); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.cap-card-icon svg { width: 19.2px; height: 19.2px; stroke: var(--white); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cap-card h3 { font-size: 20px; color: var(--s-text); margin-bottom: 10px; }

/* ---- Space grid (Production Studio) ---- */
.space-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.space-card { background: var(--plum); border-radius: 20px; overflow: hidden; }
.space-card-top { aspect-ratio: 16/9; }
.space-card-body { padding: 28px 32px; }
.space-card-body h3 { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 22px; color: var(--white); line-height: 0.9; letter-spacing: -0.02em; margin-bottom: 10px; }
.space-card-body p { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.6; }
.space-card-badge { display: inline-block; background: rgba(108,199,43,0.2); color: var(--green); font-family: 'Livvic', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; margin-bottom: 12px; }

/* Accent bar — same cycle as .service-card-accent (Studio Voltage / Idea Vine / Studio Grove) */
.space-card-accent { height: 7px; }
.space-grid .space-card:nth-child(3n+1) .space-card-accent { background: var(--yellow); }
.space-grid .space-card:nth-child(3n+2) .space-card-accent { background: var(--green); }
.space-grid .space-card:nth-child(3n+3) .space-card-accent { background: var(--green-dark); }

/* ---- Partners / testimonial grid ---- */
.partners { background: var(--s-subtle); padding: 96px 32px; }
.partners-inner { max-width: 1136px; margin: 0 auto; }
.partner-logos { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-top: 48px; }
.partner-logo-box { background: var(--s-bg); border: 1px solid var(--s-border); border-radius: 12px; width: 160px; height: 80px; display: flex; align-items: center; justify-content: center; font-family: 'Livvic', sans-serif; font-size: 12px; font-weight: 600; color: var(--s-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- Rental callout (green band) ---- */
.rental-cta { background: var(--s-bg); padding: 96px 32px; }
.rental-cta-inner { max-width: 1136px; margin: 0 auto; background: var(--green); border-radius: 24px; padding: 72px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.rental-cta-text .t-label { color: var(--plum); margin-bottom: 16px; opacity: 0.65; }
.rental-cta-text h2 { font-size: clamp(32px, 4vw, 52px); color: var(--plum); margin-bottom: 16px; line-height: 0.9; }
.rental-cta-text p { font-size: 17px; color: rgba(53,35,50,0.7); max-width: 480px; line-height: 1.6; }
.btn-rental { background: var(--plum); color: var(--white); padding: 16px 36px; border-radius: var(--radius); font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 16px; display: inline-block; white-space: nowrap; transition: background 0.2s; }
.btn-rental:hover { background: #251823; }
@media (max-width: 640px) {
  .space-grid { grid-template-columns: 1fr; }
  .rental-cta { padding: 64px 20px; }
  .rental-cta-inner { grid-template-columns: 1fr; padding: 40px 28px; }
  .partners { padding: 64px 20px; }
}

/* ---- Portfolio work grid (bento) ----
   True masonry via CSS multi-column layout (column-count), NOT css-grid row/column
   spanning. A grid-based bento (fixed-unit grid-auto-rows + landscape/portrait/square
   spans via grid-auto-flow:dense) was tried first and reliably left gaps: dense
   packing is a greedy left-to-right fill, not a real bin-packer, so mixing 3-wide and
   2-wide tiles in a 6-column track leaves single-column holes dense can't backfill
   (no 1-wide tiles exist to plug them) — 36 empty cells out of 426 in testing, mostly
   stacked in the trailing column. Multi-column layout sidesteps the problem entirely:
   each column is an independent flow that stacks items top-to-bottom with zero gap
   between them, so there is nothing to leave empty. Each tile's real aspect ratio
   drives its height directly (width:100%, height:auto on the <img> — no forced
   aspect-ratio, no object-fit:cover, no cropping) so no landscape/portrait/square
   classing is needed either; the browser just lays out whatever the image actually is.
   work-item--feature uses column-span:all for an occasional full-width break in the
   masonry — the one layout trick multi-column supports for a "hero slot" without
   reintroducing 2D packing risk. */
.work-section { padding: 96px 32px; }
/* Portfolio page drops the .work-header entirely (it duplicated the .page-hero's own
   "Portfolio" label + headline right above it) — this variant pulls the grid up so it
   isn't left sitting under a big empty gap where that header used to be. */
.work-section--no-header { padding-top: 40px; }
.work-inner { max-width: 1136px; margin: 0 auto; }
.work-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; gap: 32px; }
.work-header h2 { font-size: clamp(32px, 4vw, 52px); color: var(--s-text); margin-bottom: 0; }
.work-header p { font-size: 17px; color: var(--s-text); max-width: 520px; margin-top: 16px; line-height: 1.5; }
.work-grid { column-count: 4; column-gap: 10px; }
.work-item {
  position: relative; overflow: hidden; cursor: pointer; border-radius: 10px;
  background: var(--s-subtle); display: block; break-inside: avoid; margin-bottom: 10px;
}
.work-item--feature { column-span: all; margin-bottom: 10px; }
.work-item--feature .work-media { aspect-ratio: 21 / 9; object-fit: cover; height: auto; }
.work-media { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
.work-item:hover .work-media { transform: scale(1.03); }
@media (max-width: 900px) {
  .work-grid { column-count: 3; column-gap: 8px; }
  .work-item { margin-bottom: 8px; }
  .work-item--feature .work-media { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .work-grid { column-count: 2; column-gap: 6px; }
  .work-item { margin-bottom: 6px; border-radius: 8px; }
  .work-item--feature .work-media { aspect-ratio: 4 / 3; }
  .work-header { flex-direction: column; align-items: flex-start; }
}
/* Video tiles reuse .prow-play/.prow-duration from the rows layout below (same markup,
   just dropped into a .work-item instead of a .prow-card) — this rule ports over the
   hover-darken behavior since that was originally scoped to .prow-card--video:hover. */
.work-item--video:hover .prow-play::before { background: rgba(20,14,19,0.35); }

/* ---- Portfolio rows (Netflix-style horizontal scroll, replaces the bento above) ----
   One row per content category (Featured / Photography / Marketing / Experiences / CGI).
   Cards are a fixed size within a row (unlike the bento's per-photo aspect ratio) —
   that uniform-card look is the actual point of this layout, so object-fit:cover crop
   is expected/fine here. Native horizontal scroll + scroll-snap does the heavy lifting;
   the prev/next buttons are a convenience layer on top (see main.js), not the only way
   to navigate — touch/trackpad swipe and click-drag all work without any JS. */
.rows-section { padding: 64px 0 96px; }
.prow { margin-bottom: 48px; }
.prow-header { padding: 0 32px; margin-bottom: 20px; }
.prow-header h2 { font-family: 'Livvic', sans-serif; font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); color: var(--s-text); margin: 0; }
.prow-scroller { position: relative; }
.prow-track {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0 32px 8px; scrollbar-width: none; -ms-overflow-style: none;
}
.prow-track::-webkit-scrollbar { display: none; }
.prow-card {
  flex: 0 0 auto; width: 260px; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden;
  cursor: pointer; scroll-snap-align: start; background: var(--s-subtle); position: relative;
}
.prow-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.prow-card:hover img { transform: scale(1.06); }
.prow--featured .prow-card { width: 400px; aspect-ratio: 16 / 9; }
/* Video cards use a real Vimeo thumbnail as the cover (fetched via oEmbed, not a blank/
   black frame) plus a play-button overlay so it doesn't read as a plain photo. */
.prow-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.prow-play::before {
  content: ''; position: absolute; inset: 0; background: rgba(20,14,19,0.15); transition: background 0.2s;
}
.prow-card--video:hover .prow-play::before { background: rgba(20,14,19,0.35); }
.prow-play svg {
  position: relative; width: 52px; height: 52px; fill: #fff; opacity: 0.92;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5)); transition: transform 0.2s;
}
.prow-card--video:hover .prow-play svg { transform: scale(1.1); }
.prow-duration {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 5px;
  background: rgba(10,5,10,0.72); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
.prow-arrow {
  position: absolute; top: 0; bottom: 8px; width: 56px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff;
  background: linear-gradient(to right, rgba(20,14,19,0.55), transparent); z-index: 2;
  opacity: 0; transition: opacity 0.2s;
}
.prow-arrow.next { right: 0; left: auto; background: linear-gradient(to left, rgba(20,14,19,0.55), transparent); }
.prow-scroller:hover .prow-arrow { opacity: 1; }
.prow-arrow:disabled { display: none; }
@media (hover: none) {
  .prow-arrow { display: none; }
}
@media (max-width: 900px) {
  .prow-card { width: 200px; }
  .prow--featured .prow-card { width: 300px; }
  .prow-header, .prow-track { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 560px) {
  .prow-card { width: 44vw; }
  .prow--featured .prow-card { width: 78vw; }
  .prow-header, .prow-track { padding-left: 16px; padding-right: 16px; }
  .rows-section { padding: 40px 0 64px; }
  .prow { margin-bottom: 32px; }
}

/* ---- Detail sections ---- */
.detail-section { padding: 96px 32px; }
.detail-section--quote { padding: 40px 32px; }
.detail-section.alt { background: var(--s-subtle); }
.detail-inner { max-width: 1136px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.detail-inner.reverse { direction: rtl; }
.detail-inner--story { grid-template-columns: 3fr 5fr; }
.detail-inner.reverse > * { direction: ltr; }
.detail-text .t-label { margin-bottom: 16px; }
.detail-text h2 { font-size: clamp(28px, 3.5vw, 44px); color: var(--s-text); margin-bottom: 20px; }
.detail-text p:not(.t-label) { font-size: 17px; color: var(--s-text); line-height: 1.7; margin-bottom: 16px; }
.detail-list { list-style: disc; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.detail-list li { font-size: 15px; color: var(--s-text); line-height: 1.5; }
.detail-list li::marker { color: var(--green); }
.detail-list li strong { color: var(--s-text); }
.detail-img { border-radius: 16px; overflow: hidden; }
.detail-img--float { border-radius: 0; overflow: visible; display: flex; justify-content: center; }
.detail-img--float img { width: 100%; max-width: 340px; height: auto; }
.campaigns-img-scale { transform: scale(1.25); transform-origin: right center; }
@media (max-width: 640px) { .campaigns-img-scale { transform: none; } }

.detail-section--photo { background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), var(--photo-bg) center/cover no-repeat; border-top: 12px solid var(--green); }
.detail-section--photo .detail-text .t-label { color: var(--yellow); }
.detail-section--photo .detail-text h2 { color: var(--white); }
.detail-section--photo .detail-text p:not(.t-label) { color: rgba(255,255,255,0.85); }
.detail-section--photo .detail-list li { color: rgba(255,255,255,0.9); }
.detail-section--photo .detail-list li strong { color: var(--white); }
.detail-section--photo .detail-img { box-shadow: 0 20px 60px rgba(0,0,0,0.4); }

/* Video-hero variant — full-bleed ambient background video (same pattern as .page-hero--video), text panel overlaid */
.detail-section--video-hero { position: relative; min-height: 640px; display: flex; align-items: center; overflow: hidden; background: var(--plum); }
.detail-video-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.detail-video-bg iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.detail-video-overlay { position: absolute; inset: 0; background: rgba(20,13,19,0.55); z-index: 1; }
.detail-section--video-hero .detail-inner { position: relative; z-index: 2; width: 100%; }
.detail-section--video-hero .detail-text { max-width: 640px; }

/* Lighter overlay variant — full-bleed photo section where the background image should read through more (single-column copy, no foreground image box) */
.detail-section--photo-light { background: linear-gradient(rgba(20,13,19,0.4), rgba(20,13,19,0.4)), var(--photo-bg) center/cover no-repeat; }

.detail-section--photo .section-intro .t-label { color: var(--yellow); }
.detail-section--photo .section-intro h2 { color: var(--white); }
.detail-section--photo .section-intro p:not(.t-label) { color: rgba(255,255,255,0.85); }
.detail-section--photo .cap-card { background: rgba(255,255,255,0.95); border-color: transparent; }

/* ---- Culture strip / quote block ---- */
.culture-strip { background: var(--s-subtle); padding: 64px 32px; }
.culture-strip-inner { max-width: 1136px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.culture-strip-text .t-label { margin-bottom: 10px; }
.culture-strip-text h3 { font-size: clamp(24px, 3vw, 32px); color: var(--s-text); }
.culture-strip-imgs { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.culture-strip-imgs .media-placeholder-light { width: 180px; height: 180px; aspect-ratio: 1/1; border-radius: 50%; }
.culture-dog { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.culture-dog img { width: 180px; height: 180px; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 10px 24px rgba(0,0,0,0.1); }
.culture-dog-name { font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 14px; color: var(--s-text); }

.quote-block { background: var(--plum); border-radius: 24px; padding: 48px; max-width: 1136px; margin: 0 auto; }
.quote-block p.quote-text { font-family: 'Livvic', sans-serif; font-weight: 600; font-size: clamp(20px, 2.4vw, 28px); color: var(--white); line-height: 1.4; margin-bottom: 28px; }
.quote-block .quote-attr { font-family: 'Livvic', sans-serif; font-size: 15px; color: var(--green); font-weight: 600; }
.quote-block .quote-attr span { color: rgba(255,255,255,0.6); font-weight: 400; }

/* ---- Thrive / Interior Design callout block ---- */
.thrive-block { background: var(--plum); border-radius: 20px; padding: 60px; display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; margin-top: 80px; }
.thrive-block-text .t-label { color: var(--yellow); margin-bottom: 16px; }
.thrive-block-text h3 { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(28px, 3vw, 40px); color: var(--white); line-height: 0.9; letter-spacing: -0.02em; margin-bottom: 16px; }
.thrive-block-text p { font-size: 16px; color: rgba(255,255,255,0.75); max-width: 480px; line-height: 1.6; }
.thrive-block-text .btn-ghost-dark { margin-top: 12px; }
.btn-ghost-dark { display: inline-block; border: 2px solid rgba(255,255,255,0.5); color: var(--white); padding: 12px 28px; border-radius: var(--radius); font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 15px; transition: border-color 0.2s, background 0.2s; white-space: nowrap; }
.btn-ghost-dark:hover { border-color: var(--white); background: rgba(255,255,255,0.1); }
@media (max-width: 640px) { .thrive-block { padding: 40px 28px; } }

/* ---- Thrive callout, full-bleed hero variant ---- */
.thrive-hero { position: relative; overflow: hidden; min-height: 640px; display: flex; align-items: center; background: var(--plum); }
.thrive-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.thrive-hero-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(53,35,50,0.42); }
.thrive-hero-inner { position: relative; z-index: 2; max-width: 1136px; width: 100%; margin: 0 auto; padding: 0 32px; }
.thrive-hero .thrive-block-text { max-width: 560px; }
.thrive-hero .thrive-block-text h3, .thrive-hero .thrive-block-text p, .thrive-hero .thrive-block-text .t-label { text-shadow: 0 2px 16px rgba(30,18,32,0.55); }
.thrive-logo { height: 96px; width: auto; display: block; margin-bottom: 22px; }
@media (max-width: 640px) {
  .thrive-hero { min-height: 520px; }
  .thrive-hero-inner { padding: 0 20px; }
}

/* ---- Capability tag row (hero) ---- */
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.tag-row .tag { font-family: 'Livvic', sans-serif; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 7px 16px; }

/* ---- Service cards overview (service pillar pages) ---- */
.service-overview { padding: 96px 32px; background: var(--plum); }
.service-overview-inner { max-width: 1136px; margin: 0 auto; }
.service-overview .section-intro { max-width: 640px; margin-bottom: 56px; }
.service-overview .section-intro h2 { font-size: clamp(30px, 3.6vw, 44px); color: var(--white); margin-bottom: 16px; }
.service-overview .section-intro p:not(.t-label) { font-size: 17px; color: rgba(255,255,255,0.75); line-height: 1.6; }
.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.service-cards--2col { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.service-card { background: var(--plum); border: 1px solid var(--white); border-radius: 16px; padding: 28px 26px; overflow: hidden; }
.service-card-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 24px; width: fit-content; }
.service-card-icon svg { width: 30px; height: 30px; }
.service-card h3 { font-size: 23px; color: var(--white); margin-bottom: 12px; }
.service-card p { font-size: 14.5px; color: rgba(255,255,255,0.75); line-height: 1.6; }

/* Photo-hero card variant — image fills top third, rest matches standard card */
.service-card--photo {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.service-card-hero {
  height: 130px;
  background-size: cover;
  background-position: center;
}
.service-card--photo .service-card-body { padding: 22px 26px 26px; }
.service-card ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.service-card ul li { font-size: 14px; color: rgba(255,255,255,0.75); display: flex; align-items: flex-start; gap: 8px; }
.service-card ul li::before { content: '→'; color: var(--green); font-weight: 700; flex-shrink: 0; }

/* Accent bar — cycles Studio Voltage / Idea Vine / Studio Grove across each row of 3 */
.service-card-accent { height: 7px; margin: -28px -26px 20px; }
.service-card--photo .service-card-accent { margin: 0; }
.service-cards .service-card:nth-child(3n+1) .service-card-accent { background: var(--yellow); }
.service-cards .service-card:nth-child(3n+2) .service-card-accent { background: var(--green); }
.service-cards .service-card:nth-child(3n+3) .service-card-accent { background: var(--green-dark); }
@media (max-width: 900px) { .service-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .service-cards { grid-template-columns: 1fr; } }

/* ---- Testimonial grid (2-up) ---- */
.testimonials { background: var(--s-bg); padding: 96px 32px; }
.testimonials-inner { max-width: 1136px; margin: 0 auto; }
.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 48px; }
.testimonial-card { background: var(--s-subtle); border: 1px solid var(--s-border); border-radius: 16px; padding: 36px; }
.testimonial-card p { font-size: 15px; color: var(--s-text); line-height: 1.75; margin-bottom: 24px; font-style: italic; }
.testimonial-card-byline { border-top: 1px solid var(--s-border); padding-top: 16px; }
.testimonial-card-byline strong { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; color: var(--s-text); display: block; margin-bottom: 2px; }
.testimonial-card-byline span { font-size: 13px; color: var(--s-muted); }
@media (max-width: 640px) { .testimonials { padding: 64px 20px; } .testimonial-grid { grid-template-columns: 1fr; } }

/* ---- Wide video banner (service pages) ---- */
/* Bay Scroll.mp4 is natively 1920x640 (exact 3:1) — aspect-ratio must stay 3/1 at every
   breakpoint so object-fit: cover never has to crop the frame. A taller ratio (e.g. 16/9)
   forces cover to slice ~20% off each side, cutting off the baked-in text callouts. */
.video-banner { width: 100%; max-width: 1136px; margin: 32px auto 0; padding: 0 32px; }
/* clip-path (not just overflow:hidden) to clip the video — overflow-based clipping alone left a
   faint 1px seam at the rounded edge where the hardware-decoded video layer didn't anti-alias
   cleanly against the parent's radius mask; clip-path uses a different rasterization path and
   clears it. Confirmed device/orientation-dependent (mobile portrait shows it, landscape doesn't
   on the same phone) — a sub-pixel rounding artifact tied to the exact rendered width, not
   something either clipping method fully eliminates on its own. The inset box-shadow below is a
   2px white ring painted over that edge to mask whatever sliver remains, on any orientation. */
.video-banner-inner { overflow: hidden; aspect-ratio: 3/1; background: var(--plum); border-radius: 12px; clip-path: inset(0 round 12px); box-shadow: inset 0 0 0 2px #fff; }
.video-banner-inner video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; }

/* ---- Inline portfolio-link banner (service pages) ---- */
.inline-banner { background: var(--plum); border-radius: 16px; padding: 32px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1136px; margin: 72px auto; flex-wrap: wrap; }
.inline-banner p { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(18px, 2vw, 24px); color: var(--white); margin: 0; }
.inline-banner .btn-primary { background: var(--green); flex-shrink: 0; }

/* ---- Portfolio lightbox (moved from home.css 2026-07-20 — now shared by the
   homepage and the Portfolio page, not homepage-only) ---- */
.plb-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(10,5,10,0.96); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.plb-overlay.open { opacity: 1; pointer-events: all; }
.plb-header { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; z-index: 10; }
.plb-meta { display: flex; flex-direction: column; gap: 4px; }
.plb-title { font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 18px; color: #fff; }
.plb-tag { font-family: 'Livvic', sans-serif; font-size: 13px; color: rgba(255,255,255,0.45); }
.plb-close { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.plb-close:hover { background: rgba(255,255,255,0.25); }
.plb-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 80px 100px; box-sizing: border-box; }
.plb-stage img, .plb-stage video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 40px 120px rgba(0,0,0,0.6); }
.plb-vimeo-wrap { width: min(90vw, 1100px); aspect-ratio: 16 / 9; max-height: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,0.6); }
.plb-vimeo-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.plb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s; z-index: 10; }
.plb-arrow:hover { background: var(--green); border-color: var(--green); }
.plb-arrow.prev { left: 20px; }
.plb-arrow.next { right: 20px; }
.plb-arrow.hidden { opacity: 0; pointer-events: none; }
.plb-footer { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; z-index: 10; }
.plb-dots { display: flex; gap: 8px; }
/* Same 24px hit-area treatment as .pillar-dot */
.plb-dot { width: 24px; height: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.plb-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); transition: background 0.2s, transform 0.2s; }
.plb-dot.active::before { background: var(--green); transform: scale(1.3); }
.plb-counter { font-family: 'Livvic', sans-serif; font-size: 13px; color: rgba(255,255,255,0.4); }

/* ---- Freelance form (About page) ---- */
.freelance-section { background: var(--s-bg); padding: 96px 32px; }
.freelance-inner { max-width: 1136px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.freelance-text .t-label { margin-bottom: 16px; }
.freelance-text h2 { font-size: clamp(32px, 4vw, 48px); color: var(--s-text); margin-bottom: 20px; }
.freelance-text p:not(.t-label) { font-size: 17px; color: var(--s-text); line-height: 1.7; margin-bottom: 16px; }
.freelance-form-card { background: var(--s-subtle); border: 1px solid var(--s-border); border-radius: 20px; padding: 40px; }
.ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.ff-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ff-field label { font-family: 'Livvic', sans-serif; font-size: 13px; font-weight: 600; color: var(--s-text); }
.ff-field input, .ff-field textarea { font-family: 'Livvic', sans-serif; font-size: 15px; padding: 10px 14px; border: 1.5px solid var(--s-border); border-radius: 8px; color: var(--s-text); background: var(--s-bg); }
.ff-field input:focus, .ff-field textarea:focus { outline: none; border-color: var(--green); }
.ff-field textarea { resize: vertical; min-height: 80px; }
.ff-submit { background: var(--green); color: var(--plum); font-family: 'Livvic', sans-serif; font-size: 16px; font-weight: 700; padding: 14px 28px; border: none; border-radius: 8px; cursor: pointer; }
.ff-note { font-size: 13px; color: var(--s-muted); margin-top: 14px; }
.ff-success { display: none; text-align: center; padding: 20px 0; }
.ff-success.show { display: block; }
.ff-success.show ~ form { display: none; }

/* ---- CTA ---- */
.cta-section { background: var(--green); padding: 96px 32px; }
.cta-inner { max-width: 1136px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.cta-headline { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(40px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.03em; color: var(--white); margin-bottom: 20px; }
.cta-headline em { font-style: normal; color: var(--white); }
.cta-sub { font-family: 'Livvic', sans-serif; font-size: 18px; color: rgba(53,35,50,0.72); line-height: 1.6; max-width: 520px; }
.btn-cta { display: inline-block; background: var(--plum); color: var(--white); font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 16px; padding: 16px 36px; border-radius: var(--radius); transition: background 0.2s, transform 0.2s; white-space: nowrap; }
.btn-cta:hover { background: #251823; transform: translateY(-2px); }

/* ---- Footer ----
   Dark-footer treatment (promoted from the homepage 2026-07-02 — see
   2026-07-02_thshomepage-responsive-audit_v1.md). This is now the one
   footer design for every page. Background changed to Studio Grove
   (--green-dark, #457f1b) 2026-07-06 — text set to white/near-white
   since Studio Grove is dark enough for white to clear 4.5:1 (plum
   text only hits ~3.1:1 here, unlike on brighter Idea Vine green). */
.footer { background: var(--green-dark); padding: 64px 32px 40px; }
.footer-inner { max-width: 1136px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 60px; }
.footer-logo img { height: 70px; margin-bottom: 30px; }
.footer-tagline { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.35; max-width: 280px; }
.footer-col h2 { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 14px; color: var(--white); letter-spacing: 0.02em; margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: rgba(255,255,255,0.9); transition: color 0.2s; }
.footer-col a:hover { color: var(--yellow); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.2); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; }
.footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.85); }
.footer-social { display: flex; gap: 16px; }
.footer-social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; }
.footer-social a:hover { opacity: 0.7; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
.footer-social svg { width: 20px; height: 20px; fill: var(--white); }
.footer-social a:hover svg { fill: var(--white); }
.footer-newsletter { border-top: 1px solid rgba(255,255,255,0.2); padding: 32px 0; margin-bottom: 32px; }
.footer-newsletter-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.footer-newsletter-label { font-family: 'Livvic', sans-serif; font-weight: 700; font-size: 16px; color: var(--white); margin: 0 0 4px; }
.footer-newsletter-sub { font-family: 'Livvic', sans-serif; font-size: 13px; color: rgba(255,255,255,0.85); margin: 0; }
.footer-newsletter-form { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.footer-newsletter-form input { font-family: 'Livvic', sans-serif; font-size: 14px; padding: 10px 16px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.12); color: var(--white); flex: 1 1 170px; min-width: 140px; }
.footer-newsletter-form input::placeholder { color: rgba(255,255,255,0.6); }
.footer-newsletter-form button { font-family: 'Livvic', sans-serif; font-size: 14px; font-weight: 700; padding: 10px 20px; border-radius: 8px; border: none; background: var(--plum); color: var(--white); cursor: pointer; white-space: nowrap; }
.footer-newsletter-form button:hover { background: #1e1220; }
.footer-newsletter-toast { display: none; font-family: 'Livvic', sans-serif; font-size: 14px; color: var(--white); font-weight: 600; }
.footer-newsletter-toast.show { display: flex; }


/* ---- Scroll-reveal ---- */
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up.delay-1 { transition-delay: 0.1s; }
.fade-up.delay-2 { transition-delay: 0.2s; }
.fade-up.delay-3 { transition-delay: 0.3s; }

/* ---- Scroll-reveal, extended set (promoted from the homepage 2026-07-02) ----
   .fade-up above stays as-is for anything already using it. These are additional,
   opt-in reveal variants — apply the class in markup, main.js observes and adds
   .visible automatically. Nothing on the existing 8 pages uses these yet; they're
   available for any page/section going forward so the homepage isn't the only
   page with this motion quality. */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(50px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Body-copy line fade — opt-in, same trigger pattern as .reveal above */
.txt-fade { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.txt-fade.in { opacity: 1; transform: translateY(0); }

/* Word-split headline reveal — wrap each word in main.js's splitHeadline()
   helper before observing; .txt-split-word is the per-word mask, the inner
   span slides up into view. */
.txt-split-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
.txt-split-word span { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform 0.65s cubic-bezier(0.22,1,0.36,1), opacity 0.5s ease; }
.txt-split-word.in span { transform: translateY(0); opacity: 1; }

/* ---- Modal (booking / quote) ---- */
.modal-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(53,35,50,0.88); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; backdrop-filter: blur(4px); }
.modal-overlay.open { opacity: 1; pointer-events: all; visibility: visible; transition: opacity 0.3s ease, visibility 0s; }
.modal-card { background: #ffffff; border-radius: 20px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; position: relative; transform: translateY(20px); transition: transform 0.35s ease; }
.modal-overlay.open .modal-card { transform: translateY(0); }
.modal-close { position: absolute; top: 20px; right: 24px; background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: #888; z-index: 10; }
.modal-body { display: block; }
.modal-left { padding: 48px; }
.modal-label { font-family: 'Livvic', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--green); margin: 0 0 16px; }
.modal-title { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(32px, 4vw, 48px); color: var(--plum); line-height: 0.98; margin: 0 0 16px; letter-spacing: -0.02em; }
.modal-title em { color: var(--green); font-style: normal; }
.modal-sub { font-family: 'Livvic', sans-serif; font-size: 15px; color: #666; margin: 0 0 28px; line-height: 1.5; }
.modal-form { display: flex; flex-direction: column; gap: 16px; }
.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-field { display: flex; flex-direction: column; gap: 6px; }
.modal-field label { font-family: 'Livvic', sans-serif; font-size: 13px; font-weight: 600; color: var(--plum); }
.modal-field input, .modal-field select, .modal-field textarea { font-family: 'Livvic', sans-serif; font-size: 15px; padding: 10px 14px; border: 1.5px solid rgba(53,35,50,0.15); border-radius: 8px; color: var(--plum); background: #fafafa; transition: border-color 0.2s; appearance: none; }
.modal-field input:focus, .modal-field select:focus, .modal-field textarea:focus { outline: none; border-color: var(--green); background: #fff; }
.modal-field textarea { resize: vertical; min-height: 80px; }
.modal-submit { background: var(--green); color: var(--plum); font-family: 'Livvic', sans-serif; font-size: 16px; font-weight: 700; padding: 14px 28px; border: none; border-radius: 8px; cursor: pointer; margin-top: 4px; align-self: flex-start; }
.modal-success { display: none; position: absolute; inset: 0; background: #fff; border-radius: 20px; align-items: center; justify-content: center; }
.modal-success.show { display: flex; }
.modal-success-inner { text-align: center; padding: 48px; }
.modal-success-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: #fff; font-size: 36px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.modal-success-inner h3 { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 32px; color: var(--plum); margin: 0 0 12px; }
.modal-success-inner p { font-family: 'Livvic', sans-serif; font-size: 17px; color: #666; margin: 0 0 28px; }
.modal-close-btn { background: var(--plum); color: #fff; font-family: 'Livvic', sans-serif; font-size: 15px; font-weight: 600; padding: 12px 28px; border: none; border-radius: 8px; cursor: pointer; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .nav-inner { padding: 0 20px; } /* was .nav { padding: 0 20px } — stacked on .nav-inner's 32px, insetting the logo/hamburger 52px while page content sits at 20px */
  .nav-hamburger { display: flex; }
  .nav-links { display: none; position: fixed; top: 60px; left: 0; right: 0; background: var(--green); flex-direction: column; align-items: stretch; padding: 16px 24px 24px; gap: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.15); max-height: calc(100vh - 60px); max-height: calc(100svh - 60px); overflow-y: auto; }
  .nav-links.open { display: flex; }
  .nav-links li { border-bottom: 1px solid rgba(255,255,255,0.15); }
  .nav-links li:last-child { border-bottom: none; margin-top: 12px; }
  .nav-links a, .nav-dropdown-label { display: block; padding: 14px 0; font-size: 16px; }
  .nav-dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; box-shadow: none; margin: 0; padding: 0 0 0 16px; }
  .nav-dropdown-menu li a { color: rgba(255,255,255,0.75); font-size: 14px; padding: 10px 0; }
  .nav-caret { display: none; }
  .nav-cta { display: block; text-align: center; padding: 12px 20px; }
  .page-hero-inner { grid-template-columns: 1fr; }
  .page-hero-img { display: none; }
  .page-hero-img.about-hero-portal { display: flex; order: -1; margin-bottom: 12px; }
  .about-hero-portal-img { max-width: 392px; }
  /* No .page-hero--video min-height override here — the base rule's 100vh + 100svh pair
     already handles mobile. A plain 100vh re-declared in this block (removed 2026-07-13)
     was winning the cascade and discarding svh on the exact devices that need it,
     pushing the bottom-anchored hero text under Safari's toolbar. */
  .page-hero { padding: 110px 20px 60px; }
  .stat-bar { padding: 32px 24px; }
  .stat-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .capabilities { padding: 64px 20px; }
  .cap-grid { grid-template-columns: 1fr; }
  .detail-section { padding: 64px 20px; }
  .service-overview { padding: 64px 20px; }
  .work-section { padding: 64px 20px; }
  /* gap: the desktop 80px column gap becomes an 80px vertical hole between image and
     text once this collapses to 1 column — .detail-img's order:-1 + 8px margin was
     written assuming tight stacking. 24px matches the section's internal rhythm. */
  .detail-inner, .detail-inner.reverse { grid-template-columns: 1fr; direction: ltr; gap: 24px; }
  .detail-inner.reverse > * { direction: ltr; }
  .detail-img { order: -1; margin-bottom: 8px; }
  .freelance-section { padding: 64px 20px; }
  .freelance-inner { grid-template-columns: 1fr; gap: 40px; }
  .freelance-form-card { padding: 28px; }
  .ff-row { grid-template-columns: 1fr; }
  .culture-strip-inner { flex-direction: column; text-align: left; }
  .culture-strip-imgs { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; }
  .detail-section--quote { padding: 32px 20px; }
  .quote-block { padding: 32px 24px; }
  .cta-inner { grid-template-columns: 1fr; gap: 32px; }
  .cta-section { padding: 64px 20px; }
  .footer { padding: 48px 20px 28px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-logo { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .footer-newsletter-form input { flex-basis: 100%; }
  .modal-left { padding: 40px 28px; }
  /* iOS Safari auto-zooms the page when a focused input's font-size is under 16px —
     every form on the site was 14-15px. 16px only on mobile; desktop sizes untouched. */
  .modal-field input, .modal-field select, .modal-field textarea,
  .ff-field input, .ff-field textarea,
  .footer-newsletter-form input { font-size: 16px; }
  /* Lightbox — desktop's 80px/100px stage padding left ~175px of image on a 375px
     phone, with the arrows overlapping it. No .plb-* rule existed at any breakpoint. */
  .plb-stage { padding: 72px 12px 72px; }
  .plb-arrow { width: 40px; height: 40px; font-size: 18px; }
  .plb-arrow.prev { left: 8px; }
  .plb-arrow.next { right: 8px; }
  .plb-header { padding: 16px; }
  .plb-footer { bottom: 16px; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
  .stat-bar-inner { grid-template-columns: 1fr 1fr; }
  .nav-inner { padding: 0 16px; }
  .page-hero, .capabilities, .detail-section, .cta-section, .footer, .stat-bar, .freelance-section, .service-overview, .work-section, .video-banner { padding-left: 16px; padding-right: 16px; }
  .modal-row { grid-template-columns: 1fr; } /* two ~120px name fields side-by-side is too cramped below 480px */
  .culture-strip-imgs .media-placeholder-light, .culture-dog img { width: 132px; height: 132px; }
}

/* ---- Coming-soon / stub page body (More Work) ---- */
.page-body { flex: 1; display: flex; align-items: center; padding: 160px 32px 100px; background: var(--plum); }
.page-inner { max-width: 1136px; width: 100%; margin: 0 auto; text-align: left; }
.pg-preheader { font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 18px; color: var(--green); margin-bottom: 16px; display: block; }
.pg-title { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(48px, 8vw, 100px); line-height: 0.95; letter-spacing: -0.02em; color: var(--white); margin-bottom: 28px; }
.pg-desc { font-family: 'Livvic', sans-serif; font-weight: 400; font-size: 20px; line-height: 1.55; color: rgba(255,255,255,0.65); margin-bottom: 40px; max-width: 600px; }
@media (max-width: 640px) { .page-body { padding: 120px 20px 70px; } }


/* ---- Reduced-motion: honor OS setting (added 2026-07-07) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .fade-up, .reveal, .reveal-left, .reveal-right, .reveal-scale, .txt-fade, .txt-split-word, .txt-split-word > span { opacity: 1 !important; transform: none !important; }
}

/* ---- Grid single-column modifiers (replaces inline styles, per standing rule) ---- */
.page-hero-inner--single { grid-template-columns: 1fr; }
.detail-inner--single { grid-template-columns: 1fr; gap: 48px; }

/* ---- HubSpot form embed wrapper ----
   The embed itself renders in a sandboxed iframe (js-na2.hsforms.net/forms/embed),
   so field/label/button styling lives in HubSpot's own form editor, not here.
   This only controls the container HubSpot's iframe sits inside on the page. */
.hs-form-wrap { width: 100%; }
.hs-form-wrap iframe { border-radius: var(--radius); }

/* Can't recolor the iframe's own label/field text since it renders in
   HubSpot's sandboxed embed, so every instance gets an Idea Vine green
   card to sit on instead — keeps label text legible on any section bg. */
.hs-form-wrap {
  background: var(--green);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

/* ---- Media protection: deter casual saving of portfolio photography (added 2026-07-22) ----
   Not a real DRM measure — anything renderable can be screenshotted — but it
   stops the one-click "save image as" / drag-to-desktop path most casual
   downloaders use. Scoped to img/video only so body copy, phone numbers, and
   addresses stay selectable/copyable as normal. Right-click and dragstart are
   also blocked in main.js since -webkit-user-drag alone doesn't stop Firefox. */
img, video {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}