/* Mobile-first stylesheet — base = phones, @media (min-width:901px) = desktop enhancements */ :root{--cream:#faf7f4;--cream-warm:oklch(96.5% 0.012 18);--blush:#eec3c3;--blush-soft:oklch(93% 0.03 18);--charcoal:#2c2c2c;--charcoal-mid:oklch(44% 0.006 18);--gold:#f5d769;--rose-ink:oklch(47% 0.105 18);--dust:oklch(88% 0.014 18);--font-display:'Cormorant Garamond',Georgia,serif;--font-body:'Jost',Helvetica,sans-serif;--ease:cubic-bezier(.65,.05,0,1);--pad:24px;--sec-y:72px;--row-y:26px;--btn-y:18px;--btn-x:36px;--ctl-y:15px;--ctl-x:18px;--fs-logo:clamp(24px,0.9vw + 13px,30px);--fs-body:clamp(18px,0.625vw + 9px,21px);--fs-lead:22px;--fs-h4:20px;--fs-h3:24px;--fs-h2:28px} /* --fs-body is fluid rather than stepped: it holds at 18px up to 1440px so the approved design is untouched, then interpolates to 21px at 1920px and caps. The fixed 9px term keeps it zoomable (bare vw would fail WCAG 1.4.4). */ /* SEMANTIC LAYER — reference THESE in new work; the literals above are primitives */ :root{ --surface:var(--cream);--surface-alt:var(--cream-warm);--surface-inverse:var(--charcoal);--surface-accent:var(--blush-soft); --text-primary:var(--charcoal);--text-muted:var(--charcoal-mid);--text-accent:var(--rose-ink);--text-on-inverse:var(--cream);--text-accent-on-inverse:var(--gold); --border-hairline:var(--dust);--border-strong:var(--charcoal);--border-accent:var(--blush);--border-w:1px; --focus-ring:var(--rose-ink);--state-error:oklch(50% 0.13 25);--state-disabled-text:oklch(70% 0.006 18); --radius:0;--radius-round:999px; /* How far the decorative offset frame sits outside its photo. Also the amount the photo is inset on a phone so the frame lands inside the page gutter. */ --frame-off:22px; --space-1:6px;--space-2:12px;--space-3:20px;--space-4:28px;--space-5:44px;--space-6:64px;--space-7:96px;--space-8:140px; --opacity-veil:.85;--opacity-quiet:.6;--opacity-grain:.03; --z-base:1;--z-sticky:100;--z-nav:200;--z-overlay:9000;--z-cursor:9998;--z-preloader:10000 } @media (min-width:601px){:root{--pad:40px;--sec-y:96px;--row-y:32px;--btn-y:19px;--btn-x:38px;--fs-lead:24px;--fs-h4:22px;--fs-h3:26px;--fs-h2:32px}} @media (min-width:901px){:root{--pad:60px;--sec-y:120px;--row-y:38px;--btn-y:20px;--btn-x:38px;--fs-lead:26px;--fs-h3:28px;--fs-h2:36px}} @media (min-width:1200px){:root{--btn-y:21px;--btn-x:44px}} @media (min-width:1440px){:root{--pad:80px;--sec-y:140px;--row-y:44px;--fs-lead:30px;--fs-h4:24px;--fs-h3:32px;--fs-h2:40px;--btn-y:22px;--btn-x:48px;--ctl-y:17px;--ctl-x:20px}} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} ::selection{background:var(--gold);color:var(--charcoal)} html{scroll-behavior:smooth} body{background:var(--cream);color:var(--charcoal);font-family:var(--font-body);font-size:var(--fs-body);font-weight:300;overflow-x:hidden} a{color:var(--charcoal)}a:hover{color:var(--rose-ink)} body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.03;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSI0IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+");background-size:200px} /* PRELOADER */ .preloader{position:fixed;inset:0;z-index:10000;background:var(--charcoal);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;transition:transform 1s var(--ease);transform-origin:top} .preloader.done{transform:translateY(-101%)} .pre-name{font-family:var(--font-display);font-size:clamp(22px,6vw,52px);font-weight:300;letter-spacing:.14em;color:var(--cream);display:flex;overflow:hidden} .pre-name span{display:inline-block;transform:translateY(110%);animation:preRise .9s var(--ease) forwards;white-space:pre} .pre-line{width:0;height:1px;background:var(--gold);animation:preLine 1.4s .5s var(--ease) forwards} .pre-tag{font-size:var(--fs-body);letter-spacing:.06em;color:var(--gold);opacity:0;animation:preFade .8s 1s forwards;text-align:center;padding:0 20px} @keyframes preRise{to{transform:translateY(0)}} @keyframes preLine{to{width:min(360px,60vw)}} @keyframes preFade{to{opacity:.9}} /* CURSOR — pointer devices only */ .cursor-dot,.cursor-ring{display:none} @media (hover:hover) and (pointer:fine){ .cursor-dot,.cursor-ring{display:block;position:fixed;top:0;left:0;pointer-events:none;z-index:99999;border-radius:50%;transform:translate(-50%,-50%)} .cursor-dot{width:6px;height:6px;background:var(--rose-ink)} .cursor-ring{width:36px;height:36px;border:1px solid color-mix(in oklab,var(--rose-ink) 55%,transparent);transition:width .3s,height .3s,background .3s,border-color .3s} .cursor-ring.hov{width:64px;height:64px;background:color-mix(in oklab,var(--blush) 40%,transparent);border-color:var(--rose-ink)} .cursor-ring.txt::after{content:'view';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 9px/1 var(--font-body);letter-spacing:.2em;color:var(--rose-ink)} } /* NAV */ /* Solid cream from the first paint: the nav used to fade in a translucent background on scroll and hide itself on downward scroll, which meant the wordmark sat on the hero photo at the top and the CTA disappeared exactly when a reader had scrolled far enough to want it. */ nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px var(--pad);display:flex;align-items:center;justify-content:space-between;column-gap:24px;background:var(--cream);transition:background .4s,padding .4s,transform .45s var(--ease)} nav.scrolled{padding:12px var(--pad);border-bottom:1px solid var(--dust)} /* PROGRESS — a child of nav, drawn on its bottom edge */ .progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--blush),var(--rose-ink))} .nav-logo{font-family:var(--font-display);font-size:var(--fs-logo);font-weight:400;letter-spacing:.08em;text-decoration:none;color:var(--charcoal);padding:8px 0;white-space:nowrap} .nav-logo span{color:var(--rose-ink);font-style:italic} .nav-links{display:none;gap:clamp(6px,1.2vw,14px);list-style:none;align-items:center} .nav-links li{display:flex;align-items:center} .nav-links a{white-space:nowrap;font-size:var(--fs-body);font-weight:400;letter-spacing:.06em;color:var(--charcoal);text-decoration:none;opacity:.75;position:relative;transition:opacity .25s var(--ease),color .25s var(--ease),background .25s var(--ease);padding:10px 16px} .nav-links a::after{content:'';position:absolute;left:16px;right:16px;bottom:5px;height:1px;background:var(--rose-ink);transform:scaleX(0);transform-origin:center;transition:transform .35s var(--ease)} .nav-links a:hover{opacity:1;color:var(--rose-ink)} .nav-links a.active{opacity:1;color:var(--rose-ink)} .nav-links a.active::after{transform:scaleX(1)} .nav-links a:hover::after{transform:scaleX(1)} .nav-cta{white-space:nowrap;display:none;font-size:var(--fs-body);font-weight:400;letter-spacing:.06em;color:var(--charcoal);text-decoration:none;padding:var(--btn-y) var(--btn-x);border:1px solid var(--charcoal);position:relative;overflow:hidden} .nav-cta i{position:relative;z-index:1;font-style:normal;transition:color .35s} .nav-cta::before{content:'';position:absolute;inset:0;background:var(--charcoal);transform:translateY(101%);transition:transform .35s var(--ease)} .nav-cta:hover::before{transform:translateY(0)} .nav-cta:hover i{color:var(--cream)} .hamburger{display:flex;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:14px 10px;min-width:44px;min-height:44px;justify-content:center;align-items:center} .nav-right{display:none;align-items:center;gap:18px;white-space:nowrap} .lang-toggle{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:var(--fs-body);letter-spacing:.06em;color:var(--charcoal-mid);padding:12px 4px;display:flex;gap:5px;min-height:44px;align-items:center} .lang-toggle .lang-sep{opacity:.82} .lang-toggle .lang-ro{color:var(--rose-ink);font-weight:400} .lang-toggle .lang-en{opacity:.82} body.is-en .lang-toggle .lang-ro{color:var(--charcoal-mid);font-weight:300;opacity:.82} body.is-en .lang-toggle .lang-en{color:var(--rose-ink);font-weight:400;opacity:1} .hamburger span{display:block;width:24px;height:1px;background:var(--charcoal)} /* The horizontal nav switches on at 1100px, not at 901px with the rest of the desktop layout. Its five links, the language toggle and the full-size CTA need 1080px; below that the CTA was pushed off the right edge — 171px off at 901px — and only body{overflow-x:hidden} stopped it showing as a scrollbar. 901 to 1099 keeps the hamburger, which fits that width comfortably. */ @media (min-width:1100px){ .nav-links{display:flex} .nav-right{display:flex} .nav-cta{display:inline-block} .hamburger{display:none} } /* Between 1100 and 1199 the nav carries five links, the language toggle and a full-size CTA. Tightening the nav's own gutters here is what lets the CTA keep a single size across the site instead of shrinking in the header. */ @media (min-width:1100px) and (max-width:1199px){ nav{column-gap:16px} .nav-links{gap:12px} .nav-right{gap:12px} } /* HERO */ .hero{min-height:auto;position:relative;display:grid;grid-template-columns:1fr;overflow:clip} .hero-blob{position:absolute;width:90vw;height:90vw;top:-30vw;right:-30vw;border-radius:50%;background:radial-gradient(circle at 35% 35%,color-mix(in oklab,var(--blush) 75%,transparent),transparent 65%);filter:blur(30px);animation:blob 14s ease-in-out infinite alternate;pointer-events:none} @keyframes blob{from{transform:translate(0,0) scale(1)}to{transform:translate(-6vw,5vw) scale(1.15)}} .hero-left{display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--sec-y) + 48px) var(--pad) calc(var(--sec-y) * .4);position:relative;z-index:2} .hero-eyebrow{font-size:var(--fs-body);letter-spacing:.06em;color:var(--rose-ink);margin-bottom:28px;display:flex;align-items:center;gap:14px} .hero-eyebrow::before{content:'';width:32px;height:1px;background:var(--rose-ink);flex-shrink:0} .hero-title{font-family:var(--font-display);font-size:clamp(44px,11.5vw,132px);font-weight:300;line-height:.9;white-space:nowrap} .hero-title .ln{display:inline-block;vertical-align:top;overflow:hidden;padding-bottom:.3em;margin-bottom:-.3em} /* The word gap is a real space in the markup now — it has to be, or the

reads as "OlgaAgapi" — so the old margin-left:.22em would double it. */ .hero-title .ch{display:inline-block;transform:translateY(115%) rotate(4deg);transition:transform .9s var(--ease)} body.loaded .hero-title .ch{transform:translateY(0) rotate(0)} .hero-title em{font-style:italic;color:var(--rose-ink)} /* Styles the second word before the script splits it into characters, and for anyone browsing with JS off. */ .hero-title .ln.em{font-style:italic;color:var(--rose-ink)} .hero-sub{font-size:var(--fs-body);letter-spacing:.04em;color:var(--charcoal-mid);opacity:0;transform:translateY(16px);line-height:1.8;margin:30px 0 40px;transition:opacity .8s .6s,transform .8s .6s var(--ease)} body.loaded .hero-sub{opacity:.85;transform:none} .hero-actions{display:flex;gap:18px;flex-wrap:wrap;opacity:0;transition:opacity .8s .85s} body.loaded .hero-actions{opacity:1} .btn-primary{white-space:nowrap;font-family:var(--font-body);font-size:var(--fs-body);letter-spacing:.04em;color:var(--cream);background:var(--charcoal);padding:var(--btn-y) var(--btn-x);border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-block;position:relative;overflow:hidden;min-height:48px} .btn-primary i{position:relative;z-index:1;font-style:normal;transition:color .4s} .btn-primary::before{content:'';position:absolute;inset:0;background:var(--rose-ink);transform:translateY(101%);transition:transform .4s var(--ease)} .btn-primary:hover::before{transform:translateY(0)} .btn-primary:hover i{color:var(--cream)} /* Outlined twin of .btn-primary — same padding tokens and the same 1px border the primary carries as `transparent`, so the two sit on one baseline with identical box heights. */ .btn-secondary{background:none;white-space:nowrap;font-family:var(--font-body);font-size:var(--fs-body);letter-spacing:.04em;color:var(--charcoal);text-decoration:none;padding:var(--btn-y) var(--btn-x);border:1px solid var(--charcoal);position:relative;overflow:hidden;display:inline-block;min-height:48px} .btn-secondary i{position:relative;z-index:1;font-style:normal;transition:color .35s} .btn-secondary::before{content:'';position:absolute;inset:0;background:var(--charcoal);transform:translateY(101%);transition:transform .35s var(--ease)} .btn-secondary:hover::before{transform:translateY(0)} .btn-secondary:hover i{color:var(--cream)} /* The source portrait is 2:3. A fixed 300px-tall box on a phone is landscape, so object-fit:cover was cropping ~47% of the photo's height away. A portrait aspect-ratio keeps the frame close to the source instead. */ .hero-right{position:relative;overflow:visible;aspect-ratio:3/4;height:auto;min-height:0} /* picture is a layout-neutral wrapper so the absolutely-positioned img still resolves against .hero-img / .about-img rather than the picture element. */ .hero-img picture,.about-img picture{display:contents} .hero-img{position:absolute;inset:0;overflow:hidden;background:linear-gradient(135deg,var(--cream-warm) 0%,var(--blush-soft) 50%,var(--blush) 100%);display:flex;align-items:center;justify-content:center;clip-path:inset(0 0 100% 0);transition:clip-path 1.2s .3s var(--ease);will-change:transform} body.loaded .hero-img{clip-path:inset(0 0 0 0)} .hero-img.has-photo::before{display:none} .hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 18%} .hero-img::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent,transparent 12px,rgba(140,90,90,.07) 12px,rgba(140,90,90,.07) 13px)} .hero-img span{font-size:var(--fs-body);letter-spacing:.2em;color:var(--charcoal-mid);opacity:.8;z-index:1} .hero-ring{position:absolute;bottom:20px;right:20px;left:auto;width:96px;height:96px;z-index:4;animation:spin 16s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .hero-ring text{font:400 9.5px var(--font-body);letter-spacing:.06em;fill:var(--charcoal)} .hero-ring-c{position:absolute;bottom:20px;right:20px;left:auto;width:96px;height:96px;z-index:5;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-style:italic;font-size:26px;color:var(--gold);pointer-events:none} /* SECTION BASICS */ .section-eyebrow{font-size:var(--fs-body);letter-spacing:.06em;color:var(--rose-ink);margin-bottom:16px;display:flex;align-items:center;gap:12px} .section-eyebrow::before{content:'';width:32px;height:1px;background:var(--rose-ink);flex-shrink:0} .section-title{font-family:var(--font-display);font-size:clamp(40px,10vw,80px);font-weight:300;line-height:1} .section-title em{font-style:italic;color:var(--rose-ink)} /* padding-top mirrors the padding-bottom that protects descenders. At line-height:1 the baseline sits .82em down while Î's circumflex rises .795em, leaving about 1px of clearance at 40px — so overflow:hidden shaved the accent off capital Î and î. The negative margin keeps the line rhythm identical, exactly as margin-bottom does for the descenders. */ .rv{display:block;overflow:hidden;margin-bottom:-.14em;margin-top:-.1em} .rv i{display:block;font-style:inherit;padding-top:.1em;padding-bottom:.14em;transform:translateY(115%);transition:transform 1s var(--ease)} .rv.on i{transform:none} .fade-up{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s var(--ease)} .fade-up.visible{opacity:1;transform:none} /* SERVICES */ .srow{display:grid;grid-template-columns:1fr;align-items:start;gap:12px;padding:var(--row-y) var(--pad);border-bottom:1px solid var(--dust);text-decoration:none;position:relative;overflow:hidden;cursor:pointer} .srow::before{content:'';position:absolute;inset:0;background:var(--charcoal);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);z-index:0} .srow:hover::before{transform:scaleY(1)} .srow>*{position:relative;z-index:1;transition:color .35s,opacity .35s,transform .45s var(--ease)} .srow-name{font-family:var(--font-display);font-size:clamp(26px,6vw,40px);font-weight:400;line-height:1.05;color:var(--charcoal)} .srow-desc{font-size:var(--fs-body);line-height:1.7;color:var(--charcoal-mid);opacity:.85;max-width:480px} .srow:hover .srow-name{color:var(--cream)} .srow:hover .srow-desc{color:var(--cream);opacity:.8} .spreview{display:none} /* COUNTERS */ .counters{display:grid;grid-template-columns:repeat(2,1fr);padding:var(--sec-y) var(--pad);gap:44px} .counter{text-align:center;position:relative} .counter strong{font-family:var(--font-display);font-size:clamp(48px,12vw,92px);font-weight:300;line-height:1;display:block} .counter strong em{font-style:italic;color:var(--rose-ink);font-size:.55em} .counter span{font-size:var(--fs-body);letter-spacing:.06em;color:var(--charcoal-mid);opacity:.88;display:block;margin-top:14px} /* WHY */ .why{background:var(--charcoal);padding:var(--sec-y) var(--pad);position:relative;overflow:clip} .why::before{content:'';position:absolute;top:-100px;right:-100px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--gold) 14%,transparent) 0%,transparent 70%)} .why .section-title{color:var(--cream)} .why .section-eyebrow{color:var(--gold)} .why .section-eyebrow::before{background:var(--gold)} .why .section-title em{color:var(--gold)} .why-head{margin-bottom:50px;display:flex;flex-direction:column;align-items:flex-start;gap:20px;justify-content:space-between} .why-head aside{font-family:var(--font-display);font-style:italic;font-size:var(--fs-body);color:var(--cream);opacity:.75;max-width:280px;line-height:1.7} .why-stack{display:flex;flex-direction:column;gap:24px} .why-card{position:static;background:oklch(from var(--charcoal) calc(l + .055) c h);border:1px solid rgba(255,255,255,.09);padding:36px 28px;display:grid;grid-template-columns:1fr;gap:16px;align-items:center;box-shadow:0 -20px 60px rgba(0,0,0,.35)} .why-number{font-family:var(--font-display);font-size:64px;font-weight:300;font-style:italic;color:var(--gold);opacity:.62;line-height:1} .why-title{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:400;color:var(--cream)} .why-desc{font-size:var(--fs-body);line-height:1.9;color:var(--cream);opacity:.85} /* ABOUT */ .about{padding:var(--sec-y) var(--pad);display:grid;grid-template-columns:1fr;gap:60px;align-items:center;position:relative} /* margin-right matches .cd-figure: keeps the offset frame out of the gutter on a phone. Released at 901px, where the photo is a grid column. */ .about-img-wrap{position:relative;aspect-ratio:3/4;overflow:visible;margin-right:var(--frame-off)} .about-img{width:100%;height:100%;background:linear-gradient(160deg,var(--cream-warm),var(--blush));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;z-index:1} .about-img::before{content:'';position:absolute;inset:-12%;background:repeating-linear-gradient(-30deg,transparent,transparent 10px,rgba(140,90,90,.08) 10px,rgba(140,90,90,.08) 11px);will-change:transform} .about-img.has-photo::before{display:none} .about-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%} .about-img.is-full img{object-position:50% 22%} .about-img span{font-size:var(--fs-body);letter-spacing:.2em;color:var(--charcoal-mid);opacity:.8;z-index:1} .about-frame{position:absolute;bottom:calc(var(--frame-off) * -1);right:calc(var(--frame-off) * -1);width:calc(100% - 40px);height:calc(100% - 40px);border:1px solid oklch(76% 0.095 18);pointer-events:none;z-index:0} /* Rotated about its own centre, which translate(-50%,-50%) parks on the anchor point — so the text is centred against the photo whatever its length. Rotating about the left edge instead pushed it up by its own full length (289px), leaving it floating near the top of the frame. */ .about-word{display:none;position:absolute;top:50%;left:-40px;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;font-size:var(--fs-body);letter-spacing:.06em;color:var(--charcoal-mid);opacity:.4;white-space:nowrap} .about-bio{font-family:var(--font-display);font-size:var(--fs-body);font-style:italic;font-weight:300;line-height:1.75;color:var(--charcoal-mid);margin:30px 0 44px} .about-list{list-style:none;display:flex;flex-direction:column} .about-list li{font-size:var(--fs-body);line-height:1.6;padding:15px 0 15px 26px;position:relative;opacity:.85;border-bottom:1px solid var(--dust)} .about-list li::before{content:'—';position:absolute;left:0;color:var(--rose-ink)} /* QUOTE */ .quote{padding:var(--sec-y) var(--pad);text-align:center;background:var(--blush-soft);position:relative;overflow:hidden} .quote::before{content:'“';position:absolute;top:-40px;left:50%;transform:translateX(-50%);font-family:var(--font-display);font-size:340px;color:var(--blush);opacity:.55;line-height:1} .quote blockquote{font-family:var(--font-display);font-size:clamp(26px,6vw,48px);font-weight:300;font-style:italic;line-height:1.4;max-width:900px;margin:0 auto} .quote blockquote em{color:var(--rose-ink)} .quote cite{display:block;margin-top:32px;font-family:var(--font-body);font-style:normal;font-size:var(--fs-body);letter-spacing:.06em;color:var(--charcoal-mid);opacity:.95} .quote-slide{display:none} #quoteTrack{position:relative;display:grid;place-items:center;min-height:220px} .quote-slide.on{display:block;animation:quoteIn 1.1s var(--ease)} @keyframes quoteIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} /* CONTACT */ .contact{padding:var(--sec-y) var(--pad);display:grid;grid-template-columns:1fr;gap:56px;align-items:start} .contact-links{display:flex;flex-direction:column;gap:14px;margin-top:48px} .contact-link{font-size:var(--fs-body);letter-spacing:.06em;color:var(--charcoal);text-decoration:none;padding:calc(var(--ctl-y) * 1.35) calc(var(--ctl-x) * 1.35);border:1px solid var(--dust);display:flex;align-items:center;justify-content:space-between;background:var(--cream);position:relative;overflow:hidden;min-height:48px} .contact-link>*{position:relative;z-index:1;transition:color .3s} .contact-link::before{content:'';position:absolute;inset:0;background:var(--charcoal);transform:translateX(-101%);transition:transform .4s var(--ease)} .contact-link:hover::before{transform:translateX(0)} .contact-link:hover>*{color:var(--cream)} .contact-link .arr{transition:transform .4s var(--ease),color .3s} .contact-link:hover .arr{transform:translateX(6px) rotate(-45deg)} /* FOOTER */ footer{background:var(--charcoal);padding:0 var(--pad) calc(var(--sec-y) * .5);position:relative;overflow:hidden} .footer-row{display:flex;flex-direction:column;gap:22px;text-align:center;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);padding-top:36px} /* Same --fs-logo token as .nav-logo, so the two wordmarks agree at every breakpoint. It was on --fs-body, which is the body-copy size, so on a phone the footer mark rendered at 18px and read as a line of text rather than as the brand. */ .footer-logo{font-family:var(--font-display);font-size:var(--fs-logo);letter-spacing:.04em;color:var(--cream);opacity:.85;white-space:nowrap} .footer-links{display:flex;gap:24px;list-style:none;flex-wrap:wrap;justify-content:center} .footer-links a{font-size:var(--fs-body);letter-spacing:.04em;color:var(--cream);opacity:.7;text-decoration:none;transition:opacity .2s;display:inline-block;padding:8px 0;white-space:nowrap} .footer-links a:hover{opacity:.9;color:var(--gold)} .footer-legal{font-size:var(--fs-body);letter-spacing:.04em;color:var(--cream);opacity:.6;white-space:nowrap} /* MODAL */ .modal-overlay{position:fixed;inset:0;background:rgba(20,16,12,.75);backdrop-filter:blur(8px);z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s;padding:16px} .modal-overlay.open{opacity:1;pointer-events:all} .modal{background:var(--cream);padding:40px 28px;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;position:relative;transform:translateY(28px) scale(.98);transition:transform .45s var(--ease)} .modal-overlay.open .modal{transform:none} .modal-close{position:absolute;top:12px;right:12px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--charcoal-mid);opacity:.82;transition:opacity .2s,transform .3s;min-width:44px;min-height:44px} .modal-close:hover{opacity:1;transform:rotate(90deg)} /* §11 the modal is a direct-contact panel, not a form. There is no endpoint behind an enquiry form yet, so a submit button that only showed a success message was collecting names and numbers and dropping them. */ .modal-contact{display:flex;flex-direction:column;gap:18px} .modal-contact-title{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:300;line-height:1.05;color:var(--charcoal)} .modal-contact-title em{font-style:italic;color:var(--rose-ink)} .modal-contact-sub{font-size:var(--fs-body);line-height:1.65;color:var(--charcoal-mid)} .modal-contact .contact-links{margin-top:10px} /* MOBILE MENU */ .mobile-menu{position:fixed;inset:0;background:var(--charcoal);z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;transform:translateX(100%);transition:transform .5s var(--ease)} .mobile-menu.open{transform:none} .mobile-menu a{font-family:var(--font-display);font-size:40px;font-weight:300;color:var(--cream);text-decoration:none;padding:6px 20px} .mobile-menu a:hover{color:var(--gold);font-style:italic} .mobile-menu-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:28px;cursor:pointer;color:var(--cream);min-width:48px;min-height:48px} /* The language toggle inside the menu. The nav bar's copy is unreachable below 1100px because .nav-right is display:none, so without this there is no way to switch language on a phone or tablet. Recoloured for the charcoal panel: the default rose-ink active state is all but invisible on it, so the active language takes the gold used by every other accent on a dark section. */ .mobile-menu .lang-toggle{font-size:var(--fs-h3);letter-spacing:.1em;color:var(--cream);gap:8px;padding:12px 20px;margin-top:8px} .mobile-menu .lang-toggle .lang-sep{color:var(--cream);opacity:.40} .mobile-menu .lang-toggle .lang-ro{color:var(--gold);opacity:1} .mobile-menu .lang-toggle .lang-en{color:var(--cream);opacity:.55} body.is-en .mobile-menu .lang-toggle .lang-ro{color:var(--cream);opacity:.55} body.is-en .mobile-menu .lang-toggle .lang-en{color:var(--gold);opacity:1} /* Menu CTA. Its own class rather than .nav-cta, which is display:none in the base sheet and would have had to be fought back on. Outlined in cream because .nav-cta's charcoal border is invisible on the charcoal panel. */ .mobile-menu .mm-cta{font-family:var(--font-body);font-size:var(--fs-body);letter-spacing:.06em;color:var(--cream);text-decoration:none;padding:var(--btn-y) var(--btn-x);border:1px solid var(--cream);position:relative;overflow:hidden;display:inline-block;min-height:48px;text-align:center;margin-top:8px} .mobile-menu .mm-cta i{position:relative;z-index:1;font-style:normal;transition:color .35s} .mobile-menu .mm-cta::before{content:'';position:absolute;inset:0;background:var(--cream);transform:translateY(101%);transition:transform .35s var(--ease)} .mobile-menu .mm-cta:hover::before{transform:translateY(0)} .mobile-menu .mm-cta:hover i{color:var(--charcoal)} /* Text-only category headers. The photo that used to sit here competed with the per-course photos immediately below it; each course now carries its own. */ .results{padding:var(--sec-y) var(--pad)} .results .head{display:flex;flex-direction:column;align-items:flex-start;gap:20px} .results .head aside{font-family:var(--font-display);font-style:italic;font-size:var(--fs-body);line-height:1.7;color:var(--charcoal-mid);opacity:.88;text-wrap:pretty} /* Phones stack one photo per row. At two columns a 375px screen left a 156px card and an 80px photo — too small to read lash work. */ .results-grid{margin-top:48px;display:grid;grid-template-columns:1fr;gap:24px} .rcell{margin:0;background:var(--cream);border:1px solid var(--blush);padding:24px 24px 0;box-shadow:0 10px 30px rgba(0,0,0,.06)} /* height:auto is required — the width/height attributes on the are a presentational hint that sets an explicit height, which disables aspect-ratio (it only applies when one axis is auto) and squashed the box into a portrait, cropping the sides off. contain then guarantees the whole frame is visible even if a replacement photo is not square. */ .rcell img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block;background:var(--blush-soft)} .rcell figure,.rcell picture{display:block} .rcell figcaption{font-family:var(--font-display);font-style:italic;font-size:var(--fs-body);letter-spacing:.02em;color:var(--charcoal-mid);text-align:center;padding:26px 6px 36px} /* Must sit after the base .results-grid/.rcell rules — media queries carry no extra specificity, so declaring this earlier would lose on source order. */ @media (min-width:601px){ .results-grid{grid-template-columns:repeat(2,1fr)} } /* SUBPAGES */ .page-hero{padding:calc(var(--sec-y) + 72px) var(--pad) var(--sec-y);position:relative;overflow:hidden;display:grid;grid-template-columns:1fr} .page-hero>.crumbs{grid-column:1/-1} .page-hero .section-title{font-size:clamp(44px,11vw,110px)} .page-hero .lead{font-family:var(--font-display);font-style:italic;font-size:var(--fs-body);color:var(--charcoal-mid);opacity:.82;max-width:42ch;line-height:1.75;margin-top:30px;text-wrap:pretty} .crumbs{font-size:var(--fs-body);letter-spacing:.06em;color:var(--charcoal-mid);opacity:.85;margin-bottom:26px} .crumbs a{text-decoration:none;color:inherit;display:inline-block;padding:6px 0} .crumbs a:hover{color:var(--rose-ink)} .course-detail{display:grid;grid-template-columns:1fr;gap:24px;padding:var(--sec-y) var(--pad);border-top:1px solid var(--dust);align-items:start} .course-detail:nth-child(even){background:var(--cream-warm)} .cd-name{font-family:var(--font-display);font-size:clamp(30px,7vw,46px);font-weight:400;line-height:1.05;margin-bottom:18px} .cd-meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px} .cd-meta span{font-size:var(--fs-body);letter-spacing:.06em;color:var(--charcoal-mid);border:1px solid var(--dust);padding:9px 16px;background:var(--cream)} .cd-desc{font-size:var(--fs-body);line-height:1.8;color:var(--charcoal-mid);opacity:.85;text-align:left;max-width:34ch;text-wrap:pretty} .cd-list{list-style:none;display:flex;flex-direction:column;margin-bottom:34px} .cd-list li{font-size:var(--fs-body);line-height:1.6;padding:13px 0 13px 26px;position:relative;opacity:.85;border-bottom:1px solid var(--dust)} .cd-list li::before{content:'—';position:absolute;left:0;color:var(--rose-ink)} .cd-side h4{font-size:var(--fs-body);letter-spacing:.06em;color:var(--rose-ink);margin-bottom:18px;font-weight:400} /* Course photo with an offset frame drawn BEHIND it. The frame is a ::after on the figure at z-index 0 and the photo wrapper sits at z-index 1, so the rule lines stop where the photo starts rather than crossing it. overflow must stay visible on .cd-figure or the offset would be clipped away. */ .cd-figure{margin-top:28px;position:relative;overflow:visible} /* .cd-shot is the ratio box (which reserves the space and prevents layout shift); the img simply fills it. Sizing the img by aspect-ratio instead would not work — it only applies when one axis is auto, and both are 100% here. */ .cd-shot{display:block;aspect-ratio:3/4;border:1px solid var(--dust);overflow:hidden;position:relative;z-index:1;background:var(--cream)} .cd-shot img{width:100%;height:100%;object-fit:cover;display:block} .cd-figure::after{content:'';position:absolute;bottom:calc(var(--frame-off) * -1);right:calc(var(--frame-off) * -1);width:calc(100% - 40px);height:calc(100% - 40px);border:1px solid oklch(76% 0.095 18);pointer-events:none;z-index:0} .cd-flip-r .cd-figure::after{right:auto;left:calc(var(--frame-off) * -1)} /* On a phone the photo spans the full content width, so the frame's 22px offset landed in the page gutter — 2px from the viewport edge on a 375px screen. Inset the photo by that offset on whichever side the frame extends, so photo and frame together sit inside the gutter. Released at 901px, where the photo is a grid column and the frame overhangs into the column gap. */ .cd-flip .cd-figure{margin-top:0;margin-bottom:22px;margin-right:var(--frame-off)} .cd-flip-r .cd-figure{margin-right:0;margin-left:var(--frame-off)} .cd-body{display:flex;flex-direction:column;gap:32px} .page-cta{background:var(--charcoal);padding:var(--sec-y) var(--pad);display:flex;flex-direction:column;align-items:flex-start;gap:34px;position:relative;overflow:clip} .page-cta::before{content:'';position:absolute;top:-100px;left:-100px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--gold) 14%,transparent) 0%,transparent 70%);pointer-events:none} .page-cta>*{position:relative} .page-cta-sub{margin-top:22px;font-size:var(--fs-body);line-height:1.65;color:var(--cream);opacity:.85} .page-cta-row{display:flex;gap:18px;flex-wrap:wrap} .page-cta .btn-secondary{color:var(--cream);border-color:var(--cream)} .page-cta .btn-secondary::before{background:var(--cream)} .page-cta .btn-secondary:hover i{color:var(--charcoal)} .page-cta h2{font-family:var(--font-display);font-size:clamp(40px,10vw,80px);font-weight:300;color:var(--cream);line-height:1.05} .page-cta .btn-primary{background:var(--gold);color:var(--charcoal);padding:var(--btn-y) var(--btn-x);font-size:var(--fs-body)} .page-cta .btn-primary i{color:var(--charcoal)} .page-cta .btn-primary::before{background:var(--cream)} .page-cta .btn-primary:hover i{color:var(--charcoal)} .page-cta h2 em{font-style:italic;color:var(--gold)} .milestones{padding:0 var(--pad) var(--sec-y)} .milestone{display:grid;grid-template-columns:1fr;gap:8px;padding:32px 0;border-bottom:1px solid var(--dust);align-items:baseline} .milestone strong{font-family:var(--font-display);font-style:italic;font-size:var(--fs-h3);font-weight:400;color:var(--rose-ink)} .milestone p{font-size:var(--fs-body);line-height:1.8;color:var(--charcoal-mid);opacity:.85;max-width:640px} .faq-item{border-bottom:1px solid var(--dust)} .faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--font-display);font-size:var(--fs-h3);font-weight:400;color:var(--charcoal);padding:26px 50px 26px 0;position:relative;min-height:48px} .faq-q::after{content:'+';position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:26px;color:var(--rose-ink);transition:transform .35s var(--ease)} .faq-item.open .faq-q::after{transform:translateY(-50%) rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)} .faq-a p{font-size:var(--fs-body);line-height:1.8;color:var(--charcoal-mid);opacity:.85;padding:0 0 30px;max-width:640px} /* A11Y */ :focus-visible{outline:2px solid var(--rose-ink);outline-offset:3px} .why :focus-visible,.page-cta :focus-visible,footer :focus-visible,.mobile-menu :focus-visible{outline-color:var(--gold)} .skip-link{position:fixed;top:-70px;left:16px;z-index:100000;background:var(--charcoal);color:var(--cream);padding:14px 22px;font-size:var(--fs-body);letter-spacing:.12em;text-decoration:none;transition:top .2s} .skip-link:focus{top:16px;color:var(--cream)} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* ═══ DESKTOP ENHANCEMENTS ═══ */ @media (min-width:901px){ /* --pad is already 60px from the 901px block above. Redeclaring it here also matched at >=1440px and silently overrode the 80px gutter, so it is gone. */ nav{padding:24px var(--pad)} nav.scrolled{padding:14px var(--pad)} .hero-blob{width:56vw;height:56vw;top:-14vw;right:-14vw} .hero-eyebrow::before{width:44px} .hero-title{font-size:clamp(52px,7.4vw,112px)} .hero-sub{margin:34px 0 44px} /* aspect-ratio is a mobile-only device; on desktop the column is sized by the grid row, so it must be released or it would re-crop the portrait. */ .hero-right{height:auto;min-height:0;aspect-ratio:auto} .hero-ring,.hero-ring-c{bottom:70px;left:-64px;right:auto;width:128px;height:128px} .section-title{font-size:clamp(44px,5.5vw,80px)} .srow{grid-template-columns:1.1fr 1.4fr 60px;align-items:center;gap:32px} .srow-name{font-size:clamp(26px,2.6vw,40px)} .srow:hover .srow-name{transform:translateX(10px)} .spreview{display:flex;position:fixed;width:260px;height:320px;z-index:90;pointer-events:none;opacity:0;transform:scale(.85) rotate(-4deg);transition:opacity .3s,transform .4s var(--ease);background:linear-gradient(150deg,var(--cream-warm),var(--blush-soft) 55%,var(--blush));align-items:flex-end;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.25)} .spreview.on{opacity:1;transform:scale(1) rotate(-2deg)} .spreview::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent,transparent 11px,rgba(140,90,90,.08) 11px,rgba(140,90,90,.08) 12px)} .spreview span{font-family:var(--font-display);font-style:italic;font-size:20px;color:var(--charcoal);position:relative} .spreview img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .spreview.has-img img{display:block} /* Label stays in the DOM as metadata (and on the img's alt) but is not drawn over the photo — visually hidden rather than removed. */ .spreview.has-img span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .spreview.has-img::before{display:none} .counters{grid-template-columns:repeat(4,1fr);gap:40px} .counter+.counter::before{content:'';position:absolute;left:-20px;top:12%;height:76%;width:1px;background:var(--dust)} .counter strong{font-size:clamp(56px,6vw,92px)} .why-head{flex-direction:row;align-items:flex-end;gap:0;margin-bottom:90px} .why-card{position:sticky;padding:56px 64px;grid-template-columns:auto 1fr 2fr;gap:56px} .why-card:nth-child(1){top:110px}.why-card:nth-child(2){top:134px}.why-card:nth-child(3){top:158px}.why-card:nth-child(4){top:182px} .why-number{font-size:96px} .about{grid-template-columns:1fr 1.1fr;gap:90px} .about-word{display:block} .contact{grid-template-columns:1fr 1fr;gap:90px} .footer-row{flex-direction:row;gap:32px;text-align:left;flex-wrap:wrap} .footer-links{gap:32px} .modal{padding:60px} .modal-close{top:24px;right:24px} .page-hero .section-title{font-size:clamp(48px,6.9vw,104px)} .page-hero .section-title .rv i{white-space:nowrap} .page-hero{grid-template-columns:1fr minmax(280px,36ch);column-gap:48px;align-items:end;justify-content:space-between} .page-hero .lead{justify-self:end} .page-hero .lead{margin-top:0;padding-bottom:.6em} .results .head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:60px} .results .head aside{text-align:left;padding-bottom:.4em} .results-grid{grid-template-columns:repeat(3,1fr);gap:44px} .rcell{padding:48px 48px 0} .course-detail{grid-template-columns:1fr minmax(320px,440px);gap:60px;justify-content:space-between} .cd-name{font-size:clamp(30px,3vw,46px)} .page-cta{flex-direction:row;align-items:center;justify-content:space-between;gap:60px} .page-cta h2{font-size:clamp(44px,5.5vw,80px)} .page-cta .btn-primary{flex:none} .milestone{grid-template-columns:180px 1fr;gap:50px;padding:36px 0} .faq-q{padding:28px 50px 28px 0} } /* ── ACCENT VARIANT: GOLD (preview toggle) ── */ html[data-accent="gold"]{--blush:oklch(90% 0.08 92);--blush-soft:oklch(96% 0.032 92);--cream-warm:oklch(96.5% 0.016 90);--rose-ink:oklch(51% 0.095 85);--dust:oklch(88% 0.022 90)} /* TREATMENTS */ .treat-list{border-top:1px solid var(--dust)} .treat-row{display:grid;grid-template-columns:1fr;gap:14px;padding:calc(var(--row-y) * 1.6) var(--pad);border-bottom:1px solid var(--dust);align-items:start} .treat-row:nth-child(even){background:var(--cream-warm)} .treat-name{font-family:var(--font-display);font-size:clamp(30px,4.5vw,46px);font-weight:300;line-height:1.15} .treat-desc{font-size:var(--fs-body);line-height:1.7;color:var(--charcoal-mid);max-width:520px;margin-top:8px} .treat-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:var(--fs-body);letter-spacing:.14em;color:var(--charcoal-mid);margin-top:14px} .treat-side{display:flex;flex-direction:column;align-items:flex-start;gap:14px} .treat-price{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:400;white-space:nowrap} .treat-price small{font-family:var(--font-body);font-size:var(--fs-body);letter-spacing:.2em;color:var(--charcoal-mid);display:block;margin-top:4px} .btn-sm{font-size:var(--fs-body);letter-spacing:.04em;padding:var(--btn-y) var(--btn-x)} .tbc{font-family:var(--font-display);font-style:italic;color:var(--rose-ink);border-bottom:1px dashed var(--rose-ink)} .slot-note{padding:var(--row-y) var(--pad);background:var(--blush-soft);font-size:var(--fs-body);line-height:1.7;color:var(--charcoal-mid);border-bottom:1px solid var(--dust)} .slot-note strong{font-weight:400;color:var(--rose-ink)} /* COURSE PAGE */ .cp-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--dust);border-top:1px solid var(--dust);border-bottom:1px solid var(--dust)} .cp-fact{background:var(--cream);padding:var(--row-y) var(--pad)} .cp-fact dt{font-size:var(--fs-body);letter-spacing:.14em;color:var(--charcoal-mid);margin-bottom:10px} .cp-fact dd{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:300;line-height:1.2} .cp-body{display:grid;grid-template-columns:1fr;gap:56px;padding:var(--sec-y) var(--pad)} .cp-h{font-size:var(--fs-body);letter-spacing:.06em;color:var(--rose-ink);margin-bottom:22px;font-weight:400} .cp-intro{font-family:var(--font-display);font-size:var(--fs-lead);font-style:italic;font-weight:300;line-height:1.7;color:var(--charcoal-mid);max-width:620px} .cp-mods{list-style:none;counter-reset:m} .cp-mods li{counter-increment:m;border-top:1px solid var(--dust);padding:22px 0 22px 46px;position:relative} .cp-mods li::before{content:counter(m,decimal-leading-zero);position:absolute;left:0;top:24px;font-family:var(--font-display);font-size:var(--fs-body);color:var(--rose-ink)} .cp-mods h3{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:400;margin-bottom:6px} .cp-mods p{font-size:var(--fs-body);line-height:1.7;color:var(--charcoal-mid)} .cp-incl{list-style:none;display:grid;gap:2px} .cp-incl li{font-size:var(--fs-body);line-height:1.6;padding:14px 0 14px 26px;position:relative;border-bottom:1px solid var(--dust)} .cp-incl li::before{content:'✦';position:absolute;left:0;color:var(--rose-ink);font-size:var(--fs-body);top:16px} .cp-card{background:var(--blush-soft);padding:32px 26px;display:flex;flex-direction:column;gap:18px;align-items:flex-start} .cp-card h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:300} .cp-card dl{display:grid;gap:14px;width:100%} .cp-card .cp-line{display:flex;justify-content:space-between;gap:16px;font-size:var(--fs-body);border-bottom:1px solid var(--blush);padding-bottom:10px} .cp-card .cp-line dt{letter-spacing:.14em;font-size:var(--fs-body);color:var(--charcoal-mid);align-self:center} .cp-card .cp-line dd{font-family:var(--font-display);font-size:var(--fs-h4)} .cp-card p{font-size:var(--fs-body);line-height:1.7;color:var(--charcoal-mid)} .cp-nextprev{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding:var(--row-y) var(--pad);border-top:1px solid var(--dust)} .cp-nextprev a{font-size:var(--fs-body);letter-spacing:.14em;text-decoration:none;color:var(--charcoal-mid);padding:8px 0} .cp-nextprev a:hover{color:var(--rose-ink)} @media (min-width:901px){ .treat-row{grid-template-columns:1fr 280px;gap:60px} .treat-side{align-items:flex-end;text-align:right} .treat-price small{text-align:right} .cp-facts{grid-template-columns:repeat(4,1fr)} .cp-body{grid-template-columns:1fr 380px;gap:80px} .cp-aside{position:sticky;top:110px;align-self:start} } /* ═══ LARGE SCREENS (>=1440px) ═══ The display clamps above top out around 1454px, so on wide monitors the headings froze while body copy and spacing kept growing. These raise only the upper bound — nothing below 1440px is affected. */ @media (min-width:1440px){ .hero-title{font-size:clamp(52px,7.4vw,128px)} .section-title{font-size:clamp(44px,5.5vw,96px)} .page-hero .section-title{font-size:clamp(48px,6.9vw,120px)} .counter strong{font-size:clamp(56px,6vw,104px)} .srow-name{font-size:clamp(26px,2.6vw,46px)} .treat-name{font-size:clamp(30px,4.5vw,52px)} .cd-name{font-size:clamp(30px,3vw,52px)} .quote blockquote{font-size:clamp(26px,6vw,56px)} .why-number{font-size:112px} .mobile-menu a{font-size:46px} } /* PATHS CARDS (home) */ .paths{padding:var(--sec-y) var(--pad);background:var(--cream-warm)} .paths .head{margin-bottom:44px;display:flex;flex-direction:column;gap:20px} .paths .head aside{font-family:var(--font-display);font-style:italic;font-size:var(--fs-body);line-height:1.7;color:var(--charcoal-mid);opacity:.85;max-width:300px} /* isolation:iso keeps each card's hover glow in its own stacking context, so a hovered card's shadow is never painted under its neighbour. min-width:0 stops a long course name from forcing a grid column wider than its 1fr share. */ .paths-grid{display:grid;grid-template-columns:1fr;gap:20px;isolation:isolate;align-items:stretch} .path-card{min-width:0;height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:36px 28px;background:var(--cream);border:1px solid var(--dust);transition:border-color .25s var(--ease),box-shadow .35s var(--ease);position:relative} .path-card:hover{border-color:var(--blush);box-shadow:0 18px 50px -18px oklch(76% 0.095 18 / .45),0 4px 18px -10px oklch(76% 0.095 18 / .3)} .path-card h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:400;line-height:1.15;color:var(--charcoal)} .path-card p{font-size:var(--fs-body);line-height:1.65;color:var(--charcoal-mid);text-wrap:pretty;margin-bottom:12px} /* margin-top:auto pins every CTA to the bottom of its card regardless of how much copy sits above it, so the three buttons line up across the row. */ .path-cta{margin-top:auto;white-space:normal;justify-content:center} /* §8 the FAQ head spans the full gutter; the questions stay in a centred reading column. max-width:none is load-bearing — the earlier .faq rule in the SUBPAGES block caps the section at 980px, and overriding only the padding here left that cap in place. The section was then 980px wide AND left-aligned, so the head could not reach the right gutter and .faq-item had nothing to centre inside. */ .faq{padding:var(--sec-y) var(--pad);max-width:none} .faq-item{max-width:980px;margin-inline:auto} .faq .head{margin-bottom:44px;display:flex;flex-direction:column;gap:20px} .faq .head aside{font-family:var(--font-display);font-style:italic;font-size:var(--fs-body);line-height:1.7;color:var(--charcoal-mid);opacity:.85;max-width:300px} /* VISIT (contact) */ .contact-visit{display:flex;flex-direction:column;align-items:stretch;gap:24px} .visit-title{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:300;line-height:1.05;color:var(--charcoal)} .visit-title em{font-style:italic;color:var(--rose-ink)} .hours{list-style:none;border-top:1px solid var(--dust)} .hours li{display:flex;justify-content:space-between;gap:20px;padding:var(--row-y) 0;border-bottom:1px solid var(--dust);font-size:var(--fs-body);color:var(--charcoal)} .hours li span:last-child{color:var(--charcoal-mid);white-space:nowrap} .visit-note,.visit-address{font-size:var(--fs-body);line-height:1.8;color:var(--charcoal-mid);opacity:.85;font-style:normal} .visit-map{border:1px solid var(--dust);height:280px;overflow:hidden;filter:grayscale(1) contrast(.92);transition:filter .4s var(--ease)} .visit-map:hover{filter:grayscale(.15) contrast(1)} .visit-map iframe{width:100%;height:100%;border:0;display:block} .visit-dirs{display:flex;flex-direction:column;gap:12px} @media (min-width:901px){.visit-map{height:340px}.visit-dirs{flex-direction:row;flex-wrap:wrap}.visit-dirs .contact-link{flex:1;min-width:180px}} /* §10 .contact-visit is a flex column with a 24px gap; .section-eyebrow also carries margin-bottom:16px, and the two stacked, pushing the heading out of line with the left column's. Cancel most of the margin, keep the gap. */ .contact-visit .section-eyebrow{margin-bottom:-8px} /* ═══ FOOTER — five columns ═══ */ .footer-cols{display:grid;grid-template-columns:1fr;gap:36px 28px;border-top:1px solid rgba(255,255,255,.1);padding-top:44px;margin-bottom:44px} .footer-brand{grid-column:1/-1} .footer-note{font-size:var(--fs-body);color:var(--cream);opacity:.7;margin-top:12px;line-height:1.6} .footer-col h3{font-size:var(--fs-body);letter-spacing:.14em;color:var(--gold);font-weight:400;margin-bottom:18px} .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px} .footer-col ul a{font-size:var(--fs-body);color:var(--cream);opacity:.75;text-decoration:none;display:inline-block;padding:4px 0;transition:opacity .2s,color .2s} .footer-col ul a:hover{opacity:1;color:var(--gold)} .footer-plain li{font-size:var(--fs-body);color:var(--cream);opacity:.75;line-height:1.6} .footer-plain span{opacity:.85} /* A time range must never break across lines: "Sâmbătă 10:00 / – 16:00" was splitting the range itself, not just the day off the time. */ .footer-plain li span{white-space:nowrap} /* With the columns above carrying the hairline, the legal row must not draw a second one directly beneath them. */ footer .footer-cols+.footer-row{border-top:0;padding-top:0} @media (min-width:601px){.footer-cols{grid-template-columns:1fr 1fr}} /* ═══ §9 SECTION ASIDES — size on desktop, contrast everywhere ═══ Every aside was opacity:.65 on cream, which measures ~3.1:1 against --charcoal-mid and fails WCAG AA for body text. .85 clears 4.5:1. */ @media (min-width:901px){ .why-head aside,.results .head aside,.faq .head aside,.paths .head aside{font-size:var(--fs-h4);max-width:340px} } /* ═══ WIDE SCREENS ═══ Past ~1500px the 80px gutter stopped reading as a margin and the content ran edge to edge on a 27" display. */ @media (min-width:1513px){:root{--pad:140px}} /* ═══ DESKTOP — declared last so these win on source order ═══ */ @media (min-width:901px){ .nav-logo{font-size:32px} .footer-logo{font-size:32px} .footer-cols{grid-template-columns:1.4fr repeat(4,1fr);gap:60px} .footer-brand{grid-column:auto} /* Day above time once the columns are narrow, so the pair reads as deliberate structure rather than an accidental wrap. Below 901px the footer is one or two wide columns and both fit on a single line, so they stay inline. */ .footer-plain li span{display:block} /* The hero starts below the nav line rather than under it, so the eyebrow is never hidden behind the wordmark on a short viewport. */ .hero{min-height:100vh;grid-template-columns:1fr 1fr;padding-top:78px} .hero-actions{gap:36px} .paths .head{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:60px} .paths-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.5vw,32px)} .path-card{padding:clamp(36px,3.5vw,52px) clamp(28px,3vw,44px);gap:20px} .faq .head{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:60px} /* COURSE CARDS — photo column and copy column share a row height, so the photo runs the full height of the text beside it. */ .course-detail:has(.cd-figure){align-items:stretch} .cd-flip{grid-template-columns:minmax(320px,clamp(380px,36vw,560px)) minmax(0,600px);justify-content:space-between;gap:clamp(40px,5vw,80px)} .cd-flip-r{grid-template-columns:minmax(0,600px) minmax(320px,clamp(380px,36vw,560px))} /* The figure is always first in the DOM (so it sits above the copy on a phone); on a right-image row it is placed into column 2 explicitly. */ .cd-flip-r .cd-figure{grid-column:2;grid-row:1} .cd-flip-r .cd-body{grid-column:1;grid-row:1} .cd-flip .cd-figure{min-height:0;height:100%;margin-top:0;margin-bottom:0;margin-right:0} .cd-flip-r .cd-figure{margin-left:0} .about-img-wrap{margin-right:0} /* The photo now takes its height from the grid row (the copy beside it), so the fixed 3/4 ratio is released. */ .cd-flip .cd-shot{aspect-ratio:auto;height:100%} } /* ═══ PHONE CTAs ═══ Every primary/secondary CTA fills its content column on a phone: hero, closing banners, course cards, treatment rows, the booking card and the about link. Each button was previously only as wide as its own label, so a column of them read as ragged, and short labels gave small tap targets. Reverted at 601px, where buttons sit inline again. */ .btn-primary,.btn-secondary{display:block;width:100%;text-align:center} /* Three of the containers are flex columns with align-items:flex-start, which would leave the button at its content width — an explicit width overrides that. .page-cta-row is the exception: it is a nested flex container, so its own cross size is content-based and its children's 100% resolves against that. It has to stretch before they can fill anything. */ .hero-actions,.page-cta-row{flex-direction:column;align-items:stretch} .page-cta-row{align-self:stretch} @media (min-width:601px){ .btn-primary,.btn-secondary{display:inline-block;width:auto;text-align:left} .hero-actions,.page-cta-row{flex-direction:row} .page-cta-row{align-self:auto} /* The pair sits in a max-content grid with two 1fr columns. When a grid is sized under a max-content constraint, equal fr tracks all resolve to the widest track's content, so both buttons take the width of the longer label ("Vezi tratamentele") instead of each sizing to its own. The container still shrinks to fit, so the pair stays left-aligned in its column. */ .hero-actions,.page-cta-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:max-content;align-items:center} /* One width for every hero and banner CTA, so the single-button banners on the subpages match the pair on the home page. It is expressed in the same tokens the buttons are built from rather than a pixel constant: 7.8em covers the longest label ("Vezi tratamentele") and scales with --fs-body as that grows past 1440px, and --btn-x is the button's own horizontal padding, which steps up at 601/1200/1440. A fixed px value would have been overtaken by the label on wide screens and the buttons would have drifted apart again. */ .hero-actions>a,.page-cta a{min-width:calc(7.8em + var(--btn-x) * 2 + 2px)} /* Equal boxes mean the shorter labels now have slack to sit in. */ .hero-actions>a,.page-cta a{text-align:center} } /* §7 path CTAs stay full width at EVERY size — restated after the revert above because .path-cta and .btn-primary are both single-class selectors, so the later rule would otherwise win and shrink them back to their labels. */ .path-cta{display:block;width:100%;text-align:center} /* At 901px the five footer columns share 781px of content width, and a 60px gap takes 240px of it — 31% — leaving each column 104px. The time range needs 116px, so it broke mid-range however the spans were marked up. A tighter gutter in this band gives each column ~121px. Untouched at 1200px and above, where 60px already leaves room. */ @media (min-width:901px) and (max-width:1199px){ .footer-cols{column-gap:32px} } /* ═══ SUPPORTING ASIDES ON SMALL SCREENS ═══ Below 901px the aside drops beneath the title and has the full content column to work with, but it kept the desktop 280–300px cap and the hard
breaks written for the narrow desktop column — so it still broke into three short rows in a 312px space. Releasing both lets it flow into two. The breaks and the cap still apply from 901px up, where the aside sits beside the title in a narrow column and needs them. */ @media (max-width:900px){ .paths .head aside,.faq .head aside,.results .head aside,.why-head aside{max-width:none} .paths .head aside br,.faq .head aside br,.results .head aside br,.why-head aside br{display:none} } /* The hero sub-copy is two hard-broken lines. Its first line is 41 characters and, at the designed .04em tracking, measures 322px — which clears the 327px text column at 375px but overruns the 312px one at 360px, spilling to three rows. Tightening the tracking to .02em below 375px buys 10px and holds it at two rows, without touching the 375px-and-up rendering the type was set for. At 320px it wraps to three rows even at zero tracking: the line needs 301px against 272px available, and closing a 29px gap would mean ~16px type. The cutoff is 400px rather than 375px to cover classic scrollbars. A media query tests the viewport, but the text is laid out in the viewport minus the scrollbar, so a 375px desktop window with a 15px classic scrollbar gives the same 312px column as a 360px phone while still reporting 375 and missing a 375px cutoff. Phones use overlay scrollbars and are unaffected either way; 400px clears the widest classic scrollbar with room to spare, and .02em against .04em is not perceptible at this size. */ @media (max-width:400px){ .hero-sub{letter-spacing:.02em} } /* Supporting copy: fuller in the wide desktop column, tighter on phones, from one string. A wider box yields fewer lines, not more, so the extra desktop rows cannot come from letting the text flow — the secondary clause has to be present above 901px and absent below. Wrapping that clause in .wide-only drops it on phones; any
straight after it goes too, which splices the rows on either side. The space that then opens a row is removed by normal line-start white-space processing, so desktop is unaffected. Used by the home hero and by the .lead on courses, treatments and both course pages. Every phone variant is a plain deletion from the desktop string, so no wording exists in one place and not the other. */ @media (max-width:900px){ .wide-only,.wide-only + br{display:none} } /* Course navigation. Each of the 14 courses and the 3 category headings are jump targets now, and the header is fixed, so every target reserves room above itself or it lands underneath the header instead of below it. The header measures 82px up to the 1100px breakpoint and 119px above it, where it gains the nav links and the CTA. */ .cat-group,.crow,.treat-row{scroll-margin-top:100px} @media (min-width:1100px){ .cat-group,.crow,.treat-row{scroll-margin-top:140px} } /* html carries scroll-behavior:smooth, which the reduced-motion block above does not cover: it only zeroes animation and transition durations. Now that the page has jump links spanning a long scroll, that is a real vestibular trigger, so it is switched off with the rest of the motion. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } /* ── COURSES PAGE: category and course accordions ────────────────────────── The 14 courses sit behind two levels of disclosure: a category opens to reveal its rows, a row opens to reveal that course. The row itself reuses .srow from the old home page list, which never lost its styling or its mouse-follow preview - only the markup had been deleted. */ .cat-group{border-top:1px solid var(--dust)} .cat-h{margin:0;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:28px;padding:34px var(--pad)} .cat-q{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;color:inherit;text-align:left} .cat-eyebrow{display:block;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-ink)} .cat-name{display:block;font-family:var(--font-display);font-weight:400;line-height:1.1;color:var(--charcoal)} .cat-name em{font-style:italic;color:var(--rose-ink)} /* .83 for the same reason as .srow-desc: 4.48 on the warm open surface. */ .cat-count{display:block;letter-spacing:.06em;color:var(--charcoal-mid);opacity:.83} /* Both markers are the FAQ's plus rotating to a cross - the page's existing vocabulary for "this opens in place" rather than "this goes somewhere". */ .crow-mark{position:absolute;right:var(--pad);top:50%;line-height:1;color:var(--rose-ink)} .catpanel,.crow-panel{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)} /* .srow is a div on the home page; here it is the button that expands the row, so the button defaults are cleared and the bottom rule kept. These come after .srow in source order, which is what lets them win. */ .crow-h{margin:0} /* background:none matters — .srow is a div on the home page and never needed one, but a button carries the UA's grey ButtonFace until it is cleared. */ .crow-q{width:100%;font-family:inherit;color:inherit;background:none;border:none;border-bottom:1px solid var(--dust);padding-right:calc(var(--pad) + 48px)} .crow:last-child .crow-q{border-bottom:none} .crow-mark{font-size:26px} /* The row is a button, so its text needs the alignment a button does not give it, and the name must not inherit the button's centred default. */ .crow-q .srow-name,.crow-q .srow-desc{text-align:left} /* Density. .srow was drawn for a three-item home page list: 40px titles and generous row padding, which is the opposite of scannable once fourteen of them stack up. These tighten the scale for a list you read down rather than one you land on. The hover fill, the preview and the layout are untouched. */ .crow-q .srow-name{font-size:clamp(21px,2.4vw,26px);line-height:1.2} /* .83, not .8: an open category tints the surface to --surface-alt, which is darker than cream, and the description dropped to 4.29 against the 4.5 AA needs. .825 is where it crosses back; .83 is the nearest step above. */ .crow-q .srow-desc{font-size:16px;line-height:1.6;opacity:.83;max-width:60ch} .cat-eyebrow{font-size:14px;margin-bottom:8px} .cat-count{font-size:15px;margin-top:8px} /* On phones the description is what makes the list long. Two lines is enough to tell courses apart; the full text is one tap away inside the panel. */ @media (max-width:900px){ .crow-q .srow-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} } /* ── Courses page: hierarchy, breathing room, arrows ─────────────────────── Three surfaces separate the three levels. The page is cream; an open category warms to --surface-alt so it reads as one block rather than a heading followed by loose rows; the open course panel returns to cream, so it lifts back out of that block as the thing you actually asked for. */ .cat-group{transition:background .45s var(--ease)} .cat-group.open{background:var(--surface-alt)} .cat-group.open>.cat-h .cat-name{color:var(--rose-ink)} .cat-group.open>.cat-h{border-bottom:1px solid var(--dust)} .crow.open{background:var(--surface)} /* Room to breathe. These rows carry two lines of description and sit fourteen deep, so the earlier 20px was tight to the point of looking like a table. */ /* Arrows rather than a plus, turning as they go: → at rest, tilted down when open. The tilt stops at 45deg rather than swinging to a right angle, so it stays an arrow leaning into the panel instead of a bare down-pointer. Hover uses the same 45deg, which makes it a preview of where the arrow settles. The lift repeats the motion the old home page rows used on their arrow. */ .crow-mark{transform:translateY(-50%) rotate(0deg);transition:transform .45s var(--ease),color .35s} .srow:hover .crow-mark{transform:translateY(-56%) rotate(45deg);color:var(--gold)} /* ── Category header: explicit CTA and a larger title ───────────────────── The arrow alone left the header looking like a heading rather than a control, so it now carries a stated action. It is a span, not a button or a link: .cat-q is already the button and nesting an interactive element inside one is invalid, so this is styling on the existing control rather than a second one. Because it sits inside the button it also becomes part of the accessible name, which is why the label swaps rather than saying "view courses" while they are already open - the hidden half is dropped from the name automatically. */ .cat-text{display:block} .cat-name{font-size:clamp(32px,4.4vw,52px)} .cat-cta{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:48px;padding:13px 26px;border:1px solid var(--charcoal);font-family:var(--font-body);font-size:16px;letter-spacing:.06em;color:var(--charcoal);background:none;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)} .cat-cta-b{display:none} .cat-group.open .cat-cta-a{display:none} .cat-group.open .cat-cta-b{display:inline} .cat-q:hover .cat-cta,.cat-q:focus-visible .cat-cta{background:var(--charcoal);color:var(--cream);border-color:var(--charcoal)} .cat-group.open .cat-cta{border-color:var(--rose-ink);color:var(--rose-ink)} .cat-group.open .cat-q:hover .cat-cta{background:var(--rose-ink);color:var(--cream);border-color:var(--rose-ink)} /* Phones: the CTA drops under the text rather than competing with it for a narrow row, and the arrow keeps its place at the right edge. */ @media (max-width:700px){ .cat-h{grid-template-columns:1fr;row-gap:20px} .cat-q{justify-self:start} } /* More air. The rows carry a title and two lines of description, so they were still reading tight against their own dividers - the courses more so than the categories, since the category has a CTA holding its row open. Phones get a smaller step than desktop: the same padding that reads as generous on a wide row just turns fourteen phone rows into a longer scroll. */ .crow-q{padding-top:44px;padding-bottom:44px} .cat-h{padding-top:42px;padding-bottom:42px} .crow-panel .course-detail{padding-top:30px;padding-bottom:46px} @media (min-width:901px){ .crow-q{padding-top:60px;padding-bottom:60px} .cat-h{padding-top:54px;padding-bottom:54px} .crow-panel .course-detail{padding-top:36px;padding-bottom:60px} } /* ── Open course: the full two-column block ─────────────────────────────── The revealed course is the original .course-detail presentation - photo one side, copy the other, headed by the course name. Pulling the name and description up into the row button had left the copy column 85px shorter than the photo beside it, because the photo takes its height from that column; giving them back restores the balance rather than patching it. To avoid printing the same name twice a hundred pixels apart, the open row header collapses to a compact bar - the same move the categories make. The name stays in the accessible tree rather than display:none, so the button keeps a meaningful label instead of announcing only "Ascunde". */ .crow-panel .cd-name{margin-bottom:20px} /* .cd-desc caps at 34ch, set for the old narrow copy column. In the panel it sits in a 600px column beside the list, where that cap breaks it into three short lines against the full-width rows underneath. */ .crow-panel .cd-desc{max-width:52ch} /* Ascunde is a real secondary button now, sitting beside the course CTA at the foot of the panel rather than as a label in the row header. It is a