/* =========================================================
   I&H Services — stylesheet
   Dark editorial palette: near-black ground, ivory type, gold
   accents. Cormorant Garamond for display, DM Sans for text and
   labels, both self-hosted from assets/fonts (SIL OFL).
   ========================================================= */

/* ---------- self-hosted fonts ---------- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/dm-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  --bg: #07090d;
  --bg-2: #0a0e15;
  --panel: #0e1520;
  --panel-2: #121b29;
  --ink: #f2eee6;
  --ink-2: #d9d4c8;
  --muted: #9ba3ae;
  --faint: #76808c;   /* was #6b7480 (4.1:1 on the footer ground); this is the faintest grey that still reads at 4.5:1 on every ground */
  --gold: #c9a227;
  --gold-light: #e2c268;
  --gold-pale: #f1e2b0;
  --line: rgba(226, 194, 104, .18);
  --line-soft: rgba(255, 255, 255, .08);
  --cream: #f4f0e6;

  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --container: 1500px;
  --gutter: clamp(1.25rem, 6vw, 7rem);           /* ≈6% side margins site-wide */
  --header-h: 88px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --radius: 4px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink-2);
  font-family: var(--font-body); font-size: 16px; line-height: 1.65; font-weight: 400;
  font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; color: var(--ink); line-height: 1.05; letter-spacing: -.005em; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 500; }
::selection { background: rgba(201, 162, 39, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (min-width: 1100px) { body { font-size: 17px; } }

/* ---------- layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; position: relative; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--line { border-top: 1px solid var(--line-soft); }
.section--panel { background: var(--bg-2); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.split--wide { grid-template-columns: 1.1fr .9fr; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 1rem; margin: 0 0 1.6rem;
  font-family: var(--font-body); font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-light); font-weight: 500;
}
.eyebrow::before { content: ""; width: 44px; height: 1px; background: var(--gold); flex: none; }
.eyebrow--plain::before { display: none; }
.eyebrow--lg { font-size: .92rem; letter-spacing: .28em; line-height: 1.4; }
.eyebrow--lg::before { width: 56px; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
h1, h2, .section-head h2 { text-wrap: balance; }   /* no one-word last lines on headings */
h3 { font-size: clamp(1.35rem, 1.8vw, 1.6rem); }
h4 { font-size: 1.2rem; }
.h-quiet { font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: var(--ink-2); }
.pillar p { font-size: .98rem; line-height: 1.65; }
.accent { font-style: italic; font-weight: 600; color: var(--gold-light); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.75; color: var(--ink-2); max-width: 60ch; }
.lead--muted { color: var(--muted); }
.measure { max-width: 62ch; }
.section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head p { color: var(--muted); font-size: 1.08rem; text-wrap: pretty; }
.section-head h2 + p { margin-top: 1rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .eyebrow::after { content: ""; width: 44px; height: 1px; background: var(--gold); }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 50px;
  padding: .85rem 1.7rem; border: 1px solid var(--gold); color: var(--gold-pale);
  font-family: var(--font-body); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
  overflow: hidden; isolation: isolate; transition: color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  white-space: nowrap;
}
.btn::before { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); z-index: -1; }
.btn:hover, .btn:focus-visible { color: #0b0c0f; }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--solid { background: var(--gold); color: #0b0c0f; }
.btn--solid::before { background: var(--gold-light); }
.btn--ghost { border-color: rgba(255,255,255,.22); color: var(--ink); }
.btn--ghost::before { background: var(--ink); }
.btn--sm { min-height: 42px; padding: .6rem 1.2rem; font-size: .66rem; }
.btn[disabled] { opacity: .6; cursor: progress; pointer-events: none; }   /* the enquiry form while it is sending */
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--gold-light); }
.link-arrow svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  background: linear-gradient(to bottom, rgba(7,9,13,.92), rgba(7,9,13,0));
  transition: background .4s var(--ease), border-color .4s var(--ease), height .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck { background: rgba(7,9,13,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line-soft); height: 72px; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.logo { display: inline-flex; align-items: center; gap: .9rem; color: var(--ink); }
.logo__mark {
  width: 46px; height: 46px; border: 1px solid var(--gold); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--gold-light); letter-spacing: .02em;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.logo:hover .logo__mark { background: var(--gold); color: #0b0c0f; }
.logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.logo__name { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; letter-spacing: .04em; color: var(--ink); }
.logo__sub { font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
.nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.nav a {
  position: relative; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--ink-2); padding: .5rem 0;
  transition: color .3s var(--ease);
}
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.nav a:hover, .nav a.is-active { color: var(--gold-light); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav .btn { margin-left: .6rem; padding: .55rem 1.35rem; min-height: 44px; font-size: .64rem; }
.nav .btn::after { display: none; }
.nav-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--line); position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 12px; right: 12px; height: 1px; background: var(--gold-light); transition: transform .35s var(--ease), opacity .3s; }
.nav-toggle span { top: 50%; }
.nav-toggle span::before { top: -6px; left: 0; right: 0; }
.nav-toggle span::after { top: 6px; left: 0; right: 0; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }
.nav-backdrop { display: none; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden;
  padding: calc(var(--header-h) + 3rem) 0 4rem;
  background:
    radial-gradient(900px 620px at 84% 4%, rgba(201,162,75,.12), transparent 62%),
    radial-gradient(1100px 780px at 10% 0%, rgba(70,110,160,.13), transparent 66%),
    var(--bg);   /* the reference's page backdrop: warm bloom top-right, cool wash top-left */
}
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
/* Home hero with the key-figures strip as its foot (client 2026-09-07, "do it the same on the home page"): the hero
   becomes a column — text and globe centred in the space above, the strip pinned at the fold, no scroll cue. */
.hero:has(.hero__strip) { flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 1rem) 0 0; }
.hero:has(.hero__strip) .hero__inner { min-height: 0; margin-block: auto; }
.hero:has(.hero__strip) .hero__scroll { display: none; }
.hero__strip { flex: none; width: 100%; border-bottom: 0; margin-top: clamp(1rem, 2.5vh, 2rem); position: relative; z-index: 2; }
@media (max-height: 780px) and (min-width: 901px) {   /* short laptop windows: tighten the text so the strip still lands on the first screen */
  .hero:has(.hero__strip) h1 { font-size: clamp(2rem, 4.5vw, 4.2rem); margin-bottom: 1.2rem; }
  .hero:has(.hero__strip) .lead { margin-bottom: 1.8rem; }
  .hero:has(.hero__strip) .hero__strip .strip__item { padding-top: 1.4rem; padding-bottom: 1.4rem; }
}
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: min(82svh, 820px); width: min(100% - 2 * var(--hero-gutter), 1500px); --hero-gutter: clamp(1.25rem, 6vw, 7rem); }
.hero__text { position: relative; z-index: 2; max-width: 860px; }
.hero h1 { margin-bottom: 1.8rem; font-size: clamp(2.2rem, 5.2vw, 5rem); line-height: 1.06; letter-spacing: -.012em; color: #d9d3c6; }   /* a softer, warmer ivory than the site's --ink for the first screen */
.hero h1 span { display: block; white-space: nowrap; text-shadow: 0 2px 24px rgba(7,9,13,.7); }
.hero h1 .accent { font-weight: 600; }
.hero h1 span[data-d="3"] { margin-top: .1em; }
.hero .lead { margin-bottom: 2.6rem; color: #8d95a1; max-width: 58ch; font-size: clamp(1.05rem, 1.35vw, 1.2rem); }
/* The globe is laid out from the hero's content frame (.hero__inner), not from the viewport, so its centre keeps the
   same place in the composition whatever the screen or window size: the box is 57% of the frame width (the sphere is
   80% of the box, so its right edge lands on the frame's right edge, mirroring the text's left edge), capped by height
   on short windows, in which case it shrinks about the same centre. */
.hero { --hero-gutter: clamp(1.25rem, 6vw, 7rem); --hero-inner: min(100vw - 2 * var(--hero-gutter), 1500px); --globe: clamp(420px, min(0.53 * var(--hero-inner), 74vh), 840px); }   /* "slightly smaller" (2026-09-07): 0.53 of the frame / 74vh, was 0.57 / 80vh */
.hero__visual { position: absolute; z-index: 1; top: -6vh; bottom: 0; margin: auto 0; height: var(--globe); width: auto; aspect-ratio: 1 / 1; right: calc(22.8% - var(--globe) / 2);   /* centre fixed at 22.8% of the frame width in from its right edge; the sphere shrinks about that centre */ pointer-events: auto; will-change: transform; transform-origin: 50% 50%; }   /* the cursor shift is eased in globe.js each frame, no CSS transition */
.hero__visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7,9,13,.6) 0%, rgba(7,9,13,.2) 32%, rgba(7,9,13,0) 55%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 49%); mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 49%); }
.hero__text { max-width: 860px; }
.globe-tip { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 14px)); padding: .4rem .7rem; background: rgba(7,9,13,.92); border: 1px solid var(--line); color: var(--gold-pale); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.globe-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; background: rgba(7,9,13,.92); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.hero__visual canvas { width: 100%; height: 100%; cursor: default; opacity: 0; transition: opacity 1.6s var(--ease); touch-action: pan-y; }
.hero__dust { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; animation: dust-in 1.6s var(--ease) .4s forwards; }
@keyframes dust-in { to { opacity: 1; } }
body.has-preloader .hero__dust { animation-play-state: paused; }
body.has-preloader.is-loaded .hero__dust { animation-play-state: running; }
.hero__visual canvas.is-ready { opacity: 1; }
.hero__visual canvas.is-dragging { cursor: grabbing; }
.hero__visual.is-pinned { position: fixed; margin: 0; right: auto; bottom: auto; z-index: 1; }
.hero__legend { position: absolute; left: 4%; right: 4%; bottom: -2.1rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hero__legend i { display: inline-block; width: 18px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: .5rem; }
.hero__legend b { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-pale); box-shadow: 0 0 0 3px rgba(226,194,104,.18), 0 0 8px rgba(226,194,104,.5); vertical-align: middle; margin-right: .5rem; }
.hero__scroll { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); width: 1px; height: 44px; background: linear-gradient(to bottom, var(--gold), transparent); animation: scrollcue 2.4s var(--ease) infinite; }
@keyframes scrollcue { 0% { transform: translateX(-50%) scaleY(0); transform-origin: top; } 50% { transform: translateX(-50%) scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: translateX(-50%) scaleY(0); transform-origin: bottom; } }

/* hero load choreography */
.rise { opacity: 0; transform: translateY(26px); animation: rise 1.1s var(--ease-out) forwards; }
.rise[data-d="1"] { animation-delay: .15s; } .rise[data-d="2"] { animation-delay: .3s; } .rise[data-d="3"] { animation-delay: .45s; }
.rise[data-d="4"] { animation-delay: .6s; } .rise[data-d="5"] { animation-delay: .8s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- statement strip ---------- */
.strip { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip__item { padding: 2rem 2rem 2rem 0; border-left: 1px solid var(--line-soft); padding-left: 2rem; }
.strip__item:first-child { border-left: 0; padding-left: 0; }
.strip__item strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; color: var(--ink); line-height: 1.15; margin-bottom: .55rem; }
.strip__item > span { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.strip__item strong span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }

.strip--numbers .strip__item strong { font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 500; letter-spacing: -.01em; margin-bottom: .3rem; }
.strip--numbers .strip__item strong span { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- our journey: split editorial timeline ---------- */
.journey { position: relative; padding-top: clamp(2rem, 4vw, 3rem); overflow: hidden; }
.journey::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.journey::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 96px 96px; mask-image: radial-gradient(26% 60% at 90% 50%, #000, transparent 80%); -webkit-mask-image: radial-gradient(26% 60% at 90% 50%, #000, transparent 80%); opacity: .22; }
.journey > .container { position: relative; z-index: 1; }
.journey .section-head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.journey .section-head .as-h2 { margin-bottom: .6rem; }
.journey__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.journey__timeline { max-width: none; }
/* living line-art timeline: travelling light, self-drawing emblems, per-milestone one-shot motion */
.timeline__spark { position: absolute; left: var(--spine); top: 0; width: 5px; height: 5px; border-radius: 50%; background: #f1e2b0; box-shadow: 0 0 6px 2px rgba(241,226,176,.55), 0 0 18px 6px rgba(226,194,104,.18); transform: translate(-50%, 0); transition: transform .25s linear; z-index: 2; }
.timeline__art { grid-column: 4; align-self: center; justify-self: end; position: relative; width: clamp(88px, 8.5vw, 120px); aspect-ratio: 1; display: grid; place-items: center; }
.timeline__art::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,.16), rgba(201,162,39,.04) 45%, transparent 70%); opacity: 0; transition: opacity .8s var(--ease); }
.timeline__item.is-active .timeline__art::before { opacity: 1; }
.timeline__emblem { width: 100%; height: auto; fill: none; stroke: rgba(226,194,104,.42); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; transition: stroke .7s var(--ease); }
.js-journey .timeline__emblem [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-out); }
.timeline__item.is-in .timeline__emblem .d1 { stroke-dashoffset: 0; }
.timeline__item.is-in .timeline__emblem .d2 { stroke-dashoffset: 0; transition-delay: .55s; }
.timeline__item.is-in .timeline__emblem .d3 { stroke-dashoffset: 0; transition-delay: .95s; }
.timeline__item.is-in .timeline__emblem g.d1 *, .timeline__item.is-in .timeline__emblem g.d2 *, .timeline__item.is-in .timeline__emblem g.d3 * { stroke-dashoffset: 0; }
.timeline__item.is-in .timeline__emblem g.d2 * { transition-delay: .55s; } .timeline__item.is-in .timeline__emblem g.d3 * { transition-delay: .95s; }
.timeline__item.is-active .timeline__emblem, .timeline__item:hover .timeline__emblem { stroke: rgba(236,208,128,.95); }
.timeline__item.is-past .timeline__emblem { stroke: rgba(226,194,104,.55); }
/* 2015: reel turns a little, beam extends */
.em-reel { transform-origin: 30px 32px; transition: transform 1.4s var(--ease) .9s; }
.timeline__item.is-active .em-reel { transform: rotate(18deg); }
.em-beam { transform-origin: 52px 32px; transform: scaleX(.2); transition: transform 1s var(--ease) 1s, stroke-dashoffset 1.2s var(--ease-out) .95s; }
.timeline__item.is-active .em-beam { transform: scaleX(1.6); }
/* 2019: one outward pulse */
.em-pulse { stroke: rgba(226,194,104,.5); opacity: 0; transform-origin: 32px 32px; }
.timeline__item.is-active .em-pulse { animation: em-pulse 1.6s var(--ease-out) 1.1s 1 forwards; }
@keyframes em-pulse { 0% { opacity: .6; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }
/* 2020–22: route to the door, doorway lights */
.em-route { stroke: rgba(226,194,104,.7); stroke-dasharray: 8 30; stroke-dashoffset: 38; opacity: 0; }
.timeline__item.is-active .em-route { animation: em-route 1.6s var(--ease) 1s 1 forwards; }
@keyframes em-route { 0% { opacity: 0; stroke-dashoffset: 38; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -8; } }
.em-doorlight { fill: rgba(241,226,176,.0); stroke: none; transition: fill .6s var(--ease); }
.timeline__item.is-active .em-doorlight { animation: em-doorlight 2.2s var(--ease) 1.9s 1; }
@keyframes em-doorlight { 0% { fill: rgba(241,226,176,0); } 35% { fill: rgba(241,226,176,.32); } 100% { fill: rgba(241,226,176,.08); } }
/* 2023: two slow steam lines */
.em-steam { opacity: 0; stroke: rgba(226,194,104,.55); }
.timeline__item.is-active .em-steam.s1 { animation: em-steam 5.5s ease-in-out 1.2s infinite; }
.timeline__item.is-active .em-steam.s2 { animation: em-steam 5.5s ease-in-out 2.4s infinite; }
@keyframes em-steam { 0% { opacity: 0; transform: translateY(2px); } 25% { opacity: .9; } 60% { opacity: 0; transform: translateY(-7px); } 100% { opacity: 0; transform: translateY(-7px); } }
/* 2025: rim light sweep, cutlery moves inward */
.em-sweep { stroke: rgba(241,226,176,.9); stroke-width: 1.4; stroke-dasharray: .12 1; stroke-dashoffset: 1; opacity: 0; }
.timeline__item.is-active .em-sweep { animation: em-sweep 1.8s var(--ease) 1.2s 1; }
@keyframes em-sweep { 0% { opacity: 0; stroke-dashoffset: 1; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -.25; } }
.em-fork, .em-knife { transition: transform .9s var(--ease) 1s; }
.timeline__item.is-active .em-fork { transform: translateX(3px); } .timeline__item.is-active .em-knife { transform: translateX(-3px); }
/* 2026: awning unfolds, doorway and display light, channels spread */
.em-awning { transform-origin: 32px 14px; transform: scaleY(.15); transition: transform 1s var(--ease-out) .9s; }
.timeline__item.is-active .em-awning, .timeline__item.is-past .em-awning { transform: scaleY(1); }
.em-spread circle { fill: var(--gold-light); stroke: none; opacity: 0; transform-origin: 32px 40px; }
.timeline__item.is-active .em-spread circle { animation: em-spread 2.4s var(--ease-out) 2s 1 forwards; }
.timeline__item.is-active .em-spread circle:nth-child(2) { animation-delay: 2.3s; } .timeline__item.is-active .em-spread circle:nth-child(3) { animation-delay: 2.6s; }
@keyframes em-spread { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: .9; } 100% { opacity: .35; transform: scale(1.12); } }
.timeline__body { max-width: 58ch; }
.journey__visual { position: relative; align-self: stretch; }
.journey__sticky { position: sticky; top: calc(var(--header-h) + 2rem); }
.journey__sticky::before { content: ""; position: absolute; inset: -20% -30%; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(201,162,39,.07), transparent 70%); }
.journey-art { position: relative; width: 100%; max-width: 440px; margin-inline: auto; height: auto; }

/* year dial (sticky visual) */
.year-dial { position: relative; width: 100%; max-width: 360px; margin-inline: auto; aspect-ratio: 1; display: grid; place-items: center; }
.year-dial__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.year-dial__track { fill: none; stroke: rgba(226,194,104,.14); stroke-width: 1; }
.year-dial__progress { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset .3s linear; }
.year-dial__inner { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 1; }
.year-dial__ticks line { stroke: rgba(226,194,104,.3); stroke-width: 1; transition: stroke .5s var(--ease); }
.year-dial__ticks line.is-on { stroke: var(--gold-light); }
.year-dial__year { position: relative; font-family: var(--font-display); font-size: clamp(3.2rem, 5vw, 4.6rem); font-weight: 500; color: var(--ink); line-height: 1; letter-spacing: -.02em; transition: opacity .22s var(--ease), transform .22s var(--ease); }
.year-dial.is-switching .year-dial__year { opacity: 0; transform: translateY(6px); }
.year-dial__label { position: absolute; left: 0; right: 0; bottom: 22%; margin: 0; text-align: center; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); }
.year-dial__label span { color: var(--gold-light); }

/* journey map (sticky visual) */
.journey-map { position: relative; width: 100%; max-width: 420px; margin-inline: auto; }
.journey-map__svg { width: 100%; height: auto; overflow: visible; }
.journey-map__outline { fill: none; stroke: rgba(226,194,104,.22); stroke-width: 1; }
.journey-map__dim circle { fill: rgba(214,206,190,.14); }
.journey-map__lit circle { fill: rgba(226,194,104,.85); }
.journey-map__reach { transition: r .35s linear; }
.journey-map__hq circle, .journey-map__kiosk circle { fill: var(--gold-light); }
.journey-map__ring { fill: none !important; stroke: rgba(226,194,104,.5); stroke-width: 1; }
.journey-map text { font-family: var(--font-body); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--ink); font-weight: 500; }
.journey-map__kiosk { opacity: 0; transition: opacity .7s var(--ease); }
.journey-map.is-final .journey-map__kiosk { opacity: 1; }
.journey-map.is-final .journey-map__kiosk .journey-map__ring { animation: node-ring 1.6s var(--ease-out) forwards; transform-origin: center; transform-box: fill-box; }
.journey-map__year { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .6rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); font-family: var(--font-display); font-size: clamp(2rem, 2.8vw, 2.6rem); color: var(--ink); line-height: 1; transition: opacity .22s var(--ease), transform .22s var(--ease); }
.journey-map__year small { font-family: var(--font-body); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); }
.journey-map__year small span { color: var(--gold-light); }
.journey-map.is-switching .journey-map__year { opacity: 0; transform: translateY(6px); }

/* about intro, mission & vision, why */
.about-intro { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.about-intro__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.about-intro__title { font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.04; margin-bottom: 1.4rem; }
.about-intro__title--ruled { display: flex; align-items: center; gap: 1.4rem; margin: 0; font-size: clamp(2.6rem, 5vw, 4.4rem); letter-spacing: -.01em; }
.about-intro__title--ruled::before { content: ""; width: 56px; height: 1px; background: var(--gold); flex: none; }
.about-intro__grid { align-items: center; }
.about-intro__copy { margin-top: 1.4rem; color: var(--ink-2); font-size: 1.02rem; line-height: 1.75; max-width: 54ch; }
.about-intro__mv { border-left: 1px solid var(--line); padding-left: clamp(1.4rem, 3vw, 2.4rem); display: grid; gap: 2rem; }
.about-intro__mv .mv__item, .about-intro__mv .mv__item + .mv__item { padding: 0; border: 0; }
.about-intro__mv .mv__text { font-size: clamp(1.25rem, 1.7vw, 1.6rem); }
.about-intro__copy { border-left: 1px solid var(--line); padding-left: clamp(1.4rem, 3vw, 2.4rem); color: var(--ink-2); font-size: 1.06rem; line-height: 1.78; }
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.mv__item { padding: 1rem clamp(1.5rem, 4vw, 3.5rem) 1rem 0; }
.mv__item + .mv__item { border-left: 1px solid var(--line-soft); padding-left: clamp(1.5rem, 4vw, 3.5rem); padding-right: 0; }
.mv__text { font-family: var(--font-display); font-size: clamp(1.45rem, 2.1vw, 1.95rem); line-height: 1.35; color: var(--ink); margin: 0; }
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-soft); }
.why__item { padding: 2rem 2.2rem 2.2rem 0; border-bottom: 1px solid var(--line-soft); }
.why__item:nth-child(3n+2), .why__item:nth-child(3n+3) { padding-left: 2.2rem; border-left: 1px solid var(--line-soft); }
.why__item h3 { position: relative; font-size: 1.45rem; margin-bottom: .6rem; padding-top: .9rem; }
.why__item h3::before { content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 1px; background: var(--gold); }
.why__item p { color: var(--muted); font-size: .96rem; max-width: 36ch; }

/* heading entrance: line extends, label fades, heading rises out of a mask, intro fades up */
.journey__head .eyebrow { opacity: 0; transition: opacity .7s var(--ease) .6s; }
.journey__head.is-visible .eyebrow { opacity: 1; }
.journey__head .mask { display: block; overflow: hidden; }
.journey__head .mask > span { display: block; transform: translateY(105%); transition: transform .9s var(--ease-out) .25s; }
.journey__head.is-visible .mask > span { transform: none; }
.journey__head > p:last-child { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-out) .6s, transform .7s var(--ease-out) .6s; }
.journey__head.is-visible > p:last-child { opacity: 1; transform: none; }

/* timeline: year | line | content */
.timeline { position: relative; --spine: 118px; padding: .25rem 0 .5rem; }
.timeline::before { content: ""; position: absolute; left: var(--spine); top: 0; bottom: 0; width: 1px; background: rgba(226,194,104,.16); }
.timeline::after { content: ""; position: absolute; left: 0; top: 0; width: var(--spine); height: 1px; background: linear-gradient(90deg, rgba(226,194,104,.5), rgba(226,194,104,.16)); }
.timeline__progress { position: absolute; left: var(--spine); top: 0; bottom: 0; width: 1px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform .25s linear; }
.timeline__item { position: relative; display: grid; grid-template-columns: calc(var(--spine) - 26px) 52px minmax(0, 1fr) auto; column-gap: 0 clamp(2rem, 5vw, 5rem); align-items: start; padding: 1.9rem 0; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js-journey .timeline__item { opacity: 0; transform: translateY(15px); }
.js-journey .timeline__item.is-in { opacity: 1; transform: none; }
.timeline__item + .timeline__item { border-top: 1px solid rgba(255,255,255,.07); }
.timeline__year { grid-column: 1; font-family: var(--font-display); font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.1; color: rgba(226,194,104,.55); padding-top: .15rem; transition: color .5s var(--ease); white-space: nowrap; }
.timeline__year:hover { color: var(--gold-light); }
.timeline__node { grid-column: 2; justify-self: center; position: relative; width: 8px; height: 8px; margin-top: .85rem; border-radius: 50%; background: var(--bg); border: 1px solid rgba(226,194,104,.6); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(226,194,104,.18); transition: border-color .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease); }
.timeline__node::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--gold-light); opacity: 0; transform: scale(1); }
.timeline__body { grid-column: 3; max-width: 58ch; }
.timeline__body h3 { margin-bottom: .45rem; color: rgba(242,238,230,.78); transition: color .5s var(--ease); }
.timeline__body p { color: #8d95a1; transition: color .5s var(--ease); }
.timeline__item:hover .timeline__body h3 { color: var(--ink); }
.timeline__item:hover .timeline__node { border-color: var(--gold-light); }
.timeline__item.is-past .timeline__year { color: rgba(226,194,104,.75); }
.timeline__item.is-past .timeline__node { background: rgba(226,194,104,.55); }
.timeline__item.is-active .timeline__year { color: var(--gold-light); text-shadow: 0 0 14px rgba(226,194,104,.35); }
.timeline__item.is-active .timeline__body h3 { color: var(--ink); }
.timeline__item.is-active .timeline__body p { color: var(--muted); }
.timeline__item.is-active .timeline__node { background: var(--gold-light); border-color: var(--gold-light); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(226,194,104,.45); }
.timeline__item.is-active .timeline__node::after { animation: node-ring 1.4s var(--ease-out) forwards; }
@keyframes node-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
.timeline__item { scroll-margin-top: calc(var(--header-h) + 2rem); }
.product { scroll-margin-top: calc(var(--header-h) + 1.5rem); }   /* deep links such as #tortilla-chips land clear of the header */

/* journey art: stages accumulate as milestones pass */
.journey-art line, .journey-art path, .journey-art circle, .journey-art rect { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; transition: opacity .7s var(--ease), stroke-dashoffset 1.2s var(--ease), transform .9s var(--ease); }
.journey-art .ja-light { fill: url(#jaLight); stroke: none; }
.journey-art .ja-grid line { stroke: rgba(255,255,255,.05); }
.journey-art .ja-lens circle { opacity: 0; }
.journey-art.stage-0 .ja-lens circle { opacity: .75; }
.journey-art .ja-lens circle:nth-child(2) { stroke: rgba(226,194,104,.55); }
.journey-art .ja-lens circle:nth-child(3) { stroke: rgba(226,194,104,.35); }
.journey-art .ja-blades { transform-origin: 200px 200px; opacity: 0; animation: ja-turn 90s linear infinite; }
.journey-art.stage-0 .ja-blades { opacity: .9; }
.journey-art.stage-1 .ja-blades { opacity: .35; transform: scale(1.06); }
.journey-art.stage-2 .ja-blades { opacity: 0; }
.journey-art.stage-1 .ja-lens circle:nth-child(1) { transform: scale(1.35); transform-origin: 200px 200px; opacity: .35; }
@keyframes ja-turn { to { transform: rotate(360deg); } }
.journey-art .ja-paths path { stroke: rgba(226,194,104,.55); stroke-dasharray: 70; stroke-dashoffset: 70; opacity: 0; }
.journey-art.stage-2 .ja-paths path { stroke-dashoffset: 0; opacity: 1; }
.journey-art .ja-nodes circle { fill: var(--bg); stroke: var(--gold-light); opacity: 0; }
.journey-art.stage-2 .ja-nodes circle { opacity: 1; }
.journey-art .ja-sec path { stroke: rgba(226,194,104,.35); stroke-dasharray: 50; stroke-dashoffset: 50; opacity: 0; }
.journey-art .ja-sec circle { fill: rgba(226,194,104,.6); stroke: none; opacity: 0; }
.journey-art.stage-3 .ja-sec path { stroke-dashoffset: 0; opacity: 1; }
.journey-art.stage-3 .ja-sec circle { opacity: 1; }
.journey-art .ja-links path { stroke: rgba(226,194,104,.28); stroke-dasharray: 140; stroke-dashoffset: 140; opacity: 0; }
.journey-art.stage-4 .ja-links path { stroke-dashoffset: 0; opacity: 1; }
.journey-art .ja-particles { opacity: 0; transition: opacity .8s var(--ease); }
.journey-art.stage-3 .ja-particles { opacity: 1; }
.journey-art .ja-particle { fill: #f1e2b0; stroke: none; }
.journey-art .ja-outer { stroke: rgba(226,194,104,.14); opacity: 0; transform-origin: 200px 200px; transform: scale(.96); }
.journey-art.stage-4 .ja-outer { opacity: 1; transform: none; }
.journey-art .ja-mono { opacity: 0; transform-origin: 200px 200px; transform: scale(.9); }
.journey-art .ja-mono rect { stroke: rgba(226,194,104,.7); }
.journey-art .ja-mono text { fill: var(--ink); stroke: none; font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: .02em; }
.journey-art.stage-5 .ja-mono { opacity: 1; transform: none; }
.journey-art.stage-5 .ja-lens circle:nth-child(1) { opacity: 0; }
.journey-art.is-static .ja-blades { animation: none; }

/* ---------- editorial rows (divisions) ---------- */
.rows { border-top: 1px solid var(--line-soft); }
.row {
  display: grid; grid-template-columns: 220px 1fr auto; gap: 2.5rem; align-items: center;
  padding: 2rem 0; border-bottom: 1px solid var(--line-soft); transition: padding .4s var(--ease);
}
.row__name { font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; color: var(--ink); line-height: 1.1; }
.row__name small { display: block; font-family: var(--font-body); font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-light); margin-bottom: .5rem; font-weight: 500; }
.row__desc { color: var(--muted); max-width: 56ch; }
.row:hover .row__name { color: var(--gold-pale); }
.row .link-arrow { opacity: .75; transition: opacity .3s; }
.row:hover .link-arrow { opacity: 1; }

/* ---------- pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); }
.pillar { padding: 1.8rem 2.2rem 1.8rem 0; border-left: 1px solid var(--line-soft); padding-left: 2.2rem; }
.pillar:first-child { border-left: 0; padding-left: 0; }
.pillar__icon { width: 48px; height: 48px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--gold-light); margin-bottom: 1.2rem; }
.pillar__icon svg { width: 22px; height: 22px; }
.pillar h3 { margin-bottom: .9rem; }
.pillar p { color: var(--muted); }
.pillars--2 { grid-template-columns: repeat(2, 1fr); }
.pillars--wrap { grid-template-columns: repeat(3, 1fr); row-gap: 0; }
.pillars--wrap .pillar { border-top: 1px solid var(--line-soft); }
.pillars--wrap .pillar:nth-child(-n+3) { border-top: 0; }
.pillars--wrap .pillar:nth-child(3n+1) { border-left: 0; padding-left: 0; }

/* ---------- what we do (home) ---------- */
.section--services { padding: clamp(3.5rem, 6.5vw, 5.5rem) 0; background: var(--bg-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.section--services::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 40%, rgba(201,162,39,.05), transparent 70%), radial-gradient(40% 50% at 90% 100%, rgba(28,58,110,.08), transparent 70%); }
.section--services > .container { position: relative; }
.section--services .section-head { margin-bottom: clamp(1.8rem, 3vw, 2.6rem); max-width: none; }
/* "What we do" heading (client 2026-09-07: make just the words better): the display serif with a short gold rule above,
   instead of the small caps eyebrow */
.title-rule { position: relative; font-size: clamp(2.1rem, 3.2vw, 2.9rem); line-height: 1.05; letter-spacing: -.005em; color: var(--ink); padding-top: 1.1rem; }
.title-rule::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 1px; background: var(--gold); }
.reveal .title-rule::before { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) .15s; }
.reveal.is-visible .title-rule::before { transform: scaleX(1); }
.pillars--services { grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.pillars--services::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(226,194,104,.5), rgba(226,194,104,.12) 40%, rgba(226,194,104,.12) 60%, rgba(226,194,104,.5)); }
.pillars--services .pillar { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 2.8rem 2.6rem 3rem; border-left: 0; transition: background .4s var(--ease), transform .4s var(--ease); }
.pillars--services .pillar + .pillar::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: linear-gradient(to bottom, transparent, rgba(226,194,104,.28), transparent); }
.pillars--services .pillar:first-child { padding-left: 0; }
.pillars--services .pillar:last-child { padding-right: 0; }
.pillars--services .pillar:hover { background: linear-gradient(to bottom, rgba(255,255,255,.025), transparent); transform: translateY(-2px); }
.pillars--services .pillar__icon { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 1.7rem; background: radial-gradient(circle at 50% 35%, rgba(201,162,39,.14), rgba(201,162,39,.03) 70%); border: 1px solid rgba(226,194,104,.38); color: #ebcf82; box-shadow: 0 0 0 6px rgba(201,162,39,.04); transition: color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.pillars--services .pillar__icon svg { width: 26px; height: 26px; stroke-width: 1.4; }
.pillars--services .pillar:hover .pillar__icon { color: #f6df95; border-color: rgba(226,194,104,.7); box-shadow: 0 0 0 8px rgba(201,162,39,.06); }
.pillars--services h3 { position: relative; font-size: clamp(1.7rem, 2.1vw, 2.05rem); margin-bottom: .9rem; padding-top: 1.05rem; letter-spacing: .01em; }
.pillars--services h3::before { content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 1px; background: var(--gold); transition: width .45s var(--ease-out); }
.pillars--services .pillar:hover h3::before { width: 56px; }
.pillars--services .pillar p { color: #8d95a1; font-size: 1rem; line-height: 1.7; max-width: 34ch; }

/* ---------- tick list ---------- */
.tick-list li { position: relative; padding-left: 2rem; margin-bottom: .8rem; color: var(--ink-2); }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 14px; height: 1px; background: var(--gold); }
.steps { counter-reset: step; }
.steps li { position: relative; padding: 1.4rem 0 1.4rem 4.2rem; border-top: 1px solid var(--line-soft); color: var(--muted); }
.steps li:last-child { border-bottom: 1px solid var(--line-soft); }
.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 1.35rem; font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-light); line-height: 1; }
.steps li strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; margin-bottom: .2rem; }

/* ---------- media frames ---------- */
.frame { position: relative; border: 1px solid var(--line-soft); background: var(--panel); overflow: hidden; }
.frame::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 100%, rgba(201,162,39,.1), transparent 70%); pointer-events: none; }
.frame img { position: relative; width: 100%; }
.frame--pad { padding: clamp(1.5rem, 4vw, 3rem); }
.pack-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; align-items: end; }
.pack-trio img { filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); transition: transform .6s var(--ease); }

.spec-row { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin: 1.8rem 0 2.2rem; }
.spec-row span { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); }
.spec-row span::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--gold); margin-right: .7rem; vertical-align: middle; transform: rotate(45deg); }

/* ---------- exclusive rights logos ---------- */
/* Four brands since 2026-09-20 (JBL, OSRAM, FEEM, and Vista back at the client's request: "add vista logo to the left like
   the other ones, make it look good"): a 2 x 2 panel instead of a taller stack of four rows, so it stays in proportion with
   the text beside it. Each logo has its own width (--lw) chosen for equal optical weight: the OSRAM wordmark is heavy,
   FEEM's script is tall, Vista's line is light and long; the JBL box is sized by height. */
.exclusive-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); padding: 0; }
.exclusive-logos__tile { background: var(--panel); display: grid; place-items: center; min-height: clamp(150px, 15.5vw, 228px); padding: clamp(1.2rem, 2.2vw, 2.4rem); transition: background .45s var(--ease); }
.exclusive-logos__tile img { width: var(--lw, 72%); max-width: 250px; height: auto; object-fit: contain; transition: transform .7s var(--ease-out); }   /* --lw is a share of the tile, so the balance holds at every size */
@media (hover: hover) and (pointer: fine) { .exclusive-logos__tile:hover { background: var(--panel-2); } .exclusive-logos__tile:hover img { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .exclusive-logos__tile img { transition: none; } .exclusive-logos__tile:hover img { transform: none; } }
.product__media img.product__logo { width: 72%; height: auto; filter: none; }
.product__media img.product__logo--mark { width: 40%; }   /* a box-shaped mark (the JBL logo, 187×154): at 72% it would fill the card */
.exclusive-logos__tile img.is-mark { width: auto; max-width: none; height: clamp(58px, 6.2vw, 86px); }   /* the JBL box is sized by height */

/* ---------- own brand: cinema-premiere product reveal ---------- */
.stage { --sx: 50%; --px: 0px; --py: 0px; position: relative; overflow: hidden; aspect-ratio: 5 / 4; padding: 0;
  background:
    radial-gradient(75% 46% at 50% 60%, rgba(214,168,72,.22), rgba(150,104,40,.09) 42%, transparent 70%),
    radial-gradient(60% 50% at 50% 8%, rgba(241,226,176,.07), transparent 65%),
    radial-gradient(130% 55% at 50% 100%, rgba(38,32,30,.95), transparent 70%),
    linear-gradient(to bottom, #070709 0%, #12100f 38%, #1c1714 62%, #151210 65%, #0a0908 100%); border: 1px solid rgba(150,130,80,.18); }
.stage::before { display: none; }
.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: screen; z-index: 6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.stage__source { position: absolute; left: var(--sx); top: -6%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(241,226,176,.32), rgba(226,194,104,.12) 32%, transparent 62%); filter: blur(14px); opacity: 0; transition: opacity 1.2s var(--ease), left .6s var(--ease); }
.stage__beam { position: absolute; left: var(--sx); top: -4%; width: 92%; height: 100%; transform: translateX(-50%); pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, rgba(241,226,176,.16), rgba(241,226,176,.07) 45%, rgba(241,226,176,.02) 75%, transparent 92%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(10px); opacity: 0; transition: opacity 1.4s var(--ease) .1s, left .6s var(--ease); transform-origin: 50% 0; }
.stage.is-visible .stage__source, .stage.is-visible .stage__beam { opacity: 1; }
.stage.is-visible .stage__beam { animation: beam-breathe 12s ease-in-out 2s infinite; }
@keyframes beam-breathe { 0%, 100% { opacity: 1; transform: translateX(-50%) scaleX(1); } 50% { opacity: .82; transform: translateX(-50%) scaleX(1.03); } }
.stage__dust { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 2s var(--ease) 1.2s; }
.stage.is-visible .stage__dust { opacity: 1; }
.stage__dust i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(241,226,176,.55); box-shadow: 0 0 4px rgba(241,226,176,.4); left: calc(var(--sx) + var(--dx)); top: var(--dy); animation: dust-drift var(--dd) ease-in-out infinite alternate; }
.stage__dust i:nth-child(1) { --dx: -8%; --dy: 24%; --dd: 19s; } .stage__dust i:nth-child(2) { --dx: 6%; --dy: 36%; --dd: 23s; animation-delay: -6s; }
.stage__dust i:nth-child(3) { --dx: -14%; --dy: 50%; --dd: 26s; animation-delay: -11s; width: 1.5px; height: 1.5px; } .stage__dust i:nth-child(4) { --dx: 12%; --dy: 58%; --dd: 21s; animation-delay: -3s; }
.stage__dust i:nth-child(5) { --dx: 2%; --dy: 14%; --dd: 28s; animation-delay: -15s; width: 1.5px; height: 1.5px; }
@keyframes dust-drift { 0% { transform: translate(0, 0); opacity: .2; } 50% { opacity: .7; } 100% { transform: translate(14px, 22px); opacity: .25; } }
.stage__platform { position: absolute; left: 2%; right: 2%; bottom: 3%; height: 28%; border-radius: 50%; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at 50% 50%, rgba(222,182,96,.30), rgba(176,126,58,.14) 36%, rgba(120,84,40,.05) 60%, transparent 74%); filter: blur(8px); opacity: 0; transition: opacity 1.2s var(--ease) .5s; }   /* the spotlight's pool on the floor, centred on the base line the packs stand on (client 2026-09-12: "the chips don't look like they're sitting on anything") */
.stage__platform::before { content: ""; position: absolute; inset: 28% 16%; border-radius: 50%; pointer-events: none; opacity: .7;
  background: radial-gradient(ellipse at 22% 50%, rgba(190,60,50,.12), transparent 45%), radial-gradient(ellipse at 50% 50%, rgba(220,120,40,.12), transparent 40%), radial-gradient(ellipse at 78% 50%, rgba(210,180,60,.12), transparent 45%); filter: blur(10px); }   /* each flavour's colour spilling onto the floor */
.stage__platform::after { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 34%; border-radius: 50%; background: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.42), transparent 70%); filter: blur(6px); }   /* the packs' shared ambient shadow, just in front of the base line */
.stage.is-visible .stage__platform { opacity: 1; }
.stage__row { position: absolute; left: 7%; right: 7%; bottom: 17%; display: flex; align-items: flex-end; justify-content: center; z-index: 3; transform: translate(var(--px), var(--py)); transition: transform .5s var(--ease); }
.stage__pack { position: relative; margin: 0; width: 35%; outline: none; opacity: 0; transition: transform .8s var(--ease-out), opacity .8s var(--ease-out); z-index: 1; }
.stage__pack:nth-child(1) { transform: translateX(-26px) rotate(4deg); transform-origin: 50% 100%; margin-right: -2.5%; }
.stage__pack:nth-child(2) { width: 40%; z-index: 2; transform: translateY(18px); }
.stage__pack:nth-child(3) { transform: translateX(26px) rotate(-4deg); transform-origin: 50% 100%; margin-left: -2.5%; }
.stage.is-visible .stage__pack:nth-child(2) { opacity: 1; transform: none; transition-delay: .5s; }
.stage.is-visible .stage__pack:nth-child(1) { opacity: 1; transform: rotate(4deg); transition-delay: .8s; }
.stage.is-visible .stage__pack:nth-child(3) { opacity: 1; transform: rotate(-4deg); transition-delay: 1s; }
.stage .stage__pack img { position: relative; width: 100%; height: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); transition: transform .45s var(--ease), filter .45s var(--ease); transform-origin: 50% 100%; z-index: 1; }   /* no offset drop shadow at rest: an offset shadow reads as "lifted" — the contact shadow below grounds the pack */
.stage .stage__pack img.stage__reflection { position: absolute; left: 0; top: 100%; width: 100%; transform: scaleY(-.86) translateY(-100%); transform-origin: 50% 0; opacity: .28; filter: blur(1.6px) !important; -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.28) 16%, transparent 38%); mask-image: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.28) 16%, transparent 38%); pointer-events: none; z-index: 0; }   /* the pack mirrored in a glossy floor: compressed (seen from above), fading within 40% of its height. The mask is applied BEFORE the flip, so it must run "to top" (the image's own bottom edge is the visual base line) — with "to bottom" the visible part is the pack's top, pushed below the stage and clipped, which is why the earlier reflection never showed */
.stage__shadow { position: absolute; left: 3%; right: 3%; bottom: -1.6%; height: 4.2%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.92), rgba(0,0,0,.6) 50%, transparent 78%); filter: blur(1.5px); opacity: 0; transition: opacity .8s var(--ease) 1.2s, transform .45s var(--ease); z-index: 0; }   /* contact shadow: tight and dark, hugging the base — what makes an object sit on a surface */
.stage__shadow::before { content: ""; position: absolute; left: -6%; right: -6%; bottom: -120%; height: 260%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,.22) 50%, transparent 75%); filter: blur(7px); }   /* the soft ambient shadow spreading onto the floor */
.stage.is-visible .stage__shadow { opacity: 1; }
.stage__underline { position: absolute; left: 22%; right: 22%; bottom: -8%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-light), transparent); transform: scaleX(0); transition: transform .45s var(--ease-out); }
.stage__vignette { position: absolute; inset: 0; pointer-events: none; z-index: 5; box-shadow: inset 0 0 110px 36px rgba(4,4,6,.9); }
.stage__vignette::before { content: ""; position: absolute; left: 0; right: 0; top: 63.5%; height: 1px; background: linear-gradient(90deg, transparent 6%, rgba(226,194,104,.3) 30%, rgba(241,226,176,.42) 50%, rgba(226,194,104,.3) 70%, transparent 94%); }
.stage__vignette::after { content: ""; position: absolute; left: 0; right: 0; top: 64%; bottom: 0; background: linear-gradient(to bottom, rgba(241,226,176,.08), transparent 50%); }
/* hover: forward, lift, spotlight follows, siblings dim, gold underline */
@media (hover: hover) and (pointer: fine) {
  .stage__row:hover .stage__pack:not(:hover) { opacity: .72; transition-delay: 0s; transition-duration: .45s; }
  .stage__pack:hover img:first-of-type, .stage__pack:focus-visible img:first-of-type { transform: translateY(-8px) scale(1.04); filter: drop-shadow(0 18px 18px rgba(0,0,0,.6)) brightness(1.06); }
  .stage__pack:hover .stage__shadow, .stage__pack:focus-visible .stage__shadow { transform: scale(1.08); }
  .stage__pack:hover .stage__underline, .stage__pack:focus-visible .stage__underline { transform: scaleX(1); }
}
/* touch: tap brings a pack forward */
.stage__pack.is-front img:first-of-type { transform: translateY(-6px) scale(1.04); }
.stage__pack.is-front .stage__underline { transform: scaleX(1); }

/* right column choreography */
.brand-copy > p { color: #8d95a1; }
.brand-copy .eyebrow { opacity: 0; transition: opacity .6s var(--ease) .2s; }
.brand-copy.is-visible .eyebrow { opacity: 1; }
.brand-copy.is-visible .eyebrow::before { animation: eyebrow-pulse 1.2s var(--ease) 1.9s 1; }
@keyframes eyebrow-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(226,194,104,0); } 40% { box-shadow: 0 0 10px 1px rgba(226,194,104,.6); } }
.brand-copy h2 .mask { display: block; overflow: hidden; }
.brand-copy h2 .mask > span { display: block; transform: translateY(105%); transition: transform .9s var(--ease-out) .35s; }
.brand-copy.is-visible h2 .mask > span { transform: none; }
.brand-copy > p, .brand-copy .spec-row span, .brand-copy .btn-row { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.brand-copy.is-visible > p, .brand-copy.is-visible .spec-row span, .brand-copy.is-visible .btn-row { opacity: 1; transform: none; }
.brand-copy.is-visible > p.lead { transition-delay: .7s; } .brand-copy.is-visible > p:not(.lead) { transition-delay: .9s; }
.brand-copy.is-visible .spec-row span:nth-child(1) { transition-delay: 1.15s; } .brand-copy.is-visible .spec-row span:nth-child(2) { transition-delay: 1.3s; } .brand-copy.is-visible .spec-row span:nth-child(3) { transition-delay: 1.45s; }
.brand-copy.is-visible .btn-row { transition-delay: 1.7s; }
/* "Also from Cinema Nachos": the ways to the cart and to catering (client 2026-09-19). Three rounds the same day: a photo link to the cart →
   a two-row photo list with catering → "it looks like there's too many button options". So the column is back to its two buttons, and the
   two extra destinations are ONE quiet ruled line under them: a faint label on the left, two serif text links with a small arrow on the
   right. Nothing here has a border, a fill or a thumbnail, so nothing reads as another button. Links are ≥44px tall; hover = focus. */
.brand-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2.2rem; margin-top: 1.9rem; padding-top: .55rem; border-top: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.brand-copy.is-visible .brand-more { opacity: 1; transform: none; transition-delay: 1.9s; }
.brand-more__label { margin-right: auto; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; color: var(--faint); }
.brand-more__link { position: relative; display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font-family: var(--font-display); font-size: clamp(1.15rem, 1.4vw, 1.3rem); color: var(--ink); transition: color .3s var(--ease); }
.brand-more__link svg { width: 14px; height: 14px; color: var(--gold-light); transition: transform .35s var(--ease); }
.brand-more__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.brand-more__link:hover, .brand-more__link:focus-visible { color: var(--gold-pale); }
.brand-more__link:hover svg, .brand-more__link:focus-visible svg { transform: translateX(3px); }
.brand-more__link:hover::after, .brand-more__link:focus-visible::after { transform: scaleX(1); }
@media (max-width: 600px) { .brand-more { gap: 0 1.8rem; padding-top: .9rem; } .brand-more__label { flex-basis: 100%; margin: 0 0 .2rem; } }

/* ---------- logo walls ---------- */
.logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.partner { position: relative; background: var(--bg); min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 1.4rem 1.2rem; transition: background .35s var(--ease); }
.partner:hover { background: var(--panel); }
.partner__logo-box { height: 60px; width: 100%; display: flex; align-items: center; justify-content: center; }
.partner__logo-box::before { content: ""; position: absolute; }
.partner--logo .partner__logo-box { background: var(--cream); border-radius: 3px; height: 74px; padding: .7rem 1rem; }
.partner__logo { display: block; max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.partner__logo--square { height: 100%; border-radius: 6px; }
.partner__name { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); line-height: 1.1; }
.partner__type { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 500; text-align: center; }
.partner__tag { position: absolute; top: .7rem; right: .7rem; font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); border: 1px solid var(--line); padding: .22rem .5rem .18rem; line-height: 1; }
.brand-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.brand-row .partner { min-height: 160px; }
@media (max-width: 1420px) { .brand-row { grid-template-columns: repeat(3, 1fr); } }   /* six tiles: below this a one-line type label no longer fits a sixth of the row */
.note { display: flex; gap: .7rem; align-items: flex-start; font-size: .8rem; color: var(--faint); margin-top: 1.6rem; max-width: 70ch; }
.note svg { width: 14px; height: 14px; flex: none; margin-top: .3rem; }

/* ---------- distribution map ---------- */
.map-stage { position: relative; perspective: 1400px; }
.map-stage__inner { transform-style: preserve-3d; transition: transform .8s var(--ease-out); will-change: transform; }
.map-stage svg { width: 100%; height: auto; overflow: visible; }
/* "Our Network" map (2026-09-07; PAK_MAP in the builder, network.js to start/pause). Hairline gold like the globe,
   delta and supply scenes. Entrance (.is-in): floor, outline halo, the outline draws in, the land dots light outward
   from Lahore (--d = distance), two reach rings, the six spokes draw in, cities and labels fade in by distance.
   Loop (12.6 s from --t0): one comet at a time runs a spoke (1.3 s, dash on pathLength), the hub emits a ring as it
   leaves and the city pulses on arrival; 2 s rest. */
.pm { --t0: 3.4s; --loop: 12.6s; --step: 1.75s; }   /* six spokes since 2026-09-20 (Peshawar removed): 6 x 1.75s keeps the loop's 2.1s rest */
.pm-floor { opacity: 0; transition: opacity 2s var(--ease) .2s; }
.pm-outline-halo { fill: none; stroke: rgba(226,194,104,.04); stroke-width: 10; stroke-linejoin: round; opacity: 0; transition: opacity 1.6s var(--ease) .6s; }
.pm-outline { fill: none; stroke: rgba(226,194,104,.34); stroke-width: 1; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-out) .2s; }
.pm-dot { fill: rgba(214,206,190,.2); opacity: 0; transition: opacity .9s var(--ease) calc(1s + var(--d) * 1.8s); }
.pm-reach-ring { fill: none; stroke: rgba(226,194,104,.1); stroke-width: .8; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) calc(1.6s + var(--i) * .35s); }
.pm-route { fill: none; stroke: rgba(226,194,104,.24); stroke-width: .8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out) calc(2.1s + var(--i) * .12s); }
.pm-comet { fill: none; stroke: #f1e2b0; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: .18 2; stroke-dashoffset: .18; opacity: 0; }
.pm-pulse { fill: none; stroke: rgba(241,226,176,.7); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pm-city { opacity: 0; transition: opacity .8s var(--ease) calc(1.6s + var(--d) * 1.8s); }
.pm-city-ring { fill: none; stroke: rgba(226,194,104,.55); stroke-width: 1; }
.pm-city-core { fill: rgba(226,194,104,.9); }
.pm-hub { opacity: 0; transition: opacity 1s var(--ease) 1.2s; }
.pm-hub-ring { fill: none; stroke: rgba(226,194,104,.6); stroke-width: 1; }
.pm-hub-core { fill: #f1e2b0; transform-box: fill-box; transform-origin: center; }
.pm-hub-emit { fill: none; stroke: rgba(226,194,104,.55); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pm-label { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; fill: var(--faint); font-weight: 500; opacity: 0; transition: opacity .8s var(--ease) calc(1.9s + var(--d) * 1.8s); }
.pm-label--sub { font-size: 9px; fill: rgba(107,116,128,.7); }
.pm-label--hub { fill: var(--gold-light); font-size: 11px; }
.pm-sea { font-family: var(--font-display); font-style: italic; font-size: 13px; fill: rgba(107,116,128,.7); letter-spacing: .12em; opacity: 0; transition: opacity 1s var(--ease) 2.6s; }
.is-in .pm-floor, .is-in .pm-outline-halo, .is-in .pm-dot, .is-in .pm-city, .is-in .pm-hub, .is-in .pm-label, .is-in .pm-sea { opacity: 1; }
.is-in .pm-outline, .is-in .pm-reach-ring, .is-in .pm-route { stroke-dashoffset: 0; }
.is-in .pm-comet { animation: pm-comet var(--loop) linear calc(var(--t0) + var(--i) * var(--step)) infinite; }
.is-in .pm-pulse { animation: pm-pulse var(--loop) var(--ease-out) calc(var(--t0) + var(--i) * var(--step) + 1.25s) infinite; }
.is-in .pm-hub-emit { animation: pm-pulse var(--loop) var(--ease-out) calc(var(--t0) + var(--i) * var(--step)) infinite; }
.is-in .pm-hub-core { animation: pm-breathe 3.6s var(--ease) infinite; }
.pm:not(.is-visible) .pm-comet, .pm:not(.is-visible) .pm-pulse, .pm:not(.is-visible) .pm-hub-emit, .pm:not(.is-visible) .pm-hub-core { animation-play-state: paused; }
@keyframes pm-comet { 0% { stroke-dashoffset: .18; opacity: 0; } .8% { opacity: .95; } 9.6% { opacity: .95; } 10.3%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes pm-pulse { 0% { opacity: .8; transform: scale(1); } 9% { opacity: 0; transform: scale(3.6); } 100% { opacity: 0; transform: scale(3.6); } }
@keyframes pm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) {
  .pm * { transition: none !important; animation: none !important; }
  .pm-floor, .pm-outline-halo, .pm-dot, .pm-city, .pm-hub, .pm-label, .pm-sea { opacity: 1; }
  .pm-outline, .pm-reach-ring, .pm-route { stroke-dashoffset: 0; }
  .pm-comet, .pm-pulse, .pm-hub-emit { display: none; }
}
.map-caption { display: flex; justify-content: space-between; gap: 1rem; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); }

/* ---------- product catalogue ---------- */
.catalogue-controls { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; align-items: center; justify-content: space-between; padding-bottom: 1.3rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 1.2rem; }
#catalogue.section { padding-top: clamp(2rem, 3.2vw, 2.8rem); }
.search-field { position: relative; flex: 1 1 260px; max-width: 380px; }
.search-field svg { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--gold-light); }
.search-field input { width: 100%; padding: .75rem 0 .75rem 1.8rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: .95rem; transition: border-color .3s; }
.search-field input::placeholder { color: var(--faint); }
.search-field input:focus { outline: none; border-bottom-color: var(--gold); }
.filters { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.filter { position: relative; padding: .5rem 0; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--muted); transition: color .3s; }
.filter::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.filter:hover, .filter.is-active { color: var(--gold-light); }
.filter.is-active::after { transform: scaleX(1); }
.catalogue-count { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.4rem; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.25rem; }
[hidden] { display: none !important; }
.product { background: var(--bg-2); border: 1px solid var(--line-soft); display: flex; flex-direction: column; transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); }
.product:hover { border-color: var(--line); transform: translateY(-3px); }
.product:hover { background: var(--panel); }
.product__media { aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 1.8rem; position: relative; overflow: hidden; }
.product__media::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 60%, rgba(201,162,39,.12), transparent 70%); opacity: 0; transition: opacity .5s var(--ease); }
.product:hover .product__media::before { opacity: 1; }
.product__media img { position: relative; width: 100%; height: 100%; object-fit: contain; transition: transform .7s var(--ease); }
.product__media img[src$=".webp"] { filter: drop-shadow(0 24px 30px rgba(0,0,0,.55)); }
.product:hover .product__media img { transform: translateY(-4px) scale(1.04); }
.product__body { padding: 1.4rem 1.6rem 1.8rem; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; flex: 1; }
.product__cat { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); margin-bottom: .5rem; font-weight: 500; }
.product__name { font-size: 1.45rem; margin-bottom: .5rem; }
.product__desc { color: var(--muted); font-size: .92rem; margin-bottom: 1.2rem; flex: 1; }
.product__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line-soft); padding: .35rem .6rem; }
.empty-state { grid-column: 1 / -1; padding: 3rem; text-align: center; color: var(--muted); border: 1px solid var(--line-soft); }

/* ---------- forms ---------- */
.form-card { border: 1px solid var(--line-soft); background: var(--bg-2); padding: clamp(1.5rem, 3.5vw, 2.8rem); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.5rem; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.req { color: var(--gold-light); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink);
  font: inherit; font-size: .98rem; transition: border-color .3s; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2c268' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; background-size: 16px; padding-right: 1.6rem; cursor: pointer; }
.field select option { background: var(--panel); color: var(--ink); }
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.field .error-msg { display: none; font-size: .8rem; color: #e39a8f; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color: #c9675a; }
.field.has-error .error-msg { display: block; }
.hint { font-size: .8rem; color: var(--faint); }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: .6rem; }
.form-success { display: none; border: 1px solid var(--line); background: rgba(201,162,39,.06); padding: 1.6rem 1.8rem; margin-bottom: 1.6rem; }
.form-success.is-visible { display: block; animation: rise .6s var(--ease-out); }
.form-success h4 { margin-bottom: .5rem; }
.form-success p { color: var(--muted); margin-bottom: 1.2rem; }

/* contact cards */
.contact-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.contact-item { background: var(--bg); padding: 1.8rem; display: flex; gap: 1.2rem; align-items: flex-start; transition: background .35s; }
.contact-item:hover { background: var(--panel); }
.contact-item svg { width: 20px; height: 20px; color: var(--gold-light); flex: none; margin-top: .2rem; }
.contact-item h4 { font-family: var(--font-body); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: .5rem; }
.contact-item p, .contact-item a { color: var(--ink); font-size: 1.02rem; margin: 0; }
.contact-item a, .office__card a { transition: color .3s var(--ease); }
.contact-item a:hover, .office__card a:hover { color: var(--gold-light); }
/* Contact tiles (client 2026-09-19, three rounds). ha@ is the Operations Manager, Azhar Waqar; mktg@ the Head of Marketing, Waqas Haider; ia@ the
   CEO, Ismail Arif — each has a tile (the role as the small heading: the mail icon already says "email"; the name in the serif; the address).
   Then: "make Phone/WhatsApp one column as it's the same number and make the columns more organized" — so the grid is two rows of three again:
   the company's channels on top (Phone & WhatsApp with a WhatsApp link under the number | Office with the hours under the address | Instagram),
   the people underneath, CEO first. Two equal rows stretch to the fold as the original six tiles did. */
.contact-item__name { font-family: var(--font-display); font-size: 1.32rem !important; line-height: 1.2; color: var(--ink); margin: 0 0 .3rem !important; }
.contact-item--person a { font-size: .96rem; color: var(--muted); }
.contact-item--person a.contact-item__phone { display: block; margin-top: .25rem; }   /* a person's direct line, under their address (config: emailPhone …) */
.contact-item__sub { margin-top: .5rem !important; font-size: .92rem !important; line-height: 1.5; color: var(--muted) !important; }
.contact-item__sub a { font-size: inherit !important; color: inherit !important; border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: color .3s var(--ease), border-color .3s var(--ease); }
.contact-item__sub a:hover, .contact-item__sub a:focus-visible { color: var(--gold-light) !important; border-bottom-color: var(--gold); }
.office__people { display: grid; gap: .7rem; }
.office__people > span { display: grid; gap: .1rem; }
.office__people em { font-style: normal; font-size: .84rem; color: var(--faint); }
.placeholder-value { color: var(--faint); font-style: italic; }
.office { display: grid; grid-template-columns: 1.4fr .8fr; gap: 1.25rem; align-items: stretch; }
.office__card { border: 1px solid var(--line-soft); background: var(--bg-2); padding: 2rem; display: flex; flex-direction: column; gap: 1.3rem; }
.office__card h4 { font-family: var(--font-body); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: .4rem; }
.office__card p { color: var(--ink); margin: 0; }
.map-embed { border: 1px solid var(--line-soft); background: var(--panel); min-height: 380px; display: grid; place-items: center; }
.map-embed iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; filter: grayscale(1) invert(.92) contrast(.9) hue-rotate(180deg); }
.map-embed__ph { color: var(--muted); text-align: center; padding: 2rem; }
.map-embed__ph svg { width: 36px; height: 36px; margin-inline: auto; margin-bottom: .8rem; color: var(--faint); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; border: 1px solid var(--line); padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem); text-align: center; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 50% 120%, rgba(201,162,39,.14), transparent 70%); pointer-events: none; }
.cta-band > * { position: relative; }
.cta-band h2 { margin-bottom: 1rem; }
.cta-band p { color: var(--muted); max-width: 54ch; margin-inline: auto; margin-bottom: 2rem; }
.cta-band .btn-row { justify-content: center; }

/* ---------- page hero (inner pages) ---------- */
.page-hero { position: relative; padding: calc(var(--header-h) + clamp(3rem, 6vw, 4.5rem)) 0 clamp(2.5rem, 4.5vw, 3.5rem); border-bottom: 1px solid var(--line-soft); background: radial-gradient(50% 60% at 85% 20%, rgba(28,58,110,.25), transparent 70%), var(--bg); }
.page-hero h1 { max-width: 18ch; margin-bottom: 1.1rem; font-size: clamp(2.2rem, 4vw, 3.5rem); }
.page-hero--slim { padding: calc(var(--header-h) + 1.5rem) 0 0; border-bottom: 0; background: none; }
.page-hero--slim .crumbs { margin-bottom: 0; }
.as-h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.page-hero .lead { color: var(--muted); }
.page-hero--supply .lead { font-size: clamp(.92rem, 1.05vw, 1rem); line-height: 1.65; max-width: none; }
/* Products + Contact heroes (client 2026-09-07): same title size, same lead size, and a 56px gold hairline drawing in
   between the title and the lead, as on About */
.page-hero--contact h1 { font-size: clamp(2.4rem, 4.4vw, 3.9rem); margin-bottom: .9rem; max-width: 21ch; }   /* "Speak With Our Team" in Title Case (client 2026-09-19) is a little wider than 18ch: keep it on one line as before */
.page-hero--contact .lead { font-size: clamp(.92rem, 1.05vw, 1rem); line-height: 1.65; max-width: none; }
/* the Contact hero mirrors the Products hero's spacing (client 2026-09-08, "match the products sizes"): same top/bottom padding and breadcrumb gap */
.page-hero--contact { padding-top: calc(var(--header-h) + clamp(.75rem, 1.5vw, 1.25rem)); padding-bottom: clamp(1rem, 1.8vw, 1.5rem); }
.page-hero--contact .crumbs { margin-bottom: 1.6rem; }
.page-hero--supply .lead, .page-hero--contact .lead { position: relative; margin-top: 1.4rem; padding-top: 1.6rem; }
.page-hero--supply .lead::before, .page-hero--contact .lead::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
body.is-loaded .page-hero--supply .lead::before, body.no-preloader .page-hero--supply .lead::before, body.is-loaded .page-hero--contact .lead::before, body.no-preloader .page-hero--contact .lead::before { transition: transform 1s var(--ease-out) .9s; transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .page-hero--supply .lead::before, .page-hero--contact .lead::before { transform: none; transition: none; } }
.crumbs { display: flex; gap: .8rem; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); margin-bottom: 2.2rem; }
.crumbs a:hover { color: var(--gold-light); }
.crumbs span::before { content: "/"; margin-right: .8rem; color: var(--faint); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem; background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 3rem; margin-bottom: 3rem; }
.footer-about p { color: var(--muted); max-width: 38ch; margin: 1.4rem 0; font-size: .95rem; }
.site-footer h4 { font-family: var(--font-body); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-light); font-weight: 500; margin-bottom: 1.2rem; }
.site-footer li { margin-bottom: .55rem; color: var(--muted); font-size: .95rem; display: flex; gap: .7rem; align-items: flex-start; }
.site-footer li a { position: relative; transition: color .3s var(--ease); }
.site-footer li a:hover { color: var(--gold-light); }
.site-footer li a::after, .crumbs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.site-footer li a:hover::after, .crumbs a:hover::after { transform: scaleX(1); }
.crumbs a { position: relative; transition: color .3s var(--ease); }
.site-footer li svg { width: 15px; height: 15px; color: var(--gold-light); flex: none; margin-top: .35rem; }
.socials { display: flex; gap: .6rem; }
.socials a { width: 42px; height: 42px; border: 1px solid var(--line-soft); display: grid; place-items: center; color: var(--ink-2); transition: all .3s var(--ease); }
.socials a svg { width: 17px; height: 17px; }
.socials a:hover { border-color: var(--gold); color: var(--gold-light); }
.footer-bottom { border-top: 1px solid var(--line-soft); padding-top: 1.6rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; font-size: .74rem; color: var(--faint); }

/* ---------- floating WhatsApp ---------- */
.wa-float {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90; display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(14,21,32,.92); color: var(--ink-2); padding: .6rem .95rem .6rem .75rem; border: 1px solid var(--line-soft); border-radius: 999px;
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  box-shadow: 0 10px 26px rgba(0,0,0,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.wa-float svg { width: 17px; height: 17px; color: #3fcf6b; }
.wa-float:hover { transform: translateY(-2px); border-color: var(--gold); color: var(--gold-pale); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 5.5rem; transform: translate(-50%, 20px); z-index: 200; background: var(--ink); color: #0b0c0f; padding: .8rem 1.3rem; font-size: .88rem; border-radius: var(--radius); opacity: 0; pointer-events: none; transition: all .35s var(--ease); max-width: min(92vw, 520px); text-align: center; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- staggered children + eyebrow line ---------- */
.stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.stagger.is-visible > * { opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(2) { transition-delay: .08s; } .stagger.is-visible > *:nth-child(3) { transition-delay: .16s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: .24s; } .stagger.is-visible > *:nth-child(5) { transition-delay: .32s; }
.stagger.is-visible > *:nth-child(6) { transition-delay: .4s; } .stagger.is-visible > *:nth-child(7) { transition-delay: .48s; }
.stagger.is-visible > *:nth-child(n+8) { transition-delay: .56s; }
.reveal .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) .15s; }
.reveal.is-visible .eyebrow::before { transform: scaleX(1); }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.pack-trio img { animation: floaty 6s ease-in-out infinite; }
.pack-trio img:nth-child(2) { animation-delay: -2s; transform: translateY(-6%) scale(1.06); animation: none; }
.pack-trio img:nth-child(3) { animation-delay: -4s; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal[data-delay="1"] { transition-delay: .12s; } .reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; } .reveal[data-delay="4"] { transition-delay: .48s; } .reveal[data-delay="5"] { transition-delay: .6s; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-line { position: relative; }
.reveal-line::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-out) .2s; }
.reveal-line.is-visible::after { transform: scaleX(1); }

/* ---------- preloader ---------- */
.preloader { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: grid; place-items: center; transition: opacity .7s var(--ease), visibility 0s linear .7s; }
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding-bottom: 1.4rem; }   /* the sweep line was removed 2026-09-12 (client: "a line flashes in the loading screen"); the padding keeps the group optically centred */
.preloader__mark { width: 64px; height: 64px; border: 1px solid var(--gold); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; color: var(--gold-light); font-size: 1.45rem; margin-bottom: .6rem; opacity: 0; animation: pl-mark 1s var(--ease-out) .1s forwards; }
.preloader__name { font-family: var(--font-display); font-size: 2rem; color: var(--ink); letter-spacing: .04em; opacity: 0; transform: translateY(10px); animation: rise .9s var(--ease-out) .45s forwards; }
.preloader__sub { font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); opacity: 0; animation: rise .9s var(--ease-out) .7s forwards; }
@keyframes pl-mark { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
body.no-preloader .preloader { display: none; }
body.is-loaded .preloader { opacity: 0; visibility: hidden; pointer-events: none; }
body.has-preloader .rise { animation-play-state: paused; }
body.has-preloader.is-loaded .rise { animation-play-state: running; }
body.has-preloader:not(.is-loaded) { overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .strip__grid { grid-template-columns: repeat(2, 1fr); }
  .strip__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .strip__item:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .office { grid-template-columns: 1fr; }
  .brand-row { grid-template-columns: repeat(3, 1fr); }
  .contact-list { grid-template-columns: repeat(2, 1fr); }
  .contact-item:nth-child(3), .contact-item--person:last-child { grid-column: span 2; }
}
@media (max-width: 960px) {
  :root { --header-h: 74px; }
  .section { padding: 3rem 0; }
  .page-hero { padding-bottom: 2rem; }
  body { line-height: 1.6; }
  .nav { position: fixed; inset: 0; z-index: 99; background: rgba(7,9,13,.97); flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; padding: 6rem var(--gutter) 3rem; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }
  body.nav-open .nav { opacity: 1; transform: none; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .nav a { font-family: var(--font-display); font-size: 2rem; letter-spacing: 0; text-transform: none; font-weight: 500; padding: .55rem 0; color: var(--ink); opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  body.nav-open .nav a { opacity: 1; transform: none; }
  .nav a:nth-child(1) { transition-delay: .08s; } .nav a:nth-child(2) { transition-delay: .14s; } .nav a:nth-child(3) { transition-delay: .2s; } .nav a:nth-child(4) { transition-delay: .26s; } .nav a:nth-child(5) { transition-delay: .32s; }
  .nav a::after { display: none; }
  .nav .btn { margin: 1.6rem 0 0; font-family: var(--font-body); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; }
  .nav-toggle { display: block; }
  .nav-toggle { position: relative; z-index: 100; }
  .site-header__inner { position: relative; z-index: 100; }
  .hero { min-height: 0; padding-top: calc(var(--header-h) + 2.5rem); }
  .hero__inner { grid-template-columns: 1fr; gap: 1.5rem; min-height: 0; }
  .hero__visual { position: relative; top: auto; bottom: auto; right: auto; height: auto; width: min(100%, 480px); margin: 0 auto; order: -1; transform: none !important; }
  .globe-tip { display: none; }
  .hero__visual::after { display: none; }
  .hero__text { max-width: none; }
  .hero__legend { position: static; margin-top: .8rem; justify-content: center; white-space: normal; }
  .hero__legend { display: none; }
  .hero__scroll { display: none; }
  .split, .split--wide { grid-template-columns: 1fr; }
  .split__media--last { order: 2; }
  .row { grid-template-columns: 1fr; gap: .8rem; }
  .journey__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .timeline__art { grid-column: 1; justify-self: start; width: 56px; margin-top: .6rem; }
  .timeline__art::before { display: none; }
  .journey__visual { order: -1; }
  .journey__sticky { position: static; }
  .journey__sticky::before { display: none; }
  .journey-art { max-width: 240px; margin-inline: 0; }
  .year-dial { max-width: 200px; margin-inline: 0; }
  .journey-map { max-width: 260px; margin-inline: 0; }
  .journey-map__year { font-size: 1.6rem; }
  .year-dial__year { font-size: 2.4rem; }
  .about-intro__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-intro__copy { border-left: 0; padding-left: 0; }
  .about-intro__mv { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); padding-top: 1.8rem; }
  .mv { grid-template-columns: 1fr; }
  .mv__item + .mv__item { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); padding-top: 1.6rem; }
  .why { grid-template-columns: 1fr; }
  .why__item, .why__item:nth-child(3n+2), .why__item:nth-child(3n+3) { padding: 1.5rem 0; border-left: 0; }
  .timeline { --spine: 10px; }
  .timeline::after { display: none; }
  .timeline__item { grid-template-columns: 1fr; padding: 1.5rem 0 1.5rem 2rem; }
  .timeline__year { grid-column: 1; }
  .timeline__node { position: absolute; grid-column: 1; left: calc(var(--spine) - 2rem); top: 1.95rem; transform: translateX(-50%); margin: 0; }
  .timeline__body { grid-column: 1; }
  .pillars, .pillars--wrap { grid-template-columns: 1fr; }
  .pillar, .pillars--wrap .pillar { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); padding: 2rem 0; }
  .pillars--services::before { display: none; }
  .pillars--services .pillar, .pillars--services .pillar:first-child, .pillars--services .pillar:last-child { border-left: 0; padding: 1.9rem 0; }
  .pillars--services .pillar + .pillar::before { left: 0; right: 0; top: 0; bottom: auto; height: 1px; width: auto; background: var(--line-soft); }
  .pillars--services .pillar:hover { transform: none; background: none; }
  .pillar:first-child, .pillars--wrap .pillar:nth-child(-n+3) { border-top: 0; }
  .pillars--wrap .pillar:nth-child(-n+3):not(:first-child) { border-top: 1px solid var(--line-soft); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-list { grid-template-columns: 1fr; }
  .contact-item:nth-child(3), .contact-item--person:last-child { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
}
@media (max-width: 640px) {
  .section { padding: 2.75rem 0; }
  .strip__grid { grid-template-columns: 1fr 1fr; }
  .strip__item { padding: 1.2rem 1rem 1.2rem 0; }
  .strip__item:nth-child(even) { border-left: 1px solid var(--line-soft); padding-left: 1rem; }
  .strip__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .strip__item:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .strip--numbers .strip__item strong { font-size: 2rem; }
  .hero__visual { max-width: 380px; }
  .pillar, .pillars--wrap .pillar { padding: 1.4rem 0; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .product__media { padding: 1rem; }
  .product__body { padding: 1rem 1rem 1.2rem; }
  .product__name { font-size: 1.2rem; }
  .product__desc { font-size: .86rem; }
  .office { grid-template-columns: 1fr; }
  .brand-row { grid-template-columns: repeat(2, 1fr); }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .logo__name { font-size: 1.25rem; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .pack-trio { gap: .2rem; }
  .stage { aspect-ratio: 4 / 3; }
  .stage__row { transform: none !important; }
  .stage__pack:nth-child(1), .stage__pack:nth-child(3) { transform: none; }
  .stage.is-visible .stage__pack:nth-child(1), .stage.is-visible .stage__pack:nth-child(3) { transform: none; }
  .map-caption { flex-direction: column; gap: .4rem; }
  .wa-float span { display: none; }
  .wa-float { padding: .7rem; right: 1rem; bottom: 1rem; }
  .wa-float svg { width: 20px; height: 20px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .reveal, .stagger > * { opacity: 1; transform: none; animation: none; transition: none; }
  .pack-trio img { animation: none; }
  .stage__pack { opacity: 1; transition: none; }
  .stage.is-visible .stage__pack:nth-child(1), .stage__pack:nth-child(1) { transform: rotate(4deg); } .stage.is-visible .stage__pack:nth-child(3), .stage__pack:nth-child(3) { transform: rotate(-4deg); } .stage__pack:nth-child(2) { transform: none; }
  .stage__beam, .stage__source, .stage__platform, .stage__shadow, .stage__dust { opacity: 1; transition: none; animation: none !important; }
  .brand-copy .eyebrow, .brand-copy > p, .brand-copy .spec-row span, .brand-copy .btn-row, .brand-copy .brand-more { opacity: 1; transform: none; transition: none; }
  .brand-more__link svg, .brand-more__link::after { transition: none; }
  .brand-copy h2 .mask > span { transform: none; transition: none; }
  .timeline__item { opacity: 1; transform: none; transition: none; }
  .timeline__emblem [pathLength] { stroke-dashoffset: 0 !important; transition: none !important; }
  .em-steam, .em-pulse, .em-route, .em-sweep, .em-spread circle, .em-doorlight { animation: none !important; }
  .em-reel, .em-beam, .em-awning, .em-fork, .em-knife { transition: none !important; }
  .em-awning { transform: none; }
  .journey__head .eyebrow, .journey__head > p:last-child { opacity: 1; transform: none; transition: none; }
  .journey__head .mask > span { transform: none; transition: none; }
  .timeline__node::after { animation: none !important; }
  .journey-art * { transition: none !important; }
  .journey-art .ja-particles { display: none; }
  .reveal-line::after { transform: none; transition: none; }
  .hero__scroll, .map-stage .route, .map-stage .city-ring { animation: none; }
  .map-stage__inner { transition: none; transform: none !important; }
  .btn::before { transition: none; }
}

/* About hero: the first film animation (film_svg() in the builder; main.js initFilm() toggles .is-running while
   on screen). A film strip curving through the right side with sprocket holes and frames running along it,
   and a hairline reel turning slowly at the right edge. */
.hero--about { min-height: 0; padding: calc(var(--header-h) + 3rem) 0 3.5rem;   /* auto height: the title then sits at exactly the same level as "Our Network" on the distribution page (client 2026-09-07) */ background: radial-gradient(40% 40% at 15% 90%, rgba(28,58,110,.10), transparent 70%), var(--bg); }
.hero--about .hero__inner { min-height: 0; }
.hero--about .hero__scroll { display: none; }
.hero--about h1 { font-size: clamp(2.4rem, 4.4vw, 3.9rem); line-height: 1.05; letter-spacing: -.005em; margin: 0 0 1.1rem; color: var(--ink); text-shadow: none; max-width: 18ch; }   /* same face, size and colour as the "Our Portfolio" page title (client 2026-09-07) */
.hero--about .crumbs { margin-bottom: 2.2rem; }
.hero--about .lead { position: relative; font-size: clamp(1.1rem, 1.3vw, 1.25rem); line-height: 1.9; color: #b8bfc8; max-width: 58ch; margin: 1.6rem 0 0; padding-top: 2rem; letter-spacing: .004em; text-wrap: pretty; }   /* opened up 2026-09-07 ("too congested"): wider measure, looser leading, more air under the hairline */   /* lead with a 56px gold hairline drawing in above it (client 2026-09-07) */
.hero--about .lead::before { display: none; }   /* the eyebrow's gold line is the hero's one accent (client final pass 2026-09-08) */
body.is-loaded .hero--about .lead::before, body.no-preloader .hero--about .lead::before { transition: transform 1s var(--ease-out) .9s; transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .hero--about .lead::before { transform: none; transition: none; } }
.film { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }   /* spans the whole hero, behind the text (client 2026-09-06) */
.film__svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-linecap: butt; }
.film__glow { stroke: rgba(201,162,39,.07); stroke-width: 110; filter: url(#film-glow); }
.film__edge { stroke: rgba(230,207,140,.22); stroke-width: 52; }   /* a narrow champagne highlight along the strip's upper edge only */
.film__shade { stroke: rgba(0,0,0,.5); stroke-width: 34; filter: url(#film-glow); }   /* soft internal shadow under the curve for depth */
.film__rim { stroke: rgba(226,194,104,.16); stroke-width: 52.6; }   /* fine defined outer edges */
.film__glass { stroke: rgba(255,255,255,.018); stroke-width: 51; }   /* smoked-glass haze */
.film__band { stroke: rgba(201,162,39,.05); stroke-width: 51; }
.film__holes { stroke: #04060a; stroke-width: 51; stroke-dasharray: 5 9; }
.film__core-base { stroke: var(--bg); stroke-width: 36; }
.film__core { stroke: rgba(201,162,39,.05); stroke-width: 36; }
.film__frames { stroke: rgba(3,5,8,.55); stroke-width: 27; stroke-dasharray: 34 8; }   /* darker frame windows */
.film__reel circle, .film__spokes path { stroke: rgba(226,194,104,.11); stroke-width: .8; }
.film__reel circle:nth-child(1), .film__reel circle:nth-child(2) { stroke: rgba(226,194,104,.145); }   /* outer rings ≈10% clearer */
.film__reel-shadow { fill: rgba(0,0,0,.55); stroke: none; filter: url(#film-glow); }
.film__rimlight { fill: none; stroke: rgba(230,207,140,.34); stroke-width: 1.1; stroke-linecap: round; }   /* warm rim light, upper-right only */
.film__reel circle:nth-child(3) { stroke: rgba(226,194,104,.12); }
.film__ports circle { stroke: rgba(226,194,104,.09); }
.film__reel { transform-box: fill-box; transform-origin: center; animation: reel-turn 90s linear infinite paused; }
.film__holes, .film__frames { animation: film-run 7s linear infinite paused; }
[data-film].is-running .film__reel, [data-film].is-running .film__holes, [data-film].is-running .film__frames { animation-play-state: running; }
@keyframes film-run { to { stroke-dashoffset: -42; } }
@keyframes reel-turn { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .hero--about { flex-direction: column; align-items: stretch; padding-bottom: 0; }
  .film { position: relative; inset: auto; order: 2; height: 240px; width: 100%; margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .film__reel, .film__holes, .film__frames { animation: none; } }
/* Mission & Vision: gold dividers draw outward, then the text fades in */
.mv-row .stagger > * { opacity: 1; transform: none; transition: none; }
.mv-row .stagger .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out); }
.mv-row .stagger.is-visible .eyebrow::before { transform: scaleX(1); }
.mv-row .stagger.is-visible > *:nth-child(2) .eyebrow::before { transition-delay: .15s; }
.mv-row .stagger .mv__text { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease) .45s, transform .8s var(--ease-out) .45s; }
.mv-row .stagger > *:nth-child(2) .mv__text { transition-delay: .6s; }
.mv-row .stagger.is-visible .mv__text { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mv-row .stagger .eyebrow::before, .mv-row .stagger .mv__text { transform: none; opacity: 1; transition: none; } }

/* Products hero "Supply Architecture" (supply_architecture() in the builder, supply.js for timing).
   Hairline wireframe inventory forms in one-point perspective over a floor grid, with inventory points and
   a flowing supply line. Entrance ≈3 s on .is-in; idle: slow 2–3 px drift, a signal every ~11 s; on scroll the
   scene dissolves into its points toward the catalogue. */
/* Compact (client 2026-09-07: "move the heading up so we can see the products too on the first page") */
.page-hero--supply { overflow: hidden; padding-top: calc(var(--header-h) + clamp(.75rem, 1.5vw, 1.25rem)); padding-bottom: clamp(1rem, 1.8vw, 1.5rem); }
.page-hero--supply h1 { font-size: clamp(2.4rem, 4.4vw, 3.9rem); margin-bottom: .9rem; }
.page-hero--supply .crumbs { margin-bottom: 1.6rem; }
@keyframes hero-black { from { opacity: 0; } to { opacity: 1; } }
.page-hero--supply .crumbs.rise, .page-hero--supply h1.rise { animation-name: clip-rise; }
@keyframes clip-rise { from { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -10% 0); } }
.page-hero--supply .container { position: relative; z-index: 1; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 38vw, 640px); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.supply { position: relative; height: clamp(200px, 19vw, 270px); margin-right: calc(-1 * var(--gutter)); }
.supply__svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 84%, transparent), linear-gradient(180deg, #000 58%, transparent); mask-image: linear-gradient(90deg, transparent, #000 24%, #000 84%, transparent), linear-gradient(180deg, #000 58%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
/* floor: lines draw outward from the origin point */
/* forms: charcoal faces, champagne-gold edges; built from the ground up, background first */
/* inventory points: organised clusters, background first */
/* supply connections and the flowing supply line */
/* a few points answer the signal with one soft pulse (every 5th point, staggered along the line) */
/* idle: a very slow 2–3 px perspective drift, only while on screen */
@media (max-width: 900px) {
  .page-hero__grid { grid-template-columns: 1fr; gap: 1rem; }
  .supply { height: 260px; margin-right: 0; }
  .supply__svg { -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero--supply .crumbs.rise, .page-hero--supply h1.rise { animation: none; opacity: 1; }
}

/* Distribution hero (2026-09-07): the "Our Network" map is the hero visual — the client asked to make the hero and the
   network section one, with a button to the customers wall. The map (PAK_MAP, network.js) sits in a height-fitted
   column so the whole country shows on the first screen; the caption line stays beneath it. The earlier delta
   animation and dispatch.js were removed with this change. */
/* .page-hero--full: the hero owns the first screen (client 2026-09-07, "why is it half cut — the first page should be
   clear and organised"): full viewport height, content centred, so the fold lands on the hero's bottom rule. */
.page-hero--full { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.page-hero--full > .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-block: auto; }
/* the distribution hero ends with the four-figure strip (client 2026-09-07: "fit this part in the first page too") */
.page-hero__strip { flex: none; margin-top: clamp(1.5rem, 3vh, 2.5rem); border-bottom: 0; }
.page-hero--dispatch:has(.page-hero__strip) { padding-bottom: 0; }
.page-hero--dispatch { overflow: hidden; padding-top: calc(var(--header-h) + 3rem); padding-bottom: clamp(3rem, 6vh, 4.5rem); background: radial-gradient(40% 55% at 78% 55%, rgba(201,162,39,.07), transparent 70%), radial-gradient(50% 60% at 85% 20%, rgba(28,58,110,.14), transparent 70%), var(--bg); }
.page-hero--dispatch h1 { font-size: clamp(2.8rem, 5.2vw, 5rem); margin-bottom: 1.1rem; }   /* the home hero's scale, so the text fills its column (client 2026-09-07) */
.page-hero--dispatch > .container { margin-block: 0 auto; }   /* top-aligned so "Our Network" sits at the same level as "About I&H Services" (client 2026-09-07) */
.page-hero--dispatch .crumbs { margin-bottom: 2.2rem; }
/* Hero text (client 2026-09-07, "make them neat"): one strong tagline in ivory, balanced over two lines at a bound
   measure, then the description in the quiet grey — one size step apart, same left edge. */
.page-hero--dispatch .lead { position: relative; font-size: clamp(1.15rem, 1.4vw, 1.35rem); line-height: 1.6; color: var(--ink-2); max-width: 40ch; text-wrap: balance; margin: 1.6rem 0 1.3rem; padding-top: 2rem; }
.page-hero--dispatch .lead:not(.lead--quiet)::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; }   /* the About hero's gold hairline */
body.is-loaded .page-hero--dispatch .lead:not(.lead--quiet)::before, body.no-preloader .page-hero--dispatch .lead:not(.lead--quiet)::before { transition: transform 1s var(--ease-out) .9s; transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .page-hero--dispatch .lead::before { transform: none; transition: none; } }
.page-hero--dispatch .lead--quiet { margin: 0; padding-top: 0; color: #8d95a1; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.8; max-width: 56ch; text-wrap: pretty; }
.page-hero--dispatch .btn-row { margin-top: 2.6rem; }
.page-hero--dispatch .page-hero__grid { grid-template-columns: minmax(0, 1fr) clamp(360px, min(42vw, 52svh), 600px); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.page-hero--dispatch .hero__scroll { display: none; }   /* the map already fills the screen; the cue was crossing the caption */
.hero-map { position: relative; }
.hero-map .map-caption { margin-top: 1.2rem; }
@media (max-width: 900px) { .page-hero--dispatch .page-hero__grid { grid-template-columns: 1fr; } .hero-map { max-width: 480px; margin-inline: auto; } .page-hero--full { min-height: 0; } .page-hero--full .hero__scroll { display: none; } }

/* Business divisions (home): five ruled link panels, each deep-linking to its catalogue filter */
.divisions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.division { position: relative; display: flex; flex-direction: column; gap: .7rem; min-height: 100%; padding: 2rem 1.6rem 2.2rem 0; margin-right: 1.6rem; color: inherit; text-decoration: none; border-right: 1px solid var(--line-soft); transition: background .4s var(--ease); }
.division:last-child { border-right: 0; margin-right: 0; }
.division::after { content: ""; position: absolute; left: 0; right: 1.6rem; bottom: -1px; height: 1px; background: var(--gold-light); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out); }
.division:last-child::after { right: 0; }
.division:hover::after, .division:focus-visible::after { transform: scaleX(1); }
.division__num { font-family: var(--font-body); font-size: .66rem; letter-spacing: .24em; color: var(--gold-light); }
.division__name { font-size: clamp(1.25rem, 1.5vw, 1.5rem); line-height: 1.15; margin: 0; color: var(--ink); transition: color .4s var(--ease); }
.division__text { font-size: .9rem; line-height: 1.6; color: #8d95a1; margin: 0; flex: 1; }
.division__go { display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem; font-family: var(--font-body); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); transition: color .4s var(--ease), gap .4s var(--ease-out); }
.division__go svg { width: 14px; height: 14px; transition: transform .4s var(--ease-out); }
.division:hover .division__go, .division:focus-visible .division__go { color: var(--gold-light); gap: .8rem; }
.division:hover .division__go svg { transform: translateX(2px); }
.division:hover .division__name { color: var(--gold-pale); }
.division:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
@media (max-width: 1100px) { .divisions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .division:nth-child(2n) { border-right: 0; margin-right: 0; } .division:nth-child(2n)::after { right: 0; } .division { border-bottom: 1px solid var(--line-soft); } }
@media (max-width: 700px) { .divisions { grid-template-columns: 1fr; } .division { border-right: 0; margin-right: 0; padding: 1.4rem 0 1.6rem; } .division::after { right: 0; } .division:last-child { border-bottom: 0; } }

/* value proposition (About): statement left, support + three proof lines right */
.value__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.value__title { margin-top: 1.3rem; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.1; max-width: 20ch; }
.value__lead { font-size: 1.12rem; line-height: 1.7; color: var(--ink-2); max-width: 46ch; margin: .4rem 0 0; }
.value__proof { list-style: none; margin: 1.8rem 0 0; padding: 0; max-width: 48ch; }
.value__proof li { position: relative; padding: .95rem 0 .95rem 2.3rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 1rem; line-height: 1.55; }
.value__proof li:last-child { border-bottom: 1px solid var(--line-soft); }
.value__proof li::before { content: ""; position: absolute; left: 0; top: 1.65rem; width: 1.25rem; height: 1px; background: var(--gold); }
@media (max-width: 760px) { .value__grid { grid-template-columns: 1fr; gap: 1.6rem; } .value__title { max-width: none; } }

/* =====================================================================
   About page — cinema theme (client request 2026-09-05). Scoped to
   body.page-about so no other page changes. Motifs, not props: a
   widescreen title card, film grain, a filmstrip timeline spine, an
   end-credits layout for the strengths, and film-leader countdown rings
   on the four steps.
   ===================================================================== */
/* film grain: a fixed noise layer at ~5%, softly jittered like projected film */
.page-about { position: relative; }
.page-about::after { content: ""; position: fixed; inset: -40%; width: 180%; height: 180%; pointer-events: none; z-index: 90; opacity: .045; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 260px 260px; animation: grain 1.1s steps(5) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-2%,1.5%); } 40% { transform: translate(1.5%,-2%); } 60% { transform: translate(-1%,-1%); } 80% { transform: translate(2%,1%); } 100% { transform: translate(0,0); } }

/* About page information design (client 2026-09-07: "make the design of all the information professional, elegant and
   easy to navigate"). Below the hero the four sections share one ledger: a sticky section index (.about-nav) under the
   header, then each section as a numbered left rail (number, gold eyebrow, title — sticky while its content scrolls)
   beside its content on the right (Mission & Vision entries, the four proof points, the four steps, the timeline).
   --about-nav-h is the index's height; the header is 72px once stuck, which is when the index meets it. */
.page-about { --about-nav-h: 52px; }
/* The index is a strip at the fold (client 2026-09-07: "big enough so the first page completes with no gap below"):
   the index sits BELOW Mission & Vision (client 2026-09-07); about.js sizes .about-nav-wrap to reach the bottom of the
   first screen, and the three entries sit as ruled cells with
   large numerals, like the figures strip on the distribution page. Once scrolled past, the nav becomes the slim fixed
   index (.is-stuck) under the 72px stuck header; the wrapper keeps its height so nothing jumps. */
.about-nav-wrap { position: relative; display: flex; flex-direction: column; }
.about-nav { position: relative; flex: 1; display: flex; align-items: center; background: var(--bg); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.about-nav__inner { display: grid; grid-template-columns: repeat(3, 1fr); }   /* .container sizing keeps the cells on the content margins */
.about-nav a { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: 1rem 2rem 1rem 0; border-left: 1px solid var(--line-soft); padding-left: 2rem; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #d3d9e0; white-space: nowrap; transition: color .45s var(--ease); }
.about-nav a::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(226,194,104,.7); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }   /* fine gold line draws across the top on hover */
.about-nav a:hover::before { transform: scaleX(1); }
.about-nav a .t { display: block; transition: transform .45s var(--ease-out), color .45s var(--ease); }
.about-nav a:hover .t { transform: translateY(-3px); color: var(--ink); }
.about-nav a:first-child { border-left: 0; padding-left: 0; }
.about-nav a .n { font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1; letter-spacing: -.01em; color: rgba(226,194,104,.6); transition: color .45s var(--ease); }
.about-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.about-nav a:hover { color: var(--ink-2); }
.about-nav a:hover .n { color: #e6cf8c; }
.about-nav a.is-current { color: var(--ink); }
.about-nav a.is-current .n { color: #e6cf8c; }
.about-nav a.is-current::after { transform: scaleX(1); }
/* slim, fixed index while reading */
.about-nav.is-stuck { position: fixed; top: 72px; left: 0; right: 0; z-index: 50; height: var(--about-nav-h); min-height: 0; background: rgba(7,9,13,.84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 0; }
.about-nav.is-stuck .about-nav__inner { display: flex; gap: clamp(1.6rem, 3.5vw, 3.4rem); height: var(--about-nav-h); align-items: stretch; width: min(100% - 2 * var(--gutter), var(--container)); overflow-x: auto; scrollbar-width: none; }
.about-nav.is-stuck .about-nav__inner::-webkit-scrollbar { display: none; }
.about-nav.is-stuck a { flex-direction: row; align-items: center; gap: .65rem; padding: 0; border-left: 0; font-size: .68rem; color: var(--faint); }
.about-nav.is-stuck a::before { display: none; }
.about-nav.is-stuck a:hover .t { transform: none; }
.about-nav.is-stuck a .n { font-size: .86rem; letter-spacing: .04em; color: rgba(226,194,104,.5); }
.about-nav.is-stuck a.is-current { color: var(--ink); }
.about-nav.is-stuck a.is-current .n { color: #e6cf8c; }
@media (max-width: 600px) {
  .about-nav a { padding: 1.3rem .8rem 1.3rem 0; padding-left: .8rem; gap: .5rem; font-size: .58rem; letter-spacing: .14em; white-space: normal; }
  .about-nav a .n { font-size: 1.5rem; }
  .about-nav.is-stuck a .n { display: none; }
}
.about-sec { padding: clamp(3.5rem, 7vw, 6rem) 0; scroll-margin-top: calc(72px + var(--about-nav-h)); }
.about-sec + .about-sec, .about-nav-wrap + .about-sec { border-top: 1px solid var(--line-soft); }
.page-about .about-sec.journey { padding-top: clamp(3.5rem, 7vw, 6rem); overflow: visible; }   /* .journey's overflow:hidden would make the section the sticky rail's scrollport */
.about-sec__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.about-sec__head { position: sticky; top: calc(72px + var(--about-nav-h) + 2.6rem); }
.about-sec__num { display: block; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .06em; color: rgba(226,194,104,.6); line-height: 1; margin-bottom: 1.15rem; }
.about-sec__head .eyebrow { font-size: .78rem; }
.about-sec__head h2 { margin-top: 0; font-size: clamp(1.9rem, 3.1vw, 2.7rem); line-height: 1.12; max-width: 17ch; color: var(--ink); }
/* 2026-09-07 (client): the section name is the white serif title and the descriptive line is the small gold caps beneath it */
.about-sec__head .eyebrow--after { margin-top: 1.1rem; font-size: .72rem; line-height: 1.7; max-width: 46ch; align-items: flex-start; }
.about-sec__head .eyebrow--after::before { margin-top: .55em; }
.about-sec .value__proof, .about-sec .steps { margin: .35rem 0 0; max-width: none; }
/* About hero composition (client brief 2026-09-07: keep the reel and film-strip animation exactly as is; improve
   layout, hierarchy, layering and readability). Taller hero; text in a 48% left column on a higher layer; the film
   behind it, concentrated centre-right, faded at the left by a black gradient (solid at the left edge → transparent
   toward the centre) which also darkens the strip where it passes behind the text; a soft radial vignette around
   the reel; the reel nudged down so it never meets the navigation. Mission & Vision is a separate band below. */
.hero--about { min-height: 0; padding: calc(var(--header-h) + 1.25rem) 0 4.5rem; overflow: hidden; background: var(--bg); align-items: center; }   /* full first screen (client 2026-09-08): about.js sets the min-height to the viewport minus the index strip; the text is centred between the header and the strip */
.hero--about .hero__inner { align-self: stretch; align-content: center; }
.hero--about::after { display: none; }
.hero--about .film { z-index: 0; top: var(--header-h); bottom: 0; }   /* clipped below the header: nothing of the animation sits behind the navigation */
.hero--about .film::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(38% 60% at 84% 42%, rgba(201,162,39,.08), transparent 70%); }
.hero--about::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(28% 55% at 52% 56%, rgba(7,9,13,.32), transparent 70%), linear-gradient(90deg, var(--bg) 0%, rgba(7,9,13,.94) 30%, rgba(7,9,13,.7) 50%, rgba(7,9,13,.3) 66%, transparent 78%); }
.hero--about .hero__inner { position: relative; z-index: 2; }
.page-about .site-header { background: var(--bg); }   /* solid so nothing from the hero shows behind the navigation */
.hero--about .hero__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
.hero--about .hero__text { max-width: none; grid-column: 1 / -1; }   /* the paragraph may run into the right half (client 2026-09-07) */
/* the section index lives in the hero beside the title (client 2026-09-07): a quiet ruled list, numeral + label */
.hero__index { position: relative; z-index: 2; align-self: start; justify-self: start; width: min(100%, 320px); margin-top: 4.05rem; margin-left: clamp(0px, 6vw, 5rem); background: none; border: 0; min-height: 0; display: block; }
.hero__index .about-nav__inner { display: flex; flex-direction: column; height: auto; overflow: visible; }
.hero__index a { flex-direction: row; align-items: baseline; gap: 1rem; padding: .95rem 0; border-left: 0; border-top: 1px solid var(--line-soft); white-space: nowrap; }
.hero__index a:last-child { border-bottom: 1px solid var(--line-soft); }
.hero__index a::before { top: -1px; }
.hero__index a .n { font-size: 1.15rem; color: rgba(226,194,104,.7); min-width: 1.6rem; }
.hero__index a .t { font-size: .68rem; letter-spacing: .22em; color: #b3bac4; }
.hero__index a:hover .t, .hero__index a.is-current .t { color: var(--ink); }
/* swapped 2026-09-07 (client): the three proof figures sit in the hero beside the title, the index in the band's right column */
.hero__stats { position: relative; z-index: 2; align-self: start; justify-self: start; width: min(100%, 440px); margin: 7.6rem 0 0 clamp(0px, 5vw, 4rem); }   /* top level with the title */
.hero__stats li { padding: .85rem 0 .85rem 1.4rem; }
.hero__stats strong { font-size: clamp(1.7rem, 2.1vw, 2.1rem); }
.proof .band__index { margin: 0; width: 100%; align-self: center; z-index: 1; }
.proof.reveal .band__index a { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.proof.reveal.is-visible .band__index a { opacity: 1; transform: none; }
.proof.reveal.is-visible .band__index a:nth-child(1) { transition-delay: .55s; }
.proof.reveal.is-visible .band__index a:nth-child(2) { transition-delay: .67s; }
.proof.reveal.is-visible .band__index a:nth-child(3) { transition-delay: .79s; }
@media (prefers-reduced-motion: reduce) { .proof.reveal .band__index a { opacity: 1; transform: none; transition: none; } }
.hero--about .crumbs { margin-bottom: 1.6rem; }
.hero--about.is-full .crumbs { position: absolute; left: 0; top: 1.75rem; margin: 0; }   /* pinned to the top of the hero (header + 3rem, where the Products / Distribution / Contact breadcrumbs sit) while the text block stays centred — client 2026-09-13 */
.hero--about .eyebrow { margin-bottom: 1.3rem; }
.hero--about h1 { font-size: clamp(2.5rem, 4.3vw, 4rem); line-height: .98; max-width: 16ch; margin: 0; }   /* "Built on continuity. / Evolved for scale." (client brief 2026-09-08) */
.hero--about h1 em { font-style: italic; font-weight: 500; color: #dcc48f; }
.hero--about .lead { margin-top: 1.6rem; padding-top: 0; max-width: min(740px, 100%); font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.65; color: #d3d9e0; }
/* proof row: three figures from the profile, one compact ruled row, no counters (revealed by the hero's .rise choreography) */
.hero-proof { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 960px; margin: 2.2rem 0 0; padding: 0; }
.hero-proof li { display: flex; flex-direction: column; gap: .5rem; padding: .2rem 1.4rem .2rem 0; min-width: 0; }
.hero-proof li + li { border-left: 1px solid var(--line-soft); padding-left: 1.6rem; }
.hero-proof strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.85rem, 2.2vw, 2.1rem); line-height: 1; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.hero-proof span { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: #aeb5bf; line-height: 1.5; }
/* reveal: a vertical clip with a slight stagger after the paragraph (no counters) */
.hero-proof li { clip-path: inset(0 0 100% 0); transform: translateY(6px); }
body.is-loaded .hero-proof li, body.no-preloader .hero-proof li { clip-path: inset(0 0 -4% 0); transform: none; transition: clip-path .55s var(--ease-out), transform .55s var(--ease-out); }
body.is-loaded .hero-proof li:nth-child(1), body.no-preloader .hero-proof li:nth-child(1) { transition-delay: 1.05s; }
body.is-loaded .hero-proof li:nth-child(2), body.no-preloader .hero-proof li:nth-child(2) { transition-delay: 1.17s; }
body.is-loaded .hero-proof li:nth-child(3), body.no-preloader .hero-proof li:nth-child(3) { transition-delay: 1.29s; }
body.is-loaded .hero-proof li:nth-child(4), body.no-preloader .hero-proof li:nth-child(4) { transition-delay: 1.41s; }
/* Statement-and-proof band (client brief 2026-09-07; `.vision-band#mission`): two-column editorial composition —
   the statement (PROVEN AT SCALE label, ivory serif ≈42–46px, closing phrase italic in muted champagne) on the left
   ≈60%, three stacked proof figures from the 2026 profile (90%+ cinema-market reach, 115 screens, 20+ containers a
   year) on the right ≈34%, ruled by fine charcoal lines, a small gold accent beside each number; near-black ground
   with a barely-there warm gradient; fine charcoal rules above and below. Entrance, once, on .is-visible: the gold
   line draws, the label fades, the statement is revealed by a vertical clip, the three figures rise in with a 120 ms
   stagger, then everything rests. No counters: the figures show immediately. */
.vision-band { position: relative; background: #0a0b0e; border-top: 0; border-bottom: 1px solid var(--line-soft); margin-top: var(--header-h); padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(3.3rem, 4vw, 4rem); overflow: hidden; }
.vision-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(201,162,39,.035) 0%, transparent 55%); }
.proof { position: relative; display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 34fr); column-gap: 6%; align-items: center; }
.proof__crumbs { grid-column: 1 / -1; margin-bottom: 2.2rem; }   /* breadcrumb at the top of the first section, where it sits on the other pages (client 2026-09-07) */
.proof__lead .eyebrow { font-size: .68rem; letter-spacing: .28em; color: rgba(226,194,104,.8); margin-bottom: 1.4rem; }
.vision__text { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.3rem, 3.05vw, 2.85rem); line-height: 1.2; letter-spacing: -.008em; color: var(--ink); max-width: none; text-wrap: balance; }
.vision__text em { font-style: italic; font-weight: 500; color: #e6cf8c; }
.proof__stats { list-style: none; margin: 0; padding: 0; }
.proof__stats li { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 1.2rem; align-items: baseline; padding: 1.1rem 0 1.1rem 1.5rem; border-top: 1px solid var(--line-soft); }
.proof__stats li:last-child { border-bottom: 1px solid var(--line-soft); }
.proof__stats li::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1px; background: var(--gold); }
.proof__stats strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 2.4vw, 2.4rem); line-height: 1; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; min-width: 4.2ch; }
.proof__stats span { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
/* entrance */
.proof.reveal { opacity: 1; transform: none; transition: none; }
.proof.reveal .eyebrow::before { transition: transform .32s var(--ease-out); }
.proof.reveal .eyebrow { color: transparent; transition: color .25s var(--ease) .2s; }
.proof.reveal.is-visible .eyebrow { color: rgba(226,194,104,.8); }
.proof.reveal .vision__text { clip-path: inset(0 0 100% 0); transform: translateY(8px); transition: clip-path .55s var(--ease-out) .32s, transform .55s var(--ease-out) .32s; }
.proof.reveal.is-visible .vision__text { clip-path: inset(0 0 -6% 0); transform: none; }
.proof.reveal .proof__stats li { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.proof.reveal.is-visible .proof__stats li { opacity: 1; transform: none; }
.proof.reveal.is-visible .proof__stats li:nth-child(1) { transition-delay: .55s; }
.proof.reveal.is-visible .proof__stats li:nth-child(2) { transition-delay: .67s; }
.proof.reveal.is-visible .proof__stats li:nth-child(3) { transition-delay: .79s; }
@media (max-width: 900px) {
  .proof { grid-template-columns: 1fr; row-gap: 2.2rem; }
  .vision__text { max-width: none; }
  .vision-band { padding: clamp(3.5rem, 8vw, 5rem) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .proof.reveal .eyebrow { color: rgba(226,194,104,.8); }
  .proof.reveal .vision__text, .proof.reveal .proof__stats li { clip-path: none; transform: none; opacity: 1; transition: none; }
}
@media (max-width: 900px) {
  .hero--about { min-height: 0; padding-bottom: 4rem; }
  .hero--about .hero__inner { grid-template-columns: 1fr; }
  .hero-proof { grid-template-columns: 1fr 1fr; max-width: none; }
  .hero-proof li:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero-proof li:nth-child(n+3) { border-top: 1px solid var(--line-soft); padding-top: 1rem; margin-top: .8rem; }
  .hero__index, .hero__stats { margin: 1.5rem 0 0; width: 100%; }
  .hero--about::before { background: linear-gradient(180deg, rgba(7,9,13,.85), rgba(7,9,13,.55)); }
  .hero--about .hero__text { max-width: none; }
  .hero--about h1 { max-width: none; }
}   /* Mission & Vision keeps its earlier slim two-column row (client 2026-09-07) */
.about-sec--mv .eyebrow { font-size: .8rem; }
.page-about .mv__text { font-family: var(--font-body); font-size: clamp(1.1rem, 1.32vw, 1.28rem); line-height: 1.8; color: #a9b0ba; max-width: 46ch; margin: 0; }
.about-sec .value__proof li { max-width: 60ch; }
.about-sec .steps li { max-width: 60ch; }
.about-sec .journey__timeline { min-width: 0; }
.about-sec .timeline { --spine: 104px; margin-top: .35rem; }
.about-sec .timeline__body { max-width: none; }
.about-sec .timeline__item { grid-template-columns: calc(var(--spine) - 26px) 52px minmax(0, 1fr); }   /* emblems removed 2026-09-10: the text fills the row */
.about-sec .timeline__body p { max-width: 70ch; }
@media (max-width: 900px) {
  .about-sec__grid { grid-template-columns: 1fr; row-gap: 1.6rem; }
  .about-sec__head { position: static; }
  .about-sec__head h2 { max-width: none; }
}

/* filmstrip spine: two edge rails with a column of sprocket holes; the gold fill lights them as you scroll */
.page-about .timeline::before, .page-about .timeline__progress { width: 14px; transform: translateX(-50%); border-left: 1px solid rgba(226,194,104,.16); border-right: 1px solid rgba(226,194,104,.16); background: repeating-linear-gradient(to bottom, rgba(226,194,104,.16) 0 8px, transparent 8px 20px) center top / 4px 100% no-repeat; }
.page-about .timeline__progress { border-color: var(--gold); background-image: repeating-linear-gradient(to bottom, var(--gold-light) 0 8px, transparent 8px 20px); clip-path: inset(0 0 100% 0); transition: clip-path .25s linear; box-shadow: 0 0 18px rgba(226,194,104,.12); }
.page-about .timeline::after { width: calc(var(--spine) - 8px); }
.page-about .timeline__node { box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px rgba(226,194,104,.22); }
.page-about .timeline__item.is-active .timeline__node { box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px rgba(226,194,104,.5); }

@media (max-width: 760px) {
  .page-about .timeline::before, .page-about .timeline__progress { width: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-about::after { animation: none; }
}


@media (max-width: 600px) {
  /* mobile: content first, the reel visual after it (the film no longer sits behind the text); heading 48–56px; index stacked */
  .hero--about { display: flex; flex-direction: column; padding-bottom: 0; }
  .hero--about::before { display: none; }
  .hero--about .film { position: relative; inset: auto; top: auto; height: 240px; margin-top: 1.5rem; order: 2; }
  .hero--about .hero__inner { order: 1; }
  .hero--about h1 { font-size: clamp(3rem, 12vw, 3.5rem); }
  .about-nav__inner { grid-template-columns: 1fr; }
  .about-nav a { flex-direction: row; align-items: baseline; gap: 1rem; border-left: 0; border-top: 1px solid var(--line-soft); padding: .9rem 0; white-space: nowrap; font-size: .66rem; letter-spacing: .18em; }
  .about-nav a:first-child { border-top: 0; padding-left: 0; }
  .about-nav a .n { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .hero-proof li { clip-path: none; transform: none; transition: none; } }

/* =====================================================================
   About page — "The Line of Supply" (client brief 2026-09-08)
   Applies to the Why I&H Services and How We Work sections only (the
   client kept these two and restored the index strip, Our Journey and
   the CTA the same day). One continuous champagne-gold hairline (an SVG
   overlay drawn by about.js from the live layout) enters from the page's
   left edge along the Why ledger, runs the mid-gutter trunks and the
   section dividers, crosses the How-we-work process with the marker and
   leaves along the 02/03 divider. Both sections share one 12-column grid.
   ===================================================================== */
.ls-body { position: relative; }
.ls-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; fill: none; }
.ls-line__track { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.ls-line__gold { stroke: rgba(226,194,104,.62); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ls-line__gold.is-static { stroke-dashoffset: 0; }

/* shared section anatomy */
.ls-sec + .about-sec { border-top: 1px solid var(--line-soft); }
.ls-sec { position: relative; padding: clamp(5.5rem, 8.6vw, 8.75rem) 0; border-top: 1px solid var(--line-soft); scroll-margin-top: calc(72px + var(--about-nav-h)); }
.ls-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
.ls-sec__title { display: flex; align-items: baseline; gap: 1.1rem; }
.ls-sec__title h2 { margin: 0; font-size: clamp(2rem, 3.1vw, 2.75rem); line-height: 1.08; color: var(--ink); }
.ls-sec__num { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .1em; color: rgba(226,194,104,.72); }
.ls-sec__tag { margin-top: 1.15rem; font-size: .7rem; line-height: 1.7; max-width: 44ch; }

/* 01 — editorial introduction + proof ledger */
.ls-why { background: var(--bg); }
.ls-sec__top { align-items: start; }
.ls-sec__head { grid-column: 1 / span 5; }
.ls-sec__statement { grid-column: 6 / -1; margin: .3rem 0 0; font-family: var(--font-display); font-size: clamp(2rem, 2.5vw, 2.6rem); line-height: 1.22; letter-spacing: -.005em; color: var(--ink-2); text-wrap: balance; }
.ls-sec__statement.reveal { opacity: 1; transform: none; transition: none; }
.ls-sec__statement em { font-style: italic; color: #dcc48f; }   /* closing phrase in the hero's gold italic */
.ls-sec__statement > span { display: block; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-out) .15s; }
.ls-sec__statement.is-visible > span { clip-path: inset(-2% 0 -6% 0); }
.ls-ledger { list-style: none; margin: clamp(3.4rem, 5.6vw, 5.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); }
.ls-ledger li { position: relative; padding: 2.1rem clamp(1.5rem, 3vw, 3.2rem) .6rem 0; }
.ls-ledger li + li { border-left: 1px solid var(--line-soft); padding-left: clamp(1.5rem, 3vw, 3.2rem); }
.ls-ledger .n { display: block; font-family: var(--font-display); font-size: .92rem; letter-spacing: .1em; color: rgba(226,194,104,.6); }
.ls-ledger .rule { display: block; width: 28px; height: 1px; margin: .9rem 0 1.15rem; background: rgba(226,194,104,.55); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out) .3s; }
.ls-ledger.is-visible .rule { transform: scaleX(1); }
.ls-ledger p { margin: 0; max-width: 34ch; font-size: .98rem; line-height: 1.72; color: #c4cad3; }

/* 02 — the supply process. Same anatomy as 01 (title + tagline left, serif statement right, ruled columns below).
   Client 2026-09-18: "remove the truck animation and keep How We Work as professional as possible when the user
   opens it" — so every step is fully legible the moment the row appears (a short staggered rise, no text held back),
   the three rows of the four columns line up through subgrid whatever the headings wrap to, and the only motion left
   is the gold marker drawing the line once along the top rule, warming each numeral as it passes. */
.ls-process { background: #090c11; }
.ls-steps-wrap { position: relative; margin: clamp(3.4rem, 5.6vw, 5.5rem) 0 0; }   /* the Why ledger's gap */
.ls-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto; border-top: 1px solid var(--line-soft); }
.ls-steps li { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; padding: 2.4rem clamp(1.4rem, 2.6vw, 2.6rem) .6rem 0; }
.ls-steps li + li { border-left: 1px solid var(--line-soft); padding-left: clamp(1.4rem, 2.6vw, 2.6rem); }
.ls-step__num { display: block; font-family: var(--font-display); font-size: clamp(2.4rem, 3.2vw, 3.2rem); line-height: 1; color: rgba(226,194,104,.46); transition: color .9s var(--ease); }
.ls-steps h3 { margin: 1.3rem 0 .75rem; font-size: clamp(1.25rem, 1.5vw, 1.5rem); line-height: 1.2; color: var(--ink); text-wrap: balance; }
.ls-steps p { margin: 0; max-width: 30ch; font-size: .94rem; line-height: 1.7; color: #b3bbc5; }
.ls-steps li.is-reached .ls-step__num { color: rgba(226,194,104,.9); }
.ls-marker { position: absolute; left: 0; top: -1px; z-index: 1; width: 14px; height: 3px; background: var(--gold-light); opacity: 0; transform: translateX(-14px); transition: opacity .5s var(--ease); will-change: transform; }
@supports not (grid-template-rows: subgrid) {   /* older browsers: a two-line heading slot keeps the descriptions level */
  .ls-steps li { display: block; }
  .ls-steps h3 { min-height: 2.4em; }
}
/* How We Work heading visual: the parked truck (about-truck.js draws it on the canvas; client 2026-09-18 — "a shipping
   truck, professional, not moving, interactive the same way the rest of the animations on the site are"). It takes the
   right-hand columns the Why statement takes in 01. The canvas is taller than its row and overhangs it above and below by
   fixed fractions of its height (its edges are empty and fade out), so the row is as tall as 01's statement and the two
   sections share one rhythm: same padding, title on the same line, steps where the ledger starts. */
.truck { --th: clamp(210px, 19vw, 290px); grid-column: 6 / -1; position: relative; height: var(--th); margin: calc(var(--th) * -.263) 0 calc(var(--th) * -.255);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 93%, transparent), linear-gradient(to bottom, #000 91%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 93%, transparent), linear-gradient(to bottom, #000 91%, transparent); mask-composite: intersect; }
.truck__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {   /* stacked: the truck sits under the tagline, centred, without the side fades */
  .truck { grid-column: 1 / -1; height: 190px; margin: 1.6rem 0 -.6rem; -webkit-mask-image: linear-gradient(to bottom, #000 91%, transparent); mask-image: linear-gradient(to bottom, #000 91%, transparent); }
}

@media (max-width: 900px) {
  .ls-sec__head, .ls-sec__statement { grid-column: 1 / -1; }
  .ls-sec__statement { margin-top: 2.2rem; font-size: clamp(1.7rem, 4.6vw, 2.2rem); }
  .ls-ledger { grid-template-columns: 1fr; border-top: 0; }
  .ls-ledger li, .ls-ledger li + li { border-left: 0; border-top: 1px solid var(--line-soft); padding: 1.6rem 0 1.4rem; }
  .ls-steps { grid-template-columns: 1fr; grid-template-rows: none; border-top: 0; }
  .ls-steps li, .ls-steps li + li { display: block; grid-row: auto; border-left: 0; border-top: 1px solid var(--line-soft); padding: 1.6rem 0 1.5rem; }
  .ls-steps h3 { margin-top: .9rem; min-height: 0; }
  .ls-steps p { max-width: 46ch; }
  .ls-marker { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-line__gold { stroke-dashoffset: 0 !important; }
  .ls-sec__statement > span { clip-path: none; transition: none; }
  .ls-ledger .rule { transform: none; transition: none; }
  .ls-steps li .ls-step__num { color: rgba(226,194,104,.9); transition: none; }
  .ls-marker { display: none; }
}


/* Contact first screen (client 2026-09-08, "make the part below Speak with our team extend to the full page"):
   the hero and the six contact tiles together fill the viewport; the tiles stretch to the fold */
@media (min-width: 601px) and (min-height: 640px) {
  .contact-first { display: flex; flex-direction: column; min-height: 100svh; }
  .contact-first__details { flex: 1; display: flex; padding-top: clamp(2rem, 3.5vw, 3rem); padding-bottom: clamp(2rem, 3.5vw, 3rem); }
  .contact-first__details > .container { display: flex; flex-direction: column; }
  .contact-first__details .contact-list { flex: 1; grid-auto-rows: 1fr; }
  .contact-first__details .contact-item { align-items: center; }
}

/* Contact hero: the calling card (contact-card.js draws it; client 2026-09-11). Present from the first frame. */
.cc { position: relative; height: clamp(200px, 19vw, 270px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 100%); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 100%); }
.cc__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 900px) { .cc { height: 200px; width: min(100%, 520px); justify-self: center; margin-inline: auto; -webkit-mask-image: none; mask-image: none; } }

/* Products hero: the container (products-container.js draws it; client 2026-09-11). Present from the first frame. */
.supply--container { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 100%); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 100%); }
.supply__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }


/* ---------- Distribution: the Cinema Nachos cart, our first kiosk (client 2026-09-19) ----------
   Copy on the left, a large framed photo viewer on the right. Three real phone photos (left / front / right, cropped to one
   4:5 frame by _build/build_kiosk.py so the cart sits at the same size and height in each) crossfade when a thumbnail is
   chosen; kiosk.js also handles swipe, arrow keys and a few pixels of cursor drift. The bright mall interior is settled onto
   the near-black page by an inner vignette; drafting-style gold ticks mark the frame's corners, as on the container and truck. */
.kiosk { scroll-margin-top: 40px;   /* linked from the home page: the 72px header covers only empty padding, the photo sits centred below it */
  background: radial-gradient(60% 70% at 78% 52%, rgba(201,162,39,.055), transparent 70%), #06080c; overflow: hidden; }
.kiosk__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); align-items: center; }
.kiosk__copy { grid-column: 1 / span 5; }
.kiosk__copy h2 { font-size: clamp(2.1rem, 3.4vw, 3.1rem); line-height: 1.04; }
.kiosk__lead { margin-top: 1.5rem; color: var(--muted); font-size: clamp(1rem, 1.2vw, 1.12rem); max-width: 46ch; text-wrap: pretty; }
.kiosk__facts { margin: clamp(1.8rem, 2.6vw, 2.4rem) 0 clamp(2rem, 2.8vw, 2.6rem); border-top: 1px solid var(--line-soft); max-width: 30rem; }
.kiosk__facts > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.kiosk__facts dt { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); font-weight: 500; }
.kiosk__facts dd { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.5; }

.kiosk__viewer { --rail: clamp(64px, 5.6vw, 84px); --gap: clamp(.8rem, 1.3vw, 1.15rem); --stage-h: min(640px, 76svh);
  grid-column: 7 / -1; justify-self: end; width: min(100%, calc(var(--stage-h) * .8 + var(--rail) + var(--gap)));
  display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); column-gap: var(--gap); row-gap: 1rem; align-items: end; }
.kiosk__stage { position: relative; aspect-ratio: 4 / 5; touch-action: pan-y; }
.kiosk__clip { position: absolute; inset: 0; overflow: hidden; background: var(--panel); border: 1px solid rgba(214,188,130,.22); --kx: 0px; --ky: 0px; }
.kiosk__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 1; transform: translate3d(var(--kx), var(--ky), 0) scale(1.06); transition: opacity .75s var(--ease); -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.kiosk__img.is-active { opacity: 1; }
.kiosk__img.is-top { z-index: 2; }
.kiosk__img.is-instant { transition: none; }
.kiosk__shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 90px 14px rgba(4,5,8,.42); background: linear-gradient(to bottom, rgba(4,5,8,.28), transparent 22%, transparent 74%, rgba(4,5,8,.42)); }
.kiosk__tick { position: absolute; width: 16px; height: 16px; border: 0 solid rgba(226,194,104,.62); pointer-events: none; }
.kiosk__tick--tl { top: -8px; left: -8px; border-top-width: 1px; border-left-width: 1px; }
.kiosk__tick--tr { top: -8px; right: -8px; border-top-width: 1px; border-right-width: 1px; }
.kiosk__tick--bl { bottom: -8px; left: -8px; border-bottom-width: 1px; border-left-width: 1px; }
.kiosk__tick--br { bottom: -8px; right: -8px; border-bottom-width: 1px; border-right-width: 1px; }

.kiosk__rail { display: grid; gap: clamp(.7rem, 1.1vw, 1rem); align-self: center; }   /* centred beside the photo: clear of the floating WhatsApp button on short screens */
.kiosk__thumb { display: block; width: 100%; padding: 0; text-align: left; color: var(--muted); transition: color .35s var(--ease); }
.kiosk__thumb-img { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line-soft); transition: border-color .35s var(--ease); }
.kiosk__thumb-img img { width: 100%; height: 100%; object-fit: cover; opacity: .5; filter: saturate(.7); transition: opacity .45s var(--ease), filter .45s var(--ease), transform .7s var(--ease-out); }
.kiosk__thumb-label { display: block; margin-top: .5rem; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; }
.kiosk__thumb:hover, .kiosk__thumb:focus-visible { color: var(--ink); }
.kiosk__thumb:hover .kiosk__thumb-img img, .kiosk__thumb:focus-visible .kiosk__thumb-img img { opacity: .85; filter: none; transform: scale(1.04); }
.kiosk__thumb.is-active { color: var(--gold-light); }
.kiosk__thumb.is-active .kiosk__thumb-img { border-color: rgba(226,194,104,.75); }
.kiosk__thumb.is-active .kiosk__thumb-img img { opacity: 1; filter: none; }
.kiosk__caption { grid-column: 1; margin: 0; display: flex; justify-content: space-between; gap: 1rem; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.kiosk__caption span:first-child { color: var(--gold-light); }

/* Catering & Events (client 2026-09-19), directly under the cart and its mirror image: the event cart's photo on the left in the same
   ticked frame, the copy and the same ruled fact list on the right, on the same deep ground so the two read as one story
   (the cart in the mall, the cart at your event). kiosk.js gives the photo the viewer's cursor drift. */
#enquiry { scroll-margin-top: 3.5rem; }   /* links that open the form (catering, the CTA bands) land with its heading clear of the fixed header */
.catering { scroll-margin-top: 40px; background: radial-gradient(60% 70% at 22% 52%, rgba(201,162,39,.05), transparent 70%), #06080c; overflow: hidden; }
.catering__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); align-items: center; }
.catering__figure { --stage-h: min(600px, 72svh); grid-column: 1 / span 5; margin: 0; width: min(100%, calc(var(--stage-h) * .8)); display: grid; row-gap: 1rem; }
.catering__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translate3d(var(--kx), var(--ky), 0) scale(1.06); -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.catering__copy { grid-column: 7 / -1; }
.catering__copy h2 { font-size: clamp(2.1rem, 3.4vw, 3.1rem); line-height: 1.04; }
.catering__copy .kiosk__facts { max-width: 34rem; }

@media (max-width: 900px) {
  .catering__figure, .catering__copy { grid-column: 1 / -1; }
  .catering__figure { --stage-h: 640px; order: 2; justify-self: center; width: min(100%, 520px); margin-top: clamp(2.4rem, 7vw, 3.4rem); }
  .catering__copy .kiosk__facts { max-width: none; }
  .kiosk__copy, .kiosk__viewer { grid-column: 1 / -1; }
  .kiosk__facts { max-width: none; }
  .kiosk__viewer { --stage-h: 640px; justify-self: center; width: min(100%, 520px); margin-top: clamp(2.4rem, 7vw, 3.4rem); grid-template-columns: minmax(0, 1fr); }
  .kiosk__rail { grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; max-width: 330px; width: 100%; justify-self: center; align-self: start; }
  .kiosk__thumb { min-height: 44px; }
  .kiosk__thumb-label { text-align: center; }
  .kiosk__caption { grid-row: 2; }
}
@media (max-width: 600px) {
  .kiosk__facts > div { grid-template-columns: 1fr; gap: .25rem; }
  .kiosk__caption { flex-direction: column; gap: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .catering__img { transform: scale(1.06); }
  .kiosk__img { transition: none; transform: scale(1.06); }
  .kiosk__thumb-img img { transition: none; }
}


/* =====================================================================
   PREMIUM PASS — 2026-09-19
   Client: "make the site more professional … design, comfort in navigating, animation
   interactiveness … more themed to our business … it should feel like a 10,000 dollar website",
   then "make those changes". Everything added that day lives in this block (plus the builder,
   main.js and --faint above), so any one piece can be taken out again on its own:
     1  About timeline on phones (a real bug)      6  Distribution "on this page" index
     2  smallest labels raised to a readable floor  7  the light follows the pointer ([data-spot])
     3  (reading-progress line: removed 2026-09-20)  8  catalogue: Enquire link, filter re-entry, phone cards
     4  next-page row + back to top                 9  division doors with their products (home)
     5  soft page-to-page fade                      10 closing band cut like a ticket; sprocket rule on the footer
   ===================================================================== */

/* 1 — the .about-sec overrides above name .about-sec and sit outside any media query, so they out-ranked the phone
   layout and squeezed each milestone's text into the 78px year column. Restate the phone layout at the same rank. */
@media (max-width: 960px) {
  .about-sec .timeline { --spine: 10px; }
  .about-sec .timeline__item { grid-template-columns: minmax(0, 1fr); }
}

/* 2 — nothing on the site is set smaller than 10.5px any more (the logo's tagline and the "Exclusive" corner mark were 8.96px) */
.logo__sub { font-size: .64rem; }
.partner__tag { font-size: .62rem; }
.kiosk__thumb-label, .kiosk__caption, .brand-more__label { font-size: .66rem; }
.hero-proof li span, .hero-proof li > span { font-size: .66rem; }

/* 3 — (the reading-progress hairline in the header was removed on 2026-09-20 at the client's request; the header is as it was) */

/* 4 — every page but Contact ends by offering the next one. Redesigned 2026-09-20 (client: "make the design better for the
   next pages on the bottom of each page … use ux pro design max"), then refined the same day after a UI/UX Pro Max review:
   ONE gesture, read left to right — "Next" eyebrow with the page's place in the order at the far right, the title in the
   serif one step above an h2 and below the page h1 (so it never out-shouts the closing band's call to action), a hairline
   that runs from the title to the arrow and fills with gold on hover, one line on what the page holds. Only the title's
   colour, the line and the arrowhead move (the skill: "animate 1-2 key elements per view"); hover is gated to fine
   pointers, touch gets :active, the focus ring is the site's 2px gold. The big outlined numeral of the first version was
   dropped: it repeated "02 / 05", collided with About's 01-03 index and was clipped on phones. Still no button shapes. */
.next-page { border-top: 1px solid var(--line-soft); background: radial-gradient(44% 130% at 100% 50%, rgba(201,162,39,.05), transparent 72%), var(--bg); }
.next-page__link { display: block; color: var(--ink); overflow: hidden; -webkit-tap-highlight-color: transparent; }
.next-page__inner { display: grid; grid-template-columns: fit-content(72%) minmax(0, 1fr); grid-template-areas: "meta meta" "name go" "desc desc"; align-items: center; column-gap: clamp(1.75rem, 3.2vw, 3.25rem); padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.next-page__meta { grid-area: meta; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(1rem, 1.5vw, 1.35rem); font-size: .7rem; font-weight: 500; letter-spacing: .26em; line-height: 1.6; text-transform: uppercase; }
.next-page__label { display: inline-flex; align-items: center; gap: 1rem; color: var(--gold-light); }
.next-page__label::before { content: ""; flex: none; width: 44px; height: 1px; background: var(--gold); }
.next-page__count { margin-right: -.22em; color: var(--muted); letter-spacing: .22em; font-variant-numeric: lining-nums tabular-nums; }
.next-page__count i { font-style: normal; margin-inline: .2em; color: var(--gold); }
.next-page__name { grid-area: name; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.1rem, 4vw, 3.6rem); line-height: 1.04; letter-spacing: -.008em; color: var(--ink-2); text-wrap: balance; transition: color .45s var(--ease); }
.next-page__desc { grid-area: desc; margin-top: clamp(.85rem, 1.3vw, 1.2rem); max-width: 62ch; font-size: clamp(.95rem, 1.05vw, 1.02rem); line-height: 1.65; color: var(--muted); text-wrap: balance; }
.next-page__go { grid-area: go; display: flex; align-items: center; min-width: 0; margin-right: -5px; color: var(--gold-light); font-size: clamp(2.1rem, 4vw, 3.6rem); transform: translateY(.09em); }
.next-page__line { position: relative; display: block; flex: 1 1 auto; min-width: 2.5rem; height: 1px; margin-right: -13px; background: var(--line-soft); }
.next-page__line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(226,194,104,0), var(--gold-light)); transform: scaleX(var(--tail, .17)); transform-origin: 100% 50%; transition: transform .9s var(--ease-out); }
.next-page__go svg { flex: none; width: 26px; height: 26px; stroke-width: 1.1; transition: transform .9s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .next-page__link:hover .next-page__name { color: var(--gold-pale); }
  .next-page__link:hover .next-page__line::after { transform: scaleX(1); }
  .next-page__link:hover .next-page__go svg { transform: translateX(6px); }
}
.next-page__link:focus-visible .next-page__name, .next-page__link:active .next-page__name { color: var(--gold-pale); }
.next-page__link:focus-visible .next-page__line::after, .next-page__link:active .next-page__line::after { transform: scaleX(1); }
.next-page__link:focus-visible .next-page__go svg, .next-page__link:active .next-page__go svg { transform: translateX(6px); }
.next-page__link:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -10px; }
.next-page .spot { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(226,194,104,.075), rgba(226,194,104,.022) 45%, transparent 72%); }
@media (max-width: 760px) {
  .next-page__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "name" "desc" "go"; }
  .next-page__go { margin-top: 1.7rem; transform: none; }
  .next-page__line { --tail: .36; }
}
@media (prefers-reduced-motion: reduce) { .next-page__name, .next-page__line::after, .next-page__go svg { transition: none; } }

.footer-bottom { align-items: center; }
.to-top { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; margin-left: auto; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); transition: color .35s var(--ease); }
.to-top svg { width: 14px; height: 14px; transition: transform .45s var(--ease-out); }
.to-top:hover, .to-top:focus-visible { color: var(--gold-light); }
.to-top:hover svg { transform: translateY(-3px); }
@media (max-width: 760px) { .to-top { margin-left: 0; } }
/* the floating WhatsApp button steps aside at the foot of the page, where it was covering the trademark line */
.wa-float { transition: transform .45s var(--ease), border-color .3s var(--ease), color .3s var(--ease), opacity .35s var(--ease), visibility 0s; }
.wa-float.is-tucked { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; transition: transform .45s var(--ease), opacity .35s var(--ease), visibility 0s .45s; }

/* 5 — leaving a page: the content dims out under the steady header, and the next page's content fades in (main.js adds
   .is-leaving on an internal link; opacity only — a transform on <main> would unpin the home globe's fixed box) */
@media (prefers-reduced-motion: no-preference) {
  main, .next-page, .site-footer { transition: opacity .24s var(--ease); }
  body.is-leaving main, body.is-leaving .next-page, body.is-leaving .site-footer, body.is-leaving .page-index, body.is-leaving .about-nav.is-stuck { opacity: 0; }
  body.no-preloader main { animation: page-in .55s var(--ease) both; }
}
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* 6 — Distribution: the longest page gets About's slim index, shown once the hero has scrolled away */
.page-index { position: fixed; top: 72px; left: 0; right: 0; z-index: 50; height: 52px; background: rgba(7,9,13,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft);
  transform: translateY(-105%); opacity: 0; visibility: hidden; transition: transform .55s var(--ease-out), opacity .4s var(--ease), visibility 0s .55s; }
.page-index.is-on { transform: none; opacity: 1; visibility: visible; transition: transform .55s var(--ease-out), opacity .4s var(--ease), visibility 0s; }
.page-index__inner { display: flex; align-items: stretch; gap: clamp(1.5rem, 3.4vw, 3.4rem); height: 100%; overflow-x: auto; scrollbar-width: none; }
.page-index__inner::-webkit-scrollbar { display: none; }
.page-index a { position: relative; display: inline-flex; align-items: center; gap: .65rem; flex: none; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); white-space: nowrap; transition: color .45s var(--ease); }
.page-index a .n { font-family: var(--font-display); font-size: .86rem; letter-spacing: .04em; color: rgba(226,194,104,.5); transition: color .45s var(--ease); }
.page-index a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.page-index a:hover, .page-index a:focus-visible { color: var(--ink-2); }
.page-index a.is-current { color: var(--ink); }
.page-index a.is-current .n, .page-index a:hover .n { color: #e6cf8c; }
.page-index a.is-current::after { transform: scaleX(1); }
.page-index a:focus-visible { outline: 1px solid var(--gold); outline-offset: -8px; }
#brands, #channels, #customers { scroll-margin-top: 66px; }
/* with the index under the header (72 + 52px) the cart and catering photos land a little lower and a little shorter, so
   the whole photo and its caption still fit a 720px-tall screen */
.kiosk, .catering { scroll-margin-top: 54px; }
@media (min-width: 901px) { .kiosk__viewer { --stage-h: min(640px, 71svh); } .catering__figure { --stage-h: min(600px, 69svh); } }
@media (max-width: 600px) { .page-index a .n { display: none; } .page-index__inner { gap: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .page-index { transition: none; } }

/* 7 — the light follows the pointer: main.js puts a .spot layer in every [data-spot] panel and feeds it the pointer's
   position; isolation keeps it above the panel's own ground and below everything the panel contains */
[data-spot] { position: relative; isolation: isolate; }
.spot { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .55s var(--ease);
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(226,194,104,.105), rgba(226,194,104,.03) 45%, transparent 72%); }
@media (hover: hover) and (pointer: fine) { [data-spot]:hover > .spot { opacity: 1; } }

/* 8 — catalogue */
.product__enquire { align-self: flex-start; display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; margin: .9rem 0 -.7rem; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--muted); transition: color .4s var(--ease), gap .45s var(--ease-out); }
.product__enquire svg { width: 14px; height: 14px; transition: transform .45s var(--ease-out); }
.product:hover .product__enquire, .product__enquire:hover, .product__enquire:focus-visible { color: var(--gold-light); gap: .85rem; }
.product__enquire:hover svg { transform: translateX(2px); }
.product__enquire:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .product.is-entering { animation: product-in .6s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 45ms); }
}
@keyframes product-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* phones: one product per row, picture beside the words, instead of two cramped columns */
@media (max-width: 600px) {
  .product-grid { grid-template-columns: 1fr; gap: .9rem; }
  .product { flex-direction: row; align-items: stretch; }
  .product__media { flex: 0 0 38%; aspect-ratio: auto; min-height: 150px; padding: .9rem .35rem; }
  .product__media img.product__logo--mark { width: 54%; }
  .product__body { border-top: 0; border-left: 1px solid var(--line-soft); padding: 1.1rem 1.1rem 1.2rem; min-width: 0; }
  .product__name { font-size: 1.28rem; }
  .product__desc { font-size: .9rem; margin-bottom: .9rem; }
  .product__enquire { margin-bottom: -.5rem; }
}

/* 9 — division doors (home): what is behind each door stands in it, on one floor line */
.division__media { position: relative; display: flex; align-items: flex-end; justify-content: flex-start; height: clamp(124px, 10.5vw, 164px); margin: -.4rem 0 1.5rem; padding: 0 0 15px 4%; }
.division__media::before { content: ""; position: absolute; left: -4%; right: 8%; bottom: 0; height: 70%; background: radial-gradient(58% 100% at 42% 100%, rgba(201,162,39,.12), transparent 72%); pointer-events: none; }
.division__floor { position: absolute; left: 0; right: 10%; bottom: 14px; height: 1px; background: linear-gradient(90deg, rgba(226,194,104,.38), rgba(226,194,104,.12) 60%, transparent); }
.division__item { position: relative; z-index: 1; flex: none; height: var(--h); width: auto; max-width: none; filter: drop-shadow(0 12px 12px rgba(0,0,0,.6)) brightness(.86) saturate(.92); transition: transform .8s var(--ease-out), filter .7s var(--ease); transform-origin: 50% 100%; }
.division__item.is-side { z-index: 0; filter: drop-shadow(0 10px 10px rgba(0,0,0,.6)) brightness(.7) saturate(.85); }
.division__item.is-side:first-of-type { margin-right: -5%; }
.division__item.is-side:last-of-type { margin-left: -5%; }
.division__item.is-flat { margin-bottom: 2px; }
.division__item.is-mark { align-self: center; margin-bottom: 0; filter: brightness(.92) saturate(.9); }
.division:hover .division__item, .division:focus-visible .division__item { transform: translateY(-5px) scale(1.035); filter: drop-shadow(0 18px 16px rgba(0,0,0,.6)) brightness(1) saturate(1); }
.division:hover .division__item.is-mark, .division:focus-visible .division__item.is-mark { transform: scale(1.04); filter: none; }
.division:hover .division__item.is-side, .division:focus-visible .division__item.is-side { filter: drop-shadow(0 14px 14px rgba(0,0,0,.6)) brightness(.88) saturate(.95); }
@media (max-width: 700px) { .division__media { height: 118px; margin-bottom: 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .division__item { transition: none; } .division:hover .division__item { transform: none; } }

/* 10 — (the ticket-cut closing band and its stub were removed on 2026-09-20 at the client's request; the band is the plain .cta-band again) */
/* tablets: the footer's four groups sit two by two instead of one long column beside empty space */
@media (min-width: 641px) and (max-width: 960px) { .footer-grid { grid-template-columns: 1.15fr 1fr; gap: 2.8rem 2.4rem; } }
/* a film's sprocket holes run once along the head of the footer */
.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 7px; opacity: .55; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(226,194,104,.2) 0 10px, transparent 10px 26px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

/* 404 — a wrong address still lands somewhere designed */
.lost { min-height: 100svh; display: grid; align-items: center; padding: calc(var(--header-h) + 3rem) 0 5rem; text-align: center;
  background: radial-gradient(50% 45% at 50% 38%, rgba(201,162,39,.08), transparent 70%), var(--bg); }
.lost__inner { display: grid; justify-items: center; }
.lost__frame { position: relative; display: grid; place-items: center; width: min(360px, 78vw); aspect-ratio: 2.39 / 1; margin-bottom: 2.6rem; border: 1px solid var(--line-soft); }
.lost__num { font-family: var(--font-display); font-size: clamp(4.2rem, 11vw, 6.6rem); line-height: 1; letter-spacing: .04em; color: transparent; -webkit-text-stroke: 1px rgba(226,194,104,.75); }
.lost h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin: 1rem 0 1.2rem; max-width: 18ch; }
.lost .lead { color: var(--muted); max-width: 46ch; margin-bottom: 2.4rem; }
.lost .btn-row { justify-content: center; }

/* =====================================================================
   CHECKERS' FIXES — 2026-09-20 (four independent checkers went over the JBL / OSRAM / FEEM work; each rule names what it cures)
   ===================================================================== */
/* brand row: the "Exclusive" corner tag sat on the cream logo plate (7px on phones, where labels wrap and the centred
   content rises). The tile now reserves a band for the tag and hangs its content from the top, so every plate in a row
   starts on one line whether or not its label wraps. */
.brand-row .partner--logo { justify-content: flex-start; padding-top: 2.6rem; padding-bottom: 1.5rem; }
.brand-row .partner__tag { top: .65rem; right: 1.2rem; }
/* at 3-up (<=1420px) the tiles are wide and the wordmarks grew to 2.3x their 6-up size beside the small square marks */
.brand-row .partner__logo-box { max-width: 250px; margin-inline: auto; }
.brand-row .partner__logo { max-width: 160px; }
/* the two logo cards side by side are balanced in optical weight */
.product__media img.product__logo--mark { width: 40%; filter: none; }   /* the orange JBL logo since 2026-09-20 (the white JBL Professional badge it replaced needed 33% and a dimmer) */
.product__media img.product__logo[src*="osram"] { width: 78%; }
@media (max-width: 600px) { .product__media img.product__logo--mark { width: 52%; } }
/* tall pack shots (the three chips packs are 760px high) were not contained: the auto grid row grew to the image's
   natural height, so height:100% resolved against that and overflow:hidden sliced 44-124px off each pack */
.product__media { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.product__media img { min-height: 0; }
/* the division doors' deep links (products.html?category=...#catalogue) landed with the filter row under the header */
#catalogue { scroll-margin-top: var(--header-h); }
#exclusive .lead { text-wrap: pretty; }
/* home door 04: a mark stands on the floor line like the products in the other doors instead of hovering above it */
.division__item.is-mark { align-self: flex-end; margin-bottom: 0; filter: drop-shadow(0 10px 10px rgba(0,0,0,.6)) brightness(.9); }
.division:hover .division__item.is-mark, .division:focus-visible .division__item.is-mark { transform: translateY(-5px) scale(1.035); filter: drop-shadow(0 16px 14px rgba(0,0,0,.6)) brightness(1); }
/* Contact people tiles: Azhar's tile has a fourth line (his number), so its block centred 15px higher than the other
   two. All three blocks take the tallest one's height and therefore centre identically. */
.contact-item--person > div { min-height: 6.75rem; }
/* short laptops (1280x720): the first screen overshot the fold by 32px and sliced the new phone line */
@media (min-width: 1101px) and (max-height: 780px) {
  .contact-first__details { padding-top: 1.6rem; padding-bottom: 1.6rem; }
  .contact-first__details .contact-item { padding-block: 1rem; }
}
/* touch: a mailto and a tel link sat 2-6px apart at 20-25px tall; each is now a 44px target without changing the look */
@media (pointer: coarse) {
  .contact-item--person a, .office__people a { display: block; padding: .62rem 0; margin: -.3rem 0; }
  .contact-item--person a.contact-item__phone { margin-top: -.3rem; }
}

/* Own brand (home): the maker's facts as the site's ruled fact list (client 2026-09-21: "do your research on Oman Foodstuff
   Factory LLC … it should look professional"). It replaces the old formats paragraph, so the column grows by two short rows. */
.brand-copy .brand-facts { margin: 1.6rem 0 1.7rem; max-width: 34rem; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.brand-copy .brand-facts > div { grid-template-columns: 7.2rem minmax(0, 1fr); padding: .8rem 0; }
.brand-copy .brand-facts dd { font-size: .96rem; color: var(--ink-2); }
.brand-copy.is-visible .brand-facts { opacity: 1; transform: none; transition-delay: .9s; }
@media (prefers-reduced-motion: reduce) { .brand-copy .brand-facts { opacity: 1; transform: none; transition: none; } }
@media (max-width: 600px) { .brand-copy .brand-facts > div { grid-template-columns: 1fr; gap: .25rem; } }

/* Customers wall: two tiles carry a corner tag now ("Nationwide" on Al-Fatah and Imtiaz), so every logo tile hangs its plate
   from the same line under a band reserved for the tag, as the brand row does; the text-only tile stays centred. */
.logo-wall .partner--logo { justify-content: flex-start; padding-top: 2.5rem; padding-bottom: 1.4rem; }
.logo-wall .partner__tag { top: .6rem; right: .7rem; }

/* Phone menu (client 2026-09-22: "on my phone … I can't see the whole thing to navigate"). The overlay was a fixed
   box with its links centred and no scrolling, so on a short screen (landscape, or a phone whose browser bars shrink
   the view) the last links and the button sat below the edge with no way to reach them. Now: the overlay is the
   real visible height (dvh), it scrolls when the list is taller than the screen, the list is centred only while it
   fits (auto margins on the ends collapse once it overflows), the bottom clears the phone's home bar, the links are
   a little smaller on short screens, and the ground is opaque so the page never shows through the words. */
@media (max-width: 960px) {
  .nav { height: 100vh; height: 100dvh; inset: auto 0 auto 0; top: 0; justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: calc(var(--header-h) + 1rem) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px)); background: #07090d; }
  .nav > a:first-child { margin-top: auto; }
  .nav > .btn { margin-bottom: auto; flex: none; }
  .nav a { flex: none; }
}
@media (max-width: 960px) and (max-height: 700px) {
  .nav a { font-size: 1.6rem; padding: .4rem 0; }
  .nav .btn { margin-top: 1rem; }
}