@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Devanagari:wght@400;600&family=Noto+Serif+Kannada:wght@400;600&display=swap');

/* ============================================================================
   Shankar Envelope Makers — site stylesheet.

   Mobile-first. One codebase serves two shapes:
     • < 900px  — app-like: sticky header, bottom tab bar, single column.
     • >= 900px — website: top nav with links, wide measure, multi-column grids,
                  two-column product detail. The bottom tab bar disappears.

   Colour, type and spacing come from the Classical design system
   (_ds/classical-.../styles.css). The only token touched here is the font
   stack, extended (not replaced) with a Devanagari fallback.
   ========================================================================== */

/* ── Devanagari ─────────────────────────────────────────────────────────────
   Cormorant Garamond and Lora have no Devanagari glyphs, so Marathi and Hindi
   used to fall through to whatever system font the phone had (usually heavy
   and sans). Noto Serif Devanagari is appended to both type tokens: Latin text
   still renders in the design-system faces, Devanagari picks up a serif that
   matches them. Google Fonts serves it with a unicode-range, so the file only
   downloads when Devanagari is actually on the page.
   ------------------------------------------------------------------------- */

:root {
  --font-heading: "Cormorant Garamond", "Noto Serif Devanagari", "Noto Serif Kannada", Georgia, serif;
  --font-body: "Lora", "Noto Serif Devanagari", "Noto Serif Kannada", Georgia, serif;
}

/* ── Page frame ───────────────────────────────────────────────────────────── */

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
}

#dc-root,
#dc-root > .sc-host { display: block; width: 100%; }

/* Form controls don't inherit type by default; without this every button on
   the page falls back to the system sans. */
button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }

.paper {
  background-color: var(--color-bg);
  background-size: 520px 520px;
  background-repeat: repeat;
}

/* The one horizontal measure every section shares. */
.wrap {
  --pad: 20px;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding-inline: var(--pad);
  box-sizing: border-box;
}

.site {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--color-text);
  font-family: var(--font-body);
}

.main { flex: 1; padding-bottom: 92px; }         /* room for the mobile tab bar */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-bg); color: var(--color-accent-800);
  padding: 10px 16px; border: 1px solid var(--color-accent); border-radius: var(--radius-md);
}
.skip:focus { left: 12px; top: 12px; }

/* Visible keyboard focus everywhere, without a ring on mouse clicks. */
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1.5px dashed var(--color-accent-300);
}

.topbar-inner {
  display: flex; align-items: center; gap: 14px;
  min-height: 62px;
  padding-block: 9px;
}

.brand { display: flex; align-items: center; gap: 11px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; }
.brand-mark {
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--color-accent); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 21px;
  color: var(--color-accent-700); background: var(--color-accent-100);
}
.brand { min-width: 0; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { display: block; font-family: var(--font-heading); font-size: 20px; line-height: 1.05; letter-spacing: -0.01em; white-space: nowrap; }
.brand-sub  { display: block; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-neutral-600); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.iconbtn {
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: transparent; color: var(--color-accent-700);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .18s, background .18s;
}
.iconbtn:hover { border-color: var(--color-accent); background: var(--color-accent-100); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Desktop nav — hidden on phones, where the tab bar does this job.
   (Named .sitenav: the design system already owns .nav.) */
.sitenav { display: none; gap: 2px; margin-left: 18px; }
.navlink {
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 14px;
  color: var(--color-neutral-700);
  padding: 8px 12px; border-radius: var(--radius-md);
  position: relative; white-space: nowrap;
  transition: color .18s, background .18s;
}
.navlink:hover { color: var(--color-accent-800); background: var(--color-accent-100); }
.navlink.is-active { color: var(--color-accent-800); }
.navlink.is-active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 1.5px; background: var(--color-accent);
}

/* ── Language picker ──────────────────────────────────────────────────────── */

.langpick {
  position: relative; display: inline-flex; align-items: center;
  height: 38px; border: 1px solid var(--color-divider); border-radius: 9999px;
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  color: var(--color-accent-800); transition: border-color .18s, background .18s;
}
.langpick:hover, .langpick:focus-within { border-color: var(--color-accent); background: var(--color-accent-100); }
.langpick-globe { position: absolute; left: 11px; pointer-events: none; }
.langpick-caret { position: absolute; right: 11px; pointer-events: none; opacity: .75; }
.langpick-select {
  appearance: none; -webkit-appearance: none;
  height: 100%; border: 0; background: transparent; cursor: pointer;
  padding: 0 30px 0 32px; font-family: var(--font-body); font-size: 13px;
  color: inherit; border-radius: 9999px;
}
.langpick-select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.langpick-select option { color: var(--color-text); background: var(--color-bg); }

/* (legacy segmented control, kept for reference; no longer rendered) */

.langswitch {
  display: inline-flex; align-items: center;
  border: 1px solid var(--color-divider); border-radius: 9999px;
  padding: 2px; background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}
.lang-btn {
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; line-height: 1;
  padding: 7px 11px; border-radius: 9999px;
  color: var(--color-neutral-700); white-space: nowrap;
  transition: background .18s, color .18s;
}
.lang-btn:hover { color: var(--color-accent-800); }
.lang-btn.is-active { background: var(--color-accent-100); color: var(--color-accent-800); box-shadow: inset 0 0 0 1px var(--color-accent-300); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 18px;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: transparent; color: var(--color-neutral-800);
  font-family: var(--font-heading); font-size: 14.5px; font-weight: var(--font-heading-weight);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.btn:hover { border-color: var(--color-accent); color: var(--color-accent-800); }
.btn:active { transform: translateY(1px); }

.btn.btn--primary { border-color: var(--color-accent); color: var(--color-accent-800); background: var(--color-accent-100); }
.btn--primary:hover { background: var(--color-accent-200); }

/* Doubled class so it outranks .waplain's colour:inherit on <a> buttons. */
.btn.btn--solid { border-color: var(--color-accent-700); background: var(--color-accent-700); color: #fdf8ef; }
.btn.btn--solid:hover { background: var(--color-accent-800); border-color: var(--color-accent-800); color: #fdf8ef; }

.btn--block { width: 100%; }
.btn--sm { padding: 9px 14px; font-size: 13px; }
.btn--link { border: 0; background: none; padding: 0; color: var(--color-accent-700); font-family: var(--font-body); font-size: 13px; }
.btn--link:hover { color: var(--color-accent-900); text-decoration: underline; text-underline-offset: 3px; }

.waplain { color: inherit; text-decoration: none; }

/* ── Section furniture ────────────────────────────────────────────────────── */

.section { padding-block: 34px; }
section[id] { scroll-margin-top: 62px; }      /* land below the sticky header */
.section--tight { padding-block: 24px; }
/* The divider aligns with the content column, not the padded box. */
.section--ruled { position: relative; }
.section--ruled::before {
  content: ''; position: absolute; top: 0;
  left: var(--pad, 0px); right: var(--pad, 0px);
  border-top: 1.5px dashed var(--color-accent-300);
}

.eyebrow {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: 10px;
}
.eyebrow--muted { color: var(--color-neutral-600); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.section-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 26px; margin: 0; line-height: 1.1; }
.page-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 36px; margin: 0 0 14px; line-height: 1.05; }
.lead { font-size: 15px; line-height: 1.65; color: var(--color-neutral-800); margin: 0 0 20px; max-width: 62ch; }

/* ── Product imagery ──────────────────────────────────────────────────────────
   The original layout squeezed near-square product photos into short landscape
   strips, so every box lost its lid and base. Each image now sits in a fixed
   aspect-ratio frame and is `contain`-fitted, so the whole product is always
   visible. A blurred, cover-fitted copy of the same photo fills the leftover
   space, which keeps the frame from reading as an empty letterbox.
   ------------------------------------------------------------------------- */

.pimg {
  position: relative;
  display: block;              /* also used as a <span> inside buttons */
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-surface);
  isolation: isolate;
}
.pimg--wide  { aspect-ratio: 4 / 3; }
.pimg--band  { aspect-ratio: 21 / 9; }
.pimg--thumb { aspect-ratio: 1 / 1; }

.pimg-bg {
  position: absolute; inset: -8%;
  width: 116%; height: 116%;
  object-fit: cover;
  filter: blur(18px) saturate(0.7) brightness(1.04);
  opacity: 0.5;
  z-index: 0;
}
.pimg-fg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  z-index: 1;
  padding: 4%;
  box-sizing: border-box;
}
/* Wide crops (the workshop band) genuinely want to fill their frame. */
.pimg--band .pimg-fg { object-fit: cover; padding: 0; }
.pimg--band .pimg-bg { display: none; }

/* A soft inner vignette so the plate reads as a photograph, not a sticker. */
.pimg::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 8%, transparent);
}

.plate {
  filter: sepia(0.22) saturate(0.82) contrast(1.05);
  box-sizing: border-box;
  border: 6px solid var(--color-surface);
  outline: 1px solid var(--color-divider);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero { padding-block: 28px 8px; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
.hero-title {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(38px, 9vw, 56px); line-height: 1.02;
  letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance;
}
.hero-lead { font-size: 15px; line-height: 1.65; margin: 0 0 22px; color: var(--color-neutral-800); max-width: 46ch; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-caption { font-size: 11.5px; color: var(--color-neutral-600); margin-top: 14px; text-align: center; }

/* ── The opening envelope ─────────────────────────────────────────────────
   Built from separate layers (inside, letter, front pocket, two-sided flap,
   seal) that only ever move — transform and opacity — so the browser hands
   them to the GPU and nothing is redrawn mid-animation. The flap is a real
   3D hinge: it lifts toward the viewer, swings over the top and comes to
   rest leaning back behind the envelope.

   One continuous ~3.3s sequence, every phase overlapping the next:
     0.00–0.90s  envelope rises into place
     0.25–0.85s  wax seal presses on
     0.70–1.70s  light sweeps across the paper
     1.32–1.74s  seal lifts away…
     1.42–2.42s  …as the flap swings open
     1.20–2.15s  the camera eases back to make room
     2.10–3.30s  the letter slides out, then floats
   It starts the moment the hero is actually on screen (see .is-live), so a
   page opened in a background tab still plays when the visitor arrives.
   .is-open is the resting end state, used on return visits to Home.
   ------------------------------------------------------------------------- */
.envelope-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin: 0; padding: 4px 0 0;
  border: 0; background: none; color: inherit; cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
/* A soft pool of light behind the envelope that drifts toward the cursor. */
.envelope-stage::before {
  content: ''; position: absolute; z-index: -1;
  inset: -6% -4% 4%;
  background: radial-gradient(ellipse 55% 50% at var(--glint, 50%) 46%, rgba(255, 253, 248, .95), rgba(255, 253, 248, 0) 72%);
  pointer-events: none;
}
.env-tilt {
  display: block; width: 100%; max-width: 460px;
  transform: perspective(1100px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

/* The stage is 520 × 364 "units"; every layer is placed in those units as
   percentages, and type is sized in container units so it scales with it. */
.env-scene {
  position: relative; display: block; width: 100%;
  aspect-ratio: 520 / 364;
  perspective: 1400px; perspective-origin: 50% 28%;
  container-type: inline-size;
}
.env-ground { position: absolute; inset: 0; display: block; transform-origin: 50% 88%; }
.env-ground-soft, .env-ground-core { position: absolute; display: block; border-radius: 50%; }
.env-ground-soft {
  left: 9.23%; top: 80.2%; width: 81.54%; height: 16.48%;
  background: radial-gradient(closest-side, rgba(74, 64, 52, .30), rgba(74, 64, 52, .10) 60%, rgba(74, 64, 52, 0));
}
.env-ground-core {
  left: 16.15%; top: 80.8%; width: 67.7%; height: 8.24%;
  background: radial-gradient(closest-side, rgba(74, 64, 52, .22), rgba(74, 64, 52, 0));
}

.env-rig {
  position: absolute; display: block;
  left: 10.769%; top: 11.538%; width: 78.462%; height: 69.231%;
  transform-style: preserve-3d;
  transform-origin: 50% 130%;            /* a point just below the envelope */
  will-change: transform;
}
.env-layer { position: absolute; inset: 0; display: block; }
.env-layer > svg, .env-flap-face > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.env-inside { transform: translateZ(0); }
.env-pocket { transform: translateZ(3px); }

/* The letter: a placeholder for the customer's own stationery. */
.env-letter {
  position: absolute; display: flex; flex-direction: column; align-items: center;
  left: 5.392%; top: 6.349%; width: 89.216%; height: 88.095%;
  padding-top: 7%; box-sizing: border-box; overflow: hidden;
  background: linear-gradient(160deg, #fffefb, #f4efe5);
  border: 1px solid #d8cdb6; border-radius: 3px;
  box-shadow: 0 3px 8px rgba(74, 58, 34, .16);
  color: #2d2b2b; text-align: center; line-height: 1.15;
  transform: translateZ(2px);
  will-change: transform;
}
.env-letter-logo {
  display: inline-block; font-family: var(--font-body);
  font-size: 9px; font-size: 1.75cqi;
  letter-spacing: .16em; text-transform: uppercase; color: #9a7630;
  border: 1px dashed #c3923f; border-radius: 9999px;
  padding: .5em 1.3em;
}
.env-letter-brand {
  display: block; max-width: 92%;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 24px; font-size: 5cqi;
  margin-top: .5em; letter-spacing: -.01em;
}
.env-letter-sub {
  display: block; font-family: var(--font-body);
  font-size: 9px; font-size: 1.8cqi;
  letter-spacing: .12em; color: #8a7a5c; margin-top: .45em;
}
.env-letter-rule {
  display: block; width: 27%; height: 1px; margin-top: 2.1cqi;
  background: linear-gradient(90deg, transparent, #c3923f, transparent);
}
.env-letter-lines { display: flex; flex-direction: column; align-items: center; gap: 1.9cqi; width: 100%; margin-top: 2.2cqi; }
.env-letter-lines i { display: block; height: .55cqi; min-height: 2px; border-radius: 9px; background: #e0d7c5; }
.env-letter-lines i:nth-child(1) { width: 70%; }
.env-letter-lines i:nth-child(2) { width: 61%; }
.env-letter-lines i:nth-child(3) { width: 50%; }
:is(:lang(mr), :lang(hi), :lang(kn)) .env-letter-logo,
:is(:lang(mr), :lang(hi), :lang(kn)) .env-letter-sub { letter-spacing: .02em; text-transform: none; font-size: 2.1cqi; }
:is(:lang(mr), :lang(hi), :lang(kn)) .env-letter-brand { font-size: 4.3cqi; line-height: 1.3; }

/* The flap: hinged on its top edge, two faces back to back. */
.env-flap {
  position: absolute; display: block; left: 0; top: 0; width: 100%; height: 62.3%;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transform: translateZ(4px) rotateX(0deg);
  will-change: transform;
}
.env-flap-face { position: absolute; inset: 0; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.env-flap-inner { transform: rotateY(180deg); }
.env-flap-shade, .env-flap-dim {
  position: absolute; inset: 0; display: block; pointer-events: none; opacity: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.env-flap-shade { background: #5b4a2c; }
.env-flap-dim   { background: #3e3222; }
.env-seal {
  position: absolute; display: block;
  left: 41.42%; top: 74.5%; width: 17.16%; aspect-ratio: 1;
  transform: translateZ(1px);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  filter: drop-shadow(0 3px 4px rgba(74, 53, 23, .4));
  will-change: transform, opacity;
}
.env-seal > svg { display: block; width: 100%; height: 100%; }

.env-sheen-clip {
  position: absolute; inset: 0; display: block; overflow: hidden;
  border-radius: 1.7% / 2.8%; pointer-events: none;
  transform: translateZ(6px);
}
.env-sheen {
  position: absolute; top: -20%; left: 0; display: block; width: 27%; height: 140%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-18deg);
  animation: envSheen 6s ease-in-out 4.6s infinite;
}

/* ── The sequence ── */
.is-playing .env-scene      { animation: envRise .9s cubic-bezier(.2, .75, .25, 1) both; }
.is-playing .env-seal       { animation: sealOn .6s cubic-bezier(.2, .8, .2, 1) .25s both,
                                          sealOff .42s cubic-bezier(.5, 0, .75, 0) 1.32s forwards; }
.is-playing .env-sheen      { animation: envSheenOnce 1s ease-in-out .7s both, envSheen 6s ease-in-out 4.6s infinite; }
.is-playing .env-flap       { animation: flapOpen 1s cubic-bezier(.55, .06, .32, 1) 1.42s both; }
.is-playing .env-flap-shade { animation: flapShade 1s linear 1.42s both; }
.is-playing .env-flap-dim   { animation: flapDim 1s linear 1.42s both; }
.is-playing .env-rig        { animation: rigPull .95s cubic-bezier(.3, 0, .2, 1) 1.2s both; }
.is-playing .env-ground     { animation: groundPull .95s cubic-bezier(.3, 0, .2, 1) 1.2s both; }
.is-playing .env-letter     { animation: letterOut 1.2s cubic-bezier(.22, .8, .26, 1) 2.1s both,
                                          letterFloat 6s ease-in-out 3.35s infinite; }
.is-playing .hero-caption   { animation: heroIn .8s cubic-bezier(.2, .75, .25, 1) 2.9s backwards; }

/* Resting, already-open state (no motion). */
.is-open .env-seal      { opacity: 0; }
.is-open .env-flap      { transform: translateZ(-3px) rotateX(205deg); }
.is-open .env-rig       { transform: scale(.75); }
.is-open .env-ground    { transform: scaleX(.77); }
.is-open .env-letter    { transform: translateZ(2px) translateY(-50.45%); animation: letterFloat 6s ease-in-out infinite; }

/* Hold everything on its first frame until the hero is really on screen. */
.hero:not(.is-live) :is(.hero-in, .hero-caption, .env-scene, .env-seal, .env-sheen, .env-flap,
  .env-flap-shade, .env-flap-dim, .env-rig, .env-ground, .env-letter) { animation-play-state: paused; }

@keyframes envRise    { from { opacity: 0; transform: translateY(22px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes sealOn     { from { opacity: 0; transform: translateZ(1px) scale(.55) rotate(-18deg); } to { opacity: 1; transform: translateZ(1px) scale(1) rotate(0deg); } }
@keyframes sealOff    { to { opacity: 0; transform: translateZ(10px) translateY(-16%) scale(1.14) rotate(8deg); } }
@keyframes flapOpen   { from { transform: translateZ(4px) rotateX(0deg); } to { transform: translateZ(-3px) rotateX(205deg); } }
@keyframes flapShade  { 0% { opacity: 0; } 50% { opacity: .34; } 100% { opacity: .34; } }
@keyframes flapDim    { 0%, 45% { opacity: .28; } 100% { opacity: 0; } }
@keyframes rigPull    { from { transform: none; } to { transform: scale(.75); } }
@keyframes groundPull { from { transform: none; } to { transform: scaleX(.77); } }
@keyframes letterOut  { from { transform: translateZ(2px) translateY(0); } to { transform: translateZ(2px) translateY(-50.45%); } }
@keyframes letterFloat {
  0%, 100% { transform: translateZ(2px) translateY(-50.45%); }
  50%      { transform: translateZ(2px) translateY(-53.2%); }
}
@keyframes envSheen {
  0%        { transform: translateX(-160%) skewX(-18deg); }
  55%, 100% { transform: translateX(470%) skewX(-18deg); }
}
@keyframes envSheenOnce {
  from { transform: translateX(-160%) skewX(-18deg); }
  to   { transform: translateX(470%) skewX(-18deg); }
}

/* Hero copy arrives in a short stagger; the headline is unmasked top-down,
   like a sheet sliding out of a press. The negative inset at the end keeps
   Devanagari vowel signs above the line from being clipped. */
.hero-in { animation: heroIn .85s cubic-bezier(.2, .75, .25, 1) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
.hero-in--title { animation-name: heroTitleIn; animation-duration: 1.05s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(22px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(-30% -5% -30% -5%); }
}

/* ── Workshop band ────────────────────────────────────────────────────────── */

.bandrow { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; }

/* ── Capabilities ticker ──────────────────────────────────────────────────── */

.ticker {
  position: relative; overflow: hidden;
  margin-top: 26px; padding-block: 13px;
  border-block: 1.5px dashed var(--color-accent-300);
  background: color-mix(in srgb, var(--color-accent-100) 50%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* The list is rendered twice, so sliding by exactly half loops seamlessly. */
.ticker-track { display: flex; width: max-content; animation: ticker 52s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 16px; padding-inline: 16px;
  font-family: var(--font-heading); font-size: 17px; line-height: 1.2;
  color: var(--color-accent-800); white-space: nowrap;
}
.ticker-mark { width: 6px; height: 6px; flex: none; transform: rotate(45deg); background: var(--color-accent); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ── Stat strip ───────────────────────────────────────────────────────────── */

.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--color-surface);
}
.stat { padding: 16px 12px; text-align: center; border-top: 1.5px dashed var(--color-accent-300); border-inline-start: 1.5px dashed var(--color-accent-300); }
.stat:nth-child(-n+2) { border-top: 0; }
.stat:nth-child(odd) { border-inline-start: 0; }
.stat-value { font-family: var(--font-heading); font-size: 19px; color: var(--color-accent-700); line-height: 1.15; }
.sk-on .stats.sk-in .stat-value {
  background: linear-gradient(100deg, var(--color-accent-700) 42%, var(--color-accent-300) 50%, var(--color-accent-700) 58%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: foil 1.6s cubic-bezier(.4, 0, .2, 1) .35s both;
}
.sk-on .stats.sk-in .stat:nth-child(2) .stat-value { animation-delay: .5s; }
.sk-on .stats.sk-in .stat:nth-child(3) .stat-value { animation-delay: .65s; }
.sk-on .stats.sk-in .stat:nth-child(4) .stat-value { animation-delay: .8s; }
@keyframes foil { from { background-position: 100% 0; } to { background-position: 0 0; } }
.stat-label { font-size: 8.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-neutral-600); margin-top: 3px; }

/* ── Category rail ────────────────────────────────────────────────────────── */

.qcats {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 2px 20px 8px; margin-inline: -20px;
  scrollbar-width: none;
}
.qcats::-webkit-scrollbar { width: 0; height: 0; }
.qcat { flex: none; width: 92px; background: none; border: 0; padding: 0; cursor: pointer; text-align: center; color: inherit; }
.qcat-tile {
  width: 92px; height: 92px;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-accent-100); color: var(--color-accent-700);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s, transform .2s;
}
.qcat:hover .qcat-tile { border-color: var(--color-accent); background: var(--color-accent-200); transform: translateY(-2px); }
.qcat-tile svg { transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.qcat:hover .qcat-tile svg { transform: translateY(-3px) rotate(-6deg) scale(1.06); }
.sk-on [data-reveal].sk-in .qcat { animation: revealUp .6s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.qcat-label { font-family: var(--font-heading); font-size: 13.5px; margin-top: 8px; line-height: 1.15; }

/* ── Product cards ────────────────────────────────────────────────────────── */

.cardgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cardgrid--list { grid-template-columns: 1fr; gap: 18px; }

.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--color-surface);
  text-align: start; padding: 0; cursor: pointer; color: inherit;
  transition: box-shadow .25s, border-color .25s, transform .25s;
}
.card:hover { border-color: var(--color-accent-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card .pimg-fg { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.card:hover .pimg-fg { transform: scale(1.045); }
.card-media { position: relative; display: block; border-bottom: 1px solid var(--color-divider); }
.card-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-kicker, .card-name { display: block; }
.card-kicker { font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600); }
.card-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px; line-height: 1.15; }
.card-blurb { font-size: 13px; line-height: 1.55; color: var(--color-neutral-800); margin: 6px 0 0; }
.card-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.savebtn {
  position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3;
  width: 36px; height: 36px;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-accent-700);
  transition: border-color .18s, background .18s;
}
.savebtn:hover { border-color: var(--color-accent); background: var(--color-accent-100); }

.tag-group { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 6px; }
.tag {
  display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.04em;
  color: var(--color-accent-800); border: 1px solid var(--color-accent-300);
  border-radius: 9999px; padding: 3px 10px; background: var(--color-accent-100);
  font-weight: 500; line-height: 1.25;
}
.tag--sm { font-size: 10px; padding: 2px 8px; }

.metaline { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--color-neutral-700); }
.metaline b { font-weight: 400; color: var(--color-accent-800); }

/* ── Filters ──────────────────────────────────────────────────────────────── */

.filters { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.filter-row { display: flex; flex-direction: column; gap: 8px; }
.filter-label { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 7px 14px; border-radius: 9999px; font-size: 12.5px; line-height: 1.2;
  border: 1px solid var(--color-divider); background: transparent; color: var(--color-text);
  font-family: var(--font-body); cursor: pointer; transition: all .15s;
}
.pill:hover { border-color: var(--color-accent-300); }
.pill.is-active { border: 1.5px solid var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800); }

.resultcount { font-size: 12.5px; color: var(--color-neutral-600); }

.empty {
  border: 1.5px dashed var(--color-accent-300); border-radius: var(--radius-lg);
  padding: 36px 24px; text-align: center; background: var(--color-surface);
}

/* ── Product detail ───────────────────────────────────────────────────────── */

.detail-grid { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
.detail-media { display: flex; flex-direction: column; gap: 10px; }
.thumbs { display: flex; gap: 9px; flex-wrap: wrap; }
.thumb {
  width: 68px; flex: none; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: var(--radius-sm); background: var(--color-surface);
  border: 1px solid var(--color-divider); opacity: .7;
  transition: opacity .2s, border-color .2s;
}
.thumb:hover { opacity: 1; }
.thumb.is-active { border: 1.5px solid var(--color-accent); opacity: 1; }

.checklist { display: flex; flex-direction: column; gap: 9px; margin: 0 0 24px; padding: 0; list-style: none; }
.checkitem { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; }

/* Spec table — the biggest content gap versus other manufacturers' pages. */
.spectable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.spectable th,
.spectable td { text-align: start; padding: 11px 0; border-top: 1px solid var(--color-divider); vertical-align: top; }
.spectable tr:first-child th,
.spectable tr:first-child td { border-top: 0; }
.spectable th {
  font-family: var(--font-body); font-weight: 400;
  font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--color-neutral-600); width: 40%; padding-inline-end: 14px;
}

.optgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.optcard {
  padding: 11px 12px; border-radius: var(--radius-md); text-align: start;
  border: 1px solid var(--color-divider); background: transparent; color: var(--color-text);
  font-family: var(--font-body); cursor: pointer; transition: all .15s; width: 100%;
}
.optcard:hover { border-color: var(--color-accent-300); }
.optcard.is-active { border: 1.5px solid var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800); }
.optcard-top { display: flex; align-items: center; gap: 8px; }
.optcard-name { font-family: var(--font-heading); font-size: 14.5px; }
.optcard-sub { font-size: 11px; color: var(--color-neutral-600); margin-top: 3px; }
.swatch-dot { width: 16px; height: 16px; border-radius: 3px; flex: none; border: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent); }

.field { margin-bottom: 18px; }
.input, .select {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg) 60%, transparent);
  color: var(--color-text); font-family: var(--font-body); font-size: 14px;
  transition: border-color .18s;
}
.input:focus, .select:focus { border-color: var(--color-accent); }
.textarea { min-height: 84px; resize: vertical; }

.preview-row { display: flex; gap: 16px; align-items: center; margin: 14px 0 22px; }
.preview-swatch {
  width: 104px; height: 104px; flex: none;
  border-radius: var(--radius-md); border: 1px solid var(--color-divider);
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: background .35s, box-shadow .35s;
}
.preview-stamp {
  width: 48px; height: 22px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 9px; letter-spacing: 0.1em;
  transition: all .3s;
}

/* The running specification, so the customer sees exactly what will be sent. */
.summary {
  border: 1.5px dashed var(--color-accent-300); border-radius: var(--radius-lg);
  padding: 16px 18px; background: color-mix(in srgb, var(--color-accent-100) 55%, transparent);
  margin-bottom: 18px;
}
.summary dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0; font-size: 13px; }
.summary dt { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-600); padding-top: 3px; }
.summary dd { margin: 0; color: var(--color-text); }

/* ── Process steps ────────────────────────────────────────────────────────── */

.steps { display: grid; grid-template-columns: 1fr; gap: 2px; counter-reset: step; }
.step {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0; border-top: 1px solid var(--color-divider);
}
.step-num {
  flex: none; width: 40px; height: 40px; border-radius: 9999px;
  border: 1px solid var(--color-accent-300); background: var(--color-accent-100);
  color: var(--color-accent-800); font-family: var(--font-heading); font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.step-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin: 0 0 4px; }
.step-body { font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-800); margin: 0; }

/* When the section scrolls in, a dashed trail connects the steps one after
   another and each number is stamped as the trail reaches it. Phones draw it
   downward between the numbers; desktop draws it across the top. */
.step { position: relative; }
.step-num { position: relative; z-index: 1; }
.step:not(:last-child)::after {
  content: ''; position: absolute; z-index: 0;
  left: 19.25px; top: 58px; height: calc(100% - 36px);
  border-inline-start: 1.5px dashed var(--color-accent-400);
  transform-origin: 50% 0;
}
.sk-on .step:not(:last-child)::after { transform: scaleY(0); transition: transform .45s cubic-bezier(.4, 0, .6, 1); transition-delay: calc(var(--i, 0) * 260ms + 420ms); }
.sk-on .sk-in .step:not(:last-child)::after { transform: scaleY(1); }
.sk-on .sk-in .step-num { animation: stampIn .55s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--i, 0) * 260ms + 200ms); }
@keyframes stampIn { from { opacity: 0; transform: scale(.3) rotate(-24deg); } }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.faq { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--color-divider); }
.faq-item:last-child { border-bottom: 1px solid var(--color-divider); }
.faq-q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 16px 0; border: 0; background: none; cursor: pointer; text-align: start; color: inherit;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16.5px; line-height: 1.35;
}
.faq-q:hover { color: var(--color-accent-800); }
.faq-mark { flex: none; margin-top: 3px; color: var(--color-accent-700); transition: transform .25s; }
.faq-item.is-open .faq-mark { transform: rotate(45deg); }
.faq-a { padding: 0 0 18px; margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--color-neutral-800); max-width: 74ch; }

/* ── Craft cards ──────────────────────────────────────────────────────────── */

.speccards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.speccard { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: 20px; background: var(--color-surface); }
.speccard h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; margin: 0 0 12px; }
.speclist { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.specitem { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--color-divider); font-size: 13.5px; line-height: 1.4; }
.dot { width: 5px; height: 5px; border-radius: 9999px; background: var(--color-accent); flex: none; margin-top: 7px; }

/* ── Contact & footer ─────────────────────────────────────────────────────── */

.contactlist { display: grid; grid-template-columns: 1fr; gap: 0; }
.contactrow { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-top: 1px solid var(--color-divider); transition: opacity .18s; }
.contactrow:hover { opacity: .72; }
.contact-label { display: block; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 2px; }
.contact-value { display: block; font-family: var(--font-heading); font-size: 16px; line-height: 1.25; }

.footnote { margin-top: 24px; text-align: center; font-size: 11px; color: var(--color-neutral-500); letter-spacing: 0.04em; }

/* ── Saved rows ───────────────────────────────────────────────────────────── */

.savedrow {
  display: flex; gap: 14px; align-items: center;
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  padding: 12px; background: var(--color-surface);
}
.savedrow-media { width: 76px; flex: none; border: 1px solid var(--color-divider); border-radius: var(--radius-sm); overflow: hidden; }
.savedrow-actions { display: flex; flex-direction: column; gap: 6px; flex: none; }

/* ── Tab bar (phones only) ────────────────────────────────────────────────── */

.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: flex;
  border-top: 1.5px dashed var(--color-accent-300);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  backdrop-filter: blur(10px);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}
.tab {
  flex: 1; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--color-neutral-600); position: relative;
  transition: color .2s; padding: 2px 0;
}
.tab.is-active { color: var(--color-accent-700); }
.tab-label { font-size: 10px; letter-spacing: 0.02em; }
.tab-badge {
  position: absolute; top: -3px; inset-inline-end: calc(50% - 21px);
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 9999px; background: var(--color-accent); color: #fff;
  font-size: 9px; line-height: 16px; text-align: center;
}

/* ── Floating quote button ────────────────────────────────────────────────── */

.fab {
  position: fixed; inset-inline-end: 16px; bottom: 96px; z-index: 25;
  height: 48px; padding: 0 18px; border-radius: 9999px;
  border: 1px solid var(--color-accent); background: var(--color-bg);
  box-shadow: var(--shadow-md); color: var(--color-accent-800);
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-heading); font-size: 14px;
  transition: background .18s, transform .18s;
}
.fab:hover { background: var(--color-accent-100); transform: translateY(-2px); }
.fab { animation: fabIn .6s cubic-bezier(.2, .8, .2, 1) 1.4s backwards; }
.fab::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1.5px solid var(--color-accent); opacity: 0;
  animation: fabPulse 2.4s ease-out 3.4s 3;
}
@keyframes fabIn    { from { opacity: 0; transform: translateY(18px) scale(.9); } }
@keyframes fabPulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3, 1.55); } }

/* ── Quote sheet ──────────────────────────────────────────────────────────── */

.sheet { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-neutral-900) 48%, transparent); border: 0; padding: 0; cursor: pointer; }
.sheet-panel {
  position: relative;
  border-start-start-radius: 22px; border-start-end-radius: 22px;
  box-shadow: var(--shadow-lg); max-height: 88vh; overflow-y: auto;
  padding: 10px 20px calc(30px + env(safe-area-inset-bottom));
  border-top: 1.5px dashed var(--color-accent-300);
}
.sheet-grip { width: 40px; height: 4px; border-radius: 9999px; background: var(--color-neutral-400); margin: 6px auto 16px; }
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }

/* ── Toast ────────────────────────────────────────────────────────────────── */

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 108px; z-index: 60;
  background: var(--color-neutral-900); color: var(--color-neutral-100);
  font-size: 12.5px; padding: 11px 18px; border-radius: 9999px;
  box-shadow: var(--shadow-md); max-width: 86%; text-align: center;
  animation: toastIn .42s cubic-bezier(.2, .8, .2, 1);
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Devanagari label tuning ──────────────────────────────────────────────────
   The small caps-style labels rely on wide letter-spacing, which pulls
   Devanagari conjuncts and vowel signs apart. Marathi and Hindi get normal
   spacing and a size bump so 8–9px labels stay legible.
   ------------------------------------------------------------------------- */
:is(:lang(mr), :lang(hi), :lang(kn)) :is(.eyebrow, .brand-sub, .stat-label, .card-kicker, .filter-label,
  .spectable th, .summary dt, .contact-label, .optcard-sub, .tag) {
  letter-spacing: 0.01em;
  text-transform: none;
}
:is(:lang(mr), :lang(hi), :lang(kn)) :is(.eyebrow, .filter-label, .spectable th, .summary dt) { font-size: 11.5px; }
:is(:lang(mr), :lang(hi), :lang(kn)) :is(.stat-label, .card-kicker, .contact-label) { font-size: 10.5px; }
:is(:lang(mr), :lang(hi), :lang(kn)) .brand-sub { font-size: 10px; }
:is(:lang(mr), :lang(hi), :lang(kn)) .tab-label { font-size: 10.5px; }

/* Kannada letters stack vowel signs above and below the line; the Latin
   line-heights would clip them. */
:lang(kn) :is(.hero-title, .page-title, .section-title, .card-name, .step-title, .faq-q, .stat-value) { line-height: 1.3; }
:lang(kn) .hero-title { font-size: clamp(32px, 7.4vw, 50px); }
:is(:lang(mr), :lang(hi)) .hero-title { line-height: 1.18; }

/* ── Motion ───────────────────────────────────────────────────────────────── */

@keyframes skScreen { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes skSheet  { from { transform: translateY(100%); } to { transform: none; } }
@keyframes skFade   { from { opacity: 0; } to { opacity: 1; } }

.sk-screen   { animation: skScreen .45s cubic-bezier(.2, .7, .2, 1); }
.sk-sheet    { animation: skSheet .38s cubic-bezier(.2, .8, .2, 1); }
.sk-backdrop { animation: skFade .28s ease; }

/* Reveal-on-scroll. These are animations with `backwards` fill rather than
   transitions: once an element has arrived it returns to its normal styles,
   so hover lifts on cards keep working (a held `transform: none` used to
   override them). */
.sk-on [data-reveal]:not(.sk-in) { opacity: 0; }
.sk-on [data-reveal].sk-in { animation: revealUp .75s cubic-bezier(.2, .7, .2, 1) backwards; }
.sk-on [data-reveal="fold"] { transform-origin: 50% 0; }
.sk-on [data-reveal="fold"].sk-in { animation-name: revealFold; animation-duration: .9s; }
@keyframes revealUp   { from { opacity: 0; transform: translateY(22px); } }
@keyframes revealFold { from { opacity: 0; transform: perspective(900px) rotateX(-20deg) translateY(26px); } }

/* Section dividers draw in from the left, like a scoring line. */
.sk-on .section--ruled::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s cubic-bezier(.6, .05, .2, 1); }
.sk-on .section--ruled.sk-in::before { transform: scaleX(1); }

/* ── Micro-interactions ── */

/* Trailing arrows nudge forward on hover. */
.btn > svg:last-child:not(:first-child) { transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.btn:hover > svg:last-child:not(:first-child) { transform: translateX(3px); }

/* Bookmarks pop when saved. */
[aria-pressed="true"] > svg { animation: bmPop .5s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes bmPop { 0% { transform: scale(.55); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Live preview: the board "presses" and the logo is stamped each time the
   material or finish changes. Two identical keyframe sets alternate
   (press-0 / press-1) so the animation restarts on every change. */
.press-0 { animation: press0 .55s cubic-bezier(.3, 1.3, .5, 1); }
.press-1 { animation: press1 .55s cubic-bezier(.3, 1.3, .5, 1); }
.stamp-0 { animation: stamp0 .6s cubic-bezier(.2, .9, .3, 1.15); }
.stamp-1 { animation: stamp1 .6s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes press0 { 35% { transform: scale(.94); } }
@keyframes press1 { 35% { transform: scale(.94); } }
@keyframes stamp0 { 0% { opacity: 0; transform: translateY(-14px) scale(1.4) rotate(-7deg); } 55% { opacity: 1; transform: scale(.93); } 100% { transform: none; } }
@keyframes stamp1 { 0% { opacity: 0; transform: translateY(-14px) scale(1.4) rotate(-7deg); } 55% { opacity: 1; transform: scale(.93); } 100% { transform: none; } }

/* Product photos crossfade when a thumbnail is picked (same alternating trick). */
.imgswap-0 .pimg-fg, .imgswap-0 .pimg-bg { animation: imgIn0 .5s cubic-bezier(.2, .7, .2, 1); }
.imgswap-1 .pimg-fg, .imgswap-1 .pimg-bg { animation: imgIn1 .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes imgIn0 { from { opacity: 0; transform: scale(1.035); } }
@keyframes imgIn1 { from { opacity: 0; transform: scale(1.035); } }

/* Reading progress: a gold thread along the bottom of the header, driven by
   scroll position where the browser supports scroll-linked animation. */
@supports (animation-timeline: scroll()) {
  .topbar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 2px;
    background: linear-gradient(90deg, var(--color-accent-300), var(--color-accent), var(--color-accent-700));
    transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
    animation: readProgress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes readProgress { to { transform: scaleX(1); } }
}

/* Reduced motion: every sequence jumps straight to its end state (the
   envelope shows open with the letter out), nothing loops, and nothing waits. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .sk-on [data-reveal]:not(.sk-in) { opacity: 1; }
  .env-tilt { transform: none; }
  .hero:not(.is-live) * { animation-play-state: running !important; }
  @supports (animation-timeline: scroll()) {
    .topbar::after { animation-duration: auto !important; }
  }
}

/* ══ Small phones ══════════════════════════════════════════════════════════ */

@media (max-width: 479px) {
  .topbar-inner { gap: 10px; }
  .topbar-wa { display: none; }
  .brand { gap: 9px; }
  .brand-mark { width: 34px; height: 34px; font-size: 19px; }
  .brand-name { font-size: 18px; }
  .brand-sub { letter-spacing: 0.12em; font-size: 8.5px; }
  .lang-btn { padding: 7px 8px; font-size: 11.5px; }
  .langpick { height: 34px; }
  .langpick-select { padding: 0 24px 0 28px; font-size: 12.5px; }
  .langpick-globe { left: 9px; }
  .langpick-caret { right: 8px; }
}

/* Phones: each filter group is one swipeable row instead of three wrapped
   lines, so the first product shows without scrolling past the filters. */
@media (max-width: 639px) {
  .filters .pills {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1); padding: 2px var(--pad) 4px;
  }
  .filters .pills::-webkit-scrollbar { display: none; }
  .filters .pill { flex: none; }
}

/* ══ Tablet ═══════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
  .wrap { --pad: 32px; }
  .section { padding-block: 44px; }
  .cardgrid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .cardgrid--list { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { border-top: 0; border-inline-start: 1.5px dashed var(--color-accent-300); }
  .stat:first-child { border-inline-start: 0; }
  .stat:nth-child(odd) { border-inline-start: 1.5px dashed var(--color-accent-300); }
  .stat:first-child { border-inline-start: 0; }
  .speccards { grid-template-columns: repeat(2, 1fr); }
  .contactlist { grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
  .page-title { font-size: 44px; }
  .section-title { font-size: 30px; }
  .steps { grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
  .step:not(:last-child)::after { display: none; }   /* 2-col grid: no "next step below" */
  .optgrid { grid-template-columns: repeat(3, 1fr); }
  .sheet { justify-content: center; align-items: center; padding: 24px; }
  .sheet-panel { max-width: 620px; width: 100%; border-radius: var(--radius-lg); max-height: 84vh; padding-bottom: 30px; }
  .sheet-grip { display: none; }
}

/* ══ Desktop — the app shell becomes a website ═════════════════════════════ */

@media (min-width: 900px) {
  .sitenav { display: flex; }
  .navlink--extra { display: none; }          /* How to order · FAQ · Contact */
  .tabbar { display: none; }
  .main { padding-bottom: 0; }
  .fab { bottom: 28px; }

  .topbar-inner { min-height: 74px; }
  section[id] { scroll-margin-top: 74px; }
  .brand-name { font-size: 23px; }

  .section { padding-block: 60px; }
  .section--tight { padding-block: 36px; }
  .page-title { font-size: 52px; }
  .section-title { font-size: 34px; }
  .lead { font-size: 16px; }

  .hero { padding-block: 52px 12px; }
  .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; }
  .hero-lead { font-size: 16.5px; }
  .env-tilt { max-width: 540px; }

  /* Five products, five columns: no orphan on the last row, and cards stay
     close to the photos' native 200px so they aren't upscaled into mush. */
  .cardgrid { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .cardgrid--list { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .card-name { font-size: 17.5px; }

  .steps { grid-template-columns: repeat(5, 1fr); column-gap: 22px; }
  .step { flex-direction: column; gap: 12px; border-top: 1.5px dashed transparent; padding-block: 20px 0; }
  /* Across the top instead of down the side. */
  .step:not(:last-child)::after { display: none; }
  .step::before {
    content: ''; position: absolute; top: -1.5px; left: 0; right: -22px;
    border-top: 1.5px dashed var(--color-accent-300); transform-origin: 0 50%;
  }
  .step:last-child::before { right: 0; }
  .sk-on .step::before { transform: scaleX(0); transition: transform .42s linear; transition-delay: calc(var(--i, 0) * 260ms + 120ms); }
  .sk-on .sk-in .step::before { transform: scaleX(1); }

  .speccards { grid-template-columns: repeat(4, 1fr); }
  .contactlist { grid-template-columns: repeat(5, 1fr); column-gap: 24px; }

  .bandrow { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 52px; }

  .faqgrid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 48px; align-items: start; }

  /* Product detail becomes gallery-left / configurator-right, gallery sticky. */
  .detail-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .detail-media { position: sticky; top: 100px; }
  .optgrid { grid-template-columns: repeat(2, 1fr); }

  .qcats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .qcat, .qcat-tile { width: auto; }
  .qcat-tile { height: 120px; }

  .savedrow-media { width: 96px; }
  .savedrow-actions { flex-direction: row; }
}

@media (min-width: 1200px) {
  .navlink--extra { display: inline-block; }
}

@media (min-width: 1180px) {
  .hero-title { font-size: 62px; }
  .qcat-tile { height: 136px; }
}