/* AD576 NouraHair site v3.3: shared styles */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/cormorant-300.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url(fonts/cormorant-300-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-500.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/figtree-400.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/figtree-500.woff2) format("woff2")}
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/marcellus-400.woff2) format("woff2")}

:root{
  --ground:#F7F7F5;--ink:#141210;--stone:#E9E7E2;--muted:#6F6A63;--brass:#9C7B4A;--sand:#AB8667;
  --border:#D9D6CF;--on-dark:#B8B2A8;--section:#EFEEEB;--ritual:#261E18;--hair:#F7D7A8;--cream:#F2E4CB;--values:#ECE8E2;
  --serif:"Cormorant Garamond",Georgia,serif;--sans:"Figtree",system-ui,sans-serif;--mark:"Marcellus",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);--ease-nav:cubic-bezier(.24,.43,.15,.97);
  --px:clamp(24px,12.5vw,240px);
  --navh:95px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.55;-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}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;font-weight:300}
p{text-wrap:pretty}
em{font-style:italic}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* smooth scroll rig */
.rig-on body{overscroll-behavior:none}
.rig-on #smooth{position:fixed;inset:0 0 auto 0;will-change:transform}

/* logo */
.logo{display:inline-flex;flex-direction:column;align-items:center;line-height:1;gap:6px}
.logo__noura{font-family:var(--mark);font-size:30px;letter-spacing:.32em;margin-right:-.32em}
.logo__hair{font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.9em;margin-right:-.9em;color:var(--brass)}

/* preloader: full rings on the first visit, short wordmark between pages */
.pre{position:fixed;inset:0;z-index:90;background:var(--stone);display:grid;place-items:center;transition:background-color .9s var(--ease-io),opacity .8s ease}
.pre.is-dark{background:var(--ink)}
.pre.is-out{opacity:0;pointer-events:none}
.pre{--s:min(96vmin,1080px)}
.pre__rings{position:absolute;width:var(--s);height:var(--s);left:50%;top:50%;margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);pointer-events:none}
.pre__ring{position:absolute;left:50%;top:50%;width:calc(var(--s) * 420 / 1040);height:calc(var(--s) * 420 / 1040);margin:calc(var(--s) * -210 / 1040) 0 0 calc(var(--s) * -210 / 1040);overflow:visible}
.pre__ring circle{fill:none;vector-effect:non-scaling-stroke}
/* the petals are plain elements rather than SVG groups, so their movement runs on the compositor instead of repainting the whole drawing every frame */
.pre__petal{position:absolute;left:50%;top:50%;width:calc(var(--s) * 300 / 1040);height:calc(var(--s) * 300 / 1040);margin:calc(var(--s) * -150 / 1040) 0 0 calc(var(--s) * -150 / 1040);border:1px solid rgba(20,18,16,.07);border-radius:50%;opacity:0;transform:translate3d(0,0,0);will-change:transform,opacity;transition:transform 1.3s var(--ease-io),opacity 1.1s ease,border-color .9s ease}
.pre.is-in .pre__petal{opacity:1;transform:translate3d(calc(var(--x) * var(--s) / 1040),calc(var(--y) * var(--s) / 1040),0)}
.pre.is-dark .pre__petal{border-color:rgba(247,247,245,.06)}
.pre.is-leave .pre__petal{opacity:0;transform:translate3d(0,0,0);transition:transform .9s var(--ease-io),opacity .7s ease;transition-delay:0s!important}
.pre__core{stroke:var(--ink);stroke-width:1;stroke-opacity:.2;stroke-dasharray:var(--c);stroke-dashoffset:var(--c);transform:rotate(-90deg);transition:stroke-dashoffset 1.5s var(--ease-io),stroke .9s var(--ease-io),stroke-opacity .9s ease}
.pre.is-in .pre__core{stroke-dashoffset:0}
.pre.is-dark .pre__core{stroke:var(--ground);stroke-opacity:.16}
.pre.is-leave .pre__core{stroke-dashoffset:var(--c);transition:stroke-dashoffset .9s var(--ease-io)}
.pre__spark{stroke:var(--brass);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:60 var(--c);stroke-dashoffset:0;transform:rotate(-90deg);opacity:0}
.pre.is-in .pre__spark{animation:preSpark 1.9s var(--ease-io) .25s forwards}
@keyframes preSpark{0%{opacity:0;stroke-dashoffset:0}12%{opacity:.55}80%{opacity:.55}100%{opacity:0;stroke-dashoffset:calc(var(--c) * -1)}}
.pre__mark{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink);transition:color .9s var(--ease-io)}
.pre.is-dark .pre__mark{color:var(--ground)}
.pre__word{display:flex;font-family:var(--mark);font-size:clamp(26px,2.4vw,46px);line-height:1;letter-spacing:.32em;margin-right:-.32em}
.pre__l{display:block;overflow:hidden;padding:.08em 0}
.pre__l span{display:block;transform:translateY(120%);transition:transform 1.3s var(--ease)}
.pre.is-logo .pre__l span{transform:none}
.pre.is-leave .pre__l span{transform:translateY(-120%);transition:transform .9s var(--ease-io)}
.pre__l:nth-child(1) span{transition-delay:0s}.pre__l:nth-child(2) span{transition-delay:.07s}.pre__l:nth-child(3) span{transition-delay:.14s}.pre__l:nth-child(4) span{transition-delay:.21s}.pre__l:nth-child(5) span{transition-delay:.28s}
.pre__hair{display:block;overflow:hidden;padding:.1em 0;font-family:var(--sans);font-weight:500;font-size:clamp(9px,.75vw,13px);letter-spacing:.9em;margin-right:-.9em;color:var(--brass)}
.pre__hair span{display:block;transform:translateY(120%);transition:transform 1.3s var(--ease) .3s}
.pre.is-logo .pre__hair span{transform:none}
.pre.is-leave .pre__hair span{transform:translateY(-120%);transition:transform .9s var(--ease-io) .05s}
/* short version between pages: wordmark only, quicker beats */
.pre--short .pre__rings{display:none}
.pre--short .pre__l span,.pre--short .pre__hair span{transition-duration:.9s}
.pre--short .pre__hair span{transition-delay:.15s}
.pre--short.is-leave .pre__l span,.pre--short.is-leave .pre__hair span{transition-duration:.6s}
.pre--short .pre__l:nth-child(n) span{transition-delay:calc(var(--i) * .04s)}
.pre--short{transition:opacity .55s ease}

/* page leave: the ground of the preloader fades over the page before the next one loads */
.veil{position:fixed;inset:0;z-index:95;background:var(--stone);opacity:0;pointer-events:none;transition:opacity .55s var(--ease-io)}
.is-leaving .veil{opacity:1;pointer-events:auto}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;color:#fff;background:rgba(247,247,245,0);opacity:0;
  transition:background-color .6s var(--ease-nav) .1s,color .6s var(--ease-nav) .1s,transform .8s var(--ease-nav)}
.nav.is-ready{opacity:1;transition:opacity .9s ease,background-color .6s var(--ease-nav) .1s,color .6s var(--ease-nav) .1s,transform .8s var(--ease-nav)}
.nav.is-hidden{transform:translate3d(0,-120%,0)}
.nav.is-light{color:var(--ink)}
.nav.is-solid,.nav--bar{background:rgba(247,247,245,1);color:var(--ink)}
.nav--white,.nav--white.is-solid{background:#fff}
.nav__in{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:32px var(--px);transition:padding .6s var(--ease-nav) .1s}
.nav.is-solid .nav__in{padding-top:14px;padding-bottom:14px}
.nav__links,.nav__acts{display:flex;align-items:center;gap:40px;font-size:15px;font-weight:400}
.nav__acts{justify-content:flex-end}
.nav__links a,.nav__acts a,.nav__acts button{position:relative;display:inline-flex;gap:8px;align-items:baseline;isolation:isolate}
.cur{position:relative;display:inline-flex;gap:8px;align-items:center;cursor:pointer;isolation:isolate}
.cur>svg{flex:none}
.cur .dd{left:auto;right:0;min-width:96px}
.cur:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
.nav__num{font-size:11px;font-weight:500;letter-spacing:.06em}
.nav .off{opacity:.35}
.nav__links a[aria-current] .nav__num{color:var(--brass)}
.nav__links a[aria-current],.menu__links a[aria-current]{opacity:.35;pointer-events:none}
.nav__menu{display:none}
.navpad{height:var(--navh)}
/* hover: the word rolls, the rest of the row steps back */
.h{position:relative;display:inline-flex;align-items:baseline}
.h .w{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.25}
.h .w>span{display:block;transition:transform .6s var(--ease)}
.h .w>span+span{position:absolute;left:0;top:0;transform:translateY(105%)}
.h:not(.off):hover .w>span:first-child{transform:translateY(-105%)}
.h:not(.off):hover .w>span+span{transform:none}
.nav__links .h:not(.off),.nav__acts .h:not(.off),.foot__links .h:not(.off),.nav .logo{transition:opacity .45s ease .12s}
.nav:has(.h:not(.off):hover) .h:not(:hover):not(.off),.nav:has(.h:not(.off):hover) .logo,.foot__links:has(.h:not(.off):hover) .h:not(:hover):not(.off){opacity:.4;transition-delay:0s}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:70;background:var(--ground);color:var(--ink);display:flex;flex-direction:column;justify-content:space-between;visibility:hidden;opacity:0;transition:opacity .5s ease,visibility 0s linear .5s;overflow-y:auto}
.menu-open .menu{visibility:visible;opacity:1;transition:opacity .5s ease}
.menu__bar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:24px;font-size:14px;line-height:1}
.menu__bar .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);gap:4px}
.menu__bar .logo__noura{font-size:22px}
.menu__bar .logo__hair{font-size:8px}
.menu__cart{opacity:.35;pointer-events:none}
.menu__links{padding:0 24px}
.menu__links a{position:relative;display:flex;gap:12px;align-items:center;padding:20px 0;border-top:1px solid var(--border)}
.menu__links a:last-child{border-bottom:1px solid var(--border)}
.menu__links .off{color:rgba(20,18,16,.35)}
.menu__links .off .menu__n{opacity:.35}
.menu__n{font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--brass);line-height:1}
.menu__t{display:block;overflow:hidden;font-family:var(--serif);font-weight:300;font-size:32px;line-height:1.1}
.menu__t>span{display:block;transform:translateY(110%);transition:transform .9s var(--ease)}
.menu-open .menu__t>span{transform:none}
.menu__links a:nth-child(1) .menu__t>span{transition-delay:.1s}.menu__links a:nth-child(2) .menu__t>span{transition-delay:.16s}.menu__links a:nth-child(3) .menu__t>span{transition-delay:.22s}.menu__links a:nth-child(4) .menu__t>span{transition-delay:.28s}
.menu__foot{display:flex;flex-direction:column;gap:16px;padding:24px 24px 32px;font-size:14px;line-height:1;color:var(--muted)}
.menu__legal,.menu__prefs{display:flex;flex-wrap:wrap;gap:12px 24px}
.menu__prefs .cur{color:var(--ink)}
.menu__prefs .cur .dd{left:0;right:auto}
.menu__foot .btn{width:100%;height:55px}
.menu__tag{font-size:12px;line-height:1.5}
.menu-open{overflow:hidden}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:55px;padding:0 32px;border-radius:2px;font-size:15px;font-weight:500;line-height:1;transition:background-color .45s ease,color .45s ease,border-color .45s ease}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{background:var(--cream)}
.btn--line{border:1px solid var(--ink);color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--ground)}
.btn--stone{background:var(--stone);color:var(--ink)}
.btn--stone:hover{background:#dedad2}
.btn--ink{background:var(--ink);color:var(--ground)}
.btn--ink:hover{background:#2b2622}
.btn--full{width:100%}

/* reveal system */
.mask{display:block;overflow:hidden;margin-top:-.15em;padding-top:.15em;padding-bottom:.15em;margin-bottom:-.15em}
.mask>span{display:block;transform:translateY(120%);transition:transform 1.6s var(--ease)}
.is-shown .mask>span,.mask.is-shown>span{transform:none}
.split .ln{display:block;overflow:hidden;margin-top:-.15em;padding-top:.15em;padding-bottom:.15em;margin-bottom:-.15em}
.split .ln>span{display:block;transform:translateY(120%);transition:transform 1.6s var(--ease)}
.split.is-shown .ln>span{transform:none}
.fade{opacity:0;transition:opacity 1.2s ease}
.is-shown .fade,.fade.is-shown{opacity:1}
.rule{height:1px;background:var(--border);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease)}
.is-shown .rule,.rule.is-shown{transform:none}
.draw path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 2.8s var(--ease-io)}
.draw.is-shown path{stroke-dashoffset:0}
.scrub path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:none}
.wave{display:block;height:auto;overflow:visible}
.wave path{stroke-width:1.25;stroke-linecap:round}
.wave--brass path{stroke:var(--brass)}
.wave--light path{stroke:#C4A272}

.label{display:flex;gap:12px;font-size:13px;font-weight:500;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}
.label__n{color:var(--muted)}

/* media parallax frame */
.frame{position:relative;overflow:hidden;background:var(--stone)}
.frame>.pl{position:absolute;inset:-9% 0;will-change:transform}
.frame>.pl>img,.frame>.pl>video{width:100%;height:100%;object-fit:cover}
.card .frame img,.rcard .frame img{transition:transform 1.2s var(--ease)}
.card:hover .frame img,.rcard:hover .frame img{transform:scale(1.04)}

/* shared heads and closing */
.head{display:flex;flex-direction:column;align-items:center;gap:20px}
.head .label{justify-content:center}
.head h2{font-family:var(--serif);font-size:clamp(40px,3.33vw,64px);line-height:1.05;max-width:800px}
.head p{color:var(--muted);max-width:465px}
.h1{font-family:var(--serif);font-weight:300;font-size:clamp(56px,4.58vw,88px);line-height:1.2}
.h2{font-family:var(--serif);font-weight:300;font-size:clamp(44px,3.33vw,64px);line-height:1.2}
.closing{padding:140px var(--px);display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center;background:var(--ground)}
.closing__stack{display:flex;flex-direction:column;align-items:center;gap:32px}
.closing__head{display:flex;flex-direction:column;align-items:center;gap:24px}
.closing h2{font-family:var(--serif);font-weight:300;font-size:clamp(44px,3.33vw,64px);line-height:1.2}
.closing p{color:var(--muted)}

/* product card (homepage and the range) */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,336px));gap:32px;justify-content:center;width:100%}
.card{display:flex;flex-direction:column;gap:20px;text-align:left}
.card__meta{display:flex;flex-direction:column;gap:8px}
.card .frame{aspect-ratio:3/4;border-radius:2px}
.card__t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;line-height:1.5}
.card h3{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.2}
.card__ml{color:var(--muted);white-space:nowrap}
.card__soon{font-weight:500;color:var(--brass);white-space:nowrap}

/* ===== homepage ===== */
.hero{position:relative;height:min(100svh,50vw);min-height:640px;max-height:960px;overflow:hidden;background:#1a1714;color:#fff}
.hero__media{position:absolute;inset:0;transform:scale(1.35);transform-origin:50% 55%;transition:transform 2.4s var(--ease)}
.hero.is-on .hero__media{transform:scale(1)}
.hero__media video,.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__dissolve{position:absolute;inset:-1px 0;z-index:4;background:var(--section);pointer-events:none;-webkit-mask-image:linear-gradient(transparent,transparent);mask-image:linear-gradient(transparent,transparent)}
.hero__media>img,.hero__media>video{will-change:transform}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,18,15,.18) 0%,rgba(20,18,15,0) 30%,rgba(20,18,15,.25) 55%,rgba(20,18,15,.7) 100%)}
.hero__lines{position:absolute;inset:0;pointer-events:none}
.hero__lines svg{position:absolute;top:0;height:100%;width:auto;overflow:visible}
.hero__lines .l{left:0;transform:scaleY(-1)}
.hero__lines .r{right:0;transform:rotate(180deg)}
.hero__copy{position:absolute;z-index:3;left:50%;bottom:80px;transform:translateX(-50%);width:min(760px,calc(100% - 48px));text-align:center;display:flex;flex-direction:column;align-items:center}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(44px,4.6vw,88px);line-height:1.04;letter-spacing:-.01em}
.hero__body{margin-top:16px;font-size:clamp(15px,1.05vw,20px);line-height:1.5;color:rgba(255,255,255,.7)}
.hero__cta{margin-top:32px}

.philo{display:grid;grid-template-columns:1fr 1fr;background:var(--section);min-height:800px}
.philo__copy{padding:104px 120px 104px var(--px);display:flex;flex-direction:column;justify-content:center;gap:40px}
.philo h2{font-family:var(--serif);font-size:clamp(40px,3.33vw,64px);line-height:1.05;max-width:520px}
.philo__body{display:grid;gap:20px;max-width:560px;color:var(--muted)}
.philo .frame{min-height:560px}
.philo .frame video{transform:scaleX(-1)}

.range{padding:80px var(--px) 80px;display:flex;flex-direction:column;align-items:center;gap:64px;text-align:center}

.ritual{position:relative;height:min(900px,46.875vw);min-height:640px;background:var(--ritual);color:#fff;overflow:hidden}
.ritual .frame{position:absolute;inset:0;background:var(--ritual)}
.ritual .frame>.pl{inset:-6% 0}
.ritual__overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(20,18,16,.55) 0%,rgba(20,18,16,0) 70%)}
.arch{position:absolute;left:0;top:-1px;width:100%;height:296px;pointer-events:none;z-index:2}
.arch path{fill:var(--ground)}
.ritual__lines{position:absolute;top:0;height:106.67%;width:auto;z-index:1;pointer-events:none;overflow:visible}
.ritual__lines.a{left:44.48%}
.ritual__lines.b{left:47.08%;top:2.22%;height:104.44%}
.ritual__copy{position:absolute;z-index:3;left:var(--px);top:0;height:100%;justify-content:center;display:flex;flex-direction:column;gap:32px;max-width:560px;padding-top:4%}
.ritual__head{display:flex;flex-direction:column;gap:24px}
.ritual h2{font-family:var(--serif);font-size:clamp(44px,3.33vw,64px);line-height:1.2;color:var(--ground);max-width:620px}
.ritual__body{display:grid;gap:27px;color:rgba(255,255,255,.7)}

.made{display:grid;grid-template-columns:50% 1fr;background:var(--section)}
.made .frame{min-height:900px;max-height:900px}
.made .frame img{object-position:35% 50%}
.made__copy{padding:104px var(--px) 104px 104px;display:flex;flex-direction:column;justify-content:center;gap:56px;max-width:calc(616px + 104px + var(--px))}
.made__head{display:grid;gap:20px}
.made h2{font-family:var(--serif);font-size:clamp(40px,3.33vw,64px);line-height:1.05}
.made__head p{color:var(--muted);max-width:527px}
.points{display:grid}
.pt{display:grid;grid-template-columns:44px 1fr;gap:0 32px;padding:28px 0;position:relative}
.pt .rule{position:absolute;left:0;right:0;top:0}
.pt__n{font-size:14px;font-weight:500;color:var(--brass);padding-top:6px}
.pt h3{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.2;margin-bottom:8px}
.pt p{font-size:16px;color:var(--muted)}

.routine{padding:104px var(--px);display:flex;flex-direction:column;align-items:center;gap:56px;text-align:center}
.routine .head p{max-width:600px}
.rcard{position:relative;aspect-ratio:336/520;border-radius:2px;overflow:hidden;background:var(--ink);color:#fff;text-align:left}
.rcard .frame{position:absolute;inset:0;background:var(--ink)}
.rcard__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,5,.85) 0%,rgba(5,5,5,.45) 45%,rgba(5,5,5,0) 75%)}
.rcard__in{position:absolute;inset:auto 0 0 0;padding:24px 24px 28px;display:grid;gap:10px}
.rcard__n{font-size:13px;font-weight:500;color:var(--hair);letter-spacing:.06em}
.rcard h3{font-family:var(--serif);font-weight:500;font-size:clamp(28px,1.875vw,36px);line-height:1.1}
.rcard p{font-size:16px;line-height:1.5;color:rgba(255,255,255,.72);text-wrap:balance}

.craft{display:grid;grid-template-columns:50% 1fr;gap:120px;min-height:760px}
.craft .frame{min-height:760px}
.craft__copy{padding:104px var(--px) 104px 0;display:flex;flex-direction:column;justify-content:center;gap:40px}
.craft h2{font-family:var(--serif);font-size:clamp(40px,3.33vw,64px);line-height:1.05}
.steps{display:grid}
.step{position:relative;display:grid;grid-template-columns:44px 1fr;gap:0 32px;padding:32px 0}
.step .rule{position:absolute;left:0;right:0;top:0}
.step:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--border)}
.step h3{font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.2;margin-bottom:8px}
.step p{font-size:16px;color:var(--muted)}

/* ===== the range ===== */
.rhero{position:relative;height:clamp(600px,41.67vw,800px);overflow:hidden;background:#0F0F0F;color:var(--ground)}
.rhero .frame{position:absolute;inset:0;background:#0F0F0F}
.rhero .frame img,.rhero .frame video{object-position:50% 50%}
.rhero .frame .pl>video{position:absolute;inset:0}
.rhero .label,.rhero .jump .nav__num{color:var(--sand)}
.rhero__copy{position:relative;z-index:2;height:100%;padding:0 var(--px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:28px;max-width:calc(760px + var(--px))}
.rhero__copy p.body{color:var(--on-dark);max-width:520px}
.jump{display:flex;flex-wrap:wrap;gap:12px 32px;font-size:15px;line-height:1}
.jump a{display:inline-flex;align-items:flex-end;gap:6px}
.jump .nav__num{color:var(--brass)}
.jump:has(a:hover) a:not(:hover){opacity:.4}
.jump a{transition:opacity .45s ease .12s}
.jump:has(a:hover) a{transition-delay:0s}
.rstep{display:grid;grid-template-columns:1fr 1fr;background:var(--ground)}
.rstep .frame{height:clamp(560px,39.06vw,750px)}
.rstep__copy{padding:96px var(--px) 96px 120px;display:flex;flex-direction:column;justify-content:center;gap:56px}
.rstep--r .rstep__copy{padding:96px 120px 96px var(--px);order:-1}
.rstep__head{display:flex;flex-direction:column;gap:24px}
.rstep__head p{color:var(--muted);max-width:600px}
.facts{display:flex;flex-direction:column}
.fact{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0}
.fact__k{font-size:15px;line-height:1.5;color:var(--muted);white-space:nowrap}
.fact__v{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.2;text-align:right}
.acc{background:var(--section);padding:104px var(--px);display:flex;flex-direction:column;gap:72px}
.acc__head{display:flex;flex-direction:column;gap:24px}
.acc__head p{color:var(--muted)}
.acc .grid4{justify-content:space-between;grid-template-columns:repeat(4,minmax(0,1fr))}
.more{display:grid;grid-template-columns:1fr 1fr;gap:0 120px}
.list{display:flex;flex-direction:column}
.list .fact{padding:20px 0}
.list .fact__v{text-align:left}
.intro .frame img,.collage__b img{width:100%;height:100%;object-fit:cover}

/* ===== about ===== */
.intro{position:relative;padding:150px var(--px) 120px;display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center;overflow:hidden}
.intro .frame{position:absolute;inset:0;background:var(--ground)}
.intro__stack{position:relative;display:flex;flex-direction:column;align-items:center;gap:32px}
.intro h1{font-family:var(--serif);font-weight:300;font-size:clamp(64px,5.42vw,104px);line-height:1}
.intro p.body{position:relative;max-width:600px}
.intro .wave{position:relative}
.collage{position:relative;height:clamp(560px,36.46vw,700px);background:var(--ground)}
.collage__a{position:absolute;left:0;top:0;bottom:0;width:44.79%}
.collage__b{position:absolute;left:34.9%;top:15.71%;width:19.79%;height:68.57%;border:6px solid var(--ground);box-sizing:border-box;z-index:2}
.collage__text{position:absolute;left:59.27%;top:50%;transform:translateY(-50%);width:28.23%;display:flex;flex-direction:column;gap:28px}
.collage__label{display:flex;flex-direction:column;gap:24px}
.collage__label .label{font-size:12px;letter-spacing:.14em;text-transform:none}
.collage__text h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,1.875vw,36px);line-height:1.1;max-width:480px}
.collage__body{display:grid;gap:24px;font-size:16px;line-height:1.5;color:var(--muted)}
.collage__copy{display:flex;flex-direction:column;gap:24px}
.textured{position:relative;overflow:hidden}
.textured__tex{position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.55;pointer-events:none}
.textured__tex img{width:100%;height:100%;object-fit:cover}
.statement{background:var(--ritual);color:var(--ground);padding:140px var(--px);display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center}
.statement h2{position:relative;font-family:var(--serif);font-weight:300;font-size:clamp(56px,4.58vw,88px);line-height:1.2}
.statement p{position:relative;opacity:.85;max-width:520px}
.statement .wave{position:relative}

/* story slider, pinned */
.story{position:relative;background:var(--ink)}
.story__stage{position:relative;height:100vh;overflow:hidden;color:#fff;will-change:transform}
.no-rig .story__stage{position:sticky;top:0;height:100svh}
.story__bgs,.story__bg{position:absolute;inset:0}
.story__bg+.story__bg{visibility:hidden}
.story__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);will-change:transform}
.story__overlay{position:absolute;inset:0;background:rgba(0,0,0,.28)}
.story__center{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px;pointer-events:none}
.story__center>*{pointer-events:auto}
.story__card{position:relative;width:min(640px,100%);--gap-c:clamp(24px,2.96vh,32px);background:var(--stone);color:var(--ink);border-radius:2px;padding:clamp(32px,5.19vh,56px) 40px;display:flex;flex-direction:column;align-items:center;gap:var(--gap-c);text-align:center}
.story__count{display:flex;font-size:18px;line-height:1.5;white-space:pre}
.story__num{display:block;height:1.5em;overflow:hidden}
.story__num>span{display:block;transition:transform .9s var(--ease)}
.story__num>span>span{display:block}
.story__in{display:flex;flex-direction:column;align-items:center;gap:clamp(24px,5.19vh,56px);width:100%}
.story__titles,.story__bodies{display:grid;width:100%}
.story__titles>*,.story__bodies>*{grid-area:1/1}
.story__titles h2{align-self:center;font-family:var(--serif);font-weight:300;font-size:clamp(40px,5.93vh,64px);line-height:1.2;max-width:560px;margin:0 auto}
.story__bodies p{font-size:clamp(16px,1.85vh,20px);line-height:1.5;max-width:500px;margin:0 auto}
.story .split .ln>span{transition:transform 1.1s var(--ease)}
.story .split.is-past .ln>span{transform:translateY(-120%);transition-duration:.5s;transition-timing-function:cubic-bezier(.5,0,.75,0)}
.story__inset{position:relative;width:100%;max-width:560px;height:clamp(180px,33.33vh,360px);border-radius:2px;overflow:hidden;background:#fff}
.story__inset img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story__inset img+img{clip-path:inset(100% 0 0 0)}
.glass{display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border-radius:2px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;white-space:nowrap}
.glass__t{font-size:15px;font-weight:500;line-height:1}
.glass__a{font-size:18px;line-height:1.5}
.story__cursor{position:absolute;left:17.7%;top:30.55%;z-index:3;will-change:transform}
.story__hint{position:absolute;left:84.9%;top:48.4%;z-index:3;font-size:clamp(20px,1.46vw,28px);line-height:1.2;white-space:nowrap;transition:opacity .6s ease}
.story.is-last .story__hint{opacity:0}
.story__mbtn{display:none}
.has-cursor .story__stage,.has-cursor .story__stage *{cursor:none!important}
.has-cursor .story__cursor{pointer-events:none}

.values{background:var(--values);padding:120px var(--px);display:flex;flex-direction:column;align-items:center;gap:72px;text-align:center}
.values__head{display:flex;flex-direction:column;align-items:center;gap:24px}
.values__head h2{font-family:var(--serif);font-weight:300;font-size:clamp(44px,3.33vw,64px);line-height:1.2}
.values__row{display:flex;justify-content:center;gap:clamp(48px,6.25vw,120px)}
.value{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:340px}
.value__top{display:flex;flex-direction:column;align-items:center;gap:20px}
.value__n{font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--brass);line-height:1.4}
.value__txt{display:flex;flex-direction:column;align-items:center;gap:14px}
.value h3{font-family:var(--serif);font-weight:300;font-size:36px;line-height:1.1;white-space:nowrap}
.value p{font-size:15px;line-height:1.5;color:var(--muted)}
.inset{background:var(--sand);padding:96px var(--px);display:flex;justify-content:center}
.inset__img{position:relative;width:100%;max-width:1440px;height:clamp(480px,33.33vw,640px)}
.inset__img .frame{position:absolute;inset:0}
.inset__shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,18,15,0) 30%,rgba(20,18,15,.78) 100%)}
.inset__cap{position:absolute;left:64px;bottom:64px;z-index:2;color:var(--ground);display:flex;flex-direction:column;gap:18px}
.inset__cap .label{color:var(--ground)}
.inset__cap h3{font-family:var(--serif);font-weight:300;font-size:44px;line-height:1.1}
.inset__cap p{opacity:.85;max-width:520px}

/* ===== contact ===== */
.contact{display:grid;grid-template-columns:50% 1fr;background:var(--ground)}
.contact__img{position:relative;min-height:860px;overflow:hidden;color:#fff}
.contact__img .frame{position:absolute;inset:0}
.contact__shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,18,15,0) 35%,rgba(20,18,15,.8) 100%)}
.contact__copy{position:absolute;left:120px;right:48px;bottom:120px;z-index:2;display:flex;flex-direction:column;gap:32px}
.contact__copy h1{font-family:var(--serif);font-weight:300;font-size:clamp(64px,4.58vw,88px);line-height:1.2}
.contact__copy p.body{max-width:560px}
.details{display:flex;flex-direction:column;gap:32px}
.detail{display:flex;flex-direction:column;gap:8px}
.detail .label{color:#fff}
.detail__v{font-size:18px;line-height:1.5}
.detail__v a:hover{text-decoration:underline;text-underline-offset:3px}
.contact__form{padding:120px var(--px) 120px 120px;display:flex;flex-direction:column;justify-content:center;gap:40px}
.cform{display:flex;flex-direction:column;gap:24px}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform__end{display:flex;justify-content:space-between;align-items:center;gap:16px}
.cform__end .robot{width:auto}

/* fields, shared by the popup and the contact form */
.field{display:grid;gap:8px;align-content:start}
.field label{font-size:13px;font-weight:500;line-height:1.4}
.field input,.field textarea{width:100%;border:1px solid var(--border);border-radius:2px;background:#fff;padding:16px;font:inherit;font-size:15px;line-height:1.2;color:var(--ink)}
.field input{height:49px}
.field textarea{height:160px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field .err{font-size:13px;color:#9b3b2a;display:none}
.field.is-bad .err{display:block}
.field.is-bad input,.field.is-bad textarea{border-color:#9b3b2a}
.check{display:flex;gap:12px;align-items:center;font-size:15px;line-height:1.5;color:var(--muted);cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;border:1px solid var(--border);border-radius:4px;background:#fff;margin:0;display:grid;place-items:center;cursor:pointer}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{content:"";width:10px;height:5px;border:solid #fff;border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg)}
.check a{text-decoration:underline;text-underline-offset:3px}
.check.is-bad{color:#9b3b2a}
.robot{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:4px;background:#fff;padding:16px;font-size:14px;color:var(--ink);cursor:pointer}
.robot input{width:24px;height:24px}
.robot.is-bad{border-color:#9b3b2a}

/* ===== legal and 404 ===== */
.legal{padding:64px var(--px) 120px;display:flex;justify-content:center}
.legal__col{width:min(800px,100%);display:flex;flex-direction:column;gap:32px}
.legal__head{display:flex;flex-direction:column;gap:16px}
.legal h1{font-family:var(--serif);font-weight:300;font-size:64px;line-height:1.2}
.legal__date{font-size:13px;line-height:1.5;color:var(--sand)}
.legal__block{display:flex;flex-direction:column;gap:16px}
.legal h2{font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.2}
.legal p{font-size:16px;line-height:1.5;color:var(--muted)}
.legal p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:3px;overflow-wrap:anywhere}
.legal p a:hover{color:var(--brass)}
.legal__block p+p{margin-top:8px}
.nf{padding:160px var(--px) 200px;display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.nf h1{font-family:var(--serif);font-weight:300;font-size:clamp(56px,4.58vw,88px);line-height:1.2}
.nf p{color:var(--muted);max-width:600px}

/* footer */
.foot{position:relative;height:550px;color:#fff;overflow:hidden;background:#3b3a38;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:104px 0 40px}
.foot .frame{position:absolute;inset:0;background:#3b3a38}
.foot .frame img{object-position:50% 0}
.foot__overlay{position:absolute;inset:0;background:rgba(20,18,16,.38)}
.foot__shade{position:absolute;inset:auto 0 0 0;height:300px;background:linear-gradient(to bottom,rgba(20,18,16,0),rgba(20,18,16,.45))}
.foot__brand{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:32px;padding:0 24px;text-align:center}
.foot__id{display:flex;flex-direction:column;align-items:center;gap:24px}
.foot .logo__noura{font-size:40px;letter-spacing:.32em;color:var(--ground)}
.foot .logo__hair{font-size:12px;letter-spacing:.9em;color:var(--hair);opacity:.8}
.foot .logo{gap:8px}
.foot__tag{font-size:15px;line-height:1.5;color:rgba(247,247,245,.8)}
.foot__wave{width:144px;height:auto;overflow:visible}
.foot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;font-size:15px}
.foot__links a{position:relative;isolation:isolate;color:var(--ground)}
.foot__links .off{opacity:.2}
.foot__bar{position:relative;z-index:3;width:min(1440px,calc(100% - 48px));padding-top:24px;border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:13px;color:var(--ground)}
.foot__legal{display:flex;flex-direction:column;gap:4px;line-height:1.5}
.foot__co{opacity:.7}
.foot__co br.m{display:none}
.foot__links button.h{font:inherit;color:var(--ground)}
.pay{display:flex;align-items:center;gap:12px}
.pay__c{width:48px;height:32px;border-radius:2px;background:#fff;border:1px solid var(--border);display:grid;place-items:center}

/* popup */
.pop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;visibility:hidden;pointer-events:none}
.pop.is-open{visibility:visible;pointer-events:auto}
.pop__overlay{position:absolute;inset:0;background:rgba(20,18,16,.8);opacity:0;transition:opacity .5s ease}
.pop.is-open .pop__overlay{opacity:1}
.pop__box{position:relative;width:min(600px,100%);max-height:calc(100svh - 48px);overflow-y:auto;background:#fff;border-radius:2px;padding:48px;opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .7s var(--ease)}
.pop.is-open .pop__box{opacity:1;transform:none}
.pop__x{position:absolute;top:20px;right:20px;width:36px;height:36px;display:grid;place-items:center;border-radius:2px;z-index:2}
.pop__x:hover{background:var(--stone)}
.pop h2{font-family:var(--serif);font-weight:300;font-size:48px;line-height:1.2}
.pop p{color:var(--muted)}
.pop__panel{display:none;flex-direction:column;gap:24px}
.pop[data-mode="launch"] .pop__panel--launch,.pop[data-mode="launch-sent"] .pop__panel--launch-sent,.pop[data-mode="contact-sent"] .pop__panel--contact-sent{display:flex}
.pop p.label{color:var(--brass)}
.pop .robot{align-self:flex-start}

/* tablet */
@media (max-width:1200px){
  .grid4{grid-template-columns:repeat(2,minmax(0,336px))}
  .acc .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .philo__copy{padding:120px 64px 120px var(--px)}
  .made__copy{padding:96px 48px}
  .craft{gap:64px}
  .rstep__copy,.rstep--r .rstep__copy{padding:72px 48px}
  .more{gap:0 48px}
  .contact__copy{left:48px}
  .contact__form{padding:96px 48px}
  .collage__text{left:57%;width:38%}
  .values__row{flex-wrap:wrap}
}

/* mobile */
@media (max-width:900px){
  :root{--navh:62px}
  body{font-size:15px}
  .nav__in{grid-template-columns:1fr auto 1fr;padding:24px}
  .nav.is-solid .nav__in{padding-top:16px;padding-bottom:16px}
  .nav__links,.nav__acts>:not(.cart){display:none}
  .nav__menu{display:inline-flex;justify-self:start;font-size:14px;font-weight:400;line-height:1}
  .nav__acts{font-size:14px}
  .nav .logo__noura{font-size:22px}
  .nav .logo__hair{font-size:8px}
  .nav .logo{gap:4px}
  .label{font-size:11px;letter-spacing:.08em}
  .h1,.h2{font-size:40px;line-height:1.2}
  .btn{height:46px;padding:0 22px;font-size:14px}
  .closing{padding:64px 24px;gap:24px}
  .closing__stack{gap:20px}
  .closing__head{gap:16px}
  .closing h2{font-size:40px;line-height:1.2}

  .hero{height:640px;min-height:0}
  .hero__copy{left:24px;right:24px;transform:none;width:auto;bottom:48px;text-align:left;align-items:flex-start}
  .hero h1{font-weight:300;font-size:44px;line-height:1.2}
  .hero__body{font-size:15px;margin-top:16px}
  .hero__cta{margin-top:28px}
  .hero__lines .l{left:4%}.hero__lines .r{right:4%}
  .philo{grid-template-columns:1fr;min-height:0}
  .philo__copy{padding:40px 24px;gap:24px}
  .philo h2,.head h2,.made h2,.craft h2{font-size:40px;line-height:1}
  .philo__body{gap:14px}
  .philo .frame{min-height:0;height:300px}
  .range{padding:56px 24px;gap:32px}
  .grid4,.acc .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 17px}
  .range .grid4{row-gap:17px}
  .card{gap:12px}
  .card__meta{gap:4px}
  .card h3{font-size:18px}
  .card__t{flex-direction:column;gap:2px;font-size:12px}
  .ritual{height:auto;display:flex;flex-direction:column;background:var(--ink)}
  .ritual .frame{position:relative;height:350px;inset:auto}
  .ritual .arch{height:72px}
  .ritual__overlay{display:none}
  .ritual__lines{display:none}
  .ritual{min-height:0}
  .ritual__copy{position:relative;left:auto;top:auto;height:auto;padding:40px 24px 56px;gap:20px;max-width:none}
  .ritual__head{gap:16px}
  .ritual__body{gap:14px}
  .ritual h2{font-size:40px;line-height:1}
  .made{grid-template-columns:1fr}
  .made .frame{min-height:0;height:400px}
  .made__copy{padding:40px 24px;gap:32px;max-width:none}
  .pt{grid-template-columns:32px 1fr;gap:0 16px;padding:20px 0}
  .pt h3{font-size:20px}
  .pt p{font-size:14px}
  .routine{padding:24px 24px 56px;gap:32px}
  .routine .grid4{grid-template-columns:1fr;gap:24px}
  .rcard{aspect-ratio:auto;height:400px}
  .craft{grid-template-columns:1fr;gap:0;min-height:0}
  .craft .frame{min-height:0;height:327px}
  .craft__copy{padding:32px 24px 56px;gap:24px}
  .step{grid-template-columns:32px 1fr;gap:0 16px;padding:20px 0}
  .step h3{font-size:20px}
  .step p{font-size:14px}

  /* the range */
  .rhero{height:auto}
  .rhero .frame{position:relative;height:400px}
  .rhero__copy{height:auto;padding:40px 24px 48px;gap:20px;max-width:none}
  .jump{gap:12px 20px;font-size:14px}
  .rstep{grid-template-columns:1fr}
  .rstep--r{background:var(--section)}
  .rstep .frame{height:300px}
  .rstep__copy,.rstep--r .rstep__copy{order:0;padding:40px 24px 56px;gap:32px}
  .rstep__head{gap:16px}
  .rstep__head h2{line-height:1}
  .fact{padding:16px 0;gap:16px}
  .fact__k{font-size:12px}
  .fact__v{font-size:18px}
  .acc{padding:48px 24px 56px;gap:32px}
  .acc__head{gap:16px}
  .acc__head h2{line-height:1}
  .more{grid-template-columns:1fr}
  .more .list+.list>.rule:first-child{display:none}
  .list .fact{padding:16px 0}

  /* about */
  .intro{padding:56px 24px;gap:24px}
  .intro__stack{gap:20px}
  .intro h1{font-size:40px}
  .collage{height:auto;padding:24px 24px 56px;display:flex;flex-direction:column;gap:40px}
  .collage__imgs{position:relative;height:480px}
  .collage__a{width:72.2%;height:66.7%;bottom:auto}
  .collage__b{left:45%;top:auto;bottom:0;width:55%;height:47.5%;transform:none;border-width:12px}
  .collage__text{position:static;transform:none;width:auto;gap:20px}
  .collage__label{gap:16px}
  .collage__label .label{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
  .collage__text h2{font-size:32px}
  .collage__body{font-size:15px}
  .collage__copy{gap:16px}
  .statement{padding:64px 24px;gap:24px}
  .statement h2{font-size:40px}
  .story__stage{height:100svh}
  .story__card{padding:32px 24px;gap:24px}
  .story__in{gap:clamp(16px,3svh,24px)}
  .story__titles h2{font-size:clamp(32px,5svh,40px);max-width:279px}
  .story__bodies p{font-size:15px;max-width:279px}
  .story__inset{height:clamp(120px,22svh,180px);max-width:279px}
  .story__cursor,.story__hint{display:none}
  .story__mbtn{display:inline-flex}
  .story__mbtn .glass__t{font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1.4}
  .values{padding:64px 24px;gap:40px}
  .values__head{gap:16px}
  .values__head h2{font-size:40px}
  .values__row{flex-direction:column;align-items:center;gap:40px}
  .value{gap:16px}
  .value__top{gap:16px}
  .value__n{font-size:11px}
  .value__txt{gap:10px}
  .value h3{font-size:32px}
  .inset{padding:40px 24px}
  .inset__img{height:440px}
  .inset__img .frame img{object-position:73% 50%}
  .inset__cap{left:24px;right:24px;bottom:24px;gap:12px}
  .inset__cap h3{font-size:32px}
  .inset__cap p{font-size:15px}

  /* contact */
  .contact{grid-template-columns:1fr}
  .contact__img{min-height:560px}
  .contact__copy{left:24px;right:24px;bottom:40px;gap:24px}
  .contact__copy h1{font-size:40px}
  .contact__copy p.body{font-size:15px}
  .details{gap:24px}
  .detail .label{font-size:11px}
  .detail__v{font-size:15px}
  .contact__form{padding:40px 24px;gap:24px}
  .cform{gap:20px}
  .cform__row{grid-template-columns:1fr;gap:20px}
  .cform__end{flex-direction:column;align-items:stretch;gap:20px}
  .cform__end .robot{align-self:flex-start}
  .cform__end .btn{width:100%}

  /* legal and 404 */
  .legal{padding:40px 24px 64px}
  .legal__col{gap:28px}
  .legal h1{font-size:40px}
  .legal h2{font-size:24px}
  .legal__block{gap:12px}
  .legal p{font-size:15px}
  .nf{padding:96px 24px 120px;gap:24px}
  .nf h1{font-size:40px}
  .nf p{font-size:15px}

  .foot{height:550px;padding:64px 0 32px}
  .foot__brand{gap:24px}
  .foot__links{gap:16px 24px;font-size:15px;max-width:327px}
  .foot__links .h{padding:2px 0}
  .foot__bar{flex-direction:column;align-items:center;width:327px;max-width:calc(100% - 48px);padding-top:24px;border-top:1px solid rgba(255,255,255,.2);font-size:13px;gap:24px;text-align:center}
  .foot__bar>.foot__legal{order:2;width:100%;gap:16px}
  .foot__co{order:-1}
  .foot__co br.m{display:inline}
  .foot{height:auto;min-height:562px;justify-content:flex-start;gap:24px}
  .foot__bar .pay{order:1}
  .pop__box{padding:32px 24px}
  .pop h2{font-size:36px}
}
@media (min-width:901px){
  .collage__imgs{display:contents}
  .menu{display:none}
}

/* reduced motion: everything static */
@media (prefers-reduced-motion:reduce){
  .pre,.veil{display:none}
  .nav{opacity:1;transition:none}
  .hero__media{transform:none;transition:none}
  .hero__dissolve{display:none}
  .mask>span,.split .ln>span,.fade,.rule,.menu__t>span{transform:none!important;opacity:1!important;transition:none!important}
  .draw path,.scrub path{stroke-dashoffset:0!important;transition:none!important}
  .h .w>span{transition:none}
  .pop__box,.pop__overlay,.menu{transition:none}
  .story__num>span{transition:none}
  .story__bg img{transform:none}
  .story .split:not(.is-shown) .ln>span{opacity:0!important}
  .story__hint{transition:none}
}
/* hover zones touch so the step back never flickers between items; last so it wins over the base gaps */
@media (min-width:901px){
  .nav__links,.nav__acts{gap:0}
  .nav__links .h,.nav__acts .h{padding:12px 20px}
  .nav__links{margin-left:-20px}.nav__acts{margin-right:-20px}
  .foot__links{column-gap:0}
  .foot__links .h{padding:8px 20px}
}

/* cookie consent: banner bottom left, preferences modal */
.ckb{position:fixed;left:40px;bottom:40px;z-index:85;width:480px;max-width:calc(100% - 32px);background:#fff;border-radius:2px;padding:32px;display:flex;flex-direction:column;align-items:flex-start;gap:20px;box-shadow:0 8px 20px rgba(20,18,15,.12);opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .7s var(--ease)}
.ckb[hidden]{display:none}
.ckb.is-in{opacity:1;transform:none}
.ckb__body{font-size:15px;line-height:1.5;color:var(--muted)}
.ck__link{font-size:15px;line-height:1.5;color:var(--ink);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer}
.ck__link:hover{color:var(--brass)}
.ck__acts{display:flex;gap:12px;width:100%}
.ck__acts .btn{flex:1;padding:0 20px}
.ckp{position:fixed;inset:0;z-index:86;display:grid;place-items:center;padding:24px}
.ckp[hidden]{display:none}
.ckp__overlay{position:absolute;inset:0;background:rgba(20,18,16,.8);opacity:0;transition:opacity .5s ease}
.ckp.is-in .ckp__overlay{opacity:1}
.ckp__box{position:relative;width:min(600px,100%);max-height:calc(100svh - 48px);overflow-y:auto;background:#fff;border-radius:2px;padding:48px;display:flex;flex-direction:column;gap:24px;opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .7s var(--ease)}
.ckp.is-in .ckp__box{opacity:1;transform:none}
.ckp__head{display:flex;flex-direction:column;gap:12px}
.ckp__head h2{font-family:var(--serif);font-weight:300;font-size:36px;line-height:1.1}
.ckp__head p:last-child{font-size:15px;line-height:1.5;color:var(--muted)}
.ck__cats{border-top:1px solid var(--border)}
.ck__cat{display:flex;align-items:center;gap:24px;padding:20px 0;border-bottom:1px solid var(--border)}
.ck__txt{flex:1;display:flex;flex-direction:column;gap:4px}
.ck__name{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.2}
.ck__desc,.ck__on{font-size:13px;line-height:1.5;color:var(--muted)}
.ck__on{white-space:nowrap}
.tog{position:relative;flex:none;width:44px;height:24px;border:1px solid var(--border);border-radius:2px;background:var(--stone);padding:0;cursor:pointer;transition:background-color .3s ease,border-color .3s ease}
.tog span{position:absolute;left:3px;top:2px;width:18px;height:18px;border-radius:1px;background:#fff;transition:transform .35s var(--ease)}
.tog[aria-checked="true"]{background:var(--ink);border-color:var(--ink)}
.tog:focus{outline:none}
.tog:focus-visible{outline:1px solid var(--brass);outline-offset:3px}
.tog[aria-checked="true"] span{transform:translateX(18px)}
@media (max-width:900px){
  .ckb{left:16px;right:16px;bottom:16px;width:auto;max-width:none;padding:24px}
  .ckb .label{font-size:11px}
  .ckb__body,.ck__link{font-size:14px}
  .ck__acts{flex-direction:column}
  .ck__acts .btn{flex:none;width:100%}
  .ckp__box{padding:24px}
  .ckp__head h2{font-size:40px;line-height:1}
  .ckp__head p:last-child{font-size:14px}
  .ck__on{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.ckb,.ckp__box,.ckp__overlay{transition:none}}


/* ===== Phase 2: the shop is open ===== */
/* nav over a page hero: light gradient ground, ink text, solid once past the hero */
.nav--over:not(.is-solid){background:linear-gradient(to bottom,rgba(247,247,245,.6),rgba(247,247,245,0))}
.nav__acts .cart{font:inherit}
.menu__cart{opacity:1;pointer-events:auto;font:inherit;line-height:1}
.num{font-family:var(--sans)}
/* current page: the label fades, the brass index stays readable over any ground */
.nav__links a[aria-current]{opacity:1}
.nav__links a[aria-current] .w{opacity:.35}
.thumbs:has(.thumb:only-child){display:none}
.gallery:has(.thumb:only-child){grid-template-columns:minmax(0,1fr)}

/* unbuilt page tooltip */
.tip{position:fixed;z-index:99;width:150px;height:34px;display:grid;place-items:center;background:var(--ink);color:var(--ground);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1;border-radius:2px;opacity:0;pointer-events:none;transition:opacity .25s ease}
.tip::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:var(--ink);transform:translateX(-50%) rotate(45deg)}
.tip--below::after{bottom:auto;top:-5px}
.tip.is-on{opacity:1}

/* shop hero */
.shero{position:relative;height:calc(var(--navh) + 480px);overflow:hidden;color:var(--ground)}
.shero .frame{position:absolute;inset:0}
.shero .frame img{object-position:50% 48%}
.shero__overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(20,18,16,.55),rgba(20,18,16,0) 60%)}
.shero__copy{position:absolute;left:var(--px);top:var(--navh);bottom:0;z-index:2;display:flex;align-items:center}

/* toolbar and filter rail */
.shop{background:var(--ground)}
.shop__toolbar{display:flex;gap:64px;align-items:center;padding:40px var(--px)}
.frail__head{width:288px;flex:none;display:flex;justify-content:space-between;align-items:center;font-size:15px;line-height:1.5}
.frail__clear{font-size:15px;line-height:1.5;color:var(--muted);text-decoration:underline;text-underline-offset:3px;transition:color .3s ease,opacity .3s ease}
.frail__clear:hover{color:var(--ink)}
.frail__clear.is-off{opacity:.35;pointer-events:none}
.shop__search{flex:1;min-width:0;display:flex;gap:40px;align-items:center}
.search{flex:1;min-width:0;display:flex;gap:12px;align-items:center;height:49px;padding:0 16px;border:1px solid var(--border);border-radius:2px;color:var(--ink);transition:border-color .3s ease}
.search:focus-within{border-color:var(--ink)}
.search svg{flex:none}
.search input{flex:1;min-width:0;border:0;background:none;padding:0;font:inherit;font-size:15px;line-height:1;color:var(--ink);outline:none}
.search input::placeholder{color:var(--muted);opacity:1}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.sort{display:flex;gap:8px;align-items:center;font-size:15px;line-height:1.5;white-space:nowrap}
.sort__k{color:var(--muted)}
.sort__v{position:relative;display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.shop__mtools{display:none}
.shop__body{display:flex;gap:64px;align-items:flex-start;padding:0 var(--px) 104px}
.frail{width:288px;flex:none;display:flex;flex-direction:column;gap:32px}
.frail__group{display:flex;flex-direction:column;gap:16px;border:0;padding:0;margin:0;min-width:0}
.frail__label{float:left;width:100%;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.4;padding:0}
.frail__rule{height:1px;background:var(--border)}
.fchk{display:flex;gap:12px;align-items:center;font-size:15px;line-height:1.5;color:var(--muted);cursor:pointer;transition:color .3s ease}
.fchk:hover,.fchk:has(input:checked){color:var(--ink)}
.fchk input{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:0;border:1px solid var(--border);border-radius:2px;background:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .3s ease,border-color .3s ease}
.fchk input:checked{background:var(--ink);border-color:var(--ink)}
.fchk input:checked::after{content:"";width:8px;height:4px;border:solid #fff;border-width:0 0 1.25px 1.25px;transform:translateY(-1px) rotate(-45deg)}
.fchk input:focus-visible{outline:1px solid var(--brass);outline-offset:2px}
.shop__results{flex:1;min-width:0}
.shop__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px}
.pcard{color:var(--ink)}
.pcard[hidden]{display:none}
.card__price{font-weight:500;white-space:nowrap}
.shop__none{padding:24px 0 64px;font-size:15px;color:var(--muted)}
.shop__fbtn{gap:10px;height:49px;font-size:14px}
.sort--field .sort__v{width:100%;height:49px;padding:0 16px;border:1px solid var(--border);border-radius:2px;background:#fff;justify-content:space-between}

/* dropdowns: the sort and the address selects open the same menu */
.dd-host{outline:none}
.dd-host select{display:none}
.dd-host>svg{transition:transform .45s var(--ease)}
.dd-host.is-open>svg{transform:rotate(180deg)}
.sort__v:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
.dd{position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:100%;max-height:320px;overflow-y:auto;margin:0;padding:8px 0;list-style:none;background:#fff;border:1px solid var(--border);border-radius:2px;box-shadow:0 16px 40px rgba(20,18,16,.08);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s ease,transform .5s var(--ease),visibility 0s linear .5s}
.is-open>.dd{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .5s var(--ease)}
.dd--up>.dd{top:auto;bottom:calc(100% + 8px);transform:translateY(6px)}
.dd--up.is-open>.dd{transform:none}
.dd li{padding:12px 16px;font-size:15px;line-height:1.2;color:var(--muted);white-space:nowrap;cursor:pointer;transition:color .2s ease,background-color .2s ease}
.dd li:hover,.dd li.is-active{background:var(--ground);color:var(--ink)}
.dd li[aria-selected="true"]{color:var(--ink);font-weight:500}
.sort .dd{left:auto;right:0}
.sort--field .dd{left:0;right:0}
@media (prefers-reduced-motion:reduce){
  .dd,.dd-host>svg,.dd li,.sel{transition:none}
}

/* cart drawer: a panel from the right on desktop, a sheet from the bottom on phones */
.cdrawer,.fdrawer{position:fixed;inset:0;z-index:80;overflow:hidden;visibility:hidden;pointer-events:none;transition:visibility 0s linear .8s}
.cdrawer.is-open,.fdrawer.is-open{visibility:visible;pointer-events:auto;transition:none}
.cart__overlay{position:absolute;inset:0;background:rgba(20,18,16,.8);opacity:0;transition:opacity .5s ease}
.cdrawer.is-open .cart__overlay,.fdrawer.is-open .cart__overlay{opacity:1}
.cart__panel{position:absolute;top:0;right:0;bottom:0;width:560px;max-width:100%;background:var(--ground);padding:40px;display:flex;flex-direction:column;gap:24px;transform:translateX(100%);transition:transform .8s var(--ease)}
.cdrawer.is-open .cart__panel{transform:none}
.cart-open{overflow:hidden}
.cart__lines[hidden],.cart__empty[hidden],.cart__summary[hidden],.shop__none[hidden]{display:none}
.cart__head{display:flex;justify-content:space-between;align-items:center}
.cart__title{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.2}
.cart__title .num{font-weight:400;font-size:26px}
.cart__close{font-size:15px;font-weight:500;line-height:1.5}
.cart__lines{list-style:none;margin:0;padding:0;flex:1;min-height:0;overflow-y:auto;border-top:1px solid var(--border)}
.cline{display:grid;grid-template-columns:80px minmax(0,1fr) auto 80px;grid-template-rows:auto auto auto;gap:8px 16px;align-items:center;padding:24px 0;border-bottom:1px solid var(--border)}
.cline__img{grid-column:1;grid-row:1/4;width:80px;height:106px;border-radius:2px;overflow:hidden;background:var(--stone)}
.cline__img img{width:100%;height:100%;object-fit:cover}
.cline__name{grid-column:2;grid-row:1;font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.2;align-self:end}
.cline__size{grid-column:2;grid-row:2;font-size:15px;line-height:1.5;color:var(--muted)}
.cline__mp{display:none}
.cline__rm{grid-column:2;grid-row:3;justify-self:start;font-size:13px;font-weight:500;line-height:1.5;color:var(--brass);align-self:start}
.cline .stepper{grid-column:3;grid-row:1/4}
.cline__price{grid-column:4;grid-row:1/4;font-size:15px;font-weight:500;line-height:1.5;text-align:right}
.stepper{display:inline-flex;gap:24px;align-items:center;padding:14px 20px;border:1px solid var(--border);border-radius:2px;background:#fff;font-size:15px;font-weight:500;line-height:1;color:var(--ink)}
.stepper button{width:12px;text-align:center;line-height:1;transition:color .3s ease}
.stepper button:hover{color:var(--brass)}
.stepper span{min-width:9px;text-align:center}
.cart__empty{flex:1;display:flex;flex-direction:column;gap:24px;align-items:flex-start;padding-top:24px;border-top:1px solid var(--border);color:var(--muted);font-size:15px}
.cart__summary{display:flex;flex-direction:column;gap:16px}
.cart__row{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;font-weight:500;line-height:1.5}
.cart__total{font-size:24px;font-weight:400;line-height:1.2}
.cart__note{font-size:13px;line-height:1.5;color:var(--muted)}
.cart__cont{font-size:15px;font-weight:500;line-height:1.5;text-align:center;width:100%}
.cart__rule{height:1px;background:var(--border)}

/* mobile filters sheet */
.fdrawer__panel{position:absolute;left:0;right:0;bottom:0;max-height:calc(100% - 52px);background:var(--ground);border-radius:2px 2px 0 0;padding:24px;display:flex;flex-direction:column;gap:24px;transform:translateY(100%);transition:transform .8s var(--ease)}
.fdrawer.is-open .fdrawer__panel{transform:none}
.fdrawer__body{width:auto;flex:1;min-height:0;overflow-y:auto;gap:24px}
.fdrawer__acts{display:flex;flex-direction:column;gap:16px;align-items:center}

@media (max-width:1200px){
  .frail__head,.shop__search,.shop__body>.frail{display:none}
  .shop__mtools{display:flex;gap:12px;width:100%}
  .shop__fbtn,.sort--field{flex:1}
  .shop__grid{gap:32px 24px}
}
@media (max-width:900px){
  .shero{height:calc(var(--navh) + 240px)}
  .shero .frame img{object-position:100% 100%}
  .shero__overlay{background:linear-gradient(to bottom,rgba(20,18,16,0) 55%,rgba(20,18,16,.65))}
  .shero__copy{left:24px;top:auto;bottom:16px}
  .shop__toolbar{flex-direction:column;align-items:stretch;gap:16px;padding:24px}
  .shop__search{display:flex;gap:16px}
  .shop__search .sort{display:none}
  .shop__body{padding:0 24px 40px}
  .shop__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 17px}
  .pcard .card__t{flex-direction:row;gap:4px 8px;flex-wrap:wrap}
  .cart__panel{top:52px;left:0;width:auto;border-radius:2px 2px 0 0;padding:24px;transform:translateY(100%)}
  .cart__title{font-size:26px}
  .cart__title .num{font-size:21px}
  .cart__close{font-size:14px}
  .cline{grid-template-columns:64px minmax(0,1fr) auto;gap:6px 16px;padding:16px 0}
  .cline__img{width:64px;height:85px}
  .cline__name{font-size:18px}
  .cline__size{font-size:12px}
  .cline__mp{display:inline}
  .cline .stepper{grid-column:2;grid-row:3;justify-self:start}
  .cline__rm{grid-column:3;grid-row:1/4;font-size:12px;align-self:center}
  .cline__price{display:none}
  .cart__summary{gap:12px}
  .cart__row{font-size:14px}
  .cart__total{font-size:20px}
  .cart__note{font-size:12px}
  .cart__cont{font-size:14px}
  .cart__rule{display:none}
  .cart__empty{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .cart__panel,.cart__overlay,.fdrawer__panel,.tip{transition:none}
}

/* ===== product page ===== */
.prod{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:96px;align-items:start;padding:48px var(--px) 104px}
.gallery{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start}
.thumbs{display:flex;flex-direction:column;gap:16px}
.thumb{width:96px;height:128px;border-radius:2px;overflow:hidden;border:1.5px solid transparent;background:var(--stone);transition:border-color .3s ease}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.is-on{border-color:var(--ink)}
.pmain{aspect-ratio:3/4;border-radius:2px}
.pinfo{display:flex;flex-direction:column;gap:32px}
.ptitle{display:flex;flex-direction:column;gap:16px}
.plabel{font-size:13px;font-weight:500;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ptitle h1{font-family:var(--serif);font-weight:300;font-size:64px;line-height:1.2}
.pprice{font-size:24px;line-height:1.2}
.pdesc{font-size:16px;line-height:1.5;color:var(--muted)}
.popts{display:flex;gap:32px}
.popt{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.popt__k{font-size:13px;font-weight:500;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}
.chip{display:inline-flex;align-items:center;padding:14px 20px;border:1px solid var(--ink);border-radius:2px;background:#fff;font-size:15px;font-weight:500;line-height:1}
.pdet{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.pdet__row{border-bottom:1px solid var(--border);padding-bottom:8px;transition:padding-bottom .6s var(--ease)}
.pdet__row.is-open{padding-bottom:0}
.pdet__head{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 0 12px;font-size:15px;font-weight:500;line-height:1.5;text-align:left}
.pdet__i{font-size:18px;font-weight:400;line-height:1.25;width:12px;text-align:center}
.pdet__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.pdet__body>p{overflow:hidden;padding-bottom:20px;font-size:15px;line-height:1.5;color:var(--muted)}
.pdet__row.is-open .pdet__body{grid-template-rows:1fr}
.also{background:var(--stone);padding:104px var(--px);display:flex;flex-direction:column;gap:48px}
.also__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.also__head h2{font-family:var(--serif);font-weight:300;font-size:64px;line-height:1.2}
.also__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.also__all{display:none}
@media (max-width:1440px){
  .prod{grid-template-columns:minmax(0,1fr) 440px;gap:64px}
}
@media (max-width:1200px){
  .prod{grid-template-columns:1fr;gap:48px}
  .also__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .prod{padding:16px 24px 40px;gap:24px}
  .gallery{grid-template-columns:1fr;gap:12px}
  .thumbs{order:2;flex-direction:row;gap:8px}
  .thumb{width:calc((100% - 24px) / 4);height:96px}
  .pmain{order:1;aspect-ratio:auto;height:300px}
  .pinfo{gap:24px}
  .ptitle{gap:12px}
  .plabel{font-size:11px}
  .ptitle h1{font-size:40px}
  .pprice{font-size:20px}
  .pdesc{font-size:15px}
  .popts{gap:24px}
  .pdet__head{padding:16px 0 8px;font-size:14px}
  .pdet__i{font-size:16px}
  .pdet__body>p{font-size:14px}
  .pdet__row.is-open .pdet__body>p{padding-bottom:16px;margin-top:-6px}
  .also{padding:40px 24px;gap:24px}
  .also__head h2{font-size:40px}
  .also__head .btn{display:none}
  .also__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 17px}
  .also__all{display:inline-flex}
}

/* ===== checkout, order confirmation, order failed: a white container over the dusk sky ===== */
.stage{position:relative;padding:104px var(--px);background:linear-gradient(180deg,#16222E 0%,#243C4C 60%,#335365 100%)}
.stage::before{content:"";position:absolute;inset:0;background:radial-gradient(1152px 1206px at 50% 100%,rgba(88,112,127,1),rgba(88,112,127,0));pointer-events:none}
.stage>*{position:relative}
body.on-stage .foot .frame>.pl{inset:0;transform:none!important}
.co{display:flex;align-items:stretch;background:#fff;border-radius:2px;padding:24px;gap:0}
.co__form{flex:1;min-width:0;display:flex;flex-direction:column;gap:40px;padding:72px 80px}
.co__h1{font-family:var(--serif);font-weight:300;font-size:64px;line-height:1.2}
.co__h2{font-family:var(--serif);font-weight:300;font-size:32px;line-height:1.1}
.co__group{display:flex;flex-direction:column;gap:24px}
.co__group--tight{gap:16px}
.co__row{display:grid;grid-template-columns:1fr;gap:16px}
.co__row--2{grid-template-columns:1fr 1fr}
.sel{position:relative;display:flex;align-items:center;height:49px;padding:0 44px 0 16px;border:1px solid var(--border);border-radius:2px;background:#fff;font-size:15px;line-height:1;color:var(--ink);cursor:pointer;transition:border-color .3s ease}
.sel.is-open,.sel:focus-visible{border-color:var(--ink)}
.sel>svg{position:absolute;right:16px;top:50%;margin-top:-8px;pointer-events:none}
.sel__v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field.is-bad .sel{border-color:#9b3b2a}
.methods{display:flex;flex-direction:column;gap:12px}
.method{display:flex;align-items:center;gap:16px;padding:24px;border:1px solid var(--border);border-radius:2px;background:var(--stone);cursor:pointer;transition:border-color .3s ease}
.method input{position:absolute;opacity:0;width:0;height:0}
.method.is-on{border-color:var(--brass)}
.method--card{cursor:default}
.method__ico{flex:none;display:grid;place-items:center;width:24px;height:24px}
.method__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.method__n{font-size:18px;line-height:1.5}
.method__d{font-size:13px;line-height:1.5;color:var(--muted)}
.method__p{font-size:15px;font-weight:500;white-space:nowrap}
.method .pay{gap:8px}
.co__agree{display:flex;align-items:center;justify-content:space-between;gap:16px}
.co__agree .check{flex:1}
.co__agree .robot{flex:none}
.co__summary{flex:none;width:600px;display:flex;flex-direction:column;gap:32px;padding:80px 64px;background:var(--stone);border-radius:2px}
.co__total{display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:24px;text-align:center}
.co__totalk{font-size:18px;line-height:1.5;color:var(--muted)}
.co__totalk--strong{font-size:15px;font-weight:500;color:var(--ink)}
.co__totalv{font-size:64px;line-height:1.2}
.co__rule{height:1px;background:var(--border)}
.co__lines{display:flex;flex-direction:column;gap:20px}
.co__lineshead{font-size:15px;line-height:1.5;color:var(--muted)}
.oline{display:flex;align-items:center;gap:16px}
.oline__img{flex:none;width:48px;height:60px;overflow:hidden;background:#fff}
.oline__img img{width:100%;height:100%;object-fit:cover}
.oline__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.5}
.oline__n{font-size:15px}
.oline__m{font-size:13px;color:var(--muted)}
.oline__p{font-size:15px;white-space:nowrap}
.co__code{display:flex;align-items:flex-end;gap:8px}
.co__code .field{flex:1}
.co__apply{height:49px;padding:0 32px;border:1px solid var(--border)}
.co__rows{display:flex;flex-direction:column;gap:16px}
.srow{display:flex;justify-content:space-between;gap:16px;font-size:15px;line-height:1.5}
.srow>span:first-child{color:var(--muted)}
.srow>span:last-child{font-weight:500}
.co__empty{font-size:18px;line-height:1.5;color:var(--muted)}
.co--empty .co__form{align-items:flex-start}
/* order pages */
.ord__main{justify-content:center}
.mark{display:grid;place-items:center;width:64px;height:64px;border-radius:999px}
.mark--success{background:#47B147}
.mark--error{background:#D43D3D}
.ord__head{display:flex;flex-direction:column;gap:16px}
.ord__head h1{font-family:var(--serif);font-weight:300;font-size:64px;line-height:1.2}
.ord__body{font-size:18px;line-height:1.5;color:var(--muted);max-width:560px}
.steps{display:flex;flex-direction:column;gap:24px}
.step{display:flex;flex-direction:column;gap:8px}
.step__bar{display:block;height:2px;background:var(--border)}
.step.is-on .step__bar{background:var(--brass)}
.step__t{display:flex;gap:8px;align-items:center;font-size:15px;line-height:1.5}
.step__t .nav__num{color:var(--brass)}
.step__d{font-size:15px;line-height:1.5;color:var(--muted)}
.ord__acts{display:flex;gap:16px;flex-wrap:wrap}
.ord__note{font-size:15px;line-height:1.5;color:var(--muted)}
.ord__to{display:flex;flex-direction:column;gap:4px}
.ord__tok{font-size:13px;font-weight:500;line-height:1.4}
.ord__tov{font-size:15px;line-height:1.5;color:var(--muted)}
@media (max-width:1440px){
  .co__form{padding:56px 48px}
  .co__summary{width:480px;padding:56px 40px}
}
@media (max-width:1200px){
  .co{flex-direction:column}
  .co__summary{width:auto}
}
@media (max-width:900px){
  .stage{padding:40px 16px}
  .stage::before{background:radial-gradient(600px 500px at 50% 100%,rgba(88,112,127,1),rgba(88,112,127,0))}
  .co{flex-direction:column;padding:40px 24px;gap:32px}
  .co__form{display:contents}
  .co--empty .co__form{display:flex;flex-direction:column;gap:24px;padding:0}
  .ord__main{display:contents}
  .ord .mark{align-self:center}
  .ord__head{align-items:center;text-align:center}
  .ord__summary{order:1}
  .ord .steps{order:2}
  .ord__acts{order:3}
  .ord__note{order:4}
  .co__h1{font-size:40px}
  .co__h2{font-size:26px}
  .co__row--2{grid-template-columns:1fr}
  .co__agree{flex-direction:column;align-items:stretch}
  .co__agree .robot{align-self:flex-start}
  .co__summary{padding:40px 24px;gap:24px;order:1}
  .co__form>.co__agree,.co__form>.btn{order:2}
  .co__totalk{font-size:16px}
  .co__totalv{font-size:48px}
  .method{padding:20px}
  .method__n{font-size:16px}
  .ord__head h1{font-size:40px}
  .ord__body{font-size:15px}
  .ord__acts{flex-direction:column;gap:12px}
  .ord__acts .btn{width:100%}
}
@media (max-width:900px){
  .method--card{display:grid;grid-template-columns:24px 1fr;grid-template-areas:"ico name" "logos logos" "desc desc";gap:12px 12px;align-items:center}
  .method--card .method__ico{grid-area:ico}
  .method--card .method__t{grid-area:name;display:contents}
  .method--card .method__n{grid-area:name}
  .method--card .method__d{grid-area:desc}
  .method--card .pay{grid-area:logos}
  .co__code{flex-direction:column;align-items:stretch}
  .co__apply{width:100%}
  .srow{font-size:14px;gap:12px}
  .srow>span{white-space:nowrap}
}

/* ===== sign in family ===== */
.auth{display:grid;grid-template-columns:minmax(0,1fr) 50%;background:var(--ground)}
.auth__col{display:flex;flex-direction:column;gap:48px;padding:120px 120px 120px var(--px)}
.auth__col h1{font-family:var(--serif);font-weight:300;font-size:64px;line-height:1.2}
.auth__form{display:flex;flex-direction:column;gap:24px;width:min(480px,100%)}
.auth__img{position:relative;min-height:712px}
.auth__img .frame{position:absolute;inset:0}
.auth--create .auth__img{min-height:893px}
.auth__hint{font-size:13px;line-height:1.5;color:var(--muted);margin-top:-12px}
.auth__link{font-size:15px;line-height:1.5}
.auth__link a,.auth__row a{text-decoration:underline;text-underline-offset:3px}
.auth__link a:hover,.auth__row a:hover{color:var(--brass)}
.auth__row{font-size:15px;line-height:1.5}
.auth__row span{color:var(--muted)}
.pw{position:relative;display:block}
.pw input{padding-right:48px}
.pw__eye{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted);transition:color .3s ease}
.pw__eye:hover,.pw__eye.is-on{color:var(--ink)}
.band{background:var(--stone);padding:120px var(--px);display:flex;justify-content:center}
.acard{width:min(600px,100%);background:#fff;padding:57px;display:flex;flex-direction:column;gap:32px;border-radius:2px}
.prog{display:flex;flex-direction:column;gap:12px}
.prog__bars{display:flex;gap:8px}
.prog__bar{flex:1;height:2px;background:var(--border)}
.prog__bar.is-on{background:var(--brass)}
.prog__label{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;color:var(--muted)}
.acard__head{display:flex;flex-direction:column;gap:16px}
.acard__head h1{font-family:var(--serif);font-weight:300;font-size:48px;line-height:1.2}
.acard__head p{font-size:18px;line-height:1.5;color:var(--muted)}
.rules{display:flex;flex-wrap:wrap;gap:8px 24px}
.rule8{display:inline-flex;gap:8px;align-items:center;font-size:13px;line-height:1.5;color:var(--muted)}
.rule8 svg{color:var(--border);transition:color .3s ease}
.rule8.is-on svg{color:var(--brass)}
.pop--g .pop__panel{display:flex}
@media (max-width:1200px){
  .auth__col{padding:80px 48px}
}
@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth__img{order:-1;min-height:240px;height:240px}
  .auth--create .auth__img{min-height:240px}
  .auth__col{padding:40px 24px;gap:32px}
  .auth__col h1{font-size:40px}
  .auth__form{gap:20px}
  .band{padding:32px 16px}
  .acard{padding:25px;gap:24px}
  .acard__head h1{font-size:32px}
  .acard__head p{font-size:15px}
  .rules{flex-direction:column;gap:8px}
}

/* ===== account ===== */
.ul{text-decoration:underline;text-underline-offset:3px;font:inherit;color:inherit;transition:color .3s ease}
.ul:hover{color:var(--brass)}
.ahead{background:var(--stone);padding:64px var(--px) 0}
.ahead__in{display:flex;flex-direction:column;gap:24px;padding-bottom:40px}
.ahead__in h1{font-family:var(--serif);font-weight:300;font-size:88px;line-height:1.2}
.anav{display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid var(--border)}
.anav__links{display:flex;gap:40px}
.anav__links a{display:inline-flex;gap:8px;align-items:center;padding:16px 0;font-size:15px;line-height:1;color:var(--muted);transition:color .3s ease}
.anav__links a .nav__num{color:var(--muted)}
.anav__links a:hover,.anav__links a[aria-current]{color:var(--ink)}
.anav__links a[aria-current] .nav__num{color:var(--brass)}
.anav__out{padding:16px 0;font-size:15px;line-height:1;color:var(--muted);transition:color .3s ease}
.anav__out:hover{color:var(--ink)}
.abody{padding:64px var(--px) 104px;display:flex;flex-direction:column;gap:40px}
.tiles{display:grid;grid-template-columns:minmax(0,1fr) 459px;gap:32px;height:520px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;border-radius:2px;overflow:hidden;color:var(--ink)}
.tile--latest{padding:56px;color:var(--ground)}
.tile--latest img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile__overlay{position:absolute;inset:0;background:rgba(20,18,16,.2)}
.tile__copy,.tile__link{position:relative;z-index:1}
.tile__copy{display:flex;flex-direction:column;gap:12px}
.tile__k{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;color:var(--on-dark)}
.tile__h{font-family:var(--serif);font-weight:300;font-size:88px;line-height:1.2}
.tile__d{font-size:15px;line-height:1.5;color:var(--on-dark)}
.tile__link{font-size:15px;line-height:1.5;align-self:flex-start}
.tiles__side{display:flex;flex-direction:column;gap:32px}
.tile--stat{flex:1;padding:40px;background:var(--stone)}
.tile--stat .tile__k,.tile--stat .tile__d{color:var(--muted)}
.tile__n{font-size:38px;line-height:1.2}
.again{display:flex;flex-direction:column;gap:32px;padding-top:40px}
.again__head{display:flex;justify-content:space-between;align-items:flex-end}
.again__head h2{font-family:var(--serif);font-weight:300;font-size:32px;line-height:1.1}
.again__head a{font-size:15px;line-height:1.5}
.again__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.again__item{display:flex;flex-direction:column;gap:16px}
.btn--small{height:46px;padding:0 24px;font-size:14px}
.otable{display:flex;flex-direction:column;font-size:15px;line-height:1.5}
.otable__head,.orow{display:grid;grid-template-columns:1.1fr 1.2fr .9fr .9fr 1fr 1.2fr auto auto;gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--border)}
.otable__head{padding:0 0 16px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;color:var(--muted)}
.orow__date,.orow__items{color:var(--muted)}
.pending{color:var(--muted);opacity:.7}
.orow .btn--small{height:46px}
.aempty{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding-top:8px}
.aempty h2{font-family:var(--serif);font-weight:300;font-size:32px;line-height:1.1}
.aempty p{color:var(--muted);font-size:15px}
.aempty .btn{margin-top:8px}
.odetail{display:grid;grid-template-columns:minmax(0,1fr) 376px;gap:80px;align-items:start}
.odetail__main{display:flex;flex-direction:column;gap:48px}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tl{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:2px solid var(--border)}
.tl.is-on{border-top-color:var(--brass)}
.tl__h{font-family:var(--serif);font-weight:300;font-size:32px;line-height:1.1}
.tl__d{font-size:15px;line-height:1.5;color:var(--muted)}
.tl__ds{display:none}
.oitems{display:flex;flex-direction:column;gap:20px}
.oitems h2{font-family:var(--serif);font-weight:300;font-size:32px;line-height:1.1;padding-bottom:4px}
.oitems__lines,.oitems__rows{display:flex;flex-direction:column;gap:16px}
.srow--item>span:first-child{color:var(--ink)}
.srow--item>span:last-child{font-weight:400}
.srow--total>span:last-child{font-size:24px;font-weight:400;line-height:1.2}
.opanel{background:var(--stone);padding:40px;border-radius:2px;display:flex;flex-direction:column;gap:24px;font-size:15px;line-height:1.5}
.opanel__g{display:flex;flex-direction:column;gap:8px}
.opanel__q{font-size:15px;color:var(--muted)}
.acards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,448px));gap:32px}
.acard2{background:#fff;border:1px solid var(--border);border-radius:2px;padding:24px;display:flex;flex-direction:column;gap:16px}
.acard2__head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.acard2__head h2{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.2}
.acard2__def{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}
.acard2__lines{font-size:15px;line-height:1.5;color:var(--muted)}
.acard2__acts{display:flex;gap:16px;font-size:15px;line-height:1.5}
.aform{display:flex;flex-direction:column;gap:20px}
.aform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.aform__acts{display:flex;gap:12px}
.pop--wide .pop__box{width:min(720px,100%)}
.details{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.dform{display:flex;flex-direction:column;gap:24px}
.dform h2{font-family:var(--serif);font-weight:300;font-size:32px;line-height:1.1}
.dform__del{font-size:15px;color:var(--muted);margin-top:8px}
.aempty__p{font-size:15px;color:var(--muted)}
@media (max-width:1200px){
  .tiles{grid-template-columns:1fr;height:auto}
  .tile--latest{min-height:420px}
  .tiles__side{flex-direction:row}
  .again__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .odetail{grid-template-columns:1fr;gap:48px}
  .otable__head{display:none}
  .orow{grid-template-columns:1fr 1fr;grid-template-areas:"ref total" "date date" "items status" "inv inv" "view reorder";gap:8px 16px;padding:20px 0}
  .orow__ref{grid-area:ref}.orow__total{grid-area:total;text-align:right;font-weight:500}.orow__date{grid-area:date}.orow__items{grid-area:items}.orow__status{grid-area:status;text-align:right}.orow__inv{grid-area:inv}.orow__view{grid-area:view;align-self:center}.orow .btn--small{grid-area:reorder;justify-self:end}
}
@media (max-width:900px){
  .ahead{padding:40px 24px 0}
  .ahead__in{gap:16px;padding-bottom:24px}
  .ahead__in h1{font-size:40px}
  .anav{flex-direction:column;align-items:stretch;gap:0}
  .anav__links{gap:20px;overflow-x:auto;scrollbar-width:none}
  .anav__links a{padding:12px 0;font-size:14px;white-space:nowrap}
  .anav__links a .nav__num{display:none}
  .anav__links a[aria-current]{color:var(--brass)}
  .anav__out{align-self:flex-start;padding:12px 0;font-size:14px}
  .abody{padding:40px 24px 56px;gap:32px}
  .tile--latest{padding:32px;min-height:360px}
  .tile__h{font-size:48px}
  .tiles__side{flex-direction:column;gap:16px}
  .tile--stat{padding:24px;min-height:160px}
  .tile__n{font-size:32px}
  .again{gap:24px;padding-top:16px}
  .again__head h2{font-size:26px}
  .again__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 17px}
  .again__item{gap:12px}
  .timeline{grid-template-columns:1fr;gap:16px}
  .tl__h{font-size:24px}
  .oitems h2{font-size:26px}
  .opanel{padding:24px}
  .orow{grid-template-columns:auto auto 1fr;grid-template-areas:"ref ref total" "date items status" "inv inv view";gap:8px 0;padding:24px 0}
  .orow__date::after,.orow__items::after{content:"\00b7";margin:0 6px}
  .orow__status{text-align:left;color:var(--muted)}
  .orow__view{justify-self:end}
  .orow .btn--small{display:none}
  .tl__dl{display:none}
  .tl__ds{display:inline}
  .acards{grid-template-columns:1fr;gap:16px}
  .aform__row{grid-template-columns:1fr}
  .details{grid-template-columns:1fr;gap:40px}
  .dform h2{font-size:26px}
}

/* Phase 1 re-copy: priced cards and accessory facts */
.pcard{display:flex;color:inherit}
.fact--link{color:inherit}
.fact__p{color:var(--ink);font-weight:500;margin-left:16px}
.craft__cta{margin-top:40px}
@media (max-width:900px){.craft__cta{margin-top:32px}}
h1 .num{font-weight:400;font-size:.875em}



.modal{position:fixed;inset:0;z-index:1050;display:none;overflow-x:hidden;overflow-y:auto;outline:0}
.modal-open{overflow:hidden}
.modal-dialog{position:relative;width:auto;max-width:800px;margin:48px auto;pointer-events:none}
.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 96px)}
.modal-content{position:relative;width:100%;background:#fff;border-radius:2px;padding:32px;pointer-events:auto;outline:0}
.modal-backdrop{position:fixed;inset:0;z-index:1040;background:rgba(20,18,16,.8)}
.c-preloader{display:none;position:absolute;inset:0;z-index:2;background:rgba(255,255,255,.85);text-align:center;padding-top:48px}
@media (max-width:900px){
    .modal-dialog{margin:16px}
    .modal-content{padding:20px}
}

.pgn{display:flex;justify-content:center;margin-top:64px}
.pgn__list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.pgn__item{display:flex}
.pgn__link{display:inline-flex;align-items:center;justify-content:center;min-width:49px;height:49px;padding:0 16px;border:1px solid var(--border);border-radius:2px;background:#fff;font-size:15px;font-weight:500;line-height:1;color:var(--ink);transition:background-color .45s ease,color .45s ease,border-color .45s ease}
a.pgn__link:hover{border-color:var(--ink)}
a.pgn__link:focus-visible{outline:1px solid var(--brass);outline-offset:3px}
.pgn__item.is-on .pgn__link{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.pgn__item.is-off{opacity:.35;pointer-events:none}
.pgn__item--arrow .pgn__link{width:49px;padding:0}
.pgn__item--dots .pgn__link{min-width:24px;padding:0 4px;border-color:transparent;background:none;color:var(--muted)}
@media (max-width:900px){
  .pgn{margin-top:40px}
  .pgn__list{gap:4px}
  .pgn__link{min-width:40px;height:40px;padding:0 10px;font-size:14px}
  .pgn__item--arrow .pgn__link{width:40px;padding:0}
  .pgn__item--dots .pgn__link{min-width:20px;padding:0 2px}
}
@media (prefers-reduced-motion:reduce){
  .pgn__link{transition:none}
}