/* ============================================================
   LAYOUT.CSS — Navigation, page structure, sections, footer
   VM Branding House
   ============================================================ */

/* ── WebGL Canvas ── */
#webgl-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
  pointer-events: none;
  transition: opacity 0.4s ease;
  display: block;
}

/* ── Chrome Interactive Background ── */
#bg-scene {
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas); /* -1 */
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.5s ease;
}

#bg-image {
  position: absolute;
  inset: -9%;
  background-size: cover;
  background-position: center;
  filter: brightness(0.26) contrast(1.18) saturate(0.8);
  will-change: transform;
  transform-origin: center center;
}

/* Cursor lens — glowing spotlight on the chrome surface */
#bg-lens {
  position: absolute;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(200, 215, 235, 0.04) 28%,
    transparent 66%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Click ripple — expanding ring */
#bg-ripple {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 1.5px solid rgba(255, 255, 255, 0);
}

#bg-ripple.pop {
  animation: bg-ripple-pop 1.5s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes bg-ripple-pop {
  0%   { width: 0;     height: 0;     border-color: rgba(255,255,255,0.55); }
  100% { width: 500px; height: 500px; border-color: rgba(255,255,255,0);    }
}

/* ── Scroll Progress Bar ── */
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--c-charcoal), var(--c-silver));
  z-index: calc(var(--z-toast) + 10);
  transition: width 0.1s linear;
}

/* ── Header / Navigation ── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Height is content-driven (logo sets it) — not fixed */
  height: auto;
  min-height: 72px;
  z-index: var(--z-nav);
  background: rgba(245, 245, 242, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--b-chrome);
  transition: background var(--tr-base), border-color var(--tr-base);
}

.site-header.scrolled {
  background: rgba(245, 245, 242, 0.98);
  border-bottom-color: var(--c-charcoal);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Height auto — logo stretches the nav row */
  height: auto;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(10px, 1.6vw, 20px) var(--sp-8);
  gap: var(--sp-6);
}

/* ── Brand lockup: [logo.png] with an inset "by" ──
 *
 * assets/logo.png is never altered, cropped, covered or duplicated.
 * It already contains — rasterised — the VM monogram, the words
 * "VALENTINA MONTENEGRO" and the tagline. The header is the artwork
 * alone, plus one small italic "by" set into the image's own empty
 * margin immediately before the rasterised name, so it reads:
 *
 *        by VALENTINA MONTENEGRO
 *
 * (The studio name itself is carried by the footer and the page
 * titles — the header stays purely the mark.)
 *
 * The "by" is placed with percentages of the image box, so it tracks
 * the artwork exactly at every viewport size. Measured from the PNG:
 *   · name ink begins at 43.07% of image width
 *   · name sits between 61.81% and 67.59% of image height (centre 64.7%)
 *   · name cap-height is 3.25% of the image width
 */
.brand {
  /* single source of truth — "by" size and logo trims derive from this */
  --logo-w: clamp(280px, 34vw, 560px);
  /* empty artwork margin reclaimed, as a fraction of the logo width.
     The PNG carries 21% empty above its ink and 22.6% below, so these
     stay well inside the blank area — no ink is ever clipped. */
  --trim-top: 0.07;
  --trim-bot: 0.085;
  /* logo aspect ratio 3074/1728 → height = width × 0.5622 */
  --logo-ar: 0.5622;

  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-decoration: none;
  gap: 0;
}

/* Positioning context for the "by"; also clips the reclaimed margin so
   the artwork never paints past the header edge. */
.brand-mark {
  position: relative;
  display: block;
  line-height: 0;
  overflow: hidden;
}

.brand-by {
  position: absolute;
  /*
   * The name's centre is 64.7% of the IMAGE height. Because the mark box
   * is the image minus the trimmed margins, convert into mark coordinates:
   *   (0.647 × ar − trimTop) ÷ (ar − trimTop − trimBot)
   */
  top: calc(
    (0.647 * var(--logo-ar) - var(--trim-top)) /
    (var(--logo-ar) - var(--trim-top) - var(--trim-bot)) * 100%
  );
  /* right edge lands just before the name's first letter (43.07%) */
  right: 58.9%;
  transform: translateY(-50%);

  font-family: var(--f-editorial);
  /* slightly smaller than the name's cap-height (0.0325 × width);
     floored so it never degrades to a smudge on small phones */
  font-size: max(6px, calc(var(--logo-w) * 0.027));
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--c-mid);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.site-logo {
  display: block;
  /* Width drives the size — height follows the 1.7789 aspect ratio */
  width: var(--logo-w);
  height: auto;
  max-width: 560px;
  object-fit: contain;
  object-position: left center;
  /* Dissolve white logo background into cream nav — no white box */
  mix-blend-mode: multiply;
  /*
   * The artwork carries 21% empty space above its ink and 22.6% below.
   * Reclaiming part of it tightens the lockup without touching a pixel
   * of the mark — nothing is cropped, only unused margin is absorbed.
   */
  margin-top: calc(var(--logo-w) * -1 * var(--trim-top));
  margin-bottom: calc(var(--logo-w) * -1 * var(--trim-bot));
}

@media (max-width: 900px) {
  .brand {
    --logo-w: clamp(190px, 58vw, 320px);
  }
  .site-logo {
    max-width: 320px;
  }
}

/* ── Footer brand signature: VM BRANDING HOUSE / by Valentina Montenegro ── */
.footer-logo-wordmark {
  display: block;
  font-family: var(--f-heading);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-soft-white);
  line-height: 1.3;
  margin-bottom: var(--sp-2);
}

.footer-signature {
  display: block;
  margin-bottom: var(--sp-6);
}

/*
 * Footer signature hierarchy — three deliberate steps down from the
 * wordmark, so only one element in the black footer reads as white:
 *
 *   VM BRANDING HOUSE   #f5f5f2  weight 800  ← primary
 *   by                  #767676  weight 300  ← subtle connector
 *   VALENTINA MONTENEGRO #9c9c9c weight 500  ← medium grey signature
 *
 * "by" sits below the name so the eye lands on the founder's name,
 * not on the connecting word. Contrast on the black ground:
 * name 7.6:1, "by" 4.6:1 — both comfortably legible.
 */

/* "by" — deliberately secondary, quieter than the name it introduces */
.footer-signature-by {
  font-family: var(--f-editorial);
  font-size: var(--t-xs);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.1em;
  color: #767676;
  margin-right: 0.45em;
}

/* Founder signature — refined medium grey, never larger than the
   studio name above it */
.footer-signature-name {
  font-family: var(--f-heading);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9c9c9c;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.nav-links a {
  font-size: clamp(0.44rem, 0.52vw, 0.54rem);
  font-weight: 600;
  letter-spacing: var(--ls-lg);
  text-transform: uppercase;
  color: var(--c-charcoal);
  padding: var(--sp-2) var(--sp-3);
  position: relative;
  transition: color var(--tr-fast);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--sp-3);
  right: var(--sp-3);
  height: 1px;
  background: var(--c-charcoal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr-base);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-links a.active {
  color: var(--c-black);
}

/* ── Services Dropdown in Nav ── */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  font-size: clamp(0.44rem, 0.52vw, 0.54rem);
  font-weight: 600;
  letter-spacing: var(--ls-lg);
  text-transform: uppercase;
  color: var(--c-charcoal);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  transition: color var(--tr-fast);
}

.nav-dropdown-toggle svg {
  width: 8px;
  height: 5px;
  transition: transform var(--tr-base);
}

.nav-dropdown:hover .nav-dropdown-toggle svg {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--sp-4));
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-white);
  border: var(--b-black);
  min-width: 240px;
  padding: var(--sp-4) 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr-fast), transform var(--tr-fast);
  transform: translateX(-50%) translateY(-6px);
  box-shadow: var(--sh-md);
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-md);
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: none;
  transition: background var(--tr-fast), padding-left var(--tr-base);
}

.nav-dropdown-menu a:hover {
  background: var(--c-light);
  padding-left: var(--sp-8);
}

.nav-dropdown-menu a::after { display: none; }

/* ── Nav Right Controls ── */
.nav-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-shrink: 0;
}

/* ── Hamburger ── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 16px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--c-charcoal);
  transition: transform var(--tr-base), opacity var(--tr-fast);
  transform-origin: center;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7.25px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7.25px) rotate(-45deg);
}

/* ── Mobile Nav Overlay ── */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--c-black);
  z-index: calc(var(--z-nav) - 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--sp-24) var(--sp-8);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr-slow);
}

.mobile-nav.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  width: 100%;
  margin-bottom: var(--sp-12);
}

.mobile-nav-links a {
  font-size: clamp(13px, 2.8vw, 16px);
  font-weight: 600;
  color: var(--c-soft-white);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.6;
  transition: color var(--tr-fast), transform var(--tr-base);
  transform: translateX(-20px);
  opacity: 0;
}

.mobile-nav.open .mobile-nav-links a {
  transform: translateX(0);
  opacity: 1;
}

.mobile-nav-links a:hover {
  color: var(--c-chrome);
}

.mobile-nav-sub {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-left: var(--sp-6);
  border-left: 1px solid rgba(255,255,255,0.2);
  margin-top: var(--sp-2);
}

.mobile-nav-sub a {
  font-size: var(--t-sm) !important;
  font-weight: 500 !important;
  letter-spacing: var(--ls-md) !important;
  text-transform: uppercase;
}

.mobile-nav-lang {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.mobile-nav-lang button {
  font-size: var(--t-xs);
  letter-spacing: var(--ls-md);
  text-transform: uppercase;
  color: var(--c-mid);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid rgba(255,255,255,0.15);
  transition: color var(--tr-fast), border-color var(--tr-fast);
  font-weight: 500;
}

.mobile-nav-lang button:hover,
.mobile-nav-lang button.active {
  color: var(--c-white);
  border-color: rgba(255,255,255,0.5);
}

/* ── Main Content Offset ── */
main {
  padding-top: var(--nav-h);
}

/* ── Container ── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-8);
}

.container-sm {
  max-width: var(--container-sm);
  margin: 0 auto;
  padding: 0 var(--sp-8);
}

/* ── Section Band (thick horizontal rule) ── */
.section-band {
  width: 100%;
  height: var(--band);
  background: var(--c-charcoal);
  display: block;
}

/* ── Section Spacing ── */
.section {
  padding: var(--sp-32) 0;
  position: relative;
}

.section-sm {
  padding: var(--sp-20) 0;
}

.section-lg {
  padding: var(--sp-40) 0;
}

/* ── Section Colors ── */
.section-white   { background: var(--c-white); }
.section-light   { background: var(--c-soft-white); }
.section-black   { background: var(--c-black); color: var(--c-soft-white); }
.section-charcoal{ background: var(--c-charcoal); color: var(--c-soft-white); }

/* ── Hero Section ── */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  background: transparent;
  padding: var(--sp-32) 0;
}

/* ── Home hero: chrome liquid background ── */
.home-hero {
  isolation: isolate; /* own stacking context keeps children z-index scoped */
}

.chrome-bg {
  position: absolute;
  inset: -8%;           /* bleed gives room for parallax travel without bare edges */
  z-index: -2;
  background-image: url("../assets/chrome-liquid-bg.jpg");
  /*
   * 82% keeps the image composed and editorial — not wall-to-wall zoomed.
   * JS will apply translate3d + scale(1.06) each frame.
   */
  background-size: 82%;
  background-position: 58% center;
  background-repeat: no-repeat;
  will-change: transform;
}

/* Gradient overlay — editorial split: readable text left, open chrome right */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      rgba(248, 246, 242, 0.86) 0%,
      rgba(248, 246, 242, 0.60) 36%,
      rgba(248, 246, 242, 0.12) 66%,
      rgba(248, 246, 242, 0.00) 100%
    );
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: var(--z-content);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-8);
  width: 100%;
}

.hero-label {
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: var(--ls-xl);
  text-transform: uppercase;
  color: var(--c-dark);
  margin-bottom: var(--sp-6);
  display: block;
}

.hero-headline {
  font-size: var(--t-hero);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--c-charcoal);
  max-width: 880px;
  margin-bottom: var(--sp-8);
}

.hero-body {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: #3a3a3a;
  max-width: 620px;
  margin-bottom: var(--sp-12);
}

/* Hero CTAs for light chrome background */
.hero .btn-outline {
  border-color: rgba(30, 30, 30, 0.35);
  color: var(--c-charcoal);
}

.hero .btn-outline:hover {
  background: rgba(20, 20, 20, 0.07);
  border-color: rgba(20, 20, 20, 0.65);
}

/* ── V-Pattern Banner ── */
.pattern-banner {
  width: 100%;
  height: 460px;
  overflow: hidden;
  position: relative;
  display: block;
}

.pattern-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.pattern-banner:hover img {
  transform: scale(1.02);
}

.hero-body p + p {
  margin-top: var(--sp-4);
}

.hero-ctas {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ── Page Hero (inner pages) ── */
.page-hero {
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--sp-16);
  padding-top: var(--sp-24);
  background: var(--c-black);
  color: var(--c-soft-white);
  position: relative;
  overflow: hidden;
}

.page-hero-inner {
  position: relative;
  z-index: var(--z-content);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-8);
  width: 100%;
}

.page-hero-label {
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: var(--ls-xl);
  text-transform: uppercase;
  color: var(--c-mid);
  margin-bottom: var(--sp-4);
  display: block;
}

.page-hero-title {
  font-size: var(--t-3xl);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--c-white);
  margin-bottom: var(--sp-6);
}

.page-hero-line {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-md);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--c-chrome);
  max-width: 700px;
}

/* ── Two-Column Layout ── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.grid-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

/* ── Section Header ── */
.section-header {
  margin-bottom: var(--sp-16);
}

.section-label {
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: var(--ls-xl);
  text-transform: uppercase;
  color: var(--c-mid);
  margin-bottom: var(--sp-4);
  display: block;
}

.section-title {
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.section-title-editorial {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
}

/* ── Service Preview Rows ── */
.service-preview {
  padding: var(--sp-24) 0;
  border-top: var(--band) solid var(--c-charcoal);
}

.service-preview-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.service-preview-inner.reversed {
  direction: rtl;
}

.service-preview-inner.reversed > * {
  direction: ltr;
}

.service-preview-copy {}

.service-preview-copy .service-preview-label {
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-xl);
  text-transform: uppercase;
  color: var(--c-mid);
  margin-bottom: var(--sp-4);
  font-weight: 600;
  display: block;
}

.service-preview-copy .service-preview-title {
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-6);
  line-height: var(--lh-tight);
}

.service-preview-copy p {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--c-dark);
  margin-bottom: var(--sp-8);
}

/* Single editorial image in a service preview row */
.img-mosaic-single.img-wrap {
  aspect-ratio: 3 / 2;   /* landscape editorial — reliable height on all screens */
  width: 100%;
}

/* ── Image Container with Fallback ── */
.img-wrap {
  overflow: hidden;
  background: var(--c-grey);   /* light neutral fallback — no dark rectangles */
  position: relative;
}

.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--tr-slow);
}

.img-wrap:hover img {
  transform: scale(1.04);
}

/* ── Service Card Image Thumbnail ── */
.service-card-img {
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin-bottom: var(--sp-6);
  background: var(--c-grey);    /* light fallback when image not yet loaded */
  position: relative;
}

.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--tr-slow);
}

.service-card:hover .service-card-img img {
  transform: scale(1.04);
}

/* Hide the card image area if the img fails to load — no broken icon */
.service-card-img img[aria-hidden="true"],
.service-card-img:empty {
  display: none;
}

/* ── Image Strip (5 service images horizontal) ── */
.image-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 360px;
  border-top: var(--band) solid var(--c-charcoal);
  border-bottom: var(--band) solid var(--c-charcoal);
  overflow: hidden;
}

.image-strip-item {
  overflow: hidden;
  background: var(--c-grey);    /* light fallback — no dark blocks if image is slow */
  position: relative;
  border-right: 1px solid rgba(0,0,0,0.08);
}

.image-strip-item:last-child {
  border-right: none;
}

.image-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tr-slow);
  filter: grayscale(15%);
}

.image-strip-item:hover img {
  transform: scale(1.07);
  filter: grayscale(0%);
}

/* ── CTA Section ── */
.cta-section {
  padding: var(--sp-32) 0;
  text-align: center;
  background: var(--c-black);
  color: var(--c-soft-white);
  border-top: var(--band) solid var(--c-charcoal);
}

.cta-section .section-label {
  color: var(--c-mid);
}

.cta-section .section-title {
  color: var(--c-white);
  margin-bottom: var(--sp-6);
}

.cta-section .cta-body {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-sm);
  font-weight: 300;
  color: var(--c-chrome);
  max-width: 560px;
  margin: 0 auto var(--sp-12);
  line-height: var(--lh-snug);
}

/* ── About Page Layout ── */
.about-grid {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: var(--sp-16);
  align-items: start;
}

.about-text-block {
  max-width: 680px;
}

.about-text-block p {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--c-dark);
  margin-bottom: var(--sp-8);
}

.about-closing {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-md);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-black);
  margin-top: var(--sp-16);
  border-top: var(--b-black);
  padding-top: var(--sp-12);
}

/* ── Service Page Layout ── */
.service-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
  padding: var(--sp-24) 0;
}

.service-intro p {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--c-dark);
  margin-bottom: var(--sp-6);
}

.service-list {
  margin: var(--sp-8) 0;
}

.service-list-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-4) 0;
  border-bottom: var(--b-light);
}

.service-list-item:last-child {
  border-bottom: none;
}

.service-list-num {
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: var(--ls-md);
  color: var(--c-mid);
  min-width: 32px;
  padding-top: 3px;
}

.service-list-text {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-sm);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--c-charcoal);
}

/* ── Contact Layout ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}

.contact-info p {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--c-dark);
  margin-bottom: var(--sp-8);
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: var(--b-black);
}

.contact-detail-item {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
}

.contact-detail-label {
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: var(--ls-md);
  text-transform: uppercase;
  color: var(--c-mid);
  min-width: 60px;
}

.contact-detail-value {
  font-size: var(--t-sm);
  color: var(--c-charcoal);
}

/* ── Footer ── */
.site-footer {
  background: var(--c-black);
  color: var(--c-soft-white);
  padding: var(--sp-24) 0 var(--sp-8);
  border-top: var(--band) solid var(--c-charcoal);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-12);
  margin-bottom: var(--sp-16);
}

.footer-brand {}

.footer-logo-img {
  height: 40px;
  width: auto;
  filter: invert(1) brightness(0.9);
  margin-bottom: var(--sp-6);
}

.footer-tagline {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--c-mid);
  max-width: 320px;
  margin-bottom: var(--sp-6);
}

.footer-email {
  font-size: var(--t-sm);
  color: var(--c-chrome);
  transition: color var(--tr-fast);
}

.footer-email:hover {
  color: var(--c-white);
}

.footer-col-title {
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: var(--ls-xl);
  text-transform: uppercase;
  color: var(--c-mid);
  margin-bottom: var(--sp-6);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-links a {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--c-silver);
  letter-spacing: var(--ls-sm);
  transition: color var(--tr-fast), transform var(--tr-fast);
  display: inline-block;
}

.footer-links a:hover {
  color: var(--c-white);
  transform: translateX(4px);
}

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-contact-list span {
  font-size: var(--t-xs);
  color: var(--c-silver);
  display: block;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--sp-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.footer-copy {
  font-size: var(--t-xxs);
  color: rgba(255,255,255,0.3);
  letter-spacing: var(--ls-sm);
}

.footer-social {
  display: flex;
  gap: var(--sp-4);
}

.footer-social a {
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-lg);
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  transition: color var(--tr-fast);
  font-weight: 600;
}

.footer-social a:hover {
  color: var(--c-white);
}

/* ============================================================
   RESPONSIVE — 900px breakpoint
   ============================================================ */
@media (max-width: 900px) {
  :root {
    /* --nav-h is updated dynamically by JS (initNavHeight).
       This is a safe fallback in case JS hasn't run yet. */
    --nav-h: clamp(130px, 36vw, 210px);
  }

  .nav-links,
  .nav-dropdown {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .grid-2,
  .service-preview-inner,
  .service-intro,
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .service-preview-inner.reversed {
    direction: ltr;
  }

  /* Image above copy on all screen sizes ≤ 900px */
  .service-preview-visual {
    order: -1;
  }

  /* On mobile (1-column), 16:9 is more compact than 3:2 */
  .img-mosaic-single.img-wrap {
    aspect-ratio: 16 / 9;
    min-height: 200px;
  }

  /* Chrome liquid bg: fill more of the narrow viewport */
  .chrome-bg {
    background-size: 160%;
    background-position: 65% 40%;
  }

  /* Gradient stays legible over chrome on mobile */
  .home-hero::after {
    background: linear-gradient(
      160deg,
      rgba(248, 246, 242, 0.96) 0%,
      rgba(248, 246, 242, 0.82) 40%,
      rgba(248, 246, 242, 0.40) 68%,
      rgba(248, 246, 242, 0.00) 100%
    );
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }

  .grid-services {
    grid-template-columns: 1fr 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }

  .image-strip {
    grid-template-columns: 1fr 1fr;
    height: 320px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }

  .hero-headline {
    max-width: 100%;
  }

  .hero-body {
    max-width: 100%;
  }

  .section {
    padding: var(--sp-20) 0;
  }

  .section-lg {
    padding: var(--sp-24) 0;
  }

  .cta-section {
    padding: var(--sp-20) 0;
  }
}

/* ============================================================
   RESPONSIVE — 500px breakpoint
   ============================================================ */
@media (max-width: 500px) {
  .container,
  .container-sm {
    padding: 0 var(--sp-6);
  }

  .nav {
    padding: var(--sp-3) var(--sp-6);
  }

  /*
   * Phone header fit — the brand lockup and the nav controls have to
   * share ~375px. Without this the hamburger is pushed off-screen.
   */
  .brand {
    --logo-w: clamp(140px, 44vw, 200px);
    min-width: 0;
  }

  .nav-controls {
    gap: var(--sp-3);
  }

  .grid-3,
  .grid-services {
    grid-template-columns: 1fr;
  }

  .grid-4,
  .image-strip {
    grid-template-columns: 1fr 1fr;
    height: 240px;
  }

  .hero-ctas {
    flex-direction: column;
  }

  .hero-ctas .btn {
    width: 100%;
    text-align: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .section {
    padding: var(--sp-16) 0;
  }

  .page-hero {
    min-height: 45vh;
  }

  .service-preview {
    padding: var(--sp-16) 0;
  }

  /* Narrower screens: keep 16:9 from 900px breakpoint, just ensure min-height */
  .img-mosaic-single.img-wrap {
    min-height: 180px;
  }

  /* Service preview: tighter section padding */
  .service-preview-inner {
    gap: var(--sp-6);
  }

  /* Section headers: slightly smaller on phones */
  .section-title {
    font-size: var(--t-xl);
  }
}

/* ============================================================
   SHOP — editorial service index
   Treated as a curated catalogue / masthead contents page,
   never as an ecommerce grid: no cards, no shadows, no radii.
   ============================================================ */
.shop-index {
  border-top: var(--b-black);
}

.shop-item {
  display: grid;
  grid-template-columns: minmax(70px, 0.5fr) minmax(0, 4fr) minmax(0, 5fr) auto;
  gap: var(--sp-8);
  align-items: baseline;
  padding: var(--sp-12) 0;
  border-bottom: var(--b-light);
  position: relative;
  transition: background var(--tr-base);
}

/* Hairline that draws in from the left on hover — the only "effect" */
.shop-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--c-charcoal);
  transition: width var(--tr-slow);
}

.shop-item:hover::after { width: 100%; }

.shop-item-num {
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: var(--ls-lg);
  color: var(--c-mid);
  white-space: nowrap;
  transition: color var(--tr-base);
}

.shop-item:hover .shop-item-num { color: var(--c-charcoal); }

.shop-item-title {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--c-charcoal);
}

.shop-item-desc {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--c-dark);
}

/* Action column — holds price (when set) + link */
.shop-item-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
  white-space: nowrap;
}

/*
 * PRICE — intentionally empty until real pricing exists.
 * Add a <span class="shop-item-price">…</span> inside .shop-item-action
 * and it will style itself. No placeholder prices are rendered.
 */
.shop-item-price {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: var(--ls-sm);
  color: var(--c-charcoal);
}

/* ── Shop preview on the Home page ── */
.shop-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-12);
  margin-top: var(--sp-16);
  margin-bottom: var(--sp-16);
}

.shop-preview-item {
  border-top: var(--b-black);
  padding-top: var(--sp-6);
}

.shop-preview-num {
  display: block;
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: var(--ls-lg);
  color: var(--c-mid);
  margin-bottom: var(--sp-4);
}

.shop-preview-title {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-3);
  color: var(--c-charcoal);
}

.shop-preview-desc {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--c-dark);
}

/* ============================================================
   BOOK A CALL — editorial booking panel
   ============================================================ */
.booking-layout {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: var(--sp-16);
  align-items: start;
}

.booking-copy p {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--c-dark);
  margin-bottom: var(--sp-8);
}

/*
 * CALENDLY EMBED CONTAINER
 * ------------------------
 * The embed is injected into .calendly-embed by js/booking.js, which
 * reads the URL from   window.VM_CALENDLY_URL   (see js/booking.js).
 * Until a real URL is set, .calendly-fallback below is shown instead —
 * no invented URL, no fake scheduler.
 */
.calendly-embed {
  width: 100%;
  min-height: 680px;
  border: var(--b-black);
  background: var(--c-white);
  overflow: hidden;
}

.calendly-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 680px;
  border: 0;
}

/* Shown only while no Calendly URL has been configured */
.calendly-fallback {
  border: var(--b-black);
  background: var(--c-white);
  padding: var(--sp-16) var(--sp-12);
  text-align: center;
}

.calendly-fallback-label {
  display: block;
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: var(--ls-xl);
  text-transform: uppercase;
  color: var(--c-mid);
  margin-bottom: var(--sp-6);
}

.calendly-fallback-text {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--c-dark);
  max-width: 420px;
  margin: 0 auto var(--sp-8);
}

/* ── Shop / Booking responsive ── */
@media (max-width: 900px) {
  .shop-item {
    grid-template-columns: minmax(52px, auto) 1fr;
    gap: var(--sp-3) var(--sp-6);
    padding: var(--sp-8) 0;
  }

  /* number | title  →  then description and action span both columns */
  .shop-item-desc,
  .shop-item-action {
    grid-column: 2 / -1;
  }

  .shop-item-action {
    align-items: flex-start;
    margin-top: var(--sp-2);
  }

  .shop-preview-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    margin-top: var(--sp-12);
    margin-bottom: var(--sp-12);
  }

  .booking-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .calendly-embed,
  .calendly-embed iframe {
    min-height: 560px;
  }

  .calendly-fallback {
    padding: var(--sp-12) var(--sp-6);
  }
}

@media (max-width: 500px) {
  .shop-item {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .shop-item-desc,
  .shop-item-action {
    grid-column: 1 / -1;
  }

  .calendly-embed,
  .calendly-embed iframe {
    min-height: 520px;
  }
}

/* About page with no image column — text spans the full measure */
.about-grid-single {
  grid-template-columns: 1fr;
}