* * (max-width 1140px). The dramatic brand bands (navy hero, interior * * page-hero, gold members band, navy closing CTA) live INSIDE that * * column, so their *backgrounds* were being capped at 1140px instead of * * spanning the viewport — leaving cream gutters on wide screens. Break * * those four out to full width while their inner .container keeps the * * CONTENT restrained: edge-to-edge backgrounds, readable text measure. * * The quieter .section / .section--alt sub-sections (whose text is NOT * * wrapped in an inner .container on the prose pages) intentionally stay * * inside the column. * * ===================================================================== */ html { /* A 100vw-wide band would otherwise add a hairline horizontal scrollbar whenever a vertical scrollbar is present. `clip` removes it without creating a scroll container (position: sticky etc. stay unaffected). */ overflow-x: clip; } .hero--band, .page-hero, .closing-cta, .section--gold { /* Full-bleed: reach both viewport edges regardless of the constrained parent. The negative margin equals the column's side gutter, so it is self-adjusting — it collapses to ~0 on mobile, where the column already fills the viewport. Inner .container re-holds the content. */ margin-inline: calc(50% - 50vw); } /* Opt-in full-bleed for a .section--alt that has an inner .container (e.g. the about "principles" band): the alt background spans the viewport like the navy/gold bands while the inner .container re-holds the content. NOT applied to .section--alt globally — the prose pages (charter/legal/privacy) put text directly in the band with no inner container and must stay in-column. */ .section--bleed { margin-inline: calc(50% - 50vw); } /* ===================================================================== * * ABOUT PAGE — figure, gold checklist, iconified principle cards * * * * Additive only. Nothing above this banner was modified. Composes with * * the existing primitives (.section, .container, .section-head, * * .grid--3, .principle-card, .card-icon) so the about page picks up the * * homepage's level of finish without a new visual language. * * ===================================================================== */ /* Atmospheric photo above "Who are we?" — held to the reading width with the same soft institutional depth as the homepage charter image. */ .about-figure { margin: 0 auto var(--space-6); max-width: 900px; } .about-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } /* Single-column reading measure for the "Who are we?" prose, centred under the section head (replaces the 2-col .about-intro, unused without aside). */ .about-prose { max-width: 68ch; margin: 0 auto; } .about-prose p { font-size: var(--size-md); } .about-prose p:first-child { margin-top: 0; } /* Gold-checked list for the three "Who are we?" points. The check is an inline-SVG data-URI (no emoji, no extra request); the gold mark is decorative — the

text carries the meaning. */ .about-checklist { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); } .about-checklist li { position: relative; padding-left: 2rem; font-size: var(--size-md); line-height: 1.5; } .about-checklist li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 1.25rem; height: 1.25rem; background-repeat: no-repeat; background-position: center; background-size: contain; /* Navy disc + gold tick. Meets WCAG 1.4.11 non-text contrast: navy disc on cream ~16:1, gold tick on navy ~7:1 (the earlier gold-on-cream ring was ~2.5:1). The tick SHAPE keeps the cue legible without relying on colour. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23002866'/%3E%3Cpath d='M7 12.4l3.2 3.3L17 8' fill='none' stroke='%23c79c4c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Gold-disc icon on each principle card — the homepage value-card treatment (.card--value .card-icon), but left-aligned to suit the longer prose. */ .principle-card .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--space-4); border-radius: 999px; /* Navy glyph on a solid brand-gold disc (~5.4:1, clears AA), ringed by a hairline navy edge so the disc boundary clears 3:1 against the cream card (gold-on-cream alone is only ~2:1). Reads as a navy-&-gold medallion and mirrors the checklist's solid-disc / contrast-mark treatment. */ background: var(--primary); color: var(--secondary); box-shadow: 0 0 0 1.5px var(--secondary); } .principle-card .card-icon svg { width: 1.9rem; height: 1.9rem; } /* Long button labels (e.g. the loges CTA wrapping to two lines at 375px) centre cleanly instead of left-aligning inside a full-width button. */ .btn { text-align: center; } /* About-page hero: the clean navy band with the heritage image re-added ONLY as a heavily blurred, fully-desaturated, darkened texture. about-hero-bg.jpg is pre-processed (grayscale + sigma-55 blur + darkened) so the building is NOT identifiable; the strong navy gradient on top keeps the light hero text at the same WCAG-AA contrast as the solid navy interior heroes. Scoped to .page-hero--about so contact / lodges / charter heroes are untouched. Mirrors the base .page-hero radial top-left glow. */ .page-hero--about { background: radial-gradient( 120% 160% at 12% 0%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 55% ), linear-gradient( 168deg, rgba(1, 58, 134, 0.86) 0%, rgba(0, 40, 102, 0.92) 58%, rgba(0, 32, 79, 0.97) 100% ), url("/static/img/about-hero-bg.jpg"); background-size: cover; background-position: center 35%; }

, scale up, add depth ----------- */ /* BUGFIX: contact + lodges put their title in an

, scale up, add depth ----------- / / BUGFIX: contact + lodges put their title in an