/* ==========================================================================
   THS Creative — Homepage-only styles
   Loaded alongside assets/css/main.css (never instead of it). This file holds
   ONLY what's unique to the homepage: hero, marquees, the pillar carousel,
   the portfolio bento teaser, about/process/contact sections, the studio
   photo band, the interior-design grid, the Instagram grid, and the
   portfolio lightbox. Nav, footer, modal, buttons(reveal system), and the
   base reset/tokens all come from main.css — do not redeclare them here.

   Split out of the homepage's own inline <style> block 2026-07-02 as part of
   moving the homepage onto the shared design system. See
   2026-07-02_thshomepage-responsive-audit_v1.md for the full rationale.

   Flagged in the 2026-07-02 pass, status as of 2026-07-06:
   1. Font loading strategy — this file self-hosts Inter/Livvic (+ 4 display
      fonts) via @font-face below; the 8 subpages load Inter/Livvic from the
      Google Fonts CDN instead. Same fonts, two different delivery methods.
      STILL OPEN.
   2. Button naming — RESOLVED 7/6. Homepage-only button variants renamed
      from BEM (.btn--green/.btn--plum/.btn--outline/.btn--thrive) to a
      collision-safe hyphenated form (.btn-hero-green/.btn-hero-plum/
      .btn-hero-outline/.btn-hero-thrive). Deliberately NOT merged into
      main.css's .btn-primary/.btn-outline/.btn-cta/.btn-rental — those are
      visually distinct components (different backgrounds/contexts), not
      true duplicates; a straight rename onto those classes would collide
      since this file loads alongside main.css on every page. Values
      unchanged, zero visual difference — this was a naming-only fix.
   ========================================================================== */

/* Inter/Livvic @font-face moved to main.css 2026-07-06 (see that file's header
   comment) — loaded there now so all 9 pages share one source, not just this
   one. Only the homepage-exclusive display faces stay in this file. */
@font-face {
  font-family: 'LeagueGothic';
  src: url('../fonts/LeagueGothic-Regular-VariableFont_wdth.woff2') format('woff2'),
       url('../fonts/LeagueGothic-Regular-VariableFont_wdth.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'ReenieBeanie';
  src: url('../fonts/ReenieBeanie-Regular.woff2') format('woff2'),
       url('../fonts/ReenieBeanie-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'InstrumentSerif';
  src: url('../fonts/InstrumentSerif-Regular.woff2') format('woff2'),
       url('../fonts/InstrumentSerif-Regular.ttf') format('truetype');
  font-display: swap;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
#services, #portfolio, #studio, #interior-design, #about, #contact, #testimonials, #instagram, #clients { scroll-margin-top: 56px; }
.section { padding: 100px 0; }
.section-label { font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 18px; color: var(--green); margin-bottom: 20px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 10px; font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 13px; cursor: pointer; border: none; transition: all 0.2s ease; }
.btn-hero-green { background: var(--green); color: var(--white); }
.btn-hero-plum { background: var(--plum); color: var(--white); }
.btn-hero-plum:hover { background: #251823; }
.btn-hero-green:hover { background: var(--green-dark); }
.btn-hero-outline { background: transparent; color: var(--white); border: 2px solid var(--white); }
.btn-hero-outline:hover { background: var(--white); color: var(--plum); }
.btn-hero-green-dark { background: var(--green-dark); color: var(--white); }
.btn-hero-green-dark:hover { background: var(--green); }
.about-content .btn { margin-top: 36px; }

/* ---- Hero ---- */
.hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform: none !important; }
#hero { position: relative; min-height: 100vh; min-height: 100svh; background: var(--plum); display: flex; align-items: flex-end; overflow: hidden; padding-bottom: 80px; }
#hero > .container { width: 100%; }
.hero-content { position: relative; z-index: 3; max-width: 780px; }
.hero-eyebrow { font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 18px; color: var(--green); margin-bottom: 12px; display: block; animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.1s both; }
.hero-headline { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(64px, 9vw, 130px); line-height: 0.9; color: var(--white); margin-bottom: 16px; animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.25s both; }
.hero-headline span { color: var(--green); }
.hero-sub { font-family: 'Livvic', sans-serif; font-weight: 400; font-size: 20px; line-height: 1.35; color: rgba(255,255,255,0.75); max-width: 520px; margin-bottom: 28px; animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.45s both; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.6s both; }
.hero-scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,0.4); font-family: 'Inter', sans-serif; font-size: 10px; }
.hero-scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent); animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- Marquee (capability tags under hero) ---- */
.marquee-bar { background: var(--green); overflow: hidden; padding: 16px 0; }
.marquee-inner { display: flex; width: max-content; will-change: transform; }
.marquee-set { display: flex; flex-shrink: 0; align-items: center; }
.marquee-item { display: inline-flex; align-items: center; gap: 12px; padding: 0 20px; font-family: 'Livvic', sans-serif; font-weight: 400; font-size: 13px; color: var(--green-dark); white-space: nowrap; }

/* ---- Services / pillar carousel ---- */
#services { background: var(--cream); padding: 80px 0 100px; overflow-x: hidden; }
.services-header { max-width: 800px; margin-bottom: 56px; }
.services-headline { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(40px, 5vw, 72px); line-height: 1; color: var(--plum); margin-bottom: 20px; }
.services-intro { font-size: 18px; line-height: 1.35; color: rgba(53,35,50,0.7); }

.pillar-carousel { position: relative; overflow: hidden; }
.pillar-track-wrap { overflow: hidden; padding: 0 80px; }
.pillar-track { display: flex; gap: 24px; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.pillar-slide { flex: 0 0 calc(100% - 160px); min-width: 0; position: relative; height: 68vh; min-height: 500px; border-radius: 20px; overflow: hidden; cursor: pointer; transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.pillar-slide:not(.active) { opacity: 0.5; transform: scale(0.97); cursor: pointer; }
.pillar-slide.active { opacity: 1; transform: scale(1); }
.pillar-bg { position: absolute; inset: 0; background: #352332; display: flex; align-items: center; justify-content: center; }
@keyframes pillarDrift {
  0%   { transform: scale(1.0) translate(0, 0); }
  33%  { transform: scale(1.06) translate(-1%, 0.5%); }
  66%  { transform: scale(1.04) translate(1%, -0.5%); }
  100% { transform: scale(1.0) translate(0, 0); }
}
.pillar-bg img.real { width: 100%; height: 100%; object-fit: cover; animation: pillarDrift 12s ease-in-out infinite; will-change: transform; }
.pillar-slide:nth-child(2) .pillar-bg img.real { animation-delay: -4s; }
.pillar-slide:nth-child(3) .pillar-bg img.real { animation-delay: -8s; }
.pillar-slide:nth-child(4) .pillar-bg img.real { animation-delay: -2s; }
.pillar-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,8,18,0.92) 0%, rgba(20,8,18,0.5) 45%, rgba(20,8,18,0.15) 100%); }
.pillar-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 44px 52px; }
.pillar-service-label { font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 18px; color: var(--yellow); margin-bottom: 10px; display: block; }
.pillar-title { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(36px, 4vw, 64px); line-height: 0.95; color: var(--white); margin-bottom: 24px; }
.pillar-list { display: grid; grid-template-columns: auto auto; gap: 6px 24px; list-style: none; margin-bottom: 28px; width: fit-content; }
.pillar-body-copy { font-family: 'Livvic', sans-serif; font-size: 15px; line-height: 1.35; color: rgba(255,255,255,0.7); margin-bottom: 16px; max-width: 520px; }
.pillar-list li { font-family: 'Livvic', sans-serif; font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.75); }
.pillar-nav { display: flex; gap: 12px; align-items: center; margin-top: 20px; }
.pillar-arrow { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.9); border: 2px solid var(--white); color: var(--plum); font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.pillar-arrow:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.pillar-arrow.prev { left: 16px; }
.pillar-arrow.next { right: 16px; }
.pillar-dots { display: flex; gap: 8px; justify-content: center; margin-top: 28px; }
/* Dots: 24px hit area (was an 8px tap target), visual dot unchanged via ::before */
.pillar-dot { width: 24px; height: 24px; background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.pillar-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(53,35,50,0.25); transition: background 0.2s, transform 0.2s; }
.pillar-dot.active::before { background: var(--green); transform: scale(1.3); }
@media (max-width: 700px) {
  .pillar-track-wrap { padding: 0 32px; }
  .pillar-slide { flex: 0 0 calc(100% - 64px); }
  .pillar-body { padding: 28px 28px; }
  .pillar-list { grid-template-columns: 1fr; }
}

/* ---- Portfolio bento teaser ---- */
#portfolio { background: var(--plum); padding: 100px 0; }
.work-headline { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(40px, 5vw, 72px); line-height: 1; color: var(--white); }
.hp-work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.hp-work-item { position: relative; overflow: hidden; cursor: pointer; border-radius: 10px; opacity: 0; transform: translateY(28px) scale(0.98); transition: opacity 0.55s ease, transform 0.55s ease; }
.hp-work-item.wi-visible { opacity: 1; transform: translateY(0) scale(1); }
.hp-work-item:nth-child(1) { grid-column: span 8; }
.hp-work-item:nth-child(2) { grid-column: span 4; }
.hp-work-item:nth-child(3) { grid-column: span 4; }
.hp-work-item:nth-child(4) { grid-column: span 4; }
.hp-work-item:nth-child(5) { grid-column: span 4; }
.work-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.12); transition: background 0.3s; }
.hp-work-item:nth-child(1) .work-placeholder { aspect-ratio: 16/10; }
.hp-work-item:nth-child(n+2) .work-placeholder { aspect-ratio: 4/5; }
.work-placeholder:hover { background: rgba(108,199,43,0.08); }
.work-ph-icon { width: 40px; height: 40px; opacity: 0.25; }
.work-ph-text { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.3); text-align: center; padding: 0 16px; }
.hp-work-item img.real { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hp-work-item:hover img.real { transform: scale(1.03); }
.hp-work-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 28px; background: linear-gradient(to top, rgba(53,35,50,0.92), transparent); opacity: 0; transition: opacity 0.3s; }
.hp-work-item:hover .hp-work-caption { opacity: 1; }
.hp-work-caption-title { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 14px; color: var(--white); }
.hp-work-caption-tag { font-size: 12px; color: var(--green); font-weight: 600; margin-top: 4px; }
/* Same hover-only-caption gap as .work-caption in main.css — never appeared on touch devices. */
@media (hover: none) {
  .hp-work-caption { opacity: 1; }
}

/* ---- About ---- */
#about { background: var(--cream); }
.about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-visual { position: relative; }
.about-img-wrap { aspect-ratio: 4/5; border-radius: 10px; overflow: hidden; }
.about-img-wrap img.real { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.about-badge { position: absolute; bottom: -20px; right: -20px; background: var(--green); color: var(--white); padding: 24px 28px; border-radius: 20px; }
.about-badge-num { font-family: 'Livvic', sans-serif; font-weight: 400; font-size: 56px; line-height: 1; }
.about-badge-label { font-family: 'Livvic', sans-serif; font-size: 13px; font-weight: 600; margin-top: 4px; line-height: 1.3; }
.about-headline { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(40px, 5vw, 72px); line-height: 1; color: var(--plum); margin-bottom: 28px; }
.about-headline span { color: var(--green); }
.about-body { font-size: 17px; line-height: 1.35; color: rgba(53,35,50,0.75); margin-bottom: 20px; }
.about-values { display: flex; flex-direction: column; gap: 16px; margin-top: 36px; }
.value-item { display: flex; gap: 16px; align-items: flex-start; }
.value-dot { width: 10px; height: 10px; background: var(--green); border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
.value-text { font-size: 16px; line-height: 1.35; color: rgba(53,35,50,0.7); }
.value-text strong { color: var(--plum); font-weight: 600; }

/* ---- Process ---- */
#process { background: var(--white); }
.process-headline { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(40px, 5vw, 72px); line-height: 1; color: var(--plum); margin-bottom: 64px; max-width: 500px; }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.process-step { padding: 40px 36px; background: var(--gray-light); position: relative; }
.process-step-num { font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 120px; line-height: 1; color: rgba(53,35,50,0.08); position: absolute; top: 20px; right: 24px; }
.process-step-line { width: 32px; height: 3px; background: var(--green); margin-bottom: 20px; }
.process-step-title { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 16px; color: var(--plum); margin-bottom: 12px; position: relative; z-index: 1; }
.process-step-body { font-size: 14px; line-height: 1.35; color: rgba(53,35,50,0.65); position: relative; z-index: 1; }

/* ---- Contact ---- */
#contact { background: var(--plum); padding: 120px 0; }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact-headline { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(40px, 5vw, 72px); line-height: 0.95; color: var(--white); margin-bottom: 28px; }
.contact-headline span { color: var(--green); }
.contact-body { font-size: 17px; line-height: 1.35; color: rgba(255,255,255,0.65); margin-bottom: 40px; }
.contact-email { font-family: 'Livvic', sans-serif; font-weight: 600; font-size: 16px; color: var(--green); display: block; }
.contact-email:hover { color: var(--yellow); }

/* ---- Scroll progress bar ---- */
#scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--yellow); z-index: 99; pointer-events: none; transition: width 0.05s linear; }

/* Portfolio lightbox (.plb-*) moved to main.css 2026-07-20 — now used by both
   the homepage and the Portfolio page, not homepage-only. See main.css. */

.btn-hero-thrive { background: transparent; border: 2px solid #af9f4b; color: #af9f4b; transition: background 0.4s cubic-bezier(0.22,1,0.36,1), color 0.4s cubic-bezier(0.22,1,0.36,1), transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s cubic-bezier(0.22,1,0.36,1); }
.btn-hero-thrive:hover { background: #af9f4b; color: #fff; transform: scale(1.06); box-shadow: 0 8px 32px rgba(175,159,75,0.35); }

/* ─── STUDIO PHOTO HERO BAND ──────────────────────────────────── */
/* Single source of truth: both the text zone's height and the video's top offset read from
   this one variable, so "text sits right above the video" is a structural fact rather than
   two percentages that have to be re-tuned together by hand.

   CROP CONSISTENCY (root-caused 7/1): background-size:cover crops from whichever axis the box
   doesn't match the source photo's own ratio on. Key5CornerCovecopy.jpg is 2560x1266 (~2.02:1
   native). Previously this band's aspect-ratio SWITCHED at every breakpoint (2.2:1 above
   900px, 4:3 from 640-900px, 1:1 below 640px) — each switch put the box on a different side of
   that ~2.02:1 crossover, which doesn't just shift the crop gradually, it flips which axis
   cover sacrifices (crop the sides vs. crop top/bottom). That's why text kept landing on top of
   the light stands or the ceiling rigging at some widths and not others: the fix was never the
   exact percentage, it was that the crop *mode* itself kept changing underneath it.

   Fix: one constant aspect-ratio + min-height for the entire 640px-to-full-width range (no more
   per-breakpoint swapping — see the old 901-1188px and 640-900px overrides this replaced,
   below). Below the min-height floor's crossover (~1091px, where box-width/540 = the image's
   2.02:1 ratio), the box crops the sides only, zooming toward center as width narrows — which
   pushes the stands further OUT of frame, not into it. Above that crossover, aspect-ratio alone
   governs and grows continuously with width (no jump), so the crop widens smoothly instead of
   resetting at a breakpoint. background-position stays centered, calibrated against the known-
   good reference render (Chrome, 1512px). */
.studio-hero-wrap { position: relative; --studio-anchor: 51%; }
.studio-photo-band {
  background-image: url('../images/Homepage/Key5CornerCovecopy.jpg');
  background-size: cover;
  /* Vertical anchor pulled down from center (7/1, 2nd pass): "center center" put a hanging
     rigging hook from the ceiling right at the boundary where the text zone starts, at every
     width in the unfloored (1188px+) range — confirmed against Alex's live screenshot at
     1512px, text touching the hook. Since removing the per-breakpoint aspect-ratio swap means
     there are now only two crop regimes (fully-uncropped-vertically below ~1091px, and a
     proportionally-constant vertical crop above it — see comment below), this single Y-shift
     should hold across the whole range instead of needing separate tuning per breakpoint.
     Bumped 65% -> 72% -> 80% -> 90% (7/1, 5th pass, Alex confirmed 80% reads better and asked
     to push further). */
  background-position: center 90%;
  background-repeat: no-repeat;
  aspect-ratio: 2.2 / 1;
  /* Constant floor across the whole 640px+ range (see comment above) — no longer swapped to a
     different aspect-ratio/floor pair at 900px or 1188px. */
  min-height: 540px;
  position: relative;
}
/* Text zone's height is exactly --studio-anchor — the same value used for the video's `top`
   below — so its bottom edge always lands exactly where the video begins, at any band height
   (aspect-ratio-driven, min-height-floored, or breakpoint-swapped). justify-content:flex-end
   means the text sits at the bottom of this zone; if the heading wraps to an extra line the
   zone just overflows upward (visible, no clipping), so it can grow without ever crossing
   into the video below it. */
.studio-text-inset { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: var(--studio-anchor); display: flex; flex-direction: column; justify-content: flex-end; z-index: 2; }
.studio-heading { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(32px, 5vw, 72px); line-height: 1; color: var(--plum); margin-bottom: 20px; }
.studio-body { font-size: 18px; line-height: 1.35; color: var(--plum); max-width: 640px; margin-bottom: 48px; }
/* CTA added 7/6. First attempt nested it inside .reveal (the flex-end-anchored text block) —
   broke, since anything inside .reveal adds height and pushes the whole text stack up. Second
   attempt nested it in .studio-text-inset instead (a position:absolute box, so still out of
   .reveal's flex flow) with right:18.5% meant to match .studio-video-inset's own right edge —
   but .studio-text-inset carries the .container class (max-width:1200px, centered), while
   .studio-video-inset is full-bleed against .studio-hero-wrap. Same percentage, two different
   reference boxes — didn't actually line up on wide screens. Fixed by promoting this element
   to a direct sibling of .studio-video-inset under .studio-hero-wrap (position:relative) — now
   both share the exact same containing block, so right:18.5% is a true match, not a
   coincidence of equal numbers.

   `top` was a hardcoded percentage (41% then 34%) hand-tuned against one reference render
   (~1512px wide) — root-caused 7/7 after it drifted out of alignment on a wider iMac window
   but looked correct on a narrower laptop window. Cause: .studio-heading's font-size is
   clamp(32px,5vw,72px), which stops scaling past ~1440px viewport width, while
   .studio-photo-band's height keeps growing continuously (aspect-ratio:2.2/1) — so above
   ~1440px the text block holds a fixed pixel height while the box around it keeps expanding,
   and any single top:% is only correct at the width it was eyeballed against. Fixed by
   measuring the real position instead of guessing it — see `positionStudioCTA()` in home.js,
   which sets `top` in px from the actual rendered bottom of .studio-body, on load/resize/
   fonts-ready. The 34% below is a no-JS fallback only; it is not the source of truth once the
   script runs. */
.studio-cta-inset { position: absolute; right: 18.5%; top: 34%; z-index: 3; }
@media (max-width: 1300px) {
  .studio-text-inset .section-label { margin-bottom: 8px; }
  .studio-heading { margin-bottom: 8px; }
  .studio-body { font-size: 16px; margin-bottom: 12px; }
}
@media (max-width: 900px) {
  /* Not enough open photo space to the right of the text at this width — drop the CTA back
     into normal flow below the paragraph instead of floating it over the image. */
  .studio-cta-inset { position: static; margin-top: 8px; }
}
/* Video composited into the empty wall gap between the two light stands, middle-to-lower in the photo */
.studio-video-inset { position: absolute; left: 18.5%; right: 18.5%; top: var(--studio-anchor); aspect-ratio: 3 / 1; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,0.28); z-index: 1; }
.studio-video-inset video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  /* Switched tactics entirely (2026-07-20) after several rounds of hand-tuned negative-margin
     math trying to squeeze the video into a fixed square crop's leftover ~90px of "wall" — kept
     breaking at different content lengths/viewport widths. Root fix: stop constraining the photo
     to its own fixed-aspect-ratio box (.studio-photo-band) and instead put it on .studio-hero-wrap
     itself, letting the SECTION'S height come from its content (text + video + button stacked
     naturally) instead of a fixed square fighting that content for space.
     Why this works cleanly: the source photo (2560x1266, ~2.02:1) is far wider than any mobile
     viewport, so background-size:cover on this wrap is ALWAYS height-bound here — the full image
     height maps proportionally onto the wrap's full height no matter how tall the wrap grows.
     Ceiling band stays the same ~20% down, plain white wall fills the ~70% below it, regardless
     of final content height — there's no crop math to re-tune every time the copy or video size
     changes, because the box is now sized BY the content instead of constraining it. Only
     background-position's horizontal value has any effect (there's no vertical slack to shift). */
  .studio-hero-wrap {
    display: flex;
    flex-direction: column;
    background-image: url('../images/Homepage/Key5CornerCovecopy.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
  /* .studio-photo-band no longer carries its own background or fixed shape on mobile — it's
     just a plain in-flow wrapper around the text now, auto-height to its content. */
  .studio-photo-band { background: none; aspect-ratio: auto; min-height: 0; position: static; order: 1; }
  /* padding-top clears the ceiling band. Fixed px, not a %, and deliberately not solved via the
     "what % is the ceiling" math from the old approach — that % is of the wrap's OWN final
     height, which depends on this padding, which would be circular. 100px comfortably clears the
     ceiling band across any realistic content height this section will ever have (it would need
     to render under ~500px tall total, text+video+button included, before 100px stopped being
     enough — never happens in practice). */
  /* #studio-scoped selector, not just .studio-text-inset — needed to win specificity against
     the later `.container { padding: 0 20px }` mobile reset below (same 640px breakpoint, same
     0,1,0 specificity, later in the file), which was silently zeroing padding-top back out. */
  #studio .studio-text-inset { position: static; top: auto; left: auto; transform: none; width: auto; height: auto; display: block; padding-top: 100px; }
  .studio-video-inset { position: static; left: auto; right: auto; top: auto; width: 84%; aspect-ratio: 3 / 1; margin: 24px auto 0; border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,0.32); order: 2; }
  /* align-self:flex-start fixes a bug from the reorder above: flex's default
     align-items:stretch was forcing this button (normally auto-width via .btn) to fill the
     full cross-axis width of the new flex column, making it span the whole page instead of
     sizing to its own text/padding like every other button on the site. */
  .studio-cta-inset { order: 3; margin: 20px 20px 32px; align-self: flex-start; }
}

/* ─── INTERIOR DESIGN BENTO GRID ────────────────────────────── */
.id-bento { display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:220px 220px 210px; gap:8px; }
.id-bento > div { border-radius:16px; overflow:hidden; }
.id-bento img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.id-bento > div:hover img { transform:scale(1.04); }
.id-bento .b-hero  { grid-column:1/3; grid-row:1/3; }
.id-bento .b-tall  { grid-column:3/4; grid-row:1/3; }
.id-bento .b-sqA   { grid-column:4/5; grid-row:1/2; }
.id-bento .b-sqB   { grid-column:4/5; grid-row:2/3; }
.id-bento .b-wideC { grid-column:1/3; grid-row:3/4; }
.id-bento .b-wideD { grid-column:3/5; grid-row:3/4; }
@media(max-width:900px) {
  .id-bento { grid-template-columns:repeat(2, 1fr); grid-template-rows:240px 170px 170px 200px 200px; }
  .id-bento .b-hero  { grid-column:1/3; grid-row:1/2; }
  .id-bento .b-tall  { grid-column:1/2; grid-row:2/4; }
  .id-bento .b-sqA   { grid-column:2/3; grid-row:2/3; }
  .id-bento .b-sqB   { grid-column:2/3; grid-row:3/4; }
  .id-bento .b-wideC { grid-column:1/3; grid-row:4/5; }
  .id-bento .b-wideD { grid-column:1/3; grid-row:5/6; }
}
@media(max-width:640px) {
  .id-bento { grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:auto; gap:10px; }
  .id-bento > div { grid-column:1 !important; grid-row:auto !important; }
  .id-bento .b-hero { aspect-ratio:4/3; }
  .id-bento .b-wideC, .id-bento .b-wideD { aspect-ratio:3/2; }
  .id-bento .b-tall { aspect-ratio:3/4; }
  .id-bento .b-sqA, .id-bento .b-sqB { aspect-ratio:1/1; }
}

/* ─── CLIENT TICKER ─────────────────────────────────────────── */
#clients { background: var(--white); padding: 80px 0 0; overflow: hidden; }
.clients-headline { font-family: 'Livvic', sans-serif; font-weight: 600; font-size: clamp(22px, 2.5vw, 34px); color: #457f1b; margin-bottom: 48px; }
.clients-ticker-wrap { overflow: hidden; padding: 40px 0 80px; }
.clients-ticker-inner { display: flex; width: max-content; will-change: transform; }
.clients-ticker-set { display: flex; flex-shrink: 0; align-items: center; }
.clients-logo { display: flex; align-items: center; justify-content: center; padding: 0 48px; flex-shrink: 0; }
.clients-logo img { height: 42px; width: auto; opacity: 1; filter: grayscale(100%); display: block; }

/* ─── TESTIMONIALS (marquee) ───────────────────────────────────── */
#testimonials { background: var(--white); padding: 60px 0; }
#testimonials .testi-label { color: var(--green); margin-bottom: 8px; display: block; }
#testimonials .testi-heading { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(36px, 4vw, 60px); line-height: 1; color: var(--plum); margin-bottom: 40px; }
.testimonials-marquee { overflow: hidden; position: relative; }
.testimonials-track { display: flex; gap: 24px; width: max-content; padding: 8px 0 24px; will-change: transform; }
.testi-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: var(--plum); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.testi-arrow:hover { background: var(--green); }
.testi-arrow svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.testi-arrow.prev { left: 20px; }
.testi-arrow.next { right: 20px; }
.hp-testimonial-card { width: 420px; flex-shrink: 0; background: var(--cream); border: 1px solid rgba(53,35,50,0.08); border-radius: 16px; padding: 36px; }
.testimonial-quote { font-family: 'Livvic', sans-serif; font-size: 16px; line-height: 1.7; color: var(--plum); margin-bottom: 24px; font-style: italic; }
.testimonial-author { font-family: 'Livvic', sans-serif; font-weight: 600; color: var(--green); font-size: 14px; }
.testimonial-company { font-family: 'Livvic', sans-serif; font-size: 13px; color: rgba(53,35,50,0.4); margin-top: 2px; }

/* Testimonial card photo backgrounds — original (non-overlay) photos, dark wash applied here for legibility */
.hp-testimonial-card.testi-photo { background-size: cover; background-position: center; border: none; }
.testi-photo .testimonial-quote { color: #fff; }
.testi-photo .testimonial-author { color: var(--yellow); }
.testi-photo .testimonial-company { color: rgba(255,255,255,0.7); }
.testi-modus { background-image: linear-gradient(rgba(20,8,18,0.72), rgba(20,8,18,0.72)), url('../images/Homepage/HomePage Testimonials/No Overlay/Modus.jpg'); }
.testi-genesis { background-image: linear-gradient(rgba(20,8,18,0.72), rgba(20,8,18,0.72)), url('../images/Homepage/HomePage Testimonials/No Overlay/Genesis.jpg'); }
.testi-native-foreign { background-image: linear-gradient(rgba(20,8,18,0.72), rgba(20,8,18,0.72)), url('../images/Homepage/HomePage Testimonials/No Overlay/Native Foreign.png'); }
.testi-vizmeg { background-image: linear-gradient(rgba(20,8,18,0.72), rgba(20,8,18,0.72)), url('../images/Homepage/HomePage Testimonials/No Overlay/Vizmeg.jpg'); }
.testi-boston { background-image: linear-gradient(rgba(20,8,18,0.72), rgba(20,8,18,0.72)), url('../images/Homepage/HomePage Testimonials/No Overlay/Boston Interiors.jpg'); }

/* ─── INSTAGRAM ──────────────────────────────────────────────── */
#instagram { background: var(--plum); padding: 100px 0; }
.ig-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; flex-wrap: wrap; gap: 20px; }
.ig-headline { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(36px, 5vw, 64px); line-height: 1; color: var(--white); margin-top: 10px; display: flex; align-items: center; gap: 0.4em; }
.ig-icon { width: 0.85em; height: 0.85em; fill: var(--green); flex-shrink: 0; }
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; border-radius: 16px; overflow: hidden; }
.ig-post { aspect-ratio: 3/4; border-radius: 6px; overflow: hidden; position: relative; display: block; background: rgba(255,255,255,0.06); }
.ig-post img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.ig-post:hover img { transform: scale(1.05); }
.ig-post-overlay { position: absolute; inset: 0; background: rgba(108,199,43,0.25); opacity: 0; transition: opacity 0.25s; display: flex; align-items: center; justify-content: center; }
.ig-post:hover .ig-post-overlay { opacity: 1; }
.ig-post-overlay svg { width: 24px; height: 24px; stroke: white; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; gap: 48px; }
  .about-badge { display: none; }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .contact-inner { grid-template-columns: 1fr; }
  .hp-work-item:nth-child(1) { grid-column: span 12; }
  .hp-work-item:nth-child(n+2) { grid-column: span 6; }
}
@media (max-width: 768px) {
  .hp-testimonial-card { width: 85vw; }
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
  /* Centers the single visible card in the viewport so arrow taps land the
     next/prev card dead-center instead of flush against the left edge. */
  .testimonials-marquee { padding: 0 7.5vw; }
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .section { padding: 72px 0; }

  /* Lightbox mobile overrides moved to main.css 2026-07-20, alongside the base .plb-* rules. */
  .process-steps { grid-template-columns: 1fr; }
  .hp-work-item:nth-child(n) { grid-column: span 12; }
  .work-header { flex-direction: column; align-items: flex-start; }

  /* Hero */
  #hero { padding-bottom: 60px; }
  .hero-sub { font-size: 17px; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-scroll { display: none; }

  /* About — matches JOandLARRY.jpg's native 1200x1432 ratio so the full photo shows
     on mobile with no crop (Alex, 2026-07-13). Previously forced to 16/9 to save
     vertical space, which cropped most of the portrait shot out. */
  .about-img-wrap { aspect-ratio: 1200/1432; }

  /* Work */
  .work-header { gap: 16px; }

  /* Contact */
  #contact { padding: 80px 0; }

  /* Arrows sat at left/right:20px over a 420px card centered in a wide viewport —
     fine on desktop, where they land on the faded gradient either side of the
     cards. On a phone the card is 85vw, so the prev arrow came down directly on
     top of the quote text (measured: arrow 20-64px, quote starts at 34px). Drop
     them below the track as a centered pair instead; the ::before/::after fades
     stay pinned to the edges and don't reach them. */
  .testimonials-marquee { padding-bottom: 60px; }
  .testi-arrow { top: auto; bottom: 0; transform: none; }
  .testi-arrow.prev { left: 50%; margin-left: -50px; }
  .testi-arrow.next { right: 50%; margin-right: -50px; }

  /* Pillar nav buttons — bigger touch targets */
  .pillar-arrow { width: 44px; height: 44px; }

  /* Pillar content — prevent overflow clipping title at top */
  .pillar-slide { min-height: 480px; }
  .pillar-body { padding: 20px 24px; }
  .pillar-title { font-size: clamp(24px, 7vw, 36px); margin-bottom: 12px; }
  .pillar-service-label { font-size: 14px; margin-bottom: 6px; }
  .pillar-body-copy { display: none; }
  .pillar-list { gap: 4px 16px; margin-bottom: 16px; }
  .pillar-list li { font-size: 13px; }
  .pillar-nav { margin-top: 12px; }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section { padding: 56px 0; }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-testimonial-card { width: 92vw; }
  .testimonials-marquee { padding-left: 4vw; padding-right: 4vw; }
  .clients-logo { padding: 0 28px; }
  .clients-logo img { height: 32px; }
  #testimonials { padding: 48px 0; }
  #instagram { padding: 72px 0; }
}

/* Homepage-only: Services nav-dropdown label is a real anchor here (links to
   #services), unlike subpages where it's still a non-navigating <span> per
   the June 19 2026 dropdown-trigger rule in decisions.md. main.css's
   .nav-dropdown-label sets cursor:default for the subpage case; this
   attribute selector only matches when the element actually has an href
   (i.e. only on the homepage), so subpages are unaffected. */
.nav-dropdown-label[href] { cursor: pointer; }