/* Merianou Salon. One stylesheet, one block per component.
   Desktop rules come first in each block; tablet (≤1000px) and phone (≤700px) follow at the end. */

/* CF Angeliki and CF Ifigeneia Alt (fonts.gr), trial versions. local() uses the copy installed on this Mac;
   the site never serves the files, because the trial licence forbids web use. Without them, Literata shows.
   Before launch: buy web licences, add the .woff2 files here as url() sources, and drop "Test" from the names. */
@font-face { font-family: "Angeliki"; src: local("CF Angeliki Test Light"); font-weight: 300; font-style: normal; }
@font-face { font-family: "Angeliki"; src: local("CF Angeliki Test Regular"), local("CF Angeliki Test"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Angeliki"; src: local("CF Angeliki Test Medium"); font-weight: 500 600; font-style: normal; }
@font-face { font-family: "Angeliki"; src: local("CF Angeliki Test Regular Italic"); font-weight: 300 500; font-style: italic; }
@font-face { font-family: "Ifigeneia"; src: local("CF Ifigeneia Alt Test Regular"), local("CF Ifigeneia Alt Test"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Ifigeneia"; src: local("CF Ifigeneia Alt Test Italic"); font-weight: 300 500; font-style: italic; }

:root {
  /* Colour: near-black and the wall colour take turns. Gold is a hairline accent only. */
  --white: #ffffff;
  --ink: #141313;
  --wall: #f3ece7;
  --gold: #b08e54;
  --gold-deep: #84662f;
  --gold-line: rgba(176, 142, 84, .55);
  --muted: #5b554e;
  --muted-dark: #bdb4a8;
  --cream-soft: rgba(243, 236, 231, .8);
  --hair: rgba(20, 19, 19, .14);
  --hair-dark: rgba(243, 236, 231, .16);

  /* Type: CF Angeliki for running text (Regular, Medium), headings (Light h1 and h2, Regular h3) and
     reflective lines (Italic). Ysabeau, a light geometric sans after Ollin's Jost, for small spaced
     capitals and the home section headings. CF Ifigeneia only for the rare hero line. Literata stands in
     for both CF fonts wherever they are not installed.
     head   section and page headings     title  names and answers (20 to 24px)
     quote  client words (22 to 30px)     lead   the line under a page heading
     body   running text (16 to 17px)     small  captions, hints, times
     caps   labels, the menu, buttons: 11.5px sans capitals, spaced .3em
     kicker the label over a heading: 11.5px sans capitals, spaced .42em, with a short rule */
  --display: "Angeliki", "Literata", Georgia, serif;
  --text: "Angeliki", "Literata", Georgia, serif;
  --wordmark: "Ifigeneia", "Literata", Georgia, serif; /* rare hero moments only */
  --sans: "Ysabeau", "Helvetica Neue", Arial, sans-serif;
  --step-small: clamp(0.9375rem, 0.9rem + 0.12vw, 1rem); /* 15 to 16px: captions, hints and times stay readable */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.15rem); /* 17 to 18.4px, light, as Ollin's body */
  --step-lead: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --step-head: clamp(2rem, 1.3rem + 2.9vw, 4rem);
  --t-quote: clamp(1.375rem, 1.1rem + .9vw, 1.875rem);
  --t-lead: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --t-price: clamp(1.125rem, 1rem + .4vw, 1.375rem);
  --t-title: clamp(1.375rem, 1.2rem + .55vw, 1.625rem); /* card and list titles: a size up from body, in the Medium weight */
  --t-caps: .71875rem;
  --track: .3em;

  /* Space: 20px heading to text, 32px text to a button, --gap-group words to content */
  --m: 6vw;
  --g: 24px;
  --header: 72px;
  --nav-x: 64px; /* header sides */
  --nav-gap: 35px; /* between header items */
  --gap-text: 20px;
  --gap-group: clamp(40px, 4vw, 56px);
  /* Every section fits one screen: --pad above and below, --fit for its content */
  --pad: clamp(48px, 7svh, 80px);
  --fit: calc(100svh - var(--header) - 2 * var(--pad));

  --ease: cubic-bezier(.16, 1, .3, 1);

}

/* ---------- Base ---------- */
:root { color-scheme: only light; } /* the site has one look: browsers that darken pages leave it alone */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header); }
body { margin: 0; background: var(--wall); color: var(--ink); font-family: var(--text); font-weight: 400; font-size: var(--step-body); line-height: 1.75; font-variant-numeric: lining-nums; /* Ysabeau draws old-style figures by default: phone numbers and times stand full height */ -webkit-font-smoothing: antialiased; caret-color: var(--ink); }
::selection { background: rgba(176, 142, 84, .32); color: var(--ink); }
.field-ink ::selection { background: rgba(176, 142, 84, .45); color: var(--white); }
/* The focus ring takes the text colour: ink on the wall, cream on near-black */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .3em; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.015em; line-height: 1.08; margin: 0; text-wrap: balance; }
h1, h2 { font-weight: 300; } /* Angeliki Light for page and section headings, Regular for h3 */
p, blockquote, figure { margin: 0; }
p, dd, li { text-wrap: pretty; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Small spaced capitals: Ysabeau, 11.5px, .3em apart */
.caps { font: 400 var(--t-caps)/1.5 var(--sans); letter-spacing: var(--track); text-transform: uppercase; }

.wrap { padding: 0 var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 0 var(--m); }
section { padding: var(--pad) 0; }
/* Inner pages open under the fixed header */
main > section:first-child:not(.scene) { padding-top: calc(var(--header) + var(--pad)); }
.field-ink { background: var(--ink); color: var(--wall); }
.field-mint { background: var(--wall); }

/* ---------- Heading info, as on Ollin: a small label over the heading, an italic line under it ---------- */
.kicker { display: inline-flex; align-items: center; gap: 14px; width: max-content; max-width: 100%; margin: 0 0 18px; font: 400 var(--t-caps)/1.5 var(--sans); letter-spacing: .42em; text-transform: uppercase; color: var(--gold-deep); }
.kicker::before { content: ""; width: 26px; border-top: 1px solid currentColor; opacity: .7; } /* taste-skill-ignore: the short rule before the label */
.field-ink .kicker { color: var(--gold); }
/* Page copy styles every paragraph; the label keeps its own width, spacing and colour */
.copy > p.kicker.kicker { margin-top: 0; max-width: none; color: var(--gold-deep); }
.field-ink .copy > p.kicker.kicker { color: var(--gold); }
.sec-head { display: grid; justify-items: center; margin-bottom: 28px; text-align: center; }
.sec-sub { margin-top: 14px; max-width: 36ch; font: italic 300 1.2rem/1.6 var(--display); color: var(--muted); }
.field-ink .sec-sub { color: var(--cream-soft); }
.follow { display: inline-flex; align-items: baseline; gap: 12px; min-height: 44px; margin-top: 10px; padding-top: 10px; color: inherit; text-decoration: none; }
.follow .lab { font: 400 .625rem/1.5 var(--sans); letter-spacing: .3em; text-transform: uppercase; opacity: .7; }
.follow .hdl { font: 400 var(--t-caps)/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .5em; text-decoration-color: var(--gold-line); }
.follow:hover .hdl { text-decoration-color: currentColor; }

/* ---------- Buttons and links ---------- */
/* A thin pill outline in small spaced capitals. .solid fills the one main action in a view. */
.btn, .pill { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 100px; background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; font: 400 var(--t-caps)/1.4 var(--sans); letter-spacing: var(--track); text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .2s var(--ease); } /* taste-skill-ignore: the 1px pill outline */
.btn { min-height: 50px; padding: 12px 30px; }
.pill { min-height: 40px; padding: 0 20px; }
.btn:hover { background: var(--ink); color: var(--wall); box-shadow: inset 0 0 0 1px var(--ink); } /* taste-skill-ignore: the 1px pill outline */
.btn:active { transform: scale(.98); }
.btn.solid { background: var(--ink); color: var(--wall); box-shadow: none; } /* taste-skill-ignore: removes the outline */
.btn.solid:hover { background: #2b2928; box-shadow: inset 0 0 0 1px var(--gold-line); } /* taste-skill-ignore: a gold hairline on hover */
.field-ink .btn:hover { background: var(--wall); color: var(--ink); box-shadow: inset 0 0 0 1px var(--wall); } /* taste-skill-ignore: the 1px pill outline */
.field-ink .btn.solid { background: var(--wall); color: var(--ink); }

/* Text links: a quiet underline that turns gold */
.link, .go, .hint a, .top p a, .steps p a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: .32em; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); transition: text-decoration-color .3s var(--ease); }
.link:hover, a:hover .go, .hint a:hover, .top p a:hover, .steps p a:hover { text-decoration-color: var(--gold); }
.link, .go { display: inline-flex; align-items: center; min-height: 44px; }
.go { font-size: var(--step-small); }
.hint { display: block; margin-top: 10px; font-size: var(--step-small); color: var(--muted); }
.field-ink .hint { color: var(--muted-dark); }

/* ---------- Header and menu ---------- */
/* Four items in small capitals, the booking link in a thin pill. Wall colour on inner pages.
   On the home page it sits light on a clear background until the cream salons section reaches it. It slides away while you scroll down. */
.nav { position: fixed; z-index: 20; inset: 0 0 auto 0; height: var(--header); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 21px var(--nav-x); background: var(--wall); color: var(--ink); box-shadow: 0 1px 0 transparent; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease); } /* taste-skill-ignore: the hairline under the header */
.nav.moved { box-shadow: 0 1px 0 var(--hair); } /* taste-skill-ignore: a hairline, not a shadow */
.nav.over { background: transparent; color: var(--wall); box-shadow: none; } /* taste-skill-ignore: removes the hairline */
.nav.away { transform: translateY(-100%); }
.brand { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.brand .mark { height: 42px; width: auto; mix-blend-mode: multiply; }
/* On near-black the mark turns to the wall colour, on a clear ground */
.brand .mark.light, .over .brand .mark:not(.light) { display: none; }
.over .brand .mark.light { display: block; mix-blend-mode: normal; }
.nav nav { display: flex; align-items: center; gap: var(--nav-gap); }
.nav nav a { font: 400 var(--t-caps)/1 var(--sans); letter-spacing: var(--track); text-transform: uppercase; text-decoration: none; }
.nav nav a:not(.pill) { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .9em; text-decoration-color: transparent; transition: text-decoration-color .3s var(--ease); }
.nav nav a:not(.pill):hover, .nav nav a[aria-current="page"] { text-decoration-color: currentColor; }
.nav .pill:hover, .nav .pill[aria-current="page"] { background: var(--ink); color: var(--wall); box-shadow: inset 0 0 0 1px var(--ink); } /* taste-skill-ignore: the 1px pill outline */
.nav.over .pill:hover { background: var(--wall); color: var(--ink); box-shadow: inset 0 0 0 1px var(--wall); } /* taste-skill-ignore: the 1px pill outline */
.menu-btn, .menu, .nav-book { display: none; }

/* Phones: the mark, a booking pill and two lines that turn into a cross. The menu lists every page. */
@media (max-width: 700px) {
  .nav nav { display: none; }
  .nav .nav-book { display: inline-flex; margin-left: auto; margin-right: -6px; min-height: 40px; padding: 0 16px; letter-spacing: .14em; }
  .menu-btn { display: grid; place-content: center; gap: 7px; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
  .menu-btn span { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
  .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
  .menu-open .nav.over { background: var(--wall); color: var(--ink); }
  .menu-open .over .brand .mark:not(.light) { display: block; }
  .menu-open .over .brand .mark.light { display: none; }
  .menu { display: flex; flex-direction: column; gap: 28px; position: fixed; z-index: 19; inset: var(--header) 0 0 0; padding: 12px var(--m) calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; background: var(--wall); visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
  .menu.open { visibility: visible; opacity: 1; transform: none; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s; }
  .menu nav { display: grid; justify-items: start; }
  .menu nav a { display: inline-flex; align-items: center; min-height: 44px; font: 400 .9375rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: .5em; text-decoration-thickness: 1px; text-decoration-color: transparent; }
  .menu nav a:hover, .menu nav a[aria-current="page"] { text-decoration-color: currentColor; }
  .menu nav .sub { display: grid; padding: 6px 0 6px 16px; }
  .menu nav .sub em { font: italic 400 1rem/1.4 var(--display); letter-spacing: 0; text-transform: none; color: var(--muted); }
  .menu-label { margin-top: 22px; margin-bottom: 2px; color: var(--muted); }
  .menu > .btn { width: 100%; margin-top: auto; }
}

/* ---------- Home: the opening scene ----------
   Still, by default: the lounge fills the first screen with the name on it, and the statement follows on near-black.
   Where the browser runs scroll-driven animations and motion is welcome, the same parts stack in one pinned screen:
   the room fades to near-black, the name rises and stays, and the statement appears one sentence at a time. */
.scene { position: relative; padding: 0; background: var(--ink); color: var(--wall); }
.scene-hero { position: relative; isolation: isolate; overflow: hidden; min-height: max(100svh, 560px); display: grid; place-items: center; }
.scene-room, .scene-room img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-room { z-index: -2; }
.scene-room img { object-fit: cover; object-position: 50% 42%; filter: saturate(.8) contrast(1.04); }
.scene-hero::before, .scene-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.scene-hero::before { background: var(--ink); opacity: .5; } /* the room, dimmed so the name reads; the scroll takes it to near-black */
.scene-hero::after { background: linear-gradient(180deg, rgba(20, 19, 19, .55) 0%, rgba(20, 19, 19, 0) 26%, rgba(20, 19, 19, 0) 70%, rgba(20, 19, 19, .6) 100%); } /* taste-skill-ignore: a neutral scrim under the header and the corner notes */
.scene-name { display: grid; justify-items: center; text-align: center; padding: 0 var(--m); }
.scene-name h1 img { width: clamp(17rem, 44vw, 38rem); height: auto; }
.places { margin-top: 26px; letter-spacing: .36em; color: var(--cream-soft); }
.line-link { margin-top: 22px; display: inline-flex; align-items: center; min-height: 44px; color: var(--wall); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .9em; text-decoration-color: var(--gold-line); transition: text-decoration-color .3s var(--ease); }
.line-link:hover { text-decoration-color: var(--wall); }
.room-note, .cue { position: absolute; bottom: 28px; color: var(--cream-soft); }
.room-note { left: var(--m); }
.cue { right: var(--m); display: grid; justify-items: center; gap: 12px; }
.cue::after { content: ""; width: 1px; height: 40px; background: currentColor; opacity: .6; }
.scene-words { display: grid; place-content: center; justify-items: center; gap: clamp(20px, 3svh, 32px); min-height: calc(100svh - var(--header)); padding: var(--pad) var(--m); text-align: center; }
.tagline { font: italic 400 var(--t-salons, 2.875rem)/1.15 var(--wordmark); letter-spacing: 0; } /* the same size as the section headings: 46 / 28 / 27px */
.statement { display: grid; gap: .3em; max-width: 34em; font: italic 300 1.4375rem/1.4 var(--display); color: var(--cream-soft); }
.statement span { display: block; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .scene { height: 480svh; view-timeline: --scene block; }
    .scene-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
    .scene-hero, .scene-words { position: absolute; inset: 0; min-height: 0; }
    .scene-words { padding-top: calc(var(--pad) + 12svh); pointer-events: none; }
    .scene-hero::before, .scene-room img, .places, .line-link, .room-note, .cue, .scene-name h1, .tagline, .statement span { animation-timeline: --scene; animation-fill-mode: both; animation-timing-function: linear; }
    .scene-hero::before { animation-name: scene-dark; animation-range: contain 0% contain 42%; }
    .scene-room img { animation-name: scene-drift; animation-range: contain 0% contain 60%; }
    .places, .line-link, .room-note, .cue { animation-name: scene-leave; animation-range: contain 0% contain 16%; }
    .scene-name h1 { animation-name: scene-rise; animation-range: contain 16% contain 46%; }
    .tagline, .statement span { animation-name: scene-arrive; }
    .tagline { animation-range: contain 40% contain 54%; }
    .statement span:nth-child(1) { animation-range: contain 48% contain 60%; }
    .statement span:nth-child(2) { animation-range: contain 54% contain 66%; }
    .statement span:nth-child(3) { animation-range: contain 60% contain 72%; }
    .statement span:nth-child(4) { animation-range: contain 66% contain 78%; }
  }
}
@keyframes scene-dark { to { opacity: .96; } }
@keyframes scene-drift { to { transform: scale(1.08); } }
@keyframes scene-leave { to { opacity: 0; visibility: hidden; } }
@keyframes scene-rise { to { transform: translateY(-25svh) scale(.62); } }
@keyframes scene-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Home: recent work, a strip of vertical reels ---------- */
/* Laid out like the reference: 342 x 608px reels, 47.5px apart, the one in the middle scaled to 375 x 667px,
   its neighbours to 351 x 625px and the next ones to 331 x 589px. Touch, trackpad and keys scroll it;
   a mouse can drag it. Each reel opens on Instagram. */
.reels { overflow: hidden; padding: 256px 0 var(--reels-end, 54px); }
.reels h2, .salons-head h2 { font-family: var(--sans); font-weight: 300; text-transform: uppercase; letter-spacing: .02em; }
.reels h2 { font-size: var(--t-salons, 2.875rem); line-height: 1.06; } /* the section headings share one size: 46 / 28 / 27px */
.strip { --rw: 342px; --gap: 47.5px; display: flex; gap: var(--gap); margin: 0; padding: 34px calc(50% - var(--rw) / 2) 56px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
.strip::-webkit-scrollbar { display: none; }
.strip.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.reel { position: relative; flex: 0 0 auto; width: var(--rw); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 22px; background: #262423; scroll-snap-align: center; }
.reel { transition: box-shadow .45s var(--ease); }
.reel.is-centre { box-shadow: 0 24px 52px -14px rgba(243, 236, 231, .42), 0 10px 22px -10px rgba(243, 236, 231, .26); } /* taste-skill-ignore: the chosen reel lifts off the strip, as in the reference; a soft light glow, because the strip is near-black */
.reel a { position: absolute; inset: 0; display: block; color: var(--wall); text-decoration: none; }
.reel a:focus-visible { outline-offset: -6px; border-radius: 22px; }
.reel :is(img, video) { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) sepia(.06) contrast(1.02); transition: transform 1.2s var(--ease); -webkit-user-drag: none; }
.reel a:hover :is(img, video) { transform: scale(1.03); }
.reel a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 19, 19, .35) 0%, rgba(20, 19, 19, 0) 16%, rgba(20, 19, 19, 0) 55%, rgba(20, 19, 19, .7) 100%); } /* taste-skill-ignore: a neutral scrim under the marks and the name */
.reel video[data-src$="reel-blonde.mp4"] { object-position: 50% 38%; }
.reel .who { position: absolute; z-index: 1; left: 12px; bottom: 14px; } /* scoped: «who» also names the team section, a bridal quote line and the booking thank-you */
/* The reel's own marks, as on Instagram: send at the top right, three actions down the right edge, play in the middle */
.r-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; color: rgba(243, 236, 231, .95); }
.r-deco svg { position: absolute; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.r-send { top: 11px; right: 12px; width: 18px; height: 18px; }
.r-side { position: absolute; right: 11px; bottom: 50px; display: grid; gap: 14px; }
.r-side svg { position: static; width: 20px; height: 20px; }
.r-play { top: 50%; left: 50%; width: 16px; height: 16px; translate: -50% -50%; fill: currentColor !important; stroke: none !important; opacity: .9; }
.pause { position: absolute; z-index: 3; top: 50%; left: 50%; translate: -50% -50%; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(20, 19, 19, .35); color: var(--wall); box-shadow: inset 0 0 0 1px rgba(243, 236, 231, .5); cursor: pointer; } /* taste-skill-ignore: a 1px ring on a control over video */
.pause svg { width: 14px; height: 14px; fill: currentColor; }
.pause .i-play, .pause.paused .i-pause { display: none; }
.pause.paused .i-play { display: inline; }
/* Only the reel in the middle plays, so only it shows the pause button */
.pause { transition: opacity .3s var(--ease); }
.reel:not(.is-centre) .pause { opacity: 0; pointer-events: none; }
/* The reel nearest the middle grows, the others step down as they move out */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reel { animation: reel-focus linear both; animation-timeline: view(inline); }
  }
}
@keyframes reel-focus { 0% { scale: .94; } 50% { scale: 1.097; } 100% { scale: .94; } }
/* With motion the script runs the strip as an endless drift and sets each reel's size and light */
@media (prefers-reduced-motion: no-preference) {
  .strip { position: relative; scroll-snap-type: none; }
  .strip .reel { animation: none; scroll-snap-align: none; scale: var(--s, .94); opacity: var(--o, 1); }
}
.strip-hint { margin-top: 10px; display: flex; justify-content: center; align-items: center; gap: 14px; color: var(--muted-dark); }
.strip-hint::before, .strip-hint::after { content: ""; width: 34px; border-top: 1px solid currentColor; opacity: .7; } /* taste-skill-ignore: the two short rules either side of the hint */

/* ---------- Home: find your salon, one dark card per room ---------- */
.salons { padding: 99px 0 108px; }
.salons-head { max-width: 640px; margin: 0 auto; text-align: center; }
.salons-head h2 { font-size: var(--t-salons, 2.875rem); line-height: 1.06; }
.salons-head p:not(.kicker) { margin-top: 15px; font: italic 300 1.2rem/1.6 var(--display); color: var(--muted); }
.rooms { --ch: clamp(300px, calc(100svh - var(--header) - 207px - 180px), 560px); display: flex; justify-content: center; gap: var(--g); margin: clamp(28px, 4svh, 48px) 0 0; padding: 0; list-style: none; }
.room { container-type: inline-size; position: relative; isolation: isolate; flex: 0 1 calc(var(--ch) * .8); aspect-ratio: 4 / 5; display: flex; align-items: flex-end; overflow: hidden; border-radius: 4px; background: var(--ink); color: var(--wall); }
.room img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.7) contrast(1.05); transition: transform 1.2s var(--ease), filter .6s var(--ease); }
.room:hover img { transform: scale(1.03); filter: brightness(.58) saturate(.75) contrast(1.05); }
.room img[src$="room-lounge.jpg"] { object-position: 39% 50%; }
.room img[src$="room-lobby-apollon.jpg"] { object-position: 83% 50%; }
.room::after { content: ""; position: absolute; inset: 45% 0 0 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 19, 19, 0), rgba(20, 19, 19, .72)); } /* taste-skill-ignore: a neutral scrim under the name */
.room-text { padding: clamp(20px, 2vw, 32px); }
.room h3 { font-size: min(clamp(1.75rem, 1.2rem + 1.5vw, 2.625rem), 9cqi); /* the longest name, ΑΠΟΛΛΩΝΙΑΔΟΣ, always fits its card */ line-height: 1.05; letter-spacing: -0.01em; } /* as Ollin's location cards: the name in the serif, normal case */
.room h3 a { text-decoration: none; }
.room h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; text-decoration-color: var(--gold-line); }
.room p { margin-top: 6px; color: var(--cream-soft); font-variant-numeric: tabular-nums; }
.room p a { display: inline-block; padding: 10px 0; text-decoration: underline; text-underline-offset: .5em; text-decoration-color: transparent; transition: text-decoration-color .3s var(--ease); }
.room p a:hover { text-decoration-color: currentColor; }
/* A narrow card: the phone and the address on two lines, without the dot */
@container (max-width: 380px) { .room p span { display: none; } .room p a { display: block; width: fit-content; padding: 4px 0; } }

/* ---------- Photographs: plain rectangles, 4 wide to 5 tall ---------- */
.photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 4px; background: #e4ddd6; }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) sepia(.06) contrast(1.02); } /* one grade on every photo: phone posts and room shots read as one set */
/* Crop points: the head and hair sit in the middle of each photo */
.photo img[src$="mid-back-logo.jpg"] { object-position: 53% 50%; }
.photo img[src$="blonde-mirror.jpg"] { object-position: 61% 50%; }
.photo img[src$="bride-flowers.jpg"] { object-position: 53% 50%; }
.photo img[src$="bride-chignon.jpg"] { object-position: 60% 50%; }
.photo img[src$="room-lobby-apollon.jpg"] { object-position: 83% 50%; }
.photo img[src$="room-lounge.jpg"] { object-position: 39% 50%; }
.photo img[src$="room-mirror.jpg"] { object-position: 87% 50%; }
.photo img[src$="room-chair.jpg"] { object-position: 25% 50%; }
.photo img[src$="stylist-blonde.jpg"] { object-position: 78% 50%; }
.caption { margin-top: 12px; font-size: var(--step-small); color: var(--muted); }

/* ---------- Header and menu ---------- */
/* ---------- Page openings ---------- */
.page-head { background: var(--wall); }
.page-head .grid { row-gap: 0; }
.page-head h1, .page-head .lead, .page-head .jump, .page-head .kicker { grid-column: 1 / 9; }
.page-head .kicker { justify-self: start; }
.page-head .lead { margin-top: var(--gap-text); font-size: var(--t-lead); font-style: italic; line-height: 1.6; max-width: 40ch; color: var(--muted); }
.jump { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 28px 0 0; padding: 0; list-style: none; }
/* With a picture: the words as one block, centred beside one mirror */
.page-head.pic .grid { grid-template-rows: 1fr auto auto auto 1fr; align-items: start; }
.page-head.pic .kicker { grid-row: 2; } .page-head.pic h1 { grid-row: 3; } .page-head.pic .lead { grid-row: 4; }
.page-head.pic h1, .page-head.pic .lead, .page-head.pic .kicker { grid-column: 1 / 7; }
.page-head.pic figure { grid-column: 8 / 13; grid-row: 1 / -1; justify-self: center; width: min(100%, 420px, calc(var(--fit) * .8)); }

/* A section heading with its line of context, as on the home page: kicker, heading in light sans capitals, italic line */
.top { grid-column: 1 / 8; }
.top > p:not(.kicker) { margin-top: 14px; max-width: 46ch; font: italic 400 1.2rem/1.6 var(--display); color: var(--muted); }
.field-ink .top > p:not(.kicker) { color: var(--cream-soft); }
.top > .btn { margin-top: 32px; }
.svc h1, .page-head h1, .maria h1 { font-size: var(--step-head); line-height: 1.04; }
.top h2, .svc .copy > h2:not(#reach-q) { font-family: var(--sans); font-size: var(--t-salons, 2.875rem); font-weight: 300; line-height: 1.06; letter-spacing: .02em; text-transform: uppercase; }
/* The closing call: centred, as the home section heads */
:is(.cta, .close) .top { grid-column: 1 / -1; display: grid; justify-items: center; text-align: center; }
:is(.cta, .close) .top > p:not(.kicker) { max-width: 40ch; }
:is(.cta, .close) .hint { margin-top: 14px; }
/* A closing call inside the last section, under a hairline */
.grid.close { margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--hair); } /* taste-skill-ignore: a printed-menu rule */

/* ---------- A mirror beside words (services, extensions, bridal, the second salon) ---------- */
.svc .grid { align-items: center; row-gap: 40px; }
.svc .copy > p { margin-top: 16px; max-width: 42ch; }
.svc .copy > :is(h1, h2) + p { margin-top: var(--gap-text); }
.svc .btn { margin-top: 24px; }
.colour figure, .bridal figure.main, .ext figure { justify-self: center; width: min(100%, 420px, calc(var(--fit) * .8)); }
.ext figure { width: min(100%, 420px, calc(var(--fit) * .52)); container-type: inline-size; } /* the mirror stays tall, to show the length */
.colour figure { grid-column: 1 / 6; }
.colour .copy { grid-column: 6 / 13; }
.bridal figure.main { grid-column: 1 / 7; }
.bridal .copy { grid-column: 8 / 13; }

.colour.flip figure { grid-column: 8 / 13; grid-row: 1; }
.colour.flip .copy { grid-column: 1 / 8; grid-row: 1; }
.copy .say { margin-top: 40px; }
.copy .say blockquote { max-width: 24ch; }

/* Service sections: photo, words and the menu in three columns */
.listed figure { grid-column: 1 / 5; grid-row: 1; }
.listed .copy { grid-column: 5 / 9; grid-row: 1; }
.listed .grid > .offer { grid-column: 9 / 13; grid-row: 1; margin-top: 0; }
.listed.flip .copy { grid-column: 1 / 5; }
.listed.flip .grid > .offer { grid-column: 5 / 9; }
.listed.flip figure { grid-column: 9 / 13; }
/* A mirror with a quote under it: the quote takes the column width, the mirror leaves it room */
.listed figure:has(.say) { width: 100%; }
.listed figure:has(.say) .photo { width: min(100%, calc((var(--fit) - 225px) * .8)); margin: 0 auto; }
.terms { margin-top: 14px; font-size: var(--step-small); color: var(--muted); max-width: 52ch; }
.field-ink .terms { color: var(--muted-dark); } /* on near-black the light grey, or it drops to 2.5:1 */

/* The service menu: what we offer, no prices */
.offer { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); } /* taste-skill-ignore: a price list is a real table */
.offer li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--hair); } /* taste-skill-ignore: a price list is a real table */
.listed .offer li { padding: 9px 0; }
.offer .n { font-family: var(--display); font-size: var(--t-price); font-weight: 400; line-height: 1.2; }
.offer .p { font: 400 var(--t-caps)/1.5 var(--sans); letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.offer .t { grid-column: 1; font-size: var(--step-small); color: var(--muted); }
.field-ink .offer, .field-ink .offer li { border-color: var(--hair-dark); }
.field-ink .offer .t { color: var(--muted-dark); }

/* Words and a price list side by side */
.duo .top { grid-column: 1 / 7; }
.duo .offer { grid-column: 8 / 13; margin-top: 0; align-self: start; }

/* ---------- Extensions: pick a length, a gold line shows where it ends ---------- */
.ext .copy { grid-column: 1 / 7; }
.ext figure { grid-column: 8 / 13; }
.ext .copy > p { color: var(--muted-dark); max-width: 50ch; }
.ext .copy > p.sub { margin-top: 12px; font-family: var(--display); font-size: var(--step-lead); line-height: 1.25; color: var(--white); }
.ext .copy > h2 { margin-top: 28px; font-family: var(--text); font-size: var(--step-body); font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.reach { display: flex; flex-wrap: wrap; margin: 16px 0 0; padding: 0; border: 0; }
.reach legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.reach button { min-height: 52px; padding: 0 22px; background: transparent; color: rgba(255, 255, 255, .78); border: 0; box-shadow: inset 0 0 0 1px var(--hair-dark); font: 400 var(--step-body)/1 var(--text); letter-spacing: .02em; cursor: pointer; transition: color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } /* taste-skill-ignore: a 1px inset hairline, not a shadow */
.reach button + button { margin-left: -1px; }
.reach button:hover { color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); } /* taste-skill-ignore: a 1px inset hairline, not a shadow */
.reach button[aria-pressed="true"] { position: relative; z-index: 1; background: rgba(176, 142, 84, .1); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); } /* taste-skill-ignore: a 1px inset hairline, not a shadow */
.readout { margin-top: 12px; min-height: 2.6em; font-family: var(--display); font-size: var(--step-lead); line-height: 1.3; }
.readout small { display: block; margin-top: 6px; font-family: var(--text); font-size: var(--step-small); color: var(--muted-dark); }
.stack { position: relative; aspect-ratio: 25 / 48; }
.stack img { position: absolute; inset: 0; }
.stack .veil { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; top: var(--y); background: rgba(20, 19, 19, .52); -webkit-backdrop-filter: saturate(.3); backdrop-filter: saturate(.3); transition: top .7s var(--ease); } /* taste-skill-ignore: dims the hair past the chosen length */
.stack .mark { position: absolute; z-index: 2; left: 0; right: 0; top: var(--y); border-top: 2px solid var(--gold); transition: top .7s var(--ease); } /* taste-skill-ignore: the length line is the content */
.stack .tag { position: absolute; right: 14%; bottom: 8px; padding: 4px 9px; background: var(--gold); color: var(--ink); font: 500 var(--step-small)/1.2 var(--sans); letter-spacing: .03em; }

/* ---------- Bridal ---------- */
.quote-row { margin-top: 40px; }

/* ---------- Team ---------- */
.maria .grid { align-items: center; row-gap: 40px; }
.maria .copy { grid-column: 1 / 6; }
.maria .copy > p { margin-top: 16px; max-width: 42ch; }
.maria .copy > h1 + p { margin-top: var(--gap-text); }
.maria .btn { margin-top: 24px; }
.maria figure { grid-column: 7 / 13; justify-self: end; width: min(100%, 500px, calc(var(--fit) * .8)); }


/* ---------- Lists that hang on hairlines, like a printed menu ---------- */
.crew, .steps { grid-column: 1 / -1; list-style: none; margin: var(--gap-group) 0 0; padding: 0; display: grid; gap: 40px var(--g); }
.crew li, .faq dl > div, .steps li { padding-top: 20px; border-top: 1px solid var(--hair); } /* taste-skill-ignore: printed-menu rules */
.field-ink :is(.crew li, .faq dl > div, .steps li) { border-top-color: var(--hair-dark); }
/* Small titles: Angeliki Regular, a size up from body */
.crew h3, .steps h3, .faq dt { font-size: var(--t-title); font-weight: 400; line-height: 1.2; }

.crew { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.crew p { margin-top: 8px; color: var(--muted); max-width: 34ch; }

/* Steps: each carries its time label, or simply its heading */
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps .when { display: block; font: 400 var(--t-caps)/1.5 var(--sans); letter-spacing: var(--track); text-transform: uppercase; color: var(--gold-deep); }
.field-ink .steps .when { color: var(--gold); }
.steps .when + h3 { margin-top: 10px; }
.steps p { margin-top: 10px; max-width: 34ch; }
.field-ink .steps p { color: var(--muted-dark); }

/* Doors to other pages: the home page's salon cards */
.rooms.doors { grid-column: 1 / -1; margin-top: var(--gap-group); }

/* Questions and answers */
.faq { grid-column: 1 / -1; margin-top: var(--gap-group); }
.faq dl { margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--g); }
.faq dt { font-family: var(--display); }
.faq dd { margin: 10px 0 0; line-height: 1.6; color: var(--muted); max-width: 34ch; }
.field-ink .faq dd { color: var(--muted-dark); }

/* ---------- Words from clients, set large ---------- */
.say { grid-column: 1 / -1; margin-top: clamp(56px, 6vw, 96px); }
.say blockquote, .bridal blockquote { font: italic 400 var(--t-quote)/1.35 var(--display); }
.say blockquote { max-width: 26ch; }
.say p, .bridal .who { margin-top: 14px; font: 400 var(--t-caps)/1.6 var(--sans); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.field-ink .say p { color: var(--muted-dark); }
/* Beside a section heading: the heading on the left, the client's words on the right */
.say.side { grid-column: 7 / 13; margin-top: 0; align-self: center; }
.top:has(+ .say.side) { grid-column: 1 / 6; }
/* Under a mirror */
figure .say { margin-top: 28px; }
figure .say blockquote { font-size: var(--step-lead); max-width: none; }

/* ---------- Footer: near-black. The mark, then both salons, then every page, the email and Instagram ---------- */
footer { padding: 0; }
.foot { row-gap: 20px; align-items: start; padding-top: clamp(56px, 7vw, 96px); }
.foot-mark { grid-column: 1 / 5; }
.foot-mark a { display: inline-block; }
.foot-mark .mark { width: 76px; height: auto; }
.foot-mark p { margin-top: 18px; font: italic 300 var(--t-lead)/1.4 var(--display); color: var(--cream-soft); }
.foot-salon { display: grid; justify-items: start; align-content: start; }
.foot-salon.s1 { grid-column: 5 / 9; } .foot-salon.s2 { grid-column: 9 / 13; }
.foot-salon h3 { margin-bottom: 8px; font-size: var(--t-title); line-height: 1.2; letter-spacing: 0; }
.foot-salon a { padding: 4px 0; line-height: 1.5; color: var(--cream-soft); text-decoration: underline; text-underline-offset: .32em; text-decoration-color: transparent; transition: text-decoration-color .3s var(--ease), color .3s var(--ease); }
.foot-salon a:hover { color: var(--wall); text-decoration-color: var(--gold); }
.foot-salon a[href^="tel"] { font-variant-numeric: tabular-nums; }
.foot-salon .caps { margin-top: 10px; color: var(--muted-dark); }
.foot-row { margin: clamp(48px, 6vw, 80px) var(--m) 0; padding: 20px 0 0; border-top: 1px solid var(--gold-line); row-gap: 8px; align-items: center; } /* taste-skill-ignore: the one gold hairline that closes the page */
.foot-nav { grid-column: 1 / 9; display: flex; flex-wrap: wrap; gap: 0 26px; }
.foot-contact { grid-column: 9 / -1; justify-self: end; display: flex; flex-wrap: wrap; gap: 0 26px; }
.foot-nav a, .foot-contact a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step-small); color: var(--wall); text-decoration: underline; text-underline-offset: .4em; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); transition: text-decoration-color .3s var(--ease); }
.foot-nav a:hover, .foot-contact a:hover, .foot-nav a[aria-current="page"] { text-decoration-color: var(--gold); }
.legal { grid-column: 1 / -1; margin-top: 16px; padding-bottom: 28px; color: var(--muted-dark); }

/* ---------- Booking: the words and a phone line on the left, the request on the right ---------- */
.book .grid { align-items: start; }
.book .intro { grid-column: 1 / 6; position: sticky; top: calc(var(--header) + 24px); }
.book h1 { font-size: var(--step-head); line-height: 1.04; }
.book .lead { margin-top: var(--gap-text); font-size: var(--t-lead); font-style: italic; line-height: 1.6; max-width: 32ch; color: var(--muted); }
.direct { margin-top: clamp(32px, 5svh, 56px); padding-top: 20px; border-top: 1px solid var(--hair); max-width: 26rem; } /* taste-skill-ignore: printed-menu rule */
.direct h2 { font-size: var(--t-title); font-weight: 400; line-height: 1.2; letter-spacing: 0; }
.direct ul { list-style: none; margin: 10px 0 0; padding: 0; }
.direct li { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.direct .link { font-variant-numeric: tabular-nums; }
.direct .hint { margin-top: 4px; }
.request, .thanks { grid-column: 7 / 13; }
.request { display: grid; gap: 14px; }
.request fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.request legend, .field > span:first-child { display: block; margin-bottom: 8px; padding: 0; font: 400 var(--t-caps)/1.5 var(--sans); letter-spacing: var(--track); text-transform: uppercase; } /* labels: small capitals, as the cheatsheet */
.field small { font-size: inherit; letter-spacing: inherit; color: var(--muted); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; }
.field[hidden] { display: none; }
.field :is(input, select, textarea) { display: block; width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 4px; background: var(--white); color: var(--ink); font: 400 var(--step-body)/1.4 var(--text); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .25s var(--ease); -webkit-appearance: none; appearance: none; } /* taste-skill-ignore: a 1px inset hairline, not a shadow */
.field select { padding-right: 40px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315120f' stroke-width='1.4'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat; }
.field textarea { resize: vertical; min-height: 48px; }
.field :is(input, select, textarea):hover { box-shadow: inset 0 0 0 1px rgba(20, 19, 19, .3); } /* taste-skill-ignore: a 1px inset hairline, not a shadow */
.field :is(input, select, textarea):focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--ink); } /* taste-skill-ignore: the focus ring as a hairline */
.field :is(input, textarea):user-invalid { box-shadow: inset 0 0 0 1.5px #a33a2a; } /* taste-skill-ignore: the error ring as a hairline */
.field.file input { padding: 12px 14px; font-size: var(--step-small); }
.field.file .hint { margin-top: 6px; }
.field.file input::file-selector-button { margin-right: 14px; padding: 8px 14px; border: 0; background: var(--wall); color: var(--ink); font: 400 var(--t-caps)/1 var(--sans); letter-spacing: var(--track); text-transform: uppercase; border-radius: 100px; cursor: pointer; }
/* Services: five choices you can combine, set like the length buttons on the extensions page */
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick legend { width: 100%; }
.pick label { position: relative; }
.pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 100px; background: transparent; box-shadow: inset 0 0 0 1px rgba(20, 19, 19, .35); font-size: var(--step-small); transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); cursor: pointer; } /* taste-skill-ignore: a 1px inset hairline, not a shadow */
.pick label:hover span { box-shadow: inset 0 0 0 1px var(--ink); } /* taste-skill-ignore: a 1px inset hairline, not a shadow */
.pick input:checked + span { background: var(--ink); color: var(--wall); box-shadow: none; } /* taste-skill-ignore: removes the hairline */
.pick input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.err { width: 100%; margin-top: 2px; font-size: var(--step-small); color: #a33a2a; }
.send { margin-top: 8px; }
.thanks { align-self: center; padding-top: 20px; border-top: 1px solid var(--hair); } /* taste-skill-ignore: printed-menu rule */
.thanks h2 { font-size: var(--step-head); line-height: 1.04; }
.thanks p { margin-top: var(--gap-text); max-width: 36ch; }
.thanks .link { margin-top: 16px; }


/* ---------- Booking sheet: which salon first, then the form with that salon chosen ---------- */
.sheet { width: min(470px, calc(100% - 32px)); max-height: calc(100svh - 32px); margin: auto; padding: clamp(28px, 4vw, 44px); border: 0; border-radius: 2px; background: var(--wall); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(20, 19, 19, .5); overflow-y: auto; } /* taste-skill-ignore: a real overlay */
.sheet[open] { animation: sheet-in .35s var(--ease); }
.sheet::backdrop { background: rgba(20, 19, 19, .6); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } }
.sheet-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.sheet-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.sheet > .caps { color: var(--muted); }
.sheet h2 { margin-top: 10px; font-size: clamp(1.875rem, 1.5rem + 1vw, 2.375rem); line-height: 1.1; }
.sheet-lead { margin-top: 10px; font: italic 300 var(--t-lead)/1.5 var(--display); color: var(--muted); }
.sheet-list { margin: 22px 0 0; padding: 0; list-style: none; }
.sheet-list li { padding: 16px 0; border-bottom: 1px solid var(--hair); } /* taste-skill-ignore: printed-menu rule between the two salons */
.pick-salon { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; color: inherit; text-decoration: none; }
.pick-salon .pill { flex: none; }
.pick-salon:hover .pill { background: var(--ink); color: var(--wall); }
.sheet-list p { font: italic 300 var(--step-body)/1.5 var(--display); color: var(--muted); }
.sheet-list p a { display: inline-block; padding: 4px 0; color: var(--ink); font-variant-numeric: tabular-nums; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); }
.sheet-foot { margin-top: 18px; text-align: center; font-size: var(--step-small); color: var(--muted); }

/* ---------- Short desktop screens ---------- */
@media (min-width: 1001px) and (max-height: 820px) {
  :root { --step-head: clamp(2rem, 1rem + 2.2vw, 3.25rem); --pad: clamp(36px, 6svh, 64px); }
  .request { gap: 10px; }
  .request legend, .field > span:first-child { margin-bottom: 4px; }
  .field :is(input, select, textarea), .pick span { min-height: 42px; }
  .field.file input { padding: 8px 14px; }
}
@media (min-width: 1001px) and (max-height: 740px) {
  .listed .offer li { padding: 5px 0; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  :root { --nav-x: 38px; --nav-gap: 18px; --reels-end: 41px; --t-salons: 1.75rem; }
  .statement { font-size: 1rem; }
  .top, .duo .top, .top:has(+ .say.side), .page-head h1, .page-head .lead, .page-head .jump, .page-head .kicker, .page-head.pic h1, .page-head.pic .lead, .page-head.pic .kicker { grid-column: 1 / -1; }

  .page-head.pic .grid { grid-template-rows: none; }
  .page-head.pic :is(h1, .lead, .kicker) { grid-row: auto; }
  .page-head.pic figure { grid-column: 1 / -1; grid-row: auto; width: min(64%, 320px); margin-top: 40px; }

  .svc .copy > p { margin-top: 24px; }
  .svc .btn { margin-top: 32px; }
  .colour figure, .bridal figure.main { width: min(100%, 420px, calc((100svh - 100px) * .8)); }
  .ext figure { width: min(100%, 420px, calc((100svh - 100px) * .52)); }
  .colour figure, .bridal figure.main { grid-column: 1 / 6; }
  .colour .copy, .bridal .copy { grid-column: 6 / 13; }
  .listed figure, .listed .copy, .listed .grid > .offer, .listed.flip figure, .listed.flip .copy { grid-row: auto; }
  .listed .grid > .offer, .listed.flip .grid > .offer { grid-column: 1 / -1; margin-top: 32px; } /* the flipped section's desktop column (5 / 9) must not survive here */
  .listed.flip figure { grid-column: 7 / 13; grid-row: 1; }
  .listed.flip .copy { grid-column: 1 / 7; grid-row: 1; }
  .listed figure:has(.say) { width: min(100%, 420px, calc((100svh - 100px) * .8)); }
  .listed figure:has(.say) .photo { width: auto; }
  .listed .offer li { padding: 14px 0; }
  .terms { margin-top: 20px; }
  .duo .offer { grid-column: 1 / -1; margin-top: 40px; }

  .ext .copy > p { max-width: 42ch; }
  .ext .copy > h2 { margin-top: 44px; }
  .readout { margin-top: 20px; min-height: 2.8em; }


  .maria .copy { grid-column: 1 / -1; }
  .maria .copy > p { margin-top: 24px; }
  .maria .btn { margin-top: 32px; }
  .maria figure { width: min(100%, 500px, calc((100svh - 100px) * .8)); }

  .crew, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .say.side { grid-column: 1 / -1; margin-top: 40px; }
  figure .say { margin-top: 40px; }
  figure .say blockquote { max-width: 26ch; }

  .foot-mark { grid-column: 1 / 6; grid-row: 1 / span 2; }
  .foot-salon.s1, .foot-salon.s2 { grid-column: 6 / 13; }
  .foot-salon.s2 { margin-top: 20px; }
  .foot-nav, .foot-contact { grid-column: 1 / -1; justify-self: start; }
  .book .intro { grid-column: 1 / -1; position: static; }
  .request, .thanks { grid-column: 1 / -1; margin-top: 48px; }
}

/* ---------- Phone ---------- */
@media (max-width: 700px) {
  :root { --m: 20px; --g: 12px; --header: 60px; --pad: 56px; --nav-x: 20px; --t-salons: 1.6875rem; }

  /* Opening scene: the tall photo, without the corner notes */
  .scene-hero { min-height: 100svh; }
  .room-note, .cue { display: none; }
  .scene-name { padding-bottom: 40px; }
  .scene-name h1 img { width: min(82vw, 22rem); }
  .places { letter-spacing: .24em; }
  .scene-words { padding-bottom: var(--pad); }

  /* Reels: a little less tall, so the next one peeks in from the right */
  .strip { --rw: min(342px, 62vw); --gap: 24px; }
  .sec-head { margin-bottom: 20px; }
  .kicker { gap: 10px; letter-spacing: .3em; } /* the longest label, «Merianou · Πριν το ραντεβού», stays on one line */
  .kicker::before { width: 18px; }
  .strip-hint { gap: 10px; letter-spacing: .12em; }
  .strip-hint::before, .strip-hint::after { width: 16px; }

  /* Salons: the two cards stack, each a little wider than tall */
  .rooms { flex-direction: column; }
  .room { flex: none; aspect-ratio: 4 / 3; }

  /* Mirrors beside words stack above them */
  .colour figure, .colour .copy, .bridal figure.main, .bridal .copy, .colour.flip figure, .colour.flip .copy, .maria .copy, .maria figure { grid-column: 1 / -1; grid-row: auto; }
  .colour figure, .bridal figure.main, .colour.flip figure, .listed figure:has(.say) { justify-self: center; width: min(84%, 420px); }
  .maria figure { justify-self: center; width: min(92%, 500px); }

  /* Extensions: the photo sits above the length buttons, so each tap shows its result */
  .ext .grid { row-gap: 0; }
  .ext .copy { display: contents; }
  .ext .copy > *, .ext figure { grid-column: 1 / -1; }
  .ext h1 { order: 1; } .ext .copy > p:not(.readout, .kicker) { order: 2; }
  .ext figure { order: 3; width: min(84%, 420px); margin-top: 32px; }
  .ext .copy > h2 { order: 4; margin-top: 32px; } .ext .reach { order: 5; } .ext .copy > .readout { order: 6; }
  .ext .copy > .btn { order: 7; justify-self: start; } .ext .copy > .hint { order: 8; }
  .reach button { flex: 1 1 auto; padding: 0 12px; }



  .crew, .steps, .steps.three, .doors, .faq dl { grid-template-columns: 1fr; }
  .faq dl { gap: 24px; }

  /* Booking: the form first, the phone line under it */
  .book .intro { display: contents; }
  .book h1, .book .lead { grid-column: 1 / -1; }
  .request, .thanks { margin-top: 32px; }
  .direct { grid-column: 1 / -1; order: 2; margin-top: 48px; max-width: none; }
  .row { grid-template-columns: 1fr; }

  /* Footer: one column */
  .legal { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .foot { row-gap: 16px; }
  .foot-mark { grid-column: 1 / -1; grid-row: auto; }
  .foot-salon.s1, .foot-salon.s2 { grid-column: 1 / -1; }
  .foot-salon.s2 { margin-top: 20px; }
  .foot-nav { gap: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}