/* page-book.css — page-scoped styles for /book/ (moved out of index.html 2026-09-06) */
    /* Book-page-only warmth (scoped here; the shared system is untouched).
       This is the personal page — same components, a golden-hour cast:
       warmer paper, a warm hero scrim, gold accents instead of coral. */
    body { background: #fdf7ec; }
    /* Hero follows the shared no-overlay treatment (site.css); this photo is
       dark, so the shared white-halo dark text carries readability. */
    .prose h2::before { background: var(--color-amber); opacity: 0.9; }
    /* Booking-benefits band, re-tinted to this page's golden-hour cast:
       the shared component's palette is all variables, so the home page's
       sea-glass panel becomes a sand-gold one here without touching the
       component. Icons draw in the brand emblem's brass. */
    .benefits-band {
      --band-bg: #f7efdd;
      --band-bg-2: var(--color-gold);
      --band-head: var(--color-ink);
      --band-text: rgba(58, 48, 36, 0.85);
      --band-icon: #8a6a42;
    }
    .prose ol li::before {
      background: var(--color-gold);
      color: var(--color-ink);
    }
    /* Trip-request form — page-scoped. Reuses the shared .tool-form /
       .form-grid / .field / .button system from site.css (the Quiet Shore
       tool styling); only book-page warmth and the pieces site.css does
       not cover (textarea, fieldset, inert button) live here. */
    .trip-form { margin-top: var(--space-5); }
    .trip-form::before { background: var(--color-gold); } /* warm accent bar, matching this page's gold cast */
    .trip-form textarea {
      width: 100%;
      padding: var(--space-3);
      font-size: var(--text-base);
      font-family: inherit;
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      background: var(--color-bg);
      color: var(--color-text);
      resize: vertical;
      transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
    }
    .trip-form textarea:focus {
      outline: none;
      border-color: var(--color-ocean);
      box-shadow: 0 0 0 3px rgba(78, 127, 122, 0.25);
      background: var(--color-surface);
    }
    .trip-party {
      border: 0;
      padding: 0;
      margin: 0;
      min-width: 0;
    }
    .trip-party legend {
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: var(--color-muted);
      margin-bottom: var(--space-1);
      padding: 0;
    }
    .trip-party .party-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3);
    }
    .trip-flex-field { align-self: end; padding-bottom: var(--space-3); }
    .contact-pref-options {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-4);
    }
    .contact-pref-option {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--color-text);
      cursor: pointer;
    }
    .contact-pref-option input {
      accent-color: var(--color-coral-deep);
      transform: scale(1.15);
      margin: 0;
    }
    .trip-span-all { grid-column: 1 / -1; }
    .trip-actions {
      margin-top: var(--space-5);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-3);
    }
    .trip-form .button[disabled] {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
    .trip-form .button[disabled]:hover {
      transform: none;
      background: var(--color-cta);
    }
    .trip-privacy { margin-top: var(--space-4); margin-bottom: 0; }
    .trip-fallback { margin-top: var(--space-4); }
    .trip-fallback textarea { width: 100%; box-sizing: border-box; }
    .trip-fallback .trip-actions { margin-top: var(--space-3); }
    /* 2026-10-05: direct send. Success box, and the honeypot kept off-screen
       (not display:none — some bots skip hidden fields). */
    .trip-success { margin-top: var(--space-4); padding: var(--space-4); border-left: 3px solid var(--color-amber); background: var(--color-bg); }
    .trip-success p { margin: 0 0 var(--space-2); }
    .trip-success p:last-child { margin-bottom: 0; }
    .trip-success:focus { outline: none; }
    .trip-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
    /* Services list — two columns on wider screens. */
    .services-cols { margin: var(--space-2) 0 var(--space-4); }
    @media (min-width: 640px) {
      .services-cols { columns: 2; column-gap: var(--space-6); }
      .services-cols li { break-inside: avoid; }
    }
    /* Section hierarchy: "Two ways to book" is the section header; the two
       paths sit beneath it as subordinate blocks. */
    .ways-head { margin-top: var(--space-7); margin-bottom: var(--space-4); }
    .ways-head h2 { padding-top: 0; margin-top: 0; font-size: var(--text-2xl); }
    .ways-head h2::before { display: none; }
    .path-head {
      margin-top: var(--space-6);
      font-size: var(--text-lg);
    }
    /* Fee table: quiet left column, hairline rules only, generous padding.
       Fully overrides the global th styling (dark sticky header cells) —
       these are row labels, not column headers. */
    .fee-table { width:100%; border-collapse:collapse; margin: var(--space-3) 0 var(--space-2); font-size: var(--text-base); }
    .fee-table th, .fee-table td { text-align:left; padding:.85rem 1rem .85rem 0; border-bottom:1px solid var(--hairline); vertical-align:top; white-space:normal; }
    .fee-table th {
      position: static;
      background: transparent;
      color: var(--color-text);
      font-size: var(--text-base);
      font-weight: 400;
      text-transform: none;
      letter-spacing: normal;
      width: 45%;
    }
    .fee-table tr:last-child th, .fee-table tr:last-child td { border-bottom:0; }
    .fee-note { font-size:.9rem; color: var(--color-muted); }
    #booking-cta .leaving-note { display:block; margin-top:.5rem; font-size:.85rem; color: var(--color-muted); }
    /* Client reviews — quote cards, Playfair pull-quote style. The section
       is hidden until reviews.js finds entries in /data/reviews.json. */
    .reviews-section { margin-top: var(--space-2); }
    .reviews-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
      margin-top: var(--space-4);
    }
    @media (min-width: 720px) {
      .reviews-grid { grid-template-columns: 1fr 1fr; }
    }
    .review-card {
      margin: 0;
      padding: var(--space-5);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-top: 3px solid var(--color-gold);
      border-radius: var(--radius);
    }
    .review-quote {
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      font-size: var(--text-lg);
      font-style: italic;
      line-height: 1.55;
      color: var(--color-text);
    }
    .review-quote::before { content: "\201C"; }
    .review-quote::after { content: "\201D"; }
    .review-attr {
      margin-top: var(--space-3);
      font-size: var(--text-sm);
      font-style: normal;
      color: var(--color-muted);
    }
    .review-trip { font-style: italic; }

    /* ---- 2026-09-06 restyle: the page below the benefits band was one
       narrow column of prose. It is now a run of full-bleed bands that
       alternate cream and sand, with the two paths as photo cards, the
       services as an icon grid, the steps as a strip, the fees as tiles,
       and the form beside a photograph. Words, fees and fields unchanged. */
    .band { padding: var(--space-8) 0; }
    .band-cream { background: #fdf7ec; }
    .band-sand { background: #f7efdd; }
    .band .section-head { margin: 0 0 var(--space-5); }
    .band .section-head h2 { margin: 0; padding: 0; }
    .band .section-head h2::before { display: none; }
    .ways-band { padding-top: var(--space-7); }
    .ways-lede { max-width: 46em; margin: 0 0 var(--space-6); font-size: var(--text-lg); line-height: 1.55; }
    .ways-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
    @media (min-width: 900px) { .ways-grid { grid-template-columns: 1fr 1fr; } }
    .way-card { display: grid; grid-template-rows: 300px 1fr; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px rgba(58, 48, 36, .08); }
    .way-photo { overflow: hidden; }
    .way-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
    .way-card:hover .way-photo img { transform: scale(1.03); }
    .way-body { padding: var(--space-5) var(--space-6) var(--space-6); }
    .way-kicker { display: block; font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: #8a6a42; margin-bottom: var(--space-2); }
    .way-body h3 { margin: 0 0 var(--space-3); font-size: var(--text-xl); }
    .way-body p { margin: 0 0 var(--space-4); }
    .way-body p:last-child { margin-bottom: 0; }
    #booking-cta .leaving-note { display: block; }
    /* reviews: pull-quotes with a large brass mark */
    .reviews-band .reviews-grid { margin-top: 0; }
    .reviews-band .review-card { position: relative; padding: var(--space-6) var(--space-6) var(--space-5) var(--space-7); border-top: 1px solid var(--color-border); }
    .reviews-band .review-card::before { content: "\201C"; position: absolute; left: var(--space-4); top: var(--space-2); font-family: "Playfair Display", Georgia, serif; font-size: 4.5rem; line-height: 1; color: #c9a25e; opacity: .55; }
    .reviews-band .review-quote::before, .reviews-band .review-quote::after { content: none; }
    .reviews-band .review-quote { font-size: var(--text-xl); }
    /* services: three columns, each led by one of the band's sketch icons */
    .svc-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
    @media (min-width: 760px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
    .svc-col { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-5) var(--space-5) var(--space-4); }
    .svc-icon { width: 44px; height: 44px; color: #8a6a42; margin-bottom: var(--space-3); }
    .svc-col h3 { margin: 0 0 var(--space-3); font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--color-ink); }
    .svc-col ul { list-style: none; margin: 0; padding: 0; }
    .svc-col li { position: relative; padding: .35rem 0 .35rem 1.1rem; border-top: 1px solid var(--hairline); }
    .svc-col li:first-child { border-top: 0; }
    .svc-col li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 7px; height: 7px; border: 1.5px solid #c9a25e; transform: rotate(45deg); }
    /* steps: three stops across */
    .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-5); counter-reset: none; }
    @media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
    .steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; padding: 0; }
    .steps li::before { content: none; }
    .step-n { width: 44px; height: 44px; border-radius: 50%; background: var(--color-ink); color: #fff; display: grid; place-items: center; font-family: "Playfair Display", Georgia, serif; font-size: var(--text-lg); }
    .steps p { margin: .4rem 0 0; font-size: var(--text-lg); line-height: 1.45; }
    /* fees: four tiles, the amount as the large figure */
    .fee-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
    @media (min-width: 900px) { .fee-grid { grid-template-columns: repeat(4, 1fr); } }
    /* Each fee tile opens on a tap to what the fee covers: a native
       <details>, no script, so it holds under the strict content policy. */
    .fee-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-gold); border-radius: var(--radius); padding: var(--space-5); }
    .fee-tile summary { display: grid; gap: var(--space-2); cursor: pointer; list-style: none; }
    .fee-tile summary::-webkit-details-marker { display: none; }
    .fee-more { font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: #8a6a42; margin-top: var(--space-2); }
    .fee-more::after { content: " +"; }
    .fee-tile[open] .fee-more::after { content: " \2212"; }
    .fee-tile > p { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--hairline); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); }
    .fee-tile summary:focus-visible { outline: 2px solid var(--color-ocean); outline-offset: 4px; border-radius: 4px; }
    .fee-amt { font-family: "Playfair Display", Georgia, serif; font-size: var(--text-2xl); line-height: 1.1; color: var(--color-ink); }
    .fee-amt small { font-size: .6em; color: var(--color-muted); }
    .fee-what { font-weight: 600; }
    .fee-note-sm { font-size: var(--text-sm); color: var(--color-muted); }
    .fees-band .fee-note { margin-top: var(--space-5); }
    /* the request form beside a tall photograph */
    .request-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: stretch; }
    @media (min-width: 900px) { .request-grid { grid-template-columns: 3fr 2fr; } }
    .request-form .trip-form { margin-top: 0; }
    .request-photo { margin: 0; border-radius: var(--radius); overflow: hidden; min-height: 420px; box-shadow: 0 10px 30px rgba(58, 48, 36, .1); }
    .request-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
    @media (max-width: 899px) { .request-photo { display: none; } }
.page-hero-photo--focus-60 { object-position: 50% 60%; }

    /* Proof line under the hero: Virtuoso count and rate, linked to the profile. */
    .page-hero .proof-line { margin: var(--space-3) 0 0; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: #ecd9b8; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .35); }
    .page-hero .proof-line a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(236, 217, 184, .7); }
    .proof-sep { margin: 0 .6em; opacity: .7; }