/* ==========================================================================
   NAHATA GROUP — v4
   Shree Balaji Advance Detergents Pvt. Ltd., Kanpur — since 1987

   Light throughout. Display face is Fraunces, body is Instrument Sans.
   Colour belongs to the brands; every brand hex below was sampled from the
   real pack artwork in the product catalogue.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: inherit; }
p { text-wrap: pretty; }
table { border-collapse: collapse; width: 100%; }

/* ---------- Tokens ---------- */
:root {
  --paper:   #FFFFFF;
  --paper-2: #F7F6F3;
  --paper-3: #EDEBE6;
  --ink:     #12110F;
  --ink-2:   #4A473F;
  --ink-3:   #6E6A61;
  --line:    rgba(18, 17, 15, .12);
  --line-2:  rgba(18, 17, 15, .06);

  /* --- Brand worlds, sampled from the catalogue packs --- */
  --sky-bg:   #1B2C8F; --sky-ac:   #FFD200;
  --smw-bg:   #5B18C4; --smw-ac:   #F06BFF;
  --nakul-bg: #0F63D6; --nakul-ac: #FFE45C;
  --staar-bg: #257F0E; --staar-ac: #C9F57A;
  --rhyno-bg: #A84700; --rhyno-ac: #FFC46B;
  --vinee-bg: #C21E85; --vinee-ac: #FFB0DC;
  --house:    #3B1E7A;          /* from the Nahata Group mark */

  --b-bg: var(--sky-bg); --b-on: #FFFFFF; --b-ac: var(--sky-ac);

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --gut:  clamp(1.25rem, 4vw, 3rem);
  --bay:  clamp(3.5rem, 7vw, 6.5rem);
  --max:  1240px;
  --wide: 1440px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --slow: cubic-bezier(.4, 0, .2, 1);

  /* header: tall with a large mark on arrival, compact once scrolled */
  --hdr: 112px;  --hdr-s: 80px;
  --logo: 64px;  --mark-n: 2.15rem;  --mark-k: .7;   /* --mark-k: scale when compact */
}
@media (max-width: 1200px) { :root { --hdr: 100px; --hdr-s: 74px; --logo: 56px; --mark-n: 1.9rem; --mark-k: .74; } }
@media (max-width: 560px)  { :root { --hdr: 88px;  --hdr-s: 68px; --logo: 48px; --mark-n: 1.6rem; --mark-k: .78; } }

[data-brand="sky"]       { --b-bg: var(--sky-bg);   --b-ac: var(--sky-ac); }
[data-brand="smartwash"] { --b-bg: var(--smw-bg);   --b-ac: var(--smw-ac); }
[data-brand="nakul"]     { --b-bg: var(--nakul-bg); --b-ac: var(--nakul-ac); }
[data-brand="staar"]     { --b-bg: var(--staar-bg); --b-ac: var(--staar-ac); }
[data-brand="rhyno"]     { --b-bg: var(--rhyno-bg); --b-ac: var(--rhyno-ac); }
[data-brand="vinee"]     { --b-bg: var(--vinee-bg); --b-ac: var(--vinee-ac); }

/* ---------- Base ---------- */
body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
}

.d1, .d2, .d3, .d4 {
  font-family: var(--display); color: var(--ink);
  font-weight: 600; letter-spacing: -.022em;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}
.d1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.04; }
.d2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); line-height: 1.12; }
.d3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.25; letter-spacing: -.018em; }
.d4 { font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.35; letter-spacing: -.014em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--body); font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; flex-shrink: 0; }
.eyebrow--plain::before { display: none; }

.lede { font-size: clamp(1.05rem, .96rem + .45vw, 1.2rem); line-height: 1.6; color: var(--ink-2); }
.measure { max-width: 62ch; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.wrap--wide { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gut); }
.bay { padding-block: var(--bay); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: #fff; padding: .85rem 1.25rem; }
.skip:focus { left: 0; }

/* ---------- The soft brand gradient ---------- */
.grad { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.grad::before {
  content: ""; position: absolute; inset: -25%; will-change: transform;
  background-image:
    radial-gradient(58% 54% at 16% 22%, color-mix(in srgb, var(--sky-bg)   15%, transparent) 0%, transparent 70%),
    radial-gradient(52% 48% at 84% 16%, color-mix(in srgb, var(--vinee-bg) 12%, transparent) 0%, transparent 70%),
    radial-gradient(56% 52% at 78% 88%, color-mix(in srgb, var(--staar-bg) 12%, transparent) 0%, transparent 70%),
    radial-gradient(48% 48% at 10% 90%, color-mix(in srgb, var(--rhyno-bg) 10%, transparent) 0%, transparent 70%);
  animation: drift 30s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(-3%,-2%,0) scale(1); } to { transform: translate3d(3%,3%,0) scale(1.1); } }
.grad--soft::before { opacity: .6; }
.hasgrad { position: relative; }
.hasgrad > *:not(.grad) { position: relative; z-index: 1; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  border-bottom: 1px solid transparent; color: var(--ink);
  transition: background .4s var(--slow), border-color .4s var(--slow), box-shadow .4s var(--slow);
}
.hdr__in { display: flex; align-items: center; gap: 1.5rem; height: var(--hdr); transition: height .45s var(--ease); }
.hdr[data-solid="true"] {
  background: var(--paper);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(18,17,15,.02);
}
.hdr[data-solid="true"] .hdr__in { height: var(--hdr-s); }

.mark { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.mark img { width: 46px; }
.mark__n { display: block; font-family: var(--display); font-weight: 600; font-size: 1.42rem; letter-spacing: -.025em; line-height: 1.1; }
.mark__s { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-top: .12rem; }
/* the header mark is the first thing anyone sees, so it is set large and
   scaled (not resized) on scroll: a transform never reflows the nav */
.hdr .mark { gap: .8rem; transform-origin: left center; transition: transform .45s var(--ease); }
.hdr .mark img { width: var(--logo); }
.hdr .mark__n { font-size: var(--mark-n); letter-spacing: -.03em; line-height: 1.02; }
.hdr .mark__s { font-size: .68rem; letter-spacing: .22em; margin-top: .3rem; }
.hdr[data-solid="true"] .mark { transform: scale(var(--mark-k)); }
@media (max-width: 560px) { .hdr .mark__s { font-size: .6rem; letter-spacing: .18em; } }

.nav { margin-left: auto; display: flex; align-items: center; gap: .1rem; }
.nav > li { position: relative; }
.nav a, .nav .navbtn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .75rem; border-radius: 6px;
  font-size: .9375rem; font-weight: 450; color: var(--ink-2); cursor: pointer;
  transition: color .25s var(--slow), background .25s var(--slow); white-space: nowrap;
}
.nav a:hover, .nav .navbtn:hover { color: var(--ink); background: var(--paper-2); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
/* the CTA is a link inside .nav, so it must beat `.nav a` on colour */
.nav a.btn--solid, .nav a.btn--solid:hover { color: var(--paper); }
.nav a.btn--solid:hover { background: color-mix(in srgb, var(--ink) 82%, #fff); }
.navbtn svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.nav li[data-open="true"] .navbtn svg { transform: rotate(180deg); }

.drop {
  position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0;
  min-width: 620px; padding: 1.15rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 28px 60px -28px rgba(18, 17, 15, .4);
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s var(--slow), transform .25s var(--ease), visibility .25s;
}
.nav li[data-open="true"] .drop { opacity: 1; visibility: visible; transform: none; }
.drop__h {
  font-family: var(--body); font-size: .6875rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  padding: .55rem .6rem .3rem;
}
.drop a {
  display: flex; align-items: center; gap: .75rem; padding: .68rem .7rem; border-radius: 8px;
  font-family: var(--display); font-size: 1.0625rem; font-weight: 500; letter-spacing: -.015em; color: var(--ink);
}
.drop a:hover { background: var(--paper-2); }
.drop .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--b-bg); flex-shrink: 0; }
.drop .sub { margin-left: auto; font-family: var(--body); font-size: .8125rem; font-weight: 400; color: var(--ink-3); }

.burger { display: none; margin-left: auto; width: 44px; height: 44px; }
.burger span { display: block; width: 22px; height: 1.5px; background: currentColor; margin: 5px auto; transition: transform .35s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Scroll progress ----------
   A hairline across the very top of the window that fills left to right as
   the page is read. Drawn with transform only, so scrolling stays smooth. */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 260; pointer-events: none; }
.progress__bar {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--house) 0%, var(--sky-bg) 38%, var(--vinee-bg) 72%, var(--rhyno-bg) 100%);
  will-change: transform;
}
@media print { .progress { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .85rem 1.5rem; border-radius: 8px;
  font-family: var(--body); font-size: .9375rem; font-weight: 600; letter-spacing: -.005em;
  transition: background .25s var(--slow), color .25s var(--slow),
              border-color .25s var(--slow), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--fill { background: var(--accent, var(--house)); color: #fff; }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--line { border: 1px solid var(--line); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); background: var(--paper-2); }
.btn--on { background: #fff; color: var(--b-bg); }
.btn--onLine { border: 1px solid rgba(255,255,255,.45); color: #fff; }
.btn--onLine:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.btn__a { transition: transform .3s var(--ease); }
.btn:hover .btn__a { transform: translateX(4px); }

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

/* ==========================================================================
   HERO
   ========================================================================== */
/* The first screen shows the heading AND the product shot on every device
   without scrolling (client, 13 Sept). The hero is one viewport tall. On
   phones and tablets the shot takes whatever height the text leaves; on
   desktop it is sized from the viewport height. Buttons sit under the
   carousel. svh = the viewport with the mobile browser's bars showing. */
.hero {
  position: relative; overflow: hidden; background: var(--paper);
  display: flex; flex-direction: column;
  height: 100vh; height: 100svh; min-height: 560px; max-height: 940px;
  padding: calc(var(--hdr) + clamp(.6rem, 2.2vh, 2.25rem)) 0 clamp(.9rem, 2.6vh, 2.25rem);
}
.hero__in {
  position: relative; z-index: 1; flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(.8rem, 2.2vh, 1.75rem);
}
.hero__media { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; }
@media (min-width: 980px) {
  .hero__in { grid-template-columns: .92fr 1.08fr; grid-template-rows: minmax(0, 1fr); align-items: center; column-gap: clamp(2rem, 4vw, 3.5rem); }
  .hero__media { grid-template-rows: auto auto auto; }
  .hero .shots { height: clamp(220px, calc(100svh - var(--hdr) - 215px), 430px); }
}
/* phones on their side: side by side, and a slimmer header */
@media (min-width: 600px) and (max-width: 979.98px) and (max-height: 560px) and (orientation: landscape) {
  :root { --hdr: 64px; --hdr-s: 56px; --logo: 34px; --mark-n: 1.25rem; }
  .hero { min-height: 0; }
  .hero__in { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); align-items: center; column-gap: 1.5rem; }
  .hero__media { height: 100%; }
}

.hero h1 { margin-top: clamp(.6rem, 1.6vh, 1.2rem); font-size: clamp(1.75rem, 3.85vw, 3.4rem); }
.hero h1 .pre { display: block; white-space: nowrap; }
/* the range name must never break across lines */
.rot {
  display: block; white-space: nowrap;
  color: var(--accent, var(--house));
  transition: color .5s var(--slow); font-style: italic;
}
.rot .ch { display: inline-block; white-space: pre; }
.hero__lede { margin-top: clamp(.6rem, 1.8vh, 1.5rem); max-width: 44ch; }
.hero__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: clamp(.75rem, 2.2vh, 1.6rem); }

.shots { position: relative; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.shot {
  grid-area: 1 / 1; min-width: 0; min-height: 0; display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transform: scale(.97); transition: opacity .7s var(--slow), transform .7s var(--ease);
}
.shot[data-on="true"] { opacity: 1; transform: none; }
/* Every slide gets the SAME box and is fitted inside it. Sizing by width alone
   made a 7:1 strip 93px tall next to a 1:3 bottle at 485px. */
.shot img {
  width: 100%; height: 100%; max-width: 800px; max-height: 430px;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 26px 44px rgba(18,17,15,.18));
}

.dots { display: flex; justify-content: center; gap: 8px; margin-top: clamp(.7rem, 1.8vh, 1.4rem); }
.dot-btn { height: 7px; width: 7px; border-radius: 999px; background: rgba(18,17,15,.18); transition: all .35s var(--slow); }
.dot-btn[aria-selected="true"] { width: 30px; background: var(--accent, var(--house)); }

/* page-load sequence */
.js .hero [data-seq] { opacity: 0; transform: translateY(20px); }
.js .hero.is-ready [data-seq] {
  opacity: 1; transform: none;
  transition: opacity .8s var(--slow), transform .8s var(--ease);
  transition-delay: calc(var(--i,0) * 120ms + 120ms);
}

/* ==========================================================================
   STACKING SECTIONS — each pins, the next slides over it
   ========================================================================== */
.stack-wrap { position: relative; }
.stack-wrap > .stack-sec { position: sticky; top: 0; }
.stack-sec {
  min-height: 100svh;
  display: flex; align-items: center;
  background: var(--paper);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -18px 50px -30px rgba(18,17,15,.4);
  overflow: hidden;
}
.stack-sec:first-child { border-radius: 0; box-shadow: none; }
.stack-sec__in { width: 100%; padding-block: clamp(3rem,6vw,5rem); }
@media (min-width: 861px) { .stack-wrap > .stack-sec { will-change: transform; } }
@media (max-width: 860px) {
  .stack-wrap > .stack-sec { position: relative; min-height: 0; border-radius: 22px 22px 0 0; }
}

/* ==========================================================================
   NETWORK / COUNTERS
   ========================================================================== */
.net { display: grid; gap: clamp(1.75rem,3.5vw,3rem); grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); margin-top: clamp(2rem,4vw,3rem); }
.stat__v {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.8rem,6.5vw,4.75rem); line-height: 1;
  letter-spacing: -.035em; color: var(--ink);
  display: flex; align-items: baseline; gap: .04em;
}
.stat__l { margin-top: .7rem; font-size: .95rem; color: var(--ink-3); max-width: 22ch; }
.stat__rule { width: 40px; height: 3px; border-radius: 3px; margin-top: 1.1rem; background: var(--c, var(--house)); }

/* ==========================================================================
   BRAND COVERFLOW — light
   ========================================================================== */
.coverflow { position: relative; overflow: hidden; background: var(--paper-2); padding-block: clamp(3rem,6vw,4.5rem); user-select: none; }
.coverflow__amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.coverflow__amb i {
  position: absolute; inset: -30%;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--b-bg) 24%, transparent) 0%, transparent 64%);
  transition: background .8s var(--slow);
}
.coverflow__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.coverflow__head { display: flex; align-items: center; gap: .85rem; margin-bottom: clamp(1.75rem,3vw,2.5rem); }
.coverflow__head span { width: 34px; height: 1px; background: var(--line); }
.coverflow__head h2 { font-family: var(--body); font-size: .72rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-3); }

.stage { position: relative; width: 100%; height: 520px; display: flex; justify-content: center; align-items: center; perspective: 1400px; margin-bottom: 1.8rem; }
.slide {
  position: absolute; width: 320px; height: 470px; border-radius: 20px; overflow: hidden;
  background: var(--b-bg); border: 1px solid rgba(255,255,255,.14);
  transform-origin: center center; display: flex; flex-direction: column; color: #fff;
  transition: transform .8s cubic-bezier(.25,1,.5,1), opacity .8s cubic-bezier(.25,1,.5,1), filter .8s cubic-bezier(.25,1,.5,1), box-shadow .8s;
}
.slide__art { position: absolute; inset: 0; background: linear-gradient(165deg, var(--b-bg) 0%, color-mix(in srgb, var(--b-bg) 62%, #000) 100%); display: grid; place-items: center; padding: 2rem 1.6rem 9rem; }
.slide__art img { width: auto; max-width: 84%; max-height: 230px; object-fit: contain; filter: drop-shadow(0 20px 24px rgba(0,0,0,.4)); }
.slide__veil { position: absolute; inset: 0; z-index: 10; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.03) 26%, rgba(0,0,0,.6) 62%, rgba(0,0,0,.9) 100%); }
.slide__body { position: relative; z-index: 20; margin-top: auto; padding: 1.1rem 1.25rem 1.4rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .28rem; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--slow), transform .5s var(--ease); }
.slide__cat { font-family: var(--body); font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.slide__n { font-family: var(--display); font-size: 1.6rem; font-weight: 600; letter-spacing: -.022em; line-height: 1.1; }
.slide__rule { width: 32px; height: 2px; border-radius: 2px; background: var(--b-ac); margin: .45rem 0 .3rem; }
.slide__d { font-size: .86rem; color: rgba(255,255,255,.9); max-width: 27ch; line-height: 1.4; }
.slide__cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: .85rem; padding: .5rem 1.1rem; border-radius: 999px; background: #fff; color: var(--b-bg); font-family: var(--body); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.slide[data-pos="0"]  { z-index: 30; opacity: 1;   filter: none; transform: translateX(0) scale(1) rotateY(0deg); box-shadow: 0 28px 60px -18px rgba(18,17,15,.45); cursor: default; }
.slide[data-pos="0"] .slide__body { opacity: 1; transform: none; }
.slide[data-pos="1"]  { z-index: 20; opacity: .7;  filter: brightness(.82); transform: translateX(275px) scale(.84) rotateY(-24deg); cursor: pointer; }
.slide[data-pos="-1"] { z-index: 20; opacity: .7;  filter: brightness(.82); transform: translateX(-275px) scale(.84) rotateY(24deg); cursor: pointer; }
.slide[data-pos="2"]  { z-index: 10; opacity: .42; filter: brightness(.7) blur(1px); transform: translateX(495px) scale(.68) rotateY(-38deg); cursor: pointer; }
.slide[data-pos="-2"] { z-index: 10; opacity: .42; filter: brightness(.7) blur(1px); transform: translateX(-495px) scale(.68) rotateY(38deg); cursor: pointer; }
.slide[data-pos="far"]{ z-index: 0;  opacity: 0;   transform: scale(.4); pointer-events: none; }

.cf__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 40; width: 46px; height: 46px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; box-shadow: 0 10px 26px -14px rgba(18,17,15,.5); transition: transform .2s var(--ease), background .2s; }
.cf__nav:hover { background: var(--ink); color: var(--paper); }
.cf__nav--prev { left: 16px; } .cf__nav--next { right: 16px; }
.cf__nav svg { width: 20px; height: 20px; }
.cf__dots { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cf__dot { height: 8px; width: 8px; border-radius: 999px; background: rgba(18,17,15,.16); transition: all .3s var(--slow); }
.cf__dot[aria-selected="true"] { width: 28px; background: var(--b-bg); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.tstm__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(2rem,3.5vw,3rem); }
.tstm__pill { border: 1px solid var(--line); padding: .3rem 1rem; border-radius: 999px; font-family: var(--body); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); background: var(--paper); }
.tstm__head h2 { margin-top: 1.2rem; }
.tstm__cols {
  display: flex; justify-content: center; gap: 1.5rem;
  max-height: 620px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.tstm__col { flex: 0 0 auto; width: min(340px, 86vw); }
.tstm__col > div { display: flex; flex-direction: column; gap: 1.4rem; animation: tRoll linear infinite; }
@keyframes tRoll { to { transform: translateY(-50%); } }
.tstm__cols:hover .tstm__col > div { animation-play-state: paused; }
/* off-screen sections stop animating entirely */
[data-idle="true"] .tstm__col > div,
[data-idle="true"] .grad::before,
[data-idle="true"].grad::before { animation-play-state: paused; }
.tstm__col:nth-child(2) { display: none; }
@media (min-width: 900px) { .tstm__col:nth-child(2) { display: block; } }

.quote { background: var(--paper); border: 1px solid var(--line-2); border-radius: 20px; padding: clamp(1.4rem,2.4vw,1.9rem); box-shadow: 0 12px 30px -22px rgba(18,17,15,.35); transition: transform .35s var(--ease), box-shadow .35s var(--slow); }
.quote:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px rgba(18,17,15,.4); }
.quote p { color: var(--ink-2); font-size: .96rem; line-height: 1.62; }
.quote footer { display: flex; align-items: center; gap: .8rem; margin-top: 1.3rem; }
.quote .av { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--c, var(--house)); color: #fff; font-family: var(--display); font-weight: 600; font-size: .95rem; }
.quote cite { display: block; font-style: normal; font-weight: 600; color: var(--ink); font-size: .95rem; }
.quote .role { font-size: .82rem; color: var(--ink-3); }

/* ==========================================================================
   VIDEO TWO-UP
   ========================================================================== */
.vids { display: grid; gap: clamp(1rem,2vw,1.5rem); margin-top: clamp(2rem,4vw,3rem); }
@media (min-width: 800px) { .vids { grid-template-columns: 1fr 1fr; } }
.vid { position: relative; border-radius: 18px; overflow: hidden; background: var(--ink); aspect-ratio: 16/9; border: 1px solid var(--line-2); }
.vid video { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   SHARED PAGE PIECES
   ========================================================================== */
.mast { border-bottom: 1px solid var(--line); padding-top: var(--hdr); }
.mast__in { padding-block: clamp(3rem,5vw,4.5rem) clamp(2.25rem,4vw,3.25rem); }
.mast .eyebrow { margin-bottom: 1.1rem; }
.mast p { max-width: 60ch; margin-top: 1.2rem; }

.sec__head { margin-bottom: clamp(1.75rem,3.5vw,2.75rem); }
.sec__head .eyebrow { margin-bottom: 1rem; }
.sec__head h2 + p { margin-top: 1.1rem; }

.split { display: grid; gap: clamp(2rem,5vw,4.5rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .split--7to5 { grid-template-columns: 7fr 5fr; } }


.grid { display: grid; gap: clamp(1rem,2vw,1.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(255px,1fr)); }

.card { background: var(--paper); border: 1px solid var(--line-2); border-radius: 18px; padding: clamp(1.4rem,2.4vw,1.9rem); transition: transform .35s var(--ease), box-shadow .35s var(--slow); }
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -26px rgba(18,17,15,.35); }
.card h3 { margin-bottom: .55rem; }
.card p { font-size: .96rem; }

.bcard { position: relative; overflow: hidden; border-radius: 18px; background: var(--b-bg); color: #fff; padding: clamp(1.5rem,2.6vw,2rem); min-height: 300px; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--slow); }
.bcard:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px rgba(18,17,15,.5); }
.bcard__cat { font-family: var(--body); font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.bcard__n { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem,2.6vw,2rem); letter-spacing: -.022em; margin-block: .5rem .45rem; }
.bcard__d { font-size: .93rem; color: #fff; }
.bcard__art { margin-top: auto; display: grid; place-items: center; padding-top: 1.2rem; }
.bcard__art img { width: auto; max-width: min(80%,230px); max-height: 165px; object-fit: contain; filter: drop-shadow(0 16px 22px rgba(0,0,0,.34)); transition: transform .45s var(--ease); }
.bcard:hover .bcard__art img { transform: translateY(-6px) scale(1.04); }

.bhead { background: var(--b-bg); color: #fff; padding-top: var(--hdr); }
.bhead__in { display: grid; gap: clamp(1.75rem,4vw,3rem); align-items: center; padding-block: clamp(2.25rem,4.5vw,3.5rem); }
@media (min-width: 880px) { .bhead__in { grid-template-columns: 1.1fr .9fr; } }
.bhead .eyebrow { color: rgba(255,255,255,.9); margin-bottom: 1rem; }
.bhead .eyebrow::before { background: currentColor; }
.bhead h1 { color: #fff; }
.bhead p { color: #fff; max-width: 46ch; margin-top: 1.1rem; }
.bhead__strap { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: rgba(255,255,255,.92); margin-top: 1rem; }
.bhead__art { display: grid; place-items: center; }
.bhead__art img { width: min(78%,340px); filter: drop-shadow(0 30px 34px rgba(0,0,0,.34)); }

.ptable { margin-top: 1.4rem; }
.ptable caption { text-align: left; padding-block: .85rem .5rem; font-family: var(--body); font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.ptable th { text-align: left; padding: .5rem .9rem .5rem 0; font-family: var(--body); font-size: .64rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.ptable td { padding: .65rem .9rem .65rem 0; font-size: .95rem; border-bottom: 1px solid var(--line-2); color: var(--ink-2); }
.ptable td:first-child { font-weight: 600; color: var(--ink); }

.rate { background: var(--ink); color: var(--paper); border-radius: 20px; padding: clamp(2rem,4.5vw,3.25rem); }
.rate h2 { color: var(--paper); max-width: 18ch; }
.rate p { color: rgba(255,255,255,.74); max-width: 52ch; margin-top: 1.1rem; }
.rate__acts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }
.rate .btn--solid { background: var(--paper); color: var(--ink); }
.rate .btn--line { border-color: rgba(255,255,255,.34); color: var(--paper); }
.rate .btn--line:hover { border-color: var(--paper); background: rgba(255,255,255,.1); }

/* ---------- Footer ---------- */
.ftr { border-top: 1px solid var(--line); padding-block: clamp(3rem,6vw,4.5rem) 2rem; background: var(--paper); position: relative; z-index: 2; }
.ftr__top { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 860px) { .ftr__top { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.ftr h4 { font-family: var(--body); font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.2rem; }
.ftr li + li { margin-top: .62rem; }
.ftr a { font-size: .9375rem; color: var(--ink-2); }
.ftr a:hover { color: var(--ink); }
.ftr address { font-style: normal; font-size: .9375rem; color: var(--ink-2); line-height: 1.75; }
.ftr__blurb { font-size: .9375rem; color: var(--ink-3); margin-top: 1.1rem; max-width: 32ch; }
.ftr__bot { border-top: 1px solid var(--line); padding-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.ftr__bot p, .ftr__bot a { font-size: .8125rem; color: var(--ink-3); }
.ftr__legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ---------- Reveal ---------- */
.js [data-rise] { opacity: 0; transform: translateY(20px); }
.js [data-rise].is-in { opacity: 1; transform: none; transition: opacity .85s var(--slow), transform .85s var(--ease); transition-delay: var(--d,0ms); }

/* ---------- Mobile ---------- */
@media (max-width: 1200px) {
  .nav { display: none; }
  .burger { display: block; }
  .nav[data-open="true"] {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; inset: var(--hdr) 0 auto; margin: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: .5rem var(--gut) 1.75rem; max-height: calc(100dvh - var(--hdr)); overflow-y: auto;
  }
  .hdr[data-solid="true"] .nav[data-open="true"] { inset-block-start: var(--hdr-s); max-height: calc(100dvh - var(--hdr-s)); }
  .nav[data-open="true"] > li > a, .nav[data-open="true"] .navbtn { padding: .95rem .2rem; font-size: 1.05rem; width: 100%; justify-content: space-between; border-bottom: 1px solid var(--line-2); border-radius: 0; }
  .nav[data-open="true"] .drop { position: static; translate: none; opacity: 1; visibility: visible; transform: none; min-width: 0; box-shadow: none; border: 0; border-radius: 0; grid-template-columns: 1fr; padding: .4rem 0 .8rem; display: none; background: transparent; }
  .nav[data-open="true"] li[data-open="true"] .drop { display: grid; }
  /* the call-to-action keeps looking like a button inside the open menu */
  .nav[data-open="true"] > li:last-child { margin: 1.1rem 0 0 !important; }
  .nav[data-open="true"] > li > a.btn { justify-content: center; padding: .95rem 1.25rem; border-bottom: 0; border-radius: 10px; }
  .stage { height: 470px; }
  .slide { width: 270px; height: 400px; }
  .slide[data-pos="1"]  { transform: translateX(210px) scale(.82) rotateY(-22deg); }
  .slide[data-pos="-1"] { transform: translateX(-210px) scale(.82) rotateY(22deg); }
  .slide[data-pos="2"], .slide[data-pos="-2"] { opacity: 0; pointer-events: none; }
}
@media (max-width: 560px) {
  .rate__acts .btn { width: 100%; justify-content: center; }
  /* hero buttons share one row so the product shot keeps its height */
  .hero__acts { flex-wrap: nowrap; gap: .5rem; }
  .hero__acts .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap;
    padding: .8rem .5rem; font-size: clamp(.78rem, 3.55vw, .9375rem); }
  .hero__acts .btn__a { display: none; }
  .ftr__bot { flex-direction: column; }
  .stage { height: 430px; }
  .slide { width: 240px; height: 360px; }
  .cf__nav--prev { left: 4px; } .cf__nav--next { right: 4px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-rise], .js .hero [data-seq] { opacity: 1; transform: none; }
  .tstm__col > div { animation: none; }
  .stack-wrap > .stack-sec { position: relative; min-height: 0; }
}

@media print {
  .hdr, .coverflow, .rate, .tstm__cols, .vids { display: none !important; }
  body { background: #fff; color: #000; }
  .stack-wrap > .stack-sec { position: relative; min-height: 0; box-shadow: none; }
}

/* ==========================================================================
   ABOUT — one flowing story, not stacked blocks
   ========================================================================== */
.story { position: relative; padding-bottom: clamp(3rem,6vw,5rem); }
.story__open { padding-block: calc(var(--hdr) + clamp(2.5rem,5vw,4rem)) clamp(1.5rem,3vw,2.25rem); max-width: 1040px; }

.beat { margin-top: clamp(2.75rem,5vw,4.25rem); }
.beat > * + * { margin-top: 1.1rem; }
.beat__mark {
  font-family: var(--body); font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--house);
  margin-bottom: .3rem;
}
.beat h2 { margin-top: .4rem; }
.beat p { font-size: 1.06rem; line-height: 1.72; }
.beat--close { margin-top: clamp(3rem,5vw,4.5rem); }

.pull {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.2rem,2vw,1.5rem); line-height: 1.4; color: var(--ink);
  padding-left: 1.4rem; border-left: 2px solid var(--house);
  margin-top: 1.6rem !important;
}
.creed {
  font-family: var(--display); font-size: clamp(1.3rem,2.4vw,1.85rem);
  line-height: 1.4; color: var(--ink); letter-spacing: -.02em; margin-top: 1.2rem !important;
}

/* ==========================================================================
   PRODUCTS
   ========================================================================== */
.catrow__head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(1.25rem,2.5vw,1.9rem); }
.catrow__head h2 { font-size: clamp(2rem,4.2vw,3.2rem); }
.catrow__art { width: auto; max-width: min(46%, 420px); max-height: 210px; object-fit: contain; }
@media (max-width: 700px) { .catrow__art { display: none; } }
.pair { display: grid; gap: clamp(1.5rem,3vw,2.5rem); }
@media (min-width: 860px) { .pair { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   BRAND PAGE — pack | sizes | video
   ========================================================================== */
.show { display: grid; gap: clamp(1.25rem,2.5vw,2rem); align-items: stretch; }
@media (min-width: 960px) { .show { grid-template-columns: .85fr .85fr 1.3fr; } }

.show__pack {
  min-width: 0;
  background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 18px;
  padding: clamp(1.25rem,2.4vw,1.9rem); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.show__pack img { width: 100%; max-width: 210px; max-height: 220px; object-fit: contain; }
.show__n { font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-top: 1.1rem; letter-spacing: -.02em; }
.show__c { font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-top: .3rem; }

.show__sizes { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.25rem,2.4vw,1.9rem); display: flex; flex-direction: column; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.1rem; }
.chips li {
  padding: .45rem .85rem; border-radius: 999px;
  background: color-mix(in srgb, var(--b-bg) 10%, transparent);
  color: color-mix(in srgb, var(--b-bg) 82%, #000);
  font-size: .84rem; font-weight: 600;
}
.show__strap { margin-top: auto; padding-top: 1.4rem; font-family: var(--display); font-style: italic; font-size: 1.02rem; color: var(--ink-2); }

/* width is pinned: with only aspect-ratio + min-height, a narrow phone (360px)
   would grow the box sideways to honour the min-height and scroll the page */
.show__media { width: 100%; min-width: 0; position: relative; border-radius: 18px; overflow: hidden; background: var(--ink); aspect-ratio: 16/10; min-height: 220px; }
.show__media video { width: 100%; height: 100%; object-fit: cover; }

/* the rest of the range */
.rangegrid { display: grid; gap: clamp(1rem,2vw,1.4rem); grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); }
.rangecard { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 16px; padding: 1.25rem; text-align: center; transition: transform .35s var(--ease); }
.rangecard:hover { transform: translateY(-4px); }
.rangecard img { width: 100%; max-height: 150px; object-fit: contain; }
.rangecard figcaption { margin-top: .9rem; font-size: .88rem; color: var(--ink-2); }

/* combo packs, gated behind the enquiry */
.combo__box { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: var(--paper); padding: clamp(1.75rem,3.5vw,2.75rem); }
.combo__head h2 { font-size: clamp(2rem,4vw,3rem); }
.combo__head p { margin-top: .9rem; max-width: 52ch; }
.combo__veil { position: relative; margin-top: 1.75rem; padding: 1.25rem 0; -webkit-user-select: none; user-select: none; }
.combo__veil::after { content: ""; position: absolute; inset: -6px; background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 55%, transparent), var(--paper) 82%); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.combo__list { display: grid; gap: .7rem; }
.combo__list li { display: flex; justify-content: space-between; gap: 1.5rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line-2); font-weight: 600; color: var(--ink); }
.combo__list span { font-weight: 400; color: var(--ink-2); }
.combo__cta { position: relative; z-index: 2; margin-top: -.5rem; }

/* cards that carry a whole range rather than one pack */
.bcard__art--wide img { width: 100%; max-width: 100%; max-height: 130px; }


/* ==========================================================================
   ABOUT v5 — one story, then the three panels
   ========================================================================== */
.story__title { font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: clamp(3rem, 9vw, 7rem); line-height: .95; letter-spacing: -.035em; margin-top: 1rem; }

.origin { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; margin-top: clamp(2rem, 4vw, 3.25rem); }
@media (min-width: 900px) { .origin { grid-template-columns: 1.05fr .95fr; } }
.origin__text > * + * { margin-top: 1.1rem; }
.origin__text p { font-size: 1.06rem; line-height: 1.72; }

.capstrip { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; margin-top: clamp(2.25rem, 4vw, 3.25rem);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.capstrip li { background: var(--paper); padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .2rem; }
.capstrip span:first-child { font-family: var(--display); font-size: .98rem; font-weight: 600; color: var(--ink); letter-spacing: -.015em; }
.capstrip span:last-child { font-size: .84rem; color: var(--ink-3); }

.nowbeat { margin-top: clamp(2.5rem, 4.5vw, 3.75rem); max-width: 780px; }
.nowbeat > * + * { margin-top: 1.1rem; }

/* three panels, always all visible */
.vmv { margin-top: clamp(3rem, 6vw, 4.75rem); }
.vmv__grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 900px) { .vmv__grid { grid-template-columns: repeat(3, 1fr); } }
.panel { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(1.6rem, 2.8vw, 2.25rem);
  background: var(--b-bg); color: #fff; min-height: 340px; display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--slow); }
.panel:hover { transform: translateY(-5px); box-shadow: 0 28px 55px -28px rgba(18,17,15,.5); }
.panel::after { content: ""; position: absolute; inset: auto -20% -35% -20%; height: 60%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.16), transparent 70%); pointer-events: none; }
.panel__k { font-family: var(--body); font-size: .72rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.85); }
.panel__h { font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  line-height: 1.2; letter-spacing: -.02em; margin-top: .9rem; }
.panel__b { margin-top: 1rem; color: rgba(255,255,255,.94); font-size: .97rem; line-height: 1.6; }
.panel__list { margin-top: 1.2rem; display: grid; gap: .7rem; counter-reset: p; }
.panel__list li { counter-increment: p; display: flex; gap: .8rem; align-items: baseline;
  font-family: var(--display); font-size: 1.08rem; color: #fff;
  padding-bottom: .7rem; border-bottom: 1px solid rgba(255,255,255,.2); }
.panel__list li::before { content: counter(p, decimal-leading-zero); font-family: var(--body);
  font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.7); letter-spacing: .1em; }
.panel__list li:last-child { border-bottom: 0; }

/* ==========================================================================
   EVENTS
   ========================================================================== */
.jump { border-block: 1px solid var(--line); background: var(--paper); position: sticky; top: var(--hdr-s); z-index: 50; }
.jump__in { display: flex; gap: .3rem; overflow-x: auto; padding-block: .7rem; scrollbar-width: none; }
.jump__in::-webkit-scrollbar { display: none; }
.jump a { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap;
  padding: .5rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 500; color: var(--ink-2);
  transition: background .25s var(--slow), color .25s var(--slow); }
.jump a:hover { background: var(--paper-2); color: var(--ink); }
.jump .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--b-bg); flex-shrink: 0; }

.strand { padding-block: clamp(2.75rem, 5vw, 4.25rem); scroll-margin-top: calc(var(--hdr-s) + 64px); }
.strand--alt { background: var(--paper-2); }
.strand__head { display: grid; gap: 1.1rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 800px) { .strand__head { grid-template-columns: 64px 1fr; align-items: start; gap: 1.75rem; } }
.strand__rule { display: block; height: 4px; width: 56px; border-radius: 4px; background: var(--b-bg); margin-top: 1.1rem; }
.strand__head .lede { margin-top: .8rem; max-width: 62ch; }


/* ==========================================================================
   Finishing touches
   ========================================================================== */
::selection { background: color-mix(in srgb, var(--house) 22%, transparent); color: var(--ink); }
html { scrollbar-gutter: stable; }
.btn:active { transform: translateY(0) scale(.99); }
a:not(.btn):not(.nav a):focus-visible { outline-offset: 4px; }
img { background-color: transparent; }

/* brand masthead art is now a wide range shot, not a single tall pack */
.bhead__art--wide img { width: auto; max-width: min(100%, 620px); max-height: 400px; object-fit: contain; margin-inline: auto; }
@media (min-width: 880px) { .bhead__in { grid-template-columns: .95fr 1.05fr; } }

/* A portrait product in a landscape box fills the full height and reads as
   oversized even when its area is small. Give tall art a shorter box; the
   slide still centres inside the same container, so layout does not shift. */
.shot--tall img { max-height: min(355px, 84%); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn--fill:hover { background: color-mix(in srgb, var(--accent, var(--house)) 84%, #000); }
.btn--block { width: 100%; justify-content: center; }

/* ==========================================================================
   FORMS — one question per line, every box the same height and edge
   ========================================================================== */
.form { display: grid; gap: 1.15rem; min-width: 0; }
.form--card {
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 18px;
  padding: clamp(1.4rem, 2.6vw, 2rem); box-shadow: 0 20px 44px -34px rgba(18,17,15,.35);
}
.form__head { padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-2); }
.form__head p { margin-top: .45rem; font-size: .9rem; color: var(--ink-3); }
.form__head b, .field > span b { color: #B42318; font-weight: 600; }
.field { display: grid; gap: .45rem; min-width: 0; }
.field > span { font-size: .875rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; min-height: 48px;
  padding: .7rem .95rem; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background-color: var(--paper); color: var(--ink);
  font-size: 1rem; line-height: 1.4;            /* 16px, so iOS never zooms the page on focus */
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--slow), box-shadow .2s var(--slow);
}
.field textarea { min-height: 132px; resize: vertical; }
.field select {
  padding-right: 2.6rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A473F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95rem center; background-size: 16px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: .85; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--ink) 34%, transparent); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--house);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--house) 18%, transparent);
}
.form__note { font-size: .875rem; color: var(--ink-3); }
.form__status { padding: .9rem 1.1rem; border-radius: 10px; font-size: .92rem; font-weight: 500; line-height: 1.5; }
.form__status[data-t="ok"]  { background: #EEF6EA; color: #1E640B; }
.form__status[data-t="err"] { background: #FEF3F2; color: #B42318; }
.aside-stack { display: grid; gap: 1.25rem; min-width: 0; }

/* ==========================================================================
   ABOUT — founder portrait (the gold frame is part of the photograph)
   ========================================================================== */
.origin__img { margin: 0; justify-self: center; width: min(100%, 400px); text-align: center; }
.origin__img img { width: 100%; filter: drop-shadow(0 26px 34px rgba(18,17,15,.22)); }
.origin__img figcaption { margin-top: 1.15rem; font-family: var(--display); font-size: 1.12rem; font-weight: 600; color: var(--ink); letter-spacing: -.015em; line-height: 1.3; }
.origin__img figcaption span { display: block; margin-top: .3rem; font-family: var(--body); font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }

/* ==========================================================================
   BRAND PAGE — sizes grouped by pack type; two columns when there is no film
   ========================================================================== */
.chips__h { margin-top: 1.15rem; font-size: .8rem; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.chips__h + .chips { margin-top: .55rem; }
@media (min-width: 960px) { .show--novid { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   VIDEOS — every film carries its brand name
   ========================================================================== */
.vid video, .show__media video { background: #000; }
.vid-card, .film { margin: 0; min-width: 0; }
.vid-card figcaption {
  display: flex; align-items: center; gap: .6rem; margin-top: .9rem;
  font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--ink); letter-spacing: -.015em;
}
.vid-card .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--b-bg); flex-shrink: 0; }
.vid-card__c, .film__c { font-family: var(--body); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.vid-card__c { margin-left: auto; }
.films__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 800px) { .films__grid { grid-template-columns: 1fr 1fr; } }
.film figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-left: .9rem; border-left: 3px solid var(--b-bg); }
.film__n { display: block; font-family: var(--display); font-size: 1.3rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1.2; }
.film__c { display: block; margin-top: .2rem; }
.film__a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .2rem; font-size: .9rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.film__a:hover .btn__a { transform: translateX(4px); }

/* ==========================================================================
   EVENTS — justified photo rows (JS evens the rows; flex is the fallback)
   ========================================================================== */
.gal { --row: 250px; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.55rem, 1.1vw, .85rem); }
@media (max-width: 700px) { .gal { --row: 150px; } }
.gal::after { content: ""; flex-grow: 100000; }
.gal.is-justified::after { display: none; }
.gal__item {
  position: relative; margin: 0; min-width: 0; overflow: hidden; border-radius: 14px; background: var(--paper-3);
  flex-grow: calc(var(--r) * 100); flex-shrink: 1; flex-basis: calc(var(--r) * var(--row));
}
.gal.is-justified .gal__item { flex: 0 0 auto; }
.gal__a { display: block; cursor: zoom-in; }
.gal__item img { width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; transition: transform .7s var(--ease); }
.gal__a:hover img { transform: scale(1.035); }
.gal__a:focus-visible { outline-offset: -4px; border-radius: 14px; }
.gal__item--vid .gal__a { cursor: pointer; }
.gal__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 12px 30px -10px rgba(0,0,0,.55);
  transition: transform .3s var(--ease);
}
.gal__play svg { width: 22px; height: 22px; margin-left: 3px; }
.gal__a:hover .gal__play { transform: scale(1.08); }

/* lightbox */
.lb {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(12,11,10,.94); color: #fff; overscroll-behavior: contain;
}
.lb::backdrop { background: rgba(12,11,10,.6); }
.lb[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lb__stage { display: grid; place-items: center; min-height: 0; padding: 4.5rem 5rem .5rem; }
.lb__stage img, .lb__stage video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.lb__cap { padding: 1rem 1.5rem 1.5rem; font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.9); text-align: center; }
.lb__count { margin-left: .75rem; color: rgba(255,255,255,.55); }
.lb__btn { position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; transition: background .2s var(--slow); }
.lb__btn:hover { background: rgba(255,255,255,.26); }
.lb__btn svg { width: 22px; height: 22px; }
.lb__btn:focus-visible { outline-color: #fff; }
.lb__x { top: 1rem; right: 1rem; }
.lb__prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lb__next { right: 1rem; top: 50%; translate: 0 -50%; }
@media (max-width: 700px) {
  .lb__stage { padding: 4.25rem .75rem .5rem; }
  .lb__prev, .lb__next { top: auto; bottom: 1rem; translate: none; }
  .lb__cap { padding: .9rem 4.5rem 1.4rem; font-size: .88rem; }
}

/* ==========================================================================
   CONTACT — the ContactCard component: title, details, form panel, corner marks
   ========================================================================== */
.contact { min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--hdr) + clamp(1.75rem, 4vw, 3rem)) clamp(3rem, 6vw, 5rem); }
.contact__in { max-width: 1120px; }
.ccard { position: relative; display: grid; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(18,17,15,.08), 0 34px 70px -44px rgba(18,17,15,.4); }
@media (min-width: 768px)  { .ccard { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ccard { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ccard__main { grid-column: span 2; } }
.ccard__plus { position: absolute; z-index: 2; width: 24px; height: 24px; color: var(--ink); }
.ccard__plus--tl { top: -12px; left: -12px; }   .ccard__plus--tr { top: -12px; right: -12px; }
.ccard__plus--bl { bottom: -12px; left: -12px; } .ccard__plus--br { bottom: -12px; right: -12px; }
.ccard__main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; padding: 2rem 1.1rem; }
@media (min-width: 768px)  { .ccard__main { padding: 2rem; } }
@media (min-width: 1024px) { .ccard__main { padding: 2.75rem; } }
.ccard__title { font-family: var(--display); font-weight: 600; color: var(--ink); letter-spacing: -.03em; line-height: 1.02; font-size: 1.875rem; }
.ccard__desc { max-width: 36rem; font-size: .9375rem; color: var(--ink-2); }
@media (min-width: 768px)  { .ccard__title { font-size: 2.25rem; } .ccard__desc { font-size: 1rem; } }
@media (min-width: 1024px) { .ccard__title { font-size: 3rem; } .ccard__desc { font-size: 1.125rem; } }
.ccard__brands { margin-top: .75rem; }
.ccard__k { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.ccard__brands ul { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.ccard__brands a {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem .45rem .7rem; border-radius: 999px;
  border: 1px solid var(--line); font-size: .875rem; font-weight: 500; color: var(--ink);
  transition: border-color .25s var(--slow), background .25s var(--slow);
}
.ccard__brands a:hover { border-color: var(--b-bg); background: color-mix(in srgb, var(--b-bg) 7%, var(--paper)); }
.ccard__brands .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--b-bg); flex-shrink: 0; }
.ccard__info { display: grid; gap: .5rem 1.25rem; margin-top: auto; padding-top: 1.25rem; }
@media (min-width: 768px) { .ccard__info { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cinfo--wide { grid-column: span 2; } }
.cinfo { display: flex; align-items: center; gap: .85rem; min-width: 0; padding-block: .75rem; color: var(--ink); }
.cinfo__i { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: var(--paper-2); color: var(--house); transition: background .25s var(--slow); }
a.cinfo:hover .cinfo__i { background: color-mix(in srgb, var(--house) 12%, var(--paper)); }
.cinfo__i .ico { width: 20px; height: 20px; }
.cinfo__l { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); }
.cinfo__v { display: block; font-size: .875rem; line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere; }
.ccard__form { display: flex; align-items: center; min-width: 0; padding: 1.25rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--paper-2) 70%, var(--paper)); scroll-margin-top: calc(var(--hdr-s) + 1rem); }
@media (min-width: 768px) { .ccard__form { border-top: 0; border-left: 1px solid var(--line); padding: 1.75rem; } }
.ccard__form .form { width: 100%; gap: 1rem; scroll-margin-top: calc(var(--hdr-s) + 1rem); }
.ccard__form .field input, .ccard__form .field select { min-height: 44px; }
.ccard__form .field textarea { min-height: 110px; }

/* ==========================================================================
   404
   ========================================================================== */
.nf { min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--hdr) + 2rem) 4rem; }
.nf__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nf__art { width: 50%; min-width: 230px; max-width: 460px; height: auto; color: var(--house); }
@media (min-width: 768px)  { .nf__art { width: 33%; } }
@media (min-width: 1024px) { .nf__art { width: 25%; min-width: 300px; } }
.nf__t { margin-top: 3rem; font-family: var(--display); font-weight: 600; color: var(--ink); letter-spacing: -.03em; line-height: 1.05; font-size: 1.875rem; }
.nf__s { margin-top: 2rem; font-size: 1rem; color: var(--ink-2); }
@media (min-width: 768px)  { .nf__t { font-size: 2.25rem; } .nf__s { font-size: 1.125rem; } }
@media (min-width: 1024px) { .nf__t { font-size: 3rem; } .nf__s { font-size: 1.25rem; } }
.nf__btn { margin-top: 3rem; }
.nf__btn svg { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.nf__btn:hover svg { transform: translateX(-4px); }


/* ==========================================================================
   PHONE PERFORMANCE
   A phone GPU repaints every frame of a scroll. Drop-shadows on big images,
   a drifting gradient, a looping marquee and a backdrop blur each cost a
   slice of that budget and together they make scrolling feel heavy, so on
   small screens they are switched off. Nothing moves position: the page
   looks the same, it just stops repainting while you scroll.
   ========================================================================== */
@media (max-width: 860px) {
  .grad::before { animation: none; will-change: auto; }
  .shot img, .slide__art img, .bhead__art img, .bcard__art img { filter: none; }
  .quote { box-shadow: none; }
  .tstm__col > div { animation: none; }                 /* the quotes sit still */
  .combo__veil::after { backdrop-filter: none; -webkit-backdrop-filter: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 86%, transparent), var(--paper) 72%); }
  .coverflow__amb i { transition: none; }
}

/* Long pages: let the browser skip laying out event sections that are far
   off screen. The reserved height keeps the scrollbar honest. */
.strand { content-visibility: auto; contain-intrinsic-size: auto 700px; }