/* ============================================================
   CLEO VANE — salon business systems
   B2B for women who own nail studios & hair salons — an audience
   with trained eyes. Editorial, warm, printed-matter feel; never
   corporate. Palette per spec: cream, bone, blush, muted
   terracotta, deep charcoal, sage; metallic sparingly.
   Type: high-contrast serif display (Playfair) + clean sans (DM Sans).
   ============================================================ */

:root{
  --cream:#F6F1E8; --bone:#EFE8DB; --blush:#EAD7CE; --blush2:#F3E6DF;
  --char:#2A2724; --char2:#3A362F; --ink:#332F2A;
  --terra:#B65C38; --terra-deep:#96431F; --sage:#A8B096; --sage-deep:#7C8570;
  --gold:#AD9059; --mut:#7A7268; --mut2:#A79E92;
  --line:rgba(42,39,36,.45); --line2:rgba(42,39,36,.14);
  --pd:"Playfair Display",Georgia,serif;
  --dm:"DM Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);
  font:400 17.5px/1.7 var(--dm);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
::selection{background:rgba(182,92,56,.22)}

.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.wrap-n{max-width:820px;margin:0 auto;padding:0 28px}
.center{text-align:center}

h1,h2,h3,h4{font-family:var(--pd);font-weight:500;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(38px,5.4vw,64px)}
h2{font-size:clamp(28px,3.6vw,44px)}
h3{font-size:24px}
h4{font-size:19px}
h1 em,h2 em,h3 em{font-style:italic;color:var(--terra)}
.lede{font-size:19px;color:var(--mut);max-width:60ch;line-height:1.7}
.eyebrow{font-family:var(--dm);font-weight:600;font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--terra);display:block;margin-bottom:16px}
.kicker{font-family:var(--pd);font-style:italic;font-size:19px;color:var(--mut)}
.small{font-size:15px}
.caption{font-size:14px;color:var(--mut);margin-top:12px}

/* rules & marks */
.rule{border:0;border-top:1px solid var(--line);margin:0}
.rule-thick{border:0;border-top:3px solid var(--char);margin:0}
.numbered{display:flex;gap:18px;align-items:baseline}
.numbered .no{font-family:var(--pd);font-style:italic;font-size:26px;color:var(--terra);
  flex:0 0 auto;min-width:34px}

/* ------- buttons: printed-card rectangles ------- */
.btn{display:inline-block;font-family:var(--dm);font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;
  background:var(--char);color:var(--cream);border:1px solid var(--char);
  border-radius:3px;padding:16px 30px;transition:all .25s ease}
.btn:hover{background:var(--terra);border-color:var(--terra);color:#FFF7EF;
  transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(150,67,31,.5)}
.btn-terra{background:var(--terra);border-color:var(--terra);color:#FFF7EF}
.btn-terra:hover{background:var(--char);border-color:var(--char);color:var(--cream)}
.btn-ghost{background:transparent;color:var(--char)}
.btn-ghost:hover{background:var(--char);color:var(--cream);box-shadow:none}
.btn-wide{width:100%}
.btn-min{font-family:var(--dm);font-weight:600;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--terra-deep);border-bottom:2px solid var(--terra);
  padding-bottom:3px;transition:.2s}
.btn-min:hover{color:var(--char);border-color:var(--char)}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.cta-row.center{justify-content:center}

/* ------- header ------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(246,241,232,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:18px}
.brand{font-family:var(--pd);font-size:20px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.brand .tick{color:var(--terra)}
.nav nav{display:flex;gap:20px;align-items:center}
.nav nav>a{font-family:var(--dm);font-weight:600;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);transition:.2s;white-space:nowrap}
.nav nav>a:hover,.nav nav>a[aria-current]{color:var(--terra-deep)}
.nav .btn{padding:11px 18px;font-size:11.5px}
.nav nav>a.btn-terra{color:#1F1B18;background:#D97347;border-color:#D97347}
.nav nav>a.btn-terra:hover{color:var(--cream);background:var(--char);border-color:var(--char)}
.menu-t{display:none;border:1px solid var(--char);border-radius:3px;padding:9px 16px;
  font-family:var(--dm);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}

/* ------- sections ------- */
section.blk{padding:88px 0}
section.blk-t{padding-top:40px}
.head{max-width:680px;margin:0 auto 54px;text-align:center}
.head .lede{margin:16px auto 0}
.head-l{max-width:680px;margin-bottom:44px}
.head-l .lede{margin-top:16px}
.dark{background:var(--char);color:var(--cream)}
.dark h1,.dark h2,.dark h3{color:var(--cream)}
.dark .lede{color:#B9B2A6}
.dark .eyebrow{color:var(--gold)}
.boneblk{background:var(--bone)}
.blushblk{background:var(--blush2)}

/* ------- hero ------- */
.hero{padding:84px 0 76px;position:relative;overflow:hidden}
.hero .est{font-family:var(--dm);font-weight:600;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--mut2)}
.hero h1{margin:18px 0 20px;max-width:17ch}
.hero .sub{font-size:20px;color:var(--mut);max-width:54ch;margin-bottom:36px;line-height:1.7}
.hero .proof{margin-top:26px;font-family:var(--dm);font-weight:600;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.hero .proof b{color:var(--terra-deep)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}

/* big editorial figure */
.fig-card{background:var(--bone);border:1px solid var(--line);border-radius:4px;
  padding:34px 30px;box-shadow:14px 14px 0 rgba(182,92,56,.14)}
.fig-card .fig-eyebrow{font-family:var(--dm);font-weight:600;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.fig-card .fig-big{font-family:var(--pd);font-size:clamp(40px,5vw,58px);line-height:1.05}
.fig-card .fig-big em{color:var(--terra)}
.fig-card .fig-note{font-size:14.5px;color:var(--mut);margin-top:12px;line-height:1.6}

/* ------- cards ------- */
.card{background:#FCF9F3;border:1px solid var(--line2);border-radius:4px;
  padding:34px 30px;display:flex;flex-direction:column;
  box-shadow:0 18px 40px -28px rgba(42,39,36,.35);transition:.25s}
a.card:hover,.card.lift:hover{transform:translateY(-5px);
  box-shadow:0 26px 50px -26px rgba(42,39,36,.4)}
.card .no{font-family:var(--dm);font-weight:600;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--terra);margin-bottom:12px}
.card h3,.card h4{margin-bottom:10px}
.card .why{font-size:15.5px;color:var(--mut);margin-bottom:18px;flex:1;line-height:1.65}
.card .price{font-family:var(--pd);font-size:30px;margin-bottom:16px}
.card .price em{font-style:italic;font-size:15px;color:var(--mut)}
.card.terraline{border-top:3px solid var(--terra)}
.card.sageline{border-top:3px solid var(--sage-deep)}
.card.charline{border-top:3px solid var(--char)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

/* ------- the value stack (Tier pages) ------- */
.stack{max-width:760px;margin:0 auto}
.stack-item{display:flex;gap:20px;align-items:baseline;padding:20px 0;
  border-bottom:1px solid var(--line2)}
.stack-item .no{font-family:var(--pd);font-style:italic;font-size:24px;color:var(--terra);
  flex:0 0 34px}
.stack-item .body{flex:1}
.stack-item h4{font-size:20px;margin-bottom:6px}
.stack-item p{font-size:15.5px;color:var(--mut);line-height:1.65}
.stack-item .val{font-family:var(--pd);font-size:19px;white-space:nowrap;color:var(--mut)}
.stack-total{display:flex;justify-content:space-between;align-items:baseline;
  padding:22px 0 0;font-family:var(--pd)}
.stack-total .t{font-size:20px;font-style:italic;color:var(--mut)}
.stack-total .v{font-size:26px;text-decoration:line-through;
  text-decoration-color:var(--terra);text-decoration-thickness:2px;color:var(--mut)}
.price-line{text-align:center;margin:34px 0 8px}
.price-line .p{font-family:var(--pd);font-size:clamp(44px,6vw,64px)}
.price-line .p em{font-style:italic;color:var(--terra)}
.price-line .terms{font-family:var(--dm);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-top:8px}

/* guarantee plaque */
.guarantee{max-width:720px;margin:0 auto;border:2px solid var(--char);border-radius:4px;
  background:#FCF9F3;padding:36px 38px;position:relative;
  box-shadow:10px 10px 0 rgba(168,176,150,.35)}
.guarantee .g-name{font-family:var(--pd);font-size:24px;margin-bottom:12px}
.guarantee .g-name .tick{color:var(--terra)}
.guarantee p{font-size:16.5px;line-height:1.7}
.guarantee .g-why{font-size:14.5px;color:var(--mut);margin-top:14px;font-style:italic}

/* ------- forms ------- */
.field{width:100%;background:#FCF9F3;border:1px solid var(--line);border-radius:3px;
  padding:14px 16px;font:400 16.5px var(--dm);color:var(--ink);margin-bottom:18px}
.field:focus{border-color:var(--terra);outline:none;box-shadow:0 0 0 3px rgba(182,92,56,.15)}
textarea.field{min-height:150px;resize:vertical;line-height:1.6}
label.lab{display:block;font-family:var(--dm);font-weight:600;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
form.inline{display:flex;max-width:520px;margin:0 auto;gap:0;border:1px solid var(--char);
  border-radius:3px;background:#FCF9F3;padding:5px}
form.inline input{flex:1;border:0;background:transparent;padding:12px 16px;
  font:400 16px var(--dm);color:var(--ink);min-width:0}
form.inline input:focus{outline:none}
form.inline input::placeholder{color:var(--mut2)}
form.inline .btn{padding:12px 22px}
.consent{font-size:13.5px;color:var(--mut);margin-top:14px}
.form-done{font-family:var(--pd);font-style:italic;font-size:19px;padding:12px 16px;color:var(--terra-deep)}
.dark form.inline{border-color:var(--gold);background:rgba(252,249,243,.06)}
.dark form.inline input{color:var(--cream)}
.dark .consent{color:#B9B2A6}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.chips.center{justify-content:center}
.chip{border:1px solid var(--line);border-radius:3px;background:#FCF9F3;padding:12px 20px;
  font-family:var(--dm);font-weight:600;font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);transition:.2s;text-align:left}
.chip:hover{border-color:var(--terra);color:var(--terra-deep)}
.chip.sel{background:var(--char);border-color:var(--char);color:var(--cream)}

/* ------- quiz shell ------- */
.tool-shell{max-width:620px;margin:0 auto}
.qstep{display:none}
.qstep.active{display:block;animation:sfade .4s ease}
@keyframes sfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qbar{height:4px;background:var(--line2);border-radius:2px;margin-bottom:38px;overflow:hidden}
.qbar i{display:block;height:100%;background:var(--terra);border-radius:2px;transition:width .3s ease}
.qnum{font-family:var(--dm);font-weight:600;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut2);margin-bottom:10px}
.qq{font-family:var(--pd);font-size:clamp(24px,3.4vw,32px);margin-bottom:26px;line-height:1.25}
.qopt{display:block;width:100%;text-align:left;background:#FCF9F3;border:1px solid var(--line2);
  border-radius:3px;padding:16px 20px;margin-bottom:12px;font-size:16.5px;transition:.2s;cursor:pointer}
.qopt:hover{border-color:var(--terra);transform:translateX(4px)}
.qopt.sel{border-color:var(--terra);background:rgba(182,92,56,.08);box-shadow:inset 3px 0 0 var(--terra)}
.result-card{background:#FCF9F3;border:1px solid var(--line);border-radius:4px;
  padding:40px 36px;box-shadow:10px 10px 0 rgba(182,92,56,.14);margin-bottom:26px}
.result-card .r-eyebrow{font-family:var(--dm);font-weight:600;font-size:11.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--terra);margin-bottom:12px}
.locked{display:flex;justify-content:space-between;gap:14px;padding:13px 2px;
  border-top:1px solid var(--line2);font-size:15px;color:var(--mut)}
.locked b{color:var(--ink);font-weight:600}

/* calculator output bars */
.bbar{margin-bottom:14px}
.bbar .brow{display:flex;justify-content:space-between;align-items:baseline;
  font-size:15.5px;margin-bottom:6px}
.bbar .brow b{font-weight:600}
.bbar .brow .amt{font-family:var(--pd);font-size:19px}
.bbar .track{height:9px;border-radius:2px;background:var(--bone);overflow:hidden}
.bbar .fill{height:100%;background:var(--terra)}
.bbar .fill.sagefill{background:var(--sage-deep)}

/* checklist */
.cl-item{display:flex;gap:14px;align-items:flex-start;background:#FCF9F3;
  border:1px solid var(--line2);border-radius:3px;padding:15px 18px;margin-bottom:10px;
  cursor:pointer;transition:.2s}
.cl-item:hover{border-color:var(--terra)}
.cl-item input{width:19px;height:19px;margin-top:3px;accent-color:var(--terra);flex:0 0 auto}
.cl-item.done{opacity:.55}
.cl-item.done span{text-decoration:line-through;text-decoration-color:var(--terra)}
.progress-card{position:sticky;top:90px;z-index:40;background:#FCF9F3;
  border:1px solid var(--char);border-radius:4px;padding:18px 24px;margin-bottom:32px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  box-shadow:0 18px 40px -24px rgba(42,39,36,.4)}
.progress-card .big{font-family:var(--pd);font-size:28px;white-space:nowrap}
.progress-card .track{flex:1;min-width:120px;height:9px;border-radius:2px;
  background:var(--bone);overflow:hidden}
.progress-card .fill{height:100%;background:var(--terra);transition:width .4s ease}
.progress-card .hint2{font-size:14px;color:var(--mut);width:100%}

/* ------- template & teardown artefacts ------- */
.artefact{background:#FCF9F3;border:1px solid var(--line);border-radius:3px;
  padding:34px 32px;box-shadow:0 20px 44px -28px rgba(42,39,36,.4);position:relative}
.artefact .a-head{font-family:var(--pd);font-size:22px;text-align:center;margin-bottom:4px}
.artefact .a-sub{font-family:var(--dm);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mut);text-align:center;margin-bottom:22px}
.menu-row{display:flex;align-items:baseline;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line2);font-size:16px}
.menu-row .dots{flex:1;border-bottom:2px dotted var(--line2);transform:translateY(-4px)}
.menu-row .p{font-family:var(--pd);font-size:17px;white-space:nowrap}
.menu-row .svc i{font-style:normal;font-size:13px;color:var(--mut);display:block}
.copybtn{position:absolute;top:18px;right:18px;font-family:var(--dm);font-weight:600;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--terra-deep);
  border:1px solid var(--terra);border-radius:3px;padding:7px 13px;transition:.2s;background:#FCF9F3}
.copybtn:hover{background:var(--terra);color:#FFF7EF}
.script-block{font-size:16.5px;line-height:1.75;border-left:3px solid var(--terra);
  padding:6px 0 6px 22px;white-space:pre-wrap}

/* annotation marks (teardown) */
.mark{position:relative;display:inline-block;padding:2px 6px;border:2px solid var(--terra);
  border-radius:40%/55%;transform:rotate(-1deg)}
.anno{border-left:3px solid var(--terra);background:var(--blush2);border-radius:0 4px 4px 0;
  padding:18px 22px;margin:16px 0 30px;font-size:15.5px;line-height:1.7}
.anno .a-tag{font-family:var(--dm);font-weight:600;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--terra-deep);display:block;margin-bottom:8px}
.anno .fix{display:block;margin-top:10px;padding-top:10px;border-top:1px solid rgba(182,92,56,.25)}
.anno .fix b{color:var(--terra-deep)}

/* ------- prose / articles ------- */
.prose{max-width:680px;margin:0 auto;font-size:17.5px}
.prose p{margin-bottom:20px;line-height:1.75}
.prose h2{font-size:clamp(24px,3vw,32px);margin:44px 0 16px}
.prose h3{font-size:21px;margin:36px 0 12px}
.prose ul,.prose ol{margin:0 0 20px 22px}
.prose li{margin-bottom:10px;line-height:1.7}
.prose blockquote{font-family:var(--pd);font-style:italic;font-size:21px;line-height:1.5;
  border-left:3px solid var(--terra);padding:4px 0 4px 24px;margin:30px 0;color:var(--char)}
.note-card{border:1px solid var(--line);border-left:4px solid var(--terra);border-radius:3px;
  background:#FCF9F3;padding:22px 26px;margin:28px 0;font-size:15.5px;line-height:1.7}
.byline{display:flex;gap:14px;align-items:center;font-size:14px;color:var(--mut);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 2px;margin:26px 0 38px;font-family:var(--dm);letter-spacing:.06em;
  text-transform:uppercase;font-weight:600}

/* archetype sections */
.arch-sec{border-top:3px solid var(--char);padding:44px 0}
.arch-sec .a-no{font-family:var(--pd);font-style:italic;font-size:44px;color:var(--terra);line-height:1}
.arch-sec h2{margin:8px 0 16px}
.arch-cols{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:20px}
.arch-cols h4{font-family:var(--dm);font-weight:600;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--terra);margin-bottom:10px}
.arch-cols p,.arch-cols li{font-size:16px;color:var(--ink);line-height:1.7}
.arch-cols ul{margin-left:20px}

/* ------- FAQ ------- */
.faq{max-width:720px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line2)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:20px;padding:22px 2px;font-family:var(--pd);font-size:20px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--terra);font-size:22px;font-family:var(--dm);transition:.25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 2px 22px;color:var(--mut);font-size:16px;line-height:1.7}

/* ------- footer ------- */
footer.site{background:var(--char);color:var(--cream);padding:66px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.foot-grid .brand{color:var(--cream);font-size:21px}
.foot-grid p{font-size:14.5px;color:#B9B2A6;margin-top:12px;line-height:1.7}
.foot-h{font-family:var(--dm);font-weight:600;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.foot-grid nav a{display:block;font-size:15px;color:#D8D2C6;padding:4.5px 0;transition:.2s}
.foot-grid nav a:hover{color:var(--cream)}
.legal{font-size:13px;color:#8F887C;max-width:82ch;margin:0 auto;line-height:1.8;
  text-align:center;border-top:1px solid rgba(252,249,243,.14);padding-top:28px}
.legal a{border-bottom:1px solid rgba(173,144,89,.5)}

/* ------- buy bar ------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--char);
  color:var(--cream);transform:translateY(110%);transition:transform .35s;
  border-top:2px solid var(--terra)}
.buybar.show{transform:none}
.buybar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 28px}
.buybar .t{font-family:var(--pd);font-size:18px}
.buybar .p{color:var(--gold);margin-left:12px;font-family:var(--pd);font-size:18px}
.buybar .btn{padding:11px 22px;font-size:11.5px;background:var(--terra);border-color:var(--terra)}
.buybar .btn:hover{background:var(--cream);color:var(--char);border-color:var(--cream)}

/* ------- modal ------- */
.sl-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  visibility:hidden;opacity:0;transition:.25s}
.sl-modal.open{visibility:visible;opacity:1}
.sl-modal-back{position:absolute;inset:0;background:rgba(42,39,36,.65);backdrop-filter:blur(3px)}
.sl-modal-card{position:relative;width:min(500px,calc(100vw - 40px));background:var(--cream);
  border:1px solid var(--char);border-radius:4px;
  box-shadow:12px 12px 0 rgba(182,92,56,.3),0 40px 90px rgba(42,39,36,.4);
  padding:44px 40px 36px;transform:translateY(14px);transition:.3s}
.sl-modal.open .sl-modal-card{transform:none}
.sl-modal-x{position:absolute;top:10px;right:14px;font-size:26px;color:var(--mut);
  line-height:1;padding:8px}
.sl-modal-x:hover{color:var(--terra)}
.sl-modal h3{margin-bottom:12px;font-size:25px}
.sl-modal-copy{color:var(--mut);font-size:16px;margin-bottom:22px;line-height:1.65}
.sl-modal-fine{font-size:13px;color:var(--mut2);margin-top:14px;line-height:1.6}
.sl-done-seal{width:70px;height:70px;margin:0 auto 18px;border-radius:50%;
  border:2px solid var(--terra);color:var(--terra);font-size:26px;font-family:var(--pd);
  display:grid;place-items:center}
.sl-modal-done{text-align:center}
body.sl-lock{overflow:hidden}

/* scroll offer */
.scroll-offer{position:fixed;right:24px;bottom:24px;z-index:80;width:min(370px,calc(100vw - 40px));
  background:var(--cream);border:1px solid var(--char);border-radius:4px;
  box-shadow:10px 10px 0 rgba(182,92,56,.25),0 26px 60px -18px rgba(42,39,36,.45);
  padding:26px 24px;transform:translateY(30px);opacity:0;visibility:hidden;transition:.4s}
.scroll-offer.show{transform:none;opacity:1;visibility:visible}
.scroll-offer h4{margin-bottom:8px}
.scroll-offer p{font-size:14.5px;color:var(--mut);margin-bottom:14px;line-height:1.6}
.scroll-offer .x{position:absolute;top:6px;right:10px;font-size:20px;color:var(--mut2);padding:4px}
.scroll-offer form{display:flex;gap:0;border:1px solid var(--char);border-radius:3px;
  background:#FCF9F3;padding:4px}
.scroll-offer input{flex:1;border:0;background:transparent;padding:10px 12px;
  font:400 16px var(--dm);color:var(--ink);min-width:0}
.scroll-offer input:focus{outline:none}
.scroll-offer .btn{padding:10px 16px;font-size:11px}

/* reveal */
.rev{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease}
.rev.in{opacity:1;transform:none}

.badge{display:inline-block;font-family:var(--dm);font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--terra-deep);
  border:1px solid var(--terra);border-radius:3px;padding:4px 10px;margin-left:8px;vertical-align:middle}
.tag-free{color:var(--sage-deep);border-color:var(--sage-deep)}

/* ------- Cleo Vane homepage ------- */
.page-shell{overflow-x:hidden;width:100%;max-width:100%}
.cleo-brand{display:inline-flex;align-items:baseline;gap:0}
.cleo-brand small{font:600 8.5px/1 var(--dm);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);margin-left:9px}
footer .cleo-brand small{color:var(--gold)}
.cleo-hero{min-height:calc(100vh - 74px);padding:74px 0 92px;display:flex;align-items:center;
  position:relative;overflow:hidden;background:
  radial-gradient(circle at 88% 18%,rgba(182,92,56,.13),transparent 31%),var(--cream)}
.cleo-hero::before{content:"";position:absolute;width:460px;height:460px;border:1px solid rgba(182,92,56,.18);
  border-radius:50%;right:-170px;bottom:-210px}
.cleo-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:72px;align-items:center}
.cleo-hero-copy{position:relative;z-index:2}
.cleo-hero .est{font-weight:600;font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--terra-deep)}
.cleo-hero h1{font-size:clamp(46px,6.2vw,78px);max-width:14ch;margin:20px 0 24px;line-height:1.02}
.cleo-hero .sub{font-size:19px;line-height:1.72;color:var(--mut);max-width:61ch;margin-bottom:34px}
.cleo-hero-photo{position:relative;margin:0 0 0 auto;width:min(100%,430px);padding:14px;
  background:#FBF8F1;border:1px solid var(--char);box-shadow:18px 18px 0 rgba(182,92,56,.2);transform:rotate(1deg)}
.cleo-hero-photo::after{content:"";position:absolute;inset:7px;border:1px solid rgba(42,39,36,.18);pointer-events:none}
.cleo-hero-photo img{width:100%;height:540px;object-fit:cover;object-position:center 22%;filter:saturate(.84) contrast(1.02);display:block}
/* The caption sits in the flow under the photo rather than being absolutely
   placed over the frame's bottom padding. It used to be positioned from the
   bottom and baseline-aligned with the two-line role beside it, which pushed
   the taller name up past the padding and clipped it against the photo. In
   flow, the frame simply grows to whatever the caption needs. */
.cleo-hero-photo figcaption{display:flex;justify-content:space-between;gap:18px;
  align-items:flex-end;padding:16px 14px 6px}
.cleo-hero-photo figcaption b{font:500 23px/1.15 var(--pd);flex:none}
.cleo-hero-photo figcaption span{font-size:11px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);text-align:right;max-width:22ch}

.owner-reality{padding:130px 0!important}
.reality-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.reality-grid article{padding:34px 36px 38px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:250px;background:rgba(255,255,255,.22)}
.reality-grid span,.review-card>span{font:600 11px/1.3 var(--dm);letter-spacing:.2em;text-transform:uppercase;color:var(--terra-deep)}
.reality-grid h3{font-size:27px;margin:28px 0 13px}.reality-grid p{font-size:16px;line-height:1.7;color:var(--mut)}

.impact-section{padding:140px 0!important}.impact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:82px;align-items:center}
.example-note{margin-top:26px;padding:16px 18px;border-left:3px solid var(--terra);background:var(--bone);font-size:13.5px;line-height:1.55;color:var(--mut)}
.impact-chart{border:1px solid var(--char);background:#FCF9F3;padding:34px;box-shadow:12px 12px 0 var(--blush)}
.chart-row{display:grid;grid-template-columns:minmax(190px,1.3fr) minmax(110px,1fr) auto;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line2)}
.chart-row div{display:flex;flex-direction:column}.chart-row b{font:500 17px/1.3 var(--pd)}.chart-row span{font-size:13px;color:var(--mut)}
.chart-row i{height:12px;background:linear-gradient(90deg,var(--terra),#D49778);width:var(--bar);min-width:18px}.chart-row strong{font:500 19px/1 var(--pd)}
.chart-total{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:27px 0 10px}.chart-total span{font-size:13px;text-transform:uppercase;letter-spacing:.13em}.chart-total strong{font:500 42px/1 var(--pd);color:var(--terra-deep)}
.impact-chart>p{font-size:13.5px;line-height:1.55;color:var(--mut);margin-top:16px}

.review-section{padding:140px 0!important}.review-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense;gap:0;border-top:1px solid rgba(252,249,243,.22);border-left:1px solid rgba(252,249,243,.22)}
.review-card{grid-column:span 5;padding:34px;min-height:300px;border-right:1px solid rgba(252,249,243,.22);border-bottom:1px solid rgba(252,249,243,.22);background:rgba(255,255,255,.035)}
.review-card h3{font-size:27px;margin:30px 0 14px;color:var(--cream)}.review-card p{font-size:15.5px;color:#B9B2A6;line-height:1.72}
.review-card-photo{grid-column:span 7;grid-row:span 2;min-height:600px;padding:0;position:relative;overflow:hidden}
.review-card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.12) contrast(1.05) brightness(.7);transition:transform .8s ease}
.review-card-photo:hover img{transform:scale(1.035)}.review-card-photo>div{position:absolute;left:0;right:0;bottom:0;padding:42px 38px 36px;background:linear-gradient(transparent,rgba(42,39,36,.96))}
.review-card-photo span{color:#E1BD8F}.review-card-wide{grid-column:span 8;min-height:260px}.review-bento>.review-card:nth-child(4){grid-column:span 4}

.deliverable-section{padding:150px 0!important}.deliverable-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:90px;align-items:start}
.deliverable-title{position:sticky;top:130px}.deliverable-title>p{font:400 italic 20px/1.55 var(--pd);color:var(--terra-deep);max-width:32ch;margin-top:20px}
.deliverable-stack{display:grid;gap:18px}.deliverable-card{display:grid;grid-template-columns:70px 1fr;gap:28px;padding:34px;border:1px solid var(--line);background:#FCF9F3;box-shadow:10px 10px 0 rgba(168,176,150,.18)}
.deliverable-card>span{font:italic 34px/1 var(--pd);color:var(--terra)}.deliverable-card h3{font-size:26px;margin-bottom:10px}.deliverable-card p{font-size:16px;color:var(--mut);line-height:1.7}

.cleo-story{padding:150px 0!important}.story-opening{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:end;margin-bottom:78px}
.story-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:end}.story-image{margin:0;background:#FCF9F3;padding:12px 12px 18px;border:1px solid var(--line);box-shadow:10px 10px 0 rgba(182,92,56,.12)}
.story-image img{width:100%;height:360px;object-fit:cover;filter:saturate(.72) sepia(.08)}.story-image-tall img{height:460px}.story-image.magazine{transform:rotate(1.5deg)}.story-image figcaption{font:400 italic 14px/1.45 var(--pd);color:var(--mut);padding:14px 8px 0}
.story-now{display:grid;grid-template-columns:340px 1fr;gap:70px;align-items:center;margin:110px auto 0;max-width:930px}.story-now figure{border-radius:50% 50% 8px 8px;overflow:hidden;height:420px}.story-now img{width:100%;height:100%;object-fit:cover;object-position:center 20%}.story-now h3{font-size:34px;margin-bottom:20px}.story-now p{color:var(--mut);margin:0 0 16px;line-height:1.75}

.offer-section{padding:150px 0!important}.offer-layout{display:grid;grid-template-columns:1.18fr .82fr;gap:84px;align-items:center}.offer-list{list-style:none;margin-top:30px;border-top:1px solid var(--line2)}.offer-list li{padding:14px 0 14px 26px;border-bottom:1px solid var(--line2);position:relative}.offer-list li::before{content:"";position:absolute;left:1px;top:25px;width:10px;height:2px;background:var(--terra)}
.offer-card{background:var(--char);color:var(--cream);padding:44px;border-radius:4px;box-shadow:15px 15px 0 var(--blush)}.offer-card .offer-price{font:500 64px/1 var(--pd);color:var(--cream)}.offer-card>p:nth-child(2){font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-top:8px}.offer-card hr{border:0;border-top:1px solid rgba(255,255,255,.2);margin:28px 0}.offer-timing{font-size:15.5px;line-height:1.7;color:#D7D0C5;margin-bottom:28px}.offer-card .btn-min{display:inline-block;color:var(--cream);margin-top:22px}

.quick-step{padding:120px 0!important}.quick-step-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:center}.quick-step .small{margin-top:22px;color:var(--mut);max-width:62ch}.quick-card{background:#FCF9F3;border:1px solid var(--char);padding:36px;box-shadow:12px 12px 0 rgba(168,176,150,.35)}.quick-card>span{font:500 48px/1 var(--pd);color:var(--terra-deep)}.quick-card h3{font-size:28px;margin:10px 0}.quick-card p{font-size:15px;line-height:1.65;color:var(--mut);margin-bottom:25px}
.contact-band{padding:100px 0!important;background:var(--blush2)}.contact-band-grid{display:grid;grid-template-columns:1fr auto;gap:70px;align-items:center}.contact-band .lede{margin-top:14px}.scrub-word{will-change:opacity}

@media(max-width:960px){
  .cleo-hero-grid,.impact-grid,.deliverable-grid,.story-opening,.offer-layout,.quick-step-grid{grid-template-columns:1fr}
  .cleo-hero{min-height:auto}.cleo-hero h1{max-width:16ch}.cleo-hero-photo{margin:0 auto}.impact-grid,.deliverable-grid,.story-opening,.offer-layout,.quick-step-grid{gap:50px}
  .deliverable-title{position:static}.review-card-photo{grid-column:span 12;grid-row:auto}.review-card,.review-card-wide,.review-bento>.review-card:nth-child(4){grid-column:span 6}
  .story-now{grid-template-columns:280px 1fr;gap:44px}
}

@media(max-width:660px){
  .cleo-brand small{display:none}.cleo-hero{padding:52px 0 74px}.cleo-hero-grid{gap:42px}.cleo-hero h1{font-size:44px;max-width:none}.cleo-hero .sub{font-size:17px}.cleo-hero-photo{padding:10px;box-shadow:9px 9px 0 rgba(182,92,56,.2)}.cleo-hero-photo img{height:440px}.cleo-hero-photo figcaption{padding:14px 8px 4px}.cleo-hero-photo figcaption span{display:none}
  .owner-reality,.impact-section,.review-section,.deliverable-section,.cleo-story,.offer-section{padding:86px 0!important}.reality-grid{grid-template-columns:1fr}.reality-grid article{min-height:auto;padding:28px 24px}
  .impact-chart{padding:24px 20px;box-shadow:7px 7px 0 var(--blush)}.chart-row{grid-template-columns:1fr auto}.chart-row i{grid-column:1/-1;width:var(--bar)}.chart-total strong{font-size:34px}
  .review-bento{display:block;border:0}.review-card,.review-card-wide,.review-bento>.review-card:nth-child(4){min-height:auto;border:1px solid rgba(252,249,243,.2);margin-bottom:14px;padding:28px 24px}.review-card-photo{min-height:520px;padding:0}.review-card-photo>div{padding:34px 24px}
  .deliverable-card{grid-template-columns:42px 1fr;padding:26px 22px;gap:15px}.story-gallery{grid-template-columns:1fr;gap:24px}.story-image img,.story-image-tall img{height:auto}.story-now{grid-template-columns:1fr;margin-top:76px}.story-now figure{height:390px}.offer-card{padding:32px 26px;box-shadow:8px 8px 0 var(--blush)}
  .contact-band-grid{grid-template-columns:1fr;gap:30px}.contact-band-grid .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
}
@media (max-width:960px){
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* The header row carries a brand, up to six links and a button. The links are
   `white-space:nowrap`, so when the row stopped fitting it did not wrap — it
   pushed the document wider than the screen and gave the whole site a
   horizontal scroll at every width in between. Measured, the longest nav needs
   about 1,060px before the brand and page padding are added, so the burger
   takes over below 1080px rather than at a phone width. */
@media (max-width:1080px){
  .nav nav{position:absolute;top:74px;left:0;right:0;background:var(--cream);
    border-bottom:1px solid var(--line);flex-direction:column;padding:16px 28px 24px;
    gap:14px;display:none;align-items:flex-start;box-shadow:0 20px 40px -20px rgba(42,39,36,.35)}
  .nav nav.open{display:flex}
  .menu-t{display:block}
}

@media (max-width:660px){
  body{font-size:16.5px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  section.blk{padding:62px 0}
  .hero{padding:60px 0 56px}
  .card{padding:26px 22px}
  .fig-card{box-shadow:8px 8px 0 rgba(182,92,56,.14)}
  form.inline{flex-direction:column;gap:8px;padding:8px}
  form.inline .btn{width:100%}
  .stack-item{flex-wrap:wrap}
  .stack-item .val{width:100%;text-align:right;margin-top:2px}
  .arch-cols{grid-template-columns:1fr;gap:22px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .buybar .t{font-size:15px}
  .guarantee{padding:26px 24px;box-shadow:6px 6px 0 rgba(168,176,150,.35)}
  .artefact{padding:24px 20px}
  .copybtn{position:static;display:inline-block;margin-bottom:16px}
  .progress-card{top:82px}
}

/* ------- the help desk -------------------------------------------------
   A full-width pause between the hero and the proof below. The wide card
   keeps the invitation and the form in one composed block on desktop; on a
   phone it returns to a calm single column. */
.lp-help{position:relative;padding:82px 0 96px;
  background:
    radial-gradient(540px 260px at 16% 12%,rgba(234,215,206,.5),transparent 72%),
    linear-gradient(180deg,#F2EBDD 0%,var(--bone) 100%);
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.lp-help-card{position:relative;max-width:900px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(390px,1.22fr);
  gap:clamp(34px,5vw,64px);align-items:center;
  background:linear-gradient(155deg,#FDFBF7 0%,#F8F2E9 100%);
  border:1px solid rgba(42,39,36,.2);border-radius:6px;padding:44px 46px 40px;
  box-shadow:16px 16px 0 rgba(168,176,150,.24)}

/* A small paper tab, so the card reads as a note rather than a web form. */
.lp-help-tab{position:absolute;top:-13px;left:24px;display:inline-flex;align-items:center;
  gap:7px;background:var(--terra);color:#fff;border-radius:20px;padding:6px 14px;
  font:600 10.5px var(--dm);letter-spacing:.16em;text-transform:uppercase}
.lp-help-tab svg{width:13px;height:13px}

.lp-help-card h2{font-size:clamp(29px,3.1vw,39px);line-height:1.2;margin:0;
  max-width:15ch;font-weight:400}
.lp-help-card h2 em{font-style:italic;color:var(--terra)}
.lp-help-card form{min-width:0}

.lp-help-two{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
.lp-help f,.lp-help-card .fld{min-width:0}
.lp-help-in{width:100%;background:#fff;border:1px solid rgba(42,39,36,.16);border-radius:8px;
  padding:13px 15px;font:400 16px var(--dm);color:var(--ink);min-width:0;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.lp-help-in::placeholder{color:var(--mut2)}
.lp-help-in:focus{outline:none;border-color:var(--terra);
  box-shadow:0 0 0 4px rgba(182,92,56,.13)}

/* The message box: one line at rest, most of the screen once touched. */
.lp-help-msg{display:block;width:100%;resize:none;overflow:hidden;line-height:1.5;
  height:46px;transition:height .32s cubic-bezier(.22,.61,.36,1)}
/* Plain lengths rather than min(): the height here is transitioned, and a
   dropped declaration silently leaves the box at its collapsed size, which is
   exactly the bug this is avoiding. */
.lp-help-card.is-open .lp-help-msg{height:340px;overflow:auto}
@media (max-height:720px){.lp-help-card.is-open .lp-help-msg{height:250px}}
@media (max-height:580px){.lp-help-card.is-open .lp-help-msg{height:170px}}
/* The label is redundant while the box still shows its placeholder, and
   becomes the only thing naming the field once somebody starts typing. So it
   appears with the box rather than taking a line before anyone has engaged. */
.lp-help-lab{display:none;font:600 11px var(--dm);letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);margin:2px 0 7px}
.lp-help-card.is-open .lp-help-lab,.lp-help-card.has-text .lp-help-lab{display:block}

.lp-help-go{width:100%;margin-top:10px;min-height:52px;border-radius:8px;
  background:var(--terra);border:1px solid var(--terra);color:#fff;
  font:600 12px var(--dm);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  transition:transform .14s ease,background .18s ease,box-shadow .18s ease}
.lp-help-go:hover{background:var(--terra-deep);border-color:var(--terra-deep);
  box-shadow:0 8px 20px rgba(150,67,31,.22)}
.lp-help-go:active{transform:translateY(1px)}
.lp-help-go[disabled]{opacity:.65;cursor:default;transform:none;box-shadow:none}
.lp-help-fine{text-align:center;font-size:11.5px;letter-spacing:.02em;color:var(--mut2);margin:9px 0 0}
.lp-help-err{font-size:13.5px;color:var(--terra-deep);margin:10px 0 0;text-align:center}

/* Reply state, in place of the card. */
.lp-help-done{grid-column:1/-1;text-align:center;padding:14px 4px}
.lp-help-done .seal{width:54px;height:54px;border-radius:50%;background:rgba(168,176,150,.24);
  color:var(--sage-deep);display:flex;align-items:center;justify-content:center;
  font-size:26px;margin:0 auto 16px}
.lp-help-done h3{font-size:23px;margin:0 0 10px}
.lp-help-done p{font-size:15.5px;color:var(--mut);line-height:1.6;margin:0}

@media (max-width:780px){
  .lp-help{padding:64px 0 74px}
  .lp-help-card{max-width:620px;grid-template-columns:1fr;gap:22px;
    padding:38px 28px 32px;box-shadow:10px 10px 0 rgba(168,176,150,.22)}
  .lp-help-card h2{font-size:clamp(27px,7.5vw,34px);max-width:24ch}
}
@media (max-width:360px){
  .lp-help-two{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .lp-help-msg,.lp-help-go{transition:none}
}

/* ================= OWNER WORDS · homepage testimonials =================
   Deliberately not a card grid. This is a $1,997 advisory purchase read by
   one owner at a time, so the proof is set like a client list in a
   consultancy's document: the argument stays on the left, the owners speak
   down the right, separated by hairlines rather than boxes. */
.ownerwords{background:var(--cream);border-top:1px solid var(--line2);position:relative;overflow:hidden}
.ownerwords::before{content:"\201D";position:absolute;top:-58px;right:26px;
  font-family:var(--pd);font-size:300px;line-height:1;color:rgba(182,92,56,.055);
  pointer-events:none;user-select:none}
.ow-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(34px,6vw,78px);align-items:start}
.ow-intro h2{font-size:clamp(30px,3.6vw,44px);line-height:1.12;margin-bottom:18px}
.ow-intro .lede{margin-bottom:26px}
.ow-cta{padding-top:22px;border-top:1px solid var(--line2)}

.ow-list{display:grid}
.ow-item{position:relative;margin:0;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(16px,2.4vw,28px);padding:28px 0;border-top:1px solid var(--line2);
  transition:transform .4s ease}
.ow-item:first-child{border-top:0;padding-top:0}
.ow-item:last-child{border-bottom:1px solid var(--line2)}
.ow-item:hover{transform:translateX(5px)}
.ow-no{font-family:var(--dm);font-weight:600;font-size:11px;letter-spacing:.2em;
  color:var(--mut2);padding-top:8px;transition:color .4s ease}
.ow-item:hover .ow-no{color:var(--terra)}
.ow-item blockquote{margin:0;font-family:var(--pd);font-style:italic;
  font-size:clamp(19px,2.1vw,23px);line-height:1.5;color:var(--char)}
.ow-by{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;
  gap:8px 14px;margin-top:18px}
.ow-headshot{display:block;width:52px;height:52px;border-radius:50%;object-fit:cover;
  object-position:center 34%;border:3px solid var(--cream);box-shadow:0 0 0 1px var(--line2)}
.ow-id{display:block;min-width:0}
.ow-name{display:block;font-family:var(--dm);font-weight:600;font-size:13px;letter-spacing:.05em;color:var(--ink)}
.ow-where{display:block;margin-top:4px;font-family:var(--dm);font-size:13px;color:var(--mut)}
.ow-tag{margin-left:auto;font-family:var(--dm);font-weight:600;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--terra-deep);
  border:1px solid rgba(150,67,31,.28);border-radius:999px;padding:5px 12px;white-space:nowrap}
.ow-note{margin-top:34px;font-family:var(--dm);font-size:13px;line-height:1.65;color:var(--mut)}

@media (max-width:900px){
  .ow-grid{grid-template-columns:1fr;gap:36px}
  .ownerwords::before{font-size:210px;top:-40px;right:12px}
}
@media (max-width:560px){
  .ow-item{grid-template-columns:1fr;gap:10px}
  .ow-no{padding-top:0}
  .ow-by{grid-template-columns:52px minmax(0,1fr)}
  .ow-tag{grid-column:2;margin-left:0;justify-self:start}
}
@media (prefers-reduced-motion:reduce){.ow-item{transition:none}.ow-item:hover{transform:none}}