/*
 * Shine & Style Studio — inner pages (About, Contact, service pages).
 * Loaded after assets/final/style.css. These pages are deliberately quiet:
 * no GSAP, no preloader, one short fade-up on scroll and nothing else.
 */

/* ---------- Page hero ---------- */
.page-hero { padding: calc(var(--header-h) + clamp(40px, 7vw, 96px)) 0 clamp(40px, 6vw, 72px); background: linear-gradient(180deg, var(--blush), var(--white)); }
.page-hero__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .page-hero__grid { grid-template-columns: 1.1fr 0.9fr; } }
.page-hero__copy { display: grid; gap: 18px; justify-items: start; }
.page-hero h1 { font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.02; color: var(--purple); }
.page-hero h1 em { color: var(--plum); }
.page-hero__media { position: relative; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 4 / 3; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crumbs { font-size: 0.82rem; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }

/* ---------- Tiles: one pattern for every service list ---------- */
.tiles { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 0; padding: 0; list-style: none; }
.tile .core { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.tile__img { aspect-ratio: 4 / 3; overflow: hidden; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile__body { display: grid; gap: 10px; align-content: start; padding: 22px; }
.tile__no { font-family: var(--serif); font-size: 0.95rem; color: var(--gold-ink); }
.tile__body h3 { font-family: var(--serif); font-size: 1.35rem; color: var(--purple); font-weight: 400; }
.tile__body p { color: var(--ink-soft); font-size: 0.96rem; }

/* ---------- Doorstep band: the same callout on every page ---------- */
.band { background: var(--purple); color: var(--white); }
.band__grid { display: grid; gap: 24px; align-items: center; padding-block: clamp(36px, 5vw, 64px); }
@media (min-width: 900px) { .band__grid { grid-template-columns: 1.2fr 0.8fr; } }
.band .eyebrow--mark { background: var(--gold); color: var(--purple); }
.band .eyebrow--mark::before { background: var(--purple); }
.band h2 { font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 400; color: var(--white); }
.band h2 em { color: var(--gold); }
.band p { color: rgba(255, 255, 255, 0.82); max-width: 56ch; margin-top: 10px; }
.band .doorstep-points li { color: rgba(255, 255, 255, 0.86); }
.band .doorstep-points { margin-top: 18px; }
.band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* The ghost button is dark-on-light by default, so it needs inverting on the purple band. */
.band .btn--glass { color: var(--white); border-color: rgba(255, 255, 255, 0.45); }
.band .btn--glass .btn__icon { background: rgba(255, 255, 255, 0.18); color: var(--white); }
.band .btn--glass:hover { border-color: var(--gold); }

/* ---------- Simple blocks ---------- */
.prose { display: grid; gap: 16px; max-width: 70ch; color: var(--ink-soft); }
.prose h2 { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--purple); font-weight: 400; }
.prose strong { color: var(--ink); }
.split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.figure-card { border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-soft); }
.figure-card img { width: 100%; height: 100%; display: block; object-fit: cover; }
.page-cta { display: grid; gap: 18px; justify-items: center; text-align: center; padding-bottom: clamp(56px, 8vw, 110px); }
.contact-grid { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 0.9fr 1.1fr; } }
/* The details sit in a narrow column here, so one card per row reads better than the 3-up grid. */
.contact-grid .contact__list { grid-template-columns: 1fr; }
@media (min-width: 600px) and (max-width: 899px) { .contact-grid .contact__list { grid-template-columns: 1fr 1fr; } }
.contact-grid .map-embed:not([hidden]) { margin-top: 12px; }

/* ---------- The only motion on these pages ---------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(16px); }
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}