/* Hair Shine Sausalito — sage / cream / ink
   Times New Roman throughout. The only lettering not set in it is artwork: the
   logo, and the "Book Now" heading on the home page. */

:root{
  /* the house sage — everything below is this one hue, lightened for surfaces
     and darkened for anything that has to stay readable */
  --leaf:#C4CFC1;          /* the color itself: accents, borders, hero wash */
  /* the bar across the top and the solid buttons share this one light sage.
     White lettering only reaches 3.0:1 on it, so anything sitting on this
     green is set in the ink instead — that clears 5.0:1. Keep it that way:
     the green is light enough that white on it fails AA at any text size
     the site actually uses. */
  /* what is left of the mid sage: the outline on the ghost buttons. The bar
     across the top and the solid buttons both moved off it onto --cta below,
     which is where the salon's green now lives. */
  --leaf-mid:#8A9B80;      /* ghost button outline */
  --on-leaf-mid:#232821;   /* kept as the pair to --leaf-mid, currently unused */
  --leaf-press:#9DAC95;    /* hover lifts lighter, so the ink stays readable */
  /* the salon's green: the solid buttons — Book Now, Book an Appointment,
     Send Booking Request — and the contact bar across the top, which was asked
     to match them. The two are locked to this one token deliberately, so a
     change here moves both together.

     This green is dark enough to invert the rule the light sage runs on: the
     label goes white (4.69:1, where the ink would only reach 3.20:1), and the
     hover goes DARKER rather than lighter, because lifting it would drop white
     under AA. Both are the opposite of --leaf-mid's behaviour above — if this
     token is ever set light again, --on-cta has to go back to the ink and the
     press shade back to a lift. */
  --cta:#6C785B;
  --cta-press:#5D674E;     /* hover deepens: white holds 5.97:1 */
  --on-cta:#FFFFFF;        /* white clears AA here; the ink does not */
  --leaf-deep:#3E4A39;     /* highlights, small caps, prices */
  --leaf-line:#D7DFD3;     /* hairlines and borders */
  --leaf-soft:#E2E9DF;     /* soft panels */
  --leaf-mist:#EFF2ED;     /* tinted sections */
  --leaf-wash:#F8FAF7;     /* page background */
  --forest:#3E4A39;        /* footer */
  --white:#FFFFFF;
  /* the band: the hero's top half behind the logo, the hours strip, the head
     of every interior page, the testimonial band and the footer all draw on
     this one value, so every page is bracketed by the same ground and a single
     line moves all of it. Warm sand rather than the cool grey it used to be —
     the token keeps the old name because that is what eight rules below ask
     for, but nothing about it is grey any more. */
  --grey-band:#E1DDD1;
  --grey-line:#C7CCC2;
  --ink:#232821;
  --ink-soft:#4A5442;      /* 4.9:1 on #C4CFC1 */
  --star:#E7A63C;          /* review stars stay amber so they read as stars */
  --shadow:0 8px 30px rgba(62,74,57,.12);
  --shadow-lift:0 14px 40px rgba(62,74,57,.18);
  /* Times New Roman throughout — the logo artwork is the only lettering that
     is not set in it. Both tokens point at the same stack so any rule that
     asks for either gets Times. */
  --serif:"Times New Roman",Times,Georgia,serif;
  --sans:"Times New Roman",Times,Georgia,serif;
}

*{box-sizing:border-box;margin:0;padding:0}
/* the page is sized in rem throughout, so the whole type scale moves from
   here — 20px against the 16px default. The one exception is the hero
   headline, which is pinned in px below so it stays as drawn. */
html{scroll-behavior:smooth;font-size:125%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--leaf);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{width:min(1180px,92vw);margin:0 auto}

/* ---------- Header ---------- */
.topbar{
  background:var(--cta);
  color:var(--on-cta);
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  padding:.5rem 1rem;
}
.topbar a{color:var(--on-cta);border-bottom:1px solid rgba(255,255,255,.42)}
.topbar a:hover{border-color:var(--on-cta)}
.topbar .dot{opacity:.45;padding:0 .55rem}

header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(196,207,193,.95);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  border-bottom:1px solid var(--leaf-line);
  transition:box-shadow .3s,background .3s;
}
header.site.scrolled{box-shadow:0 4px 24px rgba(62,74,57,.14);background:rgba(196,207,193,.98)}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:1rem 0;transition:padding .3s;
}
header.site.scrolled .nav{padding:.5rem 0}

.brand{display:flex;align-items:center;gap:.9rem}
.brand img{height:112px;width:auto;transition:height .3s}
header.site.scrolled .brand img{height:76px}
/* the logo already carries the name — the text mark is kept for screen readers
   and small favicon-less fallbacks, but hidden visually */
.brand .mark{line-height:1.05;display:none}
.brand .mark strong{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:1.6rem;color:var(--ink);
}
.brand .mark span{
  display:block;font-size:.6rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--leaf-deep);
}

.menu{display:flex;gap:.3rem;align-items:center}
.menu a{
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);padding:.6rem .95rem;border-radius:999px;
  white-space:nowrap;
  transition:background .25s,color .25s;
}
.menu a:hover{background:var(--leaf-soft);color:var(--leaf-deep)}
.menu a.active{background:var(--leaf-soft);color:var(--leaf-deep);font-weight:500}

.nav-cta{
  background:var(--cta);color:var(--on-cta)!important;
  margin-left:.7rem;padding:.7rem 1.5rem!important;
  box-shadow:0 4px 14px rgba(62,74,57,.22);
}
.nav-cta:hover{background:var(--cta-press)!important;color:var(--on-cta)!important}

/* the Instagram mark sits in the nav as one more item, taking the same pill
   hover as the words beside it — the glyph is drawn in currentColor so it
   follows the link colour rather than needing its own */
.nav-ig{display:inline-flex;align-items:center;justify-content:center;padding:.6rem .75rem}
.nav-ig svg{display:block;width:20px;height:20px}

.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem}
.burger span{display:block;width:26px;height:2px;background:var(--ink);margin:5px 0;transition:.25s}

/* ---------- Type ---------- */
.eyebrow{
  font-size:.76rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--leaf-deep);
}
.display{
  font-family:var(--serif);font-weight:400;line-height:1.15;
  letter-spacing:.01em;
}
/* lifts "shine" out of info@hairshinesausalito.com so the three words read
   apart: darker on light backgrounds, sage on the dark bar and footer */
.hilite{color:var(--leaf-deep);font-weight:500}
footer.site .hilite{color:var(--leaf-deep);font-weight:700}
/* on the dark bar the deep green all but disappears — 1.99:1 — so the weight
   does the marking out instead, against the white it sits among */
.topbar .hilite{color:var(--on-cta);font-weight:700}

/* ---------- Hero (no photography — the type carries it) ---------- */
/* the hero is split: the sand band from the header down past the logo, the
   house sage from there to the buttons. It is the same --grey-band as the
   hours strip below, so the two answer each other. Hard stop, not a fade. */
.hero{
  /* the hard stop is measured off the logo rather than set at 50%, so it always
     lands midway between the logo and the headline instead of drifting into the
     text on narrow screens: the space above the mark + the logo's own height
     (its width divided by the artwork's 649:760 aspect) + half the gap below.
     That divisor tracks the logo file — redraw the mark at another shape and
     this is the number that has to follow it, or the grey stops short.
     --hero-top is that first term and the padding both, so moving the mark
     down carries the split with it. */
  --hero-top:2.2rem;
  --hero-logo-w:min(236px,56vw);
  --hero-split:calc(var(--hero-top) + (var(--hero-logo-w) / 0.854) + 1.1rem);
  position:relative;overflow:hidden;text-align:center;
  padding:var(--hero-top) 0 4.5rem;
  background:linear-gradient(180deg,var(--grey-band) 0 var(--hero-split),var(--leaf) var(--hero-split) 100%);
}
/* the headline carries the page — the logo just signs it */
.hero .hero-logo{width:var(--hero-logo-w);margin:0 auto 2.2rem;opacity:1}
.hero .eyebrow{margin-bottom:1.1rem}
/* the calligraphy stays in the logo above — the headline is set in the serif,
   uppercase and widely tracked, so it reads as a salon rather than a flourish.
   It is also the one piece of type pinned in px, so the page's scale can move
   under it without redrawing the opening line. */
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,3.2vw,38px);
  line-height:1.45;letter-spacing:.13em;text-transform:uppercase;
}
/* one line, all of it in the deep green — the only green that holds up across
   both halves of the split ground, white above and sage below */
.hero h1,.hero h1 .alt{color:var(--leaf-deep)}
.hero h1 .alt{display:inline}
/* narrow phones: ease the tracking so the line still holds together */
@media(max-width:430px){
  .hero h1{font-size:20px;letter-spacing:.1em}
  .hero p{font-size:1rem}
  /* the contact bar is three items of tracked capitals — at this width the
     tracking is what pushes it onto a third line, so it gives before the type */
  .topbar{font-size:.7rem;letter-spacing:.08em;padding:.45rem .8rem}
  .topbar .dot{padding:0 .35rem}
}
/* the welcome line is the only copy under the headline, so it gets room. The
   measure is set to carry it in two lines rather than three — at 640px the
   last two words dropped to a line of their own. balance then evens the pair
   so the second line is not a short tail of the first. */
.hero p{
  max-width:760px;margin:1.6rem auto 2.5rem;
  color:var(--ink-soft);font-size:1.12rem;line-height:1.75;
  text-wrap:balance;
}
.btn-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

.btn{
  display:inline-block;padding:.95rem 2.2rem;border-radius:999px;
  font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;border:1.5px solid var(--leaf-mid);transition:.25s;
}
/* border-color is restated because .btn sets its border from --leaf-mid for
   the ghost buttons; the solid ones take their own token so the two can part
   company. The label is --on-cta, not the ink the rest of the site sits in —
   see the note by the token for why, and what has to change with it. */
.btn-solid{background:var(--cta);border-color:var(--cta);color:var(--on-cta);box-shadow:0 6px 18px rgba(62,74,57,.20)}
.btn-solid:hover{background:var(--cta-press);border-color:var(--cta-press);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--leaf-deep)}
.btn-ghost:hover{background:var(--leaf-soft)}

/* hours strip under the hero — a light grey band rather than white, so it reads
   as its own line of information between the hero and what follows */
.hours-strip{
  background:var(--grey-band);border-top:1px solid var(--grey-line);
  border-bottom:1px solid var(--grey-line);
}
.hours-strip .wrap{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.6rem 2.6rem;padding:1.1rem 0;text-align:center;
}
.hours-strip b{
  font-weight:500;font-size:.82rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--leaf-deep);
}
.hours-strip span{color:var(--ink-soft);font-size:.92rem}
/* Todays Specials opens on the grey band and the strip follows straight after
   it, so on that page the two greys run together and the hours read as more
   hero rather than as their own line. White cuts them apart. The home page
   keeps the grey, where the strip is meant to answer the band behind the logo
   rather than separate from it. The hairline goes to the tone every other
   white surface here is edged with. */
.hours-strip.white{
  background:var(--white);
  border-top-color:var(--leaf-line);border-bottom-color:var(--leaf-line);
}

/* ---------- Sections ---------- */
.section{padding:4.5rem 0}
.section.tint{background:var(--leaf-wash)}
.section.soft{background:var(--leaf-mist)}
/* the same light grey as the hero band and the interior page heads */
.section.band{background:var(--grey-band)}
.section-head{text-align:center;max-width:700px;margin:0 auto 3rem}
/* a head with nothing under it does not need the gap it leaves for content */
.section-head:last-child{margin-bottom:0}
.section-head .eyebrow{margin-bottom:.7rem}
.section-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.85rem,4vw,2.7rem);line-height:1.25;letter-spacing:.02em;
}
.section-head p{color:var(--ink-soft);margin-top:.9rem}
/* Section headings set as artwork, in the same hand as the logo, rather than in
   the nearest script face. Each keeps its heading element and its alt text, so
   the page still has a heading outline; only the rendering changes.

   Every mark is normalised on pen width in the artwork itself, so a single
   scale factor per tier keeps the lettering matching across them.

   Two tiers, and the factor is the whole of it:
     large   0.753 x the file — the h1 that names a page, and Minutes from the
             Waterfront, which is a section head but the largest script on a
             home page whose own h1 is set in type rather than drawn
     small   0.5 x the file — the rest of the section heads and the smaller
             marks inside the price card, which share their band with other
             things

   Within a tier the lettering is one size, so the widths below differ only
   because the phrases do — the same way one font size gives a short heading a
   short line. Do not even them up: matching widths is exactly what would make
   the lettering inconsistent. */
.title-mark{display:block;margin:0 auto;max-width:100%;height:auto}
.m-book-now{width:205px}
.m-haircuts{width:127px}
.m-styling-and-color{width:185px}
.m-in-the-chair{width:146px}
.m-lets-connect{width:288px}
.m-about{width:245px}
.m-cancellations{width:315px}
.m-before-and-after-snaps{width:518px}
.m-minutes-from-the-waterfront{width:593px}
.m-ready-to-shine{width:162px}
.m-todays-specials{width:360px}
/* headings inside the price card are ranged left with the prices, not centred */
.price-card .title-mark{margin-left:0}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
/* a prose block with nothing beside it: the wrap is drawn for two columns, so
   on its own the copy would run the full 1180px. It keeps a reading measure
   and centres instead, and the section's own ground fills either side. */
.prose-solo{max-width:760px;margin:0 auto}

.card{
  background:var(--white);padding:2.1rem 1.8rem;border-radius:14px;
  border:1px solid var(--leaf-line);text-align:center;
  transition:transform .25s,box-shadow .25s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card h3{font-family:var(--serif);font-size:1.45rem;font-weight:400;margin-bottom:.6rem}
.card p{color:var(--ink-soft);font-size:.95rem}
.card .price{
  display:block;margin-top:1rem;color:var(--leaf-deep);
  letter-spacing:.1em;font-size:.92rem;font-weight:500;
}

.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.6vw,2.4rem);letter-spacing:.02em;margin-bottom:1.1rem}
.prose h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin-bottom:.6rem}
.prose p{color:var(--ink-soft);margin-bottom:1.1rem}
.prose ul{list-style:none;margin:1.2rem 0}
.prose li{padding-left:1.6rem;position:relative;margin-bottom:.6rem;color:var(--ink-soft)}
.prose li::before{content:"";position:absolute;left:0;top:.7em;width:9px;height:9px;background:var(--leaf);border-radius:50%}

.frame{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:var(--leaf-soft)}
.frame img{width:100%;height:100%;object-fit:cover}

.note{
  background:var(--white);border:1px dashed var(--leaf);
  border-radius:12px;padding:1.1rem 1.3rem;color:var(--ink-soft);
  font-size:.93rem;
}
.note strong{color:var(--leaf-deep)}
/* the "Related" note closes each policy page directly above the footer, so it
   takes the footer's own grey rather than sitting on white between two bands */
.note.related{background:var(--grey-band)}

/* ---------- Photo rails (gallery pages only) ---------- */
.marquee{
  overflow:hidden;position:relative;
  padding:2.5rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{
  display:flex;gap:1.25rem;width:max-content;
  animation:slide 143s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track figure{
  position:relative;flex:0 0 auto;overflow:hidden;border-radius:10px;
  background:var(--leaf-soft);box-shadow:var(--shadow);
}
.marquee-track img{height:300px;width:auto;object-fit:cover;transition:transform .6s ease}
.marquee-track figure:hover img{transform:scale(1.04)}
.marquee.large .marquee-track img{height:240px}
/* the rail drifts right to left. Halving the photos halved the distance the
   track covers, so this duration is slower again on top of that. */
.marquee.large .marquee-track{animation-duration:300s}

@keyframes slide{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* ---------- Gallery grid ---------- */
.gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.2rem;
}
.gallery figure{
  position:relative;overflow:hidden;border-radius:12px;
  background:var(--leaf-soft);box-shadow:var(--shadow);
}
.gallery img{width:100%;height:340px;object-fit:cover;transition:transform .6s ease}
.gallery figure:hover img{transform:scale(1.05)}

/* ---------- Testimonials (slow drifting rails) ---------- */
.quotes{
  overflow:hidden;position:relative;padding:.6rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.quote-track{
  display:flex;gap:1.2rem;width:max-content;
  animation:slide 150s linear infinite;
}
.quotes.reverse .quote-track{animation-direction:reverse;animation-duration:175s}
.quotes:hover .quote-track{animation-play-state:paused}
.quote{
  flex:0 0 auto;width:330px;background:var(--white);
  border:1px solid var(--leaf-line);border-radius:14px;
  padding:1.4rem 1.5rem;box-shadow:var(--shadow);
  border-top:3px solid var(--leaf);
}
.quote .stars{color:var(--star);font-size:.95rem;letter-spacing:.12em;margin-bottom:.6rem}
.quote p{font-size:.94rem;color:var(--ink-soft);margin-bottom:.9rem}
.quote .who{font-family:var(--serif);font-size:1.12rem;font-weight:400;color:var(--ink)}
.quote .svc{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--leaf-deep)}

/* ---------- Price list ---------- */
.price-card{
  background:var(--white);border:1px solid var(--leaf-line);border-radius:16px;
  box-shadow:var(--shadow);padding:2.2rem;
}
.price-card h3{
  font-family:var(--serif);font-size:1.6rem;font-weight:400;
  padding-bottom:.7rem;margin-bottom:.4rem;border-bottom:1px solid var(--leaf-line);
}

.price-list{list-style:none}
.price-list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.4rem;
  padding:.95rem 0;border-bottom:1px dashed var(--leaf-line);
}
.price-list li:last-child{border-bottom:0}
.price-list .name{font-size:1.02rem}
.price-list .name small{display:block;font-size:.83rem;color:var(--ink-soft);letter-spacing:0;text-transform:none}
/* where a service carries two notes — the price variant and then the condition
   on booking it — they need parting, or they read as one run-on line */
.price-list .name small + small{margin-top:.3rem}
.price-list .amt{
  white-space:nowrap;font-weight:500;color:var(--leaf-deep);letter-spacing:.06em;
}

/* ---------- Booking ---------- */
.booking{
  background:var(--white);border:1px solid var(--leaf-line);
  border-radius:16px;box-shadow:var(--shadow);
  padding:2.2rem;max-width:940px;margin:0 auto;
}
.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}

.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.cal-head strong{font-family:var(--serif);font-size:1.35rem;font-weight:400}
.cal-nav{
  background:var(--leaf-mist);border:1px solid var(--leaf-line);
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  font-size:1rem;color:var(--leaf-deep);line-height:1;
}
.cal-nav:hover{background:var(--leaf);color:var(--white)}
.cal-nav:disabled{opacity:.3;cursor:not-allowed}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{
  text-align:center;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);padding:.4rem 0;
}
.cal-day{
  aspect-ratio:1;border:1px solid transparent;background:var(--leaf-mist);
  border-radius:8px;cursor:pointer;font-family:var(--sans);font-size:.9rem;
  color:var(--ink);transition:.18s;
}
/* picking a date lands on the same grey as the hours strip under the hero, so
   the booking card answers that band rather than introducing a third green.
   The grey alone is too close to the resting cell to carry the selection, so a
   deep-green rule and the heavier weight are what actually mark it. */
.cal-day:hover:not(:disabled){background:var(--grey-band)}
.cal-day:disabled{background:transparent;color:#BFC6BC;cursor:not-allowed}
.cal-day.selected{background:var(--grey-band);border-color:var(--leaf-deep);font-weight:600}
.cal-day.empty{background:transparent;cursor:default}

.field{margin-bottom:1rem}
.field label{
  display:block;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem;
}
.field input,.field select,.field textarea{
  width:100%;padding:.75rem .9rem;border:1px solid var(--leaf-line);
  border-radius:8px;font-family:var(--sans);font-size:.95rem;
  background:var(--white);color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--leaf);box-shadow:0 0 0 3px rgba(196,207,193,.55);
}
/* quarter-hour steps make this list far too long to sit inline, so it scrolls
   in place; the height stops on a part-row so it reads as scrollable */
.slots{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
  max-height:11.5rem;overflow-y:auto;padding-right:.35rem;
}
.slot{
  padding:.55rem .3rem;border:1px solid var(--leaf-line);background:var(--white);
  border-radius:8px;cursor:pointer;font-size:.82rem;font-family:var(--sans);transition:.18s;
}
.slot:hover{background:var(--leaf-mist)}
.slot.selected{background:var(--grey-band);border-color:var(--leaf-deep);font-weight:600}
.slots-label{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:1.3rem 0 .45rem;
}
.slots-label em{font-style:normal;text-transform:none;letter-spacing:0;font-size:.8rem;color:var(--leaf-deep)}

/* the booking card follows its heading into the deep green — month label, day
   letters, dates, slot labels, the times and the notes. The disabled dates
   stay grey so they still read as unavailable rather than as ordinary dates. */
#book .cal-head strong,
#book .cal-dow,
#book .cal-day,
#book .slots-label,
#book .slot,
#book .booking-note,
#book .field label,
#book .summary{color:var(--leaf-deep)}
#book .cal-day:disabled{color:#AFB8AB}

.booking .btn{width:100%;margin-top:.6rem}
.booking-note{font-size:.78rem;color:var(--ink-soft);text-align:center;margin-top:.9rem}
/* the line under the booking button that points at the policies: the same
   small print as the note above it, a little tighter to the button, with the
   links underlined so they read as links rather than as emphasis */
.policy-note{margin-top:.5rem;line-height:1.5}
.policy-note a{border-bottom:1px solid var(--leaf)}
.policy-note a:hover{border-bottom-color:var(--leaf-deep)}
.summary{
  background:var(--leaf-mist);border-left:3px solid var(--leaf);
  padding:.8rem 1rem;border-radius:8px;font-size:.9rem;margin-bottom:1rem;
}

/* ---------- Contact ---------- */
.info-row{display:flex;gap:1rem;padding:1.2rem 0;border-bottom:1px solid var(--leaf-line)}
.info-row .ic{
  flex:0 0 44px;height:44px;border-radius:50%;background:var(--leaf-soft);
  display:grid;place-items:center;color:var(--leaf-deep);font-size:1.1rem;
}
.info-row h4{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.info-row p,.info-row a{font-size:1.04rem;color:var(--ink);word-break:break-word}
.info-row a:hover{color:var(--leaf-deep)}

.sub-head{
  margin:2rem 0 .8rem;font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:500;
}
.hours{list-style:none}
.hours li{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--leaf-line);font-size:.95rem}
.hours span:last-child{color:var(--ink-soft)}
/* the two days the salon does not open: set apart from the times so the eye
   catches them scanning the column rather than reading every row */
.hours .shut{color:var(--leaf-deep);font-weight:500;letter-spacing:.06em}

/* ---------- Footer ---------- */
/* the footer is the same light grey as the band behind the hero logo, so the
   page opens and closes on the same ground the mark sits on. Everything in
   here stays in the ink; hierarchy comes from size and weight rather than from
   fading the color out. */
footer.site{background:var(--grey-band);color:var(--ink);padding:3.5rem 0 1.5rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:2.5rem}
footer.site h4{
  font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin-bottom:1rem;font-weight:700;
}
footer.site p,footer.site a{color:var(--ink);font-size:1.02rem}
footer.site a{border-bottom:1px solid transparent}
footer.site a:hover{border-bottom-color:var(--ink)}
footer.site ul{list-style:none}
footer.site li{margin-bottom:.5rem}
.foot-logo{width:146px;margin-bottom:1.1rem}
.foot-bottom{
  border-top:1px solid rgba(35,40,33,.22);margin-top:2.5rem;padding-top:1.3rem;
  text-align:center;font-size:.9rem;color:var(--ink);
}
.foot-bottom .credit{color:var(--ink);font-size:.95rem;letter-spacing:.06em;margin-bottom:.6rem}
.foot-bottom .credit strong{font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* ---------- Page hero (interior) ---------- */
/* the interior pages open on the same light grey the home page puts behind the
   logo, and that the footer closes on — so every page is bracketed by the one
   band rather than each opening on its own sage wash */
/* every interior hero holds the same band, whatever sits inside it — the marks
   are hand-lettered and each is tuned to its own optical size, so left to the
   copy alone the grey would run 196px on About and 226px on Contact. The
   min-height fixes the band and centres whatever it holds; the padding stays
   as the floor if a mark ever outgrows it. */
.page-hero{
  display:flex;align-items:center;
  min-height:230px;
  padding:3.6rem 0;text-align:center;
  background:var(--grey-band);
}
/* interior page titles match the home hero */
.page-hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.8rem,4vw,2.9rem);
  line-height:1.3;letter-spacing:.16em;text-transform:uppercase;
}
.page-hero p{color:var(--ink-soft);max-width:620px;margin:.8rem auto 0}


/* ---------- Policy pages ---------- */
/* Privacy, Terms and Cancellation carry no artwork and no photo rails — they
   are one column of copy on the page ground, opening on the same grey band as
   every other interior page. All they add is a dateline over the text, room
   between one clause and the next, and the row of links in the footer that
   points at them from everywhere else. */
/* :not(.btn) matters — a pill inside a prose block (the Gallery link on the
   home page, the two on the cancellation page) already carries a 1.5px border
   on all four sides, and a bare `.prose a` rule redraws just its bottom edge
   at a different width and colour, which breaks the rounded outline open. */
.prose a:not(.btn){color:var(--leaf-deep);border-bottom:1px solid var(--leaf)}
.prose a:not(.btn):hover{border-bottom-color:var(--leaf-deep)}
/* a policy runs to a dozen headings rather than the one the two-column blocks
   carry, so each clause needs the air above it that a lone heading never did */
.prose.legal h2{margin-top:2.8rem}
.prose.legal h2:first-child{margin-top:0}
.prose.legal h3{margin-top:1.6rem}
.prose.legal .note{margin:1.4rem 0}
.prose.legal p:last-child{margin-bottom:0}
.updated{
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;margin-bottom:2rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--leaf-line);
}
/* the policy links sit in the closing line of the footer rather than in the
   Explore column — that column is the salon, this is the small print */
/* laid out as flex items rather than a run of text: the three links sit in the
   markup with no whitespace between them, so a text line has nowhere to break
   and would either split "Terms of Service" down the middle or, once the names
   are held together, run off the side of a phone. Flex gives it a break
   opportunity between each name and the gap does the spacing. */
.legal-links{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:.15rem .55rem;margin-bottom:.6rem;font-size:.9rem;
}
.legal-links a{white-space:nowrap}
.legal-links .dot{opacity:.45;padding:0}

@media (prefers-reduced-motion:reduce){
  .marquee-track,.quote-track{animation:none}
  .marquee,.quotes{overflow-x:auto}
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .grid-2,.booking-grid{grid-template-columns:1fr;gap:2rem}
  .foot-grid{grid-template-columns:1fr;gap:2rem}
  .burger{display:block}
  .menu{
    position:absolute;top:100%;left:0;right:0;background:var(--leaf-mist);
    flex-direction:column;gap:0;padding:0;max-height:0;overflow:hidden;
    border-bottom:1px solid var(--leaf-line);transition:max-height .3s ease;
  }
  .menu.open{max-height:460px}
  .menu a{width:100%;text-align:center;padding:1rem;border-radius:0;border-bottom:1px solid var(--leaf-line)}
  .nav-cta{margin-left:0;border-radius:0!important;box-shadow:none}
  .marquee-track img{height:180px}
  .marquee.large .marquee-track img{height:190px}
  .gallery img{height:280px}
  .quote{width:270px}
  .booking,.price-card{padding:1.5rem}
  .brand img{height:82px}
  header.site.scrolled .brand img{height:62px}
}

/* narrow phones again, after the 900px block so these win on source order:
   the header is sticky, so its height is taken off every screenful — the mark
   comes down one more step to leave the page more room */
@media(max-width:430px){
  .brand img{height:68px}
  header.site.scrolled .brand img{height:56px}
}

/* phones: the layout is one column by here, and two pills each sized to their
   own label read as ragged once they stack. They take a single width instead,
   which is also what makes the pair land under the thumb. Sections lose their
   second column at this width too, so the desktop padding is what would leave
   the page feeling empty — it comes in a step. */
@media(max-width:600px){
  /* the large marks are drawn at 572-593px, so on a phone they hit
     max-width:100% and fill the wrap corner to corner, which reads as
     something that did not fit rather than something centred. Holding them
     inside the measure gives the lettering air on both sides again. */
  .page-hero .title-mark,.section-head .title-mark{max-width:82%}
  /* the contact bar wraps to two lines at this width and the separator was
     landing at the head of the second one. Laying the three items out as flex
     items lets the gap do the separating and the dots come out. */
  .topbar{display:flex;flex-wrap:wrap;justify-content:center;gap:.1rem .8rem}
  .topbar .dot{display:none}
  /* two short centred lines each: without this the credit leaves "PEREZ."
     stranded on a line of its own */
  .foot-bottom .credit{text-wrap:balance}
  /* the policy row wraps to two lines here, which leaves a separator hanging
     at the end of the first — the gap separates them well enough without it */
  .legal-links .dot{display:none}
  .legal-links{gap:.15rem 1rem}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%;text-align:center}
  .section{padding:3rem 0}
  /* at the larger type the longest label ("send booking request") no longer
     holds one line inside the desktop padding and tracking, so both give. It
     is the measure that decides this: inside the booking card on a 390px
     screen the label wants ~256px and the button offers ~251px. */
  .btn{padding:.95rem 1rem;letter-spacing:.1em}
}

/* the six nav items are set in tracked capitals, so at the larger type they
   run out of room before the burger takes over at 900px. The tracking and the
   padding either side of each item give across that band; the labels
   themselves are held on one line by white-space above. */
@media(min-width:901px) and (max-width:1150px){
  .menu a{letter-spacing:.1em;padding:.6rem .55rem}
  .nav-cta{margin-left:.4rem;padding:.7rem 1rem!important}
}