/* ============================================================
   Wintroma — Diamond Masterpieces. Reimagined.

   1. Tokens      5. Hero        9. Sustainability  13. Contact
   2. Base        6. About      10. Process         14. Footer
   3. Utilities   7. Features   11. Certification   15. Overlays
   4. Header      8. Cuts       12. Promises        16. Responsive
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* light */
  --paper:     #faf8f4;
  --paper-2:   #f3efe6;
  --ink:       #17140f;
  --ink-2:     #3a342b;
  --muted:     #6d6459;
  --line:      rgba(23, 20, 15, .13);

  /* dark — deep navy, picked to sit under the blue globe in the emblem */
  --night:     #0a1a40;
  --night-2:   #11265a;
  --on-night:  #eef1f8;
  --on-night-muted: #a6b3d0;
  --line-dark: rgba(212, 183, 106, .26);

  /* accent */
  --gold:      #b08d3f;
  --gold-lt:   #d4b76a;
  --gold-dim:  rgba(176, 141, 63, .3);

  --font-display: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;

  --shell: 1280px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 400;          /* Inter 300 is too light on navy */
  line-height: 1.72;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--font-display); font-weight: 400; line-height: 1.18; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; fill: currentColor; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 10px 18px; background: var(--night); color: var(--gold-lt);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------- 3. Utilities ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 32px; }

.band { padding-block: 82px; }
.band--paper { background: var(--paper-2); }
.band--dark {
  background:
    radial-gradient(90% 70% at 50% 0%, #14306c 0%, transparent 70%),
    var(--night);
  color: var(--on-night-muted);
}
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: var(--on-night); }

.eyebrow {
  font-size: .7rem; font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase;
}
.eyebrow--gold { color: var(--gold-lt); }

.rule { width: 60px; height: 1px; margin-block: 26px; background: var(--gold); }
.rule--gold { background: linear-gradient(90deg, var(--gold-lt), transparent); }

.section-title {
  margin-bottom: 12px;
  font-size: clamp(1.7rem, 3.1vw, 2.6rem);
  letter-spacing: .04em;
  text-align: center;
}
.section-title em { color: var(--gold); font-style: italic; }
.section-title::after {
  content: "";
  display: block;
  width: 58px; height: 1px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.section-title--left { text-align: left; }
.section-title--left::after { margin-inline: 0; background: var(--gold); }

.section-note {
  max-width: 52ch;
  margin: 0 auto 48px;
  color: var(--muted);
  font-size: .92rem;
  text-align: center;
}
.band--dark .section-note { color: var(--on-night-muted); }
.section-title + .grid, .section-title + .cuts, .section-title + .carousel,
.section-title + .process, .section-title + .certs { margin-top: 50px; }

.lede { color: var(--ink); font-size: 1.1rem; line-height: 1.6; }
.band--dark .lede { color: var(--on-night); }

.grid { display: grid; gap: 34px; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 30px;
  background: var(--gold);
  color: #0a1a40;
  font-size: .7rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn .ico { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover { background: var(--gold-lt); transform: translateY(-2px); }
.btn:hover .ico { transform: translateX(4px); }

.btn--ghost { background: transparent; color: var(--gold-lt); border: 1px solid var(--gold-dim); }
.btn--ghost:hover { background: var(--gold); color: #0a1a40; border-color: var(--gold); }
.btn--sm { padding: 11px 22px; font-size: .63rem; }

/* checked lists */
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-top: 11px;
  font-size: .92rem;
}
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.ticks--gold li { color: var(--on-night); }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 4. Header ---------- */
.header {
  position: sticky; top: 0; z-index: 90;
  /* Solid, not frosted: `backdrop-filter` creates a stacking context and a
     semi-transparent ground, which breaks the emblem's screen blend and leaves a
     visible black box around the mark. */
  background: var(--night);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.header.is-stuck { background: #081534; border-bottom-color: var(--line-dark); }

.header__inner {
  display: flex; align-items: center; gap: 26px;
  min-height: 122px;
  transition: min-height .3s var(--ease);
}
.header.is-stuck .header__inner { min-height: 86px; }

/* logo — both header and footer show the complete lockup exactly as supplied.
   `screen` drops its black ground on the navy while preserving every facet. */
.logo { display: block; flex: none; }
.logo img {
  width: 300px; height: auto;
  mix-blend-mode: screen;
  transition: width .3s var(--ease);
}
.logo--footer img { width: 340px; }

/* The tagline inside the artwork is only legible at this width, which makes for a
   tall header. It shrinks once you scroll so it stops eating the viewport. */
.header.is-stuck .logo img { width: 208px; }

/* nav */
.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: 26px; }
.nav__link {
  position: relative;
  padding: 6px 0;
  color: var(--on-night-muted);
  font-size: .68rem; letter-spacing: .17em; text-transform: uppercase;
  transition: color .25s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover { color: var(--on-night); }
.nav__link.is-active { color: var(--gold-lt); }
.nav__link.is-active::after, .nav__link:hover::after { transform: scaleX(1); }

.header__tools { display: flex; align-items: center; gap: 10px; }

.burger { display: none; width: 40px; height: 40px; padding: 10px 8px; }
.burger span {
  display: block; height: 1px; margin: 5px 0;
  background: var(--on-night);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 5. Hero ---------- */
.hero { position: relative; padding-block: 0; overflow: hidden; }
/* The artwork is positioned against this rather than the whole section, so it stops
   above the plaque instead of running behind it and losing the base of the stone. */
.hero__stage { position: relative; }
.hero__inner {
  position: relative;
  z-index: 2;
  display: block;
  min-height: min(620px, 78vh);
  padding-block: 84px 56px;
}
/* 50% not 46%: at 46% the headline broke onto a third line with "Vision." alone.
   The artwork's mask is still near-fully transparent this far left, so the copy can
   safely reach past the image's nominal edge. */
.hero__copy { max-width: 50%; }

.hero__title {
  margin-top: 22px;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 300;
  letter-spacing: .01em;
}
.hero__title em { color: var(--gold-lt); font-style: italic; }
.hero__lede { color: var(--on-night-muted); font-size: 1.05rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Artwork fills the right half, bleeding off the edge. The gradient masks its
   left side into the navy so there is no hard seam against the copy. */
/* The artwork is faded out with a mask rather than covered by a matching gradient.
   An overlay would have to match the band behind it, and that band is itself a
   gradient (lighter towards the top centre) — so a solid `--night` overlay left a
   visible vertical seam at the image's edge. Masking makes the image genuinely
   transparent, so whatever is behind simply shows through and there is nothing to
   match. Two nested masks compose without needing `mask-composite`: the wrapper
   fades the bottom, the image fades the left. */
.hero__media {
  position: absolute; inset: 0 0 auto auto;
  z-index: 1;
  width: 58%; height: 100%;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 26%);
  mask-image: linear-gradient(to top, transparent 0%, #000 26%);
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 44%;
  /* Reaches full opacity by 20%, before the stone begins at about 25% across.
     The previous fade ran to 68%, which left the heart half-transparent and let
     the navy wash blue over it. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .4) 7%, rgba(0, 0, 0, .85) 14%, #000 20%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .4) 7%, rgba(0, 0, 0, .85) 14%, #000 20%);
}

.hero__stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: 30px;
  border-top: 1px solid var(--line-dark);
}
.hero__stats li { padding-inline: 30px; text-align: center; }
.hero__stats li + li { border-left: 1px solid var(--line-dark); }
.hero__stats strong {
  display: block;
  color: var(--gold-lt);
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 400; line-height: 1.2;
}
.hero__stats span {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
}

/* The engagement-ring claim below the hero buttons. Separated by a hairline rather
   than a box so it reads as a footnote to the hero, not a second card. */
/* Engagement-ring callout: gold panel in the hero copy column, sized to the measure
   of the text above it. Set in the body sans rather than the display italic — on a
   light gold ground a plain face is easier to read than a high-contrast serif. */
.pledge {
  max-width: 58ch;
  margin-top: 34px;
  padding: 20px 24px;
  background: linear-gradient(#f5deaa 0%, #ddba6d 46%, #d0a952 60%, #eed69c 100%);
  border: 1px solid #a37c2c;
  box-shadow: inset 0 0 0 1px rgba(255, 246, 220, .55);
}
.pledge__name {
  color: #6d1c1c;
  /* Larger than a label, and centred over the claim as a panel title. Tracking is
     eased off from .2em because wide letterspacing gets loose at this size. */
  font-size: clamp(.98rem, 1.35vw, 1.12rem); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  text-align: center;
}
.pledge__claim {
  margin-top: 12px;
  color: #5c1f1f;
  font-size: .98rem; line-height: 1.58;
}

.pledge__formula { margin-top: 26px; }
/* Beauty + Love + ... = Wintroma. Laid out as flex so the operators keep even
   spacing and the line wraps cleanly on narrow screens. */
.pledge__formula {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 9px;
  margin-top: 16px;
  color: var(--on-night-muted);
  font-size: .68rem;
  letter-spacing: .17em; text-transform: uppercase;
}
.pledge__formula i,
.pledge__formula b { color: var(--gold); font-style: normal; font-weight: 400; }
/* Keeps "= Wintroma" together, so a wrap can never orphan the equals sign */
.pledge__sum { display: inline-flex; align-items: baseline; gap: 9px; }
.pledge__formula em {
  color: var(--gold-lt);
  font-family: var(--font-display);
  font-size: 1.05rem; font-style: normal;
  letter-spacing: .2em;
}

/* ---------- 6. About ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.about__copy p + p { margin-top: 18px; }
.about__copy .lede { margin-top: 32px; }

.stat-card {
  padding: 40px 34px;
  text-align: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  outline: 1px solid var(--gold-dim);
  outline-offset: 7px;
}
.stat-card__ico { width: 34px; height: 34px; margin: 0 auto 18px; color: var(--gold); fill: currentColor; }
.stat-card__figure {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 3.4rem; line-height: 1;
}
.stat-card__label {
  margin-top: 10px;
  color: var(--gold);
  font-size: .66rem; letter-spacing: .24em; text-transform: uppercase;
}
.stat-card__note { margin-top: 16px; color: var(--muted); font-size: .88rem; }

/* ---------- 7. Feature grids ---------- */
.feature { text-align: center; }
.feature__ico {
  width: 40px; height: 40px;
  margin: 0 auto 20px;
  color: var(--gold);
  fill: currentColor;
  transition: transform .4s var(--ease);
}
.feature:hover .feature__ico { transform: translateY(-5px); }
.feature h3 {
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
}
.feature h3::after {
  content: "";
  display: block;
  width: 26px; height: 1px;
  margin: 14px auto;
  background: var(--gold-dim);
}
.feature p { color: var(--muted); font-size: .88rem; line-height: 1.6; }

/* A short pre-line above the description, used where the copy has a strapline
   before its explanation (Precision, Passion). */
.feature__lead {
  margin-bottom: 8px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1rem; font-style: italic;
  line-height: 1.35;
}
/* Numbered reasons: the counter sits above the icon as a quiet index. */
.feature__num {
  display: block;
  margin-bottom: 6px;
  color: rgba(176, 141, 63, .55);
  font-family: var(--font-display);
  font-size: 1.6rem; line-height: 1;
}
.feature--numbered .feature__ico { margin-bottom: 16px; }
/* The gold italic line that sits between a section title and its lede.
   Shared by About and For Jewellery Brands. */
.section-tagline {
  margin-top: 22px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem); font-style: italic;
}
.band--dark .section-tagline { color: var(--gold-lt); }
.about__copy .lede { margin-top: 14px; }
.band--dark .feature p { color: var(--on-night-muted); }

/* ---------- Collections carousel ---------- */
.carousel { --per: 4; --gap: 20px; }

.carousel__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;              /* the dots and arrows are the affordance */
  -ms-overflow-style: none;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

.carousel__track { display: flex; gap: var(--gap); }

.slide {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  scroll-snap-align: start;
}
.slide figure { margin: 0; }

.slide__art {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1;
  min-height: 0;                      /* stop content forcing the box past square */
  padding: 7%;
}
.slide__art::before {                 /* seats the stone on the band */
  content: "";
  position: absolute; inset: 8%;
  background: radial-gradient(closest-side, rgba(120, 165, 255, .16), transparent 72%);
}
/* The image is its own square box and object-fit letterboxes the stone inside it.
   Deliberately no percentage height: `height: 100%` against a parent sized by
   aspect-ratio resolves as indefinite, which let the tallest stone — the penguin —
   stretch its slide and drag the caption out of line with the rest of the row. */
.slide__art img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .6));
  transition: transform .5s var(--ease);
}
.slide:hover .slide__art img { transform: scale(1.05); }

.slide__name {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 18px;
  color: var(--on-night);
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
}
.slide__name::before, .slide__name::after { content: ""; width: 16px; height: 1px; background: var(--gold-dim); }

.carousel__controls {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  margin-top: 38px;
}
.carousel__btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--gold-lt);
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.carousel__btn[data-dir="-1"] .ico { transform: scaleX(-1); }
.carousel__btn:hover:not(:disabled) { background: var(--gold); color: #0a1a40; border-color: var(--gold); }
.carousel__btn:disabled { opacity: .28; cursor: default; }

.carousel__dots { display: flex; align-items: center; gap: 9px; }
.carousel__dots button {
  display: block;
  width: 7px; height: 7px;
  padding: 0;
  background: var(--on-night-muted);
  border-radius: 50%;
  opacity: .4;
  transition: opacity .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.carousel__dots button:hover { opacity: .8; }
.carousel__dots button[aria-current="true"] {
  background: var(--gold-lt);
  opacity: 1;
  transform: scale(1.5);
}

/* ---------- 8. Diamond cuts ---------- */
.cuts {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 26px 14px;
}
.cut { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* Cutouts are transparent, so the stones sit straight on the ivory with no frame.
   Warmer, shorter shadow than the carousel — a heavy black shadow reads as dirt on
   a light background. */
.cut__art {
  display: grid; place-items: center;
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  padding: 5%;
  transition: transform .3s var(--ease);
}
.cut__art img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(72, 58, 38, .3));
  transition: transform .4s var(--ease), filter .3s var(--ease);
}
.cut:hover .cut__art { transform: translateY(-6px); }
.cut:hover .cut__art img {
  transform: scale(1.06);
  filter: drop-shadow(0 16px 20px rgba(72, 58, 38, .38));
}

.cut__name { color: var(--muted); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; }
.cut:hover .cut__name { color: var(--gold); }

/* ---------- 9. Sustainability ---------- */
.eco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.eco__seal { width: 32px; height: 32px; margin-bottom: 22px; color: var(--gold); fill: currentColor; }
.eco__copy > p { margin-top: 26px; color: var(--muted); }

/* Each point now carries a description, so they stack as rows rather than sitting
   side by side in a narrow column. */
.values { margin-top: 34px; border-top: 1px solid var(--line); }
.value { display: flex; gap: 18px; padding-block: 22px; }
.value + .value { border-top: 1px solid var(--line); }
.value__ico {
  flex: none;
  width: 28px; height: 28px;
  color: var(--gold); fill: currentColor;
  transition: transform .4s var(--ease);
}
.value:hover .value__ico { transform: translateY(-3px); }
.value h3 {
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}
.value p { margin-top: 7px; color: var(--muted); font-size: .86rem; line-height: 1.6; }

.eco__panel {
  position: relative;
  margin: 0;
  /* 4:3 keeps the crop close to the photo's own 3:2. Letting the panel stretch to
     the copy's height made it near-square, which cropped a third of the width away
     and pushed the ring under the quote. */
  aspect-ratio: 4 / 3;
}
/* The photo is feathered into the ivory with a mask rather than sitting as a hard
   rectangle. The scrim lives inside the same masked wrapper so it fades with the
   image; the quote is a sibling, so it stays fully opaque and legible. */
/* Feathered on all four edges so the photo melts into the ivory instead of sitting
   as a hard rectangle. Split across two elements — horizontal on the wrapper,
   vertical on the image and scrim — so no `mask-composite` support is needed. A
   single radial mask was tried first and read as an oval blob rather than a
   soft-edged photograph. */
.eco__media {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 88%, transparent 100%);
}
.eco__media img,
.eco__media::after {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%);
}
.eco__media img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 52%; }
.eco__media::after {
  content: ""; position: absolute; inset: 0;
  /* Bottom-anchored, because the quote sits along the bottom now. */
  background: linear-gradient(to top, rgba(4, 16, 5, .88) 0%, rgba(4, 16, 5, .55) 26%, rgba(4, 16, 5, .12) 52%, transparent 68%);
}
/* Along the bottom rather than centred on the right: the ring is the focal point
   and the crop cannot shift it far enough sideways to clear a right-hand quote. */
.eco__quote {
  position: absolute; left: 8%; right: 8%; bottom: 7%;
  z-index: 2;
  margin: 0;
  color: #fff;
}
.eco__quote-mark { width: 24px; height: 24px; margin-bottom: 10px; fill: rgba(255, 255, 255, .6); }
.eco__quote p { font-family: var(--font-display); font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.35; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.eco__quote p::after {
  content: ""; display: block;
  width: 44px; height: 1px; margin-top: 18px;
  background: rgba(255, 255, 255, .5);
}

/* ---------- 10. Process ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}
.step { position: relative; padding: 6px 24px; text-align: center; }
.step + .step { border-left: 1px solid var(--line); }
.step__num {
  display: block;
  color: var(--gold-dim);
  font-family: var(--font-display);
  font-size: 2rem; line-height: 1;
}
.step__ico { width: 40px; height: 40px; margin: 16px auto 18px; color: var(--gold); fill: currentColor; transition: transform .4s var(--ease); }
.step:hover .step__ico { transform: translateY(-5px); }
.step h3 {
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
}
.step p { margin-top: 10px; color: var(--muted); font-size: .82rem; line-height: 1.6; }

/* ---------- 11. Certification ---------- */
.certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.cert { padding: 38px 36px; background: var(--paper-2); border: 1px solid var(--line); }
.cert__head {
  display: flex; align-items: center; gap: 18px;
  padding-bottom: 22px; margin-bottom: 8px;
  border-bottom: 1px solid var(--gold-dim);
}
/* The real GIA and IGI marks replace the generic icons. Both are gold seal + dark
   type, which needs the ivory card behind them — they would vanish on navy. */
.cert__logo { flex: none; width: auto; height: 46px; }
/* The logo art is the wordmark, so the heading is only the institute's full name. */
.cert__head h3 {
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}

.cert__role {
  margin-top: 18px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.05rem; font-style: italic;
}
.cert__role + .ticks { margin-top: 4px; }

.cert-note {
  margin-top: 30px; padding: 36px 40px;
  text-align: center;
  border: 1px solid var(--gold-dim);
}
.cert-note h3 { font-size: 1.5rem; }
.cert-note > p { max-width: 74ch; margin: 14px auto 0; color: var(--muted); font-size: .92rem; }
.cert-note .cert-note__strap {
  max-width: none;
  margin-top: 26px; padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-style: italic;
}

/* ---------- 12. Promises ---------- */
.promises { padding-block: 44px; }
.promise { display: flex; align-items: center; gap: 16px; }
.promise__ico { flex: none; width: 32px; height: 32px; color: var(--gold); fill: currentColor; }
.promise h3 {
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
}
.promise p { margin-top: 4px; color: var(--muted); font-size: .78rem; line-height: 1.5; }

/* ---------- 13. Contact ---------- */
.brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; }
.brands__copy .lede { margin-block: 14px 26px; }
.brands__pitch { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-style: italic; font-weight: 300; }

.contacts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 24px;
  margin-top: 40px; padding-top: 34px;
  border-top: 1px solid var(--line-dark);
}
.contacts li { display: grid; justify-items: start; gap: 6px; }
.contacts .ico { width: 26px; height: 26px; color: var(--gold); }
.contacts__label { color: var(--gold-lt); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; }
.contacts a { color: var(--on-night); font-size: .92rem; transition: color .25s var(--ease); }
.contacts a:hover { color: var(--gold-lt); }

/* gold assurance bar */
.assure { background: linear-gradient(90deg, #9c7a30, var(--gold-lt) 50%, #9c7a30); color: #14110b; }
.assure__list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 44px;
  padding-block: 15px;
}
.assure__list li {
  display: flex; align-items: center; gap: 9px;
  font-size: .65rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
}
.assure__list .ico { width: 16px; height: 16px; }

/* ---------- 14. Footer ---------- */
.footer { padding-block: 62px 34px; background: var(--night); color: var(--on-night-muted); }
.footer__grid {
  display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 40px;
  align-items: start;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line-dark);
}
.footer__col h4 {
  margin-bottom: 20px;
  color: var(--on-night);
  font-family: var(--font-body);
  font-size: .64rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.footer__col li + li { margin-top: 10px; }
.footer__col a { font-size: .85rem; transition: color .25s var(--ease); }
.footer__col a:hover { color: var(--gold-lt); }

.socials { display: flex; gap: 12px; }
.socials li + li { margin-top: 0; }
.socials a {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  color: var(--gold-lt);
  border: 1px solid var(--line-dark);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.socials a:hover { background: var(--gold); color: #0a1a40; transform: translateY(-3px); }
.socials .ico { width: 17px; height: 17px; }

.footer__legacy {
  padding-top: 34px;
  color: var(--gold-lt);
  font-family: var(--font-display);
  font-size: 1.1rem; font-style: italic;
  text-align: center;
}
.footer__legal { margin-top: 12px; font-size: .66rem; letter-spacing: .1em; text-align: center; }

/* ---------- 15. Overlays ---------- */
body.is-locked { overflow: hidden; }

/* ---------- 16. Responsive ---------- */
@media (max-width: 1180px) {
  .nav__list { gap: 18px; }
  .nav__link { font-size: .63rem; letter-spacing: .13em; }
}

@media (max-width: 1080px) {
  .band { padding-block: 64px; }

  .carousel { --per: 3; }
  .cuts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 0; }
  .step:nth-child(4) { border-left: 0; }
  .about { grid-template-columns: 1fr; gap: 44px; }
  .brands { grid-template-columns: 1fr; gap: 46px; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }
  .header__inner { min-height: 98px; }
  .header.is-stuck .header__inner { min-height: 76px; }
  .burger { display: block; }
  .header__cta { display: none; }
  /* .nav goes position:fixed here and .header__cta is hidden, so nothing is left
     to push the burger over — pin it to the right edge itself. */
  .header__tools { margin-left: auto; margin-right: -8px; }

  .nav {
    position: fixed; left: 0; right: 0; top: 72px;
    max-height: 0;
    margin: 0;
    background: var(--night-2);
    overflow: hidden;
    transition: max-height .4s var(--ease);
  }
  .nav.is-open { max-height: 70vh; overflow-y: auto; border-bottom: 1px solid var(--line-dark); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 32px 18px; }
  .nav__list li + li { border-top: 1px solid var(--line-dark); }
  .nav__link { display: block; padding: 15px 0; font-size: .74rem; }
  .nav__link::after { display: none; }

  /* The desktop min-height leaves a dead gap once the artwork stacks below. */
  .hero__inner { min-height: 0; padding-block: 40px 26px; }
  .hero__copy { max-width: none; }
  .hero__media {
    position: relative; inset: auto;
    /* Taller than a typical banner: the artwork is a square with the heart stacked
       above the globe, so a short strip crops the top of the heart off. */
    width: 100%; height: 400px;
    margin-bottom: 8px;
  }
  .hero__media {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 74%, transparent 100%);
  }
  .hero__media img { -webkit-mask-image: none; mask-image: none; }
  .pledge { padding: 16px 18px; }
  .pledge__claim { font-size: 1.04rem; }
  .hero__stats { grid-template-columns: 1fr; gap: 22px; }
  .hero__stats li { padding-block: 4px; }
  .hero__stats li + li { border-left: 0; border-top: 1px solid var(--line-dark); padding-top: 22px; }

  .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carousel { --per: 2; }
  .certs { grid-template-columns: 1fr; }
  .eco { grid-template-columns: 1fr; gap: 36px; }
  .eco__panel { order: -1; min-height: 290px; }
  .contacts { gap: 26px 20px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .logo--footer { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .shell { padding-inline: 22px; }
  .band { padding-block: 52px; }
  .logo img { width: 232px; }
  .header.is-stuck .logo img { width: 186px; }
  .logo--footer img { width: 280px; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 1.15 shows a sliver of the next slide, so it reads as swipeable */
  .carousel { --per: 1.15; --gap: 14px; }
  .carousel__controls { gap: 16px; margin-top: 28px; }
  .cuts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 14px; }
  .process { grid-template-columns: 1fr; }
  .step + .step { border-left: 0; border-top: 1px solid var(--line); padding-top: 26px; }
  .cert, .cert-note { padding: 28px 22px; }
  .eco__panel { aspect-ratio: 3 / 2; }
  /* The desktop scrim fades left-to-right, which leaves the quote sitting over the
     illustration once the panel stacks. Fade upward from the bottom instead. */
  .eco__panel::after {
    background: linear-gradient(to top, rgba(7, 22, 6, .88) 0%, rgba(7, 22, 6, .4) 46%, transparent 78%);
  }
  .contacts { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .assure__list { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}