/* ==========================================================================
   Meridian design system.

   Built on three ideas:

   1. A wash of colour sits behind the whole page, and every panel is a sheet
      of translucent glass over it. Blur with nothing behind it is just grey,
      so the wash is what makes the material read as glass at all.
   2. Three thicknesses of that material — thin, regular, thick — and nothing
      else. Using one of three makes every surface look like the same stuff.
   3. Motion is spring-timed and moves only transform and opacity, so it can
      be handed to the GPU and never causes the page to be laid out again.

   Light and dark are two different materials, not one tinted: on white the
   glass is lit by shade, on black by white at low opacity.

   Written mobile-first — the base rules are the phone layout, and the two
   media queries widen it. One stylesheet, no framework, no build step.
   ========================================================================== */

:root {
  /* Ink and surfaces */
  --ink:      #0E1613;
  --body:     #46524C;
  --muted:    #6A766F;
  --line:     rgba(14, 22, 19, 0.09);
  --line-2:   rgba(14, 22, 19, 0.14);

  --bg:       #F2F5F3;
  --bg-2:     #E8EEEA;
  --card:     rgba(255, 255, 255, 0.72);
  --tint:     rgba(14, 22, 19, 0.045);
  --tint-2:   rgba(23, 86, 74, 0.09);

  /* Brand */
  --jade:     #17564A;
  --jade-2:   #1E7A63;
  --forest:   #0E3A31;
  --brass:    #9C7328;
  --gold:     #E9CE96;
  --dark-1:   #143A31;
  --dark-2:   #08211B;
  --on-dark:  #C6D4CB;
  --on-accent:#FFFFFF;

  /* Glass materials, thin to thick. Every translucent surface on the site is
     one of these three, which is what makes them look like one material
     rather than a pile of different greys. */
  --mat-thin:  rgba(255, 255, 255, 0.52);
  --mat:       rgba(255, 255, 255, 0.70);
  --mat-thick: rgba(255, 255, 255, 0.86);
  --mat-ring:  rgba(255, 255, 255, 0.75);
  --mat-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --mat-blur:  saturate(1.8) blur(22px);
  --mat-blur-sm: saturate(1.6) blur(13px);
  --header-bg: rgba(255, 255, 255, 0.95);

  --shadow:    0 1px 2px rgba(14, 22, 19, 0.05), 0 10px 26px -20px rgba(14, 22, 19, 0.45);
  --shadow-lg: 0 1px 3px rgba(14, 22, 19, 0.06), 0 20px 46px -28px rgba(14, 22, 19, 0.5);
  --shadow-up: 0 2px 8px rgba(14, 22, 19, 0.07), 0 26px 52px -26px rgba(14, 22, 19, 0.42);

  /* The wash the glass refracts. */
  --wash-1: radial-gradient(52rem 34rem at 8% -6%, rgba(23, 86, 74, 0.20), transparent 64%);
  --wash-2: radial-gradient(44rem 30rem at 104% 4%, rgba(156, 115, 40, 0.17), transparent 66%);
  --wash-3: radial-gradient(48rem 34rem at 52% 106%, rgba(30, 122, 99, 0.16), transparent 64%);

  --img-pad: linear-gradient(160deg, #FFFFFF, #E7EDE8);

  /* Corners. Bigger and more even than a normal web radius: a generous,
     continuous curve is most of what makes a panel feel like an app surface
     rather than a box. */
  --r-xl: 32px;
  --r-lg: 26px;
  --r-md: 20px;
  --r-sm: 15px;
  --r-xs: 11px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* iOS-style motion. --spring overshoots slightly and settles: the little
     bounce a sheet or a button has on a phone. --ease-out decelerates hard at
     the start, which is what makes an opening panel feel light rather than
     mechanical. Everything animated with these moves transform and opacity
     only, so the browser can hand it to the GPU and never re-lay-out. */
  --spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-soft: cubic-bezier(0.32, 1.28, 0.58, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --press: 0.12s cubic-bezier(0.4, 0, 0.6, 1);

  /* Kept so older rules still resolve. */
  --glass:      var(--mat-blur-sm);
  --glass-edge: var(--mat-sheen);
  --emerald:    var(--jade);

  --wrap: 1260px;
  --gutter: 20px;

  --sans:    "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Dark is not a filter over the light theme — the materials invert, because
   glass on a dark canvas is lit by white at low opacity, not by shade. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  /* Ink and surfaces */
  --ink:      #EAF1EC;
  --body:     #A6B4AB;
  --muted:    #84948A;
  --line:     rgba(255, 255, 255, 0.10);
  --line-2:   rgba(255, 255, 255, 0.16);

  --bg:       #080F0D;
  --bg-2:     #0C1614;
  --card:     rgba(255, 255, 255, 0.055);
  --tint:     rgba(255, 255, 255, 0.07);
  --tint-2:   rgba(63, 213, 172, 0.12);

  /* Brand */
  --jade:     #45DBB0;
  --jade-2:   #2FB790;
  --forest:   #8FE9C9;
  --brass:    #E2B975;
  --gold:     #F5DFAE;
  --dark-1:   #123029;
  --dark-2:   #081A16;
  --on-dark:  #C6D4CB;
  --on-accent:#04231C;

  /* Glass materials: on a dark canvas the light comes from white at low
     opacity, which is why a dark panel still reads as glass and not paint. */
  --mat-thin:  rgba(255, 255, 255, 0.055);
  --mat:       rgba(255, 255, 255, 0.085);
  --mat-thick: rgba(24, 38, 34, 0.72);
  --mat-ring:  rgba(255, 255, 255, 0.13);
  --mat-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --mat-blur:  saturate(1.5) blur(24px);
  --mat-blur-sm: saturate(1.4) blur(14px);
  --header-bg: rgba(14, 24, 20, 0.94);

  --shadow:    0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px -18px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.55), 0 26px 60px -30px rgba(0, 0, 0, 0.95);
  --shadow-up: 0 3px 10px rgba(0, 0, 0, 0.5), 0 30px 60px -26px rgba(0, 0, 0, 0.9);

  /* The wash the glass refracts. Without something coloured behind it, blur
     has nothing to do and glass just looks like flat grey. */
  --wash-1: radial-gradient(52rem 34rem at 8% -6%, rgba(69, 219, 176, 0.22), transparent 64%);
  --wash-2: radial-gradient(44rem 30rem at 104% 4%, rgba(226, 185, 117, 0.15), transparent 66%);
  --wash-3: radial-gradient(48rem 34rem at 52% 106%, rgba(47, 183, 144, 0.16), transparent 64%);

  --img-pad: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  }
}
:root[data-theme="dark"] {
  /* Ink and surfaces */
  --ink:      #EAF1EC;
  --body:     #A6B4AB;
  --muted:    #84948A;
  --line:     rgba(255, 255, 255, 0.10);
  --line-2:   rgba(255, 255, 255, 0.16);

  --bg:       #080F0D;
  --bg-2:     #0C1614;
  --card:     rgba(255, 255, 255, 0.055);
  --tint:     rgba(255, 255, 255, 0.07);
  --tint-2:   rgba(63, 213, 172, 0.12);

  /* Brand */
  --jade:     #45DBB0;
  --jade-2:   #2FB790;
  --forest:   #8FE9C9;
  --brass:    #E2B975;
  --gold:     #F5DFAE;
  --dark-1:   #123029;
  --dark-2:   #081A16;
  --on-dark:  #C6D4CB;
  --on-accent:#04231C;

  /* Glass materials: on a dark canvas the light comes from white at low
     opacity, which is why a dark panel still reads as glass and not paint. */
  --mat-thin:  rgba(255, 255, 255, 0.055);
  --mat:       rgba(255, 255, 255, 0.085);
  --mat-thick: rgba(24, 38, 34, 0.72);
  --mat-ring:  rgba(255, 255, 255, 0.13);
  --mat-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --mat-blur:  saturate(1.5) blur(24px);
  --mat-blur-sm: saturate(1.4) blur(14px);
  --header-bg: rgba(14, 24, 20, 0.94);

  --shadow:    0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px -18px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.55), 0 26px 60px -30px rgba(0, 0, 0, 0.95);
  --shadow-up: 0 3px 10px rgba(0, 0, 0, 0.5), 0 30px 60px -26px rgba(0, 0, 0, 0.9);

  /* The wash the glass refracts. Without something coloured behind it, blur
     has nothing to do and glass just looks like flat grey. */
  --wash-1: radial-gradient(52rem 34rem at 8% -6%, rgba(69, 219, 176, 0.22), transparent 64%);
  --wash-2: radial-gradient(44rem 30rem at 104% 4%, rgba(226, 185, 117, 0.15), transparent 66%);
  --wash-3: radial-gradient(48rem 34rem at 52% 106%, rgba(47, 183, 144, 0.16), transparent 64%);

  --img-pad: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
}

*, *::before, *::after { box-sizing: border-box; }

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

html { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The wash — and the whole reason the glass reads as glass.

   Two fixed layers behind everything. The back one is still and carries the
   page colour; the front one holds the colour and drifts, very slowly, on a
   long loop that never repeats exactly. Because it only ever moves with
   transform and scale, the browser hands it to the GPU: it costs one layer,
   paints once, and never causes the page to be laid out again. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
body::before {
  background: var(--bg);
  inset: 0;
}
body::after {
  background: var(--wash-1), var(--wash-2), var(--wash-3);
  animation: wash-drift 34s var(--ease) infinite alternate;
}
@keyframes wash-drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.00) rotate(0deg); }
  50%  { transform: translate3d( 3%,  2%, 0) scale(1.12) rotate(4deg); }
  100% { transform: translate3d(-2%,  3%, 0) scale(1.05) rotate(-3deg); }
}

/* A second, slower layer of light crossing the page, so the background is
   alive rather than merely coloured. */
.aurora {
  position: fixed;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
  background:
    radial-gradient(28rem 20rem at 20% 30%, var(--tint-2), transparent 70%),
    radial-gradient(22rem 16rem at 78% 68%, rgba(156, 115, 40, 0.13), transparent 70%);
  animation: aurora 26s var(--ease) infinite alternate;
  will-change: transform;
}
@keyframes aurora {
  from { transform: translate3d(-6%, 4%, 0) scale(1); }
  to   { transform: translate3d(8%, -6%, 0) scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  body::after, .aurora { animation: none; }
}

/* ---------------------------------------------------------- Materials --- */

/* One of these three on every translucent surface.
   .mat and .mat--thick take real blur and are used for the few surfaces that
   sit over moving content: the header, the drawer, menus, sticky bars.
   .mat--thin does not blur. There can be forty cards on a shop page, and
   forty blurred layers costs far more than it is worth on a phone — against
   the wash they read as glass regardless. */
.mat, .mat--thin, .mat--thick {
  background-color: var(--mat);
  border: 1px solid var(--mat-ring);
  box-shadow: var(--mat-sheen), var(--shadow);
}
.mat, .mat--thick {
  backdrop-filter: var(--mat-blur);
  -webkit-backdrop-filter: var(--mat-blur);
}
.mat--thin  { background-color: var(--mat-thin); }
.mat--thick { background-color: var(--mat-thick); }

/* A single soft highlight across the top edge, the way light catches the lip
   of a real pane. Drawn with a pseudo-element so it curves with the corner. */
.sheen { position: relative; isolation: isolate; }
.sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 42%);
  opacity: 0.9;
}
:root[data-theme="dark"] .sheen::after { background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 46%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sheen::after { background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 46%); }
}

h1, h2, h3, h4 {
  font-family: var(--display);
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: pretty;
}

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--emerald); text-decoration: none; }
a:hover { color: var(--forest); }
button, input, select, textarea { font: inherit; color: inherit; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--card);
  border-radius: 999px;
  border: 1px solid var(--line-2);
}
.skip-link:focus { left: 8px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- Layout --- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 34px 0; }
.section--tight { padding: 22px 0; }

/* Everything past the third block is not laid out or painted until it is
   near the viewport, which is most of the work saved on a long page. The
   `auto` keyword makes the browser remember each block's real height after
   the first pass, so the scrollbar never jumps. */
main > section:nth-child(n+4),
main > .section:nth-child(n+4) {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}
.section--white {
  position: relative;
  background: var(--mat-thin);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--mat-sheen);
}

.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.grow { flex-grow: 1; }

.grid { display: grid; gap: 12px; }
.grid-1 { grid-template-columns: minmax(0, 1fr); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-2-up { grid-template-columns: minmax(0, 1fr); }

/* --------------------------------------------------------- Typography --- */

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--emerald);
  text-transform: uppercase;
}

.display { font-size: 42px; font-weight: 800; line-height: 1.0; }
.display .accent { color: var(--emerald); }

.h1 { font-size: 30px; font-weight: 700; }
.h2 { font-size: 24px; font-weight: 700; }
.h3 { font-size: 18px; font-weight: 600; }

.lede { font-size: 16px; line-height: 1.6; color: var(--body); }
.small { font-size: 13px; color: var(--body); }
.caption { font-size: 12px; color: var(--muted); }

.rule {
  height: 2px;
  width: 46px;
  border-radius: 2px;
  background: var(--emerald);
}

.prose { color: var(--body); }
.prose p { margin-bottom: 14px; }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose h2, .prose h3 { color: var(--ink); margin: 22px 0 10px; }

/* ------------------------------------------------------------- Header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Denser than the other glass on purpose: the navigation has content moving
     under it all the time, and a headline ghosting through the menu is worse
     than a slightly less transparent bar. */
  background: var(--header-bg);
  backdrop-filter: var(--mat-blur);
  -webkit-backdrop-filter: var(--mat-blur);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--mat-sheen);
  transition: box-shadow 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
/* Once the page has moved under it, the bar lifts off the content. */
.site-header.is-stuck {
  box-shadow: var(--mat-sheen), 0 10px 30px -18px rgba(0, 0, 0, 0.32);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 62px;
  padding: 8px var(--gutter);
  max-width: var(--wrap);
  margin: 0 auto;
}

.brand { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.17em;
}
.brand-tag {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--muted);
  /* A translated tagline is often longer than the English one. Holding it to
     one line keeps the header the same height in all three languages. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.brand { min-width: 0; }

.icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), transform 0.34s var(--spring);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.icon-btn:hover { background: var(--tint); color: var(--ink); }
.icon-btn:active { transform: scale(0.88); transition: transform var(--press); }

/* ------------------------------------------ Language and currency pills --- */

/* On a phone the bar holds the brand, search, cart and the menu button —
   nothing else fits without crowding the name. Language, currency and the
   light switch live in the menu, where a phone expects its settings, and
   come back into the bar as soon as there is room. */
.pill-switch, .theme-btn { display: none; }
@media (min-width: 720px) {
  .pill-switch { display: block; }
  .theme-btn   { display: flex; }
}
.pill-switch { position: relative; flex-shrink: 0; }
.pill-btn {
  width: auto;
  min-width: 44px;
  padding: 0 9px;
  gap: 5px;
  border-radius: 999px;
  background: var(--mat-thin);
  border: 1px solid var(--mat-ring);
  box-shadow: var(--mat-sheen);
}
.pill-btn:hover { background: var(--mat); }
.pill-now  { font-size: 14px; font-weight: 700; }
.pill-code { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }

.pill-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 194px;
  border-radius: var(--r-md);
  border: 1px solid var(--mat-ring);
  background: var(--mat-thick);
  backdrop-filter: var(--mat-blur);
  -webkit-backdrop-filter: var(--mat-blur);
  box-shadow: var(--mat-sheen), var(--shadow-lg);
  transform-origin: top right;
  animation: pill-open 0.34s var(--spring-soft);
}
@keyframes pill-open {
  from { opacity: 0; transform: scale(0.88) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pill-menu[hidden] { display: none; }
.pill-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--r-xs);
  font-size: 14px;
  color: var(--ink);
  transition: background 0.16s var(--ease-out), transform 0.3s var(--spring);
}
.pill-menu a:hover  { background: var(--tint); color: var(--ink); }
.pill-menu a:active { transform: scale(0.97); transition: transform var(--press); }
.pill-menu a[aria-current="true"] { color: var(--jade); font-weight: 600; }
.pill-sym {
  min-width: 28px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.pill-menu a[aria-current="true"] .pill-sym { color: var(--jade); }
.pill-name { color: var(--muted); font-size: 12px; }

@media (prefers-reduced-motion: reduce) { .pill-menu { animation: none; } }

/* --------------------------------------------------------- Theme switch --- */

/* The button shows where tapping will take you, so it carries both faces and
   hides the one that does not apply. */
[data-theme-toggle] .ico-moon { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .ico-sun  { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .ico-moon { display: flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-theme-toggle] .ico-sun  { display: none; }
  :root:not([data-theme="light"]) [data-theme-toggle] .ico-moon { display: flex; }
}
.theme-btn svg { transition: transform 0.5s var(--spring); }
.theme-btn:active svg { transform: rotate(-35deg) scale(0.85); }

/* Small square icon holders used across the cards. */
.tile {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: var(--r-xs);
  background: var(--tint-2);
  border: 1px solid var(--mat-ring);
  box-shadow: var(--mat-sheen);
  color: var(--jade);
}
.tile--sm    { width: 38px; height: 38px; }
.tile--round { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 999px; background: var(--mat-thick); }
.tile--onDark {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #D8E4DC;
}
.thumb-pad {
  flex-shrink: 0;
  border-radius: var(--r-xs);
  background: var(--img-pad);
  border: 1px solid var(--mat-ring);
  box-shadow: var(--mat-sheen);
}

.cart-count {
  position: absolute;
  top: 5px; right: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--emerald);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.primary-nav { display: none; }

/* ------------------------------------------------------- News ticker --- */

.ticker {
  display: flex;
  align-items: center;
  height: 34px;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: var(--mat-thin);
  backdrop-filter: var(--mat-blur-sm);
  -webkit-backdrop-filter: var(--mat-blur-sm);
  border-top: 1px solid var(--line);
  box-shadow: var(--mat-sheen);
  overflow: hidden;
}
.ticker-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}
.ticker-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding-right: 13px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--emerald);
  white-space: nowrap;
}
/* A hairline between the label and the moving headlines, in the label's own
   colour so it works on the light bar and the dark one alike. */
.ticker-label::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 13px;
  transform: translateY(-50%);
  background: currentColor;
  opacity: 0.32;
}
.ticker-dot {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--brass);
  animation: ticker-pulse 2.4s var(--ease) infinite;
}
@keyframes ticker-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.72); }
}
/* Headlines fade out at both ends instead of being cut through a letter, so
   nothing ever collides with the label. */
.ticker-viewport {
  overflow: hidden;
  flex-grow: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 30px), transparent 100%);
}
.ticker-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: ticker-slide 38s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track,
.ticker.is-paused .ticker-track { animation-play-state: paused; }
.ticker-track { align-items: center; }
.ticker-track a { font-size: 12px; line-height: 1; color: var(--body); white-space: nowrap; }
.ticker-track a:hover { color: var(--forest); }
.ticker-empty { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

@keyframes ticker-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* --------------------------------------------------------- Motion --- */

/* Sections lift into place as they come into view. The class is added by
   app.js, so with JavaScript off, or before the script runs, everything is
   simply visible — the content never depends on the animation. */
.js-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.55s var(--ease-out), transform 0.7s var(--spring-soft);
}
.js-reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0); }

/* Children of a revealed block follow it in turn. */
.js-reveal.is-in > .wrap > .grid > *,
.js-reveal.is-in > .wrap > .stack > .grid > * {
  animation: rise-in 0.6s var(--spring-soft) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* The header and the first screen settle in on load. */
.site-header { animation: head-in 0.5s var(--ease-out) backwards; }
@keyframes head-in {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* The first screen arrives in order rather than all at once: eyebrow, then
   headline, then the line under it, then the buttons, then the panel. It is
   the difference between a page appearing and a page opening. */
.hero .stack > *,
.hero .btn-row,
.hero .hero-visual,
.hero .trust {
  animation: hero-in 0.72s var(--ease-out) backwards;
}
.hero .stack > *:nth-child(1) { animation-delay: 0.04s; }
.hero .stack > *:nth-child(2) { animation-delay: 0.10s; }
.hero .stack > *:nth-child(3) { animation-delay: 0.16s; }
.hero .stack > *:nth-child(4) { animation-delay: 0.22s; }
.hero .stack > *:nth-child(5) { animation-delay: 0.28s; }
@keyframes hero-in {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Accordions open with the same spring as everything else. */
details.accordion > .body { animation: fold 0.4s var(--ease-out); }
@keyframes fold {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
details.accordion > summary { transition: color 0.2s var(--ease-out); }

/* Anything that sits on glass lifts very slightly under the pointer. */
.tile { transition: transform 0.4s var(--spring), background-color 0.25s var(--ease-out); }
a:hover > .row > .tile, a:hover .tile { transform: scale(1.06) rotate(-2deg); }

/* The focus ring is a soft halo rather than a hard outline. */
:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .hero .stack > *, .hero .btn-row, .hero .hero-visual, .hero .trust,
  details.accordion > .body { animation: none; }
  .tile, a:hover .tile { transition: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .ticker-dot, .site-header { animation: none; }
  .card, a.card:hover, a.card:active, .service-row, .service-row:hover,
  .service-row:active, .btn, .btn:active, .chip, .chip:active,
  .icon-btn:active, .drawer {
    transition: none;
    transform: none;
  }
  .js-reveal, .js-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js-reveal.is-in > .wrap > .grid > *,
  .js-reveal.is-in > .wrap > .stack > .grid > *,
  .drawer[data-open="true"] .drawer-nav a,
  .drawer[data-open="true"] .search-bar,
  .drawer[data-open="true"] .drawer-langs,
  .drawer[data-open="true"] > .btn {
    animation: none;
  }
}

/* ----------------------------------------------------------- Drawer --- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--mat-thick);
  backdrop-filter: var(--mat-blur);
  -webkit-backdrop-filter: var(--mat-blur);
  display: flex;
  flex-direction: column;
  padding: 12px var(--gutter) 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* An iOS sheet: it comes in fast, decelerates hard, and the panel is
     fractionally small on the way so it reads as arriving, not sliding. */
  transform: translateX(100%) scale(0.98);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.24s var(--ease), opacity 0.18s linear, visibility 0s linear 0.24s;
}
.drawer[data-open="true"] {
  transform: translateX(0) scale(1);
  opacity: 1;
  visibility: visible;
  transition: transform 0.44s var(--ease-out), opacity 0.2s linear, visibility 0s;
}

.drawer-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
/* Each row arrives a beat after the one above it. --i is set in app.js. */
.drawer[data-open="true"] .drawer-nav a,
.drawer[data-open="true"] .search-bar,
.drawer[data-open="true"] .drawer-langs,
.drawer[data-open="true"] > .btn {
  animation: drawer-item 0.5s var(--spring-soft) backwards;
  animation-delay: calc(60ms + var(--i, 0) * 38ms);
}
@keyframes drawer-item {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}
.drawer-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.drawer-nav a:hover { background: var(--tint); }
.drawer-nav .meta { font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--muted); }

.drawer-langs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------ Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: transform 0.34s var(--spring), box-shadow 0.24s var(--ease-out), filter 0.2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Press: shrink fast and flat. Release: the spring above takes over and it
   swings back a touch past its size before settling — the iOS button feel. */
.btn:active { transform: scale(0.955); transition: transform var(--press); }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 44px; font-size: 14px; padding: 0 18px; }

.btn--primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--jade-2) 0%, var(--jade) 55%, var(--forest) 100%);
  color: var(--on-accent);
  box-shadow: 0 12px 28px -14px rgba(14, 58, 49, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--primary:hover { color: var(--on-accent); filter: brightness(1.06); }
/* A band of light crosses the button when it is pressed. */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.34) 50%, transparent 68%);
  transform: translateX(-120%);
  opacity: 0;
}
.btn--primary:active::after { animation: sweep 0.62s var(--ease-out); }
@keyframes sweep {
  0%   { transform: translateX(-120%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

.btn--ghost {
  background: var(--mat);
  backdrop-filter: var(--mat-blur-sm);
  -webkit-backdrop-filter: var(--mat-blur-sm);
  border: 1px solid var(--mat-ring);
  box-shadow: var(--mat-sheen), var(--shadow);
  color: var(--ink);
}
.btn--ghost:hover { background: var(--tint); color: var(--ink); }

.btn--light { background: #fff; color: #0E3A31; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--shadow); }
.btn--light:hover { color: #0E3A31; filter: brightness(0.97); }

.btn--onDark {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: var(--mat-blur-sm);
  -webkit-backdrop-filter: var(--mat-blur-sm);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #fff;
}
.btn--onDark:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }

.btn-row { display: flex; flex-direction: column; gap: 10px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--emerald);
}

/* -------------------------------------------------------------- Chips --- */

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--mat-thin);
  border: 1px solid var(--mat-ring);
  box-shadow: var(--mat-sheen);
  font-size: 13px;
  color: var(--body);
}
.chip {
  transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out),
              color 0.18s var(--ease-out), transform 0.34s var(--spring);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.chip:active { transform: scale(0.93); transition: transform var(--press); }
.chip:hover { color: var(--ink); border-color: var(--line-2); background: var(--tint); }
.chip--active {
  background: linear-gradient(135deg, var(--jade-2), var(--jade));
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px -14px rgba(14,58,49,.7);
}
/* Decorative tag inside a card that is itself the link — not a separate target. */
.chip--tag { min-height: 30px; padding: 5px 11px; font-size: 11px; }
.chip--active:hover { color: var(--on-accent); filter: brightness(1.05); }

/* On a dark panel the pill inverts. Defined after .chip so it wins: at equal
   specificity the later rule is the one that applies. */
.chip--onDark {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #E8F0EA;
}
.chip--onDark:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--brass);
}
.badge--new { background: var(--emerald); }
.badge--muted { background: var(--tint); color: var(--forest); }

/* -------------------------------------------------------------- Cards --- */

.card {
  background: var(--card);
  border: 1px solid var(--mat-ring);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--mat-sheen), var(--shadow);
  transition: transform 0.42s var(--spring), box-shadow 0.28s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
a.card { touch-action: manipulation; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
a.card:active { transform: scale(0.982); transition: transform var(--press); }
.card--lg { border-radius: var(--r-xl); padding: 22px; box-shadow: var(--mat-sheen), var(--shadow-lg); }
.card--tint { background: linear-gradient(150deg, var(--mat-thick), var(--tint-2)); }
.card--dark {
  background: linear-gradient(150deg, var(--dark-1) 0%, var(--dark-2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-lg);
}
.card--dark p, .card--dark .lede { color: var(--on-dark); }
.card--dark h2, .card--dark h3 { color: #fff; }

.media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--img-pad);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.media img { transition: transform 0.7s var(--ease-out); }
a:hover > .media img, a:hover .media img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .media img, a:hover .media img { transition: none; transform: none; }
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media .badge { position: absolute; top: 8px; left: 8px; }

/* ------------------------------------------------------ Product cards --- */

.product-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--mat-ring);
  box-shadow: var(--mat-sheen), var(--shadow);
  color: var(--ink);
  transition: transform 0.42s var(--spring), box-shadow 0.28s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.product-card:hover {
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -22px rgba(22, 26, 23, 0.55);
}
.product-card:active { transform: scale(0.972); transition: transform var(--press); }
@media (prefers-reduced-motion: reduce) {
  .product-card { transition: none; }
  .product-card:hover, .product-card:active { transform: none; }
}
.product-card .meta { font-size: 11px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.product-card .name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.price-row { display: flex; align-items: baseline; gap: 7px; }
.price { font-size: 17px; font-weight: 700; color: var(--emerald); }
.price-was { font-size: 12px; color: var(--muted); text-decoration: line-through; }

/* --------------------------------------------------------- Hero areas --- */

/* The hero is deliberately transparent: the page's wash shows through it, so
   the first screen is the material itself rather than a painted band. */
.hero { padding: 30px 0 34px; background: transparent; }
.hero-visual {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--img-pad);
  border: 1px solid var(--mat-ring);
  box-shadow: var(--mat-sheen), var(--shadow-lg);
  min-height: 242px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  padding: 0 22px 34px;
  overflow: hidden;
}
/* Drawn stand-ins, sized per breakpoint so the panel never looks empty. */
.hero-visual > svg { width: 96px; height: 96px; }
.hero-visual > svg:nth-of-type(2) { width: 70px; height: 70px; }
.hero-visual > svg:nth-of-type(3) { width: 66px; height: 66px; }

/* Once a real photo is set it fills the panel edge to edge. The doubled class
   keeps this ahead of the padding the breakpoints give the empty panel. */
.hero-visual.hero-visual--image {
  padding: 0;
  height: 260px;
  min-height: 0;
  align-items: stretch;
  justify-content: stretch;
}
.hero-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The panel showing the newest product: image on one side, its details on the other. */
.hero-visual.hero-visual--product {
  padding: 0;
  min-height: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  gap: 0;
  color: var(--ink);
  text-align: left;
}
.hero-visual--product:hover { color: var(--ink); }

.hero-product-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--img-pad);
  min-height: 240px;
  padding: 20px;
}
.hero-product-media img { width: 100%; height: 100%; max-height: 300px; object-fit: contain; }
.hero-product-media .badge { position: absolute; top: 16px; left: 16px; }
.hero-product-media > svg { width: 150px; height: 150px; }

.hero-product-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--mat);
  backdrop-filter: var(--mat-blur);
  -webkit-backdrop-filter: var(--mat-blur);
  box-shadow: var(--mat-sheen);
}
.hero-product-name { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; }
.hero-product-text { font-size: 15px; line-height: 1.55; color: var(--body); }
.hero-product-meta { font-size: 12px; color: var(--muted); }
.hero-visual--product .btn { margin-top: 4px; align-self: flex-start; }

.hero-caption {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 152px;
  padding: 14px 15px;
  border-radius: var(--r-sm);
  background: var(--mat-thick);
  backdrop-filter: var(--mat-blur);
  -webkit-backdrop-filter: var(--mat-blur);
  border: 1px solid var(--mat-ring);
  box-shadow: var(--mat-sheen), var(--shadow);
}
.hero-caption p { font-size: 14px; line-height: 1.35; font-weight: 600; }
.hero-caption .sub { margin-top: 8px; font-size: 9px; letter-spacing: 0.16em; color: var(--muted); font-weight: 400; }

.slot-note {
  position: absolute;
  left: 18px;
  bottom: 12px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.trust { display: flex; gap: 8px; }
.trust > div {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 13px 6px;
  border-radius: var(--r-sm);
  background: var(--card);
  border: 1px solid var(--line);
  text-align: center;
}
.trust span { font-size: 11px; line-height: 1.3; color: var(--body); }
.trust svg { color: var(--emerald); }

/* ----------------------------------------------------- Dark CTA band --- */

.cta-dark {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 22px;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--dark-1) 0%, var(--dark-2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-lg);
}
/* A slow highlight drifting across the panel, so a big dark block is not dead. */
.cta-dark::before {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background: radial-gradient(40% 40% at 30% 20%, rgba(69, 219, 176, 0.22), transparent 70%);
  animation: drift 18s var(--ease) infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-6%, -4%, 0) scale(1); }
  to   { transform: translate3d(10%, 6%, 0) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .cta-dark::before { animation: none; } }
.cta-dark h2 { color: #fff; font-size: 26px; }
.cta-dark p { color: var(--on-dark); }
.cta-dark .caption { color: #9FB3A6; }

/* -------------------------------------------------------- Breadcrumbs --- */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  padding: 12px 0;
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs [aria-current] { color: var(--ink); }

/* ------------------------------------------------------------- Forms --- */

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 500; color: var(--body); }
.field input[type="text"],
.field input[type="email"],
.field input[type="search"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--card);
  font-size: 16px;
  color: var(--ink);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.field .hint { font-size: 12px; color: var(--muted); }

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line-2);
}
.search-bar input {
  flex-grow: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  padding: 13px 0;
}
.search-bar svg { color: var(--muted); flex-shrink: 0; }

.notice {
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.5;
}
.notice--ok { background: var(--tint); color: var(--forest); }
.notice--error { background: color-mix(in srgb, #C4441F 14%, transparent); color: #C4441F; }

/* --------------------------------------------------------- Accordion --- */

details.accordion {
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--line);
}
details.accordion + details.accordion { margin-top: 10px; }
details.accordion summary {
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
details.accordion summary::-webkit-details-marker { display: none; }
details.accordion summary::after {
  content: "";
  margin-left: auto;
  width: 9px; height: 9px;
  border-right: 1.7px solid var(--muted);
  border-bottom: 1.7px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
details.accordion[open] summary::after { transform: rotate(-135deg); }
details.accordion .body { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--body); }

/* ------------------------------------------------------------- Footer --- */

.site-footer {
  background: var(--mat-thin);
  backdrop-filter: var(--mat-blur-sm);
  -webkit-backdrop-filter: var(--mat-blur-sm);
  border-top: 1px solid var(--line);
  box-shadow: var(--mat-sheen);
  padding: 30px 0 34px;
  margin-top: 8px;
}
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col h3 {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.footer-col a { font-size: 13px; color: var(--ink); }
.footer-col a:hover { color: var(--emerald); }
.footer-hr { height: 1px; background: rgba(22, 26, 23, 0.09); margin: 22px 0; }

/* ------------------------------------------------------ Product page --- */

.gallery-main {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--img-pad);
  border: 1px solid var(--mat-ring);
  box-shadow: var(--mat-sheen), var(--shadow-lg);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gallery-thumbs { display: flex; gap: 9px; }
.gallery-thumbs span {
  flex: 1 1 0;
  height: 62px;
  border-radius: var(--r-sm);
  background: var(--card);
  border: 1px solid var(--line);
}
.gallery-thumbs span.is-active { border: 2px solid var(--emerald); }

.price-large { font-family: var(--display); font-size: 32px; font-weight: 700; color: var(--emerald); }

.qty {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line-2);
}
.qty button {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
}
.qty output { min-width: 24px; text-align: center; font-size: 15px; font-weight: 600; }

.spec-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; font-size: 13px; color: var(--body); }
.spec-table .v { color: var(--ink); }

.stock { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--body); }
.stock-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--emerald); }
.stock--low .stock-dot { background: var(--brass); }
.stock--out .stock-dot { background: #9A9A9A; }

/* ----------------------------------------------------- Service lists --- */

.service-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--mat-ring);
  box-shadow: var(--mat-sheen);
  color: var(--ink);
}
.service-row {
  transition: transform 0.42s var(--spring), box-shadow 0.28s var(--ease-out), border-color 0.2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.service-row:active { transform: scale(0.982); transition: transform var(--press); }
.service-row:hover {
  color: var(--ink);
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: var(--shadow-up);
}
.service-row .ico {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--tint);
  color: var(--emerald);
}
.service-row .title { font-size: 15px; font-weight: 600; }
.service-row .desc { font-size: 13px; color: var(--body); }
.service-row .price-tag { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--brass); text-align: right; }

.step {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--line);
}
.step .n {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--tint);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--emerald);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--line);
}
.stat .n { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--emerald); }
.stat .l { font-size: 12px; line-height: 1.4; color: var(--body); }

.empty {
  padding: 40px 20px;
  text-align: center;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px dashed var(--line-2);
  color: var(--body);
}

/* ================================================== Tablet and up ====== */

@media (min-width: 720px) {
  :root { --gutter: 32px; }

  .display { font-size: 60px; }
  .h1 { font-size: 38px; }
  .h2 { font-size: 30px; }
  .lede { font-size: 17px; }

  .section { padding: 48px 0; }
  .grid-2 { gap: 16px; }
  .grid-2-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero-visual { min-height: 320px; }
  .hero-visual.hero-visual--image { height: 340px; }
  .hero-product-media { min-height: 300px; }
  .hero-caption { width: 200px; top: 26px; right: 26px; }
  .hero-caption p { font-size: 17px; }

  .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-card .name { font-size: 15px; }
  .trust span { font-size: 12px; }

  .btn-row { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .btn-row .btn,
  .btn-row .btn--block { width: auto; }
}

/* ================================================== Desktop and up ===== */

@media (min-width: 1000px) {
  :root { --gutter: 40px; }

  body { font-size: 17px; }

  .display { font-size: 78px; letter-spacing: -0.03em; }
  .h1 { font-size: 44px; }
  .h2 { font-size: 36px; }
  .h3 { font-size: 20px; }
  .lede { font-size: 18px; }
  .eyebrow { font-size: 11px; letter-spacing: 0.26em; }

  .section { padding: 68px 0; }

  .primary-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-grow: 1;
    margin-left: 32px;
  }
  .primary-nav a { font-size: 15px; font-weight: 500; color: var(--ink); }
  .primary-nav a:hover { color: var(--emerald); }
  .primary-nav a[aria-current="page"] {
    color: var(--emerald);
    font-weight: 600;
    border-bottom: 2px solid var(--emerald);
    padding-bottom: 3px;
  }

  .header-bar { min-height: 78px; }
  .brand { flex-grow: 0; }
  .brand-name { font-size: 22px; letter-spacing: 0.18em; }
  .brand-tag { letter-spacing: 0.3em; }
  .menu-toggle { display: none; }

  /* The wider bar is the same glass, only taller — inverting it to solid ink
     would turn white in dark mode, where --ink is the light colour. */
  .ticker { height: 38px; }
  .ticker-label { font-size: 10px; letter-spacing: 0.22em; }
  .ticker-track a { font-size: 13px; }

  .grid-3 { gap: 20px; }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  .grid-2 { gap: 24px; }

  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  .split--aside { grid-template-columns: 260px minmax(0, 1fr); gap: 44px; align-items: start; }

  .hero { padding: 72px 0; }
  .hero-visual { min-height: 420px; padding: 0 40px 56px; gap: 44px; }
  .hero-visual.hero-visual--image { height: 440px; padding: 0; }

  .hero-visual.hero-visual--product {
    flex-direction: row;
    height: 440px;
  }
  .hero-product-media { flex: 1 1 58%; min-height: 0; padding: 32px; }
  .hero-product-media > svg { width: 220px; height: 220px; }
  .hero-product-media img { max-height: none; }
  .hero-product-info {
    flex: 1 1 42%;
    justify-content: center;
    gap: 14px;
    padding: 44px 40px;
    background: var(--mat);
  }
  .hero-product-name { font-size: 34px; }
  .hero-product-text { font-size: 16px; }
  .hero-visual > svg { width: 170px; height: 170px; }
  .hero-visual > svg:nth-of-type(2) { width: 120px; height: 120px; }
  .hero-visual > svg:nth-of-type(3) { width: 104px; height: 104px; }
  .hero-caption { width: 224px; top: 34px; right: 34px; padding: 22px; border-radius: 22px; }
  .hero-caption p { font-size: 20px; }

  .card--lg { padding: 38px; border-radius: 32px; }
  .cta-dark { flex-direction: row; align-items: center; gap: 40px; padding: 48px; border-radius: 32px; }
  .cta-dark h2 { font-size: 40px; }
  .cta-dark .cta-actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }

  .product-card { padding: 16px; border-radius: 22px; gap: 11px; }
  .product-card .name { font-size: 16px; }
  .product-card .meta { font-size: 11px; }
  .price { font-size: 19px; }

  .trust { gap: 12px; }
  .trust > div { flex-direction: row; align-items: center; padding: 12px 18px; border-radius: 999px; text-align: left; }
  .trust span { font-size: 13px; }

  .gallery-main { aspect-ratio: 4 / 3; }
  .price-large { font-size: 40px; }

  .drawer { display: none; }
  .site-footer { padding: 56px 0 44px; }
}