/* Layout concept: a golden thread leaves a spinning spool in the hero and sews down the page margins. */
:root{
  --wine:#4B0F24; --wine-deep:#2B0713; --wine-soft:#6E1F38;
  --gold:#C9A15A; --gold-lit:#E8C98A;
  --cream:#F8EFE2; --cream-deep:#EEDFC8;
  --rose:#E7BDB3; --ink:#2A1016; --muted:#6E4F52;
  --display:"Bodoni Moda","Didot","Bodoni MT","Playfair Display",Georgia,serif;
  --body:"Jost","Avenir Next","Century Gothic","Segoe UI",sans-serif;
  --nav-h:68px;
  --hero-bg:linear-gradient(120deg,#FFFDF8,#F6EBDA);
  --hero-veil:linear-gradient(90deg,rgba(255,253,248,.72),rgba(255,253,248,.3) 58%,transparent);
  --hero-accent:#8F6A2A;
  color-scheme:light;
}
html[data-look="gold"]{
  --hero-bg:linear-gradient(120deg,#E8CD93,#C9A15A);
  --hero-veil:linear-gradient(90deg,rgba(250,236,204,.5),rgba(250,236,204,.16) 52%,transparent);
  --hero-accent:#5C1730;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wine-deep);color:var(--ink);font:400 18px/1.6 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--wine-deep)}
h1,h2,h3{font-family:var(--display);font-weight:500;font-optical-sizing:none;font-variation-settings:"opsz" 16;line-height:1.08;margin:0;text-wrap:balance}
h2{font-size:clamp(2.2rem,5.6vw,4.4rem)}
h3{font-size:clamp(1.7rem,3.4vw,2.8rem)}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
section[id],main{scroll-margin-top:var(--nav-h)}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}

/* reveal: elements stay readable before their entrance */
.js .rv{opacity:.5;transform:translateY(26px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* buttons */
.btn{--mx:0px;--my:0px;display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 26px;border:1px solid transparent;border-radius:999px;font:500 1rem/1.2 var(--body);text-decoration:none;cursor:pointer;background:none;color:inherit;transform:translate(var(--mx),var(--my));transition:transform .3s cubic-bezier(.2,.7,.2,1),background .25s,color .25s,border-color .25s;position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-110%);transition:transform .7s}
.btn:hover::after{transform:translateX(110%)}
.btn--gold{background:linear-gradient(120deg,var(--gold),var(--gold-lit));color:var(--wine-deep)}
.btn--wine{background:var(--wine);color:var(--cream)}
.btn--wine:hover{background:var(--wine-soft)}
.btn--line{border-color:rgba(248,239,226,.55);color:var(--cream)}
.btn--line:hover{background:rgba(248,239,226,.12)}
.btn--text{padding-inline:6px;color:var(--wine);text-decoration:underline;text-underline-offset:4px}
.btn--small{min-height:42px;padding:8px 20px;font-size:.95rem}

/* welcome */
.welcome{display:none}
.js .welcome{display:block;position:fixed;inset:0;z-index:100;background:#2B0713;cursor:pointer;animation:welcome-off .01s linear 9s forwards}
.welcome.silk-on{background:none}
.welcome.done{display:none!important}
.welcome__silk,.welcome__dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.welcome__silk{display:none}
.welcome.silk-on .welcome__silk{display:block}
.welcome.silk-on .welcome__curtain{display:none}
.welcome__curtain{position:absolute;top:0;bottom:0;width:50.5%;background:repeating-linear-gradient(90deg,#3A0A1C 0 26px,#571229 60px,#2B0713 96px);transition:transform 1s cubic-bezier(.75,0,.2,1)}
.welcome__curtain--l{left:0;transform-origin:left}
.welcome__curtain--r{right:0;transform-origin:right}
.welcome.opening .welcome__curtain{transform:scaleX(0)}
.welcome__mark{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:4px;padding:0 24px;transition:opacity .4s,transform .5s;pointer-events:none}
.welcome__mark.out{opacity:0;transform:translateY(-22px) scale(.97)}
.welcome__mark svg{width:min(70vw,380px);overflow:visible}
.welcome__mark text{font:500 112px var(--display);font-variation-settings:"opsz" 28;letter-spacing:.06em}
.mark__line{fill:none;stroke:rgba(232,201,138,.3);stroke-width:1}
.mark__fill{fill:url(#goldFill)}
.mark__seam{fill:none;stroke:#E8C98A;stroke-width:2;stroke-dasharray:0 1000;stroke-linecap:round}
.welcome__mark p{font:italic 400 1.45rem var(--display);color:var(--cream);min-height:1.6em;opacity:0}
.welcome__mark p.on{opacity:1}
.shears{position:absolute;left:50%;top:0;width:clamp(74px,10vw,110px);margin-left:calc(clamp(74px,10vw,110px)/-2);transform:translateY(-120%);opacity:0;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55));pointer-events:none;will-change:transform}
@keyframes welcome-off{to{visibility:hidden;pointer-events:none}}
.hero__copy,.hero__figure{transition:transform 1.5s cubic-bezier(.16,.8,.24,1)}
.hero.waiting .hero__copy,.hero.waiting .hero__figure{transform:scale(1.07)}

/* typed text */
.tw{display:inline-block;white-space:pre}
.tc{visibility:hidden;position:relative}
.tc.on{visibility:visible}
.tc.cur::after{content:"";position:absolute;right:-.05em;top:.06em;bottom:.02em;width:max(2px,.055em);background:var(--gold-lit);animation:caret .7s steps(2,start) infinite;visibility:visible}
@keyframes caret{to{opacity:.15}}

/* thread */
.thread{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}

/* nav */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;gap:32px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px));color:var(--cream);transition:background .35s,box-shadow .35s}
.nav:not(.solid):not(.open){color:var(--wine-deep)}
.nav:not(.solid):not(.open) .nav__logo em{color:var(--hero-accent)}
.nav:not(.solid):not(.open) .nav__cta{background:var(--wine);color:var(--cream)}
.nav.solid{background:rgba(43,7,19,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(232,201,138,.25)}
.nav__logo{font:500 1.45rem var(--display);font-variation-settings:"opsz" 11;font-optical-sizing:none;text-decoration:none;margin-right:auto;letter-spacing:.02em}
.nav__logo em{color:var(--gold-lit)}
.nav__links{display:flex;gap:28px}
.nav__links a{position:relative;text-decoration:none;font-size:1rem}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:repeating-linear-gradient(90deg,var(--gold-lit) 0 5px,transparent 5px 9px);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{background:var(--gold-lit);color:var(--wine-deep)}
.nav__toggle{display:none;width:46px;height:46px;background:none;border:0;padding:12px 9px;cursor:pointer;color:inherit}
.nav__toggle span{display:block;height:2px;background:currentColor;transition:transform .3s}
.nav__toggle span+span{margin-top:9px}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(5.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-5.5px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:45;background:var(--wine-deep);color:var(--cream);display:flex;flex-direction:column;justify-content:center;gap:32px;padding:calc(var(--nav-h) + 12px) max(28px,env(safe-area-inset-right,0px)) 32px max(28px,env(safe-area-inset-left,0px));animation:menu-in .35s ease}
.menu nav{display:grid;gap:10px}
.menu a{font:500 clamp(2rem,10vw,3rem)/1.2 var(--display);text-decoration:none}
.menu p{font-style:italic;color:var(--gold-lit)}
@keyframes menu-in{from{opacity:0;transform:translateY(-14px)}}

/* hero */
.hero{position:relative;background:var(--hero-bg);color:var(--wine-deep);overflow:hidden;min-height:min(100vh,920px);min-height:min(100svh,920px);display:flex;align-items:center;padding-top:calc(var(--nav-h) + 14px);padding-bottom:30px}
.hero__silk{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s}
.hero__silk.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:var(--hero-veil);pointer-events:none}
.hero__inner{position:relative;z-index:1;width:100%;max-width:1520px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(20px,2.5vw,44px);align-items:center;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.hero__copy{min-width:0}
.hero__place{color:var(--hero-accent);font-size:1.1rem;margin-bottom:14px;font-weight:500}
.hero__line--2{color:var(--hero-accent)}
.hero .tc.cur::after{background:var(--wine)}
.hero .btn--gold{background:var(--wine);color:var(--cream)}
.hero .btn--gold:hover{background:var(--wine-soft)}
.hero .btn--line{border-color:var(--wine);color:var(--wine)}
.hero .btn--line:hover{background:rgba(75,15,36,.08)}
h1{font-size:clamp(2.9rem,min(8.1vw,12.7vh),9.4rem);line-height:1.03;font-weight:500;font-variation-settings:"opsz" 26}
.hero__line{display:block}
.hero__line--2{font-style:italic}
.hero__lede{max-width:34em;margin-top:24px;font-size:clamp(1.1rem,1.55vw,1.4rem)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__figure{position:relative;justify-self:center;width:min(100%,calc(76vh*.7),580px)}

/* photo arches */
.arch{position:relative;aspect-ratio:3/4.3;width:100%;max-width:100%;overflow:hidden;border-radius:999px 999px 14px 14px;background:linear-gradient(170deg,#FBF4E8,#EBCFB8);box-shadow:0 0 0 1px rgba(185,142,68,.8),0 0 0 10px rgba(255,250,240,.5),0 0 0 11px rgba(185,142,68,.45),0 30px 60px rgba(75,15,36,.26);display:grid;place-items:center}
.arch--light{background:linear-gradient(170deg,#FBF4E8,#E7BDB3)}
.arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arch svg{width:66%;overflow:visible}
.arch .ph-label,.look__ph-label{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:.82rem;padding:0 22px;line-height:1.3}
.arch .ph-label{color:var(--wine)}
.spool{position:absolute;left:-20%;bottom:-9%;width:54%;aspect-ratio:1;filter:drop-shadow(0 16px 18px rgba(20,2,8,.5))}

/* gold option: the photo fills the whole right side */
@media (min-width:681px){
  html[data-look="gold"] .hero{padding-bottom:40px}
  html[data-look="gold"] .hero__inner{grid-template-columns:minmax(0,1fr);max-width:none;padding-right:50vw}
  html[data-look="gold"] .hero__figure{position:absolute;top:0;right:0;bottom:0;width:47%;max-width:none;z-index:1}
  html[data-look="gold"] .arch{position:absolute;inset:0 0 auto 0;height:112%;aspect-ratio:auto;border-radius:0;box-shadow:none;clip-path:ellipse(100% 130% at 100% 50%)}
  html[data-look="gold"] .arch img{object-position:50% 12%}
  html[data-look="gold"] .spool{left:5%;bottom:3%;width:25%}
  html[data-look="gold"] h1{font-size:clamp(2.6rem,min(6.9vw,13.6vh),8.6rem)}
}

/* ribbon */
.ribbon{position:relative;background:var(--cream);padding:30px 0 12px;overflow:hidden;display:grid;gap:0}
.ribbon__track{display:flex;width:max-content;white-space:nowrap;font:italic 500 clamp(1.5rem,3.6vw,2.6rem) var(--display);color:var(--wine);padding:10px 0;will-change:transform}
.ribbon__track span{display:inline-flex;align-items:center;gap:.7em;padding-right:.7em}
.ribbon__track span::after{content:"";width:.34em;height:.34em;background:var(--gold);transform:rotate(45deg)}
.ribbon__track--b{background:var(--wine);color:var(--gold-lit);font-size:clamp(1.1rem,2.2vw,1.6rem);transform-origin:center;width:max-content;margin-inline:-5vw}

/* statement */
.statement{background:var(--cream);padding-block:clamp(80px,14vw,170px);position:relative}
.statement__text{max-width:1060px;margin-inline:auto;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px));font:500 clamp(1.9rem,4.7vw,3.9rem)/1.2 var(--display);font-variation-settings:"opsz" 16;font-optical-sizing:none;color:var(--wine)}
.statement__text .tc{visibility:visible;opacity:.2}
.statement__text .tc.on{opacity:1}

/* services */
.services{background:var(--cream);padding-bottom:clamp(60px,10vw,120px);position:relative}
.services>.wrap{padding-bottom:40px}
.stack{display:grid;gap:22px;max-width:1240px;margin-inline:auto;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.panel{position:sticky;top:calc(var(--nav-h) + 14px + var(--i)*14px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:24px;align-items:center;min-height:min(70vh,560px);padding:clamp(28px,5vw,64px);border-radius:26px 26px 26px 4px;box-shadow:0 -14px 44px rgba(43,7,19,.2)}
.panel__copy{min-width:0;display:grid;gap:16px;justify-items:start;max-width:34em}
.panel__for{font:italic 400 1.2rem var(--display)}
.panel--wine{background:var(--wine);color:var(--cream)}
.panel--wine .panel__for{color:var(--gold-lit)}
.panel--rose{background:var(--rose);color:var(--wine-deep)}
.panel--gold{background:linear-gradient(135deg,#E8C98A,#C9A15A);color:var(--wine-deep)}
.panel__art{width:100%;max-height:360px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.panel--wine .panel__art{stroke:var(--gold-lit)}
.panel__art path:not([stroke-dasharray]),.panel__art circle{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,1))}

/* looks */
.looks{position:relative;z-index:3;background:var(--wine-deep);color:var(--cream)}
.looks__pin{position:relative;overflow-x:auto;padding-block:60px 40px;background:radial-gradient(90% 70% at 70% 20%,#5C1730,#2B0713)}
.js .looks.pinned{height:calc(100vh + var(--travel,0px));height:calc(100svh + var(--travel,0px))}
.js .looks.pinned .looks__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding-block:0;display:flex;align-items:center}
.looks__bar{position:absolute;left:0;right:0;top:var(--bar-top,12%);height:7px;background:linear-gradient(180deg,#F4DFAF,#B98E44 60%,#7A5A24);box-shadow:0 5px 10px rgba(0,0,0,.4);z-index:1}
.looks:not(.pinned) .looks__bar{display:none}
.looks__track{--look-h:min(56vh,480px);display:flex;align-items:center;gap:clamp(24px,4vw,52px);width:max-content;padding-inline:max(28px,env(safe-area-inset-left,0px)) 12vw;will-change:transform}
.looks__intro{width:min(78vw,430px);flex:none;display:grid;gap:14px}
.looks__cards{display:flex;gap:clamp(24px,4vw,52px)}
.look{flex:none;width:calc(var(--look-h)*.68);position:relative;transform-origin:50% -44px;transform:rotate(var(--sway,0deg));will-change:transform}
.look::before{content:"";position:absolute;left:50%;top:-44px;width:24px;height:46px;margin-left:-12px;border:2px solid var(--gold-lit);border-bottom:0;border-radius:14px 14px 0 0}
.look__frame{position:relative;height:var(--look-h);overflow:hidden;border-radius:12px;background:var(--bg,#F8EFE2);display:grid;place-items:center;box-shadow:0 22px 44px rgba(10,0,4,.5);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.look:hover .look__frame{transform:translateY(-6px)}
.look__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.look__frame svg{height:84%;max-width:88%;overflow:visible;filter:drop-shadow(0 12px 12px rgba(40,10,16,.28))}
.look__ph-label{color:var(--wine);font-size:.78rem;bottom:8px}
.look__body{padding-top:12px;display:grid;gap:2px;justify-items:start}
.look__body h3{font-size:1.32rem}
.look__body p{font-size:.95rem;color:#E9D8C6;line-height:1.35}
.look__req{background:none;border:0;padding:6px 0;margin-top:2px;color:var(--gold-lit);font:500 1rem var(--body);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:40px}
.looks__end{flex:none;width:min(78vw,360px);display:grid;gap:14px;justify-items:start}
.looks__meter{position:absolute;left:max(28px,env(safe-area-inset-left,0px));right:max(28px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));height:2px;background:rgba(232,201,138,.22)}
.looks__meter span{display:block;height:100%;width:100%;background:var(--gold-lit);transform:scaleX(var(--p,0));transform-origin:left}
.looks:not(.pinned) .looks__meter{display:none}

/* how */
.how{background:var(--cream);padding-block:clamp(70px,11vw,130px);position:relative}
.tape{position:relative;height:46px;margin-block:36px 30px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--wine) 0 1px,transparent 1px 10px) left bottom/100% 12px no-repeat,repeating-linear-gradient(90deg,var(--wine) 0 1px,transparent 1px 50px) left bottom/100% 22px no-repeat,#F3DFA8;box-shadow:0 8px 20px rgba(75,15,36,.14);overflow:hidden}
.tape__fill{position:absolute;inset:0;background:linear-gradient(90deg,rgba(201,161,90,.75),rgba(232,201,138,.95));mix-blend-mode:multiply;transform:scaleX(var(--p,0));transform-origin:left}
.tape i{position:absolute;top:4px;font:500 .74rem var(--body);font-style:normal;color:var(--wine);transform:translateX(-50%)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:8px;align-content:start;min-width:0}
.steps li::before{content:counter(s);font:italic 500 2.5rem/1 var(--display);color:var(--gold)}
.steps h3{font-size:1.5rem;color:var(--wine)}
.steps p{color:var(--muted);font-size:1.02rem}

/* about */
.about{background:var(--rose);padding-block:clamp(70px,11vw,130px);position:relative;overflow:hidden}
.about__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(40px,8vw,100px);align-items:center}
.about__figure{position:relative;width:min(100%,400px);justify-self:center}
.about__ring{position:absolute;right:-13%;top:-7%;width:44%;fill:var(--wine);animation:spin 26s linear infinite}
.look__frame img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.look:hover .look__frame img{transform:scale(1.04)}
.about__ring text{font:500 15px var(--body)}
@keyframes spin{to{transform:rotate(360deg)}}
.about__copy{display:grid;gap:18px;min-width:0;max-width:36em;color:var(--wine-deep)}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:12px 14px;border:1.5px solid #D9C5A8;border-radius:10px;background:#FFFAF2}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--wine);flex:none}
.check span{display:grid;font-weight:500}
.check small{font-weight:400;color:var(--muted);font-size:.92rem}
.about__years{font:500 clamp(3.6rem,9vw,6.6rem)/1 var(--display);color:var(--wine);display:flex;flex-wrap:wrap;align-items:baseline;gap:.08em .2em}
.about__years small{font:400 1.1rem var(--body)}

/* request */
.request{position:relative;background:var(--wine);color:var(--cream);padding-block:clamp(70px,11vw,130px);overflow:hidden}
.bloom{position:absolute;left:-190px;bottom:-190px;width:min(92vw,680px);opacity:.32;pointer-events:none}
.bloom path{transform-box:view-box;transform-origin:0 0;transform:rotate(calc(var(--a)*1deg + var(--b,0)*38deg)) scale(calc(.12 + var(--b,0)*var(--s,1)))}
.request__grid{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
.request__intro{display:grid;gap:18px;min-width:0}
.request__intro p{max-width:30em;color:#F1E3D3}
.request__alt a{color:var(--gold-lit)}
.form{background:var(--cream);color:var(--ink);padding:clamp(22px,4vw,40px);border-radius:24px 24px 24px 4px;box-shadow:0 30px 60px rgba(20,2,8,.4);min-width:0}
.form__progress{display:grid;gap:8px;margin-bottom:22px;color:var(--muted);font-size:.98rem}
.form__bar{height:4px;background:var(--cream-deep);border-radius:2px;overflow:hidden}
.form__bar span{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--gold) 0 9px,#DFC182 9px 13px);width:33.34%;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.step{border:0;padding:0;margin:0;display:grid;gap:18px;min-width:0;animation:step-in .45s cubic-bezier(.2,.7,.2,1)}
@keyframes step-in{from{opacity:0;transform:translateX(18px)}}
.step legend{font:500 clamp(1.7rem,3.4vw,2.2rem)/1.12 var(--display);font-variation-settings:"opsz" 14;font-optical-sizing:none;color:var(--wine);padding:0;margin-bottom:16px}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips span{display:flex;align-items:center;justify-content:center;text-align:center;height:100%;min-height:68px;padding:10px;border:1.5px solid #D9C5A8;border-radius:12px;transition:background .2s,color .2s,border-color .2s,transform .2s}
.chips label:hover span{border-color:var(--gold)}
.chips input:checked+span{background:var(--wine);color:var(--cream);border-color:var(--wine);transform:scale(1.02)}
.chips input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}
.form__look{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-style:italic}
.form__look button{background:none;border:0;padding:6px 0;color:var(--wine);font:inherit;font-style:normal;text-decoration:underline;cursor:pointer}
.field{display:grid;gap:6px;min-width:0}
.field label{font-weight:500;font-size:1rem}
.field small{font-weight:400;color:var(--muted);font-size:.9rem}
.field input,.field textarea{width:100%;min-width:0;max-width:100%;padding:13px 14px;border:1.5px solid #D9C5A8;border-radius:10px;background:#FFFAF2;color:var(--ink);font:400 16px/1.45 var(--body);transition:border-color .2s,box-shadow .2s}
.field input[type=date]{min-height:50px;-webkit-appearance:none;appearance:none}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--wine);box-shadow:0 0 0 3px rgba(75,15,36,.14)}
.field input::placeholder,.field textarea::placeholder{color:#94777A}
.field input[type=file]{padding:9px 10px;font-size:15px;cursor:pointer}
.field input[type=file]::file-selector-button{font:500 15px var(--body);background:var(--wine);color:var(--cream);border:0;border-radius:99px;padding:9px 16px;margin-right:12px;cursor:pointer}
.field--bad input,.field--bad textarea{border-color:#A3142E}
.field__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field--trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}
.form__error{margin-top:14px;color:#A3142E;font-weight:500}
.form__error a{color:inherit}
.done{display:grid;gap:14px;justify-items:center;text-align:center;padding-block:14px;outline:0}
.done svg{width:96px;fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.done circle{stroke-dasharray:.02 .018}
.done path{stroke:var(--wine);stroke-width:5;stroke-dasharray:1;stroke-dashoffset:1;animation:check .7s ease .15s forwards}
@keyframes check{to{stroke-dashoffset:0}}
.done h3{color:var(--wine)}

/* measurements */
.step__note{color:var(--muted);font-size:1rem;margin-top:-6px}
.measure{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:18px;align-items:start}
.measure__fig{width:100%;max-height:300px;fill:none;stroke:#C9B089;stroke-width:1.6;stroke-linecap:round}
.measure__marks>*{stroke:#D9C5A8;stroke-width:1.5;stroke-dasharray:4 4;transition:stroke .25s,stroke-width .25s}
.measure__marks>.on{stroke:var(--wine);stroke-width:3.2;stroke-dasharray:none}
.measure__fields{display:grid;gap:12px;min-width:0}
.measure__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.units{display:flex;gap:6px}
.units--wrap{flex-wrap:wrap}
.field__label{font-weight:500;font-size:1rem}
.units label{position:relative;cursor:pointer}
.units input{position:absolute;opacity:0;inset:0;margin:0}
.units span{display:block;padding:7px 14px;border:1.5px solid #D9C5A8;border-radius:99px;font-size:.95rem}
.units input:checked+span{background:var(--wine);border-color:var(--wine);color:var(--cream)}
.units input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}

/* look filters and viewer */
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.filters button{background:none;border:1px solid rgba(232,201,138,.55);color:var(--cream);border-radius:99px;padding:7px 14px;min-height:40px;font:400 .98rem var(--body);cursor:pointer;transition:background .25s,color .25s}
.filters button[aria-pressed="true"]{background:var(--gold-lit);color:var(--wine-deep);border-color:var(--gold-lit)}
.look__open{position:absolute;inset:0;width:100%;background:none;border:0;padding:0;cursor:zoom-in;z-index:1;border-radius:12px}
.viewer{position:fixed;inset:0;z-index:90;background:rgba(30,4,13,.96);color:var(--cream);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:clamp(16px,4vw,60px);padding:max(24px,env(safe-area-inset-top,0px)) max(72px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(72px,env(safe-area-inset-left,0px));animation:menu-in .35s ease}
.viewer__stage{height:calc(100vh - 48px);height:calc(100svh - 48px);display:grid;place-items:center;overflow:hidden;min-width:0;cursor:zoom-in;touch-action:pan-y}
.viewer__stage img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.5);transition:transform .4s cubic-bezier(.2,.7,.2,1);animation:step-in .45s cubic-bezier(.2,.7,.2,1)}
.viewer__stage.zoom{cursor:zoom-out}
.viewer__stage.zoom img{transform:scale(2.1)}
.viewer__info{display:grid;gap:10px;justify-items:start;min-width:0}
.viewer__count{color:var(--gold-lit);font-size:1rem}
.viewer__hint{color:#D9C4B2;font-size:.95rem}
.viewer__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.viewer__close,.viewer__nav{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(232,201,138,.5);background:rgba(43,7,19,.7);color:var(--cream);display:grid;place-items:center;cursor:pointer;z-index:2}
.viewer svg{width:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.viewer__close{top:max(16px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px))}
.viewer__nav{top:50%;margin-top:-24px}
.viewer__nav--prev{left:max(12px,env(safe-area-inset-left,0px))}
.viewer__nav--next{right:max(12px,env(safe-area-inset-right,0px))}

/* needle that follows the mouse or finger */
.cursor{position:fixed;inset:0;width:100%;height:100%;z-index:120;pointer-events:none;display:none}
.needle-on .cursor{display:block}
.needle,.needle a,.needle button,.needle label,.needle summary,.needle .look__open{cursor:none}
.needle input,.needle textarea{cursor:text}
.needle input[type=radio],.needle input[type=checkbox],.needle input[type=file]{cursor:none}

/* track */
.track{background:var(--cream-deep);padding-block:clamp(60px,9vw,110px);position:relative}
.track__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(24px,6vw,80px);align-items:start}
.track h2{color:var(--wine)}
.track__grid>div{display:grid;gap:14px;min-width:0;max-width:30em}
.track__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:end;min-width:0}
.track__form .btn,.track__form .form__error,.track__form .progress{grid-column:1/-1}
.track__form .form__error{margin:0}
.progress{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.progress li{position:relative;padding-top:22px;font-size:.95rem;color:var(--muted);line-height:1.25;animation:step-in .45s ease backwards}
.progress li::before{content:"";position:absolute;left:0;right:0;top:8px;height:3px;background:repeating-linear-gradient(90deg,#C9B089 0 7px,transparent 7px 11px)}
.progress li.on{color:var(--wine);font-weight:500}
.progress li.on::before{background:var(--gold);height:4px}

/* faq */
.faq{background:var(--cream);padding-block:clamp(60px,9vw,110px);position:relative}
.faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(24px,6vw,80px)}
.faq h2{color:var(--wine)}
details{border-bottom:1px dashed #C9B089;padding-block:6px}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;font:500 1.3rem/1.25 var(--display);font-variation-settings:"opsz" 11;font-optical-sizing:none;color:var(--wine);padding-block:12px;min-height:48px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:12px;height:12px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);transition:transform .3s}
details[open] summary::after{transform:rotate(225deg)}
details p{padding-bottom:12px;color:var(--muted);animation:step-in .35s ease}

/* foot */
.foot{background:var(--wine-deep);color:var(--cream);padding-block:64px max(28px,env(safe-area-inset-bottom,0px));overflow:hidden;position:relative;z-index:3}
.foot__tag{font:italic 400 clamp(1.2rem,2.6vw,1.7rem) var(--display);color:var(--gold-lit)}
.foot__name{font:500 clamp(4rem,16.5vw,14rem)/1 var(--display);white-space:nowrap;margin-block:16px 26px;background:linear-gradient(100deg,#8E6A2F,#F1D9A4 45%,#8E6A2F 60%,#F1D9A4);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}
.foot__row{display:flex;flex-wrap:wrap;gap:10px 34px;font-size:1rem;color:#EBDBC9;padding-right:64px}
.foot__row a{color:var(--gold-lit)}

/* whatsapp */
.wa{position:fixed;z-index:40;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:var(--gold-lit);color:var(--wine-deep);display:grid;place-items:center;box-shadow:0 10px 24px rgba(20,2,8,.4)}
.wa::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--gold-lit);animation:pulse 2.6s ease-out infinite}
.wa svg{width:29px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
@keyframes pulse{to{transform:scale(1.55);opacity:0}}

/* tablets */
@media (max-width:980px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:block}
  .panel{grid-template-columns:minmax(0,1fr) 34%}
  .request__grid,.faq__grid,.track__grid{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* phones */
@media (max-width:760px){
  .viewer{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;padding:max(12px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));gap:10px}
  .viewer__stage{height:100%}
  .viewer__nav{top:38%}
  .viewer__hint{display:none}
  .viewer__info{gap:4px}
  .viewer__info h3{font-size:1.5rem}
}
@media (max-width:680px){
  :root{--nav-h:62px}
  body{font-size:17px}
  .wrap,.stack,.statement__text,.hero__inner{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
  .hero{align-items:flex-start;min-height:0;padding-top:calc(var(--nav-h) + 28px)}
  .hero__inner{grid-template-columns:minmax(0,1fr);gap:40px}
  h1{font-size:12.6vw}
  .hero__figure{width:min(84%,340px);justify-self:end;margin-right:4%}
  .btn{padding-inline:22px}
  .panel{position:relative;top:auto;grid-template-columns:minmax(0,1fr);min-height:0}
  .panel__art{max-height:170px;order:-1;justify-self:start;width:auto}
  .about__grid{grid-template-columns:minmax(0,1fr)}
  .about__figure{width:min(78%,320px);justify-self:start;margin-left:4%}
  .about__ring{right:-16%}
  .field__row,.track__form{grid-template-columns:minmax(0,1fr)}
  .measure{grid-template-columns:minmax(0,92px) minmax(0,1fr);gap:10px}
  .measure__grid{grid-template-columns:minmax(0,1fr)}
  .progress{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:minmax(0,1fr);padding-left:30px}
  .tape{position:absolute;left:24px;margin:0;width:16px;height:var(--tape-h,420px);background:repeating-linear-gradient(0deg,var(--wine) 0 1px,transparent 1px 10px),#F3DFA8}
  .tape i{display:none}
  .tape__fill{transform:scaleY(var(--p,0));transform-origin:top}
  .how h2{margin-bottom:30px}
  .how .wrap{position:relative}
}
@media (max-height:620px) and (min-width:681px){
  .panel{position:relative;top:auto;min-height:0}
  .hero{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
    .js .welcome{display:none}
  .tc{visibility:visible}
  .done path{stroke-dashoffset:0}
  .bloom path{--b:1}
}