/* self-hosted fonts */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-300-italic.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/jost-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Tenor Sans";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/tenor-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Alike";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/alike-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300 600;font-display:swap;src:url(assets/fonts/montserrat-latin-variable-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/montserrat-latin-400-italic.woff2) format("woff2")}
/* =========================================================
   AYOOSH — Live Beautifully
   Design system & layout
   ========================================================= */

:root{
  /* palette */
  --ivory:#F7F4EF;
  --paper:#FBFAF7;
  --greige:#ECE7DF;
  --stone:#DCD5CA;
  --sand:#C9BEAE;
  --taupe:#8E8579;
  --smoke:#5E5A54;
  --charcoal:#262522;
  --ink:#151513;
  --bronze:#A8865B;
  --bronze-soft:#C8AD86;
  --sun:#E8C873;
  --line:rgba(38,37,34,.14);
  --line-light:rgba(247,244,239,.22);

  /* type */
  --f-display:"Cormorant Garamond", "Times New Roman", serif;
  --f-sans:"Jost", "Helvetica Neue", Arial, sans-serif;
  --f-heading:var(--f-display);   /* sub-headings and quotes */
  --f-em:var(--f-display);        /* italic words */
  /* Admin -> Website content: --hs headings, --ts text, --ss section spacing
     (page multipliers, 1 = as designed); role sizes --<role>-m/-v/-d. */

  /* rhythm */
  --gutter:clamp(20px, 4vw, 64px);
  --max:1600px;
  --header-h:118px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--charcoal);
  font-family:var(--f-sans);font-weight:300;font-size:calc(var(--body-size,15px) * var(--ts,1));line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--charcoal);color:var(--ivory)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type scale ---------- */
.eyebrow{font-family:var(--f-sans);font-size:calc(var(--label-d,11px) * var(--ts,1));font-weight:500;letter-spacing:var(--label-ls,.28em);text-transform:uppercase;color:var(--taupe)}
.eyebrow.light{color:rgba(247,244,239,.75)}
.display{font-family:var(--f-display);font-weight:300;letter-spacing:var(--display-ls,.01em);line-height:1.02;margin:0}
.h1{font-size:calc(clamp(var(--h1-m,46px),var(--h1-v,7vw),var(--h1-d,116px)) * var(--hs,1))}
.h2{font-size:calc(clamp(var(--h2-m,36px),var(--h2-v,4.6vw),var(--h2-d,72px)) * var(--hs,1))}
.h3{font-size:calc(clamp(var(--h3-m,28px),var(--h3-v,3vw),var(--h3-d,44px)) * var(--hs,1))}
.caps{font-family:var(--f-sans);font-weight:300;text-transform:uppercase;letter-spacing:.14em;line-height:1.12}
.caps.xl{font-size:calc(clamp(34px,4.4vw,68px) * var(--hs,1))}
.caps.lg{font-size:calc(clamp(28px,3.4vw,52px) * var(--hs,1))}
.serif-caps{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.08em;line-height:1.08;margin:0}
.lede{font-size:calc(clamp(var(--lede-m,16px),var(--lede-v,1.25vw),var(--lede-d,18px)) * var(--ts,1));line-height:1.8;color:var(--smoke);max-width:56ch}
.small{font-size:calc(var(--small-d,13px) * var(--ts,1));color:var(--taupe)}
em,.ital{font-family:var(--f-em);font-style:var(--em-style,italic);font-weight:300}
.rt-em{font-style:italic}.rt-upright{font-style:normal}
html[data-italic="none"] *{font-style:normal!important} /* Theme or page: "No italic anywhere" */
.h3,.jcard h3,.quote blockquote,.abody blockquote{font-family:var(--f-heading)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  height:52px;padding:0 34px;border:1px solid var(--charcoal);
  font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;background:var(--charcoal);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease-out);z-index:-1}
.btn:hover{color:var(--ivory)}
.btn:hover::before{transform:scaleY(1)}
.btn.solid{background:var(--charcoal);color:var(--ivory)}
.btn.solid::before{background:var(--bronze)}
.btn.light{border-color:rgba(247,244,239,.8);color:var(--ivory)}
.btn.light::before{background:var(--ivory)}
.btn.light:hover{color:var(--charcoal)}
.btn.pill{border-radius:999px;height:46px;padding:0 30px}
.btn.block{width:100%}
.btn .arr{width:22px;height:1px;background:currentColor;position:relative;transition:width .4s var(--ease)}
.btn .arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover .arr{width:32px}
.link{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;padding-bottom:6px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.link:hover{background-size:30% 1px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:calc(clamp(var(--sec-m,80px),var(--sec-v,10vw),var(--sec-d,160px)) * var(--ss,1)) 0}
.section.tight{padding:calc(clamp(var(--sec-m,80px) * .7,var(--sec-v,10vw) * .6,var(--sec-d,160px) * .6) * var(--ss,1)) 0}
/* Sun Cream: more space between sections, with original media only. */
html[data-range="sun"] #main > section + section{margin-top:clamp(32px,4vw,64px)}
html[data-range="sun"] #main > .section{padding-block:calc(clamp(96px,11vw,176px) * var(--ss,1))}
html[data-range="sun"] .sun-sw{gap:clamp(20px,2.5vw,40px)}
html[data-range="sun"] .trio{gap:clamp(24px,3vw,48px)}
html[data-range="sun"] #main .art,html[data-range="sun"] #main .slot{display:none}
html[data-range="sun"] #main > footer{margin-top:clamp(40px,5vw,80px)}
/* Rejoosh: original media and generous spacing between sections. */
html[data-range="rejoosh"] #main > section + section{margin-top:clamp(32px,4vw,64px)}
html[data-range="rejoosh"] #main > .section{padding-block:calc(clamp(96px,11vw,176px) * var(--ss,1))}
html[data-range="rejoosh"] .solo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,4vw,64px)}
html[data-range="rejoosh"] .solo-media{gap:clamp(12px,1.5vw,24px)}
html[data-range="rejoosh"] .solo-copy{padding:clamp(32px,4.5vw,80px)}
html[data-range="rejoosh"] .split{column-gap:clamp(24px,4vw,64px)}
html[data-range="rejoosh"] #main .m:not([data-video="rejoosh-hero"]) .art,html[data-range="rejoosh"] #main .slot{display:none}
html[data-range="rejoosh"] #main > footer{margin-top:clamp(40px,5vw,80px)}
@media(max-width:860px){html[data-range="rejoosh"] .solo{grid-template-columns:1fr;row-gap:24px}}
.rule{height:1px;background:var(--line);border:0;margin:0}
.bg-ivory{background:var(--ivory)}
.bg-greige{background:var(--greige)}
.bg-charcoal{background:var(--charcoal);color:var(--ivory)}
.center{text-align:center}

/* ---------- announcement ---------- */
.announce{background:var(--charcoal);color:var(--ivory);height:34px;display:flex;align-items:center;justify-content:center;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;position:relative;z-index:60;overflow:hidden}
.announce span{position:absolute;transition:opacity .8s,transform .8s var(--ease)}
.announce span:not(.on){opacity:0;transform:translateY(10px)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;color:var(--charcoal);transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s,transform .5s var(--ease)}
.hdr-inner{height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.hdr .nav-l,.hdr .nav-r{display:flex;align-items:center;gap:30px}
.hdr .nav-r{justify-content:flex-end;gap:22px}
.hdr .nav-l a,.hdr .nav-l button,.hdr .region{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;position:relative;padding:6px 0}
.hdr .nav-l a::after,.hdr .nav-l button::after,.hdr .sub a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.hdr .nav-l a:hover::after,.hdr .nav-l button:hover::after,.hdr .sub a:hover::after,.hdr .sub a.on::after{transform:scaleX(1);transform-origin:left}
.hdr .logo{display:block;width:clamp(128px,11vw,168px);color:currentColor}
.hdr .logo svg{width:100%;height:auto;fill:currentColor}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.2}
.ico-btn{position:relative;display:grid;place-items:center;width:28px;height:28px}
.bag-count{position:absolute;top:-4px;right:-7px;min-width:16px;height:16px;border-radius:8px;background:var(--bronze);color:#fff;font-size:9px;font-weight:500;display:grid;place-items:center;padding:0 4px;transform:scale(0);transition:transform .4s var(--ease-out)}
.bag-count.on{transform:scale(1)}
.hdr .sub{height:42px;display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.6vw,44px);border-top:1px solid var(--line)}
.hdr .sub a{font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;position:relative;padding:4px 0}
.hdr.solid{background:rgba(251,250,247,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.hdr.over{background:transparent;color:var(--ivory);box-shadow:none}
.hdr.over .sub{border-top-color:var(--line-light)}
.hdr.hide{transform:translateY(-100%)}
.burger{display:none}

/* overlap header on hero pages */
body.has-hero main{margin-top:calc(-1 * var(--header-h))}

/* mega menu */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);color:var(--charcoal);border-top:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega-grid{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:60px;padding-top:48px;padding-bottom:56px}
.mega h4{margin:0 0 18px;font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe)}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mega li a{font-family:var(--f-display);font-size:24px;font-weight:300;transition:color .3s,padding .4s var(--ease)}
.mega li a:hover{color:var(--bronze);padding-left:8px}
.mega .feature{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mega .feature .m{aspect-ratio:4/5}
.mega .feature p{margin:12px 0 0;font-size:12px;letter-spacing:.18em;text-transform:uppercase}

/* ---------- media slots & placeholder art ---------- */
.m{position:relative;overflow:hidden;background:var(--stone);isolation:isolate}
.m > video,.m > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;opacity:0;transition:opacity 1.2s var(--ease)}
.m.loaded > video,.m.loaded > img{opacity:1}
.hero .m > video{transition-duration:.25s}
.m.loaded .art,.m.loaded .slot{opacity:0}
/* Sun Cream and Sunglasses films: no drawn placeholder while a film loads, only
   the film itself. Page films sit on the page colour until they fade in; the
   banner films sit on a plain dark backdrop so the white headline stays legible. */
.m[data-video^="sun-"],.m[data-video^="eyewear-"]{background:transparent}
.m[data-video^="sun-"] > .art,.m[data-video^="eyewear-"] > .art,
.m[data-video^="sun-"] > .slot,.m[data-video^="eyewear-"] > .slot{display:none}
.m[data-video="sun-hero"],.m[data-video="eyewear-hero"]{background:var(--ink)}
/* A bundled film shows its own first frame (poster) immediately, so it is
   visible from the first paint and simply starts moving when it can play. */
.m.has-poster > video{opacity:1;transition:none}
.m.has-poster > .art,.m.has-poster > .slot{display:none}
.hero.home .m[data-video="home-hero"] .art{background:var(--charcoal) url('/assets/img/final-landing-poster.jpg') center/cover no-repeat}
.hero .m[data-video="rejoosh-hero"] .art{background:var(--charcoal) url('/assets/img/rejoosh-landing-poster.jpg') center/cover no-repeat}
.hero .m[data-video="about-hero"] .art{background:var(--charcoal) url('/assets/img/our-story-landing-poster.jpg') center/cover no-repeat}
.preview-media-label{position:absolute;left:10px;bottom:10px;z-index:4;padding:3px 8px;background:rgba(251,250,247,.9);color:var(--charcoal);font-family:var(--f-sans);font-size:10px;line-height:1.6;letter-spacing:.06em;pointer-events:none}
.art{position:absolute;inset:-6%;z-index:0;transition:opacity 1s;animation:drift 22s ease-in-out infinite alternate}
.art::after{content:"";position:absolute;inset:0;opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(-1.5%,1%,0)}}
.art.stone{background:radial-gradient(80% 70% at 70% 30%,#F3EEE6 0%,transparent 60%),radial-gradient(70% 80% at 20% 90%,#C9BEAE 0%,transparent 70%),linear-gradient(160deg,#E8E1D6,#D2C8B9)}
.art.sun{background:radial-gradient(45% 45% at 72% 28%,#FFF4D6 0%,rgba(255,236,190,.0) 70%),radial-gradient(90% 60% at 30% 100%,#D9B77A 0%,transparent 70%),linear-gradient(170deg,#F2E3C2 0%,#E6C98F 55%,#C99E62 100%)}
.art.ruby{background:radial-gradient(50% 50% at 70% 30%,#F7E3DE 0%,transparent 70%),radial-gradient(80% 70% at 20% 100%,#A65B5B 0%,transparent 70%),linear-gradient(165deg,#E9CFC8,#C08A84 60%,#8F4C4F)}
.art.jade{background:radial-gradient(50% 50% at 70% 25%,#EEF1E8 0%,transparent 70%),radial-gradient(80% 70% at 20% 100%,#6F8A78 0%,transparent 70%),linear-gradient(165deg,#DCE3D6,#A8B9A6 60%,#6E8572)}
.art.citrine{background:radial-gradient(50% 50% at 70% 25%,#FFF1D9 0%,transparent 70%),radial-gradient(80% 70% at 15% 100%,#C7843E 0%,transparent 70%),linear-gradient(165deg,#F4DDB7,#E0AE6C 60%,#B9783B)}
.art.pearl{background:radial-gradient(50% 50% at 30% 25%,#FFFFFF 0%,transparent 70%),radial-gradient(60% 60% at 80% 80%,#E3DCEB 0%,transparent 70%),radial-gradient(60% 60% at 20% 90%,#E6EEEA 0%,transparent 70%),linear-gradient(165deg,#F5F2EE,#DCD6D2)}
.art.noir{background:radial-gradient(60% 60% at 70% 30%,#4A4640 0%,transparent 70%),linear-gradient(165deg,#2C2A27,#141311)}
.art.amber{background:radial-gradient(50% 55% at 65% 35%,#F3D9B5 0%,transparent 70%),radial-gradient(80% 70% at 20% 100%,#7A5A3A 0%,transparent 70%),linear-gradient(165deg,#D9B88E,#9C7449 60%,#5E412A)}
.art.sea{background:radial-gradient(60% 40% at 70% 20%,#FFF6E0 0%,transparent 70%),linear-gradient(180deg,#E9DCC2 0%,#E9DCC2 45%,#A9BCC0 46%,#7F9AA0 100%)}
.art .obj{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);height:62%;width:auto;filter:drop-shadow(0 40px 40px rgba(40,30,20,.22)) drop-shadow(0 6px 8px rgba(40,30,20,.12))}
.art .obj.wide{height:auto;width:58%}
.slot{position:absolute;z-index:3;left:14px;bottom:12px;font:500 9.5px/1 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(38,37,34,.55);display:flex;align-items:center;gap:8px;pointer-events:none;transition:opacity .6s}
.slot::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid currentColor}
.on-dark .slot,.art.noir ~ .slot,.slot.light{color:rgba(247,244,239,.6)}
body.hide-slots .slot{display:none}
.m .shade{position:absolute;inset:0;z-index:3;pointer-events:none}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;color:var(--ivory);overflow:hidden}
.hero .m{position:absolute;inset:0}
.hero .shade{background:linear-gradient(180deg,rgba(20,19,17,.35) 0%,rgba(20,19,17,0) 30%,rgba(20,19,17,0) 55%,rgba(20,19,17,.45) 100%)}
.hero-center{position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;padding:var(--header-h) var(--gutter) 0}
.hero-mark{width:min(560px,74vw);fill:currentColor}
.tagline{font-family:var(--f-display);font-weight:400;font-size:clamp(15px,1.6vw,24px);letter-spacing:.38em;text-transform:uppercase;margin-top:clamp(14px,1.6vw,24px);padding-left:.38em}
.hero-foot{position:absolute;z-index:4;left:var(--gutter);right:var(--gutter);bottom:clamp(28px,4vw,56px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.scroll-cue{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.3em;text-transform:uppercase}
.scroll-cue i{display:block;width:1px;height:46px;background:rgba(247,244,239,.35);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--ivory);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{to{top:100%}}
.reel{position:absolute;z-index:4;right:var(--gutter);top:50%;transform:translateY(-38%);width:clamp(170px,15vw,250px);aspect-ratio:9/14;border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25)}
.reel .m{position:absolute;inset:0}
.reel .cap{position:absolute;z-index:4;left:16px;right:16px;bottom:16px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.reel .play{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.7);display:grid;place-items:center}
.reel .play::after{content:"";border-left:7px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}

/* collection hero (title bottom-left) */
.hero.collection .hero-title{position:absolute;z-index:4;left:var(--gutter);bottom:clamp(40px,6vw,96px);max-width:760px}
.hero.collection .hero-title .display{font-size:calc(clamp(var(--banner-m,64px),var(--banner-v,10vw),var(--banner-d,168px)) * var(--hs,1));line-height:.92}
.hero.collection .hero-title p{margin:18px 0 30px;max-width:44ch;color:rgba(247,244,239,.85);font-size:16px}
.hero.short{height:78svh;min-height:560px}

/* ---------- marquee ---------- */
.home-promotion{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);margin-top:clamp(28px,4vw,64px);margin-bottom:clamp(16px,2vw,32px);background:var(--ivory)}
.home-promotion-copy{padding:clamp(32px,4.5vw,72px);align-self:center}
.home-promotion-copy .display{margin:14px 0 18px}
.home-promotion-copy .lede{margin:0 0 26px;max-width:36ch}
.home-promotion-copy .btn{max-width:100%;height:auto;min-height:52px;padding:14px 22px;text-align:center}
.home-promotion > .m{min-height:320px}
@media(max-width:700px){.home-promotion{grid-template-columns:1fr;row-gap:20px}.home-promotion-copy{padding:32px 24px}.home-promotion > .m{min-height:0;aspect-ratio:16/10}}
.marquee{overflow:hidden;white-space:nowrap;border:0;padding:14px 0;background:var(--ivory)}
.marquee.dark{background:var(--charcoal);color:var(--ivory)}
.marquee .track{display:inline-flex;gap:56px;animation:mq 46s linear infinite;padding-left:56px}
.marquee span{font-family:var(--f-display);font-size:clamp(16px,1.7vw,24px);font-weight:300;display:inline-flex;align-items:center;gap:56px}
.marquee span::after{content:"";width:7px;height:7px;border:1px solid var(--bronze);transform:rotate(45deg)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- section heads ---------- */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(40px,5vw,72px)}
.head .display{margin-top:14px}
.head p{margin:16px 0 0}

/* ---------- product cards ---------- */
.grid{display:grid;gap:clamp(16px,2vw,32px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;display:block}
.card .m{aspect-ratio:4/5;background:var(--greige)}
.card .badge{position:absolute;z-index:5;top:16px;left:16px;background:var(--paper);font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;padding:7px 12px}
.card .quick{position:absolute;z-index:5;left:16px;right:16px;bottom:16px;height:48px;background:rgba(251,250,247,.94);backdrop-filter:blur(6px);font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;transform:translateY(12px);opacity:0;transition:all .5s var(--ease-out);border:1px solid transparent}
.card .quick:hover{background:var(--charcoal);color:var(--ivory)}
.card:hover .quick,.card:focus-within .quick{transform:none;opacity:1}
.card .m .art{transition:transform 1.4s var(--ease-out),opacity 1s}
.card:hover .m .art{transform:scale(1.05)}
.card .meta{padding-top:20px;display:grid;grid-template-columns:1fr;gap:4px 16px}
.card .name{font-family:var(--f-display);font-size:23px;font-weight:400;line-height:1.2}
.card .desc{grid-column:1;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.card .price{grid-column:1;grid-row:auto;margin-top:6px;font-size:14px;font-weight:400;align-self:baseline}
.card.offset{margin-top:clamp(0px,6vw,96px)}
.swatches{display:flex;gap:6px;margin-top:6px}
.swatches i{width:12px;height:12px;border-radius:50%;border:1px solid var(--line)}

/* ---------- events ---------- */
.events{position:relative;color:var(--ivory);min-height:640px;display:grid;align-items:center}
.events > .m{position:absolute;inset:0}
.events .shade{background:linear-gradient(90deg,rgba(20,19,17,.55),rgba(20,19,17,.15) 70%)}
.events .inner{position:relative;z-index:4;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,120px);align-items:center;padding-top:clamp(80px,9vw,140px);padding-bottom:clamp(80px,9vw,140px)}
.ev-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-light)}
.ev-list li{display:grid;grid-template-columns:88px 1fr auto;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line-light);transition:padding .4s var(--ease)}
.ev-list li:hover{padding-left:10px}
.ev-date{font-family:var(--f-display);font-size:40px;line-height:.9;font-weight:300}
.ev-date small{display:block;font-family:var(--f-sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;margin-top:6px}
.ev-title{font-family:var(--f-display);font-size:24px;line-height:1.2}
.ev-place{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
/* Events page (#/events): the home block's list, on paper, every event */
.ev-hero{min-height:clamp(440px,62vh,640px)}
.ev-hero .inner{grid-template-columns:minmax(0,1fr)}
.ev-hero .h1{margin:18px 0 22px}
.ev-hero .lede{color:rgba(247,244,239,.8);margin:0}
.ev-head{padding-top:clamp(40px,5vw,80px);padding-bottom:0}
.ev-head .h1{margin:18px 0}
.ev-head .lede{margin:0 auto}
.ev-page{padding-top:clamp(48px,6vw,96px)}
.ev-page .head{margin-bottom:clamp(24px,3vw,40px)}
.ev-page-list{border-top-color:var(--line)}
.ev-page-list li{border-bottom-color:var(--line);align-items:start}
.ev-page-list li > *{min-width:0}
.ev-page-list .ev-place{margin-top:8px;color:var(--smoke);opacity:1}
.ev-page-list .link{align-self:center;white-space:nowrap}
.ev-desc{margin:10px 0 0;color:var(--smoke);max-width:62ch;overflow-wrap:anywhere}
.ev-title{overflow-wrap:anywhere}
.ev-empty{text-align:center;max-width:560px;margin:0 auto}
.ev-past-head{margin-top:clamp(56px,7vw,110px)}
.ev-past .ev-date,.ev-past .ev-title{opacity:.72}
.ev-img{display:block;width:100%;max-width:420px;aspect-ratio:3/2;object-fit:cover;margin:0 0 16px}
.ev-empty .h3{margin:0 0 16px}
.ev-empty .lede{margin:0 auto}
.ev-empty .btn{margin-top:30px}
@media (max-width:860px){
  /* .ev-list.ev-page-list: wins over the home list's phone rules further down */
  .ev-list.ev-page-list li{grid-template-columns:64px minmax(0,1fr);gap:18px}
  .ev-list.ev-page-list li .link{display:inline-block;grid-column:2;justify-self:start}
}

/* ---------- editorial split rows ---------- */
.split{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;min-height:clamp(520px,48vw,780px)}
.split.rev{grid-template-columns:1fr 1.25fr}
.split.rev .split-media{order:2}
html[data-page="about"] .split + .split.rev{margin-top:clamp(32px,4vw,64px)}
.split-media{align-self:stretch;position:relative;min-height:420px}
.split-media .m{position:absolute;inset:0}
.split-copy{padding:clamp(48px,7vw,140px)}
.split-copy .display{margin:22px 0 28px}
.split-copy p{margin:0 0 36px}
.foundation-impact{margin:0 0 36px}
.foundation-impact h3{font-family:var(--f-sans);font-size:16px;font-weight:500;line-height:1.5;letter-spacing:0;margin:0 0 22px}
.foundation-impact ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px;list-style:none;padding:0;margin:0;max-width:420px}
.foundation-impact li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-family:var(--f-sans);font-size:13px;font-weight:500;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.foundation-impact svg{width:20px;height:20px;color:var(--taupe);flex-shrink:0}
.split.about-purpose{gap:clamp(24px,4vw,64px);padding:clamp(32px,4vw,64px) var(--gutter);min-height:0}
.split.about-purpose .split-media{align-self:center;min-height:0}
.split.about-purpose .m{position:relative;background:transparent}
.split.about-purpose .m > img{position:relative;display:block;width:100%;height:auto;object-fit:contain}
.stack{display:grid;gap:clamp(24px,3vw,48px)}

/* carousel */
.carousel{position:absolute;inset:0;overflow:hidden}
.carousel .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.carousel .slide.on{opacity:1}
.carousel .slide .m{position:absolute;inset:0}
.car-ui{position:absolute;z-index:6;left:clamp(20px,3vw,40px);right:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,36px);display:flex;align-items:center;gap:22px;color:var(--charcoal)}
.car-ui.light{color:var(--ivory)}
.car-ui .count{font-size:11px;letter-spacing:.2em;font-variant-numeric:tabular-nums}
.car-ui .bar{flex:1;height:1px;background:currentColor;opacity:.25;position:relative}
.car-ui .bar i{position:absolute;left:0;top:0;height:1px;background:currentColor;opacity:1;width:0}
.car-ui .bar i.run{animation:bar 6s linear forwards}
@keyframes bar{to{width:100%}}
.car-ui button{width:42px;height:42px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;opacity:.8;transition:opacity .3s,background .3s}
.car-ui button:hover{opacity:1}
.car-ui svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.2}

/* ---------- pillars strip ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);background:var(--greige)}
.pillars > div{padding:38px 28px;text-align:center;border-right:1px solid var(--line)}
.pillars > div:last-child{border-right:0}
.pillars h5{margin:0 0 6px;font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
.pillars p{margin:0;font-family:var(--f-display);font-size:20px;font-style:var(--em-style,italic);color:var(--smoke)}

/* ---------- ingredient collage (SPF / LACTO-PDRN) ---------- */
.collage{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(60px,auto);gap:clamp(12px,1.4vw,22px)}
.collage .c1{grid-column:1/5;grid-row:1/4;min-height:300px}
.collage .t1{grid-column:5/13;grid-row:1/4;align-self:center;padding-left:clamp(10px,3vw,48px)}
.collage .t2{grid-column:1/5;grid-row:4/7;align-self:center;text-align:right;padding-right:clamp(10px,2vw,24px)}
.collage .c2{grid-column:5/13;grid-row:4/7;min-height:360px}
.collage .m{height:100%}
.big-spf{font-family:var(--f-display);font-weight:300;font-size:calc(clamp(60px,7.5vw,128px) * var(--hs,1));line-height:.9;margin:0}
.big-spf sup{font-size:.3em;letter-spacing:.3em;vertical-align:top;position:relative;top:.4em;display:block;font-family:var(--f-sans)}
.collage .note{margin-top:18px;max-width:30ch;margin-left:auto}
.collage.flip .c1{grid-column:9/13}
.collage.flip .t1{grid-column:1/9;text-align:right;padding:0 clamp(10px,3vw,48px) 0 0}
.collage.flip .t1 .lede{margin-left:auto}
.collage.flip .t2{grid-column:9/13;text-align:left;padding:0 0 0 clamp(10px,2vw,24px)}
.collage.flip .t2 .note{margin-left:0}
.collage.flip .c2{grid-column:1/9}

/* mosaic for foundation page */
.mosaic{display:grid;grid-template-columns:1.1fr .9fr .9fr;grid-template-rows:260px 220px 260px;gap:clamp(12px,1.4vw,22px)}
.mosaic .a{grid-row:1/3}
.mosaic .b{grid-column:3}
.mosaic .t{grid-column:2;grid-row:1;display:flex;align-items:flex-end;justify-content:flex-start;padding:10px 0}
.mosaic .c{grid-column:1;grid-row:3}
.mosaic .d{grid-column:2/4;grid-row:2/4}

/* ---------- three videos row ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px);align-items:start}
.trio .m{aspect-ratio:4/5}
.trio > :nth-child(2){margin-top:clamp(20px,4vw,64px)}
.trio figcaption{margin-top:16px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe)}
.sun-spf-banner,.rejoosh-booster-banner{width:100%;margin:0;padding:0}
.sun-spf-banner .m,.rejoosh-booster-banner .m{width:100%;aspect-ratio:32/15}

/* ---------- Fragrant Fables banner ---------- */
.fables{display:grid;grid-template-columns:1fr 1fr;background:var(--greige);min-height:520px}
.fables .copy{padding:clamp(56px,7vw,120px) var(--gutter);display:flex;flex-direction:column;justify-content:center}
.fables .display{margin:18px 0 24px}
.fables .m{min-height:420px}
.fables.fables-eyewear{column-gap:clamp(24px,3vw,48px);row-gap:28px;background:transparent;align-items:stretch}
.fables-eyewear > .copy{background:var(--greige)}
.fables .m.journal-eyewear{background:rgb(248,180,22)}
.fables .m.journal-eyewear > img{object-fit:contain}

/* ---------- stacked word (GLASSES) ---------- */
.stacked{font-family:var(--f-display);font-weight:300;text-transform:uppercase;letter-spacing:.06em;line-height:.92;font-size:calc(clamp(44px,5.6vw,92px) * var(--hs,1));margin:0}
.stacked span{display:block}
.stacked span:nth-child(2){opacity:.78}.stacked span:nth-child(3){opacity:.6}.stacked span:nth-child(4){opacity:.42}.stacked span:nth-child(5){opacity:.26}.stacked span:nth-child(6){opacity:.14}
.persp{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:clamp(16px,2vw,32px)}
.persp .p1{min-height:clamp(320px,32vw,520px)}
.persp .w{align-self:center;padding-left:clamp(0px,2vw,24px)}
.persp .copy{padding:clamp(20px,3vw,48px) clamp(0px,4vw,64px) 0 0}
.persp .p2{min-height:clamp(320px,28vw,460px)}

/* ---------- contact ---------- */
.contact{background:var(--stone);color:var(--charcoal)}
.contact .inner{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,8vw,140px)}
.contact .display{font-size:calc(clamp(56px,8vw,128px) * var(--hs,1));margin-bottom:40px}
.contact address{font-style:normal;display:grid;gap:10px;margin-bottom:34px}
.field{position:relative;margin-bottom:30px}
.field label{display:block;font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;margin-bottom:6px;color:var(--smoke)}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(38,37,34,.35);padding:10px 0 12px;font-size:16px;outline:0;transition:border-color .3s;border-radius:0}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{border-bottom-color:var(--charcoal)}
.field.err input,.field.err textarea{border-bottom-color:#9B4A3C}
.field .msg{position:absolute;right:0;top:0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#9B4A3C;opacity:0;transition:opacity .3s}
.field.err .msg{opacity:1}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sent{font-family:var(--f-display);font-size:28px;font-style:var(--em-style,italic)}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:rgba(247,244,239,.82)}
.ftr .svc{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(247,244,239,.1)}
.ftr .svc div{padding:30px 20px;text-align:center;font-size:11px;letter-spacing:.24em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:14px}
.ftr .svc svg{width:18px;height:18px;stroke:var(--bronze-soft);fill:none;stroke-width:1.1}
.ftr .main{display:grid;grid-template-columns:1fr 1fr 1fr 1.6fr;gap:clamp(30px,4vw,64px);padding:clamp(64px,7vw,110px) 0 clamp(40px,5vw,70px)}
.ftr h6{margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid rgba(247,244,239,.14);font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--ivory)}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:11px;font-size:14px}
.ftr ul a{transition:color .3s,padding .3s}
.ftr ul a:hover{color:var(--bronze-soft);padding-left:4px}
.ftr .about p{margin:0;font-size:14px;line-height:1.8}
.ftr .signup h6{border:0;padding:0;font-family:var(--f-display);font-size:30px;font-weight:300;letter-spacing:0;text-transform:none;margin-bottom:10px}
.ftr .signup p{font-size:13.5px;margin:0 0 22px;color:rgba(247,244,239,.6)}
.ftr input[type=email],.ftr input[type=text]{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(247,244,239,.3);padding:12px 0;color:var(--ivory);outline:0;margin-bottom:14px;font-size:14px}
.ftr input::placeholder{color:rgba(247,244,239,.45)}
.ftr input:focus{border-bottom-color:var(--ivory)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:12px;line-height:1.6;color:rgba(247,244,239,.55);margin:10px 0 24px;cursor:pointer}
.consent input{appearance:none;-webkit-appearance:none;width:15px;height:15px;border:1px solid rgba(247,244,239,.5);flex:none;margin-top:2px;display:grid;place-items:center;cursor:pointer}
.consent input:checked{background:var(--bronze);border-color:var(--bronze)}
.consent input:checked::after{content:"";width:6px;height:3px;border-left:1.2px solid #fff;border-bottom:1.2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.ftr .brand{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding-bottom:36px}
.ftr .brand svg{width:clamp(180px,24vw,360px);fill:var(--ivory)}
.ftr .brand .tagline{font-size:clamp(11px,1.1vw,15px);color:rgba(247,244,239,.8);margin-top:12px}
.socials{display:flex;gap:12px}
.socials a{width:42px;height:42px;border:1px solid rgba(247,244,239,.25);border-radius:50%;display:grid;place-items:center;transition:background .3s,border-color .3s}
.socials a:hover{background:var(--ivory);border-color:var(--ivory)}
.socials a:hover svg{stroke:var(--ink)}
.socials svg{width:16px;height:16px;stroke:var(--ivory);fill:none;stroke-width:1.3}
.ftr .legal{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(247,244,239,.12);padding:24px 0 30px;font-size:11.5px;letter-spacing:.06em;color:rgba(247,244,239,.5)}
.ftr .legal nav{display:flex;gap:24px}

/* ---------- drawer (bag) ---------- */
.scrim{position:fixed;inset:0;background:rgba(21,21,19,.4);z-index:80;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;backdrop-filter:blur(2px)}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;z-index:90;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--paper);transform:translateX(100%);transition:transform .7s var(--ease-out);display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer-h{display:flex;justify-content:space-between;align-items:center;padding:28px 32px;border-bottom:1px solid var(--line)}
.drawer-h h3{margin:0;font-family:var(--f-display);font-weight:300;font-size:30px}
.drawer-b{flex:1;overflow:auto;padding:8px 32px}
.drawer-f{padding:24px 32px 30px;border-top:1px solid var(--line);display:grid;gap:14px}
.line-item{display:grid;grid-template-columns:84px 1fr auto;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.line-item .m{aspect-ratio:4/5}
.line-item h4{margin:0;font-family:var(--f-display);font-size:20px;font-weight:400;line-height:1.2}
.line-item .small{margin:2px 0 12px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);height:34px}
.qty button{width:32px;height:100%}
.qty span{min-width:24px;text-align:center;font-size:13px}
.rm{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);text-decoration:underline;text-underline-offset:4px;margin-top:8px;display:block}
.tot{display:flex;justify-content:space-between;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.tot strong{font-weight:500;font-size:15px;letter-spacing:.06em}
.empty{text-align:center;padding:80px 0}
.empty p{font-family:var(--f-display);font-size:26px;font-style:var(--em-style,italic);margin:0 0 26px}
.ship-meter{font-size:12px;color:var(--smoke)}
.ship-meter .bar{height:2px;background:var(--greige);margin-top:10px;position:relative}
.ship-meter .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--bronze);transition:width .6s var(--ease)}

/* ---------- search overlay ---------- */
.search{position:fixed;inset:0 0 auto 0;z-index:95;background:var(--paper);transform:translateY(-102%);transition:transform .7s var(--ease-out);padding:40px 0 60px;box-shadow:0 40px 80px -40px rgba(0,0,0,.25)}
.search.on{transform:none}
.search .bar-in{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--charcoal);padding-bottom:14px}
.search input{flex:1;border:0;background:transparent;outline:0;font-family:var(--f-display);font-size:clamp(28px,3.4vw,48px);font-weight:300}
.search .res{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px}
.search .res .card .name{font-size:19px}
.search .sugg{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.chip{height:36px;padding:0 18px;border:1px solid var(--line);border-radius:999px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;transition:all .3s}
.chip:hover,.chip.on{background:var(--charcoal);color:var(--ivory);border-color:var(--charcoal)}

/* region modal */
.modal{position:fixed;z-index:96;left:50%;top:50%;width:min(520px,92vw);background:var(--paper);padding:44px;transform:translate(-50%,-46%);opacity:0;visibility:hidden;transition:all .5s var(--ease-out)}
.modal.on{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
.modal h3{margin:0 0 24px;font-family:var(--f-display);font-weight:300;font-size:34px}
.region-list{display:grid;gap:0;border-top:1px solid var(--line)}
.region-list button{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;text-align:left}
.region-list button span{color:var(--taupe);font-size:12px;letter-spacing:.14em}
.region-list button.on{font-weight:500}
.x{width:36px;height:36px;display:grid;place-items:center}
.x svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.2;fill:none}

/* toast */
.toast{position:fixed;z-index:99;left:50%;bottom:30px;transform:translate(-50%,30px);background:var(--charcoal);color:var(--ivory);padding:16px 26px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:all .5s var(--ease-out);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- shop page ---------- */
.benefits{background:var(--ivory);padding:22px 0;text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.benefits b{font-weight:500}
.benefits .sep{display:inline-block;width:5px;height:5px;border:1px solid var(--bronze);transform:rotate(45deg);margin:0 18px 2px}
.filters{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:48px;position:sticky;top:calc(var(--header-h) - 1px);background:var(--paper);z-index:20}
.filters .chips{display:flex;gap:10px;flex-wrap:wrap}
.filters select{border:0;background:transparent;font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;outline:0}
.shop-grid{grid-template-columns:repeat(4,1fr);row-gap:clamp(40px,4vw,64px)}
.shop-grid .card.start-row{grid-column:1}

/* ---------- about ---------- */
.manifesto{max-width:880px;margin:0 auto;text-align:center}
.manifesto .display{margin:22px 0 40px}
.manifesto p{font-size:17px;line-height:1.95;color:var(--smoke);margin:0 0 22px}
.manifesto .drop::first-letter{font-family:var(--f-display);font-size:4.2em;float:left;line-height:.8;padding:8px 14px 0 0;color:var(--bronze)}
.page-title{display:flex;justify-content:space-between;align-items:baseline;padding-top:36px;padding-bottom:0;border-bottom:1px solid var(--line)}
.page-title .display{font-size:calc(clamp(var(--ptitle-m,56px),var(--ptitle-v,9vw),var(--ptitle-d,150px)) * var(--hs,1));line-height:.95;margin:0 0 -0.12em}

/* ---------- foundation ---------- */
.focus{grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.focus article{padding:44px clamp(20px,3vw,44px) 50px 0;border-right:1px solid var(--line);margin-right:clamp(20px,3vw,44px)}
.focus article:last-child{border-right:0;margin-right:0}
.focus article:nth-child(3){border-right:0}
.focus .n{font-family:var(--f-display);font-size:64px;font-weight:300;color:var(--bronze);line-height:1}
.focus h4{margin:26px 0 14px;font-size:12px;font-weight:500;letter-spacing:.26em;text-transform:uppercase}
.focus p{margin:0;color:var(--smoke)}
.steps{grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);counter-reset:s}
.steps article{background:var(--paper);padding:34px 28px 40px;position:relative;transition:transform .5s var(--ease-out),box-shadow .5s}
.steps article:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(0,0,0,.2)}
.steps .k{font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--bronze)}
.steps h4{font-family:var(--f-display);font-weight:400;font-size:26px;margin:20px 0 12px;line-height:1.15}
.steps p{margin:0;font-size:14px;color:var(--smoke)}
.impact{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,7vw,120px);align-items:center}
.metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-light);border-left:1px solid var(--line-light)}
.metrics div{padding:36px 30px;border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}
.metrics b{display:block;font-family:var(--f-display);font-weight:300;font-size:calc(clamp(48px,5vw,80px) * var(--hs,1));line-height:1;color:var(--ivory)}
.metrics span{display:block;margin-top:12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(247,244,239,.6)}

/* ---------- PDP ---------- */
.pdp{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(40px,6vw,110px);padding-top:clamp(30px,4vw,60px)}
.gallery{display:grid;grid-template-columns:88px 1fr;gap:18px;position:sticky;top:calc(var(--header-h) + 20px);align-self:start}
.thumbs{display:grid;gap:12px;align-content:start}
.thumbs button{aspect-ratio:4/5;position:relative;opacity:.5;transition:opacity .3s;outline-offset:3px}
.thumbs button.on,.thumbs button:hover{opacity:1}
.thumbs button.on{outline:1px solid var(--charcoal)}
.thumbs .m{position:absolute;inset:0}
.stage{aspect-ratio:4/5;position:relative}
.stage .m{position:absolute;inset:0;transition:opacity .6s}
html[data-page="product"] .m{background:transparent}
html[data-page="product"] .m .art,html[data-page="product"] .m .slot{display:none}
.stage .m > img,.thumbs .m > img{transition:none}
.crumbs{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-bottom:30px}
.crumbs a:hover{color:var(--charcoal)}
.pdp-info .display{font-size:calc(clamp(40px,4.4vw,68px) * var(--hs,1));margin:10px 0 14px}
.pdp-info .price{font-size:20px;letter-spacing:.04em;margin-bottom:26px}
.pdp-info .short{font-size:16px;color:var(--smoke);margin:0 0 30px;max-width:46ch}
.stars{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.12em;color:var(--taupe)}
.stars i{color:var(--bronze);font-style:normal;letter-spacing:2px}
.sizes{display:flex;gap:10px;margin:8px 0 26px}
.sizes button{height:44px;padding:0 22px;border:1px solid var(--line);font-size:12px;letter-spacing:.14em;transition:all .3s}
.sizes button.on{border-color:var(--charcoal)}
.buy{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-bottom:16px}
.buy .qty{height:52px}
.buy .qty button{width:42px}
.assure{background:var(--ivory);padding:18px 22px;font-size:12.5px;color:var(--smoke);display:grid;gap:8px}
.assure div{display:flex;gap:12px;align-items:center}
.assure svg{width:16px;height:16px;stroke:var(--bronze);fill:none;stroke-width:1.2;flex:none}
.tabs{margin-top:46px}
.tabs .tl{display:flex;gap:40px;border-bottom:1px solid var(--line)}
.tabs .tl button{padding:0 0 14px;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);position:relative}
.tabs .tl button.on{color:var(--charcoal)}
.tabs .tl button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--charcoal)}
.tabs .tp{display:none;padding:26px 0 0;color:var(--smoke)}
.tabs .tp.on{display:block;animation:fade .6s var(--ease)}
.attrs{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;margin:20px 0 0;font-size:14px}
.attrs dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);padding-top:2px}
.attrs dd{margin:0;color:var(--charcoal)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero-ing{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:clamp(30px,5vw,90px)}
.hero-ing .word{font-family:var(--f-sans);font-weight:300;font-size:calc(clamp(60px,9vw,150px) * var(--hs,1));line-height:.95;letter-spacing:.04em;text-transform:uppercase;margin:0}
.fullname{text-align:center;padding:clamp(40px,5vw,70px) 0 clamp(70px,8vw,120px)}
.fullname .caps{font-size:calc(clamp(30px,4vw,60px) * var(--hs,1));letter-spacing:.2em;margin:0}

/* ---------- Results ---------- */
/* Before/after: a portrait frame (3:4, the shape of the photos) so each face is shown whole,
   not stretched into a wide band; sized near the photos' own width so they stay sharp. */
.ba{position:relative;aspect-ratio:3/4;width:100%;max-width:600px;margin:0 auto;overflow:hidden;cursor:ew-resize;user-select:none;touch-action:pan-y;background:var(--greige)}
.ba .m > img{object-position:50% 35%}
.ba-meta,.ba ~ .small{max-width:600px;margin-left:auto;margin-right:auto}
.ba .m{position:absolute;inset:0}
.ba .after-clip{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.ba .handle{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--ivory);z-index:6;pointer-events:none}
.ba .handle::after{content:"";position:absolute;top:50%;left:50%;width:58px;height:58px;border-radius:50%;transform:translate(-50%,-50%);border:1px solid var(--ivory);background:rgba(251,250,247,.18);backdrop-filter:blur(6px)}
.ba .knob{position:absolute;top:50%;left:50%;z-index:7;transform:translate(-50%,-50%);display:flex;gap:16px;pointer-events:none}
.ba .knob i{width:7px;height:7px;border-left:1px solid var(--ivory);border-bottom:1px solid var(--ivory);transform:rotate(45deg)}
.ba .knob i+i{transform:rotate(-135deg)}
.ba .lbl{position:absolute;z-index:6;top:22px;font-size:10.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--ivory);background:rgba(21,21,19,.35);padding:8px 14px;backdrop-filter:blur(4px)}
.ba .lbl.l{left:22px}.ba .lbl.r{right:22px}
.ba-meta{display:flex;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.stories{grid-template-columns:repeat(3,1fr)}
.story .pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.story .pair .m{aspect-ratio:3/4}
.story .pair small{display:block;margin-top:8px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe)}
.story h4{margin:16px 0 4px;font-family:var(--f-display);font-weight:400;font-size:22px}
.timeline{grid-template-columns:repeat(4,1fr)}
.timeline .m{aspect-ratio:4/5}
.timeline h5{margin:16px 0 2px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.timeline .dot{display:flex;align-items:center;gap:10px;margin-top:22px}
.timeline .dot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--bronze)}
.timeline .dot::after{content:"";flex:1;height:1px;background:var(--line)}
.routine{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:center}
.routine .m{aspect-ratio:1/1}
.routine ol{list-style:none;padding:0;margin:30px 0 36px;border-top:1px solid var(--line)}
.routine li{display:grid;grid-template-columns:60px 1fr;padding:20px 0;border-bottom:1px solid var(--line)}
.routine li b{font-family:var(--f-display);font-weight:300;font-size:28px;color:var(--bronze);line-height:1}
.routine li h5{margin:0 0 4px;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.routine li p{margin:0;font-size:14px;color:var(--smoke)}
.quote{text-align:center;max-width:980px;margin:0 auto}
.quote blockquote{margin:0;font-family:var(--f-display);font-weight:300;font-style:var(--em-style,italic);font-size:calc(clamp(30px,3.6vw,54px) * var(--hs,1));line-height:1.25}
.quote cite{display:block;margin-top:28px;font-style:normal;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}
.mask-in{clip-path:inset(0 0 100% 0);transition:clip-path 1.6s var(--ease-out)}
.mask-in.in{clip-path:inset(0 0 0 0)}
.page-enter{animation:pageIn .9s var(--ease-out)}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
.hero .hero-center > *,.hero .hero-title > *{animation:heroUp 1.6s var(--ease-out) both}
.hero .hero-center > *:nth-child(2),.hero .hero-title > *:nth-child(2){animation-delay:.25s}
.hero .hero-title > *:nth-child(3){animation-delay:.45s}
@keyframes heroUp{from{opacity:0;transform:translateY(30px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}.mask-in{clip-path:none}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .g4,.shop-grid,.search .res,.timeline{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .ftr .main{grid-template-columns:1fr 1fr}
  .mega-grid{grid-template-columns:1fr 1fr}
  .mega .feature{display:none}
  .reel{display:none}
}
@media (max-width:860px){
  :root{--header-h:64px}
  .hdr-inner{height:64px}
  .hdr .sub,.hdr .nav-l .hide-m,.hdr .region,.hdr .acct{display:none}
  .burger{display:grid}
  .mega{display:none}
  .g3,.stories,.trio{grid-template-columns:1fr}
  .trio > :nth-child(2){margin-top:0}
  .g2{grid-template-columns:1fr}
  .card.offset{margin-top:0}
  .split,.split.rev{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .split-media{min-height:110vw}
  .split-copy{padding:48px var(--gutter) 64px}
  .events .inner,.contact .inner,.fables,.impact,.routine,.pdp,.hero-ing,.persp{grid-template-columns:1fr}
  .persp .p2{display:none}
  .pillars{grid-template-columns:1fr}
  .pillars > div{border-right:0;border-bottom:1px solid var(--line)}
  .collage,.collage.flip{grid-template-columns:1fr;display:grid}
  .collage > *,.collage.flip > *{grid-column:1/-1!important;grid-row:auto!important;text-align:left!important;padding:0!important}
  .collage .c1,.collage .c2{min-height:70vw}
  .collage .note{margin-left:0}
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .mosaic > *{grid-column:auto!important;grid-row:auto!important;min-height:44vw}
  .mosaic .t{grid-column:1/-1!important;min-height:0}
  .focus{grid-template-columns:1fr}
  .focus article{border-right:0;margin-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .ftr .svc{grid-template-columns:1fr}
  .ftr .main{grid-template-columns:1fr}
  .ftr .brand,.ftr .legal{flex-direction:column;align-items:flex-start}
  .gallery{position:static;grid-template-columns:1fr}
  .thumbs{grid-template-columns:repeat(5,1fr);order:2}
  .head{flex-direction:column;align-items:flex-start}
  .filters{flex-direction:column;align-items:flex-start;position:static}
  .row2{grid-template-columns:1fr}
  .ev-list li{grid-template-columns:70px 1fr}
  .ev-list li .link{display:none}
  .metrics{grid-template-columns:1fr}
  .hero-foot .scroll-cue{display:none}
}
@media (max-width:520px){
  .g4,.shop-grid,.search .res,.timeline,.steps{grid-template-columns:1fr}
  .shop-grid{grid-template-columns:1fr 1fr;column-gap:12px}
  .shop-grid .card .name{font-size:18px}
  .shop-grid .card .meta{grid-template-columns:1fr}
  .shop-grid .card .price{grid-column:1;grid-row:auto}
}

/* mobile nav */
.mnav{position:fixed;inset:0;z-index:92;background:var(--paper);transform:translateX(-100%);transition:transform .7s var(--ease-out);padding:24px var(--gutter);display:flex;flex-direction:column;overflow:auto}
.mnav.on{transform:none}
.mnav .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.mnav .top svg.wm{width:130px;fill:var(--charcoal)}
.mnav a.big{display:block;font-family:var(--f-display);font-size:36px;font-weight:300;padding:8px 0;border-bottom:1px solid var(--line)}
.mnav .eyebrow{margin:30px 0 8px}
.mnav .lst{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.mnav .lst a{font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:6px 0}
#app-header,#app-overlays{display:contents}

.card.tile{color:var(--ivory)}
.card.tile .m{aspect-ratio:4/5}
.tile-copy{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(22px,2.4vw,36px);background:linear-gradient(180deg,transparent 40%,rgba(20,19,17,.4))}
.tile-copy .display{font-size:calc(clamp(30px,2.8vw,44px) * var(--hs,1));margin:12px 0 20px;line-height:1.05}
.tile-copy .link{align-self:flex-start}
@media (max-width:860px){ .hero .art .obj{top:34%;height:42%} .hero .art .obj.wide{width:70%} }

/* home hero: monogram + film */
.hero-mono{width:clamp(112px,11.5vw,184px);height:auto;fill:currentColor;margin:0 auto clamp(26px,3vw,44px);opacity:.95}
.hero.home .hero-mono{margin-bottom:clamp(10px,1.2vw,18px)}
.hero.home .hero-center > div{display:flex;flex-direction:column;align-items:center}
.hero.home .hero-center > div > *:nth-child(3){animation-delay:.45s}
.hero.home .shade{background:
  radial-gradient(60% 55% at 50% 50%,rgba(26,14,10,.42) 0%,rgba(26,14,10,.12) 60%,rgba(26,14,10,0) 100%),
  linear-gradient(180deg,rgba(20,12,9,.45) 0%,rgba(20,12,9,0) 28%,rgba(20,12,9,0) 60%,rgba(20,12,9,.55) 100%)}
.hero.home .hero-mark,.hero.home .hero-mono{filter:drop-shadow(0 2px 24px rgba(20,10,6,.25))}
.hero.home .reel{display:none}

/* ---------- nav: 10 tabs ---------- */
.hdr .sub{gap:clamp(14px,1.9vw,34px)}
.hdr .sub a{font-size:10.5px;letter-spacing:.2em;white-space:nowrap}
.hdr .sub a.on{font-weight:500}
.sub-sep{display:block;width:5px;height:5px;border:1px solid var(--bronze);transform:rotate(45deg);flex:none}
@media (max-width:1180px){ .hdr .sub{gap:14px} .hdr .sub a{letter-spacing:.14em;font-size:10px} }
a.chip{display:inline-flex;align-items:center}

/* ---------- journal ---------- */
.jchips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(36px,4vw,56px)}
.jlead{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,5vw,90px);align-items:center;margin-bottom:clamp(60px,7vw,110px)}
.jlead .m{aspect-ratio:5/4}
.jlead .display{margin:18px 0 20px}
.jlead .lede{margin:0 0 30px}
.jgrid{row-gap:clamp(40px,5vw,72px)}
.jcard{display:block}
.jcard .m{aspect-ratio:4/3}
.jcard .m .art{transition:transform 1.4s var(--ease-out)}
.jcard:hover .m .art{transform:scale(1.05)}
.jmeta{display:flex;justify-content:space-between;margin-top:20px;font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe)}
.jcard h3{font-family:var(--f-display);font-weight:400;font-size:calc(clamp(24px,2vw,30px) * var(--hs,1));line-height:1.15;margin:12px 0 10px;transition:color .3s}
.jcard:hover h3{color:var(--bronze)}
.jcard p{margin:0;font-size:14px;color:var(--smoke)}
.article header{padding:clamp(50px,6vw,100px) var(--gutter) clamp(40px,5vw,70px);max-width:1000px}
.article .lede{max-width:60ch}
.abody{max-width:720px;margin:0 auto;padding:clamp(50px,6vw,90px) var(--gutter) clamp(70px,8vw,120px)}
.abody p{font-size:18px;line-height:1.9;color:var(--smoke);margin:0 0 26px}
.abody .drop::first-letter{font-family:var(--f-display);font-size:4.4em;float:left;line-height:.8;padding:8px 14px 0 0;color:var(--bronze)}
.abody blockquote{margin:50px 0;padding:10px 0 10px 30px;border-left:1px solid var(--bronze);font-family:var(--f-display);font-style:var(--em-style,italic);font-weight:300;font-size:clamp(28px,3vw,40px);line-height:1.25;color:var(--charcoal)}

/* ---------- skin education ---------- */
.edu-intro > *{max-width:900px}
.edu-intro .display{margin:16px 0 22px}
.uv article,.types article,.cinfo article{background:var(--paper);padding:36px 32px 40px;border:1px solid var(--line)}
.uv article.dark{background:var(--charcoal);color:var(--ivory);border-color:var(--charcoal)}
.uv article.dark p{color:rgba(247,244,239,.75)}
.uv .k,.cinfo .k{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze)}
.uv h4,.types h4,.cinfo h4{font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1.15;margin:16px 0 12px}
.uv p,.types p,.cinfo p{margin:0 0 18px;font-size:14.5px;color:var(--smoke)}
.uv b{font-weight:500;color:inherit}
.types article{border:0;border-top:1px solid var(--charcoal);padding:28px 0 0;background:transparent}
.types h4{margin-top:0}
.gloss-wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(40px,7vw,120px);align-items:start}
.gloss-wrap .display{margin:16px 0 20px}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-family:var(--f-display);font-size:clamp(20px,1.7vw,25px);font-weight:400}
.acc summary::-webkit-details-marker{display:none}
.acc summary i{position:relative;width:14px;height:14px;flex:none}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:currentColor;transition:transform .4s var(--ease)}
.acc summary i::after{transform:rotate(90deg)}
.acc details[open] summary i::after{transform:rotate(0)}
.acc details p{margin:-6px 0 26px;max-width:62ch;color:var(--smoke);animation:fade .5s var(--ease)}
.acc summary:hover{color:var(--bronze)}
.layering h4{font-family:var(--f-display);font-weight:300;font-size:36px;margin:0 0 18px}
.layering ol{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.layering li{display:flex;gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);font-size:16px}
.layering li b{font-family:var(--f-display);font-weight:300;font-size:24px;color:var(--bronze);width:36px}

/* ---------- faq / contact ---------- */
.faq{display:grid;grid-template-columns:280px 1fr;gap:clamp(40px,7vw,120px);align-items:start}
.faq aside{position:sticky;top:calc(var(--header-h) + 30px)}
.faq aside nav{display:grid;gap:12px}
.faq aside nav a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--smoke);transition:color .3s,padding .3s}
.faq aside nav a:hover{color:var(--charcoal);padding-left:6px}
.faq-group{margin-bottom:clamp(50px,6vw,80px);scroll-margin-top:calc(var(--header-h) + 30px)}
.faq-group .display{margin:0 0 18px}
.cinfo a{color:var(--charcoal);text-decoration:underline;text-underline-offset:4px}
html[data-page="contact"] .cinfo{gap:clamp(24px,3vw,48px);align-items:start}
html[data-page="contact"] .cinfo article{padding:clamp(28px,3vw,44px)}
.contact-card-faq{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.contact-card-faq h3{font-family:var(--f-sans);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;margin:0 0 14px}
.contact-card-faq .acc summary{font-family:var(--f-sans);font-size:15px;line-height:1.5;padding:18px 24px 18px 0}
.contact-card-faq .acc details p{font-size:14px;line-height:1.8;margin:0 0 20px}
html[data-page="contact"] #main > section + section{margin-top:clamp(32px,4vw,64px)}
html[data-page="contact"] #main > .section{padding-block:clamp(80px,9vw,144px)}
html[data-page="contact"] .contact .inner{gap:clamp(40px,6vw,96px)}
html[data-page="contact"] .split{column-gap:clamp(24px,4vw,64px)}
html[data-page="contact"] #main > footer{margin-top:clamp(40px,5vw,80px)}

@media (max-width:860px){
  .jlead,.gloss-wrap,.faq{grid-template-columns:1fr}
  .faq aside{position:static}
}

/* home hero: larger tagline */
.hero.home .tagline{font-size:calc(clamp(var(--tagline-m,24px),var(--tagline-v,2.6vw),var(--tagline-d,38px)) * var(--hs,1));letter-spacing:.34em;padding-left:.34em;margin-top:0;white-space:nowrap}
@media (max-width:520px){.hero.home .tagline{font-size:min(23px,6.2vw);letter-spacing:.26em;padding-left:.26em}}
.hero.home .hero-mono{margin-bottom:clamp(14px,1.6vw,26px)}

/* ---------- menu dropdowns (The Brand / Discover) ---------- */
.hdr .sub{overflow:visible}
.dd{position:relative;height:100%;display:flex;align-items:center}
.dd-btn{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;padding:4px 0;white-space:nowrap}
.dd.on .dd-btn{font-weight:500}
.chev{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .4s var(--ease)}
.dd.open .chev{transform:translateY(1px) rotate(-135deg)}
/* The dropdown is a white panel (dark text, bronze top line, soft shadow) on
   every page, including over the hero films. */
.dd-panel{position:absolute;top:100%;left:50%;min-width:230px;transform:translate(-50%,8px);background:var(--paper);color:var(--charcoal);padding:14px 0;box-shadow:0 30px 60px -24px rgba(0,0,0,.25);border-top:1px solid var(--bronze);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),transform .45s var(--ease-out),visibility .35s;z-index:5}
.dd.open .dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.hdr .sub .dd-panel a{display:block;padding:11px 28px;font-size:10.5px;letter-spacing:.2em;transition:color .3s,padding .35s var(--ease),background .3s}
.hdr .sub .dd-panel a::after{display:none}
.hdr .sub .dd-panel a:hover,.hdr .sub .dd-panel a.on{color:var(--bronze);padding-left:34px;background:var(--ivory)}

/* product card: second photo on hover */
.card .cm{display:block;position:relative}
.card .m.alt{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .9s var(--ease)}
.card .m.alt:not(.loaded){display:none}
.card:hover .m.alt.loaded,.card:focus-within .m.alt.loaded{opacity:1}
.card .m.alt .slot{display:none}
.card .m > img{transition:opacity 1.2s var(--ease),transform 1.6s var(--ease-out)}
.card:hover .m > img{transform:scale(1.04)}
.card .cw{position:relative}
.card .m{aspect-ratio:3/4}
.thumbs button,.stage{aspect-ratio:3/4}

/* landscape split (campaign photography) */
.split.landscape{min-height:0}
.split.landscape .split-media{aspect-ratio:3/2;min-height:0;align-self:center}
.split.landscape .m > img{object-position:50% 32%}
.carousel .slide.on .m.loaded > img{animation:kb 9s ease-out both}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1)}}
.carousel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:5;pointer-events:none;background:linear-gradient(0deg,rgba(20,15,12,.35),transparent)}
@media (max-width:860px){ .split.landscape .split-media{min-height:0} }
.split.landscape .m.focal-sun > img{object-position:50% 40%}

/* locked header: solid white once scrolling */
.hdr{position:sticky;top:0}
.hdr.solid{background:rgba(251,250,247,.97)}
.hdr.solid .sub{border-top-color:var(--line)}
.split.landscape .m.focal-found > img{object-position:50% 30%}
/* collection heroes: soft shade behind the title */
.hero.collection .shade{background:linear-gradient(180deg,rgba(20,12,9,.35) 0%,rgba(20,12,9,0) 28%,rgba(20,12,9,0) 55%,rgba(20,12,9,.5) 100%),linear-gradient(90deg,rgba(20,10,8,.38) 0%,rgba(20,10,8,0) 55%)}
@media (max-width:860px){ .m[data-video="rejoosh-hero"] > video{object-position:55% 50%} }

/* ---------- single-product collection: video half / product half ---------- */
.solo{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - var(--header-h));background:var(--paper)}
.solo-media{position:relative;display:grid;place-items:center;padding:clamp(28px,3vw,56px);background:linear-gradient(180deg,#D9D2D8 0%,#C4BCC6 55%,#A79FAD 100%);overflow:hidden}
.solo-media .m.reel-v{position:relative;height:min(calc(100svh - var(--header-h) - 2*clamp(28px,3vw,56px)),980px);aspect-ratio:9/16;width:auto;max-width:100%;background:transparent;box-shadow:0 40px 80px -40px rgba(40,25,35,.45)}
.solo-media .m.reel-v > video{object-fit:cover}
.solo-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,6vw,120px) clamp(28px,6vw,120px)}
.solo-copy .display{margin:18px 0 18px}
.solo-copy .lede{margin:0 0 34px;max-width:46ch}
.solo-card{max-width:360px}
.solo-card .card .meta{padding-top:16px}
.solo-buy{display:flex;align-items:center;gap:30px;margin-top:30px;flex-wrap:wrap}
@media (max-width:860px){
  .solo{grid-template-columns:1fr;min-height:0}
  .solo-media .m.reel-v{height:auto;width:min(100%,420px)}
  .solo-card{max-width:none}
}
.solo-card{max-width:290px}
.solo-copy .display{margin:14px 0 14px}
.solo-copy .lede{margin:0 0 26px}
@media (max-width:860px){ .solo-card{max-width:none} }
.solo{align-items:start}
.solo-media{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));min-height:560px}
.solo-media .m.reel-v{height:calc(100% - 0px);max-height:980px}
.solo-copy{min-height:calc(100svh - var(--header-h));padding-top:clamp(40px,4vw,80px);padding-bottom:clamp(40px,4vw,80px)}
.solo-card{max-width:260px}
@media (max-width:860px){
  .solo-media{position:relative;top:auto;height:auto;min-height:0}
  .solo-media .m.reel-v{height:auto;max-height:none}
  .solo-copy{min-height:0}
  .solo-card{max-width:none}
}
.solo-card{max-width:300px}
.solo-card .card .desc{white-space:nowrap}
@media (max-width:860px){ .solo-card{max-width:320px} }

/* solo media: reel + portrait fill the half edge to edge */
.solo-media{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0;background:var(--paper);place-items:stretch}
.solo-media .m.reel-v,.solo-media .m.portrait{position:relative;height:100%;width:100%;max-height:none;aspect-ratio:auto;box-shadow:none}
.solo-media .m.reel-v > video{object-fit:cover;object-position:50% 50%}
.solo-media .m.portrait > img{object-position:50% 30%}
@media (max-width:860px){
  .solo-media{height:auto}
  .solo-media .m.reel-v,.solo-media .m.portrait{height:auto;aspect-ratio:9/16}
}

/* ---------- Rejoosh swatch gallery ---------- */
.swatch{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.2vw,18px)}
.swatch .sw{margin:0}
.swatch .sw .m{aspect-ratio:3/4;height:100%}
.swatch .m > img{object-position:50% 35%;transition:opacity 1.2s var(--ease),transform 1.6s var(--ease-out)}
.swatch .sw:hover .m > img{transform:scale(1.04)}
.sw-copy{grid-column:1/3;grid-row:1;display:flex;flex-direction:column;justify-content:center;padding-right:clamp(10px,2vw,40px)}
.sw-copy .caps{margin:16px 0 22px}
.sw-copy .lede{margin:0 0 30px}
.sw-note{border-top:1px solid var(--line);padding-top:24px}
.sw-note .small{margin:12px 0 0}
.sw-note-tile{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;aspect-ratio:3/4;padding:clamp(18px,2.5vw,40px);border:0;background:var(--paper)}
.sw-note-tile .caps{margin:16px 0 22px}
.sw-note-tile .lede{margin:0 0 30px}
.sw1{grid-column:3/5;grid-row:1}
.sw2{grid-column:5/7;grid-row:1}
.sw3{grid-column:1/3;grid-row:2}
.sw4{grid-column:3/5;grid-row:2}
.sw5{grid-column:5/7;grid-row:2}
@media (max-width:860px){
  .swatch{grid-template-columns:1fr 1fr}
  .sw-copy{grid-column:1/-1;padding:0 0 10px}
  .swatch .sw{grid-column:auto;grid-row:auto}
  .sw5{grid-column:1/-1}
  .sw5 .m{aspect-ratio:4/5}
}
.swatch .sw .m{height:auto;width:100%;aspect-ratio:3/4}
@media (max-width:860px){ .swatch .sw5{grid-column:1/-1} .swatch .sw5 .m{aspect-ratio:4/5} }
.split.landscape .m[data-img="rejoosh-story-2"] > img{object-position:50% 45%}
.split.landscape .m[data-img="rejoosh-story-1"] > img{object-position:40% 40%}
.m[data-img="journal-banner"]{background:#ECEAE6}
.m[data-img="journal-banner"] > img{object-fit:cover;object-position:50% 50%}
@media (max-width:860px){ .fables .m[data-img="journal-banner"]{min-height:0;aspect-ratio:6/5} }
/* Sun Cream hero: bright beach footage needs a deeper shade */
.hero.collection:has(.m[data-video="sun-hero"]) .shade{background:
  linear-gradient(180deg,rgba(20,12,6,.55) 0%,rgba(20,12,6,.12) 24%,rgba(20,12,6,0) 45%,rgba(20,12,6,.35) 70%,rgba(20,12,6,.72) 100%),
  linear-gradient(90deg,rgba(20,12,6,.5) 0%,rgba(20,12,6,0) 60%)}
.hero > .shade,.events > .shade{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero.home .shade{background:
  radial-gradient(55% 50% at 50% 52%,rgba(26,14,10,.28) 0%,rgba(26,14,10,.08) 60%,rgba(26,14,10,0) 100%),
  linear-gradient(180deg,rgba(20,12,9,.4) 0%,rgba(20,12,9,0) 24%,rgba(20,12,9,0) 70%,rgba(20,12,9,.35) 100%)}
.hero.collection .shade{background:linear-gradient(180deg,rgba(20,12,9,.32) 0%,rgba(20,12,9,0) 22%,rgba(20,12,9,0) 55%,rgba(20,12,9,.42) 100%),linear-gradient(90deg,rgba(20,10,8,.28) 0%,rgba(20,10,8,0) 50%)}
.hero.collection:has(.m[data-video="sun-hero"]) .shade{background:
  linear-gradient(180deg,rgba(20,12,6,.5) 0%,rgba(20,12,6,.1) 24%,rgba(20,12,6,0) 45%,rgba(20,12,6,.3) 70%,rgba(20,12,6,.65) 100%),
  linear-gradient(90deg,rgba(20,12,6,.42) 0%,rgba(20,12,6,0) 60%)}

/* ---------- Sun: film half / two products half ---------- */
.duo .solo-media{display:block;padding:0;background:#2a2118}
.duo .solo-media .m.film{position:absolute;inset:0;height:100%;width:100%}
.duo .solo-media .m.film > video{object-fit:cover;object-position:50% 50%}
.duo-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px);max-width:620px}
.duo-cards .card .name{font-size:20px}
.duo-cards .card .desc{font-size:11px}
@media (max-width:860px){
  .duo .solo-media{position:relative;height:auto;aspect-ratio:4/5;min-height:0}
}
@media (max-width:520px){ .duo-cards{grid-template-columns:1fr 1fr;gap:12px} .duo-cards .card .meta{grid-template-columns:1fr} .duo-cards .card .price{grid-column:1;grid-row:auto} .duo-cards .card .name{font-size:17px} }

/* ---------- Sun swatch gallery ---------- */
.sun-sw .sw-copy{grid-column:1/3;grid-row:1}
.sun-sw .ss1{grid-column:3/7;grid-row:1}
.sun-sw .ss1 .m{aspect-ratio:3/2}
.sun-sw .ss2{grid-column:1/3;grid-row:2}
.sun-sw .ss3{grid-column:3/5;grid-row:2}
.sun-sw .ss4{grid-column:5/7;grid-row:2}
.sun-sw .ss5{grid-column:1/5;grid-row:3}
.sun-sw .ss5 .m{aspect-ratio:3/2}
.sun-sw .sw-spf{grid-column:5/7;grid-row:3;display:flex;flex-direction:column;justify-content:center;padding-left:clamp(10px,2vw,30px)}
.sun-sw .sw-spf .small{margin:18px 0 28px}
.sun-sw .sw-spf .btn{align-self:flex-start}
.m[data-img="sun-swatch-1"] > img{object-position:70% 40%}
.m[data-img="sun-swatch-3"] > img{object-position:50% 40%}
@media (max-width:860px){
  .sun-sw .sw-copy,.sun-sw .ss1,.sun-sw .ss5,.sun-sw .sw-spf{grid-column:1/-1;grid-row:auto}
  .sun-sw .ss2,.sun-sw .ss3,.sun-sw .ss4{grid-column:auto;grid-row:auto}
  .sun-sw .ss4{grid-column:1/-1} .sun-sw .ss4 .m{aspect-ratio:4/5}
  .sun-sw .sw-spf{padding:10px 0 0}
}
.sun-sw .sw-copy .caps.xl{font-family:var(--f-em);font-size:calc(clamp(28px,3.1vw,48px) * var(--hs,1));letter-spacing:.1em}
.split.landscape .m[data-img="sun-story-1"] > img{object-position:50% 35%}
.split.landscape .m[data-img="sun-story-2"] > img{object-position:45% 40%}
.split.landscape .m[data-img="sun-story-3"] > img{object-position:50% 40%}

/* Sun page journal banner: four photos */
.jgrid4{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;min-height:560px}
.jgrid4 .m{height:100%;min-height:0}
.jgrid4 .m[data-img="sun-journal-1"] > img{object-position:50% 40%}
.jgrid4 .m[data-img="sun-journal-2"] > img{object-position:45% 40%}
.jgrid4 .m[data-img="sun-journal-3"] > img{object-position:50% 30%}
@media (max-width:860px){ .jgrid4{min-height:0} .jgrid4 .m{aspect-ratio:1/1;height:auto} }

/* Perspective: film + portrait side by side */
.persp-media{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(8px,1vw,14px);height:clamp(380px,38vw,620px);min-height:0}
.persp-media .m{height:100%}
.persp-media .pv > video{object-position:50% 40%}
.persp-media .pp > img{object-position:40% 30%}
.persp .copy{grid-column:1/-1;max-width:760px}
@media (max-width:860px){ .persp-media{grid-template-columns:1fr;height:auto} .persp-media .pv{aspect-ratio:16/10} .persp-media .pp{aspect-ratio:4/5} }
@media (max-width:860px){ .persp-media{grid-template-columns:1fr 1fr;gap:8px} .persp-media .pv,.persp-media .pp{aspect-ratio:3/4} }
.persp-media{min-width:0;width:100%} .persp-media .m{min-width:0} @media (max-width:860px){ .persp{grid-template-columns:minmax(0,1fr)} }
@media (max-width:860px){ .persp-media .pv,.persp-media .pp{width:100%;height:auto;max-width:100%} }
.split.landscape .m[data-img="eyewear-story-1"] > img{object-position:35% 45%}
.split.landscape .m[data-img="eyewear-story-2"] > img{object-position:45% 70%}
.split.landscape .m[data-img="eyewear-story-3"] > img{object-position:62% 40%}
.split.landscape .m[data-img="home-foundation"] > img{object-position:50% 30%}
.split.landscape .m[data-img="home-foundation-2"] > img{object-position:45% 40%}
.split.landscape .m[data-img="home-foundation-3"] > img{object-position:50% 40%}
.split.landscape .m[data-img="home-foundation-4"] > img{object-position:60% 40%}
.car-ui,.car-ui.light{color:var(--ivory)} .carousel::after{height:150px;background:linear-gradient(0deg,rgba(20,15,12,.45),transparent)}

/* =========================================================
   LIVE SHOP — states, checkout, account, rich text, Aya
   ========================================================= */
/* rich-text marks from the admin (**bold** ==highlight== ++larger++ ~~smaller~~) */
.rt-mark{background:none;color:var(--bronze);padding:0}
.rt-big{font-size:1.25em}
.rt-small{font-size:.8em}

/* product states */
.was{color:var(--taupe);font-weight:300;margin-right:6px}
.card.is-out .m{opacity:.72}
.m.contain > img{object-fit:contain;padding:8%}
.pdp-info .low{color:#9B4A3C;margin:-6px 0 18px}
.pdp-info .btn[disabled],.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn[disabled]::before{transform:scaleY(0)!important}
.tabs .tl{flex-wrap:wrap;gap:12px 32px}
.plist{margin:18px 0 0;padding-left:18px;display:grid;gap:10px}
.plist b{font-weight:500;color:var(--charcoal)}
.inci{font-size:12.5px;line-height:1.7;margin-top:18px;color:var(--taupe)}
.disclaimer{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.disclaimer p{margin:0 0 8px}
.story .pair.one{grid-template-columns:1fr}

/* loading, notices, errors */
.loading-line{display:flex;align-items:center;gap:12px}
.loading-line::before{content:"";width:14px;height:14px;border:1px solid var(--sand);border-top-color:var(--charcoal);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.notice{background:var(--ivory);border-left:2px solid var(--bronze);padding:12px 16px;font-size:13px;margin:0 0 24px}
.form-err{color:#9B4A3C;font-size:13px;margin:0 0 18px}
.field .help{margin:6px 0 0;font-size:12px;color:var(--taupe)}
.field select{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(38,37,34,.35);padding:10px 0 12px;font-size:16px;outline:0;border-radius:0;appearance:none;-webkit-appearance:none}
.field.err select{border-bottom-color:#9B4A3C}
.field input[readonly]{color:var(--taupe)}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
[aria-busy="true"] button[type=submit],button[aria-busy="true"]{cursor:progress}
.u{text-decoration:underline;text-underline-offset:4px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em}
.hdr .acct.in::after{content:"";position:absolute;top:0;right:-2px;width:6px;height:6px;border-radius:50%;background:var(--bronze)}

/* checkout */
.checkout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:start}
.checkout fieldset{border:0;margin:0 0 30px;padding:0;min-width:0}
.checkout legend{margin-bottom:22px;padding:0}
.co-sum{background:var(--ivory);padding:clamp(22px,3vw,40px);position:sticky;top:calc(var(--header-h) + 16px);min-width:0}
.co-sum .h3{margin-bottom:20px}
.sum-items{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.sum-items li{display:flex;justify-content:space-between;gap:16px;font-size:14px}
.sum-name{min-width:0;overflow-wrap:anywhere}
.sum-name small{color:var(--taupe)}
.totals{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:18px 0 22px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.totals dt{color:var(--smoke)}.totals dd{margin:0;text-align:right}
.totals .grand{font-size:15px;color:var(--charcoal);border-top:1px solid var(--line);padding-top:12px;font-weight:500}
.coupon{display:grid;grid-template-columns:1fr auto;gap:10px;margin:0 0 6px}
.coupon input{border:1px solid var(--line);background:var(--paper);padding:0 14px;height:46px;font-size:14px;min-width:0;text-transform:uppercase}
.coupon .btn{height:46px;padding:0 20px}
.coupon .msg{grid-column:1/-1;font-size:12px;color:#9B4A3C;min-height:0}
.coupon-on{display:flex;justify-content:space-between;align-items:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase;border:1px dashed var(--sand);padding:10px 14px}
.coupon-on .rm{margin:0}
.payopt{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);padding:16px 18px;margin-bottom:10px;cursor:pointer;transition:border-color .3s}
.payopt:has(input:checked){border-color:var(--charcoal)}
.payopt input{margin-top:5px;accent-color:var(--charcoal)}
.payopt b{display:block;font-weight:500}
.payopt small{display:block;color:var(--taupe);font-size:13px}
.problems{border:1px solid #d9b3aa;background:#fbf1ee;color:#7c3a2e;padding:12px 16px;margin-bottom:16px;font-size:13px}
.problems p{margin:0 0 4px;font-weight:500}.problems ul{margin:0;padding-left:18px}

/* orders and account */
.order-box{margin-top:30px}
.order-box .mono{display:inline-block;border:1px solid var(--line);padding:6px 14px;border-radius:999px;margin:6px 0 24px}
.pill{display:inline-block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--greige);color:var(--charcoal)}
.pill.s-paid,.pill.s-delivered{background:#e5efe3}.pill.s-shipped,.pill.s-processing{background:#e8edf3}.pill.s-failed,.pill.s-cancelled,.pill.s-refunded{background:#f5e4df}
.order-row{border-bottom:1px solid var(--line)}
.order-row summary{display:grid;grid-template-columns:1.4fr 1fr auto auto 14px;gap:16px;align-items:center;padding:18px 0;cursor:pointer;list-style:none;font-size:14px}
.order-row summary::-webkit-details-marker{display:none}
.order-row > div{padding:0 0 22px}

@media (max-width:860px){
  .checkout{grid-template-columns:minmax(0,1fr)}
  .co-sum{position:static}
  .order-row summary{grid-template-columns:1fr auto;gap:6px 12px}
}

/* Aya assistant */
/* ---------- Ask Aya ---------- */
.aya-btn{position:fixed;z-index:80;right:20px;bottom:20px;height:52px;padding:0 22px 0 7px;display:inline-flex;align-items:center;gap:12px;border-radius:999px;background:var(--charcoal);color:var(--ivory);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;box-shadow:0 18px 40px -18px rgba(0,0,0,.55),inset 0 0 0 1px rgba(247,244,239,.08);transition:transform .35s var(--ease-out),background .3s,opacity .3s,visibility .3s}
.aya-btn:hover{transform:translateY(-2px);background:var(--ink)}
.aya-btn:hover .aya-robot,.aya-btn:focus-visible .aya-robot{animation:aya-wave .9s var(--ease-out)}
.aya-btn[hidden],.aya[hidden]{display:none}
/* the robot (aya.js ROBOT): shared by the button, the header and Aya's messages */
.aya-bot{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#fff,#f1e6d3 45%,var(--bronze-soft));box-shadow:0 0 0 3px rgba(247,244,239,.1),0 6px 14px -6px rgba(0,0,0,.5);animation:aya-bob 4.5s ease-in-out infinite}
.aya-btn.open .aya-bot{animation:none}
.aya-robot{display:block;width:80%;height:80%;overflow:visible;transform-origin:50% 85%}
.aya-robot .r-head,.aya-robot .r-ear{fill:var(--charcoal)}
.aya-robot .r-stem{stroke:var(--charcoal);stroke-width:1.6;stroke-linecap:round;fill:none}
.aya-robot .r-visor{fill:#3a3833}
.aya-robot .r-eye{fill:var(--sun);transform-box:fill-box;transform-origin:center;animation:aya-blink 5s infinite}
.aya-robot .r-eye+.r-eye{animation-delay:.04s}
.aya-robot .r-eyes{transition:transform .3s}
.aya-robot .r-smile{fill:none;stroke:var(--bronze-soft);stroke-width:1.3;stroke-linecap:round}
.aya-robot .r-light{fill:#8cc59a;animation:aya-light 2.6s infinite}
.aya.busy .aya-h .r-eyes{animation:aya-scan 1.2s ease-in-out infinite}
.aya.busy .aya-h .r-light{fill:var(--sun);animation-duration:.8s}
@keyframes aya-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes aya-wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}55%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}}
@keyframes aya-blink{0%,90%,96%,100%{transform:scaleY(1)}93%{transform:scaleY(.12)}}
@keyframes aya-light{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes aya-scan{0%,100%{transform:translateX(-1.4px)}50%{transform:translateX(1.4px)}}
.aya{position:fixed;z-index:95;right:20px;bottom:84px;width:min(390px,calc(100vw - 32px));height:min(580px,calc(100svh - 120px));display:flex;flex-direction:column;background:var(--paper);border-radius:20px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(21,21,19,.45),0 0 0 1px var(--line);opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);transform-origin:bottom right;transition:opacity .3s var(--ease-out),transform .45s var(--ease-out),visibility 0s linear .45s}
.aya.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease-out),transform .45s var(--ease-out),visibility 0s}

.aya-h{position:relative;display:flex;justify-content:space-between;align-items:center;padding:14px 10px 14px 18px;background:var(--charcoal);color:var(--ivory)}
.aya-who{display:flex;align-items:center;gap:12px}
.aya-h h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1}
.aya-av{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#fff,#f1e6d3 45%,var(--bronze-soft));box-shadow:0 0 0 2px rgba(247,244,239,.22)}
.aya-h .x{width:40px;height:40px;border-radius:50%;color:var(--ivory);transition:background .25s}
.aya-h .x:hover{background:rgba(247,244,239,.12)}
.aya-h .x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.4}

.aya-log{flex:1;overflow:auto;overscroll-behavior:contain;padding:20px 14px 12px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,var(--ivory),var(--paper) 160px)}
.aya-row{display:flex;align-items:flex-end;gap:8px;max-width:90%}
.aya-row .aya-av{width:28px;height:28px;box-shadow:0 0 0 1px var(--line)}
.aya-row .r-eye,.aya-row .r-light{animation:none}
.aya-msg{max-width:85%;padding:11px 15px;font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:18px;animation:aya-in .35s var(--ease-out)}
.aya-row .aya-msg{max-width:none}
.aya-msg.bot{background:#fff;color:var(--charcoal);border:1px solid var(--line);border-bottom-left-radius:6px}
.aya-msg.me{align-self:flex-end;background:var(--charcoal);color:var(--ivory);border-bottom-right-radius:6px}
@keyframes aya-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* "thinking": the "…" stays for screen readers; sighted visitors see three dots */
.aya-msg.typing{position:relative;min-width:62px;min-height:42px;color:transparent}
.aya-msg.typing::after{content:"";position:absolute;left:17px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--taupe);box-shadow:11px 0 0 var(--taupe),22px 0 0 var(--taupe);animation:aya-dots 1.1s ease-in-out infinite}
@keyframes aya-dots{0%,100%{opacity:.3}50%{opacity:1}}

.aya-prompts{display:flex;flex-wrap:wrap;gap:8px;padding-left:34px}
.aya-chip{border:1px solid rgba(168,134,91,.45);background:#fff;color:var(--charcoal);padding:8px 14px;border-radius:999px;font-size:13px;line-height:1.35;text-align:left;transition:border-color .25s,background .25s}
.aya-chip:hover{border-color:var(--bronze);background:var(--ivory)}

.aya-f{display:flex;align-items:center;gap:8px;margin:4px 12px 0;padding:5px 5px 5px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;transition:border-color .25s,box-shadow .25s}
.aya-f:focus-within{border-color:var(--charcoal);box-shadow:0 0 0 3px rgba(38,37,34,.08)}
.aya-f input{flex:1;min-width:0;border:0;background:transparent;padding:8px 0;font-size:15px;outline:0}
.aya-send{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--charcoal);color:var(--ivory);transition:background .25s}
.aya-send:hover{background:var(--bronze)}
.aya-send:disabled{opacity:.45;cursor:default}
.aya-send svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.aya-note{margin:0;padding:8px 18px 12px;font-size:10.5px;line-height:1.4;color:var(--taupe);text-align:center}
/* Aya: the old site's menus and steps (aya.js) */
.aya-names{display:flex;flex-direction:column;gap:5px;min-width:0}
.aya-sub{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,244,239,.62)}
.aya-h h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aya-menu{display:flex;flex-direction:column;gap:8px;padding-left:36px}
.aya-menu-i{width:100%;text-align:left;border:1px solid var(--line);background:#fff;color:var(--charcoal);padding:11px 14px;font-size:13px;line-height:1.35;transition:border-color .25s,background .25s}
.aya-menu-i:hover{border-color:var(--charcoal);background:var(--ivory)}
.aya-hint{margin:2px 0 0 36px;font-size:11.5px;line-height:1.5;color:var(--taupe)}
.aya-me{display:flex;justify-content:flex-end}
.aya-bot-w,.aya-staff{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:100%}
.aya-bot-w > :not(.aya-row){margin-left:36px;max-width:calc(100% - 36px)}
.aya-msg.staff{background:#fff6d6;border:1px solid #f1dd8a;color:var(--charcoal);border-bottom-left-radius:6px;max-width:88%}
.aya-who-l{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
.aya-inl{color:inherit;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.aya-links,.aya-acts{display:flex;flex-wrap:wrap;gap:6px}
.aya-link{display:inline-block;border:1px solid var(--charcoal);color:var(--charcoal);padding:7px 11px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .25s,color .25s}
.aya-link:hover{background:var(--charcoal);color:var(--ivory)}
.aya-act{border:1px solid var(--line);background:#fff;color:var(--charcoal);padding:8px 12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;transition:border-color .25s,opacity .25s}
.aya-act:hover{border-color:var(--charcoal)}
.aya-act.add{background:var(--charcoal);border-color:var(--charcoal);color:var(--ivory)}
.aya-act.add:hover{opacity:.88}
.aya-act:disabled{opacity:.5;cursor:default}
.aya-act.wide{width:100%;padding:11px}
.aya-card{border:1px solid var(--line);background:#fff;padding:14px;font-size:12.5px;line-height:1.55;color:var(--charcoal)}
.aya-card p{margin:0}
.aya-track,.aya-hand{display:flex;flex-direction:column;gap:8px;width:100%}
.aya-bot-w > .aya-track{width:calc(100% - 36px)}
.aya-card input{width:100%;min-width:0;border:1px solid var(--line);background:#fff;padding:9px 11px;font-size:13px;outline:0}
.aya-card input:focus{border-color:var(--charcoal)}
.aya-hand .row{display:flex;gap:8px}
.aya-hand .row input{flex:1}
.aya-hand .err{color:#a33;font-size:12px}
.aya-sent{background:var(--ivory)}
.aya-order{margin:0;border:1px solid var(--line);background:#fff;font-size:12.5px;width:calc(100% - 36px)}
.aya-order .r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}
.aya-order dt{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.aya-order dd{margin:0;font-weight:500;text-align:right}
.aya-order .items{padding:10px 14px;display:flex;flex-direction:column;gap:5px}
.aya-order .items p{margin:0}
.aya-order .r.tot{border-top:1px solid var(--line);border-bottom:0}
.aya-order .r.tot dt{text-transform:none;letter-spacing:0;font-size:12px}
.aya-order .trk,.aya-order .view{border-top:1px solid var(--line);padding:10px 14px}
.aya-order .trk dd{text-align:left;font-weight:400;margin-top:4px}
.aya-order .muted{color:var(--taupe)}
.aya-dots{display:inline-flex;gap:4px;align-items:center;height:18px}
.aya-dots i{width:6px;height:6px;border-radius:50%;background:var(--taupe);animation:aya-dot 1s ease-in-out infinite}
.aya-dots i:nth-child(2){animation-delay:.15s}.aya-dots i:nth-child(3){animation-delay:.3s}
@keyframes aya-dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.aya-quick{display:flex;gap:6px;overflow-x:auto;padding:8px 12px 2px;scrollbar-width:none}
.aya-quick::-webkit-scrollbar{display:none}
.aya-quick[hidden]{display:none}
.aya-quick .aya-chip{flex:none;font-size:11.5px;padding:6px 12px;white-space:nowrap}
.aya-quick .aya-chip:disabled{opacity:.5}
@media (prefers-reduced-motion:reduce){ .aya-dots i{animation:none;opacity:.7} }


/* phones: a sheet that rises from the bottom; the launcher steps aside */
@media (max-width:520px){
  .aya{left:0;right:0;bottom:0;width:100%;height:min(88svh,680px);border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom);transform:translateY(100%);transform-origin:bottom center}
  .aya.on{transform:none}
  .aya-h{padding-top:20px}
  .aya-h::before{content:"";position:absolute;top:7px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:rgba(247,244,239,.3)}
  html.aya-open .aya-btn{opacity:0;visibility:hidden;pointer-events:none}
  html.aya-open body::after{content:"";position:fixed;inset:0;z-index:94;background:rgba(21,21,19,.35);animation:aya-fade .3s var(--ease-out)}
}
@keyframes aya-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .aya,.aya.on,.aya-btn{transition:none} .aya-msg,.aya-bot,.aya-robot,.aya-robot *,.aya.busy .aya-h .r-eyes{animation:none!important} }
.page-title.co-head{padding:0;margin-bottom:30px;flex-wrap:wrap;gap:10px 28px;border-bottom:0}
.page-title.co-head .display{font-size:calc(clamp(46px,7vw,96px) * var(--hs,1))}

/* Admin preview banner (only in ?preview= mode) */
.ay-preview{position:fixed;z-index:200;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:14px;align-items:center;padding:9px 16px;background:var(--ink);color:var(--ivory);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;border-radius:999px;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);pointer-events:auto}
.ay-preview a{text-decoration:underline;text-underline-offset:3px}

/* Touch screens: iOS zooms the page into any field whose text is under 16px
   (the coupon box, footer sign-up, Aya and the shop's sort menu were 11-15px).
   16px stops the zoom without disabling pinch-zoom for people who need it. */
@media (pointer:coarse),(max-width:900px){
  input,select,textarea,.coupon input,.ftr input[type=email],.ftr input[type=text],.aya-f input,.filters select{font-size:16px}
  .filters select{letter-spacing:.08em}
}

/* Phones: on checkout the floating "Ask Aya" button sat on top of Pay with
   PayFast (and the coupon's Apply) whenever they reached the bottom of the
   screen. Nothing should compete with Pay there. */
@media (max-width:900px){
  html[data-page="checkout"] .aya-btn{display:none}
}

/* Express wallet buttons (checkout summary). Apple Pay black and Google Pay
   white with a border, as their brand guidelines show them; 52px for thumbs. */
.express{display:flex;flex-direction:column;gap:10px;margin:4px 0 2px}
.express .eyebrow{margin:0}
.wallet-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.wallet-btn{height:52px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:2px;font-size:20px;font-weight:500;letter-spacing:-.01em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif}
.wallet-btn:disabled{opacity:.55;cursor:wait}
.wallet-btn:focus-visible{outline:2px solid var(--gold,#b8930a);outline-offset:3px}
.wl-ap{background:#000;color:#fff;border:1px solid #000}
.wl-ap .wl-mark{font-size:22px;margin-right:1px;line-height:1}
.wl-gp{background:#fff;color:#3c4043;border:1px solid #dadce0}
.wl-gp .wl-g{font-weight:700;color:#4285f4;margin-right:4px}
.wl-sp{background:#1428a0;color:#fff;border:1px solid #1428a0;font-size:15px}
.express-or{display:flex;align-items:center;gap:12px;margin:6px 0 2px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#6f6a60)}
.express-or::before,.express-or::after{content:"";flex:1;height:1px;background:var(--line,#e2ddd3)}

/* ---------- overlays: closed means hidden ----------
   Closed panels used to stay "visible" just off screen: the search panel's
   drop shadow bled down over the header and the mobile menu, and their links
   could still be reached with Tab. Visibility now flips after the slide-out. */
.search,.drawer,.mnav{visibility:hidden;transition:transform .7s var(--ease-out),visibility 0s linear .7s}
.search.on,.drawer.on,.mnav.on{visibility:visible;transition:transform .7s var(--ease-out),visibility 0s}

/* .pill (status chip, declared later) leaked into .btn.pill buttons: it made
   them inline-block (the arrow fell onto "SUBMIT" on the contact form) and gave
   them its greige fill (white "SHOP REJOOSH" text on a cream pill over the hero).
   Outline pills are transparent again; solid pills keep their charcoal fill. */
.btn.pill{display:inline-flex;font-size:11px;letter-spacing:.26em}
.btn.pill:not(.solid){background:transparent}
/* light pills sit on hero photos: a soft dark glass keeps the ivory text readable on bright images */
.btn.pill.light{background:rgba(21,21,19,.24);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ---------- phones ---------- */
@media (max-width:860px){
  /* header: 44px tap targets, same visual icons, logo still centred */
  .hdr .ico-btn{width:44px;height:44px}
  .hdr .nav-l{margin-left:-12px}
  .hdr .nav-r{gap:2px;margin-right:-12px}
  .hdr .ico-btn .bag-count{top:5px;right:3px}
  /* the desktop link underline must not stick to the menu button after a tap */
  .hdr .nav-l .burger::after{content:none}

  /* page titles (Contact, FAQ, Journal...): subtitle above, big title on the rule */
  .page-title{flex-direction:column;align-items:flex-start;gap:12px}
  .page-title .eyebrow{order:-1}

  /* mobile menu: a modern app-style menu.
     Top bar matches the header (× where the menu button was, logo centred),
     then search, the shop in large type, and each group as a card of
     full-width rows: one link per row, sentence case, a chevron, 52px tall. */
  .mnav{padding:0 var(--gutter) calc(32px + env(safe-area-inset-bottom))}
  .mnav > *{flex-shrink:0} /* the menu scrolls; its parts must never squash to fit */
  .mnav .top{position:sticky;top:0;z-index:1;height:64px;margin:0;background:var(--paper);display:grid;grid-template-columns:1fr auto 1fr}
  .mnav .top svg.wm{width:128px;grid-column:2;grid-row:1}
  .mnav .top .x{width:44px;height:44px;margin-left:-12px;grid-column:1;grid-row:1;justify-self:start}
  .mnav .m-search{display:flex;align-items:center;gap:12px;width:100%;height:48px;margin:6px 0 22px;padding:0 18px;border-radius:999px;background:var(--greige);color:var(--taupe);font-size:15px;text-align:left}
  .mnav .m-search .ico{width:18px;height:18px;flex:none;stroke:var(--charcoal)}
  .mnav .m-shop{border-top:1px solid var(--line)}
  .mnav a.big{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:clamp(28px,8vw,34px);line-height:1.1;padding:14px 2px 14px 0;border-bottom:1px solid var(--line)}
  .mnav .chev-r{flex:none;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.3;opacity:.4}
  .mnav .m-grp{margin-top:30px}
  .mnav .eyebrow{margin:0 0 10px 4px}
  .mnav .lst{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .mnav .lst a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px 0 16px;border-top:1px solid var(--line);font-size:16px;letter-spacing:.01em;text-transform:none;transition:background .2s}
  .mnav .lst a:first-child{border-top:0}
  .mnav .lst a span{flex:1}
  .mnav .lst a:active,.mnav .lst a:hover{background:var(--ivory)}
  .mnav .lst.util{margin-top:30px}
  .mnav .lst.util:empty{display:none}
  .mnav .lst.util .ico{width:20px;height:20px}
  .mnav .m-social{display:flex;justify-content:center;gap:12px;margin-top:30px}
  .mnav .m-social:empty{display:none}
  .mnav .m-social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%}
  .mnav .m-social svg{width:16px;height:16px;stroke:var(--charcoal);fill:none;stroke-width:1.3}

  /* stacked product cards get room to breathe */
  .grid.g3{row-gap:44px}

  /* Ask Aya: smaller, clear of the phone's home bar, never over the last footer row */
  .aya-btn{height:46px;padding:0 18px 0 6px;gap:10px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .aya-bot{width:34px;height:34px}
  .ftr .legal{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (max-width:520px){
  /* name on its own line, price underneath: no squeezed three-line names */
  .card .meta{grid-template-columns:1fr}
  .card .price{grid-column:1;grid-row:auto}
}

/* ---------- social badges in brand colours (footer + phone menu) ---------- */
.socials a.s-ig,.mnav .m-social a.s-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);border-color:transparent}
.socials a.s-tt,.mnav .m-social a.s-tt{background:#010101;border-color:rgba(247,244,239,.2)}
.socials svg.s-mark,.mnav .m-social svg.s-mark,.socials a:hover svg.s-mark{width:20px;height:20px;stroke:none;fill:none}
.socials a.s-ig:hover,.socials a.s-tt:hover,.mnav .m-social a.s-ig:hover,.mnav .m-social a.s-tt:hover{transform:translateY(-2px);filter:brightness(1.06)}
.socials a.s-ig:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.socials a.s-tt:hover{background:#010101}
.socials a,.mnav .m-social a{transition:background .3s,border-color .3s,transform .3s var(--ease-out),filter .3s}

/* ---------- legal pages (Admin -> Website content -> Terms / Privacy) ---------- */
.legal{max-width:760px}
.legal .lede{margin:0 0 8px}
.legal .updated{margin:0 0 48px}
.legal-toc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin:0 0 56px;columns:2 260px;column-gap:40px}
.legal-toc a{display:block;padding:5px 0;font-size:14px;color:var(--smoke);break-inside:avoid}
.legal-toc a:hover{color:var(--charcoal)}
.legal section{padding:0 0 44px;scroll-margin-top:calc(var(--header-h) + 16px)}
.legal h2{font-family:var(--f-heading);font-weight:400;font-size:calc(clamp(22px,2.2vw,30px) * var(--hs,1));line-height:1.25;margin:0 0 16px}
.legal p{margin:0 0 14px;max-width:68ch}
.legal ul{margin:0 0 14px;padding-left:20px;max-width:66ch}
.legal li{margin:0 0 6px}