:root {
  --ivory: #f8f5ed;
  --paper: #fffdf8;
  --ink: #302b25;
  --muted: #645c50;
  --gold: #95702b;
  --rule: #c7b38b;
  --crimson: #851f37;
  --crimson-hover: #68162b;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.7; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--crimson); }
button, input, select { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--crimson); outline-offset: 5px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
h1, h2 { line-height: 1.12; letter-spacing: -.045em; text-wrap: balance; }
h1 { max-width: 830px; margin: 25px auto 25px; font-size: clamp(2.65rem, 6.5vw, 5rem); }
h2 { max-width: 700px; margin: 16px auto 28px; font-size: clamp(2.15rem, 4.6vw, 3.75rem); }
h3 { line-height: 1.3; }
h1 em, h2 em { color: var(--gold-strong); font-weight: 400; }
/* Metallic color stays dark enough to read on the ivory sections. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  h2 em {
    background: linear-gradient(165deg, #7d5606 0%, #a8790c 34%, #8a6008 50%, #a8790c 64%, #7d5606 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
p { margin-bottom: 1.25rem; }
.skip-link { position: absolute; z-index: 20; top: 10px; left: 10px; padding: 10px 18px; background: white; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.brand-header { padding: 22px 24px 17px; display: flex; justify-content: center; background: transparent; }
.brand-logo { width: 180px; background: transparent; }
.section-shell { max-width: 1120px; margin: 0 auto; padding: 80px 32px; text-align: center; }
.eyebrow { margin: 0; color: var(--gold-text); font-size: .73rem; line-height: 1.6; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.local-line { margin: 9px 0 0; font-size: .8rem; color: var(--muted); letter-spacing: .025em; }
.season-opportunities { display: grid; grid-template-columns: 1fr 1fr; max-width: 650px; margin: 32px auto 0; border-top: 1px solid var(--rule); }
.season-opportunities > div { padding: 25px 22px 30px; }
.season-opportunities > div + div { border-left: 1px solid var(--rule); }
.season-opportunities h2 { margin: 13px 0 7px; color: var(--crimson); font-size: 1.35rem; letter-spacing: -.02em; }
.season-opportunities p { margin: 0; font-size: .87rem; line-height: 1.65; color: var(--muted); }
.season-icon { position: relative; display: block; height: 30px; width: 30px; margin: auto; color: var(--gold); }
.flower-icon::before, .flower-icon::after { content: ""; position: absolute; inset: 4px 7px; border: 1px solid currentColor; border-radius: 55% 55% 55% 55%; transform: rotate(45deg); }
.flower-icon::after { transform: rotate(-45deg); }
.flower-icon { background: radial-gradient(circle, var(--gold) 0 2px, transparent 2px); }
.venue-icon { width: 23px; border: 1px solid currentColor; border-radius: 14px 14px 0 0; }
.venue-icon::after { content: ""; position: absolute; inset: 5px 5px -1px; border: 1px solid currentColor; border-radius: 9px 9px 0 0; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 35px; min-height: 58px; min-width: 280px; max-width: 100%; padding: 15px 27px; border: 1px solid var(--crimson); border-radius: 2px; background: var(--crimson); color: #fffdf8; font-weight: 650; line-height: 1.5; text-decoration: none; transition: background .18s ease, transform .18s ease; }
.button:hover { background: var(--crimson-hover); transform: translateY(-1px); }
.button span { font-size: 1.25rem; line-height: 1; }
.hero-note { margin: 15px 0 0; font-size: .78rem; color: var(--muted); }
.hero-footnote { max-width: 450px; display: flex; align-items: center; justify-content: center; gap: 20px; margin: 51px auto 0; color: var(--gold); }
.hero-footnote > span:not(.small-diamond) { flex: 1; height: 1px; background: var(--rule); }
.small-diamond { font-size: .65rem; }
.problem { max-width: 900px; padding-top: 76px; }
.section-intro { max-width: 650px; margin: 0 auto 33px; color: var(--muted); }
.point-number { color: var(--gold); font-family: var(--serif); font-style: italic; font-size: 1.15rem; }
.section-closing { max-width: 620px; margin: 28px auto 0; font-family: var(--serif); font-size: 1.25rem; }
.process { max-width: none; background: #eee7d7; border-block: 1px solid #d9caad; }
.process.section-shell { padding-block: clamp(32px, 4vw, 44px); }
.process-summary { margin: 0 auto; color: #775621; font-size: .86rem; font-weight: 650; letter-spacing: .025em; }
.steps { max-width: 1056px; margin: 45px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; }
.steps li { padding: 0 28px; }
.steps li + li { border-left: 1px solid var(--rule); }
.step-number { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #b39867; border-radius: 50%; margin: 0 auto 20px; color: var(--crimson); font-family: var(--serif); font-size: 1.6rem; font-style: italic; line-height: 1.1; }
.steps h3 { font-size: 1.5rem; margin-bottom: 14px; }
.steps p { color: var(--muted); margin-bottom: 0; font-size: .95rem; }
.offer { padding-block: 85px; }
.offer-card { max-width: 850px; margin: auto; padding: 48px 68px; border: 1px solid var(--rule); border-block: 5px solid var(--crimson); background: var(--paper); box-shadow: 0 12px 42px #654b2410; }
.offer-intro { max-width: 530px; margin: 0 auto 34px; color: var(--muted); }
.included-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.included-list li { display: grid; grid-template-columns: 20px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid #ded2b9; }
.included-list li > span { color: var(--gold); padding-top: 2px; }
.included-list h3 { font-size: 1.35rem; margin: 0 0 7px; }
.included-list p { margin: 0; color: var(--muted); font-size: .94rem; }
.offer-terms { margin: 18px 0 0; padding: 28px 0 0; border-top: 1px solid var(--rule); }
.preview-label { display: inline-block; padding: 4px 11px; margin-bottom: 17px; color: #74531d; background: #f1eadb; border: 1px solid #d8c79f; border-radius: 2px; font-size: .69rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.offer-terms h3 { max-width: 480px; margin: 0 auto 15px; font-size: 1.75rem; text-wrap: balance; }
.offer-terms > p:not(.price) { color: var(--muted); font-size: .88rem; }
.offer-terms .price { margin: 14px 0 15px; color: var(--ink); font-family: var(--serif); font-size: 3.75rem; line-height: 1.05; letter-spacing: -.05em; }
.price span { font-family: var(--sans); font-size: .92rem; letter-spacing: 0; color: var(--muted); }
.terms-detail { max-width: 495px; margin: auto; }
.answers { max-width: 850px; padding-top: 0; }
.answer-list { margin-top: 37px; text-align: left; }
.answer-list article { padding: 26px 0; border-top: 1px solid var(--rule); }
.answer-list article:last-child { border-bottom: 1px solid var(--rule); }
.answer-list h3 { margin: 0 0 11px; font-size: 1.4rem; }
.answer-list p { margin: 0; color: var(--muted); font-size: .98rem; }
.booking { max-width: 900px; padding-top: 0; }
.booking h2 { max-width: 680px; }
#booking-heading:focus { outline: none; }
#booking-heading:focus-visible { outline: 3px solid var(--crimson); outline-offset: 9px; }
#demo-calendar { margin-top: 35px; }
.site-footer { margin: 0 32px; padding: 32px 16px 35px; border-top: 1px solid var(--rule); text-align: center; color: var(--muted); font-size: .8rem; }
.site-footer p { margin-bottom: 9px; }
.footer-brand { font-family: var(--serif); color: var(--ink); font-size: 1.35rem; letter-spacing: .02em; }
.footer-meta { font-size: .73rem; }
.footer-meta a { text-underline-offset: 3px; }
.privacy-content { max-width: 780px; margin: 0 auto; padding: 25px 28px 80px; }
.privacy-content h1 { font-size: clamp(2.4rem, 6vw, 3.5rem); text-align: center; }
.privacy-content h2 { margin: 32px 0 12px; font-size: 1.5rem; letter-spacing: -.02em; }
.privacy-content p { color: var(--muted); }
.privacy-content .privacy-notice { padding: 18px 22px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.privacy-date { text-align: center; font-size: .8rem; }
@media (max-width: 700px) {
  .brand-header { padding: 18px 20px; }
  .brand-logo { width: 158px; }
  .section-shell { padding: 59px 23px; }
  h1 { font-size: clamp(2.2rem, 8.2vw, 3.75rem); margin-top: 22px; }
  .season-opportunities { margin-top: 25px; }
  .season-opportunities > div { padding: 22px 5px 25px; }
  .season-opportunities h2 { font-size: 1.15rem; }
  .season-opportunities p { font-size: .74rem; }
  .hero-note { font-size: .73rem; }
  .hero-footnote { margin: 35px auto 0; max-width: 220px; }
  .button { width: 100%; min-width: 0; gap: 20px; font-size: .96rem; }
  .problem { padding-top: 41px; }
  .eyebrow { font-size: .65rem; letter-spacing: .13em; }
  .steps { grid-template-columns: 1fr; gap: 28px; margin: 33px auto 0; }
  .steps li { max-width: 420px; padding: 0; margin: auto; }
  .steps li + li { border-left: 0; border-top: 1px solid var(--rule); padding-top: 28px; }
  .step-number { margin-bottom: 14px; }
  .steps h3 { margin-bottom: 10px; }
  .process > .button { max-width: 420px; }
  .offer { padding: 57px 15px; }
  .offer-card { padding: 35px 22px; }
  .offer-card h2 { font-size: clamp(2rem, 7.4vw, 3rem); }
  .included-list { margin-top: 0; }
  .included-list li { gap: 11px; grid-template-columns: 15px 1fr; }
  .included-list h3 { font-size: 1.24rem; }
  .included-list p { font-size: .9rem; }
  .offer-terms h3 { font-size: 1.55rem; }
  .offer-terms .price { font-size: 3.25rem; }
  .answers { padding-top: 0; }
  .answer-list h3 { font-size: 1.3rem; }
  .booking { padding-top: 0; }
  .site-footer { margin-inline: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Shared booking-demo UI. Isolated from the three sales-page treatments. */
[hidden]{display:none!important}
#demo-calendar{margin:30px auto 0;max-width:690px;text-align:center}
.demo-widget{border:1px solid #d9c9b1;border-radius:10px;background:#fff;box-shadow:0 12px 45px #4b281d08;color:#282321;overflow:clip;font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif}
.demo-notice{display:flex;flex-direction:column;gap:5px;padding:19px 15px;background:#f5efe5;border-bottom:1px solid #e3d8c8}
.demo-notice strong{font-size:.9rem;color:#72212a}.demo-notice span{font-size:.74rem;line-height:1.5;color:#63574d}
.demo-progress{list-style:none;display:grid;grid-template-columns:1fr 1fr 1.7fr;gap:8px;padding:18px 14px;margin:0;border-bottom:1px solid #eee5d9;text-align:left}
.demo-progress li{display:flex;align-items:center;justify-content:center;gap:7px;font-size:.62rem;color:#766d64;line-height:1.3;font-weight:650}
.demo-progress b{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border:1px solid #cfc5b8;border-radius:50%;font-size:.65rem;font-weight:650}
.demo-progress [aria-current="step"]{color:#8a2028}.demo-progress [aria-current="step"] b{color:#fff;background:#8a2028;border-color:#8a2028}
.demo-body{padding:25px 14px 23px}.demo-step{max-width:420px;margin:auto}.demo-step h3{font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif;font-size:1.12rem;font-weight:700;line-height:1.4;letter-spacing:-.01em;color:#282321}
.demo-step h3:focus{outline-offset:4px}.demo-helper{color:#665a50;font-size:.76rem;margin:9px 0 0;line-height:1.5}
.demo-month{margin-top:23px}.demo-weekdays,.demo-date-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.demo-weekdays{margin-bottom:9px;font-size:.64rem;font-weight:650;color:#665a50}
.demo-date-grid>span,.demo-day{height:44px;display:grid;place-items:center;min-width:0;font-size:.84rem;line-height:1;padding:0;border-radius:4px}
.demo-day{border:1px solid #d4b993;background:#f7efe1;color:#70222a;font-weight:700;cursor:pointer}.demo-day:hover{background:#ecd9b7}.demo-day[aria-pressed="true"]{background:#8a2028;border-color:#8a2028;color:white}
.demo-inactive{color:#918a82}.demo-empty{color:transparent}.demo-footnote{max-width:43ch;margin:19px auto 0;color:#665a50;font-size:.76rem;line-height:1.65}
.demo-selected-date{font-weight:650;font-size:.89rem;line-height:1.6;margin:15px 0 0}.demo-time-list{display:grid;gap:10px;margin:23px 0 20px}
.demo-time{display:block;width:100%;min-height:48px;border:1px solid #d3b994;border-radius:4px;background:white;color:#74202b;font-size:.95rem;font-weight:600}
.demo-time:hover{background:#f8f1e7}.demo-time[aria-pressed="true"]{background:#8a2028;border-color:#8a2028;color:white}
.demo-confirm{display:block;width:100%;min-height:52px;padding:13px 12px;border:1px solid #8a2028;border-radius:4px;background:#8a2028;color:white;font-size:.88rem;font-weight:650;line-height:1.45}
.demo-confirm:disabled{background:#eee9e2;border-color:#ded4c8;color:#726b62;cursor:default}.demo-back{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 4px;margin-top:8px;border:0;background:none;color:#78232c;font-size:.76rem;line-height:1.5;text-decoration:underline;text-underline-offset:3px}
.demo-check{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 14px;border-radius:50%;background:#f6eddc;color:#8a2028;font-size:1.4rem}.demo-not-booked{margin-top:9px;font-size:.89rem;font-weight:650;color:#8a2028}
.demo-summary{display:flex;flex-direction:column;gap:8px;margin-top:21px;padding:20px 14px;border:1px solid #e1d5c4;border-radius:4px;background:#faf7f1;font-size:.88rem;line-height:1.6}.demo-summary>span:first-child{font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;color:#695c51}.demo-result .demo-confirm{margin-top:23px}
.demo-data-note{border-top:1px solid #eee5d9;padding:15px 12px;font-size:.66rem;color:#766b60;line-height:1.5;margin:0}
.demo-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.demo-widget :focus-visible{outline:3px solid #8a2028;outline-offset:3px}
.demo-nojs{padding:25px;border:1px solid #d9c9b1;border-radius:5px;background:white;color:#665a50;font-size:.9rem;line-height:1.6}
@media(min-width:600px){.demo-body{padding:30px 35px}.demo-progress{padding:19px 27px}.demo-progress li{font-size:.74rem}.demo-progress b{width:27px;height:27px;flex-basis:27px}.demo-weekdays,.demo-date-grid{gap:6px}.demo-date-grid>span,.demo-day{height:46px}.demo-notice span{font-size:.8rem}}

@media(max-width:540px){#demo-calendar{width:auto;max-width:none;position:static;left:auto;transform:none;margin-inline:-23px}.demo-widget{border-radius:0}.demo-body{padding-inline:14px}}
@media(max-width:374px){.demo-body{padding-inline:5px}.demo-weekdays,.demo-date-grid{gap:0}.demo-progress{gap:4px;padding-inline:8px}.demo-date-grid>span,.demo-day{min-width:0}.demo-step[data-step="2"],.demo-step[data-step="3"]{padding-inline:12px}}

.demo-widget p{margin-bottom:0}.demo-step h3{margin:0}

.privacy-return,.footer-meta a{display:inline-flex;align-items:center;min-height:44px;padding-inline:8px}.skip-link{min-height:44px}

/* Standalone neutral demo completion; direct navigation never claims a booking. */
.demo-completion-page{max-width:720px;margin:0 auto;padding:32px 22px 64px;text-align:center;font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif;color:#282321}.demo-completion-page>img{display:block;width:230px;max-width:100%;height:auto;margin:0 auto 35px;background:transparent}.demo-completion-label{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#725329;line-height:1.6;margin:0 0 18px}.demo-completion-page h1{font-size:clamp(2.5rem,9vw,4rem);line-height:1.1;margin:0 0 23px}.demo-completion-page p{max-width:53ch;line-height:1.7;margin:0 auto 20px}.demo-completion-page .demo-completion-status{font-weight:700;color:#8a2028;font-size:1.13rem}.demo-completion-return{display:flex;justify-content:center;align-items:center;max-width:350px;min-height:54px;margin:29px auto 10px;padding:14px 18px;background:#8a2028;color:#fff;border-radius:4px;text-decoration:none;font-weight:650;line-height:1.5}.demo-completion-privacy,.demo-complete-page{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px;color:#8a2028;font-size:.8rem;line-height:1.5;text-underline-offset:3px}.demo-complete-page{margin-top:9px}

.brand-logo{width:250px;background:transparent;box-shadow:none}@media(max-width:700px){.brand-logo{width:215px}}

/* October 3 mobile refinement: scoped hero and brand only; calendar styles unchanged. */
.mobile-refined .brand-header{padding:14px 24px 10px}
.mobile-refined .brand-logo{width:148px;max-width:100%;height:auto;margin-inline:auto}
@media(min-width:701px){.mobile-refined .brand-header{padding-top:19px;padding-bottom:14px}.mobile-refined .brand-logo{width:166px}}
@media(max-width:359px){.mobile-refined .brand-logo{width:132px}}

.mobile-refined .booking .booking-intro{max-width:48ch;margin:0 auto 12px;color:var(--muted);font-size:1rem;line-height:1.6;text-align:center}

/* October 3 iPad feedback: tighter section rhythm, compact offer and answers,
   proportionate booking panel. Claude refinement of the Codex 03 page.
   Calendar behavior (app.js) is unchanged. No overflow is hidden. */
:root { --pad-x: 32px; --section-y: 56px; }
.section-shell { padding: var(--section-y) var(--pad-x); }
h2 { margin: 12px auto 18px; }
.problem { padding-top: var(--section-y); }
.section-intro { margin-bottom: 22px; }
.section-closing { margin-top: 20px; }
.steps { margin-top: 26px; }
.step-number { width: 46px; height: 46px; margin-bottom: 12px; font-size: 1.4rem; }
.steps h3 { margin-bottom: 8px; }
.offer { padding-block: 40px; }
.offer-card { max-width: 740px; padding: 34px 44px 30px; }
.offer-intro { max-width: 560px; margin-bottom: 18px; }
.included-list li { padding: 14px 0; gap: 14px; }
.included-list h3 { margin-bottom: 4px; }
.offer-terms { margin-top: 6px; padding-top: 20px; }
.preview-label { margin-bottom: 10px; }
.offer-terms h3 { margin-bottom: 8px; }
.offer-terms > p:not(.price) { margin-bottom: 8px; }
.offer-terms .price { margin: 4px 0 8px; }
.terms-detail { margin-bottom: 0; }
.answers { max-width: none; padding-top: var(--section-y); padding-bottom: 52px; background: var(--paper); border-block: 1px solid #d9caad; }
.answers > .answer-list { max-width: 696px; margin-inline: auto; }
.answer-list { margin-top: 32px; }
.answer-list article { padding: 25px 0; }
.answer-list h3 { margin-bottom: 10px; }
.booking { max-width: 760px; padding-top: 0; }
.mobile-refined .booking .booking-intro { margin-bottom: 8px; }
#demo-calendar { margin-top: 16px; }
@media (min-width: 600px) {
  #demo-calendar { max-width: 600px; }
  .demo-body { padding: 24px 28px; }
  .demo-step { max-width: 520px; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  :root { --section-y: 48px; }
}
@media (max-width: 700px) {
  :root { --pad-x: 20px; --section-y: 40px; }
  .offer { padding: 28px 12px; }
  .offer-card { padding: 26px 18px 24px; }
  .answers { padding-bottom: 32px; }
}
@media (max-width: 540px) {
  #demo-calendar { margin-inline: calc(-1 * var(--pad-x)); }
}

/* Codex root review: course section order and the user's approved Codex 01
   original-image crop technique. Source JPG bytes and calendar code are unchanged. */
.fit.section-shell { max-width: none; padding: clamp(36px, 4.5vw, 56px) var(--pad-x); border-bottom: 1px solid #d9caad; text-align: center; }
.fit h2 { max-width: 26ch; margin: 0 auto 20px; font-size: clamp(1.6rem, 3vw, 2.15rem); line-height: 1.25; }
.fit p { max-width: 62ch; margin: 0 auto; color: var(--muted); font-size: .98rem; line-height: 1.75; }
.footer-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 0; }
.footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 10px; border-radius: 50%; text-decoration: none; }
.footer-socials a:hover { background: #ffe3a014; }
.footer-socials svg { display: block; width: 23px; height: 23px; }
.footer-socials .social-facebook { fill: currentColor; }
.footer-socials .social-instagram { fill: none; stroke: currentColor; stroke-width: 1.8; }
.footer-socials .instagram-dot { fill: currentColor; stroke: none; }

.review-status{margin:0;padding:8px 18px;text-align:center;background:#eee4d2;color:#614a31;font:600 12px/1.5 system-ui,sans-serif}

@media (forced-colors: active) {
  h2 em, .season-band h2 em { background: none; color: CanvasText; }
}

/* Repeat the preferred warm ivory while preserving the process-section contrast. */
.mobile-refined :is(.fit, .booking) { background-color: #eee7d7; }

/* Prepared HighLevel booking embed; existing brand and layout retained. */
.live-booking-frame{width:100%;background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--line,#d8cba9)}
.live-booking-frame iframe{display:block;width:100%;height:900px;border:0;background:#fff}
.booking-help{text-align:center;font-size:.95rem;line-height:1.6;margin:12px auto;color:var(--muted)}
.booking-help a{color:var(--crimson);text-underline-offset:3px}
@media(max-width:600px){.live-booking-frame iframe{height:1060px}.live-booking-frame{border-radius:12px}}
@media(max-width:359px){.booking .live-booking-frame{width:calc(100% + 2 * var(--pad-x));margin-inline:calc(-1 * var(--pad-x));border-inline:0;border-radius:0}}

/* October 5: compact, readable footer links on one row. */
.footer-links { flex-wrap: nowrap; gap: 8px; margin: 2px auto 0; }
.footer-links a { width: auto; min-height: 44px; padding: 5px 3px; gap: 5px; border-radius: 3px; font-size: .8rem; white-space: nowrap; }
.footer-links svg { width: 17px; height: 17px; flex: 0 0 17px; }
.footer-links .footer-privacy { text-decoration: underline; text-underline-offset: 3px; }


/* October 9 refresh: broad full-bleed hero, illustrated four-part story,
   reordered headlines and bright polished yellow-gold accents.
   Booking embed, Trinity artwork, prices and service terms are unchanged.
   Content is never hidden by default; motion is entrance-only. */
:root {
  --gold-text: #7a5a0e;        /* small gold text on ivory */
  --gold-strong: #a6780b;      /* large gold text on ivory */
  --gold-bright: #ecb63c;      /* polished accents and gold on crimson */
  --gold-light: #ffe8a6;
  --gold-polish: linear-gradient(100deg, #b07a17 0%, #ecb73c 20%, #fff1c0 38%, #f2c552 52%, #c98f1d 72%, #f7d06a 88%, #b9821a 100%);
  --gold-polish-v: linear-gradient(180deg, #f7d06a 0%, #ecb73c 30%, #fff1c0 50%, #d9a12c 75%, #b07a17 100%);
  --page-gutter: clamp(18px, 4.6vw, 72px);
  --wide: 1320px;
  --story-gap: clamp(12px, 2.6vw, 44px);
  --story-pad: clamp(10px, 1.2vw, 18px);
}

.eyebrow { text-wrap: balance; }

/* Hero: full-bleed warm background, readable inner measure. */
.hero { position: relative; padding: clamp(34px, 5.2vw, 84px) var(--page-gutter) clamp(34px, 4.4vw, 68px); text-align: center; background: radial-gradient(ellipse 55% 75% at 8% 0%, #f7e8c4 0%, #f7e8c400 72%), radial-gradient(ellipse 50% 70% at 96% 12%, #f4e2df 0%, #f4e2df00 70%), linear-gradient(180deg, var(--paper) 0%, var(--ivory) 100%); border-bottom: 1px solid #e3d5b6; }
.hero-inner { max-width: var(--wide); margin: 0 auto; }
.hero .eyebrow { max-width: 40ch; margin-inline: auto; font-size: clamp(.68rem, .62rem + .25vw, .82rem); letter-spacing: .15em; line-height: 1.5; }
.hero h1 { max-width: 20ch; margin: clamp(12px, 1.4vw, 20px) auto 0; font-size: clamp(2rem, 1.3rem + 3.9vw, 5.25rem); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; overflow-wrap: break-word; }
.hero h1 em { display: block; color: var(--crimson); }
.hero h1::after { content: ""; display: block; width: clamp(64px, 7vw, 116px); height: 4px; margin: clamp(16px, 1.8vw, 26px) auto 0; border-radius: 4px; background: var(--gold-polish); box-shadow: 0 1px 0 #fff8; }
.hero-kicker { max-width: 40ch; margin: clamp(16px, 1.8vw, 24px) auto 0; font-size: clamp(1.04rem, .96rem + .42vw, 1.36rem); font-weight: 650; line-height: 1.4; text-wrap: balance; }
.hero-detail { max-width: 62ch; margin: 10px auto 0; color: var(--muted); font-size: clamp(.97rem, .92rem + .26vw, 1.16rem); line-height: 1.65; text-wrap: pretty; }
.hero .local-line { margin: clamp(18px, 2.4vw, 32px) auto 0; color: #625036; font-size: clamp(.84rem, .8rem + .2vw, .95rem); font-weight: 600; line-height: 1.5; letter-spacing: .02em; }

/* Four-part story: medium illustrations with real HTML labels, no numbering. */
.story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: var(--wide); margin: clamp(26px, 3.8vw, 56px) auto 0; padding: 0; list-style: none; }
.story-step { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; padding: var(--story-pad) var(--story-pad) clamp(14px, 1.5vw, 22px); border: 1px solid #e6d6b0; border-radius: 16px; background: linear-gradient(180deg, #fffdf8 0%, #f9f1df 100%); box-shadow: inset 0 1px 0 #fff, 0 18px 34px -24px #6b4a1a66; }
.story-step::before { content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold-polish); }
.story-art { position: relative; display: block; width: 100%; max-width: 300px; }
.story-art img { width: 100%; height: auto; transition: scale .5s cubic-bezier(.2,.65,.25,1); }
.story-label { display: block; max-width: 100%; margin-top: clamp(6px, .8vw, 12px); color: var(--ink); font-family: var(--serif); font-size: clamp(1.02rem, .9rem + .55vw, 1.5rem); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
@media (min-width: 700px) {
  .story { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--story-gap); }
  /* Polished connector between neighbouring cards, at illustration height. */
  .story-step:not(:last-child) .story-art::after { content: ""; position: absolute; z-index: 1; top: 50%; left: calc(100% + var(--story-pad) + 1px); width: var(--story-gap); height: 2px; border-radius: 2px; background: linear-gradient(90deg, #c38d1e, #ecb63c 55%, #c99520); transform-origin: left center; }
  .story-step:not(:last-child) .story-art::before { content: ""; position: absolute; z-index: 1; top: calc(50% - 3px); left: calc(100% + var(--story-pad) + var(--story-gap) - 6px); width: 7px; height: 7px; border-top: 2px solid #c38d1e; border-right: 2px solid #c38d1e; transform: rotate(45deg); }
}

/* Section 2: full-bleed crimson band, two-column on wide screens. */
.season-band, .mobile-refined .season-band { position: relative; margin: 0; padding: clamp(42px, 6vw, 92px) var(--page-gutter); color: var(--paper); text-align: center; background: radial-gradient(ellipse 60% 95% at 88% 0%, #9e2c48 0%, #9e2c4800 68%), linear-gradient(180deg, #891f38 0%, #74172d 100%); border: 0; }
.band-inner { max-width: 1240px; margin: 0 auto; }
.season-band .eyebrow { color: var(--gold-light); font-size: clamp(.68rem, .62rem + .25vw, .82rem); letter-spacing: .15em; }
.season-band h2 { max-width: 17ch; margin: 14px auto 18px; color: #fffaf0; font-size: clamp(2rem, 1.3rem + 3.2vw, 4.3rem); line-height: 1.06; letter-spacing: -.04em; text-wrap: balance; overflow-wrap: break-word; }
.season-band h2 em { display: block; color: var(--gold-bright); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .season-band h2 em { background: linear-gradient(100deg, #f0c24f 0%, #fff2c4 24%, #eab43a 46%, #ffe7a0 62%, #f2c55a 78%, #f0c24f 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.band-copy { max-width: 56ch; margin: 0 auto; color: #f7ebe4; font-size: clamp(.98rem, .92rem + .3vw, 1.2rem); line-height: 1.7; text-wrap: pretty; }
@media (min-width: 960px) {
  .band-inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: end; text-align: left; }
  .season-band h2 { margin: 14px 0 0; }
  .band-copy { margin: 0 0 .4em; padding-left: clamp(22px, 2.2vw, 34px); border-left: 2px solid var(--gold-bright); }
}

/* Section 3: More orders. More bookings. Broad three-part row on wide screens. */
.problem, .problem.section-shell { max-width: var(--wide); padding: clamp(46px, 6vw, 96px) var(--page-gutter); }
.problem h2 { max-width: 16ch; font-size: clamp(2.15rem, 1.35rem + 3.3vw, 4.5rem); line-height: 1.04; overflow-wrap: break-word; }
.problem h2 em { display: block; color: var(--crimson); background: none; }
.problem .section-intro { max-width: 62ch; margin-bottom: 0; font-size: clamp(1rem, .95rem + .3vw, 1.18rem); text-wrap: pretty; }
.problem .section-closing { max-width: 58ch; margin: clamp(24px, 3vw, 42px) auto 0; font-size: clamp(1.14rem, 1.02rem + .5vw, 1.5rem); line-height: 1.5; text-wrap: balance; }

/* Wider supporting sections so the page no longer feels boxed in. */
.steps { max-width: 1200px; }
.steps li { position: relative; }
.steps li::before { content: ""; display: block; width: 44px; height: 3px; margin: 0 auto 16px; border-radius: 3px; background: var(--gold-polish); }
@media (min-width: 900px) {
  .answers > .answer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); max-width: 1180px; }
  .answer-list article:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
}

/* Entrance-only motion. Without animation support everything stays visible. */
@media (prefers-reduced-motion: no-preference) {
  .story-step { animation: story-rise .8s cubic-bezier(.2,.65,.25,1) backwards, story-emph .7s ease-out backwards; animation-delay: 0s, .45s; }
  .story-step:nth-child(2) { animation-delay: .12s, .8s; }
  .story-step:nth-child(3) { animation-delay: .24s, 1.15s; }
  .story-step:nth-child(4) { animation-delay: .36s, 1.5s; }
  .story-step:not(:last-child) .story-art::after { animation: story-connect .45s cubic-bezier(.2,.65,.25,1) .65s backwards; }
  .story-step:not(:last-child) .story-art::before { animation: story-chevron .3s ease-out .95s backwards; }
  .story-step:nth-child(2) .story-art::after { animation-delay: 1s; }
  .story-step:nth-child(2) .story-art::before { animation-delay: 1.3s; }
  .story-step:nth-child(3) .story-art::after { animation-delay: 1.35s; }
  .story-step:nth-child(3) .story-art::before { animation-delay: 1.65s; }
  .hero h1::after { animation: gold-sheen 1.6s ease-out .2s backwards; background-size: 220% 100%; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .story-step:hover .story-art img { scale: 1.035; }
}
@keyframes story-rise { from { opacity: .2; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes story-connect { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes story-chevron { from { opacity: 0; } to { opacity: 1; } }
@keyframes story-emph { from { --e: 0; } to { --e: 1; } }
@keyframes gold-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (forced-colors: active) {
  .story-step { border-color: CanvasText; }
  .story-step::before, .hero h1::after, .steps li::before, .story-step:not(:last-child) .story-art::after { background: CanvasText; }
  .story-step:not(:last-child) .story-art::before { border-color: CanvasText; }
  .band-copy { border-left-color: CanvasText; }
  /* Gradient headings: the later season-band gradient must not override this fallback. */
  h2 em, .season-band h2 em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: CanvasText; }
}


/* October 9 R2: a brand frame with impact, and scroll-responsive life.
   Header and footer share one crimson/gold language around the original emblem
   (source bytes unchanged; cropped with the approved clip, never redrawn).
   Effects follow the reader's scroll and rest when scrolling stops.
   Without JavaScript or motion, everything shows in its finished state. */
@property --e { syntax: "<number>"; inherits: true; initial-value: 1; }
:root {
  --mast-h: 72px; --mast-c: 72px; --mast-scale: 1;
  --gold-cta: linear-gradient(100deg, #e6ac35 0%, #ffe596 42%, #f2c24b 68%, #dca232 100%);
  --frame-bg: radial-gradient(ellipse 52% 135% at 50% 0%, #b02c4cd9 0%, #b02c4c00 72%), repeating-linear-gradient(118deg, #ffd88a12 0 1px, #ffd88a00 1px 14px), linear-gradient(180deg, #7b1631 0%, #540b20 100%);
}
@media (min-width: 700px) { :root { --mast-h: 88px; --mast-c: 88px; } }
@media (min-width: 1000px) { :root { --mast-h: 120px; --mast-c: 76px; --mast-scale: .62; } }
/* Anchors and focus land below the sticky header. */
:root:has(.masthead) { scroll-padding-top: calc(var(--mast-h) + 16px); }
:root.mast-collapse { scroll-padding-top: calc(var(--mast-c) + 16px); }
.skip-link { z-index: 50; }

/* Shared lockup: one substantial emblem beside large polished lettering. */
.brand-lockup { display: flex; align-items: center; justify-content: center; gap: var(--lockup-gap, 12px); filter: drop-shadow(0 2px 0 #34061280) drop-shadow(0 10px 16px #1c030a66); }
.brand-emblem { position: relative; display: block; flex: none; width: calc(var(--emblem-h, 46px) * 1.080333); height: var(--emblem-h, 46px); overflow: hidden; clip-path: polygon(0 0,100% 0,100% 36.7036%,84.6154% 36.7036%,81.6667% 42.9363%,52.5641% 100%,0 100%); }
.brand-emblem img { position: absolute; left: 0; top: 0; width: 164.102565%; max-width: none; height: auto; margin: 0; }
.brand-wordmark { display: block; color: #ffe3a0; font-family: Baskerville, "Palatino Linotype", "Book Antiqua", Georgia, serif; font-size: var(--word-size, 1.95rem); font-weight: 600; line-height: 1.08; letter-spacing: .03em; white-space: nowrap; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .brand-wordmark { background: linear-gradient(100deg, #d29a2c 0%, #f6cb5a 16%, #fff4cc 27%, #f2c048 38%, #d79e30 54%, #ffe9a6 68%, #eab53f 82%, #c98f24 100%); background-size: 240% 100%; background-position: calc(var(--glint, .3) * 100%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* Masthead: deep wine field, fine gold hairlines, a luminous lower rule.
   Desktop eases into a compact bar; phone and tablet keep a stable height. */
.masthead { position: sticky; top: 0; z-index: 30; height: var(--mast-h); overflow: hidden; background: var(--frame-bg); box-shadow: 0 14px 30px -22px #2a0610; }
.mast-collapse .masthead { top: calc(var(--mast-c) - var(--mast-h)); }
.masthead::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold-polish); }
.masthead::after, .masthead-sheen { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(104deg, #fff0 38%, #ffe7a826 46%, #fff6dc66 50%, #ffe7a826 54%, #fff0 62%); background-size: 260% 100%; background-position: 100% 0; }
.masthead-sheen { background-position: calc((1 - var(--sweep, 0)) * 100%) 0; }
.masthead-inner { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--page-gutter); transform: translateY(calc(var(--p, 0) * (var(--mast-h) - var(--mast-c)) / 2)); }
.masthead-lockup { grid-column: 2; --emblem-h: 46px; --word-size: 1.95rem; --lockup-gap: 12px; transform: scale(calc(1 - var(--p, 0) * (1 - var(--mast-scale)))); }
.masthead-cta { display: none; }
.scroll-progress { position: absolute; z-index: 4; left: 0; bottom: 0; width: 100%; height: 3px; transform-origin: left center; transform: scaleX(var(--progress, 0)); background: linear-gradient(90deg, #f3c64f, #fff3c8 70%, #ffd96e); box-shadow: 0 0 12px #ffd96eaa; }
.masthead .masthead-cta, .finale .finale-cta { color: #3b0b17; text-decoration: none; background: var(--gold-cta); background-size: 200% 100%; transition: background-position .6s ease, transform .2s ease; }
.masthead-cta:hover, .finale-cta:hover { background-position: 100% 0; }
.masthead-cta:focus-visible, .finale-cta:focus-visible, .finale :focus-visible { outline: 3px solid #fff3c8; outline-offset: 3px; }
@media (min-width: 700px) {
  .masthead-lockup { --emblem-h: 60px; --word-size: 2.6rem; --lockup-gap: 16px; }
  .masthead-cta { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 22px; border-radius: 999px; font: 700 .9rem/1.2 var(--sans); letter-spacing: .02em; white-space: nowrap; box-shadow: inset 0 1px 0 #fff8, inset 0 -1px 0 #9a6a1a66, 0 8px 20px -10px #000c; }
  .masthead-cta:hover { transform: translateY(-1px); }
}
@media (min-width: 1000px) { .masthead-lockup { --emblem-h: 84px; --word-size: 3.7rem; --lockup-gap: 22px; } }

/* Section 2: gold rules draw in and the heading gleams once as it arrives. */
.season-band::before, .season-band::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--gold-polish); transform-origin: center; transition: transform 1.2s cubic-bezier(.2,.65,.25,1); }
.season-band::before { top: 0; }
.season-band::after { bottom: 0; }
.motion-on .season-band:not(.is-in)::before, .motion-on .season-band:not(.is-in)::after { transform: scaleX(0); }
/* R1 review: give the clipped gradient room for descenders without changing spacing. */
.season-band h2 em { padding-bottom: .14em; margin-bottom: -.14em; }

/* Story: reading-order emphasis on arrival, then gentle scroll depth.
   --e (emphasis) and --d (depth, px) default to the finished, static state. */
.story-step { box-shadow: inset 0 1px 0 #fff, 0 18px 34px -24px #6b4a1a66, 0 0 0 1px rgb(220 162 50 / calc(var(--e) * .55)), 0 22px 44px -26px rgb(201 141 31 / calc(var(--e) * .7)); }
.story-step::before { transform: scaleX(calc(.35 + var(--e) * .65)); }
.story-art img { translate: 0 calc(var(--d, 0) * 1px - var(--e) * 4px); }
@media (max-width: 699px) {
  .story { max-width: 460px; }                       /* R1 review: keep 2x2 art medium-sized */
}
@media (min-width: 700px) {
  /* R1 review: the rotated arrowhead stops short of the next card. */
  .story-step:not(:last-child) .story-art::before { left: calc(100% + var(--story-pad) + var(--story-gap) - 12px); }
  .story-step:not(:last-child) .story-art::after { width: calc(var(--story-gap) - 6px); }
}
@media (min-width: 700px) and (max-width: 899px) { .story-label { font-size: .95rem; } }

/* R1 review: tidy wrapping without changing any wording. */
.problem .eyebrow { text-wrap: wrap; }
.answer-list h3 { text-wrap: balance; }
.nowrap { white-space: nowrap; }
.kicker-part { display: inline-block; }

/* Footer finale: the same frame, a larger lockup and a clear closing invitation. */
.finale { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 128px) var(--page-gutter) 0; color: #f6e7d6; text-align: center; background: var(--frame-bg); }
.finale::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 3px; background: var(--gold-polish); }
.finale-glow { position: absolute; left: 50%; top: -12%; width: min(1100px, 150vw); height: min(760px, 110vw); translate: -50% 0; background: radial-gradient(ellipse at 50% 32%, #f5c85a42 0%, #f5c85a00 62%); opacity: calc(.35 + var(--f, 1) * .65); pointer-events: none; }
.finale-inner { position: relative; max-width: var(--wide); margin: 0 auto; }
.finale-lockup { flex-direction: column; --emblem-h: 96px; --word-size: clamp(2.7rem, 1.9rem + 4vw, 6.2rem); --lockup-gap: 14px; transform: translateY(calc((1 - var(--f, 1)) * 34px)) scale(calc(.9 + var(--f, 1) * .1)); transform-origin: 50% 100%; }
.finale-tagline { max-width: 40ch; margin: clamp(18px, 2vw, 26px) auto 0; color: #f1dccb; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.6; text-wrap: balance; }
.finale-rule { display: block; width: min(560px, 72%); height: 2px; margin: clamp(30px, 4vw, 52px) auto; border-radius: 2px; background: var(--gold-polish); transform: scaleX(calc(.15 + var(--f, 1) * .85)); }
.finale-heading { max-width: 16ch; margin: 0 auto; color: #fffaf0; font-size: clamp(2.1rem, 1.4rem + 3vw, 4.2rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.finale-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 60px; max-width: 100%; margin-top: clamp(24px, 3vw, 36px); padding: 16px clamp(26px, 3vw, 42px); border-radius: 999px; font: 700 clamp(1rem, .96rem + .2vw, 1.12rem)/1.3 var(--sans); letter-spacing: .01em; box-shadow: inset 0 1px 0 #fff9, inset 0 -2px 0 #9a6a1a55, 0 18px 40px -18px #000e, 0 0 0 1px #ffe7a855; }
.finale-cta:hover { transform: translateY(-2px); }
.finale-cta span { font-size: 1.25em; line-height: 1; transition: transform .2s ease; }
.finale-cta:hover span { transform: translateX(4px); }
.finale-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(104deg, #fff0 35%, #fffbe9b3 50%, #fff0 65%); background-size: 260% 100%; background-position: 100% 0; }
.finale-base { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: clamp(48px, 7vw, 88px); padding: 14px 0 20px; border-top: 1px solid #ffe3a033; }
.finale-base a { color: #ffe3a0; }
.finale-email { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; font-size: .92rem; text-underline-offset: 3px; }
.finale .footer-links { margin: 0; gap: 18px; }
.finale .footer-links a { font-size: .86rem; }
.finale .footer-links a:hover { background: #ffe3a014; }
@media (min-width: 700px) { .finale-lockup { flex-direction: row; --emblem-h: clamp(104px, 9vw, 148px); --lockup-gap: clamp(18px, 2vw, 30px); } }
@media (min-width: 760px) { .finale-base { flex-direction: row; justify-content: space-between; } }

/* Time-based moments are short (under 2.5 seconds) and play once. */
@media (prefers-reduced-motion: no-preference) {
  .masthead::after { animation: frame-sheen 2s cubic-bezier(.3,.6,.3,1) .35s 1 both; }
  .motion-on .season-band.is-in h2 em { animation: band-gleam 1.8s ease-out .35s 1 both; }
  .motion-on .finale.is-arrived .finale-cta::after { animation: frame-sheen 1.4s ease-out .15s 1 both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 699px) {
  /* Phone 2x2: emphasise each row together, top row first. */
  .story-step:nth-child(2) { animation-delay: .12s, .45s; }
  .story-step:nth-child(3), .story-step:nth-child(4) { animation-delay: .24s, .95s; }
}
@keyframes frame-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes band-gleam { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (forced-colors: active) {
  .masthead, .finale { forced-color-adjust: auto; border-bottom: 2px solid CanvasText; }
  .finale { border-top: 2px solid CanvasText; }
  .masthead::after, .masthead-sheen, .finale-glow, .finale-cta::after { display: none; }
  .masthead::before, .finale::before, .finale-rule, .season-band::before, .season-band::after { background: CanvasText; }
  .scroll-progress { background: Highlight; box-shadow: none; }
  .masthead .masthead-cta, .finale .finale-cta { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .brand-lockup { filter: none; }
  .brand-wordmark { background: none; color: CanvasText; }
}


/* R3 liveliness (Kevin: "none of that liveliness"): gentle ambient motion at rest.
   Gold light recurs across the masthead, both wordmarks and the three bar faces;
   the story art floats and a gold emphasis travels card to card in reading order.
   Text, controls and the calendar never move. Loops run only with JavaScript
   (.motion-on); system reduced motion disables them entirely. (R4: no manual pause.) */
.ingot p { position: relative; }
.ingot-text { position: relative; z-index: 1; }
.story-step::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px #e6b545, 0 0 0 7px #f2cf6a2e, 0 24px 50px -16px #d39a2a99; }
@media (prefers-reduced-motion: no-preference) {
  .motion-on .masthead::after { animation: frame-sheen-loop 7s cubic-bezier(.3,.6,.3,1) .35s infinite; }
  .motion-on .brand-wordmark { animation: wordmark-glint 7s ease-in-out .5s infinite; }
  .motion-on .finale .brand-wordmark { animation-delay: 1.6s; }
  .motion-on .story-art img { animation: story-float 6.4s ease-in-out infinite; }
  .motion-on .story-step:nth-child(2) .story-art img { animation-delay: -1.6s; }
  .motion-on .story-step:nth-child(3) .story-art img { animation-delay: -3.2s; }
  .motion-on .story-step:nth-child(4) .story-art img { animation-delay: -4.8s; }
  .motion-on .story-step::after { animation: story-glow 8s ease-in-out 2.4s infinite; }
  .motion-on .story-step:nth-child(2)::after { animation-delay: 4.4s; }
  .motion-on .story-step:nth-child(3)::after { animation-delay: 6.4s; }
  .motion-on .story-step:nth-child(4)::after { animation-delay: 8.4s; }
}
@keyframes frame-sheen-loop { 0% { background-position: 100% 0; } 32%, 100% { background-position: 0 0; } }
@keyframes wordmark-glint { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@keyframes story-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes story-glow { 0% { opacity: 0; } 9% { opacity: 1; } 25%, 100% { opacity: 0; } }
@media (forced-colors: active) {
  .story-step::after { display: none; }
}


/* October 9 R3 (approved art): the three More orders / More bookings messages
   on realistic silver, gold and platinum bars. The bars are undistorted
   backgrounds (exact aspect ratio, never stretched); the original sentences are
   real HTML text set inside each bar's measured top face. A moving reflection
   recurs over the metal only, masked by the bar's own alpha; the text never moves. */
.problem-points { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(6px, 1.4vw, 14px); max-width: var(--wide); margin: clamp(26px, 3.4vw, 46px) auto 0; }
.ingot { width: min(100%, 520px); --ratio: 960 / 379; --pt: 2.75; --pb: 14.75; --px: 9.5; --ink: #1c1a19; --shine: #ffffff; }
.ingot-gold { --ratio: 960 / 376; --pt: 2.5; --pb: 14.9; --ink: #33200a; --shine: #fff4d2; }
.ingot-platinum { --ratio: 960 / 365; --pt: 2.25; --pb: 13.6; --ink: #1d1d23; --shine: #ffffff; }
.ingot p { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: var(--ratio); margin: 0; padding: calc((var(--pt) + 1.4) * 1%) calc(var(--px) * 1%) calc((var(--pb) + 1.4) * 1%); background: center top / 100% auto no-repeat; color: var(--ink); font: 650 clamp(.95rem, .9rem + .25vw, 1.06rem)/1.35 var(--sans); letter-spacing: .005em; text-align: center; text-wrap: balance; text-shadow: 0 1px 0 rgb(255 255 255 / .5), 0 -1px 0 rgb(0 0 0 / .12); }
/* Exaggerated specular sweep (Kevin: "Exaggerate the shine"): a wide bright glow with a
   hot core, plus a thin trailing streak, screened over the metal only. */
.ingot p::before, .ingot p::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; background-repeat: no-repeat; background-size: 260% 100%; background-position: 100% 0; -webkit-mask: var(--metal) center top / 100% auto no-repeat; mask: var(--metal) center top / 100% auto no-repeat; }
.ingot p::before { background-image: linear-gradient(105deg, #fff0 24%, color-mix(in srgb, var(--shine) 28%, transparent) 35%, color-mix(in srgb, var(--shine) 70%, transparent) 44%, #fffffff2 49%, #fffffff2 51%, color-mix(in srgb, var(--shine) 70%, transparent) 56%, color-mix(in srgb, var(--shine) 28%, transparent) 65%, #fff0 76%); }
.ingot p::after { background-image: linear-gradient(105deg, #fff0 40%, #ffffffd9 42.5%, #fff0 45%); }
.ingot-silver p { background-image: url("./assets/bar-silver-real-20261009.png"); background-image: image-set(url("./assets/bar-silver-real-20261009.webp") type("image/webp"), url("./assets/bar-silver-real-20261009.png") type("image/png")); }
.ingot-gold p { background-image: url("./assets/bar-gold-real-20261009.png"); background-image: image-set(url("./assets/bar-gold-real-20261009.webp") type("image/webp"), url("./assets/bar-gold-real-20261009.png") type("image/png")); }
.ingot-platinum p { background-image: url("./assets/bar-platinum-real-20261009.png"); background-image: image-set(url("./assets/bar-platinum-real-20261009.webp") type("image/webp"), url("./assets/bar-platinum-real-20261009.png") type("image/png")); }
.ingot-silver { --metal: url("./assets/bar-silver-real-20261009.webp"); }
.ingot-gold { --metal: url("./assets/bar-gold-real-20261009.webp"); }
.ingot-platinum { --metal: url("./assets/bar-platinum-real-20261009.webp"); }
/* R10: the shine mask reuses the bar image the background already loaded. Browsers without image-set() type()
   (e.g. Safari 14-16) show the PNG background, so their mask uses the same PNG: one download per bar everywhere. */
@supports not (background-image: image-set(url("./assets/bar-gold-real-20261009.webp") type("image/webp"))) {
  .ingot-silver { --metal: url("./assets/bar-silver-real-20261009.png"); }
  .ingot-gold { --metal: url("./assets/bar-gold-real-20261009.png"); }
  .ingot-platinum { --metal: url("./assets/bar-platinum-real-20261009.png"); }
}
@media (max-width: 379px) {
  /* Narrow phones: let the bars use a little of the gutter so three lines stay on the face. */
  .ingot { width: calc(100% + 2 * var(--page-gutter) - 12px); margin-inline: calc(6px - var(--page-gutter)); }
  .ingot p { font-size: .9rem; line-height: 1.3; }
}
@media (min-width: 1280px) {
  /* Three across, left to right, only where the faces genuinely fit. */
  .problem-points { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(18px, 2vw, 30px); }
  .ingot { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .motion-on .ingot p::before { opacity: 1; animation: ingot-shine 4.8s cubic-bezier(.45,.05,.35,1) .6s infinite; }
  .motion-on .ingot p::after { opacity: 1; animation: ingot-shine 4.8s cubic-bezier(.45,.05,.35,1) .78s infinite; }
  .motion-on .ingot-gold p::before { animation-delay: 1.2s; }
  .motion-on .ingot-gold p::after { animation-delay: 1.38s; }
  .motion-on .ingot-platinum p::before { animation-delay: 1.8s; }
  .motion-on .ingot-platinum p::after { animation-delay: 1.98s; }
}
@keyframes ingot-shine { 0% { background-position: 100% 0; } 48%, 100% { background-position: 0 0; } }
@media (forced-colors: active) {
  .ingot p { aspect-ratio: auto; padding: 18px 22px; border: 2px solid CanvasText; border-radius: 6px; background: Canvas; color: CanvasText; text-shadow: none; }
  .ingot p::before, .ingot p::after { display: none; }
}


/* R4 (Kevin: "Bring that liveliness to the TXA logo"): the original crest itself
   catches a bright polished glint and gently floats, in header and footer.
   The light is masked by the crest image's own alpha at the identical size and
   position as the <img>, so it falls only on the crest. Image bytes, crop and
   proportions are unchanged; the wordmark and layout stay fixed. */
.brand-emblem::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: linear-gradient(115deg, #fff0 34%, #fff1c44d 43%, #fffcefeb 49%, #fffcefeb 51%, #fff1c44d 57%, #fff0 66%) 100% 0 / 320% 100% no-repeat; -webkit-mask: url("./assets/txassets-ivory-835-20261013.webp") 0 0 / 164.102565% auto no-repeat; mask: url("./assets/txassets-ivory-835-20261013.webp") 0 0 / 164.102565% auto no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .motion-on .brand-emblem { animation: crest-float 5.6s ease-in-out infinite; transform-origin: 50% 62%; }
  .motion-on .finale .brand-emblem { animation-delay: -2.8s; }
  .motion-on .brand-emblem::after { opacity: 1; animation: crest-glint 5.6s cubic-bezier(.45,.05,.35,1) 1s infinite; }
  .motion-on .finale .brand-emblem::after { animation-delay: 2.6s; }
}
@keyframes crest-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4.5%) scale(1.035); } }
@keyframes crest-glint { 0% { background-position: 100% 0; } 44%, 100% { background-position: 0 0; } }
@media (forced-colors: active) { .brand-emblem::after { display: none; } }


/* R5 (Kevin: "I would like the wording on the bars to look engraved with a fancy font"):
   the three original sentences are cut into each metal face in an engraver-style serif
   italic from local system fonts (no downloads). A dark recessed interior, a fine
   shadowed upper edge and a bright lower lip tinted to each metal. Real, selectable
   HTML text; the words, art, shine and layout are unchanged. */
.ingot { --cut-top: #111215; --cut-low: #3c3f46; --lip: rgb(255 255 255 / .82); --edge: rgb(0 0 0 / .4); }
.ingot-gold { --cut-top: #221201; --cut-low: #57370c; --lip: rgb(255 239 186 / .88); --edge: rgb(72 38 0 / .55); }
.ingot-platinum { --cut-top: #121318; --cut-low: #43464f; --lip: rgb(255 255 255 / .92); --edge: rgb(22 24 32 / .36); }
.ingot p { font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(1.02rem, .96rem + .3vw, 1.15rem); line-height: 1.26; letter-spacing: .012em; text-shadow: none; }
.ingot-text { color: var(--cut-low); text-shadow: 0 1px 0 var(--lip), 0 -1px 0 var(--edge); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  /* Interior shading per line (darker at the top of each cut); edges via drop-shadow so
     they sit behind the clipped fill. background-size is separate so an unsupported
     `lh` unit only loses the per-line repeat, never the text fill. */
  .ingot-text { color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(180deg, var(--cut-top) 0%, var(--cut-low) 100%); background-repeat: repeat-y; -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 1px 0 var(--lip)) drop-shadow(0 -.6px 0 var(--edge)); }
  .ingot-text { background-size: 100% 1lh; }
}
@media (max-width: 379px) { .ingot p { font-size: .98rem; line-height: 1.24; } }
@media (forced-colors: active) {
  .ingot p { font-style: normal; }
  .ingot-text { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; filter: none; text-shadow: none; }
}


/* R7 (Kevin: "less wordy — what we do, how we do it, where it takes us"):
   the hero keeps one lead sentence, and two short questions sit in the service
   card as native, keyboard-accessible disclosures. Cost terms stay visible above them. */
.hero h1 + .hero-detail { max-width: 46ch; margin-top: clamp(16px, 1.8vw, 24px); color: var(--ink); font-size: clamp(1.06rem, .98rem + .42vw, 1.36rem); font-weight: 600; line-height: 1.4; text-wrap: balance; }
.offer-faq { margin-top: 20px; padding-top: 6px; border-top: 1px solid var(--rule); text-align: left; }
.offer-faq details { border-bottom: 1px solid #ded2b9; }
.offer-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 10px 0; color: var(--ink); font-family: var(--serif); font-size: 1.12rem; line-height: 1.35; cursor: pointer; list-style: none; }
.offer-faq summary::-webkit-details-marker { display: none; }
.offer-faq summary::after { content: "+"; flex: none; color: var(--gold-strong); font: 600 1.35rem/1 var(--sans); }
.offer-faq details[open] summary::after { content: "\2013"; }
.offer-faq summary:focus-visible { outline: 3px solid var(--crimson); outline-offset: 3px; }
.offer-faq details p { margin: 0 0 14px; color: var(--muted); font-size: .95rem; line-height: 1.6; }
@media (forced-colors: active) { .offer-faq summary::after { color: CanvasText; } }