/* ==========================================================================
   Ceylon Spices Global — "Chart & Manifest"
   Palette : chart-ink teal / parchment / logo gold / clove brown / leaf
   Type    : Inter (display, Google) · Satoshi (body, Fontshare)
             · JetBrains Mono (manifest data, Google)
   ========================================================================== */

:root {
  --ink:        #0E2027;
  --ink-2:      #16323C;
  --ink-3:      #24454F;
  --paper:      #F0EADD;
  --paper-2:    #E3D9C6;
  --gold:       #B98428;
  --gold-lt:    #E3B863;
  --clove:      #5E3520;
  --leaf:       #4A7A54;

  --rule:       rgba(14, 32, 39, 0.16);
  --rule-dark:  rgba(240, 234, 221, 0.18);

  /* Semantic text tokens. Every value below is measured at >=4.5:1 against
     its intended surface, so use these instead of ad-hoc rgba() values.
     Naming follows purpose, not appearance (Design Guideline — Color). */
  --on-dark:        #F0EADD;                    /* 13.96:1 on --ink  */
  --on-dark-2:      rgba(240, 234, 221, 0.78);  /*  8.94:1 on --ink  */
  --on-dark-3:      rgba(240, 234, 221, 0.65);  /*  6.57:1 on --ink  */
  --on-light:       #0E2027;                    /* 13.96:1 on --paper */
  --on-light-2:     rgba(14, 32, 39, 0.68);     /*  5.34:1 on --paper */
  --on-light-3:     rgba(14, 32, 39, 0.65);     /*  4.86:1 on --paper */
  --field-border:   rgba(14, 32, 39, 0.50);     /*  3.14:1 — non-text UI min */
  --danger:         #A03521;                    /*  5.79:1 on --paper */
  --ok:             #3B6344;                    /*  5.74:1 on --paper */

  /* Light header/footer surface. Sits one step deeper than --paper so the
     sticky header stays readable as content scrolls beneath it. */
  --surface:        #E3D9C6;
  --on-surface:     #0E2027;                 /* 11.96:1 on --surface */
  --on-surface-2:   rgba(14, 32, 39, 0.68);  /*  5.00:1 on --surface */

  /* --gold reaches only 2.35:1 on a light surface, so it cannot carry text
     there. This deeper gold keeps the brand hue and passes on both light
     surfaces (4.65:1 on --surface, 5.43:1 on --paper). */
  --gold-dp:        #7E560F;

  /* Deep green from the reference design. Measured 9.69:1 against --paper
     both ways, so it works as headline accent, solid button and dark bar. */
  --forest:         #2F3D1E;
  --forest-2:       #3C4626;

  --tap:      44px;      /* minimum touch target */
  --text-min: 0.6875rem; /* 11px — platform minimum legible size */

  --display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --body:    "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad: clamp(1.25rem, 5vw, 5rem);
  --max: 1240px;

  /* Measured by main.js on load and resize; the value here is only a fallback
     for the first paint and for no-JS. Drives the hero's overlap offset. */
  --head-h: 84px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--gold); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--gold-dp);
  outline-offset: 3px;
}

/* Visible only to screen readers — conveys state that colour alone implies. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard users land here first and can jump the nav entirely. */
.skip-link {
  position: absolute;
  left: var(--pad);
  top: -100%;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-decoration: none;
  padding: 0.85rem 1.25rem;
  border: 2px solid var(--gold-dp);
}
.skip-link:focus { top: 0.75rem; }

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

/* --- shared type ---------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  /* Inter is a neutral UI face and reads flat at display sizes without extra
     weight, so headings sit at 600 rather than the 400 Fraunces used. */
  font-weight: 600;
  /* Inter's default spacing is tuned for small UI text. At headline sizes it
     looks loose, which is why the family ships an optical-size recommendation
     of negative tracking above roughly 32px. */
  letter-spacing: -0.021em;
  line-height: 1.08;
  margin: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
}

.eyebrow::after {
  content: "";
  width: 60px;
  flex: none;
  height: 1px;
  background: var(--rule);
}

.lede {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.55;
  max-width: 46ch;
}

.muted {
  color: rgba(14, 32, 39, 0.66);
}
/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.6rem;
  border: 1px solid var(--gold-dp);
  color: var(--gold-dp);          /* --gold is only 2.74:1 on a light page */
  background: transparent;
  transition: background 0.35s ease, color 0.35s ease;
}
.btn:hover { background: var(--gold-dp); color: var(--paper); }

.btn--solid {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--paper);            /* 9.69:1 */
}
.btn--solid:hover { background: transparent; color: var(--forest); }

.btn--ink { border-color: var(--ink); color: var(--ink); }
.btn--ink:hover { background: var(--ink); color: var(--paper); }

/* --- header --------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  /* positioning context for the mobile nav panel */
  z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

/* On pages that open with a hero, the header floats over the photograph while
   the page is at the top, then takes on its solid surface once the hero has
   begun to scroll past. .has-hero and .is-stuck are both set by main.js, so a
   no-JS visitor simply gets the solid header throughout — never an unreadable
   transparent one. */
/* At the top of the page the header carries no background at all — the
   photograph runs unbroken beneath it. Nothing sits behind the text, so the
   text has to carry its own legibility: full-strength ink rather than the 68%
   tints, plus a soft cream halo that lifts each glyph off whatever pixel it
   lands on. See the note on .site-head__inner below. */
.has-hero .site-head {
  background: transparent;
  border-bottom-color: transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Pure black at 700 over the photograph. Weight is doing the work that the
   glow was doing badly: thick strokes hold their shape against a busy image in
   a way that a halo around thin ones never did. */
.has-hero .site-head:not(.is-stuck) .brand__text,
.has-hero .site-head:not(.is-stuck) .nav a,
.has-hero .site-head:not(.is-stuck) .nav-toggle {
  color: #000;
  font-weight: 700;
}
.has-hero .site-head:not(.is-stuck) .nav a[aria-current="page"] { color: #000; }
.has-hero .site-head:not(.is-stuck) .nav-toggle { border-color: #000; }

/* Once scrolled, the header becomes a blurred pane rather than a flat colour:
   the page stays visible through it, but softened enough to sit the text on.
   The halo is dropped here — there is a real substrate again, so the 68% tints
   go back to being measured values. */
.has-hero .site-head.is-stuck {
  background: rgba(240, 234, 221, 0.72);
  border-bottom-color: var(--rule);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
          backdrop-filter: blur(18px) saturate(1.4);
}

/* No blur support means no softening, so the pane has to be near-opaque to
   remain a safe background for the header text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .has-hero .site-head.is-stuck { background: rgba(240, 234, 221, 0.97); }
}

/* Pull the hero up under the floating header and pad its content back down by
   the same amount, so nothing is hidden behind the bar. */
.has-hero main > .hero:first-child {
  margin-top: calc(var(--head-h) * -1);
}
.has-hero main > .hero:first-child .hero__grid {
  padding-top: calc(clamp(3rem, 6vw, 5rem) + var(--head-h));
}

.site-head__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  min-height: var(--tap);
}
/* The emblem was drawn for a light background, so on a light header it needs
   no disc behind it — the surface itself supplies the contrast it wants. */
.brand__mark {
  display: grid;
  place-items: center;
  flex: none;
}
.brand__mark img { height: 60px; width: auto; }
.brand__text {
  font-family: var(--mono);
  font-size: var(--text-min);      /* was 10px — below the legible minimum */
  letter-spacing: 0.16em;          /* reduced: wide tracking hurts small text */
  text-transform: uppercase;
  color: var(--on-surface-2);
  line-height: 1.5;
}
.brand__text strong {
  display: block;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--on-surface);
}

.nav { display: flex; align-items: center; gap: 1.5rem; }

/* Each link is its own 44px target, not just 44px of text.
   (Design Guideline — Accessibility > Mobility: "Offer sufficiently sized
   controls"; mobile default 44x44 pt.) */
/* The body face rather than JetBrains Mono here: the mono face has one weight
   worth using and thin, evenly-spaced strokes, which is the worst possible
   thing to put over a photograph. Satoshi carries a real 600/700 and sets
   tighter. */
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-2);
  text-decoration: none;
  padding-inline: 0.25rem;
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0.25rem; right: 0.25rem; bottom: 0.6rem;
  height: 1px;
  background: var(--gold-dp);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav a:hover { color: var(--on-surface); }
.nav a:hover::after { transform: scaleX(1); }

/* Current page is marked three ways — colour, a rule, and aria-current — so
   it never depends on colour alone.
   (Design Guideline — Color > Inclusive color.) */
.nav a[aria-current="page"] { color: var(--gold-dp); font-weight: 500; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Badge, not superscript: superscript pushed this to 8.8px. */
.nav__soon {
  font-size: var(--text-min);
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--gold-dp);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.2em 0.4em;
  margin-left: 0.5rem;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  background: none;
  border: 1px solid var(--field-border);
  color: var(--on-surface);
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

/* --- manifest rail (signature element) ------------------------------------ */

.manifest {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.manifest__cell {
  padding: 1.1rem 1.25rem;
  border-left: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.8125rem;        /* was 11.2px */
  line-height: 1.7;
  letter-spacing: 0.06em;
}
.manifest__cell:first-child { border-left: 0; }
.manifest__cell span {
  display: block;
  font-size: 0.6875rem;        /* was 9.6px — below the legible minimum */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dp);       /* --gold is 2.74:1 on the light About rail */
  margin-bottom: 0.3rem;
}

.manifest--dark { border-color: rgba(240, 234, 221, 0.22); }
.manifest--dark .manifest__cell {
  border-left-color: rgba(240, 234, 221, 0.22);
  color: rgba(240, 234, 221, 0.86);   /* 8.0:1 on --forest */
}
.manifest--dark .manifest__cell span { color: var(--gold-lt); }  /* 6.25:1 on --forest */

/* --- hero ----------------------------------------------------------------- */

/* Warm cream wash behind the photograph. Sits a shade warmer than --paper so
   the hero reads as sunlit spice-market light while the rest of the page
   stays on the cooler parchment. */
.hero {
  position: relative;
  background: linear-gradient(100deg, #F8EBD5 0%, #F4E3C7 48%, #EFD8B3 100%);
  color: var(--ink);
  overflow: hidden;
}

/* The stage is the positioning context for both the full-bleed photograph and
   the floating assurance bar. */
.hero__stage { position: relative; }

/* Text sits in the left column; the right column is empty and simply reserves
   the space the photograph occupies behind it. The generous bottom padding
   clears the bar that floats over the foot of the image. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(8rem, 12vw, 11rem);
  /* The hero fills exactly one screen. Because the hero is pulled up under the
     floating header, this height covers the header too — so the headline, the
     product and the green bar all land within the first view, with nothing
     needing a scroll to reach.
     min-height, not height: if the content is ever taller than the screen
     (large text settings, a very short window) the section grows rather than
     clipping what is inside it. */
  min-height: 100vh;
  /* dvh tracks the mobile browser's collapsing address bar, so the bar at the
     foot of the hero is not left hidden behind it. Ignored where unsupported,
     which is why the vh line above stays as the fallback. */
  min-height: 100dvh;
}

.hero__inner { position: relative; z-index: 2; }

/* Eyebrow carries a leaf mark rather than the rule used elsewhere, so it reads
   as a brand line instead of a section label. */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dp);          /* 5.0:1 on the warm cream */
  margin: 0 0 1.4rem;
}
.hero__eyebrow svg { flex: none; width: 26px; height: 26px; }

/* Two-tone display line: clove brown for the setup, forest for the place. */
.hero h1 {
  /* Back down from the condensed-face sizing: Inter sets much wider per
     character, and 6rem would push "Spices from" past the column. */
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.032em;
  margin: 0;
  color: #7A4A22;                 /* 6.1:1 on the warm cream */
}
.hero h1 em {
  font-style: normal;
  color: var(--forest);           /* 9.5:1 */
}

.hero__lede {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.75;
  color: var(--on-light-2);
  max-width: 34ch;
  margin: 1.5rem 0 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

/* Softened corners and a trailing arrow, per the reference. The arrow is
   decorative — the label already says where the link goes. */
.hero__cta {
  border-radius: 6px;
  padding: 1.05rem 1.9rem;
  gap: 1.1rem;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
}
.hero__cta svg {
  flex: none;
  width: 20px;
  height: 12px;
  transition: transform 0.35s ease;
}
.hero__cta:hover svg { transform: translateX(4px); }

/* Photograph fills the right side of the hero edge to edge — top, bottom and
   all the way to the viewport edge — rather than sitting in a box. */
.hero__media {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 62%;
  z-index: 0;
}
/* The source is a true 3:2 render and this column sits at roughly 1.55, so
   cover crops only a few percent off the sides — cheaper than the letterboxing
   contain produced, and the photograph fills the column top to bottom. */
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 70%, not 100%. The column is far squarer than the image's 3:2, so cover
     discards roughly a quarter of the width — which means this value pans the
     crop window rather than moving the subject directly, and the two run
     opposite ways: a lower percentage slides the window left, which carries
     the pouch further right on screen. 70 puts the product around two thirds
     across the visible area while keeping its left edge clear of the mask
     feather below, and its right edge well inside the frame. */
  object-position: 70% top;
  /* Only the left edge is feathered, so the photograph dissolves into the
     cream behind the headline instead of ending on a vertical seam. The fade
     falls on the shadowed wall, which carries no subject matter. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 100%);
}

/* Trust marks under the call to action: gold glyph, label, qualifier. */
.hero__marks {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
}
.hero__marks li { text-align: center; }
.hero__marks svg {
  width: 34px;
  height: 34px;
  margin: 0 auto 0.6rem;
  color: var(--gold-dp);
}
.hero__marks strong {
  display: block;
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
}
.hero__marks span {
  display: block;
  font-size: 0.8125rem;
  color: var(--on-light-2);
  margin-top: 0.3rem;
}

/* Green band floating over the foot of the photograph. */
.hero__rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  z-index: 3;
}

.assure {
  background: var(--forest);
  color: var(--on-dark);
  border-radius: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: clamp(1.25rem, 2.4vw, 1.9rem) clamp(1.25rem, 3vw, 2.5rem);
}

.assure__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: left;
}
.assure__cell svg {
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--gold-lt);          /* 6.25:1 on --forest */
}
.assure__cell strong {
  display: block;
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.assure__cell span {
  display: block;
  font-size: 0.875rem;
  color: var(--on-dark-2);
  margin-top: 0.2rem;
}

/* --- manifest rail (signature element) ------------------------------------ */

.manifest {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.manifest__cell {
  padding: 1.1rem 1.25rem;
  border-left: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.8125rem;        /* was 11.2px */
  line-height: 1.7;
  letter-spacing: 0.06em;
}
.manifest__cell:first-child { border-left: 0; }
.manifest__cell span {
  display: block;
  font-size: 0.6875rem;        /* was 9.6px — below the legible minimum */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dp);       /* --gold is 2.74:1 on the light About rail */
  margin-bottom: 0.3rem;
}

.manifest--dark { border-color: rgba(240, 234, 221, 0.22); }
.manifest--dark .manifest__cell {
  border-left-color: rgba(240, 234, 221, 0.22);
  color: rgba(240, 234, 221, 0.86);   /* 8.0:1 on --forest */
}
.manifest--dark .manifest__cell span { color: var(--gold-lt); }  /* 6.25:1 on --forest */

/* Kept: used by .page-head on the About page. */
@keyframes drift {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}

.hero__coords {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin: 0 0 2rem;
}

/* --- generic sections ----------------------------------------------------- */

.section { padding-block: clamp(4rem, 10vw, 7.5rem); }
.section--tight { padding-block: clamp(3rem, 7vw, 5rem); }
.section--dark { background: var(--ink); color: var(--paper); }
.section--dark .muted { color: rgba(240, 234, 221, 0.66); }
.section--dark .eyebrow::after { background: var(--rule-dark); }
.section--band { background: var(--paper-2); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.split h2 { font-size: clamp(2rem, 4vw, 3.1rem); }

.split__body p { margin: 0 0 1.25rem; }
.split__body p:last-child { margin-bottom: 0; }

/* --- product grid --------------------------------------------------------- */

.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 3rem;
}

.product {
  background: var(--paper);
  padding: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
}

.product__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.5rem;
  background: var(--ink);
}
.product__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.product:hover .product__media img { transform: scale(1.06); }

.product__body { padding-inline: 1.5rem; flex: 1; display: flex; flex-direction: column; }

.product h3 { font-size: 1.55rem; margin-bottom: 0.35rem; }

.product__latin {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--leaf);
  font-style: italic;
  margin: 0 0 1rem;
}

.product p.product__note {
  font-size: 0.9375rem;
  color: rgba(14, 32, 39, 0.7);
  margin: 0 0 1.5rem;
}

.product dl {
  margin: auto 0 0;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}
.product dl div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dotted var(--rule);
}
.product dt { color: rgba(14, 32, 39, 0.5); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.6rem; }
.product dd { margin: 0; text-align: right; }

/* --- process steps -------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 3rem;
}

.step { border-top: 2px solid var(--gold); padding-top: 1.25rem; }
.step__no {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  display: block;
  margin-bottom: 0.75rem;
}
.step h3 { font-size: 1.35rem; margin-bottom: 0.6rem; }
.step p { margin: 0; font-size: 0.9375rem; color: rgba(240, 234, 221, 0.72); }

/* --- comparison / claim block --------------------------------------------- */

.compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 2.5rem;
}
.compare > div { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem); }
.compare h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.compare p { margin: 0; font-size: 0.9375rem; }
.compare__tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1rem;
}
.compare__tag--ours { color: var(--gold); }
.compare__tag--theirs { color: rgba(14, 32, 39, 0.42); }

/* --- image band ----------------------------------------------------------- */

.band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink);
}
.band img { width: 100%; height: clamp(200px, 30vw, 380px); object-fit: cover; }

/* --- call to action ------------------------------------------------------- */

/* --- call to action ------------------------------------------------------- */

.cta {
  text-align: left;
}

.cta h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  max-width: 18ch;
  margin: 0;
}

.cta p {
  margin: 1.5rem 0 2.5rem;
  max-width: 48ch;
}

/* --- CTA Background ----------------------------------------- */

.cta-section {
  position: relative;
  overflow: hidden;
}

.cta-section__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cta-section__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5; /* the fade */
}

/* Light overlay — fades the photo into --paper instead of darkening it,
   so the existing --ink text stays legible without switching palettes. */
.cta-section__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--paper) 0%,
    rgba(240, 234, 221, 0.88) 55%,
    rgba(240, 234, 221, 0.65) 100%
  );
}

.cta-section .shell {
  position: relative;
  z-index: 2;
}

/* --- page header (interior pages) ----------------------------------------- */

.page-head {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3.5rem, 9vw, 6rem);
}
/* Keep the text above the media layer. */
.page-head > .shell { position: relative; z-index: 2; }

/* Optional photographic backdrop, mirroring the homepage hero.
   Add <div class="page-head__media"><img ...></div> inside .page-head. */
.page-head__media {
  position: absolute;
  inset: 0;
}
.page-head__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
/* The overlay is what makes the text legible, so it is not decoration.
   Measured against this image: worst case behind the headline is well above
   the 4.5:1 minimum. Re-check if you swap the photograph for a brighter one. */
.page-head__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(14,32,39,0.92) 0%, rgba(14,32,39,0.80) 50%, rgba(14,32,39,0.50) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .page-head__media img { animation: drift 30s ease-in-out infinite alternate; }
}
.page-head h1 { font-size: clamp(2.5rem, 6.5vw, 4.5rem); font-weight: 600; max-width: 16ch; }
.page-head h1 em { font-style: italic; color: var(--gold-lt); }
.page-head p { max-width: 48ch; color: rgba(240, 234, 221, 0.78); margin: 1.5rem 0 0; }

/* --- shop / coming soon --------------------------------------------------- */

.soon { text-align: center; max-width: 62ch; margin-inline: auto; }
.soon h2 { font-size: clamp(2.25rem, 6vw, 4rem); }
.soon p { margin: 1.5rem auto 0; }

.soon__mark {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 0.6rem 1.1rem;
  display: inline-block;
  margin-bottom: 2rem;
}

.soon-list {
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  text-align: left;
}
.soon-list li { background: var(--paper); padding: 1.5rem; }
.soon-list strong {
  display: block;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}
.soon-list span { font-size: 0.9375rem; color: rgba(14, 32, 39, 0.66); }

/* --- contact -------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.detail { border-top: 1px solid var(--rule); padding: 1.25rem 0; }
.detail:first-of-type { border-top: 0; padding-top: 0; }
.detail dt {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.detail dd { margin: 0; font-size: 1.0625rem; }
.detail dd a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.detail dd a:hover { border-color: var(--gold); }

.form { display: grid; gap: 1.5rem; min-width: 0; }

.form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  /* fieldset defaults to min-content width, which overflows a grid column.
     Both properties are needed for cross-browser effect. */
  min-inline-size: 0;
  min-width: 0;
}
.form legend {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dp);
  padding: 0 0 1rem;
}

.field { display: grid; gap: 0.5rem; min-width: 0; }
.field label {
  font-family: var(--mono);
  font-size: 0.75rem;          /* was 9.9px — below the legible minimum */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-light-2);    /* was 4.19:1 — now 5.34:1 */
}

/* Required is marked with a word, not just an asterisk or a colour. */
.field__req {
  font-size: var(--text-min);
  letter-spacing: 0.1em;
  color: var(--danger);
  margin-left: 0.4rem;
}

.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 1rem;             /* 16px — stops mobile browsers zooming on focus */
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--field-border);  /* was 1.37:1 — now 3.14:1 */
  border-radius: 0;
  padding: 0.85rem 1rem;
  min-height: var(--tap);
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }

.field input::placeholder,
.field textarea::placeholder { color: var(--on-light-3); opacity: 1; }

/* A visible focus ring, not just a colour shift on the border. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--gold-dp);
  outline-offset: 2px;
  border-color: var(--gold-dp);
}

/* Error state: colour + border weight + an icon glyph + a text message. */
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea {
  border-color: var(--danger);
  border-width: 2px;
}
.field__error {
  display: none;
  align-items: flex-start;
  gap: 0.4rem;
  font-family: var(--body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--danger);
}
.field[data-invalid="true"] .field__error { display: flex; }
.field__error::before {
  content: "\26A0";
  font-size: 0.9em;
  line-height: 1.6;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; min-width: 0; }
.field-row > * { min-width: 0; }

.form__note {
  overflow-wrap: break-word;
  font-family: var(--mono);
  font-size: 0.8125rem;        /* was 10.9px */
  line-height: 1.7;
  color: var(--on-light-3);    /* was 3.61:1 — now 4.86:1 */
  margin: 0;
}

/* Submission feedback. Announced to screen readers via aria-live.
   (Design Guideline — Feedback: "confirm that a significant action has
   completed"; "Show people when a command can't be carried out".) */
.form__status {
  font-family: var(--body);
  font-size: 0.9375rem;
  line-height: 1.6;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid;
  margin: 0;
}
.form__status:empty { display: none; }
.form__status[data-tone="error"]   { color: var(--danger); border-color: var(--danger); background: rgba(160, 53, 33, 0.06); }
.form__status[data-tone="success"] { color: var(--ok);     border-color: var(--ok);     background: rgba(59, 99, 68, 0.07); }

/* --- footer --------------------------------------------------------------- */

.site-foot {
  background: var(--surface);
  color: var(--on-surface-2);
  border-top: 1px solid var(--rule);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--rule);
}

.foot-mark {
  display: grid;
  place-items: center;
  justify-self: start;
  margin-bottom: 1.25rem;
}
.foot-mark img { height: 96px; width: auto; }

.site-foot h4 {
  font-family: var(--mono);
  font-size: 0.75rem;          /* was 9.9px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dp);       /* --gold is only 2.35:1 here */
  margin: 0 0 1rem;
  font-weight: 400;
}

.foot-links { list-style: none; margin: 0; padding: 0; display: grid; }
.foot-links li { display: flex; }

/* Footer links were ~24px tall. Now each is a full 44px target. */
.foot-links a,
.foot-links span {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-block: 0.25rem;
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--on-surface-2);
}
.foot-links a:hover { color: var(--on-surface); text-decoration: underline; }

.foot-address { font-style: normal; }

.foot-base {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  font-family: var(--mono);
  font-size: 0.75rem;          /* was 10.4px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-2);
}

/* --- scroll reveal -------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1000px) {
  .products { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }

  /* Anchored to the header's own height rather than a hard-coded 78px, so
     the panel stays correct when the logo or text size changes.
     (Design Guideline — Layout > Adaptability; Typography > scalable text.) */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    padding: 0 var(--pad) 1.5rem;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a {
    width: 100%;
    min-height: 52px;
    padding-inline: 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.875rem;
  }
  .nav a::after { left: 0; right: 0; bottom: 0; }

  /* Stack on narrow screens: photograph on top, full width, then the text. */
  .hero__stage { display: flex; flex-direction: column; }
  .hero__grid { grid-template-columns: 1fr; gap: 2rem; min-height: 0; padding-block: 2.5rem; }
  /* No overlap on narrow screens: the photograph stacks to the top of the
     hero, and dark nav text over a photograph is not legible. The header goes
     back to its solid surface and the hero starts below it. */
  .has-hero .site-head {
    background: var(--surface);
    border-bottom-color: var(--rule);
  }
  .has-hero main > .hero:first-child { margin-top: 0; }
  .has-hero main > .hero:first-child .hero__grid { padding-top: 2.5rem; }
  .hero__media {
    position: static;
    width: 100%;
    order: -1;
  }
  /* Full width at the image's own 3:2, so nothing is cropped or letterboxed. */
  .hero__media img {
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero h1 { max-width: none; }
  .hero__marks { gap: 1.25rem 2rem; justify-content: space-between; }

  /* The bar stops floating and becomes a normal block under the hero, so it
     never covers the photograph on a short screen. */
  .hero__rail {
    position: static;
    padding-inline: var(--pad);
    padding-bottom: 2rem;
  }
  .assure {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    border-radius: 12px;
  }
  .assure__cell { justify-content: flex-start; }

  .manifest { grid-template-columns: 1fr 1fr; }
  .manifest__cell:nth-child(3) { border-left: 0; }
  .manifest__cell:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .manifest--dark .manifest__cell:nth-child(n+3) { border-top-color: rgba(240, 234, 221, 0.22); }

  .products { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr; }
  .band img:nth-child(3) { display: none; }
  .soon-list { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .brand__mark { width: 54px; height: 54px; }
  .brand__mark img { height: 46px; }
}

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