/* UNIGEL — THE COLOR LAB, dressed properly.
   Bodoni display against a clean sans and a technical mono. Warm paper,
   deep ink sections, one hairline of champagne. The polish still supplies the
   colour; the interface is now tailored rather than bare. */

:root{
  /* surfaces — warm, not clinical */
  --paper:#F6F3EE;
  --paper-2:#FBF9F6;
  --white:#FFFFFF;
  --ink:#14110F;           /* warm near-black, for full-bleed sections */
  --ink-2:#1F1B18;
  --carbon:#191512;
  --graphite:#6A625B;
  --stainless:#B7AFA5;

  --line:#E4DDD3;
  --line-2:#EFEAE2;
  --line-ink:#2E2823;

  /* accents */
  --cobalt:#2645FF;        /* interactive */
  --champagne:#B8975A;     /* hairlines and small caps only — never a fill */

  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Bodoni Moda','Didot','Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --wrap:1280px;
  --gut:24px;
  --r:2px;

  --lift:0 1px 2px rgba(31,22,14,.05), 0 10px 30px -12px rgba(31,22,14,.16);
  --lift-2:0 2px 4px rgba(31,22,14,.06), 0 22px 48px -16px rgba(31,22,14,.24);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--carbon);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}

/* ------------------------------------------------------------ type ----- */
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}

/* display: Bodoni, large, tight. This is where the elegance lives. */
.h1,.h2{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.04}
.h1{font-size:clamp(44px,7.4vw,92px)}
.h2{font-size:clamp(30px,4.4vw,52px);line-height:1.08}
.h3{font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.h1 em,.h2 em{font-style:italic}

.lede{font-size:18.5px;color:var(--graphite);max-width:54ch;margin-top:20px;line-height:1.62}
.sub{font-size:16px;color:var(--graphite);max-width:60ch;margin-top:10px}
.eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--champagne);margin-bottom:18px;
}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase}

/* a hairline rule under section headings — a small mark of care */
.rule-c{height:1px;background:linear-gradient(90deg,var(--champagne),transparent 46%);margin:0 0 30px}

/* ---------------------------------------------------------- chrome ----- */
/* Announcement bar: shipping left, positioning centre, locale right.
   The centre strip states what Unigel IS — it is not a rotating promotion. */
.ship{
  background:var(--ink);color:#EDE6DC;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.ship-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:34px}
.ship p{margin:0;display:flex;align-items:center;gap:8px;white-space:nowrap}
.ship svg{flex:none;opacity:.8}
.ship-c{color:#9A9086;gap:0}
.ship-c b{font-weight:400;color:#EDE6DC}
.ship-c span::before{content:'|';margin:0 10px;color:#4A433C}
.ship-r{gap:16px;color:#9A9086}
.ship-r a:hover{color:#EDE6DC}
.ship-offer{color:var(--champagne);display:inline-flex;align-items:center;gap:6px}
@media (max-width:1180px){ .ship .ship-c{display:none} }
@media (max-width:760px){
  .ship-in{justify-content:center;height:32px}
  .ship .ship-r{display:none}
  .ship-l svg{display:none}
}
.top{position:sticky;top:0;z-index:60;background:rgba(246,243,238,.92);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:18px;height:76px}
.logo{display:inline-flex;align-items:center;gap:11px;flex:none}
.logo-mark{flex:none;display:block}
.logo-t{
  display:flex;flex-direction:column;font-family:var(--serif);font-weight:600;
  font-size:23px;letter-spacing:.10em;line-height:1;
}
.logo-t em{
  font-family:var(--mono);font-style:normal;font-size:7.5px;letter-spacing:.34em;
  color:var(--graphite);margin-top:5px;padding-top:4px;border-top:1px solid var(--line);
}

.nav{display:flex;gap:0;margin-inline:auto}
.nav-item{position:static}
.nav-top{
  display:flex;align-items:center;gap:5px;padding:27px 11px;
  font-size:12.5px;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  color:var(--carbon);position:relative;cursor:pointer;white-space:nowrap;
}
.nav-chev{opacity:.5;transition:transform .2s ease,opacity .2s}
.nav-item.open .nav-chev{transform:rotate(180deg);opacity:1}
.nav-top::after{
  content:'';position:absolute;left:11px;right:11px;bottom:22px;height:1px;
  background:var(--champagne);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
/* eight nav items + the search field + four icons stop fitting well before the
   old 1400 breakpoint — at 1440 the actions block was pushing 11px past the
   viewport. Tighten both the nav and the field together. */
@media (max-width:1520px){
  .nav-top{padding-inline:8px;font-size:12px;letter-spacing:.03em}
  .srch{width:clamp(150px,13vw,210px)}
}
@media (max-width:1320px){
  .nav-top{padding-inline:6px;font-size:11.5px}
  .srch{width:150px}
}
.nav-top:hover,.nav-item.open .nav-top{color:var(--cobalt)}
.nav-top:hover::after,.nav-item.open .nav-top::after,.nav-top.on::after{transform:scaleX(1)}
.nav-top.on{color:var(--carbon)}

/* the dropdown panel: full width, quiet, generous */
.panel{
  position:absolute;left:0;right:0;top:100%;background:var(--paper-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:var(--lift);
}
.panel[hidden]{display:none}
.panel-in{padding-block:34px 30px}
.panel-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;max-width:840px}
.panel-t{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--champagne);margin:0 0 13px;
}
.panel-col ul,.dr-body ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.panel-col a,.dr-body a{font-size:15px;color:var(--graphite);transition:color .14s}
.panel-col a:hover,.dr-body a:hover{color:var(--cobalt)}

.nav-sw{display:flex;flex-wrap:wrap;gap:7px 10px;align-items:center;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.nav-sw-t{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne);margin-right:6px}
.nsw{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--graphite)}
.nsw i{width:11px;height:11px;border-radius:1px;display:block}
.nsw:hover{color:var(--carbon)}

.top-acts{display:flex;align-items:center;gap:2px;flex:none}
.ico{display:inline-grid;place-items:center;width:40px;height:40px;border:0;background:none;color:var(--carbon);cursor:pointer;border-radius:50%}
.ico:hover{background:var(--line-2)}
.burger{display:none}

.drawer{border-top:1px solid var(--line);background:var(--paper-2);padding-block:8px 22px;max-height:78vh;overflow-y:auto}
.drawer[hidden]{display:none}
.dr-group{border-bottom:1px solid var(--line-2)}
.dr-group summary{
  list-style:none;cursor:pointer;padding:15px 0;font-family:var(--serif);font-size:20px;
  display:flex;justify-content:space-between;align-items:center;
}
.dr-group summary::-webkit-details-marker{display:none}
.dr-group summary::after{content:'+';font-family:var(--mono);font-size:16px;color:var(--champagne)}
.dr-group[open] summary::after{content:'\2013'}
.dr-body{padding-bottom:18px;display:grid;gap:6px}
.dr-all{font-size:14px;font-weight:600;color:var(--cobalt);margin-bottom:8px}
.dr-cta{display:block;margin-top:18px;padding:14px;text-align:center;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;border-radius:var(--r)}

/* --------------------------------------------------------- buttons ----- */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:var(--r);
  border:1px solid var(--carbon);font-family:var(--sans);font-size:14px;font-weight:600;
  letter-spacing:.02em;cursor:pointer;background:none;
  transition:background .16s,color .16s,border-color .16s,transform .16s,box-shadow .16s;
}
.btn:hover{transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:var(--lift)}
.btn-dark:hover{background:var(--cobalt);border-color:var(--cobalt);box-shadow:var(--lift-2)}
.btn-line:hover{border-color:var(--cobalt);color:var(--cobalt)}
.btn-blue{background:var(--cobalt);border-color:var(--cobalt);color:#fff;box-shadow:var(--lift)}
.btn-ghost{border-color:rgba(255,255,255,.34);color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper);background:rgba(255,255,255,.07)}

/* --------------------------------------------- THE COLOR INDEX RAIL ---- */
.rail{display:block}
.rail-strip{display:flex;gap:2px;align-items:stretch}
.rail-strip i{flex:1 1 0;min-width:0;display:block;border-radius:1px}
.rail-sm .rail-strip{height:8px}
.rail-lg .rail-strip{height:26px;gap:3px;box-shadow:var(--lift)}
.rail-more{flex:none;font-family:var(--mono);font-size:9.5px;color:var(--graphite);align-self:center;padding-left:6px}
.rail-lg .rail-more{font-size:12px;padding-left:10px}
.rail-codes{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--champagne);margin-top:8px;text-transform:uppercase}
.rail-lg .rail-codes{font-size:12.5px;margin-top:12px}

/* ---------------------------------------------------------- layout ----- */
.sec{padding-block:86px}
.sec.tight{padding-block:56px}
.sec.pale{background:var(--paper-2)}
.sec.ink{background:var(--ink);color:#E9E1D6}
.sec.ink .h1,.sec.ink .h2,.sec.ink .h3{color:#FBF7F1}
.sec.ink .sub,.sec.ink .lede,.sec.ink p{color:#B6ACA0}
.sec.ink .eyebrow,.sec.ink .panel-t{color:var(--champagne)}
.sec.ink .more{color:#FBF7F1;border-bottom-color:var(--champagne)}
.sec.ink .fact{background:var(--ink)}
.sec.ink .facts{background:var(--line-ink)}
.sec.ink .fact b{color:#FBF7F1}

.head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:34px;flex-wrap:wrap}
.more{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;border-bottom:1px solid var(--champagne);padding-bottom:3px}
.more:hover{color:var(--cobalt);border-bottom-color:var(--cobalt)}

.grid{display:grid;gap:1px;background:var(--line)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

/* ----------------------------------------------------------- cards ----- */
.card{background:var(--white);display:flex;flex-direction:column;transition:box-shadow .22s,transform .22s;position:relative}
.card:hover{box-shadow:var(--lift-2);transform:translateY(-3px);z-index:2}
.card-img{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--line-2)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-img img{transform:scale(1.045)}
.card-noimg{display:block;width:100%;height:100%;background:var(--line-2)}
.card-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-name{font-family:var(--serif);font-size:19px;letter-spacing:-.01em;line-height:1.2}
.card-desc{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stainless);margin-top:-4px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px}
.card-price{font-family:var(--serif);font-size:19px;font-variant-numeric:tabular-nums}
.tag{font-family:var(--mono);font-size:9px;letter-spacing:.14em;border:1px solid var(--line);color:var(--graphite);padding:4px 7px;border-radius:1px}

/* ------------------------------------------------------------ hero ----- */
.hero{position:relative;background:var(--paper);border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}

/* The artwork bleeds off the right edge at full height and is feathered back
   into the paper on its left. Its own off-white ground matches --paper, so with
   the frame and shadow gone the two genuinely merge instead of overlapping. */

/* Feather the ARTWORK itself with a mask rather than painting paper over it.
   An overlay would sit above the headline; a mask cannot. The image's own
   off-white ground matches --paper, so the fade reads as one continuous surface. */
/* The scrim moved onto the slide itself (.slide-scrim) when the hero became a
   carousel — a ::before on .hero would have sat over every slide, including the
   finished banners that must not be tinted. */

/* the artwork is absolutely positioned, so this is a single column with the
   copy held to the left half — no empty grid track fighting for width */
.hero-in{position:relative;z-index:3;display:flex;align-items:center;padding-block:32px;height:100%}
.hero-copy{width:min(620px,50%)}
.hero-copy .eyebrow{margin-bottom:10px}
.hero-copy .lede{max-width:44ch;font-size:15.5px;margin-top:14px;line-height:1.55}
.hero-btns{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
/* sized so "Shimmer. Shine." always holds on one line at the copy width —
   a three-line headline is what made the first pass feel oversized */
.hero-figure{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.5vw,50px);line-height:1.04;letter-spacing:-.02em}
.hero-figure em{font-style:italic;font-weight:400;color:var(--champagne)}

/* the four product claims, as a single quiet row */
.hero-feats{
  list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid rgba(20,17,15,.14);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
}
.hero-feats li{display:flex;align-items:center;gap:8px;min-width:0}
.hero-feats li + li{padding-left:12px;border-left:1px solid rgba(20,17,15,.14)}
.hero-feats .ft-ico{flex:none;width:18px;height:18px;color:var(--champagne)}
.hero-feats span{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--carbon);line-height:1.55;
}
@media (max-width:1100px){
  .hero-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-feats li:nth-child(odd) + li{padding-left:12px}
  .hero-feats li:nth-child(3){padding-left:0;border-left:0}
}

.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:var(--line);gap:1px}
.fact{background:var(--paper);padding:26px 6px;text-align:center}
.fact b{display:block;font-family:var(--serif);font-size:27px;letter-spacing:-.01em;margin-bottom:5px}
.fact span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}

/* ---------------------------------------------------------- systems ---- */
.sys{background:var(--white);padding:30px 26px 32px;display:flex;flex-direction:column;gap:11px;min-height:200px;transition:box-shadow .22s}
.sys:hover{box-shadow:var(--lift)}
.sys h3{font-family:var(--serif);font-size:23px;font-weight:400;letter-spacing:-.01em}
.sys p{font-size:15px;color:var(--graphite)}
.sys .n{font-family:var(--mono);font-size:10px;color:var(--champagne);letter-spacing:.18em;text-transform:uppercase}
.sys .go{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--cobalt)}
.sys-img{padding:0 0 28px;overflow:hidden}
.sys-pic{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--line-2);margin-bottom:20px}
.sys-pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.sys-img:hover .sys-pic img{transform:scale(1.05)}
.sys-img>*:not(.sys-pic){margin-inline:26px}
.sec.ink .sys{background:var(--ink-2)}
.sec.ink .sys p{color:#B6ACA0}

/* --------------------------------------------------------- filters ----- */
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:28px}
.chip{font-size:13px;font-weight:500;padding:9px 16px;border:1px solid var(--line);background:var(--white);border-radius:var(--r);color:var(--graphite);transition:border-color .14s,color .14s}
.chip:hover{border-color:var(--champagne);color:var(--carbon)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.bar-sep{width:1px;height:22px;background:var(--line);margin-inline:5px}
.count{font-family:var(--mono);font-size:10.5px;color:var(--graphite);letter-spacing:.16em;text-transform:uppercase}

/* --------------------------------------------------------- crumbs ------ */
.crumbs{padding-top:22px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--stainless)}
.crumbs li+li::before{content:'/';margin-right:8px;color:var(--stainless)}
.crumbs a:hover{color:var(--cobalt)}
.crumbs [aria-current]{color:var(--graphite)}

/* ---------------------------------------------------------- product ---- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding-block:44px 64px}
.pdp-media{display:grid;gap:10px}
.pdp-media img{width:100%;background:var(--white);box-shadow:var(--lift)}
.pdp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pdp h1{font-family:var(--serif);font-size:clamp(32px,4vw,50px);font-weight:400;letter-spacing:-.015em;line-height:1.05}
.pdp-kind{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);margin-bottom:16px}
.pdp-price{font-family:var(--serif);font-size:32px;margin-block:26px 6px;font-variant-numeric:tabular-nums}
.spec{border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-2);font-size:14.5px}
.spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.spec dd{margin:0}
.buy{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.note{font-size:13px;color:var(--stainless);margin-top:15px}

/* ------------------------------------------------- PDP accordion ------- */
.acc{border-top:1px solid var(--line)}
.acc:last-of-type{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:17px 0;font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';font-family:var(--mono);font-size:16px;color:var(--champagne)}
.acc[open] summary::after{content:'\2013'}
.acc summary:hover{color:var(--cobalt)}
.acc-body{padding:2px 0 22px}
.acc-body .spec{border-top:0}
.acc-static{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
ol.steps-num{margin:0;padding-left:20px;display:grid;gap:9px;color:var(--graphite);font-size:15px}

/* --------------------------------------------- illustration layer ------ */
.drop-row{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-start;justify-content:center}
.drop{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.drop svg{display:block;overflow:visible;filter:drop-shadow(0 14px 22px rgba(31,22,14,.18))}
.drop figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--graphite);text-transform:uppercase}
.drop-row .drop + .drop{margin-left:-16px}

.nailsw{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.nailsw svg{display:block;filter:drop-shadow(0 6px 12px rgba(31,22,14,.16))}
.nailsw figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--graphite)}
.nail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:22px 10px}
.nail-cell{display:flex;justify-content:center;padding:12px 4px;border-radius:var(--r);transition:background .14s}
.nail-cell:hover{background:var(--white);box-shadow:var(--lift)}

.spectrum{width:100%;line-height:0;box-shadow:var(--lift)}
.spectrum svg{width:100%;height:96px;display:block}
@media (max-width:640px){ .spectrum svg{height:60px} }

.diag{width:100%;height:auto;color:var(--carbon);display:block}
.diag-t{font-family:var(--mono);font-size:9px;fill:var(--graphite);letter-spacing:.05em}
.diag-wrap{background:var(--white);border:1px solid var(--line);padding:24px 22px}
.diag-wrap h4{font-family:var(--serif);font-size:19px;font-weight:400;margin:0 0 12px}

/* ----------------------------------------------------------- swatch ---- */
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:1px;background:var(--line)}
.swatch{background:var(--white);padding:12px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .18s}
.swatch:hover{box-shadow:var(--lift);z-index:2}
.swatch i{display:block;aspect-ratio:1/1;border-radius:1px}
.swatch b{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--graphite);font-weight:400}

/* ------------------------------------------------------------ prose ---- */
.prose{max-width:68ch}
.prose h2{font-family:var(--serif);font-size:30px;font-weight:400;margin-top:46px;margin-bottom:14px;letter-spacing:-.01em}
.prose h3{font-size:17px;font-weight:600;margin-top:30px;margin-bottom:8px}
.prose p{margin-bottom:15px;color:var(--graphite)}
.prose ul{margin:0 0 18px;padding-left:20px;color:var(--graphite)}
.prose li{margin-bottom:8px}
.prose strong{color:var(--carbon)}
.prose a{border-bottom:1px solid var(--champagne)}
code{font-family:var(--mono);font-size:.87em;background:var(--line-2);padding:2px 6px;border-radius:2px}

/* ------------------------------------------------------------ forms ---- */
.form{display:grid;gap:18px;max-width:580px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;padding:14px;font:inherit;font-size:15px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--carbon);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--cobalt);outline-offset:-1px}
.field textarea{resize:vertical;min-height:130px;line-height:1.55}

/* ------------------------------------------------------------- band ---- */
.band{background:var(--ink);color:#E9E1D6;border-top:1px solid var(--line)}
.band .h2{color:#FBF7F1}
.band .sub{color:#B6ACA0}
.band-in{display:flex;justify-content:space-between;align-items:center;gap:34px;padding-block:60px;flex-wrap:wrap}

/* ------------------------------------------------------------- foot ---- */
.foot{background:var(--ink);color:#A79E93;padding-top:64px;border-top:1px solid var(--line-ink)}
.foot .logo{color:var(--paper)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px;padding-bottom:50px}
.foot-brand p{font-size:14.5px;margin-top:16px;max-width:34ch}
.foot h3{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);margin-bottom:16px;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14.5px}
.foot a:hover{color:var(--paper)}
.foot-mail{display:flex;margin-top:22px;max-width:320px}
.foot-mail input{flex:1;min-width:0;padding:12px 14px;font:inherit;font-size:14px;background:transparent;border:1px solid var(--line-ink);border-right:0;color:var(--paper);border-radius:var(--r) 0 0 var(--r)}
.foot-mail input::placeholder{color:#6B635A}
.foot-mail button{padding:0 16px;background:var(--champagne);border:1px solid var(--champagne);color:var(--ink);cursor:pointer;border-radius:0 var(--r) var(--r) 0;display:grid;place-items:center}
.foot-bar{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line-ink);padding-block:22px 30px;font-size:13px}
.foot-bar a{border-bottom:1px solid #443C34}
.foot-bar a:hover{color:var(--paper)}

/* ------------------------------------------------------ responsive ----- */
@media (max-width:1100px){
  .g4{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .panel-cols{grid-template-columns:repeat(3,1fr);gap:26px}
}
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:inline-grid}
  .srch{margin-inline-start:auto}
  .ico-hide{display:none}
}
@media (max-width:900px){
  .pdp{grid-template-columns:1fr;gap:38px}
  .g4,.g3{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
  .sec{padding-block:60px}
}
@media (max-width:520px){
  :root{--gut:16px}
  .g4,.g3{grid-template-columns:repeat(2,1fr)}
  .g2{grid-template-columns:1fr}
  .sys{padding:24px 20px 26px;min-height:0}
  .sys-img>*:not(.sys-pic){margin-inline:20px}
  .row2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .band-in{flex-direction:column;align-items:flex-start;gap:22px}
  .hero-btns .btn{flex:1;justify-content:center}
  .nail-grid{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:16px 6px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .card:hover{transform:none}
}

/* --------------------------------------------------- scroll reveals ---- */
/* Armed only by JS, so with JS off everything is simply visible. */
[data-reveal].armed{opacity:0;transform:translateY(16px)}
[data-reveal].in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}

/* ------------------------------------------------------ hero drama ----- */
.hero-quiet{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(60% 70% at 84% 18%, rgba(184,151,90,.16), transparent 62%),
    radial-gradient(52% 62% at 8% 82%, rgba(38,69,255,.07), transparent 66%);
}
.hero-figure{font-family:var(--serif);font-size:clamp(40px,5.6vw,78px);line-height:.98;letter-spacing:-.022em}
.hero-figure em{font-style:italic;color:var(--champagne)}

/* the ribbon sits flush under the hero as a full-bleed band */
.ribbon{line-height:0;border-block:1px solid var(--line)}
.ribbon svg{width:100%;height:110px;display:block}
@media (max-width:640px){ .ribbon svg{height:64px} }

/* marquee of shade codes — technical, not decorative */
.ticker{overflow:hidden;border-bottom:1px solid var(--line-ink);background:var(--ink);padding:14px 0}
.ticker-in{display:flex;gap:44px;white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7E756A;animation:tick 42s linear infinite}
.ticker-in span{flex:none}
.ticker-in b{color:var(--champagne);font-weight:400}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .ticker-in{animation:none} }
.spectrum-bare{width:100%;line-height:0}
.spectrum-bare svg{width:100%;height:110px;display:block}
@media (max-width:640px){ .spectrum-bare svg{height:64px} }


/* ===========================================================================
   v15 — the motif moves from poured paint to bottles and nails.
   A gel manufacturer's signature object is the bottle; the proof is the nail.
   =========================================================================== */

/* the swatch-stick rack that replaces the flat colour ribbon */
.rack{width:100%;line-height:0}
.rack svg{width:100%;height:110px;display:block}
@media (max-width:640px){ .rack svg{height:66px} }

/* ------------------------------------------------------------- bottles --- */
.bottle{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.bottle svg{
  display:block;
  filter:drop-shadow(0 26px 30px rgba(31,22,14,.24)) drop-shadow(0 3px 6px rgba(31,22,14,.16));
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.bottle:hover svg{transform:translateY(-10px)}
.bottle figcaption{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);text-align:center;line-height:1.5;
}
.bottle figcaption span{display:block;color:var(--graphite);letter-spacing:.14em;margin-top:3px}
.bottle-row{display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,3.4vw,52px);flex-wrap:nowrap}

/* the shelf: bottles stand on a hairline, full-bleed, like a display counter */
.shelf-sec{padding-bottom:0}
.shelf{position:relative;margin:clamp(30px,5vw,58px) 0 clamp(46px,6vw,74px);overflow-x:auto;scrollbar-width:none}
.shelf::-webkit-scrollbar{display:none}
.shelf-in{min-width:min(100%,780px);padding:0 24px}
.shelf-line{
  position:absolute;left:0;right:0;bottom:52px;height:1px;background:var(--line);z-index:-1;
}

/* ---------------------------------------------------------- nail finish --- */
.nail-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:clamp(10px,2.4vw,30px)}
.nail-row .nailsw svg{
  filter:drop-shadow(0 14px 18px rgba(31,22,14,.2));
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.nail-row .nailsw:hover svg{transform:translateY(-6px) rotate(-3deg)}
.nail-row .nailsw figcaption{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);
}
/* the row fans out slightly, the way swatch tips sit on a display ring */
.nail-row .nailsw:nth-child(1) svg{transform:rotate(-7deg)}
.nail-row .nailsw:nth-child(2) svg{transform:rotate(-4deg)}
.nail-row .nailsw:nth-child(3) svg{transform:rotate(-1deg)}
.nail-row .nailsw:nth-child(4) svg{transform:rotate(2deg)}
.nail-row .nailsw:nth-child(5) svg{transform:rotate(5deg)}
.nail-row .nailsw:nth-child(6) svg{transform:rotate(8deg)}

.finishes{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);
  gap:clamp(28px,5vw,68px);align-items:center;
  padding:clamp(36px,5vw,58px) 0 clamp(52px,6vw,84px);border-top:1px solid var(--line);
}
.finishes-t h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,44px);
  line-height:1.05;letter-spacing:-.01em;margin:10px 0 14px;
}
.finishes-t h3 em{font-style:italic;color:var(--champagne)}
@media (max-width:860px){
  .finishes{grid-template-columns:1fr;text-align:center}
  .finishes .nail-row{justify-content:center}
}

/* the shelf scrolls sideways on a phone the way a display counter does */
@media (max-width:720px){
  .shelf-in{min-width:640px;padding:0 20px}
  .shelf-line{bottom:48px}
  .bottle figcaption{font-size:9px;letter-spacing:.14em}
}

/* ===========================================================================
   v19 — the approved compact homepage.
   Search field in the header, a proof bar, a ten-item category row and three
   editorial tiles. Spacing steps are 8/12/16/24/32/48/64: the note on the
   previous build was that it wasted vertical space, so nothing here breathes
   for its own sake.
   =========================================================================== */

/* ------------------------------------------------- header search field --- */
.srch{
  display:flex;align-items:center;gap:9px;flex:none;
  width:clamp(180px,17vw,260px);height:40px;padding:0 15px;
  border:1px solid var(--line);border-radius:100px;background:var(--white);
  color:var(--graphite);transition:border-color .16s,box-shadow .16s;
}
.srch:focus-within{border-color:var(--carbon);box-shadow:var(--lift)}
.srch svg{flex:none}
.srch input{
  border:0;background:none;outline:none;width:100%;min-width:0;
  font-family:var(--sans);font-size:13px;color:var(--carbon);
}
.srch input::placeholder{color:var(--stainless)}
.srch input::-webkit-search-cancel-button{display:none}

.ico-cart{position:relative}
.cart-n{
  position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;
  display:grid;place-items:center;border-radius:100px;background:var(--champagne);color:#fff;
  font-family:var(--mono);font-size:9.5px;font-weight:500;
}
.srch-dr{width:100%;margin:10px 0 16px}
.dr-flat{
  display:block;padding:15px 0;border-bottom:1px solid var(--line-2);
  font-family:var(--serif);font-size:20px;
}

/* --------------------------------------------------------- proof bar ---- */
.proof{background:var(--paper-2);border-bottom:1px solid var(--line)}
.proof-in{display:grid;grid-template-columns:repeat(4,1fr)}
.proof-i{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:18px 12px;text-align:left;
}
.proof-i + .proof-i{box-shadow:inset 1px 0 0 var(--line)}
.proof-i .pic-ico{flex:none;color:var(--carbon)}
.proof-i p{display:flex;flex-direction:column;gap:2px}
.proof-i b{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.proof-i span{font-size:12.5px;color:var(--graphite)}
@media (max-width:860px){
  .proof-in{grid-template-columns:repeat(2,1fr)}
  .proof-i:nth-child(odd){box-shadow:none}
  .proof-i:nth-child(n+3){box-shadow:inset 0 1px 0 var(--line)}
  .proof-i:nth-child(4){box-shadow:inset 0 1px 0 var(--line), inset 1px 0 0 var(--line)}
}

/* ------------------------------------------------- category navigation --- */
.cats{background:var(--paper);border-bottom:1px solid var(--line)}
.cats-in{
  display:flex;gap:clamp(12px,2.2vw,34px);justify-content:center;
  padding:26px clamp(16px,3vw,40px) 22px;
  overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
}
.cats-in::-webkit-scrollbar{display:none}
.cat{display:flex;flex-direction:column;align-items:center;gap:11px;flex:none;scroll-snap-align:center}
.cat-pic{
  position:relative;display:block;width:clamp(72px,7vw,96px);aspect-ratio:1;
  border-radius:50%;
}
.cat-pic img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
  box-shadow:0 2px 10px rgba(31,22,14,.10);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;
}
.cat:hover .cat-pic img{transform:translateY(-4px) scale(1.04);box-shadow:var(--lift-2)}
.cat-t{
  font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--carbon);text-align:center;white-space:nowrap;
}
.cat:hover .cat-t{color:var(--cobalt)}
.cat-badge{
  position:absolute;top:-4px;right:-10px;padding:3px 8px;border-radius:100px;
  font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.12em;color:#fff;
  box-shadow:0 2px 6px rgba(31,22,14,.2);
}
.cat-new{background:#E0A6B4}
.cat-hot{background:#C0485C}
@media (max-width:1080px){
  .cats-in{justify-content:flex-start}
  .cat-t{font-size:10.5px}
}

/* ---------------------------------------------------- editorial tiles --- */
.tiles{padding-block:32px}
/* One row height for all three panels. Letting each tile take its own aspect
   ratio made the two narrow ones shorter than their own copy, which clipped. */
.tiles-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;grid-auto-rows:clamp(168px,15.5vw,224px)}
.tile{
  position:relative;display:block;overflow:hidden;border-radius:var(--r);
  background:var(--line-2);isolation:isolate;
}
.tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.tile:hover img{transform:scale(1.04)}
.tile::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(246,241,238,.95) 0%,rgba(246,241,238,.84) 24%,rgba(246,241,238,.4) 45%,transparent 64%);
}
/* narrow panels need a shorter scrim — the wide one washes them out, but drop
   it too far and the headline stops reading against pale pearl */
.tiles-in > .tile:not(.tile-wide)::after{
  background:linear-gradient(90deg,rgba(246,241,238,.95) 0%,rgba(246,241,238,.8) 30%,rgba(246,241,238,.32) 50%,transparent 66%);
}
.tile-copy{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  height:100%;justify-content:center;padding:0 clamp(18px,2.4vw,34px);
}
.tile-copy .eyebrow{margin:0 0 8px;color:var(--carbon);opacity:.62;font-size:9.5px}
.tile-h{
  font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.1vw,32px);
  line-height:1.1;letter-spacing:-.015em;color:var(--ink);
}
.tile-h em{font-style:italic;font-weight:500}
.tile-h i{font-style:italic;font-weight:400;font-size:.72em;color:#4A423B;display:block;margin-top:2px}
.tile .btn-sm{margin-top:12px;padding:9px 16px;font-size:11.5px}
/* the third tile's hand sits on the left of its frame — push it right so it
   does not fight the headline */
.tiles-in > .tile:last-child img{object-position:84% 46%}
.tiles-in > .tile-dark::after{
  background:linear-gradient(90deg,rgba(26,16,30,.84) 0%,rgba(26,16,30,.6) 32%,rgba(26,16,30,.22) 54%,transparent 70%);
}
.tile-dark .tile-h,.tile-dark .tile-h i{color:#FBF7F1}
.tile-dark .eyebrow{color:#EFE6F2;opacity:.8}
.tile-dark .btn-dark{background:var(--ink);border-color:var(--ink)}
@media (max-width:1020px){
  .tiles-in{grid-template-columns:1fr 1fr}
  .tile-wide{grid-column:1 / -1}
}
@media (max-width:620px){
  .tiles-in{grid-template-columns:1fr;grid-auto-rows:150px}
}

/* --------------------------------------------------- compact sections --- */
.sec-tight{padding-block:48px}
.head-row{align-items:center}
.head-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.head-links > a{font-size:13.5px;color:var(--graphite)}
.head-links > a:hover{color:var(--cobalt)}
.head-links .more{color:var(--carbon)}

/* ---------------------------------------------------- colour library ---- */
.lib{background:var(--paper-2);padding-block:64px}
.lib-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:start}
.lib-f + .lib-f{margin-top:22px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  display:inline-flex;align-items:center;padding:7px 14px;border-radius:100px;
  border:1px solid var(--line);background:var(--white);font-size:12.5px;color:var(--graphite);
  transition:border-color .14s,color .14s,background .14s;
}
.chip:hover{border-color:var(--carbon);color:var(--carbon)}
.lib-search{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.lib-search .panel-t{display:block}
.lib-search-in{display:flex;gap:8px}
.lib-search input{
  flex:1;min-width:0;height:44px;padding:0 15px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--white);font-family:var(--mono);font-size:13px;color:var(--carbon);
}
.lib-search input:focus{outline:none;border-color:var(--carbon)}
.lib-search .btn-sm{padding:0 22px;height:44px}
.lib-swatch .rack svg{height:150px;border-radius:var(--r);box-shadow:var(--lift)}
.lib-nails{display:flex;flex-wrap:wrap;gap:4px;justify-content:space-between;margin-top:24px}
@media (max-width:900px){ .lib-grid{grid-template-columns:1fr} }

/* --------------------------------------------------------- B2B block ---- */
.b2b{padding-block:72px}
.b2b-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.b2b-fig{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--lift-2)}
.b2b-fig img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.b2b-cta{margin-top:28px}
.b2b-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line-ink)}
.b2b-links a{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#B6ACA0}
.b2b-links a:hover{color:var(--champagne)}
.b2b .facts{margin-top:56px}
.btn-gold{background:var(--champagne);border-color:var(--champagne);color:#14110F}
.btn-gold:hover{background:#C9A868;border-color:#C9A868}
@media (max-width:900px){ .b2b-grid{grid-template-columns:1fr} }

/* ------------------------------------------------------- hero, mobile --- */
@media (max-width:860px){
  /* the copy runs further down the frame on a phone, so the scrim has to hold
     longer — at .35 by 72% the lede was sitting on the bright nails */
  .slide-scrim{
    background:linear-gradient(180deg,rgba(243,238,244,.97) 0%,rgba(243,238,244,.94) 40%,rgba(243,238,244,.8) 62%,rgba(243,238,244,.4) 82%,transparent 100%);
  }
  .hero-in{padding-block:34px 150px;min-height:0}
  .hero-copy{width:100%}
  .slide-art img{object-position:66% 34%}
}

/* the header collapses in two steps: nav into the drawer first, then the
   search field, so the logo and the cart are never squeezed */
@media (max-width:700px){
  .top-in{height:64px;gap:10px}
  .srch{display:none}
  .logo-t{font-size:19px}
  .logo-t em{font-size:6.5px;letter-spacing:.28em}
  .hero-figure{font-size:clamp(30px,8.6vw,42px)}
  .hero-btns .btn{flex:1;justify-content:center;padding-inline:16px}
}

/* the hero clip sits over the still and fades in once it can actually play,
   so a blocked autoplay or a failed download leaves the still exactly as it was */
.hero-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:62% 42%;
  opacity:0;transition:opacity .9s ease;
  pointer-events:none;background:transparent;
}
.hero-vid.on{opacity:1}
@media (prefers-reduced-motion:reduce){ .hero-vid{display:none} }

/* ===========================================================================
   v27 — hero carousel, light effects, and the review band.
   =========================================================================== */

/* ------------------------------------------------------------ carousel --- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#EFE7F2}
/* One height for every slide, so nothing jumps on transition — and that height
   is pinned to roughly 2.35:1, close to the supplied banners' own proportions.
   The band was 2.9:1 at first, which cropped a third off each campaign image. */
.hero{height:clamp(500px,42.5vw,660px)}

.slide{
  position:absolute;inset:0;z-index:0;
  opacity:0;visibility:hidden;
  transition:opacity .9s ease, visibility 0s linear .9s;
}
.slide.on{opacity:1;visibility:visible;z-index:1;transition:opacity .9s ease, visibility 0s}
/* every slide is absolute now; the band owns the height */

.slide-art{position:absolute;inset:0;z-index:0}
.slide-art picture{display:block;width:100%;height:100%}
.slide-art img{width:100%;height:100%;display:block;object-fit:cover;object-position:62% 42%}

.slide-full{position:absolute;inset:0;display:block;z-index:0}
.slide-full img{width:100%;height:100%;object-fit:cover;display:block}

/* the scrim belongs to the slide that carries live copy, not to the banners */
.slide-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(243,238,244,.97) 0%, rgba(243,238,244,.93) 26%,
    rgba(243,238,244,.66) 42%, rgba(243,238,244,.12) 58%, transparent 70%);
}

/* a slow drift on the finished banners, so a still frame still feels alive */
.slide-full img{animation:ugDrift 26s ease-in-out infinite alternate}
@keyframes ugDrift{ from{transform:scale(1.02)} to{transform:scale(1.07)} }

/* ------------------------------------------------------------- effects --- */
.fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fx i{position:absolute;display:block}

/* a soft bloom that breathes */
.fx-glow{
  top:-30%;right:4%;width:52%;height:150%;
  background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,236,255,.18) 55%,transparent 72%);
  animation:ugBloom 7.5s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes ugBloom{ 0%,100%{opacity:.45;transform:scale(1)} 50%{opacity:.85;transform:scale(1.07)} }

/* a beam of light sweeping across the frame */
.fx-beam{
  top:-60%;left:-35%;width:16%;height:220%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  filter:blur(7px);
  animation:ugSweep 9s ease-in-out infinite;
  mix-blend-mode:screen;
}
.fx-beam-2{width:7%;animation-duration:9s;animation-delay:.55s;opacity:.7}
@keyframes ugSweep{
  0%   {left:-35%;opacity:0}
  12%  {opacity:1}
  55%  {opacity:1}
  70%  {left:118%;opacity:0}
  100% {left:118%;opacity:0}
}

/* drifting motes — one element, many dots, no JS and no extra requests */
.fx-motes{
  inset:0;
  background-image:
    radial-gradient(2.5px 2.5px at 18% 32%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(2px 2px   at 34% 68%, rgba(255,246,255,.85), transparent 60%),
    radial-gradient(3px 3px   at 57% 22%, rgba(255,255,255,.9),  transparent 60%),
    radial-gradient(2px 2px   at 71% 55%, rgba(255,240,255,.85), transparent 60%),
    radial-gradient(2.5px 2.5px at 86% 38%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(2px 2px   at 46% 84%, rgba(255,255,255,.8),  transparent 60%);
  animation:ugMotes 14s ease-in-out infinite alternate;
  opacity:.75;
}
@keyframes ugMotes{
  from{transform:translate3d(0,0,0);opacity:.45}
  to  {transform:translate3d(-14px,-22px,0);opacity:.9}
}

/* ---------------------------------------------------------- slide copy --- */
/* Each text block rises and fades as its slide becomes active. Staggered by
   data-fx so the eyebrow leads and the buttons land last. */
.slide [data-fx]{opacity:0;transform:translateY(16px)}
.slide.on [data-fx]{
  opacity:1;transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.slide.on [data-fx="1"]{transition-delay:.10s}
.slide.on [data-fx="2"]{transition-delay:.22s}
.slide.on [data-fx="3"]{transition-delay:.36s}
.slide.on [data-fx="4"]{transition-delay:.48s}
.slide.on [data-fx="5"]{transition-delay:.60s}

/* the headline picks up a faint bloom of its own */
.slide.on .hero-figure em{
  animation:ugTextGlow 5.5s ease-in-out 1.2s infinite;
}
@keyframes ugTextGlow{
  0%,100%{text-shadow:0 0 0 rgba(184,151,90,0)}
  50%    {text-shadow:0 0 26px rgba(184,151,90,.45)}
}

/* ------------------------------------------------------- carousel nav ---- */
.hero-nav{
  position:absolute;right:clamp(14px,2vw,30px);bottom:clamp(12px,1.8vw,22px);
  z-index:5;display:flex;align-items:center;gap:10px;
}
.hero-arrow{
  display:grid;place-items:center;width:34px;height:34px;padding:0;
  border-radius:50%;border:1px solid rgba(20,17,15,.22);
  background:rgba(255,255,255,.62);backdrop-filter:blur(6px);
  color:var(--carbon);font-size:17px;line-height:1;cursor:pointer;
  transition:background .16s,border-color .16s,transform .16s;
}
.hero-arrow:hover{background:#fff;border-color:var(--carbon);transform:translateY(-1px)}
.hero-dots{display:flex;align-items:center;gap:7px}
.hero-dot{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(20,17,15,.3);transition:width .3s ease,background .3s ease;
}
.hero-dot.on{width:22px;border-radius:100px;background:var(--carbon)}

/* -------------------------------------------------------- review band ---- */
.says{padding-block:56px;background:var(--paper)}
.says-note{font-size:13px;color:var(--graphite)}
.says-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.say{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:7px;
  transition:box-shadow .22s,transform .22s;
}
.say:hover{box-shadow:var(--lift);transform:translateY(-2px)}
.say-q{
  font-family:var(--serif);font-size:34px;line-height:.6;color:var(--champagne);
  display:block;height:16px;
}
.say-t{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--carbon)}
.say-b{font-size:13.5px;color:var(--graphite);line-height:1.55}
.say-who{
  margin-top:auto;padding-top:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stainless);
}
/* the two one-line reviews sit as a narrower pair on the second row */
.says-grid .say-sm{grid-column:span 1}
@media (max-width:900px){ .says-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .says-grid{grid-template-columns:1fr} }

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .fx{display:none}
  .slide-full img{animation:none}
  .slide{transition:opacity .01s}
  .slide [data-fx]{opacity:1;transform:none;transition:none}
  .slide.on .hero-figure em{animation:none}
}

/* ------------------------------------------------------- hero, mobile ---- */
@media (max-width:860px){
  /* on a phone the banners are shown taller so their own copy stays readable */
  .hero{height:clamp(440px,86vw,560px)}
  .slide-full img{object-position:50% 50%}
  .hero-nav{left:0;right:0;justify-content:center;bottom:10px}
  .hero-in{padding-block:24px 70px}
}

/* ===========================================================================
   v31 — every slide carries live copy, the CTA glows, and the review band
   scrolls. The supplied banners' baked-in text was cropped off so real HTML
   could take its place; a painted button cannot glow.
   =========================================================================== */

/* the artwork as a right-hand panel, feathered into a lavender field */
.slide-panel{background:linear-gradient(105deg,#F5F0F8 0%,#EFE6F4 42%,#E8DCF1 100%)}
.slide-art.panel{left:auto;right:0;width:min(60%,900px)}
.slide-art.panel img{width:100%;height:100%;object-fit:cover;display:block}
.slide-art.panel{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%);
}

/* the primary call to action, lit */
.btn-glow{position:relative;box-shadow:0 0 0 rgba(184,151,90,0)}
.btn-glow::after{
  content:'';position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:linear-gradient(120deg,#B8975A,#E8D9B4,#B8975A);
  opacity:0;filter:blur(9px);transition:opacity .3s ease;
}
.slide.on .btn-glow{animation:ugBtnGlow 3.4s ease-in-out 1.1s infinite}
.slide.on .btn-glow::after{opacity:.55;animation:ugBtnAura 3.4s ease-in-out 1.1s infinite}
.btn-glow:hover::after{opacity:.9}
@keyframes ugBtnGlow{
  0%,100%{box-shadow:0 0 0 rgba(184,151,90,0), var(--lift)}
  50%    {box-shadow:0 0 28px rgba(184,151,90,.55), var(--lift)}
}
@keyframes ugBtnAura{ 0%,100%{opacity:.3} 50%{opacity:.75} }

/* ---------------------------------------------------------- ways to save */
.save{padding-block:56px;background:var(--paper-2)}
.save-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;
}
.save-c > a{
  display:flex;flex-direction:column;height:100%;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:box-shadow .22s,transform .22s;
}
.save-c > a:hover{box-shadow:var(--lift-2);transform:translateY(-3px)}
.save-pic{display:block;aspect-ratio:4/3;overflow:hidden;background:#F0E9F5}
.save-pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.save-c > a:hover .save-pic img{transform:scale(1.05)}
.save-body{display:flex;flex-direction:column;gap:7px;padding:18px 18px 20px;flex:1;text-align:center}
.save-t{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--carbon)}
.save-b{font-size:13px;color:var(--graphite);line-height:1.5}
.save-b b{font-weight:600;color:var(--carbon)}
.save-go{
  margin-top:auto;padding-top:10px;font-size:13px;font-weight:600;color:var(--cobalt);
  border-bottom:1px solid currentColor;align-self:center;
}
@media (max-width:1100px){ .save-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:720px){  .save-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:440px){  .save-grid{grid-template-columns:1fr} }

/* -------------------------------------------------- review band, scrolling */
.says-nav{display:flex;align-items:center;gap:16px}
.says-btns{display:flex;gap:7px}
.says-rail{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.says-rail::-webkit-scrollbar{display:none}
.says-track{
  list-style:none;margin:0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 28px) / 3);
  gap:14px;
}
.says-track .say{scroll-snap-align:start;height:100%}
@media (max-width:900px){ .says-track{grid-auto-columns:calc((100% - 14px) / 2)} }
@media (max-width:600px){ .says-track{grid-auto-columns:88%} }

@media (prefers-reduced-motion:reduce){
  .slide.on .btn-glow,.slide.on .btn-glow::after{animation:none}
  .says-rail{scroll-behavior:auto}
}

/* ------------------------------------------------ panel slides, mobile --- */
@media (max-width:860px){
  /* on a phone the copy stacks over the art, so the image is held to the lower
     half — dark type on the lavender field above it, artwork below */
  .slide-art.panel{left:0;width:100%}
  .slide-art.panel{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 26%,#000 54%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0%,transparent 26%,#000 54%,#000 100%);
  }
  .slide-art.panel img{object-position:50% 18%}
  .slide-panel{background:linear-gradient(180deg,#F5F0F8 0%,#EFE6F4 48%,#E8DCF1 100%)}
}