/* akila-home.css: the homepage in the same quiet finish as about, balayage, nanoplasty and colour correction (2026-09-25).
   Styling only, on the live markup: the structure is the owner's baseline (ruling 101), the hero with its Persian rail
   and vignette is untouched (rulings 86, 100, 96), the before/after carousel keeps its markup and controls (97), the
   Nanoplastia card photo stays (87), the brand marquee stays (39). Everything is scoped to main.hq. */

@font-face { font-family: "Newsreader AB"; src: url("fonts/newsreader-var-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader AB"; src: url("fonts/newsreader-var-italic-latin.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader AB Fallback"; src: local("Georgia"); size-adjust: 100.5%; ascent-override: 73.13%; descent-override: 26.37%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader AB Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 91.5%; ascent-override: 80.33%; descent-override: 28.96%; line-gap-override: 0%; }

main.hq {
  --hq-serif: "Newsreader AB", "Newsreader AB Fallback", Georgia, serif;
  --hq-ink: #161310; --hq-text: #36302a; --hq-muted: #6b6258; --hq-line: #e5ddcd; --hq-line-strong: #d8ccb6; --hq-edge: #968a7c;
}

/* ---------- Section heads: small-caps label (no chapter number), light serif title, muted line ---------- */
main.hq > section:not(#hero) .section-head .eyebrow-tag {
  font-family: "General Sans", system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--hq-muted);
}
main.hq > section:not(#hero) .section-head .eyebrow-tag::before,
main.hq > section:not(#hero) .section-head .eyebrow-tag::after { content: none !important; display: none !important; }
main.hq > section:not(#hero) .section-title {
  font-family: var(--hq-serif); font-weight: 350; letter-spacing: -.015em; line-height: 1.04; color: var(--hq-ink);
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem); text-wrap: balance;
}
main.hq > section:not(#hero) .section-subtitle { color: var(--hq-muted); font-size: 1.0625rem; }

/* ---------- Services: editorial cards ---------- */
main.hq #services .service-card { background: none; border: 0; box-shadow: none; }
main.hq #services .card-img { border-radius: 2px; overflow: hidden; }
main.hq #services .card-img img { transition: transform 1.2s cubic-bezier(.22, .61, .36, 1); }
main.hq #services .service-card:hover .card-img img { transform: scale(1.03); }
main.hq #services .card-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .2em; color: var(--hq-muted); }
main.hq #services .service-card h3 { font-family: var(--hq-serif); font-weight: 350; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); letter-spacing: -.01em; line-height: 1.1; color: var(--hq-ink); }
main.hq #services .service-card p { color: var(--hq-text); }
main.hq #services .card-meta { border-top: 1px solid var(--hq-ink); border-bottom: 1px solid var(--hq-line); }
main.hq #services .card-price { font-family: var(--hq-serif); font-weight: 400; font-size: 1.375rem; color: var(--hq-ink); }
main.hq #services .card-time { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--hq-muted); }

/* ---------- Questions: serif questions on hairlines, a quiet ring for plus/minus ---------- */
main.hq #faq .faq-item { border-bottom: 1px solid var(--hq-line-strong); }
main.hq #faq .faq-list { border-top: 1px solid var(--hq-ink); }
main.hq #faq .faq-item summary { font-family: var(--hq-serif); font-weight: 400; font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem); line-height: 1.3; color: var(--hq-ink); }
main.hq #faq .faq-item summary::after {
  background: none; border: 1px solid var(--hq-edge); color: var(--hq-ink); box-shadow: none;
}
main.hq #faq .faq-item p { color: var(--hq-text); }

/* ---------- Contact: the yellow stays with Book; directions and call become quiet outline buttons ---------- */
main.hq #contact .contact-action-btn { background: transparent; color: var(--hq-ink); border: 1px solid var(--hq-ink); box-shadow: none; }
main.hq #contact .contact-action-btn:hover { background: var(--hq-ink); color: #fffefa; }
main.hq #contact .contact-info h3 { font-family: "General Sans", system-ui, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--hq-muted); }
main.hq #contact .contact-info p:not(.contact-hint) { font-family: var(--hq-serif); font-size: 1.25rem; line-height: 1.35; color: var(--hq-ink); }
main.hq #contact .contact-front, main.hq #contact .contact-front img, main.hq #contact .contact-map { border-radius: 2px; }

@media (prefers-reduced-motion: reduce) { main.hq #services .card-img img { transition: none; } main.hq #services .service-card:hover .card-img img { transform: none; } }

/* ---------- Before/after: the same fine handle and cream labels as the balayage page (controls unchanged, ruling 97) ---------- */
main.hq #before-after .ba-slider { border-radius: 2px; }
main.hq #before-after .ba-handle { width: 1px; background: rgba(255, 254, 250, .92); box-shadow: 0 0 0 .5px rgba(22, 19, 16, .18); }
main.hq #before-after .ba-handle::after { width: 44px; height: 44px; background: rgba(250, 246, 238, .94); border: 1px solid rgba(22, 19, 16, .12); box-shadow: 0 8px 24px -8px rgba(22, 19, 16, .45); }
main.hq #before-after .ba-handle::before { content: "\2039\2002\203A"; font-family: var(--hq-serif); font-size: 19px; line-height: 1; color: var(--hq-ink); white-space: nowrap; }
main.hq #before-after .ba-label, main.hq #before-after .ba-label-before, main.hq #before-after .ba-label-after {
  padding: .35rem .7rem; border-radius: 999px; background: rgba(250, 246, 238, .9); color: var(--hq-ink);
  font-size: .625rem; font-weight: 500; letter-spacing: .22em;
}
main.hq #before-after figcaption strong, main.hq #before-after figcaption b { font-family: var(--hq-serif); font-weight: 400; font-size: 1.1875rem; color: var(--hq-ink); }

/* ---------- Contact icons: a fine ring, no yellow fill ---------- */
main.hq #contact .contact-icon { background: transparent; border: 1px solid var(--hq-line-strong); color: var(--hq-muted); }

/* ---------- Reviews v4 (2026-09-25, owner: "redesign the section, more premium") ----------
   A centred heading with the Google rating beneath it, then the four reviews (ruling 54: four equal cards, each
   with a small category label, stars, the quote, and the name with its source) as paper cards: warm white on the stone
   band, a hairline edge, the quote large in italic serif with its opening mark hung, and a signature line of the
   reviewer's initial in a bronze ring, the name in small caps and "Google Review". Phones: a swipe rail of cards. */
main.hq #reviews { padding-block: clamp(5.5rem, 3.5rem + 6vw, 9.5rem); }
main.hq #reviews .ak-review-shell { display: block; }
main.hq #reviews .ak-review-intro { display: grid; justify-items: center; text-align: center; gap: 0; margin: 0 auto; max-width: 44rem; }
main.hq #reviews .ak-review-intro .section-head { text-align: center; }
main.hq #reviews .ak-review-intro .section-head .eyebrow-tag { justify-content: center; }
main.hq #reviews .ak-review-intro .section-title { font-size: clamp(2.75rem, 1.6rem + 3.4vw, 4.75rem); line-height: 1; }
main.hq #reviews .ak-review-intro .section-subtitle { margin: 1.1rem auto 0; }
main.hq #reviews .ak-review-score {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: .35rem .9rem;
  margin-top: 2rem; padding: .85rem 1.5rem; border: 1px solid var(--hq-line-strong); border-radius: 999px;
  background: #fffefa; text-decoration: none; justify-self: center;
}
main.hq #reviews .ak-review-score .ak-review-agg-stars { color: #7a5a3e; font-size: .8125rem; letter-spacing: .24em; text-decoration: none; }
main.hq #reviews .ak-review-score strong { border: 0; padding: 0; font-family: var(--hq-serif); font-weight: 400; font-size: 1.25rem; line-height: 1; color: var(--hq-ink); }
main.hq #reviews .ak-review-score span:not(.ak-review-agg-stars):not(.sr-only) { font-size: .875rem; color: var(--hq-muted); }
main.hq #reviews .ak-review-score:hover { border-color: var(--hq-ink); }

main.hq #reviews .ak-review-board { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
main.hq #reviews .ak-review-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: clamp(1rem, 2vw, 1.75rem); max-width: 72rem; margin: 0 auto; }
main.hq #reviews .ak-review-list li, main.hq #reviews .ak-review-list li:first-child {
  display: flex; flex-direction: column; gap: 0; height: auto; min-height: 0;
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); background: #fffefa; border: 1px solid var(--hq-line); border-radius: 4px;
}
main.hq #reviews .ak-review-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
main.hq #reviews .ak-review-tag { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--hq-muted); }
main.hq #reviews .ak-review-list .ak-review-stars { display: inline-block; color: #7a5a3e; font-size: .75rem; letter-spacing: .24em; }
main.hq #reviews .ak-review-list li .hq-quote, main.hq #reviews .ak-review-list li:first-child .hq-quote {
  flex: 1; margin: 1.5rem 0 0; text-indent: -.42em;
  font-family: var(--hq-serif); font-style: italic; font-weight: 330; font-size: clamp(1.25rem, 1.08rem + .5vw, 1.5625rem);
  line-height: 1.42; letter-spacing: -.005em; color: var(--hq-ink);
}
main.hq #reviews .ak-review-meta { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .9rem; align-items: center;
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--hq-line); font-size: inherit; color: var(--hq-ink); }
main.hq #reviews .hq-mono { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid #b9a07a; border-radius: 999px; font-family: var(--hq-serif); font-size: 1.125rem; font-style: italic; color: #7a5a3e; }
main.hq #reviews .hq-name { font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
main.hq #reviews .ak-review-meta .hq-src { display: block; margin: .15rem 0 0; font-size: .8125rem; letter-spacing: .02em; text-transform: none; color: var(--hq-muted); }

@media (max-width: 767px) {
  main.hq #reviews .ak-review-list { display: flex; gap: .875rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-5, 20px);
    margin-inline: calc(-1 * var(--space-5, 20px)); padding: 0 var(--space-5, 20px) .5rem; scrollbar-width: none; }
  main.hq #reviews .ak-review-list::-webkit-scrollbar { display: none; }
  main.hq #reviews .ak-review-list li, main.hq #reviews .ak-review-list li:first-child { flex: 0 0 86%; scroll-snap-align: start; }
  main.hq #reviews .ak-review-score { border-radius: 16px; }
}
main.hq #reviews .ak-review-intro { grid-template-columns: minmax(0, 1fr); } main.hq #reviews .ak-review-intro .section-head { justify-self: center; margin-inline: auto; } main.hq #reviews .ak-review-intro .section-subtitle { max-width: 34rem; }

/* Reviews v4 compact (owner: "a massive section for 4 reviews"): desktop = heading left, rating right on one line, then
   the four cards in one row with tighter padding and a smaller quote. */
@media (min-width: 960px) {
  main.hq #reviews { padding-block: clamp(4rem, 2.5rem + 3vw, 6rem); }
  main.hq #reviews .ak-review-intro { grid-template-columns: minmax(0, 1fr) auto; align-items: end; justify-items: stretch; text-align: left; max-width: none; column-gap: 2rem; }
  main.hq #reviews .ak-review-intro .section-head { justify-self: start; margin-inline: 0; text-align: left; }
  main.hq #reviews .ak-review-intro .section-head .eyebrow-tag { justify-content: flex-start; }
  main.hq #reviews .ak-review-intro .section-title { font-size: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); }
  main.hq #reviews .ak-review-intro .section-subtitle { margin: .75rem 0 0; }
  main.hq #reviews .ak-review-score { justify-self: end; margin-top: 0; }
  main.hq #reviews .ak-review-board { margin-top: 2.5rem; }
  main.hq #reviews .ak-review-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; max-width: none; }
  main.hq #reviews .ak-review-list li, main.hq #reviews .ak-review-list li:first-child { padding: 1.5rem 1.5rem 1.35rem; }
  main.hq #reviews .ak-review-list li .hq-quote, main.hq #reviews .ak-review-list li:first-child .hq-quote { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.5; }
  main.hq #reviews .ak-review-meta { margin-top: 1.25rem; padding-top: 1rem; column-gap: .7rem; }
  main.hq #reviews .hq-mono { width: 2.125rem; height: 2.125rem; font-size: 1rem; }
  main.hq #reviews .hq-name { font-size: .6875rem; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  main.hq #reviews .ak-review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
main.hq #reviews .ak-review-list:focus-visible { outline: 2px solid var(--hq-ink); outline-offset: 4px; border-radius: 4px; }

/* ---------- Start here as a salon menu (2026-09-25 services pass) ----------
   Styling only on the live markup (ruling 101). The head closes on one hairline like a printed menu; each card reads
   label, title, note, then the price line pinned to one baseline across the row; the Colour card leads on tablet (43% of revenue).
   Whole-card click stays (ruling 37); hover never turns black (48). */
main.hq #services .section-head { padding-bottom: 28px; margin-bottom: 48px; border-bottom: 1px solid var(--hq-line); }
@media (min-width: 1200px) {
  main.hq #services .section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); column-gap: 48px; align-items: end; max-width: none; }
  main.hq #services .section-head .eyebrow-tag { grid-column: 1 / -1; }
  main.hq #services .section-head .section-title { margin: 0; }
  main.hq #services .section-head .section-subtitle { margin: 0 0 .7em; padding-left: 20px; border-left: 1px solid var(--hq-line); font-size: 1rem; line-height: 1.55; }
}
main.hq #services .services-grid { column-gap: clamp(24px, 3vw, 44px); row-gap: 56px; }
main.hq #services .service-card { display: flex; flex-direction: column; padding-top: 0; border-top: 0; }
main.hq #services .card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 0 0; }
main.hq #services .card-eyebrow { order: 0; margin: 0 0 10px; }
main.hq #services .card-body h3 { order: 1; margin: 0; }
main.hq #services .card-body > p { order: 3; flex: none; margin: 14px 0 24px; font-size: 15px; line-height: 1.6; max-width: 36ch; }
main.hq #services .card-meta { order: 4; margin-top: auto; padding: 14px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
main.hq #services .service-actions { order: 5; margin-top: 14px; }
@media (min-width: 601px) {
  main.hq #services .service-link:not(.service-link-secondary) { border-bottom: 1px solid var(--hq-ink); font-size: 14px; font-weight: 500; letter-spacing: .01em; }
  main.hq #services .service-link-secondary { font-size: 14px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  main.hq #services .service-card-lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 44px); }
  main.hq #services .service-card-lead .card-body { padding-top: 0; justify-content: center; }
  main.hq #services .service-card-lead .card-meta { margin-top: 0; }
  main.hq #services .service-card-lead .card-body h3 { font-size: 2.5rem; }
}
@media (max-width: 600px) {
  main.hq #services .section-head { padding-bottom: 20px; margin-bottom: 32px; }
  main.hq #services .services-grid { row-gap: 64px; }
}


/* ---- 2026-09-25b homepage fixes (operator-system/akila-growth/home-rank-2026-09-25.md) ---- */
/* Header is opaque once scrolled: at .98 alpha body text showed through behind the logo (no blur allowed). */
#nav.scrolled { background: #fbf9f6; }
/* Desktop: header Book pill stays a quiet outline while a filled Book button is in view (ruling 9). */
@media (min-width: 901px) {
  html #nav.hq-cta-quiet .nav-cta { background: transparent; color: var(--dark); border: 1.5px solid var(--grey-border); }
  html #nav.hq-cta-quiet .nav-cta::before { content: none; }
}

/* ---------- Start here, pass 2 (2026-09-25, owner: "more premium looking and feeling") ----------
   Concept: Akila's printed salon menu. The section sits on a warm stone card; the head is centred like a menu title
   with a fine rule; each service is a numbered course (serif numerals I, II, III) divided by hairlines; price and time
   are joined by a dotted leader like a menu line. Copy, photos, links and tracking unchanged (blind-tested copy, 8a51d8a). */
main.hq #services { background: #f3ece0; counter-reset: hq-course; }
main.hq #services .service-card { counter-increment: hq-course; }
main.hq #services .section-head {
  display: block; text-align: center; max-width: 44rem; margin: 0 auto 64px; padding-bottom: 0; border-bottom: 0;
}
main.hq #services .section-head .eyebrow-tag { justify-content: center; }
main.hq #services .section-head .section-title { margin: 14px 0 0; }
main.hq #services .section-head .section-subtitle {
  margin: 22px auto 0; padding: 0; border: 0; max-width: 30rem; font-family: "Newsreader", Georgia, serif; font-style: italic;
  font-size: 1.1875rem; line-height: 1.5; color: #5c5046;
}
main.hq #services .section-head::after {
  content: ""; display: block; width: 72px; height: 9px; margin: 30px auto 0;
  background: linear-gradient(#b38a5e, #b38a5e) center / 100% 1px no-repeat,
              linear-gradient(45deg, transparent 45%, #b38a5e 46% 54%, transparent 55%) center / 9px 9px no-repeat;
}
main.hq #services .card-img { border-radius: 2px; box-shadow: 0 24px 44px -30px rgba(70, 45, 20, .45); }
main.hq #services .card-eyebrow::before {
  content: counter(hq-course, upper-roman) "."; display: block; margin-bottom: 12px;
  font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.375rem; letter-spacing: 0; text-transform: none; color: #8a5a36;
}
main.hq #services .card-eyebrow { color: #7b6a58; }
main.hq #services .card-meta { border-top: 1px solid #2a211a; border-bottom: 1px solid rgba(42, 33, 26, .18); }
main.hq #services .card-price { white-space: nowrap; }
main.hq #services .card-meta::before { content: ""; order: 1; flex: 1; align-self: flex-end; margin: 0 4px 6px; border-bottom: 1px dotted rgba(90, 70, 50, .45); }
main.hq #services .card-time { order: 2; white-space: nowrap; }
@media (min-width: 901px) {
  main.hq #services .services-grid { column-gap: 0; }
  main.hq #services .service-card { padding: 0 clamp(20px, 2.4vw, 40px); }
  main.hq #services .service-card + .service-card { border-left: 1px solid rgba(90, 70, 50, .22); }
  main.hq #services .service-card:first-child { padding-left: 0; }
  main.hq #services .service-card:last-child { padding-right: 0; }
}
main.hq #services .services-cta { margin-top: 72px; }
/* pass 2 fixes: equal photo widths (dividers sit in the gap, not in card padding); no leader; a plain fine rule. */
main.hq #services .card-meta::before { content: none; }
main.hq #services .section-head::after { width: 56px; height: 1px; background: #b38a5e; }
@media (min-width: 901px) {
  main.hq #services .services-grid { column-gap: clamp(40px, 5vw, 84px); }
  main.hq #services .service-card, main.hq #services .service-card:first-child, main.hq #services .service-card:last-child { padding: 0; position: relative; }
  main.hq #services .service-card + .service-card { border-left: 0; }
  main.hq #services .service-card + .service-card::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(clamp(40px, 5vw, 84px) / -2); width: 1px; background: rgba(90, 70, 50, .22);
  }
}

/* contrast on the stone ground (axe): labels and numerals darker */
main.hq #services .card-eyebrow { color: #5f5144; }
main.hq #services .card-eyebrow::before { color: #7a4a2a; }
main.hq #services .service-link-secondary { color: #5f5144; }

/* ---------- One voice top to bottom (2026-09-25, owner: "same feeling and quality from start to bottom") ----------
   The Start-here menu set the language; every section now speaks it: small-caps label, serif title, italic serif
   subtitle, one fine bronze rule. Grounds alternate paper / stone so no two stone bands touch (was services + reviews).
   The hero's second action becomes the quiet underlined link used everywhere else, so yellow stays the one Book. */
main.hq > section:not(#hero) .section-subtitle {
  font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.1875rem; line-height: 1.5; color: #5c5046;
}
main.hq > section:not(#hero) .section-head .eyebrow-tag { color: #6b5a4a; }
main.hq #before-after .section-head::after,
main.hq #reviews .section-head::after,
main.hq #faq .section-head::after { content: ""; display: block; width: 56px; height: 1px; background: #b38a5e; margin-top: 26px; }
main.hq #before-after { background: #f3ece0; }
main.hq #services { background: #fffefa; }
main.hq #services .card-img { box-shadow: 0 24px 44px -30px rgba(70, 45, 20, .35); }
@media (min-width: 601px) {
  main.hq #hero .btn-ghost {
    background: transparent; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; box-shadow: none;
    min-height: 0; padding: 4px 0; font-weight: 500; color: var(--hq-ink);
  }
  main.hq #hero .hero-btns { align-items: center; gap: 32px; }
}
/* Hero words in the same voice as the sections below: serif lead and credit (layout, photo and buttons unchanged). */
@media (min-width: 601px) {
  main.hq #hero .hero-content > p:not(.hero-trust) { font-family: "Newsreader", Georgia, serif; font-size: 1.3125rem; line-height: 1.45; color: #4d4035; }
  main.hq #hero .hero-trust strong { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: 1.1875rem; color: #1e1712; }
}

main.hq #faq .hq-faq-call { color: #1e1712; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; padding-block: 12px; }

/* ---------- One type scale, every page (2026-09-25, owner: "the typography feels different page to page") ----------
   Same sizes as the inner pages: H1 40 -> 72px weight 330, section H2 32 -> 48px weight 350, labels 12px. */
main.hq #hero h1 {
  font-family: "Newsreader AB", "Newsreader AB Fallback", Georgia, serif; font-size: clamp(2.5rem, 1.35rem + 4.3vw, 4.5rem);
  font-weight: 330; line-height: 1.04; letter-spacing: -.022em;
}
main.hq #hero h1 .serif { font-weight: 330; }
main.hq > section:not(#hero) .section-title,
main.hq #reviews .ak-review-intro .section-title { font-size: clamp(2rem, 1.45rem + 1.9vw, 3rem); font-weight: 350; line-height: 1.1; letter-spacing: -.012em; }

/* ---------- Hero, premium pass (2026-09-26) ----------
   Same photo, same words, same order. Taken away: the photo's drop shadow and 4:5 crop, the yellow glow,
   the bold credit. The photo shows whole at its own ratio, its right edge on the header's Book button,
   with the words centred beside it. */
main.hq #hero {
  /* Warm light pooling from the lower left, where the Persian wall and vignette sit; paper everywhere else. */
  background:
    radial-gradient(90% 85% at 0% 100%, rgba(232, 216, 192, .55) 0%, rgba(232, 216, 192, 0) 62%),
    radial-gradient(60% 60% at 100% 0%, rgba(255, 253, 248, .7) 0%, rgba(255, 253, 248, 0) 70%),
    #faf6ee;
}
/* The vignette's shelf ended in a hard vertical cut at its right edge; fade that edge into the page. */
.hero-persian-vignette {
  -webkit-mask-image: linear-gradient(90deg, #000 76%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 76%, transparent 100%);
}
main.hq #hero .hero-content > p.hero-eyebrow {
  font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: #7a5a3e; margin: 0 0 22px; max-width: none;
}
main.hq #hero .hero-eyebrow span { margin: 0 .5em; }
main.hq #hero .hero-photo { box-shadow: none; border-radius: 8px; }
/* Without the shadow the white mirror frame melted into the page at the photo's lower right; a hairline keeps the edge. */
main.hq #hero .hero-photo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(30, 23, 18, .12); z-index: 1;
}
main.hq #hero .hero-content > p:not(.hero-trust):not(.hero-eyebrow) {
  font-family: "Newsreader", Georgia, serif; color: #4d4035; max-width: 30ch; margin-bottom: 32px;
}
main.hq #hero .hero-trust { display: block; margin-bottom: 36px; }
main.hq #hero .hero-trust strong {
  display: block; font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 1.1875rem;
  line-height: 1.35; color: #1e1712; margin-bottom: 6px;
}
main.hq #hero .hero-rating {
  font-family: var(--font-ui); font-size: 14.5px; letter-spacing: .01em; color: #4d4035;
  text-decoration: none;
}
main.hq #hero .hero-rating span { letter-spacing: 2px; color: #7a5a3e; font-size: 12px; margin-right: 6px; }
main.hq #hero .hero-rating:hover, main.hq #hero .hero-rating:focus-visible {
  color: #1e1712; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
main.hq #hero .hero-btns .btn-teal {
  min-height: 54px; padding: 0 30px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; box-shadow: none;
}
main.hq #hero .hero-btns .btn-teal svg { width: 13px; height: 13px; stroke-width: 2; }
main.hq #hero .hero-facts {
  margin-top: 40px; padding-top: 16px; border-top-color: #e5ddcd; max-width: 400px;
  font-size: 13.5px; letter-spacing: .01em; color: #6b6258;
}
main.hq #hero .hero-facts span + span { border-left-color: #e5ddcd; }
main.hq #hero .hero-facts [lang="fa"] { font-size: 15px; font-weight: 500; color: #4d4035; }

@media (min-width: 901px) {
  main.hq #hero .hero-grid {
    max-width: none; margin: 0;
    padding-left: max(24px, calc((100% - 1140px) / 2 + 24px));
    padding-right: clamp(20px, 3.2vw, 64px);
    grid-template-columns: minmax(0, 1fr) auto; gap: clamp(56px, 6vw, 96px); align-items: center;
  }
  main.hq #hero .hero-visual {
    width: auto; min-width: 0; justify-self: end;
    height: clamp(460px, calc(100dvh - 240px), 720px); aspect-ratio: 1200 / 1595;
  }
  main.hq #hero .hero-photo img { object-position: 50% 50%; }
}
/* Photo's right edge = the header's right edge at every desktop width (same gutters as akila-nav.css). */
@media (min-width: 1100px) { main.hq #hero .hero-grid { padding-right: clamp(20px, 5vw, 64px); } }
@media (min-width: 1241px) and (max-width: 1600px) { main.hq #hero .hero-grid { padding-right: 80px; } }
@media (min-width: 1601px) {
  main.hq #hero .hero-grid { padding-right: max(calc((100% - 1240px) / 2), calc(0.208 * (100dvh - 56px) + 24px)); }
}
@media (min-width: 1601px) and (max-width: 1799px) {
  main.hq #hero .hero-content { left: 0; }
  main.hq #hero .hero-grid { padding-left: calc((100% - 1140px) / 2 + 78px); }
}
@media (min-width: 601px) and (max-width: 900px) {
  main.hq #hero .hero-visual { aspect-ratio: 1200 / 1595; width: min(100%, 420px); }
}
@media (max-width: 600px) {
  main.hq #hero .hero-content > p:not(.hero-trust):not(.hero-eyebrow) { font-size: 1.0625rem; line-height: 1.45; margin: 0 0 12px; }
  main.hq #hero .hero-trust { margin-bottom: 18px; }
  main.hq #hero .hero-trust strong { font-size: 1.0625rem; margin-bottom: 2px; }
  main.hq #hero .hero-rating { font-size: 13.5px; }
  main.hq #hero .hero-facts { margin-top: 24px; max-width: none; }
}
@media (max-width: 600px) {
  main.hq #hero .hero-content > p.hero-eyebrow { display: none; } /* keeps Book on the first phone screen */
}
/* Secondary link in the same tracked caps as the button (the pricing page's "BOOK ESSENTIALS" treatment). */
@media (min-width: 601px) {
  main.hq #hero .hero-btns .btn-ghost { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 6px 0; }
}