:root{
  /* Pink-white ground. --ink stays a near-black plum so the closing social
     band, the marquee and the footer keep reading as dark blocks against it. */
  --ground:#FDF5F8;
  --panel:#F7E6EE;
  --ink:#1E0C15;
  --ink-soft:#7B6570;
  --accent:#8C1F49;
  --accent-soft:#C6698C;
  --line:rgba(30,12,21,.12);
  --serif: 'Fraunces', Georgia, 'Palatino Linotype', 'Times New Roman', serif;
  --sans: 'Jost', Optima, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
/* INORIA is a deliberately single, bright, editorial light theme — the brand
   identity (white product, dark logo text) does not translate to dark mode,
   so we do not follow the visitor's OS/browser dark-mode preference. */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* The width/height attributes on every <img> let the browser reserve the right
   space before the file arrives (no layout shift while loading). They are also
   presentational hints, so height must be released back to auto here or a CSS
   width would squash the image. */
img{height:auto;}
/* PERF: body carries a flat colour only. It used to hold two page-sized radial
   gradients, which the browser had to repaint across the whole document as you
   scrolled. The colour they provided now comes from the fixed .aurora layer,
   which scrolls for free because it never moves. */
body{margin:0;padding:0;color:var(--ink);font-family:var(--sans);overflow-x:hidden;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:var(--ground);}
h1,h2,h3,h4,.logo-word{font-optical-sizing:auto;}
.story h2,.belief h2,.hero-copy h1,.about-hero h1,.comingsoon h1,.pagehero h1,
.complex h3,.pullquote p{letter-spacing:-.012em;}

/* ============================================================
   Living background stack (all fixed, all pointer-events:none)
   z0 .aurora → z0 .silk → z0 .mesh → z0 .bubbles → z1 content → z2 .grain
   Nothing in this stack uses filter, backdrop-filter or mix-blend-mode, and
   nothing animates a property other than transform/opacity — that is what keeps
   it free during scroll.
   ============================================================ */

/* 1. slow-rotating aurora ribbons — the main "this isn't a flat page" cue.
   PERF: no filter:blur() and no mix-blend-mode here. A soft radial-gradient is
   already blurry by construction, so blurring it again cost a full-viewport
   re-render every frame for no visual gain. Only transform/opacity animate, so
   each ribbon is promoted to its own GPU layer and the CPU does nothing. */
.aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;overflow:hidden;opacity:.9;
  contain:strict;}
.aurora i{position:absolute;display:block;border-radius:50%;
  will-change:transform;transform:translateZ(0);backface-visibility:hidden;}

/* five clouds at different sizes, colours, speeds and directions — the varied
   periods (29/37/43/53/61s) are deliberately non-multiples so the composition
   never visibly loops back to where it started */
.aurora i:nth-child(1){width:78%;height:78%;left:-14%;top:-12%;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--accent) 38%,transparent) 0%,
    color-mix(in srgb,var(--accent) 20%,transparent) 30%,
    color-mix(in srgb,var(--accent-soft) 9%,transparent) 52%,transparent 68%);
  animation:auroraA 37s ease-in-out infinite;}
.aurora i:nth-child(2){width:70%;height:70%;right:-16%;top:8%;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--accent-soft) 52%,transparent) 0%,
    color-mix(in srgb,var(--accent-soft) 26%,transparent) 32%,
    color-mix(in srgb,#E7B7C6 10%,transparent) 54%,transparent 70%);
  animation:auroraB 43s ease-in-out infinite;}
.aurora i:nth-child(3){width:84%;height:84%;left:16%;bottom:-24%;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,#E7B7C6 60%,transparent) 0%,
    color-mix(in srgb,#E7B7C6 30%,transparent) 34%,
    color-mix(in srgb,var(--accent-soft) 10%,transparent) 56%,transparent 72%);
  animation:auroraC 53s ease-in-out infinite;}
/* a slightly warmer rose cloud stops the palette reading as one flat pink —
   kept close to the ground's hue now that the ground itself is pink-white */
.aurora i:nth-child(4){width:56%;height:56%;right:6%;bottom:-10%;
  background:radial-gradient(circle at 50% 50%,
    rgba(246,205,196,.6) 0%,rgba(246,205,196,.28) 34%,rgba(246,205,196,.09) 56%,transparent 72%);
  animation:auroraD 61s ease-in-out infinite;}
/* small, deepest, fastest — gives the eye something that clearly moves */
.aurora i:nth-child(5){width:44%;height:44%;left:34%;top:22%;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--accent) 34%,transparent) 0%,
    color-mix(in srgb,var(--accent) 15%,transparent) 36%,transparent 66%);
  animation:auroraE 29s ease-in-out infinite;}

@keyframes auroraA{
  0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg);}
  50%{transform:translate3d(16vw,12vh,0) scale(1.3) rotate(70deg);}}
@keyframes auroraB{
  0%,100%{transform:translate3d(0,0,0) scale(1.12) rotate(0deg);}
  50%{transform:translate3d(-19vw,16vh,0) scale(.8) rotate(-80deg);}}
@keyframes auroraC{
  0%,100%{transform:translate3d(0,0,0) scale(.92) rotate(0deg);}
  50%{transform:translate3d(13vw,-17vh,0) scale(1.26) rotate(55deg);}}
@keyframes auroraD{
  0%,100%{transform:translate3d(0,0,0) scale(1.05) rotate(0deg);}
  50%{transform:translate3d(-14vw,-12vh,0) scale(.86) rotate(-45deg);}}
@keyframes auroraE{
  0%,100%{transform:translate3d(0,0,0) scale(.9);}
  33%{transform:translate3d(11vw,9vh,0) scale(1.22);}
  66%{transform:translate3d(-9vw,13vh,0) scale(1.02);}}

/* silk sheen: two oversized conic gradients turning very slowly in opposite
   directions. Rotation of a cached gradient layer is pure compositor work, and
   it adds the iridescent shift that radial clouds alone can't produce. */
.silk{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict;opacity:.42;}
.silk i{position:absolute;left:50%;top:50%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;
  display:block;border-radius:50%;will-change:transform;}
.silk i:nth-child(1){
  background:conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb,var(--accent-soft) 22%,transparent) 42deg,
    transparent 96deg,
    transparent 168deg,
    color-mix(in srgb,#E7B7C6 26%,transparent) 214deg,
    transparent 268deg,
    color-mix(in srgb,var(--accent) 12%,transparent) 316deg,
    transparent 360deg);
  animation:silkspin 88s linear infinite;}
.silk i:nth-child(2){
  background:conic-gradient(from 180deg,
    transparent 0deg,
    rgba(246,205,196,.22) 62deg,
    transparent 128deg,
    color-mix(in srgb,var(--accent-soft) 16%,transparent) 236deg,
    transparent 310deg);
  animation:silkspin 124s linear infinite reverse;}
@keyframes silkspin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* 2. faint drifting dot-mesh — gives the flat ground a printed-paper texture.
   PERF: the drift used to animate background-position, which repaints the whole
   viewport on every frame. Now an oversized child is translated instead, so the
   dot pattern is rasterised once and the GPU just slides it. */
.mesh{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45;overflow:hidden;
  -webkit-mask-image:radial-gradient(120vw 90vh at 50% 30%,#000 10%,transparent 72%);
  mask-image:radial-gradient(120vw 90vh at 50% 30%,#000 10%,transparent 72%);}
.mesh::before{content:"";position:absolute;left:0;top:-320px;width:100%;height:calc(100% + 640px);
  background-image:radial-gradient(color-mix(in srgb,var(--accent) 26%,transparent) 1px,transparent 1px);
  background-size:32px 32px;
  will-change:transform;animation:meshdrift 60s linear infinite;}
@keyframes meshdrift{from{transform:translate3d(0,0,0);}to{transform:translate3d(32px,320px,0);}}

/* 3. rising droplets — reads as "cleanser / water", the brand's own metaphor */
.bubbles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.bubbles i{position:absolute;bottom:-12vh;display:block;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),color-mix(in srgb,var(--accent-soft) 34%,transparent) 58%,transparent 72%);
  border:1px solid color-mix(in srgb,var(--accent) 14%,transparent);
  opacity:0;will-change:transform;animation:rise linear infinite;}
@keyframes rise{
  0%{transform:translate3d(0,0,0) scale(.6);opacity:0;}
  12%{opacity:.8;}
  70%{opacity:.55;}
  100%{transform:translate3d(6vw,-118vh,0) scale(1.15);opacity:0;}}

/* 4. cursor spotlight — a soft warm light that follows the pointer.
   PERF: filter:blur() removed; the gradient is already soft, and blurring a
   46rem box that moves with the cursor was re-rendering it on every frame. */
.spot{position:fixed;top:0;left:0;width:46rem;height:46rem;z-index:0;pointer-events:none;
  margin:-23rem 0 0 -23rem;border-radius:50%;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent) 0%,transparent 60%);
  transition:opacity .6s ease;will-change:transform;transform:translateZ(0);}
body.has-pointer .spot{opacity:1;}

/* content must ride above the background stack */
.hero,section,footer,.marquee{position:relative;z-index:1;}

/* 5. soft wave seam between full-bleed panels (injected by main.js) */
.seam{position:relative;z-index:1;height:clamp(48px,6vw,96px);width:100%;display:block;
  line-height:0;margin:0;pointer-events:none;overflow:hidden;}
.seam.flip{transform:rotate(180deg);}
/* PERF: the wave used to animate a <path> inside the SVG, which re-rasterises
   the whole SVG every frame. Animating the <svg> element itself keeps it as one
   cached bitmap the compositor slides around — and there are 6 of these seams
   on the home page, all animating while you scroll past them. */
.seam svg{width:100%;height:100%;display:block;will-change:transform;
  animation:waveslide 14s ease-in-out infinite alternate;}
@keyframes waveslide{
  from{transform:translate3d(-1.5%,0,0) scale(1.06,1);}
  to{transform:translate3d(1.5%,0,0) scale(1.06,1.18);}}

/* PERF: mix-blend-mode removed — a full-screen blended overlay forces every
   layer beneath it to be composited together on each frame. Plain low opacity
   over a light ground looks the same. */
.grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.note{position:sticky;top:0;z-index:80;background:var(--ink);color:var(--ground);font-size:.75rem;letter-spacing:.04em;padding:.55rem 1.2rem;text-align:center;}

nav{
  position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:2rem clamp(1.2rem,4vw,3.6rem);
}
.logo-word{font-family:var(--serif);font-size:1.3rem;letter-spacing:.22em;color:var(--ink);text-decoration:none;}
.navlinks{display:flex;gap:2.4rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}
.navlinks a{color:inherit;text-decoration:none;position:relative;}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--accent);transition:width .3s ease;}
.navlinks a:hover::after{width:100%;}
.langtoggle{font-size:.72rem;letter-spacing:.1em;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.5rem 1.3rem;background:none;cursor:pointer;text-decoration:none;transition:background .3s ease,color .3s ease;}
.langtoggle:hover{background:var(--ink);color:var(--ground);}
.sizecard{text-decoration:none;color:inherit;}

/* ---------- HERO — art-directed editorial cover ---------- */
.hero{
  position:relative;min-height:100vh;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;
  padding:0 clamp(1.2rem,4vw,3.6rem);gap:clamp(1rem,4vw,3rem);overflow:hidden;
}
/* thin meta row above the headline */
.kicker{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-bottom:1.1rem;margin-bottom:2rem;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);
  padding-top:1.1rem;max-width:34rem;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);}
.kicker b{color:var(--accent);font-weight:600;}
/* oversized outlined index numeral behind headline */
.hero-num{position:absolute;left:clamp(1rem,3vw,3rem);top:12%;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--serif);font-weight:300;font-size:clamp(9rem,22vw,20rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--accent) 30%,transparent);opacity:.5;}
/* vertical tracked label pinned to the right edge */
.vlabel{position:absolute;right:1.1rem;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;color:var(--ink-soft);z-index:4;
  display:flex;align-items:center;gap:1.2rem;}
.vlabel::before{content:"";display:block;height:60px;width:1px;background:var(--line);}
/* tracked footer strip under the hero copy */
.herofoot{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--line);max-width:34rem;
  display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);
  opacity:0;animation:fadein .9s ease 1s forwards;}
.herofoot span{display:inline-flex;align-items:center;gap:1.4rem;}
.herofoot span::before{content:"—";color:var(--accent);}
/* PERF: every decorative glow on the site used to be a hard-edged gradient run
   through filter:blur(). A multi-stop gradient produces the same soft falloff
   natively — no filter pass, no re-render when the element animates. */
.hero-glow{
  position:absolute;width:56vw;height:56vw;right:-10vw;top:16%;border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--accent) 24%,transparent) 0%,
    color-mix(in srgb,var(--accent) 14%,transparent) 34%,
    color-mix(in srgb,var(--accent-soft) 7%,transparent) 58%,
    transparent 76%);
  will-change:transform,opacity;animation:glowpulse 8s ease-in-out infinite;pointer-events:none;
}
@keyframes glowpulse{0%,100%{transform:scale(1);opacity:.8;}50%{transform:scale(1.12);opacity:1;}}

.hero-copy{position:relative;z-index:3;}
.eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);font-weight:600;display:inline-block;}
.hero-copy h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(3.4rem,8vw,7rem);line-height:.94;
  margin:0 0 1.6rem;letter-spacing:-.02em;
}
.hero-copy h1 span{display:block;overflow:hidden;}
.hero-copy h1 .line-inner{display:block;transform:translateY(110%);animation:lineup 1s cubic-bezier(.16,1,.3,1) forwards;}
.hero-copy h1 .line-inner.d1{animation-delay:.1s;}
.hero-copy h1 .line-inner.d2{animation-delay:.28s;}
.hero-copy h1 em{font-style:italic;color:var(--accent);}
@keyframes lineup{to{transform:translateY(0);}}

.hero-copy p{font-size:1.05rem;line-height:1.75;color:var(--ink-soft);max-width:36ch;margin:0 0 2.2rem;
  opacity:0;animation:fadein .9s ease .6s forwards;}
@keyframes fadein{to{opacity:1;}}

.cta-row{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;opacity:0;animation:fadein .9s ease .8s forwards;}
.btn-primary{
  display:inline-block;text-decoration:none;
  background:var(--ink);color:var(--ground);border:none;padding:1rem 2.4rem;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.9,.3,1.3);
}
.btn-primary span{position:relative;z-index:2;}
.btn-primary:hover{transform:translateY(-3px);}
.btn-primary::after{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);
  transition:transform .4s cubic-bezier(.2,.9,.3,1);z-index:1;}
.btn-primary:hover::after{transform:translateY(0);}
.btn-ghost{font-size:.8rem;letter-spacing:.06em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:.2rem;}

.hero-visual{position:relative;height:100%;display:flex;align-items:center;justify-content:center;perspective:1600px;z-index:2;}
#floatwrap{position:relative;transform-style:preserve-3d;
  animation:enter 1.5s cubic-bezier(.34,1.56,.44,1) forwards, floaty 4.5s ease-in-out 1.5s infinite;
  transform:scale(.3) rotate(-50deg) translateY(140px);opacity:0;
}
#tiltwrap{position:relative;transform-style:preserve-3d;transition:transform .1s ease-out;}
@keyframes enter{
  0%{opacity:0;transform:scale(.28,.34) rotate(-50deg) translateY(150px);}
  55%{opacity:1;transform:scale(1.18,.9) rotate(5deg) translateY(-20px);}   /* squash on arrival */
  74%{transform:scale(.94,1.12) rotate(-6deg) translateY(6px);}             /* stretch rebound */
  88%{transform:scale(1.03,.98) rotate(-3deg) translateY(-4px);}
  100%{opacity:1;transform:scale(1) rotate(-4deg) translateY(0);}
}
@keyframes floaty{0%,100%{translate:0 0;rotate:-4deg;}50%{translate:0 -34px;rotate:2deg;}}
.hero-visual img{position:relative;max-height:64vh;width:auto;display:block;
  filter:drop-shadow(0 40px 60px rgba(30,12,21,.28));}
.sweep{
  position:absolute;top:0;left:-30%;width:26%;height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform:skewX(-18deg);animation:sweep 3.2s ease-in-out 1.6s infinite;mix-blend-mode:overlay;pointer-events:none;
}
@keyframes sweep{0%{left:-30%;}22%{left:130%;}100%{left:130%;}}

/* ---------- content ---------- */
section{padding:8rem clamp(1.2rem,4vw,3.6rem);position:relative;z-index:1;}
/* Translucent so the aurora keeps moving *through* the panels instead of being
   cut off by a flat block of colour.
   PERF: backdrop-filter removed. It has to read back the already-painted pixels
   behind the element and re-blur them every frame — and what is behind here is
   the constantly moving aurora, so it never got to cache anything. Plain alpha
   gives the same soft-tint result at zero cost. */
.band-panel{background:color-mix(in srgb,var(--panel) 70%,transparent);}
footer{position:relative;z-index:1;}

/* ============================================================
   Site-wide motion layer (injected by main.js on every page)
   ============================================================ */

/* scroll progress bar */
/* PERF: full-width bar scaled with transform (composited) instead of animating
   `width`, which relayouts on every scroll tick. */
#progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:100;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
  background:linear-gradient(90deg,var(--accent-soft),var(--accent));
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent);}

/* editorial scrolling marquee band */
.marquee{overflow:hidden;background:var(--ink);color:var(--ground);padding:1.15rem 0;
  position:relative;z-index:1;border-top:1px solid rgba(253,245,248,.12);border-bottom:1px solid rgba(253,245,248,.12);}
.marquee .track{display:inline-flex;white-space:nowrap;will-change:transform;
  animation:marq 26s linear infinite;font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2vw,1.5rem);}
.marquee:hover .track{animation-play-state:paused;}
.marquee span{display:inline-flex;align-items:center;gap:2.6rem;opacity:.92;padding-right:2.6rem;}
.marquee span::after{content:"✦";color:var(--accent-soft);font-style:normal;font-size:.7em;}
@keyframes marq{to{transform:translateX(-50%);}}

/* staggered entrance for grid children inside a revealed section */
.reveal .bcard,.reveal .step,.reveal .sizecard,.reveal .infocard,.reveal .complex,
.reveal .sociallinks a,.reveal .sociallinks span,.reveal .count{
  opacity:0;transform:translateY(38px) scale(.97);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),box-shadow .5s ease;}
.reveal.in .bcard,.reveal.in .step,.reveal.in .sizecard,.reveal.in .infocard,.reveal.in .complex,
.reveal.in .sociallinks a,.reveal.in .sociallinks span,.reveal.in .count{opacity:1;transform:none;}
.reveal.in :is(.bcard,.step,.sizecard,.infocard,.count):nth-child(1){transition-delay:.05s;}
.reveal.in :is(.bcard,.step,.sizecard,.infocard,.count):nth-child(2){transition-delay:.15s;}
.reveal.in :is(.bcard,.step,.sizecard,.infocard,.count):nth-child(3){transition-delay:.25s;}
.reveal.in :is(.bcard,.step,.sizecard,.infocard,.count):nth-child(4){transition-delay:.35s;}
.reveal.in :is(.bcard,.step,.sizecard,.infocard,.count):nth-child(5){transition-delay:.45s;}
.reveal.in .complex:nth-child(1){transition-delay:.05s;}
.reveal.in .complex:nth-child(2){transition-delay:.12s;}

/* accent words get a soft animated gradient shimmer */
em, .eyebrow{--sh:linear-gradient(100deg,var(--accent) 20%,var(--accent-soft) 45%,var(--accent) 70%);}
.hero-copy h1 em,.about-hero h1 em,.belief h2 em,.story h2 em,.pullquote p{
  background:var(--sh);background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--accent);animation:shimmer 6s linear infinite;}
@keyframes shimmer{to{background-position:220% center;}}

.strip{display:flex;gap:3rem;justify-content:center;flex-wrap:wrap;text-align:center;padding-top:3rem;padding-bottom:3rem;}
.strip .item{max-width:230px;}
.strip .item .mark{font-family:var(--serif);font-size:1.8rem;color:var(--accent);margin-bottom:.6rem;display:block;font-style:italic;}
.strip .item p{font-size:.85rem;color:var(--ink-soft);line-height:1.65;margin:0;}

.story{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
.story .imgside{position:relative;display:flex;justify-content:center;align-items:center;min-height:min(78vw,460px);}
/* about.html puts a plain product shot in .imgside (home puts the .storyorb
   there instead) — this sizing rule is what that bare <img> needs. */
.story .imgside>img{width:72%;max-width:340px;filter:drop-shadow(0 30px 40px rgba(30,12,21,.15));}

/* ---- animated brand disc: fills the Our Story visual side ---- */
.storyorb{position:relative;width:min(80%,420px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;}
.storyorb>*{position:absolute;}

/* breathing gradient halo behind everything */
/* PERF: one animation only — blobmorph and glowpulse both drive `transform`, so
   declaring both meant the second silently overrode the first. filter:blur()
   dropped too; the gradient is soft enough on its own. */
.storyorb .halo{inset:4%;
  background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--accent-soft) 62%,transparent) 0%,color-mix(in srgb,var(--accent) 42%,transparent) 48%,transparent 70%);
  opacity:.3;will-change:transform;animation:blobmorph 18s ease-in-out infinite;}

/* three concentric rings, rotating at different speeds/directions */
.storyorb .ring{border-radius:50%;}
.storyorb .ring.r1{inset:0;border:1px dashed color-mix(in srgb,var(--accent) 32%,transparent);
  animation:spin 46s linear infinite;}
.storyorb .ring.r2{inset:13%;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  border-top-color:var(--accent);border-right-color:transparent;
  animation:spin 18s linear infinite reverse;}
.storyorb .ring.r3{inset:24%;border-radius:46% 54% 60% 40% / 50% 46% 54% 50%;
  background:linear-gradient(150deg,rgba(255,255,255,.9),color-mix(in srgb,var(--panel) 85%,#fff));
  box-shadow:0 30px 60px rgba(30,12,21,.13),inset 0 2px 18px rgba(255,255,255,.7);
  animation:blobmorph 22s ease-in-out infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* rotating circular caption ring */
.storyorb .circtext{inset:0;width:100%;height:100%;overflow:visible;animation:spin 40s linear infinite;}
.storyorb .circtext text{font-family:var(--sans);font-size:11.5px;letter-spacing:.34em;
  text-transform:uppercase;fill:var(--ink-soft);opacity:.75;}

/* dots orbiting the outer ring */
.storyorb .odot{top:50%;left:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 12%,transparent);}
.storyorb .odot.d1{animation:orbitwide 16s linear infinite;}
.storyorb .odot.d2{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--accent-soft);
  animation:orbitwide 24s linear infinite reverse;animation-delay:-6s;}
.storyorb .odot.d3{width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--accent-soft);box-shadow:none;
  animation:orbitmid 13s linear infinite;animation-delay:-3s;}
@keyframes orbitwide{
  from{transform:rotate(0deg) translateX(min(38vw,210px)) rotate(0deg);}
  to{transform:rotate(360deg) translateX(min(38vw,210px)) rotate(-360deg);}}
@keyframes orbitmid{
  from{transform:rotate(0deg) translateX(min(27vw,150px)) rotate(0deg);}
  to{transform:rotate(360deg) translateX(min(27vw,150px)) rotate(-360deg);}}

/* small droplets rising inside the disc */
.storyorb .drop{bottom:16%;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),color-mix(in srgb,var(--accent-soft) 40%,transparent) 60%,transparent 74%);
  border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);opacity:0;
  animation:dropup 9s ease-in-out infinite;}
.storyorb .drop.p1{left:32%;width:10px;height:10px;animation-delay:0s;}
.storyorb .drop.p2{left:46%;width:16px;height:16px;animation-delay:-1.8s;animation-duration:11s;}
.storyorb .drop.p3{left:58%;width:7px;height:7px;animation-delay:-3.6s;animation-duration:8s;}
.storyorb .drop.p4{left:40%;width:12px;height:12px;animation-delay:-5.4s;animation-duration:12s;}
.storyorb .drop.p5{left:64%;width:9px;height:9px;animation-delay:-7.2s;animation-duration:10s;}
@keyframes dropup{
  0%{transform:translate(0,0) scale(.5);opacity:0;}
  15%{opacity:.85;}
  75%{opacity:.5;}
  100%{transform:translate(14px,-190px) scale(1.2);opacity:0;}}

/* the logo itself, floating gently in the centre */
.storyorb img{position:relative;z-index:2;width:44%;max-width:190px;
  filter:drop-shadow(0 22px 34px rgba(30,12,21,.18));
  animation:floaty2 6.5s ease-in-out infinite;}
@keyframes floaty2{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-14px) rotate(1deg);}}

@media (max-width:860px){
  .story .imgside{min-height:min(92vw,400px);}
  .storyorb{width:min(88%,340px);}
  .storyorb .circtext text{font-size:13px;letter-spacing:.26em;}
}
.story h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.15;margin:.6rem 0 1.4rem;text-wrap:balance;}
.story p{color:var(--ink-soft);line-height:1.9;font-size:1rem;margin:0 0 1.2rem;max-width:50ch;}

.reveal{opacity:0;transform:translateY(36px);transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:translateY(0);}

.sizes-head{text-align:center;margin-bottom:4rem;}
/* centered editorial labels get flanking hairlines */
.sizes-head .eyebrow,.socialband .eyebrow,.comingsoon .eyebrow,.pagehero .eyebrow,.about-hero .eyebrow{
  display:inline-flex;align-items:center;gap:1rem;}
.sizes-head .eyebrow::before,.sizes-head .eyebrow::after,
.socialband .eyebrow::before,.socialband .eyebrow::after,
.comingsoon .eyebrow::before,.comingsoon .eyebrow::after,
.pagehero .eyebrow::before,.pagehero .eyebrow::after,
.about-hero .eyebrow::before,.about-hero .eyebrow::after{
  content:"";width:32px;height:1px;background:currentColor;opacity:.5;}
.sizes{display:grid;grid-template-columns:repeat(2,1fr);gap:0;max-width:960px;margin:0 auto;}
.sizecard{
  text-align:center;padding:3rem 2rem;position:relative;transform-style:preserve-3d;
  transition:transform .15s ease-out;
}
.sizecard:not(:last-child){border-right:1px solid var(--line);}
.sizecard .imgbox{height:280px;display:flex;align-items:center;justify-content:center;margin-bottom:1.6rem;}
.sizecard img{max-height:100%;max-width:80%;filter:drop-shadow(0 22px 30px rgba(30,12,21,.2));transition:transform .4s cubic-bezier(.2,.9,.3,1.2);}
.sizecard:hover img{transform:scale(1.06) rotate(-2deg);}
.sizecard h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:.3rem 0;}
.sizecard .price{color:var(--accent);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;}

footer{padding:3.5rem clamp(1.2rem,4vw,3.6rem);text-align:center;color:var(--ink-soft);font-size:.8rem;border-top:1px solid var(--line);}

/* ============================================================
   v4 additions — shared design-system extensions
   ============================================================ */

/* --- animated flowing blobs (used behind ingredient/benefit marks) --- */
/* PERF: this used to animate border-radius, which is a paint property — every
   frame re-rasterised every element using it (5 benefit cards + the story disc
   + ingredient blobs + the about orb, all at once). The organic shape is now
   static and only transform animates, which the compositor handles for free.
   The rotation still makes the asymmetric radius visibly morph. */
@keyframes blobmorph{
  0%,100%{transform:rotate(0deg) scale(1);}
  33%{transform:rotate(120deg) scale(1.08);}
  66%{transform:rotate(240deg) scale(.96);}
}
/* shared static organic silhouette for every element that used to morph */
.bcard .blob,.complex .cblob,.comingsoon .csblob,.storyorb .halo{
  border-radius:42% 58% 63% 37% / 46% 42% 58% 54%;}
@keyframes blobdrift{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(4%,-6%) scale(1.12);}
}

/* --- 5 benefit cards on home --- */
.benefits{display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem;max-width:1180px;margin:0 auto;}
.bcard{position:relative;text-align:center;padding:2.6rem 1.1rem 2.2rem;
  border:1px solid color-mix(in srgb,var(--accent) 10%,var(--line));
  border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.85),color-mix(in srgb,var(--panel) 40%,#fff));
  overflow:hidden;box-shadow:0 8px 24px rgba(30,12,21,.05);
  transition:transform .5s cubic-bezier(.2,.9,.3,1.2), box-shadow .5s ease, border-color .5s ease;}
.bcard:hover{transform:translateY(-10px);box-shadow:0 30px 55px rgba(30,12,21,.16);
  border-color:color-mix(in srgb,var(--accent) 30%,transparent);}
.bcard .blob{position:absolute;top:-30%;left:50%;width:150px;height:150px;translate:-50% 0;z-index:0;
  background:radial-gradient(circle at 40% 35%,var(--accent-soft) 0%,var(--accent) 55%,transparent 78%);opacity:.16;
  border-radius:42% 58% 63% 37% / 46% 42% 58% 54%;
  animation:blobmorph 14s ease-in-out infinite, blobdrift 9s ease-in-out infinite;}
.bcard:hover .blob{opacity:.32;animation-duration:5s,4s;}
.bcard .bmark{position:relative;z-index:1;font-family:var(--serif);font-style:italic;font-size:2rem;
  color:var(--accent);line-height:1;margin-bottom:.9rem;display:block;}
.bcard h4{position:relative;z-index:1;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin:0 0 .5rem;font-weight:600;}
.bcard p{position:relative;z-index:1;font-size:.78rem;line-height:1.6;color:var(--ink-soft);margin:0;}

/* --- count-up numbers --- */
.counts{display:flex;gap:4rem;justify-content:center;flex-wrap:wrap;text-align:center;margin-top:4.5rem;}
.count .num{font-family:var(--serif);font-size:clamp(2.6rem,5vw,4rem);color:var(--accent);line-height:1;}
.count .lbl{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:.7rem;}

/* --- how-to-use steps --- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;max-width:960px;margin:3rem auto 0;}
.step{text-align:center;}
.step .n{font-family:var(--serif);font-style:italic;font-size:2.4rem;color:var(--accent-soft);display:block;margin-bottom:.8rem;}
.step h4{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin:0 0 .5rem;}
.step p{font-size:.86rem;line-height:1.7;color:var(--ink-soft);margin:0;}

/* --- social / shopee closing band --- */
.socialband{background:var(--ink);color:var(--ground);text-align:center;}
.socialband .eyebrow{color:var(--accent-soft);}
.socialband h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3rem);margin:.6rem 0 2rem;color:var(--ground);}
.socialband .btn-primary{background:var(--accent-soft);color:var(--ink);}
.socialband .btn-primary::after{background:var(--ground);}
.sociallinks{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-top:2.4rem;}
.sociallinks a,.sociallinks span.dis{display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid rgba(253,245,248,.25);border-radius:999px;padding:.7rem 1.5rem;
  font-size:.76rem;letter-spacing:.1em;color:var(--ground);text-decoration:none;
  transition:background .35s ease, transform .35s ease;}
.sociallinks a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-3px);}
.sociallinks span.dis{opacity:.4;cursor:not-allowed;}
.sociallinks svg{width:16px;height:16px;fill:currentColor;}

/* --- ingredient complex rows (product page) --- */
.complex{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center;
  padding:4rem 0;overflow:hidden;}
.complex:not(:last-child){border-bottom:1px solid var(--line);}
.complex .cblob{position:absolute;width:34vw;height:34vw;max-width:460px;max-height:460px;z-index:0;
  background:radial-gradient(circle at 40% 35%,var(--accent-soft) 0%,color-mix(in srgb,var(--accent) 80%,transparent) 46%,transparent 72%);opacity:.16;
  border-radius:42% 58% 63% 37% / 46% 42% 58% 54%;animation:blobmorph 18s ease-in-out infinite;}
.complex:nth-child(odd) .cblob{left:-8vw;top:-4vw;}
.complex:nth-child(even) .cblob{right:-8vw;bottom:-4vw;}
.complex .ctext{position:relative;z-index:1;}
.complex h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3vw,2.5rem);margin:.5rem 0 1rem;}
.complex .ingr{position:relative;z-index:1;font-family:var(--serif);font-style:italic;color:var(--accent);
  font-size:1.05rem;line-height:1.7;}
.complex p{color:var(--ink-soft);line-height:1.8;margin:1rem 0 0;max-width:46ch;}

/* --- info cards (how to use / precautions) --- */
.infocards{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;max-width:960px;margin:0 auto;}
.infocard{border:1px solid var(--line);border-radius:18px;padding:2.4rem;
  background:linear-gradient(160deg,rgba(255,255,255,.85),color-mix(in srgb,var(--panel) 40%,#fff));
  box-shadow:0 8px 24px rgba(30,12,21,.05);transition:transform .5s cubic-bezier(.2,.9,.3,1.2),box-shadow .5s ease;}
.infocard:hover{transform:translateY(-6px);box-shadow:0 26px 48px rgba(30,12,21,.13);}
.infocard h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem;font-weight:600;}
.infocard p{font-size:.9rem;line-height:1.8;color:var(--ink-soft);margin:0;}

/* --- full ingredients disclosure --- */
.inci{max-width:820px;margin:4rem auto 0;border-top:1px solid var(--line);}
.inci summary{cursor:pointer;list-style:none;padding:1.4rem 0;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);display:flex;justify-content:space-between;align-items:center;}
.inci summary::-webkit-details-marker{display:none;}
.inci summary::after{content:"+";font-size:1.4rem;color:var(--accent);transition:transform .3s ease;}
.inci[open] summary::after{transform:rotate(45deg);}
.inci .body{font-size:.86rem;line-height:2;color:var(--ink-soft);padding-bottom:2rem;}

/* --- big centered pull-quote --- */
.pullquote{text-align:center;max-width:900px;margin:0 auto;}
.pullquote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.7rem,3.4vw,2.6rem);
  line-height:1.4;color:var(--ink);text-wrap:balance;}

/* --- coming-soon (reviews) --- */
.comingsoon{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;position:relative;overflow:hidden;}
.comingsoon .csblob{position:absolute;width:60vw;height:60vw;max-width:640px;max-height:640px;z-index:0;
  background:radial-gradient(circle at 40% 35%,var(--accent-soft) 0%,color-mix(in srgb,var(--accent) 70%,transparent) 44%,transparent 70%);opacity:.16;
  border-radius:42% 58% 63% 37% / 46% 42% 58% 54%;animation:blobmorph 16s ease-in-out infinite;}
.comingsoon .inner{position:relative;z-index:1;}
.comingsoon h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6vw,5rem);line-height:1.05;margin:1rem 0 1.4rem;}
.comingsoon p{color:var(--ink-soft);line-height:1.8;max-width:44ch;margin:0 auto 2.4rem;}
.stars{display:flex;gap:.6rem;justify-content:center;margin-bottom:2rem;}
.stars span{font-size:1.6rem;color:var(--accent-soft);animation:twinkle 3s ease-in-out infinite;}
.stars span:nth-child(2){animation-delay:.3s;}
.stars span:nth-child(3){animation-delay:.6s;}
.stars span:nth-child(4){animation-delay:.9s;}
.stars span:nth-child(5){animation-delay:1.2s;}
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.85);}50%{opacity:1;transform:scale(1.15);}}

/* --- simple page hero (sub-pages) --- */
.pagehero{padding-top:9rem;padding-bottom:2rem;text-align:center;}
.pagehero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,5.5vw,4.4rem);line-height:1.02;margin:1rem 0 0;}

/* ============================================================
   About page — editorial creative treatment
   ============================================================ */

/* dramatic hero: oversized headline, floating quote mark, scroll cue */
.about-hero{position:relative;padding-top:10rem;padding-bottom:5rem;text-align:center;overflow:hidden;}
.about-hero .quotemark{
  position:absolute;top:2rem;left:50%;translate:-50% 0;z-index:0;pointer-events:none;
  font-family:var(--serif);font-style:italic;font-size:clamp(18rem,34vw,34rem);line-height:1;
  color:var(--accent);opacity:.06;user-select:none;
}
.about-hero .aglow{
  position:absolute;width:60vw;height:60vw;max-width:820px;max-height:820px;left:50%;top:35%;translate:-50% -50%;z-index:0;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--accent) 22%,transparent) 0%,
    color-mix(in srgb,var(--accent) 12%,transparent) 36%,
    color-mix(in srgb,var(--accent-soft) 6%,transparent) 58%,
    transparent 74%);
  will-change:transform,opacity;animation:glowpulse 9s ease-in-out infinite;pointer-events:none;
}
.about-hero .inner{position:relative;z-index:1;}
.about-hero h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,7vw,5.4rem);line-height:1;
  margin:1.2rem auto 0;letter-spacing:-.015em;max-width:14ch;text-wrap:balance;
}
.about-hero h1 em{font-style:italic;color:var(--accent);}
.scrollcue{display:inline-flex;flex-direction:column;align-items:center;gap:.7rem;margin-top:3.2rem;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);}
.scrollcue .bar{width:1px;height:52px;background:linear-gradient(var(--accent),transparent);position:relative;overflow:hidden;}
.scrollcue .bar::after{content:"";position:absolute;top:-40%;left:0;width:100%;height:40%;
  background:var(--accent);animation:scrolldrop 2.2s ease-in-out infinite;}
@keyframes scrolldrop{0%{top:-40%;}70%,100%{top:100%;}}

/* belief block: logo inside a morphing gradient orb, orbiting dot, giant index */
.belief{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;position:relative;}
.belief .orbside{position:relative;display:flex;justify-content:center;align-items:center;min-height:420px;}
.belief .orb{
  position:relative;width:min(78%,360px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:46% 54% 60% 40% / 50% 46% 54% 50%;
  background:linear-gradient(150deg,color-mix(in srgb,var(--panel) 70%,#fff),var(--panel));
  box-shadow:0 40px 70px rgba(30,12,21,.14),inset 0 2px 18px rgba(255,255,255,.6);
  animation:blobmorph 20s ease-in-out infinite;
}
.belief .orb::before{
  content:"";position:absolute;inset:-8%;z-index:-1;border-radius:inherit;
  background:radial-gradient(circle at 38% 32%,var(--accent-soft) 0%,color-mix(in srgb,var(--accent) 82%,transparent) 48%,transparent 74%);
  opacity:.24;animation:blobmorph 16s ease-in-out infinite reverse;
}
.belief .orb img{width:64%;max-width:210px;filter:drop-shadow(0 18px 26px rgba(30,12,21,.14));
  animation:blobmorph 20s ease-in-out infinite reverse;}
.belief .dot{position:absolute;top:8%;right:14%;width:14px;height:14px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 14%,transparent);
  animation:orbit 12s linear infinite;}
@keyframes orbit{
  from{transform:rotate(0deg) translateX(150px) rotate(0deg);}
  to{transform:rotate(360deg) translateX(150px) rotate(-360deg);}
}
.belief .txt{position:relative;}
.belief .index{position:absolute;top:-5.5rem;right:0;font-family:var(--serif);font-style:italic;
  font-size:8rem;line-height:1;color:var(--accent);opacity:.08;z-index:0;pointer-events:none;}
.belief .txt>*{position:relative;z-index:1;}
.belief h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.15;
  margin:.6rem 0 1.4rem;text-wrap:balance;}
.belief h2 em{font-style:italic;color:var(--accent);}
.belief p{color:var(--ink-soft);line-height:1.9;font-size:1rem;margin:0 0 1.2rem;max-width:50ch;}
.belief .rule{width:56px;height:2px;background:var(--accent);margin:0 0 1.6rem;border:0;}

@media (max-width:860px){
  .belief{grid-template-columns:1fr;gap:2.5rem;text-align:center;}
  .belief .orbside{order:-1;min-height:340px;}
  .belief .txt{text-align:left;}
  .belief .rule{margin-left:auto;margin-right:auto;}
  .belief .index{position:static;display:block;font-size:5rem;text-align:center;opacity:.1;margin-bottom:-1rem;}
}

@media (max-width:960px){
  .benefits{grid-template-columns:repeat(2,1fr);}
  .complex{grid-template-columns:1fr;gap:1.5rem;}
  .infocards{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;gap:1.6rem;}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:8rem;padding-bottom:3rem;}
  .hero-visual{order:-1;margin-bottom:1rem;}
  .vlabel{display:none;}
  .hero-num{font-size:34vw;top:auto;bottom:2%;opacity:.35;}
  .kicker,.herofoot{max-width:none;}
  .story{grid-template-columns:1fr;gap:2.5rem;text-align:center;}
  .story .imgside{order:-1;}
  .navlinks{display:none;}
  .sizes{grid-template-columns:1fr;}
  .sizecard:not(:last-child){border-right:none;border-bottom:1px solid var(--line);}
  .benefits{grid-template-columns:1fr;}
  .counts{gap:2.5rem;}
}
@media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important;} }