/* Montserrat, hosted here (SIL Open Font Licence, fonts/OFL.txt): no request to Google when the page opens. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/montserrat-700.woff2") format("woff2"); }
/* Layout: the Psync'd house style in black and gold. true black ground (the recording's contrast, owner 24 Oct), near-black alternate sections, IB sand accent; Montserrat with two-tone headings; centred sections, rounded cards, pill buttons, a sand ticker on top and a sand double rule above the footer. Single dark look by design. */
:root {
  --black: #000000;          /* true black ground: the recording's contrast (was IB #1A1A1A) */
  --char: #0E0E0E;           /* alternate sections: near-black, a shade off the ground (was #2A2A2A) */
  --teal: #093445;           /* IB blue, held in reserve; not used */
  --char-2: #161616;
  --card: #141414;           /* cards on the ground */
  --card-teal: #1A1A1A;      /* cards on alternate sections */
  --sand: #C9A585;           /* IB accent */
  --sand-2: #B8946F;
  --sand-soft: rgba(201, 165, 133, 0.16);
  --danger: #9B3D32;         /* IB danger: form errors only */
  --ink: #FFFFFF;
  --ink-2: #E4E7E9;
  --ink-3: #B3B9BD;
  --line: rgba(255, 255, 255, 0.12);
  --on-sand: #000000;
  --focus: #F3E4D4;

  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --mark: "Cinzel", "Trajan Pro", Georgia, serif;

  --measure: 62ch;
  --wrap: 1180px;
  --radius: 14px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--black); color: var(--ink); font-family: var(--sans); font-size: 1.02rem; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sand); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--sans); text-wrap: balance; margin: 0; font-weight: 500; }
p { margin: 0; }
.hl { color: var(--sand); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--sand); color: var(--on-sand); padding: 8px 14px; z-index: 20; }
.skip:focus { left: 8px; }

/* Ticker */
.ticker { background: var(--sand); color: var(--on-sand); overflow: hidden; white-space: nowrap; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; }
.ticker .track { display: inline-flex; gap: 48px; padding-block: 6px; animation: tick 40s linear infinite; }
.ticker span::after { content: "◆"; margin-left: 48px; font-size: 0.6rem; vertical-align: 2px; opacity: 0.6; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Header */
.site-head { background: var(--black); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-block: 18px; }
.brand { display: block; line-height: 0; }
.brand .lockup { width: 132px; height: auto; }
.site-foot .brand .lockup { width: 200px; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; font-size: 0.86rem; }
.nav a { color: var(--ink); text-decoration: none; padding: 10px 0; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--sand); text-underline-offset: 7px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 28px; border-radius: 999px; background: var(--sand); color: var(--on-sand) !important; text-decoration: none !important; font-family: var(--sans); font-weight: 600; font-size: 0.92rem; border: 0; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.btn:hover { background: #D8B998; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--sand); }
.btn-ghost:hover { background: var(--sand-soft); }
.nav .btn { min-height: 44px; padding: 10px 22px; font-size: 0.84rem; }

/* Eyebrow, like the house "Ready to Thrive?" line */
.eyebrow { font-size: 0.95rem; color: var(--ink-2); }
.eyebrow.sand { color: var(--sand); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; }

/* Sections */
.section { padding-block: clamp(72px, 9vw, 112px); }
.section.char { background: var(--char); }
.section h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.15; }
.center { text-align: center; }
.section-head { display: flex; flex-direction: column; gap: 14px; margin: 0 auto clamp(40px, 5vw, 56px); max-width: 760px; text-align: center; align-items: center; }
.section-head p { color: var(--ink-2); }

/* Hero: charcoal card over a full-bleed image, as on the current site */
.hero { position: relative; background: var(--black); overflow: hidden; }
.hero .wrap { position: relative; padding-block: clamp(56px, 8vw, 104px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero-fig { margin: 0; min-width: 0; }
.hero-card { max-width: 600px; background: #2A2A2A; border-radius: var(--radius); padding: clamp(32px, 5vw, 56px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.hero-card .emblem { width: 84px; height: 84px; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.15; font-weight: 500; }
.hero .lede { color: var(--ink-2); max-width: 46ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.hero-note { font-size: 0.82rem; color: var(--ink-3); }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-fig { order: 2; }
  .hero-card { margin: 0 auto; }
}

/* Cards: black, rounded, icon badge, centred */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.card { background: var(--card); border-radius: var(--radius); padding: 32px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.char .card, .char .timeline li, .char .two > div, .char .help div, .char .safe div { background: var(--card-teal); }
.badge { width: 56px; height: 56px; border-radius: 50%; background: var(--sand); color: var(--on-sand); display: grid; place-items: center; flex-shrink: 0; }
.badge svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.08rem; font-weight: 600; line-height: 1.35; }
.card p { color: var(--ink-2); font-size: 0.95rem; }
.card p.lg { color: var(--ink); font-size: 1.08rem; }

/* Statement band */
.band-line { background: var(--black); padding-block: clamp(80px, 11vw, 140px); text-align: center; position: relative; overflow: hidden; }
.band-line::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed rgba(187,163,137,0.35); }
.band-line .inner { position: relative; background: var(--black); display: inline-block; padding: 24px 20px; max-width: 900px; }
.band-line p.big { font-size: clamp(1.8rem, 4.4vw, 3.2rem); font-weight: 500; line-height: 1.2; }
.band-line p.sub { margin-top: 20px; color: var(--ink-2); max-width: 54ch; margin-left: auto; margin-right: auto; }

/* Process */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.timeline li { background: var(--card); border-radius: var(--radius); padding: 28px 22px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.timeline .n { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sand); color: var(--sand); display: grid; place-items: center; font-weight: 600; font-size: 0.95rem; }
.timeline .dur { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand); font-weight: 600; }
.timeline h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.timeline p { color: var(--ink-2); font-size: 0.92rem; }
@media (max-width: 980px) { .timeline { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } }

/* Split */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(36px, 6vw, 72px); align-items: center; }
.split > * { min-width: 0; }
.split .section-head { text-align: left; align-items: flex-start; margin: 0 0 28px; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.checks li { padding-left: 34px; position: relative; }
.checks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23121212' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat; }
.note { margin-top: 24px; color: var(--ink-2); max-width: var(--measure); }
.figure { margin: 0; }
.figure img { border-radius: var(--radius); }
.figure figcaption { margin-top: 12px; font-size: 0.86rem; color: var(--ink-3); }

/* Price */
.price-card { background: var(--sand); color: var(--on-sand); border-radius: var(--radius); padding: clamp(36px, 6vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px 56px; align-items: center; }
.price-card .k { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.price-card .v { font-size: clamp(3.2rem, 8vw, 5.5rem); font-weight: 600; line-height: 1; }
.price-card p.txt { font-size: 1.05rem; }

.statement { margin-top: 24px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 500; color: var(--sand); }

/* Form */
.ask-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; align-items: start; }
.ask-grid > * { min-width: 0; }
.form-card { background: var(--card); border-radius: var(--radius); padding: clamp(28px, 4vw, 44px); }
form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 0.88rem; font-weight: 500; }
label .opt { color: var(--ink-3); font-weight: 400; }
input, textarea { font: inherit; color: var(--ink); background: transparent; border: 1px solid rgba(255,255,255,0.28); border-radius: 6px; padding: 12px 14px; min-height: 48px; width: 100%; }
input:focus, textarea:focus { outline: 2px solid var(--sand); outline-offset: 0; border-color: var(--sand); }
textarea { resize: vertical; min-height: 120px; }
.hp { position: absolute; left: -9999px; }
.form-msg { padding: 14px 16px; border-radius: 8px; background: var(--sand-soft); border: 1px solid var(--sand); }
.small { font-size: 0.86rem; color: var(--ink-3); }
.book { background: var(--char); border-radius: var(--radius); padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.book h3 { font-size: 1.35rem; font-weight: 500; }
.book .k { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand); font-weight: 600; }

/* Inner pages */
.page-head { background: var(--char); padding-block: clamp(64px, 9vw, 112px); text-align: center; }
.page-head .inner { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.page-head h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.15; }
.page-head .lede { color: var(--ink-2); max-width: var(--measure); }
.prose { max-width: var(--measure); margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem) !important; margin-top: 24px; }
.prose p { color: var(--ink-2); }
.quote { font-size: clamp(1.25rem, 2.4vw, 1.6rem) !important; line-height: 1.4; color: var(--ink) !important; border-left: 2px solid var(--sand); padding-left: 22px; }
.ruled { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; display: grid; gap: 12px; }
.ruled li { background: var(--card); border-radius: 10px; padding: 18px 22px 18px 60px; position: relative; }
.ruled li::before { content: ""; position: absolute; left: 22px; top: 22px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--sand); background: linear-gradient(45deg, transparent 45%, var(--sand) 45%, var(--sand) 55%, transparent 55%); }
.help { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.help div { background: var(--card); border-radius: var(--radius); padding: 24px; text-align: center; }
.help .k { font-size: 0.85rem; color: var(--ink-2); }
.help .v { font-size: 1.7rem; font-weight: 600; color: var(--sand); margin-top: 4px; user-select: all; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.two > div { background: var(--card); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.two h2 { font-size: 1.35rem !important; font-weight: 600; }
.two p { color: var(--ink-2); }
.photo { aspect-ratio: 4 / 5; width: 360px; max-width: 100%; border-radius: var(--radius); background: var(--char-2); border: 1px dashed rgba(187,163,137,0.5); display: grid; place-items: center; color: var(--ink-3); font-size: 0.85rem; margin: 0 auto; }
.about-head .inner { max-width: var(--wrap); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px; align-items: center; text-align: left; }
.about-head .inner > div { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.safe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.safe div { background: var(--card); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.draft { border: 1px dashed var(--sand); border-radius: 8px; padding: 12px 16px; font-size: 0.9rem; }
.legal { margin: 0 auto; padding-left: 1.4em; display: flex; flex-direction: column; gap: 24px; max-width: var(--measure); }
.legal li::marker { color: var(--sand); }
.legal h2 { font-size: 1.1rem !important; font-weight: 600; margin-bottom: 4px; }
.legal p { color: var(--ink-2); }

/* Footer: sand double rule, then black */
.foot-rule { height: 40px; background: var(--sand); position: relative; }
.foot-rule::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(255,255,255,0.7); }
.site-foot { background: linear-gradient(180deg, #141414, #101010); padding-block: 56px 28px; color: var(--ink-2); font-size: 0.92rem; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px; align-items: start; }
.foot-grid h4 { margin: 0 0 14px; font-size: 1rem; font-weight: 700; color: var(--ink); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.foot-grid a { color: var(--ink-2); text-decoration: none; }
.foot-grid a:hover { color: var(--ink); }

.copy { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; font-size: 0.82rem; color: var(--ink-3); }
.copy b { color: var(--sand); font-weight: 600; }

/* Form errors use the IB danger red, and only after the visitor has interacted */
input:user-invalid, textarea:user-invalid { border-color: var(--danger); outline: 2px solid var(--danger); outline-offset: 0; }
.field-error { color: #E39A8F; font-size: 0.86rem; }

/* Redrawn figures: wide layout on desktop, phone layout with larger labels below 560px */
.fig-svg svg { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.fig-narrow { display: none; }
@media (max-width: 560px) { .fig-wide { display: none; } .fig-narrow { display: block; } }
.ceiling-fig { max-width: 980px; margin: 48px auto 0; position: relative; }
.ceiling-fig figcaption { text-align: center; max-width: 60ch; margin-inline: auto; }
.why { max-width: 820px; text-align: center; }
.why .section-head { margin-bottom: 24px; }
.why .prose { margin: 0 auto; }
.outcomes-fig { max-width: 1000px; margin: 48px auto 0; }
.outcomes-fig figcaption { text-align: center; }

/* Photography: hero, beam band, footer skyline */
.hero-photo { position: relative; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 78% center; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,26,26,0.92) 0%, rgba(26,26,26,0.55) 42%, rgba(26,26,26,0) 70%), linear-gradient(0deg, var(--black) 0%, rgba(26,26,26,0) 22%); }
.hero-photo .hero-grid { grid-template-columns: minmax(0, 600px) 1fr; min-height: min(78vh, 760px); }
.hero-photo .hero-card { background: rgba(42,42,42,0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.beam { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(460px, 52vw, 760px); display: flex; align-items: center; }
.beam-bg { position: absolute; inset: 0; z-index: -1; }
.beam-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.beam-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,26,26,0.85) 0%, rgba(26,26,26,0.35) 40%, rgba(26,26,26,0) 55%), linear-gradient(0deg, var(--black) 0%, rgba(26,26,26,0) 25%), linear-gradient(180deg, var(--black) 0%, rgba(26,26,26,0) 18%); }
.beam-copy { width: 100%; padding-block: 72px; }
.beam-copy .big { font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 500; line-height: 1.2; max-width: 17ch; }
.beam-copy .sub { margin-top: 20px; color: var(--ink-2); max-width: 40ch; }
@media (max-width: 860px) {
  .hero-photo .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 220px; }
  .hero-bg img { object-position: 85% top; height: 340px; }
  .hero-bg::after { background: linear-gradient(0deg, var(--black) 45%, rgba(26,26,26,0) 75%); }
  .beam { display: block; min-height: 0; }
  .beam-bg { position: relative; display: block; height: 300px; }
  .beam-bg::after { background: linear-gradient(0deg, var(--black) 0%, rgba(26,26,26,0) 40%); }
  .beam-copy { padding-block: 8px 64px; }
}

.band-line { padding-block: clamp(32px, 5vw, 64px) clamp(72px, 9vw, 112px); }
.band-line .ceiling-fig { margin-top: 0; }
.why-split .figure { max-width: 560px; }
.site-foot { background: linear-gradient(180deg, rgba(20,20,20,0.86), rgba(16,16,16,0.97)), url("img/skyline.jpg") center 30% / cover no-repeat; }

/* Richness pass: photo sections sit on true black, fades are pure black (no grey haze), the card is solid */
.ticker + .site-head, .site-head { background: #000; }
.hero-photo { background: #000; }
.hero-bg::after { background: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.6) 34%, rgba(0,0,0,0) 58%), linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 16%); }
.hero-photo .hero-card { background: #232222; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.beam { background: #000; }
.beam-bg::after { background: linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 38%, rgba(0,0,0,0) 54%), linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 18%), linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 14%); }
@media (max-width: 860px) {
  .hero-bg::after { background: linear-gradient(0deg, #000 40%, rgba(0,0,0,0) 72%); }
  .beam-bg::after { background: linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 40%); }
  .beam-copy { background: #000; }
}

/* The book-interest form on About, and form messages as paragraphs */
.book-form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.book-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.form-msg p { margin: 0; }
.form-msg p + p { margin-top: 4px; }

/* Figures beside their text (owner, 24 Oct): all three at the "Why Inner Architect" size,
   alternating sides. On phones the source order stands: the ceiling and structure figures
   lead their text; the outcomes figure follows its heading, so the four boxes are named first. */
.ceiling-band { background: var(--black); }
.fig-split .figure { max-width: 560px; width: 100%; justify-self: center; }
.fig-split .figure figcaption { text-align: left; }

/* True-black pass (owner, 24 Oct): the contrast of the recording across the whole site.
   Alternate sections are told apart by a hairline, not by a grey slab. */
.section.char, .page-head { border-block: 1px solid rgba(255,255,255,0.06); }
.card { border: 1px solid rgba(255,255,255,0.08); }
.page-head { background: #000; border-top: 0; }   /* one surface with the header (owner, 24 Oct) */

/* Pick a time (book.html, 24 Oct). Days scroll sideways inside their own row;
   times wrap. Chosen = sand, like the buttons. */
.booking { max-width: 760px; margin: 0 auto; }
.bk-preview { color: var(--sand); font-size: 0.9rem; margin-bottom: 24px; }
.bk-step { font-size: 1.15rem; font-weight: 600; display: flex; align-items: center; gap: 12px; margin: 32px 0 14px; }
.bk-step:first-child { margin-top: 0; }
.bk-n { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--sand); color: var(--sand); display: grid; place-items: center; font-size: 0.9rem; flex: none; }
.bk-tz { font-size: 0.85rem; font-weight: 400; }
.bk-days { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.bk-times { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-chip { appearance: none; border: 1px solid rgba(201,165,133,0.45); background: var(--card); color: var(--ink); border-radius: 999px; padding: 10px 18px; font: inherit; font-size: 0.95rem; cursor: pointer; min-height: 44px; }
.bk-chip:hover { border-color: var(--sand); }
.bk-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bk-chip[aria-selected="true"] { background: var(--sand); color: var(--on-sand); border-color: var(--sand); font-weight: 600; }
.bk-daychip { display: flex; flex-direction: column; align-items: center; border-radius: 14px; padding: 10px 14px; min-width: 76px; flex: none; }
.bk-dow { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
.bk-dnum { font-weight: 600; }
.bk-form { margin-top: 8px; display: flex; flex-direction: column; gap: 16px; }
.bk-chosen { color: var(--sand); font-weight: 500; }
.bk-small { font-size: 0.85rem; color: var(--ink-3); }
.bk-closed, .bk-done { background: var(--card); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bk-when { font-size: 1.15rem; font-weight: 500; }
.bk-done a[data-bk-done-link] { color: var(--sand); word-break: break-all; }
.bk-gone { color: var(--sand); }

/* The hidden attribute always wins: panels that set display (flex, grid) must still hide. */
[hidden] { display: none !important; }
.booking h2.bk-step { font-size: 1.15rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.booking .bk-closed h2, .booking .bk-done h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); }

/* The book (25 Oct): the black cover on black needs light behind it — a soft
   sand glow, so its spine and edges read. The cutout has no boxy shadow. */
.book-fig { position: relative; max-width: 420px; margin-inline: auto; }
.book-fig::before { content: ""; position: absolute; inset: 6% 2%; background: radial-gradient(closest-side, rgba(201,165,133,0.22), rgba(201,165,133,0.07) 55%, transparent 80%); filter: blur(8px); z-index: 0; }
.book-cover { position: relative; z-index: 1; width: 100%; height: auto; display: block; border-radius: 0; }
.book-sub { color: var(--sand); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9rem; font-weight: 500; margin: -12px 0 18px; }
.book-split .section-head { margin-bottom: 18px; }
.book-split .actions { margin-top: 24px; }
/* Home: the book is a supporting point, not the offer — a quieter band, a
   smaller cover (owner, 25 Oct). The About page keeps the large one. */
.book-strip { padding-block: clamp(48px, 7vw, 88px); }
.book-strip .book-split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.book-strip .book-fig { max-width: 280px; }
@media (max-width: 760px) { .book-strip .book-split { grid-template-columns: 1fr; } .book-strip .book-fig { max-width: 220px; } }
/* About: the book's own section, but the cover no longer dominates (owner,
   25 Oct) — a little larger than the home band, the text and form lead. */
#book .book-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
#book .book-fig { max-width: 320px; }
@media (max-width: 760px) { #book .book-split { grid-template-columns: 1fr; } #book .book-fig { max-width: 240px; } }
/* About's book section (owner, 25 Oct): one paragraph and the button on the
   form's row, so the words end level with the cover. Phones stack. */
.book-lede { max-width: 62ch; margin: 0 0 22px; }
.book-inline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.book-inline .btn { min-height: 48px; white-space: nowrap; }
@media (max-width: 760px) { .book-inline { grid-template-columns: 1fr; } .book-inline .btn { justify-self: start; } }
/* When the column is too narrow for both boxes and the button on one row
   (a tablet), the button drops under them: measured on the column itself. */
#book .book-split > div { container-type: inline-size; }
@container (max-width: 620px) { .book-inline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .book-inline .btn { grid-column: 1 / -1; justify-self: start; } }
@container (max-width: 420px) { .book-inline { grid-template-columns: 1fr; } }
/* Terms: the model cancellation form (25 Oct). */
.legal-form { max-width: var(--measure); margin: 48px auto 0; background: var(--card); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); }
.legal-form h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.legal-form p + p { margin-top: 12px; }
.legal li p + p { margin-top: 10px; }
/* For organisations (26 Oct) */
.org-k { font-size: 1.1rem; font-weight: 600; }
.checks.no li::before { background: transparent; border: 1px solid var(--ink-3); color: var(--ink-3); content: "–"; display: grid; place-items: center; font-size: 12px; line-height: 1; }
.org-form { max-width: 760px; margin: 0 auto; }

/* Phones (26 Oct): the menu slides in behind a Menu button, and the step
   cards swipe sideways, each next card peeking in. Desktop is unchanged. */
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .site-head .wrap { flex-wrap: nowrap; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; margin-left: auto; background: transparent; color: var(--ink); border: 1px solid rgba(201,165,133,0.5); border-radius: 999px; font: inherit; font-size: 0.86rem; cursor: pointer; position: relative; z-index: 60; }
  .nav-bars, .nav-bars::before, .nav-bars::after { display: block; width: 18px; height: 2px; background: var(--sand); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .nav-bars { position: relative; }
  .nav-bars::before, .nav-bars::after { content: ""; position: absolute; left: 0; }
  .nav-bars::before { top: -6px; } .nav-bars::after { top: 6px; }
  .nav-open .nav-bars { background: transparent; }
  .nav-open .nav-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-bars::after { transform: translateY(-6px) rotate(-45deg); }
  .nav { position: fixed; inset: 0 0 0 auto; width: min(86vw, 340px); z-index: 55; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 96px 28px 32px; background: #0b0b0b; border-left: 1px solid rgba(201,165,133,0.25); box-shadow: -30px 0 60px rgba(0,0,0,0.6); font-size: 1.15rem; transform: translateX(100%); transition: transform .28s ease; visibility: hidden; }
  .nav-open .nav { transform: none; visibility: visible; }
  .nav a { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .nav .btn { margin-top: 28px; justify-content: center; font-size: 0.95rem; border-bottom: 0; }
  .nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50; }
  .nav-open { overflow: hidden; }

  .timeline { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -20px; padding: 0 20px 8px; scroll-padding-inline: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .timeline::-webkit-scrollbar { display: none; }
  .timeline li { flex: 0 0 82%; scroll-snap-align: start; }
  .timeline { overscroll-behavior-x: contain; touch-action: pan-x pan-y; }   /* sideways swipes the cards, up/down still scrolls the page; no back-gesture at the ends */
  .swipe-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; }
  .swipe-dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,0.25); cursor: pointer; }
  .swipe-dots button[aria-current="true"] { background: var(--sand); width: 22px; border-radius: 4px; }
  .swipe-hint { text-align: center; font-size: 0.8rem; color: var(--ink-3); margin-top: 8px; }
}
@media (min-width: 761px) { .swipe-dots, .swipe-hint { display: none; } }
/* 27 Oct: the four outcomes sit right under the line that promises them. */
.outcomes-row { margin-top: clamp(40px, 6vw, 72px); }
.outcomes-fig2 { max-width: 620px; margin: 0 auto; }
.outcomes-fig2 figcaption { text-align: center; }
.report-solo { max-width: 760px; }
/* Phone hero (27 Oct): less empty black above the headline, chin clear,
   the card kept high, a smaller logo in the card. */
@media (max-width: 860px) {
  .hero-photo .hero-grid { padding-top: 150px; }
  .hero-bg img { object-position: 62% top; height: 270px; position: relative; top: -14px; }
  .hero-bg::after { background: linear-gradient(0deg, #000 12%, rgba(0,0,0,0) 34%); }
}
@media (max-width: 560px) {
  .hero-photo .hero-card .emblem { width: 64px; height: 64px; }
  .hero-photo .hero-card { padding-top: 28px; gap: 16px; }
}
@media (max-width: 760px) { .site-head .wrap { padding-bottom: 4px; } }   /* less gap between the menu and his head */