/* ============================================================
   Merke Homepage — Responsive styles via container queries.

   The page lives inside an artboard (or the viewport) and adapts
   layout to its container's inline-size. One layout, one
   stylesheet — three breakpoints: desktop / tablet / mobile.
   ============================================================ */

.merke-container {
  container-type: inline-size;
  container-name: page;
  background: var(--bg-canvas);
  min-height: 100%;
  scroll-behavior: smooth;
}
/* Make sticky-nav-aware anchor jumps land below the nav */
:where(.merke-root) [id] {
  scroll-margin-top: 96px;
}
.merke-root {
  color: var(--fg-primary);
}

/* ---------- Tokens — fluid across breakpoints ---------- */

.merke-root {
  --page-px: 64px;
  --section-py: 112px;
  --col-gutter: 56px;
  --left-rail: 200px;     /* fixed-width eyebrow column on desktop */
  --left-rail-gap: 56px;
  --content-indent: 256px; /* left-rail + gap, used to indent content rows */

  --h1-fs: 64px;
  --h2-fs: 44px;
  --h3-fs: 22px;
  --wingman-fs: 32px;

  --body-fs: 17px;
  --body-sm-fs: 15px;
  --body-lg-fs: 19px;
}

@container page (max-width: 1100px) {
  .merke-root {
    --page-px: 40px;
    --section-py: 88px;
    --col-gutter: 36px;
    --left-rail: 180px;
    --left-rail-gap: 36px;
    --content-indent: 216px;
    --h1-fs: 52px;
    --h2-fs: 38px;
    --wingman-fs: 28px;
  }
}

@container page (max-width: 760px) {
  .merke-root {
    --page-px: 22px;
    --section-py: 64px;
    --col-gutter: 24px;
    --left-rail: 0px;
    --left-rail-gap: 0px;
    --content-indent: 0px;
    --h1-fs: 38px;
    --h2-fs: 30px;
    --h3-fs: 20px;
    --wingman-fs: 24px;
    /* Body type bumped 1px each at mobile for readability — the editorial
       body paragraphs (16/14) felt small on phone reading distance. */
    --body-fs: 17px;
    --body-sm-fs: 15px;
    --body-lg-fs: 19px;
  }
}

/* ---------- Section primitives ---------- */

.section {
  padding: var(--section-py) var(--page-px);
  border-bottom: 1px solid rgba(11, 22, 31, 0.08);
}
/* ---------- Brand bands \u2014 thin coloured strips as page punctuation ---------- */
.brand-band {
  height: 20px;
  width: 100%;
  border-bottom: 1px solid rgba(11, 22, 31, 0.08);
}
.brand-band--sky   { background: var(--bg-sky); }
.brand-band--blush { background: var(--bg-blush); }
.brand-band--neutral { background: var(--bg-elevated); }
@container page (max-width: 760px) {
  .brand-band { height: 14px; }
}

/* ---------- Coloured section bands (from secondary palette) ---------- */
.section--sky     { background: var(--bg-sky); }
.section--blush   { background: var(--bg-blush); }
.section--neutral { background: var(--bg-elevated); }
.section--sunken  { background: var(--bg-elevated); }

/* ---------- Asymmetric half-bleed blocks ---------- */
/* Color the content area (right of the eyebrow rail) — eyebrow stays on
   the cream canvas, headline + body sit on a colored block that runs to
   the right page edge. Editorial half-spread feel. */
.section--half-blush,
.section--half-sky,
.section--half-neutral {
  position: relative;
  isolation: isolate;
}
.section--half-blush::before,
.section--half-sky::before,
.section--half-neutral::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.section--half-blush::before   { left: var(--content-indent); background: var(--bg-blush); }
.section--half-sky::before     { right: 50%; left: 0; background: var(--bg-sky); }
.section--half-neutral::before { left: var(--content-indent); background: var(--bg-elevated); }

@container page (max-width: 760px) {
  /* On mobile the eyebrow rail collapses and everything is single-column,
     so a half-bleed becomes a full-bleed band — which is the loud
     treatment we explicitly rejected. Drop the bleed on mobile. */
  .section--half-blush::before,
  .section--half-sky::before,
  .section--half-neutral::before {
    display: none;
  }
}

/* Header row: eyebrow on left, headline on right.
   On mobile, eyebrow stacks above headline. */
.section-header {
  display: grid;
  grid-template-columns: var(--left-rail) 1fr;
  column-gap: var(--left-rail-gap);
  align-items: start;
  margin-bottom: 64px;
}
.section-eyebrow,
.section-headline { padding-top: 0; }
@container page (max-width: 760px) {
  .section-header {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
}

.section-eyebrow {
  font-family: "Epilogue", sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-muted);
  line-height: 1.2;
}
@container page (max-width: 760px) {
  .section-eyebrow { font-size: 14px; }
}

.section-headline {
  font-family: "Epilogue", sans-serif;
  font-weight: 500;
  font-size: var(--h2-fs);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg-primary);
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
  padding-top: 0;
}
@container page (max-width: 760px) {
  .section-eyebrow { padding-top: 0; }
  .section-headline { padding-top: 0; }
}

.section-body {
  margin-left: var(--content-indent);
}
@container page (max-width: 760px) {
  .section-body { margin-left: 0; }
}

/* ---------- WhatsApp link block (Enquiry card) ---------- */
.whatsapp-link-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.whatsapp-link {
  font-family: "Epilogue", sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--merke-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 10px;
}
.whatsapp-link .whatsapp-icon {
  display: inline-flex;
  align-items: center;
  color: var(--merke-green);
  line-height: 0;
}
.whatsapp-link .whatsapp-label {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.whatsapp-link .link-arrow-glyph {
  display: inline-block;
  text-decoration: none;
}

/* ---------- CTA arrow animation ---------- */
@keyframes ctaArrowSlide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(5px); }
}
@keyframes ctaArrowReturn {
  0%   { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

.cta { position: relative; }
.cta-arrow {
  display: inline-block;
  will-change: transform;
  animation: ctaArrowReturn 280ms cubic-bezier(.2,.7,.2,1) both;
}
.cta:hover .cta-arrow {
  animation: ctaArrowSlide 280ms cubic-bezier(.2,.7,.2,1) both;
}

/* Inline text links with a trailing arrow */
.link-arrow { cursor: pointer; }
.link-arrow-glyph {
  display: inline-block;
  will-change: transform;
  animation: ctaArrowReturn 280ms cubic-bezier(.2,.7,.2,1) both;
}
.link-arrow:hover .link-arrow-glyph {
  animation: ctaArrowSlide 280ms cubic-bezier(.2,.7,.2,1) both;
}

/* Nav CTA */
.merke-nav .nav-cta-arrow {
  display: inline-block;
  will-change: transform;
  animation: ctaArrowReturn 280ms cubic-bezier(.2,.7,.2,1) both;
}
.merke-nav .nav-cta:hover .nav-cta-arrow {
  animation: ctaArrowSlide 280ms cubic-bezier(.2,.7,.2,1) both;
}

@media (prefers-reduced-motion: reduce) {
  .cta-arrow,
  .link-arrow-glyph,
  .merke-nav .nav-cta-arrow { animation: none; }
}

/* ---------- Nav ---------- */
.merke-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--page-px);
  border-bottom: 1px solid rgba(11, 22, 31, 0.06);
  background: rgba(248, 244, 232, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 50;
  transition:
    background 280ms ease,
    border-bottom-color 280ms ease;
}

/* State: nav is over a "dark" surface (hero, dark Trusted by, dark Etymology)
   — go transparent so the section flows under the nav. */
.merke-nav--over-hero {
  --nav-link-color: var(--merke-cream);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* State: nav is over a "light" hero (cream-on-cream studio shot).
   Same transparency, but keep dark links and the blue logo. */
.merke-nav--over-light {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Logo cross-fade */
.merke-nav-logo-link {
  position: relative;
  display: inline-flex;
  line-height: 0;
}
.merke-nav .logo {
  transition: opacity 280ms ease;
  display: block;
  height: 56px;
  width: auto;
}
.merke-nav .logo--light {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
.merke-nav--over-hero .logo--blue { opacity: 0; }
.merke-nav--over-hero .logo--light { opacity: 1; }
.merke-nav .nav-items { display: flex; align-items: center; gap: 32px; }
.merke-nav .nav-hamburger { display: none; }

/* "Get in touch" as a proper button — primary action in the nav.
   Ink fill with cream text. High-contrast premium anchor that works on both
   the cream nav and the blue hero. Hover inverts to cream / ink. */
.merke-nav .nav-cta {
  font-family: "Epilogue", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--merke-cream-50);
  background: var(--merke-ink-900);
  border: 1px solid var(--merke-ink-900);
  text-decoration: none;
  padding: 10px 19px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 220ms ease;
}
.merke-nav .nav-cta:hover {
  background: #F0F0ED;
  color: var(--merke-ink-900);
  border-color: var(--merke-ink-900);
}

@container page (max-width: 760px) {
  .merke-nav { padding: 16px var(--page-px); }
  .merke-nav .logo { height: 40px; }
  .merke-nav .nav-items { display: none; }
  .merke-nav .nav-hamburger {
    display: inline-flex;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--nav-link-color, var(--fg-primary));
  }
}

/* ---------- Mobile menu panel (drops below the sticky nav) ---------- */
.nav-mobile-menu { display: none; }
@container page (max-width: 760px) {
  .nav-mobile-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--merke-cream-50);
    border-bottom: 1px solid rgba(26, 22, 18, 0.10);
    box-shadow: 0 16px 40px rgba(58, 50, 42, 0.16);
    padding: 8px 0 16px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .nav-mobile-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-mobile-link {
    display: block;
    font-family: "Epilogue", sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: var(--fg-primary);
    text-decoration: none;
    padding: 14px var(--page-px);
    transition: background 140ms ease, color 140ms ease;
  }
  .nav-mobile-link:active { background: var(--merke-cream-200); color: var(--merke-blue); }
  .nav-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px var(--page-px) 0;
    padding: 15px 20px;
    background: var(--merke-ink-900);
    color: var(--merke-cream-50);
    font-family: "Epilogue", sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.005em;
    text-decoration: none;
    border-radius: 8px;
  }
}

/* ---------- Scroll-reveal ----------
   Content is VISIBLE BY DEFAULT, so it never waits on JavaScript — no blank
   flash while React mounts, and the page still shows everything if JS is slow
   or disabled. useScrollReveal() adds `.reveal-armed` only to elements that
   start BELOW the fold; those hide and then fade up when scrolled into view. */
.reveal { opacity: 1; transform: none; }
.reveal-armed {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 800ms cubic-bezier(.2, .7, .2, 1),
    transform 800ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
  will-change: opacity, transform;
}
.reveal-armed.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-armed { opacity: 1; transform: none; transition: none; }
}

/* ---------- Hero — full-bleed banner ---------- */
/* Pull the hero up under the sticky nav so the dark photo is what's behind the
   transparent nav at scroll=0 (otherwise the nav sits over the cream container
   and the cream-on-cream nav text becomes invisible). */
.hero {
  position: relative;
  padding: 0;
  margin-top: -100px;
  border-bottom: 1px solid rgba(11, 22, 31, 0.08);
  min-height: min(780px, 88cqh);
  overflow: hidden;
  isolation: isolate;
}
.hero-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-banner-bg > * {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}
.hero-banner-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}
@container page (max-width: 900px) {
  /* Mobile: image is a wide horizontal still life — anchor the crop to the
     right-bottom so the products stay visible below the headline. */
  .hero-banner-img {
    object-position: 80% bottom;
  }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Blue hero: image is already a saturated mid-dark blue. A whisper of
     additional shading on the left lifts text contrast just enough for the
     cream headline without muddying the photo. */
  background:
    linear-gradient(
      90deg,
      rgba(11, 22, 31, 0.18) 0%,
      rgba(11, 22, 31, 0.06) 45%,
      rgba(11, 22, 31, 0) 70%
    );
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  /* Anchor copy to the top-left so it reads first in the Z-pattern.
     Top padding clears the sticky nav (~100px) + breathing room. */
  padding: 156px var(--page-px) 80px;
  min-height: min(780px, 88cqh);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 18px;
  max-width: 920px;
  color: #F8F4E8;
}
.hero-cta { margin-top: 22px; }
@container page (max-width: 900px) {
  .hero { min-height: min(640px, 86cqh); margin-top: -72px; }
  .hero-content {
    /* Mobile: nav is ~72px, smaller stack — trim top clearance accordingly. */
    padding: 116px var(--page-px) 48px;
    min-height: min(640px, 86cqh);
  }
  /* Detach the CTA from the copy block and anchor it to the bottom-left of
     the banner. Eyebrow + sub stay at the top; products sit centre-stage in
     the middle; the CTA closes the Z-pattern at the bottom edge. */
  .hero-cta {
    margin-top: auto;
    padding-top: 24px;
  }
}
.hero-h1 {
  font-family: "Epilogue", sans-serif;
  font-weight: 500;
  font-size: var(--h1-fs);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: #F8F4E8;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}
.hero-sub {
  font-family: "Epilogue", sans-serif;
  font-size: var(--body-lg-fs);
  line-height: 1.5;
  color: rgba(248, 244, 232, 0.88);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}

/* Mobile: hide the H1 and promote the sub-line to match section-headline
   (var(--h2-fs) — 30px at ≤760px, 38px at ≤1100px). Placed after the base
   .hero-sub rule so source-order specificity lets this win when active. */
@container page (max-width: 900px) {
  .hero-h1 { display: none; }
  .hero-sub {
    font-family: "Epilogue", sans-serif;
    font-weight: 500;
    font-size: var(--h2-fs);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #F8F4E8;
    max-width: 14ch;
    text-wrap: balance;
  }
}

/* ---------- Etymology — dictionary entry, centered ---------- */
.etym {
  padding: 56px var(--page-px) 64px;
  background: var(--bg-elevated);
  border-bottom: 1px solid rgba(11, 22, 31, 0.08);
  display: flex;
  justify-content: center;
}
@container page (max-width: 760px) {
  .etym { padding: 44px var(--page-px) 52px; }
}

/* Dark variant — sits at the close of the page, before the footer */
.etym--dark {
  background: var(--merke-ink-900);
  border-bottom-color: rgba(248, 244, 232, 0.10);
}
.etym--dark .etym-eyebrow { color: var(--merke-cream-200); }
.etym--dark .etym-word { filter: brightness(0) invert(1); }
.etym--dark .etym-phon { color: rgba(248, 244, 232, 0.72); }
.etym--dark .etym-rule { background: rgba(248, 244, 232, 0.5); }
.etym--dark .etym-def,
.etym--dark .etym-meanings,
.etym--dark .etym-meanings > span { color: var(--merke-cream-100); }
.etym--dark .etym-pos { color: rgba(248, 244, 232, 0.65); }
.etym--dark ::selection { background: var(--merke-cream-100); color: var(--merke-ink-900); }

.etym-inner {
  max-width: 720px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.etym-eyebrow {
  font-family: "Epilogue", sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--fg-muted);
}

.etym-word {
  display: block;
  width: clamp(220px, 38cqw, 480px);
  height: auto;
  margin: 16px auto 12px;
  color: var(--fg-primary);
  filter: drop-shadow(0 0 0 transparent);
}

.etym-phon {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--merke-blue);
}
@container page (max-width: 760px) {
  .etym-phon { font-size: 13px; }
}

.etym-rule {
  width: 40px;
  height: 1px;
  background: var(--merke-blue);
  margin: 20px 0;
  opacity: 0.5;
}

.etym-def {
  font-family: "Epilogue", sans-serif;
  font-size: var(--body-fs);
  line-height: 1.5;
  color: var(--fg-primary);
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  text-wrap: balance;
}
.etym-pos {
  font-style: italic;
  color: var(--fg-muted);
  font-size: var(--body-sm-fs);
}
.etym-meanings {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  color: var(--fg-primary);
}
.etym-meanings > span {
  display: inline-block;
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  /* Two-column body area: eyebrow rail + a single text column that holds
     both headline and body. Polaroids take the third column. Because the
     text column is one grid item (not two stacked across two rows), the
     polaroid column's height can't bleed into the headline-to-body gap
     anymore — that gap is owned by .about-text's internal flex layout. */
  grid-template-columns: var(--left-rail) 1fr 1fr;
  column-gap: var(--left-rail-gap);
  row-gap: 40px;
  align-items: start;
}
.about-eyebrow      { grid-column: 1; grid-row: 1; }
.about-text         { grid-column: 2; grid-row: 1; max-width: 44ch; display: flex; flex-direction: column; gap: 24px; }
.about-polaroids-wrap { grid-column: 3; grid-row: 1; }
.about-headline     { /* no grid placement — child of .about-text */ }
.about-body         { /* no grid placement — child of .about-text */ }

@container page (max-width: 900px) {
  .about-grid {
    grid-template-columns: var(--left-rail) 1fr;
    row-gap: 36px;
  }
  .about-eyebrow        { grid-column: 1; grid-row: 1; }
  .about-text           { grid-column: 2; grid-row: 1; max-width: 60ch; }
  .about-polaroids-wrap { grid-column: 1 / -1; grid-row: 2; margin-left: var(--content-indent); }
}
@container page (max-width: 760px) {
  .about-grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  /* Dissolve the flex wrapper so headline and body become direct grid
     children — lets us place the body below the polaroids on mobile. */
  .about-text           { display: contents; }
  .about-eyebrow        { grid-column: 1; grid-row: 1; }
  .about-headline       { grid-column: 1; grid-row: 2; }
  .about-polaroids-wrap { grid-column: 1; grid-row: 3; margin-left: 0; }
  .about-body           { grid-column: 1; grid-row: 4; margin-left: 0; max-width: 60ch; }
}

.about-polaroids {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 28px;
  padding: 8px 4px 4px;
}
.polaroid {
  margin: 0;
  background: #F8F4E8;
  padding: 12px 12px 18px;
  box-shadow:
    0 1px 0 rgba(26,22,18,0.04),
    0 12px 28px -12px rgba(26,22,18,0.28),
    0 2px 6px -2px rgba(26,22,18,0.14);
  border-radius: 2px;
  transition: transform 0.3s ease;
}
.polaroid:hover {
  transform: translateY(-2px);
}
.polaroid-photo {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #F9F2E4;
}
.polaroid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.polaroid-caption {
  margin-top: 14px;
  font-family: "Epilogue", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--merke-ink, #1A1612);
  letter-spacing: 0.005em;
  padding: 0 2px;
}
@container page (max-width: 700px) {
  .about-polaroids { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .polaroid { padding: 10px 10px 14px; }
  .polaroid-caption { font-size: 13px; margin-top: 10px; }
}

/* ---------- Why ---------- */
.section--why-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 96px;
  padding-bottom: 112px;
}
.section--why-photo .why-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.section--why-photo .why-bg > * {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}
.section--why-photo .why-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(248, 244, 232, 0.78) 0%, rgba(248, 244, 232, 0.90) 60%, rgba(248, 244, 232, 0.94) 100%),
    linear-gradient(180deg, rgba(42, 36, 29, 0.04), rgba(42, 36, 29, 0.10));
}
/* Brand-pattern wash — replaces the photo background. The pattern is strongest
   along the top-right, then flows straight DOWN the full height of the section
   and fades to nothing exactly at the bottom edge — right where the dark
   "Trusted by" band begins. Two intersected mask layers: a vertical fade that
   stays solid through most of the section then dissolves into the band, and a
   gentle left→right fade for the top-right emphasis. Tune `opacity` for
   strength; move the 55% stop on the vertical layer to change how far down the
   pattern stays solid before fading. */
.section--why-photo .why-pattern {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url("assets/brand-pattern.svg");
  background-size: 72px 72px;
  background-repeat: repeat;
  background-position: top right;
  opacity: 0.42;
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0.6) 80%, transparent 100%),
    linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.7) 50%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0.6) 80%, transparent 100%),
    linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.7) 50%, #000 100%);
          mask-composite: intersect;
}
/* Lighter cream veil for the pattern variant — keeps the eyebrow + headline
   legible over the denser top-right without washing the pattern out. */
.section--why-photo .why-veil--pattern {
  background: radial-gradient(120% 90% at 50% 0%, rgba(248, 244, 232, 0.50) 0%, rgba(248, 244, 232, 0.70) 70%, rgba(248, 244, 232, 0.78) 100%);
}
.section--why-photo .why-card {
  background: rgba(248, 244, 232, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 26px 22px 24px;
  border-top: 1px solid var(--accent);
}
.section--why-photo .why-card .h3 { color: var(--fg-primary); }
.why-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--accent);
  padding-top: 26px;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@container page (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; gap: 32px; }
}
@container page (max-width: 520px) {
  .why-grid > div > .body-p { display: none; }
  /* On mobile, the full-width top borders between stacked cards read as
     section dividers rather than accent marks. Swap for a short bar. */
  .why-card {
    border-top: 0;
    padding-top: 0;
  }
  .why-card::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: var(--accent);
    margin-bottom: 18px;
  }
}

/* ---------- Process — steps connected by arrows ---------- */
.process-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  column-gap: 12px;
}
.process-arrow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18px;
  color: var(--merke-blue);
  width: 56px;
  flex-shrink: 0;
}
.process-arrow svg { display: block; }
@container page (max-width: 1100px) {
  .process-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
    column-gap: 28px;
  }
  .process-arrow { display: none; }
}
@container page (max-width: 520px) {
  .process-row { grid-template-columns: 1fr; row-gap: 28px; }
}

/* ---------- Occasions ---------- */
.occ-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(11, 22, 31, 0.12);
}
.occ-cell {
  padding: 40px 36px 44px 0;
  border-left: 1px solid rgba(11, 22, 31, 0.12);
  padding-left: 36px;
  display: flex;
  flex-direction: column;
}
.occ-cell:nth-child(3n + 1) {
  border-left: none;
  padding-left: 0;
}
.occ-cell:nth-child(-n + 3) {
  border-bottom: 1px solid rgba(11, 22, 31, 0.12);
}

@container page (max-width: 1100px) {
  .occ-grid { grid-template-columns: repeat(2, 1fr); }
  .occ-cell,
  .occ-cell:nth-child(3n + 1) {
    border-left: 1px solid rgba(11, 22, 31, 0.12);
    padding-left: 28px;
    padding-right: 28px;
  }
  .occ-cell:nth-child(odd) { border-left: none; padding-left: 0; }
  .occ-cell:nth-child(-n + 3) { border-bottom: none; }
  .occ-cell:not(:nth-last-child(-n + 2)) {
    border-bottom: 1px solid rgba(11, 22, 31, 0.12);
  }
}

/* Hide body copy from tablet down — title + icon carry the message at small
   sizes. Was scoped to ≤520px which left it visible on most phones above
   that (Pro Max etc); aligned with the rest of the site's mobile breakpoint. */
@container page (max-width: 760px) {
  .occ-cell .body-p { display: none; }
}

@container page (max-width: 520px) {
  .occ-grid { grid-template-columns: repeat(2, 1fr); column-gap: 18px; }
  .occ-cell,
  .occ-cell:nth-child(3n + 1),
  .occ-cell:nth-child(odd) {
    padding-left: 0 !important;
    padding-right: 14px !important;
    border-left: none !important;
  }
  /* Vertical divider only between the two columns */
  .occ-cell:nth-child(even) {
    border-left: 1px solid rgba(11, 22, 31, 0.12) !important;
    padding-left: 14px !important;
    padding-right: 0 !important;
  }
  /* Horizontal divider under all rows except the last */
  .occ-cell { border-bottom: 1px solid rgba(11, 22, 31, 0.12); padding-top: 22px; padding-bottom: 26px; }
  .occ-cell:nth-last-child(-n + 2) { border-bottom: none; }
  /* Tighten icon + title sizes */
  .occ-cell .h3 { font-size: 17px; }
}

/* ---------- Categories — clickable cards ---------- */
.cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 32px;
  row-gap: 56px;
}
@container page (max-width: 1100px) {
  .cats-grid { grid-template-columns: repeat(3, 1fr); row-gap: 44px; }
  /* Hide body copy at tablet and below */
  .cat-body { display: none; }
}
@container page (max-width: 760px) {
  .cats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; column-gap: 16px; }
}
@container page (max-width: 380px) {
  .cats-grid { grid-template-columns: 1fr; row-gap: 28px; }
}

.cat-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.cat-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 1 / 1;
  /* Subtle hairline so a warm-cream product photo on the cool-gray section
     reads as "framed tile" instead of "stuck-on rectangle." Remove once all
     8 category images are generated on a matching #F0F0ED backdrop. */
  box-shadow:
    inset 0 0 0 1px rgba(11, 22, 31, 0.06),
    0 1px 2px rgba(11, 22, 31, 0.04);
}
.cat-image-inner {
  transition: transform 360ms cubic-bezier(.2,.6,.2,1);
  width: 100%;
  height: 100%;
}
.cat-image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cat-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 14px;
  pointer-events: none;
}
.cat-overlay-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--merke-cream-50);
  color: var(--merke-blue);
  font-family: "Epilogue", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(11, 22, 31, 0.10);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.cat-card:hover .cat-image-inner { transform: scale(1.03); }
.cat-card:hover .cat-overlay-chip { opacity: 1; transform: translateY(0); }
.cat-card:focus-visible { outline: 2px solid var(--merke-blue); outline-offset: 4px; }

.cat-title {
  font-family: "Epilogue", sans-serif;
  font-weight: 500;
  font-size: var(--h3-fs);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--merke-blue);
  margin: 18px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  text-wrap: balance;
  transition: color 160ms ease;
}
.cat-title .cat-title-text {
  flex: 1 1 auto;
  min-width: 0;
}
.cat-title .cat-arrow {
  flex: 0 0 auto;
  display: inline-block;
  transition: transform 220ms ease;
  font-size: 0.85em;
  color: var(--merke-blue);
}
.cat-card:hover .cat-title { color: var(--merke-blue); }
.cat-card:hover .cat-title .cat-arrow { transform: translateX(4px); }

.cat-body {
  font-family: "Epilogue", sans-serif;
  font-size: var(--body-sm-fs);
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 10px 0 0;
  text-wrap: pretty;
}

/* ---------- Trusted by ---------- */
.trust--sky     { background: var(--bg-sky); }
.trust--neutral { background: var(--bg-elevated); }
.trust--blush   { background: var(--bg-blush); }
.trust--dark    {
  background: var(--merke-ink-900);
  border-bottom-color: rgba(248, 244, 232, 0.10) !important;
}
.trust--dark .section-eyebrow { color: var(--merke-cream-200); }
.trust--dark .trust-logo img {
  /* Logos are already white-on-transparent — no inversion needed. */
  opacity: 0.78;
  filter: none;
}
.trust--dark .trust-logo:hover img { opacity: 1; filter: none; }
.trust {
  padding: 80px var(--page-px);
  border-bottom: 1px solid rgba(11, 22, 31, 0.08);
  display: grid;
  grid-template-columns: var(--left-rail) 1fr;
  column-gap: var(--left-rail-gap);
  align-items: center;
}
@container page (max-width: 760px) {
  .trust { grid-template-columns: 1fr; row-gap: 24px; }
}
.trust-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  column-gap: 16px;
  row-gap: 32px;
}
.trust-logo {
  padding: 8px 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Pop-in animation: hidden until parent gets .is-visible */
  opacity: 0;
  transform: translateY(14px) scale(0.92);
  filter: blur(2px);
  transition:
    opacity 620ms cubic-bezier(.2,.7,.2,1),
    transform 620ms cubic-bezier(.2,.7,.2,1),
    filter 620ms cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 110ms);
  will-change: transform, opacity;
}
.trust-row.is-visible .trust-logo {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
/* Subtle hover lift */
.trust-logo { transition-property: opacity, transform, filter; }
.trust-logo img { transition: transform 200ms ease, filter 220ms ease, opacity 220ms ease; }
.trust-logo:hover img { transform: translateY(-2px); }
.trust-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  opacity: 0.82;
}
.trust-logo:hover img { opacity: 1; }

/* Optical-weight slots — different max-heights so each logo feels equally prominent */
.trust-logo--wide   img { max-height: 32px; }   /* long horizontal wordmarks (Diageo) */
.trust-logo--medium img { max-height: 44px; }   /* mid-ratio marks (The Cove, Maa Homes) */
.trust-logo--tall   img { max-height: 84px; }   /* near-square symbol+text marks (Starliee) */
/* Schindler runs especially fine — give it more height to match optical weight */
.trust-logo[data-logo="schindler"] img { max-height: 96px; }

@media (prefers-reduced-motion: reduce) {
  .trust-logo {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}
@container page (max-width: 1100px) {
  .trust-logo--wide   img { max-height: 28px; }
  .trust-logo--medium img { max-height: 38px; }
  .trust-logo--tall   img { max-height: 72px; }
  .trust-logo[data-logo="schindler"] img { max-height: 84px; }
}
@container page (max-width: 900px) {
  .trust-row { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
}
@container page (max-width: 600px) {
  .trust-row { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .trust-logo--wide   img { max-height: 24px; }
  .trust-logo--medium img { max-height: 34px; }
  .trust-logo--tall   img { max-height: 64px; }
  .trust-logo[data-logo="schindler"] img { max-height: 76px; }
}

/* ---------- Enquiry ---------- */
.enquiry-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gutter);
}
@container page (max-width: 900px) {
  .enquiry-cards { grid-template-columns: 1fr; gap: 24px; }
}

.enquiry-card {
  background: var(--bg-elevated);
  border: 1px solid rgba(11, 22, 31, 0.10);
  border-radius: 14px;
  padding: 36px;
}
@container page (max-width: 760px) {
  .enquiry-card { padding: 24px; }
}

/* Form fields stack vertically — one column always */
.field {
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
}
.field-label {
  font-family: "Epilogue", sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-secondary);
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.field-label .req {
  color: var(--merke-blue);
  font-size: 14px;
  line-height: 1;
}
.field-label .opt {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-left: 4px;
}
.field input,
.field textarea {
  font-family: "Epilogue", sans-serif;
  font-size: 15px;
  padding: 4px 0 10px;
  border: none;
  border-bottom: 1px solid rgba(11, 22, 31, 0.22);
  background: transparent;
  color: var(--fg-primary);
  width: 100%;
  outline: none;
  transition: border-color 160ms ease;
}
.field input:focus,
.field textarea:focus { border-bottom-color: var(--merke-blue); }
.field textarea { resize: none; min-height: 60px; }

/* Native validation state — only after the user has interacted with the field
   (or after a submit attempt). :user-invalid avoids showing red on first load. */
.field input:user-invalid,
.field textarea:user-invalid {
  border-bottom-color: #B3402E;
}
.field input:user-invalid:focus,
.field textarea:user-invalid:focus {
  border-bottom-color: #B3402E;
}

/* Hide spinner arrows on number input — cleaner look, the value is still numeric-only */
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field input[type="number"] {
  -moz-appearance: textfield;
}

/* Offset the enquiry anchor so the sticky nav doesn't cover the cards
   when the user clicks "Share your brief" / "Get in touch" CTAs */
#enquiry { scroll-margin-top: 32px; }

/* ---------- Enquiry success modal ---------- */
@keyframes enquiryBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes enquiryModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.enquiry-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 22, 31, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: enquiryBackdropIn 200ms ease both;
}

.enquiry-modal {
  background: var(--bg-canvas, #F8F4E8);
  padding: 48px 44px 40px;
  max-width: 440px;
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(11, 22, 31, 0.28);
  animation: enquiryModalIn 260ms cubic-bezier(.2, .7, .2, 1) both;
}

.enquiry-modal-eyebrow {
  font-family: "Epilogue", sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--merke-green);
}

.enquiry-modal-headline {
  font-family: "Epilogue", sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg-primary);
  margin: 18px 0 14px;
}

.enquiry-modal-body {
  font-family: "Epilogue", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0 0 32px;
  max-width: 36ch;
}

.enquiry-modal-actions {
  display: flex;
  justify-content: flex-end;
}

@container page (max-width: 760px) {
  .enquiry-modal { padding: 36px 28px 28px; }
  .enquiry-modal-headline { font-size: 30px; }
}

/* ---------- Closing brand band ---------- */
/* Solid Merke-blue sign-off band. Replaces the earlier still-life-with-veil:
   a brand signature reads stronger as a single colour stamp than as an
   atmospheric photo dimmed to readability. Logo + wordmark sit cream on blue. */
.closing-brand {
  position: relative;
  isolation: isolate;
  background: var(--merke-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 40px var(--page-px);
}
.closing-brand-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 32px;
}
.closing-brand-tag {
  /* Large uppercase mono wordmark — typographic counterweight to the logo,
     not a caption. Matches the footer-wingman treatment from the PDP.
     Two-line break ("OBJECTS / WITH INTENT.") makes it read as a stacked
     stamp rather than a single sentence. */
  font-family: "Roboto Mono", "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 52px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(248, 244, 232, 0.92);
  text-align: right;
  white-space: nowrap;
}
.closing-brand-logo {
  height: 96px;
  width: auto;
  display: block;
}
@container page (max-width: 900px) {
  .closing-brand { min-height: 160px; padding: 32px var(--page-px); }
  .closing-brand-logo { height: 68px; }
  .closing-brand-tag { font-size: 34px; }
}
@container page (max-width: 520px) {
  .closing-brand { min-height: 120px; padding: 24px var(--page-px); }
  /* Keep logo + wordmark side-by-side even on phones — the two-line stack
     of the wordmark is short enough at 18px to sit next to the logo. */
  .closing-brand-logo { height: 40px; }
  .closing-brand-tag { font-size: 18px; }
}

.footer {
  padding: 40px var(--page-px) 32px;
  border-top: 1px solid rgba(11, 22, 31, 0.10);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Epilogue", sans-serif;
  font-size: 13px;
  color: var(--fg-muted);
  gap: 24px;
  flex-wrap: wrap;
}
@container page (max-width: 760px) {
  .footer { padding: 32px var(--page-px) 28px; }
}

/* ---------- Utilities ---------- */
.body-p {
  font-family: "Epilogue", sans-serif;
  font-size: var(--body-fs);
  line-height: 1.65;
  color: var(--fg-secondary);
  margin: 0;
  text-wrap: pretty;
}
.body-p--sm { font-size: var(--body-sm-fs); line-height: 1.6; }
.body-p--lg { font-size: var(--body-lg-fs); line-height: 1.55; }

.h3 {
  font-family: "Epilogue", sans-serif;
  font-weight: 500;
  font-size: var(--h3-fs);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  margin: 0;
}