/* =========================================================
   site.css — clone-specific layer on top of moon.css
   1. inline SVG icons (replaces the Font Awesome Pro webfont)
   2. mobile: full-screen menu, card sliders, accordions,
      section chips, sticky call / get-started bar
   ========================================================= */

/* ---------- 1. icons ---------- */
svg.ico {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    display: inline-block;
    flex: none;
}

footer .contact ul li svg.ico {
    margin-right: 6px;
}

/* ---------- 2. shared behaviour ---------- */
:root {
    --cc-navy: #1b2846;
    --cc-blue: #005ca3;
    --cc-cyan: #00b4d5;
    --cc-orange: #e8833a;
    /* top strip: one step deeper than the footer navy so it reads as its own surface */
    --top-ink: #131e35;
    --top-rule: rgba(147, 166, 198, .34);
    /* the site's original navbar fill */
    --nav-bg: linear-gradient(-135deg, #00b4d5 0, #005ca3 100%);
    /* real value written by site.js once the header has been measured */
    --nav-h: 92px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 12px);
}

/* No sideways scroll, ever. `clip` (not `hidden`) so position:sticky keeps
   working, and on the body alone — not the root. A root element with an
   overflow of its own becomes its own scroll box, and in that state the
   background below stops being handed to the canvas: the strip iOS shows
   when the page is dragged past its end paints white instead of the navy
   the next rule sets. Clipping the body is enough to stop the sideways
   scroll this was written for. */
body {
    overflow-x: clip;
}

html,
body {
    max-width: 100%;
}

/* ---------- the page always reaches the bottom of the screen ----------
   moon.css paints the body #f5f8f9. With nothing holding the footer down,
   any page shorter than the viewport ended above the fold and left that
   near-white band under it — and the blogs and FAQ finders now produce short
   pages on demand, so filtering to two results was enough to expose it.

   The body is a column that is at least a screen tall and the footer takes
   the slack. Every page that has one carries the same four boxes — the
   disclaimer strip, the header, the content, the footer — so nothing here
   is being asked to behave differently than it did as a block.

   `html` takes the footer's own bottom colour underneath: on iOS the page
   can be dragged past its end, and what shows there should be the footer
   continuing rather than a pale strip. */
html {
    background: #15203a;
    /* The navy above is meant to be what shows when the page is dragged past
       either end. It is not always what shows: `overflow-x: clip` a few rules
       up makes the root its own scroll box, and in that state some engines
       stop propagating the root's background to the canvas and paint the
       bounce area white instead. Rather than trade away the sideways-scroll
       guard to fix it, the bounce itself goes: there is no rubber band, so
       there is no strip behind the page for anything to show through.
       The cost is Chrome on Android's pull-to-refresh, which a brochure site
       does not need. */
    overscroll-behavior-y: none;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

body > footer {
    margin-top: auto;
}

img {
    max-width: 100%;
    height: auto;
}

/* =========================================================
   Header — always painted, never jumps
   The original stylesheet made .navbar `position: fixed` with no `top`, and a
   scroll handler bolted `.fixed-top` on past 200px while mutating body padding.
   That is what made the bar flicker, the background vanish and the logo slide.
   The header is a normal sticky block now: one background, no class toggling,
   no layout shift. The old hero padding that used to clear the floating bar is
   reduced by the measured header height so nothing moves down.
   ========================================================= */
header#navbar_top {
    position: sticky;
    top: 0;
    z-index: 1030;
    /* The bar and the hero share one gradient. A -135deg gradient depends on the
       box it paints into, so drawing it separately in a short wide header and a
       tall hero leaves a seam between them. Both are given the same background
       box — the header + hero stack, measured by moon.js — and the hero shifts
       its copy up by the header height, so the two halves line up exactly. */
    background-image: var(--nav-bg);
    background-repeat: no-repeat;
    background-size: 100% var(--stack-h, 620px);
    background-position: 0 0;
    background-color: var(--cc-blue);
}

header#navbar_top nav.navbar,
header#navbar_top.fixed-top nav.navbar {
    position: static !important;
    width: 100%;
    background: transparent !important;
    z-index: auto;
    padding-top: 0;
    padding-bottom: 0;
}

/* =========================================================
   Top strip — the credential line
   Three separate facts (regulator status, licence number, non-affiliation
   notice) used to run together as one centred paragraph. They are set as
   three distinct pieces now, and the licence number — the thing this
   audience actually wants to check — becomes a stamp that links straight
   to the public register.
   ========================================================= */
#TopDisclaimer {
    background: var(--top-ink);
    width: 100%;
}

/* The wording is the site's own, unchanged. What the strip gets is room to
   breathe, a readable size and the licence number set as a link people can act
   on — the original ran it as 15px prose in a 64px slab. */
#TopDisclaimer .topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 7px 5%;
}

.topbar__notice {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    text-wrap: balance;
    color: #e3e9f4;
}

.topbar__licence {
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--cc-cyan);
    text-decoration: underline;
    text-decoration-color: rgba(0, 180, 213, .45);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease, color .2s ease;
}

.topbar__licence:hover,
.topbar__licence:focus-visible {
    color: #4fd6f0;
    text-decoration-color: #4fd6f0;
}

/* =========================================================
   Navbar — slimmer
   128px of chrome above the fold did not earn its height. The logo drops to
   the size it is actually read at, the links tighten, and the phone number
   stops being an orange rule floating under text and becomes the one solid
   element in the bar.
   ========================================================= */
/* moon.css pins this to `height: 7em` — 112px of chrome above the fold */
header#navbar_top nav.navbar .container-fluid {
    height: auto;
    min-height: 72px;
    padding-top: 10px;
    padding-bottom: 10px;
}

header#navbar_top nav.navbar .navbar-brand {
    padding: 0;
    margin: 0;
}

header#navbar_top nav.navbar .navbar-brand img {
    width: 248px;
    height: auto;
    display: block;
}

header#navbar_top nav.navbar .nav-item {
    padding: 6px 0;
    margin-left: 26px;
    font-size: 16px;
}

header#navbar_top nav.navbar .nav-item a.nav-link {
    padding: 6px 0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .01em;
    opacity: .92;
    transition: opacity .18s ease;
}

header#navbar_top nav.navbar .nav-item:hover a.nav-link {
    opacity: 1;
}

/* tighter, quieter underline than the original 3px rule */
header#navbar_top nav.navbar .nav-item a:after,
header#navbar_top nav.navbar .nav-item.active a:after,
header#navbar_top nav.navbar .nav-item:hover a:after {
    border-top-width: 2px;
    bottom: -2px;
}

header#navbar_top nav.navbar .nav-item:hover a:after {
    border-color: #fff;
    opacity: 1;
}

header#navbar_top nav.navbar .nav-item.active a:after {
    border-color: #fff;
}

/* The phone is the persistent, always-there action, so it reads as an outlined
   pill. Solid orange stays reserved for the page's own primary CTA — on a
   service page the two would otherwise stack as matching orange blocks. */
header#navbar_top nav.navbar .nav-item.phone {
    padding: 0;
    margin-left: 40px;
    font-size: 16px;
    font-weight: 700;
}

header#navbar_top nav.navbar .nav-item.phone a.nav-link {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    opacity: 1;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

header#navbar_top nav.navbar .nav-item.phone a.nav-link:hover {
    border-color: #fff;
    background: #fff;
    color: var(--cc-blue) !important;
}

header#navbar_top nav.navbar .nav-item.phone a:after,
header#navbar_top nav.navbar .nav-item.phone:hover a:after {
    display: none;
}

#AnaSlider,
.section--title {
    background-image: var(--nav-bg);
    background-repeat: no-repeat;
    background-size: 100% var(--stack-h, 620px);
    background-position: 0 calc(-1 * var(--nav-h));
}

#AnaSlider {
    padding-top: max(24px, calc(152px - var(--nav-h)));
}

/* The service list rides inside the Services item for the phone menu, and so
   does Home: the logo is the way home on a wide screen, but inside a
   full-screen menu the logo is not on screen. The desktop bar is a single row
   of six words and is not becoming a dropdown, so all three stay out of the
   way there. */
@media (min-width: 993px) {
    header#navbar_top .nav-sub,
    header#navbar_top .nav-sub-toggle,
    header#navbar_top .nav-item--home {
        display: none;
    }
}

/* ---------- the inner-page title band ----------
   One band, defined once, for every inner page. It names the page; it is not
   a hero. The old 10em stack pushed the first real content below the fold,
   which is the wrong thing to spend an inner page's first screen on. Halved,
   the band still carries the gradient and the -2.5deg wedge, and the content
   leads.

   These were the services page's own numbers. They are the site's numbers
   now: the same height, the same measure, the same slab at the same size on
   the same gradient, whether the page is Contact or a service. Pages that
   used to set their own head no longer do — see the two exceptions below,
   and both of them are about what the title *is*, not how the band looks. */
/* The band now has a height of its own, and every inner page gets that same
   height. Three passes of matching the padding never made the bands equal,
   because the padding was never what differed — the content was. About Us
   holds an eight-character title; this service page holds a forty-eight
   character one, a sentence and a button. Tuning spacing to make those two
   come out level is a fight you lose every time a word changes.

   So the band stops being sized by what it holds. It is one fixed height,
   the content sits centred in it, and a page with less to say simply has
   more air around it. Nothing can be clipped: `min-height` is a floor, not
   a ceiling — a band whose content genuinely outgrew it would still grow,
   which is what should happen on a phone. */
.section--title {
    --band-h: clamp(215px, 20vw, 330px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--band-h);
    padding-top: max(22px, calc(8em - var(--nav-h)));
    /* enough to clear the 4.5vw wedge that cuts the bottom edge */
    padding-bottom: clamp(36px, 3.8vw, 58px);
}

/* the band paints a gradient, a wedge and (on services) a glow; the copy
   rides above all three */
.section--title > .container,
.section--title > .wrap {
    position: relative;
    z-index: 2;
}

/* moon.css sets 2.4rem and a .5em bottom margin here, written for the tall
   band that no longer exists */
.section--title .title {
    max-width: 16ch;
    margin: 0;
    font-weight: 400;
    font-size: clamp(27px, 3.1vw, 42px);
    line-height: 1.06;
    color: #fff;
    text-wrap: balance;
}

/* The sentence under the title, where a page has one. The measure is wide
   enough that both of them land on two lines: a lead that wraps to three on
   one page and two on another is exactly the kind of thing that used to
   leave two bands a line apart. */
.section--title .svc-head__lead,
.section--title .sd-head__lead {
    max-width: 54ch;
    margin: clamp(14px, 1.5vw, 20px) 0 0;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.62;
    color: rgba(226, 241, 252, .88);
    text-wrap: pretty;
}

/* Exception 2 — the service page. Its h1 is a full service name, not a page
   name: "Canadian Citizenship by descent (Proof) Services" is forty-seven
   characters where "Citizenship Services" is twenty, so at the shared 16ch
   measure it stacked four lines deep and the band stood half again as tall
   as every other band on the site. Same type, same size, same band; the
   measure opens far enough to land it on two lines, like the others. */
.page-service-detail .section--title .title {
    max-width: 26ch;
}

/* Exception 1 — the blog post. Its h1 is an article headline, not a page
   name: at the shared 16ch measure a ninety-character headline stacks six
   lines deep. Same type, same size, same band; the measure opens up. */
.section--title.blog .title {
    max-width: 34ch;
}

.section--title.blog .subtitle {
    margin: clamp(12px, 1.3vw, 17px) 0 0;
}

/* a phone is narrower than the measure; capping it there would set the
   title in a column of two or three words */
@media (max-width: 640px) {
    .section--title .title,
    .section--title.blog .title,
    .page-inner .section--title .title {
        max-width: none;
    }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--cc-orange);
    outline-offset: 2px;
}

/* form feedback (static build — no backend) */
.form-note {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 6px;
    background: rgba(0, 180, 213, .12);
    border: 1px solid rgba(0, 180, 213, .45);
    color: #10405f;
    font-size: 15px;
    line-height: 1.5;
}

/* ---------- 3. section chips (service / blog inner pages) ---------- */
/* Wrapped, never railed. The row shipped as a horizontal scroller, which
   puts two chips on screen and the rest behind a swipe nobody makes — and
   the pages that use it carry seven and nine of them. Side by side, taking
   a second row when they need one, every chip is visible without either a
   scroll or a column the length of a screen. */
.section-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 0 16px;
    margin: 0 0 6px;
}

.section-chips a {
    flex: none;
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    background: #eef3f8;
    border: 1px solid #d8e3ee;
    color: #17558c;
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

.section-chips a:hover,
.section-chips a.is-active {
    background: var(--cc-blue);
    border-color: var(--cc-blue);
    color: #fff;
}

/* ---------- 4. FAQ ----------
   The accordion this section used to describe was driven by a JS pass
   over `#help > h3` — headings the page has not had for a long time, so
   nothing here matched anything. It is removed rather than left to rot:
   `#help .faq-item` is a live class name on that page now, and a stray
   rule from a dead accordion would have drawn a border under all forty
   entries. The FAQ's own styles live at the foot of this file. */

/* =========================================================
   Footer
   Four equal columns on one baseline, the trust marks pulled out of the
   contact column into a rail at a single height, and the licence repeated
   as a bookend to the top strip — the page opens and closes on the same
   verifiable fact. Column headings borrow the top strip's label style so
   the chrome at both ends of the page speaks one language.
   ========================================================= */
footer .UstLabel {
    padding-top: 56px;
    padding-bottom: 0;
}

footer .usthazne {
    display: grid;
    grid-template-columns: .85fr 1.6fr 1.05fr;
    gap: 40px;
    align-items: start;
}

/* moon.css leaves a 35px bottom margin on .Sol that skewed the stacked rhythm */
footer .UstLabel .foot-col {
    margin: 0;
}

/* ---------- the footer's ink ----------
   The footer had grown six greys doing four jobs: links were #c5d1e3 in the
   Menu, Services and Contact columns but #9aa9c0 in the legal row; labels
   were #aebfda over a column and #8c9bb4 under the licence; and the address
   and fax line sat at pure white, which made the Contact column read as lit
   while its neighbours read as dimmed. None of that encoded anything — the
   values had simply been written at different times.

   Three steps, assigned by what a run of text IS rather than where it sits:

     bright   hover, and the licence number
     ink      anything meant to be read: links, the address, the fax line
     dim      labels — column headings, the licence caption, the copyright

   Emphasis is weight, never colour. A first pass lifted the legal name and
   the copyright's brand one step each, on the theory that emphasis should
   rank; on the page it did not read as rank, it read as two runs of text
   that had been missed. Bold is emphasis enough — a <strong> keeps the ink
   of the sentence around it, so the address is five lines of one colour and
   the bottom bar is one.

   `Verify` keeps the cyan: it is the one action in the footer, and the only
   place colour carries meaning rather than ranking. The licence number is
   the one run at `bright`, and it earns it by being a separate element in a
   three-part lockup at its own size rather than a bold word inside a
   sentence. Contrast on the footer's two grounds runs 6.6:1 to 14.6:1. */
footer {
    --foot-bright: #fff;
    --foot-ink: #c5d1e3;
    --foot-dim: #9fb0c8;
}

footer .foot-col h3,
footer .foot-col h1 {
    margin: 0 0 16px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--foot-dim);
}

/* the bookend */
footer .foot-licence {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    text-decoration: none;
    white-space: nowrap;
}

footer .foot-licence__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--foot-dim);
}

footer .foot-licence__no {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--foot-bright);
}

footer .foot-licence__verify {
    font-size: 12.5px;
    color: var(--cc-cyan);
    text-decoration: underline;
    text-decoration-color: rgba(0, 180, 213, .4);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease;
}

footer .foot-licence:hover .foot-licence__verify {
    text-decoration-color: var(--cc-cyan);
}

footer .foot-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer .foot-col ul li {
    margin-bottom: 11px;
}

footer .foot-col ul li a {
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--foot-ink);
    transition: color .18s ease;
}

footer .foot-col ul li a:hover {
    color: var(--foot-bright);
}

/* moon.css sets `footer .contact ul li { color: #000 }` — written for a
   light footer that no longer exists. Every link in this column was already
   overridden; the address and the fax line are not links, so they were the
   only black type left on a navy ground. They read at the same weight as
   every other readable run now, rather than at white. */
footer .foot-col.contact ul li,
footer .foot-col.contact address {
    color: var(--foot-ink);
}

/* the legal name is bold, and that is all it is — it keeps the address's ink
   so the block reads as five lines of one colour */
footer .foot-col.contact .foot-address strong {
    font-weight: 600;
}

footer .foot-col.contact ul li a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

/* brand row: the wordmark alone, hairline under */
footer .foot-brand {
    display: flex;
    align-items: center;
    padding-bottom: 26px;
    margin-bottom: 38px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

footer .foot-brand img {
    width: 214px;
    height: auto;
    display: block;
    opacity: .95;
    transition: opacity .2s ease;
}

footer .foot-brand a:hover img {
    opacity: 1;
}

/* Sits at the foot of the Contact column, outside the collapsible body.

   It was centred only below 992px, which is why it kept reading as
   left-aligned: the three-column footer starts at 993px, and there the row
   was hugging the left edge of its column. Centred at every width now — the
   icons are a mark, not a list, and a mark that lines up with the address
   above it looks like a fourth line of the address. `width: 100%` so the row
   cannot shrink-wrap if the column ever becomes a flex container. */
footer .foot-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 20px;
    margin-top: 22px;
}

footer .foot-social a {
    display: inline-flex;
    color: var(--foot-ink);
    transition: color .18s ease;
}

footer .foot-social a:hover {
    color: var(--foot-bright);
}

footer .foot-social svg.ico {
    width: 20px;
    height: 20px;
}

/* trust marks left, legal links right, one hairline-bounded row */
footer .foot-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px clamp(22px, 2.4vw, 34px);
    margin-top: 22px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

footer .foot-badges {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.2vw, 34px);
}

footer .foot-badges img {
    height: 34px;
    width: auto;
    max-width: none;
    display: block;
    opacity: .85;
    transition: opacity .2s ease;
}

footer .foot-badges a:hover img {
    opacity: 1;
}

/* moon.css gives this `width: 100%`, which forced it onto its own line */
footer .foot-rail .althazne {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: auto;
    gap: 8px clamp(16px, 1.8vw, 26px);
    padding: 0;
    margin: 0;
}

footer .foot-rail .althazne a {
    padding: 0;
}

footer .althazne div {
    margin: 0;
}

/* The three legal links carried their own hairline, which only ever showed
   when they had been pushed onto a second line — so the rule did not read as
   a strip's own edge, it read as the seam where the row broke. The rule is
   gone and the row is cut to hold the three of them on the licence's line
   instead; the small caps and the dividers between the links stay, because
   those are what make three links one piece of fine print. */
footer .foot-rail .althazne {
    align-items: center;
}

footer .althazne a {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--foot-dim);
    transition: color .18s ease;
}

footer .althazne a:hover {
    color: var(--foot-bright);
}

/* drawn between the items, not typed into them */
footer .foot-rail .althazne > div + div {
    position: relative;
}

footer .foot-rail .althazne > div + div::before {
    content: '';
    position: absolute;
    left: -13px;
    top: 50%;
    width: 1px;
    height: 11px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .18);
}

/* bottom bar — moon.css gave it 30px of padding plus a 63px-tall agency logo,
   which added up to 123px of near-empty strip */
footer .AltFooter {
    padding: 14px 0;
}

footer .AltFooter .container {
    align-items: center;
}

footer .AltFooter .spfooter img {
    width: 132px !important;
    height: auto;
    opacity: .8;
    transition: opacity .2s ease;
}

footer .AltFooter .spfooter a:hover img {
    opacity: 1;
}

footer .AltFooter .copyright {
    margin: 0;
    font-size: 13.5px;
    color: var(--foot-dim);
}

/* likewise the brand in the bottom bar: bold, in the line's own ink */
footer .AltFooter .copyright b {
    font-weight: 600;
}

/* ---------- 4b. footer row overflow ----------
   `footer .usthazne` is a flex row with `gap: 4rem`, but its three children are
   Bootstrap `.col-md-4` (33.33% each). 100% + two 4rem gaps overflowed the viewport
   by ~68px, which is what pushed the page sideways and exposed a white strip.
   Let the columns share the row instead of hard-coding a third each. */
@media (min-width: 768px) {

    footer .usthazne {
        flex-wrap: wrap;
    }

    footer .usthazne > .col-12 {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}

/* ---------- 5. footer accordion (mobile) ---------- */
footer .foot-toggle {
    display: none;
}

/* the close button belongs to the mobile menu only — never next to the logo */
.menu-close {
    display: none;
}

/* ---------- 6. sticky mobile CTA ---------- */
.mobile-cta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 8px;
    background: rgba(27, 40, 70, .96);
    backdrop-filter: blur(6px);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .25);
}

.mobile-cta a {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
}

.mobile-cta__call {
    background: linear-gradient(-135deg, var(--cc-cyan) 0, var(--cc-blue) 100%);
}

.mobile-cta__price {
    background: var(--cc-orange);
}

/* ---------- the page ends under the call bar, not above it ----------
   The sticky call bar is fixed to the foot of the screen and takes no
   height in the flow, so at the end of a page the document stops a bar's
   height early and whatever sits behind the page shows in the gap — the
   pale strip between the footer and the bar. The last band of the footer
   carries its own colour down past the bar instead, which also gets the
   copyright line and the credit out from under it.

   `!important` matches moon.css's own `padding: 25px 0 !important` at
   768px; without it that rule takes the padding straight back. */
@media (max-width: 992px) {
    footer .AltFooter {
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }
}

/* ---------- 7. card slider (mobile) ---------- */
/* site.js nests the dots between the two arrow buttons, so every rail on the
   site renders one centred cluster: prev, dots, next. */
.slider-dots {
    display: none;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0 6px;
}

.slider-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
}

.slider-dots button.is-active {
    background: #fff;
    transform: scale(1.35);
}

#Services .slider-dots button,
#Testimonial .slider-dots button {
    background: rgba(27, 40, 70, .25);
}

#Services .slider-dots button.is-active,
#Testimonial .slider-dots button.is-active {
    background: var(--cc-blue);
}

.slider-arrows {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 16px 0 0;
}

/* Child selector, not descendant: the dots sit between these two buttons, so
   `.slider-arrows button` would restyle every dot into an arrow. */
.slider-arrows > button {
    position: relative;
    /* the visible mark is only the chevron; the box stays a full touch target */
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    /* The markup puts a ‹ / › character in each button. Those glyphs sit high
       and off-centre in their em box, which is what made the arrows look
       crooked; the chevron below is drawn from geometry instead. The character
       stays in the DOM for the button's accessible name. */
    font-size: 0;
    /* held in a custom property so the touch reset further down can restore
       the resting colour rather than guessing at it */
    --arrow-ink: rgba(255, 255, 255, .92);
    /* gold reads at only 1.9:1 against the bright end of the hero gradient,
       under the 3:1 that UI marks need, so the hover is carried by movement
       and by going fully opaque rather than by a colour change */
    --arrow-ink-hover: #fff;
    color: var(--arrow-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .3s ease,
                transform .3s cubic-bezier(.785, .135, .15, .86);
}

.slider-arrows > button::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border: solid currentColor;
    border-width: 1.5px 1.5px 0 0;
}

/* A rotated corner's ink sits entirely to one side of its own box — half the
   square's diagonal, ~4.2px — so each is nudged back to sit optically centred. */
.slider-arrows > button:first-child::before {
    transform: translateX(4.2px) rotate(-135deg);
}

.slider-arrows > button:last-child::before {
    transform: translateX(-4.2px) rotate(45deg);
}

.slider-arrows > button:hover,
.slider-arrows > button:focus-visible {
    color: var(--arrow-ink-hover);
}

.slider-arrows > button:first-child:hover {
    transform: translateX(-3px);
}

.slider-arrows > button:last-child:hover {
    transform: translateX(3px);
}

/* the sections that sit on paper rather than on ink */
#Services .slider-arrows > button,
#OtherServices .slider-arrows > button,
#Testimonial .slider-arrows > button {
    --arrow-ink: var(--cc-blue);
    --arrow-ink-hover: var(--cc-navy);
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 992px) {

    /* The clearance the sticky call bar needs used to be 66px of padding on
       the body. The body is painted #f5f8f9, so that padding drew a pale
       band under the navy footer — 62px of it behind the bar and the last
       four above it, which is the light strip at the foot of every page on
       a phone. The clearance now comes from the footer's own last band,
       which is already the right colour, so the page ends in navy and the
       bar sits on navy. See `footer .AltFooter` below. */
    .mobile-cta {
        display: flex;
    }

    /* ----- top strip stacks: credential row, then the notice ----- */
    #TopDisclaimer .topbar {
        min-height: 0;
        padding: 9px 18px;
    }

    .topbar__notice {
        font-size: 13px;
        line-height: 1.4;
    }

    header#navbar_top nav.navbar .container-fluid,
    header#navbar_top nav.navbar .container-fluid.in-mb-padding {
        min-height: 56px;
        padding: 8px 18px !important;
    }

    header#navbar_top nav.navbar .navbar-brand img {
        width: 200px;
    }

    /* ----- full-screen menu, no layout shift, no off-canvas geometry -----
       A panel parked at translateX(100%) is a classic source of phantom
       horizontal scroll on mobile, so the closed state fades in place instead. */
    header#navbar_top .navbar-collapse {
        position: fixed;
        inset: 0;
        z-index: 1040;
        display: block !important;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        padding: 84px 22px 40px;
        background: var(--nav-bg);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity .22s ease, transform .22s ease, visibility .22s;
    }

    header#navbar_top .navbar-collapse.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    header#navbar_top .navbar-collapse .navbar-nav {
        gap: 2px;
    }

    /* The rule between rows was 28% white on a mid-blue ground, drawn under
       every item including the last — six bright lines stacked down a short
       menu, which is more structure than six words need. It is a whisper now,
       and it moved to the top edge: as a top border the first row opens clean
       and the last one closes clean, and the hidden phone row cannot leave a
       line hanging under Contact the way `:not(:last-child)` did.

       `!important` stays only to beat the white rule each page's inline <style>
       still carries — it is already outranked by the id here, but the
       declaration below is what the row actually draws. */
    header#navbar_top .navbar-collapse .nav-item {
        border-bottom: 0 !important;
    }

    header#navbar_top .navbar-collapse .nav-item + .nav-item {
        border-top: 1px solid rgba(255, 255, 255, .12) !important;
    }

    header#navbar_top .navbar-collapse .nav-link {
        display: block;
        padding: 15px 2px !important;
        font-size: 19px;
        color: #fff !important;
    }

    /* The number comes out of the menu on a phone. It is not lost: the sticky
       call bar at the foot of every page carries the same action, and it is
       there whether the menu is open or not — so the menu was spending its
       last row repeating a button already on screen. */
    header#navbar_top .navbar-collapse .nav-item.phone {
        display: none;
    }

    /* ---------- Services, and the tab beside it ----------
       Tapping the word goes to the services page; tapping the tab opens the
       seven service pages under it. Before this the word did both jobs badly:
       it was the only way in, and it went to the index whether or not that
       was what the reader wanted. */
    header#navbar_top .navbar-collapse .nav-item--sub {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    header#navbar_top .navbar-collapse .nav-item--sub > .nav-link {
        flex: 1 1 auto;
        width: auto;
    }

    /* Nothing under Services is drawn with a rule on a phone. The mark under a
       nav link is a desktop affordance built by `.nav-item a:after`, and that
       selector reaches every link inside the item — so on services.html the
       `active` row drew a line under the word and under all seven service
       links at once, and a tap (touch leaves :hover stuck) did the same on any
       other page. The row keeps its tab and its border; it loses the rule. */
    header#navbar_top nav.navbar .nav-item--sub a:after,
    header#navbar_top nav.navbar .nav-item--sub.active a:after,
    header#navbar_top nav.navbar .nav-item--sub:hover a:after {
        display: none;
    }

    .nav-sub-toggle {
        flex: none;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: #fff;
        cursor: pointer;
    }

    /* drawn, not typed — the same mark the FAQ and the blog year rows use */
    .nav-sub-toggle::after {
        content: '';
        width: 10px;
        height: 10px;
        margin-top: -4px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform .22s ease;
    }

    .nav-sub-toggle[aria-expanded="true"]::after {
        margin-top: 4px;
        transform: rotate(-135deg);
    }

    .nav-sub-toggle:focus-visible {
        outline: 2px solid var(--cc-orange);
        outline-offset: 2px;
        border-radius: 6px;
    }

    .nav-sub {
        width: 100%;
        margin: 0;
        padding: 0 0 12px 14px;
        list-style: none;
    }

    /* shut only once the tab exists to open it again */
    .nav-item--sub.has-toggle .nav-sub {
        display: none;
    }

    .nav-item--sub.has-toggle.is-open .nav-sub {
        display: block;
    }

    .nav-sub li + li {
        margin-top: 2px;
    }

    header#navbar_top .navbar-collapse .nav-sub a {
        display: block;
        padding: 9px 0;
        font-size: 15px;
        line-height: 1.35;
        color: rgba(255, 255, 255, .82);
        text-decoration: none;
    }

    header#navbar_top .navbar-collapse .nav-sub a:hover,
    header#navbar_top .navbar-collapse .nav-sub a:focus-visible {
        color: #fff;
    }

    .menu-close {
        display: grid;
        place-items: center;
        position: absolute;
        top: 18px;
        right: 18px;
        width: 44px;
        height: 44px;
        min-width: 44px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .18);
        color: #fff;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
    }

    body.menu-open {
        overflow: hidden;
    }

    /* the sticky call bar must not sit on top of the open menu */
    body.menu-open .mobile-cta {
        display: none;
    }

    /* ----- horizontal card sliders ----- */
    #AnaSlider .althazne,
    #Services .althazne,
    #OtherServices .althazne {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding-bottom: 6px;
        margin-left: 0;
        margin-right: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #AnaSlider .althazne::-webkit-scrollbar,
    #Services .althazne::-webkit-scrollbar,
    #OtherServices .althazne::-webkit-scrollbar {
        display: none;
    }

    #AnaSlider .althazne > .col,
    #Services .althazne > .col,
    #OtherServices .althazne > .col {
        flex: 0 0 46%;
        max-width: 46%;
        scroll-snap-align: center;
    }

    .slider-dots,
    .slider-arrows {
        display: flex;
    }

    /* ----- images: tidy, evenly sized ----- */
    #AnaSlider .althazne img,
    #Services .althazne img,
    #OtherServices .althazne img {
        width: 86px;
        height: 86px;
        object-fit: cover;
        border-radius: 50%;
        margin: 0 auto 10px;
        display: block;
    }

    #AnaSlider .althazne h3,
    #Services .althazne h3,
    #OtherServices .althazne h3 {
        font-size: 13px;
        line-height: 1.35;
        text-align: center;
    }

    #AnaSlider .sag img {
        max-width: 62%;
        margin: 0 auto;
        display: block;
    }

    main img {
        height: auto;
    }

    /* ----- footer: one column, accordions, centred trust marks ----- */
    footer .UstLabel {
        padding-top: 34px;
    }

    footer .usthazne {
        display: block;
    }

    /* One column, everything centred: the rule under the logo was separating
       two things that are already a stack, and the mark carries the top of
       the footer better at a size that suits the width it has. */
    footer .foot-brand {
        justify-content: center;
        padding-bottom: 0;
        margin-bottom: 26px;
        border-bottom: 0;
    }

    footer .foot-brand img {
        width: min(232px, 60vw);
        margin: 0 auto;
    }

    /* social accounts sit right under the Contact accordion, always visible.
       The accordion buttons above already draw a rule each, so a rule here
       read as one more row of the same list rather than a divider. */
    footer .foot-social {
        gap: 30px;
        margin-top: 26px;
        padding-top: 0;
        border-top: 0;
    }

    footer .foot-social svg.ico {
        width: 26px;
        height: 26px;
    }

    footer .foot-rail {
        justify-content: center;
        gap: 18px;
        margin-top: 20px;
    }

    footer .foot-badges {
        flex-direction: column;
        align-items: center;
        gap: 26px;
        width: 100%;
        order: 1;
    }

    footer .foot-badges img {
        height: 58px;
    }

    /* The licence sat above the whole badge stack, which put the number a
       screen away from the mark it belongs to. The CICC badge goes last of
       the three and the licence follows it directly, so the emblem and the
       number it certifies read as one credential. */
    footer .foot-badges > *:nth-child(1) { order: 1; }   /* BBB */
    footer .foot-badges > *:nth-child(3) { order: 2; }   /* SSL */
    footer .foot-badges > *:nth-child(2) { order: 3; }   /* CICC */

    footer .foot-licence {
        justify-content: center;
        order: 2;
        width: 100%;
        margin-top: -8px;
    }

    footer .foot-rail .althazne {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 11px;
        order: 3;
        width: 100%;
        margin-top: 4px;
    }

    /* the divider belongs between items on a line; stacked, it would hang
       above each one */
    footer .foot-rail .althazne > div + div::before {
        content: none;
    }

    footer .foot-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 0;
        margin: 0;
        background: none;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, .16);
        /* it replaces the column heading on a phone, so it takes its ink */
        color: var(--foot-ink);
        font-family: inherit;
        font-size: 17px;
        text-align: left;
        cursor: pointer;
    }

    footer .foot-toggle::after {
        content: "";
        width: 9px;
        height: 9px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform .2s ease;
    }

    footer .foot-section.is-open .foot-toggle::after {
        transform: rotate(-135deg);
    }

    footer .foot-section > h3,
    footer .foot-section > h1 {
        display: none;
    }

    footer .foot-section .foot-body {
        display: none;
        padding-bottom: 12px;
    }

    footer .foot-section.is-open .foot-body {
        display: block;
    }

    footer .althazne {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 18px;
        text-align: center;
    }

    footer .spfooter img {
        width: 150px !important;
    }

    /* ----- section chips stay comfortable ----- */
    .section-chips {
        padding-top: 10px;
    }
}

@media (max-width: 575px) {

    #AnaSlider .althazne > .col,
    #Services .althazne > .col,
    #OtherServices .althazne > .col {
        flex: 0 0 62%;
        max-width: 62%;
    }

    /* the application form's row uses a -1em bleed that is wider than the phone
       gutter, pushing the page 8px sideways — trade it for a normal gutter */
    .form--start fieldset .form-inputs {
        margin-left: 0;
        margin-right: 0;
    }

    .form--start fieldset .form-inputs > * {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* =========================================================
   Homepage hero — service rail
   ---------------------------------------------------------
   Seven services, seven photographs. Nothing is laid over the
   photographs and nothing is drawn around them — a drop
   shadow does the separating.

   The rail is one grid at every width, so the head, the
   track, the slider controls and the "see all" link are all
   placed by row/column rather than by document order. That is
   what lets the arrows sit beside the label on a phone and
   disappear on a desktop without moving any markup.

   Desktop is a 7-column grid that never wraps, so nothing can
   spill into the angled navy wedge (#AnaSlider::after). The
   wedge is a z-index:0 positioned box, which paints above
   ordinary static content — hence the explicit z-index:1.
   ========================================================= */

#AnaSlider {
    /* the wedge climbs ~5vw above the section's bottom edge once
       its rotation is taken into account; stay well clear of it */
    padding-bottom: clamp(120px, 10.5vw, 200px);
}

.svc-rail {
    --svc-gap: clamp(10px, 1.3vw, 24px);
    --svc-disc: clamp(92px, 8.6vw, 130px);
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    /* the label and the link share a bottom edge in row 1 */
    align-items: end;
    margin-top: clamp(38px, 4.4vw, 68px);
}

/* The pool the photographs sit in. This began as a band of cyan LIGHT, which
   was a mistake: it lifted the ground under white type and dropped the note
   text to 2.1:1 against the bright end of the hero gradient. Deepening the
   ground instead separates the row just as well and carries the same copy to
   6.2:1 at its worst point. */
.svc-rail::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 58%;
    width: 116%;
    height: 320px;
    transform: translate(-50%, -50%);
    background: radial-gradient(58% 50% at 50% 50%, rgba(11, 28, 54, .42), rgba(11, 28, 54, 0) 72%);
    pointer-events: none;
}

/* ---------- row 1: label, rule, and the way out ---------- */
.svc-rail__eyebrow {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 clamp(26px, 3vw, 44px);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #daad4c;
}

.svc-rail__eyebrow i {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(218, 173, 76, .6), rgba(218, 173, 76, 0));
}

.svc-rail__all {
    grid-area: 1 / 2;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 clamp(26px, 3vw, 44px) 20px;
    padding-bottom: 3px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .38);
    transition: color .3s cubic-bezier(.785, .135, .15, .86),
                border-color .3s cubic-bezier(.785, .135, .15, .86);
}

.svc-rail__all:hover,
.svc-rail__all:focus-visible {
    color: #daad4c;
    border-bottom-color: #daad4c;
}

.svc-rail__all svg {
    transition: transform .3s cubic-bezier(.785, .135, .15, .86);
}

.svc-rail__all:hover svg {
    transform: translateX(4px);
}

/* ---------- row 2: the track ---------- */
.svc-rail__track {
    grid-area: 2 / 1 / 3 / 3;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--svc-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc {
    /* the seven arrive in sequence on load rather than all at once */
    animation: svc-arrive .7s cubic-bezier(.22, .78, .3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 80ms + 120ms);
}

@keyframes svc-arrive {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

.svc__link {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    transition: opacity .4s ease;
}

/* ---------- the photograph ---------- */
.svc__disc {
    position: relative;
    display: block;
    width: min(var(--svc-disc), 100%);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: #1b2846;
    box-shadow: 0 20px 34px -20px rgba(5, 20, 40, .9);
    transition: transform .45s cubic-bezier(.22, .78, .3, 1),
                box-shadow .45s cubic-bezier(.22, .78, .3, 1);
}

.svc__disc img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform .7s cubic-bezier(.22, .78, .3, 1);
}

/* ---------- labels ---------- */
.svc__name {
    display: block;
    min-height: 2.5em;
    margin: 18px auto 0;
    font-family: museo-slab, Georgia, "Times New Roman", serif;
    font-weight: 300;
    font-size: clamp(14px, 1.15vw, 17px);
    line-height: 1.25;
    color: #fff;
    text-wrap: balance;
    transition: color .3s ease;
}

.svc__note {
    display: block;
    margin: 8px auto 0;
    font-size: clamp(12.5px, .92vw, 14px);
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
    text-wrap: pretty;
    transition: color .3s ease;
}

/* ---------- group focus: the hovered photograph is given the row ----------
   Keyed off :has(link:hover) rather than the track's own :hover, so
   sweeping the pointer through a column gap doesn't dim all seven with
   none lit. Browsers without :has() just skip the rule and get no dim.
   The un-dim selectors carry the extra :hover/:focus deliberately —
   they have to outrank the (0,4,0) dim rule above them. */
.svc-rail__track:has(.svc__link:hover) .svc__link,
.svc-rail__track:has(.svc__link:focus) .svc__link {
    /* eased off .48: the dim scales the type's contrast down with it */
    opacity: .58;
}

.svc-rail__track:has(.svc__link:hover) .svc__link:hover,
.svc-rail__track:has(.svc__link:focus) .svc__link:focus {
    opacity: 1;
}

.svc__link:hover .svc__disc,
.svc__link:focus-visible .svc__disc {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 34px 44px -22px rgba(5, 20, 40, .95);
}

.svc__link:hover .svc__disc img,
.svc__link:focus-visible .svc__disc img {
    transform: scale(1.14);
}

.svc__link:hover .svc__name,
.svc__link:focus-visible .svc__name {
    color: #daad4c;
}

.svc__link:hover .svc__note,
.svc__link:focus-visible .svc__note {
    color: #fff;
}

/* ---------- tablet and below ----------------------------------------
   Two whole cards per view, never a sliced third. That needs three
   things to agree: snap to START (centre alignment always leaves half a
   card hanging off both edges), no horizontal padding on the scroller
   (percentage widths resolve against its content box), and a card width
   of exactly half the track less half the gap. Two cards plus one gap
   then measure 100%.

   The arrows sit in the head beside the label. They are not laid over
   the track at any point, so they cannot cross a photograph while it
   scrolls. Matches the 992px breakpoint the shared .slider-dots /
   .slider-arrows rules already use.
   -------------------------------------------------------------------- */
@media (max-width: 992px) {
    .svc-rail {
        --svc-gap: 14px;
        --svc-disc: 96px;
    }

    .svc-rail__eyebrow {
        grid-area: 1 / 1 / 2 / 3;
        margin-bottom: 18px;
    }

    /* row 1 column 2 belongs to the arrows on a phone; the link moves
       below the dots, centred under the row it belongs to */
    .svc-rail__all {
        grid-area: 4 / 1 / 5 / 3;
        justify-self: center;
        margin: 20px 0 0;
    }

    .svc-rail__track {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--svc-gap);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* horizontal padding would break the 50% card maths; the vertical
           padding is the drop shadow's room — overflow-x: auto computes
           overflow-y to auto too, so this scroller clips top and bottom */
        padding: 8px 0 20px;
    }

    .svc-rail__track::-webkit-scrollbar {
        display: none;
    }

    .svc {
        flex: 0 0 calc((100% - var(--svc-gap)) / 2);
        max-width: calc((100% - var(--svc-gap)) / 2);
        scroll-snap-align: start;
    }

    /* every card the same height, so the row reads as one band */
    .svc__note {
        min-height: 2.9em;
    }

    /* a shadow that fits the scroller's padding instead of being clipped
       by it: 10 down + 18 blur - 12 spread = 16px of reach */
    .svc__disc {
        box-shadow: 0 10px 18px -12px rgba(5, 20, 40, .9);
    }

    /* the controls are the shared cluster; this only places it */
    #AnaSlider .slider-arrows {
        grid-area: 3 / 1 / 4 / 3;
        justify-self: center;
    }

    /* touch has no real hover, so the group dim would just leave the row
       greyed out — same specificity as the dim rule, declared later */
    .svc-rail__track:has(.svc__link:hover) .svc__link,
    .svc-rail__track:has(.svc__link:focus) .svc__link {
        opacity: 1;
    }
}

/* Touch devices keep :hover applied after a tap, which left the tapped
   photograph raised into the scroller's clipped edge. Nothing should move
   on hover where hover isn't real. */
@media (hover: none) {

    .svc__link:hover .svc__disc {
        transform: none;
        box-shadow: 0 10px 18px -12px rgba(5, 20, 40, .9);
    }

    .svc__link:hover .svc__disc img {
        transform: scale(1.02);
    }

    .svc__link:hover .svc__name {
        color: #fff;
    }

    .svc__link:hover .svc__note {
        color: rgba(255, 255, 255, .62);
    }

    .slider-arrows > button:hover {
        color: var(--arrow-ink);
        transform: none;
    }

    .svc-rail__track:has(.svc__link:hover) .svc__link,
    .svc-rail__track:has(.svc__link:focus) .svc__link {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .svc {
        animation: none;
    }

    .svc__disc,
    .svc__disc img,
    .svc-rail__all svg {
        transition: none;
    }

    .svc__link:hover .svc__disc,
    .svc__link:focus-visible .svc__disc {
        transform: none;
    }

    .svc__link:hover .svc__disc img,
    .svc__link:focus-visible .svc__disc img {
        transform: scale(1.02);
    }
}

/* =========================================================
   Homepage — "Discover Your Canadian Heritage" (#WhyUse)
   ---------------------------------------------------------
   The certificate face and the shaft of light, together: the
   section is the face of an official document, and the hero's
   own gradient falls across it as light.

     · a hairline gold rule frames the sheet, with a faint
       engine-turned (guilloché) ground behind it — the lathe
       pattern printed on certificates and banknotes
     · the shaft crosses at -2.5deg, the same angle as the
       wedges that cut the top and bottom of this section, and
       is clipped to the sheet so it reads as light falling on
       a document rather than a stray gradient
     · the step marks are struck into the sheet — inset shadow,
       a thread of light on the lower edge — and the shaft
       catches them in cyan

   The head runs sideways rather than stacking: the title takes
   the width at a wide measure and the call to action sits
   opposite it, so a 70-character headline lands in two lines
   instead of a narrow column five lines deep.

   No markup changed. `.baslik` is display: contents, which
   dissolves its box and lets the title and the licence note
   become grid items of the sheet in their own right — that is
   what allows the note to sit at the foot while the title
   stays at the head.
   ========================================================= */

#WhyUse {
    --wu-gold: #daad4c;
    --wu-rule: rgba(218, 173, 76, .3);
    /* the section carries the breathing room now that the sheet's own
       frame and inset are gone */
    padding-top: clamp(4.5rem, 9vw, 8.5rem);
    padding-bottom: clamp(5.5rem, 11vw, 10rem);
}

#WhyUse > .container {
    position: relative;
    /* the section's bottom wedge is a z-index:1 box; keep the content over it */
    z-index: 2;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding: 0 clamp(12px, 1.4vw, 22px);
}

/* engine-turned ground. Absolutely positioned on purpose: a grid
   container's pseudo-elements become grid items unless taken out of flow. */
#WhyUse > .container::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .55;
    background: repeating-radial-gradient(circle at 50% 44%,
        transparent 0 9px, rgba(218, 173, 76, .05) 9px 10px);
    /* the mask is what keeps the lathe pattern from ending on a hard edge
       now that nothing frames it */
    -webkit-mask-image: radial-gradient(66% 58% at 50% 44%, #000, transparent 76%);
    mask-image: radial-gradient(66% 58% at 50% 44%, #000, transparent 76%);
}

/* the shaft — the hero's gradient, at the site's own angle */
#WhyUse > .container::after {
    content: '';
    position: absolute;
    z-index: -1;
    /* reaches past the container into the section's gutters; #WhyUse clips
       it at the section edge, and the gradient's transparent ends mean it
       fades rather than stopping on a line */
    left: -32%;
    right: -32%;
    top: 52%;
    height: min(46vw, 430px);
    transform: translateY(-50%) rotate(-2.5deg);
    pointer-events: none;
    filter: blur(30px);
    background:
        radial-gradient(58% 62% at 50% 50%, rgba(0, 180, 213, .17), rgba(0, 180, 213, 0) 72%),
        linear-gradient(90deg,
            rgba(0, 92, 163, 0),
            rgba(0, 120, 180, .13) 22%,
            rgba(0, 160, 205, .18) 50%,
            rgba(0, 120, 180, .13) 78%,
            rgba(0, 92, 163, 0));
}

/* dissolve the wrapper so the title and the note can be placed apart */
#WhyUse .baslik {
    display: contents;
}

/* ---------- head: title across, call to action opposite ---------- */
#WhyUse .baslik h2 {
    grid-area: 1 / 1;
    max-width: 34ch;
    margin: 0;
    font-family: museo-slab, Georgia, "Times New Roman", serif;
    font-weight: 300;
    font-size: clamp(25px, 2.85vw, 42px);
    line-height: 1.14;
    color: #fff;
    text-wrap: balance;
}

#WhyUse a.btn-started {
    grid-area: 1 / 2;
    justify-self: end;
    align-self: end;
    display: inline-block;
    margin-left: clamp(20px, 3vw, 48px);
    padding: 1.05em 2.2em;
    border: 1px solid var(--wu-gold);
    border-radius: 2px;
    background: var(--wu-gold);
    color: #1b2846;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .35s cubic-bezier(.785, .135, .15, .86),
                color .35s cubic-bezier(.785, .135, .15, .86),
                transform .35s cubic-bezier(.785, .135, .15, .86);
}

#WhyUse a.btn-started:hover,
#WhyUse a.btn-started:focus-visible {
    background: transparent;
    color: var(--wu-gold);
    transform: translateY(-2px);
}

/* ---------- the four steps ---------- */
#WhyUse .althazne {
    grid-area: 2 / 1 / 3 / 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: auto;
    max-width: none;
    margin: clamp(40px, 5vw, 70px) 0 clamp(32px, 3.8vw, 52px);
}

#WhyUse .why-item {
    position: relative;
    display: block;
    /* .row-cols-lg-4 > * sets width: 25%; on a grid item that is a quarter
       of the column, not of the row */
    width: auto;
    max-width: none;
    padding: 0 clamp(12px, 1.8vw, 26px);
    text-align: center;
}

#WhyUse .why-item + .why-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4%;
    bottom: 4%;
    width: 1px;
    background: linear-gradient(180deg,
        rgba(218, 173, 76, 0),
        var(--wu-rule) 22%,
        var(--wu-rule) 78%,
        rgba(218, 173, 76, 0));
}

/* struck into the sheet, and caught by the shaft */
#WhyUse .emoji-badge {
    width: clamp(62px, 5.4vw, 80px);
    height: clamp(62px, 5.4vw, 80px);
    margin: 0 auto clamp(18px, 2.2vw, 26px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #16213a;
    font-size: clamp(25px, 2.2vw, 32px);
    line-height: 1;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, .6),
        inset 0 -1px 0 rgba(255, 255, 255, .07),
        0 0 0 1px rgba(218, 173, 76, .38),
        0 14px 28px -14px rgba(0, 180, 213, .6);
    transition: transform .45s cubic-bezier(.22, .78, .3, 1),
                box-shadow .45s cubic-bezier(.22, .78, .3, 1);
}

#WhyUse .why-item:hover .emoji-badge,
#WhyUse .why-item:focus-within .emoji-badge {
    transform: translateY(-6px);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, .45),
        inset 0 -1px 0 rgba(255, 255, 255, .1),
        0 0 0 1px var(--wu-gold),
        0 22px 38px -14px rgba(0, 200, 255, .85);
}

#WhyUse .why-item h3 {
    margin: 0 0 9px;
    font-family: museo-slab, Georgia, "Times New Roman", serif;
    font-weight: 300;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.22;
    color: #fff;
    text-wrap: balance;
    transition: color .3s ease;
}

#WhyUse .why-item:hover h3,
#WhyUse .why-item:focus-within h3 {
    color: var(--wu-gold);
}

#WhyUse .why-item p {
    margin: 0;
    font-family: inherit;
    font-size: clamp(13px, 1vw, 14.5px);
    line-height: 1.6;
    color: rgba(226, 236, 248, .88);
    text-wrap: pretty;
}

/* ---------- the fine print, at the foot of the document ---------- */
#WhyUse .rich-text {
    grid-area: 3 / 1 / 4 / 3;
    padding-top: clamp(22px, 2.8vw, 36px);
    border-top: 1px solid rgba(218, 173, 76, .22);
    columns: 3;
    column-gap: clamp(24px, 3vw, 52px);
}

#WhyUse .rich-text p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.8;
    color: rgba(214, 227, 242, .82);
    text-wrap: pretty;
}

/* the note is separate statements divided by <br>; give them air so they
   read as clauses rather than one slab */
#WhyUse .rich-text br {
    display: block;
    content: '';
    margin-bottom: .8em;
}

/* ---------- tablet and below ----------
   No scroller here. The reading order is the point: the title, then the
   licence note, then the four steps two at a time down the page, then the
   call to action. Grid rows set that order without touching the markup. */
@media (max-width: 992px) {
    #WhyUse > .container {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    #WhyUse .baslik h2 {
        grid-area: 1 / 1;
        max-width: none;
        font-size: clamp(23px, 4.4vw, 32px);
    }

    #WhyUse .rich-text {
        grid-area: 2 / 1;
        margin-top: clamp(26px, 4.5vw, 38px);
        columns: 1;
    }

    #WhyUse .althazne {
        grid-area: 3 / 1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: clamp(30px, 5vw, 44px) 0 0;
    }

    #WhyUse a.btn-started {
        grid-area: 4 / 1;
        justify-self: center;
        margin: clamp(30px, 5vw, 42px) 0 0;
    }

    #WhyUse .althazne > div.why-item {
        display: block;
        width: auto;
        max-width: none;
        padding: clamp(20px, 3.6vw, 30px) clamp(8px, 2.6vw, 18px);
    }

    /* the desktop rule rules between every pair of neighbours; in a 2 x 2
       grid that would draw a line down the left edge of the second row */
    #WhyUse .why-item + .why-item::before {
        display: none;
    }

    #WhyUse .why-item:nth-child(even)::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 12%;
        bottom: 12%;
        width: 1px;
        background: linear-gradient(180deg,
            rgba(218, 173, 76, 0), var(--wu-rule) 20%,
            var(--wu-rule) 80%, rgba(218, 173, 76, 0));
    }

    #WhyUse .why-item:nth-child(n+3)::after {
        content: '';
        position: absolute;
        top: 0;
        left: 8%;
        right: 8%;
        height: 1px;
        background: linear-gradient(90deg,
            rgba(218, 173, 76, 0), var(--wu-rule) 20%,
            var(--wu-rule) 80%, rgba(218, 173, 76, 0));
    }
}

@media (prefers-reduced-motion: reduce) {

    #WhyUse .emoji-badge,
    #WhyUse a.btn-started,
    .slider-arrows > button {
        transition: none;
    }

    .slider-arrows > button:hover {
        transform: none;
    }

    #WhyUse .why-item:hover .emoji-badge,
    #WhyUse .why-item:focus-within .emoji-badge,
    #WhyUse a.btn-started:hover {
        transform: none;
    }
}

/* =========================================================
   Homepage — "Thousands of satisfied customers" (#Testimonial)
   ---------------------------------------------------------
   Three rails of reviews on lit paper. The middle one runs
   past both sides of the heading, so the wall reads as one
   continuous stream interrupted by the title rather than as
   a title dropped on top of it.

   Nothing ever travels behind the heading: the band is a real
   three-column layout, not a hole masked into a moving field.
   That was the difference between a legible section and an
   illegible one.

   The rails run edge to edge with no fade or blur at the ends:
   the cards stay crisp and are simply clipped by the section.
   They do not pause on hover either — the flow is constant.

   Gold carries the display accent (the opening mark, the rule
   under the heading); blue carries everything functional
   (attributions, links). Gold reads at 2:1 on paper, so it is
   never used for text here.
   ========================================================= */

#Testimonial {
    --tw-line: var(--cc-blue);
    --tw-ink: #1b2846;
    --tw-body: #3f4f63;
    --tw-paper: #f5f8f9;
    --tw-ease: cubic-bezier(.22, .78, .3, 1);
    --tw-slab: museo-slab, Georgia, "Times New Roman", serif;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(50px, 5.6vw, 84px) 0 clamp(56px, 6.4vw, 92px);
    text-align: left;
}

/* the blue light this section is lit by, as elsewhere on the page */
#Testimonial .tw-light {
    position: absolute;
    z-index: 0;
    inset: -10% -20%;
    pointer-events: none;
    background:
        radial-gradient(46% 54% at 50% 50%, rgba(0, 150, 210, .09), rgba(0, 150, 210, 0) 70%),
        radial-gradient(80% 72% at 50% 50%, rgba(0, 92, 163, .045), rgba(0, 92, 163, 0) 74%);
}

/* ---------- rails ---------- */
#Testimonial .tw-rails {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(11px, 1.2vw, 16px);
}

#Testimonial .tw-rail {
    position: relative;
    overflow: hidden;
}

#Testimonial .tw-track {
    display: flex;
    align-items: center;
    width: max-content;
    /* site.js clones the set until the track is at least twice the rail's
       width, then reports how many copies it made; one copy is that fraction
       of the whole track */
    --tw-shift: calc(-100% / var(--tw-copies, 3));
    animation: tw-left var(--dur, 66s) linear infinite;
}

#Testimonial .tw-track.rev {
    animation-name: tw-right;
}

@keyframes tw-left {
    to { transform: translateX(var(--tw-shift)); }
}

@keyframes tw-right {
    from { transform: translateX(var(--tw-shift)); }
    to { transform: translateX(0); }
}

/* ---------- cards ---------- */
#Testimonial .tw-card {
    flex: 0 0 clamp(215px, 18vw, 270px);
    margin: 0 clamp(11px, 1.2vw, 16px) 0 0;
    padding: clamp(16px, 1.7vw, 22px);
    background: #fff;
    box-shadow:
        0 12px 26px -16px rgba(12, 52, 92, .38),
        0 0 0 1px rgba(12, 52, 92, .07);
    transition: box-shadow .4s var(--tw-ease);
}

#Testimonial .tw-card:hover {
    box-shadow:
        0 20px 36px -16px rgba(12, 52, 92, .45),
        0 0 0 1px rgba(0, 92, 163, .3);
}

#Testimonial .tw-card blockquote {
    margin: 0;
}

#Testimonial .tw-card blockquote::before {
    content: '\201C';
    display: block;
    margin-bottom: 8px;
    font-family: var(--tw-slab);
    font-weight: 300;
    font-size: 30px;
    line-height: .6;
    color: rgba(0, 92, 163, .3);
}

#Testimonial .tw-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--tw-body);
}

#Testimonial .tw-card figcaption {
    margin-top: 12px;
}

#Testimonial .tw-card cite {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .16em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--tw-line);
}

#Testimonial .tw-card cite::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 1px;
    margin-right: 9px;
    vertical-align: middle;
    background: currentColor;
}

/* ---------- the heading, flanked by the middle rail ---------- */
#Testimonial .tw-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(14px, 2.4vw, 40px);
}

#Testimonial .tw-band .tw-rail {
    align-self: center;
}

/* only the heading sits in the band, so its height stays close to a card's and
   the flanking rails are not stranded in a tall empty column */
#Testimonial .tw-core {
    position: relative;
    z-index: 3;
    padding: 0 clamp(4px, 1vw, 14px);
    text-align: center;
}

#Testimonial .tw-core h2 {
    margin: 0;
    font-family: var(--tw-slab);
    font-weight: 300;
    font-size: clamp(23px, 2.9vw, 42px);
    line-height: 1.14;
    color: var(--tw-ink);
    white-space: nowrap;
}

#Testimonial .tw-core h2::before {
    content: '\201C';
    display: block;
    margin-bottom: clamp(8px, 1.1vw, 14px);
    font-family: var(--tw-slab);
    font-weight: 300;
    font-size: clamp(46px, 5.2vw, 78px);
    line-height: .62;
    color: #daad4c;
}

#Testimonial .tw-core h2::after {
    content: '';
    display: block;
    width: 46px;
    height: 3px;
    margin: clamp(14px, 1.6vw, 20px) auto 0;
    background: #daad4c;
}

/* ---------- foot ---------- */
#Testimonial .tw-foot {
    position: relative;
    z-index: 1;
    max-width: min(620px, 86%);
    margin: clamp(30px, 3.6vw, 50px) auto 0;
    text-align: center;
}

#Testimonial .tw-note {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--tw-body);
}

#Testimonial .tw-note a {
    color: var(--tw-line);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 92, 163, .42);
    transition: border-color .3s ease;
}

#Testimonial .tw-note a:hover,
#Testimonial .tw-note a:focus-visible {
    border-bottom-color: var(--tw-line);
}

#Testimonial .tw-sign {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(14px, 1.7vw, 20px);
}

#Testimonial .tw-sign img {
    width: 36px;
    height: 36px;
    padding: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(27, 40, 70, .12);
    object-fit: contain;
}

#Testimonial .tw-sign span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--tw-ink);
}

/* the phone rail is in the DOM at every width; only a phone shows it */
#Testimonial .tw-mrail {
    display: none;
}

/* ---------- phones: no room to flank a heading, or to run a wall ----------
   One breakpoint for the whole section, and it is the one the shared slider
   controls already appear at. Between 900 and 992 the band would otherwise
   still be three columns with two of them empty, which stranded the heading
   in the middle third. */
@media (max-width: 992px) {
    #Testimonial .tw-band {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(11px, 1.2vw, 16px);
    }

    #Testimonial .tw-core {
        order: -1;
        padding: clamp(6px, 2vw, 14px) 16px clamp(12px, 2.6vw, 22px);
    }

    /* the heading is set to hold one line at desktop widths */
    #Testimonial .tw-core h2 {
        white-space: normal;
    }

    /* the wall stands down — the heading is all that is left of it */
    #Testimonial .tw-rails > .tw-rail,
    #Testimonial .tw-band > .tw-rail {
        display: none;
    }

    #Testimonial .tw-mrail {
        display: block;
    }

    /* the hero's scroller, to the letter: snap on the start edge, no
       scrollbar, and the cards' drop shadow given room in the padding —
       overflow-x: auto computes overflow-y to auto as well, so this
       scroller clips top and bottom */
    #Testimonial .tw-mtrack {
        --tw-mgap: 14px;
        display: flex;
        flex-wrap: nowrap;
        gap: var(--tw-mgap);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 8px 0 20px;
    }

    #Testimonial .tw-mtrack::-webkit-scrollbar {
        display: none;
    }

    /* one review at a time — a review is a paragraph, not a thumbnail, so
       the hero's two-up would leave it unreadable. The remainder is the
       next card showing at the edge, which is what says "keep going". */
    #Testimonial .tw-mtrack > .tw-card {
        flex: 0 0 84%;
        max-width: 84%;
        margin: 0;
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    #Testimonial .tw-track {
        animation: none;
    }

    #Testimonial .tw-rail {
        overflow-x: auto;
        scrollbar-width: none;
    }
}

/* =========================================================
   Homepage — "Why do customers choose us?" (#Reasons)
   ---------------------------------------------------------
   The closer, and the page's second half of a bookend.

   The header and hero are painted with one gradient —
   -135deg, #00b4d5 to #005ca3 — and nothing below them has
   touched it since. The last section brings it back, so the
   page ends in the light it opened in, and then dusks into
   the navy footer instead of cutting against it.

   On that light, the thing the whole page is about is finally
   on the table: the certificate itself, tilted off-square,
   lifted on a real shadow, with a second sheet behind it —
   an application, not a picture of one. It is the object, at
   the size the object deserves, and nothing is laid over it.

   The copy runs beside it rather than under it, which is what
   keeps this section roughly two thirds the height of a
   stacked one. Three reasons divided by hairline rules, and
   one call to action in white — the highest-contrast mark
   available on this field, and the last thing on the page
   before the footer.

   The top edge is cut by the -2.5deg wedge the site uses
   everywhere: here it is the paper of the section above,
   falling across the light.
   ========================================================= */

#Reasons {
    --rs-ink: #1b2846;
    --rs-gold: #daad4c;
    --rs-body: rgba(226, 241, 252, .84);
    --rs-rule: rgba(255, 255, 255, .22);
    --rs-ease: cubic-bezier(.22, .78, .3, 1);
    --rs-slab: "Museo Slab W00 300", museo-slab, Georgia, serif;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(58px, 5.8vw, 88px) 0 clamp(54px, 5.4vw, 82px);
    background: linear-gradient(-135deg, #00b4d5 0, #005ca3 100%);
    text-align: left;
}

/* the paper above, falling across the light — the site's own wedge */
#Reasons::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 0;
    width: 120%;
    height: 4.5vw;
    background: #f5f8f9;
    transform: rotate(-2.5deg) translate(-50%, -50%);
    transform-origin: top left;
}

/* dusk: the light goes down into the footer rather than stopping at it */
#Reasons::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(27, 40, 70, 0) 38%,
        rgba(27, 40, 70, .32) 74%,
        rgba(27, 40, 70, .72) 100%);
}

#Reasons > .container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 372px);
    gap: clamp(30px, 4.5vw, 76px);
    align-items: center;
}

/* ---------- the copy ---------- */
#Reasons .rs-copy {
    min-width: 0;
}

#Reasons h2.baslik {
    max-width: 17ch;
    margin: 0 0 clamp(20px, 2.2vw, 30px);
    font-family: var(--rs-slab);
    font-weight: 400;
    font-size: clamp(27px, 3vw, 43px);
    line-height: 1.08;
    color: #fff;
    text-align: left;
    text-wrap: balance;
}

#Reasons h2.baslik::after {
    content: '';
    display: block;
    width: 46px;
    height: 3px;
    margin-top: clamp(16px, 1.8vw, 24px);
    background: var(--rs-gold);
}

#Reasons .rs-register {
    border-bottom: 1px solid var(--rs-rule);
}

#Reasons .rs-entry {
    padding: clamp(11px, 1.25vw, 15px) 0;
    border-top: 1px solid var(--rs-rule);
}

#Reasons .rs-entry h3 {
    margin: 0 0 4px;
    padding: 0;
    font-family: var(--rs-slab);
    font-size: clamp(17px, 1.4vw, 21px);
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
}

#Reasons .rs-entry p {
    margin: 0;
    max-width: 56ch;
    font-size: clamp(13.5px, 1vw, 14.6px);
    font-weight: 400;
    line-height: 1.6;
    color: var(--rs-body);
    text-wrap: pretty;
}

#Reasons a.btn-start {
    display: inline-block;
    margin-top: clamp(22px, 2.4vw, 32px);
    padding: 1.05em 2.4em;
    border: 1px solid #fff;
    border-radius: 2px;
    background: #fff;
    color: var(--rs-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .35s var(--rs-ease),
                color .35s var(--rs-ease),
                transform .35s var(--rs-ease);
}

#Reasons a.btn-start:hover,
#Reasons a.btn-start:focus-visible {
    background: transparent;
    color: #fff;
    transform: translateY(-2px);
}

/* ---------- the document on the table ---------- */
#Reasons .rs-doc {
    position: relative;
    margin: 0;
    justify-self: end;
}

/* leans into the gutter so it reads as an object in the room rather than an
   image parked in a column. Only where there is gutter to lean into: below
   this the container's margin is narrower than the offset and the sheet
   would be clipped by the section instead of bleeding past it. */
@media (min-width: 1200px) {
    #Reasons .rs-doc {
        margin-right: calc(-1 * clamp(0px, 3.4vw, 52px));
    }
}

/* the sheet underneath: this is an application, not a portrait */
#Reasons .rs-doc::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 4% -3% -4% 5%;
    border-radius: 2px;
    background: rgba(255, 255, 255, .3);
    box-shadow: 0 22px 44px -24px rgba(0, 26, 52, .6);
    transform: rotate(3.2deg);
}

#Reasons .rs-doc img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 2px;
    transform: rotate(-4.5deg);
    box-shadow:
        0 44px 74px -32px rgba(0, 26, 52, .78),
        0 8px 20px -8px rgba(0, 26, 52, .34);
}

/* ---------- narrow: the document leads, the copy follows ---------- */
@media (max-width: 900px) {
    #Reasons > .container {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(28px, 5vw, 44px);
        justify-items: center;
    }

    #Reasons .rs-copy {
        width: 100%;
    }

    #Reasons .rs-doc {
        order: -1;
        justify-self: center;
        /* it is the section's object, not its subject — at 62vw it was taking
           two thirds of a phone screen before a word had been read */
        width: min(212px, 50vw);
        margin-right: 0;
    }

    #Reasons h2.baslik {
        max-width: 16ch;
    }
}

@media (max-width: 560px) {
    #Reasons a.btn-start {
        display: block;
        padding: 1.1em 1.4em;
        white-space: normal;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    #Reasons a.btn-start {
        transition: none;
    }

    #Reasons a.btn-start:hover,
    #Reasons a.btn-start:focus-visible {
        transform: none;
    }
}
/* =========================================================
   Services page (.page-services)
   ---------------------------------------------------------
   Seven cards, each one the page in miniature.

   Every seam on this site is cut at -2.5deg and rises to the
   right: the hero into the paper, the paper into the closer.
   The card repeats that cut at its own scale. The site's hero
   gradient runs across the top, ends on the same angle, and
   the paper of the card carries the name below it.

   Riding the seam is the photograph, as a medallion — half in
   the light, half on the paper, on a real shadow. The site has
   never drawn a box around a photograph (the homepage's
   service rail, its four steps, its footer marks are all
   discs) and this page does not start now; the card is
   something for the disc to stand on, not a frame around it.
   The white ring is what carries it across the seam without
   either half swallowing it, and a certificate wearing a seal
   is the right object for this page anyway.

   The rest is deliberately quiet, because the seam and the
   medallion are where the boldness is spent:

     · one set, no headings cutting it into blocks. Four
       across, and the three left over centre under them.
     · nothing is featured. Same card, same plate, same type,
       in the order a claim travels — the three routes to a
       certificate, the two repairs to one you hold, the two
       records a claim stands on.
     · 10px corners, the order of radius the site is built on.
     · gold stays in the page head, on the rule under the H1.
       Seven gold marks would be seven accessories.
     · the sources are 240x240, shown at ~140. Nothing is
       upscaled and the circle is the one shape that suits all
       seven of them.
     · the notes are pushed to the foot of each card, so a row
       agrees at the bottom as well as the top.
     · the sister practices are the same card lying down, with
       the same seal on their marks, introduced by a line of
       copy rather than a heading. They are a footnote to the
       set, not a second section.

   Hovering one card dims the rest, lifts it, and opens the
   light behind its medallion — the homepage's rail move,
   given somewhere to happen.
   ========================================================= */

.page-services {
    --sv-navy: #1b2846;
    --sv-blue: #005ca3;
    --sv-link: #0088bc;
    --sv-gold: #daad4c;
    --sv-body: #5f6e76;
    --sv-line: #dde5ec;
    --sv-ease: cubic-bezier(.22, .78, .3, 1);
    --sv-slab: "Museo Slab W00 300", museo-slab, Georgia, serif;
}

/* ---------- head ----------
   Nothing here any more. The band, the measure, the type and the lead are
   all defined once for every inner page; this page keeps only the one thing
   that is genuinely its own, further down: a wedge cut in the dark field
   colour instead of paper.
   ---------- */

/* ---------- the field ----------
   Light needs somewhere dark to fall. The head's gradient goes on down
   past the seam and darkens into the navy the footer is painted with, so
   the page reads as one lit room from the masthead to the bottom — the
   same descent the homepage makes below its hero. */
.page-services #Services {
    position: relative;
    isolation: isolate;
    padding: clamp(52px, 5.4vw, 84px) 0 clamp(64px, 6.6vw, 100px);
    /* deep enough to hold a light. An even wash of cyan across the whole
       field would flatten it again — the only light here comes from the
       lamp behind the cards. */
    background: linear-gradient(180deg,
        #073d64 0,
        #093457 34%,
        #122c4b 68%,
        #1b2846 100%);
}

/* the seam above the field is cut in the field's own colour, not in the
   paper the rest of the site cuts with — otherwise the wedge would be a
   white slash across a dark room */
.page-services .section--title::after {
    background: #073d64;
}

.page-services .svc-run {
    position: relative;
    z-index: 1;
}

/* ---------- the set ----------
   Grid, not flex. Flex only equalises the cards that share a row, so a
   row of four and a row of three came out at two different heights and
   the set read as ragged. The grid runs on eight columns with every card
   spanning two: the same four-across measure, but a short last row can
   start one column in and sit centred under the full row above it.
   `grid-auto-rows: 1fr` is what does the real work — every row track
   resolves to the tallest, so all seven cards are one height whatever
   their names wrap to. */
.page-services .svc-set,
.page-services .svc-also__set {
    --sv-gap: clamp(20px, 2.2vw, 34px);
    position: relative;
    gap: var(--sv-gap);
}

.page-services .svc-set {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 1fr;
}

/* Ambient, now that every card carries its own light. This began as the
   only lamp in the room — the homepage's own wide ellipse — but two full
   lights fight, and the emphasis belongs on the cards. So this one drops
   back to what a room's ambient does: keep the field from being flat, and
   tie seven separate glows to one source. */
.page-services .svc-set::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: 118%;
    height: 132%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* hot spot at the upper right, because that is where the light comes
       from everywhere else on this site: the masthead gradient is brightest
       at its top right corner and every card plate below repeats it. A lamp
       lighting the room from the other side would fight all seven. */
    background:
        radial-gradient(44% 40% at 74% 20%, rgba(0, 206, 255, .30), rgba(0, 206, 255, 0) 70%),
        radial-gradient(42% 38% at 24% 74%, rgba(0, 172, 232, .21), rgba(0, 172, 232, 0) 72%),
        radial-gradient(68% 58% at 52% 46%, rgba(126, 228, 255, .11), rgba(126, 228, 255, 0) 74%);
    filter: blur(10px);
}

.page-services .svc-node,
.page-services .svc-sister {
    position: relative;
    z-index: 1;
}

.page-services .svc-node {
    grid-column: span 2;
    /* a grid item's default min-width is its content; without this a long
       unbroken word would push a column wider than its share */
    min-width: 0;
}

/* the fifth card opens the short row one column in, which centres 5-7
   under 1-4 without either end hanging left */
.page-services .svc-set > .svc-node:nth-child(5) {
    grid-column: 2 / span 2;
}

/* the sisters ride the same grid as the seven above, so their three cards
   are one height with each other and one shape with the set */
.page-services .svc-also__set {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
}

.page-services .svc-sister {
    min-width: 0;
}

/* ---------- the card: the page, in miniature ----------
   Every seam on this site is cut at -2.5deg — the hero into the paper,
   the paper into the closer. The card repeats it at its own scale: the
   site's hero gradient across the top, cut off on the same angle, and
   the paper of the card below it. Nothing else on the web looks like
   this because nothing else is cut at this site's angle. */
.page-services .svc-node,
.page-services .svc-sister {
    --sv-pad: clamp(18px, 1.7vw, 26px);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    /* the gold the homepage marks its sections with, run round the card as
       a frame. A certificate is a document with a gold edge; this is the
       one place on the page where that is worth saying out loud. */
    border: 1px solid #daad4c;
    /* the light is under the card, not around it. A centred halo lights the
       card's outline; a pool offset downward lights the ground it stands on,
       which is what actually pulls the eye to the object above it. The faint
       surround only stops the sides going black against the field. */
    box-shadow:
        0 0 30px -6px rgba(220, 242, 255, .16),
        0 32px 58px -16px rgba(200, 238, 255, .58);
    text-decoration: none;
    transition: transform .5s var(--sv-ease),
                opacity .45s var(--sv-ease),
                border-color .5s var(--sv-ease),
                box-shadow .5s var(--sv-ease);
}

/* the light the document is held up to */
.page-services .svc-node::before,
.page-services .svc-sister::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(116px, 10.8vw, 154px);
    /* the site's own hero fill, with the cyan pool the homepage lights
       its field with sitting behind the medallion */
    background:
        radial-gradient(72% 96% at 50% 6%, rgba(126, 228, 255, .5), rgba(126, 228, 255, 0) 68%),
        linear-gradient(-135deg, #00b4d5 0, #005ca3 100%);
    /* -2.5deg: the edge rises to the right, the way every seam on the
       site rises to the right */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 0 100%);
    transition: filter .5s var(--sv-ease);
}

.page-services .svc-node:hover::before,
.page-services .svc-node:focus-visible::before,
.page-services .svc-sister:hover::before,
.page-services .svc-sister:focus-visible::before {
    filter: brightness(1.09) saturate(1.06);
}

/* one service at a time: the page dims and the one under the cursor stays
   lit. The same move the homepage's rail makes, across a whole page. */
.page-services .svc-run:has(.svc-node:hover) .svc-node,
.page-services .svc-run:has(.svc-node:focus-visible) .svc-node,
.page-services .svc-run:has(.svc-sister:hover) .svc-sister,
.page-services .svc-run:has(.svc-sister:focus-visible) .svc-sister {
    /* short of the .58 the rail uses: white cards on paper have far less
       ground under them to give away before the type stops reading */
    opacity: .66;
}

.page-services .svc-run:has(.svc-node:hover) .svc-node:hover,
.page-services .svc-run:has(.svc-node:focus-visible) .svc-node:focus-visible,
.page-services .svc-run:has(.svc-sister:hover) .svc-sister:hover,
.page-services .svc-run:has(.svc-sister:focus-visible) .svc-sister:focus-visible {
    opacity: 1;
    transform: translateY(-7px);
    border-color: #daad4c;
    box-shadow:
        0 0 34px -6px rgba(220, 242, 255, .24),
        0 44px 76px -16px rgba(214, 244, 255, .8);
}

/* ---------- the medallion, riding the seam ----------
   The certificate sits across the cut: most of it in the light, the rest
   on the paper, on a real shadow. It is the homepage's disc — the site
   has never drawn a box around a photograph and does not start here —
   given something to stand on. The white ring is what carries it over
   the seam without either half swallowing it, and a certificate wearing
   a seal is the right kind of object for this page anyway.

   240x240 sources, shown at ~130. Nothing is cropped, nothing is
   stretched, and the circle is the one shape that suits all seven. */
.page-services .svc-node__disc,
.page-services .svc-sister__mark {
    position: relative;
    z-index: 1;
    display: block;
    flex: none;
    width: clamp(112px, 9.4vw, 140px);
    aspect-ratio: 1;
    margin: clamp(30px, 3vw, 42px) auto 0;
    overflow: hidden;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 0 3px #fff,
        0 0 0 4px rgba(27, 40, 70, .07),
        0 18px 26px -12px rgba(5, 20, 40, .55);
    transition: transform .5s var(--sv-ease),
                box-shadow .5s var(--sv-ease);
}

.page-services .svc-node__disc img,
.page-services .svc-sister__mark img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    border-radius: 0;
    object-fit: cover;
    transform: none;
    transition: transform .7s var(--sv-ease);
}

.page-services .svc-node:hover .svc-node__disc,
.page-services .svc-node:focus-visible .svc-node__disc,
.page-services .svc-sister:hover .svc-sister__mark,
.page-services .svc-sister:focus-visible .svc-sister__mark {
    transform: translateY(-5px);
    box-shadow:
        0 0 0 3px #fff,
        0 0 0 4px rgba(27, 40, 70, .07),
        0 26px 34px -12px rgba(5, 20, 40, .6);
}

.page-services .svc-node:hover .svc-node__disc img,
.page-services .svc-node:focus-visible .svc-node__disc img,
.page-services .svc-sister:hover .svc-sister__mark img,
.page-services .svc-sister:focus-visible .svc-sister__mark img {
    transform: scale(1.06);
}

/* ---------- the name ---------- */
.page-services .svc-node__name {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: clamp(17px, 1.7vw, 24px) var(--sv-pad) 0;
    font-family: var(--sv-slab);
    font-weight: 400;
    /* one size for all seven — nothing in the set is featured */
    font-size: clamp(15.5px, 1.16vw, 17.8px);
    line-height: 1.28;
    /* three lines whether the name needs three or not. With the plate a
       fixed height and the note below on a fixed slot of its own, every
       card in the set measures the same — not just the ones sharing a row. */
    min-height: calc(3 * 1.28em);
    color: var(--sv-navy);
    text-align: center;
    text-wrap: balance;
    transition: color .3s var(--sv-ease);
}

.page-services .svc-node:hover .svc-node__name,
.page-services .svc-node:focus-visible .svc-node__name {
    color: var(--sv-blue);
}

/* the affordance sits in the name, because the name is the link */
.page-services .svc-node__go {
    display: inline-block;
    margin-left: 7px;
    color: var(--sv-link);
    font-size: .68em;
    vertical-align: baseline;
    transition: transform .4s var(--sv-ease);
}

.page-services .svc-node:hover .svc-node__go,
.page-services .svc-node:focus-visible .svc-node__go {
    transform: translateX(5px);
}

/* pushed to the foot of the card, so the notes line up across a row
   however many lines the name above them took */
.page-services .svc-node__note {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: auto;
    padding: 9px var(--sv-pad) var(--sv-pad);
    font-size: clamp(12.8px, .95vw, 14px);
    line-height: 1.55;
    min-height: calc(2 * 1.55em + 9px);
    color: var(--sv-body);
    text-align: center;
    text-wrap: pretty;
}

/* ---------- the sister practices ----------
   A footnote to the set, not a second section: a rule, a line of copy,
   and the same card in a shorter form. No heading. */
.page-services .svc-also {
    position: relative;
    z-index: 1;
    margin-top: clamp(46px, 4.8vw, 74px);
    padding-top: clamp(30px, 3.2vw, 48px);
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.page-services .svc-also__lead {
    max-width: 44ch;
    margin: 0 auto clamp(18px, 2vw, 28px);
    font-size: clamp(14px, 1.05vw, 15.4px);
    line-height: 1.6;
    color: rgba(216, 238, 252, .84);
    text-align: center;
}

/* The sister card was a different object altogether — a squat row with the
   mark on its side — and its heading was styled as `h3` while the markup
   says `h2`, so the name fell back to a browser default and the three read
   as debris under the set. It is the same card as the seven above now:
   the plate, the seam, the medallion riding it, the name centred beneath. */
.page-services .svc-sister {
    padding-bottom: var(--sv-pad);
}

.page-services .svc-sister h2,
.page-services .svc-sister h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: clamp(17px, 1.7vw, 24px) var(--sv-pad) 0;
    font-family: var(--sv-slab);
    font-weight: 400;
    font-size: clamp(15.5px, 1.16vw, 17.8px);
    line-height: 1.28;
    /* two lines: the longest of the three names takes two at this width */
    min-height: calc(2 * 1.28em);
    color: var(--sv-navy);
    text-align: center;
    text-wrap: balance;
    transition: color .3s var(--sv-ease);
}

.page-services .svc-sister:hover h2,
.page-services .svc-sister:focus-visible h2,
.page-services .svc-sister:hover h3,
.page-services .svc-sister:focus-visible h3 {
    color: var(--sv-blue);
}

.page-services .svc-sister__ext {
    display: inline-block;
    margin-left: 7px;
    color: var(--sv-link);
    font-size: .74em;
    vertical-align: baseline;
    transition: transform .4s var(--sv-ease);
}

.page-services .svc-sister:hover .svc-sister__ext {
    transform: translate(2px, -2px);
}

/* ---------- laptop: three across, one left over ---------- */
@media (max-width: 1200px) {
    .page-services .svc-set {
        grid-template-columns: repeat(6, 1fr);
    }

    .page-services .svc-set > .svc-node:nth-child(5) {
        grid-column: span 2;
    }

    /* 3 + 3 + 1: the last card centres itself in the middle two columns */
    .page-services .svc-set > .svc-node:nth-child(7) {
        grid-column: 3 / span 2;
    }
}

/* ---------- tablet: two across ---------- */
@media (max-width: 992px) {
    .page-services .svc-set {
        grid-template-columns: repeat(4, 1fr);
    }

    .page-services .svc-set > .svc-node:nth-child(7) {
        grid-column: 2 / span 2;
    }

    /* 2 + 1: the odd sister centres itself in the middle two columns */
    .page-services .svc-also__set {
        grid-template-columns: repeat(4, 1fr);
    }

    .page-services .svc-also__set > .svc-sister {
        grid-column: span 2;
    }

    .page-services .svc-also__set > .svc-sister:nth-child(3) {
        grid-column: 2 / span 2;
    }
}

/* ---------- phones: one column, same card ---------- */
@media (max-width: 640px) {
    .page-services .svc-set,
    .page-services .svc-also__set {
        --sv-gap: 16px;
    }

    .page-services .svc-set {
        grid-template-columns: 1fr;
    }

    /* one to a row: no spans, no offsets, nothing to centre */
    .page-services .svc-set > .svc-node,
    .page-services .svc-set > .svc-node:nth-child(5),
    .page-services .svc-set > .svc-node:nth-child(7) {
        grid-column: auto;
    }

    .page-services .svc-also__set {
        grid-template-columns: 1fr;
    }

    .page-services .svc-also__set > .svc-sister,
    .page-services .svc-also__set > .svc-sister:nth-child(3) {
        grid-column: auto;
    }

    /* one card to a row is a wide plate, so the medallion grows to hold it */
    .page-services .svc-node::before,
    .page-services .svc-sister::before {
        height: 132px;
    }

    .page-services .svc-node__disc,
    .page-services .svc-sister__mark {
        width: 128px;
        margin-top: 36px;
    }

    .page-services .svc-sister h2,
    .page-services .svc-sister h3 {
        font-size: 16.5px;
        min-height: 0;
    }

    .page-services .svc-node__name {
        font-size: 16.5px;
        /* a full-width card fits the longest name in two lines, so the slot
           shrinks with it — three would just be a hole under every name */
        min-height: calc(2 * 1.28em);
    }

    .page-services .svc-node__note {
        min-height: calc(1.55em + 9px);
    }

}

/* Touch keeps :hover applied after a tap, which would leave the rest of the
   page dimmed with no way to clear it. */
@media (hover: none) {
    .page-services .svc-run:has(.svc-node:hover) .svc-node,
    .page-services .svc-run:has(.svc-sister:hover) .svc-sister {
        opacity: 1;
    }

    .page-services .svc-run:has(.svc-node:hover) .svc-node:hover,
    .page-services .svc-run:has(.svc-sister:hover) .svc-sister:hover,
    .page-services .svc-node:hover .svc-node__disc {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-services .svc-node,
    .page-services .svc-node::before,
    .page-services .svc-sister,
    .page-services .svc-node__disc,
    .page-services .svc-node__disc img,
    .page-services .svc-node__go,
    .page-services .svc-sister__ext {
        transition: none;
    }

    .page-services .svc-run:has(.svc-node:hover) .svc-node:hover,
    .page-services .svc-run:has(.svc-sister:hover) .svc-sister:hover,
    .page-services .svc-node:hover .svc-node__disc,
    .page-services .svc-node:hover .svc-node__disc img,
    .page-services .svc-node:hover .svc-node__go,
    .page-services .svc-sister:hover .svc-sister__ext {
        transform: none;
    }
}

/* =========================================================
   The inner page (.page-inner)
   ---------------------------------------------------------
   The page a services card leads to, in the homepage's own
   rhythm: lit for choosing, paper for reading, lit again to
   close. The services page is the lit half of that pair and
   this is the quiet half, so the boldness here is spent on
   one thing only — the price panel, which is the services
   card again at full size, plate and seam and medallion, so
   the card you clicked is still on the screen when you get
   here.

   The body of this page arrives as pasted Word HTML: Times
   New Roman set inline, emoji standing in for list bullets,
   <hr> for every change of subject. None of that survives
   into the markup any more. What is left is headings, lists,
   and paragraphs, which is all the content ever was, and the
   type is finally the site's own.
   ========================================================= */

.page-inner {
    --sd-navy: #1b2846;
    --sd-blue: #005ca3;
    --sd-link: #0088bc;
    --sd-gold: #daad4c;
    --sd-ink: #44546a;
    --sd-line: #dde5ec;
    --sd-paper: #f5f8f9;
    --sd-ease: cubic-bezier(.22, .78, .3, 1);
    --sd-slab: "Museo Slab W00 300", museo-slab, Georgia, serif;
}

/* ---------- head ---------- */

.page-inner .sd-head > .container {
    max-width: min(100%, 1140px);
}


/* The button used to sit under the lead, and its own height plus the gap
   above it was the whole of what made this band taller than the services
   band — forty-odd pixels that no amount of spacing could absorb. Beside
   the lead instead of below it, it costs the band nothing: same band, same
   place in the reading order, no height of its own. */
.page-inner .sd-head__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(18px, 2.2vw, 32px);
}

.page-inner .sd-head__row .sd-head__lead {
    flex: 1 1 30ch;
    max-width: 52ch;
    margin-bottom: 0;
}

.page-inner .sd-head__row .sd-cta {
    flex: none;
}

/* ---------- the one button shape this page uses ---------- */
.page-inner .sd-cta {
    display: inline-block;
    padding: .85em 1.6em .95em;
    border: 0;
    border-radius: 6px;
    background: var(--sd-gold);
    color: #1b2846;
    font-family: quasimoda, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 14px 26px -14px rgba(0, 10, 26, .6);
    transition: transform .3s var(--sd-ease),
                background .3s var(--sd-ease),
                box-shadow .3s var(--sd-ease);
}

.page-inner .sd-cta:hover,
.page-inner .sd-cta:focus-visible {
    background: #e6bb60;
    transform: translateY(-2px);
    box-shadow: 0 20px 30px -14px rgba(0, 10, 26, .7);
}

.page-inner .sd-cta--block {
    display: block;
    text-align: center;
}

/* ---------- the reading half ---------- */
.page-inner .content--service--detail {
    padding: clamp(46px, 4.8vw, 78px) 0 clamp(56px, 5.8vw, 92px);
    background: var(--sd-paper);
}

.page-inner .sd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 352px);
    gap: clamp(30px, 4vw, 60px);
    /* the aside stretches so the panel inside it has somewhere to travel;
       a content-sized grid area gives position:sticky nothing to stick in */
    align-items: stretch;
}

.page-inner .sd-body {
    min-width: 0;
    /* a measure, not a column width: 66 characters is where a line stops
       costing the reader the start of the next one */
    max-width: 66ch;
    font-size: clamp(15.6px, 1.12vw, 16.8px);
    line-height: 1.72;
    color: var(--sd-ink);
}

.page-inner .sd-body > :first-child {
    margin-top: 0;
}

/* the chips site.js builds at the head of the reading column */
.page-inner .sd-body > .section-chips {
    margin-bottom: clamp(16px, 1.8vw, 26px);
    padding-top: 0;
}

.page-inner .sd-body > .section-chips a {
    white-space: normal;
}

.page-inner .sd-body p {
    margin: 0 0 1.15em;
    text-wrap: pretty;
}

.page-inner .sd-body strong {
    font-weight: 600;
    color: var(--sd-navy);
}

.page-inner .sd-body a {
    color: var(--sd-link);
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
}

.page-inner .sd-h {
    margin: clamp(34px, 3.4vw, 50px) 0 clamp(13px, 1.3vw, 18px);
    font-family: var(--sd-slab);
    font-weight: 400;
    font-size: clamp(19px, 1.62vw, 25px);
    line-height: 1.24;
    color: var(--sd-navy);
    text-wrap: balance;
}

/* the change of subject Word marked with a full-width <hr>. A hairline
   with a gold cap says the same thing and is the site's own mark. */
.page-inner .sd-rule {
    height: 1px;
    margin: clamp(34px, 3.6vw, 52px) 0;
    border: 0;
    background: linear-gradient(90deg,
        var(--sd-gold) 0, var(--sd-gold) 26px,
        var(--sd-line) 26px, var(--sd-line) 100%);
}

.page-inner .sd-rule + .sd-h {
    margin-top: 0;
}

/* ---------- the lists that used to be emoji ---------- */
.page-inner .sd-checks {
    margin: 0 0 1.3em;
    padding: 0;
    list-style: none;
}

.page-inner .sd-checks li {
    position: relative;
    margin: 0 0 .72em;
    padding-left: 2em;
}

/* drawn, not typed: an emoji check renders in whatever face the reader's
   system supplies and never matches the page */
.page-inner .sd-checks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .42em;
    width: 15px;
    height: 9px;
    border-left: 2.5px solid var(--sd-blue);
    border-bottom: 2.5px solid var(--sd-blue);
    transform: rotate(-45deg);
}

.page-inner .sd-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-inner .sd-contact li {
    margin: 0 0 .5em;
}

.page-inner .sd-contact strong {
    display: inline-block;
    min-width: 5.2em;
}

/* ---------- the price panel: the services card, at full size ---------- */
/* The panel started at the very top of its column, level with the article's
   first heading, so the first thing on the page was the price. Centred in
   the column it meets the reader in the middle of the text instead — and it
   keeps its sticky travel, because the aside is still stretched by the grid
   and the panel is only centred inside that tall box: it sits at the middle
   on arrival and pins to the top once you scroll past it. */
.page-inner .sd-aside {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* The panel was centred in its column, which on a two-thousand-word service
   page put it well down the article: a reader arriving at the top saw an
   empty rail and had to scroll into the middle before the price appeared at
   all. It starts at the head of the column now and pins from the first
   scroll, so it is beside the reader for the whole page rather than for the
   second half of it. The aside is still stretched by the grid, so the travel
   runs the article's full height.

   Desktop only: below 900px the panel is already position:relative and
   leads the column instead of following it. */
@media (min-width: 901px) {
    .page-inner .sd-aside {
        justify-content: flex-start;
    }
}

/* ---------------------------------------------------------
   The panel had the right parts in the wrong sizes. A 138px
   plate carried a 118px certificate, which left most of the
   blue empty and made the artwork read as a sticker stuck on
   a header rather than the object the card is about. Below
   it the price — the one fact a reader comes to this column
   for — was set smaller than the page's own h2.

   Rebuilt around the services card's move: one committed
   object riding the seam, then the answer, then the detail,
   then the button. The medallion is square there because
   those photographs are square; this artwork is an upright
   document, so it gets the rectangular sibling of the same
   idea — a white mount standing it on the plate, off-square,
   on a real shadow, nothing laid over it.
   --------------------------------------------------------- */
.page-inner .sd-panel {
    position: sticky;
    top: calc(var(--nav-h) + 22px);
    overflow: hidden;
    /* the same gold frame the services cards wear, so the card you clicked
       is recognisably the panel you land on */
    border: 1px solid #daad4c;
    border-radius: 10px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(27, 40, 70, .06),
        0 34px 58px -26px rgba(27, 40, 70, .55);
}

/* the same plate, cut on the same -2.5deg — tall enough now that the
   document stands in it instead of on top of it */
.page-inner .sd-panel::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    height: 166px;
    background:
        radial-gradient(72% 96% at 50% 6%, rgba(126, 228, 255, .5), rgba(126, 228, 255, 0) 68%),
        linear-gradient(-135deg, #00b4d5 0, #005ca3 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 0 100%);
}

/* the mount: white board, hard shadow, a few degrees off square. The
   services medallion's ring does the same job — it is what carries the
   object across the seam without either half swallowing it. */
.page-inner .sd-panel__mark {
    position: relative;
    z-index: 1;
    display: block;
    width: 146px;
    margin: 28px auto 0;
    padding: 8px;
    border-radius: 5px;
    background: #fff;
    transform: rotate(-4.5deg);
    box-shadow:
        0 0 0 1px rgba(27, 40, 70, .09),
        0 28px 42px -18px rgba(5, 20, 40, .62);
}

.page-inner .sd-panel__mark img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

.page-inner .sd-panel__label {
    position: relative;
    z-index: 1;
    margin: clamp(26px, 2.6vw, 34px) 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #7e8d9b;
    text-align: center;
}

/* the answer, at the size of an answer */
.page-inner .sd-panel__price {
    position: relative;
    z-index: 1;
    margin: 6px 0 0;
    font-family: var(--sd-slab);
    font-weight: 400;
    font-size: clamp(42px, 3.6vw, 50px);
    line-height: 1;
    color: var(--sd-navy);
    text-align: center;
}

.page-inner .sd-panel__price span {
    margin-left: 6px;
    font-family: quasimoda, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #7e8d9b;
    vertical-align: .62em;
}

/* what the number covers: two entries, each a labelled line, split by a
   hairline so neither is read as a continuation of the other */
.page-inner .sd-panel__list {
    position: relative;
    z-index: 1;
    margin: clamp(22px, 2.2vw, 28px) 0 0;
    padding: 0 clamp(20px, 2vw, 26px);
    list-style: none;
    font-size: 13.4px;
    line-height: 1.66;
    color: #5f6e76;
}

.page-inner .sd-panel__list li {
    padding: clamp(14px, 1.4vw, 17px) 0;
    border-top: 1px solid var(--sd-line);
}

.page-inner .sd-panel__list li + li {
    margin-top: 0;
}

.page-inner .sd-panel__list strong {
    display: block;
    margin-bottom: 3px;
    font-family: var(--sd-slab);
    font-size: 14.6px;
    font-weight: 400;
    color: var(--sd-navy);
}

.page-inner .sd-panel .sd-cta {
    position: relative;
    z-index: 1;
    display: block;
    margin: clamp(14px, 1.4vw, 18px) clamp(20px, 2vw, 26px) clamp(20px, 2vw, 26px);
    padding: .95em 1.6em 1.05em;
    font-size: 15.5px;
    text-align: center;
}

/* ---------- the close ----------
   One closing band for every page that has one. It used to be two: the
   service pages carried the lit wedge and the white button, and six other
   pages still carried moon.css's grey slab with an orange button in it —
   the same words, twice, in two different companies' clothes. */
.section--cta.cta--close {
    position: relative;
    overflow: hidden;
    padding: clamp(52px, 5.4vw, 84px) 0 clamp(56px, 5.8vw, 88px);
    background: linear-gradient(-135deg, #00b4d5 0, #005ca3 100%);
    text-align: center;
}

/* the paper above, falling across the light — the site's own wedge */
.section--cta.cta--close::before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 0;
    width: 120%;
    height: 4.5vw;
    background: #fff;
    transform: rotate(-2.5deg) translate(-50%, -50%);
    transform-origin: top left;
}

/* dusk into the footer rather than stopping at it */
.section--cta.cta--close::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(27, 40, 70, 0) 42%,
        rgba(27, 40, 70, .30) 76%,
        rgba(27, 40, 70, .68) 100%);
}

.section--cta.cta--close > .container {
    position: relative;
    z-index: 2;
}

/* The leaf is a pale artwork on a blue ground, so at the 60x60 moon.css
   gave it there was nothing to read. As a white silhouette at real size it
   stops being a small unreadable picture and becomes the mark behind the
   line. */
.cta--close .cta__mark {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: clamp(150px, 15vw, 230px);
    margin: 0;
    transform: translate(-50%, -58%);
    pointer-events: none;
}

.cta--close .cta__mark img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: .16;
}

.cta--close .title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--sd-slab, "Museo Slab W00 300", museo-slab, Georgia, serif);
    font-weight: 400;
    font-size: clamp(26px, 2.8vw, 40px);
    line-height: 1.1;
    color: #fff;
}

.cta--close .sd-close__lead {
    position: relative;
    z-index: 1;
    max-width: 48ch;
    margin: clamp(14px, 1.6vw, 20px) auto 0;
    font-size: clamp(15px, 1.1vw, 16.5px);
    line-height: 1.6;
    color: rgba(226, 241, 252, .9);
    text-wrap: pretty;
}

/* one button shape, and it wins over moon.css's orange */
.cta--close .cta__btn {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-top: clamp(22px, 2.4vw, 32px);
    padding: .95em 1.7em 1.05em;
    border: 0;
    border-radius: 6px;
    background: #fff;
    color: var(--sd-blue, #005ca3);
    font-family: quasimoda, sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 14px 26px -14px rgba(0, 10, 26, .6);
    transition: transform .3s var(--sd-ease, cubic-bezier(.22,.78,.3,1)),
                color .3s var(--sd-ease, cubic-bezier(.22,.78,.3,1)),
                box-shadow .3s var(--sd-ease, cubic-bezier(.22,.78,.3,1));
}

.cta--close .cta__btn:hover,
.cta--close .cta__btn:focus-visible {
    color: var(--sd-navy, #1b2846);
    transform: translateY(-2px);
    box-shadow: 0 20px 30px -14px rgba(0, 10, 26, .7);
}

@media (prefers-reduced-motion: reduce) {
    .cta--close .cta__btn { transition: none; }
    .cta--close .cta__btn:hover { transform: none; }
}

/* ---------- narrow: the panel stops following and leads instead ----------
   It keeps its place at the top of the column: the price is the first thing
   a reader wants and the head's own button is already above it, so burying
   the panel under two thousand words would answer neither. What changes is
   that it stops being a sidebar pretending to be one on a phone — it
   centres, it takes the full measure, and the mount comes down to a size
   that suits a card the width of the screen. */
@media (max-width: 900px) {
    .page-inner .sd-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* `order: -1` put the price above the first line of the page on a phone.
       The grid has two children here, so the panel can sit before the
       article or after it and nowhere else — it reads after it now, where a
       price belongs once the service has been explained. */
    .page-inner .sd-aside {
        width: 100%;
        max-width: 440px;
        margin-inline: auto;
    }

    /* relative, not static: the plate is positioned against this box, and a
       static panel would send it off to the nearest positioned ancestor and
       out of the panel's own clip */
    .page-inner .sd-panel {
        position: relative;
        top: auto;
    }

    .page-inner .sd-body {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .page-inner .sd-aside {
        max-width: none;
    }

    .page-inner .sd-panel::before {
        height: 156px;
    }

    .page-inner .sd-panel__mark {
        width: 140px;
        margin-top: 26px;
    }

    .page-inner .sd-panel__price {
        font-size: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-inner .sd-cta {
        transition: none;
    }

    .page-inner .sd-cta:hover,
    .page-inner .sd-cta:focus-visible {
        transform: none;
    }
}

/* ---------------------------------------------------------
   Service detail — what the reader is here to decide, and
   what they are only here to be told.

   The page sets out three tick lists in a row and they were
   all dressed the same: why apply, whether you qualify, what
   we do. Only one of them is the reader's own question, and
   nothing on the page said so. Not a word has moved — the
   block that matters simply wears the gold the services card
   wears, and the legal block steps back to the colour of a
   footnote.
   --------------------------------------------------------- */

/* ---------- the block the reader answers ---------- */
.page-inner .sd-decide {
    position: relative;
    margin: clamp(34px, 3.4vw, 50px) 0 1.3em;
    padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 34px) clamp(14px, 1.6vw, 22px);
    border: 1px solid #daad4c;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(218, 173, 76, .07), rgba(218, 173, 76, 0) 46%),
        #fff;
    box-shadow: 0 18px 34px -24px rgba(27, 40, 70, .42);
}

.page-inner .sd-decide .sd-h {
    margin-top: 0;
}

/* ---------- the block the reader is only told ---------- */
.page-inner .sd-legal {
    margin: clamp(34px, 3.6vw, 52px) 0 1.3em;
    padding-top: clamp(22px, 2.4vw, 30px);
    border-top: 1px solid var(--sd-line);
    font-size: .92em;
    color: #6b7c8d;
}

.page-inner .sd-legal .sd-h {
    margin-top: 0;
    font-size: clamp(16px, 1.24vw, 19px);
    color: #55647a;
}

/* the rule already drawn above the disclaimer would double the one the
   block brings with it */
.page-inner .sd-rule + .sd-legal {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ---------- deep links land where they should ---------- */
.page-inner .sd-h {
    scroll-margin-top: calc(var(--nav-h) + 20px);
}

/* =========================================================
   Headings that were never marked up as headings
   ---------------------------------------------------------
   The retainer agreement carried its 24 clause titles as bold
   paragraphs. Nothing they say has changed — they are simply
   h2 elements now, so a reader, a screen reader and an answer
   engine can all see the structure that was always there.
   These rules keep them looking the way they looked.
   (The blog index's titles were the other half of this job;
   they are headings inside their own cards now — see the
   .page-blogs block at the foot of this file.)
   ========================================================= */

/* the retainer agreement's clause headings */
.doc-h {
    margin: 2em 0 .6em;
    font-family: "Museo Slab W00 300", museo-slab, Georgia, serif;
    font-weight: 400;
    font-size: 1.12rem;
    line-height: 1.3;
    color: #1b2846;
    scroll-margin-top: calc(var(--nav-h) + 20px);
}

.doc-h:first-child {
    margin-top: 0;
}

/* every anchored heading clears the sticky masthead when linked to */
[id] > h2,
h2[id],
h3[id] {
    scroll-margin-top: calc(var(--nav-h) + 20px);
}

/* =========================================================
   About Us (.page-about)
   ---------------------------------------------------------
   Nothing sits in the margin. No card, no aside, no picture.
   Every block runs the full width of the page and breaks
   across columns, so the copy fills the page horizontally
   instead of running down one side of it — and each column
   still lands near forty characters, which is the width a
   line has to keep to stay readable.

   Behind it, the brand leaf, on the benefits page's own
   numbers: large, faint, multiplied into the paper.
   ========================================================= */

/* ---------- the field, and the leaf behind it ---------- */
.page-about .content--service--detail {
    position: relative;
    overflow: hidden;
}

.page-about .content--service--detail::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    right: clamp(-160px, -7vw, -50px);
    width: min(50vw, 640px);
    aspect-ratio: 294 / 287;
    transform: translateY(-50%);
    background: url("../images/logo-mark.webp") center / contain no-repeat;
    opacity: .06;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.page-about .content--service--detail > .container {
    position: relative;
    z-index: 1;
}

/* the service page's measure is for a page with a card beside it; this one
   has nothing beside it, so the body takes the whole width */
.page-about .sd-body {
    max-width: none;
}

/* ---------- prose across the page ----------
   Three columns of about forty characters. The paragraphs are whole
   thoughts, one to a column — this is a row of blocks, not newspaper text
   flowing from the foot of one column to the head of the next. */
.page-about .ab-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 52px);
}

.page-about .ab-cols > p {
    margin: 0;
    text-wrap: pretty;
}

/* ---------- the six entries, across the page ----------
   No ticks. A gold check beside every line is the mark every generated
   page on the web wears, and six of them in a grid read as a template
   rather than as this firm's own scope. What replaces it is not another
   icon but structure: each entry is a passage ruled down its left edge in
   the site's gold, the way a clause is marked in a document. */
.page-about .ab-set {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 36px) clamp(24px, 3vw, 52px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-about .ab-set li {
    margin: 0;
    padding: clamp(4px, .5vw, 7px) 0 clamp(4px, .5vw, 7px) clamp(18px, 1.8vw, 26px);
    border-left: 2px solid #daad4c;
    text-wrap: pretty;
}

/* the entry stays a paragraph of prose, not a caption */
.page-about .ab-set li::before,
.page-about .ab-set li::marker {
    content: none;
}

/* ---------- the foot: licence, marks and signature on one line ---------- */
/* ---------- the credential block ----------
   Three things ended the article — the licence, the two marks, the
   signature — and each arrived in its own voice: an 11px gold-brown label,
   a 27px slab number under a gold rule, two rasters at different aspect
   ratios, and a name behind a gold left border. Three separate uses of the
   one accent colour inside 1140px, and `align-items: center` set three
   blocks of three different heights on three different lines, so nothing
   in the row agreed with anything else in it. That is the tiring part: not
   any one of them, but five voices and no shared edge.

   It is one card now, the shell the rest of the site gives a list item, and
   the gold is spent once — the cap over the label. The number keeps a rule
   under it because it is a link, but a hairline one that only turns gold
   when you touch it. The signature sits on its own line under a hairline
   instead of behind a gold post, so the row above it has exactly two
   things in it and one baseline to sit on. */
.page-about .ab-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(22px, 2.6vw, 34px) clamp(28px, 3.4vw, 56px);
    margin-top: clamp(38px, 4vw, 60px);
    padding: clamp(24px, 2.7vw, 36px) clamp(24px, 2.9vw, 40px);
    border: 1px solid var(--sd-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 38px -28px rgba(12, 52, 92, .5);
}

.page-about .ab-lic__label {
    position: relative;
    margin: 0;
    padding-top: clamp(14px, 1.5vw, 19px);
    font-family: quasimoda, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--bx-meta, #8a9aa8);
}

/* the site's own mark for "a new thing starts here", drawn once */
.page-about .ab-lic__label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 3px;
    background: var(--sd-gold);
}

.page-about .ab-lic__no {
    margin: 7px 0 0;
}

.page-about .ab-lic__no a {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--sd-line);
    font-family: var(--sd-slab);
    font-weight: 400;
    font-size: clamp(20px, 1.9vw, 27px);
    line-height: 1.2;
    color: var(--sd-navy);
    text-decoration: none;
    transition: color .3s var(--sd-ease), border-color .3s var(--sd-ease);
}

.page-about .ab-lic__no a:hover,
.page-about .ab-lic__no a:focus-visible {
    color: var(--sd-blue);
    border-bottom-color: #daad4c;
}

.page-about .ab-marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(18px, 2.2vw, 30px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-about .ab-marks li {
    margin: 0;
    padding: 0;
}

.page-about .ab-marks li::before {
    content: none;
}

/* one height for both, so a 2.6:1 seal and a 4.4:1 bar read as a pair
   rather than as two pictures that happened to land side by side */
.page-about .ab-marks img {
    display: block;
    width: auto;
    height: 40px;
    max-width: 100%;
    object-fit: contain;
}

.page-about .ab-sign {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: clamp(18px, 2vw, 26px);
    border-top: 1px solid var(--sd-line);
    font-family: var(--sd-slab);
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.58;
    color: var(--sd-ink);
}

.page-about .ab-sign strong {
    font-weight: 400;
}

.page-about .ab-sign strong:first-child {
    display: inline-block;
    margin-bottom: 2px;
    font-size: 1.12em;
    color: var(--sd-navy);
}

/* ---------- narrow ---------- */
@media (max-width: 1100px) {
    .page-about .ab-cols,
    .page-about .ab-set {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .page-about .ab-cols,
    .page-about .ab-set,
    .page-about .ab-foot {
        grid-template-columns: minmax(0, 1fr);
    }

    /* One column, so the card centres as a whole. Half of it centred and
       half left-packed is the state it was already in and the reason the
       marks looked stranded; a credential read down the middle is the one
       arrangement where the label, the number, the two marks and the name
       all share an axis. */
    .page-about .ab-foot {
        justify-items: center;
        text-align: center;
    }

    .page-about .ab-lic__label::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .page-about .ab-marks {
        justify-content: center;
    }

    .page-about .ab-sign {
        width: 100%;
    }

    .page-about .content--service--detail::before {
        opacity: .045;
        right: -26%;
        width: min(80vw, 440px);
    }
}

/* Benefits composition. Typography remains inherited from the site. */

.benefits-editorial {
    overflow: hidden;
    /* The gaps were set for a page with far less in it: 124px of air before
       the first line and 178px between one section and the next, so the
       reader crossed a blank screen between every heading. Roughly halved —
       the sections still read as separate and the page holds together. */
    padding: clamp(44px, 4.6vw, 74px) 0 clamp(50px, 5.2vw, 82px);
    background: #fff;
}

.benefits-editorial *,
.benefits-editorial *::before,
.benefits-editorial *::after {
    box-sizing: border-box;
}

.benefits-editorial h2 {
    margin: 0;
    color: var(--cc-navy);
}

.benefits-editorial p,
.benefits-editorial li {
    color: #4f626c;
    line-height: 1.72;
}

.benefits-editorial a {
    color: var(--cc-blue);
    text-decoration-color: var(--cc-cyan);
    text-underline-offset: 3px;
}

/* Opening: the brand leaf sits in its own visual field, clear of the copy. */
.benefits-editorial__intro {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    /* a floor the content rarely reached, so the block padded itself */
    min-height: 0;
}

.benefits-editorial__intro::after {
    content: none;
}

.benefits-editorial__intro-copy {
    position: relative;
    z-index: 2;
    grid-column: 1 / 8;
}

.benefits-editorial__intro-copy h2 {
    max-width: 18ch;
    margin-bottom: clamp(20px, 2.2vw, 32px);
}

.benefits-editorial__prose {
    max-width: 700px;
}

.benefits-editorial__prose p {
    margin: 0 0 24px;
}

.benefits-editorial__prose p:first-child {
    max-width: 620px;
    color: var(--cc-navy);
}

.benefits-editorial__prose p:last-child {
    margin-bottom: 0;
}

.benefits-editorial__leaf {
    position: relative;
    z-index: 1;
    grid-column: 9 / 13;
    width: min(100%, 360px);
    margin: 0 auto;
}

.benefits-editorial__leaf::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 180, 213, .09), rgba(255, 255, 255, 0) 68%);
}

.benefits-editorial__leaf img {
    display: block;
    width: 100%;
    height: auto;
    opacity: .14;
    mix-blend-mode: multiply;
}

/* Offer: a calm, aligned set with one consistent visual marker. */
.benefits-editorial__offer {
    position: relative;
    margin-top: clamp(46px, 4.8vw, 76px);
}

.benefits-editorial__offer::before {
    content: none;
}

.benefits-editorial__offer > h2 {
    position: relative;
    z-index: 1;
    margin-bottom: clamp(22px, 2.4vw, 34px);
}

.benefits-editorial__offer-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(26px, 2.8vw, 40px) clamp(34px, 4.4vw, 72px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.benefits-editorial__offer-list li {
    position: relative;
    padding-left: 30px;
}

.benefits-editorial__offer-list li::before {
    content: '';
    position: absolute;
    top: .58em;
    left: 2px;
    width: 10px;
    height: 10px;
    background: var(--cc-cyan);
    transform: rotate(45deg);
}

.benefits-editorial__offer-list strong,
.benefits-editorial__offer-list span,
.benefits-editorial__trust-list strong,
.benefits-editorial__trust-list span {
    display: block;
}

.benefits-editorial__offer-list strong,
.benefits-editorial__trust-list strong {
    margin-bottom: 9px;
    color: var(--cc-navy);
}

/* Trust: three reasons share one baseline above their accreditations. */
.benefits-editorial__trust {
    position: relative;
    margin-top: clamp(48px, 5vw, 80px);
}

.benefits-editorial__trust::before {
    content: none;
}

.benefits-editorial__trust-heading,
.benefits-editorial__trust-list,
.benefits-editorial__trust-footer {
    position: relative;
    z-index: 1;
}

.benefits-editorial__trust-heading {
    margin-bottom: clamp(24px, 2.6vw, 38px);
}

.benefits-editorial__trust-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 2.8vw, 42px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.benefits-editorial__trust-list li {
    position: relative;
    padding-left: 30px;
}

.benefits-editorial__trust-list li::before {
    content: '';
    position: absolute;
    top: .58em;
    left: 2px;
    width: 11px;
    height: 11px;
    background: var(--cc-cyan);
    transform: rotate(45deg);
}

/* The closing line and the two marks, given the shell the About page's
   credential block wears. That page carries a white card on tinted paper;
   this section's ground is white, so the fill and the paper swap — same
   hairline, same ten-pixel corner, same one object rather than a line of
   type with two logos loose beside it. */
.benefits-editorial__trust-footer {
    display: grid;
    grid-template-columns: minmax(0, 620px) auto;
    gap: clamp(28px, 3.6vw, 64px);
    justify-content: space-between;
    align-items: center;
    margin-top: clamp(36px, 3.8vw, 58px);
    padding: clamp(24px, 2.7vw, 36px) clamp(24px, 2.9vw, 40px);
    border: 1px solid #dde5ec;
    border-radius: 10px;
    background: #f5f8f9;
}

.benefits-editorial__closing {
    margin: 0;
    color: var(--cc-navy) !important;
}

.benefits-editorial__marks {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(18px, 2.2vw, 30px);
}

/* one height for both, as on the About page: a 2.6:1 seal and a 4.4:1 bar
   free-sized under a shared max-height are two pictures, not a pair */
.benefits-editorial__marks img {
    display: block;
    width: auto;
    height: 40px;
    max-width: 100%;
    object-fit: contain;
}

.benefits-editorial__marks a {
    display: block;
}

@media (max-width: 1050px) {
    .benefits-editorial__intro-copy {
        grid-column: 1 / 9;
    }

    .benefits-editorial__leaf {
        grid-column: 10 / 13;
    }

    .benefits-editorial__trust-list {
        gap: 42px;
    }

    .benefits-editorial__trust-footer {
        grid-template-columns: 1fr;
    }

    .benefits-editorial__marks {
        justify-content: flex-start;
    }
}

@media (max-width: 780px) {
    .benefits-editorial {
        padding: 56px 0 78px;
    }

    .benefits-editorial__intro {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: 0;
    }

    .benefits-editorial__intro-copy,
    .benefits-editorial__leaf {
        grid-column: 1;
    }

    /* Stacked, the mark was given a row of its own: 52px of air, then a
       230px leaf at 14% opacity sitting against the right edge with the
       rest of the row empty. A watermark cannot carry a row — at that
       weight the row reads as a gap the page forgot to fill.

       It goes behind the copy instead, where it was on a wide screen: out
       of the flow, off the top-right corner, bleeding past the container
       and clipped at the page edge by .benefits-editorial's own overflow.
       The heading is set to 18ch, so the space it takes was empty anyway,
       and the intro is one block again rather than a block and a gap. */
    .benefits-editorial__leaf {
        position: absolute;
        z-index: 0;
        top: -8px;
        right: -16%;
        width: min(62vw, 250px);
        margin: 0;
        pointer-events: none;
    }

    .benefits-editorial__offer,
    .benefits-editorial__trust {
        margin-top: 48px;
    }

    .benefits-editorial__offer > h2,
    .benefits-editorial__trust-heading {
        margin-bottom: 26px;
    }

    .benefits-editorial__offer-list {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .benefits-editorial__trust-list {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .benefits-editorial__trust-footer {
        margin-top: 34px;
        justify-items: center;
        text-align: center;
    }

    .benefits-editorial__marks {
        justify-content: center;
    }
}

/* =========================================================
   FAQ (.page-faqs)
   ---------------------------------------------------------
   The blog index's card, with an answer folded inside it.

   These two pages do the same job — a long library the reader
   arrives at with a situation rather than a browsing mood —
   and they already share the finder at the top. They should
   not then part company over how a row looks. So the entry is
   the blog's row exactly: white paper, a hairline, a
   ten-pixel corner, the topic in gold caps above the title,
   the title in the slab face in navy, and a gold edge with a
   blue title under the cursor.

   One thing differs, because one thing genuinely differs: a
   blog row goes somewhere, an FAQ row opens. So the row wears
   a chevron and the answer unfolds under a hairline inside
   the same card, rather than the row being a link.

   Gone with the old design: the cyan lozenge, the indent that
   cleared it, and the big blue question. They were built for
   an entry that ran across the page with rules between the
   entries; inside a card they were three ornaments competing
   in a box the width of a phone.
   ========================================================= */

.page-faqs {
    --faq-gold: #daad4c;
    --faq-line: #e5edf3;
}

/* ---------- the ground: the blog index's field ---------- */
#help {
    padding: clamp(38px, 4.2vw, 68px) 0 clamp(50px, 5.6vw, 88px);
    background: linear-gradient(180deg, #fbfdfe 0%, var(--bx-foot) 100%);
}

/* both seams are cut in the colour of the field they hand over to */
.page-faqs .section--title::after {
    background: #fbfdfe;
}

.page-faqs .section--cta.cta--close::before {
    background: var(--bx-foot);
}

/* ---------- the notice ----------
   No box, no rule around it, no tint. It runs across the full width in
   columns instead, so a hundred words of fine print take a band rather than
   a long flat strip with the page empty beside it. */
#help .faq-notice {
    margin: 0 0 clamp(26px, 2.8vw, 40px);
    columns: 3;
    column-gap: clamp(26px, 3vw, 54px);
    column-rule: 1px solid var(--faq-line);
    color: #5b6d7a;
    font-size: clamp(14px, 1.02vw, 15px);
    line-height: 1.75;
    text-wrap: pretty;
}

/* ---------- the entry: the blog index's card ---------- */
.faq-item {
    position: relative;
    padding: clamp(14px, 1.5vw, 19px) clamp(16px, 1.7vw, 22px);
    border: 1px solid var(--bx-line);
    border-radius: 10px;
    background: #fff;
    transition: border-color .2s ease;
}

.faq-item + .faq-item {
    margin-top: 8px;
}

/* the filter can hide everything above a row; it is the first one then */
.faq-item.is-first {
    margin-top: 0;
}

.faq-item:hover,
.faq-item:focus-within {
    border-color: var(--faq-gold);
}

.faq-item:focus-within {
    outline: 2px solid var(--cc-orange);
    outline-offset: 3px;
}

/* a deep link should say which card it landed on */
.faq-item:target {
    border-color: var(--faq-gold);
}

/* the topic, set exactly as the blog sets its own */
#help .faq-item__topic {
    margin: 0 0 6px;
    /* the handle is in the corner above it */
    padding: 0 26px 0 0;
    color: var(--bx-ink-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* ---------- the question row is the control ----------
   The heading lives in the <summary>, so it is painted whether the answer is
   open or shut — which is what makes a deep link to a question still land on
   it. The handle carries no words: forty labelled buttons down a page are
   forty more things to read past.

   The summary is a plain block now. The handle used to ride at the end of
   the question's first line, which put it in a different place on every
   card — level with the text on a one-line question, stranded halfway down
   a three-line one. Pinned to the card's own top corner it lands in the same
   place on all forty, on the topic's line, and the question keeps the full
   width of the card underneath. */
.faq-item__tab {
    display: block;
    list-style: none;
    cursor: pointer;
}

.faq-item__tab::-webkit-details-marker {
    display: none;
}

#help .faq-item__tab > h2 {
    max-width: 68ch;
    margin: 0;
    font-family: museo-slab, "Museo Slab W00 300", Georgia, "Times New Roman", serif;
    font-weight: 300;
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.34;
    /* The blog sets its titles in navy because there the row is a link and
       the whole card is one run of text. A card here holds two voices — the
       question and the answer under it — and at navy against #4a5b6b prose
       the question read as the first paragraph rather than the heading of
       the rest. In the site's blue there is no mistaking which is which. */
    color: var(--cc-blue);
    text-wrap: pretty;
    scroll-margin-top: calc(var(--nav-h) + 20px);
    transition: color .2s ease;
}

/* the question's own box, so the finder can mark the text inside it */
#help .faq-item__q {
    min-width: 0;
}

.faq-item:hover .faq-item__tab > h2,
.faq-item:focus-within .faq-item__tab > h2 {
    color: var(--cc-navy);
}

/* Drawn, not typed, and unhoused — the same bare mark the blog uses. It sits
   in the card's corner, on the topic's line: the card is the positioned box,
   so the offsets are the card's own padding and the mark lands on the same
   pixel whatever the question wraps to. Clicks on it belong to the <summary>
   it is generated from, so the corner opens the answer. */
.faq-item__tab::after {
    content: '';
    position: absolute;
    top: calc(clamp(14px, 1.5vw, 19px) + 2px);
    right: clamp(16px, 1.7vw, 22px);
    width: 9px;
    height: 9px;
    border-right: 1.5px solid var(--cc-blue);
    border-bottom: 1.5px solid var(--cc-blue);
    transform: rotate(45deg);
    transition: transform .25s cubic-bezier(.22, .78, .3, 1), border-color .2s ease;
}

.faq-item__more[open] > .faq-item__tab::after {
    top: calc(clamp(14px, 1.5vw, 19px) + 5px);
    transform: rotate(-135deg);
}

.faq-item:hover .faq-item__tab::after,
.faq-item:focus-within .faq-item__tab::after {
    border-right-color: var(--faq-gold);
    border-bottom-color: var(--faq-gold);
}

.faq-item__tab:focus-visible {
    outline: none;
}

/* ---------- the answer, inside the same card ---------- */
.faq-item__rest {
    max-width: 78ch;
    margin-top: clamp(12px, 1.3vw, 16px);
    padding-top: clamp(12px, 1.3vw, 16px);
    border-top: 1px solid var(--bx-line);
    animation: faq-open .24s ease both;
}

@keyframes faq-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

#help .faq-item__rest > :first-child {
    margin-top: 0;
}

#help .faq-item__rest > :last-child {
    margin-bottom: 0;
}

/* ---------- three inks, three steps ----------
   Hue alone was not enough. The question in the site's blue against #4a5b6b
   prose measured 1.02:1 apart in luminance — different colours, the same
   weight of grey, which is no difference at all to anyone reading in
   sunlight or without colour. So the answer steps down away from it: the
   opening sentence sits below the question, the prose below that, and the
   question is the darkest thing in the card as well as the only slab face
   and the only blue.

     question   #005ca3   6.86:1 on white
     lead       #54677a   5.84:1
     prose      #5c6f81   5.19:1

   Every step still clears 4.5:1 on its own. */
#help .faq-item__lead {
    margin: 0 0 .9em;
    color: #54677a;
    font-size: clamp(15px, 1.1vw, 16.5px);
    line-height: 1.62;
    text-wrap: pretty;
}

#help .faq-item__lead strong,
#help .faq-item__lead b {
    color: var(--cc-navy);
}

/* ---------- the prose of an answer ---------- */
#help .faq-item p,
#help .faq-item li {
    color: #5c6f81;
    font-size: clamp(14.5px, 1.06vw, 15.5px);
    line-height: 1.7;
}

#help .faq-item p {
    margin: 0 0 .9em;
}

#help .faq-item strong,
#help .faq-item b {
    color: var(--cc-navy);
    font-weight: 600;
}

#help .faq-item h3 {
    margin: 1.4em 0 .5em;
    font-family: museo-slab, "Museo Slab W00 300", Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: clamp(15.5px, 1.14vw, 17px);
    color: var(--cc-blue);
}

#help .faq-item h3 strong {
    font-weight: 400;
}

#help .faq-item ul {
    margin: 0 0 1em;
    padding-left: 1.2em;
}

#help .faq-item li {
    margin-bottom: .5em;
}

#help .faq-item li::marker {
    color: var(--cc-cyan);
}

#help .faq-item ul ul {
    margin-top: .5em;
}

#help .faq-item a {
    color: var(--cc-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#help .faq-item a:hover,
#help .faq-item a:focus-visible {
    color: var(--cc-navy);
}

#help .faq-item img {
    max-width: 100%;
    height: auto;
    margin: .6em 0;
    border-radius: 6px;
}

/* ---------- narrow ----------
   The card is already the width of the screen, so the only thing that has to
   give is the fine print's column count and a little of the padding. */
@media (max-width: 1100px) {
    #help .faq-notice {
        columns: 2;
    }
}

@media (max-width: 700px) {
    #help .faq-notice {
        columns: 1;
    }

    #help .faq-item__tab > h2 {
        font-size: 16.5px;
    }

    .faq-item__tab::after {
        width: 8px;
        height: 8px;
    }

    #help .faq-item__topic {
        font-size: 10.5px;
        letter-spacing: .12em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item,
    #help .faq-item__tab > h2,
    .faq-item__tab::after {
        transition: none;
    }

    .faq-item__rest {
        animation: none;
    }
}

/* =========================================================
   Contact (.page-contact)
   ---------------------------------------------------------
   No box. The page is a lit field and everything stands
   directly on it.

     · The field. Two lights and nothing else — the site's own
       masthead fill opening from the top right, and the shaft
       the homepage lays across its certificate, crossing at
       the -2.5deg every seam here is cut at. No speckle, no
       vignette, no texture: three or four overlapping washes
       is what makes a dark ground look dirty, so there are
       two, and they are wide and smooth.

     · Two halves, no container. The firm's coordinates take
       the left of the field in white, the message takes the
       right, and a single gold hairline runs between them.
       Nothing is framed.

     · The fields are white. On a dark ground a white field
       is the brightest thing on the page, which is where the
       page wants the eye — and it is filled, not glass, so
       what someone types is black on white at full contrast.
   ========================================================= */

.page-contact {
    --ct-ease: cubic-bezier(.22, .78, .3, 1);
    --ct-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
    --ct-gold: #d8b565;
    --ct-room-top: #0a3a5f;
}

/* the band hands the page over to the field, cut in the field's own colour */
.page-contact .section--title::after {
    background: var(--ct-room-top);
}

/* the closing band cuts its wedge in the floor of the field */
.page-contact .section--cta.cta--close::before {
    background: #1b2846;
}

/* ---------- the field ---------- */
.page-contact .content--service--detail {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(52px, 5.4vw, 88px) 0 clamp(64px, 6.6vw, 106px);
    background:
        radial-gradient(122% 82% at 82% -6%, rgba(0, 184, 220, .34), rgba(0, 184, 220, 0) 58%),
        linear-gradient(180deg,
            var(--ct-room-top) 0,
            #0c3355 36%,
            #152c4a 72%,
            #1b2846 100%);
}

/* the shaft — the homepage's own light, at the site's own angle */
.page-contact .content--service--detail::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -28%;
    right: -28%;
    top: 52%;
    height: min(50vw, 500px);
    transform: translateY(-50%) rotate(-2.5deg);
    pointer-events: none;
    filter: blur(44px);
    background: linear-gradient(90deg,
        rgba(0, 92, 163, 0),
        rgba(0, 150, 205, .16) 26%,
        rgba(0, 190, 232, .20) 50%,
        rgba(0, 150, 205, .16) 74%,
        rgba(0, 92, 163, 0));
}

.page-contact .content--service--detail > .container {
    position: relative;
    z-index: 1;
}

/* ---------- two halves, nothing round them ---------- */
.page-contact .ct-box {
    display: grid;
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    align-items: start;
    gap: clamp(30px, 4vw, 76px);
}

/* the one line between the halves */
.page-contact .ct-panel {
    position: relative;
    padding-right: clamp(0px, 1vw, 18px);
}

.page-contact .ct-panel::after {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: clamp(-15px, -2vw, -38px);
    width: 1px;
    background: linear-gradient(180deg,
        rgba(216, 181, 101, 0),
        rgba(216, 181, 101, .55) 14%,
        rgba(216, 181, 101, .55) 86%,
        rgba(216, 181, 101, 0));
}

/* ---------- the coordinates ---------- */
.page-contact .ct-set {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.2vw, 30px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-contact .ct-entry {
    margin: 0;
    padding: 0;
}

.page-contact .ct-entry + .ct-entry {
    padding-top: clamp(20px, 2.2vw, 30px);
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.page-contact .ct-entry::before,
.page-contact .ct-entry::marker {
    content: none;
}

/* the key: a monospace small cap, the way a field is keyed on a form */
.page-contact .ct-key {
    margin: 0 0 10px;
    font-family: var(--ct-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .2em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--ct-gold);
}

.page-contact .ct-key strong {
    font-weight: inherit;
}

/* the same key, used inside a line rather than over one */
.page-contact .ct-value .ct-key,
.page-contact .ct-minor .ct-key {
    display: inline-block;
    margin: 0 9px 0 0;
    vertical-align: baseline;
}

.page-contact .ct-address {
    margin: 0;
    font-style: normal;
    font-family: var(--sd-slab);
    font-size: clamp(16px, 1.28vw, 19px);
    line-height: 1.52;
    color: #fff;
}

.page-contact .ct-value {
    margin: 0;
    font-family: var(--sd-slab);
    font-size: clamp(16px, 1.28vw, 19px);
    line-height: 1.52;
    color: #fff;
    overflow-wrap: anywhere;
}

.page-contact .ct-value a {
    color: inherit;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 0 rgba(216, 181, 101, .6);
    transition: color .3s var(--ct-ease), box-shadow .3s var(--ct-ease);
}

.page-contact .ct-value a:hover,
.page-contact .ct-value a:focus-visible {
    color: #ffe3a6;
    box-shadow: inset 0 -2px 0 0 var(--ct-gold);
}

.page-contact .ct-minor {
    margin: 10px 0 0;
    font-size: clamp(14px, 1.05vw, 15px);
    line-height: 1.6;
    color: rgba(224, 238, 250, .84);
}

/* ---------- the message ---------- */
.page-contact .ct-title {
    margin: 0 0 clamp(22px, 2.4vw, 34px);
    font-family: var(--sd-slab);
    font-weight: 400;
    font-size: clamp(25px, 2.5vw, 38px);
    line-height: 1.14;
    color: #fff;
    text-wrap: balance;
}

.page-contact .ct-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 26px);
}

.page-contact .ct-field--wide {
    grid-column: 1 / -1;
}

.page-contact .ct-field label {
    display: block;
    margin-bottom: 9px;
    font-family: var(--ct-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .2em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--ct-gold);
}

/* white, and filled: the brightest thing on the page, which is where the
   page wants the eye */
.page-contact .ct-field input,
.page-contact .ct-field textarea {
    display: block;
    width: 100%;
    height: 56px;
    padding: 0 17px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    background: #fff;
    color: var(--sd-navy);
    font-family: quasimoda, sans-serif;
    font-size: 15.5px;
    line-height: 1.5;
    box-shadow: 0 16px 30px -22px rgba(2, 12, 26, .9);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .25s var(--ct-ease),
                box-shadow .25s var(--ct-ease);
}

.page-contact .ct-field textarea {
    height: clamp(140px, 13vw, 190px);
    padding: 16px 17px;
    resize: vertical;
}

.page-contact .ct-field input::placeholder,
.page-contact .ct-field textarea::placeholder {
    color: #9dadb9;
}

.page-contact .ct-field input:hover,
.page-contact .ct-field textarea:hover {
    border-color: rgba(255, 255, 255, .5);
}

.page-contact .ct-field input:focus,
.page-contact .ct-field textarea:focus {
    outline: 0;
    border-color: var(--cc-cyan);
    box-shadow: 0 0 0 3px rgba(0, 180, 213, .28),
                0 0 34px -8px rgba(0, 206, 255, .5);
}

.page-contact .ct-form button {
    display: block;
    margin: clamp(22px, 2.4vw, 32px) 0 0 auto;
    padding-left: 2.5em;
    padding-right: 2.5em;
    cursor: pointer;
}

.page-contact .form-note {
    margin-top: 18px;
    border-color: rgba(0, 180, 213, .45);
    background: rgba(0, 180, 213, .14);
    color: #dcecf8;
}

/* ---------- narrow ---------- */
@media (max-width: 900px) {
    .page-contact .ct-box {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(30px, 6vw, 46px);
    }

    /* the line turns and sits under the coordinates */
    .page-contact .ct-panel {
        padding-right: 0;
        padding-bottom: clamp(28px, 5vw, 40px);
    }

    .page-contact .ct-panel::after {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg,
            rgba(216, 181, 101, .55),
            rgba(216, 181, 101, .55) 58%,
            rgba(216, 181, 101, 0));
    }

    .page-contact .ct-set {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(20px, 3.4vw, 30px);
    }

    .page-contact .ct-entry + .ct-entry {
        padding-top: 0;
        border-top: 0;
    }

    .page-contact .ct-entry:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .page-contact .ct-fields,
    .page-contact .ct-set {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-contact .ct-form button {
        width: 100%;
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-contact .ct-field input,
    .page-contact .ct-field textarea {
        transition: none;
    }
}


/* =========================================================
   The finder  (.bx-find) — blogs and FAQ
   ---------------------------------------------------------
   One instrument, two libraries. Sixty-one articles and forty
   questions have the same problem: the reader arrives with a
   situation, not a browsing mood, and neither page can be read
   end to end to find out whether it answers them.

   So both open with the same object and it works the same way
   on both — a field, a row of topics carrying live counts, and
   a running total. Learn it once.

   The brand mark stands in it at the right. The artwork is
   drawn cropped at its own right edge, so putting that edge on
   the panel's edge is what makes the crop read as a bleed
   rather than a mistake.
   ========================================================= */
.bx-find {
    position: relative;
    overflow: hidden;
    margin: 0 0 clamp(20px, 2.2vw, 30px);
    border: 1px solid var(--bx-line);
    border-radius: 10px;
    background: #fff;
}

.bx-find__mark {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 0;
    width: min(30%, 230px);
    transform: translateY(-50%);
    pointer-events: none;
}

.bx-find__mark::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -26%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 180, 213, .16), rgba(255, 255, 255, 0) 68%);
}

.bx-find__mark img {
    display: block;
    width: 100%;
    height: auto;
}

.bx-find__body {
    position: relative;
    z-index: 1;
    /* the mark owns the right end of the panel; the controls stop short of it */
    max-width: 78%;
    padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 28px);
}

/* ---------- the field ----------
   The glass is drawn from two pseudo-elements rather than shipped as an
   icon file: a circle and a handle, in the same hairline the panel is
   built from. */
.bx-find__field {
    position: relative;
    display: block;
}

.bx-find__field::before {
    content: '';
    position: absolute;
    top: 50%;
    left: clamp(16px, 1.6vw, 21px);
    width: 12px;
    height: 12px;
    margin-top: -8px;
    border: 1.5px solid var(--bx-meta);
    border-radius: 50%;
    pointer-events: none;
}

.bx-find__field::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(clamp(16px, 1.6vw, 21px) + 10px);
    width: 6px;
    height: 1.5px;
    margin-top: 4px;
    background: var(--bx-meta);
    transform: rotate(45deg);
    transform-origin: left center;
    pointer-events: none;
}

.page-blogs .bx-find__input,
.page-faqs .bx-find__input {
    display: block;
    width: 100%;
    padding: clamp(13px, 1.3vw, 17px) clamp(16px, 1.6vw, 21px);
    padding-left: calc(clamp(16px, 1.6vw, 21px) + 26px);
    border: 1px solid var(--bx-line);
    border-radius: 10px;
    background: #fff;
    color: var(--cc-navy);
    font-family: inherit;
    font-size: clamp(15px, 1.1vw, 16.5px);
    line-height: 1.4;
    transition: border-color .25s ease;
    /* iOS rounds and insets a type=search field on its own terms */
    -webkit-appearance: none;
    appearance: none;
}

.page-blogs .bx-find__input::placeholder,
.page-faqs .bx-find__input::placeholder {
    color: var(--bx-meta);
    opacity: 1;
}

.page-blogs .bx-find__input:hover,
.page-faqs .bx-find__input:hover {
    border-color: #cfdce7;
}

.page-blogs .bx-find__input:focus,
.page-faqs .bx-find__input:focus {
    border-color: #daad4c;
    outline: 2px solid var(--cc-orange);
    outline-offset: 2px;
}

/* ---------- the topics ----------
   Pills, not cards: a filter is a control, and giving it the ten-pixel
   corner every card on these pages wears would say it is one of them. */
.bx-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: clamp(14px, 1.5vw, 19px);
}

.page-blogs .bx-topic,
.page-faqs .bx-topic {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 8px 15px 9px;
    border: 1px solid var(--bx-line);
    border-radius: 999px;
    background: #fff;
    color: var(--cc-navy);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.15;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}

.bx-topic__n {
    color: var(--bx-meta);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    transition: color .2s ease;
}

.page-blogs .bx-topic:hover,
.page-faqs .bx-topic:hover {
    border-color: #daad4c;
}

.page-blogs .bx-topic:focus-visible,
.page-faqs .bx-topic:focus-visible {
    outline: 2px solid var(--cc-orange);
    outline-offset: 2px;
}

.page-blogs .bx-topic.is-on,
.page-faqs .bx-topic.is-on {
    border-color: var(--cc-navy);
    background: var(--cc-navy);
    color: #fff;
}

.bx-topic.is-on .bx-topic__n {
    color: rgba(226, 241, 252, .72);
}

/* a topic the current text cannot reach: still readable, plainly out of play */
.page-blogs .bx-topic.is-empty,
.page-faqs .bx-topic.is-empty {
    opacity: .38;
    cursor: default;
}

/* ---------- the running total ---------- */
.page-blogs .bx-count,
.page-faqs .bx-count {
    margin: 0 0 clamp(14px, 1.5vw, 20px);
    color: var(--bx-meta);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* an empty result is an instruction, not an apology */
.page-blogs .bx-empty,
.page-faqs .bx-empty {
    margin: 0 0 clamp(20px, 2.2vw, 30px);
    padding: clamp(15px, 1.5vw, 20px) clamp(16px, 1.6vw, 22px);
    border: 1px dashed var(--bx-line);
    border-radius: 10px;
    color: #5b6d7a;
    font-size: clamp(14.5px, 1.06vw, 15.5px);
    line-height: 1.5;
}

/* what the filter matched, marked where it was found, so the row says why it
   is here — the site's gold, at the weight of a highlighter not an ink */
.page-blogs .bx-find-hit,
.page-faqs .bx-find-hit {
    padding: 0 .12em;
    border-radius: 2px;
    background: rgba(218, 173, 76, .34);
    color: inherit;
}

/* ---------- narrow ----------
   The mark stops being a bleed and becomes a wash the controls sit over. */
@media (max-width: 860px) {
    .bx-find__body {
        max-width: none;
    }

    .bx-find__mark {
        width: min(46%, 200px);
        opacity: .16;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-blogs .bx-find__input,
    .page-faqs .bx-find__input,
    .page-blogs .bx-topic,
    .page-faqs .bx-topic,
    .bx-topic__n {
        transition: none;
    }
}

/* =========================================================
   Blogs (.page-blogs)
   ---------------------------------------------------------
   Who is on this page, and what do they want? Almost always
   an American who has just found out a parent or grandparent
   was Canadian, and who wants to know whether that still
   counts and whether the law has moved. They do not want a
   blog. They want the one article about their situation.

   Two earlier passes filed the archive by year. Measured
   against that reader, the year is worthless: forty-six of
   the sixty-one carry one migration date, so "2023" is not a
   period, it is an artefact — a structural device encoding
   nothing true. And a text box over headlines is no better:
   `descent` — the firm's own core service — appears in two of
   sixty-one headlines, `certificate` in one, `naturalization`
   in none, while `citizenship` matches thirty-three. Type the
   word you actually care about and the page goes blank.

   So the filing is by topic, and the topic is real data on
   every entry rather than a heading over a block. Six topics
   cover all sixty-one. The finder searches the topic as well
   as the headline, which is what makes `descent` return eight
   instead of two, and each topic carries a live count that
   recomputes as you type: before you commit to a word, the
   chip row already tells you where in the library it lands.
   That count is the one thing on this page worth remembering.

   Everything else is held quiet. One card shell, one column,
   sixty-one rows scanned in a single vertical sweep instead
   of a three-column zigzag. No shadows, no lifts, no arrows.
   ========================================================= */

.page-blogs,
.page-faqs,
.page-post {
    --bx-line: #e1e9f0;
    --bx-meta: #8a9aa8;
    /* gold is a mark, not an ink: at 11px on white the brand swatch is
       unreadable, so small type takes the darker sibling the FAQ page uses */
    --bx-ink-gold: #7a5c17;
    --bx-foot: #f4f9fc;
}

/* moon.css gives #blog a flat 1em, written for a two-column layout with a
   sidebar this page has not had for a long time */
.page-blogs #blog {
    padding: clamp(38px, 4.2vw, 68px) 0 clamp(50px, 5.6vw, 88px);
    background: linear-gradient(180deg, #fbfdfe 0%, var(--bx-foot) 100%);
}

/* both seams are cut in the colour of the field they hand over to, the way
   the services and contact pages cut theirs — moon.css cuts the band's wedge
   in a flat #f5f8f9 written for a white page */
.page-blogs .section--title::after {
    background: #fbfdfe;
}

.page-blogs .section--cta.cta--close::before {
    background: var(--bx-foot);
}

.page-blogs [hidden],
.page-faqs [hidden] {
    display: none !important;
}

/* =========================================================
   The list
   ---------------------------------------------------------
   One column below 992px, two above it. Sixty-one headlines
   stacked singly run past five thousand pixels: the reader
   scrolls far more than they scan. Grid rows stretch, so the
   two cards on a row end level with each other — the ragged
   edge a second column is usually blamed for comes from
   unequal heights, not from the column itself.
   ========================================================= */
.bx-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

/* ---------- two columns ---------- */
@media (min-width: 992px) {
    .bx-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bx-item {
    position: relative;
    padding: clamp(14px, 1.5vw, 19px) clamp(16px, 1.7vw, 22px);
    border: 1px solid var(--bx-line);
    border-radius: 10px;
    background: #fff;
    transition: border-color .2s ease;
}

.bx-item:hover,
.bx-item:focus-within {
    border-color: #daad4c;
}

.bx-item:focus-within {
    outline: 2px solid var(--cc-orange);
    outline-offset: 3px;
}

/* the topic leads and the date trails: which of the two a reader needs is
   not close, and forty-six of these dates are the same day */
.page-blogs .bx-item__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 6px;
    font-size: 11px;
    line-height: 1.3;
}

.bx-item__topic {
    color: var(--bx-ink-gold);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.bx-item__meta time {
    flex: none;
    color: var(--bx-meta);
    font-variant-numeric: tabular-nums;
}

.page-blogs .bx-item__title {
    max-width: 68ch;
    margin: 0;
    font-family: museo-slab, "Museo Slab W00 300", Georgia, "Times New Roman", serif;
    font-weight: 300;
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.34;
    color: var(--cc-navy);
    text-wrap: pretty;
    scroll-margin-top: calc(var(--nav-h) + 20px);
    transition: color .2s ease;
}

.page-blogs .bx-item__title a {
    color: inherit;
    text-decoration: none;
}

/* the headline is the link; the row is its hit area */
.page-blogs .bx-item__title a::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* the row owns the focus ring, so the link does not draw a second one */
.page-blogs .bx-item__title a:focus-visible {
    outline: none;
}

.bx-item:hover .bx-item__title,
.bx-item:focus-within .bx-item__title {
    color: var(--cc-blue);
}

/* a deep link should say which row it landed on */
.bx-item:target {
    border-color: #daad4c;
}

/* ---------- narrow ---------- */
@media (max-width: 560px) {
    .page-blogs .bx-item__meta {
        flex-direction: column;
        gap: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bx-item,
    .page-blogs .bx-item__title {
        transition: none;
    }
}

/* =========================================================
   The article (.page-post)
   ---------------------------------------------------------
   This page was a CMS export in a Bootstrap column: `col-md-8`
   with nothing in the other four, so the text ran to about 900px
   — a hundred and ten characters a line — at 1rem on a 1.35
   line-height, and only above 768px did it get even that. Below
   768px it had no typography at all.

   It is set as a document now: one measure down the middle for
   the prose, and the things that are not prose — the contents,
   the four figures, the comparison, the questions — step out to
   the full sheet as objects the eye can land on. That alternation
   is what gives a nine-section article a rhythm to read by.
   ========================================================= */
.page-post #blog {
    padding: clamp(40px, 4.4vw, 72px) 0 clamp(54px, 5.8vw, 92px);
    background: linear-gradient(180deg, #fbfdfe 0%, var(--bx-foot) 100%);
}

/* both seams are cut in the colour of the field they hand over to, the way
   the blogs and FAQ pages cut theirs */
.page-post .section--title::after {
    background: #fbfdfe;
}

.page-post .section--cta.cta--close::before {
    background: var(--bx-foot);
}

/* ---------- the band ----------
   Every other page puts one or two words up here, and .section--title's
   16ch cap is cut for exactly that. A headline of eighty-eight characters
   in a 16ch column is a ten-line ribbon, which is the whole of why this
   page did not look like the rest of the site. Given a headline's measure
   it lands on three lines and the band keeps its height. */
.page-post .section--title .title {
    max-width: 26ch;
    font-size: clamp(25px, 2.5vw, 36px);
    line-height: 1.14;
}

/* the date: the gold the site marks small type with, not moon.css's 1.2rem
   slab that only ever applied above 768px */
.page-post .section--title .subtitle {
    margin: clamp(12px, 1.3vw, 18px) 0 0;
    font-size: clamp(12.5px, .95vw, 14px);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sd-gold);
}

/* anchored left, not centred. The rest of the site reads down one left
   rail — the blogs list fills its container from the left edge, the service
   page's prose starts at the same edge its aside is measured from — and a
   column centred in a 1320px container reads as a different site. The
   staggered widths below all hang off that one edge. */
.page-post .post {
    max-width: 100%;
    margin-inline: 0;
}


.page-post .post-body {
    display: flow-root;
    font-size: clamp(16.4px, 1.35vw, 20.5px);
    line-height: 1.8;
    color: var(--sd-ink);
}

/* the measure, applied to the prose only: 68 characters is where a
   line stops costing the reader the start of the next one. Everything
   that is an object rather than a sentence overrides this below. */
.page-post .post-body > * {
    max-width: 100%;
    margin-inline: 0;
}

.page-post .post-body > :first-child {
    margin-top: 0;
}

.page-post .post-body p {
    margin: 0 0 1.2em;
    text-wrap: pretty;
}

.page-post .post-body strong {
    font-weight: 600;
    color: var(--sd-navy);
}

.page-post .post-body a {
    color: var(--sd-link);
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
}

/* ---------- who wrote it, and when ---------- */
.page-post .post-meta {
    margin: 0 0 1.6em;
    padding-bottom: 1.1em;
    border-bottom: 1px solid var(--sd-line);
    font-size: .78em;
    letter-spacing: .03em;
    color: var(--bx-meta);
}

.page-post .post-lede {
    font-size: 1.1em;
    line-height: 1.62;
    color: var(--sd-navy);
}

/* ---------- headings ----------
   The gold cap is the mark the rest of the site uses to say "new
   subject" — the same one .sd-rule carries. Here it sits above the
   heading rather than across the column, so nine of them read as
   section starts instead of nine full-width cuts. */
.page-post .post-h {
    margin: clamp(30px, 3vw, 44px) 0 clamp(10px, 1.1vw, 15px);
    font-family: var(--sd-slab);
    font-weight: 400;
    font-size: clamp(21px, 1.85vw, 29px);
    line-height: 1.24;
    color: var(--sd-navy);
    text-wrap: balance;
    scroll-margin-top: calc(var(--nav-h) + 20px);
}

.page-post .post-h::before {
    content: '';
    display: block;
    width: 26px;
    height: 3px;
    margin-bottom: clamp(10px, 1vw, 13px);
    background: var(--sd-gold);
}

/* ---------- prose lists ---------- */
.page-post .post-list {
    margin: 0 0 1.4em;
    padding: 0;
    list-style: none;
}

.page-post .post-list li {
    position: relative;
    margin: 0 0 .62em;
    padding-left: 1.5em;
}

.page-post .post-list li::before {
    content: '';
    position: absolute;
    left: .2em;
    top: .68em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sd-blue);
}















/* ---------- the chips site.js builds at the head of the article ----------
   They were pointed at .content__body, which this page no longer has.

   Wrapped, not railed and not stacked — the same at every width. The rail
   this component ships with puts nine chips on a horizontal scroller, so
   two are on screen and the other seven sit behind a swipe nobody makes.
   Stacking showed all nine but spent most of a screen doing it. Wrapping
   is the one arrangement that shows every chip without either cost: they
   run side by side and take a second and third row when they need one,
   each pill still sized to its own words. */
.page-post .post-body > .section-chips {
    max-width: 100%;
    margin-bottom: clamp(18px, 2vw, 28px);
    padding-top: 0;
}

.page-post .post-body > .section-chips a {
    white-space: normal;
}

/* ---------- the four figures ----------
   They were four bullets that happened to start with a number, which
   is the one shape a reader skips. One shell, four times, and the
   number is set at the size it deserves. */
.page-post .post-stats {
    max-width: 100%;
    margin: clamp(22px, 2.4vw, 34px) 0 clamp(24px, 2.6vw, 36px);
    padding: 0;
    list-style: none;
    display: grid;
    /* two up, not four: the labels run from four words to twenty, and in a
       190px column the long one is six lines tall while the short one is two
       — a row of cards mostly full of nothing. At half the width the spread
       closes and every card carries a readable line. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.1vw, 14px);
}

.page-post .post-stat {
    display: flex;
    flex-direction: column;
    gap: .45em;
    padding: clamp(16px, 1.7vw, 22px);
    border: 1px solid var(--sd-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 34px -26px rgba(12, 52, 92, .5);
}

.page-post .post-body .post-stat__n {
    font-family: var(--sd-slab);
    font-weight: 400;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1;
    color: var(--sd-blue);
}

.page-post .post-stat__label {
    font-size: .8em;
    line-height: 1.45;
    color: var(--sd-ink);
}

/* ---------- the comparison ----------
   Three columns of prose in a table on a 360px screen cannot be made
   to fit; it scrolls in its own box instead of squeezing the page. */
.page-post .post-table {
    max-width: 100%;
    margin: clamp(22px, 2.4vw, 34px) 0 clamp(26px, 2.8vw, 38px);
    overflow-x: auto;
    border: 1px solid var(--sd-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 34px -26px rgba(12, 52, 92, .5);
}

.page-post .post-table table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: .88em;
}

.page-post .post-table th,
.page-post .post-table td {
    padding: clamp(12px, 1.3vw, 18px) clamp(13px, 1.4vw, 20px);
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}

.page-post .post-table thead th {
    background: var(--sd-paper);
    border-bottom: 1px solid var(--sd-line);
    font-family: var(--sd-slab);
    font-weight: 400;
    font-size: 1.02em;
    color: var(--sd-navy);
}

.page-post .post-table tbody tr + tr th,
.page-post .post-table tbody tr + tr td {
    border-top: 1px solid var(--sd-line);
}

.page-post .post-table tbody th {
    font-weight: 600;
    color: var(--sd-navy);
}

.page-post .post-table:focus-visible {
    outline: 2px solid var(--cc-orange);
    outline-offset: 2px;
}

/* ---------- the photograph ---------- */
/* ---------- the photograph ----------
   A 500px square cannot be a plate on a 1320px measure: sat at the foot of
   its section it was a small object flush left with eight hundred pixels of
   nothing beside it, and stretched to fill it would only be a 500px file
   printed larger than it is. So it is an inset instead — it enters after the
   table and the two closing paragraphs of the section run past it. Nothing
   that is its own object may share the line, so the headings and the blocks
   clear it. */
.page-post .post-fig {
    max-width: 100%;
    margin: clamp(28px, 3vw, 44px) 0;
}

@media (min-width: 992px) {
    .page-post .post-body > .post-fig {
        float: right;
        width: clamp(260px, 32%, 420px);
        margin: .35em 0 1.15em clamp(26px, 2.8vw, 46px);
    }

    /* a heading, a table, the figures, the questions and the notice each
       start their own line */
    .page-post .post-h,
    .page-post .post-body > .post-stats,
    .page-post .post-body > .post-table,
    .page-post .post-body > .post-qa,
    .page-post .post-body > .post-callout,
    .page-post .post-body > .post-note {
        clear: both;
    }
}

.page-post .post-fig img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 24px 44px -28px rgba(12, 52, 92, .6);
}

/* ---------- the line that asks for the file ---------- */
.page-post .post-body .post-callout {
    margin: clamp(26px, 2.8vw, 40px) 0;
    padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px);
    border: 1px solid var(--sd-line);
    border-left: 3px solid var(--sd-gold);
    border-radius: 10px;
    background: #fff;
    font-size: 1.02em;
    color: var(--sd-navy);
    box-shadow: 0 16px 34px -26px rgba(12, 52, 92, .5);
}

/* ---------- the questions ----------
   Bold paragraph, plain paragraph, six times over reads as one grey
   block. One shell each, and the question carries the weight. */
.page-post .post-qa {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(10px, 1.1vw, 14px);
    margin: clamp(6px, .8vw, 12px) 0 clamp(26px, 2.8vw, 38px);
}

.page-post .post-qa__item {
    padding: clamp(18px, 1.9vw, 26px) clamp(19px, 2vw, 28px);
    border: 1px solid var(--sd-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 34px -26px rgba(12, 52, 92, .5);
}

.page-post .post-body .post-qa__q {
    margin: 0 0 .5em;
    font-family: var(--sd-slab);
    font-size: 1.06em;
    line-height: 1.35;
    color: var(--sd-navy);
}

.page-post .post-body .post-qa__a {
    margin: 0;
    font-size: .95em;
}

/* ---------- the standing notice ---------- */
.page-post .post-body .post-note {
    margin: clamp(30px, 3.2vw, 46px) 0 0;
    padding-top: clamp(18px, 2vw, 26px);
    border-top: 1px solid var(--sd-line);
    font-size: .82em;
    line-height: 1.62;
    color: var(--bx-meta);
}

/* ---------- phones ---------- */
/* one column of questions is a column of prose again, so it takes the
   measure back rather than running the full width of the sheet */
@media (max-width: 900px) {
    .page-post .post-qa {
        grid-template-columns: minmax(0, 1fr);
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    

    .page-post .post-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- objects across the wider sheet ----------
   With the prose running the container's full width, the objects have to
   be re-cut for it: a stat card 660px wide is four words in a field of
   nothing, and two questions across at that width are the same shape the
   prose already is. Both go finer-grained instead. */
@media (min-width: 1200px) {
    .page-post .post-stats {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }

    .page-post .post-qa {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- the legal strip between 993 and 1199 ----------
   The container is 960px there and the three credentials plus the three
   links do not make one line at any spacing worth having. So the links take
   the whole line deliberately and centre on it, rather than being pushed
   off the end of the row and left hanging at its right edge. No rule above
   them: the break is the placement, not a seam to be marked. */
@media (min-width: 993px) and (max-width: 1199px) {
    footer .foot-rail .althazne {
        width: 100%;
        justify-content: center;
        margin-top: 2px;
    }
}