/* ==========================================================================
   TWMD — Dietary Supplements
   supplements.twmd-fl.com

   Vanilla CSS, no framework, no external font. The palette below is SAMPLED
   from the owner-approved reference composition rather than guessed, so the
   navy/cyan language matches the mockup at the pixel rather than by eye.

   There is no @import and no font CDN. The reference is set in a humanist
   sans that the system stack resolves to natively on the platform the owner
   reviews from, and a marketing page that blocks its own first paint on a
   third-party font is slower for no gain the design actually needs.
   ========================================================================== */

/* ---------- palette, sampled from the reference ---------- */
:root {
  --navy-950: #011226;   /* deepest water, foot of the scene */
  --navy-900: #01152b;
  --navy-850: #041a30;
  --navy-800: #072038;   /* hero field */
  --navy-750: #062440;   /* masthead */
  --navy-700: #0b2641;   /* vision / mission band */
  --navy-600: #12324f;
  --navy-500: #1e3851;   /* closing band, upper */

  --cyan-100: #d6f6ff;
  --cyan-200: #a3f5fd;
  --cyan-300: #7ce4ff;   /* primary action */
  --cyan-400: #4ec8ee;
  --cyan-500: #2ba3d4;

  --ice-100: #bee9ff;    /* headings on deep water */

  --paper: #eaf5fd;      /* founder band */
  --paper-edge: #d3e6f4;
  --ink-900: #0d2340;    /* headings on paper */
  --ink-700: #274257;
  --ink-500: #3c5670;

  --white: #ffffff;
  --white-80: rgba(255, 255, 255, .80);
  --white-64: rgba(255, 255, 255, .64);
  --white-40: rgba(255, 255, 255, .40);
  --white-14: rgba(255, 255, 255, .14);
  --white-08: rgba(255, 255, 255, .08);

  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui,
          -apple-system, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --gut: clamp(20px, 4.6vw, 52px);

  /* The scene's right-hand column, which the iceberg occupies. 550/1024 of
     the reference composition. */
  --berg-w: 53.7%;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1.15; }
p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

a { color: inherit; }

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

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

/* Every interactive element gets the same visible ring, on every surface. */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--cyan-300);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -140%);
  z-index: 100;
  background: var(--cyan-300); color: #04121f;
  font-weight: 600; text-decoration: none;
  padding: .7rem 1.2rem; border-radius: 0 0 8px 8px;
  transition: transform .15s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }


/* ==========================================================================
   SHARED PIECES
   ========================================================================== */

.eyebrow {
  margin: 0 0 .55rem;
  font-family: var(--font);
  font-size: clamp(.68rem, 1.02vw, .78rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
}
.eyebrow--cyan  { color: var(--cyan-300); }
.eyebrow--ink   { color: var(--ink-900); }
.eyebrow--faint { color: var(--white-64); letter-spacing: .2em; font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font);
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  padding: .72em 1.5em;
  white-space: nowrap;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn--primary {
  background: var(--cyan-300);
  color: #04121f;
  box-shadow: 0 6px 20px rgba(6, 40, 70, .45);
}
.btn--primary:hover { background: var(--cyan-200); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }
.btn--lg { font-size: clamp(.95rem, 1.35vw, 1.06rem); padding: .84em 1.85em; }
.btn__arrow { font-size: 1.05em; line-height: 1; }


/* ==========================================================================
   MASTHEAD
   ========================================================================== */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, var(--navy-750) 0%, rgba(6, 36, 64, .92) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--white-08);
}

.masthead__inner {
  display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px);
  min-height: 76px;
  padding-block: 12px;
}

.brand {
  display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px);
  text-decoration: none; color: var(--white);
  flex: 0 0 auto;
}
.brand__mark {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: .012em;
  line-height: 1;
}
.brand__mark--sm { font-size: 1.5rem; }
.brand__rule { width: 1px; align-self: stretch; background: var(--white-40); }
.brand__lockup { display: grid; gap: 1px; }
.brand__vertical {
  font-family: var(--font-display);
  font-size: clamp(.94rem, 1.32vw, 1.06rem);
  font-weight: 700;
  line-height: 1.25;
}
.brand__offering {
  font-size: clamp(.78rem, 1.06vw, .88rem);
  color: var(--white-80);
  line-height: 1.25;
}

/* THE BAR IS BALANCED BY CONSTRUCTION, NOT BY COUNTING LINKS.

   UX-03 removed the four informational anchors and the disclosure that
   existed only to expose them, and the temptation with a bar that has lost
   its middle is to re-centre something into the gap. Nothing is centred
   here: the lockup is flush left, the action is pushed to the right by
   `margin-left: auto`, and the space between them is whatever the viewport
   leaves. That reads as an intended composition at 1440 and at 390 alike,
   where a hand-tuned spacer would have to be re-tuned at every width.

   There is no .nav, no .nav__list and no .nav-toggle any more. The four
   anchor TARGETS remain -- the hero and the footer still link to them. */
.masthead__cta { margin-left: auto; font-size: clamp(.84rem, 1.12vw, .94rem); }

/* The four-line promise that closes the reference masthead. It is the
   quietest thing on the bar and must stay that way. */
.masthead__promise {
  flex: 0 0 auto;
  width: 9ch;
  margin: 0;
  font-size: .58rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--white-40);
}


/* ==========================================================================
   THE SCENE
   ========================================================================== */

.scene { isolation: isolate; }

/* THE WATERLINE IS A SECTION BOUNDARY, NOT A MEASUREMENT.

   The two halves of the scene are two elements. The sky photograph is pinned
   to the FOOT of the upper one and the underwater photograph to the HEAD of
   the lower one, so wherever those two elements meet, the sea meets the page
   -- at every viewport width, and through any reflow of the copy, with no
   constant left to drift.

   The single image this replaced could only be positioned against a section
   whose height its own copy decided. The sea landed about 170px below where
   the composition puts it, the dossier card floated in open sky above a peak
   it is meant to be standing on, and the note beside it -- dark navy, because
   in the reference it sits on a bright sky -- came to rest on navy and could
   not be read at all. */
.scene__surface,
.scene__depth {
  position: relative;
  overflow: hidden;
}

/* TWO LAYERS EACH, AND THE NUMBERS ARE READ OFF THE PHOTOGRAPH.

   The lower gradient reproduces the colour of the photograph LEFT EDGE all
   the way down it; the upper one darkens that to navy as it travels left,
   which is the vignette the reference composition has. Both reach zero
   opacity at 46.3% -- exactly where the photograph begins -- so the CSS and
   the image are the same colour at the join and there is no edge to see.

   A flat navy behind a photograph whose own left edge is #3480af does not
   blend, it frames: the first attempt put a plainly visible lighter panel
   down the right-hand half of the section. */
.scene__surface {
  background:
    linear-gradient(90deg,
      var(--navy-800) 0%, var(--navy-800) 40%,
      rgba(7, 32, 56, .72) 52%, rgba(7, 32, 56, 0) 62.4%),
    /* Stops in vw, not percentages: this half is as tall as its copy, but
       the photograph pinned to its foot is 22.6vw tall whatever the copy
       does, so the colour run has to be measured in the photograph units or
       it slides out of register with it. Read from the bottom up. */
    linear-gradient(0deg,
      #17557f 0, #446f8e 4.6vw, #3a6786 8.6vw, #17436a 15.8vw,
      #0b2b4a 22.6vw, var(--navy-800) 30vw);
}
.scene__depth {
  background:
    linear-gradient(90deg,
      var(--navy-900) 0%, rgba(1, 21, 43, .97) 12%, rgba(1, 21, 43, .88) 30%,
      rgba(1, 21, 43, .62) 45%, rgba(1, 21, 43, 0) 62.4%),
    /* Likewise in vw. The underwater photograph is 40.2vw tall, and it ends
       on #042343 -- so the run reaches that colour at exactly 40.2vw and
       darkens away below it. Left in percentages, the CSS was a good deal
       lighter than the water at the point the image stopped, and drew a
       plainly visible horizontal seam across the right-hand half. */
    linear-gradient(180deg,
      #2f7ba8 0, #0f76a1 4.8vw, #0e87b2 13.7vw, #056fa2 20.9vw,
      #004876 28.2vw, #01335b 35.4vw, #042343 40.2vw,
      var(--navy-950) 47vw);
}

/* z-index 0, NOT -1. Each half paints its own opaque water gradient, and
   .scene establishes a stacking context, so a negatively stacked child sank
   behind that background and the iceberg disappeared from the page
   completely. The photograph sits at the floor of the section instead and
   the copy is lifted above it. */
.scene__ice {
  position: absolute;
  right: 0;
  width: var(--berg-w);
  height: auto;
  z-index: 0;
}
.scene__surface > .wrap,
.scene__depth > .wrap { position: relative; z-index: 1; }
.scene__ice--above { bottom: 0; }
.scene__ice--below { top: 0; }

/* The sky asset is 232 tall at 550 wide. The upper half must never be shorter
   than the photograph pinned to its foot, or the peak is clipped off the top
   of its own section. */
.scene__surface { min-height: 22.65vw; }


/* ---------- above the waterline ---------- */


/* 67/33, measured off the reference: within its content column the dossier
   card's left edge and the capability markers both sit at 67%, the headline
   runs to 55% and the body copy stops at 45%. An even split put the headline
   in a box too narrow to hold "Don't shop an idea." on one line, which is the
   single measurement the whole hero is built around. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 67fr) minmax(0, 33fr);
  /* Both columns sit on the waterline. The dossier group is placed against
     the sea rather than against the top of the section, because what it has
     to line up with is the peak -- and the peak is pinned to the foot of this
     half, not to its head. */
  align-items: end;
  padding-top: clamp(30px, 4.4vw, 52px);
}

.hero__title {
  font-size: clamp(2.1rem, 4.9vw, 3.4rem);
  letter-spacing: -.018em;
  line-height: 1.0;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.hero__title-a, .hero__title-b { display: block; }
.hero__title-b { color: var(--cyan-300); }

.hero__body {
  max-width: 42ch;
  font-size: clamp(.98rem, 1.36vw, 1.1rem);
  line-height: 1.5;
  color: var(--white);
}

.hero__actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(14px, 2.2vw, 30px);
  margin-top: clamp(24px, 3.4vw, 44px);
}

.link-walk {
  display: inline-flex; align-items: center; gap: .8rem;
  text-decoration: none; color: var(--white);
  transition: color .16s ease;
}
.link-walk__icon { flex: 0 0 auto; width: 42px; height: 42px; color: var(--white); }
.link-walk__icon svg { width: 100%; height: 100%; }
.link-walk__text { display: grid; gap: 1px; }
.link-walk__title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; }
.link-walk__sub { font-size: .86rem; color: var(--white-64); }
.link-walk:hover { color: var(--cyan-200); }
.link-walk:hover .link-walk__sub { color: var(--cyan-200); }


/* ---------- the Product Dossier ---------- */

/* The right-hand column runs wider than its grid track so the heading spans
   the sky the way the reference sets it, while the card below stays over the
   peak. */
/* 5.2vw is the reference measurement: the card stands 53px clear of the
   waterline at a 1024px composition, on the ice rather than in the sea. */
.hero__dossier {
  position: relative;
  padding-bottom: clamp(18px, 5.2vw, 62px);
}
.hero__dossier .eyebrow { text-align: center; }

/* UX-03 §3 removed the deck that used to sit between this heading and the
   card ("One clear definition. Multiple qualified manufacturing proposals."
   -- redundant beside the Dossier itself, which says exactly that in five
   lines). The gap it leaves is neither filled nor left gaping: the heading
   keeps a little over half of the deck's former block, so eyebrow, heading
   and card close up into one object rather than leaving a hole where a line
   used to be. The column is bottom-aligned to the waterline, so the slack
   comes off the open sky ABOVE the eyebrow, where there is nothing to
   disturb. */
.hero__dossier-title {
  text-align: center;
  font-size: clamp(1.05rem, 1.72vw, 1.4rem);
  line-height: 1.32;
  margin-bottom: clamp(18px, 2.5vw, 34px);
  text-shadow: 0 2px 14px rgba(3, 22, 42, .5);
}

/* Card on the peak, note beside it — the reference's arrangement, as a grid
   rather than an absolutely positioned block, so the note cannot ride over
   the card when the copy reflows. */
/* THE CARD SITS ON THE CENTRE LINE OF ITS OWN HEADING.

   It used to sit in the left track of a two-column row with the note beside
   it, which put its centre about 60px left of the heading centred directly
   above it — read as off-centre even once the tilt was gone. One column now,
   card centred, note beneath it. Its WIDTH IS UNCHANGED at 58% of the
   column, so centring it did not enlarge it. */
.hero__dossier-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(12px, 1.4vw, 20px);
}

/* A real card, not a picture of one: a paper-white panel standing UPRIGHT on
   the ice.

   The -1.1deg tilt this used to carry reproduced the approved composition,
   where the card is drawn at a slight angle. On the built page it does not
   read as "photographed at an angle" — it reads as MISALIGNED, because a
   rectangle one degree off square sits here beside a masthead, a grid and a
   viewport edge that are all exactly square. Nothing in a rendered layout
   supplies the photographic context that made the tilt legible.

   IT STILL READ AS CROOKED AFTER THE ROTATION WENT, AND A SECOND ROTATION
   WAS NOT THE ANSWER. Three things were checked before anything changed.
   The rule carries no transform, so the box the browser lays out is exactly
   axis-aligned. The photograph behind it was ruled at 20px intervals and
   its horizon is level across the full 1100px crop, so no perspective is
   baked into the asset. And production was fetched and diffed against this
   file byte for byte, so what the owner is looking at IS what is written
   here -- not a stale stylesheet, which is the trap
   TWMD-SUPPLEMENTS-CACHE-01 exists to close.

   What was actually wrong is that the card had FOUR EDGES AND ONLY TWO OF
   THEM WERE VISIBLE. Its left side is a 5px cyan spine against dark ice and
   its foot carries a heavy shadow, so those two are emphatic; the top and
   the right are white paper meeting bright pale sky at about 1.1:1, and
   they simply dissolve. An outline the eye can close on only two sides has
   no orientation of its own, so it borrows one from the strongest line near
   it -- and the line near it is the iceberg ridge, running diagonally under
   the card. The card was never tilted. It was unbounded.

   So: all four edges are drawn, at a value that survives both bright sky
   and dark ice; the fill loses its 160deg sweep, which was a diagonal
   inside a shape whose whole job is to read square; the corners tighten
   from 12px to 8px, because four legible corners are the strongest upright
   cue a rectangle has; and the shadow comes in from 26px to 16px so the
   card sits on the ice instead of floating over it.

   Its WIDTH IS UNCHANGED at 58%, and box-sizing is border-box, so drawing
   the border did not enlarge it by a pixel. */
.dossier {
  width: 58%;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9fd 100%);
  color: var(--ink-900);
  border-radius: 8px;
  border: 1px solid #234a70;
  border-left: 5px solid var(--cyan-500);
  padding: clamp(9px, 1.05vw, 14px) clamp(9px, 1.08vw, 14px);
  box-shadow: 0 16px 30px rgba(2, 18, 36, .40), 0 2px 6px rgba(2, 18, 36, .34);
}

.dossier__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--paper-edge);
}
.dossier__brand { display: grid; gap: 1px; }
.dossier__brand strong {
  font-family: var(--font-display);
  font-size: clamp(.8rem, 1.15vw, 1rem); font-weight: 700; letter-spacing: .01em;
  color: #0f3a63;
}
.dossier__brand span { font-size: clamp(.62rem, .92vw, .8rem); color: var(--ink-700); }
.dossier__leaf { width: clamp(16px, 1.9vw, 23px); height: auto; color: var(--cyan-500); flex: 0 0 auto; }

.dossier__list { display: grid; gap: clamp(.3rem, .5vw, .5rem); margin-top: .65rem; }
.dossier__list li {
  display: grid; grid-template-columns: .78rem 1fr; align-items: start; gap: .34rem;
  font-size: clamp(.56rem, .82vw, .7rem); line-height: 1.3; color: var(--ink-700);
}
.dossier__list li::before {
  content: "";
  width: .74rem; height: .74rem;
  margin-top: .07rem;
  background-color: var(--cyan-500);
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E");
          mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E");
}


/* ---------- below the waterline ---------- */

.deep {
  display: grid;
  grid-template-columns: minmax(0, 67fr) minmax(0, 33fr);
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(24px, 3.2vw, 40px);
}

/* The three pillars stop at two thirds of the left column, as in the
   reference — the space they leave is where the ice comes through. */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
  max-width: 76%;
}
.pillar__icon { width: clamp(26px, 2.9vw, 32px); height: auto; color: var(--cyan-200); margin-bottom: .55rem; }
.pillar__name {
  font-size: clamp(.82rem, 1.12vw, .93rem);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .3rem;
}
.pillar__copy {
  font-size: clamp(.72rem, 1.02vw, .88rem);
  line-height: 1.4;
  color: var(--white-80);
}

.value { margin-top: clamp(26px, 4.2vw, 50px); }
.value__title {
  font-size: clamp(1.35rem, 2.42vw, 1.82rem);
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--ice-100);
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
.value__copy {
  max-width: 47%;
  font-size: clamp(.9rem, 1.24vw, 1rem);
  line-height: 1.6;
  color: var(--white-80);
}
.value__copy + .value__copy { margin-top: .9rem; }

/* The seven capabilities read out of the ice: a marker on the ice edge, a
   rule, then the label — the reference's own connector, rebuilt. */
.deep__right { padding-top: clamp(6px, 1.2vw, 16px); }

/* EVERY TRACK IS ASSIGNED EXPLICITLY. Left to auto-placement the running
   order is ::before, then the text, then ::after — so the LABEL landed in the
   connector's narrow middle track and all seven wrapped onto three lines
   each. An anonymous text node cannot be given a grid-column, which is why
   the label is wrapped in a span in the markup rather than fixed here. */
.capabilities { display: grid; gap: clamp(9px, 1.42vw, 17px); }
.capabilities li {
  display: grid;
  grid-template-columns: 8px clamp(20px, 3.2vw, 42px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 1.1vw, 14px);
  font-family: var(--font-display);
  font-size: clamp(.86rem, 1.24vw, 1rem);
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 1px 10px rgba(2, 16, 32, .55);
}
.capabilities li::before {
  content: "";
  grid-column: 1; grid-row: 1;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan-100);
  box-shadow: 0 0 10px rgba(166, 230, 255, .75);
}
.capabilities li::after {
  content: "";
  grid-column: 2; grid-row: 1;
  height: 1px;
  background: var(--white-40);
}
.capabilities li span { grid-column: 3; grid-row: 1; }

.deep__motto {
  margin-top: clamp(26px, 4.2vw, 52px);
  text-align: right;
  font-size: clamp(.66rem, .92vw, .76rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.85;
  color: var(--white-64);
}


/* ==========================================================================
   VISION AND MISSION
   ========================================================================== */

/* NO BACKGROUND AND NO RULES. This band used to be a navy slab of its own,
   sitting after the scene. It now sits INSIDE the scene, just under the
   waterline, so it has to be part of the water rather than a panel laid over
   it — a slab here would draw two hard horizontal edges across the one
   photograph this composition depends on keeping whole. The water gradient
   behind it is unchanged and shows straight through. */
/* A SCRIM, NOT A SLAB — and full-bleed, not wrap-width.

   This band sits level with the WIDEST, BRIGHTEST part of the submerged
   iceberg, and white text laid straight over that could not be read. Two
   ways out were built and looked at. Capping the band's width so the copy
   cleared the ice worked, and read badly: the Mission fell to ELEVEN ragged
   lines in the space that was left, which is worse typography than the
   problem it solved. This is the other one.

   It fades to nothing at top and bottom, so it draws no horizontal edge
   across the photograph and the iceberg is never cut — the ice stays visible
   through it, dimmed. It is painted on a pseudo-element 100vw wide rather
   than on the element itself, because .creed lives inside the page wrap and
   a scrim that stopped at the wrap's edge left a hard vertical seam down the
   right, exactly where the ice is brightest. */
.creed { position: relative; }
.creed::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(1, 20, 40, 0) 0%, rgba(1, 20, 40, .74) 18%,
    rgba(1, 20, 40, .74) 82%, rgba(1, 20, 40, 0) 100%);
}
/* A COMPACT EXECUTIVE BAND, NOT A SECOND HERO.

   UX-03 §5. Both statements stay always visible, in full, side by side --
   no accordion, nothing to expand, not one word changed. What was wrong was
   the geometry around them: 42px of block padding, a 68px divider gutter, a
   44px column gap and a 40px icon set this band at 264px of a 2500px page
   for two paragraphs, which is the proportion of a section that wants to be
   collapsed rather than one that wants to be read.

   Every number below is spacing. The padding goes first, then the gutters,
   and what they give up goes to the MEASURE -- the Mission is the long
   statement, and a wider column is what stops it stacking into a narrow
   ragged block. The type comes down one step and tightens to 1.5, which is
   the executive-summary setting this band should have had from the start.

   The scrim is untouched. It still fades to nothing at top and bottom, so
   the iceberg behind it is never cut. */
.creed__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  padding-block: clamp(14px, 1.6vw, 22px);
}
.creed__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(10px, 1.15vw, 15px);
}
.creed__item + .creed__item {
  border-left: 1px solid rgba(140, 205, 240, .22);
  padding-left: clamp(18px, 2.3vw, 30px);
}
.creed__icon { width: clamp(24px, 2vw, 28px); height: auto; color: var(--cyan-400); flex: 0 0 auto; margin-top: 1px; }
.creed .eyebrow { margin-bottom: .3rem; }
/* Over open water now, not a flat slab, so this type carries the same shadow
   the capability labels beside it already do. */
.creed__copy {
  font-size: clamp(.84rem, 1.04vw, .94rem);
  line-height: 1.5;
  color: var(--white);
  text-shadow: 0 1px 12px rgba(2, 16, 32, .65);
}
.creed .eyebrow { text-shadow: 0 1px 10px rgba(2, 16, 32, .6); }
.creed__icon { filter: drop-shadow(0 1px 8px rgba(2, 16, 32, .55)); }


/* ==========================================================================
   FOUNDER AND INDUSTRY EXPERIENCE
   ========================================================================== */

.proof {
  background: var(--paper);
  color: var(--ink-700);
  padding-block: clamp(38px, 5.2vw, 62px);
}
.proof__eyebrow { text-align: center; }
.proof__title {
  text-align: center;
  color: var(--ink-900);
  font-size: clamp(1.5rem, 3.05vw, 2.25rem);
  letter-spacing: -.015em;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

.proof__inner {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 40fr) minmax(0, 30fr);
  align-items: start;
  gap: clamp(20px, 3.2vw, 44px);
}

.proof__photo {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15, 52, 85, .18);
}

.proof__copy p {
  font-size: clamp(.9rem, 1.24vw, 1rem);
  line-height: 1.62;
}
.proof__copy p + p { margin-top: 1.05rem; }

.credentials {
  display: grid;
  gap: clamp(14px, 2vw, 24px);
  padding-left: clamp(14px, 2.2vw, 28px);
  border-left: 1px solid var(--paper-edge);
}
.credentials li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: clamp(9px, 1.15vw, 14px);
  font-size: clamp(.82rem, 1.1vw, .93rem);
  color: var(--ink-700);
}
.credentials svg { width: 30px; height: 30px; color: var(--ink-900); }



/* ==========================================================================
   FOOTER
   ========================================================================== */

/* UX-03 §7 REMOVED THE CLOSING CALL-TO-ACTION BAND, so the paper founder
   section now meets the foot of the page directly -- and what used to carry
   the eye across that change was a full navy band with a headline in it.
   The replacement is a value step and nothing else: the footer opens on the
   mid navy the scene is built in and settles to the deepest water at its
   base, over a little more top padding than it had.

   That is deliberately not a section. No eyebrow, no heading, no second Get
   Started: the page has already made its case twice by here, and it should
   end confidently rather than repeat the proposition. What it must not do
   is stop dead on a hard light-to-near-black edge, which is exactly what a
   flat --navy-950 gives the moment the band above it is gone. */
.foot {
  background: linear-gradient(180deg, var(--navy-600) 0%, var(--navy-850) 34%, var(--navy-950) 100%);
  border-top: 1px solid var(--white-08);
  padding-block: clamp(34px, 4.4vw, 54px) clamp(28px, 3.6vw, 42px);
  font-size: .88rem;
}
.foot__inner { display: grid; gap: clamp(20px, 2.8vw, 32px); }

.foot__brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(14px, 2vw, 26px);
  max-width: 62rem;
}
.foot__note { color: var(--white-64); line-height: 1.6; }

/* NOT A ONE-ITEM MENU. The footer's four informational links went with the
   masthead's at owner review, and what remained was the intake -- which is an
   action, and had been sitting in a list of anchors pretending to be a peer
   of "About". It is set as a link on its own, in the accent colour the rest
   of the page uses for an action, so the foot reads: who this is, how to
   start, and the legal line. */
.foot__action { margin: 0; }
.foot__action a {
  display: inline-flex; align-items: center; gap: .5em;
  color: var(--cyan-300);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
}
.foot__action a span { font-size: 1.05em; line-height: 1; }
/* It does not borrow .btn__arrow. The footer link is a link, not a button,
   and a test asserts this footer contains no button at all -- reusing the
   class would have made that guard pass on a technicality while reporting
   the opposite of what it means. */
.foot__action a:hover { color: var(--cyan-200); text-decoration: underline; }

.foot__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-top: clamp(16px, 2.2vw, 22px);
  border-top: 1px solid var(--white-08);
  color: var(--white-40);
  font-size: .8rem;
}
.foot__promise { letter-spacing: .1em; text-transform: uppercase; font-size: .7rem; }


/* ==========================================================================
   RESPONSIVE

   Not the desktop composition scaled down. Below 900px the photograph stops
   being a backdrop behind two columns and becomes a full-width band sitting
   between what you see and what lies beneath it — which is the same story
   the two-column layout tells, read top to bottom instead of left to right.
   ========================================================================== */

@media (max-width: 1080px) {
  .masthead__promise { display: none; }
}

@media (max-width: 900px) {

  /* ---- the masthead does not collapse, because there is nothing left to
          collapse ----

     There WAS a hamburger here, and a panel that dropped down under it
     holding the four informational links. Both are gone with the links
     (UX-03 §2). What is deliberately NOT here is an empty disclosure: a
     button that opens a panel containing only the button beside it is worse
     than no button, and it is what this breakpoint would have been left
     with had the toggle been kept.

     The bar keeps its single row at every width -- lockup, space, action --
     so there is no wrap, no second row and no open/closed state to manage,
     which is also why the page ships no JavaScript at all any more. */
  /* ---- the scene unstacks ---- */

  /* The photograph stops being a backdrop behind two columns and becomes a
     full-width band between what you see and what lies beneath it: the same
     story the desktop layout tells, read top to bottom instead of left to
     right. Both halves are put back into document flow and ordered so they
     still meet, which keeps the waterline intact. */
  .scene__surface { display: flex; flex-direction: column; min-height: 0; }
  .scene__depth   { display: flex; flex-direction: column; }
  .scene__surface > .wrap { order: 1; }
  .scene__surface > .scene__ice { order: 2; }
  .scene__depth   > .scene__ice { order: 1; }
  .scene__depth   > .wrap { order: 2; }

  .scene__ice {
    position: static;
    width: 100%;
    margin-inline: auto;
    z-index: 0;
  }
  .scene__ice--above { margin-top: clamp(24px, 5vw, 40px); }

  /* FULL-BLEED HERE, and capped at 560px it was not. A centred photograph
     ends on a hard vertical edge against a vignette that was shaped for a
     photograph anchored to the right, and the join was plainly visible down
     the right-hand side at tablet widths. Run to both edges and there is no
     join: the baked left fade dissolves into the water, and the right side
     simply reaches the edge of the screen. */
  .scene__surface, .scene__depth { min-height: 0; }

  /* The horizontal vignette goes with it -- it exists to darken the space
     LEFT of a right-anchored photograph, and there is no such space now. The
     vertical runs are the desktop ones rescaled by 100/53.7, because the
     photograph is that much wider relative to the viewport here. */
  .scene__surface {
    background: linear-gradient(0deg,
      #17557f 0, #446f8e 8.6vw, #3a6786 16vw, #17436a 29.4vw,
      #0b2b4a 42.1vw, var(--navy-800) 56vw);
  }
  .scene__depth {
    background: linear-gradient(180deg,
      #2f7ba8 0, #0f76a1 8.9vw, #0e87b2 25.5vw, #056fa2 38.9vw,
      #004876 52.5vw, #01335b 65.9vw, #042343 74.9vw,
      var(--navy-950) 88vw);
  }

  .hero, .deep { grid-template-columns: minmax(0, 1fr); }

  .hero__dossier { padding-top: clamp(26px, 5vw, 40px); padding-bottom: 0; }
  .hero__dossier .eyebrow, .hero__dossier-title { text-align: left; }
  .hero__dossier-row { grid-template-columns: minmax(0, 1fr); gap: 0; justify-items: start; }
  /* The card is type-as-graphic on the desktop composition, sized against a
     narrow column beside the peak. Here it has the width of the screen, so
     the same five lines are set at a size meant to be READ rather than
     recognised -- the desktop clamp would have left them at about 9px on a
     360px-wide card. */
  .dossier {
    width: min(380px, 100%);
    margin-inline: 0;
    padding: 15px 17px;
  }
  .dossier__brand strong { font-size: 1.05rem; }
  .dossier__brand span { font-size: .84rem; }
  .dossier__leaf { width: 22px; }
  .dossier__list { gap: .55rem; margin-top: .8rem; }
  .dossier__list li {
    grid-template-columns: 1.05rem 1fr;
    gap: .55rem;
    font-size: .85rem;
  }
  .dossier__list li::before { width: 1rem; height: 1rem; }
  .deep { padding-top: clamp(26px, 5vw, 38px); }

  /* TWO DESKTOP MEASUREMENTS THAT WERE NEVER RESET HERE, both visible on
     the live site today and both found by reading the 390px render for
     UX-03 §11 rather than by any change this release made.

     The first: hiding the two <br>s in the heading did not reflow it, it
     DELETED the line breaks -- there is no whitespace either side of them
     in the markup, so the phone rendered "The TWMDIntellectual Propertyand
     Data Foundation." as two run-together words. The breaks are simply let
     stand instead; the heading sets to the same three lines it does on the
     desktop, and it fits inside the column down to 320px.

     The second: .value__copy is capped at 47% so the desktop paragraph
     clears the ice coming through beside it. There is no ice beside it
     here -- the photograph is a full-width block of its own below 900px --
     so the cap did nothing but set the body copy to half the width of the
     screen, about six words to a line. */
  .value__copy { max-width: none; }
  .capabilities li { grid-template-columns: 8px 16px 1fr; }
  .deep__motto { text-align: left; }

  /* ---- everything else to one column ---- */
  .creed__inner { grid-template-columns: minmax(0, 1fr); }
  /* The photograph is a full-width block of its own here and nothing is
     layered over it, so there is nothing to scrim. */
  .creed::before { display: none; }
  .creed__item + .creed__item {
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(140, 205, 240, .22);
    padding-top: clamp(24px, 4.4vw, 34px);
  }

  .proof__inner { grid-template-columns: minmax(0, 1fr); }
  .proof__photo { max-width: 520px; margin-inline: auto; }
  .credentials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 0; padding-top: clamp(18px, 3vw, 26px);
    border-left: 0; border-top: 1px solid var(--paper-edge);
  }

  .foot__brand { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 560px) {
  /* Lockup and action share one row at 390px, and BOTH have to give a
     little for that row to sit inside its own gutter.

     Measured first: left at their desktop sizes the pair came to 381px of
     a 350px content box, so the button finished 17px PAST the right gutter
     and all but touched the edge of the screen -- a bar that reads as
     overflowing, which is the opposite of the intentional one §2 asks for.
     The page did not scroll sideways, so nothing flagged it; it was found
     by reading the masthead CTA box out of the probe at 390 and noticing it
     ended at 387 in a box that stops at 370.

     The type comes down rather than the lockup losing its second line:
     "Dietary Supplements / Product Development" IS the brand hierarchy
     this page exists to state, and it is the last thing to go. Below 380px
     the lockup does drop entirely, which is a rule that already existed. */
  .brand__mark { font-size: 1.28rem; }
  .brand__vertical { font-size: .84rem; }
  .brand__offering { font-size: .74rem; }
  .masthead__cta { font-size: .82rem; padding: .62em 1.05em; }
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pillar { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
  .pillar__icon { grid-row: span 2; margin-bottom: 0; }
  .credentials { grid-template-columns: minmax(0, 1fr); }
  .brand__rule { display: none; }
  .brand { gap: 10px; }
  .hero__title-a, .hero__title-b { display: inline; }
  .foot__legal { flex-direction: column; }
}

@media (max-width: 380px) {
  .brand__lockup { display: none; }
}


/* ==========================================================================
   404
   ========================================================================== */

.notfound {
  display: flex;
  align-items: center;
  min-height: 62vh;
  background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 60%, var(--navy-950) 100%);
  padding-block: clamp(48px, 9vw, 110px);
}
.notfound__inner { width: 100%; max-width: 46rem; }
.notfound__title {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  letter-spacing: -.018em;
  line-height: 1.05;
  margin-bottom: clamp(12px, 1.8vw, 18px);
}
.notfound__copy {
  font-size: clamp(.98rem, 1.36vw, 1.1rem);
  line-height: 1.55;
  color: var(--white-80);
  max-width: 34rem;
}
.notfound__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(14px, 2.2vw, 28px);
  margin-top: clamp(24px, 3.4vw, 40px);
}
.notfound__alt { color: var(--cyan-300); text-decoration: underline; text-underline-offset: 3px; }
.notfound__alt:hover { color: var(--cyan-200); }