/* ============================================================================
   ARGANI,shared design system
   One stylesheet for every ARGANI product experience.
   Set data-world="oil" or data-world="nila" on <html> to switch material world.
   Future ARGANI products add a new [data-world] block and nothing else changes.
   ========================================================================= */

/* ---------- 1. TOKENS ---------- */

:root{
  /* ARGANI identity. Exact values read out of the brand sheets and the final
     logo (2026-09-14): the colours the founders chose, used in small doses. */
  --argani-terracotta:#7A3B22;   /* the wordmark and the khatem lines */
  --argani-terracotta-deep:#5E2C19;
  --argani-brown:#2B1D14;        /* cedar: the darkest ground and text */
  --argani-cream:#FBF7F0;
  --argani-white:#FFFFFF;
  --argani-parchment:#F3EBDD;
  --argani-gold:#D4A857;         /* brass: the gold rule, lines on dark grounds */
  --argani-gold-deep:#C48A2A;    /* the drop on dark grounds */
  --argani-gold-pale:#EBD9AE;
  --accent-gold:#C9A24A;         /* the drop on light grounds */
  --accent-gold-deep:#B8873A;
  --border-hairline:#E9DDC8;
  --border-subtle:#F3EBDD;
  --fes-blue:#1B3A6B;            /* Moroccan heritage sub-colours */
  --royal-green:#0F4D33;

  /* earlier names, kept so nothing that uses them breaks */
  --gold-pale:#C9B27A;
  --gold-deep:#96682A;
  --brown-khatem:var(--argani-terracotta);
  --cedar:var(--argani-terracotta);
  --parchment:#F0E2CC;

  /* the khatem in the logo's two colours; dark grounds override these */
  --k-line:var(--argani-terracotta);
  --k-drop:var(--accent-gold);
  --k-glint:var(--argani-gold);      /* the light that runs round a closing seal */
  --seal-wash:rgba(212,168,87,.22);  /* the warmth it leaves behind */
  --record-line:rgba(201,162,74,.55);
  --record-bg:rgba(251,247,240,.55);
  --kicker:var(--argani-terracotta);

  /* type */
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Tenor Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --data:"Tenor Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:.28s; --t-mid:.55s; --t-slow:.9s;

  /* shape: the Maison is squared, not rounded */
  --r-sm:2px; --r-md:4px;

  /* rhythm */
  --gut:clamp(20px,5vw,64px);
  --sec-y:clamp(54px,9.4vh,120px);
  --maxw:1240px;

  --tshadow:0 1px 2px rgba(20,12,6,.95),0 3px 12px rgba(20,12,6,.72),0 10px 44px rgba(20,12,6,.8);
}

/* --- Argan Oil: the light world --- */
[data-world="oil"]{
  --canvas:#F5EEE2;
  --panel:#EBE0CE;
  --panel-2:#E2D4BD;
  --text-primary:var(--argani-brown);          /* cedar, from the brand sheets */
  --text-secondary:#7A5C46;
  --accent:var(--argani-terracotta);           /* the wordmark's colour carries the CTA */
  --accent-hover:var(--argani-terracotta-deep);
  --accent-muted:var(--argani-gold);
  --accent-ink:#F5EEE2;
  --hairline:#DDCDB0;
  --hairline-strong:#B9A279;
  --scrim-rgb:20,12,6;
  --env-a:rgba(201,178,122,.20);
  --env-b:rgba(181,103,58,.11);
  --mote:rgba(122,59,34,.30);
  --mote-dir:1;            /* motes drift down, like the oil */
}

/* --- Nila: the dark world --- */
[data-world="nila"]{
  --canvas:#121D33;
  --panel:#172A4B;
  --panel-2:var(--fes-blue);                   /* Fès blue, the heritage sub-colour */
  --text-primary:#EDE4D4;
  --text-secondary:#A9B3C6;
  --accent:var(--argani-gold);
  --accent-hover:#E3BF78;
  --accent-muted:rgba(212,168,87,.34);
  --accent-ink:#101A2C;
  --hairline:rgba(212,168,87,.22);
  --hairline-strong:rgba(212,168,87,.44);
  /* the brand sheet's Fès-blue mark: gold lines, cream drop */
  --k-line:var(--argani-gold);
  --k-drop:var(--argani-cream);
  --k-glint:var(--argani-cream);
  --seal-wash:rgba(212,168,87,.15);
  --record-line:rgba(212,168,87,.42);
  --record-bg:rgba(10,18,34,.35);
  --kicker:var(--argani-gold);
  --scrim-rgb:6,10,20;
  --env-a:rgba(70,110,190,.20);
  --env-b:rgba(201,178,122,.08);
  --mote:rgba(198,214,255,.34);
  --mote-dir:-1;           /* motes drift up, like pigment in water */
}

/* --- Saharan Kohl: desert night. Black, ARGANI gold, terracotta, white. --- */
[data-world="kohl"]{
  --canvas:#0D0A08;
  --panel:#1A130F;
  --panel-2:var(--argani-brown);
  --text-primary:#FBF7F0;
  --text-secondary:#BFAF98;
  --accent:var(--argani-gold);
  --accent-hover:#E3BF78;
  --accent-muted:rgba(212,168,87,.34);
  --accent-ink:#0D0A08;
  --hairline:rgba(212,168,87,.20);
  --hairline-strong:rgba(212,168,87,.42);
  --k-line:var(--argani-gold);
  --k-drop:var(--argani-terracotta);
  --k-glint:var(--argani-cream);
  --kicker:var(--argani-gold);
  --seal-wash:rgba(122,59,34,.30);
  --record-line:rgba(212,168,87,.42);
  --record-bg:rgba(122,59,34,.10);
  --scrim-rgb:8,5,3;
  --env-a:rgba(122,59,34,.26);
  --env-b:rgba(212,168,87,.08);
  --mote:rgba(212,168,87,.30);
  --mote-dir:-1;
}
[data-world="kohl"] .site-nav.solid .nav-mark .wm,
[data-world="kohl"] .site-foot .f-mark .wm{color:var(--text-primary)}
[data-world="kohl"] .cta-wm .wm,[data-world="kohl"] .record-kicker .wm{color:var(--argani-gold)}
[data-world="kohl"] .shelf-cat-title,[data-world="kohl"] .xlink{color:var(--argani-gold)}
[data-world="kohl"] .s-pairing,[data-world="kohl"] .s-standard .frame{border-color:rgba(122,59,34,.55)}

/* the split hero: the product on its own white, the name on the page's black */
.hero-still.hs-split{
  display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;
  min-height:0;background:var(--canvas);padding-top:64px;
}
.hero-still.hs-split::before{display:none}
.hs-split-fig{margin:0;background:#EEEDEA;aspect-ratio:4/5;overflow:hidden}
.hs-split-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block}
.hero-still.hs-split .hs-inner{text-shadow:none;padding-top:clamp(28px,5vh,56px)}
.hero-still.hs-split .t-hero{color:var(--text-primary)}
.hero-still.hs-split .hs-sub{color:var(--text-secondary)}
.hero-still.hs-split .hs-tagline{color:var(--accent)}
@media (min-width:900px){
  .hero-still.hs-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100svh;padding-top:0}
  .hs-split-fig{aspect-ratio:auto;height:100%}
  .hero-still.hs-split .hs-inner{align-self:center;padding:var(--gut)}
}
/* the nav sits on the page's black band above the photograph */
body:has(.hs-split) .site-nav:not(.solid){background:var(--canvas)}
body:has(.hs-split) .site-nav .nav-mark .wm{color:var(--text-primary)}

/* --- Hydrosols: water, not fat. The oil world's warmth moves out of the canvas
       and into the accent, so rose and orange blossom read clean rather than rich. --- */
[data-world="water"]{
  --canvas:#F4F1EC;
  --panel:#EAE5DE;
  --panel-2:#DFD8CE;
  --text-primary:#2E3130;
  --text-secondary:#6E7472;
  --accent:#8A5B57;
  --accent-hover:#6E4642;
  --accent-muted:#CBB6A8;
  --accent-ink:#F4F1EC;
  --hairline:#D9D2C8;
  --hairline-strong:#BCB2A4;
  --scrim-rgb:18,18,16;
  --env-a:rgba(203,182,168,.20);
  --env-b:rgba(138,91,87,.08);
  --mote:rgba(138,91,87,.22);
  --mote-dir:-1;           /* mist rises */
}

/* --- Earth: soap, clay, milled powder. Matte where the oil world is lit. --- */
[data-world="earth"]{
  --canvas:#EDE7DC;
  --panel:#E1D9CB;
  --panel-2:#D4C9B7;
  --text-primary:var(--argani-brown);
  --text-secondary:#6F6355;
  --accent:var(--argani-terracotta);           /* terracotta suits clay and soap */
  --accent-hover:var(--argani-terracotta-deep);
  --accent-muted:#B6A183;
  --accent-ink:#EDE7DC;
  --hairline:#D2C7B4;
  --hairline-strong:#B2A48C;
  --scrim-rgb:18,14,9;
  --env-a:rgba(182,161,131,.20);
  --env-b:rgba(90,68,48,.09);
  --mote:rgba(90,68,48,.24);
  --mote-dir:1;            /* powder settles */
}

/* --- Botanical: the flowers and the teas. The only world carrying colour, and
       it carries it in the imagery. The canvas stays quiet. --- */
[data-world="botanical"]{
  --canvas:#F2EDE6;
  --panel:#E7E0D6;
  --panel-2:#DBD2C5;
  --text-primary:#332A2A;
  --text-secondary:#6F6462;
  --accent:#7A3340;
  --accent-hover:#5E232F;
  --accent-muted:#C4A69F;
  --accent-ink:#F2EDE6;
  --hairline:#D7CEC2;
  --hairline-strong:#B9AE9E;
  --scrim-rgb:20,14,14;
  --env-a:rgba(196,166,159,.18);
  --env-b:rgba(122,51,64,.07);
  --mote:rgba(122,51,64,.20);
  --mote-dir:1;
}

/* --- Herbal: Tea and Herbals. Royal green, the heritage sub-colour, carries the
       accent; the canvas stays a quiet cream so the flowers bring the colour. --- */
[data-world="herbal"]{
  --canvas:#F3F0E7;
  --panel:#E8E6DA;
  --panel-2:#DCDBCC;
  --text-primary:var(--argani-brown);
  --text-secondary:#5F6558;
  --accent:var(--royal-green);
  --accent-hover:#0A3A26;
  --accent-muted:#A9BCA6;
  --accent-ink:#F3F0E7;
  --hairline:#DAD8CA;
  --hairline-strong:#B6BAA5;
  --scrim-rgb:14,22,16;
  --env-a:rgba(15,77,51,.07);
  --env-b:rgba(212,168,87,.07);
  --mote:rgba(15,77,51,.16);
  --mote-dir:1;
  --kicker:var(--royal-green);
}

/* ---------- 2. BASE ---------- */

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

html,body{
  overflow-x:hidden;       /* fallback first */
  overflow-x:clip;         /* the real fix: hidden alone still allows programmatic sideways scroll */
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(15px,1.02vw + 12px,17px);
  line-height:1.72;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* height:auto is load-bearing. The width/height attributes on <img> map to real
   CSS width and height, and an explicit height makes the browser ignore every
   aspect-ratio rule below, so each image rendered at its full natural height and
   blew the section layouts apart. The attributes still earn their place: they
   reserve space and stop layout shift while the image loads. */
img,video{max-width:100%;display:block;height:auto}

/* headlines break into balanced lines, so none ends on a stranded word
   ("Not a mineral. A / plant.") */
h1,h2,h3{text-wrap:balance}
a{color:inherit}

::selection{background:var(--accent-muted);color:var(--text-primary)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--accent-ink);
  padding:12px 20px;font-family:var(--body);letter-spacing:.14em;
  text-transform:uppercase;font-size:12px;text-decoration:none;
}
.skip:focus{left:12px;top:12px}

.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 3. TYPE SCALE ---------- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:300;
  line-height:1.06;
  margin:0;
  letter-spacing:-.008em;
}

.t-hero{font-size:clamp(44px,8.4vw,110px)}
.t-1{font-size:clamp(34px,5.4vw,70px)}
.t-2{font-size:clamp(27px,3.5vw,44px)}
.t-3{font-size:clamp(21px,2.1vw,28px);line-height:1.2}

/* ch caps go on the TEXT element, never on a container:
   ch resolves against the element's own inherited font */
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.62;max-width:46ch;color:var(--text-secondary)}
.para{max-width:60ch}
.para-tight{max-width:52ch}

/* the small labels carry the logo's terracotta: a quiet brand thread through
   every section (gold in the Nila world, royal green on Tea and Herbals) */
.kicker{
  font-family:var(--body);
  font-size:11px;font-weight:400;
  letter-spacing:.30em;text-transform:uppercase;
  color:var(--kicker);
  margin:0 0 clamp(14px,2vh,26px);
}

.wordmark{
  font-family:var(--display);font-weight:300;
  letter-spacing:.34em;text-transform:uppercase;
  /* .34em tracking adds a trailing gap; pull it back so the mark optically centres */
  margin-right:-.34em;
}

/* The ARGANI wordmark: the founders' own lettering, not a font imitation of it.
   One shape file used as a mask, so it takes whatever colour its context
   needs (terracotta on cream, cream over the films) from currentColor. */
.wm{
  display:inline-block;vertical-align:middle;
  height:var(--wm-h,18px);aspect-ratio:1100 / 258;
  background-color:currentColor;
  -webkit-mask:url("argani-wordmark.webp") center / contain no-repeat;
          mask:url("argani-wordmark.webp") center / contain no-repeat;
  letter-spacing:0;margin:0;
}

/* the wordmark's size and colour in each place it appears */
.nav-mark .wm{--wm-h:17px}
.site-nav.solid .nav-mark .wm{color:var(--argani-terracotta)}
[data-world="nila"] .site-nav.solid .nav-mark .wm{color:var(--text-primary)}
.site-foot .f-mark .wm{--wm-h:19px;color:var(--argani-terracotta)}
[data-world="nila"] .site-foot .f-mark .wm{color:var(--text-primary)}
.sh-eyebrow .wm,.hs-eyebrow .wm{--wm-h:15px}
.thresh-wm{margin:clamp(20px,3vh,30px) 0 0;line-height:0}
.thresh-wm .wm{--wm-h:clamp(46px,8.6vw,88px);color:var(--argani-terracotta)}
.cta-wm{line-height:0}
.cta-wm .wm{--wm-h:14px;color:var(--argani-terracotta)}
[data-world="nila"] .cta-wm .wm{color:var(--argani-gold)}

/* the opening film caption: the wordmark rides the band's progress exactly as
   the typed word did. A text-shadow cannot reach a masked image, so its
   legibility over the footage comes from a drop-shadow filter instead. */
.band .band-wm{margin:0;line-height:0}
.band .band-wm .wm{
  --wm-h:clamp(36px,6vw,78px);color:#F6EFE2;
  filter:drop-shadow(0 1px 2px rgba(var(--scrim-rgb),.9)) drop-shadow(0 6px 26px rgba(var(--scrim-rgb),.75));
}
.band .band-wm.fx-drift .wm{opacity:var(--k,1);transform:translateY(calc((1 - var(--k,1)) * -26px))}
.band .band-wm.fx-blur .wm{opacity:var(--k,1);transform:scale(calc(.94 + .06 * var(--k,1)))}

/* the tagline as the logo sets it: classical serif capitals, widely spaced */
.tagline{
  font-family:var(--display);font-weight:400;
  font-size:clamp(10.5px,1.1vw,13px);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--argani-terracotta);
}
[data-world="nila"] .tagline{color:var(--argani-gold)}

.mono{
  font-family:var(--data);font-weight:400;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- 4. LAYOUT ---------- */

.wrap{width:min(100% - var(--gut)*2,var(--maxw));margin-inline:auto}
.wrap-narrow{width:min(100% - var(--gut)*2,860px);margin-inline:auto}
section{padding-block:var(--sec-y);position:relative}

/* ---------- 5. THE ENVIRONMENT LAYER ---------- */
/* one fixed background behind everything, so scrolling feels like
   moving through a place rather than past stacked sections */

.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 18% 12%,var(--env-a),transparent 62%),
    radial-gradient(62% 60% at 84% 78%,var(--env-b),transparent 66%);
  animation:envdrift 96s var(--ease-soft) -22s infinite alternate;
  will-change:transform;
}
@keyframes envdrift{
  from{transform:translate3d(-1.4%,-1%,0) scale(1.04)}
  to{transform:translate3d(1.6%,1.4%,0) scale(1.10)}
}
.grain{
  position:fixed;inset:-120px;z-index:1;pointer-events:none;opacity:.30;
  background-image:var(--grain-url);
  mix-blend-mode:var(--grain-blend,multiply);
}
[data-world="nila"] .grain{opacity:.20;--grain-blend:overlay}

main,.site-nav,.site-foot{position:relative;z-index:2}

/* ---------- 6. NAV ---------- */

.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding:clamp(12px,1.7vh,20px) var(--gut);
  transition:background var(--t-mid) var(--ease-soft),
             backdrop-filter var(--t-mid) var(--ease-soft),
             border-color var(--t-mid) var(--ease-soft);
  border-bottom:1px solid transparent;
}
.site-nav.solid{
  background:color-mix(in srgb,var(--canvas) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--hairline);
}
.nav-mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--nav-ink,var(--text-primary))}
.nav-mark .khatem{width:26px;height:26px;flex:none}
.nav-mark .wordmark{font-size:16px}
.nav-links{display:flex;align-items:baseline;gap:clamp(14px,2.4vw,30px)}
.nav-links a{
  font-size:11px;letter-spacing:.20em;text-transform:uppercase;
  text-decoration:none;color:var(--nav-ink,var(--text-secondary));
  padding-block:6px;
  border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease-soft),border-color var(--t-fast) var(--ease-soft);
}
.nav-links a:hover{color:var(--accent);border-bottom-color:var(--accent-muted)}
[data-world="nila"] .nav-links a:hover{color:var(--accent-hover)}

/* over the hero the nav sits on footage, so it borrows light ink + a shadow */
.site-nav:not(.solid){--nav-ink:#F3EADA;text-shadow:0 1px 10px rgba(var(--scrim-rgb),.85)}
.site-nav:not(.solid) .khatem{filter:drop-shadow(0 1px 8px rgba(var(--scrim-rgb),.8))}

@media (max-width:520px){ .nav-links a:not(.nav-cta){display:none} }

/* ---------- 7. THE KHATEM (signature element) ---------- */

/* The mark as the final logo draws it: rounded squares in terracotta, a gold
   drop. Each path carries pathLength="100", so a dash of 100 always covers the
   whole outline whatever its true length, and the draw-on can always finish. */
.khatem{overflow:visible;color:var(--k-line)}
.khatem .k-line{
  fill:none;stroke:var(--k-line);
  /* stroke-width stays in viewBox units on purpose. `vector-effect:
     non-scaling-stroke` would make stroke-dasharray measure in SCREEN pixels
     instead of user units, and the seal could never finish drawing. --kw is
     tuned per size below instead. */
  stroke-width:var(--kw,2.6);
  stroke-linejoin:round;stroke-linecap:round;
}
.khatem .k-drop{fill:var(--k-drop)}

/* the ghost: a faint complete mark under the drawn one, so a seal at rest is
   something the visitor can see and aim at rather than an empty gap */
.khatem .k-ghost{
  fill:none;stroke:var(--k-line);
  stroke-width:var(--kw,2.6);
  stroke-linejoin:round;
  opacity:.22;
}

/* over photography and film the mark takes the brand sheet's dark-ground
   colours: gold lines, a deeper gold drop */
.site-nav:not(.solid),.static-hero,.hero-still:not(.hs-no-img),.band,.s-story:not(.story-no-img){
  --k-line:var(--argani-gold);
  --k-drop:var(--argani-gold-deep);
}
.seal-btn.done .k-ghost{opacity:0;transition:opacity .5s var(--ease-soft)}

/* optical stroke weight per context, so a hairline reads at 22px and at 190px */
.nav-mark .khatem,.site-foot .khatem{--kw:4}
.rule-drop .kh{--kw:5}
.step-mark svg{--kw:3}
.static-hero .sh-khatem{--kw:3}
.s-cta .kh-big{--kw:2.4}
.thresh-mark .khatem{--kw:2.6}
.seal-btn .khatem{--kw:1.3}
.door .khatem{--kw:3.4}

/* self-drawing: --seal 0..1 drives dashoffset, the drop fades in last */
.khatem.draw .k-line{
  stroke-dasharray:var(--dash,200);
  stroke-dashoffset:calc(var(--dash,200) * (1 - var(--seal,0)));
}
.khatem.draw .k-drop{
  opacity:clamp(0,(var(--seal,0) - .62) * 3.4,1);
  transform:scale(calc(.72 + .28 * clamp(0,(var(--seal,0) - .62)*3.4,1)));
  transform-origin:50% 50%;
}

/* ---------- 8. BUTTONS ---------- */

.btn{
  display:inline-block;
  font-family:var(--body);font-weight:400;
  font-size:12px;letter-spacing:.20em;text-transform:uppercase;
  text-decoration:none;
  padding:15px 30px;
  border:1px solid var(--accent);
  background:var(--accent);color:var(--accent-ink);
  border-radius:var(--r-sm);
  transition:background var(--t-fast) var(--ease-soft),
             border-color var(--t-fast) var(--ease-soft),
             color var(--t-fast) var(--ease-soft),
             transform var(--t-fast) var(--ease-out);
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px)}
.btn-ghost{
  background:transparent;color:var(--text-primary);border-color:var(--hairline-strong);
}
.btn-ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent)}
[data-world="nila"] .btn-ghost:hover{color:var(--accent-hover)}

/* a shadowed button label reads as grime, so never inherit the band shadow */
.band .btn{text-shadow:none}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-links a{min-height:44px;display:inline-flex;align-items:center}
  .nav-mark{min-height:44px}                       /* already flex, so alignment holds */
}
/* the rest of the touch-target rules live at the very end of this file, after
   the section styles they have to beat. Declared here they lost the cascade to
   `.s-cta .mailto{padding-bottom:2px}` further down and silently did nothing. */

/* ---------- 9. THE HERO ---------- */

/* padding-block:0 is load-bearing. The hero is a <section>, so the global
   section padding pushed it down the page and left a band of bare canvas above
   the footage, under a nav that is transparent on purpose while over it. */
.hero{position:relative;height:700vh;padding-block:0}   /* scroll distance, not seconds */
.stage{
  position:sticky;top:0;height:100vh;
  overflow:hidden;
  background:var(--canvas);
}
.stage .layer{position:absolute;inset:0}

#hero-video{
  width:100%;height:100%;object-fit:cover;
  opacity:0;
  transition:opacity .7s var(--ease-soft);
  transform:translateZ(0);                     /* own compositor layer */
  will-change:transform;
}
.stage.video-ready #hero-video{opacity:1}
.stage.video-failed #hero-video{display:none}

.poster{
  background-size:cover;background-position:center;
  transform:scale(1.02);
}

/* 9a. global base scrim: no frame is ever raw behind the page */
.scrim{
  pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,
    rgba(var(--scrim-rgb),0) 34%,
    rgba(var(--scrim-rgb),.62) 100%);
}
/* a whisper of top darkening so the fixed nav always has something to sit on */
.scrim-top{
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(var(--scrim-rgb),.46),rgba(var(--scrim-rgb),0) 22%);
}

/* 9b. the loading ring */
.ring{
  position:absolute;left:50%;bottom:clamp(28px,6vh,56px);
  transform:translateX(-50%);
  width:44px;height:44px;color:rgba(243,234,218,.72);
  pointer-events:none;
}
.ring circle{transition:stroke-dashoffset .18s linear;transform:rotate(-90deg);transform-origin:50% 50%}
.stage.video-ready .ring{opacity:0;transition:opacity .5s var(--ease-soft)}
.chev{
  position:absolute;left:50%;bottom:clamp(28px,6vh,56px);transform:translateX(-50%);
  width:26px;height:26px;color:rgba(243,234,218,.7);pointer-events:none;
  animation:chev 2.6s var(--ease-soft) infinite;
}
@keyframes chev{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---------- 10. CAPTION BANDS ---------- */

.bands{position:absolute;inset:0;pointer-events:none}

.band{
  position:absolute;inset:0;
  display:grid;
  align-content:center;
  padding-inline:var(--gut);
  padding-block:clamp(84px,12vh,132px);
  opacity:0;
  color:#F6EFE2;
  text-shadow:var(--tshadow);
}
.band > *{position:relative;z-index:2}
.band .btn{pointer-events:auto}
.band a{pointer-events:auto}

/* the per-band scrim rides the band opacity and deepens with --k.
   --sx / --sy anchor the ellipse over THIS band's own column, so the
   centre action lane is never flattened. */
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;z-index:1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse var(--sw,74%) var(--sh,62%) at var(--sx,50%) var(--sy,50%),
    rgba(var(--scrim-rgb),var(--sa,.66)) 0%,
    rgba(var(--scrim-rgb),calc(var(--sa,.66)*.66)) 46%,
    rgba(var(--scrim-rgb),0) 76%);
}

/* band placement: keeps the action lane clear.
   max-width in PX, never ch. A ch cap here resolves against the body font while
   the display face inside is far wider, so a nowrap wordmark overflowed its
   column and, in a right-aligned band, ran clean off the screen edge. */
.band .col{max-width:min(100%,var(--colw,600px))}
/* the hero wordmark is a lockup, not a headline: sized so it never crosses the
   action lane the footage owns */
.band .t-mark{font-size:clamp(30px,5vw,62px)}
.band.pos-left{justify-items:start;text-align:left}
.band.pos-left{--sx:27%;--sw:58%}
.band.pos-right{justify-items:end;text-align:right}
.band.pos-right{--sx:73%;--sw:58%}
.band.pos-center{justify-items:center;text-align:center}
.band.pos-center{--sx:50%;--sw:80%}
.band.v-top{align-content:start;--sy:32%}
.band.v-top .col{margin-top:clamp(10px,7vh,74px)}

.band .b-eyebrow{
  font-size:11px;letter-spacing:.30em;text-transform:uppercase;
  color:rgba(246,239,226,.82);margin:0 0 14px;
}
.band .b-sub{
  margin:clamp(14px,2.2vh,24px) 0 0;
  font-size:clamp(16px,1.5vw,20px);line-height:1.55;
  color:rgba(246,239,226,.92);
  max-width:40ch;
}
.band.pos-right .b-sub{margin-left:auto}
.band.pos-center .b-sub{margin-inline:auto}
.band .b-cta{
  margin-top:clamp(20px,3.2vh,36px);
  display:flex;gap:14px;flex-wrap:wrap;
}
.band.pos-center .b-cta{justify-content:center}
.band.pos-right .b-cta{justify-content:flex-end}

/* on shorter scrub windows the columns need the full width */
@media (max-height:620px){
  .band{padding-block:64px}
  .band .b-sub{font-size:15px}
}

/* ---------- 11. TEXT CHOREOGRAPHY ---------- */
/* transform + opacity only, scrubbed off each band's --k, fully reversible */

.split{display:block}
.split .w{display:inline-block;white-space:nowrap}
.split .c{display:inline-block;will-change:transform,opacity}

/* (a) scatter,echoes pigment dispersing */
.fx-scatter .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}

/* (f) drift-down,echoes the fall */
.fx-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px));
}

/* (d) word-punch with overshoot,echoes an impact landing */
.fx-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.62 + (.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.fx-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}

/* (c) blur-to-sharp,echoes a surface clarifying. two stacked copies,
   crossfaded by opacity. the blur is STATIC; never animate filter. */
.fx-blur{position:relative;display:block}
.fx-blur .soft{
  position:absolute;inset:0;filter:blur(11px);
  opacity:calc(1 - var(--k,0));
  pointer-events:none;
}
.fx-blur .sharp{opacity:var(--k,0)}

/* (i) weave,echoes veils crossing */
.fx-weave .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.7,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*var(--jy,0px)));
}

/* (e) word-by-word rise into a staged settle,the ending entrance */
.fx-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px));
}
.stage-2{--ks:clamp(0,(var(--k,0) - .60)*3.6,1);opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*14px))}
.stage-3{--kb:clamp(0,(var(--k,0) - .76)*4.6,1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*12px))}

/* masked/clipped text needs descender room or g, y and p lose their tails */
.mask{overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}

/* ---------- 12. THE STATIC HERO (the five gates) ---------- */
/* MUST match the JS GATES array character for character */

.static-hero{display:none}

@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce),
       (max-width:760px) and (orientation:portrait){
  .hero{height:auto}
  .stage{position:relative;height:auto}
  .stage .layer:not(.static-layer){display:none}
  .bands{display:none}
  .ring,.chev{display:none}
  /* display lives ONLY here. declaring it in the block below would win the
     cascade and render the static hero on desktop as well as the scrub. */
  .static-hero{display:grid}
}

/* no script, no scrub: the composed still carries the hero rather than an
   empty stage whose poster and captions only the script can paint */
html:not(.js) .hero{height:auto}
html:not(.js) .stage{display:none}
html:not(.js) .static-hero{display:grid}
/* with no script there is no hold, so the seal stands closed and its record open */
html:not(.js) .khatem.draw{--seal:1}
html:not(.js) .seal-btn .khatem.draw .k-drop{opacity:1}
html:not(.js) .seal-btn .k-ghost{opacity:0}

.static-hero{
  position:relative;
  min-height:100vh;              /* fallback for browsers without svh */
  min-height:100svh;             /* fills the phone on the first screen after a scan */
  /* text sits high and the product stays visible below it, mirroring the
     desktop settle. Bottom-anchored text needed a .90 scrim down there, which
     buried the very thing the visitor is holding. */
  align-content:start;
  padding:var(--gut);
  padding-bottom:clamp(44px,9vh,88px);
  padding-top:clamp(104px,17vh,156px);
  background-size:cover;background-position:center;
  color:#F6EFE2;
  text-shadow:var(--tshadow);
  isolation:isolate;
}
.static-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(var(--scrim-rgb),.88) 0%,
    rgba(var(--scrim-rgb),.70) 38%,
    rgba(var(--scrim-rgb),.18) 72%,
    rgba(var(--scrim-rgb),.46) 100%);
}
.static-hero > *{position:relative;z-index:1}
.static-hero .sh-eyebrow{
  font-size:11px;letter-spacing:.30em;text-transform:uppercase;
  color:rgba(246,239,226,.86);margin:0 0 16px;
}
.static-hero h1{margin:0}
.static-hero .sh-sub{
  margin:18px 0 0;font-size:clamp(16px,4vw,19px);line-height:1.55;
  max-width:32ch;color:rgba(246,239,226,.94);
}
.static-hero .sh-cta{margin-top:28px}
.static-hero .btn{text-shadow:none}
.static-hero .sh-khatem{width:40px;height:40px;margin-bottom:20px;color:var(--gold-pale)}

/* the arrival: the mark draws, then the words come up under it */
.static-hero .sh-khatem,
.static-hero .sh-eyebrow,
.static-hero h1,
.static-hero .sh-sub,
.static-hero .sh-cta{
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
.js .static-hero .sh-khatem,
.js .static-hero .sh-eyebrow,
.js .static-hero h1,
.js .static-hero .sh-sub,
.js .static-hero .sh-cta{opacity:0;transform:translateY(16px)}
.static-hero.lit .sh-khatem {opacity:1;transform:none;transition-delay:.14s}
.static-hero.lit .sh-eyebrow{opacity:1;transform:none;transition-delay:.34s}
.static-hero.lit h1         {opacity:1;transform:none;transition-delay:.50s}
.static-hero.lit .sh-sub    {opacity:1;transform:none;transition-delay:.72s}
.static-hero.lit .sh-cta    {opacity:1;transform:none;transition-delay:.92s}

/* short scrub-capable windows: keep the scrub, drop the small overlays */
@media (max-height:560px){ .ring,.chev{display:none} }

/* ---------- 13. SECTIONS ---------- */
/* no two adjacent sections share a skeleton */

.rule-drop{display:flex;align-items:center;gap:14px;margin-block:clamp(40px,7vh,84px)}
.rule-drop .ln{flex:1;height:1px;background:var(--hairline)}
.rule-drop .kh{width:22px;height:22px;flex:none;color:var(--accent-muted)}

/* 13a. essence,a wide editorial split, image right */
.s-essence .grid{
  display:grid;gap:clamp(28px,5vw,72px);
  grid-template-columns:1fr;align-items:center;
}
@media (min-width:900px){ .s-essence .grid{grid-template-columns:1.05fr .95fr} }
.s-essence figure{margin:0;position:relative}
.s-essence img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-sm)}

/* 13b. ritual,three numbered steps, all equal, each with its own image */
.s-ritual .steps{
  display:grid;gap:clamp(22px,3vw,34px);
  grid-template-columns:1fr;
  margin-top:clamp(34px,5vh,58px);
}
@media (min-width:760px){ .s-ritual .steps{grid-template-columns:repeat(3,1fr)} }
.step{position:relative}
.step img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-sm);margin-bottom:20px}
/* the ritual steps are drawn, not photographed: a generated hand applying oil is
   exactly the anatomy AI gets wrong, and a line mark is lighter and more ARGANI */
.step-mark{
  margin-bottom:22px;padding-bottom:22px;
  border-bottom:1px solid var(--hairline);
  color:var(--accent-muted);
}
[data-world="oil"] .step-mark{color:var(--brown-khatem)}
.step-mark svg{display:block}
.step .n{
  font-family:var(--data);font-size:11px;letter-spacing:.20em;
  color:var(--accent);display:block;margin-bottom:9px;
}
[data-world="oil"] .step .n{color:var(--brown-khatem)}
.step h3{margin:0 0 9px;font-size:clamp(20px,2vw,26px)}
.step p{margin:0;color:var(--text-secondary);max-width:34ch;font-size:15.5px;line-height:1.66}
.s-ritual .foot{
  margin-top:clamp(26px,4vh,44px);padding-top:22px;
  border-top:1px solid var(--hairline);
  color:var(--text-secondary);font-size:15px;max-width:56ch;
}

/* 13c. story,a full-bleed image with the text inset, not a card */
.s-story{padding-block:0}
.s-story .band-img{
  position:relative;min-height:clamp(460px,74vh,720px);
  display:grid;align-content:end;
  padding:var(--gut);padding-block:clamp(52px,9vh,96px);
  color:#F6EFE2;text-shadow:var(--tshadow);isolation:isolate;
  overflow:hidden;
}
/* a real <img> rather than a CSS background, so it lazy-loads. As a background
   it was fetched on page load, and a phone on mobile data paid for a
   full-bleed photo it had not scrolled to yet. */
.s-story .band-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
}
.s-story .band-bg{height:100%}   /* beats the global img{height:auto} */
.s-story .band-img::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(var(--scrim-rgb),.88),rgba(var(--scrim-rgb),.30) 58%,rgba(var(--scrim-rgb),.46));
}
.s-story .band-img > .wrap{position:relative;z-index:2}
.s-story .kicker{color:rgba(246,239,226,.80)}
.s-story .para{color:rgba(246,239,226,.94);max-width:min(52ch,100%)}

/* the provenance matrix rides over the photograph here, so it takes the band's
   pale ink. The page tokens would put dark brown on a dark image in the oil world. */
.s-story .prov-row{border-color:rgba(246,239,226,.26)}
.s-story .prov-row dt{color:rgba(246,239,226,.72)}
.s-story .prov-row dd{color:#F6EFE2}

/* an essence with no image by design reads as a single measured column */
.s-essence .grid.no-fig{grid-template-columns:1fr}
.s-essence .grid.no-fig .para{max-width:min(62ch,100%)}

/* a story still waiting for its photograph composes on the panel, in page ink */
.s-story.story-no-img .band-img{color:var(--text-primary);text-shadow:none;background:var(--panel)}
.s-story.story-no-img .band-img::before{display:none}
.s-story.story-no-img .kicker{color:var(--accent)}
.s-story.story-no-img .para{color:var(--text-secondary)}
.s-story.story-no-img .prov-row{border-color:var(--hairline)}
.s-story.story-no-img .prov-row dt{color:var(--text-secondary)}
.s-story.story-no-img .prov-row dd{color:var(--text-primary)}

/* 13d. standard,the confidence move. type only, generous, centred. */
.s-standard{text-align:center}
.s-standard .para{margin-inline:auto;color:var(--text-secondary)}
.s-standard .frame{
  border:1px solid var(--hairline);
  padding:clamp(34px,6vw,76px) clamp(22px,5vw,64px);
  position:relative;
}
.s-standard .frame::before,.s-standard .frame::after{
  content:"";position:absolute;width:9px;height:9px;
  border:1px solid var(--accent-muted);transform:rotate(45deg);
  background:var(--canvas);
}
.s-standard .frame::before{top:-5px;left:-5px}
.s-standard .frame::after{bottom:-5px;right:-5px}

/* 13e. the seal,the one interactive moment */
.s-seal{text-align:center;overflow:hidden;overflow:clip}
.seal-lede{max-width:34em;margin:18px auto 0;color:var(--text-secondary)}
.seal-stage{
  position:relative;isolation:isolate;
  display:grid;justify-items:center;gap:clamp(20px,3vh,32px);
  margin-top:clamp(28px,4vh,46px);
}
/* the warmth a closed seal leaves: a soft pool of gold centred on the mark */
.seal-stage::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:calc(14px + clamp(132px,22vw,188px) / 2);
  width:min(620px,160vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,var(--seal-wash),transparent);
  opacity:0;
}
.sealed .seal-stage::before{animation:seal-wash 2.8s .1s var(--ease-out) both}
@keyframes seal-wash{0%{opacity:0}28%{opacity:1}100%{opacity:.5}}

/* ── the closing, staged off the one .sealed class ──
   0.00s  the mark swells and settles; a gold light runs once round each square
   0.12s  the drop falls into the centre, lands, and settles
   0.62s  two ripples leave it
   0.85s  the eight points glint in turn, clockwise from the top
   1.15s  the record unfolds (timed by the script), facts light one by one   */
.seal-btn .khatem{transform-origin:50% 50%}
.sealed .seal-btn .khatem{animation:k-bloom 1.3s var(--ease-out) both}
@keyframes k-bloom{0%{transform:scale(1)}30%{transform:scale(1.07)}100%{transform:scale(1)}}

.khatem .k-glint{
  fill:none;stroke:var(--k-glint);
  stroke-width:calc(var(--kw,2.6) * 1.35);
  stroke-linecap:round;
  stroke-dasharray:9 91;stroke-dashoffset:0;
  opacity:0;
}
.sealed .seal-btn .k-glint{animation:k-glint 1.3s .04s cubic-bezier(.45,.05,.3,1) both}
.sealed .seal-btn .k-glint + .k-glint{animation-delay:.2s}
@keyframes k-glint{0%{opacity:0;stroke-dashoffset:0}12%{opacity:1}80%{opacity:1}100%{opacity:0;stroke-dashoffset:-100}}

/* while the seal is held the drop waits; it arrives only when the seal closes */
.seal-btn .khatem.draw .k-drop{opacity:0;transform:none;transform-box:fill-box;transform-origin:50% 100%}
.sealed .seal-btn .khatem.draw .k-drop{opacity:1;animation:k-fall .95s .12s both}
@keyframes k-fall{
  0%  {opacity:0;transform:translateY(-78%) scale(.82,1.06);animation-timing-function:cubic-bezier(.55,0,.9,.45)}
  14% {opacity:1}
  50% {transform:translateY(0) scale(.94,1.07);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  63% {transform:translateY(0) scale(1.1,.88)}
  80% {transform:translateY(-4%) scale(.97,1.03)}
  100%{opacity:1;transform:none}
}

.seal-btn .k-ripples circle{
  fill:none;stroke:var(--k-glint);stroke-width:1;vector-effect:non-scaling-stroke;
  opacity:0;transform-box:fill-box;transform-origin:50% 50%;
}
.sealed .seal-btn .k-ripples circle{animation:k-ripple 1.7s .62s cubic-bezier(.2,.6,.35,1) both}
.sealed .seal-btn .k-ripples circle + circle{animation-delay:.92s}
@keyframes k-ripple{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(3.7)}}

.seal-btn .k-points circle{fill:var(--k-glint);opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.sealed .seal-btn .k-points circle{animation:k-point .9s calc(.85s + var(--i,0) * 70ms) var(--ease-out) both}
@keyframes k-point{0%{opacity:0;transform:scale(0)}35%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(.4)}}

/* ── the record: the provenance, sealed ──
   Collapsed to nothing until the seal closes (grid rows 0fr), then unfolds.
   Without the script it simply stands open. */
.seal-record{display:grid;grid-template-rows:1fr;width:min(100%,720px)}
.js .seal-record{grid-template-rows:0fr;transition:grid-template-rows 1s var(--ease-out)}
.js .seal-record.open{grid-template-rows:1fr}
.seal-record-in{min-height:0;overflow:hidden}
.record{
  margin:7px;                                     /* room for the outer rule */
  padding:clamp(28px,5vw,46px) clamp(20px,5vw,48px);
  border:1px solid var(--record-line);
  outline:1px solid var(--record-line);outline-offset:5px;   /* a double rule, as on a deed */
  background:var(--record-bg);
}
.record-kicker{
  display:flex;align-items:center;justify-content:center;gap:.8em;
  font-family:var(--data);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-secondary);
}
.record-kicker .wm{--wm-h:15px;color:var(--argani-terracotta)}
[data-world="nila"] .record-kicker .wm{color:var(--argani-gold)}
.record-name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,4.6vw,44px);line-height:1.08;margin-top:12px;
  text-wrap:balance;
}
.record .seal-facts{width:100%;margin:clamp(22px,3.4vh,32px) 0 0;padding:0}
.record .seal-facts li{text-align:center}
.record-tagline{
  font-family:var(--display);font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);margin-top:clamp(24px,3.6vh,34px);
  text-wrap:balance;
}
.record-act{margin-top:22px}
.record-tagline,.record-act{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js .record-tagline,.js .record-act{opacity:0;transform:translateY(8px)}
.js .seal-record.whole .record-tagline,.js .seal-record.whole .record-act{opacity:1;transform:none}
.seal-btn{
  -webkit-appearance:none;appearance:none;
  background:transparent;border:0;padding:14px;cursor:pointer;
  color:var(--accent-muted);
  touch-action:manipulation;
  border-radius:50%;
  transition:color var(--t-mid) var(--ease-soft);
}
.seal-btn .khatem{width:clamp(132px,22vw,188px);height:clamp(132px,22vw,188px)}
.seal-btn:hover{color:var(--accent)}
.seal-btn.done{color:var(--accent)}
.seal-hint{
  font-family:var(--data);font-size:11px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--text-secondary);min-height:1.4em;
}
.seal-btn.done + .seal-hint{color:var(--accent)}
[data-world="oil"] .seal-btn.done + .seal-hint{color:var(--brown-khatem)}

.seal-facts{
  display:grid;gap:14px;grid-template-columns:1fr;
  margin-top:clamp(26px,4vh,42px);width:min(100%,720px);
}
@media (min-width:720px){ .seal-facts{grid-template-columns:repeat(3,1fr)} }
.seal-facts li{
  list-style:none;
  border-top:1px solid var(--hairline);
  padding-top:16px;text-align:left;
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.js .seal-facts li{opacity:0;transform:translateY(10px)}
.seal-facts li.lit{opacity:1;transform:none}
.seal-facts .fk{display:block;font-family:var(--data);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:7px}
.seal-facts .fv{font-family:var(--display);font-size:clamp(19px,2vw,24px);line-height:1.24}

/* 13f. pairing,an offset two-up, deliberately not a card grid */
.s-pairing .pair{
  display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1fr;align-items:end;
}
@media (min-width:860px){ .s-pairing .pair{grid-template-columns:.85fr 1.15fr} }
.s-pairing img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-sm)}
.s-pairing .pair-copy{padding-bottom:clamp(0px,3vh,26px)}

/* 13g. care,the apothecary data panel */
.s-care .care-grid{
  display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1fr;
}
@media (min-width:880px){ .s-care .care-grid{grid-template-columns:1fr 1fr} }
.data-panel{
  border:1px solid var(--hairline);
  background:color-mix(in srgb,var(--panel) 62%,transparent);
  padding:clamp(22px,3.4vw,34px);
}
.data-panel dl{margin:0;display:grid;gap:0}
.data-panel .row{
  display:grid;gap:6px;
  padding-block:15px;
  border-bottom:1px solid var(--hairline);
}
.data-panel .row:last-child{border-bottom:0;padding-bottom:0}
.data-panel dt{
  font-family:var(--data);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-secondary);
}
.data-panel dd{margin:0;font-size:15.5px;line-height:1.5}

.safety{
  margin-top:clamp(22px,3vh,32px);
  border-left:2px solid var(--accent-muted);
  padding:4px 0 4px 18px;
  color:var(--text-secondary);font-size:15px;max-width:52ch;
}
.safety strong{color:var(--text-primary);font-weight:400}

/* the placeholder marker: impossible to ship by accident */
.todo{
  display:inline-block;
  font-family:var(--data);font-size:11px;letter-spacing:.06em;text-transform:none;
  background:#FFE9A8;color:#5A3E00;
  border:1px dashed #B08900;
  padding:3px 9px;border-radius:var(--r-sm);
  text-shadow:none;
}

/* 13h. the call to action */
.s-cta{text-align:center}
.s-cta .frame{
  border:1px solid var(--hairline);
  padding:clamp(38px,7vw,86px) clamp(22px,5vw,64px);
  position:relative;
}
.s-cta .kh-big{width:clamp(46px,7vw,62px);height:clamp(46px,7vw,62px);
  margin:0 auto clamp(20px,3vh,30px);color:var(--accent-muted)}
.s-cta .para{margin-inline:auto;color:var(--text-secondary)}
.s-cta .cta-row{
  margin-top:clamp(26px,4vh,40px);
  display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center;
}
.s-cta .mailto{
  font-size:13px;letter-spacing:.06em;color:var(--text-secondary);
  text-decoration:none;border-bottom:1px solid var(--hairline-strong);padding-bottom:2px;
  transition:color var(--t-fast) var(--ease-soft),border-color var(--t-fast) var(--ease-soft);
}
.s-cta .mailto:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- 14. FOOTER ---------- */

.site-foot{
  border-top:1px solid var(--hairline);
  padding-block:clamp(40px,6vh,64px);
  font-size:14px;color:var(--text-secondary);
}
.site-foot .foot-grid{
  display:grid;gap:clamp(24px,4vw,48px);grid-template-columns:1fr;align-items:start;
}
@media (min-width:760px){ .site-foot .foot-grid{grid-template-columns:1.1fr .9fr;align-items:center} }
.site-foot .f-mark{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.site-foot .f-mark .khatem{width:28px;height:28px;color:var(--accent-muted)}
.site-foot .f-mark .wordmark{font-size:17px;color:var(--text-primary)}
.site-foot .f-line{margin:0 0 6px}
.site-foot .f-cross{
  justify-self:start;
}
@media (min-width:760px){ .site-foot .f-cross{justify-self:end;text-align:right} }
.site-foot a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--hairline);
  transition:border-color var(--t-fast) var(--ease-soft)}
.site-foot a:hover{border-color:var(--accent)}
.site-foot .f-social{margin-top:14px}
.site-foot .f-handle{color:var(--accent)}
.thresh-social{
  display:inline-block;margin-top:10px;color:var(--accent);text-decoration:none;
  letter-spacing:.04em;border-bottom:1px solid var(--accent-muted);padding-bottom:2px;
}
@media (pointer:coarse){ .thresh-social{padding-block:10px} }

/* ---------- 15. ENTRANCES ---------- */
/* start AND end states both prefixed with the container class so a later
   rule cannot silently cancel them */

/* every hidden starting state requires .js, which the script sets on arrival:
   a host that blocks the script must still show a complete, readable page */
.js .rv .part{opacity:0;transform:translateY(20px)}
.rv.in .part{
  opacity:1;transform:none;
  transition:opacity .78s var(--ease-out),transform .78s var(--ease-out);
}
.rv.in .part:nth-child(2){transition-delay:.09s}
.rv.in .part:nth-child(3){transition-delay:.18s}
.rv.in .part:nth-child(4){transition-delay:.27s}
.rv.in .part:nth-child(5){transition-delay:.36s}

/* retire the stagger once the entrance is done, or every later hover lags
   forever. the selector must match the specificity of the delay rules above. */
.rv.in.settled .part:nth-child(2),
.rv.in.settled .part:nth-child(3),
.rv.in.settled .part:nth-child(4),
.rv.in.settled .part:nth-child(5),
.rv.in.settled .part{transition-delay:0s !important}

/* self-drawing rules and khatems on entry */
/* hidden states first, reveals after: equal specificity, so order decides */
.js .draw-in .k-line{stroke-dasharray:var(--dash,200);stroke-dashoffset:var(--dash,200)}
.js .draw-in .k-drop{opacity:0}
.draw-in.in .k-line{stroke-dasharray:var(--dash,200);stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--ease-out)}
.draw-in.in .k-drop{opacity:1;transition:opacity .6s var(--ease-soft) .9s}

.ln-draw{transform-origin:left center}
.js .ln-draw{transform:scaleX(0)}
.ln-draw.in{transform:scaleX(1);transition:transform 1.15s var(--ease-out)}

/* ---------- 16. PARTICLES (whisper level) ---------- */

.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.mote{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--mote);opacity:0;
}
.vis .mote{animation:moteDrift var(--md,26s) linear var(--mdl,-8s) infinite}
@keyframes moteDrift{
  0%{opacity:0;transform:translate3d(0,0,0)}
  12%{opacity:.85}
  88%{opacity:.7}
  100%{opacity:0;transform:translate3d(var(--mx,10px),calc(var(--mote-dir) * var(--my,120px)),0)}
}

/* one living element per section, mid-cycle at first paint via negative delay */
.glow{position:relative}
.glow::after{
  content:"";position:absolute;inset:-14%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at center,var(--accent-muted),transparent 68%);
  opacity:0;
}
.vis .glow::after{animation:glowPulse 8.5s var(--ease-soft) -3.1s infinite}
@keyframes glowPulse{0%,100%{opacity:.10}50%{opacity:.26}}

/* pause everything on hidden tabs. animation-play-state does not inherit,
   so it must hit every element and pseudo-element directly. */
body.paused *,
body.paused *::before,
body.paused *::after{animation-play-state:paused !important}

/* ---------- 13a. THE STILL HERO ----------
   Six of the nine pages carry no film. This is not the scrub's fallback, it is
   the composed opening for a page that was never going to have one, so it gets
   its own weight: full height, the mark drawn on arrival, the words settled. */

.hero-still{
  position:relative;min-height:100svh;
  display:grid;align-items:end;
  /* an auto-sized implicit column resolves to max-content, and a child with
     width:100% then sizes the column instead of the column sizing the child.
     On a phone that blew the section out to 650px. minmax(0,1fr) pins it. */
  grid-template-columns:minmax(0,1fr);
  background-size:cover;background-position:50% 50%;
  isolation:isolate;
  text-align:left;
}
.hero-still::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top,
    rgba(var(--scrim-rgb),.80) 0%,
    rgba(var(--scrim-rgb),.42) 42%,
    rgba(var(--scrim-rgb),.10) 74%,
    rgba(var(--scrim-rgb),.30) 100%);
}
.hero-still .hs-inner{
  position:relative;z-index:1;
  padding:var(--gut);
  padding-bottom:clamp(56px,10vh,120px);
  max-width:var(--maxw);margin-inline:auto;width:100%;
  color:#F6EFE2;text-shadow:var(--tshadow);
}
/* words in the upper wall, the subject free below; the scrim follows the words */
.hero-still.hs-top{align-items:start}
.hero-still.hs-top .hs-inner{padding-top:clamp(84px,11vh,128px);padding-bottom:var(--gut)}
.hero-still.hs-top::before{
  background:linear-gradient(to bottom,
    rgba(var(--scrim-rgb),.78) 0%,
    rgba(var(--scrim-rgb),.46) 38%,
    rgba(var(--scrim-rgb),.06) 66%,
    rgba(var(--scrim-rgb),.22) 100%);
}
.hero-still .hs-khatem{
  width:clamp(38px,5vw,48px);height:clamp(38px,5vw,48px);
  color:var(--gold-pale);display:block;margin-bottom:clamp(18px,2.6vh,26px);
}
.hero-still .hs-eyebrow{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-pale);margin:0 0 14px;
}
.hero-still .t-hero{margin:0;color:#F6EFE2}
.hero-still .hs-sub{
  margin:clamp(16px,2.4vh,22px) 0 0;
  /* a bare ch cap resolves wider than a phone, so it has to yield to the box */
  max-width:min(44ch,100%);
  font-size:clamp(16px,2vw,19px);line-height:1.6;color:rgba(246,239,226,.88);
}
.hero-still .hs-tagline{
  margin:clamp(20px,3vh,28px) 0 0;
  font-family:var(--display);font-weight:400;
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(201,178,122,.92);
}
.hero-still .hs-cta{margin-top:clamp(26px,4vh,38px)}
.hero-still .btn{text-shadow:none}

/* an image the catalogue has not been given yet: the page still composes, and
   the hole is loud enough that it cannot be missed in review */
.hero-still.hs-no-img{
  background:var(--panel);border-bottom:1px dashed var(--hairline-strong);
}
.hero-still.hs-no-img::before{opacity:.14}
.hero-still.hs-no-img .hs-inner{color:var(--text-primary);text-shadow:none}
.hero-still.hs-no-img .t-hero{color:var(--text-primary)}
.hero-still.hs-no-img .hs-sub{color:var(--text-secondary)}
.hero-still.hs-no-img .hs-tagline{color:var(--accent)}
.hero-still.hs-no-img .hs-eyebrow{color:var(--argani-terracotta)}
/* the transparent nav wears pale ink for a dark photograph; over a hero still
   waiting for its photograph that ink vanishes, so it takes page ink instead */
body:has(.hero-still.hs-no-img) .site-nav:not(.solid){--nav-ink:var(--text-primary);text-shadow:none}
body:has(.hero-still.hs-no-img) .site-nav:not(.solid) .khatem{filter:none}
/* clears the fixed nav rather than sitting under it */
.hs-pending{
  position:absolute;z-index:2;top:clamp(76px,11vh,120px);
  left:var(--gut);right:var(--gut);
  max-width:var(--maxw);margin-inline:auto;
}

/* ---------- 13b. THE RITUAL PATHWAYS ----------
   One oil, three places it goes. The tabs switch the steps in place so that
   "The ritual" always lands on something the reader can do (§76), and the
   three pathways read as one system rather than three instruction sets. */

.ritual-principle{
  margin-top:20px;max-width:62ch;color:var(--text-secondary);
}

.path-tabs{
  display:flex;flex-wrap:wrap;gap:clamp(6px,1.6vw,14px);
  margin-top:clamp(34px,5vh,54px);
  border-bottom:1px solid var(--hairline);
}
.path-tab{
  appearance:none;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-size:12px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);
  padding:14px clamp(10px,2.2vw,20px);
  position:relative;
  transition:color var(--t-fast) var(--ease-soft);
}
.path-tab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:50% 50%;
  transition:transform var(--t-mid) var(--ease-out);
}
.path-tab:hover{color:var(--text-primary)}
.path-tab.is-on{color:var(--accent)}
.path-tab.is-on::after{transform:scaleX(1)}

.path-panel{padding-top:clamp(26px,4vh,44px)}
.path-panel[hidden]{display:none}
.path-lead{
  font-family:var(--display);font-weight:300;
  font-size:clamp(21px,3vw,30px);line-height:1.28;
  color:var(--text-primary);margin:0 0 clamp(24px,3.4vh,38px);
}

/* ---------- 13c. THE FORM CHAIN ----------
   Stone, then powder, then paste. The badge is load-bearing: it is what keeps
   teaching the transformation from reading as selling the powder (§44). */

.s-forms{padding-block:var(--sec-y)}
.form-chain{
  list-style:none;margin:clamp(34px,5vh,54px) 0 0;padding:0;
  display:grid;gap:clamp(14px,2.2vw,22px);
  grid-template-columns:1fr;
  counter-reset:form;
}
@media (min-width:720px){ .form-chain{grid-template-columns:repeat(3,1fr)} }

.form-link{
  border:1px solid var(--hairline);
  padding:clamp(22px,2.8vw,30px);
  position:relative;
  background:color-mix(in srgb,var(--panel) 42%,transparent);
}
.form-link.is-sold{
  border-color:var(--accent-muted);
  background:color-mix(in srgb,var(--panel) 82%,transparent);
}
.form-badge{
  display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:14px;
}
.form-link.is-sold .form-badge{color:var(--accent)}
.form-link h3{
  font-family:var(--display);font-weight:300;
  font-size:clamp(23px,2.8vw,30px);margin:0 0 10px;color:var(--text-primary);
}
.form-link p{margin:0;color:var(--text-secondary);font-size:15.5px;line-height:1.62}

/* the arrow between links, drawn rather than typed */
@media (min-width:720px){
  .form-link + .form-link::before{
    content:"";position:absolute;left:calc(-1 * clamp(14px,2.2vw,22px) - 1px);
    top:clamp(30px,3.6vw,40px);width:clamp(14px,2.2vw,22px);height:1px;
    background:var(--hairline-strong);
  }
}

/* ---------- 13d. AUTHENTICITY ----------
   Connoisseurship, not fear (§50). The qualifier is not fine print: it is given
   the same weight as the observations, because that is the honest hierarchy. */

.s-auth{padding-block:var(--sec-y)}
/* two or three observations, and never a lone orphan on its own row */
.obs-grid{
  display:grid;gap:clamp(20px,3vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  margin-top:clamp(30px,4.4vh,46px);
}

.obs{
  border-top:1px solid var(--hairline-strong);
  padding-top:clamp(18px,2.4vh,24px);
}
.obs h3{
  font-family:var(--body);font-size:12px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px;
}
.obs p{margin:0;color:var(--text-secondary);font-size:16px;line-height:1.68}

.qualifier{
  margin-top:clamp(30px,4.4vh,46px);
  padding-left:clamp(16px,2.4vw,22px);
  border-left:1px solid var(--accent-muted);
  color:var(--text-primary);font-size:16.5px;line-height:1.7;max-width:58ch;
}

/* ---------- 13e. THE PROVENANCE MATRIX ----------
   Six stages kept apart (§64). Origin is not sourcing is not milling, and a
   single "Made in Morocco" line throws away the only part worth printing. */

.prov{
  margin:clamp(30px,4.4vh,44px) 0 0;
  display:grid;gap:0;max-width:46ch;
}
.prov-row{
  display:grid;grid-template-columns:minmax(84px,26%) 1fr;
  gap:clamp(12px,2.4vw,22px);
  padding:13px 0;border-top:1px solid var(--hairline);
}
.prov-row:last-child{border-bottom:1px solid var(--hairline)}
.prov-row dt{
  font-family:var(--data);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-secondary);
}
.prov-row dd{margin:0;font-size:15.5px;color:var(--text-primary)}

/* ---------- 13f. THE PAIRING GATEWAY ----------
   §38. Not a cross-sell. The whole block is the door, and the veil retracts
   like something being drawn out of the image as the visitor commits to it. */

.pair-gate{display:grid;text-decoration:none;color:inherit}
.pair-gate figure{position:relative;overflow:hidden}
.pair-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(var(--scrim-rgb),.42) 0%,
    rgba(var(--scrim-rgb),.16) 46%,
    rgba(var(--scrim-rgb),0) 100%);
  transform:translateY(0);
  transition:transform var(--t-slow) var(--ease-out),opacity var(--t-slow) var(--ease-out);
}
/* the veil lifts when the gateway arrives, not on hover: a phone has no hover,
   and on the page that matters most (the QR visit) the reveal must still play */
.pair-gate.in .pair-veil{transform:translateY(-100%);opacity:0;transition-delay:1.05s}
.pair-gate img{transition:transform var(--t-slow) var(--ease-out)}
.pair-gate:hover img,.pair-gate:focus-visible img{transform:scale(1.022)}

/* the pour: a thin line that descends into the image as the gateway arrives.
   One material drawn from another. It is also the element that carries the
   movement across to the next page (see 13m). */
.pair-media{position:relative;padding-top:clamp(44px,8vh,92px)}
.pour{
  position:absolute;left:50%;top:0;z-index:2;
  width:2px;margin-left:-1px;
  height:calc(clamp(44px,8vh,92px) + 34%);
  background:linear-gradient(to bottom,
    rgba(var(--pour-rgb,196,142,132),0) 0%,
    rgba(var(--pour-rgb,196,142,132),.9) 34%,
    rgba(var(--pour-rgb,196,142,132),1) 100%);
  transform-origin:50% 0;
  transition:transform 1.5s var(--ease-out) .25s;
  pointer-events:none;
}
.pour::after{
  content:"";position:absolute;left:50%;bottom:-4px;width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;background:rgba(var(--pour-rgb,196,142,132),1);
  transition:opacity .5s var(--ease-soft) 1.55s;
}
.js .pour{transform:scaleY(0)}
.js .pour::after{opacity:0}
.pair-gate.in .pour{transform:scaleY(1)}
.pair-gate.in .pour::after{opacity:1}

.pair-copy .go{
  display:inline-block;margin-top:4px;
  font-size:11px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--accent);
  border-bottom:1px solid var(--accent-muted);padding-bottom:3px;
  transition:border-color var(--t-fast) var(--ease-soft);
}
.pair-gate:hover .pair-copy .go{border-color:var(--accent)}

/* an image the catalogue has not been given yet, so the hole is visible in
   development and the strict build refuses to ship it */
.img-pending{
  display:grid;place-items:center;text-align:center;
  aspect-ratio:4/5;border:1px dashed var(--hairline-strong);
  padding:clamp(20px,4vw,40px);
}

/* ---------- 13j. THE MAISON HOME ----------
   Was a threshold with two doors. It is now the entrance to a house holding
   eight destinations, so it carries a hierarchy: the two products the packaging
   points at lead on imagery, and the rest sit in a quieter shelf below. */

.thresh{min-height:100svh;display:grid;align-content:center;padding-block:clamp(56px,10vh,110px)}
.thresh-mark{display:grid;justify-items:center;text-align:center}
/* the lockup keeps the logo's proportions: the mark is nearly as wide as the
   wordmark beneath it, not a small ornament above it */
.thresh-mark .khatem{width:clamp(96px,13vw,150px);height:clamp(96px,13vw,150px)}
.thresh-mark .wordmark{font-size:clamp(38px,7.4vw,72px);margin-top:clamp(20px,3vh,30px)}
/* the gold rule between wordmark and tagline, exactly as in the logo lockup */
.thresh-rule{width:min(300px,62%);height:1px;background:var(--argani-gold);margin:clamp(18px,2.6vh,26px) auto}
.thresh-foot{margin-top:clamp(46px,7vh,80px);text-align:center;color:var(--text-secondary);font-size:14px}

.doors{
  display:grid;gap:clamp(16px,2.6vw,26px);grid-template-columns:1fr;
  margin-top:clamp(46px,7vh,84px);
}
@media (min-width:760px){ .doors{grid-template-columns:1fr 1fr} }
.door{
  display:block;text-decoration:none;color:inherit;position:relative;
  border:1px solid var(--hairline);
  padding:clamp(24px,3.4vw,36px);
  overflow:hidden;
  transition:border-color var(--t-mid) var(--ease-soft),transform var(--t-mid) var(--ease-out);
}
.door:hover{border-color:var(--accent-muted);transform:translateY(-3px)}
/* the card's picture: the still, with its film laid exactly over it once the
   film has a frame to show */
.door-media{
  position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-sm);
  margin-bottom:clamp(18px,2.6vh,26px);
  background:var(--panel);
}
.door-media img,.door-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 68%;
}
.door-media.has-film img,.door-media.has-film video{object-position:50% 50%}

/* any scrubbed film card (home doors, the rose water gateway): the film sits
   exactly over its first-frame still and shows only once it has a frame */
.film-card{position:relative;overflow:hidden}
.film-card img,.film-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-card video{opacity:0;transition:opacity .5s var(--ease-soft)}
.film-card.film-on video{opacity:1}
/* the pour films are tall (9:16); a 2:3 frame keeps the bottle and the bowl */
.pair-frame{aspect-ratio:2/3;border-radius:var(--r-sm);background:var(--panel)}
.pair-film .pair-media{padding-top:0}
.pair-film .pair-frame img,.pair-film .pair-frame video{transition:transform 1.4s var(--ease-out),opacity .5s var(--ease-soft)}
@media (hover:hover){ .pair-film:hover .pair-frame img,.pair-film:hover .pair-frame video{transform:scale(1.03)} }

/* a still hero's loop: under the scrim, over the poster, once it plays */
.hs-film{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease-soft)}
.hero-still.film-on .hs-film{opacity:1}
/* a slow settle as the card arrives, and a breath on hover where there is one */
.door-media img,.door-media video{transform:scale(1.001);transition:transform 1.6s var(--ease-out),opacity .5s var(--ease-soft)}
.js .doors:not(.in) .door-media img,.js .doors:not(.in) .door-media video{transform:scale(1.07)}
@media (hover:hover){ .door:hover .door-media img,.door:hover .door-media video{transform:scale(1.035)} }
.door .kicker{margin-bottom:9px}
.door h2{font-size:clamp(25px,3vw,36px)}
.door p{margin:12px 0 0;color:var(--text-secondary);font-size:15.5px;max-width:34ch}
.door .go{
  display:inline-block;margin-top:20px;font-size:11px;letter-spacing:.20em;
  text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--accent-muted);padding-bottom:3px;
}

/* the shelf: the six other destinations, each with its own picture. On a phone
   a row (picture left, words right) keeps the house index short enough to take
   in; from tablet up, picture over words in a quiet three-column grid. */
.shelf{margin-top:clamp(56px,9vh,104px)}
.shelf-kicker{text-align:center;margin-bottom:12px}
.shelf-title{
  font-family:var(--display);font-weight:300;text-align:center;text-wrap:balance;
  font-size:clamp(34px,5.4vw,60px);line-height:1.06;margin:0;color:var(--text-primary);
}
.shelf-sub{text-align:center;color:var(--text-secondary);max-width:40em;margin:14px auto 0;text-wrap:balance}
.shelf-cat{margin-top:clamp(40px,6vh,64px)}
.shelf-cat-title{
  font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,32px);margin:0;
  color:var(--argani-terracotta);text-align:center;
}
.shelf-cat-sub{margin:6px auto clamp(18px,3vh,26px);text-align:center;color:var(--text-secondary);font-size:14.5px}
.shelf-cat .shelf-grid{max-width:900px;margin-inline:auto}
@media (min-width:620px){ .shelf-cat .shelf-grid{grid-template-columns:1fr 1fr} }
/* the "how to use" chips were too quiet to read: now set as small pills in
   the page's own accent, on its own panel colour */
.mem-uses li,.set-uses{
  font-family:var(--body);font-size:13px;letter-spacing:.02em;
  color:var(--accent);background:var(--panel);
  border:1px solid var(--hairline-strong);border-radius:999px;padding:5px 12px;
}
.mem-uses{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.set-uses{display:inline-block;margin-top:10px}
/* a pathway may show the result beside its steps (Argan, Body: the skin after) */
.path-fig{margin:0 0 clamp(22px,3vh,32px)}
.path-fig img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-sm)}
@media (min-width:900px){
  .path-body.has-fig{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,64px);align-items:start}
  .path-body.has-fig .path-fig{margin:0;position:sticky;top:96px}
}
/* "Begin with water": the pairing before the footer gets its own ground */
.s-pairing{background:var(--panel);border-block:1px solid var(--hairline)}
.shelf-grid{
  display:grid;gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);
  grid-template-columns:1fr;
}
@media (min-width:620px){ .shelf-grid{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .shelf-grid{grid-template-columns:repeat(3,1fr)} }

.shelf-item{
  display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr);gap:18px;align-items:center;
  text-decoration:none;color:inherit;
  background:var(--canvas);
  padding:clamp(16px,2.8vw,30px);
  transition:background var(--t-mid) var(--ease-soft);
}
@media (min-width:620px){ .shelf-item{grid-template-columns:1fr;align-items:start;align-content:start;gap:20px} }
.shelf-item:hover{background:var(--panel)}
.shelf-img{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-sm);background:var(--panel)}
.shelf-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.8s var(--ease-out)}
.shelf-img .img-pending{position:absolute;inset:0;aspect-ratio:auto;display:grid;place-items:center;padding:8px;font-size:10px}
@media (min-width:620px){ .shelf-img{aspect-ratio:5/4} }
/* subtle motion: each picture settles as the shelf arrives and breathes under
   the pointer. Tea and Herbals is marked still and never moves. */
.js .shelf:not(.in) .shelf-item:not([data-still]) .shelf-img img{transform:scale(1.08)}
@media (hover:hover){ .shelf-item:not([data-still]):hover .shelf-img img{transform:scale(1.04)} }
.shelf-item[data-still] .shelf-img img{transition:none}
.shelf-copy{display:block;min-width:0}
.shelf-copy .kicker{margin:0}
.shelf-name{
  display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(21px,2.6vw,29px);line-height:1.15;margin:6px 0 0;color:var(--text-primary);
  text-wrap:balance;
}
.shelf-benefit{
  display:block;margin:8px 0 0;color:var(--text-secondary);font-size:14px;line-height:1.55;
}

/* ---------- 13h. GROUPED PAGES ----------
   A page holding two or three products has to earn the grouping before it
   introduces anything, and then give each member its own identity (§39). The
   members alternate sides so no two neighbours share a skeleton. */

.s-premise{padding-block:var(--sec-y)}

.s-members{padding-block:var(--sec-y)}
.mem{
  display:grid;gap:clamp(24px,4vw,58px);
  grid-template-columns:1fr;
  align-items:center;
  padding-block:clamp(36px,6vh,72px);
  border-top:1px solid var(--hairline);
}
.mem:first-child{border-top:0;padding-top:0}
@media (min-width:860px){
  .mem{grid-template-columns:0.85fr 1fr}
  .mem-flip .mem-img{order:2}
}
.mem-img{margin:0}
.mem-img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-sm);display:block}
.mem-lead{
  font-family:var(--display);font-weight:300;
  font-size:clamp(20px,2.6vw,27px);line-height:1.3;
  color:var(--text-primary);margin:14px 0 18px;
}
.mem-copy .kicker{min-height:1em}

.mem-uses{
  list-style:none;margin:22px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.mem-uses li{
  font-family:var(--data);font-size:11px;letter-spacing:.08em;
  color:var(--text-secondary);
  border:1px solid var(--hairline);padding:7px 11px;
}

/* ---------- 13i. TEA AND HERBALS ----------
   Flowers and infusions, related editorially rather than forced into a
   taxonomy (§59). This page carries no motion by instruction. */

.s-sets{padding-block:var(--sec-y)}
.set + .set{margin-top:clamp(52px,9vh,104px)}
.set-head{max-width:60ch}
.set-lead{margin:12px 0 0;color:var(--text-secondary);font-size:16px}

.set-grid{
  list-style:none;margin:clamp(28px,4.4vh,44px) 0 0;padding:0;
  display:grid;gap:clamp(18px,2.6vw,26px);
  grid-template-columns:1fr;
}
@media (min-width:640px){ .set-grid{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .set-grid{grid-template-columns:repeat(3,1fr)} }

.set-item{
  border-top:1px solid var(--hairline-strong);
  padding-top:clamp(16px,2.2vh,22px);
}
.set-item h4{
  font-family:var(--display);font-weight:300;
  font-size:clamp(22px,2.6vw,28px);margin:0 0 10px;color:var(--text-primary);
}
.set-item p{margin:0;color:var(--text-secondary);font-size:15.5px;line-height:1.62}
.set-item .set-uses{
  margin-top:14px;font-size:10.5px;letter-spacing:.12em;line-height:1.6;
  text-transform:uppercase;color:var(--accent);
}

/* ---------- 13k. THE INGREDIENT IN DEPTH ----------
   Three numbered chapters. A different skeleton from the essence above it, so
   the two neighbours never read as the same template stamped twice. */

.s-chapters{padding-block:0 var(--sec-y)}
.ch-head{max-width:min(24ch,100%)}
.chapters{
  list-style:none;margin:clamp(34px,5vh,56px) 0 0;padding:0;
  display:grid;gap:clamp(28px,4vw,48px);
  grid-template-columns:1fr;
}
@media (min-width:820px){ .chapters{grid-template-columns:repeat(3,1fr)} }
.chapter{border-top:1px solid var(--hairline-strong);padding-top:clamp(18px,2.6vh,26px)}
.ch-n{
  display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(30px,3.6vw,42px);line-height:1;color:var(--accent-muted);
  margin-bottom:14px;
}
.chapter h3{
  font-family:var(--body);font-size:12px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 12px;
}
.chapter p{margin:0;color:var(--text-secondary);font-size:16px;line-height:1.72}

/* ---------- 13l. SMALL PIECES ---------- */

/* the one line under a pathway that is advice rather than a step */
.path-note{
  margin:clamp(22px,3vh,30px) 0 0;padding-left:16px;
  border-left:1px solid var(--accent-muted);
  color:var(--text-primary);font-size:15.5px;
}

/* where one page names another product, the name is the way there */
.xlink{
  color:inherit;text-decoration:none;
  border-bottom:1px solid var(--accent-muted);
  transition:border-color var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft);
}
.xlink:hover,.xlink:focus-visible{border-color:var(--accent);color:var(--text-primary)}
.s-story .xlink{border-color:rgba(246,239,226,.45)}
.s-story .xlink:hover{border-color:#F6EFE2;color:#F6EFE2}

/* scoped under .set-item: the general `.set-item p` rule is more specific than
   a bare class and was blowing these up to 15.5px heavy capitals */
.set-item .set-origin{
  margin:-4px 0 10px;font-size:10.5px;letter-spacing:.14em;line-height:1.5;
  text-transform:uppercase;color:var(--text-secondary);
}

/* ---------- 13m. CONTINUITY BETWEEN PAGES ----------
   §40. The pour on the Argan Oil pairing and the pour at the top of the waters
   page share one view-transition name, so a supporting browser carries the line
   across the page change instead of cutting. Elsewhere the destination's line
   simply draws in on arrival, which reads as the same movement continuing. */

@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .pour-vt{view-transition-name:argani-pour}
  ::view-transition-group(argani-pour){animation-duration:.7s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
  /* a home card's film grows into the product's hero: both pictures keep their
     own proportions and crop to the moving frame instead of stretching */
  ::view-transition-group(argani-door){animation-duration:.8s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  ::view-transition-old(argani-door),::view-transition-new(argani-door){height:100%;object-fit:cover;overflow:hidden}
}

.hs-pour{
  --pour-rgb:196,142,132;
  height:clamp(120px,26vh,260px);top:0;
  animation:pourIn 1.6s var(--ease-out) .15s both;
}
.hs-pour::after{opacity:1;animation:dropIn .5s var(--ease-soft) 1.55s both}
@keyframes pourIn{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes dropIn{from{opacity:0}to{opacity:1}}

/* ---------- 13n. TO ORDER ----------
   Room reserved for packaging, sizes and prices, none of which is known yet and
   all of which belong to Shopify. One piece reads as a composed pair; several
   read as a row of equals. */

.s-buy{padding-block:var(--sec-y) 0}
.buy-grid{
  display:grid;gap:clamp(18px,2.6vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
  margin-top:clamp(28px,4.4vh,44px);
}
.buy-grid.is-single{grid-template-columns:1fr}
@media (min-width:760px){
  .buy-grid.is-single .buy-item{grid-template-columns:.8fr 1fr;align-items:center}
}
.buy-item{
  display:grid;gap:clamp(16px,2.4vw,26px);
  border:1px solid var(--hairline);padding:clamp(18px,2.4vw,26px);
  background:color-mix(in srgb,var(--panel) 38%,transparent);
}
.buy-img{margin:0}
.buy-img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-sm);display:block}
.buy-mark{
  display:grid;place-items:center;aspect-ratio:4/5;
  background:var(--panel);border-radius:var(--r-sm);
}
.buy-mark .khatem{width:clamp(44px,8vw,64px);height:clamp(44px,8vw,64px);color:var(--accent-muted)}
.buy-copy h3{
  font-family:var(--display);font-weight:300;
  font-size:clamp(22px,2.6vw,28px);margin:0;color:var(--text-primary);
}
.buy-variants{margin:10px 0 18px;color:var(--text-secondary);font-size:15px}
/* one piece: the section heading already names it, so the card does not */
.buy-grid.is-single .buy-copy h3{display:none}
.buy-grid.is-single .buy-variants{margin-top:0;font-size:16px}

/* ---------- 13o. THE HOUSE INDEX IN EVERY FOOTER ---------- */

/* the accent, not the muted gold: at 10.5px the muted gold measured about 1.9:1
   on the oil canvas, too faint to read. The accent is dark brown in the light
   worlds and gold in the dark one, so it clears contrast in both. */
.site-foot .f-tagline{
  font-family:var(--display);font-weight:400;
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;
}
.f-index-head{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:12px !important;
}
.f-index ul{
  list-style:none;margin:0;padding:0;
  display:grid;gap:8px 22px;grid-template-columns:1fr 1fr;
}
.f-index li{font-size:14.5px;line-height:1.4}
/* the footer's general link underline floats loose under a wrapped name, so the
   index drops it and marks hover with colour instead. Specificity has to beat
   the touch-target rule in section 18; the padding keeps the 44px tap height. */
.site-foot .f-index a{
  border-bottom:0;display:inline-block;padding-block:10px;
  transition:color var(--t-fast) var(--ease-soft);
}
.site-foot .f-index a:hover,.site-foot .f-index a:focus-visible{color:var(--accent)}
.f-index [aria-current]{display:inline-block;padding-block:10px;color:var(--text-secondary)}
.f-index ul{gap:0 22px}
@media (min-width:760px){
  .site-foot .foot-grid{align-items:start}
  .f-index{justify-self:end}
}

/* ---------- 13g. A PAGE THAT CARRIES NO MOTION ----------
   The Tea and Herbals page is static by instruction (§60), so it opts out of
   the whole entrance system rather than having each animation removed by hand. */

/* .js raises these to the weight of the gated hidden states, and every
   transition is dropped, so nothing on this page ever moves */
.js [data-no-motion] .rv .part,[data-no-motion] .rv .part{opacity:1;transform:none;transition:none}
.js [data-no-motion] .draw-in .k-line,[data-no-motion] .draw-in .k-line{stroke-dashoffset:0;transition:none}
.js [data-no-motion] .draw-in .k-drop,[data-no-motion] .draw-in .k-drop{opacity:1;transition:none}
.js [data-no-motion] .ln-draw,[data-no-motion] .ln-draw{transform:scaleX(1);transition:none}
[data-no-motion] .mote,[data-no-motion] .ring,[data-no-motion] .chev{display:none}
[data-no-motion] .env{animation:none;transform:none}
[data-no-motion] .glow::after{animation:none;opacity:.14}
.js [data-no-motion] .pour,[data-no-motion] .pour{transform:scaleY(1);transition:none;animation:none}
[data-no-motion] .pair-veil{opacity:0;transition:none}

/* ---------- 17. REDUCED MOTION ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
    animation-delay:0s !important;
  }
  /* show every choreographed element in its finished state.
     positional transforms are re-applied, never blanket-killed. */
  /* each finished state carries .js so it matches the weight of the hidden
     state it overrides; without it the hidden state would win the cascade */
  .js .rv .part{opacity:1;transform:none}
  .js .draw-in .k-line{stroke-dashoffset:0}
  .js .draw-in .k-drop{opacity:1}
  .js .ln-draw{transform:scaleX(1)}
  .khatem.draw .k-line{stroke-dashoffset:0}
  .khatem.draw .k-drop{opacity:1;transform:scale(1)}
  .js .seal-facts li{opacity:1;transform:none}
  .mote{display:none}
  .env{transform:none}
  .fx-blur .soft{opacity:0}
  .fx-blur .sharp{opacity:1}
  .ring,.chev{display:none}
  .js .static-hero .sh-khatem,.js .static-hero .sh-eyebrow,.js .static-hero h1,
  .js .static-hero .sh-sub,.js .static-hero .sh-cta{opacity:1;transform:none}
  .js .pour,.hs-pour{transform:scaleY(1);animation:none}
  .js .pour::after,.hs-pour::after{opacity:1;animation:none}
  .pair-veil{opacity:0}
  .split .c,.split .w{opacity:1 !important;transform:none !important}
  .stage-2,.stage-3{opacity:1;transform:none}
  /* the ellipse anchors are positional, so they stay */
  .band.pos-left{--sx:27%} .band.pos-right{--sx:73%} .band.pos-center{--sx:50%}
}

/* ---------- 18. TOUCH TARGETS (last, so they win the cascade) ---------- */
/* These have to sit after every section rule above, or a later padding
   declaration quietly undoes them and the tap area stays too small. */

@media (pointer:coarse){
  .s-cta .mailto{padding-block:14px;padding-bottom:14px}
  .site-foot a,.door .go{padding-block:12px}
}

/* JS pins the same final states when reduced motion flips ON mid-session */
.pinned .rv .part{opacity:1;transform:none}
.pinned .draw-in .k-line{stroke-dashoffset:0}
.pinned .draw-in .k-drop{opacity:1}
.pinned .ln-draw{transform:scaleX(1)}
.pinned .seal-facts li{opacity:1;transform:none}
.pinned .pour{transform:scaleY(1)}
.pinned .pour::after{opacity:1}
.pinned .khatem.draw{--seal:1}

/* ---------- 19. PRINT: the PDF editions (first brief, "if technically possible") ----------
   Each page prints as a finished document: the composed opening as its cover,
   every entrance already arrived, every ritual pathway shown under its own
   name, the seal's record open. Nothing interactive is printed. */

.path-print-label{display:none}

@media print{
  @page{size:A4;margin:0}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html,body{background:var(--canvas)!important}
  /* paper rhythm: screen spacing is sized for scrolling, not for pages */
  :root{--sec-y:15mm}
  /* pictures fit beside their words on the same page */
  figure img,.mem-img img{max-height:118mm;object-fit:cover}

  /* what has no meaning on paper */
  .site-nav,.skip,.stage,.ring,.chev,.mote,.env,video,.pour,.pair-veil,
  .seal-btn,.seal-hint,.path-tabs,.seal-stage::before,
  .s-seal .rv{display:none!important}

  /* the scroll film becomes its composed still opening, one page tall */
  .hero{height:auto!important}
  .static-hero{display:grid!important}
  .static-hero,.hero-still,.thresh{break-after:page}

  /* every entrance has already arrived */
  .rv .part,.js .rv .part{opacity:1!important;transform:none!important}
  .draw-in .k-line,.js .draw-in .k-line,.khatem.draw .k-line{stroke-dashoffset:0!important}
  .draw-in .k-drop,.js .draw-in .k-drop,.khatem.draw .k-drop{opacity:1!important;transform:none!important}
  .ln-draw,.js .ln-draw{transform:scaleX(1)!important}
  .split .c,.split .w{opacity:1!important;transform:none!important}
  .js .static-hero .sh-khatem,.js .static-hero .sh-eyebrow,.js .static-hero h1,
  .js .static-hero .sh-sub,.js .static-hero .sh-cta{opacity:1!important;transform:none!important}
  .js .doors .door-media img,.js .shelf .shelf-img img{transform:none!important}

  /* the seal prints as its record, open */
  .js .seal-record,.seal-record{grid-template-rows:1fr!important}
  .js .seal-facts li,.js .record-tagline,.js .record-act{opacity:1!important;transform:none!important}

  /* every ritual pathway, each under its own name */
  .path-panel[hidden]{display:block!important}
  .path-print-label{
    display:block;margin:12mm 0 3mm;
    font-family:var(--data);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--accent);
  }

  /* nothing splits across a page where it would read badly */
  .step,.record,.buy-item,.mem,.door,.shelf-item,.auth-grid > *,.form-link{break-inside:avoid}
  h1,h2,h3,.kicker{break-after:avoid}

  /* on paper a button cannot be pressed, so it says where it leads */
  a[href^="https://wa.me"]::after{content:" \00B7  +880 1722 970515";letter-spacing:.06em}
  .record-act,.hs-cta,.sh-cta{display:none!important}
}


/* ---------- 19. FINAL TOUCHES (founder, 2026-09-15) ----------
   The khatem's drop is embossed rather than flat: it keeps its own colour and
   is lifted by a lit edge above and a shadow below, on every mark across the
   site. The wordmark artwork is untouched. */
.khatem .k-drop{
  filter:drop-shadow(0 .85px .35px rgba(0,0,0,.42)) drop-shadow(0 -.7px .3px rgba(255,255,255,.45));
}
.seal-btn .khatem .k-drop{
  filter:drop-shadow(0 1.1px .5px rgba(0,0,0,.45)) drop-shadow(0 -.9px .4px rgba(255,255,255,.5));
}
/* over film and photography the lit edge would haze; keep the shadow only */
.band .khatem .k-drop,.static-hero .khatem .k-drop,.hero-still:not(.hs-no-img) .khatem .k-drop{
  filter:drop-shadow(0 .9px .6px rgba(0,0,0,.55));
}

/* The Standard now stands on its own ground, in each page's own colours. */
.s-standard{background:var(--panel);border-block:1px solid var(--hairline)}
.s-standard .frame{
  background:var(--panel-2);
  border-color:var(--hairline-strong);
  padding:clamp(28px,5vw,56px) clamp(22px,5vw,60px);
}
.s-standard .frame::before,.s-standard .frame::after{border-color:var(--accent-muted)}
.s-standard .t-2{color:var(--text-primary)}
.s-standard .para{color:var(--text-primary)}

/* The order block carries the piece, its size and its price, not a button alone */
.buy-sub{margin:8px 0 0;color:var(--text-secondary);font-size:14.5px;line-height:1.55;max-width:34ch}
.buy-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin:16px 0 18px}
.buy-size{
  font-family:var(--data);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-muted);border-radius:999px;padding:5px 12px;
}
.buy-price{font-family:var(--display);font-size:clamp(19px,2.2vw,24px);color:var(--text-primary)}
.buy-variants{margin:12px 0 0;font-size:13px;color:var(--text-secondary)}

/* each botanical shows itself (still: Tea and Herbals never moves) */
.set-fig{margin:0 0 16px;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-sm);background:var(--panel)}
.set-fig img{width:100%;height:100%;object-fit:cover;display:block}


/* ---------- 20. THE BAG (shop on ARGANI, pay on Shopify) ---------- */
.buy-copy .add-bag[disabled]{opacity:.55;cursor:default}
.buy-alt{display:inline-block;margin:10px 0 0 14px;font-size:13px;color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px}
.is-sold-out .buy-price{text-decoration:line-through;opacity:.6}
.bag-fab{
  position:fixed;right:16px;bottom:16px;z-index:60;
  display:none;align-items:center;gap:10px;
  font-family:var(--body);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--argani-terracotta);color:#FBF7F0;border:0;border-radius:999px;
  padding:12px 18px;box-shadow:0 8px 24px rgba(20,12,6,.28);cursor:pointer;
}
.bag-ready .bag-fab{display:inline-flex}
.bag-count{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:999px;background:var(--argani-gold);color:#2B1D14;font-weight:500;letter-spacing:0}
.bag[hidden]{display:none}
.bag{position:fixed;inset:0;z-index:80}
.bag-scrim{position:absolute;inset:0;background:rgba(20,12,6,.45)}
.bag-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);
  background:var(--canvas);color:var(--text-primary);
  display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(20,12,6,.25);
  animation:bag-in .35s var(--ease-out);
}
@keyframes bag-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.bag-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--hairline)}
.bag-head h2{font-family:var(--display);font-weight:400;font-size:28px;margin:0}
.bag-x{background:none;border:0;font-size:30px;line-height:1;color:var(--text-primary);cursor:pointer;padding:4px 8px}
.bag-lines{list-style:none;margin:0;padding:8px 24px;overflow-y:auto;overflow-x:hidden;flex:1}
.bag-empty{padding:28px 0;color:var(--text-secondary)}
.bag-line{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:16px 0;border-bottom:1px solid var(--hairline)}
.bag-name{font-family:var(--display);font-size:19px;grid-column:1/-1}
.bag-qty{display:inline-flex;align-items:center;gap:12px}
.bag-qty button{width:32px;height:32px;border:1px solid var(--hairline-strong);background:transparent;color:var(--text-primary);border-radius:999px;cursor:pointer;font-size:16px}
.bag-price{align-self:center;justify-self:end}
.bag-rm{grid-column:1/-1;justify-self:start;background:none;border:0;padding:0;color:var(--text-secondary);font-size:12px;text-decoration:underline;cursor:pointer}
.bag-foot{padding:20px 24px 26px;border-top:1px solid var(--hairline)}
.bag-total{display:flex;justify-content:space-between;font-family:var(--display);font-size:22px;margin:0}
.bag-note{font-size:13px;color:var(--text-secondary);margin:6px 0 16px}
.bag-go{display:block;text-align:center}
.bag-go.is-off{opacity:.45;pointer-events:none}
@media (prefers-reduced-motion:reduce){.bag-panel{animation:none}}
[data-no-motion] .bag-panel{animation:none}

/* the host's "Powered by Netlify" overlay sat on top of the Bag button */
#nl-badge-frame{display:none!important}


/* ---------- 21. THE HOUSE AT THE DOOR (founder, 2026-09-19) ----------
   C: the khatem bleeds off the top corner of the home page, with a warm gold
   wash above it. H1: an announcement bar and a header on the same cream, so the
   chrome belongs to the page rather than sitting on a coloured band. The drop
   in every mark falls and settles when the cursor rests on it. */

/* the seal behind the home page */
.thresh{position:relative;isolation:isolate;overflow:hidden}
.thresh::before,.thresh::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.thresh::before{
  top:clamp(-90px,-6vw,-40px);right:clamp(-150px,-10vw,-70px);
  width:clamp(300px,46vw,620px);aspect-ratio:1;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%237A3B22' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M23.2 20H76.8A3.2 3.2 0 0 1 80 23.2V76.8A3.2 3.2 0 0 1 76.8 80H23.2A3.2 3.2 0 0 1 20 76.8V23.2A3.2 3.2 0 0 1 23.2 20Z'/%3E%3Cpath transform='rotate(45 50 50)' d='M26.33 23.13H73.67A3.2 3.2 0 0 1 76.87 26.33V73.67A3.2 3.2 0 0 1 73.67 76.87H26.33A3.2 3.2 0 0 1 23.13 73.67V26.33A3.2 3.2 0 0 1 26.33 23.13Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.16;
}
.thresh::after{
  top:0;left:0;right:0;height:min(70vh,760px);
  background:radial-gradient(120% 70% at 62% 0%,rgba(212,168,87,.17),rgba(212,168,87,0) 62%);
}

/* the announcement bar: cream ground, a terracotta wash with weight to it */
.announce{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:10px clamp(14px,4vw,22px);
  background:rgba(122,59,34,.14);
  border-bottom:1px solid rgba(122,59,34,.30);
  color:var(--argani-terracotta);
  font-family:var(--body);font-weight:400;
  font-size:clamp(10px,1.5vw,11.5px);letter-spacing:.16em;text-transform:uppercase;
  text-align:center;white-space:nowrap;
}
@media (max-width:430px){ .announce{font-size:9.5px;letter-spacing:.12em;gap:8px} }
.announce p{margin:0;white-space:nowrap}
.announce .announce-kh{width:15px;height:15px;flex:none;--kw:6}

/* the sticky nav sits below the bar rather than over it */
.site-nav{top:var(--announce-h,0px)}

/* the home header */
.home-nav{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,3vw,32px);
  padding:clamp(14px,2vw,20px) var(--gut);
  max-width:var(--maxw);margin-inline:auto;
}
.home-mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.home-mark .khatem{width:30px;height:30px;--kw:3.4}
.home-mark .wm{--wm-h:17px;color:var(--argani-terracotta)}
.home-sections{display:none;gap:clamp(16px,2.4vw,30px)}
.home-sections a{
  color:var(--argani-terracotta);text-decoration:none;
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:border-color var(--t-fast) var(--ease-soft);
}
.home-sections a:hover{border-bottom-color:var(--argani-terracotta)}
@media (min-width:860px){ .home-sections{display:flex} }
.home-bag{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:none;border:1px solid rgba(122,59,34,.34);border-radius:999px;
  padding:8px 15px;color:var(--argani-terracotta);
  font-family:var(--body);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  transition:background var(--t-fast) var(--ease-soft),border-color var(--t-fast) var(--ease-soft);
}
.home-bag:hover{background:rgba(122,59,34,.09);border-color:var(--argani-terracotta)}
.home-bag [data-bag-count]{
  display:inline-grid;place-items:center;min-width:19px;height:19px;border-radius:999px;
  background:var(--argani-gold);color:#2B1D14;letter-spacing:0;font-size:11px;
}
/* with a header above it, the home lockup no longer needs a full screen */
.thresh{min-height:calc(100svh - 96px)}

/* the frames, and the tagline, in the founder's stronger weight */
.door{border-width:1.5px;border-color:rgba(122,59,34,.42)}
.door:hover{border-color:var(--argani-terracotta)}
.shelf-grid{border-width:1.5px;border-color:rgba(122,59,34,.34);background:rgba(122,59,34,.34)}
[data-world="nila"] .door,[data-world="kohl"] .door{border-color:rgba(212,168,87,.44)}
[data-world="nila"] .shelf-grid,[data-world="kohl"] .shelf-grid{border-color:rgba(212,168,87,.34);background:rgba(212,168,87,.34)}
.tagline{color:rgba(122,59,34,.92);font-weight:400}
[data-world="nila"] .tagline,[data-world="kohl"] .tagline{color:var(--argani-gold)}

/* the drop falls and settles under the cursor (choice 1) */
.khatem .k-drop{transform-box:fill-box;transform-origin:50% 42%}
.home-mark:hover .k-drop,.nav-mark:hover .k-drop,.thresh-mark:hover .k-drop,
.f-mark:hover .k-drop,.announce:hover .k-drop,.door:hover .k-drop,
.khatem:hover .k-drop,.seal-btn:hover .k-drop{
  animation:k-fall-settle 1s var(--ease-out);
}
@keyframes k-fall-settle{
  0%{transform:translateY(0) scaleY(1)}
  28%{transform:translateY(-4%) scaleY(.94)}
  62%{transform:translateY(5%) scaleY(1.07)}
  82%{transform:translateY(-1.5%) scaleY(.99)}
  100%{transform:translateY(0) scaleY(1)}
}
@media (prefers-reduced-motion:reduce){
  .home-mark:hover .k-drop,.nav-mark:hover .k-drop,.thresh-mark:hover .k-drop,
  .f-mark:hover .k-drop,.announce:hover .k-drop,.door:hover .k-drop,
  .khatem:hover .k-drop,.seal-btn:hover .k-drop{animation:none}
}
[data-no-motion] .khatem .k-drop{animation:none!important}


/* ---------- 22. THE FOUNDER'S CHOICES, 2026-09-20 ----------
   Lockup size 2, paragraph P2, background E (zellige field), bar weight W4
   (cream type on solid terracotta, two lines in rotation). */

/* --- the bar, W4 --- */
.announce{
  background:var(--argani-terracotta);
  border-bottom:1px solid var(--argani-terracotta-deep,#5E2C19);
  color:#FBF7F0;
  font-weight:500;letter-spacing:.18em;
  padding:11px clamp(14px,4vw,22px);
}

.announce .announce-kh{--k-line:#EBD9AE;--k-drop:var(--argani-gold)}
/* the lines are stacked in one place; only one is lit */
.announce-lines{position:relative;display:grid}
.announce-line{
  grid-area:1/1;margin:0;white-space:nowrap;
  opacity:0;transition:opacity .7s var(--ease-soft);
}
.announce-line.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){ .announce-line{transition:none} }

/* --- background E: a zellige field of khatems, under a warm wash --- */
.thresh::before{
  top:0;left:0;right:0;bottom:0;width:auto;aspect-ratio:auto;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%237A3B22' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M23.2 20H76.8A3.2 3.2 0 0 1 80 23.2V76.8A3.2 3.2 0 0 1 76.8 80H23.2A3.2 3.2 0 0 1 20 76.8V23.2A3.2 3.2 0 0 1 23.2 20Z'/%3E%3Cpath transform='rotate(45 50 50)' d='M26.33 23.13H73.67A3.2 3.2 0 0 1 76.87 26.33V73.67A3.2 3.2 0 0 1 73.67 76.87H26.33A3.2 3.2 0 0 1 23.13 73.67V26.33A3.2 3.2 0 0 1 26.33 23.13Z'/%3E%3C/g%3E%3C/svg%3E")
    0 0/clamp(64px,9vw,104px) clamp(64px,9vw,104px) repeat;
  opacity:.06;
}
.thresh::after{
  top:0;left:0;right:0;height:auto;bottom:0;
  background:linear-gradient(180deg,rgba(212,168,87,.20),rgba(212,168,87,0) 38%,rgba(122,59,34,.06));
}

/* --- lockup size 2, then the paragraph --- */
.thresh-mark .khatem{width:clamp(62px,8vw,92px);height:clamp(62px,8vw,92px)}
.thresh-wm .wm{--wm-h:clamp(30px,5.4vw,54px)}
.thresh-wm{margin-top:clamp(14px,2vh,20px)}
.thresh-rule{width:min(220px,52%);margin:clamp(14px,2vh,20px) auto}
.thresh-philosophy{
  margin:clamp(18px,2.6vh,26px) auto 0;max-width:52ch;text-align:center;
  color:var(--text-secondary);font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.85;
  text-wrap:pretty;
}
.doors{margin-top:clamp(34px,5vh,60px)}


/* ---------- 23. ORDERING IN ONE TAP ---------- */

/* the bar that rides with the visitor */
.order-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:62;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px clamp(12px,3vw,20px);
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--canvas) 94%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  border-top:1px solid var(--hairline-strong);
  animation:ob-in .4s var(--ease-out);
}
.order-bar[hidden]{display:none}
@keyframes ob-in{from{transform:translateY(100%)}to{transform:none}}
.ob-what{min-width:0}
.ob-name{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(16px,2.2vw,20px);line-height:1.2;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw;
}
.ob-meta{margin:3px 0 0;display:flex;align-items:baseline;gap:10px;font-size:12.5px;color:var(--text-secondary)}
.ob-size{
  font-family:var(--data);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-muted);border-radius:999px;padding:3px 8px;
}
.ob-price{font-family:var(--display);font-size:clamp(15px,2vw,18px);color:var(--text-primary)}
.ob-add{flex:none;padding-inline:clamp(16px,3vw,28px)}
/* the floating bag steps above the order bar, and out of its way */
.has-order-bar .bag-fab{bottom:calc(68px + env(safe-area-inset-bottom,0px))}
@media (prefers-reduced-motion:reduce){ .order-bar{animation:none} }

/* the three details, inside the bag */
.bag-form{display:grid;gap:12px;margin-top:16px}
.bag-form.is-off{opacity:.45;pointer-events:none}
.bag-field{display:grid;gap:5px}
.bag-field span{
  font-family:var(--data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);
}
.bag-field input{
  font-family:var(--body);font-size:15px;color:var(--text-primary);
  background:var(--panel);border:1px solid var(--hairline-strong);border-radius:var(--r-sm);
  padding:11px 13px;width:100%;
}
.bag-field input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bag-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-secondary);line-height:1.5}
.bag-check input{margin-top:2px;width:17px;height:17px;accent-color:var(--argani-terracotta);flex:none}
.bag-err{margin:0;font-size:13px;color:var(--argani-terracotta);background:rgba(122,59,34,.08);padding:9px 11px;border-radius:var(--r-sm)}
[data-world="nila"] .bag-err,[data-world="kohl"] .bag-err{color:var(--accent);background:rgba(212,168,87,.10)}
.bag-go[disabled]{opacity:.5;cursor:default}

/* the bag drawer takes the home page's ground, as the founder asked */
.bag-panel{position:relative;isolation:isolate}
.bag-panel::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%237A3B22' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M23.2 20H76.8A3.2 3.2 0 0 1 80 23.2V76.8A3.2 3.2 0 0 1 76.8 80H23.2A3.2 3.2 0 0 1 20 76.8V23.2A3.2 3.2 0 0 1 23.2 20Z'/%3E%3Cpath transform='rotate(45 50 50)' d='M26.33 23.13H73.67A3.2 3.2 0 0 1 76.87 26.33V73.67A3.2 3.2 0 0 1 73.67 76.87H26.33A3.2 3.2 0 0 1 23.13 73.67V26.33A3.2 3.2 0 0 1 26.33 23.13Z'/%3E%3C/g%3E%3C/svg%3E") 0 0/78px 78px repeat;
  opacity:.05;
}
.bag-panel::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(212,168,87,.16),transparent 40%);
}
[data-world="nila"] .bag-panel::before,[data-world="kohl"] .bag-panel::before{filter:invert(1) brightness(1.6);opacity:.05}


/* ---------- 24. THE BUYING MOMENTS IN THE PAGE ---------- */

.buy-prompt{padding-block:clamp(26px,4vh,44px)}

/* S2, the small card: the piece, its price, one tap */
.bp-card .bp-in{
  display:grid;grid-template-columns:86px minmax(0,1fr);gap:clamp(14px,3vw,22px);align-items:center;
  border:1.5px solid var(--hairline-strong);
  padding:clamp(12px,2.4vw,16px);
  background:var(--panel);
}
.bp-card .bp-img{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-sm);background:var(--panel-2)}
.bp-card .bp-img img{width:100%;height:100%;object-fit:cover;display:block}
.bp-name{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(19px,2.4vw,23px);line-height:1.2}
.bp-meta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:7px 0 13px}
.bp-size{
  font-family:var(--data);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-muted);border-radius:999px;padding:3px 9px;
}
.bp-price{font-family:var(--display);font-size:clamp(18px,2.2vw,21px);color:var(--text-primary)}
.bp-mark{display:grid;place-items:center;aspect-ratio:4/5;border:1px solid var(--hairline)}
.bp-mark .khatem{width:44px;height:44px}

/* S4, the split panel: the last word before the order block */
.bp-panel .bp-in{
  display:grid;grid-template-columns:1fr;
  border:1.5px solid var(--hairline-strong);background:var(--panel);
}
@media (min-width:720px){ .bp-panel .bp-in{grid-template-columns:1fr 1fr;align-items:stretch} }
.bp-panel .bp-img{overflow:hidden;min-height:clamp(220px,34vw,340px);background:var(--panel-2)}
.bp-panel .bp-img img{width:100%;height:100%;object-fit:cover;display:block}
.bp-panel .bp-copy{padding:clamp(22px,4vw,40px);align-self:center}
.bp-panel .t-2{margin:8px 0 0}
.bp-line{margin:12px 0 0;color:var(--text-secondary);font-size:15px;line-height:1.7;max-width:36ch}
.bp-panel .bp-meta{margin:16px 0 18px}
.bp-note{margin:14px 0 0;font-size:12.5px;color:var(--text-secondary)}
.buy-prompt .add-bag[disabled]{opacity:.55;cursor:default}

/* ---------- 26. THE BUTTON INSIDE THE FILM ---------- */
.hero-buy{
  position:absolute;left:50%;bottom:clamp(64px,11vh,110px);transform:translateX(-50%);
  z-index:4;display:grid;justify-items:center;gap:9px;text-align:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s var(--ease-soft),transform .6s var(--ease-out),visibility .6s;
}
.hero-buy.is-lit{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.hero-buy:not(.is-lit){transform:translateX(-50%) translateY(10px)}
.hero-buy .btn{box-shadow:0 10px 30px rgba(20,12,6,.34)}
.hb-meta{
  margin:0;display:flex;align-items:baseline;gap:10px;justify-content:center;
  color:#F6EFE2;text-shadow:var(--tshadow);
}
.hb-size{
  font-family:var(--data);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  border:1px solid rgba(246,239,226,.42);border-radius:999px;padding:3px 9px;
}
.hb-price{font-family:var(--display);font-size:clamp(16px,2vw,19px)}
/* without the engine the film does not scroll-scrub, so the button simply stays */
html:not(.js) .hero-buy{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%)}
@media (prefers-reduced-motion:reduce){ .hero-buy{transition:none} }

/* ---------- 27. WHAT THE HOUSE HEARS BACK ---------- */
.s-reviews{background:var(--panel);border-block:1px solid var(--hairline)}
.rev-summary{display:flex;align-items:baseline;gap:12px;margin:18px 0 0}
.rev-stars{display:inline-flex;gap:3px;color:var(--accent-muted);font-size:15px;letter-spacing:.06em}
.rev-s.is-on,.rev-stars .is-on{color:var(--argani-gold)}
.rev-avg{font-family:var(--display);font-size:22px;color:var(--text-primary)}
.rev-count{font-size:13px;color:var(--text-secondary)}
.rev-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:18px}
.rev-item{border:1px solid var(--hairline);background:var(--canvas);padding:clamp(16px,2.6vw,22px)}
.rev-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rev-who{margin:0;font-family:var(--display);font-size:19px;color:var(--text-primary)}
.rev-when{font-family:var(--data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.rev-body{margin:10px 0 0;color:var(--text-secondary);line-height:1.8;white-space:pre-line}
.rev-photo{margin:14px 0 0}
.rev-photo img{width:100%;max-width:320px;height:auto;border-radius:var(--r-sm);display:block}
.rev-empty{margin:18px 0 0;color:var(--text-secondary);font-size:15px}
.rev-open{margin-top:20px}

.rev-form{display:grid;gap:16px;margin-top:22px;border-top:1px solid var(--hairline);padding-top:22px}
.rev-form[hidden]{display:none}
.rev-field{display:grid;gap:7px}
.rev-label{font-family:var(--data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.rev-form input[type="text"],.rev-form input:not([type]),.rev-form textarea{
  font-family:var(--body);font-size:15px;color:var(--text-primary);
  background:var(--canvas);border:1px solid var(--hairline-strong);border-radius:var(--r-sm);
  padding:11px 13px;width:100%;
}
.rev-form textarea{line-height:1.7;resize:vertical}
.rev-form input:focus-visible,.rev-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rev-starrow{display:flex;gap:8px}
.rev-star{
  background:none;border:0;cursor:pointer;padding:2px 4px;line-height:1;
  font-size:26px;color:var(--accent-muted);transition:color var(--t-fast) var(--ease-soft),transform var(--t-fast) var(--ease-out);
}
.rev-star:hover{transform:translateY(-2px)}
.rev-star.is-on{color:var(--argani-gold)}
.rev-file{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rev-file input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.rev-filebtn{
  display:inline-block;cursor:pointer;
  font-family:var(--body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-muted);border-radius:999px;padding:9px 16px;
}
.rev-file:focus-within .rev-filebtn{outline:2px solid var(--accent);outline-offset:2px}
.rev-filename{font-size:13px;color:var(--text-secondary)}
.rev-note{margin:0;font-size:12.5px;color:var(--text-secondary)}
.rev-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the page a review lands on */
.thanks{min-height:70svh;display:grid;align-content:center;padding-block:clamp(60px,12vh,120px);text-align:center}
.thanks-in{display:grid;justify-items:center;gap:14px}
.thanks .khatem{width:clamp(56px,7vw,76px);height:clamp(56px,7vw,76px)}
.thanks .para{max-width:44ch;color:var(--text-secondary);margin:0}
.thanks-cta{display:grid;justify-items:center;gap:14px;margin-top:10px}

/* the hero's own invitation, beside the page's quiet link */
.hs-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hs-add{display:inline-flex;align-items:center;gap:10px}
.hs-add-price{font-family:var(--display);font-size:15px;letter-spacing:.02em;text-transform:none}
.btn-quiet{
  background:transparent;color:#F6EFE2;border:1px solid rgba(246,239,226,.5);
}
.btn-quiet:hover{background:rgba(246,239,226,.12);border-color:#F6EFE2}
.hs-no-img .btn-quiet,.hs-split .btn-quiet{color:var(--text-primary);border-color:var(--hairline-strong)}
.hs-no-img .btn-quiet:hover,.hs-split .btn-quiet:hover{background:var(--panel);border-color:var(--accent)}

/* ---------- 28. ONE ROW, CENTRED (founder, 2026-09-20) ---------- */
.hero-buy{display:grid;justify-items:center;gap:10px}
.hb-row{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.hb-row .btn{white-space:nowrap}
/* the still heroes: the invitation and the page's own link, side by side */
.hero-still .hs-cta{justify-content:center;gap:12px}
.hero-still .hs-inner{text-align:center;justify-items:center}
.hero-still .hs-sub,.hero-still .hs-tagline{margin-inline:auto}
.hero-still.hs-split .hs-inner{text-align:left;justify-items:start}
.hero-still.hs-split .hs-cta{justify-content:flex-start}
@media (max-width:420px){ .hs-add-price{display:none} }

/* the bar keeps one voice everywhere, and takes its ground from the page */
.announce{background:var(--announce-bg,var(--argani-terracotta));border-bottom-color:var(--announce-edge,#5E2C19)}
[data-world="nila"]{--announce-bg:#122647;--announce-edge:#0C1A33}
[data-world="kohl"]{--announce-bg:#2B1D14;--announce-edge:#170E08}
[data-world="herbal"]{--announce-bg:#0F4D33;--announce-edge:#09301F}
[data-world="water"],[data-world="botanical"],[data-world="earth"],[data-world="oil"]{
  --announce-bg:var(--argani-terracotta);--announce-edge:#5E2C19;
}
[data-world="nila"] .announce,[data-world="kohl"] .announce,[data-world="herbal"] .announce{color:#FBF7F0}
[data-world="nila"] .announce .announce-kh,[data-world="kohl"] .announce .announce-kh,
[data-world="herbal"] .announce .announce-kh{--k-line:#EBD9AE;--k-drop:var(--argani-gold)}


/* ---------- 29. THE BAR TAKES EACH PAGE'S GROUND ----------
   One voice everywhere (the same face, weight and cream type), and a ground
   drawn from that page's own palette: the terracotta of the oil and the earth,
   the Fes blue of the nila, the brown-black of the kohl, the green of the tea,
   the old rose of Aker, the clay red of the waters. */
[data-world="oil"]{--announce-bg:#7A3B22;--announce-edge:#5E2C19}
[data-world="earth"]{--announce-bg:#5A4430;--announce-edge:#3E2E1F}
[data-world="nila"]{--announce-bg:#1B3A6B;--announce-edge:#0F2547}
[data-world="kohl"]{--announce-bg:#2B1D14;--announce-edge:#170E08}
[data-world="water"]{--announce-bg:#8A5B57;--announce-edge:#6A423F}
[data-world="botanical"]{--announce-bg:#7A3340;--announce-edge:#59222C}
[data-world="herbal"]{--announce-bg:#0F4D33;--announce-edge:#09301F}
.announce{
  background:var(--announce-bg,#7A3B22);
  border-bottom:1px solid var(--announce-edge,#5E2C19);
  color:#FBF7F0;
}
.announce .announce-kh{--k-line:#EBD9AE;--k-drop:var(--argani-gold)}

/* ---------- 30. A PIECE IN MORE THAN ONE SIZE ---------- */
.size-pick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.size-opt{
  cursor:pointer;background:transparent;
  font-family:var(--data);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-secondary);border:1px solid var(--hairline-strong);border-radius:999px;padding:8px 14px;
  transition:color var(--t-fast) var(--ease-soft),border-color var(--t-fast) var(--ease-soft),background var(--t-fast) var(--ease-soft);
}
.size-opt:hover{color:var(--accent);border-color:var(--accent-muted)}
.size-opt.is-on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.size-opt[disabled]{opacity:.45;cursor:default;text-decoration:line-through}
.order-bar .size-pick{margin:0 10px 0 0}
.order-bar .size-opt{padding:6px 11px;font-size:10px}
.hero-buy .size-pick{justify-content:center;margin-bottom:0}
.hero-buy .size-opt{color:#F6EFE2;border-color:rgba(246,239,226,.45)}
.hero-buy .size-opt.is-on{color:var(--accent-ink);background:var(--argani-gold);border-color:var(--argani-gold)}


/* ---------- 31. TENOR SANS (founder's choice) ----------
   One weight only, so nothing asks for a light or a medium it does not have;
   and because the face is naturally wide, the small capitals are let out a
   little less than the typewriter face needed. */
body,.para,.btn,.mono,.kicker{font-weight:400}
.mono,.rev-label,.bag-field span,.rev-when,.sz,.bp-size,.buy-size,.ob-size,.hb-size,.size-opt,
.announce,.hs-eyebrow,.sh-eyebrow,.f-index-head{letter-spacing:.13em}
.announce{letter-spacing:.15em}
.btn,.nav-links a,.home-sections a{letter-spacing:.15em}
.bp-size,.buy-size,.ob-size,.hb-size,.sz,.size-opt,.rev-label,.bag-field span{font-size:11px}


/* a finger needs more than a line of text (founder: no mistakes) */
@media (pointer:coarse){
  .buy-alt,.path-tab,.rev-open,.size-opt,.bag-qty button,.rev-star,.bag-rm{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
  .bag-rm{justify-content:flex-start}
  .site-foot a,.f-index a,.thresh-social{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- 32. THE FILM ON A PHONE (choice B) ---------- */
.static-hero .sh-film{
  position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease-soft);
}
.static-hero.film-on .sh-film{opacity:1}
.static-hero::before{z-index:0}
.static-hero .sh-film + *{position:relative}
.static-hero{text-align:center;justify-items:center}
.static-hero .sh-sub{margin-inline:auto}
.sh-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.sh-cta .btn{white-space:nowrap}
.sh-meta{margin-top:12px}
.static-hero .size-pick,.hero-buy .size-pick,.hero-still .size-pick{justify-content:center;margin:20px 0 0}
.static-hero .size-opt{color:#F6EFE2;border-color:rgba(246,239,226,.45)}
.static-hero .size-opt.is-on{color:var(--accent-ink);background:var(--argani-gold);border-color:var(--argani-gold)}

/* ---------- 33. ONE LOGO FOR THE HOUSE (founder's choice C) ----------
   The logo is the mark with its gold drop and the wordmark, always in the
   same colours: terracotta lines, gold drop, terracotta name. It appears only
   in the corner, the footer, the home page's own lockup and the seal. Where a
   page is dark, or the corner sits over a film, it rests on a small cream
   badge (the house cream #F5EEE2, never white: founder, 2026-10-10) so its colours never change. Every other star is an ornament: the
   outline alone, taking the page's colour. */
.nav-mark .khatem,.f-mark .khatem,.home-mark .khatem,.thresh-mark .khatem,.seal-btn .khatem,.thanks .khatem{
  --k-line:#7A3B22 !important;--k-drop:#C9A24A !important;--k-glint:#F5EEE2 !important;
}
.nav-mark .wm,.f-mark .wm,.home-mark .wm,.thresh-wm .wm{color:#7A3B22 !important}
/* the badge: invisible on cream, a clear seal over a film or a dark page */
.nav-mark{
  background:#F5EEE2;border-radius:999px;padding:6px 16px 6px 8px;
  box-shadow:0 1px 0 rgba(122,59,34,.14),0 6px 18px rgba(20,12,6,.10);
}
.site-nav:not(.solid) .nav-mark{text-shadow:none}
[data-world="nila"] .f-mark,[data-world="kohl"] .f-mark{
  display:inline-flex;align-items:center;background:#F5EEE2;border-radius:999px;padding:8px 20px 8px 10px;
}
[data-world="nila"] .seal-btn .khatem,[data-world="kohl"] .seal-btn .khatem{background:#F5EEE2;border-radius:50%}
/* ornaments: outline only, in the page's own hue, a touch quieter than the logo */
.khatem.ornament .k-line{opacity:.8}
/* the name in words where the artwork used to be decoration */
.wm-text{font-family:var(--body);letter-spacing:.32em;text-transform:uppercase;font-size:inherit}
.hs-eyebrow .wm-text,.sh-eyebrow .wm-text{font-size:11.5px}
.record-kicker .wm-text{letter-spacing:.24em}
.band-line{font-family:var(--display);font-weight:300;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(26px,4.4vw,54px);line-height:1.15;color:#F6EFE2;text-wrap:balance}


/* ---------- 34. ONE HEADER FOR THE HOUSE ---------- */
.site-nav{gap:clamp(10px,2vw,26px)}
.nav-house{display:none;gap:clamp(14px,1.8vw,26px);margin-right:auto;margin-left:clamp(10px,2vw,28px)}
.nav-house a,.nav-links a{
  color:var(--nav-ink,var(--text-primary));text-decoration:none;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  padding-block:6px;border-bottom:1px solid transparent;
  transition:border-color var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft);
}
.nav-house a:hover,.nav-links a:hover{border-bottom-color:currentColor}
.nav-links{display:none}
.nav-tools{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-icon{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;
  background:transparent;border:0;color:var(--nav-ink,var(--text-primary));cursor:pointer;
}
.nav-icon svg{width:21px;height:21px}
.nav-icon:hover{background:rgba(122,59,34,.08)}
.nav-bag{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--argani-terracotta);color:#FBF7F0;border:0;border-radius:999px;
  font-family:var(--body);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  padding:9px 14px;
}
.nav-bag [data-bag-count]{
  display:inline-grid;place-items:center;min-width:19px;height:19px;border-radius:999px;
  background:var(--argani-gold);color:#2B1D14;letter-spacing:0;font-size:11px;
}
/* the header carries the bag now; the floating one steps aside */
.bag-fab{display:none!important}
@media (min-width:980px){
  .nav-house{display:flex}
  .nav-links{display:flex;gap:clamp(14px,1.6vw,22px)}
  /* the menu stays on computers too: it holds every page of the house (founder, 2026-10-21) */
  .nav-tools{margin-left:0}
}

/* the menu: every page of the house, on phones and computers */
.menu[hidden],.search[hidden]{display:none}
.menu,.search{position:fixed;inset:0;z-index:90}
.menu-scrim,.search-scrim{position:absolute;inset:0;background:rgba(20,12,6,.46)}
.menu-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(380px,88vw);
  background:#FBF7F0;color:#2C1C12;overflow:auto;
  padding:18px 22px 30px;display:flex;flex-direction:column;gap:6px;
  animation:bag-in .35s var(--ease-out);
}
.menu-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid rgba(122,59,34,.2)}
.menu-title .wm-text{font-size:13px;color:#7A3B22}
.menu-x,.search-x{background:none;border:0;font-size:30px;line-height:1;color:inherit;cursor:pointer;min-width:44px;min-height:44px}
.menu-main{display:grid;margin-top:10px}
.menu-main a{font-family:var(--display);font-size:28px;color:#2C1C12;text-decoration:none;padding:8px 0;border-bottom:1px solid rgba(122,59,34,.12)}
.menu-kicker{margin:22px 0 4px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#7A3B22}
.menu-list{display:grid}
.menu-list a{color:#2C1C12;text-decoration:none;padding:10px 0;font-size:15px;min-height:44px;display:flex;align-items:center}
.menu-social{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:auto;padding-top:22px}
.menu-social a{color:#7A3B22;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}

/* search */
.search-panel{
  position:absolute;left:50%;top:clamp(12px,8vh,90px);transform:translateX(-50%);
  width:min(640px,calc(100% - 24px));background:#FBF7F0;color:#2C1C12;
  border-radius:var(--r-sm);box-shadow:0 20px 60px rgba(20,12,6,.3);padding:6px 6px 14px;
}
.search-form{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid rgba(122,59,34,.2)}
.search-form svg{width:20px;height:20px;color:#7A3B22;flex:none}
.search-form input{flex:1;border:0;background:transparent;font-family:var(--body);font-size:17px;color:#2C1C12;padding:10px 0;outline:none}
.search-results{list-style:none;margin:6px 0 0;padding:0;max-height:min(60vh,460px);overflow:auto}
.search-hit{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:12px 14px;text-decoration:none;color:#2C1C12;border-radius:var(--r-sm)}
.search-hit:hover,.search-hit:focus-visible{background:#F3EBDD}
.search-t{font-family:var(--display);font-size:20px}
.search-k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6B5747;text-align:right}
.search-none{padding:14px;color:#6B5747;font-size:14px}
.search-hint{margin:10px 14px 0;font-size:12.5px;color:#6B5747}

/* ---------- 35. THE FOOTER AND ITS LETTER ---------- */
.letter{
  display:grid;gap:18px;align-items:end;
  padding:clamp(28px,5vw,46px) 0;margin-bottom:clamp(26px,4vw,40px);
  border-bottom:1px solid var(--hairline);
}
@media (min-width:860px){ .letter{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)} }
.letter-title{font-family:var(--display);font-weight:300;font-size:clamp(28px,3.6vw,40px);line-height:1.12;margin:6px 0 0;color:var(--text-primary)}
.letter-sub{margin:10px 0 0;color:var(--text-secondary);font-size:15px;max-width:44ch}
.letter-field{display:flex;gap:10px;flex-wrap:wrap}
.letter-field input{
  flex:1 1 220px;min-width:0;font-family:var(--body);font-size:15px;
  background:var(--canvas);color:var(--text-primary);
  border:1px solid var(--hairline-strong);border-radius:var(--r-sm);padding:13px 14px;
}
.letter-field input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.letter-note{grid-column:1/-1;margin:0;font-size:14px;color:var(--accent);min-height:1em}
.letter-note.is-err{color:var(--argani-terracotta)}
[data-world="nila"] .letter-note.is-err,[data-world="kohl"] .letter-note.is-err{color:var(--argani-gold)}
.foot-grid{display:grid;gap:clamp(24px,4vw,40px)}
@media (min-width:760px){ .foot-grid{grid-template-columns:1.3fr 1.3fr .8fr 1fr} }
.f-reach .f-handle{color:var(--accent)}

/* ---------- 36. THE SHOP ---------- */
.shop-head{padding-top:clamp(110px,16vh,160px);padding-bottom:clamp(20px,3vh,32px)}
.shop-head .t-1{margin:8px 0 0}
.shop-lede{max-width:52ch;color:var(--text-secondary);margin:14px 0 0}
.shop-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.shop-chip{
  text-decoration:none;color:var(--text-primary);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--hairline-strong);border-radius:999px;padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;
}
.shop-chip:hover{border-color:var(--accent);color:var(--accent)}
.shop-body{padding-bottom:clamp(40px,7vh,80px)}
.shop-group{padding-top:clamp(34px,5vh,56px);scroll-margin-top:90px}
.shop-group-head{display:grid;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--hairline);padding-bottom:14px}
.shop-group-sub{margin:0;color:var(--text-secondary);font-size:14.5px}
.shop-grid{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:860px){ .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1180px){ .shop-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.shop-card{display:flex;flex-direction:column;background:var(--panel);border:1.5px solid var(--hairline-strong);padding:0}
.shop-img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--panel-2);position:relative}
.shop-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease-out)}
@media (hover:hover){ .shop-card:hover .shop-img img{transform:scale(1.04)} }
.shop-img .buy-mark{position:absolute;inset:0;display:grid;place-items:center}
.shop-img .buy-mark .khatem{width:48px;height:48px}
.shop-copy{display:flex;flex-direction:column;gap:8px;padding:clamp(12px,2vw,18px);flex:1}
.shop-name{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(18px,2vw,22px);line-height:1.2}
.shop-name a{color:var(--text-primary);text-decoration:none}
.shop-copy .buy-line{margin:0}
.shop-copy .size-pick{margin:2px 0 0}
.shop-copy .btn{margin-top:auto;width:100%;justify-content:center;text-align:center}
.shop-more{align-self:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);text-decoration:none;padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
.shop-more:hover{color:var(--accent)}
@media (max-width:520px){ .shop-copy .btn{padding-inline:10px;font-size:10.5px} }

/* ---------- 37. OUR STORY AND EVENTS ---------- */
.story-hero{padding-top:clamp(120px,18vh,170px);padding-bottom:clamp(30px,5vh,56px);text-align:center}
.story-hero .t-1{margin:8px 0 0}
.story-orn{width:54px;height:54px;margin:0 auto 18px;display:block}
.story-lede{max-width:54ch;margin:18px auto 0;color:var(--text-secondary);font-size:clamp(15px,1.6vw,17px);line-height:1.85}
.story-row{padding-block:var(--sec-y)}
.story-alt{background:var(--panel)}
.story-grid{display:grid;gap:clamp(22px,4vw,56px);align-items:center}
@media (min-width:860px){
  .story-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .story-grid-rev .story-fig{order:2}
}
.story-fig{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-sm);background:var(--panel-2)}
.story-fig img{width:100%;height:100%;object-fit:cover;display:block}
.story-fig-mark{display:grid;place-items:center;background:var(--panel)}
.story-fig-mark .khatem{width:44%;height:44%}
.story-copy .t-2{margin:8px 0 0}
.story-copy .para{margin-top:16px;color:var(--text-secondary);max-width:52ch}
.story-end{padding-block:var(--sec-y);text-align:center}
.story-end .para{color:var(--text-secondary);margin:12px auto 0;max-width:46ch}
.story-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.btn-ghost{background:transparent;color:var(--accent);border:1px solid var(--accent-muted)}
.btn-ghost:hover{background:var(--panel);border-color:var(--accent)}

/* pages that open on cream, not on a film or a photograph: the header reads dark */
body:has(main.thresh) .site-nav,body:has(main.page-shop) .site-nav,
body:has(main.page-our-story) .site-nav,body:has(main.page-events) .site-nav{
  --nav-ink:var(--text-primary);text-shadow:none;
}

/* half a star: the left half lit */
.rev-s{position:relative;display:inline-block}
.rev-s.is-half{color:var(--accent-muted)}
.rev-s.is-half::after{
  content:"\2726";position:absolute;left:0;top:0;width:50%;overflow:hidden;color:var(--argani-gold);
}
.rev-num{font-family:var(--display);font-size:16px;color:var(--text-primary);margin-left:2px}
.rev-share{margin-top:24px;border-top:1px solid var(--hairline);padding-top:20px}
.rev-share-lead{margin:0 0 14px;color:var(--text-secondary)}
.rev-share-row{display:flex;flex-wrap:wrap;gap:10px}
/* an unlit star must read as unlit: pale, not a softer gold */
.rev-stars .rev-s{color:rgba(122,59,34,.20)}
[data-world="nila"] .rev-stars .rev-s,[data-world="kohl"] .rev-stars .rev-s{color:rgba(246,239,226,.22)}
.rev-stars .rev-s.is-on{color:var(--argani-gold)}
.rev-stars .rev-s.is-half{color:rgba(122,59,34,.20)}
[data-world="nila"] .rev-stars .rev-s.is-half,[data-world="kohl"] .rev-stars .rev-s.is-half{color:rgba(246,239,226,.22)}

/* the Tea page never moves (brief §60): nothing new is allowed to slide or fade */
[data-no-motion] .order-bar,[data-no-motion] .menu-panel,[data-no-motion] .bag-panel{animation:none}
[data-no-motion] .announce-line,[data-no-motion] .shop-img img,[data-no-motion] .size-opt,
[data-no-motion] .nav-house a,[data-no-motion] .nav-links a{transition:none}

/* the smallest phones (320 px): the header keeps its logo, search, bag and menu on one line */
@media (max-width:360px){
  .site-nav{gap:6px;padding-inline:10px}
  .nav-mark{padding:5px 11px 5px 6px}
  .nav-mark .khatem{width:24px;height:24px}
  .nav-mark .wm{--wm-h:13px}
  .nav-icon{width:36px;height:36px}
  .nav-bag{padding:8px 10px;gap:6px;font-size:10px}
  .nav-tools{gap:2px}
}


/* ---------- 38. OUR STORY: the letter, the materials, the promise ---------- */
.story-letter-wrap{padding-block:clamp(10px,2vh,20px) var(--sec-y)}
.story-letter{
  background:var(--panel);border:1.5px solid var(--hairline-strong);
  padding:clamp(26px,5vw,56px) clamp(22px,5vw,60px);
  font-family:var(--display);font-size:clamp(18px,2vw,21px);line-height:1.75;color:var(--text-primary);
}
.story-letter p{margin:0 0 1em}
.story-letter .kicker{font-family:var(--body);font-size:11px;margin-bottom:1.4em}
.letter-sign{margin-top:1.6em!important;font-style:italic}
.letter-name{font-style:normal;font-size:1.25em;color:var(--argani-terracotta)}
.letter-role{font-style:normal;font-family:var(--body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.story-materials{padding-block:var(--sec-y);background:var(--panel)}
.story-materials .t-2{margin:8px 0 24px}
.mat-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){ .mat-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1080px){ .mat-grid{grid-template-columns:repeat(4,1fr)} }
.mat-card{
  display:grid;gap:8px;align-content:start;text-decoration:none;color:inherit;
  background:var(--canvas);border:1.5px solid var(--hairline-strong);padding:18px;
  transition:border-color var(--t-fast) var(--ease-soft),transform var(--t-mid) var(--ease-out);
}
.mat-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.mat-region{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.mat-name{font-family:var(--display);font-size:23px;line-height:1.15;color:var(--text-primary)}
.mat-text{font-size:14px;line-height:1.7;color:var(--text-secondary)}
.story-promise{padding-block:var(--sec-y)}
.promise-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
.promise-list li{border-left:2px solid var(--accent);padding:4px 0 4px 16px;color:var(--text-secondary);line-height:1.7}
.promise-list strong{color:var(--text-primary);font-weight:400;font-family:var(--display);font-size:1.12em}


/* ---------- 39. THE TARIFF: every piece, every price, each line orderable ---------- */
.tariff-head{padding-block:clamp(18px,4vh,48px) clamp(26px,5vh,56px)}
.tariff-head-in{display:grid;gap:clamp(22px,4vw,56px);align-items:center}
@media (min-width:900px){ .tariff-head-in{grid-template-columns:1.05fr .95fr} }
.tariff-head-copy{text-align:center}
@media (min-width:900px){ .tariff-head-copy{text-align:left} .tariff-head-copy .tariff-chips{justify-content:flex-start} }
.tariff-orn{width:46px;height:46px;color:var(--argani-terracotta);margin:0 auto 10px;display:block}
@media (min-width:900px){ .tariff-orn{margin-left:0} }
.tariff-title{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(46px,8vw,92px);line-height:1;color:var(--argani-terracotta);margin:0;text-wrap:balance}
.tariff-sub{font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--argani-gold-deep);margin:14px 0 0}
.tariff-lede{max-width:46ch;margin:18px auto 0;color:var(--text-secondary);line-height:1.75}
@media (min-width:900px){ .tariff-lede{margin-left:0} }
.tariff-chips{justify-content:center}
.tariff-cover{margin:0;aspect-ratio:4/3;overflow:hidden;border:1.5px solid var(--hairline-strong)}
@media (min-width:900px){ .tariff-cover{aspect-ratio:4/5} }
.tariff-cover img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block}

.tariff-body{display:grid;gap:clamp(40px,8vh,96px);padding-bottom:var(--sec-y)}
.tariff-sec{display:grid;gap:clamp(18px,3vw,48px);align-items:start;scroll-margin-top:calc(var(--announce-h,0px) + 84px)}
@media (min-width:900px){
  .tariff-sec{grid-template-columns:.9fr 1.1fr}
  .tariff-sec.is-rev .tariff-fig{order:2}
  .tariff-fig{position:sticky;top:calc(var(--announce-h,0px) + 92px)}
}
.tariff-fig{margin:0;aspect-ratio:3/2;overflow:hidden;border:1.5px solid var(--hairline-strong);background:var(--panel)}
.tariff-fig img{width:100%;height:100%;object-fit:cover;display:block}
.tariff-sec-title{display:flex;align-items:center;gap:16px;margin:0 0 6px;font-family:var(--body);font-weight:400;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--argani-gold-deep)}
.tariff-sec-title::after{content:"";flex:1;height:1px;background:var(--argani-gold);opacity:.7}
.tariff-list{list-style:none;margin:0;padding:0}
.tr{padding:16px 0 14px;border-bottom:1px solid var(--hairline)}
.tr:last-child{border-bottom:0}
.tr-head{display:flex;align-items:baseline;gap:10px}
.tr-name{font-family:var(--display);font-size:clamp(23px,2.4vw,28px);line-height:1.15;color:var(--argani-terracotta);text-decoration:none}
.tr-name:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.tr-dots{flex:1;min-width:18px;border-bottom:1.5px dotted color-mix(in srgb,var(--argani-gold) 70%,transparent);transform:translateY(-5px)}
.tr-size{font-size:13px;letter-spacing:.06em;color:var(--text-secondary);white-space:nowrap}
.tr-price{font-family:var(--display);font-size:clamp(22px,2.3vw,27px);color:var(--argani-terracotta);white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.tr-line{margin:4px 0 0;font-family:var(--display);font-style:italic;font-size:17px;line-height:1.5;color:var(--text-secondary)}
.tr-note{margin:4px 0 0;font-size:12px;letter-spacing:.05em;color:var(--argani-terracotta)}
.tr-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px}
.tr-act .size-pick{margin:0 auto 0 0}
.tr-add{
  font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  background:transparent;color:var(--argani-terracotta);border:1px solid var(--argani-terracotta);
  border-radius:var(--r-sm);padding:10px 16px;min-height:40px;cursor:pointer;
  transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft);
}
.tr-add:hover:not(:disabled){background:var(--argani-terracotta);color:var(--argani-cream)}
.tr-add:focus-visible{outline:2px solid var(--argani-gold-deep);outline-offset:3px}
.tr-add:disabled{opacity:.45;cursor:default}
@media (pointer:coarse){ .tr-add{min-height:44px} }
.is-sold-out .tr-price{opacity:.5}
@media (max-width:420px){
  .tr-head{flex-wrap:wrap;row-gap:2px}
  .tr-name{flex:1 1 100%}
  .tr-dots{order:2}
  .tr-size{order:1}
  .tr-price{order:3}
}

.tariff-end{padding-block:var(--sec-y);background:var(--panel);border-top:1px solid var(--hairline)}
.tariff-end-in{display:grid;gap:clamp(22px,4vw,56px);align-items:center}
@media (min-width:860px){ .tariff-end-in{grid-template-columns:minmax(0,.7fr) 1.3fr} }
.tariff-poster{display:block;max-width:340px;margin:0 auto;border:1.5px solid var(--hairline-strong);box-shadow:0 18px 40px -24px rgba(43,29,20,.45);transition:transform var(--t-mid) var(--ease-out)}
.tariff-poster:hover{transform:translateY(-3px) rotate(-.4deg)}
.tariff-poster img{width:100%;height:auto;display:block}
.tariff-end-copy{text-align:center}
@media (min-width:860px){ .tariff-end-copy{text-align:left} .tariff-end-copy .story-cta{justify-content:flex-start} }
.tariff-end-copy .para{margin-inline:auto}
@media (min-width:860px){ .tariff-end-copy .para{margin-inline:0} }
.tariff-share{margin:18px 0 0;font-size:13px;color:var(--text-secondary)}
.tariff-share a{color:var(--argani-terracotta)}
.shop-tariff-link{margin:12px 0 0;font-size:14px}
.shop-tariff-link a{color:var(--argani-terracotta);text-underline-offset:4px}

/* home: one band toward the tariff */
.home-tariff{margin-top:clamp(40px,8vh,90px)}
.ht-in{display:grid;text-decoration:none;color:inherit;border:1.5px solid var(--hairline-strong);background:var(--panel);overflow:hidden}
@media (min-width:760px){ .ht-in{grid-template-columns:.85fr 1.15fr;align-items:center} }
.ht-img{display:block;aspect-ratio:4/3;overflow:hidden}
@media (min-width:760px){ .ht-img{aspect-ratio:1/1} }
.ht-img img{width:100%;height:100%;object-fit:cover;object-position:50% 70%;display:block;transition:transform 1.2s var(--ease-out)}
.ht-in:hover .ht-img img{transform:scale(1.03)}
.ht-copy{display:grid;gap:10px;justify-items:center;text-align:center;padding:clamp(22px,4vw,48px)}
@media (min-width:760px){ .ht-copy{justify-items:start;text-align:left} }
.ht-title{font-family:var(--display);font-style:italic;font-size:clamp(32px,4.4vw,52px);line-height:1.05;color:var(--argani-terracotta)}
.ht-sub{max-width:40ch;color:var(--text-secondary);line-height:1.7}
.ht-copy .btn{margin-top:8px}
@media (prefers-reduced-motion:reduce){ .ht-img img,.tariff-poster{transition:none} }
/* the tariff lines are lines, not cards: undo the order-block frame */
.tariff-list .tr.buy-item{display:block;gap:0;border:0;border-bottom:1px solid var(--hairline);padding:16px 0 14px;background:none}
.tariff-list .tr.buy-item:last-child{border-bottom:0}
.tr .tr-size.buy-size{font-family:var(--body);font-size:13px;letter-spacing:.06em;text-transform:none;color:var(--text-secondary);border:0;border-radius:0;padding:0}
.tariff-sec{padding-block:0}
.tariff-body{padding-top:clamp(8px,2vh,24px)}
@media (max-width:899px){
  .tariff-cover{display:none}
  .tariff-head{padding-bottom:clamp(14px,3vh,28px)}
}
@media (max-width:600px){
  .tariff-chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tariff-chips::-webkit-scrollbar{display:none}
  .tariff-chips .shop-chip{flex:none}
}
/* an order line Shopify cannot take yet becomes a message to the house */
a.by-message{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.tariff-head-copy,.tariff-list-wrap{min-width:0}
/* the line and its button share a row, so the tariff reads as a list */
.tariff-list .tr.buy-item{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:end}
.tr-head{grid-column:1/-1}
.tr-line,.tr-note{grid-column:1}
.tr-act{grid-column:2;grid-row:2/span 2;margin-top:8px;align-self:end}
.tr-act:has(.size-pick){grid-column:1/-1;grid-row:auto;justify-content:space-between}


/* ---------- 40. THE BAG, DRESSED (founder, 2026-10-10) ----------
   Each line shows the piece itself and its size; one pairing waits beneath;
   the promise sits right beside the button. */
.bag-line{grid-template-columns:56px 1fr auto;align-items:center;gap:6px 14px}
.bag-thumb{grid-row:1/span 3;width:56px;height:70px;border-radius:var(--r-sm);overflow:hidden;background:var(--panel);display:block;align-self:start}
.bag-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bag-line .bag-name{grid-column:2/-1;font-size:18px;line-height:1.2}
.bag-size{display:block;margin-top:3px;font-family:var(--body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.bag-line .bag-qty{grid-column:2}
.bag-line .bag-price{grid-column:3}
.bag-line .bag-rm{grid-column:2/-1}
.bag-pair{margin:0 24px 12px;padding:12px 14px;border:1px solid var(--hairline-strong);border-radius:var(--r-sm);background:color-mix(in srgb,var(--panel) 70%,transparent)}
.bag-pair[hidden]{display:none}
.bag-pair-k{margin:0 0 8px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.bag-pair-in{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center}
.bag-pair .bag-thumb{grid-row:auto;width:44px;height:55px}
.bag-pair-copy{display:grid;gap:2px;min-width:0}
.bag-pair-name{font-family:var(--display);font-size:17px;color:var(--text-primary);text-decoration:none}
.bag-pair-name:hover{text-decoration:underline;text-underline-offset:3px}
.bag-pair-why{font-size:12.5px;line-height:1.45;color:var(--text-secondary)}
.bag-pair-add{font-family:var(--body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  background:transparent;color:var(--argani-terracotta);border:1px solid var(--argani-terracotta);border-radius:var(--r-sm);padding:9px 12px;min-height:40px;cursor:pointer}
.bag-pair-add:hover{background:var(--argani-terracotta);color:var(--argani-cream)}
[data-world="nila"] .bag-pair-add,[data-world="kohl"] .bag-pair-add{color:var(--accent);border-color:var(--accent)}
.bag-promise{list-style:none;margin:10px 0 14px;padding:0;display:grid;gap:5px;font-size:12.5px;color:var(--text-secondary)}
.bag-promise li{display:flex;gap:8px;align-items:baseline}
.bag-promise li::before{content:"";flex:none;width:6px;height:6px;transform:translateY(-1px) rotate(45deg);background:var(--argani-gold)}
@media (pointer:coarse){.bag-pair-add{min-height:44px}}
.buy-try{margin:2px 0 0;font-family:var(--display);font-style:italic;font-size:16px;color:var(--accent)}

/* four doors (founder, 2026-10-10): two by two on a phone, so the threshold
   stays short and every door is in reach; four across on a wide screen */
.doors.is-four{grid-template-columns:1fr 1fr;gap:12px}
.doors.is-four .door{padding:12px 12px 16px}
.doors.is-four .door-media{margin-bottom:12px}
.doors.is-four .door .kicker{font-size:9.5px;margin-bottom:5px}
.doors.is-four .door h2{font-size:clamp(19px,5vw,26px);line-height:1.15}
.doors.is-four .door p{display:none}
.doors.is-four .door .go{margin-top:10px;font-size:10px}
@media (min-width:760px){
  .doors.is-four{gap:clamp(16px,2vw,24px)}
  .doors.is-four .door{padding:clamp(18px,2.2vw,26px)}
  .doors.is-four .door p{display:block;font-size:14.5px}
  .doors.is-four .door h2{font-size:clamp(23px,2.4vw,30px)}
}
@media (min-width:1100px){ .doors.is-four{grid-template-columns:repeat(4,1fr)} }


/* ---------- 41. A HEADER THAT ALWAYS READS (founder, 2026-10-10) ----------
   "In some pages the menu is not really visible, not easy on the eyes." The
   header now sits on a band of frosted glass from the first frame: smoked over
   a film or a photograph, cream over a cream page. The words never sit on raw
   imagery again, and they are a size larger. */
.site-nav:not(.solid){
  background:linear-gradient(to bottom,rgba(var(--scrim-rgb),.62),rgba(var(--scrim-rgb),.34));
  -webkit-backdrop-filter:blur(12px) saturate(1.08);backdrop-filter:blur(12px) saturate(1.08);
  border-bottom-color:rgba(243,234,218,.14);
}
.site-nav:not(.solid){--nav-ink:#FBF5EA;text-shadow:0 1px 6px rgba(var(--scrim-rgb),.55)}
.nav-house a,.nav-links a{font-size:12px;letter-spacing:.16em}
.site-nav .nav-house a{opacity:1}
/* cream pages: cream glass, dark ink, no smoke */
body:has(main.thresh) .site-nav:not(.solid),body:has(main.page-shop) .site-nav:not(.solid),
body:has(main.page-our-story) .site-nav:not(.solid),body:has(main.page-events) .site-nav:not(.solid),
body:has(main.page-tariff) .site-nav:not(.solid),body:has(.hero-still.hs-no-img) .site-nav:not(.solid){
  --nav-ink:var(--text-primary);text-shadow:none;
  background:color-mix(in srgb,var(--canvas) 88%,transparent);
  border-bottom-color:var(--hairline);
}
body:has(main.page-tariff) .site-nav .khatem{filter:none}
/* the solid state keeps the house's ink on every world */
.site-nav.solid{--nav-ink:var(--text-primary);text-shadow:none}
.site-nav.solid .nav-house a,.site-nav.solid .nav-links a{color:var(--text-primary)}
.site-nav .nav-links a.nav-cta{font-weight:400}
/* Tenor Sans is drawn with a fine pen: at header size it needs a hair more ink */
.nav-house a,.nav-links a{-webkit-text-stroke:.3px currentColor;font-size:12.5px}
.site-nav:not(.solid) .nav-house a,.site-nav:not(.solid) .nav-links a{-webkit-text-stroke:.2px currentColor}


/* ---------- 42. THE GALLERY IN THE ORDER BLOCK (founder, 2026-10-10) ---------- */
.buy-gallery{position:relative;display:grid;gap:10px}
.bg-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:var(--r-sm);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.bg-track::-webkit-scrollbar{display:none}
.bg-track:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bg-track img{flex:0 0 100%;width:100%;aspect-ratio:4/5;object-fit:cover;scroll-snap-align:center;scroll-snap-stop:always;display:block;border-radius:0}
.bg-dots{display:flex;justify-content:center;gap:4px}
.bg-dots button{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.bg-dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-muted);opacity:.55;transition:transform var(--t-fast) var(--ease-soft),opacity var(--t-fast)}
.bg-dots button[aria-current="true"]::before{opacity:1;background:var(--accent);transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){.bg-track{scroll-behavior:auto}}


/* ---------- 43. THE LOGO WITHOUT ITS BADGE (founder, 2026-10-10) ----------
   "I don't like the white border on the logo, remove the border": the mark and
   the name sit straight on the header, footer and seal. On cream they keep the
   house colours (terracotta lines, gold drop); where the ground is dark (the
   smoked header over a film, Nila and Kohl), the lines and the name turn to the
   house cream and the drop stays gold, so the logo always reads. */
.nav-mark,.site-nav .nav-mark{background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;gap:10px}
.nav-mark .khatem{width:30px;height:30px}
.nav-mark .wm{--wm-h:18px}
[data-world="nila"] .f-mark,[data-world="kohl"] .f-mark{background:none;padding:0;border-radius:0}
[data-world="nila"] .seal-btn .khatem,[data-world="kohl"] .seal-btn .khatem{background:none}
/* dark grounds: cream lines, gold drop */
.site-nav:not(.solid) .nav-mark .khatem,
[data-world="nila"] .nav-mark .khatem,[data-world="kohl"] .nav-mark .khatem,
[data-world="nila"] .f-mark .khatem,[data-world="kohl"] .f-mark .khatem,
[data-world="nila"] .seal-btn .khatem,[data-world="kohl"] .seal-btn .khatem{--k-line:#F5EEE2 !important;--k-drop:#D4A857 !important;filter:none}
.site-nav:not(.solid) .nav-mark .wm,
[data-world="nila"] .nav-mark .wm,[data-world="kohl"] .nav-mark .wm,
[data-world="nila"] .f-mark .wm,[data-world="kohl"] .f-mark .wm{color:#F5EEE2 !important}
/* cream pages keep the house colours even before the header turns solid */
body:has(main.thresh) .site-nav .nav-mark .khatem,body:has(main.page-shop) .site-nav .nav-mark .khatem,
body:has(main.page-our-story) .site-nav .nav-mark .khatem,body:has(main.page-events) .site-nav .nav-mark .khatem,
body:has(main.page-tariff) .site-nav .nav-mark .khatem,body:has(.hero-still.hs-no-img) .site-nav .nav-mark .khatem{--k-line:#7A3B22 !important;--k-drop:#C9A24A !important}
body:has(main.thresh) .site-nav .nav-mark .wm,body:has(main.page-shop) .site-nav .nav-mark .wm,
body:has(main.page-our-story) .site-nav .nav-mark .wm,body:has(main.page-events) .site-nav .nav-mark .wm,
body:has(main.page-tariff) .site-nav .nav-mark .wm,body:has(.hero-still.hs-no-img) .site-nav .nav-mark .wm{color:#7A3B22 !important}
@media (max-width:360px){ .nav-mark .khatem{width:26px;height:26px} .nav-mark .wm{--wm-h:15px} }


/* ---------- 44. MENU M2 AND BAG B2 (founder's choices, 2026-10-10) ---------- */
/* M2: the menu speaks in Cormorant italic, the voice of the tariff's title */
.menu-main a{font-family:var(--display);font-style:italic;font-weight:400;font-size:34px;line-height:1.15;color:#7A3B22;padding:6px 0;border-bottom:0;letter-spacing:0}
.menu-main a:hover{color:#5E2C19}
.menu-list a{font-family:var(--display);font-size:19px;letter-spacing:0;padding:6px 0}
.menu-kicker{margin-top:26px}
/* B2: the bag opens under the founder's sunlit line-up, melting into the page */
.bag-panel::before{
  background:linear-gradient(to bottom,transparent 35%,var(--canvas) 100%),url('photo-house.jpg') 50% 72%/cover no-repeat;
  opacity:1;filter:none!important;inset:0 0 auto 0;height:190px;
}
.bag-panel::after{display:none}
.bag-head{padding-top:132px;border-bottom:0;align-items:flex-end}
.bag-head h2{text-shadow:0 0 18px var(--canvas)}
.bag-x{background:color-mix(in srgb,var(--canvas) 78%,transparent);border-radius:999px;width:40px;height:40px;padding:0;display:grid;place-items:center;align-self:flex-start;margin-top:-118px}
.bag-lines{border-top:1px solid var(--hairline)}
/* the founder's title above her letter (2026-10-10) */
.founder-title{margin:0 0 1.1em;font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(26px,3.4vw,36px);line-height:1.2;color:var(--argani-terracotta);text-wrap:balance}
[data-world] .bag-panel::before{opacity:1!important;filter:none!important;
  background:linear-gradient(to bottom,transparent 45%,var(--canvas) 100%),url('photo-house.jpg') 50% 72%/cover no-repeat}


/* ---------- 45. THE GIFT CARD (founder, 2026-10-10) ---------- */
.gc-hero{padding-block:clamp(18px,4vh,48px) var(--sec-y)}
.gc-hero-in{display:grid;gap:clamp(26px,4vw,64px);align-items:start}
@media (min-width:960px){ .gc-hero-in{grid-template-columns:1fr 1fr} .gc-stage{position:sticky;top:calc(var(--announce-h,0px) + 96px)} }
.gc-stage{display:grid;gap:18px;min-width:0}
/* the card: cream paper, a gold hairline frame, the khatem pressed into it */
.gc-card{
  position:relative;aspect-ratio:1.586;border-radius:18px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 18% 10%,#FBF6EC 0%,#F5EEE2 45%,#EBDDC6 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 30px 60px -28px rgba(43,29,20,.55),0 8px 18px -10px rgba(43,29,20,.3);
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr auto auto auto;column-gap:16px;
  padding:clamp(18px,4vw,30px) clamp(20px,4.4vw,34px);color:#5E2C19;
  transform:perspective(900px) rotateX(4deg) rotateY(-6deg);transition:transform .9s var(--ease-out);
}
.gc-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.08;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%237A3B22' stroke-width='2'%3E%3Crect x='20' y='20' width='60' height='60' rx='3'/%3E%3Crect x='20' y='20' width='60' height='60' rx='3' transform='rotate(45 50 50)'/%3E%3C/g%3E%3C/svg%3E") 0 0/54px 54px}
.gc-card:hover{transform:perspective(900px) rotateX(0) rotateY(0)}
.gc-card.is-touched .gc-amount{animation:gc-tick .5s var(--ease-out)}
@keyframes gc-tick{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
.gc-frame{position:absolute;inset:10px;border:1px solid rgba(196,138,42,.55);border-radius:12px;pointer-events:none}
.gc-khatem{grid-row:1/span 2;width:clamp(36px,7vw,52px);height:clamp(36px,7vw,52px);
  --k-line:#7A3B22;--k-drop:#C9A24A;filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
.gc-brand{font-family:var(--display);letter-spacing:.32em;font-size:clamp(16px,2.6vw,21px);color:#7A3B22;align-self:end}
.gc-kind{font-size:clamp(9px,1.5vw,11px);letter-spacing:.32em;text-transform:uppercase;color:#C48A2A;align-self:start}
.gc-amount{grid-column:1/-1;align-self:center;font-family:var(--display);font-size:clamp(34px,7vw,56px);line-height:1;color:#5E2C19;font-variant-numeric:lining-nums}
.gc-to{grid-column:1/-1;font-family:var(--display);font-style:italic;font-size:clamp(17px,2.8vw,22px);color:#7A3B22}
.gc-msg{grid-column:1/-1;font-family:var(--display);font-style:italic;font-size:clamp(12px,1.9vw,14.5px);line-height:1.35;color:#6E4A36;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gc-line{grid-column:1/-1;margin-top:6px;font-size:clamp(8px,1.3vw,10px);letter-spacing:.28em;text-transform:uppercase;color:#C48A2A}
.gc-photo{margin:0;border-radius:var(--r-sm);overflow:hidden;border:1.5px solid var(--hairline-strong);aspect-ratio:4/3}
.gc-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:959px){ .gc-photo{display:none} }

.gc-form{display:grid;gap:18px;min-width:0}
.gc-title{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(40px,6vw,68px);line-height:1.02;color:var(--argani-terracotta);margin:0;text-wrap:balance}
.gc-lede{margin:0;color:var(--text-secondary);line-height:1.75;max-width:46ch}
.gc-field{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.gc-field legend{padding:0;margin-bottom:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.gc-amts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:420px){ .gc-amts{grid-template-columns:1fr 1fr} }
.gc-amt,.gc-way{position:relative}
.gc-amt input,.gc-way input{position:absolute;opacity:0;pointer-events:none}
.gc-amt span{display:grid;place-items:center;min-height:52px;border:1.5px solid var(--hairline-strong);border-radius:var(--r-sm);
  font-family:var(--display);font-size:21px;color:var(--text-primary);cursor:pointer;transition:all var(--t-fast) var(--ease-soft)}
.gc-amt input:checked + span{background:var(--argani-terracotta);border-color:var(--argani-terracotta);color:var(--argani-cream)}
.gc-amt input:focus-visible + span,.gc-way input:focus-visible + span{outline:2px solid var(--argani-gold-deep);outline-offset:2px}
.gc-ways{display:grid;gap:8px}
.gc-way span{display:grid;gap:3px;padding:13px 16px;border:1.5px solid var(--hairline-strong);border-radius:var(--r-sm);cursor:pointer;transition:border-color var(--t-fast)}
.gc-way b{font-weight:400;font-family:var(--display);font-size:19px;color:var(--text-primary)}
.gc-way i{font-style:normal;font-size:13px;color:var(--text-secondary);line-height:1.5}
.gc-way input:checked + span{border-color:var(--argani-terracotta);background:color-mix(in srgb,var(--panel) 60%,transparent);box-shadow:inset 3px 0 0 var(--argani-terracotta)}
.gc-inputs{display:grid;gap:12px}
.gc-inputs textarea{width:100%;font:inherit;font-size:16px;padding:12px;border:1px solid var(--hairline-strong);border-radius:var(--r-sm);background:var(--canvas);color:var(--text-primary);resize:vertical}
.gc-count{font-style:normal;float:right;letter-spacing:0;text-transform:none;opacity:.7}
.gc-go{width:100%;text-align:center;min-height:52px}
.gc-err{margin:0;font-size:13px;color:var(--argani-terracotta)}
.gc-facts{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px;font-size:13.5px;color:var(--text-secondary)}
.gc-facts li{display:flex;gap:9px;align-items:baseline}
.gc-facts li::before{content:"";flex:none;width:6px;height:6px;transform:translateY(-1px) rotate(45deg);background:var(--argani-gold)}

.gc-become{padding-block:var(--sec-y);background:var(--panel);border-block:1px solid var(--hairline)}
.gc-become .t-2{margin:8px 0 6px}
.gc-become-sub{margin:0 0 22px;color:var(--text-secondary)}
.gc-strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px var(--gut) 18px;scrollbar-width:thin;outline:none}
.gc-strip:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.gc-piece{flex:0 0 clamp(160px,42vw,220px);scroll-snap-align:start;display:grid;gap:6px;align-content:start;text-decoration:none;color:inherit;opacity:.42;filter:saturate(.6);
  transition:opacity .5s var(--ease-soft),filter .5s var(--ease-soft),transform .5s var(--ease-out)}
.gc-piece.is-within{opacity:1;filter:none}
.gc-piece:hover{transform:translateY(-3px)}
.gc-piece-img{aspect-ratio:4/5;border-radius:var(--r-sm);overflow:hidden;background:var(--canvas)}
.gc-piece-img img{width:100%;height:100%;object-fit:cover;display:block}
.gc-piece-name{font-family:var(--display);font-size:18px;line-height:1.2}
.gc-piece-price{font-size:13px;color:var(--text-secondary)}
.gc-piece-fit{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);visibility:hidden}
.gc-piece.is-within .gc-piece-fit{visibility:visible}

.gc-steps{padding-block:var(--sec-y)}
.gc-steps-in{display:grid;gap:22px}
@media (min-width:760px){ .gc-steps-in{grid-template-columns:repeat(3,1fr)} }
.gc-steps h3{font-family:var(--display);font-weight:400;font-size:24px;margin:6px 0}
.gc-steps p{margin:0;color:var(--text-secondary)}
.gc-n{font-size:11px;letter-spacing:.22em;color:var(--accent)}
.gc-faq{padding-block:0 var(--sec-y)}
.gc-faq details{border-bottom:1px solid var(--hairline);padding:14px 0}
.gc-faq summary{cursor:pointer;font-family:var(--display);font-size:21px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.gc-faq summary::-webkit-details-marker{display:none}
.gc-faq summary::after{content:"+";color:var(--accent);font-family:var(--body)}
.gc-faq details[open] summary::after{content:"\2013"}
.gc-faq details p{margin:10px 0 0;color:var(--text-secondary);line-height:1.75}
.gc-share{margin:22px 0 0;font-size:14px;color:var(--text-secondary)}
.gc-share a,.gc-copy{color:var(--argani-terracotta)}
.gc-copy{background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer}
@media (prefers-reduced-motion:reduce){ .gc-card{transform:none;transition:none} .gc-card.is-touched .gc-amount{animation:none} .gc-piece{transition:none} }

/* the policies and the contact page */
.policy{padding-block:clamp(18px,4vh,48px) var(--sec-y)}
.policy .t-1{margin:8px 0 22px}
.policy-body{line-height:1.8;color:var(--text-secondary);max-width:68ch}
.policy-body h2,.policy-body h3{font-family:var(--display);font-weight:400;color:var(--text-primary);font-size:24px;margin:1.6em 0 .4em}
.policy-body a{color:var(--argani-terracotta)}
.contact-list{list-style:none;margin:24px 0 0;padding:0;display:grid}
.contact-list li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.contact-list li span:first-child{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.contact-list a{color:var(--text-primary);font-family:var(--display);font-size:20px}
/* the footer's legal row, as Natus has it */
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:clamp(26px,4vh,40px);padding-top:18px;border-top:1px solid var(--hairline);font-size:12px;letter-spacing:.06em}
.foot-legal a{color:var(--text-secondary);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.foot-legal a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.foot-legal span{margin-left:auto;color:var(--text-secondary);opacity:.8;display:inline-flex;align-items:center}
@media (max-width:600px){ .foot-legal span{margin-left:0;width:100%} }
.gc-email[hidden]{display:none!important}
.gc-strip{padding-inline:max(20px,var(--gut))}
.gc-card .khatem{--kw:3}
/* every simple cream page (shop, tariff, gift card, story, events, policies, contact) */
body:has(main.page-cream) .site-nav:not(.solid){--nav-ink:var(--text-primary);text-shadow:none;background:color-mix(in srgb,var(--canvas) 88%,transparent);border-bottom-color:var(--hairline)}
body:has(main.page-cream) .site-nav .nav-mark .khatem{--k-line:#7A3B22 !important;--k-drop:#C9A24A !important}
body:has(main.page-cream) .site-nav .nav-mark .wm{color:#7A3B22 !important}


/* ---------- 46. THE KHATEM SEAL (founder's choice B + C, 2026-10-10) ---------- */
.bag-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.bag-seal{display:grid;justify-items:center;gap:8px;margin-top:4px}
.bag-seal-hint{margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);text-align:center;min-height:1.4em}
.bag-go.seal{all:unset;box-sizing:border-box;position:relative;width:112px;height:112px;cursor:pointer;touch-action:none;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;border-radius:50%}
.bag-go.seal:focus-visible{outline:2px solid var(--argani-gold-deep);outline-offset:6px}
.bag-go.seal[disabled]{opacity:.4;cursor:default}
.bag-go.seal svg{width:100%;height:100%;overflow:visible;display:block}
.seal-disc{fill:color-mix(in srgb,var(--canvas) 70%,#fff 30%);stroke:var(--hairline-strong);stroke-width:1}
.seal-k{fill:none;stroke:#7A3B22;stroke-width:2.6;stroke-linejoin:round}
[data-world="nila"] .seal-k,[data-world="kohl"] .seal-k{stroke:#F5EEE2}
[data-world="nila"] .seal-disc,[data-world="kohl"] .seal-disc{fill:rgba(255,255,255,.06)}
.seal-drop-line{fill:none;stroke:#C9A24A;stroke-width:1.4}
.seal-drop{fill:#C9A24A}
.seal-ring{fill:none;stroke:#C9A24A;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;transform:rotate(-90deg);transform-origin:50px 50px}
.seal-ripple{fill:none;stroke:#7A3B22;stroke-width:1.2;opacity:0;transform-origin:50px 50px}
.bag-go.seal.is-sealed{animation:seal-stamp .5s cubic-bezier(.2,.8,.2,1)}
.bag-go.seal.is-sealed .seal-ripple{animation:seal-ripple 1s ease-out both}
@keyframes seal-stamp{40%{transform:scale(.92)}100%{transform:none}}
@keyframes seal-ripple{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){.bag-go.seal.is-sealed,.bag-go.seal.is-sealed .seal-ripple{animation:none}}
/* the confirmation, inside the bag */
.bag-panel.is-done > :not(.bag-done){display:none!important}
.bag-done[hidden]{display:none}
.bag-done{flex:1;display:grid;place-items:center;padding:30px 26px;text-align:center;position:relative;z-index:1}
.bag-done-in{display:grid;justify-items:center;gap:6px;max-width:30ch}
.bag-done-k{width:84px;height:84px;margin-bottom:10px;animation:seal-stamp .6s cubic-bezier(.2,.8,.2,1)}
[data-world="nila"] .bag-done-k path[stroke],[data-world="kohl"] .bag-done-k path[stroke]{stroke:#F5EEE2}
.bag-done-t{font-family:var(--display);font-style:italic;font-weight:400;font-size:36px;line-height:1.1;color:var(--accent);margin:0;outline:none}
.bag-done-meta{margin:8px 0 2px;font-size:12.5px;letter-spacing:.06em;color:var(--text-secondary);line-height:1.8}
.bag-done-meta b{display:block;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--text-primary)}
.bag-done-p{margin:0 0 16px;color:var(--text-secondary);line-height:1.6}
.bag-done-x{margin-top:10px;background:none;border:0;color:var(--text-secondary);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;min-height:44px}
/* the panel is anchored to the right edge at full height (an older rule had made it
   relative, so it followed its content and sat at the left on a wide screen) */
.bag-panel{position:absolute!important;top:0;right:0;bottom:0}
.bag-done{padding-top:176px}
.bag-panel{overflow-y:auto;overscroll-behavior:contain}
.bag-panel .bag-lines{flex:none;overflow:visible}
.bag-panel .bag-foot,.bag-panel .bag-pair{flex:none}
/* small laptops: five house links leave room for one page link, the order */
@media (min-width:980px) and (max-width:1180px){ .nav-links a:not(.nav-cta){display:none} }

/* ---------- 47. LEGAL LINES, FAQ, NOT FOUND (2026-10-11) ---------- */
.bag-legal,.gc-legal{margin:0;font-size:11.5px;line-height:1.55;color:var(--text-secondary);text-align:center}
.gc-legal{text-align:left}
.bag-legal a,.gc-legal a,.letter-sub a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.faq-group{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-family:var(--body);font-weight:400;margin:34px 0 4px}
.faq .t-1{margin-bottom:6px}
.faq-more{margin-top:26px}
.faq-more a,.contact-more a{color:var(--argani-terracotta)}
.contact-more{margin-top:22px;font-size:14px;color:var(--text-secondary)}
.policy-body ul{padding-left:1.1em}
.policy-body li{margin:.35em 0}
.policy-body b{font-weight:400;color:var(--text-primary)}
.policy-sign{margin-top:2.4em;font-size:12px;letter-spacing:.08em;color:var(--text-secondary);opacity:.8}
.notfound{text-align:center}
.notfound .nf-orn{width:46px;height:46px;margin:0 auto 12px;display:block;color:var(--argani-terracotta)}
.notfound .story-cta{justify-content:center}
.site-foot .letter-sub a{padding:0!important;border:0!important;display:inline;min-height:0}


/* ---------- 48. ROUND 2026-10-12 ---------- */
/* H3: the header in Cormorant small capitals (founder's choice) */
.nav-house a,.nav-links a{font-family:var(--display);font-weight:500;font-variant:small-caps;text-transform:lowercase;
  font-size:19px;letter-spacing:.12em;-webkit-text-stroke:0!important;line-height:1}
.site-nav:not(.solid) .nav-house a,.site-nav:not(.solid) .nav-links a{-webkit-text-stroke:0!important}
/* every khatem carries its gold drop */
.khatem.ornament .k-drop{fill:var(--argani-gold)}
[data-world="kohl"] .khatem.ornament .k-drop{fill:var(--argani-gold)}
/* prices on the home page */
.doors-kicker{text-align:center;margin:clamp(40px,6vh,72px) 0 -10px}
.door-price{display:block;margin-top:10px;font-family:var(--display);font-size:19px;color:var(--accent);font-variant-numeric:lining-nums}
.doors.is-four .door-price{margin-top:6px;font-size:17px}
.shelf-price{margin:6px 0 0;font-family:var(--display);font-size:17px;color:var(--accent);font-variant-numeric:lining-nums}
/* a film in a section, over its poster */
.mem-film{position:relative;overflow:hidden;border-radius:var(--r-sm)}
.mem-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease-soft)}
.mem-film.film-on video{opacity:1}


/* ---------- 49. THE OPEN HOUSE (founder, 2026-10-12) ---------- */
.ev-hero{position:relative;isolation:isolate;min-height:min(86vh,760px);display:grid;align-items:end;overflow:hidden;background:#1d140e;color:#FBF5EA;padding-block:0}
.ev-hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ev-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(20,12,6,.35) 0%,rgba(20,12,6,.25) 40%,rgba(20,12,6,.82) 100%)}
.ev-hero-in{padding-block:clamp(110px,16vh,180px) clamp(40px,7vh,80px);text-align:center;display:grid;justify-items:center}
.ev-hero .kicker{color:#E7C98A}
.ev-orn{width:44px;height:44px;margin-bottom:12px;--k-line:#F5EEE2}
.ev-orn .k-line{stroke:#F5EEE2}
.ev-title{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(38px,6.4vw,76px);line-height:1.04;margin:10px 0 0;max-width:16ch;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.ev-lede{max-width:52ch;margin:18px auto 0;line-height:1.75;color:rgba(251,245,234,.88)}
.ev-cta{margin-top:26px}
.ev-hero .btn-ghost{color:#FBF5EA;border-color:rgba(251,245,234,.6)}
.ev-hero .btn-ghost:hover{background:rgba(251,245,234,.12);color:#fff}

.ev-moments{padding-block:var(--sec-y)}
.ev-moments .t-2{margin:8px 0 26px}
.ev-steps{list-style:none;margin:0;padding:0;display:grid;gap:22px}
@media (min-width:720px){.ev-steps{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.ev-steps{grid-template-columns:repeat(4,1fr)}}
.ev-steps li{display:grid;gap:8px;align-content:start}
.ev-steps img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-sm);display:block;margin-bottom:6px}
.ev-n{font-family:var(--display);font-style:italic;font-size:20px;color:var(--accent)}
.ev-steps h3{font-family:var(--display);font-weight:400;font-size:25px;margin:0}
.ev-steps p{margin:0;color:var(--text-secondary);line-height:1.7}

.ev-films{padding-block:var(--sec-y);background:#1d140e;color:#FBF5EA}
.ev-films .kicker{color:#E7C98A}
.ev-films .t-2{margin:8px 0 24px;color:#FBF5EA}
.ev-film-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.ev-film{position:relative;margin:0;scroll-snap-align:start;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:9/16;background:#000}
.ev-film img,.ev-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ev-film video{opacity:0;transition:opacity .6s var(--ease-soft)}
.ev-film.film-on video{opacity:1}
.ev-film figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 16px;background:linear-gradient(transparent,rgba(0,0,0,.7));font-family:var(--display);font-style:italic;font-size:19px}
.ev-sound{position:absolute;top:12px;right:12px;z-index:2;font:inherit;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#FBF5EA;background:rgba(0,0,0,.45);border:1px solid rgba(251,245,234,.5);border-radius:99px;padding:8px 12px;min-height:36px;cursor:pointer}
.ev-film.is-loud .ev-sound{background:#C9A24A;color:#2B1D14;border-color:#C9A24A}

.ev-gallery{padding-block:var(--sec-y)}
.ev-gallery .t-2{margin:8px 0 6px}
.ev-chips{margin:14px 0 22px}
.ev-chips .shop-chip{font:inherit;cursor:pointer;background:none}
.ev-chips .shop-chip.is-on{background:var(--argani-terracotta);border-color:var(--argani-terracotta);color:var(--argani-cream)}
.ev-grid{list-style:none;margin:0;padding:0;columns:2 160px;column-gap:10px}
@media (min-width:900px){.ev-grid{columns:4;column-gap:14px}}
.ev-grid li{break-inside:avoid;margin:0 0 10px}
@media (min-width:900px){.ev-grid li{margin-bottom:14px}}
.ev-grid li[hidden]{display:none}
.ev-shot{all:unset;display:block;cursor:zoom-in;border-radius:var(--r-sm);overflow:hidden}
.ev-shot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ev-shot img{width:100%;height:auto;display:block;transition:transform .8s var(--ease-out)}
.ev-shot:hover img{transform:scale(1.03)}

.ev-shop{padding-block:var(--sec-y);background:var(--panel);border-block:1px solid var(--hairline)}
.ev-shop .t-2{margin:8px 0 20px}
.ev-host{padding-block:var(--sec-y)}
.ev-host-in{display:grid;gap:clamp(22px,4vw,56px);align-items:center}
@media (min-width:860px){.ev-host-in{grid-template-columns:1fr 1fr}}
.ev-host-fig{margin:0}
.ev-host-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;border-radius:var(--r-sm);display:block}
.ev-cta-left{justify-content:flex-start}
.ev-next{border-top:1px solid var(--hairline)}

.ev-box{position:fixed;inset:0;z-index:95;background:rgba(14,9,5,.94);display:grid;place-items:center;padding:56px 12px}
.ev-box[hidden]{display:none}
.ev-box figure{margin:0;display:grid;gap:10px;justify-items:center;max-width:min(1000px,100%)}
.ev-box img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--r-sm)}
.ev-box figcaption{color:#E9DCC6;font-family:var(--display);font-style:italic;font-size:18px;text-align:center}
.ev-box-x{position:absolute;top:10px;right:14px;font-size:34px;line-height:1;color:#FBF5EA;background:none;border:0;cursor:pointer;min-width:44px;min-height:44px}
.ev-box-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:46px;color:#FBF5EA;background:rgba(0,0,0,.3);border:0;border-radius:99px;width:48px;height:48px;line-height:1;cursor:pointer}
.ev-prev{left:10px}.ev-next{right:10px}
@media (prefers-reduced-motion:reduce){.ev-shot img{transition:none}}
/* the header over the hero film reads cream */
body:has(main.page-events) .site-nav:not(.solid){--nav-ink:#FBF5EA;background:linear-gradient(to bottom,rgba(20,12,6,.62),rgba(20,12,6,.34));border-bottom-color:rgba(243,234,218,.14)}
body:has(main.page-events) .site-nav:not(.solid) .nav-mark .khatem{--k-line:#F5EEE2 !important}
body:has(main.page-events) .site-nav:not(.solid) .nav-mark .wm{color:#F5EEE2 !important}
/* wide screens: the sharp photograph; phones: the film, which fits their shape */
.ev-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:-2}
@media (min-width:760px){ .ev-hero-film{display:none} }
@media (max-width:759px){ .ev-hero-img{display:none} }
.ev-box{z-index:300}