/* ==========================================================================
   Norealle — site.css
   Palette + type locked to Norealle_Branding_Kit.html
   Ratio guide: ~70% neutrals · ~20% ink · ~10% terracotta + amber
   ========================================================================== */

/* Fonts are self-hosted: no third-party request on first paint, no dependency
   on fonts.googleapis.com being reachable, and no layout shift from a CDN
   stall. Variable weight axis only — the full Fraunces file is 4x the size. */
@font-face{
  font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('../fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('../fonts/fraunces-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bone:#F3ECE3;
  --warm-white:#FBF9F6;
  --ink:#201C1A;
  --terracotta:#B5551D;
  --amber:#C89A5B;
  --umber:#6E3A21;
  --sage:#7C8A6E;
  --stone:#A79E93;

  /* sampled row-by-row from the render's own edge pixels — see build notes */
  --hero-bg:#131110;
  --hero-bg-top:#3b3127;
  --hero-bg-mid:#181510;
  --hero-bg-bot:#140f09;

  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --gut:clamp(20px,5vw,64px);
  --maxw:1240px;
  --rule:rgba(32,28,26,.14);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--warm-white);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* --------------------------------------------------------------- type ---- */
/* Fraunces is a variable font whose wght axis defaults high. Every element
   that uses it must set an explicit font-weight or it silently renders black. */
h1,h2,h3,.hdr__mark,.ftr__mark,.gate__mark,.stat b,.card__pct,.step__n,
.buy__price b,.proof__cell b,.cmp__pane .t{font-weight:400}
h1,h2,h3{font-family:var(--serif);margin:0;line-height:1.06;letter-spacing:-.015em}
h1{font-size:clamp(2.6rem,7.4vw,5.6rem)}
h2{font-size:clamp(2rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.2}
p{margin:0 0 1.1em}

.eyebrow{
  font-family:var(--sans);font-size:.68rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--stone);
  margin:0 0 1.4rem;
}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.6;color:#4A443E;max-width:56ch}
.small{font-size:.82rem;line-height:1.6;color:#6C645C}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
section{position:relative}

.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ------------------------------------------------------------- header ---- */
/* MUST be fixed, not sticky — a sticky header occupies flow and pushes the
   100vh pinned stage below the fold, clipping bottom-aligned hero copy. */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:18px var(--gut);
  color:var(--bone);
  transition:color .5s ease,background-color .5s ease;
  mix-blend-mode:normal;
}
.hdr.is-light{color:var(--ink);background:rgba(251,249,246,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hdr__mark{font-family:var(--serif);font-size:.98rem;letter-spacing:.34em;text-decoration:none;white-space:nowrap}
.hdr__right{display:flex;align-items:center;gap:18px}

/* Bill 96: EN and FR side by side, identical size and weight.
   No dropdown, no flag, no English default. */
.lang{display:flex;align-items:center;gap:9px;font-size:.74rem;letter-spacing:.1em}
.lang a{text-decoration:none;opacity:.55;padding:2px 0;border-bottom:1px solid transparent}
.lang a:hover{opacity:.9}
.lang a[aria-current="true"]{opacity:1;border-bottom-color:currentColor}
.lang span{opacity:.32}

.btn{
  display:inline-block;font-family:var(--sans);font-size:.76rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:13px 26px;border:1px solid currentColor;border-radius:2px;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
  white-space:nowrap;cursor:pointer;background:none;color:inherit;
}
.btn:hover{background:var(--ink);color:var(--warm-white);border-color:var(--ink)}
.hdr .btn{padding:10px 20px}
.hdr:not(.is-light) .btn:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn--fill{background:var(--terracotta);border-color:var(--terracotta);color:var(--warm-white)}
.btn--fill:hover{background:var(--umber);border-color:var(--umber);color:var(--warm-white)}

/* --------------------------------------------------------------- hero ---- */
.hero{
  background:var(--hero-bg);
  color:var(--bone);
  /* pin scroll distance — set in JS via the spacer */
}
/* Flat background, not a gradient. Each frame is pre-vignetted in the build to
   dissolve into exactly this colour, so there is no edge to blend against and
   no "pasted photo box". If the render is ever relit, re-run the vignette
   step — a mismatched --hero-bg brings the seam straight back. */
.hero__stage{
  position:relative;height:100svh;min-height:560px;width:100%;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:var(--hero-bg);
}
/* Mobile: the frame sits in the upper band, copy below it on flat ground.
   Desktop: pushed past the right edge so the baked vignette falls off-screen
   on that side and the image bleeds instead of ending in a soft halo. */
.hero__canvas{
  position:absolute;top:-2%;left:50%;transform:translateX(-50%);
  width:114%;height:auto;max-width:none;
}
@media(min-width:900px){
  .hero__canvas{left:auto;right:-5%;top:-2%;transform:none;height:104%;width:auto}
}
.hero__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(19,17,16,.42) 0%,rgba(19,17,16,.12) 16%,rgba(19,17,16,0) 30%,
    rgba(19,17,16,.30) 46%,rgba(19,17,16,.72) 62%,rgba(19,17,16,.94) 78%,rgba(19,17,16,1) 100%);
}
@media(min-width:900px){
  .hero__scrim{background:linear-gradient(90deg,
    rgba(19,17,16,.92) 0%,rgba(19,17,16,.86) 22%,rgba(19,17,16,.70) 36%,
    rgba(19,17,16,.46) 48%,rgba(19,17,16,.22) 58%,rgba(19,17,16,.06) 66%,rgba(19,17,16,0) 74%)}
}
.hero__copy{
  position:relative;z-index:3;width:100%;max-width:var(--maxw);
  margin:0 auto;padding:0 var(--gut);
  display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;padding-bottom:clamp(56px,9vh,110px);
  pointer-events:none;
}
@media(min-width:900px){.hero__copy{justify-content:center;padding-bottom:0}}
.hero__copy > *{pointer-events:auto}
.hero h1{
  color:var(--bone);max-width:12ch;
  text-shadow:0 2px 40px rgba(0,0,0,.55);
}
@media(min-width:900px){.hero h1{max-width:9ch;font-size:clamp(3rem,5.2vw,4.9rem)}}
.hero__sub{
  margin-top:1.2rem;max-width:38ch;color:rgba(243,236,227,.76);
  font-size:clamp(.95rem,1.4vw,1.12rem);
  text-shadow:0 2px 30px rgba(0,0,0,.55);
}
@media(min-width:900px){.hero__sub{max-width:32ch}}
.hero__cta{margin-top:2.2rem;display:flex;gap:14px;flex-wrap:wrap}
.hero .btn{color:var(--bone)}
@media(max-width:899px){.hero__cue{display:none}}
.hero__cue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:4;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(243,236,227,.5);display:flex;flex-direction:column;
  align-items:center;gap:9px;
}
.hero__cue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,rgba(243,236,227,.5),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* loading veil while frames decode */
.hero__load{
  position:absolute;inset:0;z-index:5;background:var(--hero-bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s ease;
}
.hero__load span{font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(243,236,227,.45)}
.hero__load.is-done{opacity:0;pointer-events:none}

/* ------------------------------------------------ dark → light bridge ---- */
.bridge{background:var(--hero-bg);color:var(--bone);padding:clamp(90px,16vh,190px) 0}
.bridge .wrap{max-width:980px}
.bridge h2{color:var(--bone);font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.16;letter-spacing:-.01em}
.bridge .w{display:inline-block;opacity:.16;transition:opacity .35s ease}
.bridge .w.on{opacity:1}
.bridge__note{margin-top:2.4rem;color:rgba(243,236,227,.5);font-size:.9rem;max-width:52ch}

/* ---------------------------------------------------------- manifesto ---- */
.manifesto{background:var(--warm-white);padding:clamp(90px,15vh,180px) 0}
.manifesto .wrap{max-width:1000px}
.manifesto .grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,72px)}
@media(min-width:860px){.manifesto .grid{grid-template-columns:1fr 1fr;align-items:start}}
.stat{border-top:1px solid var(--rule);padding-top:18px;margin-top:26px}
.stat b{display:block;font-family:var(--serif);font-size:2.4rem;font-weight:400;line-height:1;color:var(--terracotta)}
.stat span{display:block;font-size:.8rem;letter-spacing:.05em;color:#6C645C;margin-top:6px}

/* -------------------------------------------------------- ingredients ---- */
.ing{background:var(--bone);padding:clamp(70px,12vh,140px) 0}
/* the botanicals sit in a horizontal row, so this reads as a full-width band
   rather than a cropped column — cropping it to portrait cuts the rosemary */
.ing__media{position:relative;margin:0 0 clamp(40px,6vh,72px)}
.ing__media img{width:100%;display:block;border-radius:3px;background:#E2D8CC}
.ing__cap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-top:14px;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--stone);
}
.ing__cap span{text-align:center}
.ing__list{display:grid;grid-template-columns:1fr;gap:0 clamp(30px,5vw,68px)}
@media(min-width:820px){.ing__list{grid-template-columns:1fr 1fr}}
.card{
  border-top:1px solid var(--rule);padding:26px 0 4px;
  opacity:.34;transition:opacity .55s ease;
}
.card.on{opacity:1}
.card__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.card h3{font-size:clamp(1.35rem,2.4vw,1.9rem)}
.card__pct{font-family:var(--serif);font-size:1.15rem;color:var(--terracotta);white-space:nowrap}
.card__inci{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--stone);margin:8px 0 12px}
.card__role{font-size:1rem;color:#4A443E;margin:0 0 10px;max-width:46ch}
.card__note{font-size:.82rem;color:#6C645C;max-width:50ch;margin:0}
.bar{height:2px;background:rgba(32,28,26,.1);margin-top:16px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--terracotta);transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.card.on .bar i{width:var(--w)}

/* ------------------------------------------------------------- ritual ---- */
.ritual{background:var(--warm-white);padding:clamp(80px,13vh,160px) 0;overflow:hidden}
.ritual__top{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,64px);align-items:end}
@media(min-width:900px){.ritual__top{grid-template-columns:1.05fr .95fr}}
.ritual__media{border-radius:3px;overflow:hidden;background:#EFEBE6}
.steps{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(44px,7vh,86px);border-top:1px solid var(--rule)}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{padding:32px 0 34px;border-bottom:1px solid var(--rule)}
@media(min-width:760px){
  .step{padding:34px clamp(20px,3vw,40px) 38px;border-bottom:0;border-left:1px solid var(--rule)}
  .step:first-child{padding-left:0;border-left:0}
  .step:last-child{padding-right:0}
}
.step__n{font-family:var(--serif);font-size:.95rem;color:var(--terracotta);letter-spacing:.18em;margin-bottom:14px}
.step h3{margin-bottom:9px}
.step p{font-size:.94rem;color:#4A443E;margin:0}

/* ----------------------------------------------------------- compare ---- */
.compare{background:var(--bone);padding:clamp(80px,13vh,160px) 0}
.cmp{
  position:relative;margin-top:clamp(34px,5vh,58px);
  border-radius:3px;overflow:hidden;user-select:none;touch-action:pan-y;
  background:var(--ink);aspect-ratio:3/4;cursor:ew-resize;
}
.cmp__pane{position:absolute;inset:0;display:flex;align-items:center;padding:clamp(26px,4vw,58px)}
.cmp__a{justify-content:flex-start}
.cmp__b{justify-content:flex-end}
.cmp__pane .inner{width:min(42%,420px)}
@media(max-width:640px){.cmp__pane .inner{width:min(46%,300px)}}
.cmp__a{background:linear-gradient(140deg,#4A443E,#2E2A27)}
.cmp__b{background:linear-gradient(140deg,#C89A5B,#8C6A3C);clip-path:inset(0 0 0 50%)}
.cmp__pane .inner{color:var(--warm-white)}
.cmp__pane .t{font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.14;margin-bottom:12px;display:block}
.cmp__pane .d{font-size:.92rem;line-height:1.6;color:rgba(251,249,246,.82)}
@media(min-width:700px){.cmp{aspect-ratio:16/8}}
.cmp__tag{position:absolute;top:16px;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(251,249,246,.75);z-index:4}
.cmp__tag.l{left:18px}
.cmp__tag.r{right:18px}
.cmp__handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--warm-white);
  z-index:5;transform:translateX(-1px);
}
.cmp__handle::after{
  content:'';position:absolute;top:50%;left:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:var(--warm-white);
  box-shadow:0 2px 18px rgba(0,0,0,.28);
}
.cmp__handle::before{
  content:'';position:absolute;top:50%;left:50%;width:24px;height:12px;
  transform:translate(-50%,-50%);z-index:2;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M7 1 2 6l5 5M17 1l5 5-5 5' fill='none' stroke='%23201C1A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px 12px no-repeat;
}
.compare__disc{margin-top:22px;font-size:.78rem;color:#6C645C;max-width:70ch}

/* -------------------------------------------------------------- proof ---- */
.proof{background:var(--warm-white);padding:clamp(70px,11vh,140px) 0}
.proof__grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule)}
@media(min-width:720px){.proof__grid{grid-template-columns:repeat(4,1fr)}}
.proof__cell{padding:26px 0;border-bottom:1px solid var(--rule)}
@media(min-width:720px){
  .proof__cell{padding:28px clamp(16px,2.4vw,32px);border-bottom:0;border-left:1px solid var(--rule)}
  .proof__cell:first-child{padding-left:0;border-left:0}
}
.proof__cell b{display:block;font-family:var(--serif);font-size:1.05rem;font-weight:400;margin-bottom:7px}
.proof__cell span{font-size:.85rem;color:#6C645C;line-height:1.55}

/* ---------------------------------------------------------------- buy ---- */
.buy{background:var(--ink);color:var(--bone);padding:clamp(80px,13vh,160px) 0}
.buy__grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,72px);align-items:center}
@media(min-width:900px){.buy__grid{grid-template-columns:.85fr 1.15fr}}
.buy__media{border-radius:3px;overflow:hidden;background:#2E2A27}
.buy h2{color:var(--bone)}
.buy .eyebrow{color:var(--amber)}
.buy__price{display:flex;align-items:baseline;gap:12px;margin:22px 0 6px}
.buy__price b{font-family:var(--serif);font-size:2.5rem;font-weight:400}
.buy__price span{font-size:.82rem;color:rgba(243,236,227,.6);letter-spacing:.06em}
.buy__net{font-size:.8rem;color:rgba(243,236,227,.55);margin:0 0 24px}
.buy p.lede{color:rgba(243,236,227,.78)}
.buy__list{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:9px}
.buy__list li{font-size:.9rem;color:rgba(243,236,227,.75);padding-left:20px;position:relative}
.buy__list li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--amber)}
.buy .btn{color:var(--bone)}
.buy .btn:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}

/* ------------------------------------------------------------- footer ---- */
.ftr{background:var(--ink);color:rgba(243,236,227,.62);padding:0 0 46px;font-size:.83rem}
.ftr .wrap{border-top:1px solid rgba(243,236,227,.13);padding-top:38px}
.ftr__top{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.ftr__mark{font-family:var(--serif);font-size:1rem;letter-spacing:.34em;color:var(--bone)}
.ftr .lang a{color:var(--bone)}
.ftr__legal{margin-top:30px;max-width:78ch;font-size:.76rem;line-height:1.65;color:rgba(243,236,227,.42)}
.ftr__legal p{margin:0 0 .7em}

/* --------------------------------------------------------- gateway pg ---- */
.gate{min-height:100svh;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--bone);text-align:center;padding:40px}
.gate__mark{font-family:var(--serif);font-size:1.1rem;letter-spacing:.4em;margin-bottom:38px}
.gate__links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.gate .btn{color:var(--bone)}
.gate .btn:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}

/* --------------------------------------------------------- reveal fx ----- */
.rv{opacity:0;transform:translateY(24px)}
.rv.on{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}

/* ---------------------------------------------------- reduced motion ----- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
  .card,.bridge .w{opacity:1}
  .bar i{width:var(--w)}
  .hero__cue{display:none}
}