/* Service and contact pages. Shares rails, steps, cta, faq, contact, form and sticky styles with home.css. */

/* ---------- page hero ---------- */
.phero { position: relative; overflow: hidden; padding-block: var(--s-6) var(--s-6); }
.phero__in { display: grid; grid-template-columns: minmax(300px, 34rem) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.phero__in--single { grid-template-columns: minmax(0, 44rem); }
.phero h1 { font-size: clamp(1.75rem, 1.25rem + 1vw, 2.25rem); line-height: 1.12; }
.hero__proof, .phero__proof { margin-top: var(--s-3); font-weight: 800; color: var(--c-gold); }
.phero__lead { margin-top: var(--s-4); font-size: var(--fs-2); color: var(--ink-2); max-width: 50ch; }
.phero__price { margin-top: var(--s-4); display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.phero__price .price { display: flex; align-items: baseline; gap: var(--s-2); }
.phero__price .price__now { font-size: var(--fs-4); }
.phero__meta { color: var(--ink-2); font-size: var(--fs-0); }
.phero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.phero__note { margin-top: var(--s-3); font-size: var(--fs-0); color: var(--ink-2); max-width: 48ch; }
.phero__rail { min-width: 0; }
.phero .rail__track { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
.phero .rail::after { content: ""; position: absolute; right: calc(-1 * var(--gutter)); top: 0; bottom: 0; width: 18%; background: linear-gradient(90deg, transparent, var(--c-ink)); pointer-events: none; }
.phero--short { padding-block: var(--s-7); }
@media (max-width: 1000px) {
	.phero__in { grid-template-columns: 1fr; gap: var(--s-6); }
	.phero .rail { width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); }
	.phero .rail::after { display: none; }
	.phero .rail__track { margin-right: 0; padding-inline: var(--gutter); }
	.phero .rail__nav { padding-inline: var(--gutter); }
	.phero .rail__item { flex-basis: min(64vw, 300px); }
}

/* ---------- intro: what it is, included, who for ---------- */
.intro { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-areas: "media body" "media cols"; gap: var(--s-5) var(--s-7); align-items: start; }
.intro__body { grid-area: body; }
.intro__cols { grid-area: cols; }
.intro__text { margin-top: var(--s-4); font-size: var(--fs-2); color: var(--ink-2); max-width: 56ch; }
.intro__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.intro__col h3 { font-size: var(--fs-2); margin-bottom: var(--s-3); }
.ticks { display: grid; gap: var(--s-2); }
.ticks li { position: relative; padding-left: 1.7em; line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.65em; height: 0.35em; border-left: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent); transform: rotate(-45deg); }
@media (max-width: 900px) { .intro { grid-template-columns: 1fr; grid-template-areas: "body" "media" "cols"; gap: var(--s-5); } }
@media (max-width: 600px) { .intro__cols { grid-template-columns: 1fr; } }

/* ---------- steps on service pages (same timeline, different column split) ---------- */
@media (min-width: 901px) { .sec--steps .wrap { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); } .sec--steps .how__media { grid-row: 2 / span 2; } }
.intro .sec__cta { grid-column: 1 / -1; }
.visit__media { max-width: none; }
.visit__media .lhr-media { aspect-ratio: 4 / 3; }

/* ---------- good to know ---------- */
.sec--know { background: var(--c-cloud); }
.know { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: var(--s-7); align-items: start; }
.know__list { display: grid; gap: 0; }
.know__row { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--rule); }
.know__row:last-child { border-bottom: 1px solid var(--rule); }
.know__row dt { font-weight: 700; }
.know__row dd { color: var(--ink-2); }
@media (max-width: 800px) { .know { grid-template-columns: 1fr; gap: var(--s-4); } .know__row { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ---------- related services ---------- */
.related { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); }
.related__item a { display: block; padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius-lg); height: 100%; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.related__item a:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--c-accent); }
.related__item h3 { font-size: var(--fs-2); }
.related__price { margin-top: var(--s-2); font-weight: 800; font-size: var(--fs-3); letter-spacing: -0.02em; }
.related__dur { color: var(--ink-2); font-size: var(--fs-0); }

/* ---------- contact page: ways ---------- */
.sec--ways { padding-block: var(--s-7); }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.way { display: flex; flex-direction: column; padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--bg); }
.way h2 { font-size: var(--fs-3); }
.way p { margin-top: var(--s-3); color: var(--ink-2); flex: 1; }
.way .btn { margin-top: var(--s-4); }
.way--wa { border-color: var(--c-wa); box-shadow: 0 12px 30px rgba(37,211,102,.15); }
@media (max-width: 900px) { .ways { grid-template-columns: 1fr; max-width: 520px; } }

/* ---------- contact page: visit ---------- */
.sec--visit { background: var(--c-cloud); }
.visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); gap: var(--s-7); align-items: start; }
.visit__addr { margin-top: var(--s-3); font-size: var(--fs-2); font-weight: 600; }
.visit__addr a:hover { text-decoration: underline; text-underline-offset: 3px; }
.visit .know__list { margin-top: var(--s-5); }
.visit__body .btn { margin-top: var(--s-5); }
.visit__side { display: grid; gap: var(--s-4); }
.visit__map { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); box-shadow: var(--shadow); }
.visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .visit { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ---------- page hero with a single portrait ---------- */
.phero__media { width: min(100%, 380px); justify-self: end; }
.phero__media .lhr-media { box-shadow: var(--shadow); }
@media (max-width: 1000px) { .phero__media { width: 100%; justify-self: stretch; } .phero__media .lhr-media { aspect-ratio: 4 / 5; } }

/* ---------- intro image (service pages, hair replacement) ---------- */
.intro__media { grid-area: media; position: sticky; top: calc(var(--header-h) + var(--s-4)); }
.intro__media .lhr-media { aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.intro__cols { padding-top: var(--s-2); }
@media (max-width: 900px) { .intro__media { position: static; } }

/* ---------- about: story ---------- */
.story { display: grid; grid-template-columns: minmax(240px, 380px) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.story__body p:not(.eyebrow) { margin-top: var(--s-3); color: var(--ink-2); max-width: 60ch; }
.story__body h2 + p { font-size: var(--fs-2); color: var(--ink); }
.story__media .lhr-media { box-shadow: var(--shadow); }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; gap: var(--s-5); } .story__media .lhr-media { aspect-ratio: 4 / 5; } }

/* ---------- about: values ---------- */
.sec--values { background: var(--c-cloud); }
.values { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.value { padding: var(--s-5); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.value h3 { font-size: var(--fs-2); }
.value p { margin-top: var(--s-2); color: var(--ink-2); }
@media (max-width: 960px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .values { grid-template-columns: 1fr; } }

/* ---------- location: nearby ---------- */
.nearby { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.place__media .lhr-media { aspect-ratio: 4 / 3; margin-bottom: var(--s-3); }
.place h3 { font-size: var(--fs-2); }
.place p { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--fs-0); }
@media (max-width: 960px) { .nearby { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .nearby { grid-template-columns: 1fr; } }

/* ---------- two-price layout ---------- */
.services--two { grid-template-columns: 1fr 1fr; max-width: 900px; }
@media (max-width: 700px) { .services--two { grid-template-columns: 1fr; } }
.sec--confidence .contact__alt { margin-top: var(--s-5); }
.sec--confidence .sec__lead { max-width: 60ch; }