/* ==========================================================
   石原菜々子 ピアノ教室 — Piano Atelier Edition
   palette: ivory / ink / rose / gold
   ========================================================== */

:root{
	--ivory:      #f8f4ed;
	--paper:      #fffdf9;
	--blush:      #f5e6e4;
	--ink:        #322629;
	--ink-soft:   #6d5a5f;
	--rose:       #a8465c;
	--rose-deep:  #8e3a4d;
	--gold:       #b3915a;
	--line:       #e6dccf;
	--serif:  "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--sans:   "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	--en:     "Cormorant Garamond", serif;
	--radius-arch: 45% 45% 14px 14px;
	--shadow-soft: 0 24px 60px -30px rgba(50, 38, 41, .35);
	--header-h: 72px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin: 0;
	background: var(--ivory);
	color: var(--ink);
	font-family: var(--sans);
	font-weight: 400;
	line-height: 2;
	letter-spacing: .04em;
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--rose); }
section{ scroll-margin-top: calc(var(--header-h) + 8px); }
/* チラシのQR（#contactForm）から直接フォームへ着地させる：固定ヘッダーの下に出す */
#contactForm{ scroll-margin-top: calc(var(--header-h) + 16px); }
#contactForm:target{ opacity: 1; transform: none; transition: none; }

/* 画像DL抑止（完全防止ではなく抑止） */
img{ -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
img.protect-img{ pointer-events: none; }

/* ---------- 汎用 ---------- */
h1, h2, h3{ font-family: var(--serif); font-weight: 600; letter-spacing: .06em; line-height: 1.5; }
/* 1〜2文字だけの中途半端な行落ちを防ぐ（対応ブラウザのみ・段階的強化） */
h1, h2, h3, p, dt, dd{ text-wrap: pretty; }
h2{ font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: .4em 0 .8em; }
h3{ font-size: 1.06rem; margin: 0 0 .3em; }
.center{ text-align: center; }
.body-text{ color: var(--ink-soft); font-size: .96rem; }
.section{ padding: clamp(4.5rem, 9vw, 7.5rem) clamp(1.25rem, 5vw, 3rem); position: relative; }
.section-inner{ max-width: 1120px; margin: 0 auto; }
.section-inner.narrow{ max-width: 760px; }

.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.grid-2.rev .section-visual{ order: -1; }
.section-visual.sticky{ align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }

/* eyebrow */
.eyebrow{
	display: flex; align-items: baseline; gap: .8em;
	margin: 0 0 .5em; color: var(--gold);
	font-size: .82rem; letter-spacing: .28em; text-transform: uppercase;
}
.eyebrow.center{ justify-content: center; }
.eyebrow .en{ font-family: var(--en); font-style: italic; font-size: 1.35em; letter-spacing: .18em; }
.eyebrow .num{
	font-family: var(--en); font-style: italic; font-size: 1.9em;
	color: var(--rose); opacity: .85; line-height: 1;
}
.eyebrow .dot{ width: 26px; height: 1px; background: var(--gold); align-self: center; }

/* ボタン */
.btn{
	display: inline-block; text-decoration: none; text-align: center;
	font-family: var(--sans); font-weight: 500; letter-spacing: .12em;
	border-radius: 999px; padding: .85em 2.1em; font-size: .92rem;
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-big{ padding: 1.05em 2.6em; font-size: .98rem; }
.btn-primary{
	background: linear-gradient(135deg, var(--rose), var(--rose-deep));
	color: #fff; box-shadow: 0 14px 30px -12px rgba(168, 70, 92, .55);
}
.btn-primary:hover{ box-shadow: 0 18px 34px -12px rgba(168, 70, 92, .7); }
.btn-outline{
	border: 1px solid var(--rose); color: var(--rose); background: transparent;
}
.btn-outline:hover{ background: var(--rose); color: #fff; }
.btn-gold{
	background: linear-gradient(135deg, #c8a468, var(--gold));
	color: #fff; box-shadow: 0 14px 30px -12px rgba(179, 145, 90, .6);
}
.btn-ghost{
	border: 1px solid rgba(255, 255, 255, .55); color: #fff; background: transparent;
}
.btn-ghost:hover{ background: rgba(255, 255, 255, .12); }

/* 鍵盤モチーフ */
.brand-keys, .hero-keys, .footer-keys{ display: inline-flex; align-items: flex-start; gap: 2px; }
.brand-keys i, .hero-keys i, .footer-keys i{
	width: 9px; height: 30px; background: #fff;
	border: 1px solid var(--line); border-radius: 0 0 2px 2px;
}
.brand-keys i.b, .hero-keys i.b, .footer-keys i.b{
	width: 6px; height: 19px; background: var(--ink);
	border: none; margin: 0 -4px; z-index: 1; border-radius: 0 0 1.5px 1.5px;
}
.brand-keys i{ height: 20px; width: 6.5px; }
.brand-keys i.b{ height: 12px; width: 4.5px; margin: 0 -3px; }
.hero-keys{ margin: 1.1rem 0 1.3rem; }
.footer-keys{ justify-content: center; display: flex; margin-bottom: 1rem; }

/* アーチ型フレーム */
.arch-frame{
	margin: 0; overflow: hidden; position: relative;
	border-radius: var(--radius-arch);
	box-shadow: var(--shadow-soft);
	background: var(--paper);
}
.arch-frame::after{
	content: ""; position: absolute; inset: 10px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 42% 42% 8px 8px; pointer-events: none;
}
.arch-frame img{ width: 100%; height: 100%; object-fit: cover; }

/* ---------- ヘッダー ---------- */
.site-header{
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	height: var(--header-h);
	display: flex; align-items: center;
	background: transparent;
	transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.site-header.scrolled{
	background: rgba(248, 244, 237, .88);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--line);
}
.header-inner{
	width: 100%; max-width: 1240px; margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 2.5rem);
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand{
	display: inline-flex; align-items: center; gap: .6em;
	text-decoration: none; color: var(--ink);
}
.brand-name{ font-family: var(--serif); font-weight: 600; letter-spacing: .1em; font-size: 1.02rem; white-space: nowrap; }
.global-nav{ display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.global-nav a{
	color: var(--ink); text-decoration: none; font-size: .88rem; letter-spacing: .14em;
	position: relative; padding: .3em 0;
}
.global-nav a::after{
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
	height: 1px; background: var(--rose); transition: right .3s ease;
}
.global-nav a:hover::after{ right: 0; }
.global-nav .nav-cta{
	border: 1px solid var(--rose); color: var(--rose);
	border-radius: 999px; padding: .45em 1.3em;
}
.global-nav .nav-cta::after{ display: none; }
.global-nav .nav-cta:hover{ background: var(--rose); color: #fff; }
.header-cta{ display: none; }

/* ---------- ヒーロー ---------- */
.hero{
	min-height: 100svh;
	display: flex; align-items: center;
	padding: calc(var(--header-h) + 3rem) clamp(1.25rem, 5vw, 3rem) 4rem;
	position: relative;
	background:
		radial-gradient(1100px 520px at 88% -10%, var(--blush) 0%, transparent 62%),
		radial-gradient(700px 420px at -12% 110%, #efe4d4 0%, transparent 60%),
		var(--ivory);
	overflow: hidden;
}
.hero::before{
	/* 五線譜のヘアライン */
	content: ""; position: absolute; left: 0; right: 0; top: 46%;
	height: 96px; pointer-events: none; opacity: .35;
	background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 24px);
	mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
}
.hero-inner{
	max-width: 1240px; margin: 0 auto; width: 100%;
	display: grid; grid-template-columns: 1.05fr .95fr;
	gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
	position: relative;
}
.hero h1{
	font-size: clamp(2.6rem, 5.6vw, 4.3rem);
	margin: .1em 0 0; line-height: 1.28;
}
.hero .lead{ color: var(--ink-soft); font-size: .98rem; margin: 0 0 1.8rem; }
.hero-actions{ margin: 0 0 1.4rem; }
.hero-links{ font-size: .88rem; color: var(--ink-soft); letter-spacing: .1em; }
.hero-links a{ color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color .25s, border-color .25s; }
.hero-links a:hover{ color: var(--rose); border-color: var(--rose); }
.hero-visual{ position: relative; }
.hero-visual .arch-frame{ aspect-ratio: 4 / 4.6; }
.hero-badge{
	position: absolute; left: -26px; bottom: 34px;
	width: 128px; height: 128px; border-radius: 50%;
	background: var(--paper);
	box-shadow: 0 18px 40px -18px rgba(50, 38, 41, .35);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: .1em; text-align: center; transform: rotate(-8deg);
	border: 1px solid var(--line);
}
.hero-badge .badge-en{ font-family: var(--en); font-style: italic; color: var(--gold); font-size: .95rem; letter-spacing: .12em; }
.hero-badge .badge-ja{ font-family: var(--serif); font-weight: 600; font-size: .92rem; line-height: 1.5; color: var(--rose-deep); }

/* ---------- About ---------- */
.about .section-visual{ position: relative; }
.about .arch-frame{ aspect-ratio: 1 / 1.05; max-width: 460px; margin-inline: auto; }
.slideshow{ position: relative; }
.slideshow .slide{
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: 0; transition: opacity 1.2s ease-in-out;
}
.slideshow .slide.active{ opacity: 1; }
.slide-dots{
	position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
	display: flex; gap: 8px; z-index: 2;
}
.slide-dots button{
	width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
	background: rgba(255, 255, 255, .55); cursor: pointer; transition: background .3s, transform .3s;
}
.slide-dots button.active{ background: #fff; transform: scale(1.35); }

/* ---------- Lesson ---------- */
.lesson{ background: var(--paper); }
.lesson .arch-frame.tall{ aspect-ratio: 3 / 4.1; max-width: 430px; margin-inline: auto; }
.lesson-list{
	list-style: none; margin: 1.6rem 0 0; padding: 0;
	counter-reset: lesson;
}
.lesson-list li{
	counter-increment: lesson;
	position: relative; padding: 1.15rem 0 1.15rem 3.4rem;
	border-bottom: 1px solid var(--line);
}
.lesson-list li:first-child{ border-top: 1px solid var(--line); }
.lesson-list li::before{
	content: "0" counter(lesson);
	position: absolute; left: 0; top: 1.2rem;
	font-family: var(--en); font-style: italic; font-size: 1.5rem;
	color: var(--rose); opacity: .8; line-height: 1;
}
.lesson-list h3{ font-size: 1.02rem; }
.lesson-list p{ margin: 0; color: var(--ink-soft); font-size: .92rem; }

/* ---------- Price ---------- */
.price{
	background:
		radial-gradient(900px 400px at 50% 0%, var(--blush) 0%, transparent 70%),
		var(--ivory);
}
.price-card{
	background: var(--paper); border: 1px solid var(--line);
	border-radius: 22px; overflow: hidden;
	box-shadow: var(--shadow-soft);
	max-width: 560px; margin: 0 auto;
}
.price-trial{
	display: flex; align-items: center; justify-content: center; gap: 1.2em;
	background: linear-gradient(135deg, var(--rose), var(--rose-deep));
	color: #fff; padding: 1.05rem 1rem;
}
.price-trial .trial-label{ font-family: var(--serif); letter-spacing: .2em; font-size: 1rem; }
.price-trial .trial-value{
	font-family: var(--serif); font-weight: 700; font-size: 1.5rem; letter-spacing: .2em;
	border-bottom: 1px solid rgba(255, 255, 255, .6); padding-bottom: .05em;
}
.price-body{ padding: 2rem clamp(1.4rem, 4vw, 2.6rem) 2.2rem; }
.price-plan{ text-align: center; font-size: 1.12rem; margin-bottom: 1.2rem; }
.price-plan .plan-note{ font-size: .8em; color: var(--ink-soft); font-weight: 400; margin-left: .3em; }
.price-rows{ margin: 0 0 1.2rem; }
.price-row{
	display: flex; align-items: baseline; justify-content: space-between;
	padding: .8rem .2rem;
	border-bottom: 1px dashed var(--line);
}
.price-row dt{ letter-spacing: .2em; color: var(--ink-soft); }
.price-row dd{
	margin: 0; font-family: var(--serif); font-weight: 600;
	font-size: 1.7rem; color: var(--ink);
	white-space: nowrap;
}
.price-row dd .yen{ font-size: .55em; margin-left: .15em; color: var(--ink-soft); }
.price-chip{
	text-align: center; margin: 0 auto 1.1rem; width: fit-content;
	border: 1px solid var(--gold); color: var(--gold);
	border-radius: 999px; padding: .25em 1.4em;
	font-size: .85rem; letter-spacing: .2em;
}
.price-notes{ font-size: .82rem; color: var(--ink-soft); margin: 0; line-height: 1.9; }
.price-lead{ text-align: center; margin: 2rem 0 1.2rem; color: var(--ink-soft); }

/* ---------- Features ---------- */
.features{ background: var(--paper); }
.feature-grid{
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 1.8rem); margin-top: 2.6rem;
}
.feature-card{
	background: var(--ivory); border: 1px solid var(--line);
	border-radius: 18px; padding: 1.9rem 1.5rem 1.6rem;
	transition: transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.feature-icon{
	display: inline-flex; align-items: center; justify-content: center;
	width: 62px; height: 62px; border-radius: 50%;
	background: var(--paper); color: var(--rose);
	border: 1px solid var(--gold);
	margin-bottom: 1rem;
}
.feature-icon svg{ width: 30px; height: 30px; }
.feature-card h3{ font-size: 1rem; }
.feature-card p{ margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.95; }

/* ---------- Teacher ---------- */
.teacher .arch-frame{ aspect-ratio: 1 / 1; max-width: 440px; margin-inline: auto; }
.teacher-name{
	font-family: var(--serif); font-size: 1.5rem; letter-spacing: .16em;
	margin: 0 0 .2em;
}
.teacher-name strong{ font-weight: 600; }
.teacher-credential{
	color: var(--gold); font-size: .88rem; letter-spacing: .08em;
	border-bottom: 1px solid var(--line); padding-bottom: 1.1em; margin: 0 0 1.2em;
}

/* ---------- Contact ---------- */
.contact{
	background:
		radial-gradient(900px 500px at 85% 0%, rgba(179, 145, 90, .18) 0%, transparent 60%),
		linear-gradient(160deg, #43303596 0%, transparent 55%),
		linear-gradient(135deg, #4a333a, #2f2226);
	color: #f4ece6;
}
.contact h2{ color: #fbf6f0; }
.contact .body-text{ color: #d9c9c4; }
.contact .eyebrow.on-dark{ color: #cfa96f; }
.contact .eyebrow .num{ color: #e0a0ae; }
.contact-actions{
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
	margin: 2.2rem 0;
}
.contact-hr{
	border: none; border-top: 1px solid rgba(255, 255, 255, .18);
	margin: 2.4rem auto; max-width: 420px;
}
.contact-address{
	font-style: normal; font-size: .92rem; line-height: 2.2; color: #d9c9c4;
}
.contact-address strong{ font-family: var(--serif); font-size: 1.05rem; letter-spacing: .12em; color: #fbf6f0; }
.contact-address a{ color: #e8b6c0; text-decoration: none; border-bottom: 1px solid rgba(232, 182, 192, .4); }
.contact-address a:hover{ border-color: #e8b6c0; }

/* ---------- Contact form ---------- */
.contact-form{
	background: var(--paper); color: var(--ink);
	border-radius: 22px; padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.1rem, 4vw, 2.4rem);
	margin: 2.4rem auto 0; text-align: left;
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55);
}
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 1.4rem; }
.field{ display: flex; flex-direction: column; gap: .35rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field-wide, .field-radio{ grid-column: 1 / -1; }
.field > label, .field > legend{
	font-size: .88rem; font-weight: 500; color: var(--ink); letter-spacing: .06em; line-height: 1.6;
	padding: 0; display: flex; align-items: center; gap: .5em; flex-wrap: wrap;
}
.req, .opt{
	font-size: .68rem; font-weight: 500; letter-spacing: .1em; line-height: 1;
	padding: .3em .6em .28em; border-radius: 999px; white-space: nowrap;
}
.req{ background: var(--rose); color: #fff; }
.opt{ background: var(--blush); color: var(--ink-soft); }
.field input[type="text"], .field textarea{
	font: inherit; font-size: 16px; line-height: 1.6; letter-spacing: .03em; color: var(--ink);
	background: #fff; border: 1px solid var(--line); border-radius: 12px;
	padding: .7em .95em; width: 100%; min-width: 0;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ resize: vertical; min-height: 7.5em; }
.field input::placeholder, .field textarea::placeholder{ color: #b4a3a7; }
.field input:focus, .field textarea:focus{
	outline: none; border-color: var(--rose);
	box-shadow: 0 0 0 4px rgba(168, 70, 92, .14);
}
.contact-form.was-validated .field input[type="text"]:invalid, .contact-form.was-validated .field textarea:invalid{ border-color: var(--rose-deep); background: #fff7f7; }
.field-hint{ margin: 0; font-size: .78rem; color: var(--ink-soft); line-height: 1.7; }
.radio-row{ display: flex; flex-wrap: wrap; gap: .6rem; }
.radio{
	position: relative; cursor: pointer; font-size: .9rem; letter-spacing: .04em;
	border: 1px solid var(--line); border-radius: 999px; padding: .5em 1.15em; background: #fff;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
/* :has() 非対応ブラウザ（Safari 15.3以前など）では標準のラジオを見せる */
.radio input{ position: static; opacity: 1; width: 1em; height: 1em; margin: 0 .35em 0 0; accent-color: var(--rose); vertical-align: -.1em; }
.radio:focus-within{ box-shadow: 0 0 0 4px rgba(168, 70, 92, .18); }
@supports selector(:has(*)){
	.radio input{ position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
	.radio:has(input:checked){ border-color: var(--rose); background: var(--rose); color: #fff; }
	.radio:focus-within{ box-shadow: none; }
	.radio:has(input:focus-visible){ box-shadow: 0 0 0 4px rgba(168, 70, 92, .18); }
	.contact-form.was-validated .radio-row:has(input:invalid) .radio{ border-color: var(--rose-deep); }
}
.radio:focus-within{ outline: 2px solid var(--rose); outline-offset: 3px; }
.hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-actions{ text-align: center; margin: 1.8rem 0 .9rem; }
.form-actions .btn{ border: 0; cursor: pointer; font: inherit; font-weight: 500; letter-spacing: .12em; }
.form-actions .btn[disabled]{ opacity: .6; cursor: default; transform: none; }
.form-privacy{ margin: 0; text-align: center; font-size: .78rem; color: var(--ink-soft); line-height: 1.7; }
/* 語の途中で折り返さない：文節ごとにまとめ、文節の間でだけ改行する */
.form-privacy .ph{ display: inline-block; }
.form-error{
	margin: 1.2rem 0 0; padding: .8em 1em; border-radius: 12px; font-size: .86rem; line-height: 1.8;
	background: #fdeeee; color: #8e3a4d; border: 1px solid #f0c6cc;
}
.form-error a{ color: #8e3a4d; }
.form-done{
	background: var(--paper); color: var(--ink); border-radius: 22px;
	padding: clamp(2rem, 5vw, 3rem) clamp(1.2rem, 4vw, 2.4rem); margin: 2.4rem auto 0;
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55); outline: none;
}
.form-done .done-mark{ font-family: var(--serif); font-size: 2.2rem; color: var(--gold); margin: 0 0 .2em; line-height: 1; }
.form-done h3{ font-size: 1.25rem; margin: 0 0 .6em; }
.form-done p{ margin: 0; color: var(--ink-soft); font-size: .92rem; }
.contact-alt{ margin: 2.6rem 0 -1.2rem; font-size: .84rem; letter-spacing: .12em; color: #cfa96f; }

/* ---------- フッター ---------- */
.site-footer{
	background: #241a1d; color: #a99095;
	text-align: center; padding: 2.4rem 1rem 6.2rem;
	font-size: .82rem; letter-spacing: .12em;
}
.site-footer .footer-keys i{ border-color: #4a383d; }
.site-footer p{ margin: 0; }

/* ---------- モバイル固定CTA ---------- */
.mobile-cta{
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	display: none; gap: 1px; background: var(--line);
	box-shadow: 0 -8px 24px -12px rgba(50, 38, 41, .35);
}
.mobile-cta a{
	flex: 1; text-align: center; text-decoration: none;
	padding: 1rem .5rem; font-size: .9rem; font-weight: 500; letter-spacing: .1em;
}
.mcta-tel{ background: var(--paper); color: var(--ink); }
.mcta-mail{ background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff; }

/* ---------- リビール ---------- */
.reveal{ opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	.reveal{ opacity: 1; transform: none; transition: none; }
	.slideshow .slide{ transition: none; }
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 980px){
	.hero-inner{ grid-template-columns: 1fr; gap: 3rem; }
	.hero{ min-height: auto; padding-bottom: 3rem; }
	.hero-visual .arch-frame{ aspect-ratio: 4 / 3.4; max-width: 560px; margin-inline: auto; }
	.hero-badge{ left: 4px; bottom: -16px; width: 110px; height: 110px; }
	.grid-2{ grid-template-columns: 1fr; gap: 2.6rem; }
	.grid-2.rev .section-visual{ order: 0; }
	.section-visual.sticky{ position: static; }
	.feature-grid{ grid-template-columns: repeat(2, 1fr); }
	.global-nav{ display: none; }
	.header-cta{
		display: inline-block; border: 1px solid var(--rose); color: var(--rose);
		text-decoration: none; border-radius: 999px; padding: .45em 1.2em;
		font-size: .84rem; letter-spacing: .1em; background: rgba(255,253,249,.7);
		white-space: nowrap; flex-shrink: 0;
	}
}
@media (max-width: 620px){
	body{ line-height: 1.95; }
	.feature-grid{ grid-template-columns: 1fr; }
	.mobile-cta{ display: flex; }
	.brand-name{ font-size: .92rem; letter-spacing: .06em; }
	.brand{ gap: .45em; }
	.header-cta{ padding: .4em 1em; font-size: .8rem; letter-spacing: .06em; }
	.hero h1{ font-size: clamp(2.3rem, 11vw, 2.9rem); }
	.btn-big{ display: block; white-space: nowrap; padding-left: .8em; padding-right: .8em; font-size: .92rem; letter-spacing: .08em; }
	.price-row dd{ font-size: 1.5rem; }
	.contact-actions{ flex-direction: column; }
	.contact-actions .btn{ display: block; }
	.form-grid{ grid-template-columns: 1fr; gap: 1rem; }
	.form-actions .btn-big{ width: 100%; }
}
@media (max-width: 380px){
	.brand-name{ font-size: .84rem; }
	.header-cta{ font-size: .76rem; padding: .4em .85em; }
	.btn-big{ font-size: .86rem; letter-spacing: .04em; }
}