/* Home page (index.html). Loaded after base.css, strip-gallery.css, site.css
   and intro.css; type.css comes last and sets the type. */

/* ------------------------------------------------------------------ hero -- */
/* Client 2026-10-04 (ref: a services page whose menu sits on an image band):
   the kitchen picture across the top with the logo and the four packages on
   it; the first package and the room start below it, after some air. The
   fixed header is hidden while the hero is on screen (html.hero-on). */
:root { --hero-gap: clamp(2.5rem, 9vh, 5.5rem); }   /* air under the hero, room for the package index (0 on phones) */
.pf-hero {
  z-index: calc(var(--sc-z-copy) + 1);        /* over package 01's fixed text: it is uncovered as the hero leaves */
  position: relative; overflow: hidden;
  height: clamp(18rem, 48svh, 36vw);          /* client: shorter (twice), the top cut away */
  margin-bottom: var(--hero-gap);
  color: #F6F3EE;
}
.pf-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 78%;   /* crop from the top, keep the counter and stools */
}
/* A soft shade behind the light text, top and bottom only (the picture is
   bright, so the bottom one is fairly strong and reaches up behind the items). */
.pf-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgb(36 27 22 / 0.46) 0, rgb(36 27 22 / 0.12) 20%, transparent 32%, transparent 38%, rgb(36 27 22 / 0.42) 70%, rgb(36 27 22 / 0.62) 100%);
}
.pf-hero__top, .pf-hero__nav { position: absolute; z-index: 1; left: 0; right: 0; padding-inline: var(--sc-gutter); }
.pf-hero__top {
  top: 0; display: flex; justify-content: space-between; align-items: center;
  min-height: 4.75rem;
}
.pf-hero__mark {
  font-size: 0.74rem; font-weight: 400; letter-spacing: 0.34em; text-transform: uppercase;
  color: inherit; text-decoration: none;
}
.pf-hero__place { font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.8; }
.pf-hero__nav {
  bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem clamp(1.5rem, 3vw, 3.5rem); padding-bottom: clamp(1.75rem, 6vh, 3.5rem);
}
/* Each item: a hairline that fills in on hover, name and number on one
   line, a short line of text under them. */
.pf-hero__nav a {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem 0.75rem;
  padding-top: 1.15rem; color: inherit; text-decoration: none;
  background:
    linear-gradient(#F6F3EE, #F6F3EE) 0 0 / 0 1px no-repeat,
    linear-gradient(rgb(246 243 238 / 0.4), rgb(246 243 238 / 0.4)) 0 0 / 100% 1px no-repeat;
  transition: background-size 0.7s var(--sc-ease-out);
}
/* Client: the three titles bigger and easier to see. */
.pf-hero__name {
  font-size: clamp(0.88rem, 0.62rem + 0.5vw, 1.1rem); font-weight: 400; letter-spacing: 0.42em;
  text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 1px 14px rgb(36 27 22 / 0.35);
}
.pf-hero__n { font-size: 0.68rem; letter-spacing: 0.2em; opacity: 0.8; white-space: nowrap; }
.pf-hero__mark { font-size: 1rem; font-weight: 500; text-shadow: 0 1px 3px rgb(36 27 22 / 0.35), 0 1px 16px rgb(36 27 22 / 0.45); }
.pf-hero__line {
  grid-column: 1 / -1; max-width: 21em;
  font-size: 0.84rem; font-weight: 400; line-height: 1.7; letter-spacing: 0.04em; opacity: 0.88;
  text-shadow: 0 1px 10px rgb(36 27 22 / 0.35);
  transition: opacity 0.5s var(--sc-ease-out);
}
.pf-hero__nav a:hover { background-size: 100% 1px, 100% 1px; }
.pf-hero__nav a:hover .pf-hero__line { opacity: 1; }
.pf-hero a:focus-visible { outline: 1px solid #F6F3EE; outline-offset: 6px; }
@media (max-width: 900px) {
  :root { --hero-gap: 0px; }
  .pf-hero { height: 44svh; min-height: 21rem; }
  .pf-hero__place { display: none; }
  .pf-hero__nav { gap: 1.4rem 1rem; padding-bottom: 1.75rem; }
  .pf-hero__line { font-size: 0.7rem; line-height: 1.55; }
  .pf-hero__name { font-size: min(0.68rem, 2.8vw); letter-spacing: 0.42em; }  /* same spacing as desktop; shrinks a little on narrow phones so MANAGE fits */
  .pf-hero__n { display: none; }                  /* no room for the numbers */
}
/* The fixed header waits until the hero has scrolled away. */
.site-bar { transition: opacity 0.6s ease, transform 0.7s var(--sc-ease-out); }
html.hero-on .site-bar { opacity: 0; transform: translateY(-100%); pointer-events: none; }

/* Reveal once on entry (js/home.js adds .sc-in). */
[data-sc-in] {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
[data-sc-in].sc-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-sc-in] { transform: none; transition-duration: 220ms; }
}

/* ─── Package intro ───────────────────────────────────────────────────────── */
.pf-sw-intro {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  min-height: clamp(12rem, 28svh, 22rem);
  padding: 2rem var(--sc-gutter) 5rem;
}
.pf-sw-intro__copy { width: 100%; text-align: center; }
.pf-sw-intro__copy .pf-h2 { margin: 0; font-size: clamp(1.15rem, 0.8rem + 1vw, 1.9rem); color: var(--pf-floor); }
.pf-sw-intro__copy .pf-body { margin: 0.5rem auto 0; white-space: nowrap; display: block; text-align: center; color: var(--pf-floor) !important; }
.pf-sw-intro__arrow {
  display: flex; justify-content: center;
  position: absolute; bottom: 0.5rem; left: 0; right: 0;
  color: var(--pf-floor); opacity: 0.65;
  animation: pf-bounce 1.8s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
.pf-sw-intro__arrow--gone {
  opacity: 0 !important;
  pointer-events: none;
  animation: none;
}
@keyframes pf-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(11px); }
}

/* ─── Package switcher ────────────────────────────────────────────────────── */
/* Left: sticky numbered rail; Right: photo + copy panel.
   Desktop ≥ 901px; Mobile collapses to single column. */
.pf-sw {
  display: grid; grid-template-columns: 300px minmax(0,1fr);
  gap: clamp(2rem,4vw,4rem);
  padding: 0 var(--sc-gutter) clamp(3rem,6vw,5rem);
  scroll-margin-top: 4.75rem;
}

/* Rail — sticky left column */
.pf-sw__rail {
  position: sticky; top: calc(4.75rem + 1.5rem);
  align-self: stretch;
  display: flex; flex-direction: column;
  padding: 1.5rem 1rem;
  z-index: 1;
  height: calc(100svh - 4.75rem - 3rem);
}
.pf-sw__label {
  display: block;
  font-size: 0.55rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: color-mix(in oklab, var(--pf-floor) 45%, transparent);
  margin: 0 0 1rem 0.25rem;
}

.pf-sw__tabs { display: flex; flex-direction: column; flex: 1; gap: 0; padding-left: 0; }
.pf-sw__track, .pf-sw__fill, .pf-sw__ind, .pf-sw__hlbox { display: none; }

.pf-sw__tab {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0.5rem 0.25rem;
  text-align: left; cursor: pointer;
  background: none; border: none; box-shadow: none;
  color: #000;
  transition: transform 0.3s var(--sc-ease-out), opacity 0.25s;
}
.pf-sw__tab::before { display: none; }
.pf-sw__tab:hover { transform: translateX(6px); }
.pf-sw__tab[aria-selected="true"] { color: #000; }
.pf-sw__tab:focus-visible { outline: 1px solid color-mix(in oklab, var(--pf-floor) 50%, transparent); outline-offset: 3px; border-radius: 4px; }

/* Hide thumbnail and arrow */
.pf-sw__tthumb { display: none; }
.pf-sw__tgo { display: none; }

/* Tab text */
.pf-sw__ttext { display: grid; gap: 2px; min-width: 0; }
.pf-sw__tn { font-size: 0.55rem; letter-spacing: 0.2em; opacity: 0.65; }
.pf-sw__tname { font-size: 1.15rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 300; }
.pf-sw__tshort { display: none; }
.pf-sw__ttag { font-size: 0.75rem; line-height: 1.4; opacity: 0.7; margin-top: 0.2rem; }
.pf-sw__tab[aria-selected="true"] .pf-sw__tname { font-weight: 600; }
.pf-sw__tab:hover .pf-sw__tgo { opacity: 0.5; transform: none; }
.pf-sw__tab[aria-selected="true"] .pf-sw__tgo { opacity: 1; transform: none; color: var(--pf-floor); }

/* Stage — right column */
.pf-sw__stage {
  display: grid; gap: 1.5rem;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid color-mix(in oklab, var(--sc-ink) 10%, transparent);
}

/* Panels: stacked, only active one is visible */
.pf-sw__panels { display: grid; }
.pf-sw__panel {
  grid-area: 1 / 1;
  display: grid; gap: 1.5rem;
  opacity: 0; visibility: hidden;
  transition: opacity 320ms var(--sc-ease-out), visibility 0s linear 320ms;
}
.pf-sw__panel.is-active {
  opacity: 1; visibility: visible;
  transition: opacity 320ms var(--sc-ease-out) 70ms, visibility 0s;
}
.pf-sw__panel.is-active .pf-sw__copy { transition-delay: 70ms; }

/* Shared animation frame (shared across all packages; scroll-sequence.js canvas) */
.pf-sw__seq-wrap { display: block; position: relative; }
.pf-sw__seq-frame {
  position: relative;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: color-mix(in oklab, var(--sc-ink) 6%, var(--sc-canvas));
  border-radius: 10px;
  box-shadow: 0 6px 32px rgb(0 0 0 / 0.10), 0 1px 4px rgb(0 0 0 / 0.05);
}
.pf-sw__seq-frame canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
/* TV-corner canvas: sits above the room canvas, shown on TV view */
.pf-sw__tv-seq {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 320ms var(--sc-ease-out);
}
.pf-sw__tv-seq canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-sw__seq-frame.show-tv .pf-sw__tv-seq { opacity: 1; }

/* Static-photo overlay: shown when a thumbnail other than the first is picked */
.pf-sw__seq-still {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 2;
  opacity: 0; pointer-events: none;
  transition: opacity 320ms var(--sc-ease-out);
}
.pf-sw__seq-frame.show-still .pf-sw__seq-still { opacity: 1; }
.pf-sw__chip {
  position: absolute; z-index: 3;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  background: color-mix(in oklab, var(--sc-canvas) 88%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 6px 10px; color: var(--sc-ink);
}
.pf-sw__chip--room { left: 14px; top: 14px; }
.pf-sw__chip--badge { right: 14px; top: 14px; background: var(--pf-floor); color: var(--sc-surface); }

/* Thumbnails — bottom-right corner of the main frame */
.pf-sw__thumbs {
  position: absolute; bottom: 12px; right: 12px; z-index: 4;
  display: flex; gap: 6px; flex-wrap: nowrap;
}
.pf-sw__th {
  position: relative; width: 72px; aspect-ratio: 4/3;
  overflow: hidden; border-radius: 5px; opacity: 0.75; border: none; padding: 0; cursor: pointer; background: none;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
  transition: opacity 0.25s, transform 0.25s;
}
.pf-sw__th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-sw__th::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--pf-floor);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--sc-ease-out);
}
.pf-sw__th[aria-pressed="true"] { opacity: 1; transform: translateY(-2px); }
.pf-sw__th[aria-pressed="true"]::after { transform: none; }
.pf-sw__th:hover { opacity: 1; transform: translateY(-2px); }
.pf-sw__th:focus-visible { outline: 1px solid var(--sc-ink); outline-offset: 2px; }

/* Copy area */
.pf-sw__copy {
  display: grid; grid-template-columns: minmax(0,1fr);
  gap: 10px 24px; align-items: end;
  transform: translateY(10px);
  transition: transform 320ms var(--sc-ease-out);
}
.pf-sw__panel.is-active .pf-sw__copy { transform: none; }
.pf-sw__big { display: none; }
.pf-sw__copymain { display: grid; gap: 8px; min-width: 0; }
.pf-sw__meta {
  display: none;
}
.pf-sw__level { display: inline-flex; gap: 3px; align-items: center; }
.pf-sw__level i { width: 14px; height: 2px; background: var(--pf-line); }
.pf-sw__level i.on { background: var(--sc-ink); }
.pf-sw__name { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; }
.pf-sw__lede { display: none; }
.pf-sw__desc { margin: 0; font-size: 0.9rem; line-height: 1.7; color: color-mix(in oklab, var(--sc-ink) 60%, transparent); max-width: 50ch; }
.pf-sw__note-mobile { display: none; }
.pf-sw__note {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.9rem;
  font-size: 0.8rem; line-height: 1.6; font-weight: 500;
  color: var(--pf-floor);
  background: color-mix(in oklab, var(--pf-floor) 7%, transparent);
  border-left: 3px solid var(--pf-floor);
  border-radius: 0 6px 6px 0;
  max-width: 50ch;
}
.pf-sw__chip--note {
  left: 14px; bottom: 14px;
  max-width: 30ch; line-height: 1.6;
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.02em; text-transform: none;
  background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
  color: var(--pf-floor);
  border-left: 3px solid var(--pf-floor);
  border-radius: 0 6px 6px 0;
  padding: 0.6rem 0.9rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pf-sw__ctas {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  padding-top: 0; border-top: none;
  margin-top: 0.5rem;
}
.pf-sw__link {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  padding: 0.7em 1.5em;
  border-radius: 999px;
  border: 1px solid var(--pf-floor);
  color: var(--pf-floor);
  background: none;
  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);
}
.pf-sw__link::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--pf-floor);
  opacity: 0; transform: scale(0.4, 0.2);
  transition: transform 0.55s var(--sc-ease-out), opacity 0.4s var(--sc-ease-out);
}
.pf-sw__link--primary {
  background: var(--pf-floor);
  color: var(--sc-canvas);
}
.pf-sw__link--primary::before { background: color-mix(in oklab, var(--pf-floor) 70%, var(--sc-canvas)); }
@media (hover: hover) {
  .pf-sw__link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgb(38 31 30 / 0.3); color: var(--sc-canvas); border-color: var(--pf-floor); }
  .pf-sw__link:hover::before { opacity: 1; transform: none; }
}
.pf-sw__link:active { transform: scale(0.97); transition-duration: 0.15s; }
.pf-sw__link:focus-visible { outline: 2px solid var(--pf-floor); outline-offset: 3px; }

/* Controls: Prev / counter / Next */
.pf-sw__controls {
  display: none; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 12px;
  padding-top: 1rem; border-top: 1px solid var(--pf-line);
}
.pf-sw__prev, .pf-sw__next {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  background: none; border: none; cursor: pointer;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sc-ink); transition: color 0.2s;
}
.pf-sw__prev { justify-self: start; }
.pf-sw__next { justify-self: end; }
.pf-sw__circ {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 28%, transparent);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.pf-sw__prev:not(:disabled):hover .pf-sw__circ,
.pf-sw__next:not(:disabled):hover .pf-sw__circ {
  background: var(--sc-ink); border-color: var(--sc-ink); color: var(--sc-canvas);
}
.pf-sw__prev:disabled, .pf-sw__next:disabled {
  color: color-mix(in oklab, var(--sc-ink) 25%, transparent);
  cursor: default;
}
.pf-sw__prev:disabled .pf-sw__circ, .pf-sw__next:disabled .pf-sw__circ {
  border-color: color-mix(in oklab, var(--sc-ink) 18%, transparent);
}
.pf-sw__prev:focus-visible, .pf-sw__next:focus-visible { outline: 1px solid var(--sc-ink); outline-offset: 4px; border-radius: 2px; }
.pf-sw__full { } /* shown by default; hidden on mobile below */
.pf-sw__counter { display: grid; gap: 6px; justify-items: center; }
.pf-sw__counter b { font-size: 1rem; font-weight: 300; letter-spacing: 0.08em; }
.pf-sw__counter b span { color: color-mix(in oklab, var(--sc-ink) 40%, transparent); }
.pf-sw__segs { display: flex; gap: 4px; }
.pf-sw__segs i { width: 20px; height: 2px; background: var(--pf-line); transition: background 320ms var(--sc-ease-out); }
.pf-sw__segs i.on { background: var(--pf-floor); }

/* Stage — dark brown text overrides */
.pf-sw__stage { color: var(--pf-floor); }
.pf-sw__meta { color: color-mix(in oklab, var(--pf-floor) 45%, transparent); }
.pf-sw__level i { background: color-mix(in oklab, var(--pf-floor) 20%, transparent); }
.pf-sw__level i.on { background: var(--pf-floor); }
.pf-sw__desc { color: #000 !important; }
.pf-sw__ctas { border-top-color: color-mix(in oklab, var(--pf-floor) 15%, transparent); }
.pf-sw__controls { border-top-color: color-mix(in oklab, var(--pf-floor) 15%, transparent); }
.pf-sw__link:focus-visible { outline-color: var(--pf-floor); }
.pf-sw__prev, .pf-sw__next { color: var(--pf-floor); }
.pf-sw__circ { border-color: color-mix(in oklab, var(--pf-floor) 30%, transparent); }
.pf-sw__prev:not(:disabled):hover .pf-sw__circ,
.pf-sw__next:not(:disabled):hover .pf-sw__circ { background: var(--pf-floor); border-color: var(--pf-floor); color: var(--sc-canvas); }
.pf-sw__prev:disabled, .pf-sw__next:disabled { color: color-mix(in oklab, var(--pf-floor) 25%, transparent); }
.pf-sw__prev:disabled .pf-sw__circ,
.pf-sw__next:disabled .pf-sw__circ { border-color: color-mix(in oklab, var(--pf-floor) 18%, transparent); }
.pf-sw__prev:focus-visible, .pf-sw__next:focus-visible { outline-color: color-mix(in oklab, var(--pf-floor) 60%, transparent); }
.pf-sw__counter b span { color: color-mix(in oklab, var(--pf-floor) 40%, transparent) !important; }
.pf-sw__segs i { background: color-mix(in oklab, var(--pf-floor) 20%, transparent); }
.pf-sw__segs i.on { background: var(--pf-floor); }
.pf-sw__th::after { background: var(--pf-floor); }

/* Scroll reveal: JS adds --pre on load, removes on scroll (all screen sizes) */
.pf-sw--pre {
  opacity: 0 !important;
  transform: translateY(1.5rem) !important;
  pointer-events: none !important;
}
.pf-sw {
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pf-dock--pre {
  opacity: 0 !important;
  transform: translateY(1.5rem) !important;
  pointer-events: none !important;
}
.pf-dock {
  transition: opacity 0.9s ease 0.2s, transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s, visibility 0.5s;
}

/* Mobile: single column, no sticky rail */
@media (max-width: 900px) {
  .pf-sw-intro { min-height: 30svh; padding: 2rem var(--sc-gutter); justify-content: center; }
  .pf-sw-intro__copy .pf-body { display: none; }
  .pf-sw-intro__arrow { bottom: -0.25rem; }

  .pf-sw { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 0; }
  .pf-sw__rail { position: static; height: auto; padding: 0.75rem var(--sc-gutter) 0; }

  /* Compact horizontal tab strip */
  .pf-sw__tabs {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    gap: 6px; padding-left: 0; overflow-x: auto; scrollbar-width: none;
    height: auto; position: relative;
  }
  .pf-sw__tabs::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0;
    height: 1px; background: color-mix(in oklab, var(--sc-ink) 18%, transparent);
    pointer-events: none; z-index: 0;
  }
  .pf-sw__tabs::-webkit-scrollbar { display: none; }
  .pf-sw__track, .pf-sw__fill, .pf-sw__ind, .pf-sw__hlbox,
  .pf-sw__tab::before { display: none; }
  .pf-sw__tab {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 1 1 0; min-width: 0;
    height: 36px; padding: 0 12px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--sc-ink) 6%, var(--sc-canvas));
    border: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    color: color-mix(in oklab, var(--sc-ink) 55%, transparent);
    transition: background 0.25s, color 0.25s;
    transform: none !important; position: relative; z-index: 1;
  }
  .pf-sw__tthumb, .pf-sw__ttag, .pf-sw__tgo, .pf-sw__tn, .pf-sw__tname { display: none; }
  .pf-sw__tshort { display: block; font-size: 0.62rem; letter-spacing: 0.1em; white-space: nowrap; text-transform: uppercase; }
  .pf-sw__tab[aria-selected="true"] {
    background: var(--pf-floor); color: var(--sc-canvas);
  }

  .pf-sw__copy { grid-template-columns: minmax(0,1fr); }
  .pf-sw__ctas { flex-direction: column; gap: 0.75rem; }
  .pf-sw__full { display: none; }
  .pf-sw__th { width: 68px; }

  /* Thumbs: below image on mobile */
  .pf-sw__seq-wrap { display: grid; gap: 8px; }
  .pf-sw__thumbs {
    position: static;
    flex-wrap: wrap;
  }

  /* Note chip: hide on mobile, show as text in copy area */
  .pf-sw__chip--note { display: none; }
  .pf-sw__note-mobile { display: block; }
}

/* ?fps test readout (js/home.js) */
.pf-fps {
  position: fixed; left: 0.75rem; bottom: 0.75rem; z-index: 50;
  padding: 0.35rem 0.6rem; border-radius: 0.3rem;
  background: rgb(0 0 0 / 0.75); color: #fff;
  font: 600 0.75rem/1.2 ui-monospace, monospace;
}

/* -------------------------------------------------- after the room -- */
/* Sections after the room have a canvas background and sit above the sticky
   room layer and package 04's fixed text, so they slide over both like a
   curtain. */
.pf-about, .pf-work { position: relative; z-index: calc(var(--sc-z-copy) + 1); }
/* They are far below the first screen: the browser skips their layout and
   painting until they come near (the first layout of the whole page was the
   heaviest work during the intro on phones). "auto" in the size remembers
   each section's real height once it has been shown. */
.pf-about, .pf-work, .pf-site-foot {
  content-visibility: auto; contain-intrinsic-size: auto 100vw auto 900px;
}
.pf-kicker {
  display: block; margin-bottom: var(--sc-5);
  font-size: 0.7rem; text-transform: uppercase; color: var(--sc-ink-soft);
}
.pf-display { margin: 0; }
.pf-h2 { margin: 0; }
.pf-lead { margin: var(--sc-6) 0 0; max-width: 34em; color: var(--sc-ink); }
.pf-body {
  margin: var(--sc-4) 0 0; max-width: 38em;
  font-size: 1rem; line-height: 1.7; color: var(--sc-ink); font-weight: 400;
}
.pf-textlink {
  display: inline-block; margin-top: var(--sc-6);
  text-transform: uppercase;
  color: var(--sc-ink); text-decoration: none;
  transition: opacity var(--sc-d-fast) var(--sc-ease-out);
}
.pf-textlink:hover { opacity: 0.55; }
.pf-textlink:focus-visible { outline: 1px solid var(--sc-ink); outline-offset: 6px; }

/* ----------------------------------------------------------------- about -- */
/* Dark spread (client reference 2026-10-05, a catalogue page): the photo
   fills the left half, edge to edge and the full height of the section; the
   right half is a beige page with a small title in its top right corner and
   the text low down: a larger lead sentence, then two columns of small text.
   Dark text on beige; type in css/type.css. */
.pf-about {
  --pad: clamp(1.5rem, 4vw, 4.5rem);
  background: transparent; color: var(--pf-floor);
  scroll-margin-top: 4.75rem;
}
.pf-about-lead { color: var(--pf-floor) !important; }
.pf-about-cols p { color: color-mix(in oklab, var(--pf-floor) 75%, transparent) !important; }
.pf-about a:focus-visible { outline-color: var(--pf-floor); }
.pf-about p { margin: 0; }
.pf-about a { color: inherit; text-decoration: none; }
.pf-about-body { display: grid; grid-template-columns: auto 1fr; }
/* The client's own 4:5 crop (2026-10-05), shown whole against the left edge.
   Its height is the whole screen under the header (never wider than half
   the page), and it sets the section's height: scrolled to, photo and
   section fill the screen exactly and the dock sits on them (client 2026-10-05). */
.pf-about-photo-wrap {
  position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; align-self: start;
  width: min(50vw, (100svh - 4.75rem) * 0.8);
}
.pf-about-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 10%;      /* 4:5 in 4:5: nothing is cut; if ever cropped, the feet go first */
}
.pf-about-info {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3vw, 3rem) var(--pad) 7rem;            /* bottom: clear of the dock buttons */
}
.pf-about-info h3 { margin: 0; align-self: flex-end; text-align: right; }
.pf-about-desc { margin-top: auto; padding-top: 2rem; max-width: 44rem; }
.pf-about-cols { columns: 2; column-gap: clamp(1.25rem, 2.5vw, 2.5rem); margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.pf-about-cols p { break-inside: avoid; }
.pf-about-cols p + p { margin-top: 1em; }
.pf-about a:focus-visible { outline: 1px solid var(--sc-ink); outline-offset: 3px; }
@media (max-width: 900px) {
  .pf-about-body { grid-template-columns: 1fr; }
  .pf-about-photo-wrap { width: 100%; }
  .pf-about-info { padding: 2.5rem var(--sc-gutter) 6rem; }
  .pf-about-info h3 { align-self: flex-start; text-align: left; }
  .pf-about-desc { padding-top: 2rem; }
  .pf-about-cols { columns: 1; }
}

/* -------------------------------------------------------- our work strip -- */
/* StripGallery restyled through its own --sg-* variables: ivory on the
   mahogany floor colour. */
/* A straight edge from the About sheet into the chocolate (client 2026-10-04:
   no gradient). */
.pf-work {
  background: color-mix(in oklab, var(--pf-floor) 72%, var(--sc-canvas)); color: var(--sc-surface);
  padding: clamp(4rem, 12vh, 7rem) 0 clamp(3rem, 8vh, 5rem);
}
.pf-work__head { text-align: center; padding-inline: var(--sc-gutter); }
.pf-about-kicker {
  font-size: 0.68rem; text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-surface) 60%, transparent);
}
.pf-work__title { margin: var(--sc-4) 0 0; }
#work-strip {
  --sg-fg: var(--sc-surface);
  --sg-muted: color-mix(in oklab, var(--sc-surface) 55%, transparent);
  --sg-line: color-mix(in oklab, var(--sc-surface) 30%, transparent);
  --sg-cap-size: 11px;
  --sg-tile-bg: color-mix(in oklab, var(--sc-surface) 8%, var(--pf-floor));
}
/* Photo treatment (tokens in site.css), also in the enlarged view. */
#work-strip .sg__tile img, .sg-lb__img { filter: var(--pf-photo-filter); }
#work-strip .sg__tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--pf-photo-tint);
}
#work-strip .sg__cap { letter-spacing: 0.24em; font-weight: 300; }
#work-strip .sg__title { font-weight: 400; }
#work-strip .sg__count { letter-spacing: 0.18em; }
@media (hover: hover) { #work-strip .sg__btn:hover { background: var(--sc-surface); color: var(--pf-floor); border-color: var(--sc-surface); } }
.sg-lb { --sg-lb-bg: color-mix(in oklab, var(--pf-floor) 30%, rgb(16 12 10 / 0.96)); }
.sg-lb__title { font-weight: 400; letter-spacing: 0.24em; font-size: 13px; }
.pf-work__cta { text-align: center; padding-inline: var(--sc-gutter); }
.pf-work__cta p { margin: 0; font-size: 1.35rem; color: color-mix(in oklab, var(--sc-surface) 80%, transparent); }
.pf-work__link {
  display: inline-block; margin-top: var(--sc-4);
  font-size: 0.7rem; text-transform: uppercase;
  color: var(--sc-surface); text-decoration: none;
  padding-bottom: 0.35em; border-bottom: 1px solid color-mix(in oklab, var(--sc-surface) 40%, transparent);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
.pf-work__link:hover { border-color: var(--sc-surface); }