/* Shared by index.html and the package pages (packages/*.html):
   palette, header bar + package rail, the contact dock with its number
   chooser, and the footer. Load after base.css. Moved out of index.html on 2026-10-02. */

:root {
  /* Palette (2026-10-03, client references: "Smoke #D1D1CC", "Mahogany
     #351D14", a cool greige, a grey-tile bathroom): cooler beiges, mahogany
     as the one dark accent.
     Before (warm stone): bg #E8E1D7, surface #F1ECE5, ink #28231F, muted
     #81786F, line #B7ADA1, accent #5A372A, floor #462C24. */
  --sc-canvas:      #E3E1DB;
  --sc-surface:     #EDECE8;
  --sc-ink:         var(--pf-floor);
  --sc-ink-soft:    color-mix(in oklab, var(--pf-floor) 55%, transparent);
  --sc-accent:      #2C1F14;   /* warm dark brown = the gallery/footer colour (client 2026-10-05; was chocolate #261F1E, before that mahogany #351D14) */
  --sc-accent-ink:  #F2E6D8;   /* palette cream: light text on the browns */
  --pf-line:        #BEBAB2;
  --pf-accent-soft: #8C8579;   /* palette taupe */
  --sc-hairline:        color-mix(in oklab, var(--pf-line) 60%, transparent);
  --sc-hairline-strong: var(--pf-line);
  /* One treatment for all project photography (room, views, thumbnails,
     gallery, package pages; not the About portrait, which the client wants
     unfiltered): a little less colour and contrast, plus a faint warm tint
     laid over it (a pseudo-element where the markup allows). */
  --pf-photo-filter: saturate(0.78) contrast(0.96) brightness(0.98);
  --pf-photo-tint:   rgba(110, 106, 98, 0.05);   /* cooler than before */
  /* The dark bands (gallery, footer): mahogany. */
  --pf-floor:       #2C1F14;   /* warm dark brown: gallery, footer, package-name bands (client 2026-10-05; was #261F1E) */
  /* The client's palette, for the background transitions between sections. */
  --pal-cream:  #F2E6D8;
  --pal-stone:  #BFB8AA;
  --pal-taupe:  #8C8579;
  --pal-cocoa:  #594B43;

  /* Type (2026-10-04, client: "like the lettering in the intro"): one light,
     wide geometric sans, Montserrat, for everything. css/type.css sets the
     hierarchy. */
  --pf-display:      "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --pf-text:         "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --pf-sans:         var(--pf-text);
  --sc-font-display: var(--pf-display);
  --sc-font-text:    var(--pf-text);
  --pf-serif:        var(--pf-text);
}

/* ------------------------------------------------------------- nav bar -- */
.site-bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: var(--sc-4) var(--sc-gutter);
  min-height: 4.75rem; box-sizing: border-box;
  background: var(--sc-canvas);
}
.site-bar__mark {
  font-family: var(--pf-serif); font-weight: 500;
  font-size: 1.1rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sc-ink); text-decoration: none;
}
.site-bar__mark span { color: var(--sc-accent); }

/* Package rail: lives inside the fixed header, not floating over the
   page, so it can never collide with a heading below. Real in-page
   navigation (each dot jumps to that package) and the one piece of
   chrome present for the whole scroll, so the four packages read as
   one ladder. Hidden below 1000px; each act's own eyebrow carries the
   same "Package 0X" wayfinding on narrower screens. */
/* Centred on the bar itself (not by space-between), so it stays put now
   that the bar holds only the logo and this. */
/* Quieter (2026-10-03): smaller, less tracking, muted; the active item is
   only darker, no weight or underline. */
.pf-rail {
  display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem);
  justify-self: center;
}
.pf-rail__item {
  position: relative; display: flex; align-items: center; gap: var(--sc-2);
  text-decoration: none;
}
.pf-rail__label {
  font-family: var(--pf-serif); font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  color: var(--pf-accent-soft);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.pf-rail__item:hover .pf-rail__label { color: var(--sc-ink); }
.pf-rail__item.is-active .pf-rail__label { color: var(--sc-ink); }
@media (max-width: 1000px) { .pf-rail { display: none; } }

/* ------------------------------------------------------ contact dock -- */
/* Two buttons fixed to the bottom of the screen on every scroll position:
   call, and book a session on Calendly. Desktop: a pair centred at the
   bottom; phones: two halves of one bar across the bottom. */
.pf-dock {
  position: fixed; z-index: var(--sc-z-chrome);
  transition: opacity 0.5s var(--sc-ease-out), visibility 0.5s;
  left: 50%; bottom: clamp(1.6rem, 4.5vh, 2.6rem); transform: translateX(-50%);
  display: flex; gap: 0.75rem;
}
/* Pills (client 2026-10-04: oval, no sharp corners, a nicer hover, a little
   higher). Hover: the button lifts slightly and casts a soft shadow, a fill
   grows out from the centre behind the text (::before) and the icon nudges.
   Transform and opacity only, so it stays smooth over the room video. */
:is(.pf-dock, .pf-cta) a {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem;
  min-height: 2.9rem; padding: 0 1.7rem; border-radius: 999px; box-sizing: border-box;
  font-size: 0.64rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: transform 0.5s var(--sc-ease-out), box-shadow 0.5s var(--sc-ease-out),
              color 0.4s var(--sc-ease-out), border-color 0.4s var(--sc-ease-out);
}
:is(.pf-dock, .pf-cta) a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  opacity: 0; transform: scale(0.4, 0.2);
  transition: transform 0.55s var(--sc-ease-out), opacity 0.4s var(--sc-ease-out);
}
.pf-dock svg { width: 14px; height: 14px; flex: none; stroke-width: 1.3; transition: transform 0.5s var(--sc-ease-out); }
@media (hover: hover) {
  :is(.pf-dock, .pf-cta) a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgb(38 31 30 / 0.4); }
  :is(.pf-dock, .pf-cta) a:hover::before { opacity: 1; transform: none; }
  :is(.pf-dock, .pf-cta) a:hover svg { transform: translateX(-2px) rotate(-8deg); }
}
:is(.pf-dock, .pf-cta) a:active { transform: scale(0.97); transition-duration: 0.15s; }
:is(.pf-dock, .pf-cta) a:focus-visible { outline: 1px solid var(--sc-ink); outline-offset: 3px; }
/* Solid, no backdrop blur: the button floats over the room video, and
   re-blurring the moving video behind it every frame caused 50-100 ms
   hitches on the client's laptop (Iris Xe), measured: 17 slow frames per
   pass with the blur, 2 without. */
.pf-dock__call {
  background: var(--pal-stone); color: #fff;       /* stone #BFB8AA, white text, client 2026-10-04 */
  border: 1px solid color-mix(in oklab, var(--pal-taupe) 45%, var(--pal-stone));
}
.pf-dock__call::before { background: var(--pf-floor); }      /* fills chocolate, text turns cream */
@media (hover: hover) { .pf-dock__call:hover { color: var(--pal-cream); border-color: var(--pf-floor); } }
/* Number chooser: "Get in touch" and the WhatsApp links open this small
   menu with both phone numbers (script "Number chooser"). */
.pf-choose {
  position: fixed; z-index: calc(var(--sc-z-chrome) + 1);
  min-width: 15.5rem; padding: 0.5rem;
  background: var(--sc-canvas); color: var(--sc-ink);
  border: 1px solid var(--pf-line); border-radius: 3px;
  box-shadow: 0 10px 30px rgb(40 35 31 / 0.08);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out);
}
.pf-choose.is-open { opacity: 1; transform: none; pointer-events: auto; }
.pf-choose__head {
  margin: 0; padding: 0.55rem 0.75rem 0.4rem;
  font-size: 0.62rem; font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.pf-choose a {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0.75rem; border-radius: 2px;
  color: var(--sc-ink); text-decoration: none; font-size: 1rem; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.pf-choose a span { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink-soft); }
.pf-choose a:hover, .pf-choose a:focus-visible { background: color-mix(in oklab, var(--sc-ink) 7%, transparent); outline: none; }

/* Primary: the accent. A faint light edge keeps it readable over the dark
   About band and footer. */
.pf-dock__book { background: var(--sc-accent); color: var(--sc-accent-ink); border: 1px solid color-mix(in oklab, var(--pal-stone) 35%, var(--sc-accent)); }
.pf-dock__book::before { background: var(--pal-cocoa); }   /* hover: cocoa, so it lifts off the chocolate background too */
@media (max-width: 600px) {
  .pf-dock { left: var(--sc-gutter); right: var(--sc-gutter); transform: none; bottom: calc(1.25rem + env(safe-area-inset-bottom)); gap: 0.55rem; }
  :is(.pf-dock, .pf-cta) a { flex: 1; min-height: 3rem; padding: 0 0.8rem; letter-spacing: 0.14em; font-size: 0.62rem; }
}
/* The reviews section has the same two buttons (.pf-cta): the dock steps
   aside while they are on screen (html.cta-on, js/home.js). */
html.cta-on .pf-dock { opacity: 0; visibility: hidden; }
/* Room under the dock at the very end of the page, so it never covers the footer text. */
footer.pf-site-foot { padding-bottom: calc(var(--sc-8) + 6rem); }

/* ---------------------------------------------------------- site foot -- */
/* The floor colour, continued: #462C24 was sampled directly from the
   parquet at her feet, so the fade above walks straight into this
   without a seam. */
.pf-site-foot {
  background: color-mix(in oklab, var(--pf-floor) 72%, var(--sc-canvas));
  padding: var(--sc-8) var(--sc-gutter);
}
.pf-site-foot__inner {
  max-width: 40rem; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sc-5); text-align: center;
}
.pf-site-foot__brand {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-surface);
}
.pf-social { display: flex; gap: var(--sc-5); }
.pf-social a {
  display: flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--sc-surface) 30%, transparent);
  color: var(--sc-surface);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out),
              background var(--sc-d-fast) var(--sc-ease-out);
}
.pf-social a:hover {
  border-color: color-mix(in oklab, var(--sc-surface) 60%, transparent);
  background: color-mix(in oklab, var(--sc-surface) 10%, transparent);
}
.pf-social svg { width: 18px; height: 18px; }
.pf-site-foot__contact {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-2) var(--sc-6);
  font-size: 0.95rem;
}
.pf-site-foot__contact a { color: var(--sc-surface); text-decoration: none; }
.pf-site-foot__contact a:hover { opacity: 0.7; }
.pf-site-foot__copy {
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-normal);
  color: color-mix(in oklab, var(--sc-surface) 55%, transparent);
}
/* Privacy, cookies, terms: tiny spaced capitals over the copyright line. */
.pf-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-2) var(--sc-6); }
.pf-legal a, .pf-legal button {
  font-size: 0.6rem; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-surface) 72%, transparent); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;   /* "Cookie settings" is a button (js/consent.js) */
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.pf-legal a:hover, .pf-legal button:hover, .pf-legal a[aria-current] { color: var(--sc-surface); }
.pf-legal a:focus-visible, .pf-legal button:focus-visible { outline: 1px solid var(--sc-surface); outline-offset: 4px; }

/* ------------------------------------------------------- package badge -- */
/* "Signature · Best seller" on Donna Branka (home page title, package page):
   tiny spaced capitals in the accent, in a hairline frame. */
.pf-badge {
  display: inline-block; margin: 0 0 0 0.9em; padding: 0.45em 0.8em 0.4em;
  border: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent);
  color: var(--sc-accent);
  font-size: 0.62rem; font-weight: 500; line-height: 1; letter-spacing: 0.2em;
  text-transform: uppercase; white-space: nowrap; vertical-align: 0.15em;
}
p.pf-badge { margin: 1.25rem 0 0; }