/* v5 hero hook — condensed capitals + pink script (typography of mock-up B), current white / powder-pink palette.
   Fonts self-hosted (SIL Open Font License, see assets/fonts/OFL.txt); Latin only, so Cyrillic and Arabic fall back below. */
@font-face{font-family:'Anton';src:url(assets/fonts/Anton.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Allura';src:url(assets/fonts/Allura.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@media(min-width:701px){#hero-copy{top:15%;width:42%}}
#hero-copy .hook{margin:0;font-weight:400;line-height:1;letter-spacing:0}
.hook-big{display:block;font:400 clamp(58px,6.2vw,104px)/.9 'Anton','Impact','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);text-shadow:0 2px 0 #faf8f466}
.hook-script{display:block;position:relative;z-index:1;margin:-.1em 0 0 .7em;font:400 clamp(44px,4.6vw,78px)/1 'Allura',cursive;color:#c45f83;transform:rotate(-6deg);transform-origin:left center;text-shadow:0 0 14px #faf8f4,0 0 3px #faf8f4;white-space:nowrap}
.hook-sub{margin:0 0 -4px;max-width:36ch;font:italic 17px/1.45 Georgia,serif;color:#5d3f47;text-shadow:0 0 10px #faf8f4}
@media(max-width:700px){
 #hero-copy{top:max(8%,66px);padding:0 18px}
 .hook-big{font-size:clamp(44px,14.2vw,64px);line-height:.88}
 .hook-script{margin:-.3em auto 0;font-size:clamp(42px,12.6vw,56px);transform:rotate(-5deg);transform-origin:center}
 .hook-sub{margin:0 auto;padding:9px 16px;max-width:min(340px,calc(100vw - 36px));font-size:13.5px;line-height:1.42;text-align:center;background:#faf8f4e0;border:1px solid #d5b29a55;border-radius:18px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:none}
}
/* Cyrillic & Arabic: Anton / Allura have no glyphs; keep the look with condensed bold system faces and an upright pink line */
html[lang="ru"] .hook-big{font-family:'Arial Narrow','Roboto Condensed','Helvetica Neue',Impact,sans-serif;font-weight:700;font-stretch:condensed;letter-spacing:-.02em}
html[lang="ru"] .hook-big{font-size:clamp(40px,4.4vw,68px)}
html[lang="ar"] .hook-big{font-size:clamp(40px,4.2vw,64px)}
html[lang="ru"] .hook-script{font:italic 400 clamp(26px,3vw,44px)/1.1 Georgia,serif;margin-top:.15em;transform:rotate(-3deg)}
html[lang="ar"] .hook-big{font-family:Tahoma,"Segoe UI","Noto Sans Arabic",Arial,sans-serif;font-weight:700;line-height:1.15;letter-spacing:0}
html[lang="ar"] .hook-script{font:700 clamp(26px,3vw,44px)/1.3 Tahoma,"Segoe UI","Noto Sans Arabic",Arial,sans-serif;margin:.2em 0 0;transform:rotate(-3deg);transform-origin:right center}
html[lang="ar"] .hook-sub{font-style:normal}
@media(max-width:700px){
 html[lang="ru"] .hook-big{font-size:clamp(30px,9.6vw,44px);line-height:.95}
 html[lang="ru"] .hook-script{font-size:clamp(24px,7vw,32px);transform-origin:center}
 html[lang="ar"] .hook-big{font-size:clamp(32px,10vw,46px)}
 html[lang="ar"] .hook-script{font-size:clamp(22px,6.8vw,30px);transform-origin:center}
}

@media(max-width:700px) and (max-height:700px){#hero-copy{top:62px}.hook-big{font-size:clamp(34px,10.5vw,46px)}.hook-script{font-size:clamp(30px,9vw,40px)}html[lang="ru"] .hook-big{font-size:clamp(26px,8.2vw,36px)}html[lang="ar"] .hook-big{font-size:clamp(26px,8.4vw,38px)}html[lang="ru"] .hook-script,html[lang="ar"] .hook-script{font-size:clamp(20px,6vw,26px)}.hook-sub{font-size:12px;padding:7px 14px}}

/* v5.2 — mobile: nothing written over the pink salon façade. The cream card (script + "Russian manicure…" line) is removed
   on phones; the h1 keeps the big title only, and "Book now" + "or scroll to step inside" stay under the façade.
   The description sentence stays in the page (visible on desktop, left column, away from the façade). */
@media(max-width:700px){#hero-copy .hook-script,#intro-action .hook-sub{display:none}}
/* without the card, "Book now" sits a little lower so it clears the bottom of the façade (also in Arabic, taller button) */
@media(max-width:700px){#intro-action{bottom:max(2.2%,env(safe-area-inset-bottom));gap:8px}}
@media(max-width:700px) and (max-height:700px){#intro-action{bottom:max(1.6%,env(safe-area-inset-bottom));gap:6px}}
/* v5.1 — STEP INSIDE title: the new, longer two-line hook must keep each line on one row at 390px */
@media(max-width:700px){#chapter h2{font-size:clamp(25px,7.4vw,31px);line-height:1.08;margin:10px 12px}html[lang="ar"] #chapter h2{letter-spacing:0}}
@media(min-width:701px){#chapter{top:max(10%,82px)}#chapter h2{font-size:clamp(32px,3.4vw,50px)}}