/* Home page: glass surfaces, a slow drifting background and smooth reveal animations.
   Everything is prefixed hm- so it cannot disturb the shop pages. */

:root {
  --ease-out: cubic-bezier(0.22, 0.7, 0.18, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.2, 1);
}

body.home {
  background: #eef3f1;
  overflow-x: hidden;
}

/* Background: soft colour fields with three slow orbs behind the glass. */
.hm-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(900px 620px at 8% -10%, #d3ebee 0%, transparent 60%),
    radial-gradient(760px 560px at 100% 4%, #f6e4d6 0%, transparent 58%),
    radial-gradient(900px 640px at 30% 55%, #dcefe8 0%, transparent 62%),
    radial-gradient(800px 600px at 96% 92%, #f4ecd6 0%, transparent 60%),
    #eef4f2;
}
.hm-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.32;
  will-change: transform;
  animation: hm-drift 26s var(--ease-soft) infinite alternate;
}
.hm-orb-1 { width: 46vmax; height: 46vmax; left: -12vmax; top: -10vmax; background: #3fa7b5; }
.hm-orb-2 { width: 38vmax; height: 38vmax; right: -10vmax; top: 18vh; background: #f0977a; animation-duration: 32s; animation-delay: -8s; }
.hm-orb-3 { width: 34vmax; height: 34vmax; left: 30vw; bottom: -14vmax; background: #6cc9a6; animation-duration: 38s; animation-delay: -15s; }

@keyframes hm-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vw, 5vh, 0) scale(1.08); }
}

/* Glass surface, shared by cards, the header, the footer and chips. */
.hm-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  border-radius: 24px;
}

/* Hero */
.hm-hero {
  display: grid;
  gap: 40px;
  align-items: center;
  padding: 56px 0 72px;
}
@media (min-width: 900px) {
  .hm-hero { grid-template-columns: 1.05fr 1fr; padding: 88px 0 104px; gap: 56px; }
}
.hm-copy { padding: clamp(28px, 4vw, 52px); }
.hm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ocean-dark);
  background: var(--chip-bg);
  border: 1px solid var(--glass-edge);
  margin: 0 0 22px;
}
.hm-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f9c8a;
  box-shadow: 0 0 0 4px rgba(47, 156, 138, 0.18);
}
.hm-hero h1 {
  font-size: clamp(2.2rem, 5.2vw, 3.9rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0 0 20px;
  color: var(--h);
}
.hm-grad {
  background: linear-gradient(100deg, #1c6171 0%, #2f9c8a 55%, #c9973f 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hm-lead { font-size: 1.12rem; color: var(--txt-soft); max-width: 36em; margin: 0 0 28px; }
.hm-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  color: var(--ink);
  background: var(--chip-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 6px 18px -10px rgba(19, 71, 85, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}
.hm-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(19, 71, 85, 0.45); }
.hm-btn:focus-visible { outline: 3px solid rgba(47, 156, 138, 0.6); outline-offset: 3px; }
.hm-btn-primary { background: linear-gradient(135deg, #1c6171, #2a7f80); color: #fff; border-color: transparent; }
.hm-btn-primary:hover { background: linear-gradient(135deg, #134755, #22706f); }
.hm-btn .arrow { transition: transform 0.5s var(--ease-out); }
.hm-btn:hover .arrow { transform: translateX(4px); }

.hm-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 30px 0 0; }
.hm-proof li {
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--glass-edge);
  color: var(--txt-soft);
}

.hm-media {
  position: relative;
  margin: 0;
  border-radius: 32px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-edge);
  background: var(--surface);
}
.hm-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.hm-chip {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 10px 16px;
  border-radius: 16px;
  font-size: 14px;
  color: var(--h);
  margin: 0;
}
.hm-chip b { display: block; font-size: 15px; }

/* Marquee strip */
.hm-marquee {
  overflow: hidden;
  width: 100%;
  margin: 0 auto 8px;
  padding: 16px 0;
  border-radius: 999px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hm-marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: hm-marquee 34s linear infinite;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-soft);
  white-space: nowrap;
}
.hm-marquee-track span::after { content: "◆"; margin-left: 48px; color: #c9973f; font-size: 10px; vertical-align: middle; }
@keyframes hm-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* Sections */
.hm-section { padding: 64px 0; }
.hm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.hm-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -0.015em; margin: 0; color: var(--h); }
.hm-head p { margin: 6px 0 0; color: var(--txt-soft); max-width: 34em; }
.hm-link { color: var(--ocean-dark); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(28, 97, 113, 0.3); padding-bottom: 2px; transition: border-color 0.4s var(--ease-out); }
.hm-link:hover { border-color: var(--ocean-dark); }

/* Product cards */
.hm-products { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .hm-products { grid-template-columns: repeat(4, 1fr); gap: 26px; } }
.hm-product {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  padding: 10px;
  transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
}
.hm-product:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(19, 71, 85, 0.4); }
.hm-product:focus-visible { outline: 3px solid rgba(47, 156, 138, 0.6); outline-offset: 4px; }
.hm-product-img {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--surface), var(--paper));
}
.hm-product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.hm-product:hover .hm-product-img img { transform: scale(1.06); }
.hm-product-body { padding: 16px 6px 6px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hm-product-cat { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt-mute); margin: 0; }
.hm-product-name { font-size: 1.1rem; font-weight: 650; margin: 0; color: var(--h); }
.hm-product-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; }
.hm-price {
  font-weight: 650;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(28, 97, 113, 0.09);
  color: var(--ocean-dark);
}
.hm-view { font-size: 14px; color: var(--ocean-dark); transition: transform 0.5s var(--ease-out); }
.hm-product:hover .hm-view { transform: translateX(4px); }
.hm-empty { padding: 40px; text-align: center; color: var(--txt-soft); }

/* Story */
.hm-story { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .hm-story { grid-template-columns: 1fr 1.1fr; gap: 64px; } }
.hm-story-media { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
.hm-story-media img { width: 100%; height: 100%; object-fit: cover; }
.hm-story-text { padding: clamp(26px, 4vw, 44px); }
.hm-story-text h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); letter-spacing: -0.015em; margin: 0 0 16px; color: var(--h); }
.hm-story-text p { color: var(--txt-soft); margin: 0 0 14px; }

/* Values */
.hm-values { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .hm-values { grid-template-columns: repeat(3, 1fr); } }
.hm-value { padding: 32px 28px; transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out); }
.hm-value:hover { transform: translateY(-4px); }
.hm-value-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(28, 97, 113, 0.16), rgba(201, 151, 63, 0.2));
  margin-bottom: 18px;
  color: var(--ocean-dark);
}
.hm-value h3 { font-size: 1.15rem; margin: 0 0 8px; color: var(--h); }
.hm-value p { margin: 0; color: var(--txt-soft); }

/* Team */
.hm-team { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .hm-team { grid-template-columns: 1fr 1fr; } }
.hm-person { padding: 14px; display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; }
.hm-person-img { border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 4; }
.hm-person-img img { width: 100%; height: 100%; object-fit: cover; }
.hm-person h3 { margin: 0 0 4px; font-size: 1.15rem; color: var(--h); }
.hm-person p { margin: 0 0 10px; color: var(--txt-soft); font-size: 15px; }
.hm-person-links a { font-size: 14px; color: var(--ocean-dark); margin-right: 12px; text-decoration: none; border-bottom: 1px solid rgba(28, 97, 113, 0.3); }

/* Closing band */
.hm-band { padding: clamp(32px, 5vw, 56px); text-align: center; }
.hm-band h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin: 0 0 10px; color: var(--h); letter-spacing: -0.015em; }
.hm-band p { color: var(--txt-soft); margin: 0 auto 24px; max-width: 32em; }
.hm-band .hm-cta { justify-content: center; }

/* Hero stats */
.hm-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 12px 28px; justify-content: start; margin: 28px 0 0; }
.hm-stats div { border-left: 2px solid rgba(47, 156, 138, 0.45); padding-left: 12px; }
.hm-stats dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--txt-mute); }
.hm-stats dd { margin: 2px 0 0; font-weight: 650; color: var(--h); font-size: 1rem; }

/* Shop by category */
.hm-cats { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .hm-cats { grid-template-columns: repeat(4, 1fr); } }
.hm-cat {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  text-decoration: none;
  color: #fff;
  padding: 0;
  transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
}
.hm-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.hm-cat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(12, 42, 50, 0.78));
}
.hm-cat:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(19, 71, 85, 0.5); }
.hm-cat:hover img { transform: scale(1.07); }
.hm-cat-label { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; display: grid; gap: 2px; }
.hm-cat-label b { font-size: 1.2rem; letter-spacing: -0.01em; }
.hm-cat-label small { font-size: 13px; opacity: 0.85; }
.hm-cat:focus-visible { outline: 3px solid rgba(47, 156, 138, 0.7); outline-offset: 4px; }

/* Did you know: facts band */
.hm-facts {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--chip-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
@media (min-width: 800px) { .hm-facts { grid-template-columns: repeat(3, 1fr); } }
.hm-fact {
  padding: clamp(26px, 4vw, 42px);
  background: linear-gradient(160deg, rgba(28, 97, 113, 0.92), rgba(19, 71, 85, 0.96));
  color: #e8f4f2;
  transition: background 0.9s var(--ease-out);
}
.hm-fact:hover { background: linear-gradient(160deg, rgba(42, 127, 128, 0.95), rgba(19, 71, 85, 0.98)); }
.hm-fact-num {
  display: block;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, #ffffff, #f2d79c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}
.hm-fact p { margin: 0; color: #d6ebe8; font-size: 15px; }

/* Journal */
.hm-journal { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .hm-journal { grid-template-columns: repeat(3, 1fr); } }
.hm-post {
  display: flex;
  flex-direction: column;
  padding: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
}
.hm-post:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(19, 71, 85, 0.4); }
.hm-post:focus-visible { outline: 3px solid rgba(47, 156, 138, 0.6); outline-offset: 4px; }
.hm-post-img { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; }
.hm-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.hm-post:hover .hm-post-img img { transform: scale(1.06); }
.hm-post-body { padding: 16px 8px 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hm-post-body h3 { font-size: 1.1rem; margin: 0; color: var(--h); }
.hm-post-body p { margin: 0; color: var(--txt-soft); font-size: 15px; }
.hm-post-body .hm-view { margin-top: auto; padding-top: 6px; }

/* Why it matters */
.hm-impact { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .hm-impact { grid-template-columns: repeat(3, 1fr); } }
.hm-impact-card { padding: clamp(24px, 3.5vw, 34px); transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out); }
.hm-impact-card:hover { transform: translateY(-4px); }
.hm-impact-fig { font-size: clamp(2.2rem, 4.5vw, 3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin: 0 0 14px; color: var(--ocean-dark); }
.hm-impact-fig small { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-mute); margin-top: 8px; }
.hm-impact-card h3 { font-size: 1.15rem; margin: 0 0 10px; color: var(--h); }
.hm-impact-card p { color: var(--txt-soft); margin: 0; font-size: 15px; }
.hm-impact-card a, .hm-sources a { color: var(--ocean-dark); }
.hm-sources { font-size: 13px; color: var(--txt-mute); margin: 18px 0 0; }

/* FAQ */
.hm-faq { display: grid; gap: 14px; max-width: 820px; }
.hm-faq details { padding: 0; overflow: hidden; transition: box-shadow 0.5s var(--ease-out); }
.hm-faq details[open] { box-shadow: 0 24px 48px -22px rgba(19, 71, 85, 0.4); }
.hm-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 56px 18px 22px;
  font-weight: 650;
  color: var(--h);
  position: relative;
}
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--ocean-dark);
  transition: transform 0.5s var(--ease-out);
}
.hm-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.hm-faq summary:focus-visible { outline: 3px solid rgba(47, 156, 138, 0.6); outline-offset: -3px; border-radius: 24px; }
.hm-faq details p { margin: 0; padding: 0 22px 20px; color: var(--txt-soft); animation: hm-fade 0.6s var(--ease-out); }
@keyframes hm-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Phone and small-screen fixes */
@media (max-width: 640px) {
  .hm-hero { padding: 28px 0 48px; gap: 28px; }
  .hm-copy { padding: 24px 20px; }
  .hm-cta .hm-btn { flex: 1 1 auto; justify-content: center; }
  .hm-section { padding: 44px 0; }
  .hm-head { margin-bottom: 20px; }
  .hm-story-text, .hm-band, .hm-value { padding: 24px 20px; }
  .hm-person { grid-template-columns: 88px 1fr; gap: 14px; }
  .hm-facts { border-radius: 22px; }
  .hm-fact { padding: 24px 20px; }
  .hm-marquee-track { font-size: 13px; gap: 32px; }
}
@media (max-width: 420px) {
  .hm-stats { grid-template-columns: 1fr 1fr; }
  .hm-stats div:last-child { grid-column: 1 / -1; }
  .hm-products { grid-template-columns: 1fr; }
  .hm-cats { gap: 12px; }
  .hm-cat-label { left: 12px; right: 12px; bottom: 12px; }
  .hm-cat-label b { font-size: 1rem; }
  .hm-btn { padding: 12px 18px; font-size: 14px; }
  .hm-person { grid-template-columns: 1fr; }
  .hm-person-img { aspect-ratio: 4 / 3; }
}
@media (max-width: 340px) {
  .hm-cats { grid-template-columns: 1fr; }
  .hm-proof li { font-size: 12px; padding: 6px 11px; }
}

/* Photo gallery: one large photo and two smaller ones, all with the same corners and frame */
.hm-gallery {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 1 / 1;
}
.hm-gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  background: var(--surface);
}
.hm-gallery .hm-gallery-main { grid-row: span 2; }
.hm-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.hm-gallery figure:hover img { transform: scale(1.05); }
@media (max-width: 640px) {
  .hm-gallery { grid-template-rows: auto; aspect-ratio: auto; }
  .hm-gallery .hm-gallery-main { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .hm-gallery figure:not(.hm-gallery-main) { aspect-ratio: 1 / 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-gallery img { transition: none; }
  .hm-gallery figure:hover img { transform: none; }
}

/* Reveal: elements rise and fade in as they enter the screen. Only applied when JavaScript runs. */
.js .hm-reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .hm-reveal.is-in { opacity: 1; transform: none; }

/* Entrance of the hero on first load */
.js .hm-hero .hm-copy.hm-reveal { transition-duration: 1.2s; }

@media (prefers-reduced-motion: reduce) {
  .hm-orb, .hm-marquee-track { animation: none; }
  .js .hm-reveal { opacity: 1; transform: none; transition: none; }
  .hm-media img, .hm-product-img img { transform: none; transition: none; }
  .hm-btn, .hm-product, .hm-value, .hm-btn .arrow, .hm-product:hover .hm-view { transition: none; transform: none; }
}

/* Dark theme for the home page: deep backdrop, dimmer orbs, quieter colour fields. */
html[data-theme="dark"] .hm-bg {
  background:
    radial-gradient(900px 620px at 8% -10%, #12333a 0%, transparent 60%),
    radial-gradient(760px 560px at 100% 4%, #2e2a26 0%, transparent 58%),
    radial-gradient(900px 640px at 30% 55%, #13302b 0%, transparent 62%),
    #0d171a;
}
html[data-theme="dark"] .hm-orb { opacity: 0.18; }
html[data-theme="dark"] .hm-kicker { color: #cfe7e3; }
html[data-theme="dark"] .hm-proof li { color: #cfe3df; }
html[data-theme="dark"] .hm-btn-primary { color: #fff; }
html[data-theme="dark"] .hm-grad { background-image: linear-gradient(100deg, #6fd0dc 0%, #5fd1b3 55%, #f2c27a 110%); }

/* ---- Hero, editorial layout ---- */
.hm-hero { display: grid; gap: 48px; align-items: center; padding: 40px 16px 64px; }
@media (min-width: 900px) { .hm-hero { grid-template-columns: 1.02fr 1fr; gap: 64px; padding: 72px 16px 96px; } }
.hm-copy { padding: 0; }
.hm-copy .hm-kicker { margin-bottom: 20px; }
.hm-copy h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); line-height: 1.04; margin-bottom: 22px; }
.hm-copy .hm-lead { font-size: 1.1rem; margin-bottom: 30px; }
.hm-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 30px 0 0; }
.hm-trust li { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--txt-soft); }
.hm-dot { width: 8px; height: 8px; border-radius: 50%; background: #2f9c8a; box-shadow: 0 0 0 4px rgba(47, 156, 138, 0.18); flex-shrink: 0; }
.hm-copy .hm-stats { margin-top: 36px; }

/* Visual: overlapping photos, a rotating ring and floating glass cards */
.hm-visual { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin: 0 auto; }
.hm-visual-blob {
  position: absolute;
  inset: 6% 4% 4% 10%;
  border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%;
  background: linear-gradient(140deg, rgba(63, 167, 181, 0.35), rgba(240, 151, 122, 0.25) 60%, rgba(201, 151, 63, 0.2));
  filter: blur(4px);
  animation: hm-blob 16s ease-in-out infinite alternate;
}
@keyframes hm-blob {
  from { border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%; transform: rotate(0deg); }
  to   { border-radius: 58% 42% 46% 54% / 44% 56% 44% 56%; transform: rotate(8deg); }
}
.hm-ph {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  border: 8px solid var(--surface);
  box-shadow: 0 30px 60px -28px rgba(12, 42, 50, 0.45);
  background: var(--surface);
  transition: transform 1s var(--ease-out), box-shadow 1s var(--ease-out);
}
.hm-ph img { width: 100%; height: 100%; object-fit: cover; }
.hm-ph:hover { transform: translateY(-6px) rotate(0deg) !important; box-shadow: 0 40px 70px -28px rgba(12, 42, 50, 0.55); }
.hm-ph-a { width: 56%; aspect-ratio: 1 / 1; top: 0; right: 0; transform: rotate(3deg); }
.hm-ph-b { width: 54%; aspect-ratio: 1 / 1; bottom: 2%; left: 0; transform: rotate(-4deg); z-index: 2; }
.hm-ph-c { width: 40%; aspect-ratio: 1 / 1; bottom: 14%; right: 4%; transform: rotate(5deg); z-index: 3; }

.hm-ring {
  position: absolute;
  top: 40%;
  left: 36%;
  width: 26%;
  aspect-ratio: 1 / 1;
  z-index: 4;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 16px 34px -18px rgba(12, 42, 50, 0.5);
}
.hm-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: hm-spin 26s linear infinite; }
.hm-ring text { font-size: 15.5px; letter-spacing: 3.2px; font-weight: 600; fill: var(--ocean-dark); }
.hm-ring img { width: 46%; height: auto; }
@keyframes hm-spin { to { transform: rotate(360deg); } }

.hm-float { position: absolute; z-index: 5; }
.hm-float-product {
  right: -2%;
  bottom: 4%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--ink);
  animation: hm-float 7s ease-in-out infinite;
  transition: transform 0.6s var(--ease-out);
}
.hm-float-product:hover { transform: translateY(-4px); }
.hm-float-product img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.hm-float-product span { display: grid; gap: 2px; }
.hm-float-product small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--txt-mute); }
.hm-float-product b { font-size: 15px; color: var(--h); }
.hm-float-product em { font-style: normal; font-size: 14px; color: var(--ocean-dark); font-weight: 650; }
.hm-float-chip {
  top: 6%;
  left: 2%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--h);
  animation: hm-float 8s ease-in-out -2s infinite;
}
@keyframes hm-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media (max-width: 640px) {
  .hm-hero { padding: 24px 16px 40px; gap: 36px; }
  .hm-copy h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hm-visual { max-width: 100%; }
  .hm-ph { border-width: 5px; border-radius: 18px; }
  .hm-float-product { right: 0; bottom: 0; padding: 8px 12px 8px 8px; }
  .hm-float-product img { width: 44px; height: 44px; }
  .hm-float-chip { left: 0; top: 0; font-size: 13px; padding: 8px 12px; }
  .hm-ring { width: 30%; left: 35%; top: 38%; }
  .hm-ring text { font-size: 14px; }
  .hm-copy .hm-stats { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-visual-blob, .hm-float-product, .hm-float-chip, .hm-ring svg { animation: none; }
  .hm-ph, .hm-float-product { transition: none; }
}

/* ---- Why it matters: bento layout ---- */
.hm-impact-head { max-width: 640px; margin-bottom: 30px; }
.hm-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2f9c8a;
  margin-bottom: 10px;
}
.hm-impact-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -0.02em; margin: 0 0 12px; color: var(--h); }
.hm-impact-head p { margin: 0; color: var(--txt-soft); font-size: 1.02rem; }

.hm-bento { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .hm-bento { grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; }
  .hm-tile-hero { grid-row: span 2; }
}
.hm-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3.4vw, 36px);
  border-radius: 28px;
  transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
}
.hm-tile:hover { transform: translateY(-5px); box-shadow: 0 34px 64px -26px rgba(19, 71, 85, 0.45); }
.hm-tile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.hm-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #2f9c8a, #1c6171);
  box-shadow: 0 10px 22px -12px rgba(28, 97, 113, 0.7);
}
.hm-icon-sea { background: linear-gradient(135deg, #3fa7b5, #1c6171); }
.hm-icon-gold { background: linear-gradient(135deg, #e7b35f, #c9973f); }
.hm-tag {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--h);
  background: rgba(47, 156, 138, 0.16);
}
.hm-tag-sea { background: rgba(63, 167, 181, 0.2); }
.hm-tag-gold { background: rgba(201, 151, 63, 0.24); }

.hm-tile .hm-big {
  margin: 4px 0 0;
  font-size: clamp(3.2rem, 7vw, 4.6rem);
  font-weight: 750;
  line-height: 0.95;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg, #1c6171 10%, #2f9c8a 60%, #c9973f 115%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hm-tile .hm-big span {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  -webkit-text-fill-color: var(--txt-mute);
  color: var(--txt-mute);
}
.hm-tile h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); letter-spacing: -0.01em; margin: 6px 0 0; color: var(--h); }
.hm-tile p { margin: 0; color: var(--txt-soft); font-size: 15px; }
.hm-tile p i { color: inherit; }
.hm-pill {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--h);
  background: var(--chip-bg);
  border: 1px solid var(--glass-edge);
  transition: transform 0.5s var(--ease-out), background-color 0.4s var(--ease-out);
}
.hm-pill:hover { transform: translateY(-2px); background: rgba(47, 156, 138, 0.16); }
.hm-pill .arrow { transition: transform 0.5s var(--ease-out); }
.hm-pill:hover .arrow { transform: translateX(4px); }

/* The hero tile: a deep ocean panel with a slow wave along its base */
.hm-tile-hero {
  background: linear-gradient(160deg, #1c6171 0%, #134755 55%, #0f3a45 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px -28px rgba(19, 71, 85, 0.6);
  color: #e8f4f2;
  padding-bottom: 130px;
}
.hm-tile-hero h3 { color: #fff; }
.hm-tile-hero p { color: #cfe6e2; }
.hm-tile-hero .hm-big { background: linear-gradient(100deg, #ffffff, #f2d79c); -webkit-background-clip: text; background-clip: text; }
.hm-tile-hero .hm-big span { color: #bfe0da; -webkit-text-fill-color: #bfe0da; }
.hm-tile-hero .hm-tag { color: #d6f3ee; background: rgba(255, 255, 255, 0.14); }
.hm-tile-hero .hm-icon { background: linear-gradient(135deg, #5fd1b3, #2f9c8a); }
.hm-tile-hero .hm-pill { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); }
.hm-tile-hero .hm-pill:hover { background: rgba(255, 255, 255, 0.22); }
.hm-tile-wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 120px; pointer-events: none; }
.hm-tile-wave path { fill: rgba(95, 209, 179, 0.22); }
.hm-tile-wave .w2 { fill: rgba(242, 199, 92, 0.16); }
.hm-tile-wave .w1 { animation: hm-wave-drift 14s linear infinite; }
.hm-tile-wave .w2 { animation: hm-wave-drift 22s linear infinite reverse; }
@keyframes hm-wave-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hm-sources { margin-top: 26px; font-size: 13px; color: var(--txt-mute); }

@media (max-width: 640px) {
  .hm-tile { border-radius: 22px; }
  .hm-tile-hero { padding-bottom: 110px; }
  .hm-tile-wave { height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-tile-wave .w1, .hm-tile-wave .w2 { animation: none; }
  .hm-tile, .hm-pill, .hm-pill .arrow { transition: none; }
}

/* Why it matters: a more compact bento, so the section is shorter. */
.hm-impact-head { margin-bottom: 22px; }
.hm-bento { gap: 14px; }
.hm-tile { gap: 8px; padding: clamp(18px, 2.2vw, 24px); border-radius: 22px; }
.hm-tile-top { margin-bottom: 2px; }
.hm-icon { width: 40px; height: 40px; border-radius: 13px; }
.hm-icon svg { width: 18px; height: 18px; }
.hm-tile .hm-big { font-size: clamp(2.3rem, 4.2vw, 3rem); line-height: 0.95; margin-top: 2px; }
.hm-tile .hm-big span { margin-top: 6px; font-size: 12px; }
.hm-tile h3 { font-size: clamp(1.02rem, 1.6vw, 1.15rem); margin-top: 2px; }
.hm-tile p { font-size: 14px; line-height: 1.55; }
.hm-pill { padding: 8px 14px; font-size: 13px; }
.hm-tile-hero { padding-bottom: 96px; }
.hm-tile-wave { height: 90px; }
.hm-sources { margin-top: 16px; font-size: 12px; }
@media (min-width: 860px) {
  .hm-bento { grid-template-columns: 1.05fr 1fr; }
  .hm-tile-hero { padding-bottom: 96px; }
}
@media (max-width: 640px) {
  .hm-tile { padding: 18px; }
  .hm-tile .hm-big { font-size: 2.4rem; }
  .hm-tile-hero { padding-bottom: 86px; }
  .hm-tile-wave { height: 76px; }
}

/* Home page typography: Fraunces for headings and figures (warm, characterful serif),
   Manrope for text (clean and modern). Scoped to the home page only (body.home). */
body.home {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}
body.home h1,
body.home h2,
body.home h3,
body.home .hm-big,
body.home .hm-fact-num,
body.home .hm-stats dd,
body.home .hm-tile-hero .hm-big {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
  font-weight: 560;
  letter-spacing: -0.02em;
  color: var(--h);
}
body.home h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); line-height: 1.06; margin: 0 0 22px; }
body.home h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.14; margin: 0 0 14px; }
body.home h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.25; margin: 0 0 10px; }
body.home .hm-big { font-size: clamp(3rem, 5.6vw, 4rem); line-height: 1; font-weight: 600; }
body.home .hm-fact-num { font-weight: 600; line-height: 1; }
body.home .hm-stats dd { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
body.home p { margin: 0 0 1.1em; line-height: 1.7; }
body.home .hm-lead { font-size: 1.1rem; line-height: 1.7; margin-bottom: 30px; }
body.home .hm-copy p, body.home .hm-tile p, body.home .hm-story-text p, body.home .hm-fact p, body.home .hm-faq p { font-size: 0.98rem; line-height: 1.7; }
body.home .hm-kicker, body.home .hm-eyebrow, body.home .hm-tag, body.home .hm-pill, body.home .hm-btn, body.home .hm-link { font-family: 'Manrope', system-ui, sans-serif; letter-spacing: 0.02em; }
body.home .hm-kicker, body.home .hm-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
body.home .hm-faq summary { font-family: 'Manrope', system-ui, sans-serif; font-weight: 650; font-size: 1rem; line-height: 1.5; }
body.home .hm-section { padding: clamp(56px, 7vw, 88px) 0; }
body.home .hm-head { margin-bottom: clamp(24px, 3vw, 36px); }
body.home .hm-head p, body.home .hm-impact-head p { max-width: 58ch; margin-bottom: 0; }
body.home .hm-impact-head { margin-bottom: 30px; }
body.home .hm-story-text { padding: clamp(28px, 4vw, 48px); }
body.home .hm-trust li, body.home .hm-proof li { font-size: 14px; }
body.home .hm-hero { gap: clamp(40px, 5vw, 72px); }
body.home .hm-product-name { font-family: 'Fraunces', Georgia, serif; font-weight: 560; font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.3; }
body.home .hm-product-cat, body.home .hm-cat-label small { font-size: 12px; letter-spacing: 0.08em; }

/* Impact cards: one clear hierarchy. The figure is Fraunces, the unit label is small caps in Manrope,
   the heading is Fraunces and the text is Manrope. These rules outrank the general home styles above. */
:root:root body.home .hm-tile .hm-big {
  font-family: var(--head);
  font-size: clamp(2.2rem, 3.6vw, 2.9rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 6px 0 0;
  color: transparent;
  background: linear-gradient(100deg, var(--ocean-dark) 10%, #2f9c8a 60%, #c9973f 115%);
  -webkit-background-clip: text;
  background-clip: text;
}
:root:root body.home .hm-tile .hm-big span {
  display: block;
  margin-top: 10px;
  font-family: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: none;
  color: var(--txt-mute);
  -webkit-text-fill-color: var(--txt-mute);
}
:root:root body.home .hm-tile h3 {
  font-family: var(--head);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 560;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 14px 0 0;
  color: var(--h);
}
:root:root body.home .hm-tile > p {
  font-family: var(--text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  margin: 8px 0 0;
  color: var(--txt-soft);
}
:root:root body.home .hm-tile .hm-tag {
  font-family: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
:root:root body.home .hm-tile .hm-pill {
  font-family: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* The hero card sits on the dark ocean panel, so its text is light. */
:root:root body.home .hm-tile-hero .hm-big {
  background: linear-gradient(100deg, #ffffff, #f2d79c);
  -webkit-background-clip: text;
  background-clip: text;
}
:root:root body.home .hm-tile-hero .hm-big span {
  color: #bfe0da;
  -webkit-text-fill-color: #bfe0da;
}
:root:root body.home .hm-tile-hero h3 { color: #ffffff; }
:root:root body.home .hm-tile-hero > p { color: #cfe6e2; }

/* Impact cards, compact: smaller padding, figure, gaps and wave, so the section takes less height. */
:root:root body.home .hm-bento { gap: 12px; }
:root:root body.home .hm-tile { gap: 6px; padding: clamp(16px, 1.8vw, 20px); border-radius: 20px; }
:root:root body.home .hm-tile-top { margin-bottom: 0; }
:root:root body.home .hm-tile .hm-icon { width: 38px; height: 38px; border-radius: 12px; }
:root:root body.home .hm-tile .hm-icon svg { width: 17px; height: 17px; }
:root:root body.home .hm-tile .hm-big { margin-top: 2px; }
:root:root body.home .hm-tile .hm-big span { margin-top: 6px; }
:root:root body.home .hm-tile h3 { margin-top: 6px; }
:root:root body.home .hm-tile > p { font-size: 14px; line-height: 1.55; margin-top: 4px; }
:root:root body.home .hm-tile .hm-pill { padding: 7px 12px; font-size: 12.5px; margin-top: 8px; }
:root:root body.home .hm-tile-hero { padding-bottom: 68px; }
:root:root body.home .hm-tile-wave { height: 60px; }
@media (min-width: 860px) {
  :root:root body.home .hm-tile-hero { padding-bottom: 68px; }
}

/* Facts strip: white figures for contrast on the teal cards, a short gold accent, and even spacing. */
:root:root body.home .hm-fact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3vw, 34px);
  background: linear-gradient(160deg, #2a7f80 0%, #1c6171 55%, #134755 100%);
  color: #e8f4f2;
}
:root:root body.home .hm-fact:hover { background: linear-gradient(160deg, #37909a 0%, #1c6171 60%, #134755 100%); }
:root:root body.home .hm-fact::before {
  content: "";
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #5fd1b3, #f2c75c);
}
:root:root body.home .hm-fact-num {
  margin: 0;
  font-family: var(--head);
  font-size: clamp(2.2rem, 3.8vw, 3rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: none;
}
:root:root body.home .hm-fact p {
  margin: 0;
  max-width: 30ch;
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
  color: #d6ebe8;
}

/* Facts strip: sits in the middle of the page on desktop, with 15px above it. */
:root:root body.home .hm-facts-section { padding-top: 15px; }
@media (min-width: 800px) {
  :root:root body.home .hm-facts-section { padding-left: 20%; padding-right: 20%; }
}

/* Sources line under the impact cards: room below the cards. The wording and size are unchanged. */
:root:root body.home .hm-sources { margin-top: 28px; }

/* Impact section, redesigned: three tall, spacious columns with large figures on light glass cards.
   The dark hero card is now the same as the others, and the wave decoration is removed. */
@media (min-width: 860px) {
  :root:root body.home .hm-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 24px; }
  :root:root body.home .hm-tile-hero { grid-row: auto; }
}
:root:root body.home .hm-tile {
  gap: 14px;
  padding: clamp(28px, 3vw, 40px);
  border-radius: 32px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
@media (min-width: 860px) {
  :root:root body.home .hm-tile { min-height: 480px; }
}
:root:root body.home .hm-tile-wave { display: none; }
:root:root body.home .hm-tile .hm-big {
  margin-top: 28px;
  font-size: clamp(4.5rem, 8vw, 7rem);
  line-height: 0.9;
  font-weight: 650;
  letter-spacing: -0.04em;
  background: linear-gradient(100deg, #3fb9a3 0%, #2f9c8a 55%, #c9973f 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
:root:root body.home .hm-tile .hm-big span {
  margin-top: 14px;
  font-size: 13px;
}
:root:root body.home .hm-tile h3 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); margin-top: 10px; }
:root:root body.home .hm-tile > p { font-size: 15.5px; }
/* Dark hero text goes back to the normal card colours */
:root:root body.home .hm-tile-hero h3 { color: var(--h); }
:root:root body.home .hm-tile-hero > p { color: var(--txt-soft); }
:root:root body.home .hm-tile-hero .hm-big span { color: var(--txt-mute); -webkit-text-fill-color: var(--txt-mute); }
:root:root body.home .hm-tile-hero .hm-tag { color: var(--h); background: rgba(47, 156, 138, 0.16); }
:root:root body.home .hm-tile-hero .hm-pill { color: var(--h); background: var(--glass-strong); border-color: var(--glass-edge); }
:root:root body.home .hm-tile-hero .hm-pill:hover { background: var(--glass-strong); }
@media (max-width: 859px) {
  :root:root body.home .hm-tile .hm-big { font-size: clamp(3.4rem, 14vw, 4.6rem); margin-top: 18px; }
}

/* Facts strip, redesigned as one frosted glass panel. The text fills each column (no narrow wrapping),
   and the colours follow the light and dark themes. */
:root:root body.home .hm-facts {
  gap: 0;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%), var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}
:root:root body.home .hm-fact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(26px, 3vw, 38px);
  background: transparent;
  color: var(--ink);
  transition: background 0.6s var(--ease-out);
}
:root:root body.home .hm-fact + .hm-fact { border-left: 1px solid var(--glass-edge); }
:root:root body.home .hm-fact:hover { background: rgba(255, 255, 255, 0.1); }
:root:root body.home .hm-fact::before {
  content: "";
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #5fd1b3, #f2c75c);
}
:root:root body.home .hm-fact-num {
  margin: 0;
  font-family: var(--head);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--h);
  -webkit-text-fill-color: var(--h);
  background: none;
}
:root:root body.home .hm-fact p {
  margin: 0;
  max-width: none;
  font-family: var(--text);
  font-size: 15.5px;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--txt-soft);
}
@media (max-width: 799px) {
  :root:root body.home .hm-fact + .hm-fact { border-left: 0; border-top: 1px solid var(--glass-edge); }
}
/* Facts panel: less inner padding so the text has more width inside the 20% margins. */
:root:root body.home .hm-fact { padding: clamp(20px, 2.2vw, 28px); }