/* ==========================================================================
   Melody Elephant — melodyelephant.com
   Single stylesheet. Organised as:
     01 Tokens          06 Board 1 · Hero
     02 Reset & base    07 Board 1 · Collection
     03 Layout          08 Board 2 · Compressed package
     04 Components      09 Board 3 · Company
     05 Navigation      10 Board 4 · Fabrics
                        11 Board 5 · Contact
                        12 Footer / floating WhatsApp
                        13 Responsive
                        14 Motion preferences & print
                        15 404
   ========================================================================== */

/* 01 ── TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Cool neutrals and the brand blue taken straight from the logo artwork
     (#244a92). Every text/background pair below meets WCAG AA — see the
     comments for the measured ratios. */
  --paper:      #fdfdff;
  --paper-2:    #f3f6fb;
  --paper-3:    #e8eef7;
  --ink:        #0f1729;   /* 17.6 / 16.5 / 15.3 on paper, paper-2, paper-3 */
  --ink-2:      #49566d;   /*  7.3 /  6.8 /  6.4 */
  --ink-3:      #5f6a80;   /*  5.4 /  5.0 /  4.7 */
  --line:       #dee5f0;
  --line-2:     #c4cedd;

  --brand:      #244a92;   /* the logo blue, 8.4 with white on top */
  --brand-dark: #1b3a75;
  --brand-tint: #eef2fa;
  --dark:       #0d1a33;   /* footer and dark surfaces */

  --wa:         #25d366;
  --wa-ink:     #0b3d33;
  --wa-dark:    #0b6a5c;

  /* Both self-hosted and variable over 300-700, so the 400 / 500 / 600 scale
     used below is real. Outfit stands in for the Avant Garde Gothic that Dedon
     uses; Inter is the Helvetica-like body face. */
  --font-display: "Outfit", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap:       1200px;
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --section-y:  clamp(4.5rem, 9vw, 9.5rem);
  --nav-h:      4.5rem;
  --radius:     4px;
  --radius-lg:  10px;
  --shadow:     0 1px 2px rgba(15, 23, 41, .05), 0 12px 32px -12px rgba(15, 23, 41, .2);
  --ease:       cubic-bezier(.22, 1, .36, 1);
}

/* 02 ── RESET & BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--brand); color: #fff; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  padding: .7rem 1.2rem;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: .85rem;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--brand);
  z-index: 120;
  pointer-events: none;
}

/* 03 ── LAYOUT ─────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  scroll-margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + .5rem);
}

.section__head { max-width: 62ch; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lede { margin-inline: auto; }
.section__head--light .h2,
.section__head--light .eyebrow { color: #fff; }

.h2 { font-size: clamp(1.95rem, 4.1vw, 3.4rem); }
.h3 { font-size: clamp(1.45rem, 2.4vw, 2.1rem); }

.eyebrow {
  margin-bottom: .9rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow--light { color: #fff; }

.lede {
  margin-top: 1.15rem;
  max-width: 62ch;
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
  line-height: 1.55;
  color: var(--ink-2);
}
.lede--light { color: rgba(255, 255, 255, .88); }

/* 04 ── COMPONENTS ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--solid { background: var(--brand); color: #fff; }
.btn--solid:hover { background: var(--brand-dark); }

.btn--outline-light {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(6px);
}
.btn--outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--ghost { border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn--whatsapp { background: var(--wa); color: var(--wa-ink); }
.btn--whatsapp:hover { background: var(--wa-dark); color: #fff; }

.btn--block { width: 100%; justify-content: center; }

.btn__text { display: inline; }
.ico { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.9rem;
  padding-bottom: .2rem;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-2);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.link-arrow::after {
  content: "";
  width: 1.1rem;
  height: 1px;
  background: currentColor;
  transition: width .3s var(--ease);
}
.link-arrow:hover { color: var(--brand); border-color: var(--brand); }
.link-arrow:hover::after { width: 1.7rem; }

.ticks { margin-top: 1.5rem; display: grid; gap: .6rem; }
.ticks li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .97rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .62em;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--brand);
}

/* Scroll reveal: content is visible by default and only animated once the
   script confirms IntersectionObserver support, so nothing can get stuck. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }
[data-delay="1"] { --d: 1; }
[data-delay="2"] { --d: 2; }
[data-delay="3"] { --d: 3; }
[data-delay="4"] { --d: 4; }

/* 05 ── NAVIGATION ─────────────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  /* clear the notch in landscape and the status bar in standalone mode */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 253, 249, .8);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.site-nav.is-scrolled {
  background: rgba(255, 253, 249, .93);
  border-bottom-color: var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav__brand { display: inline-flex; align-items: center; gap: .7rem; }
.nav__mark { width: 2.2rem; height: auto; }
.nav__wordmark {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
}

.nav__links { display: flex; align-items: center; gap: clamp(.6rem, 1.7vw, 1.6rem); }
.nav__links a {
  position: relative;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-block: .4rem;
  transition: color .28s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .1rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: .6rem; }
.nav__cta { padding: .68rem 1.1rem; font-size: .74rem; }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: .6rem;
}
.nav__burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.2px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.2px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 2.2rem var(--gutter) 2.6rem;
  background: var(--paper);
  overflow-y: auto;
  animation: menu-in .3s var(--ease);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { display: grid; gap: .2rem; }
.mobile-menu a:not(.btn) {
  display: block;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }

/* 06 ── BOARD 1 · HERO ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: max(32rem, 100svh);
  padding-top: var(--nav-h);
  overflow: hidden;
  background: var(--paper-3);
}

.hero__media { position: absolute; inset: 0; }

/* A tiny blurred stand-in so the hero photograph fades in from the right colour
   instead of flashing a flat panel. */
.hero { background: #c9d2cc url("/assets/img/products/hero-cushions-lqip.webp") center / cover no-repeat; }

/* Only the hero fills its box. The Compressed Package band is a panorama and is
   deliberately left at its natural aspect (see its own rule below) — giving it
   `height: 100%` here forced a crop at every width, and on a phone that crop cut
   the "COMPRESSED PACKAGE" wordmark that is baked into the right half. */
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media img {
  transform: scale(1.06);
  animation: hero-settle 2.6s var(--ease) .1s forwards;
}
@keyframes hero-settle { to { transform: scale(1); } }

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 11, 8, .56) 0%, rgba(14, 11, 8, .2) 38%, rgba(14, 11, 8, .7) 100%),
    linear-gradient(90deg, rgba(14, 11, 8, .48) 0%, rgba(14, 11, 8, 0) 62%);
}

.hero__content {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3.5rem, 8vw, 6rem);
}
.hero__title {
  max-width: 16ch;
  color: #fff;
  font-size: clamp(2.6rem, 6.6vw, 5.4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.hero__content .lede { max-width: 56ch; color: rgba(255, 255, 255, .9); }

.hero__cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3.5rem, 8vw, 6rem);
  display: none;
  align-items: center;
  gap: .7rem;
  color: rgba(255, 255, 255, .8);
  writing-mode: vertical-rl;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.hero__cue-line {
  width: 1px;
  height: 3.4rem;
  background: currentColor;
  opacity: .6;
  animation: cue 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cue {
  0%, 100% { transform: scaleY(.35); opacity: .3; }
  50%      { transform: scaleY(1);   opacity: .85; }
}

/* 07 ── BOARD 1 · COLLECTION ───────────────────────────────────────────── */
.collection { background: var(--paper); }

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top: clamp(2.6rem, 5vw, 4rem);
}

.card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 1 / 1;
}
.card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
@media (hover: hover) {
  .card:hover .card__media img { transform: scale(1.035); }
}

.card__title {
  margin: .95rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
}


/* 08 ── BOARD 2 · COMPRESSED PACKAGE ───────────────────────────────────── */
/* The supplied photograph is a bright retail-shelf shot (white pack cartons on
   mint) and it is close to square, while the board is wide and shorter than the
   image. Covering the whole section therefore cropped roughly 20% off each side
   and cut the size-guide banner in half, and any scrim strong enough to carry
   white copy over it made the photograph invisible.
   So the picture gets its own full-width band at the top, anchored left and top
   so nothing is cropped horizontally and the banner stays whole, and the copy
   sits below it on solid colour where contrast is guaranteed. */
.compressed {
  position: relative;
  overflow: hidden;
  /* `.section` would otherwise add its own block padding and leave a gap above
     the photograph; the band is meant to start flush at the board top. */
  padding-block: 0;
  background: var(--paper-2);
  color: var(--ink-2);
  scroll-margin-top: var(--nav-h);
}
/* Deliberately the plainest possible sizing: the image stays in normal flow at
   `height: auto` (so its intrinsic ratio drives everything) and the container
   simply clips it. No percentage heights, no object-fit — those depended on the
   container's resolved height and produced an empty band when they failed. */
.compressed__media {
  position: relative;
  margin: 0;
  /* The photograph is a 2.62:1 panorama, so its natural height at 1920 px is
     733 px and at 2560 px it is 977 px. The cap is set just above the widest
     case so the band is never cropped; the scrim below does the softening. */
  max-height: clamp(19rem, 52vw, 62rem);
  overflow: hidden;
  background: var(--paper-3);
}
.compressed__media img {
  display: block;
  width: 100%;
  height: auto;
}
.compressed__scrim {
  position: absolute;
  inset: 0;
  /* No darkening — the board is light now. This only softens the join between
     the photograph and the paper-coloured block underneath it. */
  background: linear-gradient(180deg,
    rgba(243, 246, 251, 0) 62%,
    rgba(243, 246, 251, .55) 88%,
    var(--paper-2) 100%);
}
.compressed__inner {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(5rem, 11vw, 10rem);
}
.compressed__inner .lede { max-width: 60ch; }

.benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.6rem, 5vw, 4rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.benefit {
  padding: clamp(1.5rem, 2.6vw, 2.3rem);
  background: var(--paper);
}
.benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--brand);
}
.benefit__icon svg { width: 1.25rem; height: 1.25rem; }
.benefit__title {
  color: var(--ink);
  font-size: 1.16rem;
  font-weight: 500;
}
.benefit__text {
  margin-top: .6rem;
  font-size: .94rem;
  line-height: 1.62;
  color: var(--ink-2);
}

.rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1.1rem;
  margin-top: 2.4rem;
}
.rail__step {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rail__step + .rail__step::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 1px;
  margin-right: 1.1rem;
  vertical-align: middle;
  background: var(--line-2);
}

/* 09 ── BOARD 3 · COMPANY ──────────────────────────────────────────────── */
.company { background: var(--paper-2); }

.company__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.company__lockup {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.company__lockup img { width: min(100%, 17rem); }
.company__lockup figcaption {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-3);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(2.8rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
.stat__unit { font-size: .48em; color: var(--brand); margin-left: .06em; }
.stat__label {
  margin-top: .7rem;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* Three stages of the line, one row each. Every tile is the same 4:3 and the
   columns are equal, so the nine photographs read as one curated set. */
.stages {
  margin-top: clamp(3rem, 6.5vw, 5.5rem);
  display: grid;
  gap: clamp(2.6rem, 6vw, 5rem);
}

.stage__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.6rem, 1.6vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The Company wall. Thirteen frames in two blocks split by how they were shot,
   not by what they show: seven deep-focus frames of the plant floor, then six
   shallow-focus close-ups with the background thrown out. Mixing the two reads as
   inconsistent because the eye keeps switching register; kept apart, each block
   is coherent on its own.

   Twelve columns. The floor block opens with four across (span 3) and finishes
   with three (span 4); the close-ups are all three across (span 4). That gives
   rows of 4, 3, 3, 3 with no holes.

   Nothing marks the blocks: no captions, no headings, because a wall of plain
   photographs reads as more curated than a labelled one. */
.stage__grid--wall { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.stage__grid--wall > li { grid-column: span 4; }                     /* three across */

.stage__grid figure { margin: 0; overflow: hidden; background: var(--paper-3); }
.stage__grid img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
@media (hover: hover) {
  .stage__grid li:hover img { transform: scale(1.04); }
}

@media (max-width: 64rem) {
  /* the wall drops to two per row, every tile the same size again */
  .stage__grid--wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage__grid--wall > li { grid-column: span 1; }
}

@media (max-width: 64rem) {
  /* an odd tile count would leave a single tile beside an empty cell, so that
     one — and only that one — stretches across the row */
  .stage__grid--wall > li:last-child:nth-child(odd) { grid-column: span 2; }
}

@media (max-width: 48rem) {
  .stage__grid--wall > li:last-child:nth-child(odd) { grid-column: span 2; }
}

/* 10 ── BOARD 4 · FABRICS ──────────────────────────────────────────────── */
.fabrics { background: var(--paper); }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(3rem, 7vw, 5.5rem);
}
.feature--reverse .feature__media { order: 2; }

.feature__media {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 1 / 1;
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }

.feature__index {
  margin-bottom: .7rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand);
}
.feature__body p { margin-top: 1.1rem; font-size: 1rem; line-height: 1.7; }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.6rem);
  margin-top: clamp(3rem, 7vw, 5.5rem);
}
.gallery__item { margin: 0; }
.gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--paper-2);
}
.gallery__item figcaption {
  margin-top: .85rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* 11 ── BOARD 5 · CONTACT ──────────────────────────────────────────────── */
/* The factory floor sits behind the whole board. The photograph is a wide
   3.8:1 frame, so `cover` enlarges it — the veil below is what keeps both the
   copy readable and that enlargement invisible.

   The veil is dark, not light. A pale wash left the board washed out and hid
   the photograph entirely; a dark one lets the hall read as texture and gives
   the white cards something to lift off. It also runs the board into the
   footer, which is the same `--dark`. The heading and lede therefore carry the
   `--light` modifiers — see section 11 of README-DEPLOY.md.

   The alphas are as low as they can go while white copy still passes AA: at
   these values the lede sits at 7.0:1 against the brightest pixel behind it, and
   the heading area at 9.8:1. Darker veils were tried (0.90/0.85/0.78 gave
   11.4:1) and simply hid the photograph for no accessibility gain — the exact
   figures are in section 11. */
.contact {
  position: relative;
  background: var(--paper-3) url("/assets/img/company/factory-hall-1920.webp")
              center bottom / cover no-repeat;
}

.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 26, 51, 0.82) 0%,
    rgba(13, 26, 51, 0.70) 45%,
    rgba(13, 26, 51, 0.58) 100%
  );
}

.contact > .wrap { position: relative; }

@media (max-width: 48rem) {
  /* the narrow frame needs the smaller file, not the 1920 one */
  .contact {
    background-image: url("/assets/img/company/factory-hall-1200.webp");
  }
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: clamp(2.6rem, 5vw, 4rem);
}

.wa-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* the board sits on a dark scrim, so the card lifts with a dark shadow rather
     than the pale one used everywhere else */
  box-shadow: 0 28px 60px -34px rgba(0, 0, 0, .85);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.wa-card:hover {
  transform: translateY(-3px);
  border-color: var(--wa);
  box-shadow: 0 1px 2px rgba(23, 19, 14, .05), 0 24px 48px -18px rgba(18, 140, 126, .55);
}
.wa-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--wa);
  color: var(--wa-ink);
}
.wa-card__icon svg { width: 1.9rem; height: 1.9rem; fill: currentColor; }
.wa-card__body { display: grid; gap: .15rem; }
.wa-card__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.wa-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.005em;
}
.wa-card__cta { font-size: .88rem; font-weight: 600; color: var(--wa-dark); }

.contact__note {
  margin-top: 1rem;
  font-size: .87rem;
  color: rgba(255, 255, 255, .68);
}

.channels {
  display: grid;
  /* One full-width row per channel rather than a two-column split.
     A grid row is as tall as its tallest cell, so with email (one line) beside
     working hours (three) the email cell carried two lines of dead space under
     it. Stacked, every row is exactly its own height and each value has the full
     width — which also means nothing here can wrap. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.channel {
  display: flex;
  gap: .85rem;
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  background: var(--paper);
}
.channel--wide { grid-column: 1 / -1; }
.channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--brand);
}
.channel__icon svg { width: 1.05rem; height: 1.05rem; }
.channel__body { min-width: 0; }
.channel__title {
  margin-bottom: .35rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.channel__value {
  display: block;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}
a.channel__value:hover { color: var(--brand); text-decoration: underline; }
.channel__value--muted { color: var(--ink-2); }

/* 12 ── FOOTER & FLOATING WHATSAPP ─────────────────────────────────────── */
.site-footer {
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  background: var(--dark);
  color: rgba(255, 255, 255, .68);
  font-size: .9rem;
}
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.site-footer__brand img {
  width: min(100%, 11rem);
}
.site-footer__blurb {
  margin-top: 1.3rem;
  max-width: 40ch;
  line-height: 1.65;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.foot-col__title {
  margin-bottom: 1rem;
  color: #fff;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.foot-col ul { display: grid; gap: .55rem; }
.foot-col a { transition: color .25s var(--ease); }
.foot-col a:hover { color: #fff; }

.site-footer__social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.site-footer__social-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  color: rgba(255, 255, 255, .8);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.site-footer__social svg { width: 1rem; height: 1rem; fill: currentColor; }
.site-footer__social a:hover { background: #fff; color: var(--ink); border-color: #fff; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.5rem;
  padding-top: 1.6rem;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-size: .82rem;
  color: rgba(255, 255, 255, .5);
}
/* The floating WhatsApp button is fixed to the bottom-right corner, which puts it
   over this row. The copyright sits on the left so they no longer collide, but on
   wide screens the row still keeps clear of the button. */

@media (min-width: 52rem) {
  .site-footer__bottom { padding-right: 13rem; }
}

.wa-float {
  position: fixed;
  right: calc(clamp(1rem, 3vw, 1.9rem) + env(safe-area-inset-right, 0px));
  bottom: calc(clamp(1rem, 3vw, 1.9rem) + env(safe-area-inset-bottom, 0px));
  z-index: 110;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1.35rem;
  background: var(--wa);
  color: var(--wa-ink);
  border-radius: 999px;
  box-shadow: 0 10px 28px -8px rgba(18, 140, 126, .6);
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.wa-float svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.wa-float__text { font-size: .82rem; font-weight: 600; letter-spacing: .06em; }
.wa-float:hover { transform: translateY(-3px); background: var(--wa-dark); color: #fff; }
.wa-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--wa);
  animation: wa-pulse 2.8s var(--ease) infinite;
  pointer-events: none;
}
@keyframes wa-pulse {
  0%   { opacity: .7; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.22); }
  100% { opacity: 0;  transform: scale(1.22); }
}

/* 13 ── RESPONSIVE ─────────────────────────────────────────────────────── */
/* The full horizontal nav needs ~960px of content once the brand mark, five
   labels and the WhatsApp button are laid out, so it only appears from 1024px
   up. Below that the hamburger takes over. */
@media (min-width: 64rem) {
  .hero__cue { display: inline-flex; }

  /* Eight products, four across, two rows — every tile the same size, which is
     what an eight-item range wants: no closing row, no leftover gap. */
  .cards { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cards > .card { grid-column: span 3; }
}

@media (max-width: 63.99rem) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }

  .company__intro { grid-template-columns: minmax(0, 1fr); }
  .company__lockup { max-width: 26rem; }

  .contact__grid { grid-template-columns: minmax(0, 1fr); }

  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 52rem) {
  /* The band scales with the viewport at every width now — no override needed.
     At 390 px the panorama lands at ~149 px tall, complete, wordmark intact. */
  .compressed__inner { padding-block: 2.5rem var(--section-y); }

  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature--reverse .feature__media { order: 0; }
  .feature__media { aspect-ratio: 4 / 3; }

  .benefits { grid-template-columns: minmax(0, 1fr); }

  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__item:last-child { grid-column: span 2; }
  .gallery__item:last-child img { aspect-ratio: 4 / 3; }
}

@media (max-width: 40rem) {
  :root { --nav-h: 4rem; }

  .hero { min-height: clamp(30rem, 92svh, 46rem); }
  .hero__title { font-size: clamp(2.4rem, 11vw, 3.4rem); }

  .cards { grid-template-columns: minmax(0, 1fr); }

  .stats { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1rem; }
  .stat__value { text-align: right; }
  .stat__label { margin-top: 0; }

  .channels { grid-template-columns: minmax(0, 1fr); }

  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery__item:last-child { grid-column: auto; }
  .gallery__item:last-child img { aspect-ratio: 4 / 3; }

  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .wa-float { padding: .95rem; }
  .wa-float__text { display: none; }
}

@media (max-width: 26rem) {
  .site-footer__nav { grid-template-columns: minmax(0, 1fr); }
}

/* 14 ── MOTION PREFERENCES & PRINT ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__media img { transform: none; animation: none; }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  /* Three separate problems to undo on paper:
     1. the entrance animation hides .reveal until it is scrolled into view,
     2. dark sections set light text, which would vanish on a white sheet,
     3. the floating/navigation chrome is meaningless in print. */
  .js .reveal { opacity: 1 !important; transform: none !important; }

  .site-nav, .mobile-menu, .wa-float, .scroll-progress, .hero__cue,
  .hero__media, .hero__scrim, .compressed__media, .compressed__scrim,
  .contact::before { display: none !important; }

  html, body { background: #fff !important; }
  .site-footer { background: #fff !important; }

  /* Flatten every surface and force all text to ink. */
  .hero, .collection, .compressed, .company, .fabrics, .contact,
  .benefits, .benefit, .channels, .channel, .wa-card, .site-footer,
  .company__lockup, .stage__grid figure, .card__media, .feature__media,
  .gallery__item img, .compressed__media { background: #fff !important; }

  body, body * { color: #000 !important; }
  .benefits { border-color: #bbb !important; }
  .channel, .site-footer, .site-footer__top, .site-footer__social { border-color: #bbb !important; }
  .benefit__icon { border-color: #999 !important; }

  .hero { min-height: auto; padding-block: 0 1rem; }
  .section { padding-block: 1.25rem; }
  .btn, .wa-card { border: 1px solid #999; box-shadow: none; }

  /* Keep related pieces together across page breaks. */
  .card, .benefit, .stage__grid li, .channel, .feature, .gallery__item,
  .wa-card, .stat, .company__lockup { break-inside: avoid; page-break-inside: avoid; }
  .section__head { break-after: avoid; page-break-after: avoid; }
  .stage__grid { break-inside: avoid; page-break-inside: avoid; }
}

/* 15 ── 404 ────────────────────────────────────────────────────────────── */
.error-page {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 2rem) 0 3rem;
  background: var(--paper-2);
}
.error-page__inner { max-width: 44rem; }
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 14vw, 9rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--brand);
}
.error-page__title { margin-top: 1.4rem; font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.error-page__links { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }