/* Rebecca Flynn - v3, in her purple
   Drawn at 390 first. 4-col mobile grid, 20px margins, 16px gutters.
   Neutrals are warm gray with a little violet in them; the accent is the plum from her logo. */

:root {
  --paper: #F8F6F7;
  --white: #FFFFFF;
  --ink: #241C28;
  --ink-2: #5E5563;
  --line: #DED7DC;
  --plaster: #EEE8EC;
  --accent: #732A83;
  --accent-press: #5C2069;
  --seg: #E1D8DF;

  /* names the shared components use */
  --plum: #732A83;
  --plum-hover: #5C2069;
  --plum-deep: #2A1830;
  --plum-soft: #B48BC0;
  --stone: #5E5563;
  --mist: #F1ECEF;
  --gutter: var(--m);
  --wrap: 1240px;
  --radius-s: 3px;
  --radius-m: 6px;
  --header-h: 68px;
  --logo-gray-1: #aaabaa;
  --logo-gray-2: #8f908f;
  --logo-plum-1: #9456a1;
  --logo-plum-2: #732a83;
  --logo-rule: #404040;

  --sans: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Literata", Georgia, serif;

  --m: 20px;           /* outer margin */
  --col: calc((100vw - 2 * var(--m) - 3 * 16px) / 4);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3, p, blockquote, figure, dl, dd, ol, ul { margin: 0; }

h1, h2, h3 { font-weight: 500; text-wrap: balance; }

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--m);
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  text-decoration: none;
}
.skip:focus { top: 10px; }

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 22px;
  background: var(--accent);
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color .15s ease;
}
.btn:hover { background: var(--accent-press); }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 15px; }

.quiet-link,
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color .15s ease;
}
.quiet-link:hover,
.text-link:hover { text-decoration-color: currentColor; }

.text-link { color: var(--accent); font-weight: 500; }

/* ---------- Header and menu ---------- */

/* ---------- Logo (type lockup matching the brand mark) ---------- */

.logo {
  --logo-size: 22px;
  display: inline-grid;
  grid-template-columns: auto auto;
  font-family: "Montserrat", "Gotham", "Avenir Next", sans-serif;
  font-weight: 300;
  font-size: var(--logo-size);
  line-height: .94;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo-name, .logo-trade { display: flex; flex-direction: column; padding-block: .06em; }
.logo-name {
  align-items: flex-end;
  padding-right: .2em;
  border-right: max(1px, .065em) solid var(--logo-rule);
  color: var(--logo-gray-1);
}
.logo-name span + span { color: var(--logo-gray-2); }
.logo-trade { padding-left: .2em; color: var(--logo-plum-1); }
.logo-trade span + span { color: var(--logo-plum-2); }
.logo-lg { --logo-size: 30px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
  padding: 0 var(--m);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--line); }
.brand { display: block; margin-right: auto; text-decoration: none; }
.brand .logo { --logo-size: 19px; }
.site-nav, .top-phone, .top-book { display: none; }

.menu-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: -6px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 500 16px/1 var(--sans);
  cursor: pointer;
}
.menu-lines { position: relative; width: 20px; height: 9px; }
.menu-lines i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s ease, top .3s ease; }
.menu-lines i:first-child { top: 0; }
.menu-lines i:last-child { top: 7.5px; }
.menu-btn[aria-expanded="true"] .menu-lines i:first-child { top: 3.75px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-lines i:last-child { top: 3.75px; transform: rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 24px) var(--m) calc(32px + env(safe-area-inset-bottom));
  background: var(--paper);
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu ul { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.menu li { border-bottom: 1px solid var(--line); }
.menu li a {
  display: block;
  padding: 14px 0 12px;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.menu li a:hover { color: var(--accent); }
.menu-foot { margin-top: auto; padding-top: 32px; display: grid; gap: 20px; justify-items: start; }
.menu-foot p { font-size: 16px; line-height: 2; }
.menu-foot p a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
body[data-menu="open"] { overflow: hidden; }

/* ---------- Opening ---------- */

.open { padding: 20px 0 0; }

.open-copy { padding: 0 var(--m); }

.open h1 {
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -0.028em;
  max-width: 11.5em;
}

.open-lede {
  margin-top: 18px;
  font-size: 17px;
  color: var(--ink-2);
  max-width: 30em;
}

.open-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 24px;
}

.open-art {
  position: relative;
  margin-top: 40px;
  padding-bottom: 0;
}

.open-photo {
  margin-left: calc(var(--m) + var(--col) * .75);
  height: 400px;
  overflow: hidden;
}
.open-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 50%;
}

.open-sketch {
  position: relative;
  width: 68%;
  margin: -112px 0 0 var(--m);
  background: var(--white);
  padding: 6px;
}

.open-art figcaption {
  padding: 12px var(--m) 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 30em;
}

/* ---------- Scope statement ---------- */

.scope {
  padding: 80px var(--m) 88px;
}
.scope p {
  font-size: 22px;
  line-height: 1.32;
  letter-spacing: -0.012em;
  max-width: 24em;
  text-indent: calc(var(--col) + 16px);
}

.trust {
  list-style: none;
  padding: 0;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.trust li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-2);
}
.trust li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 12px 2px 0; border-radius: 50%; background: var(--accent); }

/* ---------- Recent work ---------- */

.work { padding: 0 0 88px; }
.work-head { padding: 0 var(--m); display: grid; gap: 10px; }
.work h2 { font-size: 30px; line-height: 1.08; letter-spacing: -0.022em; }
.work-head p { font-size: 15px; color: var(--ink-2); max-width: 28em; }
.work-track { margin-top: 28px; }
.work-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--m) 0;
}
.work-btns { display: none; gap: 6px; }
.work-btns button {
  appearance: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid #CDC3CA;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}
.work-btns button:hover:not(:disabled) { background: var(--white); }
.work-btns button:disabled { opacity: .35; cursor: default; }

/* ---------- Before / Drawing / Finished ---------- */

.seq {
  background: var(--plaster);
  padding: 56px 0 56px;
}

.seq-head { padding: 0 var(--m); max-width: 40em; }
.seq h2 {
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.022em;
  max-width: 10em;
}
.seq-head p { margin-top: 12px; font-size: 15px; color: var(--ink-2); max-width: 28em; }

.ba-tabs { display: flex; gap: 6px; margin-top: 28px; padding: 0 var(--m); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.ba-tabs::-webkit-scrollbar { display: none; }
.ba-tabs button {
  appearance: none;
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #CDC3CA;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: 500 15px/1 var(--sans);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ba-tabs button:hover { background: var(--white); }
.ba-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.ba-stage { position: relative; margin-top: 14px; }
.ba-drawing {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 10px;
  background: var(--white);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.ba-drawing img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.ba-stage[data-view="drawing"] .ba-drawing { opacity: 1; pointer-events: auto; }

.seg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin: 10px var(--m) 0;
  padding: 3px;
  background: var(--seg);
  border-radius: 7px;
}
.seg button {
  appearance: none;
  border: 0;
  min-height: 44px;
  background: transparent;
  color: var(--ink);
  font: 500 15px/1 var(--sans);
  border-radius: 5px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.seg button:hover:not(:disabled) { background: rgba(255,255,255,.55); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button:disabled { opacity: .4; cursor: default; }

.ba-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px var(--m) 0; }
.ba-title { font-size: 19px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.ba-meta { margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.ba-note { padding: 14px var(--m) 0; font-size: 13px; color: var(--ink-2); }

/* ---------- Rooms ---------- */

.rooms { padding: 88px 0 72px; }
.rooms h2 {
  padding: 0 var(--m);
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.022em;
}

.room { margin-top: 40px; }
.room img { width: 100%; object-fit: cover; transition: opacity .2s ease; }
.room-link { display: block; cursor: pointer; }
.room-link:hover img { opacity: .92; }
.room figcaption { padding: 16px var(--m) 0; }
.room blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.38;
  letter-spacing: -0.005em;
  max-width: 19em;
}
.room blockquote.client p { font-style: normal; }
.room figcaption span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 30em;
}

.room-a { margin-top: 32px; }
.room-a img { aspect-ratio: 4 / 5; object-position: 38% 50%; }

.room-b { margin-top: 64px; margin-left: calc(var(--m) + var(--col) + 16px); }
.room-b img { aspect-ratio: 3 / 4; object-position: 66% 50%; }
.room-b figcaption { padding-left: 0; }

.room-c { margin-top: 64px; margin-right: calc(var(--col) * .5 + var(--m)); }
.room-c img { aspect-ratio: 5 / 4; object-position: 30% 50%; }

.room-d { margin-top: 64px; margin-left: calc(var(--m) + var(--col) * 1.5); margin-right: var(--m); }
.room-d img { aspect-ratio: 4 / 5; object-position: 30% 50%; }
.room-d figcaption { padding-left: 0; padding-right: 0; }

.rooms-more { margin: 40px var(--m) 0; }

/* ---------- Testimonials ---------- */

.said {
  padding: 72px var(--m) 80px;
  border-top: 1px solid var(--line);
  margin: 0 var(--m);
  padding-left: 0;
  padding-right: 0;
}
.said-main p {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.22;
  letter-spacing: -0.012em;
  max-width: 17em;
}
.said footer { margin-top: 14px; font-size: 14px; color: var(--ink-2); }

.said-more { margin-top: 48px; display: grid; gap: 32px; }
.said-more p { font-family: var(--serif); font-size: 16px; line-height: 1.6; max-width: 34em; }

/* ---------- Rebecca ---------- */

.me { padding: 0 0 88px; }
.me-photo {
  width: calc(100% - var(--col) - var(--m));
  margin-left: var(--m);
}
/* The whole photograph, never cropped, under a soft arch. */
.me-photo img { width: 100%; height: auto; border-radius: 999px 999px 4px 4px; background: #D9D7DC; }

.me-copy { padding: 32px var(--m) 0; }
.me h2 { font-size: 30px; line-height: 1.08; letter-spacing: -0.022em; }
.me-voice {
  margin-top: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.38;
  max-width: 19em;
}
.me-copy > p:not(.me-voice):not(.me-photo-note) { margin-top: 18px; font-size: 16px; max-width: 34em; }

.creds { margin-top: 28px; border-top: 1px solid var(--line); }
.creds div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
}
.creds dt { font-weight: 600; }
.creds dd { color: var(--ink); }

.sig { margin-top: 28px; width: 120px; height: auto; }

.me-photo-note { margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.me-photo-note .text-link { display: inline; min-height: 0; }

/* ---------- Steps ---------- */

.steps {
  padding: 0 var(--m) 80px;
  background: var(--plaster);
}
.seq + .steps::before { border-top-color: #D6CCD3; }
.steps::before {
  content: "";
  display: block;
  border-top: 1px solid #D6CCD3;
  margin-bottom: 48px;
}
.steps h2 { font-size: 30px; line-height: 1.08; letter-spacing: -0.022em; max-width: 11em; }
.steps ol { list-style: none; padding: 0; margin-top: 28px; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 12px;
  padding: 20px 0 22px;
  border-top: 1px solid #D6CCD3;
}
.steps li::before {
  content: counter(step);
  grid-row: 1 / span 2;
  display: block;
  height: 34px;
  overflow: hidden;
  font-size: 34px;
  line-height: 1;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--accent);
  letter-spacing: -0.03em;
}
.steps h3 { font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.steps li p { margin-top: 6px; font-size: 15px; line-height: 1.5; max-width: 32em; }
.steps .text-link { margin-top: 12px; }
button.text-link { appearance: none; border: 0; padding: 0; background: none; font: 500 16px/1.4 var(--sans); cursor: pointer; }

/* ---------- Contact ---------- */

.call { padding: 88px var(--m) 72px; }
.call h2 {
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.022em;
  max-width: 11em;
}
.call > p:first-of-type { margin-top: 16px; font-size: 16px; color: var(--ink-2); max-width: 30em; }
.call-act { margin-top: 28px; }
.call-number {
  display: block;
  margin-top: 40px;
  font-size: clamp(52px, 15.4vw, 176px);
  line-height: .95;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: var(--accent);
  text-decoration: none;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.call-number:hover { color: var(--accent-press); }
.call-sub { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.call-mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 20px;
  font-size: 18px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  word-break: break-all;
}
.call-area { margin-top: 28px; font-size: 14px; color: var(--ink-2); }

/* ---------- Footer ---------- */

.foot {
  margin: 0 var(--m);
  padding: 24px 0 32px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-2);
}
.foot ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot p { margin-top: 8px; }

/* ---------- Floating booking dock (phones) ---------- */

.dock { display: none; }
@media (max-width: 999px) {
  .dock {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 10px;
    background: rgba(36, 28, 40, .93);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(36, 28, 40, .28);
    transform: translateX(-50%);
    transition: translate .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
  }
  .dock[data-hidden="true"] { translate: 0 140%; opacity: 0; pointer-events: none; }
  .dock-call { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 6px; background: rgba(255, 255, 255, .12); color: var(--white); }
  .dock-call .icon { width: 19px; height: 19px; }
  .dock-book { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 6px; background: var(--white); color: var(--ink); font-weight: 500; font-size: 16px; text-decoration: none; white-space: nowrap; }
}

/* ---------- Wider screens ---------- */

@media (min-width: 700px) {
  :root { --m: 40px; --col: calc((100vw - 2 * var(--m) - 11 * 24px) / 12); }

  .open h1 { font-size: 56px; }
  .open-photo { height: 520px; margin-left: calc(var(--m) + (var(--col) + 24px) * 3); }
  .open-sketch { width: 54%; margin-top: -180px; }


  .room-a img { aspect-ratio: 3 / 2; }
  .said-more { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (min-width: 1000px) {
  body { font-size: 18px; }
  :root { --header-h: 84px; }
  .brand .logo { --logo-size: 23px; }
  .menu-btn { display: none; }
  .site-nav { display: flex; gap: 28px; margin-left: 40px; margin-right: auto; }
  .site-nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 16px; font-weight: 500; text-decoration: none; }
  .site-nav a:hover { color: var(--accent); }
  .brand { margin-right: 0; }
  .top-book { display: inline-flex; }
  .top-phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
  }
  .top-phone:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

  /* Opening: copy in cols 1-5, art in 6-12 bleeding off the right edge */
  .open {
    display: grid;
    grid-template-columns: calc(var(--m) + (var(--col) + 24px) * 5) 1fr;
    align-items: start;
    padding-top: 48px;
  }
  .open-copy { padding: 24px 0 0 var(--m); }
  .open h1 { font-size: clamp(56px, 4.9vw, 76px); max-width: 9.6em; }
  .open-lede { font-size: 19px; max-width: 24em; margin-top: 24px; }
  .open-act { margin-top: 32px; }
  .open-art { margin-top: 0; }
  .open-photo { margin-left: 0; height: min(64vw, 640px); height: 620px; }
  .open-sketch {
    width: 50%;
    margin: -200px 0 0 calc(-1 * (var(--col) + 24px));
    padding: 8px;
  }
  .open-art figcaption { padding: 14px 0 0; margin-left: calc(50% - var(--col) - 24px + 24px); max-width: 22em; margin-top: -64px; }

  .scope { padding: 140px var(--m) 140px calc(var(--m) + (var(--col) + 24px) * 2); }
  .trust { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24px; margin-top: 56px; max-width: 46em; }
  .scope p { font-size: 34px; line-height: 1.24; letter-spacing: -0.018em; max-width: 21em; text-indent: calc((var(--col) + 24px) * 2); }

  .seq { padding: 96px 0 80px; }
  .seq-head { display: grid; grid-template-columns: calc((var(--col) + 24px) * 5) 1fr; max-width: none; align-items: end; padding-right: var(--m); }
  .seq h2 { font-size: 44px; }
  .seq-head p { margin: 0; font-size: 16px; }
  .ba-tabs, .seg, .ba-foot, .ba-note { padding-left: var(--m); padding-right: var(--m); }
  .ba-tabs { margin-top: 40px; }
  .ba-stage { margin: 16px var(--m) 0; }
  .ba-cmp { aspect-ratio: 16 / 9; border-radius: 4px; }
  .seg { width: 360px; margin-left: var(--m); padding: 3px; }
  .ba-title { font-size: 22px; }

  .work { padding-bottom: 120px; }
  .work-head { grid-template-columns: calc((var(--col) + 24px) * 5) 1fr; align-items: end; padding-right: var(--m); }
  .work h2 { font-size: 44px; }
  .work-head p { font-size: 16px; }
  .work-track { margin-top: 48px; }
  .work-btns { display: flex; }
  .work-nav { padding-top: 24px; }

  .rooms {
    display: grid;
    grid-template-columns: var(--m) repeat(12, 1fr) var(--m);
    column-gap: 24px;
    padding: 140px 0 120px;
    column-gap: 0;
  }
  .rooms { grid-template-columns: var(--m) repeat(12, minmax(0, 1fr)) var(--m); column-gap: 0; }
  .rooms > * { margin: 0; }
  .rooms h2 { grid-column: 2 / 8; padding: 0; font-size: 44px; }
  .room figcaption { padding: 18px 0 0; }
  .room blockquote p { font-size: 24px; }

  .room-a { grid-column: 1 / 9; grid-row: 2 / span 2; margin-top: 48px; }
  .room-a img { aspect-ratio: 4 / 3; }
  .room-a figcaption { padding-left: var(--m); }

  .room-b { grid-column: 10 / 14; grid-row: 2; margin-top: 200px; padding-left: 0; }
  .room-c { grid-column: 3 / 8; grid-row: 4; margin-top: 96px; }
  .room-d { grid-column: 9 / 13; grid-row: 4; margin-top: 200px; }
  .room-b, .room-c, .room-d { margin-left: 0; margin-right: 0; }
  .room-b img { aspect-ratio: 3 / 4; }
  .room-c img { aspect-ratio: 4 / 3; }
  .room-c figcaption, .room-d figcaption { padding-left: 0; }
  .rooms-more { grid-column: 3 / 10; grid-row: 5; margin-top: 64px; }

  .said {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    padding: 120px 0 128px;
  }
  .said-main { grid-column: 2 / 11; }
  .said-main p { font-size: 48px; line-height: 1.14; letter-spacing: -0.02em; }
  .said-more { grid-column: 5 / 13; margin-top: 72px; }

  .me {
    display: grid;
    grid-template-columns: var(--m) repeat(12, minmax(0, 1fr)) var(--m);
    column-gap: 0;
    padding-bottom: 140px;
    align-items: start;
  }
  .me-photo { grid-column: 2 / 7; width: auto; margin: 0; }
  .me-copy { grid-column: 8 / 14; padding: 64px var(--m) 0 0; }
  .me h2 { font-size: 44px; }
  .me-voice { font-size: 26px; }
  .creds div { grid-template-columns: 120px 1fr; font-size: 16px; }

  .steps {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    padding: 0 var(--m) 112px;
  }
  .steps::before { grid-column: 1 / -1; margin-bottom: 80px; }
  .steps h2 { grid-column: 1 / 7; font-size: 44px; }
  .steps ol { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
  .steps li { grid-template-columns: 1fr; align-content: start; padding-top: 22px; }
  .steps li::before { grid-row: auto; font-size: 56px; height: 56px; margin-bottom: 24px; }
  .steps h3 { font-size: 22px; }
  .steps li p { font-size: 16px; margin-top: 8px; }
  .steps .text-link { grid-column: 1 / -1; margin-top: 24px; justify-self: start; }

  .call { padding: 140px var(--m) 96px; }
  .call h2 { font-size: 44px; max-width: 12em; }
  .call > p:first-of-type { font-size: 18px; }
  .call-number { margin-top: 56px; }
  .call-mail { font-size: 22px; }
}

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


/* ======================================================================
   Shared components (carousel, compare slider, viewer, portfolio, story,
   booking), restyled through the variables above.
   ====================================================================== */

.depth-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.depth-canvas.is-live { opacity: 1; }
.work-item .depth-canvas { border-radius: var(--radius-s); }
.work-track {
  --gap: 10px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: var(--gap);
  overflow-x: auto;
  /* Never scrollable up or down: a vertical swipe or wheel over the photos always moves the page. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding: 0 var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.work-track::-webkit-scrollbar { display: none; }
.work-track:focus-visible { outline-offset: -3px; }
.work-item { scroll-snap-align: start; }
.work-item a { display: block; position: relative; color: var(--white); text-decoration: none; }
.work-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-s);
}
.work-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 48px 18px 16px;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  background: linear-gradient(to top, rgba(26, 14, 30, .6), rgba(26, 14, 30, 0));
  font-family: var(--sans);
  font-size: .9375rem;
  color: rgba(255, 255, 255, .85);
}
.work-cap strong { display: block; font-weight: 500; font-size: 1.1875rem; color: var(--white); }
@media (min-width: 768px) {
  .work-track {
    --gap: 16px;
    grid-auto-columns: 46%;
    padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
    scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  }
}
@media (min-width: 1100px) {
  .work-track { grid-auto-columns: min(34vw, 520px); }
  .work-item img { aspect-ratio: 4 / 5; }
}

/* Cards fade in and settle from a touch smaller, staying inside the strip's bounds. */
.work-item a { transition: opacity 1.2s cubic-bezier(.16, 1, .3, 1), scale 1.4s cubic-bezier(.16, 1, .3, 1); }
.work-item.is-pending a { opacity: 0; scale: .965; }


.cmp {
  --pos: 50%;
  position: relative;
  margin: 0 calc(var(--gutter) * -1);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--plum-deep);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}
.cmp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  transform: scale(1.035); /* trims stray edge strips in some source photos; same on both layers */
}
.cmp-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.cmp-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--white);
  box-shadow: 0 0 12px rgba(26, 14, 30, .35);
  pointer-events: none;
}
.cmp-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 4px 16px rgba(26, 14, 30, .28);
}
.cmp-handle span::before,
.cmp-handle span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border: solid var(--ink);
  border-width: 0 0 1.75px 1.75px;
}
.cmp-handle span::before { left: 12px; transform: rotate(45deg); }
.cmp-handle span::after { right: 12px; transform: rotate(-135deg); }

.cmp-tag {
  position: absolute;
  top: 14px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(26, 14, 30, .62);
  color: var(--white);
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  pointer-events: none;
  transition: opacity .2s ease;
}
.cmp-tag-before { left: 14px; }
.cmp-tag-after { right: 14px; }
.cmp[data-near="before"] .cmp-tag-after,
.cmp[data-near="after"] .cmp-tag-before { opacity: 0; }

.cmp-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.cmp:has(.cmp-range:focus-visible) { outline: 3px solid var(--plum); outline-offset: 3px; }

/* ---------- Project photos: full-screen viewer ---------- */

html.pv-open, html.pv-open body { overflow: hidden; }
.pv {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  z-index: 210;
  background: rgba(18, 13, 21, var(--pv-fade, 1));
  color: var(--white);
  opacity: 0;
  transition: opacity .22s ease;
}
.pv.is-in { opacity: 1; }
.pv.is-out { opacity: 0; }
.pv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(8px, env(safe-area-inset-top)) 8px 4px;
}
.pv-close {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  cursor: pointer;
}
.pv-close .icon { width: 22px; height: 22px; }
.pv-spacer { width: 44px; }
.pv-count { font-family: var(--sans); font-size: .9375rem; color: rgba(255, 255, 255, .8); }
.pv-stage { position: relative; min-height: 0; touch-action: pan-x; transition: transform .25s ease; }
.pv.is-dragging .pv-stage { transition: none; }
.pv-track {
  height: 100%;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.pv-track::-webkit-scrollbar { display: none; }
.pv-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.pv-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.pv-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(18, 13, 21, .7);
  color: var(--white);
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 500;
}
.pv-nav, .ig-nav { display: none; }
.pv :focus-visible { outline-color: var(--plum-soft); }

@media (hover: hover) and (pointer: fine) {
  .pv-nav {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    width: 52px; height: 52px;
    margin-top: -26px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--white);
    cursor: pointer;
  }
  .pv-prev { left: 20px; }
  .pv-next { right: 20px; }
  .pv-nav:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
  .pv-nav:disabled { opacity: .25; cursor: default; }
}
@media (min-width: 900px) {
  .pv-stage { padding: 0 0 8px; }
  .pv-slide { padding: 0 92px; }
}

/* ---------- Portfolio: a feed of swipeable project posts ---------- */

.pf-head { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 32px var(--gutter) 8px; }
.pf-head h1 { font-size: clamp(2.25rem, 8vw, 3.25rem); }
.pf-head .section-sub { margin-top: 10px; }
.pf-filters { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 5px; }
@media (max-width: 379px) { .pf-filters button { padding: 0 9px; font-size: .8125rem; } }
.pf-filters button {
  min-height: 36px;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .875rem;
  white-space: nowrap;
  cursor: pointer;
}
.pf-filters button[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); color: var(--white); }
.pf-feed {
  display: grid;
  gap: 40px;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 24px 0 var(--section);
}
.post[hidden] { display: none; }
.ig { position: relative; }
.ig-track {
  display: flex;
  aspect-ratio: 4 / 3;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  background: var(--mist);
}
.ig-track::-webkit-scrollbar { display: none; }
.ig-slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.ig-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ig-open img { width: 100%; height: 100%; object-fit: cover; }
.ig-open img.is-tall { object-fit: contain; }
.ig-count {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(18, 13, 21, .62);
  color: var(--white);
  font-family: var(--sans);
  font-size: .8125rem;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .ig-nav {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    width: 40px; height: 40px;
    margin-top: -20px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(36, 24, 43, .2);
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .ig-prev { left: 12px; }
  .ig-next { right: 12px; }
  .ig:hover .ig-nav:not(:disabled), .ig-nav:focus-visible { opacity: 1; }
  .ig-nav:disabled { pointer-events: none; }
}
@media (min-width: 900px) {
  .pf-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; padding-inline: var(--gutter); }
  .ig-track { border-radius: var(--radius-m); }
}

.pv-caption {
  min-height: 44px;
  padding: 10px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  font-family: var(--sans);
  font-size: .875rem;
  text-align: center;
  color: rgba(255, 255, 255, .72);
}

/* ---------- Project story: before, vision, work, reveal ---------- */

.pj {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--white);
  opacity: 0;
  transition: opacity .24s ease;
}
.pj.is-in { opacity: 1; }
.pj.is-out { opacity: 0; }
.pj-bar { position: absolute; inset: 0 0 auto; z-index: 3; pointer-events: none; }
.pj-progress { display: block; height: 2px; background: rgba(255, 255, 255, .25); }
.pj-progress i { display: block; height: 100%; background: var(--plum); transform: scaleX(0); transform-origin: 0 50%; }
.pj-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(36, 24, 43, .12);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
}
.pj-close .icon { width: 20px; height: 20px; }
.pj-scroll { height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }

.pj-cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100svh;
  min-height: 440px;
  color: var(--white);
  overflow: hidden;
}
.pj-cover-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pj-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 12, 26, .78) 0%, rgba(22, 12, 26, .35) 38%, rgba(22, 12, 26, 0) 65%);
}
.pj-cover-text { position: relative; z-index: 1; width: 100%; max-width: 900px; margin: 0 auto; padding: 24px var(--gutter) 40px; }
.pj-cover h2 { font-size: clamp(2rem, 8.5vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 14ch; }
.pj-meta { margin-top: 10px; font-family: var(--sans); font-size: .9375rem; color: rgba(255, 255, 255, .82); }

.pj-ch { max-width: 900px; margin: 0 auto; padding: 72px 0 0; }
.pj-num { padding: 0 var(--gutter); font-family: var(--sans); font-size: .875rem; font-weight: 500; color: var(--plum); }
.pj-lead { margin-top: 10px; padding: 0 var(--gutter); font-size: 1.5rem; line-height: 1.38; color: var(--ink); max-width: 30em; }
.pj-text { margin-top: 18px; padding: 0 var(--gutter); font-size: 1.0625rem; line-height: 1.65; max-width: 36em; }
.pj-fig { position: relative; margin: 8px 0 0; }
.pj-lead + .pj-fig, .pj-lead + .pj-pair, .pj-cmp-note + .pj-fig, .pj-cmp-note + .pj-pair { margin-top: 28px; }
.pj-photo { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pj-photo img { display: block; width: 100%; height: auto; }
.pj-fig.is-wide.is-tall .pj-photo img { width: auto; max-width: 100%; max-height: 82svh; margin: 0 auto; }
.pj-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pj-pair .pj-fig { margin: 0; }
.pj-cmp { margin: 28px 0 0; }
.pj-cmp-note { margin-top: 8px; padding: 0 var(--gutter); font-family: var(--sans); font-size: .75rem; color: var(--stone); }
.pj-anim { opacity: 0; translate: 0 22px; transition: opacity .9s ease, translate 1.1s cubic-bezier(.16, 1, .3, 1); }
.pj-anim.is-in { opacity: 1; translate: 0 0; }

.pj-end { display: grid; gap: 16px; max-width: 900px; margin: 0 auto; padding: 64px var(--gutter) calc(56px + env(safe-area-inset-bottom)); }
.pj-book { justify-self: start; }
.pj-next {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;
  margin-top: 16px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  text-align: left;
  cursor: pointer;
}
.pj-next img { grid-row: 1 / span 2; width: 96px; height: 72px; object-fit: cover; border-radius: 8px; }
.pj-next-label { align-self: end; font-family: var(--sans); font-size: .8125rem; color: var(--stone); }
.pj-next-title { align-self: start; font-family: var(--sans); font-size: 1.0625rem; font-weight: 500; color: var(--ink); }
.pj-next:hover .pj-next-title { color: var(--plum); }
.pj :focus-visible { outline-color: var(--plum); }

@media (min-width: 900px) {
  .pj-close { top: 20px; right: 20px; }
  /* Photos run almost edge to edge; the words keep a comfortable reading column. */
  .pj-ch { max-width: 1400px; padding: 104px 32px 0; }
  .pj-num, .pj-lead, .pj-text, .pj-cmp-note { max-width: 760px; margin-left: auto; margin-right: auto; padding-inline: 0; }
  .pj-lead { font-size: 2rem; }
  .pj-lead + .pj-fig, .pj-lead + .pj-pair { margin-top: 40px; }
  .pj-fig.is-wide, .pj-cmp, .pj-pair { margin-inline: 0; }
  .pj-fig { margin-top: 16px; }
  .pj-pair { gap: 16px; margin-top: 16px; }
  .pj-photo img, .pj-cmp { border-radius: var(--radius-m); }
}

/* Portfolio post: photos, then one tappable line */
.post-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  padding: 12px var(--gutter) 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.post-title { font-family: var(--sans); font-size: 1.0625rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.post-sub { grid-row: 2; margin-top: 2px; font-family: var(--sans); font-size: .875rem; color: var(--stone); }
.post-meta .icon { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--stone); }
.post-meta:hover .post-title { color: var(--plum); }
@media (min-width: 900px) { .post-meta { padding-inline: 0; } }

/* Story text in the display voice */
.pj-lead, .pj-end-lead { font-family: var(--serif); font-weight: 300; }
.pj-text { font-family: var(--sans); }
.pj-cover h2 { font-weight: 300; }

/* ---------- Booking pop-up ---------- */

html.bk-open, html.bk-open body { overflow: hidden; }
.bk { position: fixed; inset: 0; z-index: 230; display: grid; align-items: end; }
.bk-scrim { position: absolute; inset: 0; background: rgba(22, 12, 26, .5); opacity: 0; transition: opacity .3s ease; }
.bk.is-in .bk-scrim { opacity: 1; }
.bk-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100svh - 24px);
  background: var(--white);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(22, 12, 26, .2);
  overflow: hidden;
  translate: 0 100%;
  transition: translate .42s cubic-bezier(.2, .85, .2, 1);
}
.bk.is-in .bk-panel { translate: 0 0; }

.bk-side {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding: 20px var(--gutter) 16px;
  border-bottom: 1px solid var(--line);
}
.bk-avatar { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 10%; background: var(--mist); }
.bk-host { font-size: .8125rem; color: var(--stone); }
.bk-title { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; }
.bk-facts { display: none; }
.bk-summary { grid-column: 1 / -1; font-size: .875rem; color: var(--plum); }
.bk-summary:not(:empty) { margin-top: 10px; }

.bk-main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.bk-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 8px 12px 0; }
.bk-back, .bk-close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.bk-back:hover, .bk-close:hover { background: var(--mist); }
.bk-back[hidden] { display: grid; visibility: hidden; }
.bk-steps { display: flex; justify-content: center; gap: 6px; }
.bk-steps li { width: 22px; height: 3px; border-radius: 2px; background: var(--line); transition: background-color .3s ease, width .3s ease; }
.bk-steps li.done { background: var(--plum-soft); }
.bk-steps li.on { width: 34px; background: var(--plum); }
.bk[data-step="3"] .bk-steps { visibility: hidden; }
.bk-body { overflow-y: auto; overscroll-behavior: contain; padding: 16px var(--gutter) calc(28px + env(safe-area-inset-bottom)); animation: bk-in .35s ease both; }
@keyframes bk-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.bk-h { font-family: var(--serif); font-weight: 300; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.01em; }

.bk-choices { display: grid; gap: 8px; margin-top: 20px; }
.bk-choice {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 58px; padding: 0 20px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--white); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; text-align: left;
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.bk-choice .icon { width: 18px; height: 18px; color: var(--plum); opacity: .5; transition: opacity .15s ease, translate .15s ease; }
.bk-choice:hover, .bk-choice.is-on { border-color: var(--plum); }
.bk-choice:hover .icon { opacity: 1; translate: 3px 0; }

.bk-cal { margin-top: 18px; }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; }
.bk-cal-head p { font-weight: 500; }
.bk-mnav { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.bk-mnav:hover:not(:disabled) { background: var(--mist); }
.bk-mnav:disabled { opacity: .3; cursor: default; }
.bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; text-align: center; }
.bk-dow { padding: 6px 0; font-size: .75rem; color: var(--stone); }
.bk-day {
  aspect-ratio: 1; max-height: 48px; width: 100%;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  font-family: var(--sans); font-size: .9375rem;
}
button.bk-day { background: var(--mist); color: var(--plum); font-weight: 500; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
button.bk-day:hover { background: #e8dceb; }
button.bk-day.is-on { background: var(--plum); color: var(--white); }
.bk-day.is-off { color: #c9bfc6; }
.bk-hint { margin-top: 18px; font-size: .9375rem; color: var(--stone); }
.bk-times { margin-top: 22px; }
.bk-times-h { display: flex; justify-content: space-between; align-items: baseline; font-weight: 500; }
.bk-times-h span { font-size: .8125rem; font-weight: 400; color: var(--stone); }
.bk-time-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.bk-time {
  min-height: 48px; border: 1px solid var(--plum-soft); border-radius: 12px;
  background: var(--white); color: var(--plum);
  font-family: var(--sans); font-size: 1rem; font-weight: 500;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.bk-time:hover { border-color: var(--plum); }
.bk-time.is-on { background: var(--plum); border-color: var(--plum); color: var(--white); }
.bk-next { width: 100%; margin-top: 24px; }
.bk-next:disabled { opacity: .35; cursor: default; }

.bk-form { display: grid; gap: 14px; margin-top: 20px; }
.bk-form label { display: grid; gap: 6px; }
.bk-form label span { font-size: .875rem; font-weight: 500; }
.bk-form label em { font-style: normal; font-weight: 400; color: var(--stone); }
.bk-form input, .bk-form textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--white); color: var(--ink);
  font: inherit; font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bk-form textarea { resize: vertical; min-height: 90px; }
.bk-form input:focus, .bk-form textarea:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(110, 42, 127, .14); }
.bk-error { min-height: 1.2em; font-size: .875rem; color: #a3264a; }
.bk-form .bk-next { margin-top: 2px; }

.bk-done { display: grid; justify-items: center; gap: 10px; padding-top: 24px; text-align: center; }
.bk-done-mark { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--plum); color: var(--white); margin-bottom: 8px; animation: bk-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.bk-done-mark .icon { width: 30px; height: 30px; }
@keyframes bk-pop { from { scale: .5; opacity: 0; } to { scale: 1; opacity: 1; } }
.bk-done-when { font-family: var(--serif); font-size: 1.375rem; color: var(--plum); }
.bk-done-sub { max-width: 26em; color: var(--stone); }
.bk-done .btn { margin-top: 16px; min-width: 160px; }
.bk-demo { margin-top: 12px; font-size: .75rem; color: #a99ea6; }

@media (min-width: 900px) {
  .bk { align-items: center; justify-items: center; padding: 24px; }
  .bk-panel {
    width: min(960px, 100%);
    height: min(680px, calc(100svh - 48px));
    grid-template-rows: none;
    grid-template-columns: 320px minmax(0, 1fr);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(22, 12, 26, .3);
    translate: 0 16px;
    opacity: 0;
    transition: translate .4s cubic-bezier(.2, .85, .2, 1), opacity .3s ease;
  }
  .bk.is-in .bk-panel { translate: 0 0; opacity: 1; }
  .bk-side {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 40px 32px;
    border-bottom: 0; border-right: 1px solid var(--line);
    background: var(--mist);
  }
  .bk-avatar { width: 64px; height: 64px; margin-bottom: 20px; }
  .bk-title { margin-top: 4px; font-size: 1.75rem; }
  .bk-facts { display: grid; gap: 12px; margin-top: 28px; font-size: .9375rem; color: var(--stone); }
  .bk-facts li { display: flex; align-items: center; gap: 10px; }
  .bk-facts .icon { width: 18px; height: 18px; color: var(--plum); }
  .bk-summary:not(:empty) { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); width: 100%; font-weight: 500; }
  .bk-top { padding: 12px 16px 0; }
  .bk-body { padding: 8px 48px 40px; }
  .bk-h { font-size: 2rem; }
  .bk-time-list { grid-template-columns: repeat(3, 1fr); }
  .bk-next { width: auto; min-width: 200px; }
}

/* ---------- v3 finish on the shared components: square-ish corners, no pills ---------- */

.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-press); }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid #CDC3CA; }
.btn-outline:hover { background: var(--white); }
.btn .icon { width: 18px; height: 18px; margin-right: 8px; }
.cmp-tag { border-radius: 3px; background: rgba(36, 28, 40, .7); }
.pf-filters button { border-radius: 4px; }
.pf-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.pf-head h1 { font-weight: 500; letter-spacing: -0.025em; }
.ig-count { border-radius: 3px; }
.pj-close { border-radius: 6px; }
.pj-next { border-radius: 6px; }
.pj-next img { border-radius: 3px; }
.pj-num { color: var(--accent); }
.pj-cover h2 { font-weight: 500; letter-spacing: -0.025em; }
.pj-lead { font-family: var(--serif); font-weight: 400; }
.bk-panel { border-radius: 12px 12px 0 0; }
.bk-choice, .bk-time, .bk-form input, .bk-form textarea { border-radius: 6px; }
.bk-title, .bk-h { font-family: var(--sans); font-weight: 500; letter-spacing: -0.02em; }
.bk-done-when { font-family: var(--serif); }
.bk .btn { border-radius: 4px; }
@media (min-width: 900px) { .bk-panel { border-radius: 12px; } }
.section-sub { color: var(--ink-2); max-width: 30em; }

.ba-cmp { margin: 0; aspect-ratio: 4 / 3; }
.ba-cmp .cmp-img { transition: opacity .35s ease; }
.ba-cmp.is-swapping .cmp-img { opacity: 0; }
.work-track { list-style: none; margin: 28px 0 0; }
.bk-steps, .bk-facts, .pf-feed { list-style: none; padding: 0; margin-top: 0; }
.bk-facts { margin-top: 28px; }
@media (max-width: 899px) { .bk-facts { margin-top: 0; } }