/* HAVEN · site.css
   Three looks live on html[data-look]: mist (default), sand, gloaming. Every pairing was checked for contrast at AA.
   Comfort settings live on html[data-size] (text size) and html[data-still] (calm: no motion).
   The machinery (ribbon, toolbar, desk, forms, callbar) keeps the same class names as every FireForge issue. */
/* Fallbacks measured 2026-10-26 (canvas widths and font-box heights) to match Alegreya (against Georgia) and Atkinson Hyperlegible (against Arial) so the page keeps its shape while the web fonts load. */
@font-face { font-family: "Alegreya Fallback"; font-weight: 400 500; src: local("Georgia"); size-adjust: 89.8%; ascent-override: 113.6%; descent-override: 39%; line-gap-override: 0%; }
@font-face { font-family: "Alegreya Fallback"; font-weight: 600 700; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 78.3%; ascent-override: 130.2%; descent-override: 44.7%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 98.6%; ascent-override: 96.3%; descent-override: 29.4%; line-gap-override: 0%; }
:root {
  --font-head: "Alegreya", "Alegreya Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible", "Atkinson Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 6px;
  --btn-r: min(var(--radius), 10px);
  --wrap: 1080px;
  --read: 44rem;
  --bg: #f5f1ea; --bg2: #ebe5da; --panel: #fbf9f4; --line: #d6cdbd;
  --ink: #22302c; --ink2: #4a5853; --accent: #2f5d56; --accent-ink: #ffffff; --link: #2a5650;
  --hero-a: #f5f1ea; --hero-b: #ebe5da; --hero-ink: #22302c; --ring: rgba(47,93,86,.2);
  --foot: #1c2a27; --foot-ink: #d9e0db;
  --field: #8a8270;
}
html[data-look="sand"] {
  --bg: #f8efe4; --bg2: #efe2d0; --panel: #fffaf2; --line: #dccab3;
  --ink: #3a2b24; --ink2: #66534a; --accent: #9a4a2b; --accent-ink: #ffffff; --link: #833b20;
  --hero-a: #f8efe4; --hero-b: #efe2d0; --hero-ink: #3a2b24; --ring: rgba(154,74,43,.2);
  --foot: #33251f; --foot-ink: #ecdfd0; --field: #9a8570;
}
html[data-look="gloaming"] {
  --bg: #17201e; --bg2: #1f2a27; --panel: #25322f; --line: #3b4a46;
  --ink: #e9eee9; --ink2: #b5c2bc; --accent: #a9cdbd; --accent-ink: #11201b; --link: #bfe0d0;
  --hero-a: #17201e; --hero-b: #1f2a27; --hero-ink: #e9eee9; --ring: rgba(169,205,189,.26);
  --foot: #0f1715; --foot-ink: #c4d0ca; --field: #7f948c;
}
html[data-font="alegreya"] { --font-head: "Alegreya", "Alegreya Fallback", Georgia, "Times New Roman", serif; }
html[data-font="atkinson"] { --font-head: "Atkinson Hyperlegible", "Atkinson Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; }
html[data-font="system"] { --font-head: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html[data-corners="round"] { --radius: 20px; }
html[data-corners="sharp"] { --radius: 0px; }
html[data-zone="right"] .hero-in { text-align: right; }
html[data-zone="right"] .hero-in .ctas { justify-content: flex-end; }

* { box-sizing: border-box; }
/* The page is sized in rem from an 18px base. The Comfort control raises the root size, so every rem on the page grows together. */
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
html[data-size="2"] { font-size: 125%; }
html[data-size="3"] { font-size: 137.5%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.7 var(--font-body); }
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: .18em; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.12; margin: 0 0 .5em; text-wrap: balance; font-weight: 500; letter-spacing: -.005em; }
h1 { font-size: clamp(2.4rem, 4.4vw, 3.7rem); line-height: 1.04; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h2 em, h1 em { font-style: italic; color: var(--accent); }
h3 { font-size: 1.28rem; font-weight: 500; line-height: 1.2; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.wrap.narrow { max-width: var(--read); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -80px; background: var(--accent); color: var(--accent-ink); padding: 12px 16px; z-index: 50; border-radius: var(--btn-r); min-height: 44px; display: inline-flex; align-items: center; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tiny { font-size: .86rem; color: var(--ink2); }
.lead { font-size: 1.1rem; color: var(--ink2); max-width: 34rem; }
.mt { margin-top: 2.5rem; }
.row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.linkish { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
/* Small labels are sentence case and quiet. No capitals, no wide tracking: easy to read at any size. */
.kicker { font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: .01em; color: var(--accent); margin: 0 0 1rem; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 1.5px solid var(--accent); border-radius: var(--btn-r); padding: 11px 24px; font: 700 .95rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.1); }
.btn.big { padding: 15px 30px; font-size: 1rem; }
.btn.small { padding: 8px 16px; font-size: .88rem; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink2); }
.btn.ghost:hover { filter: none; background: var(--bg2); }
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.chip { display: inline-block; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--btn-r); padding: 6px 14px; margin: 0 8px 8px 0; text-decoration: none; font: inherit; font-size: .92rem; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip.still-chip { cursor: default; }
.chip.still-chip:hover { border-color: var(--line); }
.more { margin: 1.25rem 0 0; font-weight: 700; }
.more a { text-decoration-thickness: 1.5px; }

/* ribbon (demo only) */
/* the demo ribbon wraps by width, so it sets in the system face: it never re-wraps when the web font lands */
.ribbon { background: #fff4d6; color: #3a2a00; border-bottom: 3px solid #e2b23a; font-size: .92rem; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.ribbon .wrap { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; justify-content: space-between; padding: 8px 0; }
.ribbon p { margin: 0; }
.ribbon a { color: #7a4a00; }
.yours { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: end; }
.yours label { display: flex; flex-direction: column; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.yours input, .yours select { font: inherit; font-size: .95rem; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 6px 8px; border: 1px solid #b89658; border-radius: 4px; background: #fff; color: #222; min-width: 0; width: 150px; }
.yours-lead { font-weight: 600; }
.yours .btn.small { background: #7a4a00; border-color: #7a4a00; color: #fff; }
.yours .btn.small.ghost { background: transparent; color: #7a4a00; }
@media (max-width: 720px) { .yours { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: end; } .yours .yours-lead { grid-column: 1 / -1; } .yours input, .yours select { width: 100%; } }



/* language picker (from lib/i18n) */
.langpick { position: relative; }
.langpick summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--btn-r); color: var(--ink); font-size: .9rem; }
.langpick summary::-webkit-details-marker { display: none; }
.langpick .globe { display: none; }
.langmenu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; display: grid; min-width: 150px; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.langmenu a { color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: var(--btn-r); }
.langmenu a:hover, .langmenu a[aria-current] { background: var(--bg2); }

/* the language switch: EN | ES as quiet text in the top bar, the current one underlined */
.langpick-inline { display: inline-flex; align-items: center; gap: 0; }
.langpick-inline .globe { display: none; }
.langpick-inline a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; font-size: .84rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; color: var(--ink2); }
.langpick-inline a + a { border-left: 1px solid var(--line); }
.langpick-inline a:hover { color: var(--ink); }
.langpick-inline a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--accent); }
.langpick-inline a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* forms */
label { display: block; font-weight: 700; font-size: .95rem; }
input, select, textarea { font: inherit; font-weight: 400; color: var(--ink); background: var(--panel); border: 1px solid var(--field); border-radius: var(--btn-r); padding: 10px 12px; width: 100%; margin-top: 6px; }
input[type="color"] { width: 48px; height: 36px; padding: 2px; vertical-align: middle; margin-top: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 16px; }
.block { margin-bottom: 16px; }
.hint { display: block; font-weight: 400; margin-top: 4px; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4em; font-weight: 500; }
.quote { border-top: 1px solid var(--line); padding-top: 24px; }
.receipt { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--btn-r); padding: 18px 20px; }
.signup { border-top: 1px solid var(--line); }
.signup-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.signup-form input { flex: 1 1 240px; margin: 0; }
.fallback { background: var(--panel); border: 1px solid var(--line); padding: 12px 14px; border-radius: var(--btn-r); }

/* footer */
.foot { background: var(--foot); color: var(--foot-ink); padding: clamp(48px, 6vw, 80px) 0 90px; }
.foot a { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.1fr 1.35fr .9fr; gap: 32px clamp(32px, 5vw, 72px); margin-bottom: 36px; }
.foot-brand { font: 500 1.6rem/1.2 var(--font-head); color: #fff; max-width: 22rem; }
.foot-head { color: #fff; font-weight: 700; margin-bottom: .5em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-line { border-top: 1px solid rgba(255,255,255,.18); padding-top: 18px; font-size: .9rem; }
.foot .linkish { color: var(--foot-ink); }
.foot .tiny { color: var(--foot-ink); opacity: .85; }
.noscript { margin: 0; padding: 10px 16px; background: var(--bg2); text-align: center; font-size: .9rem; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr; gap: 20px; } }

/* fixed call bar on phones */
.callbar { display: none; }
@media (max-width: 720px) {
  .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; justify-content: center; align-items: center; gap: 8px; background: var(--bg); color: var(--ink); border-top: 1px solid var(--ink); text-decoration: none; font-weight: 700; letter-spacing: .01em; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .callbar[hidden] { display: none; }
  .callbar svg { width: 20px; height: 20px; fill: currentColor; }
  .top .call { display: none; }
}
html[data-demo] .callbar { bottom: 0; }

/* owner toolbar */
.owner { position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 100%); background: var(--panel); color: var(--ink); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0,0,0,.25); z-index: 40; overflow-y: auto; padding: 0 18px 30px; font-size: .95rem; }
.owner[hidden] { display: none; }
.owner-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; position: sticky; top: 0; background: var(--panel); }
.owner-title { margin: 0; font: 600 1.1rem var(--font-head); }
.owner-title .tiny { display: block; font: .8rem var(--font-body); }
.x { background: none; border: 1px solid var(--line); color: inherit; border-radius: var(--radius); width: 34px; height: 34px; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.tabs button { background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--btn-r); padding: 6px 11px; font: 500 .8rem var(--font-body); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pane .lead { font-size: 1rem; }
.pane label { margin-bottom: 8px; }
.pane .row label { flex: 1 1 160px; }
.looks { display: grid; gap: 8px; margin-bottom: 12px; }
.look { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; text-align: left; background: var(--bg2); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius); padding: 10px; cursor: pointer; font: inherit; }
.look[aria-pressed="true"] { border-color: var(--accent); }
.look .swatch { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 4px; border: 2px solid var(--line); }
.look small { color: var(--ink2); }
.sections { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.sections li { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; }
.sections li b { flex: 1; }
.sections li.off b { text-decoration: line-through; color: var(--ink2); }
.sections button { background: none; border: 1px solid var(--line); color: inherit; border-radius: var(--radius); padding: 3px 8px; cursor: pointer; font: inherit; font-size: .85rem; }
.sections select { font: inherit; font-size: .85rem; max-width: 40%; }
.sections li[data-sec] { flex-wrap: wrap; }
.sections li small[data-diff] { flex-basis: 100%; font-size: .8rem; color: var(--ink2); }
.checks { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.checks li { padding: 6px 10px; border-radius: var(--radius); background: var(--bg2); border-left: 4px solid #4caf50; }
.checks li.warn { border-left-color: #e2b23a; }
.checks li.bad { border-left-color: #d13b2c; }
.ld { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; font-size: .75rem; max-height: 260px; overflow: auto; white-space: pre-wrap; }
.ai-team { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ai-team a { display: block; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; color: var(--ink); text-decoration: none; }
.ai-team a span { display: block; font-size: .85rem; color: var(--ink2); }
.url { display: block; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; word-break: break-all; font-size: .85rem; flex: 1 1 200px; }
.answer { white-space: pre-wrap; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 40px; }
.answer:empty { display: none; }
.nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 14px; }
.nums div { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.nums dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink2); }
.nums dd { margin: 0; font: 600 1.8rem var(--font-head); font-variant-numeric: tabular-nums; }
.steps { padding-left: 20px; }
.steps li { margin-bottom: 6px; }
body.editing [data-edit] { outline: 2px dashed var(--accent); outline-offset: 3px; cursor: text; }
[data-edit][contenteditable="true"]:focus { outline: 3px solid var(--accent); }

/* studio desk */
.desk-open { position: fixed; left: 16px; bottom: 16px; z-index: 26; border-radius: var(--btn-r); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.desk-open[hidden] { display: none; }
@media (max-width: 720px) { .desk-open { bottom: 76px; } }
/* the floating desk button sits above the call bar on phones; the footer ends clear of both so the Owner link stays tappable */
@media (max-width: 720px) { body:has(.desk-open:not([hidden])) .foot { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); } }
.desk-panel { position: fixed; left: 16px; bottom: 16px; width: min(380px, calc(100% - 32px)); max-height: min(70vh, 560px); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 48px rgba(0,0,0,.3); z-index: 41; padding: 0 14px 14px; display: flex; flex-direction: column; }
.desk-panel[hidden] { display: none; }
.desk-log { overflow-y: auto; flex: 1; display: grid; gap: 8px; margin-bottom: 10px; }
.desk-log p { margin: 0; padding: 8px 12px; border-radius: var(--radius); background: var(--bg2); max-width: 92%; }
.desk-log p.you { background: var(--accent); color: var(--accent-ink); margin-left: auto; }
.starters { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.starters .chip { margin: 0; font-size: .85rem; padding: 4px 10px; }
.desk-form { display: flex; gap: 6px; }
.desk-form input { margin: 0; }

/* The look peek in the demo ribbon: three swatch buttons, each a whole look, pressed one outlined */
.peek { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.peek-cap { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-right: 2px; }
.peek-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #3a2a00; border: 2px solid #d9c08a; border-radius: 6px; padding: 4px 12px 4px 5px; font-size: .82rem; font-weight: 600; line-height: 1.2; font-family: inherit; cursor: pointer; }
.peek-btn .swatch { width: 18px; height: 18px; border-radius: 3px; border: 1px solid rgba(0,0,0,.2); }
.peek-btn:hover { border-color: #7a4a00; }
.peek-btn[aria-pressed="true"] { border-color: #3a2a00; background: #3a2a00; color: #fff; }
@media (max-width: 720px) { .peek { grid-column: 1 / -1; } }



/* ============================================================
   HAVEN, the Linen redesign. A two-tier masthead, a hero that hands its right half to a real photograph,
   a slow rhythm of wide sections, a timetable you can book from, and a quiet green footer.
   ============================================================ */

/* masthead: name and tools on one row, the menu as a plain text row beneath */
.top { background: var(--bg); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.top .wrap.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand tools" "nav nav"; align-items: center; gap: 0 24px; padding: 14px 0 0; }
.brand { grid-area: brand; justify-self: start; display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 500 1.65rem/1.1 var(--font-head); min-height: 44px; }
.mark { width: 30px; height: 30px; color: var(--accent); flex: none; }
.nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 2.6vw, 34px); margin-top: 10px; }
.nav a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px; font-weight: 700; font-size: .95rem; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.nav a:hover { border-bottom-color: var(--line); }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.tools { grid-area: tools; justify-self: end; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.tools > * { flex: none; }
.call b { font-weight: 700; }
.call span b { display: none; }
.top .tools .btn { min-height: 44px; padding: 8px 18px; font-size: .9rem; }
.top .call { background: transparent; color: var(--ink); border-color: var(--ink2); }
.menu-btn { display: none; grid-area: menu; }

/* the comfort control: a quiet bordered button with an A inside */
.comfort { position: relative; }
.cf-open { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: var(--btn-r); font: 700 .9rem/1 var(--font-body); cursor: pointer; }
.cf-open::before { content: "A"; font: 500 1.15rem/1 var(--font-head); color: var(--accent); }
.cf-open:hover, .cf-open[aria-expanded="true"] { border-color: var(--accent); }
.cf-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 17rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: 0 14px 34px rgba(0,0,0,.16); text-align: left; }
.cf-panel[hidden] { display: none; }
.cf-h { font-weight: 700; margin: 0 0 .5em; font-size: .95rem; }
.cf-sizes { display: flex; gap: 8px; margin-bottom: 14px; }
.cf-sizes button { flex: 1; min-height: 44px; border-radius: var(--btn-r); background: var(--bg); color: var(--ink); border: 1.5px solid var(--line); font: 700 1rem/1 var(--font-body); cursor: pointer; }
.cf-sizes button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cf-calm { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .95rem; font-weight: 400; cursor: pointer; }
.cf-calm input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin: 0; }
/* reserve the Comfort button's room before scripts reveal it, so nothing in the masthead moves */
@media (scripting: enabled) { .comfort[hidden] { display: block; visibility: hidden; } }

/* ---- the hero ---- */
.hero { background: var(--bg); color: var(--ink); position: relative; }
.hero .sub { font-size: clamp(1.1rem, 1.5vw, 1.28rem); color: var(--ink2); max-width: 32rem; margin-bottom: 1.6rem; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 0; }
.hero-grid { --L: max(16px, calc((100% - var(--wrap)) / 2)); display: grid; grid-template-columns: var(--L) minmax(0, 1fr) clamp(360px, 46%, 760px); }
.home-hero .hero-in { grid-column: 2; grid-row: 1; padding: clamp(48px, 6.5vw, 92px) clamp(32px, 4.5vw, 64px) 28px 0; align-self: end; }
.hero-fig { grid-column: 3; grid-row: 1 / 3; position: relative; margin: 0; min-height: 360px; background: var(--bg2); }
.hero-fig .photo, .hero-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-after { display: contents; }
.start { grid-column: 2; grid-row: 2; padding: 4px clamp(32px, 4.5vw, 64px) clamp(36px, 4vw, 56px) 0; }
.start-h { font-weight: 700; margin: 0 0 .25rem; font-size: .95rem; color: var(--ink2); }
.start-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.start-list li { border-bottom: 1px solid var(--line); }
.start-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-height: 52px; padding: 12px 0; color: var(--ink); text-decoration: none; }
.start-list a:hover .s-name { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.s-name { font: 500 1.35rem/1.2 var(--font-head); }
.s-price { font-weight: 700; color: var(--accent); text-align: right; }
.start-more { margin: 10px 0 0; }
.start-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.proof { grid-column: 1 / -1; grid-row: 3; list-style: none; margin: 0; padding: 22px max(16px, calc((100% - var(--wrap)) / 2)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 28px; background: var(--bg2); border-top: 1px solid var(--line); }
.proof li { display: grid; gap: 2px; align-content: start; }
.proof b { font: 500 1.55rem/1.1 var(--font-head); color: var(--ink); }
.proof span { font-size: .92rem; color: var(--ink2); }

/* inner pages: a quiet text hero */
.hero.small .hero-grid { display: block; padding: clamp(36px, 5vw, 72px) 0 clamp(8px, 2vw, 24px); }
.hero.small h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); max-width: 40rem; }
.hero.small .sub { margin-bottom: 0; }
.hero.small .ctas { margin-top: 1.4rem; }

/* ---- bands ---- */
.band { padding: clamp(56px, 8vw, 112px) 0; background: var(--bg); }
.band-head { max-width: 40rem; margin-bottom: clamp(28px, 4vw, 48px); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.split-head { }
@media (min-width: 900px) { .split-head { position: sticky; top: 24px; } }
.split-head .lead { margin-bottom: 0; }
.hero.small + .band { padding-top: clamp(24px, 3.5vw, 48px); }

/* next sessions */
.next-band { background: var(--bg); }
.nextlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.nextlist li { display: grid; grid-template-columns: minmax(8.5rem, 11rem) minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.nextlist li[hidden] { display: none; }
.when { font: 500 1.5rem/1.15 var(--font-head); display: grid; gap: 2px; }
.when b { font-family: var(--font-body); font-weight: 700; font-size: .9rem; color: var(--accent); }
.what { font: 500 1.35rem/1.2 var(--font-head); }
.lvl { display: block; font: 400 .92rem/1.4 var(--font-body); color: var(--ink2); margin-top: 3px; }

/* what we offer: wide sheets with a photograph */
.offer-band { background: var(--bg); border-top: 1px solid var(--line); }
.sheets { display: grid; gap: clamp(20px, 3vw, 32px); }
.sheet { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.sheet.has-photo { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); overflow: hidden; padding: 0; }
.sheet-photo { position: relative; display: block; }
.sheet-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sheet-body { padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 28px; align-content: center; }
.sheet-body > * { grid-column: 1; margin: 0; }
.sheet-body .kind { font-weight: 700; font-size: .92rem; color: var(--accent); }
.sheet-body .len { color: var(--ink2); font-weight: 400; margin-left: 8px; }
.sheet-body h3 { font-size: clamp(1.45rem, 2.2vw, 1.8rem); margin: 0 0 .1em; }
.sheet-body .who { color: var(--ink2); max-width: 36rem; }
.sheet-body p:not([class]) { color: var(--ink2); max-width: 36rem; margin-top: .4em; }
.sheet-body .buy { grid-column: 2; grid-row: 1 / span 4; align-self: center; display: grid; gap: 10px; justify-items: end; text-align: right; }
.price { font: 500 1.45rem/1.15 var(--font-head); color: var(--ink); }
.offer-band .more { margin-top: 1.5rem; }

/* a first session: numbered steps */
.first-band { background: var(--bg2); }
.fsteps { list-style: none; counter-reset: fs; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.fsteps li { counter-increment: fs; border-top: 1px solid var(--ink); padding-top: 14px; }
.fsteps li::before { content: counter(fs, decimal-leading-zero); display: block; font: 400 2.5rem/1 var(--font-head); color: var(--accent); margin-bottom: 14px; }
.fsteps h3 { font-size: 1.2rem; margin: 0 0 .35em; }
.fsteps p { color: var(--ink2); font-size: .98rem; margin: 0; }
.first-full .fsteps { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 48rem; }
.first-full .fsteps li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.first-full .fsteps li::before { grid-row: 1 / span 2; margin: 0; font-size: 2.4rem; }
.first-full .fsteps li > * { grid-column: 2; }
.bring { margin-top: clamp(32px, 5vw, 56px); max-width: 48rem; padding: 24px clamp(20px, 3vw, 32px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.bring ul { margin: 0; padding-left: 1.2rem; }
.bring li { margin-bottom: .35em; }
.after { max-width: 48rem; margin-top: 24px; color: var(--ink2); }
.first-band .more { margin-top: 2rem; }

/* the teacher */
.teacher-band { background: var(--bg); border-top: 1px solid var(--line); }
.teacher-band .split-head h2 { font-size: clamp(2.2rem, 4.2vw, 3.3rem); }
.creds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); }
.creds li { border-top: 1px solid var(--ink); padding: 16px 0 28px; }
.creds h3 { font-size: 1.25rem; margin-bottom: .3em; }
.creds p { color: var(--ink2); font-size: .98rem; margin: 0; }
.creds-band { background: var(--bg); }

/* a note on care */
.care-band { background: var(--bg2); padding: clamp(36px, 5vw, 64px) 0; }
.care { max-width: var(--read); border-left: 3px solid var(--accent); padding-left: 24px; }
.care h2 { font-size: 1.4rem; margin-bottom: .3em; }
.care p { margin: 0; color: var(--ink2); }

/* find us: a photograph bleeding to the left edge, the facts beside it */
.reach-band { background: var(--bg2); padding: 0; }
.reach-band .wrap { padding-block: clamp(48px, 7vw, 96px); }
.reach-band.has-photo { --L: max(16px, calc((100% - var(--wrap)) / 2)); }
.reach-band.has-photo > .wrap.reach-grid { width: auto; max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: clamp(360px, 46%, 760px) minmax(0, 1fr) var(--L); }
.reach-fig { grid-column: 1; margin: 0; position: relative; min-height: 380px; background: var(--bg); }
.reach-fig .photo, .reach-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reach-band.has-photo .reach-in { grid-column: 2; padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 7vw, 96px) clamp(32px, 5vw, 72px); }
.reach-in h2 { margin-bottom: .4em; }
.reach-in .lead { max-width: 32rem; }
.reach-facts { margin: 1.4rem 0 1.8rem; border-top: 1px solid var(--ink); max-width: 34rem; }
.reach-facts > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.reach-facts dt { font-weight: 700; color: var(--accent); font-size: .92rem; }
.reach-facts dd { margin: 0; }
.reach-facts a { display: inline-flex; align-items: center; min-height: 44px; }
.reach-band:not(.has-photo) .reach-in { max-width: 40rem; }

/* questions: a hairline accordion */
.faq-band { background: var(--bg); }
.faq { border-top: 1px solid var(--ink); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 10px 0; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font: 400 1.9rem/1 var(--font-head); color: var(--accent); flex: none; width: 1.2em; text-align: center; }
.qa[open] summary::after { content: "\2212"; }
.qa h3 { font-size: 1.25rem; margin: 0; }
.qa p { margin: 0 0 1.2rem; max-width: 40rem; color: var(--ink2); }

/* get in touch */
.enquire-band { background: var(--bg2); }
.enquire-band .notice { border-left: 3px solid var(--accent); padding: 2px 0 2px 16px; margin: 1.4rem 0 0; color: var(--ink2); max-width: 26rem; }
.enquiry { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3.5vw, 36px); }
.enquiry .grid2 { display: grid; gap: 14px 18px; }
.enquiry label.block { display: block; margin-top: 14px; }
.enquiry textarea { width: 100%; }
.enquiry .row { margin-top: 18px; align-items: center; }
.enquiry .hint { display: block; font-weight: 400; color: var(--ink2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.receipt { background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius); padding: clamp(20px, 3.5vw, 32px); }
.receipt[hidden], .fallback[hidden] { display: none; }

/* contact cards, hours, reading text */
.contact-band { background: var(--bg); }
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); margin-top: 1.6rem; }
.contact-cards > div { border-top: 1px solid var(--ink); padding: 16px 0 24px; }
.contact-cards h3 { font-size: 1.2rem; margin-bottom: .35em; }
.contact-cards p { margin: 0 0 .3em; color: var(--ink2); }
.hours-band { background: var(--bg2); }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.hours thead th { font-size: .9rem; color: var(--accent); border-bottom: 1px solid var(--ink); }
.hours tbody th { font-weight: 700; width: 38%; }
.visit-band { background: var(--bg); }
.prose p { max-width: var(--read); }
.prose p + p { margin-top: 1em; }
.story-band { background: var(--bg); }
.points-band { background: var(--bg2); }
.points-list { list-style: none; counter-reset: pt; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); }
.points-list li { counter-increment: pt; border-top: 1px solid var(--ink); padding: 16px 0 28px; }
.points-list li::before { content: counter(pt, decimal-leading-zero); display: block; font: 400 2rem/1 var(--font-head); color: var(--accent); margin-bottom: 10px; }
.points-list h3 { font-size: 1.25rem; margin-bottom: .3em; }
.points-list p { color: var(--ink2); margin: 0; }
.forwho-band { background: var(--bg); }
.twin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); margin-top: 1.6rem; }
.twin .sheet { padding: clamp(20px, 3vw, 32px); display: block; }
.twin .sheet.yes { border-top: 3px solid var(--accent); }
.twin .sheet.no { border-top: 3px solid var(--line); }
.twin ul { margin: 0; padding-left: 1.2rem; }
.twin li { margin-bottom: .45em; }
.wrap.narrow.prose { padding-block: 0; }
.legal-care { border-left: 3px solid var(--accent); padding-left: 16px; }

/* the timetable */
.tt-band { background: var(--bg); }
.daybar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.daybar[hidden] { display: none; }
.daybar button { min-height: 44px; padding: 0 18px; background: transparent; color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--btn-r); font: 700 .95rem/1 var(--font-body); cursor: pointer; }
.daybar button:hover { border-color: var(--ink); }
.daybar button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (scripting: enabled) { .daybar[hidden] { display: flex; visibility: hidden; } }
.tt { width: 100%; border-collapse: collapse; }
.tt thead th { text-align: left; font-size: .9rem; color: var(--accent); padding: 0 16px 12px 0; border-bottom: 1px solid var(--ink); }
.tt tbody th, .tt tbody td { text-align: left; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tt tbody th { font-weight: 700; }
.tt .tm { font: 500 1.3rem/1.2 var(--font-head); white-space: nowrap; }
.tt .tm .len { display: block; font: 400 .88rem/1.3 var(--font-body); color: var(--ink2); margin: 2px 0 0; }
.tt .cls { font: 500 1.3rem/1.2 var(--font-head); }
.tt .lv, .tt .pl { color: var(--ink2); }
.tt .act { text-align: right; padding-right: 0; }
.tt tr[hidden] { display: none !important; }
.booknote { margin-top: 20px; color: var(--ink2); max-width: 40rem; }

/* ---- width rules: one column below 900px ---- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: var(--L) minmax(0, 1fr) clamp(300px, 40%, 420px); }
  .fsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sheet.has-photo { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
  .sheet-body { grid-template-columns: minmax(0, 1fr); }
  .sheet-body .buy { grid-column: 1; grid-row: auto; justify-items: start; text-align: left; grid-auto-flow: column; align-items: center; justify-content: space-between; margin-top: 12px; }
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
  .twin, .creds, .points-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  /* a narrow desktop: keep the masthead on one line by dropping the Call button (the number is in the page) */
  .top .tools .call { display: none; }
}

/* ---- owner zone settings: centre or right hands the whole width to the headline and drops the photo to its own band ---- */
@media (min-width: 721px) {
  html[data-zone="center"] .home-hero .hero-in, html[data-zone="right"] .home-hero .hero-in { grid-column: 1 / -1; padding-inline: var(--L); padding-bottom: 24px; }
  html[data-zone="center"] .home-hero .hero-in { text-align: center; }
  html[data-zone="center"] .hero .sub { margin-inline: auto; }
  html[data-zone="right"] .hero .sub { margin-left: auto; }
  html[data-zone="center"] .hero .ctas { justify-content: center; }
  html[data-zone="center"] .hero-fig, html[data-zone="right"] .hero-fig { grid-column: 1 / -1; grid-row: 2; min-height: 0; aspect-ratio: 3 / 1; }
  html[data-zone="center"] .start, html[data-zone="right"] .start { grid-column: 1 / -1; grid-row: 3; padding-inline: var(--L); padding-top: 28px; }
  html[data-zone="center"] .proof, html[data-zone="right"] .proof { grid-row: 4; }
}

/* ---- rows that are designed compositions, not card grids ---- */
.nextlist li { grid-template-areas: "when what go"; }
.sheet-body { grid-template-areas: "main buy"; }
@media (max-width: 900px) { .sheet-body { grid-template-areas: "main"; } }
.points-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---- quiet text links keep a full-size tap target ---- */
.more a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- v6.6 Point and change: the Customize button and the editor ---------- */
.q-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.q-cz { display: grid; gap: 2px; text-align: left; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font: inherit; cursor: pointer; }
.q-cz b { font: 600 .95rem var(--font-head); }
.q-cz small { font-size: .78rem; color: var(--ink2); line-height: 1.3; }
.q-cz[aria-pressed="true"] { border-color: #1D67CD; box-shadow: inset 0 0 0 1px #1D67CD; }
.q-cz:focus-visible { outline: 2px solid #1D67CD; outline-offset: 2px; }
#cz { position: fixed; inset: 0; pointer-events: none; z-index: 45; }
.cz-box, .cz-sec-box { position: fixed; border-radius: 6px; pointer-events: none; transition: all .08s ease-out; }
.cz-box { outline: 3px solid #1D67CD; outline-offset: 2px; background: rgba(29,103,205,.08); }
.cz-sec-box { outline: 2px dashed rgba(29,103,205,.75); outline-offset: -2px; }
.cz-sec-box.whole { outline-style: solid; outline-width: 3px; background: rgba(29,103,205,.06); }
.cz-chip { position: absolute; left: 0; top: -30px; background: #1D67CD; color: #fff; font: 600 .78rem/1 var(--font-body); padding: 7px 10px; border-radius: 6px; white-space: nowrap; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.cz-sec-chip { top: 6px; left: 6px; background: rgba(20,40,90,.88); }
.cz-box[hidden], .cz-sec-box[hidden] { display: none; }
.cz-pop { position: fixed; z-index: 48; width: min(380px, calc(100vw - 24px)); max-height: min(78vh, 620px); overflow-y: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(10,20,50,.3); padding: 12px 16px 16px; font-size: .95rem; }
.cz-pop[hidden] { display: none; }
.cz-pop.sheet { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto; max-height: 82vh; max-height: 82dvh; border-radius: 16px 16px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.cz-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cz-pop-head h2 { margin: 0; font: 600 1.05rem var(--font-head); outline: none; }
.cz-pop label { display: block; font-weight: 600; font-size: .88rem; margin: 10px 0 4px; }
.cz-pop textarea { min-height: 90px; }
.cz-acts { display: grid; gap: 6px; }
.cz-act { display: grid; gap: 2px; width: 100%; text-align: left; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font: inherit; cursor: pointer; }
.cz-act b { font-size: .95rem; }
.cz-act small { font-size: .8rem; color: var(--ink2); line-height: 1.3; }
.cz-act:hover, .cz-act:focus-visible { border-color: #1D67CD; box-shadow: inset 0 0 0 1px #1D67CD; }
.cz-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.cz-hint { font-size: .82rem; color: var(--ink2); margin: 6px 0 0; }
.cz-msg { font-size: .88rem; margin: 8px 0 0; min-height: 0; }
.cz-msg:empty, .cz-answer:empty { display: none; }
.cz-answer { white-space: pre-wrap; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-size: .88rem; margin: 10px 0 0; max-height: 240px; overflow: auto; }
.cz-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 46; width: min(620px, calc(100vw - 24px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px rgba(10,20,50,.28); padding: 10px 14px; font-size: .92rem; }
.cz-bar[hidden] { display: none; }
.cz-bar p { margin: 0; }
.cz-bar .cz-note:empty { display: none; }
.cz-bar .cz-note { margin-top: 4px; font-size: .85rem; color: var(--ink2); }
.cz-bar .cz-row { margin-top: 8px; }
@media (max-width: 720px) { .cz-bar { left: 0; right: 0; bottom: 0; transform: none; width: auto; border-radius: 12px 12px 0 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } }
body.customizing main * { cursor: pointer; }
@media (max-width: 720px) { body.customizing .callbar { display: none; } }
.cz-added { margin-top: 18px; }
.cz-added.cz-text p { max-width: 42rem; }
.cz-pic { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.cz-sec .wrap > :first-child { margin-top: 0; }
.cz-sec .wrap > h2 + p { margin-inline: auto; text-align: center; max-width: 42rem; }
[data-layout="center"] { text-align: center; }
[data-layout="center"] .cz-pic { margin-inline: auto; }
[data-layout="narrow"] > .wrap { max-width: 760px; }
[data-layout="shade"] { background: var(--bg2); }
.cz-flash { animation: cz-flash 1.2s ease-out; }
@keyframes cz-flash { 0% { box-shadow: inset 0 0 0 4px #1D67CD, 0 0 0 4px rgba(29,103,205,.35); } 100% { box-shadow: inset 0 0 0 4px rgba(29,103,205,0), 0 0 0 4px rgba(29,103,205,0); } }
@media (prefers-reduced-motion: reduce) { .cz-flash { animation: none; box-shadow: inset 0 0 0 4px #1D67CD; } }
.cz-peek { box-shadow: inset 0 0 0 4px rgba(29,103,205,.7); }


/* A section's own look, set in Customize, whole section, Look (lib/added.cjs look() writes the --s-* values).
   Panels inside the section (cards, forms, tables) keep the site's own ink, so words on white stay dark. */
html { --pink: var(--ink); --pink2: var(--ink2); --pmuted: var(--muted); }
main > section[data-s-fg] { color: var(--s-fg); --ink: var(--s-fg); --ink2: var(--s-fg); --muted: var(--s-fg); --hero-ink: var(--s-fg); }
main > section[data-s-fg] :is(.sub, .kicker, .lead, .tiny, .btn.ghost) { color: var(--s-fg); }
main > section[data-s-fg] .btn.ghost { border-color: var(--s-fg); }
main > section[data-s-fg] :is(.chip, .still, .sheet, .tt-wrap, .hours, .receipt, .fallback, .cz-card:not([data-s-card]), input, select, textarea) { --ink: var(--pink); --ink2: var(--pink2); --muted: var(--pmuted); color: var(--pink); }
main > section[data-s-head] :is(h1, h2, h3):not(:is(.chip, .still, .sheet, .tt-wrap, .hours, .receipt, .fallback, .cz-card) *) { color: var(--s-head); }
main > section[data-s-bg]:not([data-s-pic]) { background: var(--s-bg); }
main > section[data-s-bg]:not([data-s-pic])::before, main > section[data-s-pic]::before { display: none; }
main > section[data-s-pic] { background-image: linear-gradient(rgba(16,20,26,.62), rgba(16,20,26,.72)), var(--hero-photo); background-size: cover; background-position: center; }
main > section[data-s-pic][data-s-bg] { background-image: linear-gradient(color-mix(in srgb, var(--s-bg) 72%, transparent), color-mix(in srgb, var(--s-bg) 80%, transparent)), var(--hero-photo); }
main > section[data-s-pic] :is(h1, h2, .sub, .lead) { text-shadow: 0 1px 3px rgba(0,0,0,.45); }
main > section[data-s-pic][data-s-bg] :is(h1, h2, .sub, .lead) { text-shadow: none; }
main > section[data-s-pic]:not(#_) { background-size: cover; background-position: center; background-repeat: no-repeat; }
main > section[data-s-btn] { --accent: var(--s-btn); --accent-ink: var(--s-btn-ink); }
main > section[data-s-font="alegreya"] { --font-body: "Alegreya", "Alegreya Fallback", Georgia, "Times New Roman", serif; }
main > section[data-s-font="atkinson"] { --font-body: "Atkinson Hyperlegible", "Atkinson Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; }
main > section[data-s-font="serif"] { --font-body: Georgia, "Times New Roman", serif; }
main > section[data-s-font="system"] { --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main > section[data-s-font] { font-family: var(--font-body); }
main > section[data-s-hfont="alegreya"] { --font-head: "Alegreya", "Alegreya Fallback", Georgia, "Times New Roman", serif; }
main > section[data-s-hfont="atkinson"] { --font-head: "Atkinson Hyperlegible", "Atkinson Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; }
main > section[data-s-hfont="serif"] { --font-head: Georgia, "Times New Roman", serif; }
main > section[data-s-hfont="system"] { --font-head: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main > section[data-s-size="s"] { --s-k: .88; }
main > section[data-s-size="l"] { --s-k: 1.14; }
main > section[data-s-size="xl"] { --s-k: 1.3; }
main > section[data-s-size] { font-size: calc(1rem * var(--s-k)); }
main > section[data-s-size] h1 { font-size: calc(clamp(2rem, 5.2vw, 3.1rem) * var(--s-k)); }
main > section[data-s-size] h2 { font-size: calc(clamp(1.55rem, 3.2vw, 2.1rem) * var(--s-k)); }
main > section[data-s-size] :is(h3, h2.h3) { font-size: calc(1.25rem * var(--s-k)); }
main > section[data-s-size] :is(.lead, .sub) { font-size: calc(1.1rem * var(--s-k)); }
main > section[data-s-space="tight"] { padding-block: clamp(24px, 3.5vw, 44px); }
main > section[data-s-space="roomy"] { padding-block: clamp(72px, 11vw, 150px); }
main > section[data-s-align="left"], main > section[data-s-align="left"] :is(h1, h2, .hero-in, .lead, .sub, p.center) { text-align: left; }
main > section[data-s-align="left"] :is(.lead, .sub) { margin-inline: 0; }
main > section[data-s-align="left"] .hero .ctas, main > section[data-s-align="left"].hero .ctas { justify-content: flex-start; }
main > section[data-s-align="center"], main > section[data-s-align="center"] :is(h1, h2, h3, p, .hero-in) { text-align: center; }
main > section[data-s-align="center"] :is(.lead, .sub, .cz-pic) { margin-inline: auto; }


/* Boxes the owner added: side by side cards, each with its own color if chosen */
.cz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; margin-top: 18px; }
.cz-cards > .cz-card { margin: 0; }
.cz-card { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 14px; }
.cz-card h3 { color: inherit; }
.cz-card[data-s-card] { background: var(--s-card); color: var(--s-card-ink); border-color: transparent; --ink: var(--s-card-ink); --ink2: var(--s-card-ink); }
.cz-picture[data-size="s"] .cz-pic { max-width: min(320px, 100%); }
.cz-picture[data-size="l"] .cz-pic { width: 100%; }

/* The whole-section editor: tabs, the parts list and color rows */
.cz-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 2px 0 10px; padding: 3px; background: var(--bg2); border-radius: var(--radius); }
.cz-tab { font: 600 .85rem/1.2 var(--font-body); padding: 8px 4px; border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--ink); cursor: pointer; }
.cz-tab[aria-selected="true"] { background: var(--panel); color: #1D67CD; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.cz-tab:focus-visible { outline: 2px solid #1D67CD; outline-offset: 1px; }
.cz-parts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cz-part { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); font-size: .85rem; line-height: 1.35; }
.cz-part b { font-weight: 700; }
.cz-part.gone { opacity: .7; border-style: dashed; }
.cz-part-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cz-part-btns .btn.small { padding: 5px 10px; font-size: .8rem; }
.cz-color-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.cz-pop .cz-color-row label { margin: 0; flex: 1; }
.cz-pop .cz-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
.cz-check input { width: auto; margin: 0; }



/* ---- the swatches in the owner's look chooser and the demo peek ---- */
.swatch-mist { background: linear-gradient(135deg, #f5f1ea 50%, #2f5d56 50%); }
.swatch-sand { background: linear-gradient(135deg, #f8efe4 50%, #9a4a2b 50%); }
.swatch-gloaming { background: linear-gradient(135deg, #17201e 50%, #a9cdbd 50%); }

/* ---- phones: the name and a Menu button on one row; Book is a fixed bar beside the Call bar ---- */
@media (max-width: 720px) {
  .top { position: sticky; top: 0; }
  .top .wrap.bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand menu" "tools tools" "nav nav"; justify-items: stretch; padding: 6px 0; gap: 0 12px; }
  .brand { font-size: 1.35rem; justify-self: start; white-space: nowrap; }
  .nav { flex-direction: column; align-items: stretch; justify-content: flex-start; margin-top: 0; padding-bottom: 8px; border-top: 1px solid var(--line); }
  .nav a { min-height: 52px; border-bottom: 1px solid var(--line); margin: 0; padding: 0 2px; font-size: 1.05rem; }
  .nav a[aria-current="page"] { border-bottom-color: var(--accent); }
  .tools { justify-self: stretch; justify-content: flex-start; padding: 0; }
  .tools .langpick-inline { margin-right: auto; }
  html.has-menu .menu-btn { grid-area: menu; justify-self: end; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; background: transparent; color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--btn-r); font: 700 .95rem/1 var(--font-body); cursor: pointer; }
  html.has-menu .menu-btn[aria-expanded="true"] { border-color: var(--accent); }
  .menu-ico { position: relative; display: inline-block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: background .2s ease; }
  .menu-ico::before, .menu-ico::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease; }
  .menu-ico::before { top: -6px; }
  .menu-ico::after { top: 6px; }
  html.menu-open .menu-ico { background: transparent; }
  html.menu-open .menu-ico::before { transform: translateY(6px) rotate(45deg); }
  html.menu-open .menu-ico::after { transform: translateY(-6px) rotate(-45deg); }
  html.has-menu:not(.menu-open) .nav { display: none; }
  html.has-menu:not(.menu-open) .tools > :not(.enq) { display: none; }
  /* The same folded menu from the first paint whenever scripts are on, so the masthead does not jump when site.js adds .has-menu. With scripts off the full menu stays open. */
  @media (scripting: enabled) {
    .menu-btn { grid-area: menu; justify-self: end; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; background: transparent; color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--btn-r); font: 700 .95rem/1 var(--font-body); cursor: pointer; }
    .menu-btn[aria-expanded="true"] { border-color: var(--accent); }
    html:not(.menu-open) .nav { display: none; }
    html:not(.menu-open) .tools > :not(.enq) { display: none; }
  }
  html.menu-open .tools { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 0 6px; }
  html.menu-open .tools .langpick-inline { margin-right: 0; align-self: flex-start; }
  .top .tools .call { display: none; }
  .comfort { width: 100%; }
  .cf-open { width: 100%; justify-content: center; min-height: 48px; }
  .cf-panel { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
  /* Book and Call share the bottom of the screen, half each */
  .top .enq { position: fixed; left: 0; right: 50%; bottom: 0; z-index: 26; min-height: 56px; border-radius: 0; border-color: var(--accent); background: var(--accent); color: var(--accent-ink); font-size: 1rem; padding: 0 8px; justify-content: center; }
  .callbar { left: 50%; }
  html:has(.callbar[hidden]) .top .enq { right: 0; }
  body { padding-bottom: 56px; }

  /* the hero: the photograph first, then the words and both buttons */
  .hero-grid { display: flex; flex-direction: column; }
  .hero-fig { order: -1; min-height: 0; aspect-ratio: 2 / 1; width: 100%; }
  .home-hero .hero-in { padding: 18px 16px 20px; }
  .home-hero h1 { font-size: 2.15rem; }
  .hero .sub { font-size: 1rem; margin-bottom: 1rem; }
  .hero .ctas .btn { flex: 1 1 100%; }
  .start { padding: 4px 16px 28px; }
  .proof { padding: 20px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero.small .hero-grid { padding: 28px 16px 8px; display: block; }
  .band { padding: 48px 0; }
  .band .wrap { width: calc(100% - 32px); }

  .nextlist li { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; padding: 16px 0; }
  .nextlist .btn { justify-self: stretch; margin-top: 6px; }
  .nextlist .lvl { display: block; }
  .sheet.has-photo { display: block; }
  .sheet-photo img { aspect-ratio: 16 / 9; }
  .sheet-body .buy { grid-auto-flow: column; justify-content: space-between; width: 100%; }
  .fsteps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fsteps li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
  .fsteps li::before { grid-row: 1 / span 2; margin: 0; font-size: 2rem; }
  .fsteps li > * { grid-column: 2; }
  .first-full .fsteps li { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .reach-band.has-photo > .wrap.reach-grid { display: flex; flex-direction: column; }
  .reach-fig { aspect-ratio: 16 / 9; min-height: 0; width: 100%; }
  .reach-band.has-photo .reach-in { padding: 32px 16px 40px; }
  .reach-facts > div { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .reach-in .ctas .btn { flex: 1 1 100%; }
  .enquiry { padding: 18px; }

  /* the timetable becomes a stack of cards */
  .tt, .tt tbody { display: block; }
  .tt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tt tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; }
  .tt tbody th, .tt tbody td { border: 0; padding: 0; text-align: left; }
  .tt tbody th { grid-column: 1; grid-row: 1; color: var(--accent); }
  .tt td.tm { grid-column: 2; grid-row: 1; text-align: right; font-size: 1.15rem; }
  .tt td.tm .len { display: inline; margin-left: 6px; }
  .tt td.cls { grid-column: 1 / -1; grid-row: 2; font-size: 1.4rem; padding: 6px 0 2px; }
  .tt td.lv { grid-column: 1; grid-row: 3; }
  .tt td.pl { grid-column: 2; grid-row: 3; text-align: right; }
  .tt td.act { grid-column: 1 / -1; grid-row: 4; text-align: left; padding-top: 12px; }
  .tt td.act .btn { width: 100%; }
  .tt td.act:empty { display: none; }
  .daybar { gap: 6px; }
  .daybar button { padding: 0 14px; }
}
@media (min-width: 721px) { .callbar { display: none; } }

/* ---- accessibility layer: 44px targets, readable placeholders, no lone cards ---- */
.langpick-inline a { min-height: 44px; }
.btn, .btn.small { min-height: 44px; }
#owner-open, .desk-open { min-height: 44px; }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), select { min-height: 44px; }
::placeholder { color: var(--ink2); opacity: 1; }
a[href^="tel:"]:not(.btn):not(.callbar, .callbar), a[href^="mailto:"]:not(.btn) { display: inline-block; padding-block: 4px; }
p > a:is([href^="tel:"], [href^="mailto:"]):only-child { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
.req { color: var(--accent); font-weight: 700; margin-left: 2px; }
@media (min-width: 600px) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .callbar { min-height: 56px; } }
/* A phone number never breaks across two lines: it wraps whole or not at all. */
[data-biz="phone"] { white-space: nowrap; }
/* Calm: with the motion switch on, nothing on the page moves, including smooth scrolling and button transitions. */
html[data-still] *, html[data-still] *::before, html[data-still] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* shared edges and small polish */
.wrap.narrow { margin-left: calc((100% - min(var(--wrap), 100% - 32px)) / 2); margin-right: auto; }
.lvl, .len, .call, .callbar { white-space: nowrap; }
.hours td a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 720px) {
  .callbar { letter-spacing: 0; font-size: .92rem; padding-inline: 4px; gap: 4px; overflow: hidden; }
  body:has(.desk-open:not([hidden])) main { padding-bottom: 76px; }
}

/* photographs */
.photo { display: block; }
.photo img { display: block; width: 100%; height: auto; }
.hero-fig .photo img, .reach-fig .photo img { height: 100%; }
@media (max-width: 720px) { .sheet-body .buy .btn { white-space: nowrap; flex: none; } }

/* The Ask button waits until the hero is behind you, so it never sits on the opening words or buttons */
body:not([data-past-hero]) .desk-open { visibility: hidden; opacity: 0; pointer-events: none; }
.desk-open { transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .desk-open { transition: none; } }

/* ribbon fold (demo only): one slim line on the first screen; the form unfolds below it */
.ribbon { font-size: .85rem; border-bottom-width: 1px; }
.ribbon .wrap.ribbon-line { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 8px; padding: 3px 0; }
.ribbon-fold { flex: 1 1 auto; min-width: 0; }
.ribbon-fold > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 28px; list-style: none; }
.ribbon-fold > summary::-webkit-details-marker { display: none; }
.ribbon-fold > summary::after { content: "\25BE"; font-size: .8em; transition: transform .15s; }
.ribbon-fold[open] > summary::after { transform: rotate(180deg); }
.ribbon-cta { text-decoration: underline; text-underline-offset: 3px; }
.ribbon-note { margin: 4px 0 8px; }
.ribbon-fold .yours { padding-bottom: 8px; }
.ribbon-back { display: inline-flex; align-items: center; min-height: 28px; }
@media (prefers-reduced-motion: reduce) { .ribbon-fold > summary::after { transition: none; } }

/* Ask button: a soft tab resting on the bottom edge with rounded top corners, quiet colours, no floating pill */
.btn.desk-open { border-radius: 16px 16px 0 0; border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -4px 18px rgba(0,0,0,.06); background: var(--panel); color: var(--ink); font-weight: 500; }
@media (min-width: 721px) {
  .btn.desk-open { left: 50%; right: auto; bottom: 0; transform: translateX(-50%); padding: 14px 34px; }
  .btn.desk-open:hover { transform: translateX(-50%); }
  .desk-panel { left: 50%; transform: translateX(-50%); bottom: 60px; }
}
@media (max-width: 720px) { .btn.desk-open { left: auto; right: 12px; bottom: 56px; padding: 8px 18px; } }

/* Builder M13: advanced typography and theme. Every rule hangs off a data- attribute on <html> that the owner's
   theme sets (served page and preview alike), so an absent key leaves the model's own style untouched. Heading
   rules reach every h1, h2 and h3 on the page, small label headings included. */
html[data-hweight="light"] :is(h1, h2, h3) { font-weight: 300; }
html[data-hweight="normal"] :is(h1, h2, h3) { font-weight: 400; }
html[data-hweight="bold"] :is(h1, h2, h3) { font-weight: 700; }
html[data-hweight="black"] :is(h1, h2, h3) { font-weight: 800; }
html[data-hcase="upper"] :is(h1, h2, h3) { text-transform: uppercase; }
html[data-hcase="caps"] :is(h1, h2, h3) { text-transform: none; font-variant-caps: small-caps; }
html[data-hcase="normal"] :is(h1, h2, h3) { text-transform: none; font-variant-caps: normal; }
html[data-htrack="tight"] :is(h1, h2, h3) { letter-spacing: -.03em; }
html[data-htrack="normal"] :is(h1, h2, h3) { letter-spacing: 0; }
html[data-htrack="wide"] :is(h1, h2, h3) { letter-spacing: .08em; }
html[data-lead="snug"] body { line-height: 1.4; }
html[data-lead="normal"] body { line-height: 1.6; }
html[data-lead="airy"] body { line-height: 1.85; }
html[data-btnshape="pill"] .btn { border-radius: 999px; }
html[data-btnshape="square"] .btn { border-radius: 0; }
html[data-btnshape="soft"] .btn { border-radius: 8px; }
html[data-links="underline"] main a:not(.btn) { text-decoration: underline; text-underline-offset: .15em; }
html[data-links="plain"] main a:not(.btn) { text-decoration: none; }

/* Composed sections (lib/compose.cjs): a 12 column grid; every part spans 1 to 12 columns and 1 to 6 rows */
.fc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(48px, auto); gap: 24px; align-items: start; }
.fc-grid[data-gap="s"] { gap: 12px; }
.fc-grid[data-gap="l"] { gap: 40px; }
.fc-sec[data-pad="s"] { padding-block: clamp(20px, 3vw, 36px); }
.fc-sec[data-pad="l"] { padding-block: clamp(72px, 10vw, 140px); }
.fc-b { --fc-c: var(--fc-span, 12); --fc-r: var(--fc-rows, 1); grid-column: span var(--fc-c); grid-row: span var(--fc-r); min-width: 0; }
.fc-b[data-fc-bg] { background: var(--fc-bg); padding: 18px; border-radius: var(--radius); }
.fc-b[data-fc-fg] { color: var(--fc-fg); --ink: var(--fc-fg); }
.fc-b[data-fc-fg] :is(h2, h3, p) { color: var(--fc-fg); }
.fc-b[data-fc-dayoff] { display: none; }
body.customizing .fc-b[data-fc-dayoff] { display: block; opacity: .4; }
.fc-b > :first-child { margin-top: 0; }
.fc-b > :last-child { margin-bottom: 0; }
.fc-box { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.fc-box[data-fc-bg] { background: var(--fc-bg); border-color: transparent; }
.fc-inner { margin-top: 16px; grid-auto-rows: minmax(32px, auto); }
.fc-inner .fc-image img { min-height: calc(var(--fc-r, 1) * 56px); }
.fc-image { align-self: stretch; }
.fc-image img { display: block; width: 100%; height: 100%; min-height: calc(var(--fc-r, 1) * 72px); object-fit: cover; border-radius: var(--radius); }
.fc-image img[data-fc-fit="contain"] { object-fit: contain; }
.fc-empty { display: none; }
body.customizing .fc-empty { display: grid; place-items: center; height: 100%; min-height: calc(var(--fc-r, 1) * 72px); border: 2px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: .95rem; }
.fc-pic { display: block; height: 100%; }
.fc-cap { margin: 8px 0 0; font-size: .9rem; color: var(--muted); }
.fc-video { align-self: stretch; }
.fc-mail, .fc-form .receipt { max-width: 44rem; }
.fc-mail { display: grid; gap: 12px; }
.fc-mail label { display: grid; gap: 4px; font-weight: 600; }
.fc-mail input, .fc-mail select, .fc-mail textarea { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line, #c9c9c9); border-radius: var(--radius, 6px); background: var(--panel, #fff); color: var(--ink, inherit); }
.fc-mail p { margin: 0; }
.fc-mail .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fc-mail .form-status:empty { display: none; }
.fc-form [hidden] { display: none !important; }
.fc-joinform { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; max-width: 36rem; }
.fc-joinform label { display: grid; gap: 4px; font-weight: 600; flex: 1 1 14rem; min-width: 0; }
.fc-joinform input { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line, #c9c9c9); border-radius: var(--radius, 6px); background: var(--panel, #fff); color: var(--ink, inherit); }
.fc-joinform p { margin: 0; }
.fc-joinform .form-status, .fc-joinform .fallback { flex-basis: 100%; }
.fc-joinform .form-status:empty { display: none; }
.fc-joinform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fc-join [hidden] { display: none !important; }
.fc-joined { font-weight: 600; margin: 0; }
.fc-form .receipt { padding: 16px; border: 1px solid var(--line, #c9c9c9); border-radius: var(--radius, 6px); }
.fc-frame { position: relative; aspect-ratio: 16 / 9; min-width: 0; max-width: 100%; min-height: calc(var(--fc-r, 1) * 72px); border-radius: var(--radius); overflow: hidden; background: #000; }
.fc-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fc-clip { display: block; width: 100%; max-height: 100%; border-radius: var(--radius); background: #000; }
.fc-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fc-pics[data-fc-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fc-pics[data-fc-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fc-pics img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--panel, #fff); }
.fc-pics[data-fc-fit="contain"] img { object-fit: contain; }
.fc-pics[data-fc-mode="slide"] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.fc-pics[data-fc-mode="slide"] img { flex: 0 0 min(100%, 420px); scroll-snap-align: start; }
.fc-pics[data-fc-mode="slide"][data-fc-cols="2"] img { flex-basis: min(100%, 560px); }
.fc-pics[data-fc-mode="slide"][data-fc-cols="4"] img { flex-basis: min(100%, 300px); }
.fc-space[data-fc-h="s"] { height: 16px; }
.fc-space[data-fc-h="m"] { height: 40px; }
.fc-space[data-fc-h="l"] { height: 88px; }
[data-fc-w="400"] { font-weight: 400; } [data-fc-w="500"] { font-weight: 500; } [data-fc-w="600"] { font-weight: 600; } [data-fc-w="700"] { font-weight: 700; } [data-fc-w="800"] { font-weight: 800; }
[data-fc-hw="400"] :is(h1, h2, h3) { font-weight: 400; } [data-fc-hw="500"] :is(h1, h2, h3) { font-weight: 500; } [data-fc-hw="600"] :is(h1, h2, h3) { font-weight: 600; } [data-fc-hw="700"] :is(h1, h2, h3) { font-weight: 700; } [data-fc-hw="800"] :is(h1, h2, h3) { font-weight: 800; }
[data-fc-w] :is(p, .lead, .sub) { font-weight: inherit; }
.fc-b[data-fc-size="s"] { font-size: .88em; } .fc-b[data-fc-size="l"] { font-size: 1.14em; } .fc-b[data-fc-size="xl"] { font-size: 1.3em; }
[data-fc-align="left"] { text-align: left; } [data-fc-align="center"] { text-align: center; } [data-fc-align="right"] { text-align: right; }
/* Tablets (721 to 1024px): a part's tablet size wins over its desk size; a tablet-hidden part goes. */
@media (min-width: 721px) and (max-width: 1024px) {
  .fc-b { --fc-c: var(--fc-tspan, var(--fc-span, 12)); --fc-r: var(--fc-trows, var(--fc-rows, 1)); }
  .fc-sec[data-tpad="s"] { padding-block: clamp(20px, 3vw, 36px); } .fc-sec[data-tpad="m"] { padding-block: calc(clamp(44px, 6vw, 80px) * var(--space, 1)); } .fc-sec[data-tpad="l"] { padding-block: clamp(72px, 10vw, 140px); }
  .fc-grid[data-tgap="s"] { gap: 12px; } .fc-grid[data-tgap="m"] { gap: 24px; } .fc-grid[data-tgap="l"] { gap: 40px; }
  [data-fc-thide] { display: none; }
  body.customizing [data-fc-thide] { display: block; opacity: .4; }
}
/* Phones (up to 720px): the grid keeps its 12 columns so a phone size can be set; a part with no phone
   size takes the full width, which is the stacked look the page had before phone sizes existed. */
@media (max-width: 720px) {
  .fc-b { --fc-c: var(--fc-pspan, 12); --fc-r: var(--fc-prows, var(--fc-rows, 1)); }
  .fc-sec[data-ppad="s"] { padding-block: clamp(20px, 3vw, 36px); } .fc-sec[data-ppad="m"] { padding-block: calc(clamp(44px, 6vw, 80px) * var(--space, 1)); } .fc-sec[data-ppad="l"] { padding-block: clamp(72px, 10vw, 140px); }
  .fc-grid[data-pgap="s"] { gap: 12px; } .fc-grid[data-pgap="m"] { gap: 24px; } .fc-grid[data-pgap="l"] { gap: 40px; }
  [data-fc-phide] { display: none; }
  body.customizing [data-fc-phide] { display: block; opacity: .4; }
  .fc-pics[data-fc-mode="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Motion (builder M9). Entrances ride the scroll itself: a part fades, rises, slides or zooms in over the
   stretch where it enters the screen, with no script. Browsers without scroll-driven animations skip
   the @supports block and show every part at rest. */
@supports (animation-timeline: view()) {
  .fc-b[data-fx-in], .fc-sec[data-fx-in] { animation: fc-fade linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
  [data-fx-in="rise"] { animation-name: fc-rise; } [data-fx-in="slide"] { animation-name: fc-slide; } [data-fx-in="zoom"] { animation-name: fc-zoom; }
  [data-fx-in][data-fx-speed="slow"] { animation-range: entry 5% entry 95%; } [data-fx-in][data-fx-speed="fast"] { animation-range: entry 5% entry 30%; }
  .fc-image[data-fx-scroll="drift"] .fc-shot { display: block; height: 100%; overflow: hidden; border-radius: var(--radius); }
  .fc-image[data-fx-scroll="drift"] .fc-shot img { scale: 1.18; animation: fc-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; border-radius: 0; }
}
@keyframes fc-fade { from { opacity: 0; } }
@keyframes fc-rise { from { opacity: 0; translate: 0 32px; } }
@keyframes fc-slide { from { opacity: 0; translate: -32px 0; } }
@keyframes fc-zoom { from { opacity: 0; scale: .92; } }
@keyframes fc-drift { from { translate: 0 -8%; } to { translate: 0 8%; } }
/* Hover answers only a real pointer; a finger on a phone gets no half-state. */
@media (hover: hover) {
  .fc-b[data-fx-hover] { transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease; }
  .fc-b[data-fx-hover][data-fx-speed="slow"] { transition-duration: .5s; } .fc-b[data-fx-hover][data-fx-speed="fast"] { transition-duration: .12s; }
  .fc-b[data-fx-hover="lift"]:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .35); }
  .fc-b[data-fx-hover="grow"]:hover { transform: scale(1.03); }
  .fc-b[data-fx-hover="glow"]:hover { box-shadow: 0 0 0 3px var(--accent, #8ab4f8), 0 10px 30px -10px var(--accent, #8ab4f8); }
  .fc-b[data-fx-hover="dim"]:hover { opacity: .75; }
}
/* At rest: a visitor who asks their device for less motion, or the design's Still switch, sees no motion at all. */
@media (prefers-reduced-motion: reduce) {
  .fc-b[data-fx-in], .fc-sec[data-fx-in], .fc-image[data-fx-scroll] img { animation: none; }
  .fc-image[data-fx-scroll="drift"] .fc-shot img { scale: none; }
  .fc-b[data-fx-hover] { transition: none; } .fc-b[data-fx-hover]:hover { transform: none; box-shadow: none; opacity: 1; }
}
html[data-still] .fc-b[data-fx-in], html[data-still] .fc-sec[data-fx-in], html[data-still] .fc-image[data-fx-scroll] img { animation: none; }
html[data-still] .fc-image[data-fx-scroll="drift"] .fc-shot img { scale: none; }
html[data-still] .fc-b[data-fx-hover] { transition: none; } html[data-still] .fc-b[data-fx-hover]:hover { transform: none; box-shadow: none; opacity: 1; }
/* Builder M11: the header and footer as the owner set them (compose.chrome). */
[data-chrome-hid] { display: none !important; }
img.mark[data-chrome-logo] { width: auto; max-width: 180px; height: 36px; object-fit: contain; }
.top[data-chrome-static] { position: static; }
.top[data-chrome-layout="center"] .bar { flex-direction: column; justify-content: center; text-align: center; }
.top[data-chrome-layout="center"] .tools { margin-left: 0; }
.foot[data-chrome-layout="center"] .foot-grid { grid-template-columns: 1fr; text-align: center; }
.foot[data-chrome-layout="center"] .foot-links { justify-content: center; }
.foot[data-chrome-hide] { padding-top: 10px; } .foot[data-chrome-hide] .foot-line { border: 0; padding-top: 0; }