/* akila-service.css: the service-page system (hero v6, cream ground, centred desktop, ruling-79 proof piece).
   One copy, linked by nanoplasty and balayage; colour-correction still carries its own cc-* selectors.
   Per-page knobs on the hero section's style attribute: --hero-ratio (desktop plate), --hero-mobile-ratio, --plate-max, --hero-mobile-position.
   Written 2026-09-06 from the inline copies; the inline copies were deleted the same commit. */
    /* hero v6: full-bleed */
    /* Same system as colour-correction (owner accepted it there today): the photo fills the phone fold with the copy over its lower
       half, Book and Call inside the fold; on desktop the photo stands at its own ratio on the left and the copy sits in ink. */
    #main #hero.hero-v6 { position: relative; isolation: isolate; overflow: hidden; background: #1a1411; min-height: calc(100svh - var(--nav-h)); padding: 0; margin-top: var(--nav-h); }
    #main #hero.hero-v6 > .container { position: static; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: none; margin: 0; min-height: calc(100svh - var(--nav-h)); padding: clamp(120px, 26svh, 220px) clamp(var(--space-7), 4vw, var(--space-12)) clamp(20px, 3svh, 32px); }
    #main #hero.hero-v6 .hero-grid { display: contents; }
    #main #hero.hero-v6 .hero-head, #main #hero.hero-v6 .hero-copy { position: relative; z-index: 2; max-width: 620px; grid-column: auto; grid-row: auto; align-self: flex-start; }
    #main #hero.hero-v6 .hero-head h1 { color: var(--paper); margin: 0 0 var(--space-3); text-shadow: 0 1px 3px rgba(22,16,12,.5); }
    #main #hero.hero-v6 .hero-copy .lead { color: color-mix(in srgb, var(--paper) 92%, transparent); max-width: 46ch; margin-bottom: var(--space-3); line-height: 1.42; text-shadow: 0 1px 2px rgba(22,16,12,.55); }
    #main #hero.hero-v6 .hero-trust { color: color-mix(in srgb, var(--paper) 82%, transparent); margin-bottom: var(--space-4); text-shadow: 0 1px 2px rgba(22,16,12,.55); }
    #main #hero.hero-v6 .hero-trust strong { color: var(--paper); }
    #main #hero.hero-v6 .hero-rating { color: color-mix(in srgb, var(--paper) 82%, transparent); text-decoration-color: color-mix(in srgb, var(--paper) 40%, transparent); }
    #main #hero.hero-v6 .hero-ctas { margin-bottom: 0; gap: var(--space-2); }
    #main #hero.hero-v6 .hero-ctas .btn-ghost { border-color: color-mix(in srgb, var(--paper) 72%, transparent); color: var(--paper); background: transparent; }
    #main #hero.hero-v6 .hero-visual { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; margin: 0; grid-column: auto; grid-row: auto; animation: none; }
    #main #hero.hero-v6 .hero-photo { max-width: none; width: 100%; height: 100%; margin: 0; }
    #main #hero.hero-v6 .hero-media-frame, #main #hero.hero-v6 .hero-media-frame picture { display: block; width: 100%; height: 100%; }
    #main #hero.hero-v6 .hero-photo img { width: 100%; height: 100%; aspect-ratio: var(--hero-mobile-ratio, auto); object-fit: cover; object-position: var(--hero-mobile-position, 42% 50%); border-radius: 0; box-shadow: none; }
    #main #hero.hero-v6 .hero-media-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(22,16,12,.26) 0%, rgba(22,16,12,0) 16%, rgba(22,16,12,0) 34%, rgba(22,16,12,.34) 52%, rgba(22,16,12,.56) 72%, rgba(22,16,12,.64) 100%); }
    #main #hero.hero-v6 .hero-caption { display: none; }
    @media (max-width: 760px) {
      #main #hero.hero-v6 .hero-ctas .btn { width: 100%; }
      #main #hero.hero-v6 .hero-ctas .btn-ghost { width: auto; min-height: 44px; margin: 0 auto; padding: 0 var(--space-3); border: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; font-size: 15px; text-shadow: 0 1px 2px rgba(22,16,12,.55); }
    }
    @media (min-width: 761px) {
      #main #hero.hero-v6 > .container { justify-content: center; padding-top: clamp(48px, 6svh, 80px); padding-bottom: clamp(48px, 6svh, 80px); }
      #main #hero.hero-v6 .hero-visual { inset: auto; left: clamp(var(--space-7), 4vw, var(--space-12)); top: 50%; transform: translateY(-50%); height: min(calc(100svh - var(--nav-h) - 96px), 48vw); width: auto; aspect-ratio: var(--hero-ratio); }
      #main #hero.hero-v6 .hero-photo img { object-position: 50% 50%; border-radius: var(--radius-lg); }
      #main #hero.hero-v6 .hero-media-frame::after { background: none; }
      #main #hero.hero-v6 .hero-head, #main #hero.hero-v6 .hero-copy { margin-left: calc(min(calc(100svh - var(--nav-h) - 96px), 48vw) * var(--hero-ratio) + clamp(32px, 4vw, 64px)); max-width: min(600px, calc(100vw - min(calc(100svh - var(--nav-h) - 96px), 48vw) * var(--hero-ratio) - clamp(32px, 4vw, 64px) - 2 * clamp(var(--space-7), 4vw, var(--space-12)))); }
      #main #hero.hero-v6 .hero-head h1, #main #hero.hero-v6 .hero-copy .lead, #main #hero.hero-v6 .hero-trust { text-shadow: none; }
      #main #hero.hero-v6 .hero-caption { display: block; position: absolute; left: clamp(var(--space-7), 4vw, var(--space-12)); bottom: clamp(16px, 2svh, 28px); z-index: 2; margin: 0; color: color-mix(in srgb, var(--paper) 62%, transparent); font-size: 12px; letter-spacing: 0.4px; }
      @media (max-width: 1240px) { #main #hero.hero-v6 .hero-head h1 { text-wrap: pretty; } }
    }
    /* strip labels on the ramp; close on ink like colour-correction */
    .stat .stat-label { font-size: 12px; }
    #book-band { background: var(--dark); border-top: 0; }
    #book-band h2, #book-band .band-sub { color: var(--paper); }
    #book-band .band-sub { color: color-mix(in srgb, var(--paper) 74%, transparent); }
    .proof-grid .ak-review-board { border-top: 0; }
    /* ruling 79 proof piece: pinned plate left, side column right, wipe ends on the after state. Desktop only; phones keep the stacked pair */
    .proof-stage .proof-side-note { margin: 0; font-family: var(--font-ui); font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 34ch; }
    .proof-stage .proof-side .proof-book-row { margin: var(--space-2) 0 0; }
    @media (max-width: 720px) { .proof-state, .proof-ticks { display: none; } .proof-side { margin-top: var(--space-5); } .proof-side-note { max-width: none; } }
    @media (min-width: 721px) {
      .proof-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; min-height: calc(100svh - var(--nav-h) - 48px + 70vh); }
      .proof-stage .proof-pair { --reveal: 92%; position: sticky; top: calc(var(--nav-h) + 24px); display: grid; grid-template-columns: minmax(0, 1fr); height: calc(100svh - var(--nav-h) - 48px); width: auto; max-width: none; aspect-ratio: 4 / 5; margin: 0; gap: 0; overflow: hidden; border-radius: var(--radius-xl); }
      .proof-stage .proof-frame { grid-area: 1 / 1; width: 100%; height: 100%; border-radius: 0; }
      .proof-stage .proof-frame picture, .proof-stage .proof-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
      .proof-stage .proof-frame:nth-child(2) { clip-path: inset(0 0 0 var(--reveal)); }
      .proof-stage .proof-frame:nth-child(2) .proof-label { left: auto; right: 12px; }
      .proof-stage .proof-pair::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--reveal); width: 2px; margin-left: -1px; background: var(--paper); box-shadow: 0 0 0 1px rgba(22,16,12,0.22); pointer-events: none; z-index: 2; }
      .proof-stage .proof-side { position: sticky; top: calc(var(--nav-h) + 24px + 18vh); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 34ch; }
      .proof-stage .proof-state { margin: 0; font-family: var(--font-display); font-size: clamp(34px, 3.4vw, 46px); font-weight: 520; line-height: 1; color: var(--dark); }
      .proof-stage .proof-ticks { display: flex; gap: 6px; }
      .proof-stage .proof-ticks span { width: 28px; height: 3px; border-radius: var(--radius-full); background: var(--grey-border); transition: background 240ms ease; }
      .proof-stage .proof-ticks span.is-on { background: var(--dark); }
      .proof-stage .proof-visual { margin: 0; }
    }
    @media (prefers-reduced-motion: reduce) and (min-width: 721px) {
      .proof-stage { min-height: 0; }
      .proof-stage .proof-pair { --reveal: 50% !important; position: static; }
      .proof-stage .proof-side { position: static; }
    }

    /* cream ground (owner 2026-09-05: not a fan of the black background) */
    @media (min-width: 761px) {
      #main #hero.hero-v6 { background: var(--paper); }
      #main #hero.hero-v6 .hero-head h1 { color: var(--dark); }
      #main #hero.hero-v6 .hero-copy .lead { color: var(--text); }
      #main #hero.hero-v6 .hero-trust { color: var(--muted); }
      #main #hero.hero-v6 .hero-trust strong { color: var(--dark); }
      #main #hero.hero-v6 .hero-rating { color: var(--muted); text-decoration-color: var(--hairline-warm); }
      #main #hero.hero-v6 .hero-ctas .btn-ghost { border-color: var(--dark); color: var(--dark); }
      #main #hero.hero-v6 .hero-caption { color: var(--muted); }
      #main #hero.hero-v6 .hero-photo img { box-shadow: var(--shadow-photo); }
    }
    @media (max-width: 760px) {
      #main #hero.hero-v6.hero-square { background: var(--paper); }
      #main #hero.hero-v6.hero-square .hero-head h1 { color: var(--dark); text-shadow: none; }
      #main #hero.hero-v6.hero-square .hero-copy .lead { color: var(--text); text-shadow: none; }
      #main #hero.hero-v6.hero-square .hero-trust { color: var(--muted); text-shadow: none; }
      #main #hero.hero-v6.hero-square .hero-trust strong { color: var(--dark); }
      #main #hero.hero-v6.hero-square .hero-rating { color: var(--muted); text-decoration-color: var(--hairline-warm); }
      #main #hero.hero-v6.hero-square .hero-ctas .btn-ghost { color: var(--dark); text-shadow: none; }
    }
    #book-band { background: var(--grey-light); }
    #book-band h2 { color: var(--dark); }
    #book-band .band-sub { color: var(--dark); }
/* cross-document view transitions (progressive: Chrome/Safari; Firefox falls back to a normal load) */
@view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
    /* centred desktop (owner 2026-09-06) */
    @media (min-width: 761px) {
      #main #hero.hero-v6 > .container { position: relative; width: min(100% - 96px, 1120px); max-width: 1120px; margin-inline: auto; padding-inline: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: clamp(32px, 4vw, 64px); row-gap: 0; align-items: center; align-content: center; justify-content: start; }
      #main #hero.hero-v6 .hero-visual { position: relative; inset: auto; left: auto; top: auto; transform: none; grid-column: 1; grid-row: 1 / 3; height: min(calc(100svh - var(--nav-h) - 96px), 48vw, var(--plate-max, 600px)); width: auto; aspect-ratio: var(--hero-ratio); }
      #main #hero.hero-v6 .hero-head { grid-column: 2; grid-row: 1; align-self: end; margin-left: 0; max-width: 600px; }
      #main #hero.hero-v6 .hero-copy { grid-column: 2; grid-row: 2; align-self: start; margin-left: 0; max-width: 600px; }
      #main #hero.hero-v6 .hero-photo { position: relative; }
      #main #hero.hero-v6 .hero-caption { left: 12px; bottom: 12px; }
      .proof-stage .proof-pair { height: min(calc(100svh - var(--nav-h) - 48px), 780px); }
      .proof-stage { min-height: calc(min(calc(100svh - var(--nav-h) - 48px), 780px) + 70vh); }
    }

    /* balayage: the square master is shown square above the copy on phones */
    @media (max-width: 760px) {
      #main #hero.hero-v6.hero-square { min-height: 0; }
      #main #hero.hero-v6.hero-square > .container { justify-content: flex-start; min-height: 0; padding-top: 0; }
      #main #hero.hero-v6.hero-square .hero-visual { position: relative; order: -1; width: auto; height: auto; margin: 0 calc(-1 * clamp(var(--space-7), 4vw, var(--space-12))) var(--space-5); }
      #main #hero.hero-v6.hero-square .hero-photo img { height: auto; }
    }
    @media (max-width: 760px) {
      #main #hero.hero-v6.hero-square { background: var(--paper); }
      #main #hero.hero-v6.hero-square .hero-head h1 { color: var(--dark); text-shadow: none; }
      #main #hero.hero-v6.hero-square .hero-copy .lead { color: var(--text); text-shadow: none; }
      #main #hero.hero-v6.hero-square .hero-trust { color: var(--muted); text-shadow: none; }
      #main #hero.hero-v6.hero-square .hero-trust strong { color: var(--dark); }
      #main #hero.hero-v6.hero-square .hero-rating { color: var(--muted); text-decoration-color: var(--hairline-warm); }
      #main #hero.hero-v6.hero-square .hero-ctas .btn-ghost { color: var(--dark); text-shadow: none; }
    }


/* the strip under any hero-v6 sits on ink (balayage, about; nanoplasty's own rules already do this) */
#main #hero.hero-v6 ~ .stat-strip { background: var(--dark); padding: var(--space-10) 0; }
#main #hero.hero-v6 ~ .stat-strip .stat-grid { border-top: 0; border-bottom: 0; }
#main #hero.hero-v6 ~ .stat-strip .stat { padding: 0 0 0 clamp(16px, 3vw, 44px); border-left: 1px solid rgba(255,255,255,0.16); }
#main #hero.hero-v6 ~ .stat-strip .stat:first-child { padding-left: 0; border-left: 0; }
#main #hero.hero-v6 ~ .stat-strip .stat .stat-big { color: var(--white); }
#main #hero.hero-v6 ~ .stat-strip .stat .stat-label { font-size: 12px; color: rgba(250,246,238,0.62); }
@media (max-width: 720px) {
  #main #hero.hero-v6 ~ .stat-strip { padding: var(--space-6) 0; }
  #main #hero.hero-v6 ~ .stat-strip .stat-grid { gap: 12px; }
  #main #hero.hero-v6 ~ .stat-strip .stat { padding-left: 12px; }
  #main #hero.hero-v6 ~ .stat-strip .stat .stat-big { font-size: 21px; line-height: 1.05; }
  #main #hero.hero-v6 ~ .stat-strip .stat .stat-label { font-size: 10.5px; letter-spacing: 0.8px; line-height: 1.35; }
}
/* four cards across (ruling 54): nanoplasty had four cards in three columns, balayage carried this rule inline */
@media (min-width: 721px) { .ak-review-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }