:root {
  --ink: #000;
  --muted: #5b5b5b;
  --line: #e4e4e4;
  --bg: #fff;
  --bg-alt: #f7f7f8;
  --pill: rgba(255, 255, 255, 0.82);
  --max: 1180px;
  --radius: 999px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* Wix serves Linotype Helvetica (helvetica-w01-roman). Plain Helvetica comes
     first because Helvetica Neue sets ~1% wider, enough to push the research
     card copy onto an extra line and grow the cards past Wix's heights. */
  font-family: Helvetica, "Helvetica Neue", Arial, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 820px; }
.center { text-align: center; }
.muted { color: var(--muted); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 18px; }
h1 { font-size: clamp(38px, 6vw, 68px); }
h2 { font-size: clamp(30px, 4vw, 46px); }
h3 { font-size: clamp(20px, 2.4vw, 26px); }
p { margin: 0 0 16px; }
.lead { font-size: 19px; color: var(--muted); max-width: 62ch; }
.lead-salmon { color: #df7162; }

/* ---------- section bullet dot ---------- */
.dot-heading {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dot-heading::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #df7162;
  flex-shrink: 0;
}
/* ---------- vision ----------
   Measured off Wix at 1440 wide and expressed in vw, because every edge in
   this section scales with viewport width there. Column starts: heading 108px
   (7.5vw), salmon lead 556px, body 1072px; both paragraphs 344px wide.

   The dot is a sibling of the heading, not a ::before, so it can blink on its
   own clock without being caught up in the heading's 3D flip. */
.vision-section { padding: 5.97vw 0 0; }
.vision-layout {
  display: grid;
  grid-template-columns: 7.5vw 31.111vw 35.833vw 23.889vw;
  align-items: start;
}
.vision-dot {
  align-self: center;
  width: 3.403vw; height: 3.403vw; margin-left: 2.153vw;
  border-radius: 50%;
  background: #df7162;
  animation: vision-dot-blink 2s linear infinite;
}
/* Wix "flash": each half eases in, so the dot lingers bright and dark alike. */
@keyframes vision-dot-blink {
  0%   { opacity: 1; animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  50%  { opacity: 0; animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  100% { opacity: 1; }
}
.vision-heading {
  max-width: 20.14vw; margin: 0;
  font-size: 3.75vw; font-weight: 400; line-height: 1; letter-spacing: -0.03em;
}
.vision-lead, .vision-body {
  width: 23.889vw; margin: 0;
  font-size: 1.5625vw; line-height: 1.2; letter-spacing: -0.02em;
  text-align: justify;
}
.vision-lead { margin-top: 0.972vw; color: #df7162; }

/* ---------- scroll reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Wix "flipIn" + "fadeIn", 1.2s each: the flip overshoots slightly past flat
   (back-out easing) and pivots on the element's centre, not its top edge. */
.reveal-flip {
  opacity: 0;
  transform: perspective(800px) rotateX(-90deg);
  transform-origin: center;
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.reveal-flip.is-visible {
  opacity: 1;
  transform: perspective(800px) rotateX(0deg);
}

.reveal-clip-up {
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1);
}
.reveal-clip-up.is-visible {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.reveal-clip-left {
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1);
}
.reveal-clip-left.is-visible {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.reveal-clip-right {
  clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
  transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1);
}
.reveal-clip-right.is-visible {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* ---------- header ----------
   Measured off the Wix original at 1440 and 1200 wide. The pill, its offset
   and the logo scale with viewport WIDTH; the type, link gaps, pill height and
   the Contact button are fixed px. The links are centred on the page, not
   packed after the logo — they are positioned independently of the pill ends. */
.site-header {
  position: fixed; inset: 2vw 0 auto; z-index: 50;
  display: flex; justify-content: center; pointer-events: none;
}
.nav-pill {
  pointer-events: auto; position: relative;
  display: flex; align-items: center;
  width: min(max(64vw, 900px), calc(100vw - 32px));
  height: 48px;
  padding: 0 5px 0 1.8vw;
  background: rgba(243, 243, 244, 0.7);
  border-radius: var(--radius);
}
.nav-logo img { height: max(2.85vw, 32px); width: auto; }
.nav-menu { display: contents; }
.nav-links {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
}
/* 10px padding + 10px gap = Wix's 30px between labels. The padding is always
   there so the salmon pill for the current section appears without moving a
   single label. */
.nav-link {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  text-decoration: none; font-size: 14px; line-height: 18px;
  text-transform: uppercase; white-space: nowrap; color: #000;
  padding: 10px; border-radius: var(--radius);
  transition: background-color 0.08s linear;
}
.nav-link:hover { opacity: 0.6; }
.nav-link.is-active { background: #df796b; }
.btn-contact {
  margin-left: auto;
  display: grid; place-items: center;
  width: 100px; height: 38px; padding: 0;
  background: #000; color: #fff; text-decoration: none;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; font-weight: 700; line-height: 1;
  border-radius: var(--radius); white-space: nowrap;
}
.nav-toggle { display: none; }

/* ---------- hero ----------
   Headline metrics are Wix's own: helvetica at 7.1875vw, weight 400, leading
   1.0, tracking -0.03em, 7.5vw in and 25.9vw down — all width-relative, so the
   composition holds at any desktop size. The top is capped so a very wide,
   short window cannot push the second line below the fold.

   The circular shrink on scroll lives in main.js; clip-path sits on .hero so
   the headline is clipped along with the video, as on Wix. */
.hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: rgba(20, 28, 60, 0.28); }
.hero-text {
  position: absolute; left: 7.5vw;
  top: min(25.9vw, calc(100% - 14.375vw - 48px));
}
.hero-text h1 {
  color: #fff; margin: 0;
  font-size: 7.1875vw; font-weight: 400; line-height: 1;
  letter-spacing: -0.03em; white-space: nowrap;
}

/* ---------- sections ---------- */
.section { padding: 80px 0; }
.section.alt { background: var(--bg-alt); }
.page-top { padding-top: 150px; }

/* ---------- image gallery ----------
   Wix at 1440: 694 / 347 / 347 wide, 501 tall, rows 270 + 225 with a 5px
   gutter, 14px in from the left and 15px from the right. */
.gallery-section {
  padding: 6.04vw 1.04vw 0 0.972vw;
}
.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 18.75vw 15.625vw;
  gap: 0.347vw 0.8vw;
}
/* The salmon ground is the reveal's leading edge: the box wipes open first and
   the photo, clipped inside it, follows a beat behind. */
.gallery-item {
  overflow: hidden;
  position: relative;
  background: #df7162;
}

/* Reveal. Armed only by main.js, and only while the item is off-screen, so the
   photos are visible whenever scripting or the observer fails — an earlier
   version armed this in CSS and left a blank band down the page when the
   observer never fired.
   Each box wipes in a different direction (up, right, down, left) so the four
   together sweep around the grid. Transitions live on the visible state only,
   which makes arming instant and revealing animated. */
.gallery-grid.is-armed .gallery-item:not(.is-visible):nth-child(1) { clip-path: inset(100% 0 0 0); }
.gallery-grid.is-armed .gallery-item:not(.is-visible):nth-child(2) { clip-path: inset(0 100% 0 0); }
.gallery-grid.is-armed .gallery-item:not(.is-visible):nth-child(3) { clip-path: inset(0 0 100% 0); }
.gallery-grid.is-armed .gallery-item:not(.is-visible):nth-child(4) { clip-path: inset(0 0 0 100%); }
/* Only the two left-hand photos trail their box; the others open with it. */
.gallery-grid.is-armed .gallery-item:not(.is-visible):nth-child(-n+2) img { clip-path: inset(0 100% 0 0); }
.gallery-grid.is-armed .gallery-item.is-visible {
  clip-path: inset(0);
  transition: clip-path 0.6s cubic-bezier(0.86, 0, 0.07, 1);
}
.gallery-grid.is-armed .gallery-item.is-visible img {
  clip-path: inset(0);
  transition: clip-path 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-item:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.gallery-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.gallery-item:nth-child(3) { grid-column: 3; grid-row: 1 / 3; }
.gallery-item:nth-child(4) { grid-column: 2; grid-row: 2; }

/* ---------- research header ----------
   Wix at 1440: both lines 54px (3.75vw), leading 1.0, tracking -0.03em;
   title black, strapline #86868f. Starts 172px under the gallery, 110px in.
   The small blinking dot sits 14px from the edge on the title's centre line. */
.research-header {
  position: relative;
  padding: 12.08vw 0 1.93vw 7.64vw;
}
.section-dot {
  position: absolute; left: 0.972vw; top: calc(12.08vw + 1.875vw - 0.382vw);
  width: 0.764vw; height: 0.764vw; min-width: 8px; min-height: 8px;
  border-radius: 50%; background: #df7162;
  animation: vision-dot-blink 2s linear infinite;
}
.research-title, .research-sub {
  margin: 0; font-size: 3.75vw; font-weight: 400;
  line-height: 1; letter-spacing: -0.03em;
}
.research-sub { max-width: 80.7vw; color: #86868f; }

/* ---------- research: bubbles + cards ----------
   The bubble photo is a full-screen sticky layer; main.js grows a circle
   clip on it from 20% to 75% while the section scrolls in, so it opens into a
   pinned background. The cards come after it in normal flow and scroll up
   over it, each tipping back to edge-on as it nears the top (also main.js).
   Card spacing and insets are Wix's at 1440, in vw. */
.research-scroll { position: relative; }
.research-bg {
  position: sticky; top: 0; z-index: 1;
  height: 100vh; overflow: hidden;
}
.research-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.research-cards {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 3.125vw;
  padding: 19.93vw 1.53vw 19.93vw 1.6vw;
}
/* Columns: 388px run-in | 585px copy | slack | 339px square photo. The photo
   is bottom-anchored with 14px insets, so a card is as tall as its photo or
   its copy, whichever is taller. */
.research-card {
  position: relative;
  display: grid;
  grid-template-columns: 26.944vw 40.625vw 1fr 23.542vw;
  padding: 0.972vw 1.042vw 0.972vw 0;
  background: #f3f3f4;
  border-radius: 13.5px;
  transform-origin: center;
  backface-visibility: hidden;
}
.research-num {
  position: absolute; left: 1.042vw; bottom: 0.972vw;
  font-size: 7.1875vw; line-height: 1; letter-spacing: -0.03em; color: #86868f;
}
/* The copy column hangs from the bottom of the card: the rule sits a fixed
   180px (12.5vw) below the title's top, so longer copy grows the card upward
   instead of squeezing the gap. Card 1's copy is shorter than its photo, which
   is why its title starts lower than the other two on Wix. */
.research-body {
  grid-column: 2; align-self: end;
  margin-top: 1px;
}
.research-body h3 {
  margin: 0 0 10vw; font-size: 2.5vw; font-weight: 400; line-height: 1; letter-spacing: -0.03em;
}
.research-meta { border-top: 1px solid rgba(134, 134, 143, 0.4); padding-top: 18px; }
.research-count {
  margin: 0 0 17px;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.4; text-transform: uppercase;
}
.research-desc { margin: 0; font-size: 1.1719vw; line-height: 1.3; }
.research-img {
  grid-column: 4; align-self: end;
  width: 100%; aspect-ratio: 1; object-fit: cover;
}

/* ---------- values ----------
   Wix at 1440: heading row 86px under the research section and 87px above
   the tiles; the dot and title flip in together like the vision heading.
   Tiles are 344px squares on the gallery's 4-column grid with the first column
   left empty. Row 2 sits 126px below row 1, and Quality 4px lower than Purpose
   — copied as-is from Wix rather than tidied. Nothing here reveals on scroll;
   the squares are simply there, so they cannot get stuck hidden. */
.values-header { padding: 5.97vw 0 6.04vw; }
.values-head { position: relative; padding-left: 7.64vw; }
.values-head .section-dot { top: calc(1.875vw - 0.382vw); }
.values-title {
  margin: 0; font-size: 3.75vw; font-weight: 400; line-height: 1; letter-spacing: -0.03em;
}
.values-section { padding: 0 1.04vw 7.64vw 0.972vw; }
.values-grid {
  display: grid;
  /* minmax(0, …): a bare 1fr won't shrink below its content's minimum, which
     made the column holding "Innovation" 4px wider than the rest. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8.75vw 0.8vw;
}
.value-card {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 12px;
}
.value-card span {
  font-size: 3.959vw; line-height: 1; letter-spacing: -0.03em; color: #000;
}
.value-card:nth-child(1) { grid-area: 1 / 2; background: #df7162; fill: #fff; }
.value-card:nth-child(2) { grid-area: 1 / 3; background: #abbbcf; fill: #fdf397; }
.value-card:nth-child(3) { grid-area: 1 / 4; background: #fdf397; fill: #64646c; }
.value-card:nth-child(4) { grid-area: 2 / 2; background: #64646c; fill: #abbbcf; }
.value-card:nth-child(4) span { color: #fff; }
.value-card:nth-child(5) { grid-area: 2 / 3; background: #f3f3f4; fill: #000; margin-top: 0.278vw; }

/* Wix "spin": a full anticlockwise turn easing out over the first second,
   then two seconds at rest, forever. */
.value-icon {
  position: absolute; left: 0.972vw; top: 0.972vw;
  width: 1.25vw; height: 1.25vw;
  animation: value-spin 3s linear infinite;
}
.value-card:nth-child(1) .value-icon { width: 1.5625vw; height: 1.5625vw; }
@keyframes value-spin {
  0%   { transform: rotate(-360deg); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  33%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* ---------- careers ----------
   Wix at 1440: same heading metrics and 86px lead-in as the other sections;
   title and strapline flip in together. Job rows are 112px + a hairline, the
   title 198px in from the heading edge and the Apply pill 267px from the
   right.

   Hovering this section turns it — and the squares section directly above —
   black, with light text; leaving turns both back. Wix does this with a
   scripted hover "variant"; :has() gets the same result in CSS alone. Limited
   to devices that really hover, so a tap on a phone doesn't latch it dark. */
.careers-section {
  position: relative;
  padding: 5.97vw 0 6.04vw;
  background: #fff;
  transition: background-color 0.5s ease-in-out;
  /* Wix's cursor here: a black ring with a white centre. */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='24' height='24'%3E%3Cpath fill='%23010203' d='M180 100c0 44.183-35.817 80-80 80s-80-35.817-80-80 35.817-80 80-80 80 35.817 80 80z'/%3E%3Cpath fill='%23fff' d='M160 100c0 33.137-26.863 60-60 60s-60-26.863-60-60 26.863-60 60-60 60 26.863 60 60z'/%3E%3C/svg%3E") 12 12, auto;
}
.careers-section .section-dot { top: calc(5.97vw + 1.875vw - 0.382vw); }
.values-section { background: #fff; transition: background-color 0.5s ease-in-out; }
.careers-head { padding-left: 7.64vw; }
.careers-title, .careers-sub {
  margin: 0; font-size: 3.75vw; font-weight: 400; line-height: 1; letter-spacing: -0.03em;
  transition: color 0.1s ease-in-out;
}
.careers-sub { max-width: 91.39vw; color: #86868f; }
.jobs { margin: 6.25vw 0.972vw 0 7.64vw; }
/* The row box only spans title-to-pill; the hairline runs the full list width. */
.job {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  width: calc(13.75vw + 59.1vw); padding: 32px 0 32px 13.75vw;
  box-sizing: border-box;
}
.job::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 91.39vw; border-bottom: 1px solid rgba(134, 134, 143, 0.4);
}
.job h3 {
  margin: 0; font-size: 2.5vw; font-weight: 400; line-height: 1; letter-spacing: -0.03em;
  transition: color 0.1s ease-in-out;
}
@media (hover: hover) {
  .careers-section:hover,
  body:has(.careers-section:hover) .values-section { background: #000; }
  .careers-section:hover .careers-title,
  .careers-section:hover .job h3 { color: #fff; }
  .careers-section:hover .careers-sub { color: #abbbcf; }
}

/* Wix's Apply pill: label and circle-arrow pushed to the right of a fixed
   120px pill. The arrow sits at 315deg (pointing down-right) and swings to
   224deg on hover while the pill turns salmon — both over 0.2s. White on
   white until the section goes dark is intentional; that's how Wix reads. */
.btn-apply {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: flex-end;
  width: 120px; height: 48px; padding: 8px; box-sizing: border-box;
  border-radius: 50px; background: #fff; color: #000; text-decoration: none;
  transition: background-color 0.2s;
}
.btn-apply span {
  margin-right: 6px;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; font-weight: 700; line-height: 1.4; text-transform: uppercase;
}
.btn-apply svg {
  width: 32px; height: 32px; margin-left: 6px; flex-shrink: 0;
  fill: #000; transform: rotate(315deg); transition: transform 0.2s;
}
.btn-apply:hover { background: #df7162; }
.btn-apply:hover svg { transform: rotate(224deg); }
.btn-apply:focus-visible { outline: 2px solid #df7162; outline-offset: 3px; }

.btn-info, .btn-fetch {
  display: inline-block; background: #000; color: #fff; text-decoration: none;
  font-size: 13px; letter-spacing: 0.06em; padding: 11px 22px; border: 0;
  border-radius: 4px; cursor: pointer; font-family: inherit;
  transition: opacity 0.2s ease;
}
.btn-info:hover, .btn-fetch:hover { opacity: 0.85; }

/* ---------- blogs ----------
   Wix at 1440: black band, white "Blogs" 143px down. Two 431x374 salmon cards
   11px apart, flipping in together as one row. Inside: 34px top / 17px side /
   18px bottom padding, 36px white title, black Space Grotesk byline, and the
   Read Article link pinned to the bottom. */
.blogs-section {
  position: relative;
  padding: 9.97vw 0 5.97vw;
  background: #000; color: #fff;
}
.blogs-section .section-dot { top: calc(9.97vw + 1.875vw - 0.382vw); }
.blogs-title {
  margin: 0 0 0 7.64vw;
  font-size: 3.75vw; font-weight: 400; line-height: 1; letter-spacing: -0.03em;
}
.blog-grid {
  display: grid; grid-template-columns: repeat(2, 29.93vw); gap: 0.764vw;
  margin: 6.28vw 0 0 7.64vw;
}
.blog-card {
  display: flex; flex-direction: column;
  height: 25.97vw; padding: 2.36vw 1.18vw 1.25vw;
  background: #df7162; border-radius: 12px; box-sizing: border-box;
}
.blog-card h3 {
  margin: 0; color: #fff;
  font-size: 2.5vw; font-weight: 400; line-height: 1; letter-spacing: -0.03em;
}
.blog-meta {
  margin: 17px 0 0; color: #000;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.4;
}
/* Same pill and arrow as Apply, but flush-left on the card colour. Hover
   underlines the label and swings the arrow; the fill doesn't change. */
.btn-read {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center;
  width: 160px; height: 32px;
  color: #000; text-decoration: none; border-radius: 50px;
}
.btn-read span {
  margin-right: 6px;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; font-weight: 700; line-height: 1.4; text-transform: uppercase;
}
.btn-read svg {
  width: 32px; height: 32px; margin-left: 6px; flex-shrink: 0;
  fill: #000; transform: rotate(315deg); transition: transform 0.2s;
}
.btn-read:hover span { text-decoration: underline; }
.btn-read:hover svg { transform: rotate(224deg); }
.btn-read:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

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

/* ---------- products catalogue ----------
   Same system as the homepage: light Helvetica at 3.75vw with a grey strapline
   and the blinking dot, Space Grotesk for labels, #f3f3f4 cards at 12px, the
   rotated arrow that swings on hover. Built for scanning — composition and
   therapy area on every card, the whole card a link. */
.catalog-head {
  position: relative;
  padding: calc(2vw + 48px + 5.97vw) 7.64vw 0;
}
.catalog-head .section-dot { top: calc(2vw + 48px + 5.97vw + 1.875vw - 0.382vw); }
.catalog-title, .catalog-sub {
  margin: 0; font-size: 3.75vw; font-weight: 400; line-height: 1; letter-spacing: -0.03em;
  text-wrap: balance;
}
.catalog-sub { max-width: 80vw; color: #86868f; }

.catalog { padding: 4.2vw 7.64vw 5.97vw; }
.catalog-tools { display: flex; flex-direction: column; gap: 22px; }
.catalog-tools[hidden], .catalog-empty[hidden], .catalog-card[hidden] { display: none; }
.catalog-search {
  position: relative; display: block; max-width: 640px;
}
.catalog-search svg {
  position: absolute; left: 0; top: 50%; width: 22px; height: 22px; transform: translateY(-50%);
  fill: none; stroke: #000; stroke-width: 1.8; stroke-linecap: round;
}
.catalog-search input {
  width: 100%; height: 56px; padding: 0 0 0 36px;
  border: 0; border-bottom: 1px solid #000; border-radius: 0; background: transparent;
  font-family: inherit; font-size: clamp(18px, 1.56vw, 24px); letter-spacing: -0.01em; color: #000;
}
.catalog-search input::placeholder { color: #86868f; }
.catalog-search input:focus { outline: none; border-bottom-width: 2px; }
.catalog-search input::-webkit-search-cancel-button { cursor: pointer; }

.catalog-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: #f3f3f4; color: #000;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; font-size: 14px;
  transition: background-color 0.2s, color 0.2s;
}
.chip i, .catalog-cat i {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block;
}
.chip b { font-weight: 400; color: #86868f; font-variant-numeric: tabular-nums; }
.chip:hover { background: #e6eaf5; }
.chip.is-on { background: #000; color: #fff; }
.chip.is-on b { color: #abbbcf; }
.chip:focus-visible { outline: 2px solid #df7162; outline-offset: 2px; }

.catalog-count {
  margin: 34px 0 14px;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; text-transform: uppercase; color: #86868f;
}
.catalog-count:empty { margin-top: 0; }
.catalog-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.972vw;
}
.catalog-card {
  display: flex; flex-direction: column;
  padding: 10px 10px 16px; border-radius: 12px;
  background: #f3f3f4; color: #000; text-decoration: none;
  transition: background-color 0.3s;
}
/* Catalogue studio shots carry their own marble backdrop, so they fill a
   uniform 4:3 well edge to edge rather than floating on white. */
.catalog-img {
  display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: 8px; background: #fff;
}
.catalog-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.catalog-noimg { width: 34%; aspect-ratio: 1; border-radius: 50%; background: #f3f3f4; }
.catalog-cat {
  display: flex; align-items: center; gap: 8px; margin: 16px 6px 0;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #64646c;
}
.catalog-name {
  margin: 8px 6px 0;
  font-size: clamp(22px, 1.8vw, 30px); line-height: 1.05; letter-spacing: -0.03em;
}
.catalog-salt {
  margin: 8px 6px 0; min-height: 2.8em;
  font-size: 14px; line-height: 1.4; color: #86868f;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.catalog-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto; padding: 18px 6px 0;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
}
.catalog-cert {
  padding: 3px 9px; border-radius: 999px; background: #fff; color: #64646c;
}
.catalog-foot svg {
  width: 32px; height: 32px; margin-left: auto; flex-shrink: 0;
  fill: #000; transform: rotate(315deg); transition: transform 0.2s;
}
.catalog-card:hover { background: #e6eaf5; }
.catalog-card:hover .catalog-img img { transform: scale(1.05); }
.catalog-card:hover .catalog-foot svg { transform: rotate(224deg); }
.catalog-card:focus-visible { outline: 2px solid #df7162; outline-offset: 3px; }

.catalog-empty { padding: 56px 0 24px; }
.catalog-empty p { margin: 0 0 18px; font-size: clamp(22px, 1.8vw, 30px); letter-spacing: -0.02em; }
.catalog-reset {
  height: 39px; padding: 0 22px; border: 0; border-radius: 100px; cursor: pointer;
  background: #000; color: #fff;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 700;
  text-transform: uppercase;
}

/* "Holding a pack?" — the most common reason to be on this page, given its own
   band in the brand salmon so it separates the white catalogue from the black
   footer rather than reading as a second black form beside Contact Us. */
.verify-band {
  display: grid; grid-template-columns: minmax(0, 1fr) 42.36vw; gap: 4vw; align-items: end;
  margin: 0 0.972vw 5.97vw; padding: 5.97vw 6.67vw;
  border-radius: 12px; background: #df7162; color: #000;
}
.verify-title, .verify-sub {
  margin: 0; font-size: 3.75vw; font-weight: 400; line-height: 1; letter-spacing: -0.03em;
  text-wrap: balance;
}
.verify-title { color: #fff; }
.verify-form.cert-form { display: flex; flex-direction: column; gap: 22px; max-width: none; }
.verify-form label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.verify-form label span {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; font-size: 14px;
}
.verify-form.cert-form select, .verify-form.cert-form input {
  width: 100%; height: 40px; padding: 8px 0;
  border: 0; border-bottom: 1px solid #000; border-radius: 0; background: transparent;
  font-family: inherit; font-size: 17px; color: #000;
  -webkit-appearance: none; appearance: none;
}
.verify-form select {
  cursor: pointer; padding-right: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") right 4px center / 12px no-repeat;
}
.verify-form.cert-form input::placeholder { color: rgba(0, 0, 0, 0.55); }
.verify-form.cert-form select:focus, .verify-form.cert-form input:focus { outline: none; border-bottom-width: 2px; }
.verify-form .btn-submit { margin-top: 4px; background: #000; color: #fff; }
.verify-form .btn-submit:hover { background: #fff; color: #000; }
.verify-form .cert-msg { margin: 0; min-height: 0; font-size: 15px; color: #000; }
.verify-form .cert-msg:empty { display: none; }
/* White on salmon is ~3:1 — fine for the 54px title, not for a 15px error. */
.verify-form .cert-msg.is-error { color: #000; font-weight: 700; }

@media (min-width: 901px) and (max-width: 1200px) {
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
.verify-form .cert-msg.is-ok { color: #000; }

/* ---------- product detail page ----------
   Same system as the homepage and catalogue. Reads top-down as the questions
   a reader brings: what is it (name, generic name, pack facts, photo), what's
   in it (composition table), what's it for (uses), how does it work (one card
   per active), is it genuine (quality + verify this pack), then the full
   product copy and related products. */
.pdp { --pad: 7.64vw; }
.pdp [id] { scroll-margin-top: calc(2vw + 48px + 24px); }

.pdp-hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4vw; align-items: center;
  padding: calc(2vw + 48px + 3.5vw) var(--pad) 5.97vw;
}
.pdp-crumbs {
  display: flex; gap: 8px; margin: 0 0 28px;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: #86868f;
}
.pdp-crumbs a { color: #000; text-decoration: none; }
.pdp-crumbs a:hover { text-decoration: underline; }
.pdp-copy .catalog-cat { margin: 0 0 14px; font-size: 13px; }
.pdp-name {
  margin: 0; font-size: clamp(44px, 5.2vw, 92px); font-weight: 400;
  line-height: 0.95; letter-spacing: -0.035em; text-wrap: balance;
}
.pdp-generic {
  max-width: 34ch; margin: 18px 0 0;
  font-size: clamp(18px, 1.56vw, 24px); line-height: 1.25; letter-spacing: -0.01em; color: #86868f;
}
.pdp-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px;
  margin: 34px 0 0; border-top: 1px solid rgba(134, 134, 143, 0.4);
}
.pdp-facts div { padding: 14px 0; border-bottom: 1px solid rgba(134, 134, 143, 0.4); }
.pdp-facts dt {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #86868f;
}
.pdp-facts dd { margin: 4px 0 0; font-size: 17px; line-height: 1.3; }
.pdp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 32px; }
/* The site's pill-and-arrow, as a primary action. */
.pdp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 8px 0 22px; border-radius: 50px;
  background: #000; color: #fff; text-decoration: none;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s;
}
.pdp-btn svg { width: 32px; height: 32px; fill: #fff; transform: rotate(315deg); transition: transform 0.2s, fill 0.2s; }
.pdp-btn:hover { background: #df7162; color: #000; }
.pdp-btn:hover svg { fill: #000; transform: rotate(405deg); }
.pdp-btn:focus-visible, .pdp-link:focus-visible { outline: 2px solid #df7162; outline-offset: 3px; }
.pdp-link {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; font-size: 14px;
  text-transform: uppercase; color: #000; text-underline-offset: 4px;
}
.pdp-rx {
  padding: 5px 12px; border-radius: 999px; border: 1px solid #86868f;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; font-size: 12px; color: #64646c;
}
.pdp-shot {
  margin: 0; overflow: hidden; border-radius: 12px; background: #f3f3f4;
  aspect-ratio: 4 / 3;
}
.pdp-shot img { width: 100%; height: 100%; object-fit: cover; }
/* Pack artwork (no studio shot) is too wide for a 4:3 crop; show it whole. */
.pdp-shot.is-contain, .catalog-img.is-contain { background: #fff; }
.pdp-shot.is-contain img, .catalog-img.is-contain img { object-fit: contain; }

/* Section rhythm: hairline above, label on the left, content on the right. */
.pdp-band { padding: 4.2vw var(--pad); border-top: 1px solid rgba(134, 134, 143, 0.25); }
.pdp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4vw; }
.pdp-head h2 {
  display: flex; align-items: center; gap: 14px; margin: 0;
  font-size: clamp(28px, 2.5vw, 40px); font-weight: 400; line-height: 1; letter-spacing: -0.03em;
}
.pdp-head h2 i { width: 10px; height: 10px; border-radius: 50%; background: #df7162; flex-shrink: 0; }
.pdp-sub {
  margin: 10px 0 0 24px;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: #86868f;
}
.pdp-band:not(.pdp-split) .pdp-head { margin-bottom: 2.5vw; }

.pdp-comp { border-top: 1px solid #000; }
.pdp-comp-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 16px 0; border-bottom: 1px solid rgba(134, 134, 143, 0.4);
  font-size: clamp(19px, 1.67vw, 26px); letter-spacing: -0.02em;
}
.pdp-comp-row span:last-child {
  flex-shrink: 0; font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; letter-spacing: 0; font-variant-numeric: tabular-nums;
}

.pdp-uses, .pdp-quality { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pdp-uses li {
  padding: 11px 18px; border-radius: 999px; background: #f3f3f4;
  font-size: 17px; line-height: 1.2;
}

.pdp-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.972vw; }
.pdp-how-card { padding: 22px 22px 26px; border-radius: 12px; background: #f3f3f4; }
.pdp-how-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pdp-how-card h3 { margin: 0; font-size: clamp(22px, 1.8vw, 28px); font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; }
.pdp-dose {
  flex-shrink: 0; padding: 5px 11px; border-radius: 999px; background: #000; color: #fff;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; font-size: 13px; font-variant-numeric: tabular-nums;
}
.pdp-role {
  margin: 10px 0 18px;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #64646c;
}
.pdp-how-card ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pdp-how-card li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.4; }
.pdp-how-card li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px; border-radius: 50%; background: #df7162;
}

.pdp-quality li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 12px; border-radius: 999px; border: 1px solid rgba(134, 134, 143, 0.5);
  font-size: 16px;
}
.pdp-quality li::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: #df7162 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5 5.5-6' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.pdp-verify { margin-top: 0; }

.pdp-prose { max-width: 68ch; }
.pdp-prose .info-h {
  margin: 34px 0 10px;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; color: #86868f;
}
.pdp-prose .info-h:first-child, .pdp-note + .info-h { margin-top: 0; }
.pdp-prose p { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: #1a1a1a; }
.pdp-prose strong { font-weight: 600; }
.pdp-note {
  padding: 14px 18px; border-left: 3px solid #df7162; background: #f3f3f4; border-radius: 0 8px 8px 0;
  margin-bottom: 28px !important;
}
.pdp-prose .pdp-disclaimer { margin-top: 30px; font-size: 14px; line-height: 1.5; color: #86868f; }
.pdp-related .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cert-msg { margin: 0; font-size: 15px; min-height: 22px; }
.cert-msg.is-error { color: #c0392b; }
.cert-msg.is-ok { color: #1e7a45; }

.prose { margin-top: 56px; max-width: 78ch; }
.prose h3 { margin-top: 34px; }
.prose li { margin-bottom: 8px; }

/* ---------- contact + footer ----------
   Shared by every page (it lives in shell()). Wix at 1440:
   Contact: black band; white title over a blue-grey strapline, flipping in
   together; form 134px in and 610px wide — Space Grotesk label, a bare input
   with a single #f3f3f4 rule, an outlined 16px checkbox, and a 297x39 white
   Submit pill that turns blue-grey with an underlined label on hover.
   Footer: two white half-width panels (outer top corners rounded 24px) on
   black — logo with a vertical black rule on the left, nav + contact details
   on the right — then a white legal strip. */
.site-footer { background: #000; }
.contact-section {
  position: relative;
  padding: 5.97vw 0 7.64vw;
  color: #fff;
}
.contact-section .section-dot { top: calc(5.97vw + 1.875vw - 0.382vw); }
.contact-head { padding-left: 7.64vw; }
.contact-title, .contact-sub {
  margin: 0; font-size: 3.75vw; font-weight: 400; line-height: 1; letter-spacing: -0.03em;
}
.contact-sub { color: #abbbcf; }

.contact-form {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 42.36vw; margin: 5.35vw 0 0 9.31vw;
}
.contact-field { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.contact-field .lbl, .contact-check span { color: #fff; }
.contact-field .lbl {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.4;
}
.contact-field input {
  width: 100%; height: 34px; padding: 8px 14px 8px 0;
  border: 0; border-bottom: 1px solid #f3f3f4; border-radius: 0;
  background: transparent; color: #fff; caret-color: #fff;
  font-family: inherit; font-size: 13px; line-height: 1.3;
}
.contact-field input:focus { outline: none; border-bottom-width: 2px; }
.contact-check {
  display: flex; align-items: center; gap: 12px;
  margin-top: 24px; cursor: pointer;
  font-size: 13px; line-height: 1.5;
}
.contact-check input {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 16px; height: 16px; border: 1px solid #f3f3f4; background: transparent;
  cursor: pointer;
}
.contact-check input:checked {
  background: #f3f3f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.contact-check input:focus-visible, .contact-field input:focus-visible { outline: 2px solid #abbbcf; outline-offset: 2px; }
.btn-submit {
  width: 297px; height: 39px; margin-top: 24px;
  border: 0; border-radius: 100px; cursor: pointer;
  background: #fff; color: #000;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; font-weight: 700; line-height: 1.3; text-transform: uppercase;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.btn-submit:hover { background: #abbbcf; }
.btn-submit:hover span { text-decoration: underline; }
.btn-submit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.contact-msg { margin: 12px 0 0; font-size: 14px; color: #fff; }
.contact-msg:empty { display: none; }
.contact-msg.is-error { color: #f0847a; }
.contact-msg.is-ok { color: #abbbcf; }

.footer-panels {
  display: grid; grid-template-columns: 1fr 1fr;
  padding-top: 6.04vw;
}
.footer-panel { height: 28.125vw; background: #fff; }
.footer-brand { position: relative; border-radius: 24px 0 0 0; }
.footer-brand img { position: absolute; left: 8.19vw; top: 8.47vw; width: 33.6vw; height: auto; }
/* Wix's 2px vertical rule, just inside the left panel's right edge. */
.footer-brand::after {
  content: ""; position: absolute; left: 47.92vw; top: 4.44vw;
  width: 2px; height: 18.33vw; background: #000;
}
.footer-info {
  display: grid; grid-template-columns: 24.44vw 1fr; align-content: start;
  padding-top: 5.97vw; border-radius: 0 24px 0 0;
}
.footer-nav, .footer-contact {
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.4; font-style: normal; color: #000;
}
.footer-nav a {
  width: 23.06vw; color: #000; text-decoration: none; text-transform: uppercase;
  transition: background-color 0.2s;
}
/* Wix's vertical-menu hover: a pale lavender bar behind the item. */
.footer-nav a:hover { background: #e6eaf5; }
.footer-contact a { color: #000; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.footer-contact span + span { margin-top: 20px; }
.footer-legal {
  padding: 14px 0.972vw; background: #fff; color: #000;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.4;
}
.footer-legal p { margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav-links, .btn-contact { display: none; }
  .nav-pill { width: auto; height: auto; padding: 8px 16px; }
  .nav-logo img { height: 34px; }
  .site-header { top: 16px; justify-content: space-between; padding: 0 16px; }
  .nav-toggle {
    display: flex; flex-direction: column; gap: 5px; pointer-events: auto;
    background: rgba(255,255,255,0.9); border: 0; border-radius: 50%;
    width: 46px; height: 46px; align-items: center; justify-content: center; cursor: pointer;
  }
  .nav-toggle span { width: 20px; height: 2px; background: #000; display: block; }
  .nav-pill { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .site-header.is-open .nav-menu {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 64px; right: 16px; left: auto;
    min-width: 210px; max-width: calc(100vw - 32px);
    background: #fff; padding: 20px 24px; border-radius: 14px; gap: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.14); pointer-events: auto;
  }
  .site-header.is-open .nav-links {
    display: flex; flex-direction: column; gap: 16px; position: static; transform: none;
  }
  .site-header.is-open .nav-link { white-space: nowrap; text-align: center; }
  .site-header.is-open .btn-contact { display: block; text-align: center; }
  .section { padding: 64px 0; }
  .page-top { padding-top: 120px; }

  /* Product page: photo first, then the facts; every band stacks. */
  .pdp { --pad: 20px; }
  .pdp-hero { grid-template-columns: 1fr; gap: 26px; padding: 96px 20px 44px; }
  .pdp-shot { order: -1; }
  .pdp-crumbs { margin-bottom: 18px; }
  .pdp-name { font-size: 44px; }
  .pdp-facts { margin-top: 24px; }
  .pdp-band { padding: 40px 20px; }
  .pdp-split { grid-template-columns: 1fr; gap: 20px; }
  .pdp-band:not(.pdp-split) .pdp-head { margin-bottom: 20px; }
  .pdp-how { gap: 10px; }
  .pdp-uses li { font-size: 15px; padding: 9px 14px; }
  .pdp-related .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-verify { margin: 0 12px 0; }
  .hero { height: 78vh; }
  /* 7.19vw is ~28px on a phone; hold a readable floor and let it wrap. */
  .hero-text { left: 24px; right: 24px; top: auto; bottom: 18%; }
  .hero-text h1 { font-size: max(7.1875vw, 44px); white-space: normal; }

  /* Gallery stacks to 2 columns on mobile */
  .gallery-section { padding: 40px 8px 0; }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    height: 50vh;
    max-height: 400px;
  }
  .gallery-item:nth-child(1) { grid-column: 1; grid-row: 1; }
  .gallery-item:nth-child(2) { grid-column: 2; grid-row: 1; }
  .gallery-item:nth-child(3) { grid-column: 1; grid-row: 2; }
  .gallery-item:nth-child(4) { grid-column: 2; grid-row: 2; }

  /* Research — vw type is unreadable on a phone; stack each card as
     title, rule, count, copy, then photo, with the number top-right beside
     the title (not over the photo). */
  .research-header { padding: 64px 24px 24px 32px; }
  .section-dot { left: 12px; top: calc(64px + 17px - 4px); }
  .research-title, .research-sub { font-size: 34px; }
  .research-sub { max-width: none; }
  .research-cards { gap: 24px; padding: 30vh 12px; }
  .research-card { grid-template-columns: 1fr; gap: 20px; padding: 16px; }
  .research-num { left: auto; right: 20px; top: 12px; bottom: auto; font-size: 56px; }
  .research-img { grid-column: 1; grid-row: 2; }
  .research-body { grid-column: 1; grid-row: 1; margin: 0; }
  .research-body h3 { margin-bottom: 20px; font-size: 28px; padding-right: 48px; }
  .research-desc { font-size: 16px; }

  /* Vision stacks on mobile: dot beside the heading, paragraphs full width. */
  .vision-section { padding: 56px 24px 0; }
  .vision-layout { grid-template-columns: 28px 1fr; gap: 14px 16px; }
  .vision-dot { width: 28px; height: 28px; margin: 0; }
  .vision-heading { max-width: none; font-size: 38px; }
  .vision-lead, .vision-body {
    grid-column: 1 / -1; width: auto; font-size: 18px; text-align: left;
  }
  .vision-lead { margin-top: 6px; }

  /* Values */
  /* Values: drop the empty first column and stagger; plain 2-up tiles. */
  .values-header { padding: 64px 24px 24px; }
  .values-head { padding-left: 8px; }
  .values-head .section-dot { left: -12px; top: calc(17px - 4px); }
  .values-title { font-size: 34px; }
  .values-section { padding: 0 12px 64px; }
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .value-card:nth-child(n) { grid-area: auto; margin-top: 0; }
  .value-card span { font-size: 26px; }
  .value-icon,
  .value-card:nth-child(1) .value-icon { left: 12px; top: 12px; width: 16px; height: 16px; }

  /* Careers: readable type, rows full width with the pill under the title. */
  .careers-section { padding: 64px 0; }
  .careers-section .section-dot { left: 12px; top: calc(64px + 17px - 4px); }
  .careers-head { padding: 0 24px 0 32px; }
  .careers-title, .careers-sub { font-size: 34px; }
  .careers-sub { max-width: none; }
  .jobs { margin: 40px 16px 0 32px; }
  .job { width: auto; padding: 24px 0; flex-wrap: wrap; gap: 14px; }
  .job::after { width: 100%; }
  .job h3 { font-size: 24px; }

  /* Blogs: cards full width, stacked; height follows the copy. */
  .blogs-section { padding: 64px 16px; }
  .blogs-section .section-dot { left: 12px; top: calc(64px + 17px - 4px); }
  .blogs-title { margin-left: 16px; font-size: 34px; }
  .blog-grid { grid-template-columns: 1fr; gap: 12px; margin: 32px 0 0; }
  .blog-card { height: auto; min-height: 260px; padding: 24px 18px 18px; }
  .blog-card h3 { font-size: 26px; }
  .btn-read { margin-top: 28px; }

  /* Contact + footer: form full width; panels stack, logo panel shorter. */
  .contact-section { padding: 64px 24px; }
  .contact-section .section-dot { left: 12px; top: calc(64px + 17px - 4px); }
  .contact-head { padding-left: 8px; }
  .contact-title, .contact-sub { font-size: 34px; }
  .contact-form { width: auto; margin: 36px 0 0 8px; }
  .btn-submit { width: 100%; max-width: 297px; }
  .footer-panels { grid-template-columns: 1fr; padding-top: 0; }
  .footer-panel { height: auto; }
  .footer-brand { padding: 40px 24px; border-radius: 24px 24px 0 0; }
  .footer-brand img { position: static; width: 60%; max-width: 260px; }
  .footer-brand::after { display: none; }
  .footer-info { grid-template-columns: 1fr; gap: 24px; padding: 8px 24px 32px; border-radius: 0; }
  .footer-nav a { width: 100%; padding: 4px 0; }
  .footer-legal { padding: 14px 24px; }

  /* Catalogue: two-up cards stay scannable on a phone; the certified pill
     drops (the arrow still says "tap"), and the verify band stacks. */
  .catalog-head { padding: 104px 24px 0 32px; }
  .catalog-head .section-dot { left: 12px; top: calc(104px + 17px - 4px); }
  .catalog-title { font-size: 38px; }
  .catalog-sub { max-width: none; margin-top: 6px; font-size: 22px; line-height: 1.15; }
  .catalog { padding: 28px 12px 48px; }
  .catalog-tools { gap: 16px; padding: 0 12px; }
  .catalog-search input { height: 50px; font-size: 16px; }
  .catalog-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px; padding: 0 24px 4px; scrollbar-width: none; }
  .catalog-chips::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; }
  .catalog-count { margin: 24px 12px 10px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .catalog-card { padding: 6px 6px 12px; }
  .catalog-cat { margin: 12px 4px 0; font-size: 10px; }
  .catalog-name { margin: 6px 4px 0; font-size: 19px; }
  .catalog-salt { margin: 6px 4px 0; font-size: 12px; }
  .catalog-foot { padding: 12px 4px 0; font-size: 10px; }
  .catalog-cert { display: none; }
  .catalog-foot svg { width: 26px; height: 26px; }
  .verify-band { grid-template-columns: 1fr; gap: 28px; margin: 0 12px 48px; padding: 36px 22px; }
  .verify-title { font-size: 34px; }
  .verify-sub { margin-top: 6px; font-size: 22px; line-height: 1.15; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-flip,
  .reveal-clip-up,
  .reveal-clip-left,
  .reveal-clip-right {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .vision-dot, .section-dot, .value-icon { animation: none; }
}