@charset "utf-8";
/* ============================================================
   Newtrimed HealthCare — design system
   Palette derived from the identity: crimson #E31E24, plum #A82682
   ============================================================ */

:root{
  color-scheme: light;

  /* ink + paper */
  --ink:        #1B1119;
  --ink-80:     #3A2B38;
  --muted:      #6E6070;
  --muted-2:    #8C7F8D;
  --paper:      #FCFAF8;
  --paper-2:    #F6F1F4;
  --mist:       #F0E9EE;
  --white:      #FFFFFF;

  /* brand */
  --plum:       #A82682;
  --plum-deep:  #6C1554;
  --plum-ink:   #400C31;
  --plum-soft:  #F7EDF4;
  --plum-line:  #E4CFDE;
  --crimson:    #E31E24;

  --line:       color-mix(in srgb, var(--ink) 12%, transparent);
  --line-soft:  color-mix(in srgb, var(--ink) 7%, transparent);

  /* type */
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--2: clamp(.688rem, .67rem + .09vw, .75rem);
  --step--1: clamp(.813rem, .79rem + .11vw, .875rem);
  --step-0:  clamp(.938rem, .91rem + .14vw, 1.02rem);
  --step-1:  clamp(1.1rem, 1.04rem + .3vw, 1.32rem);
  --step-2:  clamp(1.35rem, 1.22rem + .62vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.47rem + 1.4vw, 2.85rem);
  --step-4:  clamp(2.2rem, 1.6rem + 3vw, 4.4rem);
  --step-5:  clamp(2.7rem, 1.6rem + 5.4vw, 6.6rem);

  /* space */
  --gut: clamp(1.25rem, 1rem + 2vw, 2.75rem);
  --sec: clamp(4.5rem, 3rem + 7vw, 9rem);
  --max: 1320px;
  --measure: 62ch;

  --r-s: 4px;
  --r-m: 10px;
  --r-l: 20px;

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

/* ---------- 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; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.65;
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }
::selection{ background:var(--plum); color:#fff; }
:focus-visible{ outline:2px solid var(--plum); outline-offset:3px; border-radius:2px; }

/* ---------- type primitives ---------- */
/* ---- serif metrics, defined once for every heading that uses the face ----
   Newsreader is a variable text serif with an optical-size axis, so it holds up
   at card-title sizes as well as at display sizes. Two rules follow:
     1. smaller headings carry more leading and more weight (500) than display
        sizes (400) — small serif text needs both to stay legible;
     2. heading margins are set in em so they scale with the type, and are tuned
        against the real ink bounds rather than the element box.
   Any new serif heading belongs in this selector list, not given its own
   line-height — that is how the metrics drifted apart the first time. */
.display,
.c-tile h3,
.p-card h3,
.numbered h3,
.ltr,
.hero-stats b{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.012em;
}
.display{
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.016em;
  text-wrap:balance;
}
/* Display ink overflows its own box by roughly .2em above and .26em below,
   because the font's content area is taller than the line box. Heading margins
   are therefore set in em and pre-loaded with that overflow, so the gap you see
   is the gap intended — and it scales with the heading rather than drifting. */
.page-title{ margin:.30em 0 .50em; }
.sec-title{ margin-top:.28em; }
.display em{ font-style:italic; color:var(--plum-deep); }
.h1{ font-size:var(--step-5); }
.h2{ font-size:var(--step-4); }
.h3{ font-size:var(--step-3); }
.h4{ font-size:var(--step-2); }

.eyebrow{
  font-family:var(--mono);
  font-size:var(--step--2);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--plum-deep);
  font-weight:500;
}
.lede{
  font-size:var(--step-1);
  line-height:1.5;
  color:var(--ink-80);
  max-width:var(--measure);
  text-wrap:pretty;
}
.prose p{ max-width:var(--measure); color:var(--ink-80); margin-bottom:1.1em; text-wrap:pretty; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--ink); font-weight:600; }
.small{ font-size:var(--step--1); color:var(--muted); }
.mono{ font-family:var(--mono); font-size:var(--step--2); letter-spacing:.06em; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:920px; }
.section{ padding-block:var(--sec); }
.section-tight{ padding-block:calc(var(--sec) * .58); }
.rule{ height:1px; background:var(--line); border:0; }

.grid{ display:grid; gap:clamp(1.25rem,2.4vw,2.25rem); }
.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:1000px){ .cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; } }

.split{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
@media(max-width:900px){ .split{ grid-template-columns:1fr; gap:2rem; } }

.section-head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1.5rem 2rem; margin-bottom:clamp(2rem,4vw,3.5rem); }
.section-head > div{ max-width:42rem; }
.section-head .eyebrow{ display:block; margin-bottom:1rem; }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:var(--ink);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.82rem 1.45rem;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd);
  border-radius:100px;
  font-size:var(--step--1); font-weight:500; letter-spacing:.01em;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  will-change:transform;
}
.btn:hover{ --bg:var(--plum-deep); --bd:var(--plum-deep); transform:translateY(-1px); }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
.btn-ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line); }
.btn-ghost:hover{ --bg:transparent; --fg:var(--plum-deep); --bd:var(--plum); }
.btn-light{ --bg:#fff; --fg:var(--ink); --bd:transparent; }
.btn-light:hover{ --bg:var(--plum-soft); --fg:var(--plum-ink); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:var(--step--1); font-weight:500; color:var(--plum-deep);
  padding-bottom:2px; border-bottom:1px solid var(--plum-line);
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.link-arrow:hover{ border-color:var(--plum); gap:.75rem; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck{ border-bottom-color:var(--line); }
.hdr{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:76px; }
.brand{ display:flex; align-items:center; gap:.7rem; flex:0 0 auto; }
.brand img{ height:34px; width:auto; }
@media(max-width:560px){ .brand img{ height:28px; } }

.nav{ display:flex; align-items:center; gap:clamp(.5rem,1.6vw,1.6rem); }
.nav a{
  font-size:var(--step--1); font-weight:450; color:var(--ink-80);
  padding:.45rem .1rem; position:relative;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:.15rem; height:1px;
  background:var(--plum); transition:right .35s var(--ease);
}
.nav a:hover,.nav a[aria-current]{ color:var(--plum-ink); }
.nav a:hover::after,.nav a[aria-current]::after{ right:0; }
.hdr-cta{ display:flex; align-items:center; gap:.75rem; }
@media(max-width:1080px){ .nav{ display:none; } }

.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:100px; }
.burger span{ display:block; width:17px; height:1.5px; background:var(--ink); position:relative; transition:background .2s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease); }
.burger span::before{ top:-5px; } .burger span::after{ top:5px; }
[data-menu-open] .burger span{ background:transparent; }
[data-menu-open] .burger span::before{ transform:translateY(5px) rotate(45deg); }
[data-menu-open] .burger span::after{ transform:translateY(-5px) rotate(-45deg); }
@media(max-width:1080px){ .burger{ display:flex; } .hdr-cta .btn{ display:none; } }

.mobile-nav{
  position:fixed; inset:0; z-index:99;
  background:var(--paper); padding:calc(76px + 1.5rem) 0 4rem;
  overflow-y:auto; overscroll-behavior:contain; display:none;
}
[data-menu-open] .mobile-nav{ display:block; }
[data-menu-open]{ overflow:hidden; }
.mobile-nav a{ display:block; font-family:var(--serif); font-size:var(--step-2); padding:.55rem 0; border-bottom:1px solid var(--line-soft); }
.mobile-nav .grp{ margin-top:2rem; }
.mobile-nav .grp .eyebrow{ display:block; margin-bottom:.75rem; }
.mobile-nav .sub a{ font-family:var(--sans); font-size:var(--step-0); color:var(--ink-80); }

/* ---------- hero ---------- */
.hero{ position:relative; padding-block:clamp(3.5rem,7vw,7rem) clamp(3rem,6vw,6rem); overflow:hidden; }
.hero-inner{ position:relative; z-index:2; }
.hero .display{ margin-bottom:1.75rem; }
.hero .lede{ max-width:48ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }

.aurora{
  position:absolute; inset:-30% -10% auto -10%; height:150%; z-index:0;
  pointer-events:none; opacity:.55;
  background:
    radial-gradient(40% 45% at 78% 22%, color-mix(in srgb, var(--plum) 26%, transparent) 0%, transparent 70%),
    radial-gradient(34% 40% at 20% 8%,  color-mix(in srgb, var(--crimson) 12%, transparent) 0%, transparent 72%),
    radial-gradient(45% 50% at 55% 75%, color-mix(in srgb, var(--plum) 12%, transparent) 0%, transparent 70%);
  filter:blur(10px);
  animation:drift 24s ease-in-out infinite alternate;
}
@keyframes drift{ to{ transform:translate3d(-3%,2%,0) scale(1.08); } }
@media(prefers-reduced-motion:reduce){ .aurora{ animation:none; } }

.hero-stats{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.5rem); margin-top:clamp(3rem,6vw,5rem); padding-top:2rem; border-top:1px solid var(--line); }
.hero-stats div{ min-width:8rem; }
.hero-stats b{ display:block; font-size:var(--step-3); }
.hero-stats span{ display:block; font-family:var(--mono); font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:.6rem; }

/* ---------- cards ---------- */
.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-l);
  overflow:hidden;
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{ border-color:var(--plum-line); transform:translateY(-3px); box-shadow:0 18px 44px -28px rgba(64,12,49,.45); }

[data-catalogue] > li,
.grid > li{ display:flex; }
[data-catalogue] > li > .card,
.grid > li > .card{ width:100%; }
.p-card .shot{
  position:relative; aspect-ratio:1/1; background:var(--white);
  display:grid; place-items:center; padding:12% 12% 10%;
}
.p-card .shot img{ width:100%; height:100%; object-fit:contain; transition:transform .6s var(--ease); }
.p-card:hover .shot img{ transform:scale(1.045); }
.p-card .shot::after{
  content:""; position:absolute; left:18%; right:18%; bottom:9%; height:14px;
  background:radial-gradient(ellipse at center, rgba(64,12,49,.14), transparent 72%);
  filter:blur(3px); pointer-events:none;
}
.p-card .body{ padding:1.35rem 1.4rem 1.5rem; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:.55rem; flex:1; }
.p-card h3{ font-size:var(--step-2); }
.p-card .ind{ font-size:var(--step--1); color:var(--muted); }
.p-card .meta{ margin-top:auto; padding-top:.9rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.p-card .price{ font-family:var(--mono); font-size:var(--step--2); color:var(--ink-80); }

.tag{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--mono); font-size:var(--step--2); letter-spacing:.08em; text-transform:uppercase;
  color:var(--plum-deep); background:var(--plum-soft);
  padding:.32rem .62rem; border-radius:100px; white-space:nowrap;
}
.tag-plain{ background:transparent; border:1px solid var(--line); color:var(--muted); }
.tag-row{ display:flex; flex-wrap:wrap; gap:.4rem; }

/* concern tiles */
.c-tile{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-m);
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.c-tile:hover{ border-color:var(--plum-line); transform:translateY(-3px);
  box-shadow:0 18px 44px -30px rgba(64,12,49,.4); }
.c-shot{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--mist); }
.c-shot img{ width:100%; height:100%; transition:transform .7s var(--ease); }
.c-tile:hover .c-shot img{ transform:scale(1.04); }
/* condition photography fills the frame; a product packshot is contained on white */
.c-shot--cover img{ object-fit:cover; object-position:50% 22%; }
.c-shot--contain{ background:var(--white); }
.c-shot--contain img{ object-fit:contain; padding:7% 20%; }
.c-body{ padding:1.1rem 1.3rem 1.3rem; border-top:1px solid var(--line-soft); }
.c-tile .n{ display:block; font-family:var(--mono); font-size:var(--step--2);
  color:var(--muted-2); letter-spacing:.1em; margin-bottom:.55rem; }
.c-tile h3{ font-size:var(--step-2); transition:color .3s var(--ease); }
.c-tile:hover h3{ color:var(--plum-deep); }
.c-tile .cnt{ font-family:var(--mono); font-size:var(--step--2); color:var(--muted);
  margin-top:.6rem; display:block; }

/* ---------- feature / editorial ---------- */
.feature{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:center;
  padding-block:clamp(2.5rem,5vw,4.5rem); border-top:1px solid var(--line);
}
.feature:nth-child(even) .feature-media{ order:2; }
@media(max-width:860px){ .feature{ grid-template-columns:1fr; } .feature:nth-child(even) .feature-media{ order:0; } }
.feature-media{ background:var(--white); border-radius:var(--r-l); border:1px solid var(--line-soft); aspect-ratio:4/3; display:grid; place-items:center; padding:8%; }
.feature-media img{ width:100%; height:100%; object-fit:contain; }

.numbered{ border-top:1px solid var(--line); padding-top:1.6rem; display:flex; gap:1.5rem; }
.numbered .n{ font-family:var(--mono); font-size:var(--step--2); color:var(--plum); letter-spacing:.1em; padding-top:.35rem; flex:0 0 2.5rem; }
.numbered h3{ font-size:var(--step-2); margin-bottom:.7rem; }
.numbered p{ color:var(--muted); font-size:var(--step--1); max-width:38ch; }

/* ---------- panels ---------- */
.panel{ background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-l); padding:clamp(1.5rem,3vw,2.5rem); }
.panel-soft{ background:var(--plum-soft); border-color:var(--plum-line); }
.panel-ink{ background:var(--plum-ink); color:#fff; border-color:transparent; }
.panel-ink .eyebrow{ color:color-mix(in srgb, var(--plum-line) 90%, transparent); }
.panel-ink p{ color:color-mix(in srgb, #fff 78%, transparent); }

.band-ink{ background:var(--plum-ink); color:#fff; }
.band-ink .eyebrow{ color:var(--plum-line); }
.band-ink .lede,.band-ink p{ color:color-mix(in srgb, #fff 76%, transparent); }
.band-ink .rule{ background:rgba(255,255,255,.16); }
.band-mist{ background:var(--paper-2); }

/* ---------- data list (spec tables) ---------- */
.spec{ border-top:1px solid var(--line); }
.spec div{ display:grid; grid-template-columns:minmax(7rem,12rem) minmax(0,1fr); gap:1rem 1.5rem; padding:.85rem 0; border-bottom:1px solid var(--line-soft); }
.spec dt{ font-family:var(--mono); font-size:var(--step--2); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.spec dd{ margin:0; color:var(--ink-80); }
@media(max-width:560px){ .spec div{ grid-template-columns:1fr; gap:.2rem; } }

.actives{ display:grid; gap:0; border-top:1px solid var(--line); }
.actives li{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:1rem 2rem; padding:1rem 0; border-bottom:1px solid var(--line-soft); align-items:baseline; }
.actives b{ font-weight:550; font-size:var(--step-0); }
.actives span{ color:var(--muted); font-size:var(--step--1); }
@media(max-width:640px){ .actives li{ grid-template-columns:1fr; gap:.25rem; } }

.inci{ display:flex; flex-wrap:wrap; gap:.4rem; }
.inci li a,.inci li span{
  display:inline-block; font-family:var(--mono); font-size:var(--step--2);
  padding:.34rem .6rem; border:1px solid var(--line); border-radius:var(--r-s);
  color:var(--ink-80); transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.inci li a:hover{ border-color:var(--plum); color:var(--plum-deep); background:var(--plum-soft); }

/* ---------- product detail ---------- */
.pdp{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
@media(max-width:940px){ .pdp{ grid-template-columns:1fr; } }
.pdp-gallery{ position:sticky; top:104px; }
@media(max-width:940px){ .pdp-gallery{ position:static; } }
.pdp-main{ background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-l); aspect-ratio:1/1; display:grid; place-items:center; padding:9%; position:relative; }
.pdp-main img{ width:100%; height:100%; object-fit:contain; }
.pdp-thumbs{ display:flex; gap:.6rem; margin-top:.75rem; }
.pdp-thumbs button{ flex:0 0 76px; height:76px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-m); padding:8px; transition:border-color .25s var(--ease); }
.pdp-thumbs button[aria-selected="true"]{ border-color:var(--plum); }
.pdp-thumbs img{ width:100%; height:100%; object-fit:contain; }

/* ---------- filters ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.5rem; }
.chip{
  font-size:var(--step--1); padding:.5rem 1rem; border:1px solid var(--line); border-radius:100px;
  color:var(--ink-80); transition:all .25s var(--ease); white-space:nowrap;
}
.chip:hover{ border-color:var(--plum); color:var(--plum-deep); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.count{ font-family:var(--mono); font-size:var(--step--2); color:var(--muted); margin-bottom:1.25rem; }

/* ---------- faq ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.35rem 2.5rem 1.35rem 0; position:relative;
  font-family:var(--serif); font-size:var(--step-2); line-height:1.2; letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%; width:11px; height:11px; margin-top:-8px;
  border-right:1.5px solid var(--plum); border-bottom:1.5px solid var(--plum);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq .ans{ padding:0 3rem 1.6rem 0; color:var(--ink-80); max-width:var(--measure); }

/* ---------- table ---------- */
.tbl{ width:100%; border-collapse:collapse; font-size:var(--step--1); }
.tbl th,.tbl td{ text-align:left; padding:.9rem 1rem .9rem 0; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.tbl th{ font-family:var(--mono); font-size:var(--step--2); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:500; border-bottom-color:var(--line); }
.tbl tr:hover td{ background:color-mix(in srgb, var(--plum-soft) 60%, transparent); }

/* ---------- breadcrumb ---------- */
.crumb{ display:flex; flex-wrap:wrap; gap:.45rem; font-family:var(--mono); font-size:var(--step--2); color:var(--muted); padding-top:1.75rem; }
.crumb a:hover{ color:var(--plum-deep); }
.crumb span{ opacity:.45; }

/* ---------- footer ---------- */
.site-footer{ background:var(--plum-ink); color:#fff; padding-block:clamp(3.5rem,6vw,6rem) 2.5rem; margin-top:var(--sec); }
.site-footer a{ color:color-mix(in srgb, #fff 72%, transparent); font-size:var(--step--1); transition:color .25s var(--ease); }
.site-footer a:hover{ color:#fff; }
.f-grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:2.5rem clamp(1.5rem,3vw,3rem); }
@media(max-width:980px){ .f-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .f-grid{ grid-template-columns:1fr; } }
.f-grid h4{ font-family:var(--mono); font-size:var(--step--2); letter-spacing:.14em; text-transform:uppercase; color:var(--plum-line); margin-bottom:1.1rem; font-weight:500; }
.f-grid li{ margin-bottom:.5rem; }
.f-brand img{ height:40px; width:auto; margin-bottom:1.25rem; }
.f-brand p{ color:color-mix(in srgb, #fff 64%, transparent); font-size:var(--step--1); max-width:32ch; }
.f-bottom{ margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; }
.f-bottom p{ color:color-mix(in srgb, #fff 55%, transparent); font-size:var(--step--2); max-width:70ch; }

/* ---------- motion ---------- */
.js [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.js [data-reveal].in{ opacity:1; transform:none; }
.js [data-reveal-stagger] > *{ opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.js [data-reveal-stagger].in > *{ opacity:1; transform:none; }
.js [data-reveal-stagger].in > *:nth-child(1){ transition-delay:0ms }
.js [data-reveal-stagger].in > *:nth-child(2){ transition-delay:60ms }
.js [data-reveal-stagger].in > *:nth-child(3){ transition-delay:120ms }
.js [data-reveal-stagger].in > *:nth-child(4){ transition-delay:180ms }
.js [data-reveal-stagger].in > *:nth-child(5){ transition-delay:240ms }
.js [data-reveal-stagger].in > *:nth-child(6){ transition-delay:300ms }
.js [data-reveal-stagger].in > *:nth-child(n+7){ transition-delay:340ms }
@media(prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal-stagger] > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .card:hover,.c-tile:hover,.btn:hover{ transform:none; }
}

/* ---------- misc ---------- */
.skip{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.75rem 1.25rem; z-index:999; border-radius:0 0 var(--r-m) 0; }
.skip:focus{ left:0; }
.note{ font-size:var(--step--1); color:var(--muted); border-left:2px solid var(--plum-line); padding-left:1rem; max-width:var(--measure); }
.hide{ display:none !important; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- ingredient index ---------- */
.ltr-bar{ position:sticky; top:76px; z-index:50; background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-block:1px solid var(--line); padding-block:.7rem; margin-top:clamp(2rem,4vw,3rem); }
.ltr-bar .wrap{ display:flex; flex-wrap:wrap; gap:.15rem; }
.ltr-bar a{ font-family:var(--mono); font-size:var(--step--2); letter-spacing:.06em; color:var(--muted);
  padding:.25rem .5rem; border-radius:var(--r-s); transition:background .2s var(--ease), color .2s var(--ease); }
.ltr-bar a:hover{ background:var(--plum-soft); color:var(--plum-deep); }
.ltr{ font-size:var(--step-3); color:var(--plum); margin:clamp(2.5rem,5vw,3.75rem) 0 1.25rem; padding-bottom:.6rem;
  border-bottom:1px solid var(--line); scroll-margin-top:140px; }
.ltr:first-child{ margin-top:0; }
.ing-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(2rem,4vw,4rem); }
@media(max-width:820px){ .ing-grid{ grid-template-columns:1fr; } }
.ing{ padding:1.1rem 0; border-bottom:1px solid var(--line-soft); scroll-margin-top:150px; }
.ing h3{ font-family:var(--mono); font-size:var(--step-0); font-weight:500; letter-spacing:.005em; }
.ing-note{ font-size:var(--step--1); color:var(--muted); margin-top:.4rem; max-width:46ch; }
.ing-in{ font-size:var(--step--2); margin-top:.5rem; color:var(--plum-deep); }
.ing-in span{ font-family:var(--mono); color:var(--muted-2); letter-spacing:.06em;
  text-transform:uppercase; margin-right:.5rem; }
.ing-in a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* concern page: condition photograph beside the intro */
.c-intro{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media(max-width:900px){ .c-intro{ grid-template-columns:1fr; gap:2rem; } }
.c-hero{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-l);
  border:1px solid var(--line-soft); background:var(--mist); }
.c-hero img{ width:100%; height:100%; }
.c-hero.c-shot--cover img{ object-fit:cover; object-position:50% 22%; }
.c-hero.c-shot--contain{ background:var(--white); }
.c-hero.c-shot--contain img{ object-fit:contain; padding:7%; }