/* ==========================================================================
   Aletheia — home page
   Modern editorial: classical bones, 2026 proportions. Big confident display
   type, generous negative space, deep navy "lab" bands against a warm paper
   ground, glass surfaces, restrained motion.

   Written mobile-first. Every media query below adds to a small screen rather
   than patching one — which is how the vial ended up above the headline last
   time. Tokens come from theme.json / aletheia.css.
   ========================================================================== */

.alw-home {
  --gold: #C6A55C;
  --gilt: #F0DCA8;
  --bronze: #8C6C2C;
  --navy: #0C2F57;
  --ink: #071B33;
  --abyss: #04101E;
  --marble: #F7F4ED;
  --paper: #FFFFFF;
  --slate: #5A6B7C;
  --line: rgba(12, 47, 87, .11);
  --ease: cubic-bezier(.16, .84, .44, 1);

  /* One spacing rhythm for the whole page. */
  --gut: clamp(1.15rem, 5vw, 3.5rem);
  --band: clamp(3.5rem, 9vw, 8rem);
  --shell: 1320px;

  width: 100%;
  overflow-x: clip;
}

/* The Full Width template drops the constrained wrapper and its root padding,
   so bands can reach the window edge without any negative-margin tricks. */
.alw-main-full,
.alw-main-full > .wp-block-post-content {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.alw-home :is(h1, h2, h3) { margin: 0; }
.alw-home p { margin: 0; }

.alw-shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

.alw-eyebrow {
  font-family: Jost, Futura, system-ui, sans-serif;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--bronze);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.alw-eyebrow--gold { color: var(--gold); }

/* Section index numeral — the editorial tell that this is a considered
   document rather than a stack of blocks. */
.alw-ix {
  font-family: Jost, Futura, system-ui, sans-serif;
  font-size: .625rem;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: currentColor;
  opacity: .75;
  padding: .25rem .45rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  line-height: 1;
}

/* ---------------------------------------------------- scroll progress bar */

.alw-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 90;
  pointer-events: none;
  background: transparent;
}
.alw-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gilt));
  box-shadow: 0 0 12px rgba(198, 165, 92, .55);
  transition: width .12s linear;
}

/* ------------------------------------------------------------------ buttons */

.alw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 54px;
  padding: 0 2rem;
  border-radius: 3px;
  border: 1px solid transparent;
  font-family: Jost, Futura, system-ui, sans-serif;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .35s var(--ease), background-color .25s, color .25s,
              border-color .25s, box-shadow .35s var(--ease);
  will-change: transform;
}
.alw-btn:hover { transform: translateY(-2px); }
.alw-btn:active { transform: translateY(0); }

.alw-btn--gold {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  box-shadow: 0 1px 2px rgba(7, 27, 51, .18);
}
.alw-btn--gold:hover {
  background: var(--gilt);
  border-color: var(--gilt);
  box-shadow: 0 10px 30px rgba(198, 165, 92, .3);
}

.alw-btn--navy { background: var(--navy); color: var(--marble); border-color: var(--navy); }
.alw-btn--navy:hover { background: var(--ink); color: var(--gilt); border-color: var(--ink); }

.alw-btn--ghost {
  background: rgba(255, 255, 255, .04);
  color: var(--gilt);
  border-color: rgba(198, 165, 92, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.alw-btn--ghost:hover { border-color: var(--gold); background: rgba(198, 165, 92, .12); color: var(--gilt); }

.alw-range .alw-btn--ghost { color: var(--navy); border-color: rgba(12, 47, 87, .3); }

/* ===========================================================================
   Hero
   Mobile order is copy, then vial. The headline must be readable without a
   scroll — it is the whole proposition.
   =========================================================================== */

.alw-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(2.25rem, 7vw, 5.5rem) 0 0;
  background: var(--abyss);
  overflow: hidden;
}

.alw-hero__field {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(52% 46% at 20% 12%, rgba(37, 99, 165, .85) 0%, rgba(12, 47, 87, 0) 62%),
    radial-gradient(46% 40% at 86% 4%, rgba(198, 165, 92, .22) 0%, rgba(198, 165, 92, 0) 60%),
    linear-gradient(168deg, #143F70 0%, #0A2340 46%, #04101E 100%);
  z-index: -2;
}

/* faint Greek key watermark, very low contrast */
.alw-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23C6A55C' stroke-width='0.9'%3E%3Cpath d='M0,12 L0,0 L9,0 L9,9 L3,9 L3,3 L6,3'/%3E%3Cpath d='M0,12 L12,12'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: .05;
  z-index: -1;
  pointer-events: none;
}

.alw-hero__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gut) clamp(1rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
}

.alw-hero__eyebrow {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  letter-spacing: .06em;
  color: rgba(240, 220, 168, .78);
  margin-bottom: .9rem !important;
}

.alw-hero__title {
  font-family: Cinzel, Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.125rem, 5.4vw, 4.25rem);
  line-height: 1.01;
  letter-spacing: .01em;
  color: #FBF9F4;
  text-wrap: balance;
  max-width: 17ch;
}

.alw-hero__accent {
  background: linear-gradient(96deg, #F0DCA8 0%, #C6A55C 46%, #E8CE92 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback for anything that cannot clip a gradient to text. */
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .alw-hero__accent { color: var(--gilt); -webkit-text-fill-color: currentColor; }
}

.alw-hero__lede {
  margin-top: 1.25rem !important;
  max-width: 46ch;
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.72;
  color: rgba(238, 240, 244, .76);
}

.alw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 1.85rem;
}
/* Full-width and equal on a phone: two ragged buttons of different widths
   is the commonest tell of a desktop layout squeezed onto a small screen. */
.alw-hero__actions .alw-btn { flex: 1 1 100%; }

/* A slow conic wash behind the vial. Very low contrast — it should read as
   light moving in a room, not as a spinning graphic. */
.alw-hero__aurora {
  position: absolute;
  top: -25%;
  right: -18%;
  width: min(1100px, 115vw);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background: conic-gradient(
    from 0deg,
    rgba(37, 99, 165, 0) 0deg,
    rgba(51, 128, 204, .34) 62deg,
    rgba(198, 165, 92, .22) 148deg,
    rgba(37, 99, 165, 0) 232deg,
    rgba(51, 128, 204, .26) 320deg,
    rgba(37, 99, 165, 0) 360deg
  );
  filter: blur(58px);
  animation: alw-turn 46s linear infinite;
}

@keyframes alw-turn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.alw-hero__stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.25rem;
}

.alw-hero__vial {
  position: relative;
  justify-self: center;
  display: grid;
  place-items: center;
}

/* Lab readout. Tabular figures and hairline rules — the visual language of
   a spec sheet, which is what a research buyer is actually shopping on. */
.alw-readout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  max-width: 420px;
  margin: 0;
  background: rgba(198, 165, 92, .22);
  border: 1px solid rgba(198, 165, 92, .22);
  border-radius: 4px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.alw-readout > div {
  background: rgba(6, 20, 38, .55);
  padding: .625rem .5rem .6875rem;
  text-align: center;
}

.alw-readout dt {
  font-family: Jost, Futura, system-ui, sans-serif;
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(198, 165, 92, .85);
  margin: 0 0 .25rem;
}

.alw-readout dd {
  margin: 0;
  font-family: Jost, Futura, system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: #EEF1F5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.alw-hero__vial img {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  width: auto;
  /* Deliberately modest on a phone: it is scenery, not the message. */
  height: clamp(230px, 38vh, 320px);
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 44px 66px rgba(0, 0, 0, .62));
  animation: alw-float 7s ease-in-out infinite;
}

.alw-hero__halo {
  grid-area: 1 / 1;
  width: clamp(240px, 60vw, 470px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 165, 92, .3) 0%, rgba(198, 165, 92, 0) 68%);
  filter: blur(6px);
}

@keyframes alw-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* trust strip along the hero hem */
.alw-hero__seal {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gut) clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  align-items: center;
  gap: .625rem;
  font-family: Jost, Futura, system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(240, 220, 168, .62);
}

.alw-hero__seal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #57C08A;
  box-shadow: 0 0 0 0 rgba(87, 192, 138, .6);
  animation: alw-pulse 2.6s ease-out infinite;
  flex: 0 0 auto;
}

@keyframes alw-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(87, 192, 138, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(87, 192, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(87, 192, 138, 0); }
}

/* compound ticker */
.alw-marquee {
  border-top: 1px solid rgba(198, 165, 92, .26);
  border-bottom: 1px solid rgba(198, 165, 92, .26);
  padding: .9rem 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.alw-marquee__track {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: max-content;
  animation: alw-scroll 90s linear infinite;
  font-family: Jost, Futura, system-ui, sans-serif;
  font-size: .8125rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(240, 220, 168, .62);
  white-space: nowrap;
}
.alw-marquee__track i { color: rgba(198, 165, 92, .55); font-style: normal; }

@keyframes alw-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===========================================================================
   Proof
   =========================================================================== */

/* Full-bleed dark band. The old version was small grey text on paper and
   read as a footnote; the supply standard is the argument, so it gets the
   weight of one. */
.alw-proof {
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(37, 99, 165, .34) 0%, rgba(7, 27, 51, 0) 62%),
    linear-gradient(180deg, #071B33 0%, #0A2340 100%);
  border-top: 1px solid rgba(198, 165, 92, .22);
  border-bottom: 1px solid rgba(198, 165, 92, .22);
}

.alw-proof__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(2.75rem, 7vw, 5.5rem) var(--gut);
}

.alw-proof__grid {
  margin-top: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}

.alw-proof__item {
  border-top: 1px solid rgba(198, 165, 92, .45);
  padding-top: 1.125rem;
}

.alw-proof__figure {
  display: block;
  font-family: Cinzel, Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.875rem, 5vw, 3rem);
  line-height: 1;
  color: #FBF9F4;
  font-variant-numeric: tabular-nums;
}

.alw-proof__label {
  display: block;
  margin-top: .625rem;
  font-family: Jost, Futura, system-ui, sans-serif;
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.alw-proof__note {
  margin-top: .875rem !important;
  font-size: .9375rem;
  line-height: 1.7;
  color: rgba(238, 240, 244, .68);
}

/* ===========================================================================
   Range
   =========================================================================== */

.alw-range {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(2.75rem, 6vw, 5rem) var(--gut) clamp(3rem, 7vw, 6rem);
}

.alw-range__head { padding-bottom: 1.25rem; }

.alw-range__head h2 {
  font-family: Cinzel, Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  line-height: 1.1;
  color: var(--navy);
  letter-spacing: .03em;
  margin-top: .5rem !important;
  text-wrap: balance;
}

.alw-range__n { font-variant-numeric: tabular-nums; color: var(--bronze); }

/* Sticky control bar. It stays reachable through a long grid, which is the
   difference between a catalogue and a scroll. */
.alw-range__bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  align-items: center;
  padding: .75rem 0;
  margin-bottom: 1.5rem;
  background: rgba(251, 250, 247, .86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, padding .3s;
}
.alw-range__bar.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 24px -18px rgba(7, 27, 51, .5);
}

.alw-bar-sentinel { height: 1px; margin-top: -1px; }

.alw-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 100%;
}

.alw-search__icon {
  position: absolute;
  left: .8125rem;
  color: var(--slate);
  pointer-events: none;
}

.alw-search input {
  width: 100%;
  min-height: 48px;
  padding: .625rem .875rem .625rem 2.5rem;
  /* 16px minimum stops iOS zooming the page on focus. */
  font-size: 16px;
  font-family: Jost, Futura, system-ui, sans-serif;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid rgba(12, 47, 87, .18);
  border-radius: 3px;
  transition: border-color .2s, box-shadow .2s;
}
.alw-search input::placeholder { color: #93A1AF; }
.alw-search input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--gold);
}

/* Chips scroll sideways on a phone rather than wrapping into three rows. */
.alw-chips {
  display: flex;
  gap: .5rem;
  flex: 1 1 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
}
.alw-chips::-webkit-scrollbar { display: none; }

.alw-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 44px;
  padding: 0 1.0625rem;
  border: 1px solid rgba(12, 47, 87, .18);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  font-family: Jost, Futura, system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.alw-chip:hover { border-color: var(--gold); color: var(--navy); }
.alw-chip:active { transform: scale(.97); }
.alw-chip.is-on {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--marble);
}

.alw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.625rem, 1.6vw, 1.5rem);
}

.alw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .625rem .625rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
  will-change: transform;
}
.alw-card:hover {
  transform: translateY(-6px);
  border-color: rgba(198, 165, 92, .6);
  box-shadow: 0 2px 4px rgba(7, 27, 51, .05), 0 18px 40px rgba(7, 27, 51, .13);
}
.alw-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.alw-card__shot {
  position: relative;
  display: block;
  background: linear-gradient(180deg, #fff 0%, var(--marble) 70%, #ECE6DA 100%);
  border-radius: 3px;
  overflow: hidden;
}

.alw-card__sizes {
  position: absolute;
  top: .4375rem;
  right: .4375rem;
  font-family: Jost, Futura, system-ui, sans-serif;
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(12, 47, 87, .12);
  border-radius: 999px;
  padding: .1875rem .4375rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* A gold rule that draws itself under the name on hover. */
.alw-card__rule {
  display: block;
  height: 1px;
  width: 0;
  margin: .625rem auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: width .45s var(--ease);
}
.alw-card:hover .alw-card__rule,
.alw-card:focus-visible .alw-card__rule { width: 64%; }
.alw-card__shot img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .5s var(--ease);
}
.alw-card:hover .alw-card__shot img { transform: scale(1.045); }

.alw-card__name {
  font-family: Cinzel, Georgia, serif;
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.25;
  letter-spacing: .04em;
  color: var(--navy);
  margin-top: .5rem;
}

.alw-card__meta {
  font-family: Jost, Futura, system-ui, sans-serif;
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--slate);
}

.alw-card[hidden] { display: none; }

.alw-range__empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--slate);
  font-family: Jost, Futura, system-ui, sans-serif;
}

.alw-range__more {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.alw-more { width: 100%; max-width: 420px; }
.alw-more__count { opacity: .7; font-size: .875rem; }
.alw-more[hidden] { display: none; }

.alw-range__all {
  font-family: Jost, Futura, system-ui, sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid rgba(198, 165, 92, .5);
}
.alw-range__all:hover { color: var(--navy); border-bottom-color: var(--navy); }

/* ===========================================================================
   Process
   =========================================================================== */

.alw-process {
  background: var(--marble);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.alw-process__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--band) var(--gut);
}

.alw-process__head { max-width: 62ch; }
.alw-process__head h2 {
  font-family: Cinzel, Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.75rem, 4.6vw, 2.75rem);
  line-height: 1.1;
  color: var(--navy);
  letter-spacing: .03em;
  margin: .75rem 0 1rem !important;
  text-wrap: balance;
}
.alw-process__lede { color: var(--slate); font-size: 1.0625rem; line-height: 1.72; }

.alw-steps {
  list-style: none;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.alw-step { border-top: 1px solid var(--gold); padding-top: 1.25rem; }

.alw-step__n {
  font-family: Cinzel, Georgia, serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--gold);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

.alw-step__t {
  font-family: Cinzel, Georgia, serif;
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--navy);
  letter-spacing: .05em;
  margin: .5rem 0 .5rem !important;
}

.alw-step__d { color: var(--slate); line-height: 1.65; font-size: .9375rem; }

.alw-process__cta { margin-top: clamp(2rem, 4vw, 3rem); }

/* ===========================================================================
   Truth
   =========================================================================== */

.alw-truth {
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(37, 99, 165, .45) 0%, rgba(12, 47, 87, 0) 70%),
    linear-gradient(180deg, #0A2340 0%, #04101E 100%);
  text-align: center;
  padding: var(--band) var(--gut);
}

.alw-truth__mark { display: flex; justify-content: center; }

.alw-truth__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.5rem, 9vw, 4.25rem);
  color: var(--gilt);
  margin: 1.25rem 0 1rem !important;
  letter-spacing: .02em;
}

.alw-truth__body {
  max-width: 56ch;
  margin: 0 auto !important;
  color: rgba(238, 240, 244, .78);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.78;
}
.alw-truth__body em { color: var(--gilt); font-style: italic; }

.alw-truth__cta { margin-top: 2rem; }

/* ===========================================================================
   Reveals
   =========================================================================== */

.alw-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.alw-reveal.is-in { opacity: 1; transform: none; }

/* ===========================================================================
   Larger screens
   =========================================================================== */

@media (min-width: 600px) {
  .alw-hero__actions .alw-btn { flex: 0 0 auto; }
  /* Sideways scroll is a phone affordance. On a wider screen the chips wrap,
     which also avoids the paint clipping seen on the scroll container. */
  .alw-chips {
    overflow-x: visible;
    flex-wrap: wrap;
    scroll-snap-type: none;
  }
  .alw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .alw-card { padding: 1rem 1rem 1.25rem; }
  .alw-card__name { font-size: .9375rem; }
  .alw-card__meta { font-size: .75rem; }
  .alw-search { flex: 0 1 320px; }
  .alw-chips { flex: 1 1 auto; }
  .alw-range__bar { gap: .875rem; padding: .875rem 0; }
  .alw-more { width: auto; }
  .alw-range__more { flex-direction: row; justify-content: center; gap: 1.75rem; }
}

@media (min-width: 768px) {
  .alw-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alw-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .alw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .alw-hero__vial img { height: clamp(300px, 44vh, 420px); }
}

@media (min-width: 1024px) {
  .alw-hero { padding-top: clamp(3.5rem, 6vw, 6.5rem); }
  .alw-hero__title { max-width: 14ch; }
  .alw-hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
  }
  /* Vial to the right of the copy, never above it. Order the STAGE, which
     is the grid child; ordering .alw-hero__vial has no effect here. */
  .alw-hero__stage { order: 2; }
  .alw-hero__copy { order: 1; }
  .alw-hero__vial img { height: clamp(360px, 50vh, 560px); }
  .alw-proof__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .alw-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .alw-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* People who ask for less motion get none of it. */
@media (prefers-reduced-motion: reduce) {
  .alw-reveal { opacity: 1; transform: none; transition: none; }
  .alw-hero__vial img { animation: none; }
  .alw-hero__seal-dot { animation: none; }
  .alw-hero__aurora { animation: none; }
  .alw-card__rule { transition: none; }
  .alw-progress span { transition: none; }
  .alw-marquee__track { animation: none; }
  .alw-btn:hover, .alw-card:hover { transform: none; }
  .alw-card:hover .alw-card__shot img { transform: none; }
}

/* The card is a container now: the link covers everything above the
   buy row, so a size chip can live inside the card without swallowing
   the click that opens the product. */
.alw-card__link {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  text-decoration: none;
  color: inherit;
}
.alw-card__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.alw-card .alw-buy { margin-top: .625rem; }