/* =========================================================
   v4 · warmer, hand-made layer (Sophia's feedback, Oct 2026)
   "less Apple-like": soften black keylines, add hand-drawn marks,
   keep the simplicity. Loaded last, on top of site/v2/v3(/lp/lp2).
   ========================================================= */
:root{
  /* one green only: the brand's vibrant mint (Sophia, Oct 2026) */
  --mint:#00F2A6;--mint-deep:#00F2A6;--mint-soft:#00F2A6;--tint:#00F2A6;
  --marker:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 21c30-3 70-5 118-4 30 1 52 0 76-3l-1 9c-2 3-1 6 1 9-40 3-82 4-124 3-24 0-46 1-69 3 2-3 1-6-1-8 1-3 1-6 0-9z' fill='%2300F2A6'/%3E%3C/svg%3E");
  --scribble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M2 12c14-4 26 2 40-2s30 3 44-1c5-1 9-2 12-3' fill='none' stroke='%2300F2A6' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .12 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* paper grain: barely there, takes the digital edge off */
body::after{content:"";position:fixed;inset:0;background:var(--grain);opacity:.045;pointer-events:none;z-index:200;mix-blend-mode:multiply}

/* ---------- softer keylines ---------- */
.marquee{border:0!important}
.marquee span::after{width:12px;height:19px}
.marquee.soft{background:var(--mint-soft);color:var(--ink);padding:14px 0}
.marquee.soft span{font-size:clamp(17px,1.8vw,24px);font-weight:400;font-family:var(--hand)}
.marquee.soft span::after{background:var(--mint-deep)}
.btn-ghost{border-color:rgba(35,31,32,.22)}
.btn-ghost:hover{border-color:var(--ink)}
.acc{border-top-color:var(--line)}
.acc summary .pm{border-color:rgba(35,31,32,.25)}
.filters button:hover{border-color:rgba(35,31,32,.4)}
.burger{border-color:rgba(35,31,32,.22)}
.svc{border:0;background:var(--stone)}
.not{border:0;background:#fff;border-radius:22px 26px 20px 24px}
.not:hover{transform:translateY(-4px) rotate(-.4deg)}
.sstep{border-top:0}

/* buttons: a little bounce, not a slide */
.btn:hover{transform:translateY(-2px) rotate(-.6deg)}
.btn:active{transform:translateY(0) rotate(0)}
.head-cta .dot-free{font:400 15px/1 var(--hand);background:#fff;color:var(--ink);border-radius:999px;padding:4px 8px 3px;margin-left:2px;transform:rotate(-4deg);display:inline-block}

/* ---------- hand-drawn marks ---------- */
/* marker highlight instead of a ruler-straight bar */
.v2-hero h1 em,.phero .hl,.testi mark{background:var(--marker) 0 80%/100% 62% no-repeat;color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.v4-hero h1 em{background-size:0% 62%;animation:marker 1.1s var(--ease) .9s forwards}
@keyframes marker{to{background-size:100% 62%}}
.split-words em{background-image:var(--marker)!important;background-position:0 85%!important}
.split-words.go em{background-size:100% 62%!important}
.testi mark{padding:0 .1em;background-position:0 90%;background-size:100% 46%}

/* scribbled-out words in the "it's not this" cards */
s{text-decoration:none;position:relative;white-space:nowrap}
s::after{content:"";position:absolute;left:-6%;right:-6%;top:50%;height:.6em;transform:translateY(-45%) rotate(-3deg);background:var(--scribble) center/100% 100% no-repeat;pointer-events:none}

/* squiggle underline */
.u-hand{position:relative;display:inline-block;white-space:nowrap}
.u-hand .squiggle{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.26em;color:var(--mint-deep);overflow:visible}
.bg-ink .u-hand .squiggle{color:var(--mint)}
.squiggle path,.loop path,.harrow path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease) .35s}
.drawn path{stroke-dashoffset:0}


/* tilted photos, a little like prints on a table */
.tilt-l{transform:rotate(-2.2deg)}
.tilt-r{transform:rotate(2deg)}
.voice .ph.tilt-l,.voice .ph.tilt-r{box-shadow:0 30px 60px -30px rgba(35,31,32,.45)}

/* ---------- home ---------- */
.v4-hero .portrait .tag{transform:rotate(-3deg);right:-8px}
.v4-hero .portrait .tag span{font-size:26px}
.guide-sticker{position:absolute;left:4%;top:3%;width:96px;height:96px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-content:center;text-align:center;font:400 17px/1.05 var(--hand);text-decoration:none;transform:rotate(-12deg);z-index:3;transition:transform .4s var(--ease)}
.guide-sticker b{font:700 13px/1 var(--body);letter-spacing:.14em;color:var(--mint);display:block;margin-bottom:3px}
.guide-sticker:hover{transform:rotate(0) scale(1.06)}

.an-arrow{color:var(--mint-deep)}
.an-arrow .harrow{width:90px;height:60px}
.an-result{text-align:center}
.an-result .eq{justify-content:center}
.an-note{font-size:clamp(20px,2vw,26px);color:var(--mint-deep);margin-top:16px;display:inline-block;transform:rotate(-1.5deg)}

.v4-nots .not p{font-size:clamp(19px,1.7vw,23px)}
.is-card .hand{font-size:1.35em;color:var(--mint);margin-right:.15em}
.is-card p{font-size:clamp(18px,1.6vw,22px);margin:0;max-width:760px}

.soft-price{font-size:14.5px;color:var(--muted);font-weight:400}
.offer.feature .soft-price{color:rgba(255,255,255,.7)}
.offers.two{grid-template-columns:1fr 1fr;margin-top:18px}

.steps4{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.steps4 .st .art{border-radius:24px;overflow:hidden;background:#fff;aspect-ratio:4/5;margin-bottom:22px;transition:transform .6s var(--ease)}
.steps4 .st:nth-child(1) .art{transform:rotate(-1.5deg)}
.steps4 .st:nth-child(3) .art{transform:rotate(1.5deg)}
.steps4 .st:hover .art{transform:rotate(0) translateY(-6px)}
.steps4 .art img{width:100%;height:100%;object-fit:cover}
.steps4 .n{font:700 12.5px/1 var(--body);letter-spacing:.16em;color:var(--mint)}
.steps4 h3{font-size:clamp(28px,2.6vw,38px);margin:12px 0 2px;color:#fff}
.steps4 .hand{font-size:24px;color:var(--mint);display:block;margin-bottom:10px}
.steps4 p{margin:0;color:rgba(255,255,255,.72);max-width:340px}

.eisai{position:relative;overflow:hidden;background:#fff}
.eisai-art{width:min(820px,92%);margin:0 auto;display:block}
.align-shine{max-width:380px;margin:46px auto 0}
.align-shine img{width:100%}

.testis{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;margin-top:48px;align-items:start}
.testi{margin:0;background:#fff;border-radius:28px 32px 26px 30px;padding:clamp(28px,4vw,48px);position:relative}
.testi.tilt{transform:rotate(1.4deg);margin-top:40px}
.testi .qmark{font:700 110px/.6 var(--display);color:var(--mint);display:block;height:46px}
.testi blockquote{margin:0;font:400 clamp(18px,1.6vw,22px)/1.5 var(--body);color:var(--ink)}
.testi.tilt blockquote{font:700 clamp(22px,2.1vw,30px)/1.25 var(--display);letter-spacing:-.015em}
.testi figcaption{margin-top:24px;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.testi figcaption b{display:block;color:var(--ink);font-size:16px}
.testi figcaption .hand{font-size:26px;color:var(--mint-deep)}
.testi .av{width:48px;height:48px;border-radius:50%;background:var(--mint);display:grid;place-items:center;font:700 20px/1 var(--display);color:var(--ink)}

.clues-head{margin-bottom:40px}
.clues-head .lead{margin-top:18px}

/* ---------- inner pages ---------- */
.v4-phero .kicker{margin-bottom:6px}
.her-art{position:relative;border-radius:28px;overflow:visible}
.her-art img{width:100%;display:block;border-radius:28px;box-shadow:0 30px 60px -36px rgba(35,31,32,.4)}
.her-art.small{max-width:360px;margin-top:34px;transform:rotate(-1.5deg)}
.voice .sign{font-size:34px;color:var(--mint);display:block;margin-top:18px}
.self-title{font-size:clamp(64px,11vw,170px)!important;letter-spacing:-.02em}

.self4{display:grid;grid-template-columns:260px 1fr .8fr;gap:clamp(20px,3vw,44px);margin-top:48px;align-items:start}
.self4-letters{display:grid;gap:10px}
.self4-letters button{all:unset;cursor:pointer;display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:18px;background:#fff;font:700 16px/1.1 var(--body);transition:background .3s,transform .4s var(--ease)}
.self4-letters button span{font:700 44px/1 var(--display);color:var(--mint-deep);width:40px}
.self4-letters button:hover{transform:translateX(6px)}
.self4-letters button[aria-pressed=true]{background:var(--mint)}
.self4-letters button[aria-pressed=true] span{color:var(--ink)}
.self4-letters button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.self4-panels{background:#fff;border-radius:28px;padding:clamp(26px,3.5vw,44px);min-height:280px}
.self4-panels .hand{font-size:26px;color:var(--mint-deep);display:block}
.self4-panels h3{font-size:clamp(30px,3vw,44px);margin:6px 0 16px}
.self4-panels p{margin:0 0 12px;font-size:18px;color:var(--ink-2)}
.self4-panels .small{font-size:14px;color:var(--muted);margin-top:18px}
.self4-art>img{width:100%;border-radius:22px;transform:rotate(1.5deg)}
.self-io{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:center;margin-top:clamp(56px,7vw,90px)}
.self-io .eq{font-size:clamp(20px,2.4vw,32px)}
[data-panel]{display:none;animation:fadeup .5s var(--ease)}
[data-panel].on{display:block}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* compare (interactive) */
.cmp-ask{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 26px}
.cmp-ask button{border:0;background:#fff;border-radius:999px;padding:11px 16px;font:400 15px/1 var(--body);cursor:pointer;transition:background .25s,transform .3s var(--ease)}
.cmp-ask button:hover{transform:translateY(-2px)}
.cmp-ask button[aria-pressed=true]{background:var(--ink);color:#fff}
.cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.cmp-col{background:#fff;border-radius:26px;padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:16px;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .4s,background .3s}
.cmp-col.star{background:var(--ink);color:#fff}
.cmp-h .tag{font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:var(--stone);color:var(--ink);display:inline-block}
.cmp-col.star .cmp-h .tag{background:var(--mint)}
.cmp-h h3{font-size:clamp(24px,2.2vw,30px);margin:14px 0 6px}
.cmp-col.star .soft-price{color:rgba(255,255,255,.7)}
.cmp dl{margin:0;display:grid;gap:4px}
.cmp dt{font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.cmp-col.star dt{color:var(--mint)}
.cmp dd{margin:4px 0 0;font-size:15.5px}
.cmp-col .btn{margin-top:auto;align-self:flex-start}
.cmp-col.star .btn{--bg:var(--mint);--fg:var(--ink)}
.cmp.has-pick .cmp-col{opacity:.45}
.cmp.has-pick .cmp-col.pick{opacity:1;transform:translateY(-10px) rotate(-.6deg);box-shadow:0 34px 60px -30px rgba(35,31,32,.45)}
.cmp.has-pick .cmp-col.pick:not(.star){background:var(--mint)}
.cmp-note{font-size:clamp(20px,2vw,26px);color:var(--mint-deep);margin-top:26px;text-align:right;transform:rotate(-1.5deg)}

/* "This is me" outcome */
.thisisme{margin-top:30px;padding:22px 26px;border-radius:22px;background:var(--mint-soft);max-width:520px;transform:rotate(-1deg)}
.thisisme .hand{font-size:clamp(34px,3.4vw,48px);line-height:1;display:block;color:var(--ink)}
.thisisme p{margin:8px 0 0;font-size:16px}
.thisisme.center{margin:36px auto 0;text-align:center}
.bg-ink .thisisme{background:rgba(0,242,166,.12)}
.bg-ink .thisisme .hand{color:var(--mint)}

@media (max-width:980px){
  .steps4,.testis,.cmp,.self4,.self-io,.offers.two{grid-template-columns:1fr}
  .testi.tilt{margin-top:0}
  .hero-loop{width:110px;right:-6px}
  .self4-art{display:none}
  .cmp-note{text-align:left}
}
@media (max-width:560px){
  .guide-sticker{width:80px;height:80px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .v4-hero h1 em{animation:none;background-size:100% 62%}
  .squiggle path,.loop path,.harrow path{stroke-dashoffset:0;transition:none}
}

/* fixes */
.svc{text-decoration:none;color:inherit}
.bg-ink .t3:not(.mt):not(.dk){background:rgba(255,255,255,.07);color:#fff}
.bg-ink .t3:not(.mt):not(.dk) p{color:rgba(255,255,255,.7)}
.bg-ink .t3:not(.mt):not(.dk) .tm{color:var(--mint)}
.stats>div{border-right-color:rgba(35,31,32,.08)}
.steps3 .st{border-top:0}
.cap-ctrl button,.bk-ctrl button{border-color:rgba(35,31,32,.22)}
.bk{font-family:var(--hand);font-weight:400;font-size:clamp(20px,1.9vw,26px);color:var(--mint-deep);letter-spacing:0}
.bg-ink .bk{color:var(--mint)}

/* home hero: v1's composition (Sophia liked it), warmed up */
.v1-art{width:100%;max-width:560px;justify-self:end}
.v1-art .photo{border-radius:30px 34px 28px 32px}
.v1-art .glass{filter:none;width:20%;left:auto;right:-7%;bottom:10%}
.v1-art .note{z-index:3}
.v1-art .guide-sticker{left:auto;right:-3%;top:auto;bottom:24%}
@media (max-width:980px){.v1-art{justify-self:center;max-width:440px;margin:10px auto 0}}

/* with one green, unselected states use stone so "selected" still reads */
.im-orbit [data-pick]{background:var(--stone)}
.im-orbit [data-pick][aria-pressed=true]{background:var(--mint)}
.thisisme .hand{color:var(--ink)}

/* ---------- Instagram carousel (every page): drag, swipe, scroll, arrows ---------- */
.ig-band{background:var(--stone);padding:clamp(56px,7vw,90px) 0 clamp(40px,5vw,60px);overflow:hidden}
.ig-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.ig-hi{font-size:clamp(22px,2.2vw,30px);color:var(--mint);display:block;margin-bottom:6px}
.ig-ctrl{display:flex;gap:8px;align-items:center}
.ig-ctrl button{width:46px;height:46px;border-radius:50%;border:0;background:#fff;font:700 18px/1 var(--body);cursor:pointer;transition:background .25s,transform .3s var(--ease)}
.ig-ctrl button:hover{background:var(--mint);transform:translateY(-2px)}
.ig-track{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:6px max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 10px;cursor:grab;user-select:none;-webkit-user-select:none}
.ig-track::-webkit-scrollbar{display:none}
.ig-track.dragging{cursor:grabbing;scroll-snap-type:none}
.ig-track.dragging a{pointer-events:none}
.ig-item{flex:0 0 clamp(170px,18vw,260px);aspect-ratio:4/5;border-radius:16px;overflow:hidden;position:relative;background:#fff;scroll-snap-align:start;display:block}
.ig-item.reel{flex-basis:clamp(190px,20vw,290px);aspect-ratio:9/16;align-self:center}
.ig-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ig-item:hover img{transform:scale(1.05)}
.ig-item .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--mint);color:var(--ink);display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.4);transition:transform .4s var(--ease)}
.ig-item .play svg{width:26px;height:26px;margin-left:3px}
.ig-item:hover .play{transform:scale(1.12)}
.ig-item .cap{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(255,255,255,.92);border-radius:10px;padding:8px 10px;font:700 12.5px/1.25 var(--body)}
.ig-item.reel::before{content:"Reel";position:absolute;top:10px;left:10px;z-index:1;background:var(--ink);color:#fff;font:700 10.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:6px 8px;border-radius:999px}
.ig-prog{height:3px;background:rgba(35,31,32,.1);border-radius:3px;margin-top:22px;overflow:hidden}
.ig-prog i{display:block;height:100%;width:20%;background:var(--ink);border-radius:3px;transform-origin:left;transition:width .15s linear}
.ig-live:empty{display:none}
.ig-live:not(:empty)~.ig-track,.ig-live:not(:empty)~.wrap .ig-prog{display:none}
.reel-modal{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:20px}
.reel-modal.open{display:grid}
.reel-modal .scrim{position:absolute;inset:0;background:rgba(20,18,18,.86)}
.reel-box{position:relative;width:min(420px,100%);display:flex;flex-direction:column;gap:12px;align-items:center}
.reel-box iframe{width:100%;height:min(80vh,740px);border:0;border-radius:18px;background:#fff}
.reel-box .x{position:absolute;top:-14px;right:-14px;width:44px;height:44px;border-radius:50%;border:0;background:var(--mint);font-size:16px;cursor:pointer;z-index:2}
.reel-open{color:#fff;font-size:14px}

/* language toggle, top right */
.lang-toggle{display:inline-flex;align-items:center;gap:2px;margin-left:12px;padding:3px;border-radius:999px;background:var(--stone);text-decoration:none;font:700 12px/1 var(--body);letter-spacing:.08em;flex:none;transition:transform .3s var(--ease)}
.lang-toggle span{padding:7px 9px;border-radius:999px;color:var(--muted);transition:background .25s,color .25s}
html[lang=el] .lang-toggle [data-l=el],html[lang=en] .lang-toggle [data-l=en]{background:var(--ink);color:#fff}
.lang-toggle:hover{transform:translateY(-1px)}
.lang-toggle:hover span:not([data-l]){color:var(--ink)}
html[lang=el] .lang-toggle:hover [data-l=en],html[lang=en] .lang-toggle:hover [data-l=el]{color:var(--ink)}
.mm-lang{font:700 15px/1 var(--body)!important;margin-top:10px;text-decoration:underline;text-decoration-color:var(--mint);text-underline-offset:5px}

/* S.E.L.F.: pinned while you scroll through the four letters (desktop) */
.self4-letters button{position:relative;overflow:hidden}
.self4-letters button::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:calc(var(--fill,0) * 100%);background:var(--ink);opacity:.25}
.self4-prog{display:none}
@media (min-width:981px){
  .self-scroll{height:280vh;position:relative}
  .self-sticky{position:sticky;top:84px;min-height:calc(100vh - 100px);display:flex;flex-direction:column;justify-content:center;padding-bottom:20px}
  .self-sticky .self4{margin-top:32px}
  .self-sticky .self4-panels{min-height:300px}
  .self-sticky .self4-art>img{max-height:46vh;width:auto;max-width:100%}
  .self4-prog{display:flex;align-items:center;gap:16px;margin-top:26px}
  .self4-prog i{flex:0 0 220px;height:3px;border-radius:3px;background:rgba(35,31,32,.12);position:relative;overflow:hidden}
  .self4-prog i::after{content:"";position:absolute;inset:0;width:calc(var(--p,0) * 100%);background:var(--mint)}
  .self4-prog .hand{font-size:20px;color:var(--muted);transition:opacity .4s}
  .self4-prog{transition:opacity .5s ease,transform .5s ease}
  .self-scroll.done .self4-prog{opacity:0;transform:translateY(8px);pointer-events:none}
}

/* top menu: never wrap; tighten on small laptops, then switch to the menu button */
.nav a{white-space:nowrap}
.head-cta{white-space:nowrap;flex:none}
@media (max-width:1360px){
  .head-in{gap:18px}
  .brand img{height:23px}
  .nav{gap:0}
  .nav a{font-size:14.5px;padding:9px 10px}
  .head-cta{margin-left:4px;padding:12px 16px}
  .lang-toggle{margin-left:6px}
}
@media (max-width:1180px){
  .nav,.head-cta{display:none}
  .burger{display:block;margin-left:0}
  .lang-toggle{margin-left:auto;margin-right:8px}
}

/* S.E.L.F. panels: directional in/out, line by line (rewards scrolling) */
.self4-panels{display:grid;overflow:hidden}
.self4-panels [data-panel]{grid-area:1/1;display:block!important;animation:none!important;visibility:hidden;pointer-events:none}
.self4-panels [data-panel].on,.self4-panels [data-panel].out{visibility:visible}
.self4-panels [data-panel].on{pointer-events:auto}
.self4-panels [data-panel]>*{opacity:0;transform:translateY(var(--from,34px)) rotate(var(--tilt,0deg));filter:blur(6px);transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .55s ease,filter .6s ease}
.self4[data-dir=up] .self4-panels [data-panel]>*{--from:-34px}
.self4-panels [data-panel].on>*{opacity:1;transform:none;filter:none}
.self4-panels [data-panel].on>:nth-child(1){transition-delay:.12s;--tilt:-4deg}
.self4-panels [data-panel].on>:nth-child(2){transition-delay:.2s}
.self4-panels [data-panel].on>:nth-child(3){transition-delay:.3s}
.self4-panels [data-panel].on>:nth-child(4){transition-delay:.4s}
.self4-panels [data-panel].out>*{opacity:0;filter:blur(5px);transform:translateY(-26px);transition-duration:.45s,.35s,.4s;transition-delay:0s}
.self4[data-dir=up] .self4-panels [data-panel].out>*{transform:translateY(26px)}
.self4-panels [data-panel] h3{transform-origin:left bottom}
/* the active letter gives a little bounce */
.self4-letters button[aria-pressed=true] span{animation:letterpop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes letterpop{0%{transform:scale(.7) rotate(-8deg)}60%{transform:scale(1.18) rotate(3deg)}100%{transform:none}}
/* her SELF artwork shifts a touch with each step */
.self4-art>img{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.self4[style*="--step"] .self4-art>img{transform:rotate(calc(1.5deg - var(--step) * 1.2deg)) translateY(calc(var(--step) * -6px)) scale(calc(1 + var(--step) * .012))}
@media (prefers-reduced-motion:reduce){
  .self4-panels [data-panel]>*{transform:none!important;filter:none!important;transition:opacity .3s!important}
  .self4-letters button[aria-pressed=true] span{animation:none}
  .self4-art img{transform:none!important}
}

/* home hero: three photos of Sophia, each wiping up over the last with a slow zoom */
.slides{isolation:isolate}
.v1-art .glass{z-index:4}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:none!important;clip-path:inset(100% 0 0 0);transform:scale(1.14);transition:clip-path 1.25s cubic-bezier(.7,0,.2,1),transform 7s cubic-bezier(.2,.6,.3,1)}
.slides img.on{clip-path:inset(0 0 0 0);transform:scale(1);z-index:2}
.slides img.out{clip-path:inset(0 0 0 0);transform:scale(1.04);z-index:1}
.slides::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--mint);z-index:3;transform-origin:left;transform:scaleX(0)}
.slides.tick::after{animation:slidebar var(--dur,5s) linear forwards}
@keyframes slidebar{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .slides img{clip-path:none;transform:none!important;opacity:0;transition:opacity 1s}
  .slides img.on{opacity:1}.slides img.out{opacity:1}
  .slides::after{display:none}
}

/* scroll cue (home hero) */
.v4-hero{position:relative}
.scroll-cue{position:absolute;left:50%;bottom:clamp(14px,3vw,34px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--ink);transition:opacity .5s,transform .5s}
.scroll-cue .hand{font-size:20px;line-height:1}
.sc-line{width:2px;height:46px;border-radius:2px;background:rgba(35,31,32,.15);position:relative;overflow:hidden}
.sc-line i{position:absolute;left:0;top:-40%;width:100%;height:40%;border-radius:2px;background:var(--mint);animation:cue 1.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cue{to{top:100%}}
.scrolled-past .scroll-cue{opacity:0;transform:translate(-50%,10px);pointer-events:none}
@media (max-width:980px){.scroll-cue{display:none}}

/* section dot rail (right edge, every page) */
.dot-rail{position:fixed;right:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;gap:6px;padding:10px 6px;border-radius:999px;transition:opacity .4s}
.dot-rail button{all:unset;cursor:pointer;position:relative;width:18px;height:18px;display:grid;place-items:center}
.dot-rail button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink);opacity:.28;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .3s,background .3s,height .35s}
.dot-rail button:hover::before{opacity:.7;transform:scale(1.3)}
.dot-rail button[aria-current=true]::before{opacity:1;background:var(--mint);height:18px;border-radius:999px;box-shadow:0 0 0 2px rgba(35,31,32,.85)}
.dot-rail.dark button::before{background:#fff}
.dot-rail.dark button[aria-current=true]::before{background:var(--mint);box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.dot-rail button span{position:absolute;right:26px;top:50%;transform:translate(6px,-50%);white-space:nowrap;background:var(--ink);color:#fff;font:700 12.5px/1 var(--body);padding:8px 11px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.dot-rail button:hover span,.dot-rail button:focus-visible span{opacity:1;transform:translate(0,-50%)}
.dot-rail button:focus-visible::before{outline:2px solid var(--mint);outline-offset:3px}
.menu-open .dot-rail,.quiz-open .dot-rail{opacity:0;pointer-events:none}
@media (max-width:980px){.dot-rail{display:none}}
main>section{scroll-margin-top:84px}

/* home journey header: her equation */
.journey-eq .jeq{font:400 clamp(19px,1.8vw,24px)/1.5 var(--body);color:#fff;margin:0 0 14px}
.journey-eq .jeq b{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.journey-eq .jeq i{font-style:normal;font-family:var(--hand);color:var(--mint);font-size:1.05em}
.journey-eq .jeq .op{color:var(--mint);font-weight:700;margin:0 .2em}
.journey-eq .jeq .res{background:var(--mint);color:var(--ink);padding:.05em .3em;border-radius:8px}
.journey-eq .lead{margin:0;color:rgba(255,255,255,.8)}
.journey-eq .arrow{color:var(--mint);font-weight:700;margin-right:.3em}
.nobr{white-space:nowrap}
.journey-h{font-size:clamp(38px,4.6vw,68px)}

/* journey section: CTAs as a clear finish */
.journey-cta{position:relative;margin-top:clamp(56px,7vw,90px);padding-top:clamp(40px,5vw,56px);border-top:1px solid rgba(255,255,255,.14);text-align:center}
.journey-cta .hand{font-size:clamp(26px,2.6vw,36px);color:var(--mint);margin:0 0 22px;transform:rotate(-1.5deg)}
.journey-cta .btn-row{justify-content:center}
.journey-cta .btn-lg{font-size:16px;padding:19px 30px}
.journey-cta .btn-mint{box-shadow:0 14px 40px -12px rgba(0,242,166,.55)}
.jc-arrow{position:absolute;left:calc(50% - 300px);top:calc(clamp(40px,5vw,56px) + 34px);width:80px;color:var(--mint);transform:scaleY(.9) rotate(6deg)}
.jc-arrow .harrow{width:80px;height:54px}
@media (max-width:760px){.jc-arrow{display:none}}

/* "Like a brand" section, trimmed: shorter, one way through to the method */
.an-sec{padding:clamp(64px,8vw,110px) 0 clamp(80px,9vw,120px)}
.an-sec .analogy{margin-top:40px}
.an-sec .an-card{min-height:0;gap:14px}
.an-sec .an-card .mark{height:84px}
.an-more{text-align:center;margin:30px 0 0}

/* statement + her favourite photo */
.stmt-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(32px,5vw,80px);align-items:center}
.stmt-grid .statement{margin:0}
.stmt-photo{margin:0;position:relative;transform:rotate(2.2deg)}
.stmt-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:26px;box-shadow:0 34px 70px -34px rgba(35,31,32,.5);display:block}
.stmt-photo figcaption{position:absolute;left:14px;bottom:18px;background:#fff;border-radius:14px;padding:8px 14px;font-size:22px;line-height:1;transform:rotate(-5deg);box-shadow:var(--shadow)}
@media (max-width:980px){.stmt-grid{grid-template-columns:1fr}.stmt-photo{max-width:380px;margin:0 auto}}

/* home "it's not… it's" section without blocks: text, scribbles, a hand arrow */
.nots-flow .nots{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:clamp(40px,5vw,64px)}
.nots-flow .not{background:none;border:0;border-radius:0;padding:0;display:flex;align-items:baseline;gap:12px}
.nots-flow .not:hover{transform:none}
.nots-flow .not::before{content:"✕";font:400 22px/1 var(--hand);color:var(--mint);flex:none}
.nots-flow .not p{font-size:clamp(20px,1.9vw,26px)!important;color:var(--ink-2)}
.nots-flow .is-card{background:none;color:var(--ink);padding:0;border-radius:0;margin-top:clamp(36px,4vw,54px);display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;gap:16px}
.nots-flow .is-card p{font:700 clamp(24px,2.4vw,34px)/1.25 var(--display);letter-spacing:-.015em;max-width:900px}
.nots-flow .is-card .hand{color:var(--ink);background:var(--marker) 0 85%/100% 55% no-repeat;padding:0 .12em;font-size:1.25em}
.nots-flow .is-arrow{flex:none;width:72px;color:var(--mint);margin-top:-6px;transform:rotate(-18deg)}
.nots-flow .is-arrow .harrow{width:72px;height:48px}
@media (max-width:760px){.nots-flow .is-arrow{display:none}}

/* "one of a kind" fingerprint beside the uniqueness statement */
.stmt-art{margin:0;transform:rotate(-3deg)}
.stmt-art img{width:100%;max-width:420px;display:block;margin:0 auto}
/* "why I do it": her floor photo with her motto */
.floor-ph{position:relative;overflow:visible!important}
.floor-ph img{border-radius:var(--r-lg)}
.floor-ph .ph-note{position:absolute;left:14px;bottom:18px;background:#fff;border-radius:14px;padding:8px 14px;font-size:22px;line-height:1;transform:rotate(-5deg);box-shadow:var(--shadow);z-index:2}

/* Human Identity Design wheel, slowly spinning (her "μαργαριτούλες") */
.hid-wheel{--w:min(520px,100%);width:var(--w);aspect-ratio:1;position:relative;margin:0 auto;container-type:inline-size}
.hid-wheel .ring{position:absolute;inset:0;animation:hidspin 70s linear infinite}
.hid-wheel .petal{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;margin:-15% 0 0 -15%;border-radius:50%;background:var(--mint);display:grid;place-items:center;text-align:center;transform:rotate(var(--a)) translateY(-117%) rotate(calc(var(--a) * -1))}
.hid-wheel .petal.soft{background:rgba(0,242,166,.42)}
.hid-wheel .petal span{font:700 clamp(9px,2.6cqw,14px)/1.15 var(--body);letter-spacing:.04em;color:var(--ink);animation:hidspin 70s linear infinite reverse}
.hid-wheel .core{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:700 clamp(22px,7.2cqw,40px)/1.02 var(--display);letter-spacing:-.02em;color:var(--ink)}
.hid-wheel:hover .ring,.hid-wheel:hover .petal span{animation-play-state:paused}
@keyframes hidspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hid-wheel .ring,.hid-wheel .petal span{animation:none}}

/* home: Είσαι & Φαίνεσαι as a bold mint band, with other women */
.eisai2{overflow:hidden;padding-bottom:clamp(70px,8vw,110px)}
.eisai-write{width:min(940px,94%);margin:0 auto;clip-path:inset(0 100% 0 0);transition:clip-path 2.2s cubic-bezier(.55,.1,.25,1) .2s}
.eisai-write.in,.eisai-write.drawn{clip-path:inset(0 0 0 0)}
.eisai-write img{width:100%;display:block}
.eisai-lead{color:var(--ink);margin:26px auto 0;font-weight:400}
.wcards{display:flex;justify-content:center;gap:clamp(10px,1.4vw,22px);margin:clamp(40px,5vw,64px) auto 0;padding:0 var(--gut);max-width:1500px}
.wcard{margin:0;flex:1 1 0;max-width:230px;position:relative;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.wcard:nth-child(odd){transform:rotate(-2.4deg) translateY(10px)}
.wcard:nth-child(even){transform:rotate(2deg) translateY(-6px)}
.wcard:hover{transform:rotate(0) translateY(-12px) scale(1.04);z-index:2}
.wcard img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;display:block;box-shadow:0 26px 50px -26px rgba(35,31,32,.55);border:6px solid #fff}
.wcard figcaption{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%) rotate(-4deg);background:#fff;color:var(--ink);border-radius:12px;padding:6px 12px;font-size:clamp(18px,1.6vw,24px);line-height:1;white-space:nowrap;box-shadow:var(--shadow)}
.eisai-sign{font-size:clamp(26px,2.6vw,38px);color:var(--ink);margin:clamp(46px,5vw,64px) 0 0;transform:rotate(-1.5deg)}
@media (max-width:980px){.wcards{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding-bottom:22px}.wcards::-webkit-scrollbar{display:none}.wcard{flex:0 0 46vw;max-width:none}}
@media (prefers-reduced-motion:reduce){.eisai-write{clip-path:none;transition:none}}

/* service + ad pages: drifting strip of women */
.women-band{padding:clamp(56px,7vw,90px) 0;background:#fff;overflow:hidden}
.wb2-head{margin-bottom:34px}
.wb2-head h3{font-size:clamp(26px,2.8vw,40px)}
.wb2-track{display:flex;width:max-content;animation:wbdrift 60s linear infinite}
.women-band:hover .wb2-track{animation-play-state:paused}
.wb2-row{display:flex;gap:18px;padding-right:18px}
.wb2-row figure{margin:0;width:clamp(170px,17vw,240px);position:relative}
.wb2-row figure:nth-child(odd){transform:rotate(-2deg)}
.wb2-row figure:nth-child(even){transform:rotate(1.6deg) translateY(10px)}
.wb2-row img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;display:block;border:5px solid #fff;box-shadow:0 20px 40px -24px rgba(35,31,32,.5)}
.wb2-row figcaption{position:absolute;left:12px;bottom:-12px;background:var(--mint);color:var(--ink);border-radius:10px;padding:5px 11px;font-size:20px;line-height:1;transform:rotate(-4deg)}
@keyframes wbdrift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.wb2-track{animation:none}}

/* Είσαι & Φαίνεσαι: tall section, women drift in parallax, words pinned on top */
.eisai3{position:relative;overflow:clip;min-height:185vh}
.eisai3 .mosaic{position:absolute;inset:0;pointer-events:none}
.mz{position:absolute;margin:0;width:var(--w);transform:translate3d(0,var(--py,0px),0) rotate(var(--r));will-change:transform}
.mz img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:20px;border:7px solid #fff;box-shadow:0 40px 80px -40px rgba(35,31,32,.6)}
.mz figcaption{position:absolute;left:16px;bottom:-14px;background:#fff;color:var(--ink);border-radius:12px;padding:6px 12px;font-size:clamp(18px,1.6vw,24px);line-height:1;transform:rotate(-4deg);box-shadow:var(--shadow)}
.eisai3-text{position:relative;z-index:2;height:185vh}
.e3-inner{position:sticky;top:calc(50vh - 190px);width:min(760px,88vw);margin:0 auto;text-align:center;padding:40px 30px}
.e3-inner::before{content:"";position:absolute;inset:-8% -5%;z-index:-1;background:radial-gradient(closest-side,var(--mint) 62%,rgba(0,242,166,0) 100%)}
.eisai3 .eisai-write{width:100%}
.eisai3 .eisai-lead{margin:22px auto 0;color:var(--ink);font-weight:400}
.eisai3 .eisai-sign{font-size:clamp(26px,2.6vw,38px);color:var(--ink);margin:26px 0 0;transform:rotate(-1.5deg)}
@media (max-width:980px){
  .eisai3,.eisai3-text{min-height:0;height:auto}
  .eisai3{padding:70px 0 40px}
  .e3-inner{position:relative;top:0}
  .eisai3 .mosaic{position:relative;inset:auto;display:flex;gap:12px;overflow-x:auto;padding:30px var(--gut) 26px;pointer-events:auto;order:2;scrollbar-width:none}
  .eisai3{display:flex;flex-direction:column}
  .eisai3 .mosaic::-webkit-scrollbar{display:none}
  .mz{position:relative;left:auto!important;right:auto!important;top:auto!important;flex:0 0 44vw;width:auto;transform:rotate(var(--r))}
}
@media (prefers-reduced-motion:reduce){.mz{transform:rotate(var(--r))!important}}

/* Είσαι & Φαίνεσαι: photos fill the background in drifting columns, footer-style type on top */
.eisai4{position:relative;overflow:clip;min-height:150vh;background:var(--ink);color:#fff}
.m4{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.m4-col{display:flex;flex-direction:column;gap:8px;margin-top:-50vh;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.m4-col img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:6px}
.m4-shade{position:absolute;inset:0;background:linear-gradient(rgba(35,31,32,.38),rgba(35,31,32,.38)),radial-gradient(ellipse 55% 40% at 50% 50%,rgba(35,31,32,.72),rgba(35,31,32,0) 100%);pointer-events:none}
.m4-shade{position:sticky;inset:auto;top:0;left:0;right:0;width:100%;height:100vh;margin-bottom:-100vh;z-index:1}
@media (max-width:980px){.m4-shade{position:absolute;inset:0;height:auto;margin:0}}
.eisai4 .eisai3-text{position:relative;z-index:2;height:150vh}
.eisai4 .e3-inner{position:sticky;top:calc(50vh - 170px);width:min(1100px,92vw);margin:0 auto;text-align:center;padding:20px}
.eisai4 .e3-inner::before{display:none}
.eisai-big{font:700 clamp(54px,9.5vw,150px)/.9 var(--display);letter-spacing:-.045em;color:#fff;display:flex;align-items:center;justify-content:center;gap:.14em;flex-wrap:wrap;margin:0;text-shadow:0 10px 40px rgba(0,0,0,.35)}
.eisai-big .hg{width:.42em;height:.62em;background:var(--mint);clip-path:polygon(0 0,100% 0,50% 50%,100% 100%,0 100%,50% 50%);display:inline-block;flex:none}
.eisai4 .eisai-lead{color:#fff;margin:28px auto 0;font-weight:400;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.eisai4 .eisai-sign{text-shadow:0 2px 16px rgba(0,0,0,.7);color:var(--mint);font-size:clamp(26px,2.6vw,38px);margin:24px 0 0;transform:rotate(-1.5deg)}
@media (max-width:980px){
  .eisai4{min-height:0;padding:0}
  .m4{grid-template-columns:repeat(3,1fr)}
  .m4-col:nth-child(n+4){display:none}
  .m4-col{margin-top:-10vh}
  .eisai4 .eisai3-text{height:auto;padding:28vh 0}
  .eisai4 .e3-inner{position:relative;top:0}
}

/* looser collage: overlapping, slightly rotated prints; words stop before the next section */
.eisai4{isolation:isolate;z-index:0}
.m4{gap:0;grid-template-columns:1.05fr .9fr 1fr .92fr 1.08fr;padding:0 1vw}
.m4-col{gap:0;margin-top:-40vh}
.m4-col:nth-child(2){margin-top:-34vh}
.m4-col:nth-child(4){margin-top:-46vh}
.m4-col img{width:112%;margin:0 -6% -9%;border-radius:10px;border:0;box-shadow:0 18px 40px -18px rgba(0,0,0,.65);position:relative}
.m4-col img:nth-child(4n+1){transform:rotate(-2deg) translateX(-4%);width:118%}
.m4-col img:nth-child(4n+2){transform:rotate(1.6deg) translateX(5%);width:104%;margin-left:2%}
.m4-col img:nth-child(4n+3){transform:rotate(-.8deg) translateX(2%);z-index:1}
.m4-col img:nth-child(4n){transform:rotate(2.4deg) translateX(-3%);width:110%}
.m4-col:nth-child(even) img:nth-child(odd){z-index:2}
.eisai4 .e3-inner{margin-bottom:16vh}
@media (max-width:980px){.m4-col,.m4-col:nth-child(2),.m4-col:nth-child(4){margin-top:-12vh}.eisai4 .e3-inner{margin-bottom:0}}

/* ===== method page rethink ===== */
/* interactive wheel: tap a pillar */
.hid-block{display:flex;flex-direction:column;align-items:center;gap:18px}
.hid-wheel button.petal{border:0;padding:0;cursor:pointer;font:inherit;transition:transform .5s cubic-bezier(.3,1.5,.5,1),box-shadow .3s,opacity .3s,background .3s}
.hid-wheel button.petal:hover,.hid-wheel button.petal:focus-visible{transform:rotate(var(--a)) translateY(-117%) rotate(calc(var(--a) * -1)) scale(1.08);outline:none}
.hid-wheel button.petal[aria-pressed=true]{background:var(--ink);transform:rotate(var(--a)) translateY(-117%) rotate(calc(var(--a) * -1)) scale(1.12);box-shadow:0 18px 40px -16px rgba(35,31,32,.6)}
.hid-wheel button.petal[aria-pressed=true] span{color:var(--mint)}
.hid-wheel.picked button.petal:not([aria-pressed=true]){opacity:.55}
.hid-wheel.picked .ring,.hid-wheel.picked .petal span{animation-play-state:paused}
.hid-cap{min-height:58px;max-width:420px;text-align:center;margin:0;font-size:17px;color:var(--ink-2);transition:opacity .3s}
.hid-cap .hand{font-size:24px;color:var(--mint-deep)}
.hid-cap b{display:block;font:700 13px/1 var(--body);letter-spacing:.14em;color:var(--ink);margin-bottom:6px}
.hid-cap.swap{opacity:0}

/* the equation builds itself */
.eq-build{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 20px;margin-top:20px;font:700 clamp(30px,4.4vw,64px)/1.05 var(--display);letter-spacing:-.025em}
.eq-build>*{opacity:0;transform:translateY(34px) scale(.92);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.9,.25,1.2);transition-delay:calc(var(--i) * .16s)}
.eq-build.go>*{opacity:1;transform:none}
.eq-build .t{color:#fff;text-decoration:none;background:var(--marker) 0 92%/0% 30% no-repeat;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.9,.25,1.2),background-size .4s ease;transition-delay:calc(var(--i) * .16s),calc(var(--i) * .16s),0s}
.eq-build .t:hover,.eq-build .t:focus-visible{background-size:100% 30%;outline:none}
.eq-build .op{color:var(--mint)}
.eq-build .res{background:var(--mint);color:var(--ink);border-radius:18px;padding:.08em .32em .14em;display:inline-flex;align-items:center;gap:.16em}
.eq-build .res .hg{width:.34em;height:.5em;background:var(--ink);clip-path:polygon(0 0,100% 0,50% 50%,100% 100%,0 100%,50% 50%);display:inline-block}
.eq-build.go .res{animation:respop .9s cubic-bezier(.3,1.6,.5,1) 1.2s both}
@keyframes respop{0%{transform:scale(.6)}70%{transform:scale(1.08)}100%{transform:none}}

/* Human Design chart: drawn in, centres to explore */
.hd-chart{position:relative;max-width:440px;margin:0 auto;width:100%}
.hd-chart img{width:100%;display:block;clip-path:inset(100% 0 0 0);transition:clip-path 1.8s cubic-bezier(.6,0,.2,1)}
.hd-chart.go img{clip-path:inset(0 0 0 0)}
.hd-dot{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:0;background:#fff;box-shadow:0 0 0 3px var(--ink);cursor:pointer;opacity:0;transform:scale(.4);transition:opacity .4s,transform .5s cubic-bezier(.3,1.6,.5,1),background .25s;transition-delay:calc(1.4s + var(--d) * .12s)}
.hd-chart.go .hd-dot{opacity:1;transform:none}
.hd-dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--ink);opacity:0;animation:hdpulse 2.6s ease-out infinite;animation-delay:calc(2.4s + var(--d) * .3s)}
.hd-dot:hover,.hd-dot:focus-visible,.hd-dot[aria-pressed=true]{background:var(--ink);transform:scale(1.2);transition-delay:0s;outline:none}
.hd-dot[aria-pressed=true]::after{animation:none}
@keyframes hdpulse{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(1.6)}}
.hd-info{margin-top:26px;background:var(--stone);border-radius:18px;padding:16px 20px;display:flex;flex-direction:column;gap:4px;min-height:74px;transition:background .3s}
.hd-info b{font:700 20px/1.1 var(--display)}
.hd-info span{color:var(--ink-2)}
.hd-info.on{background:var(--mint)}
.hd-quote{font-size:clamp(22px,2vw,28px);color:var(--ink);margin:24px 0 0;transform:rotate(-1deg)}

/* six reasons: flip cards */
.flips{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;perspective:1400px}
.flip{all:unset;cursor:pointer;height:230px;display:block}
.fl-in{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.flip[aria-pressed=true] .fl-in{transform:rotateY(180deg)}
@media (hover:hover){.flip:hover .fl-in{transform:rotateY(180deg)}}
.fl-front,.fl-back{position:absolute;inset:0;border-radius:24px;padding:26px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column}
.fl-front{background:#fff}
.fl-front .n{font:700 52px/1 var(--display);color:var(--mint);letter-spacing:-.03em}
.fl-front b{font:700 clamp(20px,1.8vw,26px)/1.15 var(--display);margin-top:auto}
.fl-front .hint{font-family:var(--hand);font-size:18px;color:var(--muted);margin-top:8px}
.fl-back{background:var(--ink);color:#fff;transform:rotateY(180deg);justify-content:center;font-size:16.5px;line-height:1.5}
.flip:focus-visible .fl-front{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:980px){.flips{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.flips{grid-template-columns:1fr}.flip{height:200px}}
.method-cta .cta-ph{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;max-width:440px;margin-left:auto}
.method-cta .cta-ph img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.eq-build>*,.hd-chart img,.hd-dot{transition:none!important;opacity:1!important;transform:none!important;clip-path:none!important}.hd-dot::after{animation:none}.fl-in{transition:none}}

/* service-page hero: plain rounded photo, no triangle mask */
.lp-hero .tri-field{aspect-ratio:4/5;max-width:520px}
.lp-hero .tri-field .tf{display:none}
.lp-hero .tri-field .big{left:6%;right:0;top:0;height:100%;clip-path:inset(0 0 0 0 round 30px 34px 28px 32px);border-radius:30px 34px 28px 32px;box-shadow:0 40px 80px -40px rgba(35,31,32,.45)}
.lp-hero .tri-field .spk{left:auto;right:-6%;bottom:12%;width:clamp(64px,7vw,96px);z-index:3}
.lp-hero .tri-field .price-tag{left:-4px}

/* brand work: 3D ring carousel with momentum drag + pagination */
.w3d-sec{padding:clamp(56px,7vw,90px) 0 clamp(40px,5vw,60px)}
.w3d{--cw:clamp(250px,40vw,520px);--ch:calc(var(--cw) * .625);position:relative;height:calc(var(--ch) + 90px);perspective:1150px;perspective-origin:50% 40%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;overflow:hidden}
.w3d.dragging{cursor:grabbing}
.w3d-stage{position:absolute;left:50%;top:30px;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);transform-style:preserve-3d}
.w3d-ring{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.w3d-card{position:absolute;inset:0;margin:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:filter .3s}
.w3d-card img{width:100%;height:100%;object-fit:cover;border-radius:18px;display:block;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.w3d-card figcaption{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.94);color:var(--ink);border-radius:12px;padding:8px 12px;font-size:12.5px;line-height:1.3;opacity:var(--cap,0);transition:opacity .3s}
.w3d-card figcaption b{display:block;font:700 15px/1.2 var(--body)}
.w3d-card.front{cursor:pointer}
.w3d:focus-visible .w3d-card.front img{outline:3px solid var(--mint);outline-offset:4px}
.w3d-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px}
.w3d-ctrl>button{width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font:700 18px/1 var(--body);cursor:pointer;transition:background .25s,color .25s,transform .3s}
.w3d-ctrl>button:hover{background:var(--mint);color:var(--ink);transform:translateY(-2px)}
.w3d-dots{display:flex;gap:8px}
.w3d-dots button{width:9px;height:9px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.3);cursor:pointer;transition:width .35s cubic-bezier(.3,1.5,.5,1),background .3s}
.w3d-dots button[aria-current=true]{width:28px;background:var(--mint)}
.w3d-more{text-align:center;margin:22px 0 0;color:#fff}
.w3d-more .link{color:#fff}
.w3d-more .hand{color:var(--mint);font-size:22px;margin-left:12px}
@media (max-width:560px){.w3d{--cw:74vw}.w3d-dots{display:none}}

/* WebGL mode: canvas replaces the CSS ring; caption sits under the front card */
.w3d.is-gl{--ch:calc(var(--cw) * .625);height:calc(var(--ch) * 1.5 + 40px)}
.w3d.is-gl .w3d-stage{display:none}
.w3d-gl{position:absolute;inset:0;display:block}
.w3d-cap{display:none;text-align:center;color:#fff;margin:4px 0 14px;font-size:14px;min-height:40px}
.w3d.is-gl~.w3d-cap{display:block}
.w3d-cap b{display:block;font:700 18px/1.2 var(--display)}
.w3d-cap{color:rgba(255,255,255,.65)}
.w3d-cap b{color:#fff}
.w3d-cap.pop{animation:fadeup .45s cubic-bezier(.2,.8,.2,1)}

/* Discover / Embrace / Celebrate: big phase cards, auto-stepping */
.phases .pick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:10px 0 40px;position:relative}
.phases .pick-row button{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;border:0;border-radius:26px;padding:26px 26px 24px;background:rgba(255,255,255,.06);color:#fff;text-align:left;cursor:pointer;position:relative;overflow:hidden;transition:background .45s,transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.phases .pick-row button:hover{background:rgba(255,255,255,.11);transform:translateY(-3px)}
.phases .pick-row button[aria-pressed=true]{background:var(--mint);color:var(--ink);transform:translateY(-8px);box-shadow:0 30px 60px -30px rgba(0,242,166,.6)}
.phases .ph-ic{height:clamp(64px,7vw,96px);margin-bottom:14px;display:block;transition:transform .7s cubic-bezier(.3,1.5,.5,1)}
.phases .ph-ic img{height:100%;width:auto;display:block}
.phases button[aria-pressed=true] .ph-ic{transform:scale(1.12) rotate(-3deg)}
.phases .ph-n{font:700 12.5px/1 var(--body);letter-spacing:.16em;color:var(--mint);transition:color .3s}
.phases button[aria-pressed=true] .ph-n{color:var(--ink)}
.phases .pick-row b{font:700 clamp(30px,3.4vw,48px)/1 var(--display);letter-spacing:-.02em}
.phases .pick-row small{font:400 16px/1.3 var(--body);opacity:.75}
.phases .pick-row button::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--ink)}
.phases.auto .pick-row button[aria-pressed=true]::after{animation:phbar var(--phdur,5s) linear forwards}
@keyframes phbar{to{width:100%}}
.phases .ph-line{position:absolute;left:4%;right:4%;top:-18px;height:3px;border-radius:3px;background:rgba(255,255,255,.12)}
.phases .ph-line i{display:block;height:100%;width:calc(var(--phx,0) * 50% + 16%);background:var(--mint);border-radius:3px;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.phases [data-panel]{animation:fadeup .6s cubic-bezier(.2,.8,.2,1)}
@media (max-width:760px){.phases .pick-row{grid-template-columns:1fr}.phases .pick-row button{flex-direction:row;align-items:center;gap:14px;padding:16px 18px}.phases .ph-ic{height:48px;margin:0}.phases .pick-row small{display:none}.phases .ph-line{display:none}}
.phases button[aria-pressed=true] .ph-ic img{filter:brightness(0)}
.phases .ph-ic img{transition:filter .4s}
.phases .sess .shot img{object-position:50% 12%}

/* Είσαι & Φαίνεσαι in WebGL: the DOM columns keep the layout, the canvas draws them with a bend */
.m4-gl{display:none}
.eisai4.is-gl .m4-gl{display:block;position:sticky;top:0;width:100%;height:100vh;margin-bottom:-100vh;z-index:0;pointer-events:none}
.eisai4.is-gl .m4 img{opacity:0}
.eisai4.is-gl .m4-shade{z-index:1}
/* method wheel: clearer hover */
.hid-wheel button.petal{z-index:1}
.hid-wheel button.petal:hover,.hid-wheel button.petal:focus-visible{transform:rotate(var(--a)) translateY(-117%) rotate(calc(var(--a) * -1)) scale(1.22);z-index:3;box-shadow:0 20px 44px -18px rgba(35,31,32,.55)}
.hid-wheel button.petal.soft:hover{background:rgba(0,242,166,.7)}
.hid-wheel button.petal{transition:transform .55s cubic-bezier(.3,1.6,.5,1),box-shadow .35s,opacity .3s,background .3s}
.hid-wheel .core{pointer-events:none;z-index:0}

/* ===== interactive Human Identity Design map ===== */
.hx{position:relative;margin-top:clamp(36px,5vw,64px);min-height:clamp(420px,46vw,620px)}
.hx-stage{position:absolute;inset:0;display:grid;place-items:center;transition:transform 1s cubic-bezier(.65,0,.2,1)}
.hx-wheel{position:relative;width:min(560px,86vw);aspect-ratio:1;--rot:0deg;transition:transform 1s cubic-bezier(.65,0,.2,1)}
.hx.focused .hx-stage{transform:translateX(-24%)}
.hx.focused .hx-wheel{transform:scale(.84)}
.hx-lines{position:absolute;inset:0;width:100%;height:100%;transform:rotate(var(--rot));transition:transform 1.1s cubic-bezier(.65,0,.2,1)}
.hx-lines line{stroke:rgba(255,255,255,.14);stroke-width:.35;stroke-linecap:round;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke .5s,stroke-width .5s}
.hx.in .hx-lines line{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1),stroke .5s,stroke-width .5s}
.hx-lines line.on{stroke:var(--mint);stroke-width:.7}
.hx-ring{position:absolute;inset:0;transform:rotate(var(--rot));transition:transform 1.1s cubic-bezier(.65,0,.2,1)}
.hx-p{all:unset;position:absolute;left:50%;top:50%;width:28%;aspect-ratio:1;margin:-14% 0 0 -14%;cursor:pointer;transform:rotate(var(--a)) translateX(122%) rotate(calc(var(--a) * -1));z-index:1}
.hx-disc{position:absolute;inset:0;border-radius:50%;background:var(--mint);display:grid;place-items:center;text-align:center;transform:scale(0);transition:transform .9s cubic-bezier(.3,1.5,.5,1),background .4s,box-shadow .4s,opacity .4s;transition-delay:calc(var(--d,0) * 1ms)}
.hx-p.soft .hx-disc{background:rgba(0,242,166,.45)}
.hx.in .hx-disc{transform:scale(1)}
.hx.in .hx-p:hover .hx-disc,.hx.in .hx-p:focus-visible .hx-disc{transform:scale(1.14);box-shadow:0 0 0 6px rgba(0,242,166,.18)}
.hx-p:focus-visible{outline:none}
.hx-l{font:700 clamp(9px,1.25vw,14px)/1.15 var(--body);letter-spacing:.05em;color:var(--ink);display:block;transform:rotate(calc(var(--rot) * -1));transition:transform 1.1s cubic-bezier(.65,0,.2,1)}
.hx.focused .hx-p:not([aria-pressed=true]) .hx-disc{opacity:.45;transform:scale(.82)}
.hx.focused .hx-p:not([aria-pressed=true]):hover .hx-disc{opacity:.85;transform:scale(.95)}
.hx.in .hx-p[aria-pressed=true] .hx-disc{transform:scale(1.3);background:#fff;box-shadow:0 0 0 10px rgba(0,242,166,.25),0 30px 60px -20px rgba(0,0,0,.6)}
.hx-p[aria-pressed=true]{z-index:3}
.hx-core{all:unset;position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;text-align:center;cursor:pointer;z-index:2;transition:background .4s}
.hx-core span{font:700 clamp(18px,2.4vw,32px)/1.02 var(--display);color:#fff;letter-spacing:-.02em}
.hx-core small{display:block;color:var(--mint);font-size:clamp(14px,1.4vw,19px);margin-top:4px;transition:opacity .4s}
.hx.focused .hx-core small{opacity:0}
.hx-core:hover{background:rgba(255,255,255,.05)}
.hx-panel{position:absolute;right:0;top:50%;width:min(48%,560px);transform:translate(40px,-50%);opacity:0;pointer-events:none;transition:opacity .6s ease .15s,transform .9s cubic-bezier(.2,.8,.2,1) .1s}
.hx.focused .hx-panel{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.hx-cards{position:relative;min-height:390px}
.hx-card{position:absolute;inset:0;display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:start;color:#fff;opacity:0;visibility:hidden;transform:translateY(var(--from,30px));transition:opacity .45s ease,transform .7s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
.hx-card.on{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease .12s,transform .8s cubic-bezier(.2,.8,.2,1) .08s,visibility 0s}
.hx-card.out{transform:translateY(var(--to,-30px))}
.hx-img{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:#fff;transform:rotate(-2deg)}
.hx-img img{width:100%;height:100%;object-fit:cover}
.hx-txt .hand{color:var(--mint);font-size:24px}
.hx-txt h3{font:700 clamp(30px,3vw,44px)/1 var(--display);margin:4px 0 12px;letter-spacing:-.02em}
.hx-txt p{margin:0;color:rgba(255,255,255,.82);font-size:17px}
.hx-sub{display:block;font:700 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin:20px 0 10px}
.hx-txt .ticks li{color:rgba(255,255,255,.9);font-size:15.5px}
.hx-txt .link{display:inline-block;margin-top:16px;color:#fff}
.hx-nav{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.hx-nav>button:not(.hx-close){width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font:700 17px/1 var(--body);cursor:pointer;transition:background .25s,color .25s}
.hx-nav>button:not(.hx-close):hover{background:var(--mint);color:var(--ink)}
.hx-dots{display:flex;gap:6px}
.hx-dots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:rgba(255,255,255,.3);cursor:pointer;transition:width .35s cubic-bezier(.3,1.5,.5,1),background .3s}
.hx-dots button[aria-current=true]{width:24px;background:var(--mint)}
.hx-close{all:unset;cursor:pointer;margin-left:auto;font:700 13px/1 var(--body);color:rgba(255,255,255,.7);padding:10px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.2);transition:background .25s,color .25s}
.hx-close:hover{background:#fff;color:var(--ink)}
@media (max-width:980px){
  .hx{min-height:0}
  .hx-stage{position:relative;inset:auto}
  .hx.focused .hx-stage{transform:none}
  .hx.focused .hx-wheel{transform:scale(.9)}
  .hx-panel{position:relative;right:auto;top:auto;width:100%;transform:translateY(20px);display:none}
  .hx.focused .hx-panel{display:block;transform:none}
  .hx-cards{min-height:520px}
  .hx-card{grid-template-columns:1fr}
  .hx-img{max-width:220px}
}
@media (prefers-reduced-motion:reduce){.hx *{transition-duration:.01s!important;transition-delay:0s!important}}

/* service pages: the numbers band, open on white (no box), clear of the grey section below */
.stats-sec{padding:clamp(48px,6vw,80px) 0 clamp(64px,8vw,110px);background:#fff}
.stats-sec .stats{background:none;border:0;border-radius:0;gap:0}
.stats-sec .stats>div{padding:6px clamp(14px,2.4vw,34px);border-right:1px solid rgba(35,31,32,.1);text-align:left}
.stats-sec .stats>div:first-child{padding-left:0}
.stats-sec .stats>div:last-child{border-right:0}
.stats-sec .stats b{font:700 clamp(52px,6.4vw,96px)/.95 var(--display);letter-spacing:-.045em;color:var(--ink)}
.stats-sec .stats b sup{color:var(--mint);font-size:.42em;vertical-align:1.1em;margin-left:2px}
.stats-sec .stats>div>span{display:block;margin-top:10px;font-size:15px;color:var(--ink-2);max-width:200px}
@media (max-width:760px){.stats-sec .stats{grid-template-columns:1fr 1fr;row-gap:28px}.stats-sec .stats>div:nth-child(2){border-right:0}.stats-sec .stats>div:nth-child(3){padding-left:0}}

/* squiggle underlines → v2's straight mint highlighter bar, sweeping in left to right */
.u-hand .squiggle{display:none}
.u-hand{background:linear-gradient(transparent 60%,var(--mint) 60%,var(--mint) 92%,transparent 92%) no-repeat 0 0/0% 100%;transition:background-size 1s cubic-bezier(.2,.7,.1,1) .25s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.u-hand.drawn{background-size:100% 100%}
@media (prefers-reduced-motion:reduce){.u-hand{background-size:100% 100%;transition:none}}


/* ===== method scene: hero → map ===== */
.hx-scene{position:relative;height:230vh;background:#fff}
.hx-pin{position:sticky;top:0;height:100vh;overflow:clip}
.hx-bg{position:absolute;inset:0;background:var(--ink);opacity:var(--pbg,0)}
.hx-a{position:absolute;inset:0;padding-top:clamp(96px,12vh,130px);padding-bottom:4vh;display:flex;flex-direction:column;opacity:calc(1 - var(--pa,0));transform:translateY(calc(var(--pa,0) * -50px));pointer-events:none}
.hx-scene:not(.dark) .hx-a{pointer-events:auto}
.hx-a .crumbs{font-size:13px;color:var(--muted);display:flex;gap:8px}
.hx-a .crumbs a{text-decoration:none}
.hx-a-grid{flex:1;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}
.hx-a .h-xxl{font-size:clamp(48px,7vw,108px)}
.hx-a .lead{max-width:540px;margin-top:22px}
.hx-slot{width:min(500px,56vh,100%);aspect-ratio:1;margin-left:auto}
.hx-dark{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:clamp(96px,12vh,130px)}
.hx-b{opacity:var(--pb,0);transform:translateY(calc((1 - var(--pb,0)) * 40px));pointer-events:none;color:#fff}
.hx-scene.docked .hx-b{pointer-events:auto}
.hx-b .rv,.hx-b .split-words .w>span{opacity:1!important;transform:none!important}
.hx-b .h-xl{color:#fff}
.hx-dark>.wrap:last-child{flex:1;display:flex;min-height:0;width:100%}
.hx-scene .hx{flex:1;margin-top:1vh;min-height:0}
.hx-scene .hx-wheel{width:min(500px,56vh,86vw)}
.hx-scene .hx-core span{color:var(--ink);transition:color .5s}
.hx-scene.dark .hx-core span{color:#fff}
.hx-scene:not(.dark) .hx-core small{opacity:0}
.hx-scene:not(.docked) .hx-p,.hx-scene:not(.docked) .hx-core{pointer-events:none}
.hx-scene .hx-panel{top:50%}
@media (max-width:980px){
  .hx-scene{height:auto;background:#fff}
  .hx-pin{position:static;height:auto;overflow:visible}
  .hx-bg,.hx-slot{display:none}
  .hx-a{position:static;opacity:1;transform:none;padding:40px 0 50px;pointer-events:auto}
  .hx-a-grid{display:block}
  .hx-dark{position:static;background:var(--ink);padding:64px 0 48px;border-radius:40px 40px 0 0}
  .hx-b{opacity:1;transform:none;pointer-events:auto}
  .hx-scene .hx-core span{color:#fff}
}

/* rule: handwriting is black on white, black on green, green on black */
:is(.hand,.kicker,.bk,.ig-hi,.an-note,.cmp-note,.hd-quote,.eisai-sign,.fl-front .hint,.hx-core small,.marquee.soft span){color:var(--ink)!important}
:is(.bg-ink,.site-foot,.eisai4,.workband,.mobile-menu,.qx .qside) :is(.hand,.kicker,.bk,.ig-hi,.eisai-sign,.hx-core small){color:var(--mint)!important}
:is(.bg-mint,.marquee,.duo,.thisisme,.hd-info.on,.phases button[aria-pressed=true]) :is(.hand,.kicker,.bk){color:var(--ink)!important}
.bg-ink .thisisme .hand{color:var(--mint)!important}
.hx-b .h-xl{font-size:clamp(34px,3.8vw,58px)}
.hx-b .split{gap:30px}
.hx-scene .hx-wheel{width:min(440px,48vh,86vw)}
.hx-slot{width:min(500px,56vh,100%)}
.hx-scene .hx{margin-top:0}
/* wheel centre: title truly centred; the hint sits just below it without pushing it up */
.hx-core{display:block}
.hx-core span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;text-align:center;display:block}
.hx-core small{position:absolute;left:0;right:0;top:calc(50% + 1.62 * clamp(18px,2.4vw,32px) + 4px);text-align:center;margin:0;white-space:nowrap}
/* method scene: sit under the sticky header and centre the hero in the visible area */
@media (min-width:981px){
  .hx-scene{margin-top:-78px}
  .hx-a{padding-top:78px;padding-bottom:0;justify-content:center}
  .hx-a-grid{flex:1;align-items:center}
  .hx-dark{padding-top:calc(78px + 3vh)}
}

/* scroll-driven tour: taller scene, the wheel grows and centres, panel follows */
@media (min-width:981px){
  .hx-scene{height:var(--scene-h,630vh)}
  .hx-scene .hx.focused .hx-wheel{transform:none}
  .hx-scene .hx.focused .hx-stage{transform:translateX(-25%)}
  .hx-scene .hx-panel{transform:translate(40px,calc(-50% + var(--gy,0px)))}
  .hx-scene .hx.focused .hx-panel{transform:translate(0,calc(-50% + var(--gy,0px)))}
  .hx-scene.stepping .hx-b{pointer-events:none}
  .hx-scene .hx-core small{display:none}
}

/* dot rail always visible: on mint, ink dots and a white current dot; on photos/black, a soft shadow */
.dot-rail.mint button::before{background:var(--ink);opacity:.45}
.dot-rail.mint button[aria-current=true]::before{background:#fff;opacity:1;box-shadow:0 0 0 2px var(--ink)}
.dot-rail.dark button::before{box-shadow:0 0 6px rgba(0,0,0,.5)}
.dot-rail.dark button[aria-current=true]::before{box-shadow:0 0 0 2px #fff,0 0 8px rgba(0,0,0,.45)}
/* scroll-only tour on desktop: no buttons needed; dots become a progress indicator */
@media (min-width:981px){
  .hx-scene .hx-prev,.hx-scene .hx-next,.hx-scene .hx-close{display:none}
  .hx-scene .hx-dots{pointer-events:none}
  .hx-scene .hx-dots button{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
  .hx-scene .hx-dots button[aria-current=true]{width:40px;background:var(--mint)}
  .hx-scene .hx-nav{margin-top:26px}
}

/* the map stays white throughout (no fade to black) */
.hx-bg{display:none}
.hx-scene .hx-core span,.hx-scene.dark .hx-core span{color:var(--ink)}
.hx-b,.hx-b .h-xl{color:var(--ink)}
.hx-b .lead{color:var(--ink-2)!important}
.hx-card{color:var(--ink)}
.hx-txt h3{color:var(--ink)}
.hx-txt p{color:var(--ink-2)}
.hx-txt .ticks li{color:var(--ink)}
.hx-txt .link{color:var(--ink)}
.hx-sub{color:var(--muted)}
.hx-img{box-shadow:0 24px 50px -28px rgba(35,31,32,.45)}
.hx.in .hx-p[aria-pressed=true] .hx-disc{background:var(--ink);box-shadow:0 0 0 10px rgba(0,242,166,.35),0 30px 60px -24px rgba(35,31,32,.45)}
.hx-p[aria-pressed=true] .hx-l{color:var(--mint)}
.hx.focused .hx-p:not([aria-pressed=true]) .hx-disc{opacity:.55}
.hx-dots button{background:rgba(35,31,32,.18)}
.hx-scene .hx-dots button{background:rgba(35,31,32,.15)}
.hx-scene .hx-dots button[aria-current=true],.hx-dots button[aria-current=true]{background:var(--ink)}
.hx-nav>button:not(.hx-close){background:var(--stone);color:var(--ink)}
.hx-close{color:var(--ink);border-color:rgba(35,31,32,.2)}
@media (max-width:980px){.hx-dark{background:#fff;border-radius:0;padding-top:20px}}

/* method: the key statement on its own, with room */
.stmt-solo{background:#fff;min-height:88vh;display:flex;align-items:center;padding:clamp(80px,12vh,140px) 0}
.stmt-solo .statement{font-size:clamp(34px,4.6vw,74px);line-height:1.12;max-width:1150px;margin:0 auto}
.statement .hl-w{background:linear-gradient(transparent 60%,var(--mint) 60%,var(--mint) 92%,transparent 92%) no-repeat 0 0/0% 100%;transition:background-size .6s cubic-bezier(.2,.7,.1,1),color .6s;padding-right:.28em;margin-right:-.28em}
.statement .hl-w:last-child{padding-right:0;margin-right:0}
.statement .hl-w.on{background-size:100% 100%}
/* SELF pyramid: revealed from the base up (inside → out) */
.self-pyr{margin:clamp(56px,7vw,100px) auto 0;max-width:1000px}
.self-pyr img{width:100%;display:block;clip-path:inset(100% 0 0 0);transition:clip-path 1.6s cubic-bezier(.6,0,.2,1)}
.self-pyr.drawn img{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.self-pyr img{clip-path:none}}

/* Human Design chart: centre names as tooltips beside each dot */
.hd-dot::before{content:attr(data-n) "\A" attr(data-t);white-space:pre;position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,6px);background:var(--ink);color:#fff;font:400 13px/1.35 var(--body);text-align:center;padding:9px 13px;border-radius:12px;box-shadow:0 14px 30px -12px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1);z-index:5}
.hd-dot:hover::before,.hd-dot:focus-visible::before,.hd-dot[aria-pressed=true]::before{opacity:1;transform:translate(-50%,0)}
.hd-dot:hover,.hd-dot:focus-visible{z-index:6}
.hd-dot[style*="left:16.8%"]::before{left:0;transform:translate(-10%,6px)}
.hd-dot[style*="left:16.8%"]:hover::before,.hd-dot[style*="left:16.8%"][aria-pressed=true]::before{transform:translate(-10%,0)}
.hd-dot[style*="left:83.2%"]::before{left:auto;right:0;transform:translate(10%,6px)}
.hd-dot[style*="left:83.2%"]:hover::before,.hd-dot[style*="left:83.2%"][aria-pressed=true]::before{transform:translate(10%,0)}

/* the equation as a pinned, scroll-built moment */
.eq-build .br{flex-basis:100%;height:0}
@media (min-width:981px){
  .eq-sec.scene{height:240vh;padding:0}
  .eq-sec.scene .eq-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding-top:60px}
  .eq-sec.scene .eq-build{font-size:clamp(44px,6.2vw,108px);gap:10px 26px;margin-top:26px}
  .eq-sec.scene .eq-build>*{opacity:0;transform:translateY(46px) scale(.92);transition:opacity .55s ease,transform .8s cubic-bezier(.2,.9,.25,1.2),background-size .7s cubic-bezier(.2,.7,.1,1) .25s;transition-delay:0s}
  .eq-sec.scene .eq-build>.on{opacity:1;transform:none}
  .eq-sec.scene .eq-build .t{background:linear-gradient(transparent 82%,var(--mint) 82%,var(--mint) 94%,transparent 94%) no-repeat 0 0/0% 100%}
  .eq-sec.scene .eq-build .t.on{background-size:100% 100%}
  .eq-sec.scene .eq-build .res{font-size:1.25em;padding:.06em .36em .14em;border-radius:24px}
  .eq-sec.scene .eq-build .res.on{animation:respop .9s cubic-bezier(.3,1.6,.5,1) both}
  .eq-sec.scene .eq-build .res .hg{transition:transform 1s cubic-bezier(.6,0,.2,1) .35s}
  .eq-sec.scene .eq-build .res.on .hg{transform:rotate(180deg)}
  .eq-sec.scene .lead{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1)}
  .eq-sec.scene .lead.on{opacity:1;transform:none}
}

/* her three tools: Branding · Human Design · Styling */
.tool-sec .tool-n{display:block;font:700 clamp(64px,8vw,128px)/.8 var(--display);letter-spacing:-.05em;color:var(--mint);margin-bottom:10px}
.tool-sec .kicker{margin-bottom:4px}
.tool-sec .glyphs b{font-weight:700}
.tool-close{margin-top:24px;font:700 clamp(19px,1.6vw,23px)/1.4 var(--display);letter-spacing:-.01em;max-width:520px}
.tool-close .hand{font-weight:400;font-size:1.25em;background:linear-gradient(transparent 60%,var(--mint) 60%,var(--mint) 92%,transparent 92%);padding:0 .1em}
.tool-art{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;max-width:480px;margin:0 auto;box-shadow:0 34px 70px -38px rgba(35,31,32,.5)}
.tool-art img{width:100%;height:100%;object-fit:cover}
#tool-branding .tool-art{aspect-ratio:auto;background:#fff}
#tool-branding .tool-art img{height:auto}

/* equation plays by itself: no pinning, a normal full-screen-ish section */
@media (min-width:981px){
  .eq-sec.scene{height:auto;padding:clamp(90px,12vh,140px) 0}
  .eq-sec.scene .eq-pin{position:relative;height:auto;min-height:72vh;padding-top:0}
}
.eq-sec.scene .eq-build>*{opacity:0;transform:translateY(46px) scale(.92);transition:opacity .55s ease,transform .8s cubic-bezier(.2,.9,.25,1.2),background-size .7s cubic-bezier(.2,.7,.1,1) .25s}
.eq-sec.scene .eq-build>.on{opacity:1;transform:none}
.eq-sec.scene .lead{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1)}
.eq-sec.scene .lead.on{opacity:1;transform:none}

/* method: the three tools stack — each card pins and the next slides over it */
.hx-a .scroll-cue{pointer-events:auto}
.tool-stack{position:relative}
.tool-stack>.tool-sec{position:sticky;top:var(--st,0px);min-height:100vh;display:flex;align-items:center;box-shadow:0 -30px 70px -36px rgba(35,31,32,.28);transform-origin:50% 0;transition:filter .2s}
.tool-stack>.tool-sec>.wrap{width:100%;transform:scale(calc(1 - var(--cov,0) * .06));opacity:calc(1 - var(--cov,0) * .55);transform-origin:50% 30%}
.tool-stack>.tool-sec:first-child{box-shadow:none}
@media (prefers-reduced-motion:reduce){.tool-stack>.tool-sec>.wrap{transform:none;opacity:1}}

/* equation: small "Tool n" over each term (handwriting: mint on black) */
.eq-build .t{position:relative}
.eq-build .eq-tag{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-.1em);font:400 clamp(18px,1.6vw,28px)/1 var(--hand);letter-spacing:0;color:var(--mint)!important;white-space:nowrap;opacity:0;transition:opacity .5s .45s}
.eq-build .t.on .eq-tag,.eq-build.go .eq-tag{opacity:.95}
@media (prefers-reduced-motion:reduce){.eq-build .eq-tag{opacity:.95}}
.eq-sec .eq-build .eq-tag{left:auto;right:100%;bottom:auto;top:.1em;margin-right:.35em;font-size:clamp(26px,.42em,46px);transform:rotate(-14deg);transform-origin:100% 50%}

/* method opening scene: pager centred at the bottom; each line skips to its pillar */
.hx-pager{position:absolute;left:50%;bottom:clamp(22px,4.5vh,48px);transform:translate(-50%,12px);margin:0!important;z-index:5;opacity:0;pointer-events:none;transition:opacity .45s,transform .45s}
.hx-scene.stepping .hx-pager{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.hx-scene .hx-pager .hx-dots{pointer-events:auto;gap:4px}
.hx-scene .hx-pager .hx-dots button{position:relative;width:34px;height:22px;background:none!important;cursor:pointer}
.hx-scene .hx-pager .hx-dots button::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:rgba(35,31,32,.15);transition:background .3s,transform .3s}
.hx-scene .hx-pager .hx-dots button:hover::before{background:rgba(35,31,32,.45);transform:scaleY(1.5)}
.hx-scene .hx-pager .hx-dots button[aria-current=true]{width:52px}
.hx-scene .hx-pager .hx-dots button[aria-current=true]::before{background:var(--ink)}
.hx-scene .hx-pager .hx-dots button:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:4px}

/* tool sections: angled handwritten "Tool" before the number (black on white/stone) */
.tool-sec .tool-n{display:flex;align-items:center;gap:.12em;margin-bottom:18px}
.tool-sec .tool-tag{font:400 clamp(32px,3.3vw,54px)/1 var(--hand);letter-spacing:0;color:var(--ink)!important;transform:rotate(-14deg) translateY(-.15em);display:inline-block}

/* breathing room between the map's pager and the equation card */
@media (min-width:981px){ .hx-scene{height:calc(var(--scene-h,630vh) + clamp(120px,20vh,220px));padding-bottom:clamp(120px,20vh,220px)} }

/* Branding tool: just her WHO WHY HOW WOW, mint on a black card */
#tool-branding .tool-art.wwhw{aspect-ratio:4/5;background:var(--ink);display:grid;place-items:center;padding:14%}
#tool-branding .tool-art.wwhw img{width:100%;height:100%;object-fit:contain}

/* Branding tool: her WHO WHY HOW WOW on its own, no box */
#tool-branding .tool-art.wwhw{background:none;box-shadow:none;border-radius:0;padding:0 6%;aspect-ratio:auto}
#tool-branding .tool-art.wwhw img{height:auto;max-height:70vh;object-fit:contain}

/* why a new term: a quiet aside (the key statement after it carries the weight) */
.newterm{padding:clamp(56px,8vw,100px) 0}
.nt-row{max-width:860px;display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,4vw,48px);align-items:start}
.nt-ph{width:clamp(96px,11vw,150px);aspect-ratio:1;border-radius:50%;overflow:hidden}
.nt-ph img{width:100%;height:100%;object-fit:cover}
.newterm .kicker{color:var(--ink)!important;font-size:clamp(22px,2vw,28px)}
.nt-q{font:500 clamp(19px,1.6vw,24px)/1.4 var(--body);margin:6px 0 0;color:var(--ink)}
.nt-q b{font-weight:700}
.nt-p{margin:14px 0 0;color:var(--muted);font-size:16px;line-height:1.6;max-width:62ch}
.newterm .sign{display:block;margin-top:14px;font-size:26px;color:var(--ink)!important}
@media (max-width:640px){.nt-row{grid-template-columns:1fr}}

/* WHO WHY HOW WOW: one image, four bands, each word lands in turn */
#tool-branding .wwhw{position:relative}
#tool-branding .wwhw img{display:block;width:100%;transition:opacity .5s ease,transform .8s cubic-bezier(.2,.9,.25,1.25)}
#tool-branding .wwhw img+img{position:absolute;left:0;top:0;padding:0 6%;box-sizing:border-box}
#tool-branding .wwhw .w0{clip-path:inset(0 0 67.3% 0)}
#tool-branding .wwhw .w1{clip-path:inset(32.7% 0 49.4% 0)}
#tool-branding .wwhw .w2{clip-path:inset(50.6% 0 31.3% 0)}
#tool-branding .wwhw .w3{clip-path:inset(68.7% 0 0 0)}
#tool-branding .wwhw.ready img{opacity:0;transform:translateY(38px) scale(.94)}
#tool-branding .wwhw.ready.on img{opacity:1;transform:none}
#tool-branding .wwhw.on .w1{transition-delay:.35s}
#tool-branding .wwhw.on .w2{transition-delay:.7s}
#tool-branding .wwhw.on .w3{transition-delay:1.05s}
#tool-branding .tool-art.wwhw{padding:0;max-width:min(400px,52vh);overflow:visible}
#tool-branding .tool-art.wwhw img{max-height:none;height:auto}
#tool-branding .wwhw img+img{padding:0}

/* GSAP drives text (motion.js adds .gs): CSS transitions step aside so the two never fight */
.gs .split-words .w>span,.gs .seq>*,.gs .gsx{transition:none!important}
.gs .eq-sec.scene .eq-build>*{transition:background-size .7s cubic-bezier(.2,.7,.1,1) .25s}
.gs .eq-sec.scene .eq-build .res.on{animation:none}
.gs .eq-sec.scene .lead,.gs #tool-branding .wwhw img{transition:none}
.gs .eq-build .eq-tag{transition:opacity .5s .3s}
.hx-card{grid-template-columns:1fr}

/* footer: her trademarked lockup (white version on the black footer) */
.site-foot .fb .foot-lockup{filter:none!important;display:block;width:clamp(150px,13vw,190px);height:auto;margin:0 0 26px}

/* map cards without photos: text centred on the wheel, clear of the active circle, one consistent left edge */
@media (min-width:981px){
  .hx-scene .hx-panel{width:min(38%,460px)}
  .hx-scene .hx-cards{min-height:440px}
  .hx-scene .hx-card{display:flex;flex-direction:column;justify-content:center}
  .hx-scene .hx-txt h3{font-size:clamp(36px,3.4vw,54px);margin:6px 0 14px}
  .hx-scene .hx-txt p{font-size:18px;line-height:1.5;max-width:34ch}
  .hx-scene .hx-sub{margin:24px 0 12px}
  .hx-scene .hx-txt .ticks li{font-size:16px}
  .hx-scene .hx-txt .link{margin-top:20px}
}
.hx-txt .hand{color:var(--ink)!important;font-size:26px}

/* Human Design chart in layers (silhouette sizes the box; channels and centres sit on top) */
.hd-layers{position:relative}
.hd-layers .hd-ch{position:absolute;left:0;top:0;width:100%}
.hd-layers .hd-c{position:absolute;display:block}

/* deep links: sections land below the fixed header */
section[id]{scroll-margin-top:72px}
.hx-scene[id],.tool-stack>section[id]{scroll-margin-top:0}

/* ============ shop (coming soon) ============ */
.sh-stage{position:relative;aspect-ratio:1;border-radius:22px;background:#F7F6F2;overflow:hidden}
.sh-stage svg{display:block;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.sh-stage .v{display:none}
.sh-stage[data-v="0"] .v0,.sh-stage[data-v="1"] .v1,.sh-stage[data-v="2"] .v2{display:inline}
.sh-badge{display:inline-block;font:700 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;background:var(--mint);color:var(--ink);padding:7px 10px;border-radius:99px}
/* hero */
.sh-hero{padding:clamp(120px,15vh,170px) 0 clamp(60px,8vw,110px);background:#fff;overflow:clip}
.sh-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}
.sh-hero h1 em{font-style:normal}
.sh-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.sh-hero-art{position:relative;height:clamp(380px,40vw,560px)}
.sh-hero-art>div{position:absolute;width:58%;filter:drop-shadow(0 30px 40px rgba(35,31,32,.14))}
.sh-hero-art .sh-stage{background:#F7F6F2}
.sh-h0{left:0;top:4%;transform:rotate(-6deg)}
.sh-h1{right:0;top:0;width:44%!important;transform:rotate(7deg)}
.sh-h1 .sh-stage{background:var(--ink)}
.sh-h2{right:8%;bottom:0;width:48%!important;transform:rotate(-2deg)}
.sh-h2 .sh-stage{background:var(--mint)}
/* collection */
.sh-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,50px)}
.sh-head .lead{max-width:44ch;margin-top:14px}
.sh-filter{display:flex;flex-wrap:wrap;gap:8px}
.sh-filter button{all:unset;cursor:pointer;font:600 14px/1 var(--body);padding:12px 16px;border-radius:99px;background:#fff;color:var(--ink);transition:background .25s,color .25s}
.sh-filter button:hover{background:rgba(0,242,166,.35)}
.sh-filter button[aria-pressed=true]{background:var(--ink);color:#fff}
.sh-filter button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(14px,1.6vw,22px)}
.sh-grid-3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.sh-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px 12px 20px;background:#fff;border-radius:28px;text-decoration:none;color:var(--ink);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,opacity .4s}
.sh-card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(35,31,32,.35)}
.sh-card:hover svg{transform:scale(1.05) rotate(-1.5deg)}
.sh-card .sh-badge{position:absolute;left:24px;top:24px}
.sh-name{font:700 19px/1.2 var(--display);margin:12px 8px 0;letter-spacing:-.01em}
.sh-tag{font-size:14.5px;line-height:1.45;color:var(--ink-2);margin:0 8px}
.sh-card[hidden]{display:none}
.section:not(.bg-stone) .sh-card{background:var(--stone)}
.section:not(.bg-stone) .sh-card .sh-stage{background:#fff}
/* symbols */
.sh-syms{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(40px,5vw,64px)}
.sh-sym{text-align:center}
.sh-sym img{height:110px;width:auto;max-width:100%;object-fit:contain;margin:0 auto 22px;display:block}
.sh-sym h3{font:700 20px/1.2 var(--display);color:#fff;margin:0 0 8px}
.sh-sym p{color:rgba(255,255,255,.75);margin:0;font-size:15.5px}
/* notify */
.sh-form{margin-top:30px;text-align:left}
.sh-picks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}
.sh-picks label{cursor:pointer}
.sh-picks input{position:absolute;opacity:0;pointer-events:none}
.sh-picks span{display:inline-block;font:600 14px/1 var(--body);padding:12px 16px;border-radius:99px;background:rgba(255,255,255,.55);transition:background .25s,color .25s}
.sh-picks input:checked+span{background:var(--ink);color:#fff}
.sh-picks input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.bg-mint .sh-form .consent{color:var(--ink)}
/* product page */
.sh-pd{padding:clamp(110px,14vh,150px) 0 clamp(60px,8vw,100px);background:#fff}
.sh-pd-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:center}
.sh-stage.big{border-radius:36px}
.sh-back{display:inline-block;font:600 14px/1 var(--body);color:var(--muted);text-decoration:none;margin-bottom:18px}
.sh-back:hover{color:var(--ink)}
.sh-pd h1{margin:0}
.sh-pd .lead{margin-top:16px}
.sh-status{display:flex;align-items:center;gap:12px;margin:22px 0 0;font-weight:600}
.sh-pd .sh-form{margin-top:26px}
.sh-pd .sh-form .consent{font-size:12.5px}
.sh-sws{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;flex-wrap:wrap}
.sh-swl{font-size:15px;color:var(--ink-2)}
.sh-sws>div{display:flex;gap:10px}
.sh-sw{all:unset;cursor:pointer;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(35,31,32,.15);transition:box-shadow .25s}
.sh-sw i{width:28px;height:28px;border-radius:50%;background:var(--fab,var(--metal,var(--frame,#ddd)));box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.sh-sw[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}
.sh-sw:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.sh-story{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px)}
.sh-dh{font:700 15px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:34px 0 14px}
.sh-note{font-size:13.5px;color:var(--muted);margin-top:18px}
@media (max-width:980px){
  .sh-hero-grid,.sh-pd-grid,.sh-story{grid-template-columns:1fr}
  .sh-hero-art{height:min(92vw,460px)}
  .sh-syms{grid-template-columns:1fr 1fr}
}

/* S.E.L.F. card: her layout (four words + mint disc), with a woman per step swinging in along an arc */
@property --a{syntax:'<angle>';inherits:true;initial-value:0deg}
.self-orb{position:relative;container-type:inline-size;width:min(100%,42vh);aspect-ratio:4/5;margin-left:auto;background:#fff;border-radius:24px;overflow:hidden;transform:rotate(1.5deg);box-shadow:0 30px 60px -40px rgba(35,31,32,.35)}
.so-words{list-style:none;margin:0;padding:8cqw 8cqw 0;font:300 9.4cqw/1.08 var(--body);letter-spacing:-.02em}
.so-words li{color:rgba(35,31,32,.22);transition:color .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.so-words li b{font-weight:700;color:inherit}
.so-words li.on{color:var(--ink);transform:translateX(2cqw)}
.so-disc{position:absolute;left:50%;top:69%;width:70cqw;aspect-ratio:1;border-radius:50%;background:var(--mint);transform:translate(-50%,-50%)}
.so-disc::after{content:"";position:absolute;inset:-7cqw;border-radius:50%;border:1.5px dashed rgba(35,31,32,.18)}
.so-arm{position:absolute;left:24cqw;top:calc(69% - 26cqw);width:52cqw;aspect-ratio:1;transform-origin:50% 230%;transform:rotate(var(--a));--a:60deg;transition:--a 1.1s cubic-bezier(.65,0,.25,1)}
.so-arm img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%;border-radius:50%;border:2.2cqw solid #fff;box-shadow:0 18px 40px -18px rgba(35,31,32,.5);transform:rotate(calc(var(--a) * -1))}
.so-badge{position:absolute;left:66cqw;top:calc(69% + 12cqw);width:15cqw;aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--mint);display:grid;place-items:center;font:700 8cqw/1 var(--display);z-index:3}
.so-note{position:absolute;left:7cqw;bottom:6cqw;font-size:5.4cqw;color:var(--ink)!important;transform:rotate(-6deg);z-index:3}
.so-disc{top:65%;width:62cqw}
.so-arm{left:27cqw;top:calc(65% - 23cqw);width:46cqw;transform-origin:50% 240%}
.so-badge{left:63cqw;top:calc(65% + 10cqw);width:14cqw;font-size:7.4cqw}
.so-note{left:7cqw;bottom:4.5cqw;font-size:5cqw}
/* S.E.L.F. card, simplified: just a big mint circle with the women swinging through it */
.self-orb .so-disc{top:50%;width:84cqw}
.self-orb .so-disc::after{inset:-5cqw}
.self-orb .so-arm{left:18cqw;top:calc(50% - 32cqw);width:64cqw;transform-origin:50% 215%}
.self-orb .so-arm img{border-width:2.6cqw}
/* no box (Sophia dislikes boxes): the circle sits straight on the section; women fade as they swing in and out */
.self-orb{background:none;box-shadow:none;border-radius:0;transform:none;overflow:visible;aspect-ratio:1}
.self-orb .so-arm{opacity:0;transition:--a 1.1s cubic-bezier(.65,0,.25,1),opacity .9s}
.self-orb{width:min(100%,50vh)}
.self-orb{border-radius:50%;overflow:hidden;clip-path:circle(50%)}
/* S.E.L.F.: letters, text and circle share one vertical centre */
.self4{align-items:center}

/* six reasons: an open index (no cards). Titles dim until active; the active number + words show in a pinned column */
.six{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,6vw,100px);margin-top:clamp(36px,5vw,64px);align-items:start}
.six-list{list-style:none;margin:0;padding:0}
.six-list li{padding:clamp(18px,4.2vh,40px) 0}
.six-i{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);color:rgba(35,31,32,.3);transition:color .5s}
.six-i .n{font:700 clamp(15px,1.2vw,18px)/1 var(--body);letter-spacing:.08em;min-width:2.2em;transition:color .5s}
.six-i .t{font:700 clamp(28px,3.4vw,54px)/1.04 var(--display);letter-spacing:-.025em;background:linear-gradient(transparent 80%,var(--mint) 80%,var(--mint) 94%,transparent 94%) no-repeat 0 0/0% 100%;transition:background-size .7s cubic-bezier(.2,.7,.1,1)}
.six-i:hover{color:rgba(35,31,32,.55)}
.six-i[aria-pressed=true]{color:var(--ink)}
.six-i[aria-pressed=true] .n{color:var(--ink)}
.six-i[aria-pressed=true] .t{background-size:100% 100%}
.six-i:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:6px}
.six-d{display:none}
.six-show{position:sticky;top:calc(50vh - 150px);min-height:300px}
.six-n{display:block;font:700 clamp(120px,15vw,230px)/.8 var(--display);letter-spacing:-.05em;color:var(--mint);margin-bottom:28px}
.six-txt{font-size:clamp(19px,1.6vw,24px);line-height:1.5;color:var(--ink);max-width:30ch;margin:0}
@media (max-width:980px){
  .six{grid-template-columns:1fr}
  .six-show{display:none}
  .six-list li{padding:20px 0}
  .six-i{color:var(--ink)}
  .six-i .t{background-size:100% 100%}
  .six-d{display:block;margin:10px 0 0 calc(2.2em + 14px);color:var(--ink-2);font-size:16.5px;line-height:1.55}
}
/* the mint underline follows each line of a wrapped title */
.six-i .t{background:none}
.six-i .t>span{background:linear-gradient(transparent 78%,var(--mint) 78%,var(--mint) 92%,transparent 92%) no-repeat 0 0/0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .7s cubic-bezier(.2,.7,.1,1)}
.six-i[aria-pressed=true] .t>span{background-size:100% 100%}
@media (max-width:980px){.six-i .t>span{background-size:100% 100%}}

/* ===== method-preview.html (comparison page) ===== */
.pv-gets{list-style:none;padding:0;margin:20px 0 6px;display:flex;flex-wrap:wrap;gap:8px 22px}
.pv-gets li{position:relative;padding-left:18px;font-weight:600;font-size:15.5px}
.pv-gets li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:50%;background:var(--mint)}
@media (min-width:981px){ .hx-scene.hx-mid{margin-top:0} .hx-mid .hx-a{padding-top:clamp(70px,10vh,110px)} }
.hx-mid .hx-a h2{margin:0}
.pv-proof{max-width:980px;text-align:center}
.pv-proof blockquote{margin:18px 0 0;font:700 clamp(26px,3vw,44px)/1.25 var(--display);letter-spacing:-.02em;color:var(--ink)}
.pv-proof mark{background:linear-gradient(transparent 58%,var(--mint) 58%,var(--mint) 92%,transparent 92%);color:inherit}
.pv-who{margin-top:24px;color:var(--ink-2)}
.pv-flag{position:fixed;left:16px;bottom:16px;z-index:80;background:var(--ink);color:#fff;font:600 13px/1 var(--body);padding:11px 15px;border-radius:99px;text-decoration:none;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.pv-flag span{color:var(--mint)}

/* ===================== v5 ===================== */
/* "Πριν από το styling": her five pairs. Pinned; scroll moves through them. The familiar tool is struck out in mint,
   the real question rises underneath with the marker. Open layout, no boxes. */
.before{position:relative;height:calc(100vh + var(--n,5) * 46vh);background:#fff}
.bf-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:clip}
.bf-stage{display:grid;grid-template-columns:minmax(170px,230px) 1fr;gap:clamp(30px,6vw,110px);align-items:center;width:100%}
.bf-side{display:flex;flex-direction:column;gap:18px;align-self:center}
.bf-side .kicker{margin:0;color:var(--ink)!important}
.bf-count{font:700 clamp(15px,1.2vw,18px)/1 var(--body);letter-spacing:.08em;color:var(--muted)}
.bf-count b{font:700 clamp(54px,6vw,96px)/.8 var(--display);letter-spacing:-.04em;color:var(--mint);display:block;margin-bottom:8px}
.bf-dots{display:flex;gap:6px}
.bf-dots i{width:22px;height:4px;border-radius:2px;background:rgba(35,31,32,.14);transition:background .4s,width .4s}
.bf-dots i.on{width:40px;background:var(--ink)}
.bf-pairs{position:relative;min-height:clamp(340px,52vh,560px)}
.bf-pair{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3.4vh,40px);visibility:hidden}
.bf-pair.on{visibility:visible}
.bf-a,.bf-b{margin:0;letter-spacing:-.025em}
.bf-a{font:700 clamp(26px,3vw,50px)/1.12 var(--display);color:rgba(35,31,32,.32)}
.bf-b{font:700 clamp(34px,4.5vw,78px)/1.04 var(--display);color:var(--ink);max-width:16em}
.bf-a .hand,.bf-b .hand{display:block;font:400 clamp(22px,1.9vw,32px)/1 var(--hand);letter-spacing:0;color:var(--ink)!important;margin-bottom:10px}
.bf-x,.bf-hl{-webkit-box-decoration-break:clone;box-decoration-break:clone;background-repeat:no-repeat;background-size:0% 100%}
.bf-x{background-image:linear-gradient(transparent 52%,var(--mint) 52%,var(--mint) 64%,transparent 64%);transition:background-size .7s cubic-bezier(.6,0,.2,1) .45s}
.bf-hl{background-image:linear-gradient(transparent 70%,var(--mint) 70%,var(--mint) 92%,transparent 92%);transition:background-size .9s cubic-bezier(.2,.7,.1,1) 1.05s}
.bf-pair.on .bf-x,.bf-pair.on .bf-hl{background-size:100% 100%}
@media (max-width:980px){
  .before{height:auto;padding:clamp(70px,12vw,110px) 0}
  .bf-pin{position:static;height:auto;display:block}
  .bf-stage{grid-template-columns:1fr;gap:28px}
  .bf-count,.bf-dots{display:none}
  .bf-pairs{min-height:0;display:grid;gap:44px}
  .bf-pair{position:static;visibility:visible}
  .bf-pair .bf-x,.bf-pair .bf-hl{background-size:100% 100%}
}
@media (prefers-reduced-motion:reduce){.bf-x,.bf-hl{transition:none}}
/* journey: her three verbs (handwriting on black = mint) */
.steps4 .st-verb{display:block;font-size:26px;line-height:1;color:var(--mint)!important;margin:10px 0 2px}
/* method: each tool answers one of her everyday questions (handwriting on white/stone = black) */
.tool-sec .tool-q{font:400 clamp(24px,2.3vw,34px)/1.2 var(--hand);color:var(--ink)!important;margin:16px 0 0;max-width:22em}
/* method: her pain line leads into the equation */
.eq-pain{max-width:34ch;margin:0 auto clamp(26px,4vh,44px);font-size:clamp(18px,1.6vw,23px);line-height:1.5;color:rgba(255,255,255,.78)}
/* home: her invitation in the closing band */
.pv-invite{max-width:52ch}
/* home: her mission line, in the "why I do it" voice */
.why-mission{margin:22px 0 0;font:700 clamp(20px,1.9vw,27px)/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
.why-mission mark{background:linear-gradient(transparent 58%,var(--mint) 58%,var(--mint) 92%,transparent 92%);color:inherit}
/* v5 · services: the question each service answers (handwriting; black on light cards) */
.offer .offer-q{display:block;font-size:24px;line-height:1.1;color:var(--ink)!important;margin:2px 0 10px}
/* v5 · about: lesson 03 on the black brands section (handwriting on black = mint) */
.lesson03{max-width:900px;margin:clamp(28px,4vw,48px) 0 clamp(30px,4vw,50px);font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:rgba(255,255,255,.85)}
.lesson03 .hand{display:block;font-size:1.4em;color:var(--mint)!important;margin-bottom:6px}
.lesson03 .link{color:#fff;margin-left:6px}
/* v5 · about: "what I believe" without boxes (Sophia dislikes boxes) */
.cards.open3 .card,.cards.open3 .card.dark{background:none!important;box-shadow:none!important;border:0!important;color:var(--ink);padding:0 clamp(0px,1vw,12px)}
.cards.open3 .card .k{color:var(--mint)}
.cards.open3 .card h3{color:var(--ink)}
.cards.open3 .card p{color:var(--ink-2)}
/* v5 · the English phase name, small next to her Greek verb */
.st-en{font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:8px;vertical-align:middle}

/* v5 · her metaphor: the building (identity = foundations, Style BY DESIGN = architecture, styling = decoration) */
.bld-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,90px);align-items:center}
.bld-copy .lead{margin-top:20px;max-width:34ch}
.bld-layers{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:4px}
.bld-layers li{display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding:14px 0;border-top:1px solid rgba(35,31,32,.1);cursor:default;transition:opacity .35s}
.bld-layers li:last-child{border-bottom:1px solid rgba(35,31,32,.1)}
.bld-layers .n{grid-row:span 2;font:700 13px/1.6 var(--body);letter-spacing:.08em;color:var(--muted)}
.bld-layers b{font:700 clamp(19px,1.6vw,23px)/1.2 var(--display);letter-spacing:-.01em}
.bld-layers li span:last-child{color:var(--ink-2);font-size:15.5px;line-height:1.45}
.bld-layers li[data-layer="1"] .n{color:var(--ink)}
.bld-layers li[data-layer="1"] b{background:linear-gradient(transparent 62%,var(--mint) 62%,var(--mint) 92%,transparent 92%)}
.bld-art[data-hl] .bld-layers li{opacity:.4}
.bld-btn{margin-top:28px}
.bld-btn .b-again{display:none}
.bld-sec.fallen .bld-btn .b-ask{display:none}
.bld-sec.fallen .bld-btn .b-again{display:inline}
.bld-note{margin:18px 0 0;font-size:clamp(24px,2.2vw,32px);line-height:1.15;color:var(--ink)!important;opacity:0;transform:translateY(8px);transition:opacity .5s .9s,transform .6s .9s}
.bld-sec.fallen .bld-note{opacity:1;transform:none}
.bld-art{position:relative}
.bld-svg{display:block;width:100%;height:auto;overflow:visible}
.bld-svg *{transform-box:fill-box}
.bld-art[data-hl="1"] .bld-arch,.bld-art[data-hl="1"] .bld-deco,
.bld-art[data-hl="2"] .bld-found,.bld-art[data-hl="2"] .bld-deco,
.bld-art[data-hl="3"] .bld-found,.bld-art[data-hl="3"] .bld-arch{opacity:.18;transition:opacity .3s}
.bld-found,.bld-arch,.bld-deco{transition:opacity .3s}
.bld-layers li.hot{opacity:1}
@media (max-width:980px){.bld-grid{grid-template-columns:1fr}.bld-art{order:-1;max-width:520px}}
@media (min-width:981px){.bld-grid{grid-template-columns:.85fr 1.15fr}}
/* building layout: desktop = text + button on the left, building on the right; phone = text, building, then the button right under it */
.bld-grid{grid-template-areas:"copy art" "act art";row-gap:0}
.bld-copy{grid-area:copy;align-self:end}.bld-art{grid-area:art}.bld-act{grid-area:act;align-self:start}
@media (max-width:980px){.bld-grid{grid-template-areas:"copy" "art" "act";row-gap:26px}.bld-art{order:0;max-width:520px}.bld-act .bld-btn{margin-top:0}}
/* building: her payoff line under it (the right base gives freedom) */
.bld-pay{margin:26px 0 0;font:700 clamp(18px,1.6vw,22px)/1.4 var(--display);letter-spacing:-.01em;color:var(--ink);max-width:36ch}
.bld-pay mark{background:linear-gradient(transparent 58%,var(--mint) 58%,var(--mint) 92%,transparent 92%);color:inherit}
.bld-act .bld-btn{margin-top:22px}

/* v5 · "Πριν από…  …υπάρχει": the familiar tools crossed out one by one (left), the real question large (right). No big numbers. */
.bf-stage2{display:grid;grid-template-columns:minmax(280px,.85fr) 1.15fr;gap:clamp(40px,7vw,130px);align-items:center;width:100%}
.bf-lab{display:block;font-size:clamp(26px,2.2vw,36px);line-height:1;color:var(--ink)!important;margin-bottom:clamp(16px,2.6vh,28px)}
.bf-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,2vh,20px);counter-reset:none}
.bf-list li{font:700 clamp(18px,1.45vw,22px)/1.3 var(--display);letter-spacing:-.01em;color:rgba(35,31,32,.3);transition:color .5s}
.bf-list li.on{color:var(--ink)}
.bf-list li.done{color:rgba(35,31,32,.26)}
.bf-list .bf-x{transition:background-size .7s cubic-bezier(.6,0,.2,1) .15s}
.bf-list li.on .bf-x,.bf-list li.done .bf-x{background-size:100% 100%}
.bf-ans-m{display:none}
.bf-answers{position:relative;min-height:clamp(230px,36vh,380px)}
.bf-ans{position:absolute;inset:0;display:flex;align-items:center;margin:0;font:700 clamp(36px,4.4vw,76px)/1.06 var(--display);letter-spacing:-.025em;color:var(--ink);visibility:hidden}
.bf-ans.on{visibility:visible}
.bf-ans .bf-hl{transition:background-size .9s cubic-bezier(.2,.7,.1,1) .8s}
.bf-ans.on .bf-hl{background-size:100% 100%}
.bf-right .bf-dots{display:flex;gap:6px;margin-top:clamp(18px,3vh,30px)}
.bf-right .bf-dots i{width:22px;height:3px;border-radius:2px;background:rgba(35,31,32,.14);transition:background .4s}
.bf-right .bf-dots i.on{background:var(--ink)}
@media (max-width:980px){
  .bf-stage2{grid-template-columns:1fr}
  .bf-right{display:none}
  .bf-list{gap:30px}
  .bf-list li,.bf-list li.done{color:rgba(35,31,32,.38)}
  .bf-ans-m{display:block;margin-top:8px;font:700 clamp(26px,7vw,34px)/1.12 var(--display);letter-spacing:-.02em;color:var(--ink)}
}
/* about: her belief leads "what I believe" (open, large statement; the three points follow) */
.belief{max-width:1100px}
.belief .statement{margin-top:14px}
.belief-sub{margin-top:clamp(48px,7vw,90px)}
/* "Πριν από…" and "…υπάρχει" share one line; list and answer both start right under them */
@media (min-width:981px){
  .bf-stage2{align-items:start}
  .bf-left .bf-lab,.bf-right .bf-lab{height:clamp(30px,2.6vw,40px);display:flex;align-items:flex-end;margin-bottom:clamp(18px,2.6vh,28px)}
  .bf-ans{align-items:flex-start}
  .bf-answers{min-height:clamp(250px,34vh,340px)}
  .bf-right .bf-dots{margin-top:8px}
}

/* v5 · equation layout: the three tools on one row (label above each, no collisions), "=" then the result below */
.eq-sec .eq-pain{max-width:30ch;font-size:clamp(20px,1.8vw,26px);line-height:1.4;color:#fff;margin:0 auto clamp(34px,5vh,56px)}
.eq-sec .eq-build{display:grid!important;grid-template-columns:auto auto auto auto auto;justify-content:center;align-items:end;column-gap:clamp(14px,1.8vw,30px);row-gap:clamp(14px,2.4vh,26px);font-size:clamp(32px,4.2vw,68px)!important;margin-top:0!important}
.eq-sec .eq-build .br{display:none}
.eq-sec .eq-build .t{display:flex;flex-direction:column;align-items:center;padding-bottom:.06em}
.eq-sec .eq-build .eq-tag{position:static!important;transform:none!important;display:block;margin:0 0 .35em;font-size:clamp(18px,1.4vw,24px)!important;line-height:1;letter-spacing:0}
.eq-sec .eq-build .op{align-self:end;padding-bottom:.08em}
.eq-sec .eq-build .op:nth-of-type(3){grid-column:1/-1;justify-self:center;padding:0;line-height:1}
.eq-sec .eq-build .res{grid-column:1/-1;justify-self:center;font-size:1.2em!important}
.eq-sec .lead{margin-top:clamp(26px,4vh,40px)!important}
@media (max-width:760px){
  .eq-sec .eq-build{grid-template-columns:1fr;row-gap:10px;font-size:clamp(34px,10vw,46px)!important}
  .eq-sec .eq-build>*{grid-column:1;justify-self:center}
  .eq-sec .eq-build .res{font-size:1em!important}
}

/* v5 · seven lessons without numbers: titles only on the left; her hourglass + the lesson's words on the right; quiet progress lines */
.no-nums .six-i{gap:0}
.no-nums .six-glyph{display:block;width:clamp(28px,2.4vw,38px);height:clamp(48px,4vw,64px);background:url(../img/kit/logo-hourglass-mint.svg) no-repeat center/contain;margin:0 0 clamp(18px,2.6vh,28px)}
.no-nums .six-txt{font:700 clamp(24px,2.3vw,36px)/1.25 var(--display);letter-spacing:-.015em;max-width:20ch}
.no-nums .six-dots{display:flex;gap:6px;margin-top:clamp(22px,3.4vh,34px)}
.no-nums .six-dots i{width:20px;height:3px;border-radius:2px;background:rgba(35,31,32,.14);transition:background .4s}
.no-nums .six-dots i.on{background:var(--ink)}
.no-nums .six-show{top:calc(50vh - 120px)}
@media (max-width:980px){.no-nums .six-d{margin-left:0}}
.eq-sec .eq-build .eq-tag{font-size:clamp(22px,1.8vw,30px)!important;margin-bottom:.3em}

/* v5 · programme journey: one section (preparation → Discover/Embrace/Celebrate in detail → +1 → her tools → the Book, landscape, last) */
#journey .lp-h .lead{max-width:46ch;margin-top:14px}
.jr-end{display:flex;align-items:baseline;gap:18px;max-width:760px;margin:clamp(26px,4vh,40px) 0;padding:16px 0;border-top:1px solid rgba(255,255,255,.14)}
.jr-end .hand{flex:none;min-width:170px;font-size:26px;color:var(--mint)!important}
.jr-end p{margin:0;color:rgba(255,255,255,.78);font-size:17px}
.jr-end b{color:#fff}
.jr-phases .pick-row button b{font-size:clamp(18px,1.5vw,22px)}
.jr-phases .pick-row button small{opacity:.7}
.jr-phases .sess h3{font-size:clamp(24px,2.2vw,32px)}
.jr-phases .sess-sub{display:block;font:700 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin:20px 0 10px}
.jr-phases .sess .ticks li{color:rgba(255,255,255,.88)}
.jr-tools{margin:clamp(50px,7vh,80px) 0 0;padding-top:clamp(30px,4vh,44px);border-top:1px solid rgba(255,255,255,.14)}
.jr-tools .hand{display:block;font-size:28px;color:var(--mint)!important;margin-bottom:8px}
.jr-tools h3{color:#fff;max-width:28ch;margin:0}
.jr-tl{list-style:none;margin:clamp(24px,3.5vh,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(18px,2.4vw,34px)}
.jr-tl li{display:flex;flex-direction:column;gap:8px}
.jr-tl b{font:700 clamp(18px,1.4vw,21px)/1.2 var(--display);color:var(--mint)}
.jr-tl span{color:rgba(255,255,255,.75);font-size:15.5px;line-height:1.5}
.jr-lock{margin-top:22px;font-size:13.5px;color:rgba(255,255,255,.5)}
.jr-book{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center;margin-top:clamp(60px,9vh,110px);padding-top:clamp(40px,6vh,70px);border-top:1px solid rgba(255,255,255,.14)}
.jr-book .jr-last{display:block;font-size:28px;color:var(--mint)!important;margin-bottom:8px}
.jr-book h3{color:#fff;margin:0}
.jr-book .lead{color:rgba(255,255,255,.78);margin-top:18px}
.jr-book .link{color:#fff}
.jr-me{margin-top:20px;color:rgba(255,255,255,.78)}
.jr-me .hand{font-size:30px;color:var(--mint)!important;margin-right:6px}
/* the landscape book: cover, page edges, a seal */
.book-land{position:relative;aspect-ratio:1213/867;max-width:620px;margin-left:auto;transform:perspective(1600px) rotateY(-14deg) rotateX(5deg);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.book-land:hover{transform:perspective(1600px) rotateY(-6deg) rotateX(2deg)}
.book-land img{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:cover;border-radius:3px 8px 8px 3px;box-shadow:0 40px 70px -30px rgba(0,0,0,.6)}
.book-land .bl-pg{position:absolute;inset:0;border-radius:3px 8px 8px 3px;background:#F4F3EF;z-index:1}
.book-land .bl-pg:nth-of-type(1){transform:translate(8px,7px)}
.book-land .bl-pg:nth-of-type(2){transform:translate(15px,13px);background:#E8E6E0}
.book-land .bl-seal{position:absolute;z-index:3;right:-18px;top:-18px;width:96px;height:96px;border-radius:50%;background:var(--ink);color:var(--mint);display:grid;place-items:center;text-align:center;font:400 19px/1.05 var(--hand);transform:rotate(12deg);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
@media (max-width:980px){.jr-book{grid-template-columns:1fr}.book-land{margin:10px auto 0;transform:none}.jr-end{flex-direction:column;gap:4px}}

/* ===== v5 · no eyebrows, no annotations (Anthony, Oct 2026) =====
   Eyebrows = labels above headings; annotations = handwritten side notes, hints and stickers.
   Handwriting that is part of a headline, her signature, and her line after the building falls stay. */
.kicker,.eyebrow,.bk,.lp-h .bk,
.hx-sub,.sess-sub,.offer .tag,.tag,.st-en,.steps4 .n,
.tool-sec .tool-n,.eq-tag,.tool-tag,
.hx-txt>.hand,.self4-panels .hand,.sc-step .hand,.sc-step small,
.offer-q,.hint,.ba-hint,.note,.ph-note,.ig-hi,.qnote,.cmp-note,.eisai-sign,
.self4-prog .hand,.w3d-more .hand,.scroll-cue .hand,
.jr-end .hand,.jr-tools>.hand,.jr-last,.belief .eyebrow,.thisisme .hand,
.c3-tag,.locked-note{display:none!important}
/* labels that carry meaning: plain text, not handwriting */
.bf-lab{font:700 clamp(15px,1.1vw,17px)/1 var(--body)!important;letter-spacing:.02em;text-transform:none;color:var(--muted)!important}
.jr-me .hand,.lesson03 .hand{font:700 1em/1.4 var(--display)!important;color:inherit!important;display:inline!important;margin:0 .25em 0 0!important}
.lesson03 .hand{color:#fff!important}
.hd-quote{font:400 clamp(18px,1.5vw,22px)/1.5 var(--body)!important;font-style:italic!important;color:var(--ink-2)!important}
.jr-end{gap:0}

/* v5 · programme journey, light & open: a mint line drawing down through the stages (no boxes) */
.jr2{position:relative;list-style:none;margin:clamp(40px,6vh,70px) 0 0;padding:0 0 0 clamp(56px,6vw,96px)}
.jr2-line{position:absolute;left:clamp(17px,2vw,31px);top:14px;bottom:30px;width:2px;background:rgba(35,31,32,.1)}
.jr2-line i{position:absolute;inset:0;background:var(--mint);transform-origin:50% 0}
.jr2-step{position:relative;padding:0 0 clamp(54px,8vh,96px)}
.jr2-node{position:absolute;left:calc(-1 * clamp(56px,6vw,96px) + clamp(18px,2vw,32px));top:6px;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px rgba(35,31,32,.25);transition:box-shadow .4s,background .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.jr2-step.on .jr2-node{background:var(--mint);box-shadow:none}
.jr2-icon{width:40px;height:40px;top:0;background:#fff!important;box-shadow:none!important;display:grid;place-items:center}
.jr2-icon img{width:30px;height:30px;object-fit:contain;transition:transform .6s cubic-bezier(.3,1.6,.5,1);transform:scale(.6);opacity:.35}
.jr2-step.on .jr2-icon img{transform:none;opacity:1}
.jr2 h3{font:700 clamp(24px,2.4vw,36px)/1.15 var(--display);letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
.jr2-small h3{font-size:clamp(20px,1.8vw,26px)}
.jr2-step p{margin:0;color:var(--ink-2);font-size:17px;line-height:1.6;max-width:56ch}
.jr2-en{font:700 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:10px;vertical-align:middle}
.jr2-q{font:700 clamp(18px,1.5vw,21px)/1.3 var(--display)!important;color:var(--ink)!important;margin-bottom:10px!important}
.jr2-txt .ticks{margin-top:18px}
.jr2-row{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,70px);align-items:center}
.jr2-phase:nth-of-type(odd) .jr2-ph{order:-1}
.jr2-ph{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;max-height:62vh}
.jr2-ph img{width:100%;height:100%;object-fit:cover}
.jr2-lead{font-size:clamp(18px,1.5vw,21px)!important;color:var(--ink)!important}
.jr2-tl{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(18px,2.4vw,34px)}
.jr2-tl li{display:flex;flex-direction:column;gap:6px;padding-left:18px;position:relative}
.jr2-tl li::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:50%;background:var(--mint)}
.jr2-tl b{font:700 clamp(17px,1.35vw,20px)/1.2 var(--display);color:var(--ink)}
.jr2-tl span{color:var(--ink-2);font-size:15.5px;line-height:1.5}
.jr2-lock{margin-top:20px!important;font-size:13.5px!important;color:var(--muted)!important}
.jr2-book{padding-bottom:0}
.jr2-book .book-land{margin:0 auto}
.jr2-me{margin-top:18px!important}
.jr2-me b{font-family:var(--display);color:var(--ink);margin-right:4px}
@media (max-width:980px){
  .jr2{padding-left:44px}
  .jr2-line{left:15px}
  .jr2-node{left:-29px}
  .jr2-row{grid-template-columns:1fr}
  .jr2-phase:nth-of-type(odd) .jr2-ph{order:0}
  .jr2-ph{max-height:none;aspect-ratio:4/3}
}
.tool-sec .tool-q{font:700 clamp(18px,1.5vw,22px)/1.35 var(--display)!important;letter-spacing:-.01em;color:var(--ink-2)!important;margin:14px 0 0}
/* journey: the travelling dot at the tip of the line */
.jr2-dot{position:absolute;left:50%;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 6px rgba(0,242,166,.22),0 0 22px rgba(0,242,166,.6);z-index:2}
.jr2-book .book-land{transform:none}
@media (prefers-reduced-motion:reduce){.jr2-dot{display:none}}

/* v5 · "sound familiar?": her pains as large typographic quotes, no cards */
#sound-familiar{padding:clamp(80px,12vh,140px) 0}
.bubbles{display:grid!important;grid-template-columns:1fr!important;gap:clamp(22px,3.6vh,40px)!important;max-width:1060px;margin:0 auto!important}
.bubbles .bubble{background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;font:700 clamp(26px,3.2vw,50px)/1.14 var(--display)!important;letter-spacing:-.022em;color:var(--ink);max-width:22em}
.bubbles .bubble::before{content:"«"!important;display:inline!important;font:inherit!important;height:auto!important;color:var(--mint);margin-right:.06em}
.bubbles .bubble::after{content:"»";color:var(--mint);margin-left:.04em}
.bubbles .bubble:nth-child(2){transform:none!important;margin-left:clamp(0px,9vw,150px)}
.bubbles .bubble:nth-child(3){margin-left:clamp(0px,18vw,300px)}
@media (max-width:760px){.bubbles .bubble:nth-child(n){margin-left:0}}
/* the quote mark hangs in the margin (the line reveal wraps lines in blocks, so marks can't sit inline) */
.bubbles .bubble{position:relative}
.bubbles .bubble::before{position:absolute!important;left:-.62em;top:-.02em;margin:0!important;font-size:1em!important}
.bubbles .bubble::after{content:none!important}
@media (max-width:760px){.bubbles .bubble{padding-left:.62em!important}.bubbles .bubble::before{left:0}}
/* services: v1's comparison table, open (hairlines; the programme column in a light mint tint) */
#compare .compare{margin-top:clamp(28px,4vh,44px)}
#compare .compare td{font-size:16.5px;line-height:1.5;color:var(--ink)}
#compare .compare tbody th{display:table-cell!important}

/* v5 · her pains, one quote at a time (GSAP); the stacked quotes above stay as the no-motion fallback */
.pq-on .bubbles{display:none!important}
.pq-stage{max-width:1040px;margin:0 auto;text-align:center}
.pq{min-height:3.5em;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;column-gap:.26em;margin:0;font:700 clamp(30px,4vw,62px)/1.12 var(--display);letter-spacing:-.025em;color:var(--ink)}
.pq .pq-w{display:inline-block}
.pq .pq-q{color:var(--mint)}
.pq-hl{display:contents}
.pq-hl .pq-w{background:linear-gradient(transparent 62%,var(--mint) 62%,var(--mint) 92%,transparent 92%) no-repeat 0 0/0% 100%;transition:background-size .5s cubic-bezier(.2,.7,.1,1)}
.pq-hl.on .pq-w{background-size:100% 100%}
.pq-hl.on .pq-w:nth-child(2){transition-delay:.12s}.pq-hl.on .pq-w:nth-child(3){transition-delay:.24s}.pq-hl.on .pq-w:nth-child(4){transition-delay:.36s}.pq-hl.on .pq-w:nth-child(5){transition-delay:.48s}
.pq-dots{display:flex;justify-content:center;gap:8px;margin-top:clamp(22px,3.4vh,36px)}
.pq-dots button{all:unset;cursor:pointer;width:26px;height:16px;display:grid;place-items:center}
.pq-dots button::before{content:"";width:100%;height:3px;border-radius:2px;background:rgba(35,31,32,.16);transition:background .4s}
.pq-dots button.on::before{background:var(--ink)}
.pq-dots button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
/* one continuous marker: words carry their own trailing space instead of a flex gap */
.pq{column-gap:0!important}
.pq .pq-w{padding-right:.26em}
.pq .pq-q:first-child{margin-right:.2em}

/* the three steps are Discover / Embrace / Celebrate (titles), her Greek question underneath; (in)/(out) beside */
.st-io,.jr2-io{font:400 .62em/1 var(--hand);color:var(--mint);margin-left:.25em;letter-spacing:0;vertical-align:.1em}
.steps4 .st-q{margin:2px 0 8px!important;font:700 17px/1.3 var(--display)!important;color:#fff!important}
.jr2-io{color:var(--ink);opacity:.55;font-size:.66em}
/* programme journey header: her equation + line, on white */
.jr2-head .jeq{font:400 clamp(19px,1.8vw,24px)/1.5 var(--body);color:var(--ink);margin:18px 0 10px}
.jr2-head .jeq b{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.jr2-head .jeq i{font-style:normal;font-family:var(--hand);color:var(--ink);opacity:.6;font-size:1.05em}
.jr2-head .jeq .op{color:var(--mint);font-weight:700;margin:0 .2em}
.jr2-head .jeq .res{background:var(--mint);color:var(--ink);padding:.05em .3em;border-radius:8px}
.jr2-head .lead{margin:0;max-width:40ch}
.jr2-head .lead .arrow{color:var(--mint);font-weight:700;margin-right:.3em}
.jr2-meta{margin:14px 0 0;color:var(--muted);font-size:15.5px}
.jr2-ph{background:#F7F6F2}
.jr2-ph img{object-fit:contain}
/* her step artworks as cards (like the home page): whole image, slight tilt, soft shadow */
.jr2-ph{aspect-ratio:900/1125!important;max-height:none!important;max-width:420px;border-radius:22px;background:#fff;box-shadow:0 30px 60px -30px rgba(35,31,32,.35);transform:rotate(-1.5deg);justify-self:center}
.jr2-phase:nth-of-type(odd) .jr2-ph{transform:rotate(1.5deg)}
.jr2-ph img{object-fit:cover!important}
.jr2-ph{box-shadow:0 34px 70px -28px rgba(35,31,32,.45),0 0 0 1px rgba(35,31,32,.07)!important}
.jr2-ph.img-rv,.jr2-ph.img-rv.in{clip-path:none!important}

/* v5 · about: three credentials, three columns */
.cred.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.cred.c3{grid-template-columns:1fr}}

/* v5 · programme journey as one full-page carousel: her equation as giant clickable titles, her own step graphics
   (from stylebydesign.gr), her copy, a photo of a woman; drag the slides left and right; lines + arrows to page */
.jc{min-height:100svh;display:flex;flex-direction:column;padding:clamp(40px,7vh,80px) 0 clamp(28px,5vh,56px);overflow:hidden;position:relative;background:#fff}
.jc-head{padding:0 var(--gut);text-align:center}
.jc-head h2{font:700 clamp(24px,2.4vw,38px)/1.1 var(--display);letter-spacing:-.02em;margin:0}
.jc-sub{margin:10px auto 0;color:var(--ink-2);font-size:clamp(15px,1.15vw,17px);max-width:60ch}
.jc-sub .arrow{color:var(--mint);font-weight:700;margin-right:.3em}
.jc-titles{display:flex;align-items:baseline;justify-content:center;gap:.28em;padding:clamp(14px,3vh,34px) var(--gut) 0;white-space:nowrap;font:700 80px/1 var(--display);letter-spacing:-.01em;text-transform:uppercase}
.jc-t{all:unset;cursor:pointer;color:rgba(35,31,32,.14);transition:color .5s}
.jc-t:hover{color:rgba(35,31,32,.38)}
.jc-t.on{color:var(--ink)}
.jc-t:focus-visible{outline:2px solid var(--mint);outline-offset:6px}
.jc-op{color:var(--mint);font-weight:700;font-size:.5em;transform:translateY(-.25em)}
.jc-view{flex:1;display:flex;align-items:center;margin-top:clamp(16px,3vh,36px);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.jc-view.drag{cursor:grabbing}
.jc-track{display:flex;width:100%;will-change:transform}
.jc-s{flex:0 0 100%;box-sizing:border-box;padding:0 max(var(--gut),calc((100% - 1340px) / 2));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,.62fr);gap:clamp(24px,4vw,70px);align-items:center}
.jc-art{display:flex;justify-content:center;align-items:center}
.jc-art svg{width:100%;max-width:440px;height:auto;overflow:visible}
.jc-txt .hand{display:block;font-size:clamp(26px,2.3vw,36px);line-height:1.15;margin:0 0 14px}
.jc-txt .jc-lead{font:700 clamp(19px,1.5vw,23px)/1.35 var(--body);margin:0 0 14px;max-width:34ch;color:var(--ink)}
.jc-txt p{margin:0 0 14px;font-size:clamp(16px,1.15vw,18px);line-height:1.6;color:var(--ink-2);max-width:44ch}
.jc-txt .end{font-weight:700;color:var(--ink);margin:0}
.jc-ph img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:22px;pointer-events:none}
.jc-pg{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:clamp(18px,3vh,34px)}
.jc-ar{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;transition:background .3s,opacity .3s}
.jc-ar:hover{background:#CCFCED}
.jc-ar[disabled]{opacity:.2;pointer-events:none}
.jc-ar svg{width:22px;height:22px}
.jc-lines{display:flex;gap:8px}
.jc-ln{all:unset;cursor:pointer;width:56px;height:22px;position:relative}
.jc-ln::before,.jc-ln i{content:"";position:absolute;left:0;right:0;top:10px;height:2px;border-radius:2px;background:rgba(35,31,32,.15)}
.jc-ln i{background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.jc-ln.on i{transform:scaleX(1)}
.jc-ln:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.jc-incl{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:clamp(16px,2.5vh,26px) var(--gut) 0;font-size:15px;color:var(--ink-2)}
.jc-incl span{display:flex;align-items:center;gap:8px}
.jc-incl span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint)}
@media (max-width:900px){
  .jc-s{grid-template-columns:1fr;gap:18px;align-items:start;align-content:start}
  .jc-art svg{max-width:min(62vw,300px)}
  .jc-ph{display:none}
  .jc-txt .hand,.jc-txt .jc-lead,.jc-txt p{max-width:none}
  .jc-titles{gap:.22em}
  .jc-view{align-items:flex-start}
}
/* the tools + Book, after the carousel: same quiet line, fewer stops */
.jr2-after{padding-top:clamp(30px,5vw,60px)}

/* v5 · testimonials on the service pages: the client's words alone (no photo: we have none of the client, and
   Sophia's photo beside a client's quote read as if she were the client). Centred, open, no box. */
.proof.proof-q{display:block;max-width:980px;margin:0 auto;text-align:center}
.proof-q .qmark{font:700 clamp(120px,12vw,180px)/.6 var(--display);height:clamp(48px,5vw,72px);margin:0 auto 6px}
.proof-q blockquote{font:700 clamp(26px,3.1vw,46px)/1.22 var(--display);letter-spacing:-.02em;text-wrap:balance}
.proof-q .who{display:block;margin-top:clamp(22px,3vw,34px)}
.proof-q .who b{display:block;font:700 17px/1.3 var(--body)}
.proof-q .who span{display:block;margin-top:6px}

/* v5 · journey carousel, pinned: the panel sticks under the header and the page scrolls through the three steps
   (section = three panels tall; JS sets --jc-top to the header's height so the title is never under it).
   Phones and short screens keep the swipe carousel (.is-pin is only set where the panel fits). */
.jc-pin{position:relative;background:#fff}
.jc-pin.is-pin{height:calc((100vh - var(--jc-top,78px)) * 3)}
.jc-pin.is-pin .jc{position:sticky;top:var(--jc-top,78px);height:calc(100vh - var(--jc-top,78px));min-height:0;box-sizing:border-box;padding:clamp(18px,3.5vh,44px) 0 clamp(14px,2.5vh,30px)}
.jc-pin.is-pin .jc-view{min-height:0;align-items:stretch}
.jc-pin.is-pin .jc-track{height:100%}
.jc-pin.is-pin .jc-s{height:100%;grid-template-rows:100%}
.jc-pin.is-pin .jc-art{height:100%;min-height:0}
.jc-pin.is-pin .jc-art svg{width:100%;height:100%;max-height:100%}
.jc-pin.is-pin .jc-txt{align-self:center}
.jc-pin.is-pin .jc-ph{align-self:center;height:100%;display:flex;align-items:center;min-height:0}
.jc-pin.is-pin .jc-ph img{max-height:100%;width:100%;height:auto}

/* GSAP ScrollTrigger mis-measures every trigger under CSS smooth scrolling (a refresh after late images shifted all
   starts by one scroll height, so nothing re-animated on the way back up). In-page links already scroll smoothly
   through goTo() in v4.js with an explicit behavior, so the CSS rule isn't needed. */
html{scroll-behavior:auto}

/* v5 · programme price card: the name instead of a repeat of the hero's list */
.pcard .pc-name{color:#fff;font:700 clamp(22px,2vw,28px)/1.1 var(--display);margin:0 0 14px;letter-spacing:-.015em}

/* v5 · "Σου ακούγεται γνωστό;" in her handwriting, small and centred above the cycling quotes */
.lp-h.pq-head{text-align:center;margin-left:auto;margin-right:auto;max-width:none}
.pq-head .pq-title{font:400 clamp(26px,2.4vw,36px)/1.2 var(--hand);letter-spacing:0;color:var(--ink);margin:0}

/* v5 · programme page: Sophia, once, between the client's words and the price. Open: photo + three lines, no box. */
.sb-band{background:#fff}
.sb-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,96px);align-items:center;max-width:1080px}
.sb-ph{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5}
.sb-ph img{width:100%;height:100%;object-fit:cover;display:block}
.sb-txt .hand{display:block;font-size:clamp(26px,2.4vw,36px);color:var(--ink);margin:0 0 14px}
.sb-txt h2{font:700 clamp(28px,3.2vw,46px)/1.12 var(--display);letter-spacing:-.02em;margin:0}
.sb-txt .sb-cred{margin:22px 0 0;color:var(--muted);font-size:15px}
.sb-txt .sb-cred::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mint);margin-right:10px;vertical-align:middle}
.sb-txt p:last-child{margin:18px 0 0;font-weight:700}
@media (max-width:800px){.sb-grid{grid-template-columns:1fr}.sb-ph{max-width:360px}}

/* v5 · method intro: her tulip (alignment, in her handwriting) beside her statement; open, on white */
.stmt-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:center}
.stmt-pair .stmt-img{margin:0}
.stmt-pair .stmt-img img{display:block;width:100%;height:auto}
.stmt-pair .statement{font-size:clamp(28px,3vw,48px);margin:0;max-width:none}
@media (max-width:820px){.stmt-pair{grid-template-columns:1fr}.stmt-pair .stmt-img{max-width:420px;margin:0 auto}}

/* v5 · service pages: back to all services, above the headline (plain link, no pill) */
.svc-back{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;font:400 15px/1.2 var(--body);color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.svc-back span{color:var(--mint);font-weight:700;transition:transform .3s var(--ease)}
.svc-back:hover{color:var(--ink);border-color:var(--ink)}
.svc-back:hover span{transform:translateX(-4px)}

/* v5 · fixes from the first-visitor review (4 Oct 2026) */
/* One-Off topics sit on a light section: the dark-section tab styling left three of four tabs white-on-white */
.bg-stone .phases .pick-row,.lp-sec:not(.bg-ink) .phases .pick-row{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.bg-stone .phases .pick-row button{background:#fff;color:var(--ink)}
.bg-stone .phases .pick-row button:hover{background:#fff;box-shadow:0 20px 40px -26px rgba(35,31,32,.35)}
.bg-stone .phases .pick-row button[aria-pressed=true]{background:var(--mint);color:var(--ink)}
/* services comparison on phones: no sideways scroll (it hid the main programme); each row is its label, then the two services side by side */
@media (max-width:700px){
  .compare-wrap{overflow:visible;margin:0;padding:0}
  .compare{min-width:0;display:block;font-size:15px}
  .compare thead,.compare tbody{display:block}
  .compare tr{display:grid;grid-template-columns:1fr 1fr}
  .compare th,.compare td{display:block;padding:12px 12px}
  .compare tbody th{grid-column:1/-1;width:auto;padding:18px 0 4px;border-bottom:0;text-transform:none;letter-spacing:0;font:700 15px/1.3 var(--body);color:var(--ink)}
  .compare thead th:first-child,.compare tbody tr:last-child th{display:none}
  .compare thead th{font-size:18px;padding:14px 12px}
  .compare thead .fx{border-radius:14px 14px 0 0}
  .compare tbody tr:last-child td{border-bottom:0}
  .compare .btn-sm{white-space:normal;text-align:center;justify-content:center}
}
/* service pages: the line to the main programme; a small "από" in the price card */
.to-main{padding:clamp(40px,6vw,72px) 0;background:#fff;text-align:center}
.to-main p{margin:0 auto;max-width:760px;font:400 clamp(19px,1.6vw,23px)/1.5 var(--body);color:var(--ink)}
.to-main .link{font-weight:700;white-space:nowrap}
.pcard .big small.from{display:inline;font:400 .32em/1 var(--body);color:inherit;opacity:.75;margin:0 .15em 0 0;vertical-align:.6em;letter-spacing:0;text-transform:none}
/* consent line: flex split its text and link into three columns; one flowing sentence with the box hanging left */
.consent{display:block;position:relative;padding-left:30px}
.consent input{position:absolute;left:0;top:0;margin-top:2px}
/* header: on small laptops and tablets (821–1180px) the menu folds into the burger but the booking button stays;
   below 821px the mobile bar takes over */
@media (min-width:821px) and (max-width:1180px){.head-in .head-cta{display:inline-flex}}
@media (max-width:820px){.head-in .head-cta{display:none}}
/* contact page: the booking bar would cover the form it points to */
body:has(#call .form) .mbar{display:none!important}
/* about: credentials as one sentence (no big numbers) */
.cred-line{margin:clamp(26px,4vw,44px) 0 0;max-width:820px;font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:rgba(255,255,255,.75)}
/* shop on phones: two products per row instead of ten screens of one */
@media (max-width:560px){
  .sh-grid,.sh-grid-3{grid-template-columns:1fr 1fr;gap:10px}
  .sh-card{padding:8px 8px 14px;border-radius:20px}
  .sh-card .sh-name{font-size:15px;line-height:1.25}
  .sh-card .sh-tag{font-size:13px;line-height:1.35}
}
/* programme tools: five tools as 3 + 2, never 4 + one alone */
@media (min-width:900px){.jr2-tools .jr2-tl{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* home: her name, in her handwriting, above the question (an eyebrow would be hidden) */
.hero-hi{display:block;font-size:clamp(28px,2.6vw,40px);line-height:1.1;color:var(--ink);margin:0 0 12px;transform:rotate(-1.5deg);transform-origin:left}

/* v5 · about: her story in three beats, each beside a photo of her; her belief large in the middle. Open, no boxes. */
.st5 .wrap{max-width:1180px}
.st5-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:center}
.st5-row+.st5-row,.st5-belief+.st5-row{margin-top:clamp(56px,9vw,120px)}
.st5-rev .st5-ph{order:2}
.st5-ph{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;max-width:440px;width:100%}
.st5-ph img{width:100%;height:112%;object-fit:cover;display:block;margin-top:-6%}
.st5-l{transform:rotate(-2deg);justify-self:end}
.st5-r{transform:rotate(2deg);justify-self:start}
.st5-tall{aspect-ratio:3/4}
.st5-txt p{font-size:clamp(17px,1.3vw,19px);line-height:1.65;color:var(--ink-2);margin:0 0 16px;max-width:46ch}
.st5-txt .st5-lead{font:700 clamp(24px,2.4vw,36px)/1.22 var(--display);letter-spacing:-.015em;color:var(--ink);max-width:22ch}
.st5-end{font:700 clamp(26px,2.6vw,40px)/1.2 var(--display)!important;letter-spacing:-.02em;color:var(--ink)!important;margin-top:28px!important;max-width:20ch!important}
.st5-end em{font-style:normal;background:linear-gradient(transparent 58%,var(--mint) 58%,var(--mint) 92%,transparent 92%)}
.st5-hg{display:block;width:clamp(44px,4vw,60px);margin-top:26px}
.st5-belief{position:relative;max-width:980px;margin:clamp(64px,10vw,130px) auto 0;text-align:center}
.st5-belief .statement{font-size:clamp(28px,3.4vw,52px);line-height:1.18;margin:0 auto}
.st5-spark{width:clamp(56px,6vw,84px);display:block;margin:0 auto 22px}
@media (max-width:820px){
  .st5-row{grid-template-columns:1fr;gap:22px}
  .st5-rev .st5-ph{order:0}
  .st5-ph{max-width:340px;justify-self:center!important}
  .st5-txt .st5-lead,.st5-txt p,.st5-end{max-width:none!important}
}

/* v5 · about, with Sophia's live text merged in (4 Oct 2026). Open layouts, no boxes. */
.ab-title{margin:-6px 0 26px;font:600 14px/1.4 var(--body);letter-spacing:.02em;color:var(--ink-2)}
.ab-sub{margin:16px 0 0;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--ink-2);max-width:52ch}
/* stylist vs me: two open columns, a thin rule between, hers in ink with mint marks */
.ab-vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(28px,6vw,88px);margin-top:clamp(30px,4vw,52px);align-items:start}
.ab-vs-col h3{font:700 clamp(20px,1.8vw,26px)/1.2 var(--display);margin:0 0 18px;letter-spacing:-.01em}
.ab-vs-col ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ab-vs-col li{position:relative;padding-left:30px;font-size:clamp(16px,1.2vw,18px);line-height:1.55}
.ab-them{color:var(--muted)}
.ab-them li::before{content:"";position:absolute;left:2px;top:.72em;width:14px;height:1.5px;background:currentColor;opacity:.6}
.ab-me{border-left:1px solid var(--line);padding-left:clamp(24px,4vw,56px)}
.ab-me h3{color:var(--ink)}
.ab-me li{color:var(--ink)}
.ab-me li::before{content:"";position:absolute;left:0;top:.42em;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:13px solid var(--mint)}
.ab-close{margin:clamp(36px,5vw,60px) 0 0;max-width:30ch;font:700 clamp(24px,2.4vw,36px)/1.22 var(--display);letter-spacing:-.015em}
.ab-close em{font-style:normal;background:linear-gradient(transparent 58%,var(--mint) 58%,var(--mint) 92%,transparent 92%)}
/* what you get */
.ab-offer{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,96px);align-items:center;max-width:1180px}
.ab-offer .lead{margin:18px 0 22px;max-width:56ch}
.ab-offer p{max-width:56ch}
.ab-gets{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.ab-gets li{position:relative;padding-left:28px;font-size:clamp(16px,1.25vw,19px);line-height:1.5}
.ab-gets li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;border-radius:50%;background:var(--mint)}
/* vision & mission */
.ab-vm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,6vw,96px)}
.ab-vm h2{color:var(--mint);margin:0 0 16px}
.ab-vm p{color:rgba(255,255,255,.82);font-size:clamp(16px,1.25vw,19px);line-height:1.6;max-width:48ch}
.ab-vm .ab-vm-big{color:#fff;font:700 clamp(22px,2.1vw,30px)/1.25 var(--display);letter-spacing:-.01em;margin-top:22px}
.ab-vm .ab-vm-big em{font-style:normal;color:var(--mint)}
.ab-vm .ab-gets li{color:#fff}
.ab-sign{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:clamp(40px,6vw,72px) 0 0;color:rgba(255,255,255,.8);font-size:clamp(16px,1.3vw,19px)}
.ab-sign img{height:clamp(44px,5vw,64px);width:auto}
@media (max-width:820px){
  .ab-vs,.ab-offer,.ab-vm{grid-template-columns:1fr}
  .ab-me{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:26px}
  .ab-offer-ph{max-width:320px;justify-self:center}
}

/* ================= v6 · from the first-visit review (4 Oct 2026) ================= */
/* service pages: how it works as three open steps (no numbers, no pin) */
.steps3{list-style:none;margin:clamp(20px,3vw,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.s3 figure{margin:0 0 18px;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5}
.s3 img{width:100%;height:100%;object-fit:cover;display:block}
.s3 h3{font:700 clamp(21px,1.8vw,26px)/1.15 var(--display);letter-spacing:-.01em;margin:0}
.s3 .hand{display:block;font-size:clamp(20px,1.7vw,24px);color:var(--ink-2);margin:4px 0 10px}
.s3 p{margin:0;color:var(--ink-2);font-size:16.5px;line-height:1.6;max-width:36ch}
@media (max-width:820px){.steps3{grid-template-columns:1fr}.s3 figure{aspect-ratio:16/10}}
/* price: open type on the section, not a black box (Sophia dislikes boxes) */
.offer-form .pcard{background:none;color:var(--ink);padding:0;border-radius:0;border-top:2px solid var(--ink);padding-top:22px}
.offer-form .pcard .eyebrow{display:none}
.offer-form .pcard .pc-name{color:var(--ink)}
.offer-form .pcard .big{color:var(--ink)}
.offer-form .pcard .big small{color:var(--muted)}
.offer-form .pcard .pn{color:var(--ink-2);font-size:15.5px;line-height:1.55;max-width:34ch}
.offer-form .pcard .opts2 div{border-color:var(--line)}
.offer-form .pcard .opts2 b{color:var(--ink)}
.offer-form .pcard .guar{border-top-color:var(--line);color:var(--ink-2);font-size:15px}
/* programme journey on phones: all three steps stacked, nothing hidden behind a swipe */
@media (max-width:900px){
  .jc-pin:not(.is-pin) .jc-titles,.jc-pin:not(.is-pin) .jc-pg{display:none}
  .jc-pin:not(.is-pin) .jc-view{cursor:auto;touch-action:auto;margin-top:8px}
  .jc-pin:not(.is-pin) .jc-track{flex-direction:column;transform:none!important;gap:56px}
  .jc-pin:not(.is-pin) .jc-s{flex:none}
  .jc-s .jc-mt{display:block}
}
.jc-mt{display:none;font:700 clamp(30px,8vw,44px)/1 var(--display);letter-spacing:-.01em;text-transform:uppercase;margin:0 0 6px}
/* home · like a brand: her real brand work beside a photo of her, the same four ideas under each; no cards, no labels */
.ab2{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:center;margin-top:clamp(30px,4vw,52px)}
.ab2-col{margin:0}
.ab2-ph{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/11}
.ab2-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ab2-col figcaption{margin-top:16px;font-size:clamp(16px,1.25vw,18px);line-height:1.55;color:var(--ink-2)}
.ab2-col figcaption b{color:var(--ink);font-family:var(--display);font-weight:700}
.ab2-words{display:block;margin:8px 0 10px;font:400 clamp(22px,1.9vw,28px)/1.2 var(--hand);color:var(--ink)}
.ab2-col .link{font-size:15px}
@media (max-width:820px){.ab2{grid-template-columns:1fr}.ab2 .an-arrow{transform:rotate(90deg);justify-self:center}}
/* home · the journey with her own step graphics, on a light ground */
.how-light .journey-eq .jeq{color:var(--ink)}
.how-light .journey-eq .jeq i,.how-light .journey-eq .jeq .op{color:var(--ink-2)}
.how-light .journey-eq .lead{color:var(--ink-2)}
.how-light .journey-cta .hand{color:var(--ink)}
.how3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(36px,5vw,64px);align-items:end}
.h3c .h3-art{height:clamp(150px,16vw,230px);display:flex;align-items:flex-end;margin-bottom:22px}
.h3c .h3-art svg{height:100%;width:auto;max-width:100%;overflow:visible}
.h3c h3{font:700 clamp(24px,2.2vw,32px)/1.1 var(--display);margin:0}
.h3c .st-io{font:400 .7em var(--hand);color:var(--ink-2)}
.h3c .st-q{font:700 17px/1.3 var(--body);margin:8px 0 6px;color:var(--ink)}
.h3c p{color:var(--ink-2);margin:0;max-width:34ch}
@media (max-width:820px){.how3{grid-template-columns:1fr}.h3c .h3-art{height:170px}}
/* home · one client, one quote */
.testis.one{grid-template-columns:minmax(0,760px);justify-content:center}
/* services: her question under each name, visible (it's what helps a woman choose) */
.offer-ask{display:block;font-size:clamp(20px,1.8vw,26px);line-height:1.2;color:var(--ink-2);margin:2px 0 10px}
.offer.feature .offer-ask{color:rgba(255,255,255,.8)}
/* services: extras as two open rows and one line, no filters or pill tags */
.xr{display:grid;gap:clamp(22px,3vw,34px);margin-top:clamp(26px,4vw,44px)}
.xr-row{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(18px,3vw,40px);align-items:center;text-decoration:none;color:inherit;border-top:1px solid var(--line);padding-top:clamp(22px,3vw,34px)}
.xr-row .pic{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.xr-row .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.xr-row:hover .pic img{transform:scale(1.04)}
.xr-row h3{font:700 clamp(24px,2.2vw,32px)/1.1 var(--display);margin:0}
.xr-row p{color:var(--ink-2);margin:0 0 12px;max-width:52ch}
.xr-meta{font-weight:700;display:inline-flex;align-items:center;gap:10px}
.xr-after{margin-top:clamp(30px,4vw,48px);font-size:clamp(17px,1.3vw,19px);max-width:62ch;border-top:1px solid var(--line);padding-top:22px}
@media (max-width:700px){.xr-row{grid-template-columns:1fr}}
/* contact: one open form beside her face and what happens on the call (on phones: face and call first, then the form) */
.ct-form{padding:0}
.ct-side .ct-ph{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3}
.ct-side .ct-ph img{width:100%;height:100%;object-fit:cover;display:block;object-position:50% 35%}
.ct-expect h2{margin:0 0 14px}
@media (max-width:900px){#call .split{display:flex;flex-direction:column-reverse;gap:40px}}
.offer.feature .offer-ask{color:var(--mint)!important}
/* services: the 1:1 card is as tall as its words, not its portrait photo (it left ~450px of empty black) */
.offer.wide .pic{position:relative;min-height:380px}
.offer.wide .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.offer.wide .pic{min-height:0;aspect-ratio:16/11}}
/* home: Φύσις sits on white; give both pictures the same quiet ground */
.ab2-ph{background:#fff}
/* v6 · review items 1–13 */
/* home: the crossed-out list holds the screen for less (it pinned ~2.3 screens for five changes) */
.before{height:calc(100vh + var(--n,5) * 26vh)}
@media (max-width:980px){.before{height:auto}}
/* home offers: open, like the rest of v6 (image, name, her question, a line, the price), no grey boxes */
#start .offer{background:none;border-radius:0;overflow:visible}
#start .offer:hover{transform:none;box-shadow:none}
#start .offer .pic{border-radius:var(--r-lg)}
#start .offer .body{padding:20px 0 0;gap:6px}
#start .offer p{color:var(--ink-2);font-size:16.5px}
#start .offer .meta{border-color:var(--line)}
#start .offer.feature{background:none;color:var(--ink)}
#start .offer.feature p,#start .offer.feature .soft-price{color:var(--ink-2)}
#start .offer.feature .offer-ask{color:var(--ink-2)!important}
#start .offer .soft-price{color:var(--ink);font-weight:600}
/* home quiz result: the whole book cover, not a crop of its title */
.clues3.done .c3-side{background:#fff url(../img/arch/book-cover.jpg) center/contain no-repeat}
/* services: the One-Off under the comparison */
.cmp-oneoff{margin:22px 0 0;font-size:clamp(16px,1.2vw,18px)}
/* One-Off topics: three open lines (situation, what we do, what you leave with), no labels or coloured boxes */
.flow3o{display:grid;gap:12px;max-width:760px}
.flow3o p{margin:0}
.flow3o .f-a{font:700 clamp(21px,1.9vw,27px)/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
.flow3o .f-b{font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:var(--ink-2)}
.flow3o .f-c{font-size:clamp(17px,1.3vw,19px);font-weight:700;color:var(--ink)}
.flow3o .f-c .arrow{color:var(--mint);margin-right:.2em}
.flow3o .hand{font-size:22px;font-weight:400;color:var(--ink-2);margin-left:6px}
/* Wardrobe counter: the number of outfits at a calm size */
.cap-out b{font-size:clamp(40px,4.4vw,60px)}
/* home: the stylist contrast, under "like a brand" */
.ab2-say{margin:clamp(30px,4vw,48px) auto 0;text-align:center;font:700 clamp(24px,2.6vw,38px)/1.2 var(--display);letter-spacing:-.015em;max-width:24ch}
.ab2-say em{font-style:normal;background:linear-gradient(transparent 58%,var(--mint) 58%,var(--mint) 92%,transparent 92%)}
/* phone menu: Shop is secondary */
.mobile-menu .mm-small{font-size:18px!important;opacity:.7}
/* home hero on phones: her face beside her name in the first screen */
.hero-hi-row{display:flex;align-items:center;gap:12px}
.hero-face{display:none}
@media (max-width:700px){.hero-face{display:block;width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:50% 30%;flex:none}.hero-hi-row .hero-hi{margin:0}}
/* shop: the way to the programme */
.sh-to-main{margin-top:22px;font-size:clamp(16px,1.2vw,18px)}
/* about · the 8-circle Human Identity Design map (in place of the Instagram post) */
.hx8{margin:0;max-width:520px;width:100%;justify-self:center}
.hx8-svg{width:100%;height:auto;display:block;overflow:visible}
.hx8-ring{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 6}
.hx8-l{stroke:var(--ink);stroke-width:1.5;opacity:.25}
.hx8-c circle{fill:var(--mint)}
.hx8-c text{font:700 19px var(--display);fill:var(--ink)}
.hx8-n{cursor:pointer;outline:none}
.hx8-n circle{fill:#fff;stroke:var(--ink);stroke-width:2;transition:fill .3s,stroke .3s}
.hx8-n text{font:700 12.5px var(--body);fill:var(--ink);pointer-events:none}
.hx8-n:hover circle,.hx8-n:focus-visible circle{fill:#CCFCED}
.hx8-n.on circle{fill:var(--ink);stroke:var(--ink)}
.hx8-n.on text{fill:#fff}
.hx8-cap{text-align:center;margin-top:10px;min-height:4.2em;font-size:clamp(16px,1.2vw,18px);line-height:1.5;color:var(--ink-2)}
.hx8-cap b{display:block;font:700 clamp(18px,1.5vw,22px)/1.2 var(--display);color:var(--ink);margin-bottom:4px}
/* about · the difference: the stylist line is crossed out, her answer arrives beside it */
.vs2-head{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1.15fr);gap:0 clamp(16px,2.5vw,32px);margin-top:clamp(28px,4vw,48px);font:700 14px/1.2 var(--body);letter-spacing:.02em}
.vs2-head span:first-child{color:var(--muted)}
.vs2-head span:last-child{grid-column:3}
.vs2{list-style:none;margin:12px 0 0;padding:0}
.vs2 li{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1.15fr);gap:0 clamp(16px,2.5vw,32px);align-items:center;padding:clamp(18px,2.4vw,28px) 0;border-top:1px solid var(--line)}
.vs2-them{position:relative;margin:0;font-size:clamp(17px,1.4vw,21px);line-height:1.45;color:var(--ink-2);transition:color .6s}
.vs2-them::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.6,0,.2,1)}
.vs2-ar{color:var(--mint);font:700 26px/1 var(--body);text-align:center;opacity:0;transition:opacity .4s .5s}
.vs2-me{margin:0;font:700 clamp(18px,1.55vw,23px)/1.4 var(--display);letter-spacing:-.005em;color:var(--ink);opacity:0;transform:translateX(24px);transition:opacity .6s .55s,transform .7s .55s cubic-bezier(.2,.8,.2,1)}
.vs2 li.on .vs2-them{color:var(--muted)}
.vs2 li.on .vs2-them::after{transform:scaleX(1)}
.vs2 li.on .vs2-ar{opacity:1}
.vs2 li.on .vs2-me{opacity:1;transform:none}
@media (max-width:760px){
  .vs2-head{display:none}
  .vs2 li{grid-template-columns:1fr;gap:8px}
  .vs2-ar{display:none}
  .vs2-them::before{content:"Ένας Personal Stylist";display:block;font:700 12px/1 var(--body);letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
}
@media (prefers-reduced-motion:reduce){.vs2-them::after,.vs2-ar,.vs2-me{transition:none}}
/* home · alignment (replaces the building): her in / out triangles slide into her hourglass */
.aln-grid{display:grid;grid-template-columns:.85fr 1.15fr;grid-template-areas:"copy art" "act art";gap:0 clamp(30px,5vw,90px);align-items:center}
.aln-copy{grid-area:copy;align-self:end}.aln-art{grid-area:art}.aln-act{grid-area:act;align-self:start}
.aln-copy .lead{margin-top:20px;max-width:36ch}
.aln-layers{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.aln-layers li{padding:14px 0;border-bottom:1px solid var(--line);transition:opacity .4s}
.aln-layers b{display:block;font:700 clamp(18px,1.5vw,21px)/1.2 var(--display)}
.aln-layers span{display:block;color:var(--ink-2);font-size:16px;margin-top:2px}
/* v6: the middle layer no longer fades while in/out are apart (Anthony, 10 Oct 2026): it read as a mistake */
.aln-art{position:relative;max-width:560px;width:100%;justify-self:center}
.aln-svg{width:100%;height:auto;display:block;overflow:visible}
.aln-btn{margin-top:22px}
.aln-btn .b-again{display:none}
.aln-sec.broken .aln-btn .b-ask{display:none}
.aln-sec.broken .aln-btn .b-again{display:inline}
.aln-note{margin:18px 0 0;font-size:clamp(24px,2.2vw,32px);line-height:1.15;color:var(--ink)!important;opacity:0;transform:translateY(8px);transition:opacity .5s .5s,transform .6s .5s}
.aln-sec.broken .aln-note{opacity:1;transform:none}
@media (max-width:980px){.aln-grid{grid-template-columns:1fr;grid-template-areas:"copy" "art" "act";row-gap:26px}.aln-art{max-width:440px}}
/* about · 8-circle map in her original greens: overlapping circles, mint and light mint, no lines */
.hx8-n.m circle{fill:#00F2A6;stroke:none}
.hx8-n.t circle{fill:#CCFCED;stroke:none}
.hx8-n text{font:700 13px var(--body);fill:#231F20}
.hx8-n:hover circle,.hx8-n:focus-visible circle{fill:#00F2A6;stroke:#231F20;stroke-width:2.5}
.hx8-n.on circle{fill:#231F20;stroke:#231F20}
.hx8-n.on text{fill:#fff}
.hx8-c text{font:700 30px var(--display);fill:#231F20;letter-spacing:-.01em}
/* about · vision, simplified: one statement, one line, her sign-off */
.ab-vm2 h2{color:var(--mint);margin:0 0 18px}
.ab-vm2 .ab-vm-big{color:#fff;font:700 clamp(26px,3vw,44px)/1.2 var(--display);letter-spacing:-.015em;margin:0 auto;max-width:24ch}
.ab-vm2 .ab-vm-big em{font-style:normal;color:var(--mint)}
.ab-vm2 .ab-vm-mis{color:rgba(255,255,255,.75);font-size:clamp(17px,1.3vw,19px);line-height:1.6;max-width:52ch;margin:26px auto 0}
.ab-vm2 .ab-vm-sign{display:block;height:clamp(48px,5vw,68px);width:auto;margin:34px auto 0}
/* home · "Πριν από… υπάρχει": a different woman for each answer, crossfading under it (it felt empty) */
.bf-answers{min-height:clamp(150px,22vh,240px)}
.bf-pics{position:relative;width:min(100%,460px);aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;margin-top:clamp(10px,2vh,20px)}
.bf-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;opacity:0;transform:scale(1.06);transition:opacity .8s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.bf-pics img.on{opacity:1;transform:none}
@media (max-width:980px){.bf-pics{display:none}}
@media (prefers-reduced-motion:reduce){.bf-pics img{transition:none}}
/* method equation: the "=" sits centred on its own row (nth-of-type counted the hidden line break, so it missed) */
.eq-sec .eq-build .br + .op{grid-column:1/-1;justify-self:center;text-align:center;padding:0;line-height:1;width:auto}
/* method · seven lessons, rebalanced: smaller list type, and a photo of Sophia for each lesson above its line */
.six{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.six-list li{padding:clamp(12px,2.6vh,24px) 0}
.six-i .t{font-size:clamp(22px,2.3vw,36px)}
.six-show{top:calc(50vh - min(34vh,300px))}
.six-show .six-glyph{display:none}
.six-pics{position:relative;width:100%;max-width:440px;aspect-ratio:4/5;max-height:52vh;border-radius:var(--r-lg);overflow:hidden;margin-bottom:22px}
.six-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;opacity:0;transform:scale(1.05);transition:opacity .7s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.six-pics img.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.six-pics img{transition:none}}
/* home · "Πριν από… υπάρχει", rebalanced (v6): three columns, the crossed-out list, the answer, and a tall photo
   that fills the screen; less scroll; her handwriting for the two little headers */
.before{height:calc(100vh + var(--n,5) * 22vh)}
.bf-stage2{grid-template-columns:minmax(240px,.72fr) minmax(0,1.6fr);gap:clamp(30px,5vw,80px)}
.bf-lab,.bf-left .bf-lab,.bf-right .bf-lab{font:400 clamp(28px,2.4vw,38px)/1 var(--hand)!important;letter-spacing:0!important;color:var(--ink)!important;text-transform:none}
.bf-right{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);grid-template-areas:"lab pic" "ans pic" "dots pic";column-gap:clamp(24px,3.5vw,56px);align-items:center}
.bf-right .bf-lab{grid-area:lab;align-self:end}
.bf-right .bf-answers{grid-area:ans;min-height:clamp(170px,26vh,280px)}
.bf-right .bf-ans{font-size:clamp(28px,2.9vw,50px)}
.bf-right .bf-dots{grid-area:dots;align-self:start}
.bf-right .bf-pics{grid-area:pic;width:100%;max-width:none;aspect-ratio:4/5;max-height:72vh;margin:0}
.bf-stage2{grid-template-columns:minmax(230px,.62fr) minmax(0,2fr)}
.bf-right{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
.bf-right .bf-pics{max-height:74vh}
.bf-right .bf-ans{font-size:clamp(30px,3.2vw,56px)}
.bf-stage2 .bf-list li{font-size:clamp(18px,1.5vw,23px)}
/* about hero: the same rounded frame as the other pages' heroes (no arch); her sparkle larger, at the photo's bottom right */
.v2-hero .portrait .frame{border-radius:30px 34px 28px 32px}
.v2-hero .portrait .frame{clip-path:inset(100% 0 0 0 round 30px)}
.v2-hero.go .portrait .frame{clip-path:inset(0 0 0 0 round 30px)}
.v2-hero .portrait .spark{left:auto;top:auto;right:-46px;bottom:-40px;width:clamp(130px,11vw,170px);z-index:2}
@media (max-width:980px){.v2-hero .portrait .spark{right:-14px;bottom:-26px;width:96px}}
@media (prefers-reduced-motion:reduce){.v2-hero .portrait .frame{clip-path:none}}
/* about story: the key phrase of each beat, marked in mint (draws in as it arrives) */
.st5-hl{background:linear-gradient(transparent 58%,var(--mint) 58%,var(--mint) 92%,transparent 92%) no-repeat 0 0/0% 100%;color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1s cubic-bezier(.2,.7,.1,1) .5s}
.st5-lead.in .st5-hl{background-size:100% 100%}
/* about: her belief in two paragraphs */
.st5-belief .st5-st2{margin-top:clamp(18px,2.6vw,32px)}
/* the Sophia band without a photo (service pages other than the programme) */
.sb-grid.sb-solo{grid-template-columns:1fr;max-width:820px;text-align:center}
.sb-grid.sb-solo .sb-txt h2{margin-inline:auto}
/* service steps without photos: a thin rule on top */
.s3{border-top:2px solid var(--ink);padding-top:18px}
/* about · brands: her line about truth, its own paragraph, the key phrase in mint */
.ab-truth{margin:18px 0 0;color:#fff;font:700 clamp(19px,1.6vw,24px)/1.4 var(--display);letter-spacing:-.01em;max-width:40ch}
.ab-truth em{font-style:normal;color:var(--mint)}
/* v6: "…υπάρχει" sits on the same line as "Πριν από…" (top of the stage), answers follow it */
@media (min-width:981px){.bf-right{align-items:start;grid-template-rows:auto auto 1fr}.bf-right .bf-lab{align-self:start}}
/* v6: home offers, fine rules between the three options (vertical on desktop, horizontal when they stack) */
@media (min-width:1081px){
  #start .offers{gap:0}
  #start .offer{padding:0 clamp(22px,2.6vw,40px)}
  #start .offer:first-child{padding-left:0}
  #start .offer:last-child{padding-right:0}
  #start .offer + .offer{border-left:1px solid var(--line)}
}
@media (min-width:821px) and (max-width:1080px){
  #start .offers{gap:0}
  #start .offer.feature{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--line)}
  #start .offer:not(.feature){padding-right:24px}
  #start .offer:not(.feature) + .offer{border-left:1px solid var(--line);padding:0 0 0 24px}
}
@media (max-width:820px){
  #start .offers{gap:0}
  #start .offer + .offer{border-top:1px solid var(--line);margin-top:30px;padding-top:30px}
}
/* v6: the Φύσις pots sit on a soft stone card so the white product shot keeps its frame */
.ab2-ph.ab2-prod{background:#F1EFEC}
.ab2-ph.ab2-prod img{object-fit:contain;padding:6% 7%;mix-blend-mode:multiply}
/* v6: seven lessons, less bold. The list is regular weight (the active one is marked by colour and the mint line,
   not weight); the explanation beside the photo is a light lead, not a bold display line */
.six-i .t{font-family:var(--body);font-weight:400;letter-spacing:-.015em;line-height:1.15}
.six-show .six-txt,.no-nums .six-show .six-txt{font:300 clamp(20px,1.65vw,26px)/1.45 var(--body);letter-spacing:0;max-width:28ch;color:var(--ink)}
/* v6: services comparison sits on a white card on the stone ground, so the two columns read clearly */
#compare .compare-wrap{background:#fff;border-radius:var(--r-lg);padding:clamp(24px,2.8vw,40px) clamp(16px,2.4vw,36px) clamp(6px,1vw,14px);margin-top:clamp(28px,4vh,44px)}
#compare .compare{margin-top:0}
#compare .compare tbody tr:last-child th,#compare .compare tbody tr:last-child td{border-bottom:0}
#compare .compare .fx{background:rgba(0,242,166,.13)}
#compare .compare thead .fx{background:var(--mint)}
@media (max-width:700px){#compare .compare-wrap{padding:14px 10px 6px;border-radius:18px}}
/* v6 · services extras: the line that introduces the two add-ons, in her hand */
.xr-gate{font:400 clamp(24px,2vw,30px)/1.2 var(--hand);color:var(--ink);margin:clamp(48px,6vw,80px) 0 4px}
/* v6 · Instagram band: every card is a feed post (4:5), reels too; nothing stretches to a story */
.ig-track{align-items:flex-start}
.ig-item,.ig-item.reel{flex:0 0 clamp(200px,20vw,290px);aspect-ratio:4/5;height:auto;align-self:flex-start}
/* v6 · About: little labels and lead in her hand / highlighted */
.vs2-head{font:400 clamp(22px,1.8vw,28px)/1.1 var(--hand);letter-spacing:0}
.vs2-head span:first-child{color:var(--muted)}
.ab-lead{font-size:clamp(19px,1.7vw,23px);line-height:1.5;font-weight:300;color:var(--ink);margin:18px 0 22px;max-width:56ch}
.ab-lead.in .st5-hl{background-size:100% 100%}
.st5-goal{display:block;font:400 clamp(28px,2.4vw,38px)/1.1 var(--hand);color:var(--ink);margin-bottom:8px;letter-spacing:0}
.ab-vm2 .ab-vm-h{font:400 clamp(30px,2.6vw,40px)/1.1 var(--hand)!important;letter-spacing:0;color:var(--mint)}
/* v6 · About: the mission as its own section, same voice as the vision, on mint */
.ab-mis.ab-vm2 .ab-vm-h{color:var(--ink)}
.ab-mis.ab-vm2 .ab-vm-big{color:var(--ink);max-width:26ch}
.ab-mis.ab-vm2 .ab-vm-big em{font-style:normal;color:var(--ink);background:linear-gradient(transparent 58%,#fff 58%,#fff 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* v6 · programme hero: "Για πάντα." in her hand */
h1 .h-hand{font-family:var(--hand);font-weight:400;letter-spacing:0;font-size:.9em;display:inline-block;transform:rotate(-3deg);color:var(--ink)}
/* v6 · services: the flagship programme card is taller and louder than the two beside it */
#three-ways .offer.feature.wide .tag{font-size:12px;padding:9px 14px;margin-bottom:8px}
#three-ways .offer.feature.wide h3{font-size:clamp(38px,4.2vw,64px);line-height:1.02;margin:4px 0 6px}
#three-ways .offer.feature.wide .offer-ask{font-size:clamp(26px,2.4vw,36px);margin:4px 0 16px}
#three-ways .offer.feature.wide p{font-size:clamp(18px,1.45vw,21px)!important;line-height:1.55;max-width:42ch;color:rgba(255,255,255,.82)}
#three-ways .offer.feature.wide .soft-price{font-size:16px;font-weight:600;color:#fff}
#three-ways .offer.feature.wide .go{width:64px;height:64px}
#three-ways .offer.feature.wide .go svg{width:26px;height:26px}
#three-ways .offers.two{margin-top:24px}
@media (min-width:901px){
  #three-ways .offer.feature.wide{grid-template-columns:1.05fr 1fr;min-height:clamp(560px,70vh,700px)}
  #three-ways .offer.feature.wide .body{padding:clamp(40px,5vw,80px);justify-content:center}
}
/* v6 · services: the add-ons line in the body font, fully highlighted (overrides the hand version above) */
.xr-gate{font:700 clamp(18px,1.5vw,22px)/1.5 var(--body);letter-spacing:-.005em;color:var(--ink);margin:clamp(48px,6vw,80px) 0 10px}
.xr-gate span{background:linear-gradient(transparent 52%,var(--mint) 52%,var(--mint) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* v6 · "20+ χρόνια" and other inline highlights: the site's mint marker band */
mark.hl{background:linear-gradient(transparent 56%,var(--mint) 56%,var(--mint) 94%,transparent 94%);color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.bg-ink mark.hl{color:#fff}
/* services: the Sophia band breathes like the sections around it */
#sophia.section.sb-band{padding-top:clamp(90px,10vw,150px);padding-bottom:clamp(110px,12vw,180px)}
/* v6 · service pages: the service's name above the headline (eyebrows stay hidden) */
.svc-name{display:flex;align-items:center;gap:12px;font:700 clamp(20px,1.7vw,26px)/1.15 var(--display);letter-spacing:-.01em;color:var(--ink);margin:0 0 clamp(14px,2vh,22px)}
.svc-name::before{content:"";flex:none;width:.75em;height:1.15em;background:url(../img/kit/logo-hourglass-mint.svg) no-repeat center/contain}
/* v6 · services comparison: both column titles sit on the same line (the mint cell no longer drops lower),
   and each row's label shares a baseline with its answers */
#compare .compare thead th{padding:20px 18px 18px;vertical-align:top}
#compare .compare thead th:first-child{padding:0}
#compare .compare tbody th,#compare .compare tbody td{vertical-align:baseline}
/* v6 · shorter scroll-driven sections (each step ~20–35% of a screen, and they snap; see motion.js) */
@media (min-width:981px){.before{height:calc(100vh + (var(--n,5) - 1) * 20vh)}}
.jc-pin.is-pin{height:calc(100vh - var(--jc-top,78px) + 70vh)}
/* v6 · offer cards: one arrow everywhere (same circle, same glyph size), and room between the price and the arrow */
.offer .go svg{width:20px;height:20px}
.offer .meta{gap:20px}
#three-ways .offer .go{width:56px;height:56px}
#three-ways .offer .go svg,#three-ways .offer.feature.wide .go svg{width:22px;height:22px}
/* v6 · the printed Book: landscape, four real example pages, full width under the heading so the open spread fits */
.bk-lay .bk-head{max-width:760px;margin:0 auto;text-align:center}
.bk-lay .bk-head .lead{margin-inline:auto;max-width:52ch}
.bookstage.land{padding:clamp(34px,5vw,64px) 0 10px}
.book3d.land{width:min(500px,44vw);aspect-ratio:1213/867;transform:rotateY(-14deg) rotateX(8deg)}
.book3d.land.open{transform:rotateY(0) rotateX(4deg) translateX(50%)}
.book3d.land .bk-page,.book3d.land .bk-back{border-radius:3px 8px 8px 3px}
.book3d.land .bk-back{padding:0;overflow:hidden;background:#fff}
.book3d.land img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none}
.book3d.land .bk-inside{background:#fff linear-gradient(90deg,rgba(35,31,32,.05),transparent 14%)}
@media (max-width:700px){.book3d.land{width:44vw}.book3d.land.open{transform:rotateY(0) rotateX(4deg) translateX(50%)}}
/* v6 · Method seven lessons, tighter: less padding, a smaller list, a smaller photo, the explanation in her hand */
#seven-lessons.section{padding-top:clamp(90px,9vw,130px);padding-bottom:clamp(90px,9vw,130px)}
#seven-lessons .six{margin-top:clamp(22px,3vw,40px);align-items:center}
#seven-lessons .six-list li{padding:clamp(6px,1.2vh,12px) 0}
#seven-lessons .six-i .t{font-size:clamp(19px,1.7vw,26px)}
#seven-lessons .six-pics{max-width:360px;max-height:42vh;margin-bottom:16px}
#seven-lessons .six-show{top:calc(50vh - min(32vh,280px))}
#seven-lessons .six-show .six-txt,#seven-lessons.no-nums .six-show .six-txt{font:400 clamp(24px,2vw,32px)/1.25 var(--hand)!important;letter-spacing:0;max-width:24ch;color:var(--ink)}
#seven-lessons .six-d{font:400 22px/1.3 var(--hand);color:var(--ink)}
/* v6 · hero CTAs side by side on desktop (they wrapped by a few px): tighter padding, no wrap */
@media (min-width:981px){
  #intro .seq .btn-row{flex-wrap:nowrap;gap:12px}
  #intro .seq .btn-row .btn-lg{padding-left:clamp(20px,1.7vw,28px);padding-right:clamp(20px,1.7vw,28px);white-space:nowrap}
}
/* v6 · home offers on tablets and phones: tracks may shrink below the photos' natural width (they rendered 712px wide on a 390px phone) */
#start .offer{min-width:0}
@media (max-width:1080px){#start .offers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){#start .offers{grid-template-columns:minmax(0,1fr)}}

/* ===== v6 · mobile audit fixes (4 Oct) ===== */
/* 1 · home before-styling: the desktop pin rules stay on desktop (on phones it is a plain stacked list again) */
@media (max-width:980px){.before{height:auto}.bf-stage2{grid-template-columns:1fr}.bf-right{display:none}}
/* 2 · method seven lessons: one column on phones */
@media (max-width:980px){.six,#seven-lessons .six{grid-template-columns:1fr}}
/* 3 · burger never shrinks; a little more room in the header on small phones */
.burger{flex:none}
@media (max-width:389px){.head-in{gap:10px}.site-head .brand img{height:20px}.lang-toggle{margin-right:0}}
/* 4 · scroll lock under the open menu and the quiz (html clips x, so the lock has to be on html) */
html:has(body.menu-open),html:has(.qx.open){overflow:hidden}
.mobile-menu,.qx .qmain{overscroll-behavior:contain}
/* 5 · mobile-menu CTA keeps its button padding */
.mobile-menu .btn{padding:18px 24px}
/* 6 · About "Η διαφορά": a real label (translatable) on phones, and a strike that follows every line */
.vs2-lab{display:none}
.vs2-them::after,.vs2-them::before{content:none!important}
.vs2-x{background-image:linear-gradient(transparent 55%,var(--ink) 55%,var(--ink) 61%,transparent 61%);background-repeat:no-repeat;background-size:0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .7s cubic-bezier(.6,0,.2,1)}
.vs2 li.on .vs2-x{background-size:100% 100%}
@media (max-width:760px){.vs2-lab{display:block;font-size:20px;line-height:1.1;color:var(--muted);margin-bottom:4px}}
@media (prefers-reduced-motion:reduce){.vs2-x{transition:none}}
/* 7 · reel cards: one play triangle (the SVG), not two */
.ig-item .play::before{content:none}
/* 8 · bottom bars stay on one line */
@media (max-width:389px){.mbar a{white-space:nowrap;font-size:13px;padding:14px 8px}}
@media (max-width:420px){.lp-bar>span{font-size:12px;flex:1 1 0;min-width:0}.lp-bar .btn{white-space:nowrap;padding:13px 14px;font-size:13px}}
/* 9 · "Ξεκίνα από το 1:1 Style BY DESIGN™ →" may wrap on small phones */
@media (max-width:420px){.to-main .link{white-space:normal}}
/* 10 · big headings fit a 360 phone */
@media (max-width:380px){.h-xl{font-size:34px}}
/* 11 · 8-circle diagram labels readable on phones */
@media (max-width:600px){.hx8-n text{font-size:17px}}
/* 13 · bigger tap areas for small links */
.svc-back,.sh-back,.qx button.back{padding:12px 0;margin:-12px 0;display:inline-block}
.lang-toggle span{padding:11px 10px}
/* 14 · the "μόνο για σένα" seal stays inside the screen on phones */
@media (max-width:600px){.book-land .bl-seal{right:-6px;top:-14px;width:80px;height:80px}}
/* v6 · brand gallery on phones: less empty space around the curve */
@media (max-width:560px){.w3d.is-gl{height:calc(var(--cw) * .62 * 1.18 + 26px)}}
/* v6 · Είσαι & Φαίνεσαι: «Φαίνεσαι.» rolls through her words as you scroll (motion.js) over the endless wall (v4.js) */
.eisai4.is-gl .m4{visibility:hidden}
.e-slot{display:inline-grid;justify-items:start;font-family:"Mod",system-ui,sans-serif;clip-path:inset(-.32em -.5em -.42em -.3em)}
.e-slot>span{grid-area:1/1;white-space:nowrap}
.e-slot .ch{display:inline-block;will-change:transform}
.eisai4.e-swap .eisai-big{flex-wrap:nowrap}
.eisai4.e-swap .eisai3-text{height:250vh}
@media (max-width:980px){
  .eisai4.e-swap .eisai-big{flex-wrap:wrap}
  .eisai4.e-swap .e-slot{flex-basis:100%;justify-items:center;width:auto!important}
  .eisai4.e-swap .eisai3-text{height:220vh;padding:0}
  .eisai4.e-swap .e3-inner{position:sticky;top:calc(50vh - 150px)}
}
/* v6 · Method hero: «Human Identity Design.» highlighted, «Ένα βήμα πριν από το styling.» handwritten underneath */
.v4-hero h1 .hand{display:block;font-size:.52em;line-height:1.15;letter-spacing:0;margin-top:.42em;transform:rotate(-1.5deg);transform-origin:0 50%}
@media (max-width:700px){.v4-hero h1 .hand{font-size:.6em}}
/* v6 · S.E.L.F. orb, Flow: her head sits higher in the circle */
.so-arm[data-k="f"] img{object-position:50% 100%}
/* v6 · S.E.L.F. letters: the scroll fill is a rounded bar set inside each button, on a faint track */
.self4-letters button{padding:17px 18px;transition:background .3s,transform .4s var(--ease),padding .5s var(--ease)}   /* same height in every state */
.self4-letters button[aria-pressed=true]{padding:13px 18px 21px}   /* the step you're on makes room for its bar */
.self4-letters button::before,.self4-letters button::after{content:"";position:absolute;left:18px;bottom:9px;height:4px;border-radius:99px;transition:opacity .45s var(--ease)}
.self4-letters button::before{right:18px;background:rgba(35,31,32,.09);opacity:calc(var(--fill,0) * 100)}
.self4-letters button::after{width:calc(var(--fill,0) * (100% - 36px));background:var(--ink);opacity:.3}
.self4-letters button:not([aria-pressed=true])::before,.self4-letters button:not([aria-pressed=true])::after{opacity:0}   /* only the step you're on shows its bar */
@media (min-width:981px){.self4-prog i,.self4-prog i::after{height:4px;border-radius:99px}}
/* v6 · one spacing for every section (10 Oct 2026): the same room above and below each, about 216px between sections
   on a laptop and 128px on a phone. Sections that pin keep their own inner layout. */
:root{--sec:clamp(64px,7.5vw,112px)}
.section,.lp-sec,#seven-lessons.section,#sophia.section.sb-band,#sound-familiar{padding-top:var(--sec);padding-bottom:var(--sec)}
.jr2-after .wrap>.jr2:first-child{margin-top:0}
/* v6 · Method, styling tool: a tall photo; keep her face and the clothes she holds in the frame */
#tool-styling .tool-art img{object-position:50% 35%}
/* v6 · 7 πράγματα: on laptops the section pins, centred, and steps through the lessons (v4.js adds .six-pin-on) */
#seven-lessons.six-pin-on{padding-top:0;padding-bottom:0}
#seven-lessons.six-pin-on>.wrap{position:sticky;top:var(--head-h,79px);min-height:calc(100vh - var(--head-h,79px));display:flex;flex-direction:column;justify-content:center;padding-top:clamp(24px,4vh,48px);padding-bottom:clamp(24px,4vh,48px);box-sizing:border-box}
#seven-lessons.six-pin-on .six-show{position:static}
#seven-lessons .six-dots{display:none!important}   /* the highlighted lesson already shows where you are */
/* the lesson highlight: the same band as the big titles' highlight (mark.hl, 56–94%) */
.six-i .t>span{background-image:linear-gradient(transparent 56%,var(--mint) 56%,var(--mint) 94%,transparent 94%)}
/* v6 · one bullet everywhere (10 Oct 2026): the Method hero's 9px mint dot, centred on the first line of text.
   Replaces the tick circles, hourglass glyphs, 14px dots and arrows. New lists: use one of these classes. */
:is(.pv-gets,.ticks,.glyphs,.ab-gets,.arrows,.jr2-tl):not(.no-dot)>li{position:relative;padding-left:18px}
:is(.pv-gets,.ticks,.glyphs,.ab-gets,.arrows,.jr2-tl):not(.no-dot)>li::before{content:"";position:absolute;left:0;top:.45em;top:calc(.5lh - 4.5px + .1em);width:9px;height:9px;border-radius:50%;background:var(--mint);clip-path:none}
.guide .arrows:not(.no-dot)>li::before{background:var(--ink)}   /* on the mint guide band the dot is ink */
/* v6 · Τι υπάρχει πριν (home): no progress dashes; pinned just below the header and centred in the visible area */
#before-styling .bf-dots{display:none!important}
@media (min-width:981px){#before-styling .bf-pin{top:var(--head-h,79px);height:calc(100vh - var(--head-h,79px))}}
/* v6 · Τι υπάρχει πριν (Sophia, 10 Oct 2026): nothing is crossed out. «Πριν από» is what usually comes first, and before it
   there is something else: the line you're reading is plain black, its answer (right) carries the highlight, the rest is faint. */
.bf-list .bf-x{background-image:none!important}
.bf-list li,.bf-list li.done{color:rgba(35,31,32,.18)}
.bf-list li.on{color:var(--ink)}
@media (max-width:980px){.bf-list li,.bf-list li.done{color:var(--ink)}}
/* v6 · Τι υπάρχει πριν as «Η διόρθωση» (Sophia chose it, 10 Oct 2026): on laptops, one sentence at a time with her photo beside it.
   «Πριν από…» + the line in focus (plain black), then «υπάρχει…» + its answer (highlighted). Each stack is as tall as its longest
   line, so nothing moves between steps. Phones keep the full list with each answer under it. */
@media (min-width:981px){
  #before-styling .bf-stage2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.85fr);grid-template-rows:1fr auto auto auto auto 1fr;
    grid-template-areas:". pic" "lab1 pic" "old pic" "lab2 pic" "ans pic" ". pic";column-gap:clamp(40px,6vw,120px);align-items:start}
  #before-styling .bf-left,#before-styling .bf-right{display:contents}
  #before-styling .bf-left>.bf-lab{grid-area:lab1;height:auto;margin:0 0 clamp(10px,1.6vh,18px)}
  #before-styling .bf-right>.bf-lab{grid-area:lab2;height:auto;margin:clamp(26px,4.4vh,48px) 0 clamp(10px,1.6vh,18px)}
  #before-styling .bf-list{grid-area:old;display:grid;gap:0}
  #before-styling .bf-list li{grid-area:1/1;font:700 clamp(24px,2.4vw,40px)/1.15 var(--display);letter-spacing:-.02em;color:var(--ink);opacity:0;transform:translateY(22px);transition:opacity .4s ease,transform .7s cubic-bezier(.2,.7,.1,1)}
  #before-styling .bf-list li.on{opacity:1;transform:none;transition-delay:.12s}
  #before-styling .bf-answers{grid-area:ans;display:grid;min-height:0}
  #before-styling .bf-ans{position:static;grid-area:1/1;font-size:clamp(32px,3.4vw,58px)}
  #before-styling .bf-pics{grid-area:pic;align-self:center;width:100%;max-width:none;aspect-ratio:4/5;max-height:72vh;margin:0}
}
@media (min-width:981px) and (prefers-reduced-motion:reduce){#before-styling .bf-list li{transition:none;transform:none}}
/* v6 · Τι υπάρχει πριν, «Η διόρθωση» on laptops (motion.js builds .bfA + .bfA-pics and adds .bf-A): proposal A's sentence block
   (its sizes and spacing) with her photo travelling on a curve to sit just after the sentence. Without GSAP or with reduced motion,
   the stepped layout above stays. */
@media (min-width:981px){
  #before-styling.bf-A .bf-stage2{display:block;position:relative}
  #before-styling.bf-A .bf-left{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #before-styling.bf-A .bf-right{display:none}
  #before-styling.bf-A .bfA{position:relative;width:min(760px,100% - 400px);height:min(66vh,600px);margin-left:max(0px,(100% - 1080px) / 2)}
  .bfA-pair{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
  .bfA-lab{display:block;font:400 clamp(26px,2.4vw,36px)/1 var(--hand);color:var(--ink);margin:0 0 .25em}
  .bfA-lab2{margin-top:.9em}
  .bfA-old{margin:0;font:700 clamp(30px,3.6vw,58px)/1.12 var(--display);letter-spacing:-.025em;color:var(--ink)}
  .bfA-new{margin:0;font:700 clamp(36px,4.6vw,76px)/1.06 var(--display);letter-spacing:-.03em;color:var(--ink)}
  .bfA-hl{background:linear-gradient(transparent 56%,var(--mint) 56%,var(--mint) 94%,transparent 94%) no-repeat 0 0/0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .bfA-pics{position:absolute;inset:0;pointer-events:none}
  .bfA-pic{position:absolute;left:0;top:0;width:clamp(220px,21vw,300px);aspect-ratio:4/5;margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 60px -34px rgba(35,31,32,.55);will-change:transform,opacity}
  .bfA-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
}
/* v6 · home, before «Μπορεί να ξέρεις…»: a handwritten lead-in, like «Πριν από…» in the section above */
.stmt-lead{display:block;font-size:clamp(28px,2.6vw,40px);line-height:1.1;color:var(--ink);margin:0 0 clamp(14px,2vw,24px)}
/* v6 · quotes in her voice (home «Γιατί το κάνω», About «Γιατί ένας νέος όρος»): the emphasis is black with the titles' highlight, not green text */
.voice blockquote em{color:var(--ink);background:linear-gradient(transparent 56%,var(--mint) 56%,var(--mint) 94%,transparent 94%) no-repeat 0 0/100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* v6 · home «Για σένα» (between «Όπως ένα brand» and «Γιατί το κάνω»): two statement lines that light up as you scroll, then the why */
.for-you .wrap{text-align:center}
.for-you .statement{margin:0 auto;max-width:1100px;font-size:clamp(30px,4vw,64px);line-height:1.1}
.for-you .statement+.statement{margin-top:.15em}
.for-you .lead{max-width:760px;margin:clamp(26px,3.4vw,44px) auto 0;color:var(--ink-2)}
/* v6 · home offers: Identity Portrait and The One-Off get the same content width (same photo size, texts aligned). The middle card has
   padding on both sides and the last only on its left, so the middle column is one padding wider; the 1:1 card stays 1.25 times as wide. */
@media (min-width:1081px){
  #start .offers{--op:clamp(22px,2.6vw,40px);grid-template-columns:calc(1.25 * (100% - 4 * var(--op)) / 3.25 + var(--op)) calc((100% - 4 * var(--op)) / 3.25 + 2 * var(--op)) minmax(0,1fr)}
  #start .offer{padding-left:var(--op);padding-right:var(--op)}
  #start .offer:first-child{padding-left:0}
  #start .offer:last-child{padding-right:0}
}
/* v6 · home offers: the «not sure?» row is a quiet helper, not a fourth choice. It gets room and a fine rule above it, and its quiz
   button is outlined like «Σύγκρινε τα προγράμματα», so the three cards lead. */
#start .offers-foot{margin-top:clamp(44px,5vw,72px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line)}
#start .offers-foot .btn-mint{--bg:transparent;--fg:var(--ink);border-color:rgba(35,31,32,.22)}
#start .offers-foot .btn-mint:hover{--bg:var(--ink);--fg:#fff;border-color:var(--ink)}
/* v6 · home offers hover: the card's title gets the titles' mint highlight drawing across (no box, no shadow), on hover and keyboard
   focus; the featured card's mint arrow, which turns white on hover, keeps a thin mint ring so it doesn't vanish on the white page */
#start .offer h3{width:fit-content;background:linear-gradient(transparent 56%,var(--mint) 56%,var(--mint) 94%,transparent 94%) no-repeat 0 0/0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .6s cubic-bezier(.2,.7,.1,1)}
@media (hover:hover){#start .offer:hover h3{background-size:100% 100%}}
#start .offer:focus-visible h3{background-size:100% 100%}
#start .offer .go{transition:background .3s,color .3s,transform .4s var(--ease),box-shadow .3s}
#start .offer.feature:hover .go{background:#fff;box-shadow:inset 0 0 0 2px var(--mint),0 8px 20px -10px rgba(35,31,32,.35)}
/* v6 · «← Όλες οι υπηρεσίες» on the service pages: the arrow and text keep their gap, the hover underline sits just under the words
   (not 12px below, on the title), and there's clear space before the service name; the tap area stays generous */
.svc-back{display:inline-flex;align-items:center;gap:8px;padding:10px 0;margin:-10px 0 14px;border-bottom:0;font:400 14.5px/1.2 var(--body)}
.svc-back .arr{color:var(--mint);font-weight:700;transition:transform .3s var(--ease)}
.svc-back .t{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .25s}
.svc-back:hover .t,.svc-back:focus-visible .t{text-decoration-color:currentColor}
/* v6 · service pages: a band of 1–2 photos after «Πώς δουλεύει» (the service form's «Φωτογραφίες σελίδας»). Same height, each photo at its
   own width; if they don't fit, they share the row and crop. Phones: one under the other, full width. */
.svc-gal{padding-top:var(--sec);padding-bottom:calc(var(--sec) + 28px)}   /* +28px: the next section's rounded top overlaps upward */
.svc-gal-row{display:flex;justify-content:center;gap:clamp(14px,1.6vw,24px);height:clamp(300px,34vw,520px)}
.svc-gal .sg{margin:0;flex:0 1 auto;min-width:0;height:100%;border-radius:var(--r-lg);overflow:hidden}
.svc-gal .sg img{display:block;height:100%;width:auto;max-width:100%;object-fit:cover}
@media (max-width:700px){.svc-gal-row{flex-direction:column;height:auto}.svc-gal .sg{height:auto}.svc-gal .sg img{width:100%;height:auto}}
/* v6 · the programme, after DISCOVER / EMBRACE / CELEBRATE: «Δεν μαθαίνεις απλώς. Εξασκείσαι.» large with the highlight, a second line, then the why */
.practice{background:#fff;text-align:center}
.practice .pr-big{margin:0 auto;max-width:1100px;font:700 clamp(34px,4.6vw,72px)/1.08 var(--display);letter-spacing:-.03em;color:var(--ink)}
.practice .pr-big mark.hl b{font-weight:inherit}
.practice .pr-line{margin:clamp(14px,1.6vw,22px) auto 0;font:700 clamp(20px,2vw,30px)/1.25 var(--display);letter-spacing:-.015em;color:var(--ink)}
.practice .pr-text{max-width:720px;margin:clamp(22px,2.6vw,34px) auto 0;color:var(--ink-2)}
/* the clients' real results as a cut-out collage on white (Anthony, 10 Oct 2026): Ρόη's «πριν» → «μετά» with Sophia's red arrow, Anastasia's
   three outfits fanned like cards with clean vector stars over the faces, her sparkles around; no slide backgrounds, no cards, light shadows.
   Her keywords and style-type rings are live text and drawn circles, floating either side of the paragraph. */
.practice .pr-wrap{position:relative}
.practice .pr-text{position:relative;z-index:2}
.pr-collage{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(40px,7vw,120px);max-width:1180px;margin:clamp(56px,7vw,110px) auto 0;padding:clamp(20px,3vw,40px) 0 clamp(20px,3vw,40px)}
.pr-collage .cl{position:relative;display:flex;align-items:flex-end}
.pr-collage .cp{position:relative;margin:0;flex:none;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.pr-collage .cp img{display:block;height:clamp(240px,27vw,400px);width:auto;border-radius:4px;box-shadow:0 18px 36px -24px rgba(35,31,32,.45)}
.pr-collage .cp:hover{transform:rotate(0) translateY(-6px) scale(1.03);z-index:5}
.pr-collage .cl-name{position:absolute;left:0;top:-1.6em;font-size:clamp(26px,2.4vw,36px);color:var(--ink);line-height:1}
.pr-collage .cl-tag{position:absolute;left:50%;bottom:-1.55em;transform:translateX(-50%) rotate(-3deg);font-size:clamp(22px,2vw,30px);color:var(--ink);white-space:nowrap}
.cl-roi .cp-before{transform:rotate(-4deg);margin-right:clamp(10px,1.4vw,22px)}
.cl-roi .cl-arrow{width:clamp(34px,3.6vw,52px);align-self:center;margin:0 clamp(10px,1.4vw,22px) 0 0}
.cl-roi .cp-after1{transform:rotate(2.5deg) translateY(-14px);z-index:2}
.cl-roi .cp-after2{transform:rotate(-1.5deg) translateY(6px);margin-left:-7%;z-index:1}
.cl-roi .cp-after1 .cl-tag{left:85%}
.cl-ana .cp img{height:clamp(250px,28vw,420px)}
.cl-ana .cp-a1{transform:rotate(-7deg) translateY(10px);z-index:1}
.cl-ana .cp-a2{transform:rotate(1deg) translateY(-18px);margin-left:-9%;z-index:2}
.cl-ana .cp-a3{transform:rotate(7deg) translateY(12px);margin-left:-9%;z-index:3}
.cl-ana .cl-name{left:8%}
.cv-star{position:absolute;display:block;overflow:visible}
.pr-collage .pr-spk{position:absolute;pointer-events:none}
.pr-collage .pr-spk-1{width:clamp(110px,12vw,180px);left:-6%;bottom:-10%;opacity:.95}
.pr-collage .pr-spk-2{width:clamp(70px,7vw,110px);right:-2%;top:-6%}
.pr-collage .pr-spk-3{width:clamp(28px,2.6vw,40px);left:47%;bottom:16%}
.practice .pr-float{position:absolute;z-index:1}
.practice .pr-kw{left:0;top:clamp(170px,15vw,220px);width:clamp(190px,18vw,260px);transform:rotate(-5deg);text-align:left}
.practice .pr-kw .hand{display:inline-block;font-size:clamp(24px,2.2vw,32px);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;margin-bottom:8px}
.practice .pr-kw p{margin:0;font:700 clamp(13.5px,1.15vw,16px)/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
.practice .pr-rings{right:0;top:clamp(150px,13vw,200px);width:clamp(160px,15vw,220px);aspect-ratio:1;transform:rotate(6deg)}
.pr-rings .rg{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.pr-rings .rg1{width:100%;height:100%;background:#74DFA7}.pr-rings .rg2{width:64%;height:64%;background:#36C56D}.pr-rings .rg3{width:34%;height:34%;background:#015017}
.pr-rings .rl{position:absolute;transform:translate(-50%,-50%);font:700 clamp(9px,.8vw,12px)/1 var(--display);font-style:normal;color:var(--ink);white-space:nowrap}
.pr-rings .rl-c{left:50%;top:50%;font-size:clamp(12px,1.15vw,17px);color:#fff}
.pr-rings .rl-m{left:50%;top:27%;font-size:clamp(11px,1vw,15px);color:#fff}
.pr-rings .rl-t{left:50%;top:8%}.pr-rings .rl-l{left:14%;top:33%}.pr-rings .rl-r{left:87%;top:60%}.pr-rings .rl-bl{left:22%;top:75%}.pr-rings .rl-b{left:50%;top:92%}
@media (max-width:1180px){.practice .pr-float{position:relative;left:auto;right:auto;top:auto;display:inline-block;vertical-align:top;margin:34px 14px 0}}
@media (max-width:900px){.pr-collage{flex-direction:column;align-items:center;gap:72px}.pr-collage .cp img,.cl-ana .cp img{height:clamp(200px,52vw,320px)}}
/* the MATCH Method™ under «Τα εργαλεία σου»: the blazer, the pieces, Sophia in the outfit, and the bow-tie mark */
.match-col{position:relative;display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);margin:clamp(30px,3.4vw,48px) 0 clamp(40px,4vw,60px);flex-wrap:wrap}
.match-col .mp{margin:0}
.match-col .mp img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 14px 30px -22px rgba(35,31,32,.45)}
.match-col .mp-jacket{width:clamp(170px,19vw,270px);transform:rotate(-3deg)}
.match-col .mp-items{display:grid;grid-template-columns:repeat(2,clamp(80px,8.6vw,124px));gap:clamp(8px,1vw,14px);align-items:start}
.match-col .mp-items .mp:nth-child(2){transform:rotate(3deg)}
.match-col .mp-items .mp-sm{width:78%}
.match-col .mp-items .mp-sm:nth-child(4){transform:rotate(-4deg)}
.match-col .mp-sophia{width:clamp(150px,16vw,230px);transform:rotate(3deg)}
.match-col .mp-label{flex-basis:100%;display:flex;align-items:center;gap:12px;margin:6px 0 0;font:700 clamp(16px,1.4vw,20px)/1 var(--display);color:var(--ink)}
.match-col .mp-label img{width:30px;transform:rotate(90deg)}
.match-col .mp-spk{position:absolute;width:clamp(60px,6vw,90px);left:-28px;top:-34px}
/* v6 · her fingerprint, used once on the site: full-bleed behind home «one-of-a-kind» («…να μη βλέπεις εσένα στην εικόνα σου.»). Mint lines
   at half strength, edge to edge, drifting slightly as you scroll (motion.js); the text sits in front on a soft white glow. */
#one-of-a-kind{position:relative;overflow:clip;background:#fff}
.fp-bg{position:absolute;inset:-12% 0;background:url(../img/kit/pattern-fingerprint-wide.svg) center/cover no-repeat;pointer-events:none;z-index:0}   /* the print and its mirror: more of it shows, edge to edge */
#one-of-a-kind .fp-bg{}
#one-of-a-kind .wrap{position:relative;z-index:1}
#one-of-a-kind .stmt-grid,#one-of-a-kind .stmt-lead{position:relative}
#one-of-a-kind .wrap::before{content:"";position:absolute;left:-4%;top:-18%;width:min(980px,80%);height:136%;background:radial-gradient(closest-side,rgba(255,255,255,.92),rgba(255,255,255,.75) 55%,rgba(255,255,255,0));pointer-events:none;z-index:-1}
/* the fingerprint also sits behind «Σου ακούγεται γνωστό;» on the 1:1 page (Anthony, 10 Oct 2026) */
#sound-familiar.has-fp{position:relative;overflow:clip;background:#fff}
#sound-familiar.has-fp>.wrap{position:relative;z-index:1}
#sound-familiar.has-fp>.wrap::before{content:"";position:absolute;left:50%;top:50%;width:min(1100px,92%);height:120%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,.8) 55%,rgba(255,255,255,0));pointer-events:none;z-index:-1}
@media (min-width:1181px){.pr-collage{margin-top:clamp(190px,15vw,250px)}}   /* clear the floating keywords and rings */

/* header stays put between pages: only the content fades (v2's body-wide fade + 8px lift moved the header) */
body,body.leaving{animation:none;opacity:1;transform:none;transition:none}
body>:is(main,.ig-band,.site-foot){animation:pageIn .6s var(--ease) both}
body.leaving>:is(main,.ig-band,.site-foot){animation:pageOut .3s var(--ease) both}
@keyframes pageOut{to{opacity:0}}

/* One highlight (11 Oct 2026): the hand-drawn marker of the hero titles on every big highlighted text.
   --mk is that same stroke, placed inside a full-height box (it reads exactly like `--marker 0 85%/100% 62%`),
   so any band that grows 0% → 100% wide can swap its gradient for it. Small body text keeps the straight band. */
:root{
  --mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath transform='matrix(1 0 0 .62 0 12.92)' d='M3 21c30-3 70-5 118-4 30 1 52 0 76-3l-1 9c-2 3-1 6 1 9-40 3-82 4-124 3-24 0-46 1-69 3 2-3 1-6-1-8 1-3 1-6 0-9z' fill='%2300F2A6'/%3E%3C/svg%3E");
  --mk-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath transform='matrix(1 0 0 .62 0 12.92)' d='M3 21c30-3 70-5 118-4 30 1 52 0 76-3l-1 9c-2 3-1 6 1 9-40 3-82 4-124 3-24 0-46 1-69 3 2-3 1-6-1-8 1-3 1-6 0-9z' fill='%23ffffff'/%3E%3C/svg%3E")}
/* highlights that already draw on their own cue (a step, a quote, a hover): only the stroke changes */
.bfA-hl,.bf-hl,.statement .hl-w,.pq-hl .pq-w,.six-i .t>span,.eq-build .t,#start .offer h3{background-image:var(--mk)!important;background-position:0 0!important;background-repeat:no-repeat!important}
.eq-build .t:is(:hover,:focus-visible){background-size:100% 100%}
/* every other big highlight: motion.js tags it .mk and adds .mk-on once the title's words have landed
   (.mk.mk outranks the older `.split-words.go em{…!important}`, which drew the stroke as soon as the title started) */
:root .mk.mk{background-image:var(--mk)!important;background-position:0 0!important;background-repeat:no-repeat!important;background-size:0% 100%!important;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .9s cubic-bezier(.3,.6,.2,1)!important;animation:none!important}
:root .mk.mk.mk-w{background-image:var(--mk-w)!important}
:root .mk.mk.mk-on{background-size:100% 100%!important}
/* the words inside a highlighted phrase used to carry the band themselves (background:inherit); now the phrase draws one stroke */
:root .split-words :is(em,mark) .w>span{background:none!important}
/* hero titles are on screen before any script runs: undrawn from the first paint; motion.js draws them after the words */
:root :is(.v2-hero,.v4-hero,.lp-hero,.h3) h1 em{background-image:var(--mk)!important;background-position:0 0!important;background-repeat:no-repeat!important;background-size:0% 100%!important;animation:none!important;transition:background-size .9s cubic-bezier(.3,.6,.2,1)!important;-webkit-box-decoration-break:clone;box-decoration-break:clone}
:root :is(.v2-hero,.v4-hero,.lp-hero,.h3) h1 em.mk-on{background-size:100% 100%!important}
@media (prefers-reduced-motion:reduce){:root .mk.mk,:root :is(.v2-hero,.v4-hero,.lp-hero,.h3) h1 em{background-size:100% 100%!important;transition:none!important}}

/* Services page (11 Oct 2026, preview «A · Cover»): the programme as one full screen (ink, photo bleeding off the right,
   the name set like a magazine masthead), then the two main services open, photo + text, no card boxes, the second lower. */
.sv-cover{--edge:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)));position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:calc(100svh - var(--head-h,79px));color:#fff;overflow:clip}
.sv-cover-txt{position:relative;z-index:2;align-self:center;padding:clamp(40px,7vh,88px) 0 clamp(40px,7vh,88px) var(--edge)}
.sv-tag{display:block;font:700 11.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;margin:0 0 18px;opacity:.7}
.sv-mast{font:700 clamp(62px,9.6vw,168px)/.84 var(--display)!important;letter-spacing:-.055em;color:#fff;margin:0;width:calc(100% + 24vw);text-shadow:0 2px 40px rgba(35,31,32,.35)}
.sv-ask{display:block;font-size:clamp(24px,2.3vw,36px);line-height:1.15;margin:16px 0 0}
.sv-cover .sv-ask{color:var(--mint)}
.sv-text{font:300 clamp(17px,1.35vw,20px)/1.55 var(--body);max-width:28em;margin:clamp(18px,2.4vh,26px) 0 0;color:rgba(255,255,255,.78)}
.sv-meta{font:700 15px/1.35 var(--body);margin:0}
.sv-foot{display:grid;gap:18px;margin-top:clamp(24px,3.6vh,40px);padding-top:20px;border-top:1px solid rgba(255,255,255,.2);max-width:600px}
.sv-foot .btn-row{margin:0}
.sv-cover .sv-ghost{color:#fff;border-color:currentColor}
.sv-cover .sv-ghost:hover{--bg:#fff;--fg:var(--ink);background:#fff;color:var(--ink)}
.sv-cover-ph{position:relative;margin:0}
.sv-cover-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 28%}
.sv-cover-ph::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--ink) 0,rgba(35,31,32,.6) 14%,rgba(35,31,32,0) 42%)}
@media (prefers-reduced-motion:no-preference){.sv-cover-ph img{animation:svSlow 2.2s cubic-bezier(.2,.7,.1,1) both}}
@keyframes svSlow{from{transform:scale(1.12)}to{transform:scale(1)}}
.sv-duo{padding:var(--sec) 0}
.sv-duo-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,88px);align-items:start}
.sv-one{display:block;color:var(--ink);text-decoration:none}
.sv-one:nth-child(2){margin-top:clamp(40px,12vh,140px)}
.sv-one figure{margin:0 0 22px;overflow:hidden;border-radius:var(--r)}
.sv-one img{width:100%;aspect-ratio:4/4.4;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.sv-one:hover img{transform:scale(1.04)}
.sv-one h3{font-size:clamp(32px,3.4vw,52px);letter-spacing:-.035em;margin:0}
.sv-one .sv-ask{font-size:clamp(22px,2vw,28px);margin:8px 0 12px}
.sv-one p{color:var(--ink-2);max-width:30em;margin:0}
.sv-one .sv-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1.5px solid var(--ink);padding-top:16px;margin-top:18px;color:var(--ink);max-width:none}
.sv-one .go{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;flex:none;transition:transform .35s var(--ease)}
.sv-one:hover .go{transform:translateX(4px)}
.sv-one .go .arr{width:18px;height:18px}
@media (max-width:860px){
  .sv-cover{grid-template-columns:1fr;min-height:0}
  .sv-cover-ph{order:-1;height:62svh}
  .sv-cover-ph::before{background:linear-gradient(0deg,var(--ink) 0,rgba(35,31,32,.5) 22%,rgba(35,31,32,0) 50%)}
  .sv-cover-txt{padding:0 var(--gut) 56px;margin-top:-26vw}
  .sv-mast{width:auto;font-size:clamp(54px,16vw,72px)!important}
  .sv-cover .btn-row .btn{flex:1 1 100%;justify-content:center}
  .sv-duo-g{grid-template-columns:1fr;gap:56px}
  .sv-one:nth-child(2){margin-top:0}
}
/* Identity Portrait page: the comparison with the 1:1 (moved here from the services page) */
.ip-cmp h2{font-size:clamp(30px,3.6vw,54px);letter-spacing:-.03em;max-width:16ch;margin:0 0 clamp(26px,3.6vw,48px)}
.ip-ct{width:100%;border-collapse:collapse;table-layout:fixed}
.ip-ct th,.ip-ct td{text-align:left;vertical-align:top;padding:clamp(16px,1.8vw,24px) clamp(12px,1.6vw,26px) clamp(16px,1.8vw,24px) 0;border-top:1px solid var(--line);font:300 16.5px/1.5 var(--body);color:var(--ink-2)}
.ip-ct col.l{width:22%}
.ip-ct tbody th{font:700 11.5px/1.5 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:clamp(19px,2vw,27px)}
.ip-ct thead th{border-top:0;padding-bottom:18px;vertical-align:bottom}
.ip-ct thead b{display:block;font:700 clamp(21px,2vw,28px)/1.1 var(--display);letter-spacing:-.015em;color:var(--ink)}
.ip-ct thead .hand{display:block;font-size:clamp(19px,1.6vw,23px);line-height:1.15;margin-top:6px;color:var(--ink-2);font-weight:400}
.ip-ct .fx{padding-left:clamp(14px,1.8vw,28px);border-left:3px solid var(--mint)}
.ip-ct thead .fx b span{background:var(--mk) 0 0/100% 100% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ip-ct td.fx{color:var(--ink)}
.ip-ct tfoot td{border-top:1.5px solid var(--ink);padding-top:22px}
.ip-more{font:700 15px/1 var(--body);color:var(--ink);text-decoration:none;padding:8px 0 5px;border-bottom:1.5px solid var(--mint);transition:border-color .25s}
.ip-more:hover{border-color:var(--ink)}
.ip-meta{display:block;font:400 14px/1.4 var(--body);color:var(--muted);margin-top:12px}
@media (max-width:760px){
  .ip-ct,.ip-ct thead,.ip-ct tbody,.ip-ct tfoot{display:block;width:100%}
  .ip-ct colgroup,.ip-ct thead td:first-child,.ip-ct tfoot td:first-child{display:none}
  .ip-ct thead tr,.ip-ct tbody tr{display:grid;grid-template-columns:1fr 1fr}
  .ip-ct tbody tr{border-top:1px solid var(--line)}
  .ip-ct tbody th{grid-column:1 / -1;border-top:0;padding:16px 0 0;font-size:11px}
  .ip-ct tbody td{border-top:0;font-size:15px;padding-top:6px}
  .ip-ct tfoot tr{display:grid;grid-template-columns:1fr}
  .ip-ct tfoot td{border-top:0}.ip-ct tfoot td.fx{border-left:0;padding-left:0}
  .ip-ct tfoot tr td:nth-child(2){border-top:1.5px solid var(--ink)}
  .ip-ct tfoot .btn{width:100%;justify-content:center}
}
/* services page: the gate line now opens its own section (Φαίνεσαι., the printed Book), so no gap above it */
.xr-gate.xr-gate-top{margin-top:0}

/* ===== Extra service pages as landing pages (Anthony, 11 Oct 2026; preview _proto/svc-identity-portrait.html) =====
   lp_rich._page_svc: Identity Portrait, One-Off, Wardrobe Edit, Personal Shopping, Φαίνεσαι., Printed Book and their lp-* twins.
   sx- = this template only. Big highlights use the hand-drawn marker (--mk), drawn by motion.js after the words land. */
.sx-hero{--sx-top:79px;--edge:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)));position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);min-height:calc(100svh - var(--sx-top));background:#fff;overflow:clip;padding:0!important}
.lp-top~main .sx-hero{--sx-top:69px}
.sx-hero .seq{align-self:center;padding:clamp(28px,4.5vh,56px) clamp(28px,4vw,80px) clamp(36px,6vh,72px) var(--edge);position:relative;z-index:2}
.sx-hero .svc-back{margin-bottom:clamp(14px,2.6vh,26px)}
.sx-hero .svc-name{margin:0 0 clamp(14px,2.4vh,24px)}
.sx-hero h1{font:700 clamp(40px,min(5.2vw,8.4vh),86px)/.97 var(--display);letter-spacing:-.04em;margin:0;max-width:13ch}
.sx-sub{font:300 clamp(16.5px,min(1.3vw,2.2vh),20px)/1.55 var(--body);color:var(--ink-2);margin:clamp(14px,2.6vh,28px) 0 0;max-width:36em}
.sx-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(20px,3.4vh,34px)}
.sx-more.btn{--bg:transparent;--fg:var(--ink);background:none;border:0;border-bottom:1.5px solid var(--mint);border-radius:0;padding:8px 0 5px;font:700 15px/1 var(--body);color:var(--ink);box-shadow:none;transition:border-color .25s}
.sx-more.btn:hover{transform:none;box-shadow:none;background:none;color:var(--ink);border-color:var(--ink)}
.sx-more::after{content:" ↓"}
.sx-facts{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 26px;margin:clamp(22px,3.4vh,36px) 0 0;padding:18px 0 0;border-top:1px solid var(--line);max-width:640px}
.sx-facts li{position:relative;padding-left:18px;font:400 14.5px/1.4 var(--body);color:var(--ink-2)}
.sx-facts li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:8px;background:var(--mint);clip-path:polygon(0 0,100% 0,50% 100%)}
.sx-hero-ph{position:relative;margin:0;min-height:100%}
.sx-hero-ph .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 30%}
.sx-hero-ph .sx-hg{position:absolute;left:0;top:56%;width:clamp(58px,5.6vw,92px);height:auto;transform:translate(-50%,-50%);z-index:3}
@media (prefers-reduced-motion:no-preference){
  .sx-hero-ph .ph{animation:sxUnveil 1.5s cubic-bezier(.2,.7,.1,1) both}
  .sx-hero-ph .sx-hg{animation:sxPop .9s cubic-bezier(.2,.9,.25,1.25) .9s both}
}
@keyframes sxUnveil{from{clip-path:inset(0 0 0 100%);transform:scale(1.08)}to{clip-path:inset(0 0 0 0);transform:scale(1)}}
@keyframes sxPop{from{opacity:0;transform:translate(-50%,-30%) rotate(-12deg)}to{opacity:1;transform:translate(-50%,-50%) rotate(0)}}

/* the client's words, straight after the hero */
.sx-proof .wrap{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,9.6fr);gap:clamp(16px,4vw,64px);align-items:start}
.sx-qm{font:700 clamp(110px,13vw,210px)/.62 var(--display);color:var(--mint);margin:0;user-select:none}
.sx-proof figure{margin:0}
.sx-proof blockquote{margin:0;font:700 clamp(23px,2.45vw,38px)/1.24 var(--body);letter-spacing:-.018em;max-width:30ch;color:#fff}
.sx-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:clamp(22px,3vw,34px)}
.sx-who .hand{font-size:clamp(28px,2.6vw,38px);line-height:1}
.sx-who span:not(.hand){font:400 14px/1.3 var(--body);color:rgba(255,255,255,.62);letter-spacing:.02em}

/* «Σου ακούγεται γνωστό;»: all at once, big stepped lines (her fingerprint behind, as on the 1:1 page) */
.sx-pains{background:#fff}
.sx-kick{display:block;font:400 clamp(40px,4.6vw,72px)/1.05 var(--hand)!important;letter-spacing:0!important;color:var(--ink);margin:0 0 clamp(18px,3vw,30px)}
.sx-pl{list-style:none;margin:0;padding:0}
.sx-pl li{font:700 clamp(26px,3.5vw,54px)/1.08 var(--display);letter-spacing:-.032em;padding:.42em 0 .46em;border-top:1px solid var(--line)}
.sx-pl li:last-child{border-bottom:1px solid var(--line)}
.sx-pl li:nth-child(2){padding-left:10%}
.sx-pl li:nth-child(3){padding-left:20%}
.sx-pl li:nth-child(n+4){padding-left:30%}
.sx-pl li::before{content:"«\00a0";color:var(--mint)}
.sx-pl li::after{content:"\00a0»";color:var(--mint)}

/* the fingerprint behind one text section per page (pains, or «Πώς δουλεύει» / FAQ where a page has no pains):
   three treatments while Anthony chooses (data-fp a|b|c, switched by ?fp= in motion.js), at the end of this block */
.sx-fp{position:relative;overflow:clip}
.sx-fp>.wrap{position:relative;z-index:1}
#sound-familiar.sx-fp>.wrap::before,.sx-fp>.wrap::before{content:none;display:none}

/* «Πώς δουλεύει»: the page's photos held beside numbered steps */
.sx-how .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,6vw,104px);align-items:start}
.sx-how.sx-how-ph .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.sx-how-pics{position:sticky;top:calc(var(--sx-top,79px) + 24px)}
.sx-how-pics figure{margin:0}
.sx-how-pics img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:var(--r);display:block}
.sx-how h2{font-size:clamp(34px,4vw,60px);line-height:1;letter-spacing:-.035em;margin:0 0 clamp(20px,3vw,36px)}
.sx-how:not(.sx-how-ph) .sx-how-txt{max-width:860px}
.sx-steps{list-style:none;margin:0;padding:0;counter-reset:sxs}
.sx-steps li{display:grid;grid-template-columns:clamp(64px,7vw,104px) minmax(0,1fr);column-gap:clamp(14px,2vw,28px);padding:clamp(22px,2.6vw,34px) 0;border-top:1.5px solid var(--ink)}
.sx-steps li::before{counter-increment:sxs;content:"0" counter(sxs);grid-row:1 / span 3;font:700 clamp(40px,4.4vw,68px)/.86 var(--display);letter-spacing:-.04em;color:var(--ink)}
.sx-steps h3{font:700 clamp(21px,1.9vw,27px)/1.15 var(--display);letter-spacing:-.015em;margin:0}
.sx-steps .hand{display:block;font-size:clamp(19px,1.6vw,23px);line-height:1.2;margin:4px 0 8px;color:var(--ink-2)}
.sx-steps p{margin:0;color:var(--ink-2);font-size:16.5px;line-height:1.6;max-width:34em}

/* the page's own interactive section, open on white (no rounded grey panel) */
.sx-mod{background:#fff}
.sx-mod .cap-ctrl [data-k],.sx-mod .cpw-item:not(.good){background:var(--stone)}
.sx-mod .cap-ctrl button{background:transparent}
/* One-Off: the topics as big words you press */
.sx-topics .lp-h{margin-bottom:clamp(18px,2.6vw,30px)}
.sx-topics .lp-h p{margin:10px 0 0;color:var(--ink-2)}
.sx-tw{display:flex;flex-wrap:wrap;align-items:baseline;gap:.05em .5em;margin:0 0 clamp(26px,3.6vw,44px)}
.sx-tw button{appearance:none;background:none;border:0;padding:0;font:700 clamp(30px,5vw,80px)/1.02 var(--display);letter-spacing:-.04em;color:rgba(35,31,32,.16);transition:color .35s;cursor:pointer;text-align:left}
.sx-tw button:not(:last-child)::after{content:"·";color:var(--mint);margin-left:.2em;font-size:.8em}
.sx-tw button:hover{color:rgba(35,31,32,.42)}
.sx-tw button[aria-pressed=true]{color:var(--ink)}
.sx-tw button span{background:var(--mk) 0 0/0% 100% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .9s cubic-bezier(.3,.6,.2,1)}
.sx-tw button[aria-pressed=true] span{background-size:100% 100%}
.sx-tps .sx-tp{display:none;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(18px,3vw,48px);border-top:1.5px solid var(--ink);padding-top:clamp(18px,2.4vw,28px)}
.sx-tps .sx-tp.on{display:grid;animation:sxIn .6s cubic-bezier(.2,.7,.1,1)}
.sx-tp p{margin:0}
.sx-tp .f-a{font:700 clamp(20px,1.7vw,25px)/1.3 var(--display);letter-spacing:-.012em}
.sx-tp .f-b{color:var(--ink-2)}
.sx-tp .f-c{font-weight:700}
.sx-tp .f-c .arrow{color:var(--mint)}
.sx-tp .f-c .hand{display:block;font-weight:400;font-size:22px;margin-top:6px;color:var(--ink-2)}
@keyframes sxIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sx-tps .sx-tp.on{animation:none}.sx-tw button span{transition:none}}

/* the offer: the price set big, the form open on the grey (no card in a card) */
.sx-offer .offer-form{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,104px)}
.sx-offer .sx-pc{position:sticky;top:calc(var(--sx-top,79px) + 24px);border-top-width:1.5px}
.sx-offer .sx-pc .pc-name{font-size:clamp(20px,1.7vw,24px);margin:0}
.sx-offer .sx-pc .big{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin:clamp(14px,2vw,24px) 0 8px;font-size:clamp(84px,10vw,156px);line-height:.86;letter-spacing:-.06em}
.sx-offer .sx-pc .big>small:not(.from){flex-basis:100%;order:-1;font:700 11.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;vertical-align:0}
.sx-offer .sx-pc .big small.from{font-size:.24em;color:var(--ink);vertical-align:0}
.sx-offer .sx-pc .opts2{gap:0}
.sx-offer .sx-pc .opts2 div{border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 0}
.sx-offer .fcard{position:relative;background:none;box-shadow:none;border-radius:0;padding:0}
.sx-offer .why-chips,.sx-offer .pills{position:relative}
.sx-offer .fcard h3{font-size:clamp(28px,2.8vw,40px);letter-spacing:-.03em;margin-bottom:10px}
.sx-offer .fcard .fsub{font-size:16px;color:var(--ink-2);max-width:36em}
.sx-offer .field input:not([type=checkbox]):not([type=radio]),.sx-offer .field textarea{background:transparent!important;border:0;border-bottom:1.5px solid rgba(35,31,32,.28);border-radius:0;padding:12px 0;font-size:17px}
.sx-offer .field input:not([type=checkbox]):not([type=radio]):focus,.sx-offer .field textarea:focus{box-shadow:none;border-color:var(--ink)}
.sx-offer .field textarea{min-height:96px}
.sx-offer .why-chips label,.sx-offer .pills label{background:transparent}
.sx-offer .form .btn{width:100%}

/* the 1:1 after the form: the "whole journey" band */
.sx-band{color:var(--ink);overflow:clip}
.sx-bq{font-size:clamp(28px,3.2vw,48px)!important;letter-spacing:-.03em;line-height:1.05;max-width:22ch;margin:0}
.sx-eq{list-style:none;margin:clamp(30px,4.5vw,64px) 0 clamp(26px,3.6vw,48px);padding:clamp(14px,1.6vw,22px) 0 0;display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(8px,1.2vw,20px);border-top:1.5px solid var(--ink)}
.sx-eq li{flex:0 1 auto;min-width:0}
.sx-eq b,.sx-eq .op{display:block;font:700 clamp(34px,4.6vw,78px)/.9 var(--display);letter-spacing:-.05em}
.sx-eq .op{color:#fff;flex:none}
.sx-eq .hand{display:block;font-size:clamp(19px,1.6vw,24px);line-height:1.2;margin-top:12px;max-width:13em}
.sx-band-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;border-top:1.5px solid var(--ink);padding-top:clamp(20px,2.4vw,30px)}
.sx-band-foot .sx-meta{margin:0;font:700 17px/1.3 var(--body)}
.sx-band .btn-ghost{border-color:var(--ink)}

/* FAQ: the heading held on the left, the answers on the right */
.sx-faq .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,88px);align-items:start}
.sx-faq .lp-h{position:sticky;top:calc(var(--sx-top,79px) + 24px);text-align:left;margin:0}
.sx-faq h2{font-size:clamp(34px,3.8vw,56px);letter-spacing:-.035em}
.sx-faq .lp-faq{max-width:none;margin:0}
.sx-faq .acc details:first-child{border-top:1px solid var(--line)}
.sx-final h2{font-size:clamp(54px,8.4vw,136px)!important;line-height:.95;letter-spacing:-.045em}

@media (max-width:860px){
  .sx-hero{grid-template-columns:1fr;min-height:0}
  .sx-hero-ph{order:-1;height:min(46svh,420px);min-height:280px}
  .sx-hero-ph .sx-hg{left:auto;right:22px;top:auto;bottom:0;transform:translate(0,50%);width:46px}
  @keyframes sxPop{from{opacity:0;transform:translate(0,70%) rotate(-12deg)}to{opacity:1;transform:translate(0,50%) rotate(0)}}
  .sx-hero .seq{display:flex;flex-direction:column;align-items:flex-start;padding:22px var(--gut) 44px}
  .sx-hero .svc-back{display:none}
  .sx-hero h1{font-size:clamp(34px,10.2vw,46px);max-width:none}
  .sx-cta{order:3;margin-top:20px;width:100%}
  .sx-cta .btn{flex:1 1 auto;justify-content:center}
  .sx-sub{order:4;margin-top:26px}
  .sx-facts{order:5;grid-template-columns:1fr;gap:10px;margin-top:22px}
  .sx-proof .wrap{grid-template-columns:1fr;gap:0}
  .sx-qm{font-size:110px;height:.5em}
  .sx-pl li{font-size:clamp(25px,7.2vw,32px)}
  .sx-pl li:nth-child(n){padding-left:0}
  .sx-how.sx-how-ph .wrap,.sx-offer .offer-form,.sx-faq .wrap{grid-template-columns:1fr}
  .sx-how-pics,.sx-offer .sx-pc,.sx-faq .lp-h{position:static}
  .sx-how-pics img{aspect-ratio:4/4.2}
  .sx-tw{flex-direction:column;align-items:flex-start;gap:2px}
  .sx-tw button:not(:last-child)::after{display:none}
  .sx-tw button{font-size:clamp(30px,9vw,40px)}
  .sx-tps .sx-tp.on{grid-template-columns:1fr;gap:12px}
  .sx-eq{flex-direction:column;border-top:0;padding-top:0;gap:0}
  .sx-eq li{border-top:1.5px solid var(--ink);padding:14px 0 16px;width:100%}
  .sx-eq .op{display:none}
  .sx-eq b[data-op]:not([data-op=""])::before{content:attr(data-op) "\00a0";color:#fff}
  .sx-eq b{font-size:clamp(40px,12vw,56px)}
  .sx-band-foot .btn-row,.sx-band-foot .btn{width:100%;justify-content:center}
  .sx-offer .sx-pc .big{font-size:clamp(76px,22vw,104px)}
}

/* every client quote, light (on white): ink words, the mark stays mint, her name in the deeper mint */
.sx-proof.sx-light{background:#fff;color:var(--ink)}
.sx-proof.sx-light blockquote{color:var(--ink)}
.sx-proof.sx-light .sx-who .hand{color:var(--ink)!important}
.sx-proof.sx-light .sx-who span:not(.hand){color:var(--muted)}
.sx-proof blockquote mark{background:linear-gradient(transparent 56%,var(--mint) 56%,var(--mint) 94%,transparent 94%);color:inherit;padding:0 .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* the fingerprint, three treatments (default a; pick with ?fp=a|b|c). Remove the two that lose, and the switch in motion.js. */
/* a · clearing: full-bleed, lighter, a soft white clearing where the words sit, the lines only round the edges */
/* b · stamp: one print pressed on the page, cropped to its oval, turned a little, bleeding off the right; it inks in */
.sx-fp[data-fp=b] .fp-bg{--ink:100%;background:none;opacity:1}
.sx-fp[data-fp=b] .fp-bg::before{content:"";position:absolute;top:50%;right:-8vw;width:min(600px,42vw);aspect-ratio:1118/1385;transform:translateY(-50%) rotate(-14deg);background:url(../img/kit/pattern-fingerprint-mint-soft.svg) center/cover no-repeat;-webkit-mask-image:radial-gradient(ellipse 46% 48% at 50% 50%,#000 calc(var(--ink) * .8),transparent calc(var(--ink) * .98));mask-image:radial-gradient(ellipse 46% 48% at 50% 50%,#000 calc(var(--ink) * .8),transparent calc(var(--ink) * .98))}
.sx-faq.sx-fp[data-fp=b] .fp-bg::before{right:auto;left:-12vw;transform:translateY(-50%) rotate(12deg);width:min(520px,38vw)}
.sx-fp[data-fp=b] .sx-pl{max-width:min(100%,780px)}
.sx-fp[data-fp=b] .sx-pl li:nth-child(n){padding-left:0}
/* c · touch: very faint at rest; the lines come up round the pointer and round the line coming into view */
@media (max-width:860px){
  .sx-fp[data-fp=b] .fp-bg::before,.sx-faq.sx-fp[data-fp=b] .fp-bg::before{top:12%;right:-34vw;left:auto;width:80vw;transform:translateY(-30%) rotate(-14deg);opacity:.75}
}

/* services «Επιπλέον υπηρεσίες.»: the title highlighted, its line under it at body size */
.xr-lead{margin:14px 0 0;max-width:34em}
/* services: the two blocks after the main services open with the same heading («Για όσες ολοκλήρωσαν…», «Επιπλέον υπηρεσίες.») */
.xr-h{font:700 clamp(26px,2.5vw,36px)/1.18 var(--display);letter-spacing:-.025em;margin:0;max-width:30ch}
.xr-h em{font-style:normal}
/* the printed Book flip is interactive, so it gets more room (Anthony, 11 Oct 2026): open, the spread is up to 1200px */
@media (min-width:701px){.book3d.land{width:min(600px,44vw)}}

/* ===== v6 · site review fixes (11 Oct 2026): one block, numbered as in the review ===== */
/* 1 · phone menu at any scroll position. `.menu-open{overflow:hidden}` (site.css) made body its own scroll box, so the sticky
   header stuck to body and scrolled away with the page (its top was −scrollY). html already holds the scroll lock (mobile fix 4),
   so body stays a plain box; the sticky bottom bars step aside while the menu is open. */
body.menu-open{overflow-x:clip;overflow-y:visible}
body.menu-open :is(.mbar,.lp-bar){transform:translateY(140%)!important;visibility:hidden;pointer-events:none}
/* 4 · one size per heading role */
/* the close «Είσαι. Ας φανεί.»: the home size (.h-xl) on every page, 80px desktop and 38px phone (was 72px on the 1:1, 121px on service pages) */
.lp-final h2,.sx-final h2{font-size:clamp(38px,5.6vw,80px)!important;line-height:.98;letter-spacing:-.03em}
@media (max-width:380px){.lp-final h2,.sx-final h2{font-size:34px!important}}
/* «Σου ακούγεται γνωστό;»: the 1:1 takes the service-page size (.sx-kick) */
.pq-head .pq-title{font-size:clamp(40px,4.6vw,72px);line-height:1.05}
/* mid section titles (were 51.8 / 54.7 / 57.6px beside .h-l's 54px): all on .h-l's value */
:root{--h-l:clamp(30px,3.8vw,54px)}
.lp-h h2,.ip-cmp h2,.sx-faq h2,.sx-how h2{font-size:var(--h-l)}
/* 5 · less grey (Sophia): Method #hd and #seven-lessons, About #my-story and «Πώς δουλεύει» on the service pages are white now
   (bg-stone taken off in the templates). An explicit white, so the rounded seam tops still cover what they overlap. #form stays grey. */
#my-story,#seven-lessons,.sx-how{background:#fff}
/* 6 · Method equation: «Είσαι ⧗ Φαίνεσαι!» takes the hand-drawn marker in place of the solid mint box (white words, like the
   three tools above it). It draws once the result has landed: motion.js (or v4.js without GSAP) adds .mk-on; reduced motion shows it drawn. */
.eq-build .res{background:var(--mk) 0 0/0% 100% no-repeat;color:#fff;border-radius:0!important;padding:0 .08em!important;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .9s cubic-bezier(.3,.6,.2,1)}
.eq-build .res .hg{background:currentColor}
.eq-build.go .res,.eq-build .res.mk-on{background-size:100% 100%}
.eq-sec.scene .eq-build .res:not(.mk-on){background-size:0% 100%}
/* 11 · phone heroes: as much room above Sophia's head as the photo has, on Φαίνεσαι. and Personal Shopping (was 40% 30%) */
@media (max-width:860px){body:is([data-lp=fainesai],[data-lp=personal-shopping]) .sx-hero-ph .ph{object-position:40% 0%}}
/* 12 · tap targets of 44px without changing the look: an invisible hit area round the link, the lesson titles and the sliders */
.sx-more.btn::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.six-i{position:relative}
.six-i::before{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%)}
.cpw-item input[type=range]{display:block;height:44px;margin:-11px 0 -6px;cursor:pointer}   /* the margins keep the old spacing round the thin track */

/* Greek pages: headings in one typeface (11 Oct 2026). Neulis has no Greek letters, so a Greek heading mixed Mod Grotesk
   with Neulis for its Latin words; on Greek pages every heading is Mod Grotesk. English pages keep Neulis. */
html[lang="el"]{--display:"Mod",system-ui,-apple-system,sans-serif}
/* Identity Portrait comparison: the "logo" line under its title */
.ip-lead{margin:-12px 0 clamp(26px,3.6vw,44px);max-width:40em}
/* contact: book a time directly (Cal.com), the form stays as the fallback */
.ct-book{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 28px}
.ct-book .muted{font-size:15px}
/* home «Τι υπάρχει πριν» on tall screens: the pinned stage sits near the top instead of centred in a full-height frame,
   so there's no half-screen of white under the hero (11 Oct 2026) */
/* the frame is only as tall as the sentence + photo (--bf-h, set by motion.js) and pins centred in what you can see:
   no blank band under the hero on the way in, and no empty half-screen while it's pinned */
@media (min-width:981px){#before-styling.bf-A{padding-top:0}#before-styling.bf-A .bf-pin{height:auto;align-items:normal;padding:clamp(16px,3vh,40px) 0;box-sizing:border-box;top:max(var(--head-h,79px),calc((100vh + var(--head-h,79px) - var(--bf-h,700px)) / 2))}}
/* quiz side panel: no mint triangle over the photo (it sat on Sophia's face; never a photo in a triangle, 11 Oct 2026).
   The handwritten note sits on a small white label instead */
.qx .qside .qtri{display:none}
.qx .qside .qnote{left:50%;right:auto;bottom:6%;transform:translateX(-50%);width:max-content;max-width:86%;padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.92);font-size:20px;line-height:1.2}
:root .qx .qside .qnote.hand{color:var(--ink)!important}
/* Contact: Sophia's calendar in the page (#book, 11 Oct 2026). Every «Κλείσε δωρεάν call» lands here */
#book .ct-book-head{max-width:640px;margin:0 0 22px}
#book .ct-book-head .h-l{margin:6px 0 10px}
#book .ct-cal{width:100%;min-height:560px;border:1px solid var(--line,rgba(35,31,32,.12));border-radius:var(--r-lg,22px);overflow:hidden;background:#fff}
#book .ct-cal-wait{padding:28px}
#book .ct-cal:has(iframe) .ct-cal-wait{display:none}
#book + #call{padding-top:var(--sec,108px)!important}
#call .ct-reply{margin:-8px 0 18px}
/* home «Πριν από… υπάρχει…» on phones reads like the laptop version (11 Oct 2026): every pair has both handwritten labels,
   and the new phrase gets the hand-drawn marker (v4.js adds the labels and .mk; .mk-on draws it in view) */
.bf-lab-m{display:none}
@media (max-width:980px){
  #before-styling .bf-left>.bf-lab{display:none}
  #before-styling .bf-list li .bf-lab-m{display:block;font-size:24px;line-height:1;margin:0 0 8px;color:var(--ink)}
  #before-styling .bf-list li .bf-lab-m+.bf-ans-m{margin-top:0}
  #before-styling .bf-list li .bf-x{display:block;margin:0 0 16px}
  #before-styling .bf-list{gap:44px}
}


/* ---------- Journal (journal/*.html, build_journal.py): jo- ---------- */

.jo-hero{padding:clamp(32px,4vw,56px) 0 clamp(40px,5vw,64px);background:#fff}
.jo-crumbs{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--muted,#6b6466);margin-bottom:22px}
.jo-crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.jo-hero h1{max-width:16ch;margin:6px 0 26px}
.jo-hero h1 em{font-style:normal}
.jo-stand{font-size:clamp(20px,1.7vw,24px);line-height:1.45;max-width:38ch;color:var(--ink,#231F20);font-weight:300}
.jo-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:26px;font-size:14px;color:var(--muted,#6b6466)}
.jo-meta b{color:var(--ink,#231F20);font-weight:600}
.jo-cover{margin:0;border-radius:var(--r-lg,24px);overflow:hidden;aspect-ratio:16/8}
.jo-cover img{width:100%;height:100%;object-fit:cover;display:block}
.jo-body{padding:clamp(48px,6vw,90px) 0 0;background:#fff}
.jo-col{max-width:680px;margin:0 auto}
.jo-glance{margin:0 0 56px;padding-left:22px;border-left:3px solid var(--mint,#00F2A6)}
.jo-glance .hand{font-size:26px;display:block;margin-bottom:6px}
.jo-glance p{font-size:clamp(19px,1.5vw,21px);line-height:1.55;margin:0}
.jo-col>p,.jo-step p{font-size:18px;line-height:1.75;margin:0 0 18px}
.jo-step{display:grid;grid-template-columns:64px 1fr;gap:6px 18px;padding:30px 0;border-top:1px solid var(--line,rgba(35,31,32,.12))}
.jo-step .hand{font-size:34px;line-height:1;color:var(--ink,#231F20)}
.jo-step h2{font:700 clamp(22px,2vw,28px)/1.2 var(--display);letter-spacing:-.01em;margin:0 0 10px}
.jo-step h2 mark{background:none}
.jo-q{margin:48px 0;padding:0;border:0}
.jo-q blockquote{margin:0;font:700 clamp(26px,2.6vw,38px)/1.18 var(--display);letter-spacing:-.02em}
.jo-q figcaption{margin-top:14px;font-size:15px;color:var(--muted,#6b6466)}
.jo-q figcaption .hand{font-size:24px;color:var(--ink,#231F20);margin-right:8px}
.jo-ig{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;margin:44px 0;text-decoration:none;color:inherit}
.jo-ig img{width:150px;aspect-ratio:9/16;object-fit:cover;border-radius:16px;display:block}
.jo-ig .hand{font-size:22px;display:block}
.jo-ig b{display:block;font:700 20px/1.25 var(--display);margin:4px 0 6px}
.jo-ig span.go{font-size:14px;border-bottom:1px solid currentColor}
.jo-svc{margin:44px 0;padding:28px 0;border-top:1.5px solid var(--ink,#231F20);border-bottom:1px solid var(--line,rgba(35,31,32,.12));display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.jo-svc p{margin:0;font-size:18px;max-width:40ch}
.jo-svc .hand{font-size:24px;display:block}
.jo-faq{padding:clamp(56px,7vw,100px) 0;background:#fff}
.jo-faq h2{margin-bottom:22px}
.jo-rel{padding:clamp(56px,7vw,100px) 0;background:var(--stone,#f3f2ef)}
.jo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:26px}
.jo-card{text-decoration:none;color:inherit;display:block}
.jo-card figure{margin:0 0 16px;border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:#e9e7e3}
.jo-card img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;transition:transform .8s var(--ease,cubic-bezier(.2,.7,.1,1))}
.jo-card:hover img{transform:scale(1.04)}
.jo-card .jo-tag{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6b6466)}
.jo-card h3{font:700 clamp(20px,1.7vw,24px)/1.2 var(--display);letter-spacing:-.01em;margin:6px 0 8px}
.jo-card p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2,#4a4446)}
.jo-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.jo-chips button{font:inherit;cursor:pointer;background:none;padding:10px 18px;border:1px solid var(--line,rgba(35,31,32,.2));border-radius:999px;text-decoration:none;color:inherit;font-size:15px}
.jo-chips button.on{background:var(--ink,#231F20);color:#fff;border-color:var(--ink,#231F20)}
.jo-feat{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,60px);align-items:center;text-decoration:none;color:inherit;margin-top:clamp(36px,5vw,64px)}
.jo-feat figure{margin:0;border-radius:var(--r-lg,24px);overflow:hidden;aspect-ratio:4/3}
.jo-feat img{width:100%;height:100%;object-fit:cover;display:block}
.jo-feat h2{font:700 clamp(30px,3.4vw,48px)/1.08 var(--display);letter-spacing:-.025em;margin:8px 0 16px}
@media (max-width:860px){.jo-grid{grid-template-columns:1fr}.jo-feat{grid-template-columns:1fr}.jo-step{grid-template-columns:44px 1fr}.jo-step .hand{font-size:28px}.jo-ig{grid-template-columns:110px 1fr}.jo-ig img{width:110px}.jo-cover{aspect-ratio:4/3}}
.jo-cover-wrap{margin-top:clamp(36px,5vw,56px)}
.jo-text>p,.jo-sec p,.jo-step p,.jo-text li,.jo-sec li,.jo-step li{font-size:18px;line-height:1.75;margin:0 0 18px}
.jo-text ul,.jo-sec ul,.jo-step ul{padding-left:1.2em;margin:0 0 18px}
.jo-text a,.jo-sec a,.jo-step a,.jo-svc p a{color:inherit;text-decoration:underline;text-decoration-color:var(--mint,#00F2A6);text-decoration-thickness:2px;text-underline-offset:3px}
.jo-sec{padding:26px 0 8px}
.jo-sec h2{font:700 clamp(24px,2.2vw,30px)/1.2 var(--display);letter-spacing:-.01em;margin:0 0 14px}
.jo-step:last-of-type{border-bottom:1px solid var(--line,rgba(35,31,32,.12));margin-bottom:34px}
.jo-step+.jo-text,.jo-q+.jo-text{margin-top:8px}
.jo-meta a{color:inherit;text-decoration:none}
.jo-ig-text{grid-template-columns:1fr;padding:22px 0 22px 22px;border-left:3px solid var(--mint,#00F2A6)}
.jo-draft{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:999px;background:var(--tint,#CCFCED);font-size:12px;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.jo-draftnote{display:inline-block;margin:0 0 18px;padding:8px 14px;border-radius:12px;background:var(--tint,#CCFCED);font-size:14px}
.jo-list{background:#fff;padding-top:clamp(36px,5vw,64px)}
.jo-list .jo-grid{margin-top:0}
.jo-card[hidden],.jo-feat[hidden]{display:none}
.jo-none{font-size:18px;color:var(--muted,#6b6466)}
.jo-svc-rel{background:var(--stone,#f3f2ef)}


/* home «Τι υπάρχει πριν»: the line that used to be the hero title (18 Oct 2026) */
.bf-title em{font-style:normal}
.bf-title{margin:0 auto}
#before-styling{padding-bottom:var(--sec,108px)}
/* «Πριν από το styling, τι υπάρχει;» stays above the pinned steps and leaves with the last one (desktop, bf-A). The heading
   rides in a track that ends where the pin ends, so both scroll away together; the section's top padding makes its room */
.bf-head{padding:calc(var(--sec,108px) * .5) 0 clamp(12px,2vh,28px)}
@media (min-width:981px){
  #before-styling.bf-A{position:relative;padding-top:var(--bf-th,160px);--bf-ht:max(var(--head-h,79px),calc((100vh + var(--head-h,79px) - var(--bf-th,160px) - var(--bf-h,700px)) / 2))}
  #before-styling.bf-A .bf-head-track{position:absolute;left:0;right:0;top:0;bottom:calc(var(--sec,108px) + var(--bf-h,700px));z-index:2;pointer-events:none}
  #before-styling.bf-A .bf-head{position:sticky;top:var(--bf-ht);padding-top:0;background:#fff}
  #before-styling.bf-A .bf-pin{top:calc(var(--bf-ht) + var(--bf-th,160px))}
}
/* privacy.html */
#privacy .prose h2{font:700 clamp(20px,1.8vw,24px)/1.25 var(--display);margin:34px 0 10px}
#privacy .prose p{font-size:17px;line-height:1.7}
#privacy .prose a{text-decoration:underline;text-decoration-color:var(--mint);text-underline-offset:3px}
#privacy h1{margin-bottom:14px}
/* quiz on phones (18 Oct 2026): the box fits the visible screen (dvh, not vh, which iOS makes taller than the screen),
   the answers area can shrink and scroll, and the photo strip keeps faces in frame */
.qx .qimg{object-position:50% 24%}
@media (max-width:860px){
  .qx .box{height:100vh;height:100dvh;max-height:100dvh;grid-template-rows:clamp(150px,26dvh,220px) minmax(0,1fr)}
  .qx .qmain{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .qx .qimg{object-position:50% 20%}
}

/* testimonials (18 Oct 2026): one at a time, taking turns (site.js); all stacked in one cell so nothing jumps */
.tm-set{display:grid}
.tm-set>.tm{grid-area:1/1;margin:0;transition:opacity .6s var(--ease),visibility .6s}
.tm-set[data-tm]>.tm:not(.on){opacity:0;visibility:hidden}
.tm-nav{display:flex;align-items:center;gap:14px;margin-top:28px}
.tm-nav button{width:44px;height:44px;border-radius:50%;border:1px solid currentColor;background:none;color:inherit;font-size:18px;cursor:pointer;opacity:.75;transition:opacity .2s,background .2s}
.tm-nav button:hover{opacity:1;background:rgba(127,127,127,.12)}
.tm-count{font-size:14px;opacity:.7;min-width:3.5em;text-align:center}
.sx-proof:not(.sx-light) .tm-nav{color:#fff}
.for-you .fy-jump{text-align:center;margin:26px 0 0;font-size:16px;font-weight:600}
/* animated titles: the word box clips its overflow, so give it room on the left for the accent of Greek capitals (Έ, Ά, Ή…), which sits outside the letter; the negative margin keeps the layout */
.split-words .w{padding-left:.16em;margin-left:-.16em}
/* «A Journey…» three steps: titles on one line (columns start together), and the hourglass (two triangles in one
   drawing) drawn taller, growing upwards from the shared baseline, so it reads the same size as the single triangles */
.how3{align-items:start}
@media (min-width:821px){.how3 .h3c:nth-child(3) .h3-art svg{height:150%}}
@media (min-width:821px){.how3{margin-top:calc(clamp(36px,5vw,64px) + clamp(75px,8vw,115px))}}

/* home: Sophia's welcome video, right under the hero (18 Oct 2026). Plays on tap, with sound; captions are in the video */
.welcome{padding-top:calc(var(--sec,108px) * .4)}
.wlv{position:relative;max-width:1080px;margin:0 auto;border-radius:var(--r-lg,24px);overflow:hidden;aspect-ratio:16/9;background:#e9e7e3;box-shadow:0 40px 80px -50px rgba(35,31,32,.55)}
.wlv-video{width:100%;height:100%;object-fit:cover;display:block}
.wlv-play{position:absolute;inset:0;border:0;padding:0;background:linear-gradient(180deg,transparent 60%,rgba(35,31,32,.35));align-items:center!important;cursor:pointer;display:flex;align-items:flex-end;justify-content:flex-start;gap:16px;padding:clamp(18px,3vw,36px);color:#fff;text-align:left}
.wlv-btn{width:clamp(56px,6vw,76px);height:clamp(56px,6vw,76px);border-radius:50%;background:var(--mint,#00F2A6);color:var(--ink,#231F20);display:grid;place-items:center;flex:none;transition:transform .3s var(--ease)}
.wlv-btn svg{width:42%;height:42%;margin-left:6%}
.wlv-play:hover .wlv-btn{transform:scale(1.08)}
.wlv-lab{font:600 clamp(14px,1.2vw,17px)/1 var(--body);background:rgba(255,255,255,.94);color:var(--ink,#231F20);padding:12px 18px;border-radius:999px}
.wlv.playing .wlv-play{display:none}
.wlv-stage{position:relative;max-width:1080px;margin:0 auto}
.wlv-spk{position:absolute;pointer-events:none;z-index:2}
.wlv-spk-1{width:clamp(70px,9vw,130px);left:clamp(-90px,-6vw,-30px);top:clamp(-50px,-3vw,-20px)}
.wlv-spk-2{width:clamp(56px,7vw,100px);right:clamp(-70px,-5vw,-24px);bottom:clamp(-46px,-3vw,-18px)}
@media (max-width:700px){.wlv-spk-1{left:-10px;top:-34px;width:64px}.wlv-spk-2{right:-8px;bottom:-30px;width:52px}}