/* ============================================================================ site.css — Ankuram design system, from P2 Direction C (diagram-led). NEW FILE. The live styles.css is not touched by this. Everything is scoped under .v2 on , so a page that has not migrated yet links only styles.css and renders exactly as it does today. System fonts only: 0 bytes of webfont, no render-blocking font request. ========================================================================= */ .v2 { /* ---- colour tokens ---- */ --ground: #F7F8FA; --sheet: #FFFFFF; --ink: #14181F; --ink-soft: #454F5E; --ink-mute: #5B6675; --blue: #1B3A6B; --blue-deep: #12294C; --blue-soft: #E8EEF7; --blue-line: #B9CAE2; --line: #D8DEE7; --grid: #E9EDF3; --gold: #8A6212; --green: #0B6B4F; /* ---- type ---- */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --t-xs: .78rem; --t-sm: .88rem; --t-base: 1rem; --t-lg: 1.14rem; --t-xl: 1.4rem; --t-2xl: clamp(1.4rem, 3.2vw, 2.05rem); --t-3xl: clamp(1.9rem, 5.2vw, 3.05rem); /* ---- spacing ---- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 44px; --s8: 56px; --s9: 72px; --radius: 10px; --radius-sm: 7px; --wrap: 1100px; } .v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; } .v2 { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.64 var(--sans); overflow-x: hidden; -webkit-text-size-adjust: 100%; } .v2 img { max-width: 100%; height: auto; display: block; } /* --------------------------------------------------------------------------- SVG SAFETY NET. An inline

avoids an h1 -> h3 jump in the hero. Weight and size do the work instead. */ .v2 .ms-title { font-size: var(--t-base); margin: 0; color: var(--blue-deep); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; } /* Step 4's title is lowercase in the source copy ("improve marks and confidence"). Only the FIRST letter is raised, and only in CSS — the text node itself is untouched, so the wording check still sees the original. */ .v2 .ms-title-cap::first-letter { text-transform: uppercase; } .v2 .ms-caption { font-size: var(--t-sm); margin: 0; color: var(--ink-soft); line-height: 1.5; } .v2 .ms-arrow { flex: 0 0 26px; display: grid; place-items: center; } .v2 .arw { fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .v2 .arw-h { width: 22px; height: 15px; } .v2 .arw-v { display: none; width: 15px; height: 22px; } .v2 .ms-loop { margin-top: var(--s2); } .v2 .ms-loop-line { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .v2 .ms-loop-h { display: block; width: 100%; height: 46px; } .v2 .ms-loop-v { display: none; } .v2 .ms-loop-label { font-size: var(--t-sm); color: var(--blue-deep); margin: 0; text-align: center; font-weight: 600; } /* ======================= BLOCK 4 — numbered list ======================== */ .v2 .numbered { list-style: none; margin: 0; padding: 0 0 0 var(--s1); counter-reset: n; display: grid; border-left: 2px solid var(--blue-soft); } .v2 .numbered > li { display: grid; grid-template-columns: 52px 1fr; gap: var(--s4); padding: 0 0 var(--s6) var(--s5); counter-increment: n; } .v2 .numbered > li:last-child { padding-bottom: 0; } .v2 .numbered > li::before { content: counter(n, decimal-leading-zero); font-family: var(--mono); font-size: .95rem; font-weight: 700; color: #fff; background: var(--blue); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; } .v2 .numbered.own-nums > li::before { content: none; } .v2 .numbered.own-nums > li .num { font-family: var(--mono); font-size: .95rem; font-weight: 700; color: #fff; background: var(--blue); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; } /* ========================= BLOCK 5 — card grid ========================== */ .v2 .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: var(--s4); } .v2 .card { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); } .v2 .sec:nth-of-type(even) .card { background: var(--ground); } .v2 .step-label { display: inline-block; font-family: var(--mono); font-size: var(--t-xs); font-weight: 700; color: var(--blue); background: var(--blue-soft); border-radius: 999px; padding: 3px 10px; margin-bottom: var(--s2); } .v2 .sub-card { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s3); } .v2 .card > .sub-card:first-of-type, .v2 .panel-item > .sub-card:first-of-type { border-top: 0; } /* ====================== BLOCK 6 — comparison table ====================== */ .v2 .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); } .v2 .deftable { width: 100%; border-collapse: collapse; } .v2 .deftable th, .v2 .deftable td { text-align: left; vertical-align: top; padding: var(--s4); border-bottom: 1px solid var(--line); } .v2 .deftable th { width: 30%; color: var(--blue); font-family: var(--mono); font-size: var(--t-sm); font-weight: 700; } .v2 .deftable tr:last-child th, .v2 .deftable tr:last-child td { border-bottom: 0; } .v2 .deftable p:last-child { margin-bottom: 0; } .v2 .intro { max-width: 66ch; margin-bottom: var(--s4); } /* =========================== BLOCK 7 — steps =========================== */ .v2 .rows { display: grid; gap: var(--s5); } .v2 .row { display: grid; grid-template-columns: 240px 1fr; gap: var(--s5); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); } .v2 .sec:nth-of-type(even) .row { background: var(--ground); } .v2 .regions { display: grid; gap: var(--s6); } .v2 .region-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: var(--s4); } .v2 .area { border: 1px dashed var(--line); border-radius: 8px; padding: var(--s4); background: var(--sheet); } .v2 .sec:nth-of-type(even) .area { background: var(--ground); } /* ======================= BLOCK 8 — FAQ accordion ======================== */ .v2 .accordion { border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); overflow: hidden; } .v2 .accordion details { border-bottom: 1px solid var(--line); } .v2 .accordion details:last-child { border-bottom: 0; } .v2 .accordion summary { cursor: pointer; padding: 15px var(--s4); font-weight: 600; color: var(--ink); } .v2 .accordion summary::marker { color: var(--blue); } /* A20: the question keeps the

it had on live, inside the
. The heading must not introduce a box of its own — it renders exactly as the bare text node did, so the marker, padding and tap target are untouched. Every heading property is handed back to the summary it sits in. / .v2 .faq-question { display: inline; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; } .v2 .acc-body { padding: 0 var(--s4) var(--s3); } .v2 .acc-plain { padding: var(--s4); } / ======================== BLOCK 9 — review band ========================= / .v2 .rating { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; background: var(--sheet); border: 1px solid var(--line); border-radius: 9px; padding: var(--s3) var(--s4); } .v2 .rating-num { font-size: 2.3rem; font-weight: 700; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; } .v2 .rating-stars { color: var(--gold); letter-spacing: 2px; } .v2 .rating-meta { display: flex; flex-direction: column; font-size: var(--t-xs); color: var(--ink-soft); } .v2 .rating-meta .rc { font-weight: 700; color: var(--ink); } / ========================= BLOCK 10 — stat band ========================= / .v2 .trust, .v2 .stat-band { list-style: none; display: flex; gap: var(--s4); padding: var(--s4) 0 0; margin: 0; flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-soft); } .v2 .stat-band { gap: var(--s6); padding: var(--s5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .v2 .stat { display: flex; flex-direction: column; } .v2 .stat-num { font-size: 1.9rem; font-weight: 700; color: var(--blue); line-height: 1; font-variant-numeric: tabular-nums; } .v2 .stat-label { font-size: var(--t-xs); color: var(--ink-soft); } / ========================== BLOCK 11 — panel ============================ / .v2 .panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: var(--s5); } .v2 .panel-item { background: var(--blue-soft); border-radius: var(--radius); padding: var(--s5); } .v2 .panel-item h3 { color: var(--blue-deep); } .v2 .prose { max-width: 66ch; } .v2 .opts { columns: 2; font-size: .9rem; font-family: var(--mono); } .v2 .pseudo-btn { display: inline-block; border: 1px solid var(--line); background: var(--sheet); padding: var(--s2) var(--s3); border-radius: var(--radius-sm); font-size: var(--t-sm); } / ========================= BLOCK 12 — CTA band ========================== / .v2 .cta-band { background: var(--blue); padding: var(--s8) 0; text-align: center; } .v2 .cta-band h2 { color: #fff; } .v2 .cta-band p { color: #D3DEEE; max-width: 60ch; margin: 0 auto var(--s5); } .v2 .cta-row { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; } .v2 .cta-band .btn-primary { background: #fff; color: var(--blue); } .v2 .cta-band .btn-ghost { border-color: #90A6C6; color: #fff; } / =========================== sections + footer ========================== / .v2 .sec { padding: var(--s8) 0; border-bottom: 1px solid var(--line); } .v2 .sec:nth-of-type(even) { background: var(--sheet); } .v2 .site-footer, .v2 footer.footer { background: var(--sheet); padding: var(--s6) 0; font-size: 15px; color: var(--ink-soft); } .v2 footer .container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s4); } .v2 .footer-links { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: 10px; } / ============================== responsive ============================== / @media (min-width: 901px) { .v2 .hero-inner { grid-template-columns: 1fr; } } @media (max-width: 900px) { .v2 .row { grid-template-columns: 1fr; gap: 10px; } } / The phone rules live in the mobile-first block below. The earlier duplicates of these were removed on 17 Sep: they re-declared the hero diagram layout and forced the mobile menu onto its own full-width row, which broke the one-row header between 601px and 640px. / / =========================================================================== A11 — "How a week works", mobile-first (rebuilt 17 Sep). Phone is the primary audience: the whole section must fit inside two viewport heights at 390x844, and each diagram inside one. ========================================================================= / .v2 .dg { margin: 0 0 var(--s5); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); } .v2 .dg-title { font-weight: 700; color: var(--blue-deep); font-size: var(--t-base); margin: 0 0 var(--s3); } .v2 .sec-lede { font-size: var(--t-base); color: var(--ink); max-width: 66ch; margin-bottom: var(--s4); } .v2 .sec-week h3 { margin: var(--s5) 0 var(--s3); } / ---------------- D1: week chip strip ---------------- / / The two routes must read as different at a glance, so the two chip styles differ in fill, text colour and icon -- not just in tint. / .v2 .wk-key { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); padding: 0; } .v2 .wk-key .chip-key { padding: 7px 12px; height: auto; min-height: 46px; flex-direction: row; gap: 7px; } .v2 .chip-key .chip-d { font-family: var(--sans); font-weight: 700; } .v2 .wk-strip { display: grid; gap: var(--s2); } .v2 .wk-row { display: grid; gap: 6px; } .v2 .wk-route { margin: 0; font-weight: 700; color: var(--blue-deep); font-size: 15px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .v2 .wk-sub { font-weight: 600; font-size: 15px; color: var(--ink-soft); } .v2 .wk-chips { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0; padding: 0; } .v2 .chip { height: 46px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; margin: 0; line-height: 1; font-weight: 700; font-size: 15px; overflow: hidden; } .v2 .chip-ic { width: 15px; height: 15px; flex: none; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .v2 .chip-d { font-family: var(--mono); } / Online: white fill, blue outline, blue text (11.27:1) / .v2 .chip-online { background: var(--sheet); border: 1.5px solid var(--blue); color: var(--blue); } .v2 .chip-online .chip-ic { stroke: var(--blue); } / At the centre: solid navy, white text (11.27:1) / .v2 .chip-centre { background: var(--blue); border: 1.5px solid var(--blue); color: #fff; } .v2 .chip-centre .chip-ic { stroke: #fff; } / Grouped blocks on Route B: no day letters at all / .v2 .chip-block { grid-column: span var(--span); flex-direction: row; gap: 7px; padding: 6px 8px; font-size: 15px; height: auto; min-height: 46px; text-align: left; } .v2 .chip-block .chip-d { font-family: var(--sans); font-weight: 700; } .v2 .wk-link { display: flex; align-items: center; gap: var(--s2); } .v2 .wk-arrow { width: 16px; height: 24px; flex: none; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .v2 .wk-arrow-label { margin: 0; font-size: 15px; font-weight: 600; color: var(--blue-deep); } .v2 .wk-weekend { margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); font-weight: 600; } / ---------------- D2: 2x2 loop on mobile, row on desktop ---------------- / .v2 .ms-loop-circle { display: none; } .v2 .ms-note { margin: var(--s3) 0 0; font-size: 15px; color: var(--ink-soft); text-align: center; font-style: italic; white-space: normal; } / ---------------- swipe rows ---------------- / .v2 .swipe-wrap { position: relative; } .v2 .swipe { display: contents; } / desktop: the inner layout decides / .v2 .swipe-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); } .v2 .swipe-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); } / 2x2, no orphan / .v2 .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } .v2 .sec-head > h2, .v2 .sec-head > h3 { margin-bottom: var(--s3); } .v2 .swipe-hint { display: none; } / ---------------- locality
---------------- / .v2 .sec-areas { padding: var(--s7) 0; } .v2 .areas-details { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); } .v2 .areas-details > summary { cursor: pointer; padding: var(--s4) var(--s5); font-size: var(--t-xl); font-weight: 700; color: var(--ink); min-height: 44px; } .v2 .areas-details > summary::marker { color: var(--blue); } .v2 .areas-body { padding: 0 var(--s5) var(--s5); } .v2 .areas-body > h3 { margin-top: var(--s5); } / ---------------- header: one row on mobile ---------------- / .v2 .header-inner { position: relative; } .v2 .hcta-ic { display: none; width: 18px; height: 18px; fill: currentColor; stroke: none; flex: none; } .v2 .nav-mobile-list { position: absolute; left: var(--s4); right: var(--s4); top: calc(100% + 6px); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 32px rgba(20,24,31,.14); padding: var(--s2) var(--s4); z-index: 30; } .v2 .nav-mobile-list a { min-height: 44px; display: flex; align-items: center; } .v2 .nav-mobile-list a:last-child { border-bottom: 0; } / ===================== phones: the primary target ===================== Phone is the main audience. Everything below tightens vertical rhythm and turns repeated card groups into scroll-snap swipe rows, so the page stops being a 24-screen scroll. No words are removed anywhere. ===================================================================== / @media (max-width: 600px) { / ---- global rhythm ---- / .v2 { font-size: 16px; } .v2 .sec { padding: var(--s5) 0; } .v2 .sec-head > h2, .v2 .sec-head > h3 { margin-bottom: var(--s2); } .v2 h2 { font-size: 1.35rem; line-height: 1.22; } .v2 h3 { font-size: 1.02rem; } .v2 h4 { font-size: 1rem; } .v2 p, .v2 li { font-size: 15px; line-height: 1.45; } .v2 p { margin-bottom: .7em; } .v2 li { margin-bottom: .15em; } .v2 .wrap { padding: 0 var(--s4); } / ---- hero ---- / .v2 .hero { padding: var(--s5) 0 var(--s5); } .v2 .hero-inner { gap: var(--s4); } .v2 h1 { font-size: 1.75rem; line-height: 1.18; } .v2 .lede { font-size: 16px; line-height: 1.45; } .v2 .hero-ctas { margin: var(--s4) 0 var(--s3); gap: 8px; } .v2 .btn { padding: 12px 18px; min-height: 44px; display: inline-flex; align-items: center; } .v2 .rating { padding: 10px var(--s3); gap: 10px; } .v2 .rating-num { font-size: 1.9rem; } .v2 .rating-meta { font-size: 15px; line-height: 1.3; } .v2 .trust { padding-top: var(--s3); gap: var(--s3); font-size: 15px; } .v2 .curricula-line { font-size: 15px; line-height: 1.4; padding: 8px 12px; } / every link is a tap target, including the "Learn more" links in cards / .v2 .inline-link, .v2 .footer-links a, .v2 .nav-mobile-list a { display: inline-flex; align-items: center; min-height: 44px; } / ---- hero method diagram: tighter vertical stack ---- / .v2 .method:not(.dg) { padding: var(--s3) 10px; display: grid; grid-template-columns: 28px 1fr; gap: 6px; } .v2 .method:not(.dg) .ms-flow { grid-column: 2; flex-direction: column; align-items: stretch; gap: 4px; } .v2 .method:not(.dg) .ms-step { padding: 10px; gap: 2px; } .v2 .method:not(.dg) .ms-arrow { flex: none; height: 18px; } .v2 .method:not(.dg) .ms-loop { display: contents; } .v2 .method:not(.dg) .ms-loop-h { display: none; } .v2 .method:not(.dg) .ms-loop-v { display: block; grid-column: 1; grid-row: 1; width: 28px; height: 100%; align-self: stretch; } .v2 .method:not(.dg) .ms-loop-label { grid-column: 1 / -1; grid-row: 2; margin: 10px 0 0; font-size: 15px; text-align: left; } .v2 .ms-num { width: 26px; height: 26px; font-size: 15px; } .v2 .ic { width: 22px; height: 22px; } .v2 .ms-title { font-size: 15px; line-height: 1.3; } .v2 .ms-caption { font-size: 15px; line-height: 1.4; } .v2 .arw-h { display: none; } .v2 .arw-v { display: block; } / ---- "How a week works" ---- / .v2 .sec-week { padding: var(--s5) 0; } .v2 .sec-lede { font-size: 15px; line-height: 1.45; margin-bottom: var(--s3); } .v2 .dg { padding: 10px; margin-bottom: var(--s3); } .v2 .wk-key { gap: 6px; margin-bottom: 10px; } .v2 .wk-key .chip-key { flex: 1 1 0; } .v2 .wk-strip { gap: 6px; } .v2 .wk-chips { gap: 3px; } .v2 .chip { height: 46px; } .v2 .chip-block { padding: 0 6px; } .v2 .chip-block .chip-d { font-size: 15px; } .v2 .wk-weekend { margin-top: 10px; padding-top: 10px; line-height: 1.4; } / ---- D2: clockwise 2x2 with arrows between the cards ---- / .v2 .dg-loop .ms-stage { position: relative; } .v2 .dg-loop .ms-flow { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; row-gap: 78px; position: relative; / room for the two-line centre label / } .v2 .dg-loop .ms-step { padding: 10px; gap: 4px; } .v2 .dg-loop .ms-num { font-size: 15px; width: 26px; height: 26px; } .v2 .dg-loop .ms-step-1 { grid-area: 1 / 1; } .v2 .dg-loop .ms-step-2 { grid-area: 1 / 2; } .v2 .dg-loop .ms-step-3 { grid-area: 2 / 2; } .v2 .dg-loop .ms-step-4 { grid-area: 2 / 1; } / 1 -> 2 across the top, 2 -> 3 down the right, 3 -> 4 back across / .v2 .dg-loop .ms-arrow { display: grid; place-items: center; } .v2 .dg-loop .ms-arrow-1 { grid-area: 1 / 1 / 2 / 3; justify-self: center; align-self: center; } .v2 .dg-loop .ms-arrow-2 { grid-area: 1 / 2 / 3 / 3; justify-self: center; align-self: center; } .v2 .dg-loop .ms-arrow-3 { grid-area: 2 / 1 / 3 / 3; justify-self: center; align-self: center; transform: rotate(180deg); } .v2 .dg-loop .arw-h { display: block; width: 20px; height: 14px; } .v2 .dg-loop .arw-v { display: none; } .v2 .dg-loop .ms-arrow-2 .arw-h { transform: rotate(90deg); } .v2 .dg-loop .ms-loop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; display: grid; justify-items: center; gap: 2px; z-index: 3; background: var(--sheet); padding: 3px 10px; border-radius: 999px; } .v2 .dg-loop .ms-loop-h { display: none; } .v2 .dg-loop .ms-loop-circle { display: block; width: 28px; height: 28px; } .v2 .dg-loop .ms-loop-label { font-size: 15px; text-align: center; } .v2 .dg-loop .ms-title { font-size: 15px; line-height: 1.3; } .v2 .ms-note { margin-top: 10px; font-size: 15px; } / ---- swipe rows: any group of 3+ comparable cards ---- / .v2 .swipe { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; margin: 0 calc(var(--s4) -1); padding-left: var(--s4); padding-right: var(--s4); } .v2 .swipe::-webkit-scrollbar { display: none; } /* the inner layout container steps aside so its cards become the flex items / .v2 .swipe > .cards, .v2 .swipe > .panel, .v2 .swipe > .numbered, .v2 .swipe > .rows { display: contents; } .v2 .swipe .card, .v2 .swipe .panel-item, .v2 .swipe > .numbered > li, .v2 .swipe .row { flex: 0 0 85%; scroll-snap-align: start; padding: var(--s3); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); } .v2 .swipe > .numbered { border-left: 0; } .v2 .swipe > .numbered > li { display: block; } .v2 .swipe > .numbered > li::before { margin-bottom: 6px; } .v2 .swipe .row { display: block; } .v2 .swipe .card h3, .v2 .swipe .panel-item h3, .v2 .swipe .row h3 { font-size: 15px; margin-bottom: 6px; } .v2 .swipe ul { margin-bottom: 0; } .v2 .swipe p:last-child { margin-bottom: 0; } .v2 .step-label { font-size: 15px; padding: 2px 10px; } .v2 .pseudo-btn { font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; } .v2 .deftable th { font-size: 15px; } .v2 .num { font-size: 15px; } .v2 .swipe-hint { display: block; margin: 0; font-size: 14px; font-weight: 400; color: var(--ink-mute); font-family: var(--sans); white-space: nowrap; } / ---- option lists become wrapped pills instead of a tall column ---- / .v2 .opts { columns: auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin-bottom: .7em; list-style: none; } .v2 .opts li { margin: 0; font-size: 15px; background: var(--blue-soft); color: var(--blue-deep); border-radius: 999px; padding: 6px 12px; font-family: var(--sans); } / ---- tables stack ---- / .v2 .deftable th { width: auto; display: block; border-bottom: 0; padding: var(--s3) var(--s3) 2px; } .v2 .deftable td { display: block; padding: 0 var(--s3) var(--s3); } / ---- FAQ + locality: every answer stays in the HTML ---- / .v2 .accordion summary { padding: 12px var(--s3); min-height: 44px; font-size: 15px; } .v2 .acc-body { padding: 0 var(--s3) 10px; } .v2 .areas-details > summary { font-size: var(--t-lg); padding: var(--s3); min-height: 44px; } .v2 .areas-body { padding: 0 var(--s3) var(--s3); } .v2 .sec-areas { padding: var(--s5) 0; } .v2 .region-grid { grid-template-columns: 1fr; gap: 10px; } .v2 .area { padding: 10px; } / ---- prose, CTA, footer ---- / .v2 .prose { max-width: none; } .v2 .cta-band { padding: var(--s6) 0; } .v2 .cta-band p { margin-bottom: var(--s4); } .v2 .site-footer { padding: var(--s5) 0; font-size: 15px; } .v2 .site-footer p { font-size: 15px; } .v2 .footer-links a { min-height: 44px; display: inline-flex; align-items: center; } / ---- header: logo left, WhatsApp + call + Menu right, one row ---- / .v2 .header-inner { flex-wrap: nowrap; gap: var(--s2); } .v2 .brand { font-size: 1rem; letter-spacing: .1em; } .v2 .header-cta { gap: 6px; align-items: center; } .v2 .hcta { padding: 10px; min-height: 44px; min-width: 44px; display: grid; place-items: center; } .v2 .hcta-ic { display: block; } .v2 .hcta-text { display: none; } .v2 .nav-desktop { display: none; } .v2 .nav-mobile { display: block; } .v2 .nav-mobile > summary { padding: 10px 12px; font-size: 15px; min-height: 44px; display: grid; place-items: center; } } @media (max-width: 640px) and (min-width: 601px) { .v2 .nav-desktop { display: none; } .v2 .nav-mobile { display: block; } .v2 .hcta-ic { display: block; } .v2 .hcta-text { display: none; } } / =========================================================================== Live interactive markup carried over verbatim (17 Sep): the finder, the contact form and the review containers. These use the live class names (.container, .finder-, .contact-, .reviews-*), so they are styled here rather than rebuilt -- rebuilding them by hand is what turned the