/* =========================================================
   site.css — Canada Passport Help
   A 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
   3. the pages, section by section

   ---------------------------------------------------------
   WHERE THE COLOURS COME FROM

   A Canadian passport is an object with a fixed palette, and
   this site is painted in it rather than in anything invented:

     the cover     oxblood, lit to a warmer red at the top
     the stamp     gold foil — the arms, the rule, the edge
     the pages     navy

   So: the masthead and the hero are the cover. Gold is the
   only display accent, and it is foil, which means it appears
   as a struck line rather than as a fill or a wash. The pages
   are the navy every dark field descends into and the footer
   is painted with. Paper is what the reading happens on.

   Three rules the whole sheet keeps to:

     · Gold never sets type on paper — 2:1, and no amount of
       weight fixes it. On paper gold is a rule, an edge or a
       mark; type that has to be read there is navy or oxblood.
     · The one cool note, --cp-sky, belongs to the chrome and
       only on a dark ground, where it clears 5.7:1. It marks
       the two things on the page a reader can independently
       verify — the licence number and the register link.
     · Shadows are cast in the cover's own ink. Nothing here
       casts a blue shadow onto a red page.
   ========================================================= */

/* ---------- 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 {
    /* the pages */
    --cp-navy: #1b2846;
    --cp-paper: #f5f8f9;
    /* the cover, lit end and deep end */
    --cp-red: #c53131;
    --cp-crimson: #811717;
    /* the cover as a solid: the functional ink on paper. 6.9:1 there,
       7.4:1 under white — it can be a link, a fill or a mark. */
    --cp-oxblood: #a32424;
    /* the stamp */
    --cp-gold: #daad4c;
    /* the one cool note. 5.7:1 on navy, 2.4:1 on paper — so it is
       allowed on the chrome's dark grounds and nowhere else. */
    --cp-sky: #5ba6f3;

    /* top strip: one step deeper than the footer navy so it reads as its own surface */
    --top-ink: #131e35;
    --top-rule: rgba(198, 162, 162, .34);
    /* the cover. The masthead and the hero share it as one box. */
    --nav-bg: linear-gradient(-135deg, #c53131 0, #811717 100%);
    /* real value written by site.js once the header has been measured */
    --nav-h: 92px;

    /* The focus ring cannot be one colour on this site: gold is 2:1 on
       paper and oxblood is 1.5:1 on the cover, so either one disappears
       on half the page. It is a variable instead, and the dark grounds
       below re-declare it. Every focus rule reads --cp-focus. */
    --cp-focus: var(--cp-oxblood);
}

/* the grounds that are painted in the cover or in the pages */
#TopDisclaimer,
header#navbar_top,
#AnaSlider,
.section--title,
#WhyUse,
#Reasons,
.page-services #Services,
.page-contact .content--service--detail,
.page-apply .ap-sign,
.mobile-cta,
footer {
    --cp-focus: var(--cp-gold);
}

/* ---------- the seam ----------
   moon.css cuts every seam at -5.5deg. That was a slash; at the width of a
   desktop the low corner sat nearly a hundred pixels below the high one and
   the band read as tilted rather than cut. The whole site is re-cut at
   -2.5deg, which is the angle a cover actually lifts at. */
.section--title::after {
    height: 4.5vw;
    transform: rotate(-2.5deg) translate(-50%, 50%);
}

#AnaSlider::after {
    height: 8vw;
    transform: rotate(-2.5deg) translate(-50%, 73%);
}

/* ---------- the foil ----------
   This is the one ornament on the sheet, and the site that gets to explain
   why the seam is there in the first place: it is the edge of a cover, and a
   cover's edge is stamped. A single gold line rides the cut wherever the
   cover hands over to the paper or to the pages.

   It is a border on the wedge itself, not a separate element. The wedge is a
   rotated box whose visible edge IS the seam, so the border turns with it
   and stays on the cut at every width — which a second absolutely-positioned
   line would not do.

   Which edge is visible depends on which way the wedge straddles its seam:
   the wedges that hang below a band show their top edge, the ones that hang
   above a section show their bottom edge. Hence two rules, not one.

   Spent once per seam. It is never blurred, never doubled, and never a fill;
   the moment gold becomes an area on this site it stops reading as foil. */
.section--title::after,
#AnaSlider::after {
    border-top: 2px solid var(--cp-gold);
}

#Reasons::before,
.section--cta.cta--close::before {
    border-bottom: 2px solid var(--cp-gold);
}

/* =========================================================
   The buttons
   ---------------------------------------------------------
   moon.css paints every call to action white-on-#5ba6f3. That is 2.6:1 —
   the words on the most important control on each page were the least
   legible thing on it, and no weight or size fixes a contrast failure.

   The colour is not thrown away, it is given the job it can do: --cp-sky
   reads at 5.7:1 on navy, so it stays as the chrome's link colour on dark
   grounds and stops being a fill behind white text.

   What replaces it is already on the cover. A passport's one piece of
   colour is the gold arms stamped into the front, so the primary action on
   every page is a gold field with navy type — 7:1, and the site's own
   object rather than a colour picked to pass a checker. It is the only
   place gold is allowed to be an area instead of a line, which is what
   keeps it reading as the page's one instruction.

   Secondary actions invert to an outline of the same gold, so a page that
   offers two things never offers two identical blocks.
   ========================================================= */
#contact button,
.section--cta .btn-services,
.section--title nav a.button--start-service,
.content--service--detail .sidebar a.button--start-service {
    color: var(--cp-navy);
    background: var(--cp-gold);
    border: 2px solid var(--cp-gold);
    box-shadow: 0 12px 24px -14px rgba(42, 10, 12, .55);
    transition: background-color .3s cubic-bezier(.785, .135, .15, .86),
                color .3s cubic-bezier(.785, .135, .15, .86),
                transform .3s cubic-bezier(.785, .135, .15, .86);
}

#contact button:hover,
#contact button:focus-visible,
.section--cta .btn-services:hover,
.section--cta .btn-services:focus-visible,
.section--title nav a.button--start-service:hover,
.section--title nav a.button--start-service:focus-visible,
.content--service--detail .sidebar a.button--start-service:hover,
.content--service--detail .sidebar a.button--start-service:focus-visible {
    color: var(--cp-gold);
    background: transparent;
    border-color: var(--cp-gold);
    transform: translateY(-2px);
}

/* On the cover the hover has to go the other way — a transparent button on
   crimson would drop the label to gold at 4.9:1 against a field the eye is
   already reading as the page's loudest thing. */
.section--title nav a.button--start-service:hover,
.section--title nav a.button--start-service:focus-visible {
    color: var(--cp-crimson);
    background: #fff;
    border-color: #fff;
}

/* the sidebar's plate header, and the marks that were set in the old fill */
.content--service--detail .sidebar .header {
    background: var(--cp-navy);
}

.content--service--detail .sidebar ul li .icon {
    fill: var(--cp-oxblood);
}

/* Type that was set in the fill colour on paper: 2.4:1, and all of it small.
   Oxblood is the same family at 6.9:1. */
#Testimonial .Img span,
#testimonials .Img span,
#Services .other-services .services,
#Services .althazne h3 span {
    color: var(--cp-oxblood);
}

/* the navbar's hover rule — the bar is the cover, so the mark under a link
   is the foil, not a second blue */
header nav.navbar .nav-item:hover a:after,
header nav.navbar .nav-item.active a:after {
    border-color: var(--cp-gold);
}

@media (prefers-reduced-motion: reduce) {
    #contact button,
    .section--cta .btn-services,
    .section--title nav a.button--start-service,
    .content--service--detail .sidebar a.button--start-service {
        transition: none;
    }

    #contact button:hover,
    .section--cta .btn-services:hover,
    .section--title nav a.button--start-service:hover,
    .content--service--detail .sidebar a.button--start-service:hover {
        transform: none;
    }
}

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(--cp-oxblood);
}

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;
}

/* The one run of colour in the chrome, and the only place --cp-sky is
   allowed: the licence number is the single fact on this page a reader can
   go and check for themselves, so it is the single thing set apart from the
   strip around it. Oxblood would be 1.6:1 on this near-black; the sky reads
   at 6.9:1. */
.topbar__licence {
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--cp-sky);
    text-decoration: underline;
    text-decoration-color: rgba(197, 49, 49, .45);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease, color .2s ease;
}

.topbar__licence:hover,
.topbar__licence:focus-visible {
    color: #8ec2f7;
    text-decoration-color: #8ec2f7;
}

/* =========================================================
   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 .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(--cp-oxblood) !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(250, 232, 228, .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(--cp-focus);
    outline-offset: 2px;
}

/* form feedback (static build — no backend) */
.form-note {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 6px;
    background: rgba(197, 49, 49, .12);
    border: 1px solid rgba(197, 49, 49, .45);
    color: #7a1c1c;
    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: #8e2222;
    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:focus-visible,
.section-chips a.is-active {
    background: var(--cp-oxblood);
    border-color: var(--cp-oxblood);
    color: #fff;
}

/* The chip sits inside the reading column, and the prose rules there set
   every link in that column to the same oxblood with an underline. Those
   rules are written at one class more than the chip's own, and they come
   later in this file, so they were taking the chip's colour away from it:
   the label stayed oxblood while the ground behind it went oxblood on
   hover and on the chip site.js marks as the section you are in. A chip
   emptied itself the moment you touched it, and the one for the section
   you were reading was blank the whole time.

   A chip is a control, not prose. Said here at the weight the prose is
   said at, so the ground and the label agree again. */
.page-inner .sd-body .section-chips a,
.page-post .post-body .section-chips a {
    color: #8e2222;
    text-decoration: none;
}

.page-inner .sd-body .section-chips a:hover,
.page-inner .sd-body .section-chips a:focus-visible,
.page-inner .sd-body .section-chips a.is-active,
.page-post .post-body .section-chips a:hover,
.page-post .post-body .section-chips a:focus-visible,
.page-post .post-body .section-chips a.is-active {
    color: #fff;
    text-decoration: none;
}

/* ---------- 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);
}

/* the bookend to the strip at the top, and the same reasoning: the register
   link is the footer's one action, so it keeps the site's one cool note */
footer .foot-licence__verify {
    font-size: 12.5px;
    color: var(--cp-sky);
    text-decoration: underline;
    text-decoration-color: rgba(91, 166, 243, .42);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease;
}

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

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);
}

/* the mark alone now, sized by .brand-mark; these were the widths a
   wordmark image needed */
footer .foot-brand img {
    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: var(--nav-bg);
}

/* The second button is the foil stamp, like every other primary action on
   this site — so it takes navy type, not the white the bar sets. White on
   gold is 1.9:1; navy on gold is 7:1, and this is the button a phone user
   is most likely to press. */
.mobile-cta__price {
    background: var(--cp-gold);
    color: var(--cp-navy);
}

/* ---------- 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(--cp-oxblood);
}

.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(--cp-oxblood);
    --arrow-ink-hover: var(--cp-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;
    }

    /* ----- 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(--cp-focus);
        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;
    }

    /* 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. */
    /* two marks here, not three: BBB above, SSL below. The licence that
       certifies the practice is a number rather than an emblem on this site,
       so it follows them as its own line. */
    footer .foot-badges > *:nth-child(1) { order: 1; }   /* BBB */
    footer .foot-badges > *:nth-child(2) { order: 2; }   /* SSL */

    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(40, 12, 16, .42), rgba(40, 12, 16, 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(42, 10, 12, .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(42, 10, 12, .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(42, 10, 12, .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(42, 10, 12, .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(197, 49, 49, .17), rgba(197, 49, 49, 0) 72%),
        linear-gradient(90deg,
            rgba(163, 36, 36, 0),
            rgba(163, 36, 36, .13) 22%,
            rgba(197, 49, 49, .18) 50%,
            rgba(163, 36, 36, .13) 78%,
            rgba(163, 36, 36, 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(197, 49, 49, .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(224, 90, 90, .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(246, 228, 224, .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(--cp-oxblood);
    --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(197, 49, 49, .09), rgba(197, 49, 49, 0) 70%),
        radial-gradient(80% 72% at 50% 50%, rgba(163, 36, 36, .045), rgba(163, 36, 36, 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(74, 20, 20, .38),
        0 0 0 1px rgba(74, 20, 20, .07);
    transition: box-shadow .4s var(--tw-ease);
}

#Testimonial .tw-card:hover {
    box-shadow:
        0 20px 36px -16px rgba(74, 20, 20, .45),
        0 0 0 1px rgba(163, 36, 36, .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(163, 36, 36, .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(163, 36, 36, .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, #a32424 to #a32424 — 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(250, 232, 228, .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: var(--nav-bg);
    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(44, 12, 14, .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(44, 12, 14, .78),
        0 8px 20px -8px rgba(44, 12, 14, .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: #a32424;
    --sv-link: #a32424;
    --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,
        #7d1a1a 0,
        #4d1e30 34%,
        #232941 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: #7d1a1a;
}

.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(224, 90, 90, .30), rgba(224, 90, 90, 0) 70%),
        radial-gradient(42% 38% at 24% 74%, rgba(206, 60, 60, .21), rgba(206, 60, 60, 0) 72%),
        radial-gradient(68% 58% at 52% 46%, rgba(243, 205, 150, .11), rgba(243, 205, 150, 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(252, 238, 226, .16),
        0 32px 58px -16px rgba(248, 226, 200, .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(243, 205, 150, .5), rgba(243, 205, 150, 0) 68%),
        var(--nav-bg);
    /* -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(252, 238, 226, .24),
        0 44px 76px -16px rgba(250, 234, 212, .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(42, 10, 12, .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(42, 10, 12, .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(248, 230, 226, .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: #a32424;
    --sd-link: #a32424;
    --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(30, 8, 10, .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(30, 8, 10, .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(243, 205, 150, .5), rgba(243, 205, 150, 0) 68%),
        var(--nav-bg);
    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(42, 10, 12, .62);
}

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

/* ---------- the fee table ----------
   Nine services and two prices each is a table, not a list: the reader is
   looking one row up or down for their own case and across for what it
   costs. Two columns, because three services have one price and no ten
   year book to put in a second column, and a row of empty cells would be
   the page saying nothing eight times.

   The note rides with its own row. A fee that has a condition on it is
   wrong without the condition, so the two are never separated. */
.page-inner .svc-fees {
    width: 100%;
    margin: clamp(20px, 2.2vw, 30px) 0 clamp(24px, 2.6vw, 34px);
    border-collapse: collapse;
    font-size: 15px;
}

.page-inner .svc-fees thead th {
    padding: 0 0 9px;
    border-bottom: 1px solid var(--sd-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7e8d9b;
    text-align: left;
}

.page-inner .svc-fees thead th + th {
    text-align: right;
}

.page-inner .svc-fees tbody th,
.page-inner .svc-fees tbody td {
    padding: 14px 0;
    border-bottom: 1px solid var(--sd-line);
    vertical-align: top;
}

.page-inner .svc-fees tbody th {
    padding-right: 24px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--sd-navy);
    text-align: left;
}

.page-inner .svc-fees tbody th a {
    color: inherit;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 0 rgba(218, 173, 76, .8);
}

.page-inner .svc-fees tbody th a:hover,
.page-inner .svc-fees tbody th a:focus-visible {
    color: var(--sd-link);
    box-shadow: inset 0 -2px 0 0 var(--sd-gold);
}

.page-inner .svc-fees tbody td {
    line-height: 1.7;
    color: #6b7c8c;
    text-align: right;
    white-space: nowrap;
}

/* the answer, in the type the panel beside it sets its price in */
.page-inner .svc-fees__n {
    font-family: var(--sd-slab);
    font-size: 21px;
    line-height: 1;
    color: var(--sd-navy);
}

.page-inner .svc-fees__note {
    display: block;
    max-width: 46ch;
    margin-top: 5px;
    font-size: 12.8px;
    font-weight: 400;
    line-height: 1.55;
    color: #7e8d9b;
}

/* a nowrap price column and a phone do not fit together: the row becomes
   two, the name over its own fee, and the fee keeps the left edge the
   name has rather than hanging off the right of a narrow screen */
@media (max-width: 620px) {
    .page-inner .svc-fees thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .page-inner .svc-fees tbody th,
    .page-inner .svc-fees tbody td {
        display: block;
        padding-right: 0;
        text-align: left;
    }

    .page-inner .svc-fees tbody th {
        padding-bottom: 4px;
        border-bottom: 0;
    }

    .page-inner .svc-fees tbody td {
        padding-top: 0;
        white-space: normal;
    }
}

.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;
}

/* the number alone is not the whole fee: it belongs to an adult, and the
   page has to say so where the structured data says so */
.page-inner .sd-panel__who {
    position: relative;
    z-index: 1;
    margin: 7px auto 0;
    max-width: 24ch;
    font-size: 12.6px;
    line-height: 1.5;
    color: #7e8d9b;
    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: var(--nav-bg);
    text-align: center;
}

/* the paper above, falling across the light — the site's own wedge.
   Cut in the colour of the field it hands over FROM, which on every page
   that uses this band without overriding it below is the site's paper.
   The sister site cut it in white because its reading pages were white;
   ours are #f5f8f9, and the difference showed as a pale sliver along the
   seam on seven pages. */
.section--cta.cta--close::before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 0;
    width: 120%;
    height: 4.5vw;
    background: var(--cp-paper);
    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(250, 232, 228, .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, #a32424);
    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(30, 8, 10, .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(30, 8, 10, .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 mark this site is named for — the two booklets —
   large, faint, and multiplied into the paper rather than laid on it.
   ========================================================= */

/* ---------- 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: 1;
    transform: translateY(-50%);
    background: url("../img/settings/brand-mark.webp") center / contain no-repeat;
    opacity: .05;
    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; these two
   have nothing beside them, so the body takes the whole width */
.page-about .sd-body,
.page-benefits .sd-body,
.page-help .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-inner .ab-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 52px);
}

.page-inner .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-inner .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-inner .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-inner .ab-set li::before,
.page-inner .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(74, 20, 20, .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-inner .ab-cols,
    .page-inner .ab-set {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .page-inner .ab-cols,
    .page-inner .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(--cp-navy);
}

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

.benefits-editorial a {
    color: var(--cp-oxblood);
    text-decoration-color: var(--cp-oxblood);
    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(--cp-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(197, 49, 49, .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(--cp-oxblood);
    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(--cp-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(--cp-oxblood);
    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(--cp-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(--cp-focus);
    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(--cp-oxblood);
    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(--cp-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(--cp-oxblood);
    border-bottom: 1.5px solid var(--cp-oxblood);
    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   #a32424   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(--cp-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(--cp-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(--cp-oxblood);
}

#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(--cp-oxblood);
}

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

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

#help .faq-item a:hover,
#help .faq-item a:focus-visible {
    color: var(--cp-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-gold: #d8b565;
    --ct-room-top: #7d1a1a;
}

/* 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(200, 52, 52, .34), rgba(200, 52, 52, 0) 58%),
        linear-gradient(180deg,
            var(--ct-room-top) 0,
            #4d1e30 36%,
            #232941 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(163, 36, 36, 0),
        rgba(197, 49, 49, .16) 26%,
        rgba(206, 60, 60, .20) 50%,
        rgba(197, 49, 49, .16) 74%,
        rgba(163, 36, 36, 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, .11);
}

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

/* The key was a 10.5px monospace small cap, tracked out a fifth of an em
   and set in gold. There were eight of them on this page, four here and
   four over the form, each one sitting above a fact and each one harder
   to read than the fact it labelled: tracked uppercase at that size is
   the slowest setting on the site, and gold at 10.5px on a crimson field
   is the faintest. They are labels, not ornament, so they are set in the
   page's own sans at a size a label can be read at, in the case it was
   written in. */
.page-contact .ct-key {
    margin: 0 0 7px;
    font-family: quasimoda, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.5;
    text-transform: none;
    color: rgba(250, 226, 216, .7);
}

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

/* The same key, used inside a line rather than over one. Phone and Fax
   sit one above the other and their labels are different lengths, so
   without a width the two numbers start at two different places and the
   pair reads as ragged rather than as a column. The width is the wider
   of the two labels plus its gap, so both numbers land on one edge. */
.page-contact .ct-value .ct-key,
.page-contact .ct-minor .ct-key {
    display: inline-block;
    min-width: 4.2em;
    margin: 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;
}

/* No rule under them at rest. Three gold underlines stacked in a panel
   this size read as three more pieces of furniture, and nothing here is
   a link inside a sentence: the address, the email, the number and the
   licence are the content of the panel, each on its own line, each set
   larger and brighter than the prose around it. That is what marks them,
   and it is not colour, so it survives without the rule. The rule comes
   back the moment a cursor or the keyboard reaches one. */
.page-contact .ct-value a {
    color: inherit;
    text-decoration: none;
    box-shadow: inset 0 0 0 0 rgba(216, 181, 101, 0);
    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);
}

/* ---------- the one button on this half ---------- */
/* The panel is a list of facts set on crimson, and every one of them is
   read, not pressed. This is the exception, so it is given the only
   filled shape here and WhatsApp's own green, which is the colour the
   gesture is recognised by and the only place on the site it appears. */
.page-contact .ct-wa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: .72em 1.25em .78em;
    border-radius: 6px;
    background: #25d366;
    color: #06301a;
    font-family: quasimoda, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 14px 26px -14px rgba(6, 48, 26, .75);
    transition: transform .3s var(--ct-ease),
                background .3s var(--ct-ease),
                box-shadow .3s var(--ct-ease);
}

.page-contact .ct-wa .ico {
    width: 18px;
    height: 18px;
    flex: none;
}

.page-contact .ct-wa:hover,
.page-contact .ct-wa:focus-visible {
    background: #31e074;
    color: #06301a;
    transform: translateY(-2px);
    box-shadow: 0 20px 30px -14px rgba(6, 48, 26, .8);
}

.page-contact .ct-minor {
    margin: 10px 0 0;
    font-size: clamp(14px, 1.05vw, 15px);
    line-height: 1.6;
    color: rgba(248, 232, 228, .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;
}

/* the same correction as the keys opposite, and it matters more here:
   these four name the boxes somebody is about to type into */
.page-contact .ct-field label {
    display: block;
    margin-bottom: 8px;
    font-family: quasimoda, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.5;
    text-transform: none;
    color: rgba(255, 244, 240, .86);
}

/* 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(28, 8, 10, .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(--cp-oxblood);
    box-shadow: 0 0 0 3px rgba(197, 49, 49, .28),
                0 0 34px -8px rgba(224, 90, 90, .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(197, 49, 49, .45);
    background: rgba(197, 49, 49, .14);
    color: #f7e3e3;
}

/* ---------- 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);
    }

    /* The rule between entries was dropped at 900px because the panel
       becomes two columns there and a horizontal rule across a pair of
       them separates nothing. Here it is one column again, four facts
       of four different shapes stacked at one gap, and without the rule
       the address runs into the email runs into the number: the reader
       has to work out where each one ends. The rule is what the desktop
       panel uses, so it comes back with it. */
    .page-contact .ct-set {
        gap: 0;
    }

    .page-contact .ct-entry + .ct-entry {
        margin-top: 22px;
        padding-top: 22px;
        border-top: 1px solid rgba(255, 255, 255, .11);
    }

    /* The button is the action the phone entry ends on, so it holds to
       that number rather than floating between two facts. */
    .page-contact .ct-wa {
        margin-top: 14px;
    }

    .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(197, 49, 49, .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(--cp-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(--cp-focus);
    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(--cp-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(--cp-focus);
    outline-offset: 2px;
}

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

.bx-topic.is-on .bx-topic__n {
    color: rgba(250, 232, 228, .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: #fcf8f6;
}

/* 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(--cp-focus);
    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(--cp-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(--cp-oxblood);
}

/* 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(74, 20, 20, .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(74, 20, 20, .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(--cp-focus);
    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(74, 20, 20, .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(74, 20, 20, .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(74, 20, 20, .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;
    }
}
/* =========================================================
   Removed: the WhatsApp door
   ---------------------------------------------------------
   This sheet was ported from the sister site, which carries a
   WhatsApp button on its contact page that has no markup here, so every
   visitor was downloading it on every page for nothing. It is deleted
   rather than commented out: a commented-out kilobyte still travels.

   The application page came the other way. It was deleted here for the
   same reason, and is back at the foot of this file now that this site
   has an application of its own.
   ========================================================= */


/* =========================================================
   The masthead carries the mark, and only the mark
   ---------------------------------------------------------
   An earlier pass stood the logo on a white disc and set the firm's name
   beside it in the site's slab. Both had a reason: the mark then in use
   was two stock passport booklets, one of them the same oxblood as the
   bar it sat on, so half the logo disappeared into the masthead and the
   page never said who it belonged to above the fold.

   Neither reason survives the real mark. It is a maple leaf, a passport
   and a plane over a white swoosh, drawn to be read on exactly this
   crimson, and the live site sets it alone at the top left, large. The
   disc would now be a white plate under a logo that already carries its
   own white, and the typeset name a second name beside a mark that is
   the name.

   The word stays in the markup, out of the picture: the link's aria-label
   is its accessible name, and the text is there for the crawler and for
   any agent that ignores the label.
   ========================================================= */
header#navbar_top nav.navbar .navbar-brand,
footer .foot-brand a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Two heights, because the live site's mark is taller than any bar it
   could sit inside: --mark is what is drawn, --mark-box is what it takes
   up in the row. The difference hangs past the gold rule, which is what
   the mark does on the live site, where it runs off the top of the page
   and down into the hero. */
header#navbar_top nav.navbar .navbar-brand .brand-mark,
footer .foot-brand .brand-mark {
    --mark: 112px;
    --mark-box: 68px;
    flex: none;
    display: block;
    height: var(--mark-box);
}

/* sized in absolute terms, not as a share of a box: moon.css pins every
   image in the bar to a fixed width and a percentage here has to win that
   argument in three different places */
header#navbar_top nav.navbar .navbar-brand .brand-mark img,
footer .foot-brand .brand-mark img {
    position: relative;
    z-index: 1;
    display: block;
    width: auto !important;
    height: var(--mark) !important;
    max-width: none;
    /* it hangs below the bar and never above it: a dark credential strip
       sits directly over the masthead, and a mark crossing into that
       reads as a mistake. The live site's mark sits lower than its nav
       links too, so down is also where it belongs. */
    margin-top: 4px;
}

.brand-word {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* nothing above or below it in the footer to hang past, so the footer
   mark takes the room it actually needs */
footer .foot-brand .brand-mark {
    --mark: 92px;
    --mark-box: 92px;
}

@media (max-width: 992px) {
    header#navbar_top nav.navbar .navbar-brand .brand-mark {
        --mark: 78px;
        --mark-box: 50px;
    }

    footer .foot-brand .brand-mark {
        --mark: 74px;
        --mark-box: 74px;
    }
}

/* The phone menu is painted in the cover, like the bar it drops out of.
   moon.css leaves the panel transparent below 992px. */
@media (max-width: 992px) {
    header#navbar_top .navbar-collapse.in-mb-red {
        background: var(--nav-bg);
    }

    header#navbar_top nav.navbar .container-fluid.in-mb-padding {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* =========================================================
   Skip link
   Eight nav items and a service sub-list stand between the top of the
   document and the page. Keyboard and switch users get past them in one
   press. It is invisible until it has focus, and then it is the loudest
   thing on the page, because at that moment it is the only thing.
   ========================================================= */
.skip-link {
    position: absolute;
    z-index: 1100;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
    padding: 12px 22px;
    border-radius: 0 0 6px 6px;
    background: var(--cp-gold);
    color: var(--cp-navy);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .18s ease;
}

.skip-link:focus-visible {
    transform: translate(-50%, 0);
    outline: 2px solid var(--cp-navy);
    outline-offset: -6px;
}

/* =========================================================
   The line under the closing call to action
   ---------------------------------------------------------
   Every inner page ends on the same band, and the band ends on the same
   sentence: what actually happens after someone signs up. It used to be a
   tinted alert box with a warning icon, sitting under the button like an
   error — the site telling you something had gone wrong at the exact
   moment you were deciding to go ahead. It is fine print now, in the
   band's own ink, which is what it always was.
   ========================================================= */
.cta--close .cta__note {
    position: relative;
    z-index: 1;
    max-width: 62ch;
    margin: clamp(22px, 2.4vw, 32px) auto 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(250, 232, 228, .82);
    text-wrap: pretty;
}

/* =========================================================
   The nine services do not fit the seven-column rail
   ---------------------------------------------------------
   The homepage rail was built for seven. This site has nine, and at
   1/9th of a container a photograph is 118px with a two-line name under
   it — legible, but the row stops reading as a set of objects and starts
   reading as a strip of icons.

   Nine across is also more than a first screen should ask anyone to
   choose between. So the rail holds the row it was designed for and the
   remainder starts a second one: five and four, centred, on the same
   grid. Nothing new is introduced — it is the same track, given a row
   to break on.
   ========================================================= */
@media (min-width: 993px) {
    .svc-rail__track {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        row-gap: clamp(26px, 2.8vw, 44px);
    }

    /* Every card is placed by hand rather than left to auto-placement.
       Mixing a definite-column item into an auto-placed flow makes the
       result depend on the packing algorithm, and the one thing this row
       must do is come out the same in every engine: five, then four
       centred under them. */
    .svc-rail__track > .svc:nth-child(1) { grid-area: 1 / 1  / 2 / 3;  }
    .svc-rail__track > .svc:nth-child(2) { grid-area: 1 / 3  / 2 / 5;  }
    .svc-rail__track > .svc:nth-child(3) { grid-area: 1 / 5  / 2 / 7;  }
    .svc-rail__track > .svc:nth-child(4) { grid-area: 1 / 7  / 2 / 9;  }
    .svc-rail__track > .svc:nth-child(5) { grid-area: 1 / 9  / 2 / 11; }
    .svc-rail__track > .svc:nth-child(6) { grid-area: 2 / 2  / 3 / 4;  }
    .svc-rail__track > .svc:nth-child(7) { grid-area: 2 / 4  / 3 / 6;  }
    .svc-rail__track > .svc:nth-child(8) { grid-area: 2 / 6  / 3 / 8;  }
    .svc-rail__track > .svc:nth-child(9) { grid-area: 2 / 8  / 3 / 10; }
}

/* =========================================================
   Services — the room hands over to paper
   ---------------------------------------------------------
   The cards stand in a dark room that descends from the cover into the
   pages. Under them the page has a thousand words to say about fees and
   process, and a thousand words do not belong on navy.

   So the field ends the way every field on this site ends: on the seam,
   with the foil along it. Nothing new — it is the same cut the masthead
   makes, running the other way.
   ========================================================= */
/* moon.css already cuts this seam — `#Services::after`, a paper wedge at
   the foot of the field — so the page needs no second one. An earlier pass
   added one and the result was navy, paper, navy, paper down four edges in
   a row. What is left to do is re-cut the existing wedge at the angle the
   rest of the site uses, and give the reading below it room to clear it.

   No foil along this one. The gold marks where the COVER ends — the
   masthead, the title band, the closing call to action. This edge is navy
   handing over to paper, which is the inside of the book, and putting a
   stamped line there would spend the mark on a seam that is not an edge. */
#Services::after {
    height: 4.5vw;
    transform: rotate(-2.5deg) translate(-50%, 50%);
}

.page-services .content--service--detail {
    position: relative;
    padding-top: clamp(52px, 5.4vw, 88px);
}

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

/* A heading inside a section, not a new section: same face, a step down,
   and no rule of its own — the H2 above it already opened the subject. */
.page-inner .sd-h--sub {
    margin-top: clamp(26px, 2.6vw, 38px);
    font-size: clamp(17px, 1.32vw, 20px);
}

/* =========================================================
   The one numbered list on the site
   ---------------------------------------------------------
   Numbers are a claim that order matters. On almost everything here it
   does not — a list of services, a list of benefits, a list of reasons
   can all be read in any order, and numbering them would be decoration
   wearing the clothes of meaning.

   The process is the exception. Step five is a review of what step four
   uploaded; you cannot do it first. So it is numbered, and it is the
   only thing on this site that is.

   The numeral is set in the slab at the size of the type it labels, in
   oxblood, on the hanging indent the checks already use. No circle
   behind it: a counter in a coloured disc is the badge every generated
   page reaches for, and the number is already the mark.
   ========================================================= */
.page-inner .sd-steps {
    counter-reset: step;
    margin: 0 0 1.4em;
    padding: 0;
    list-style: none;
}

.page-inner .sd-steps li {
    counter-increment: step;
    position: relative;
    margin: 0 0 1.15em;
    padding-left: 2.6em;
}

.page-inner .sd-steps li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--sd-slab);
    font-size: 1em;
    font-weight: 400;
    line-height: inherit;
    color: var(--cp-oxblood);
    font-variant-numeric: tabular-nums;
}

.page-inner .sd-steps strong {
    display: block;
    margin-bottom: 3px;
}

.page-inner .sd-steps span {
    display: block;
}

/* =========================================================
   The pages that are only reading
   ---------------------------------------------------------
   About Us, Benefits, Help, the Privacy Policy, the Terms. No card beside
   them, no price, nothing in the margin — a document, and someone reading
   it start to finish.

   So the measure sits in the middle of the page rather than against its
   left edge. A 66-character column hugging one side of a 1320px container
   is not a document, it is a column with a hole next to it; centred, the
   page is the paper and the column is the text on it.

   The opening paragraph is set one step up. It is the only typographic
   device on these pages, and it does the job an editor does with the first
   line: tells you what you are about to read and how long it is worth.
   ========================================================= */
.page-inner .sd-body--wide {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
}

.page-inner .sd-body--wide > p:first-of-type {
    font-size: 1.1em;
    line-height: 1.62;
    color: var(--cp-navy);
}

.page-inner .sd-body--wide > h2:first-child + p,
.page-inner .sd-body--wide > .ab-cols:first-of-type p:first-child {
    font-size: 1em;
}

/* the legal pages number their sections; the numeral belongs to the heading
   and should not be mistaken for a step in a process */
.page-legal .sd-h {
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   About Us — the notice
   ---------------------------------------------------------
   The single most consequential sentence on this site is that we are not
   the government. It has to be impossible to skim past and impossible to
   mistake for marketing, and it has to say so before anyone has read far
   enough to assume otherwise.

   It is therefore the one place on a reading page where the cover comes
   back. Full bleed of the measure, the crimson it is painted in, the gold
   rule along the top edge — the same lockup the masthead uses, at the size
   of a paragraph. Nothing else on any of these pages is coloured at all,
   so it cannot be read as decoration.
   ========================================================= */
.page-about .ab-notice {
    position: relative;
    margin: clamp(30px, 3.2vw, 46px) 0;
    padding: clamp(24px, 2.6vw, 36px) clamp(22px, 2.6vw, 38px) clamp(26px, 2.8vw, 38px);
    border-top: 2px solid var(--cp-gold);
    border-radius: 0 0 6px 6px;
    /* Flat, not the masthead's gradient. The sentence that matters here is
       set in gold, and gold against the lit end of that gradient measures
       3.2:1 — under the 4.5:1 a 16px run needs. Against the cover's deep
       end alone it is 4.9:1 at every point of the block. */
    background: var(--cp-crimson);
    box-shadow: 0 22px 44px -26px rgba(42, 10, 12, .7);
}

.page-about .ab-notice .sd-h {
    margin: 0 0 clamp(10px, 1.1vw, 15px);
    color: #fff;
}

.page-about .ab-notice p {
    margin: 0 0 .8em;
    color: rgba(250, 232, 228, .92);
}

.page-about .ab-notice p:last-child {
    margin-bottom: 0;
}

.page-about .ab-notice strong {
    color: var(--cp-gold);
    font-weight: 600;
}

/* on a reading page the credential lockup closes the document rather than
   sitting beside it */
.page-about .ab-foot {
    margin-top: clamp(40px, 4.2vw, 62px);
}


/* =========================================================
   The wide inner pages: About Us and Benefits
   ---------------------------------------------------------
   Both were set as one 68ch column down the middle of an 1140px
   container, so a third of the page stood empty on either side of four
   short sections and the page read as far longer than it is. They take
   the whole measure now and break across the columns .ab-cols and
   .ab-set already draw.

   Two things a full-width page needs that a single column does not. A
   line of introduction still has to keep a readable measure, because a
   sentence set across 1140px is unreadable however short it is. And a
   notice given the whole width turns into a banner unless something in
   it holds a column.
   ========================================================= */

/* the sentence that introduces a section or a list: a column's measure
   over a list that runs the width of the page */
.page-inner .sd-body p.ab-lead {
    max-width: 62ch;
    margin: 0 0 clamp(20px, 2.2vw, 30px);
    font-size: 1.06em;
    line-height: 1.66;
    color: var(--sd-navy);
    text-wrap: pretty;
}

/* four entries across, not three and an orphan on a second row */
.page-inner .ab-set--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* an entry that opens on a term sets the term on its own line; inline, the
   bold ran straight into the sentence and every entry began with a lump */
.page-inner .ab-set strong {
    display: block;
    margin-bottom: .3em;
    font-weight: 600;
    color: var(--sd-navy);
}

/* The notice at the width of the page. Full bleed it is a crimson band
   across 1140px with two lines floating in the middle, which reads as an
   advertisement. The heading keeps a column and the sentences take the
   rest, so it stays a notice at any width. */
.page-about .ab-notice {
    display: grid;
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
    gap: clamp(16px, 2.4vw, 44px);
    align-items: start;
}

.page-about .ab-notice .sd-h {
    margin: 0;
}

.page-about .ab-notice__body {
    max-width: 76ch;
}

.page-about .ab-notice__body p:last-child {
    margin-bottom: 0;
}

/* Benefits closes on a sentence, where About closes on a credential */
.page-benefits .sd-body p.ab-close {
    max-width: 74ch;
    margin: clamp(26px, 3vw, 40px) 0 0;
}

@media (max-width: 1100px) {
    .page-inner .ab-set--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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


/* =========================================================
   Help: three destinations
   ---------------------------------------------------------
   Three headings and three sentences down a 68ch column, two of whose
   links left the site without saying so. They are signposts, not prose.
   What a reader wants from this page is all three at once, and to know
   which door each one opens before touching it.

   So each is a card, with the place it goes set above its name in the
   same 11px label the credential block uses, and the gold cap along the
   top edge that marks the start of a thing everywhere else on the site.
   ========================================================= */
.page-help .hp-set {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 30px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-help .hp-set li {
    margin: 0;
    padding: 0;
    min-width: 0;
}

.page-help .hp-set li::before,
.page-help .hp-set li::marker {
    content: none;
}

/* `.page-inner .sd-body a` is (0,2,1) and underlines every link in a
   reading column, which is right for a link inside a sentence and wrong
   for a whole card: it drew a rule under the label, the name and the note
   alike. An underline on an anchor cannot be switched off further down,
   so it has to be beaten here, on the anchor itself. */
.page-help .sd-body .hp-card__link {
    text-decoration: none;
}

.page-help .hp-card__link {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 30px) clamp(22px, 2.3vw, 32px);
    border: 1px solid var(--sd-line);
    border-top: 3px solid var(--sd-gold);
    border-radius: 0 0 10px 10px;
    background: #fff;
    box-shadow: 0 18px 38px -28px rgba(74, 20, 20, .5);
    text-decoration: none;
    transition: transform .45s var(--sd-ease),
                border-color .45s var(--sd-ease),
                box-shadow .45s var(--sd-ease);
}

/* one destination at a time, the move the services page and the homepage
   rail both make */
.page-help .hp-set:has(.hp-card__link:hover) .hp-card__link,
.page-help .hp-set:has(.hp-card__link:focus-visible) .hp-card__link {
    opacity: .66;
}

.page-help .hp-set:has(.hp-card__link:hover) .hp-card__link:hover,
.page-help .hp-set:has(.hp-card__link:focus-visible) .hp-card__link:focus-visible {
    opacity: 1;
    transform: translateY(-5px);
    border-color: var(--sd-line);
    border-top-color: var(--sd-gold);
    box-shadow: 0 26px 48px -26px rgba(74, 20, 20, .58);
}

.page-help .hp-card__from {
    display: block;
    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);
}

.page-help .hp-card__name {
    display: block;
    margin-top: 9px;
    font-family: var(--sd-slab);
    font-weight: 400;
    font-size: clamp(17.5px, 1.42vw, 21px);
    line-height: 1.26;
    /* two lines whether the name needs two or not, so the rule under it
       lands on the same baseline in all three cards */
    min-height: calc(2 * 1.26em);
    color: var(--sd-navy);
    text-wrap: balance;
    transition: color .3s var(--sd-ease);
}

.page-help .hp-card__link:hover .hp-card__name,
.page-help .hp-card__link:focus-visible .hp-card__name {
    color: var(--sd-link);
}

/* the affordance sits in the name, because the name is the link */
.page-help .hp-card__go {
    display: inline-block;
    margin-left: 8px;
    font-size: .6em;
    color: var(--sd-link);
    transition: transform .4s var(--sd-ease);
}

.page-help .hp-card__link:hover .hp-card__go,
.page-help .hp-card__link:focus-visible .hp-card__go {
    transform: translateX(5px);
}

/* pushed to the foot, so the three notes share a baseline however many
   lines the names above them took */
.page-help .hp-card__note {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sd-line);
    font-size: clamp(13.6px, 1vw, 15px);
    line-height: 1.62;
    color: var(--sd-ink);
    text-wrap: pretty;
}

/* the one sentence on the page that is a requirement and not a signpost.
   It was the second half of the third paragraph, where nobody reading for
   a link would ever have met it. */
.page-help .sd-body p.hp-note {
    max-width: 84ch;
    margin: clamp(28px, 3vw, 44px) 0 0;
    padding: clamp(18px, 1.9vw, 26px) clamp(20px, 2.1vw, 28px);
    border-left: 3px solid var(--sd-gold);
    border-radius: 0 6px 6px 0;
    background: #fff;
    box-shadow: 0 14px 30px -26px rgba(74, 20, 20, .5);
}

@media (max-width: 940px) {
    /* two across leaves the third card standing on its own, which reads as
       an afterthought rather than as the third of three */
    .page-help .hp-set {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-help .hp-card__link {
        height: auto;
    }
}


/* =========================================================
   Testimonials: the wall
   ---------------------------------------------------------
   The page ran its reviews twice and neither pass could be read. Across
   the top, three counter-scrolling marquees of two-line excerpts: a
   sentence left the screen before the reader finished it. Underneath,
   the same reviews again in a three-column masonry, which sends the eye
   to the foot of one column and back up to the head of the next.

   They are hung instead, the way pictures are hung in a room: one piece
   in the middle and the rest arranged around it. Two things decide the
   hang and neither of them is decoration. The piece in the middle is the
   letter that names the fear the reader arrived with. The size of every
   other frame is how much that customer wrote, so a short note gets a
   small frame and a long letter a wide one, and no letter is cropped to
   make the wall tidy.

   What makes it read as a wall rather than as a grid of cards: one light,
   from above and slightly left, the same light every shadow on the page
   is cast by; a gold edge, which is the line this site already draws
   round a document; and the name set on the wall underneath the frame
   rather than inside it, where a gallery puts it.

   Nothing here moves and nothing reacts to a cursor. These are not
   controls, and a picture on a wall does not rise to meet you.

   There are no portraits. The sixteen in the old markup were sixteen
   copies of one grey silhouette, which on a page whose whole job is to
   be believed read as an admission that nobody real was behind it. The
   places are real and checkable, so the places carry the attribution.
   ========================================================= */
.page-testimonials {
    --tm-ink: #1b2846;
    --tm-body: #3f4f63;
    /* 3.05:1 under white was a shade light for the place a letter came
       from, and the place is now inside the mat carrying attribution */
    --tm-meta: #6f8090;
    --tm-edge: rgba(218, 173, 76, .5);
    /* the stamp is 2.1:1 on white, which is a wash rather than a mark, so
       the five stars are struck in the darker brass of an old frame */
    --tm-brass: #a8801f;
    --tm-slab: "Museo Slab W00 300", museo-slab, Georgia, serif;
    --tm-ease: cubic-bezier(.22, .78, .3, 1);
}

/* ---------- the room ---------- */
.page-testimonials .tm-wall {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* a shade under the paper the rest of the site is printed on, so the
       white of a mat reads as an object standing off the wall and not as
       more of the same page */
    background: #e6ebed;
    padding: clamp(44px, 5vw, 78px) 0 clamp(50px, 5.6vw, 88px);
}

/* one light, thrown from above the middle of the wall. It is what makes
   the centre piece the brightest thing in the room without giving it a
   colour nothing else on the page has. */
.page-testimonials .tm-wall__light {
    position: absolute;
    z-index: 0;
    inset: -14% -12% 0;
    pointer-events: none;
    background:
        radial-gradient(58% 52% at 50% 26%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 72%),
        radial-gradient(90% 70% at 50% 10%, rgba(197, 49, 49, .05), rgba(197, 49, 49, 0) 76%);
}

.page-testimonials .tm-wall > .container {
    position: relative;
    z-index: 1;
}

.page-testimonials .tm-wall__title {
    margin: 0 0 clamp(26px, 2.8vw, 42px);
    font-family: var(--tm-slab);
    font-weight: 300;
    font-size: clamp(21px, 2vw, 29px);
    line-height: 1.2;
    color: var(--tm-ink);
}

/* ---------- the hang ---------- */
.page-testimonials .tm-hang {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 1.9vw, 30px);
    align-items: stretch;
}

/* ---------- a frame, and everything the letter needs, inside it ----------
   The frame and the attribution are one object. They were two: the white
   mat held the letter and the name stood on the wall underneath it, which
   on a hang of sixteen ragged frames left the eye to guess which name went
   with which letter, and next to a two-row centre piece it guessed wrong.
   Name, place and the five stars are inside the mat now, on a plaque under
   a hairline, where a signature goes.

   Every frame is placed, not flowed: the generator works out which letter
   hangs where so the wall is balanced around the centre and the two
   columns beside it become a run of tall narrow pieces. */
.page-testimonials .tm-piece {
    grid-column: var(--c) / span var(--w);
    grid-row: var(--r) / span var(--h, 1);
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 0;
    /* the mat */
    padding: clamp(20px, 2.1vw, 32px) clamp(18px, 1.9vw, 28px);
    background: #fff;
    border: 1px solid var(--tm-edge);
    /* light from above and slightly left, so the wall is lit from one
       place and every piece on it agrees about where that place is */
    box-shadow:
        1px 10px 20px -12px rgba(42, 10, 12, .42),
        0 1px 0 rgba(255, 255, 255, .9) inset;
}

/* The letter is centred in what is left of the mat, because the frame is
   sized by its row and not by its text: a short note in a tall frame should
   sit like a plaque, not hang from the top edge of one. The plaque keeps
   the bottom edge, so the signatures across a row line up with each other
   however much or little was written above them. */
.page-testimonials .tm-quote {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
}

/* The opening mark, in the pale slate the live page prints it in. Small
   enough to open the letter and not announce itself: a third of the width
   of the shortest line under it. */
.page-testimonials .tm-mark {
    display: block;
    width: clamp(30px, 2.5vw, 38px);
    height: auto;
    margin-bottom: clamp(9px, 1vw, 14px);
    color: #b2c3cc;
    fill: currentColor;
}

.page-testimonials .tm-quote p {
    margin: 0;
    font-family: var(--tm-slab);
    font-weight: 300;
    font-size: clamp(14.6px, 1.02vw, 15.8px);
    line-height: 1.7;
    color: var(--tm-body);
    text-wrap: pretty;
}

/* ---------- the plaque, on the bottom edge of the mat ---------- */
.page-testimonials .tm-plaque {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: clamp(16px, 1.7vw, 24px);
    padding-top: clamp(12px, 1.3vw, 17px);
    border-top: 1px solid rgba(218, 173, 76, .5);
}

.page-testimonials .tm-plaque__by {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.page-testimonials .tm-plaque__who {
    font-family: var(--tm-slab);
    font-style: normal;
    font-size: clamp(14px, 1.02vw, 15.5px);
    line-height: 1.3;
    color: var(--tm-ink);
}

.page-testimonials .tm-plaque__where {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--tm-meta);
}

/* five of them, cut once and hung sixteen times */
.page-testimonials .tm-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.page-testimonials .tm-stars {
    flex: none;
    width: clamp(74px, 6vw, 88px);
    height: auto;
    color: var(--tm-brass);
    fill: currentColor;
}

/* ---------- the piece in the middle ---------- */
/* Painted in the cover. Fifteen white mats and one crimson one settles
   which is the centre before a word of it is read, and it is the only
   place on this page that borrows the masthead's own fill. */
.page-testimonials .tm-piece--centre {
    padding: clamp(26px, 2.9vw, 44px) clamp(24px, 2.7vw, 40px);
    background: var(--nav-bg);
    border-color: var(--cp-gold);
    box-shadow:
        2px 18px 36px -16px rgba(42, 10, 12, .6),
        0 0 0 1px rgba(218, 173, 76, .28);
}

/* the generator sets --q from the length of the letter it hung here, so
   the type fills the mat whichever letter that is */
.page-testimonials .tm-piece--centre .tm-quote p {
    font-size: var(--q, clamp(18px, 1.78vw, 25px));
    line-height: 1.45;
    color: #fff;
}

/* on the cover the mark is the white the letter is set in, held back far
   enough to stay a mark and not a fifth line of type */
.page-testimonials .tm-piece--centre .tm-mark {
    width: clamp(38px, 3.1vw, 48px);
    color: rgba(255, 255, 255, .3);
}

.page-testimonials .tm-piece--centre .tm-plaque {
    border-top-color: rgba(218, 173, 76, .55);
}

/* on the cover the brass of the other fifteen plaques goes to 2.4:1 and
   oxblood all but disappears, so the middle signs itself in white and the
   stamp gold it is bordered in */
.page-testimonials .tm-piece--centre .tm-plaque__who {
    font-size: clamp(15px, 1.14vw, 17px);
    color: #fff;
}

.page-testimonials .tm-piece--centre .tm-plaque__where {
    color: rgba(255, 255, 255, .74);
}

.page-testimonials .tm-piece--centre .tm-stars {
    width: clamp(84px, 6.9vw, 104px);
    color: var(--cp-gold);
}

/* ---------- the close ---------- */
.page-testimonials .tm-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(18px, 2.4vw, 40px);
    margin-top: clamp(34px, 3.8vw, 56px);
    padding-top: clamp(24px, 2.8vw, 38px);
    border-top: 1px solid rgba(27, 40, 70, .12);
}

.page-testimonials .tm-end__note {
    max-width: 58ch;
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--tm-body);
}

.page-testimonials .tm-end__note a {
    color: var(--cp-oxblood);
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
}

.page-testimonials .tm-end__cta {
    flex: none;
    display: inline-block;
    padding: .95em 1.9em 1.05em;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--cp-navy);
    background: var(--cp-gold);
    border: 2px solid var(--cp-gold);
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 14px 26px -14px rgba(30, 8, 10, .5);
    transition: background-color .3s var(--tm-ease),
                transform .3s var(--tm-ease);
}

.page-testimonials .tm-end__cta:hover,
.page-testimonials .tm-end__cta:focus-visible {
    background: #e6bb60;
    transform: translateY(-2px);
}

/* ---------- narrower walls ----------
   The hang is worked out for four columns. Below that the placement is
   dropped and the letters fall in the order they were hung in, which is
   shortest first — so a narrow screen opens on the notes that can be read
   at a glance. The centre piece keeps its place at the head of the wall,
   because it is still the one to read first. */
@media (max-width: 1080px) {
    .page-testimonials .tm-hang {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-testimonials .tm-piece {
        grid-column: auto / span 1;
        grid-row: auto;
        align-self: start;
    }

    .page-testimonials .tm-piece--centre {
        grid-column: 1 / -1;
    }

    .page-testimonials .tm-quote {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .page-testimonials .tm-hang {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}


/* The last line of the FAQ. Forty questions answered and the reader still
   has one — the page should say what to do about that rather than end on
   the twentieth answer and a band. */
.page-faqs .faq-more {
    max-width: 62ch;
    margin: clamp(30px, 3.2vw, 46px) 0 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: #54677a;
}

.page-faqs .faq-more a {
    color: var(--cp-oxblood);
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* =========================================================
   Blog index — the headlines with no article behind them yet
   ---------------------------------------------------------
   Forty-eight headlines; one of them has a page in this build. The other
   forty-seven pointed at the index they were already on, which is a link
   that takes the reader back to where they are standing — the worst
   possible answer to a click, and forty-seven self-references for a
   crawler to read as the site's own opinion of what matters.

   So they are not links. They are set in the same face and the same size,
   in the list's quieter ink, with the date and topic they always had, and
   the row does not respond to a pointer. Nothing is hidden and nothing is
   claimed: the archive is listed, and what can be read is what is a link.

   When the articles exist, delete this rule and give each item an href —
   the markup is otherwise identical.
   ========================================================= */
.bx-item--soon .bx-item__title {
    color: #66757f;
}

.bx-item__soon {
    cursor: default;
}

.bx-item--soon:hover .bx-item__title,
.bx-item--soon:focus-within .bx-item__title {
    color: #66757f;
}

/* =========================================================
   The article's two ways on
   ---------------------------------------------------------
   An article ends and the reader is holding a decision, not a conclusion.
   Two doors: back to the library, or forward to the thing the article was
   actually about. No "related posts" grid — there is one article.
   ========================================================= */
.page-post .post-next {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(14px, 1.8vw, 28px);
    max-width: 68ch;
    margin: clamp(34px, 3.6vw, 54px) auto 0;
    padding-top: clamp(22px, 2.4vw, 32px);
    border-top: 1px solid #dde5ec;
}

.page-post .post-next a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    color: var(--cp-oxblood);
    text-decoration: none;
    border-bottom: 1px solid rgba(163, 36, 36, .35);
    padding-bottom: 3px;
    transition: border-color .25s ease;
}

.page-post .post-next a:hover,
.page-post .post-next a:focus-visible {
    border-bottom-color: var(--cp-oxblood);
}

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

.page-post .post-next a:hover svg {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .page-post .post-next svg {
        transition: none;
    }

    .page-post .post-next a:hover svg {
        transform: none;
    }
}

/* =========================================================
   Why use Canada Passport Help — the claim leads
   ---------------------------------------------------------
   On the sister site this block is fine print at the foot of the section:
   a licence note, three columns, set small. Here it is the argument the
   whole section exists to make — that more than half of these applications
   are rejected — and the four things beside it are the answer to it.

   So it changes places with them. Same markup, same three columns, same
   size; it simply reads second instead of last, which is where a claim
   belongs when the rest of the section is a response to it.
   ========================================================= */
@media (min-width: 993px) {
    #WhyUse .rich-text {
        grid-area: 2 / 1 / 3 / 3;
        padding-top: 0;
        border-top: 0;
        margin-top: clamp(26px, 2.8vw, 40px);
    }

    #WhyUse .althazne {
        grid-area: 3 / 1 / 4 / 3;
        margin-top: clamp(40px, 4.4vw, 64px);
        padding-top: clamp(34px, 3.4vw, 50px);
        border-top: 1px solid rgba(218, 173, 76, .22);
    }
}

#WhyUse .rich-text p {
    font-size: 14.5px;
}

/* ---------- the four marks ----------
   The icons are black line art on transparent. They are struck into the
   sheet the way the sister site's are — a dark disc, a gold hairline round
   it — and the art itself is turned white rather than gold, because gold
   on this disc is the ring. One line does it: the source is pure black, so
   inverting it is exact, and nothing has to be redrawn or re-exported. */
#WhyUse .emoji-badge img {
    /* moon.css gives every image in this section `padding: 20px`, written
       for a 100px icon standing on its own. Inside a 62-80px disc that is
       more padding than box, and with border-box sizing the picture
       collapses to nothing — which is why the four discs were empty. */
    width: clamp(28px, 2.5vw, 37px) !important;
    height: clamp(28px, 2.5vw, 37px) !important;
    max-width: none;
    padding: 0 !important;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .92;
}

#WhyUse .why-item:hover .emoji-badge img,
#WhyUse .why-item:focus-within .emoji-badge img {
    opacity: 1;
}

/* With no h3 above it, the sentence is the item: it carries the size and
   the colour the heading would have had. */
#WhyUse .why-item > p {
    font-size: clamp(14px, 1.08vw, 15.5px);
    line-height: 1.65;
    color: rgba(250, 236, 232, .9);
}

/* =========================================================
   Two landscape photographs where the sister site had portraits
   ---------------------------------------------------------
   The closing figure and the price panel's mount were both built around a
   tall document — a certificate, 400 × 530. The object this site is about
   is a booklet photographed on a flag, and it is wider than it is tall.
   The mount holds the same white board, the same tilt and the same shadow;
   only the aspect it is cut to changes.
   ========================================================= */
.page-inner .sd-panel__mark {
    width: min(232px, 78%);
}

.page-inner .sd-panel__mark img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (max-width: 900px) {
    .page-inner .sd-panel__mark {
        width: min(208px, 62%);
    }
}

#Reasons .rs-doc img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* =========================================================
   The hero
   ---------------------------------------------------------
   Neither stylesheet this site inherits from actually styles the opening
   headline. moon.css writes its rules against `h3.UstBaslik` and
   `h6.icerik` — the tags the markup carried before it had a heading
   hierarchy — so an `h1` and a `p` fell through to Bootstrap's defaults:
   the most important sentence on the site, set in the system sans at
   40px. That is what this block is for.

   THE GOLD LEAD.  The lead under the headline was gold, and gold is the
   one colour on this site that cannot be trusted on the cover. Measured
   along the gradient it runs 2.6:1 at the lit corner and 4.9:1 at the
   deepest — never once reaching 4.5:1, and only clearing the 3:1
   large-text floor over the darker half. It held at 24px because 24px
   regular counts as large text; at any size a phone would use, it failed.

   So the gold comes off the sentence and goes onto a rule beneath the
   headline, which is where this site puts gold anyway: a struck line, the
   foil on a cover. The lead is set in the warm near-white the rest of the
   cover uses, 6.2:1 at its worst point and 8.6:1 at its best, at every
   size. Nothing is lost but the failure.
   ========================================================= */
#AnaSlider .hazne {
    gap: clamp(28px, 4.5vw, 72px);
}

#AnaSlider .hazne .sol {
    min-width: 0;
}

#AnaSlider .hazne .UstBaslik {
    max-width: 19ch;
    margin: 0;
    font-family: "Museo Slab W00 300", museo-slab, Georgia, "Times New Roman", serif;
    font-weight: 300;
    font-size: clamp(31px, 3.9vw, 54px);
    line-height: 1.08;
    letter-spacing: -.005em;
    color: #fff;
    text-wrap: balance;
}

/* the foil, at the size of a signature rather than a seam */
#AnaSlider .hazne .UstBaslik::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    margin: clamp(20px, 2.2vw, 30px) 0 0;
    background: var(--cp-gold);
}

#AnaSlider .hazne .icerik {
    max-width: 52ch;
    margin: clamp(18px, 2vw, 26px) 0 0;
    font-size: clamp(15.5px, 1.22vw, 18px);
    font-weight: 400;
    line-height: 1.64;
    color: rgba(250, 232, 228, .92);
    text-wrap: pretty;
}

/* ---------- the photograph ----------
   The object the whole site is about, on the table rather than parked in
   a column: the white board, the hard shadow and the few degrees off
   square that the price panel's mount uses, at the size the object
   deserves. moon.css squares it to 291 × 291 and `contain` — which letter-
   boxes a landscape photograph inside a square and leaves air on two
   sides — so the frame is cut to the picture instead. */
#AnaSlider .hazne .sag {
    flex: none;
    width: min(392px, 38vw);
}

#AnaSlider .hazne .sag img {
    width: 100%;
    height: auto;
    aspect-ratio: 7 / 5;
    object-fit: cover;
    padding: 9px;
    border-radius: 4px;
    background: #fff;
    transform: rotate(4deg);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .3),
        0 42px 66px -26px rgba(42, 10, 12, .85),
        0 10px 22px -10px rgba(42, 10, 12, .5);
}

@media (max-width: 992px) {
    #AnaSlider .hazne {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: clamp(24px, 5vw, 40px);
    }

    #AnaSlider .hazne .sag {
        width: min(320px, 68vw);
        align-self: center;
    }

    #AnaSlider .hazne .UstBaslik {
        max-width: none;
    }
}

/* On a phone the photograph is a third of the first screen before a word
   has been read, and the words are what someone arrived for. */
@media (max-width: 640px) {
    #AnaSlider .hazne .sag {
        width: min(260px, 62vw);
    }

    #AnaSlider .hazne .sag img {
        transform: rotate(3deg);
    }
}

/* =========================================================
   Nine service cards, not seven
   ---------------------------------------------------------
   The grid this page inherits was cut for seven cards: four across, then
   three centred under them, with the fifth card offset by a column to do
   the centring. This site has nine, so four across leaves one on its own
   and the fifth card is the first of a full row — an offset there opens a
   hole in the middle of the set.

   Every offset is therefore re-declared for this count. The rule is the
   same one the seven follow: a full row starts at the left edge, and a
   short row is centred on the row above it.

     8 columns  4 + 4 + 1   the lone card takes the middle pair
     6 columns  3 + 3 + 3   nothing to centre
     4 columns  2 x 4 + 1   the lone card takes the middle pair
   ========================================================= */
.page-services .svc-set > .svc-node:nth-child(5) {
    grid-column: span 2;
}

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

@media (max-width: 1200px) {
    .page-services .svc-set > .svc-node:nth-child(5),
    .page-services .svc-set > .svc-node:nth-child(7),
    .page-services .svc-set > .svc-node:nth-child(9) {
        grid-column: span 2;
    }
}

@media (max-width: 992px) {
    .page-services .svc-set > .svc-node:nth-child(7) {
        grid-column: span 2;
    }

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

/* One column, so nothing is placed and nothing is spanned. This block has
   to restate all three offsets rather than rely on the 640px rules further
   up the sheet: those come first in source order, and a later 992px rule
   at equal specificity would otherwise win on a phone — which is exactly
   what happened, throwing cards 7 and 9 into implicit columns and
   stretching every row to match them. */
@media (max-width: 640px) {
    .page-services .svc-set {
        grid-auto-rows: auto;
    }

    .page-services .svc-set > .svc-node,
    .page-services .svc-set > .svc-node:nth-child(5),
    .page-services .svc-set > .svc-node:nth-child(7),
    .page-services .svc-set > .svc-node:nth-child(9) {
        grid-column: auto;
    }

    /* with rows no longer equalised, a card is as tall as what it holds —
       so the note stops being pushed to a foot that is not there */
    .page-services .svc-node {
        height: auto;
    }

    .page-services .svc-node__note {
        margin-top: clamp(10px, 2.4vw, 16px);
    }
}

/* =========================================================
   Gold on the cover: the same rule, applied to the rail
   ---------------------------------------------------------
   Three places in the service rail set type in gold on the hero gradient:
   the eyebrow, the "see all" link's hover, and a service name while it is
   hovered. All three measure between 2.6:1 and 4.9:1 depending on where
   the gradient happens to be behind them, and all three are small enough
   to need 4.5:1 — so none of them passes anywhere it matters.

   The fix is the rule this whole sheet already follows rather than a new
   idea: on the cover, gold is a line and never a letter. The type goes to
   the warm near-white the hero's lead uses, and the gold moves onto the
   marks beside it — the rule that runs off the eyebrow, the underline
   under the link, a ring struck round the hovered photograph. Same colour,
   same frequency, same emphasis; it simply stops being asked to be read.
   ========================================================= */
.svc-rail__eyebrow {
    color: rgba(250, 232, 228, .94);
}

.svc-rail__all:hover,
.svc-rail__all:focus-visible {
    color: #fff;
    border-bottom-color: var(--cp-gold);
}

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

/* the ring is the mark now — struck round the photograph the way the foil
   is struck along a seam */
.svc__link:hover .svc__disc,
.svc__link:focus-visible .svc__disc {
    box-shadow:
        0 0 0 2px var(--cp-gold),
        0 34px 44px -22px rgba(42, 10, 12, .95);
}

@media (max-width: 992px) {
    .svc__link:hover .svc__disc,
    .svc__link:focus-visible .svc__disc {
        box-shadow:
            0 0 0 2px var(--cp-gold),
            0 10px 18px -12px rgba(42, 10, 12, .9);
    }
}

@media (hover: none) {
    .svc__link:hover .svc__disc {
        box-shadow: 0 10px 18px -12px rgba(42, 10, 12, .9);
    }
}

/* =========================================================
   FAQ — two corrections to the inherited page
   ---------------------------------------------------------
   THE QUESTIONS.  The sister site sets every question in its structural
   blue, for a reason that is sound there: with the answer open, navy
   against the slate of the prose under it was not enough separation and
   the question read as the first paragraph rather than the heading of the
   rest. On this site that colour is oxblood — and twenty oxblood headings
   stacked down a page stop reading as headings and start reading as twenty
   warnings. The question goes back to navy, and the separation it needed
   comes from the two marks that are already there: the topic label above
   it and the disclosure tab beside it.

   THE NOTICE.  Fifty-five words of fine print set in three columns has to
   be read across the page and back twice, and the sentence breaks mid-
   clause at every column edge. It is one paragraph; it is set as one.
   ========================================================= */
#help .faq-item__q,
#help .faq-item h2 {
    color: var(--cp-navy);
}

#help .faq-item:hover .faq-item__q,
#help .faq-item[open] .faq-item__q {
    color: var(--cp-oxblood);
}

/* `#help .faq-notice` carries an id, so the override needs one too */
.page-faqs #help .faq-notice {
    max-width: 78ch;
    columns: auto;
    column-rule: 0;
    font-size: 13.5px;
}

/* the watermark behind About Us is a mark, not a picture: it should be
   noticed only after the reading is done */
.page-about .content--service--detail::before {
    opacity: .035;
}

/* =========================================================
   The article — two things the inherited page left undone
   ---------------------------------------------------------
   THE TOKENS.  `.page-post` never declares the `--sd-*` set, but the rules
   written for it reach for `--sd-gold`, `--sd-navy`, `--sd-ink` and
   `--sd-slab` anyway. An undefined custom property resolves to nothing, so
   the date under the headline came out in the inherited ink — dark type on
   the cover, at about 2:1. The set is declared here, once.

   THE MEASURE.  `.post-body > *` is capped at 100% of the container, which
   at 1320px is a hundred-and-fifty-character line. A reader loses the start
   of the next line somewhere around eighty. The prose takes a measure; the
   objects that are not sentences keep the full width they already have.
   ========================================================= */
.page-post {
    --sd-navy: #1b2846;
    --sd-gold: #daad4c;
    --sd-ink: #44546a;
    --sd-link: #a32424;
    --sd-line: #dde5ec;
    --sd-slab: "Museo Slab W00 300", museo-slab, Georgia, serif;
}

.page-post .post-body > p,
.page-post .post-body > ul,
.page-post .post-body > ol,
.page-post .post-body > h2,
.page-post .post-body > h3,
.page-post .post-body > blockquote {
    max-width: 68ch;
}

/* the closing disclaimer is fine print, not the last paragraph of the piece */
.page-post .post-body > .post-note {
    max-width: 78ch;
    margin-top: clamp(34px, 3.6vw, 52px);
    padding-top: clamp(20px, 2.2vw, 30px);
    border-top: 1px solid var(--sd-line);
    font-size: 13.5px;
    line-height: 1.72;
    color: #7e8d9b;
}


/* =========================================================
   THE APPLICATION
   =========================================================
   Ported from canadacitizenshiphelp.ca, the same firm's site,
   which was rebuilt on this same system: the sheet and rail,
   the seams, the plate, the navy block and the closing wedge
   are that page's, to the rule.

   What is not that page's is the colour. Every --sd-* token
   at the head of this file already resolves to this site's
   palette, so those came across untouched; the dozen literals
   the citizenship page wrote in its own cyan and blue are the
   cover's red and the stamp's gold here. Nothing new was
   introduced: every value below already stood above.

   No fieldset and no legend: a legend is laid out on its
   fieldset's top border instead of in normal flow, which
   splits a block with a ground of its own across the sheet's
   edge, and a grid inside a fieldset inherits
   min-width:min-content and overflows its column.
   ========================================================= */

.page-apply {
    --ap-gap: clamp(18px, 1.9vw, 26px);
    --ap-pad: clamp(20px, 2.7vw, 46px);
    --ap-border: #c8d5de;
}

.page-apply .section--title .sd-head__lead {
    max-width: 56ch;
}

.page-apply .content--apply {
    padding: clamp(38px, 4.2vw, 68px) 0 clamp(52px, 5.4vw, 88px);
    background: var(--sd-paper);
}

/* ---------- the sheet and the rail ----------
   The service page's proportions, and the rail on the same side, so
   someone arriving from that page finds the price where they left it. */
.page-apply .ap-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(272px, 25vw, 332px);
    /* stretch, not start: the rail needs height to travel in. A grid area
       sized to its content gives position:sticky nothing to stick inside,
       which is what pinned the file to the top of the column instead. */
    align-items: stretch;
    gap: clamp(26px, 3.2vw, 54px);
}

.page-apply .ap-body {
    min-width: 0;
    overflow: hidden;
    padding: clamp(28px, 3.2vw, 48px) var(--ap-pad) var(--ap-pad);
    border: 1px solid var(--sd-line);
    border-radius: 10px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(27, 40, 70, .05),
        0 30px 54px -30px rgba(27, 40, 70, .32);
}

/* ---------- a section of the form ---------- */
.page-apply .ap-block {
    min-width: 0;
}

/* the form is read down one left edge, so the heading leads the block
   rather than being centred over it the way moon.css set its legends */
.page-apply .ap-legend {
    margin: 0;
    font-family: var(--sd-slab);
    font-weight: 400;
    font-size: clamp(20px, 1.7vw, 26px);
    line-height: 1.2;
    color: var(--sd-navy);
}

/* the sentence that stops a field being filled in wrongly belongs above
   the fields, not in a tooltip beside one of them */
.page-apply .ap-note {
    max-width: 60ch;
    margin: 9px 0 0;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--sd-ink);
}

.page-apply .ap-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ap-gap);
    margin-top: clamp(20px, 2.1vw, 28px);
}

/* the gold-capped hairline the service pages use for a change of subject */
.page-apply .ap-seam {
    height: 1px;
    margin: clamp(32px, 3.4vw, 46px) 0;
    border: 0;
    /* bootstrap prints every hr at a quarter opacity, which took this one
       down to a smudge and the gold cap on it to nothing */
    opacity: 1;
    background: linear-gradient(90deg,
        var(--sd-gold) 0, var(--sd-gold) 46px,
        var(--sd-line) 46px, var(--sd-line) 100%);
}

/* ---------- the fields ---------- */
.page-apply .ap-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
}

.page-apply .ap-field--wide {
    grid-column: 1 / -1;
}

/* labels were #a0b5c0 on white. This is the page where a misread label
   costs money, so they are ink at 7.4:1, and sentence case — the tracked
   caps elsewhere on the site are for a plate with three lines on it, not
   for twelve labels stacked down a column. */
.page-apply .ap-field > label {
    margin: 0 0 7px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sd-ink);
}

.page-apply .ap-field input,
.page-apply .ap-field select {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid var(--ap-border);
    border-radius: 6px;
    background: #fff;
    /* 16px is the floor iOS focuses without zooming the page, and this form
       is filled in on a phone from another country more often than not */
    font-family: quasimoda, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--sd-navy);
    transition: border-color .2s var(--sd-ease), box-shadow .2s var(--sd-ease);
    appearance: none;
    -webkit-appearance: none;
}

.page-apply .ap-field select {
    /* the chevron, drawn rather than fetched */
    padding-right: 38px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2344546a' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px;
    cursor: pointer;
    text-overflow: ellipsis;
}

.page-apply .ap-field input::placeholder {
    color: #9bacb7;
}

.page-apply .ap-field input:focus,
.page-apply .ap-field select:focus {
    border-color: var(--sd-blue);
    box-shadow: 0 0 0 3px rgba(163, 36, 36, .15);
}

.page-apply .ap-field select:disabled {
    background-color: #f2f6f8;
    color: #8b9aa5;
    cursor: not-allowed;
}

.page-apply .ap-hint {
    max-width: 52ch;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.55;
    color: #66757f;
}

/* expiry: two boxes and the slash between them read as one date */
.page-apply .ap-pair {
    display: flex;
    align-items: center;
    gap: 9px;
}

.page-apply .ap-pair input {
    width: 5.2em;
    flex: none;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

.page-apply .ap-pair__sep {
    font-size: 18px;
    color: #a8b7c1;
}

/* the same emphasis on the native control, for the touch devices where
   the drawn dropdown deliberately does not run */
.page-apply .ap-choice select {
    min-height: 56px;
    font-size: 17px;
    font-weight: 600;
    border-color: var(--sd-gold);
    box-shadow: inset 0 0 0 1px rgba(218, 173, 76, .28);
}

.page-apply .ap-choice select:focus {
    border-color: var(--sd-blue);
    box-shadow: 0 0 0 3px rgba(163, 36, 36, .15);
}

/* ---------- the signature ----------
   The page's one loud moment. Nothing else here is on the navy. */
.page-apply .ap-sign {
    margin: clamp(34px, 3.6vw, 52px) calc(-1 * var(--ap-pad)) calc(-1 * var(--ap-pad));
    padding: clamp(28px, 3.1vw, 44px) var(--ap-pad) clamp(30px, 3.2vw, 46px);
    background:
        radial-gradient(116% 86% at 86% -14%, rgba(197, 49, 49, .42), rgba(197, 49, 49, 0) 64%),
        linear-gradient(168deg, #24304c 0, #1b2846 76%);
}

.page-apply .ap-sign__head {
    margin: 0;
    font-family: var(--sd-slab);
    font-weight: 400;
    font-size: clamp(21px, 1.8vw, 28px);
    line-height: 1.18;
    color: #fff;
}

.page-apply .ap-sign__lead {
    max-width: 54ch;
    margin: 10px 0 clamp(22px, 2.3vw, 30px);
    font-size: 14.5px;
    line-height: 1.62;
    color: rgba(232, 236, 244, .82);
}

.page-apply .ap-consents {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.page-apply .ap-consents li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    margin: 0;
    padding: clamp(15px, 1.5vw, 19px) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.page-apply .ap-consents li::before,
.page-apply .ap-consents li::marker {
    content: none;
}

.page-apply .ap-consents input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--sd-gold);
    cursor: pointer;
}

.page-apply .ap-consents label {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(236, 240, 247, .92);
    cursor: pointer;
}

.page-apply .ap-consents a {
    color: #ffe3a6;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 0 rgba(218, 173, 76, .7);
}

.page-apply .ap-consents a:hover,
.page-apply .ap-consents a:focus-visible {
    box-shadow: inset 0 -2px 0 0 var(--sd-gold);
}

/* initials go on a ruled line, the way they go on the paper this
   agreement stands in for — no box, one gold rule under the hand */
.page-apply .ap-signature {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    margin: clamp(24px, 2.5vw, 34px) 0 0;
}

.page-apply .ap-signature label {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(226, 232, 241, .82);
}

.page-apply .ap-signature input {
    width: 100%;
    padding: 4px 2px 8px;
    border: 0;
    border-bottom: 2px solid var(--sd-gold);
    border-radius: 0;
    background: transparent;
    font-family: var(--sd-slab);
    font-size: clamp(25px, 2.2vw, 32px);
    line-height: 1.3;
    letter-spacing: .05em;
    color: #fff;
    transition: border-color .25s var(--sd-ease);
    appearance: none;
    -webkit-appearance: none;
}

.page-apply .ap-signature input::placeholder {
    color: rgba(255, 255, 255, .3);
}

.page-apply .ap-signature input:focus {
    outline: none;
    border-bottom-color: #ffd67e;
}

.page-apply .ap-signature input:focus-visible {
    outline: 2px solid var(--cp-focus);
    outline-offset: 4px;
}

.page-apply .ap-submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin-top: clamp(26px, 2.7vw, 36px);
}

.page-apply .ap-go {
    padding: 1em 2.1em 1.1em;
    border: 0;
    border-radius: 6px;
    background: var(--sd-gold);
    font-family: quasimoda, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #1b2846;
    cursor: pointer;
    box-shadow: 0 16px 28px -14px rgba(0, 10, 26, .8);
    transition: background .3s var(--sd-ease),
                transform .3s var(--sd-ease),
                box-shadow .3s var(--sd-ease);
}

.page-apply .ap-go:hover,
.page-apply .ap-go:focus-visible {
    background: #e6bb60;
    transform: translateY(-2px);
    box-shadow: 0 22px 32px -14px rgba(0, 10, 26, .9);
}

.page-apply .ap-submit__note {
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(230, 235, 243, .82);
}

.page-apply .ap-submit__note strong {
    font-weight: 700;
    color: #fff;
}

/* the static build's reply, on the navy rather than under it */
.page-apply .ap-sign .form-note {
    flex: 1 0 100%;
    margin-top: 2px;
    background: rgba(218, 173, 76, .16);
    border-color: rgba(218, 173, 76, .55);
    color: #fbf1da;
}

/* ---------- the file ----------
   The service page's plate and seam, carrying what this application is
   and what it costs. It pins from the first scroll, so the amount is
   still on screen at the card fields — which is where it is doubted. */
.page-apply .ap-aside {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
}

.page-apply .ap-file {
    position: sticky;
    top: calc(var(--nav-h) + 22px);
    /* no overflow clipping — the service list opens out of this card */
    border: 1px solid var(--sd-gold);
    border-radius: 10px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(27, 40, 70, .06),
        0 34px 58px -26px rgba(27, 40, 70, .46);
}

/* a real element rather than a fixed-height pseudo, so the plate grows
   with the service name instead of clipping it */
.page-apply .ap-file__head {
    position: relative;
    padding: clamp(18px, 1.8vw, 23px) clamp(19px, 1.9vw, 24px) clamp(30px, 2.9vw, 38px);
    border-radius: 9px 9px 0 0;
    background:
        radial-gradient(82% 112% at 50% 0, rgba(218, 173, 76, .34), rgba(218, 173, 76, 0) 72%),
        var(--nav-bg);
}

.page-apply .ap-file__head::after {
    content: '';
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 17px;
    background: #fff;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.page-apply .ap-file__kicker {
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(252, 236, 236, .84);
}

.page-apply .ap-file__service {
    margin: 8px 0 0;
    font-family: var(--sd-slab);
    font-weight: 400;
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.28;
    color: #fff;
    text-wrap: balance;
}

.page-apply .ap-file__body {
    padding: 0 clamp(19px, 1.9vw, 24px) clamp(19px, 1.9vw, 24px);
}

.page-apply .ap-file__rows {
    margin: 0;
}

.page-apply .ap-file__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--sd-line);
}

.page-apply .ap-file__row dt {
    flex: none;
    font-size: 12.5px;
    font-weight: 600;
    color: #66757f;
}

.page-apply .ap-file__row dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    color: var(--sd-navy);
}

.page-apply .ap-file__row--fee {
    align-items: center;
    padding: 6px 0 10px;
}

/* the answer, at the size of an answer — the type the service page
   sets its price in */
.page-apply .ap-file__price {
    font-family: var(--sd-slab);
    font-weight: 400;
    font-size: clamp(29px, 2.4vw, 35px);
    line-height: 1;
    color: var(--sd-navy);
}

.page-apply .ap-file__cur {
    margin-left: 5px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #7e8d9b;
}

.page-apply .ap-file__small {
    margin: 12px 0 0;
    font-size: 12.4px;
    line-height: 1.6;
    color: #66757f;
}

/* ---------- the other fee ----------
   One application is one person, and the fee for the other half of a
   family is the thing a parent does not find out until they have paid.
   It sits under the amount, in the small type the caveats are set in,
   and the way across is a control rather than a sentence saying where to
   click. */
.page-apply .ap-file__cross {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--sd-line);
    font-size: 12.4px;
    line-height: 1.6;
    color: #66757f;
}

.page-apply .ap-file__crossgo {
    display: block;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    font-family: quasimoda, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--sd-blue);
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 -1px 0 0 rgba(163, 36, 36, .38);
    transition: color .25s var(--sd-ease), box-shadow .25s var(--sd-ease);
}

.page-apply .ap-file__crossgo:hover,
.page-apply .ap-file__crossgo:focus-visible {
    color: var(--sd-navy);
    box-shadow: inset 0 -2px 0 0 var(--sd-navy);
}

.page-apply .ap-file__back {
    display: inline-block;
    margin-top: 13px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sd-blue);
    text-decoration: none;
    box-shadow: inset 0 -1px 0 0 rgba(163, 36, 36, .38);
    transition: color .25s var(--sd-ease), box-shadow .25s var(--sd-ease);
}

.page-apply .ap-file__back:hover,
.page-apply .ap-file__back:focus-visible {
    color: var(--sd-navy);
    box-shadow: inset 0 -2px 0 0 var(--sd-navy);
}

/* someone stuck halfway down a form wants a person, not a form */
.page-apply .ap-file__help {
    margin-top: clamp(18px, 1.9vw, 24px);
    padding-top: clamp(15px, 1.6vw, 20px);
    border-top: 1px solid var(--sd-line);
}

.page-apply .ap-file__help > p {
    margin: 0;
    font-size: 12.8px;
    line-height: 1.6;
    color: #66757f;
}

.page-apply .ap-file__help a {
    display: inline-block;
    margin-top: 5px;
    font-family: var(--sd-slab);
    font-size: clamp(18px, 1.5vw, 21px);
    color: var(--sd-navy);
    text-decoration: none;
    box-shadow: inset 0 -1px 0 0 rgba(218, 173, 76, .85);
    transition: color .25s var(--sd-ease), box-shadow .25s var(--sd-ease);
}

.page-apply .ap-file__help a:hover,
.page-apply .ap-file__help a:focus-visible {
    color: var(--sd-blue);
    box-shadow: inset 0 -2px 0 0 var(--sd-gold);
}

.page-apply .ap-file__licence {
    margin: 10px 0 0;
    font-size: 11.6px;
    line-height: 1.55;
    color: #8b9aa5;
}

/* ---------- the close ----------
   The band every inner page ends on. It does not send anyone back to the
   service list from under a submit button; it answers the last question
   the form leaves open. */
.page-apply .ap-close .sd-close__lead {
    margin-bottom: 0;
}

/* ---------- narrower ---------- */
@media (max-width: 1080px) {
    .page-apply .ap-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* the file leads the form rather than following it, and stops pinning:
       a tall block you must scroll past is worse than one you read once */
    .page-apply .ap-aside {
        order: -1;
    }

    .page-apply .ap-file {
        position: relative;
        top: auto;
    }

    .page-apply .ap-file__rows {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 clamp(16px, 3vw, 30px);
        align-items: end;
    }

    .page-apply .ap-file__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .page-apply .ap-file__row dd {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .page-apply .ap-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-apply .ap-go {
        width: 100%;
        text-align: center;
    }

    .page-apply .ap-submit__note {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-apply .ap-go:hover,
    .page-apply .ap-go:focus-visible {
        transform: none;
    }
}

/* ---------- the dropdowns ----------
   A native select's list belongs to the operating system: grey, system-font,
   and on this page an alien next to the slab and the gold. All three lists
   here are drawn instead — the same trigger as every other field, the same
   plate as the file beside the form, and prices set in the type the file
   sets its price in. The native select is still underneath carrying the
   value; this is only how it looks. */
.page-apply .ap-combo {
    position: relative;
}

.page-apply .ap-combo__native {
    /* not display:none — this is still the field being submitted */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
}

/* the trigger wears exactly what the inputs beside it wear */
.page-apply .ap-combo__trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 11px 40px 11px 13px;
    border: 1px solid var(--ap-border);
    border-radius: 6px;
    background: #fff;
    font-family: quasimoda, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--sd-navy);
    text-align: left;
    transition: border-color .2s var(--sd-ease), box-shadow .2s var(--sd-ease);
    appearance: none;
    -webkit-appearance: none;
}

.page-apply .ap-combo__button {
    cursor: pointer;
}

.page-apply .ap-combo__trigger:focus,
.page-apply .ap-combo.is-open .ap-combo__trigger {
    border-color: var(--sd-blue);
    box-shadow: 0 0 0 3px rgba(163, 36, 36, .15);
    outline: none;
}

.page-apply .ap-combo__trigger:focus-visible {
    outline: 2px solid var(--cp-focus);
    outline-offset: 2px;
}

.page-apply .ap-combo__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-apply .ap-combo.is-empty .ap-combo__value {
    color: #9bacb7;
}

/* the fee rides the trigger in the type the file sets it in, so the number
   is the same object here as it is in the rail */
.page-apply .ap-combo__meta {
    flex: none;
    font-family: var(--sd-slab);
    font-size: 19px;
    line-height: 1;
    color: var(--sd-navy);
}

/* the mark on the right: a chevron that turns over when the list is open,
   or a magnifier where the list is searched */
.page-apply .ap-combo__button::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 11px;
    height: 8px;
    margin-top: -4px;
    background: currentcolor;
    color: var(--sd-ink);
    clip-path: polygon(1.4px 0, 5.5px 4.6px, 9.6px 0, 11px 1.4px, 5.5px 7.4px, 0 1.4px);
    transition: transform .2s var(--sd-ease);
}

.page-apply .ap-combo.is-open .ap-combo__button::after {
    transform: rotate(180deg);
}

.page-apply .ap-combo__input {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2344546a' stroke-width='1.6' d='M7 12.2A5.2 5.2 0 1 0 7 1.8a5.2 5.2 0 0 0 0 10.4ZM10.9 10.9 14.6 14.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 15px;
}

.page-apply .ap-combo.is-disabled .ap-combo__trigger {
    background-color: #f2f6f8;
    background-image: none;
    color: #8b9aa5;
    cursor: not-allowed;
}

/* ---------- the plate the list is drawn on ----------
   The gold hairline and the long shadow the file panel wears, so a list
   opening over the form reads as the same family of object. */
.page-apply .ap-combo__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    padding: 6px;
    border: 1px solid rgba(218, 173, 76, .62);
    border-radius: 10px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(27, 40, 70, .06),
        0 26px 50px -20px rgba(27, 40, 70, .5);
}

.page-apply .ap-combo.is-up .ap-combo__panel {
    top: auto;
    bottom: calc(100% + 6px);
}

.page-apply .ap-combo__list {
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c8d5de transparent;
}

.page-apply .ap-combo__list::-webkit-scrollbar {
    width: 9px;
}

.page-apply .ap-combo__list::-webkit-scrollbar-thumb {
    border: 3px solid #fff;
    border-radius: 9px;
    background: #c8d5de;
}

.page-apply .ap-combo__opt {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.35;
    color: var(--sd-navy);
    cursor: pointer;
}

.page-apply .ap-combo__opt::before,
.page-apply .ap-combo__opt::marker {
    content: none;
}

.page-apply .ap-combo__opt-name {
    min-width: 0;
}

.page-apply .ap-combo__opt-price {
    flex: none;
    font-family: var(--sd-slab);
    font-size: 17px;
    color: var(--sd-navy);
}

.page-apply .ap-combo__opt.is-active {
    background: #eaf4fb;
}

/* the one already chosen is marked in gold, the way the file panel is edged */
.page-apply .ap-combo__opt[aria-selected="true"] {
    font-weight: 600;
    background: #f3f8fc;
}

.page-apply .ap-combo__opt[aria-selected="true"]::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 9px;
    bottom: 9px;
    width: 2px;
    border-radius: 2px;
    background: var(--sd-gold);
}

/* the pinned few, ruled off with the page's own gold-capped hairline */
.page-apply .ap-combo__sep {
    height: 1px;
    margin: 6px 12px;
    padding: 0;
    background: linear-gradient(90deg,
        var(--sd-gold) 0, var(--sd-gold) 22px,
        var(--sd-line) 22px, var(--sd-line) 100%);
}

.page-apply .ap-combo__none {
    padding: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #66757f;
}

/* ---------- the choice that carries the fee ----------
   Larger, and edged in gold: the one control on the sheet that changes what
   everything below it costs. */
.page-apply .ap-choice .ap-combo__trigger {
    min-height: 56px;
    font-size: 17px;
    font-weight: 600;
    border-color: var(--sd-gold);
    box-shadow: inset 0 0 0 1px rgba(218, 173, 76, .28);
}

.page-apply .ap-choice .ap-combo__trigger:focus,
.page-apply .ap-choice .ap-combo.is-open .ap-combo__trigger {
    border-color: var(--sd-blue);
    box-shadow: 0 0 0 3px rgba(163, 36, 36, .15);
}

.page-apply .ap-choice .ap-combo__meta {
    font-size: 22px;
}

@media (prefers-reduced-motion: reduce) {
    .page-apply .ap-combo__button::after { transition: none; }
}

/* ---------- province or state ----------
   Canada and the United States have lists. The other 247 countries have
   regions too, and a locked grey box saying "not required" was both wrong
   and silent — a disabled control is never submitted, so that address line
   was being dropped. Whichever control is live is the one on screen. */
.page-apply #province-field[data-mode="text"] .ap-combo,
.page-apply #province-field[data-mode="text"] > select {
    display: none;
}

.page-apply #province-field[data-mode="list"] .ap-province-text,
.page-apply #province-field[data-mode="locked"] .ap-province-text {
    display: none;
}

/* ---------- the service picker, on the plate ----------
   The file names the service; naming a different one should not mean going
   back to the service list and starting again. Same control as the three on
   the sheet, dressed for the blue it stands on: a translucent trigger the
   plate shows through, and the panel below it back in the white the rest of
   the card is. */
.page-apply .ap-file__pick {
    position: relative;
    z-index: 1;
}

.page-apply .ap-file__pick .ap-file__kicker {
    display: block;
    margin-bottom: 7px;
    cursor: pointer;
}

.page-apply .ap-file__pick .ap-combo__trigger {
    min-height: 42px;
    padding: 8px 34px 9px 11px;
    border-color: rgba(255, 255, 255, .34);
    border-radius: 7px;
    background: rgba(255, 255, 255, .12);
    font-family: var(--sd-slab);
    font-size: clamp(16px, 1.32vw, 19px);
    line-height: 1.26;
    color: #fff;
}

.page-apply .ap-file__pick .ap-combo__trigger:hover {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .5);
}

.page-apply .ap-file__pick .ap-combo__trigger:focus,
.page-apply .ap-file__pick .ap-combo.is-open .ap-combo__trigger {
    border-color: var(--sd-gold);
    background: rgba(255, 255, 255, .2);
    box-shadow: 0 0 0 3px rgba(218, 173, 76, .3);
}

/* the service name is long enough to need two lines rather than an ellipsis */
.page-apply .ap-file__pick .ap-combo__value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.page-apply .ap-file__pick .ap-combo__button::after {
    right: 12px;
    color: rgba(255, 255, 255, .85);
}

.page-apply .ap-file__pick .ap-combo__panel {
    /* the rail is narrow; the list of seven full service names is not */
    left: -6px;
    right: -6px;
    min-width: 292px;
}

.page-apply .ap-file__pick .ap-combo__opt {
    font-size: 14px;
    line-height: 1.4;
}

/* the fee row says "On request" where a service has no published price,
   and the currency beside it stands down rather than reading "On request USD" */
.page-apply .ap-file__cur[hidden] {
    display: none;
}