/* ClarityOne Credit Inc. Self-hosted fonts under the SIL Open Font License (see /assets/fonts). */
@font-face {
  font-family: 'Inter Tight';
  src: url('/assets/fonts/inter-tight-latin-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* A calm command centre. A near-black ground drawn from the logo's teal is the dominant surface;
   light sections only where people read at length (FAQs, Payment options, policies). Hairline rules,
   square corners, a measured grid and one precise accent, kept for the call and a few structural marks.
   Colour pairs used for text are checked for WCAG AA in tests/site.test.mjs. */
:root {
  color-scheme: dark;
  --ground: #061a21;        /* the dominant surface */
  --deck: #0b222c;          /* raised panels */
  --deck-2: #10303c;        /* cells inside panels */
  --teal: #173b4c;          /* logo; the mark's fill, links on light */
  --grid: #0d242e;          /* the lattice (decorative) */
  --hair: #1b3743;          /* hairlines on dark (decorative) */
  --hair-strong: #2c5566;   /* structural rules and routes on dark (decorative) */
  --accent: #62e0cf;        /* the call, indices and the signature's exit line only */
  --accent-hover: #a3f0e5;
  --on-dark: #eaf2f3;
  --on-dark-muted: #a3bcc2;
  --ink: #061a21;           /* text on light and on the accent */
  --text: #15282f;
  --muted: #4b5f66;
  --paper: #f4f7f7;
  --white: #ffffff;
  --line: #ccd8da;
  --focus: #061a21;
  --focus-on-dark: #ffffff;
  --note-bg: #fbf0dc;
  --note-text: #5c4220;
  --note-line: #9a6b2b;
  --sans: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --bar: 76px;
  --header: 59px;         /* sticky header height, border included; kept in step with .header-inner below */
  --header-text: 2.25rem; /* the same header with enlarged text, where its labels outgrow the fixed height */
  font-family: var(--sans);
  font-size: 100%;
  line-height: 1.6;
  color: var(--on-dark);
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* For businesses has no debtor call bar, so nothing is reserved for it. */
:root:has(.page-business) { --bar: 0px; }
*, *::before, *::after { box-sizing: border-box; }
/* Anchors, the skip link and keyboard focus land clear of the sticky header and the phone call bar. */
html { scroll-padding-top: calc(max(var(--header), var(--header-text)) + 16px); scroll-padding-bottom: calc(var(--bar) + 16px); }
body { margin: 0; font-size: 1.0625rem; letter-spacing: .006em; overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
img { display: block; max-width: 100%; height: auto; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2 { font-weight: 640; color: white; letter-spacing: -.022em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem); line-height: 1; }
h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); line-height: 1.06; }
h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 620; letter-spacing: -.012em; color: white; }
p { text-wrap: pretty; }
p + p { margin-top: 1em; }
h2 + p, h3 + p { margin-top: .75rem; }
ul, ol { padding: 0; margin: 0; list-style: none; }
a { color: var(--on-dark); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus-on-dark); outline-offset: 3px; }
main:focus { outline: none; }
.nowrap { white-space: nowrap; }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.reading-width { max-width: 760px; }
.section { padding-block: 56px 64px; }
.section-intro { max-width: 680px; }
.split { display: grid; gap: 24px 72px; }
.lede { font-size: 1.1875rem; line-height: 1.5; max-width: 34em; color: var(--on-dark); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 30; top: 8px; left: 12px; padding: 12px 18px; background: var(--white); color: var(--ink); font-weight: 650; transform: translateY(-200%); }
.skip-link:focus { transform: none; outline-color: var(--accent); }

/* Structure: monospaced indices and labels. They number sections; they never read as data. */
.eyebrow, .section-rule, .index, .step-number, .call-meta strong, .contact-details dt { font-family: var(--mono); font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 1.25rem; font-size: .875rem; text-transform: uppercase; color: var(--on-dark-muted); }
.eyebrow-index { color: var(--accent); }
.eyebrow-index::after { content: ''; display: inline-block; width: 28px; height: 1px; margin-left: 14px; vertical-align: middle; background: var(--hair-strong); }
/* Every section opens on a hairline with its index at the left. */
.section-rule { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; font-size: .8125rem; color: var(--accent); }
.section-rule::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.section-rule:empty { margin-bottom: 0; }
.index { display: block; margin-bottom: 14px; font-size: .8125rem; color: var(--accent); }

/* Light sections, where people read at length. */
.light, .legal-page { background: var(--paper); color: var(--text); }
:is(.light, .legal-page) :is(h1, h2, h3) { color: var(--ink); }
:is(.light, .legal-page) a:not(.button) { color: var(--teal); }
:is(.light, .legal-page) :focus-visible { outline-color: var(--focus); }
.light .section-rule, .light .index { color: var(--teal); }
.light .section-rule::after { background: var(--line); }
.light p { font-size: 1.125rem; }

/* Preview-only marks: deliberately loud so nobody mistakes them for launch copy. */
.preview-banner { padding: 6px 16px; text-align: center; font-size: .875rem; font-weight: 600; color: var(--note-text); background: var(--note-bg); border-bottom: 1px dashed var(--note-line); }
.review-note { margin-top: 24px; padding: 14px 18px; color: var(--note-text); background: var(--note-bg); border: 1px dashed var(--note-line); border-left: 5px solid var(--note-line); font-weight: 600; }
.review-note p + p { margin-top: 2px; }

/* Licences: one line naming the provinces, from content/<lang>.json */
.licence { font-size: .9375rem; color: var(--on-dark-muted); }

/* Header: sticky without JavaScript, on the ground with a hairline. The preview strip sits above it and scrolls away.
   Once it is stuck over content, a shadow joins the hairline (browsers without scroll-state queries keep the hairline). */
.site-header { position: sticky; top: 0; z-index: 15; background: var(--ground); border-bottom: 1px solid var(--hair); container-type: scroll-state; }
.site-header::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: linear-gradient(rgb(0 0 0 / .4), rgb(0 0 0 / 0)); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
@container scroll-state(stuck: top) { .site-header::after { opacity: 1; } }
/* Slim on phones (including landscape) so the header and the call bar leave most of the screen for reading. */
.header-inner { display: flex; align-items: center; gap: 8px; min-height: 58px; }
.brand { display: block; width: 158px; margin-right: auto; }
.brand img { width: 100%; }
/* The logo is one colour; reversed to white on the dark ground. */
.site-header .brand img, .site-footer .brand img, .language-choice img { filter: brightness(0) invert(1); }
.nav-wide, .header-call { display: none; }
.language-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding-inline: 10px; font-size: .9375rem; font-weight: 600; color: var(--on-dark); text-decoration: none; }
.language-switch:hover { text-decoration: underline; }
.lang-short { font-family: var(--mono); font-weight: 500; letter-spacing: .06em; }
.lang-long { display: none; }
.nav-menu summary { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--hair-strong); font-size: .9375rem; font-weight: 600; color: var(--on-dark); cursor: pointer; list-style: none; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover { border-color: var(--on-dark-muted); }
.nav-menu[open] summary { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
.menu-bars, .menu-bars::before { display: block; width: 16px; height: 2px; background: currentColor; }
.menu-bars { position: relative; margin-top: -4px; }
.menu-bars::before { content: ''; position: absolute; top: 6px; }
.nav-menu[open] .menu-bars { margin-top: 0; transform: rotate(45deg); }
.nav-menu[open] .menu-bars::before { top: 0; transform: rotate(-90deg); }
.nav-menu nav { position: absolute; z-index: 1; left: 0; right: 0; top: 100%; max-height: calc(100dvh - var(--header) - var(--bar) - 8px); overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 20px; background: var(--deck); border-bottom: 1px solid var(--hair-strong); box-shadow: 0 24px 40px -24px rgb(0 0 0 / .7); }
/* Until the preview strip scrolls away it pushes the menu down; allow for two lines of it. */
body:has(.preview-banner) .nav-menu nav { max-height: calc(100dvh - var(--header) - var(--bar) - 8px - 3.75rem); }
.nav-menu nav a { display: flex; align-items: center; min-height: 52px; font-size: 1.1875rem; font-weight: 600; color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--hair); }
.nav-menu nav li:last-child a { border-bottom: 0; }
.nav-menu nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .35em; }

/* Buttons: square. The accent call is the most commanding thing on any screen; a hairline bezel frames the large one. */
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 12px 24px; border: 1px solid var(--on-dark); background: var(--on-dark); color: var(--ink); font-size: 1.0625rem; font-weight: 640; line-height: 1.3; text-align: center; text-decoration: none; }
.button:hover { background: white; }
.button-accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.button-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button-large { width: 100%; min-height: 64px; font-size: 1.1875rem; }
.button-large::after { content: ''; position: absolute; inset: -7px; border: 1px solid var(--hair-strong); pointer-events: none; }
.button-accent.button-large::after { border-color: rgb(98 224 207 / .45); }
.button-large:focus-visible { outline-offset: 11px; }
.button-call { font-variant-numeric: tabular-nums; }
.call-meta { margin-top: 18px; font-size: .9375rem; line-height: 1.5; color: var(--on-dark-muted); }
.call-meta strong { font-size: .8125rem; text-transform: uppercase; color: var(--accent); }
.light .call-meta { color: var(--muted); }
.light .call-meta strong { color: var(--teal); }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; font-weight: 620; text-decoration-thickness: 1px; }
.text-link .arrow { color: var(--accent); transition: transform .2s ease; }
.light .text-link .arrow { color: inherit; }
.text-link:hover .arrow { transform: translateX(4px); }

/* The measured lattice behind the first screen, the page headings and the closing call. */
.hero::before, .page-hero::before, .closing::before, .policy-heading::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 40px 40px; background-position: -1px -1px; -webkit-mask-image: linear-gradient(100deg, transparent 15%, #000 75%); mask-image: linear-gradient(100deg, transparent 15%, #000 75%); }

/* The signature drawing. Routes and the mark are hairlines; only the exit line carries the accent. */
.signature { display: block; overflow: visible; pointer-events: none; }
.sig-routes path, .sig-axis, .sig-ticks { fill: none; stroke: #3b6a7b; stroke-width: 1.25; }
.sig-axis { stroke-dasharray: 2 6; }
.sig-nodes rect { fill: var(--ground); stroke: var(--on-dark-muted); stroke-width: 1.25; }
.sig-mark path { fill: var(--teal); stroke: #4f8597; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sig-exit { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.sig-pulses { display: none; }
.sig-pulses path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: square; stroke-dasharray: 6 100; stroke-dashoffset: 6; }
@media (prefers-reduced-motion: no-preference) {
  .sig-pulses { display: inline; }
  .sig-pulses path { animation: sig-pulse 12s linear infinite both; }
  .sig-pulses path:nth-child(2) { animation-delay: 2.2s; }
  .sig-pulses path:nth-child(3) { animation-delay: 4.6s; }
  .sig-pulses path:nth-child(4) { animation-delay: 6.8s; }
  .sig-pulses path:nth-child(5) { animation-delay: 9s; }
  .sig-pulses path:nth-child(6) { animation-duration: 4s; animation-delay: 1.4s; stroke-dasharray: 18 100; stroke-dashoffset: 18; animation-name: sig-exit; }
}
@keyframes sig-pulse { 0% { stroke-dashoffset: 6; } 40%, 100% { stroke-dashoffset: -100; } }
@keyframes sig-exit { 0% { stroke-dashoffset: 18; } 60%, 100% { stroke-dashoffset: -100; } }

/* The logo's mark as a large hairline outline, cropped by its panel. */
.mark { position: absolute; z-index: 0; display: block; height: auto; fill: none; stroke: var(--hair-strong); stroke-width: 1; pointer-events: none; }
.mark path { vector-effect: non-scaling-stroke; }

/* Home: the first screen. Headline, sentence and the call; the signature sits beneath on phones and beside on wide screens. */
/* clip, not hidden: a hidden overflow would become the scroll container for the call-bar timeline. */
.hero { position: relative; display: flex; flex-direction: column; overflow: clip; padding-block: 28px 0; background: var(--ground); border-bottom: 1px solid var(--hair); }
.hero-inner { position: relative; z-index: 1; }
.hero h1 { max-width: 11em; font-size: clamp(2.375rem, .9rem + 5.6vw, 5.5rem); font-weight: 650; line-height: .98; letter-spacing: -.034em; }
.hero .lede { margin-top: 16px; }
.hero-call { margin-top: 26px; max-width: 460px; }
.hero .button-large { min-height: 68px; font-size: 1.25rem; }
.signature-hero { position: relative; z-index: 0; order: 2; width: calc(100% + 40px); max-width: none; margin: 24px -20px -4px; }
@media (max-width: 399px) {
  .hero { padding-top: 22px; }
  .hero h1 { font-size: 2.375rem; }
  .hero .lede { font-size: 1.0625rem; margin-top: 12px; }
  .hero-call { margin-top: 22px; }
  .hero .call-meta { margin-top: 14px; }
}

/* Sections on the ground */
.person h2 { max-width: 12em; font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); }
.person p { font-size: 1.125rem; }
.person .split > div > p:first-child { color: var(--on-dark); }
.person .split p { color: var(--on-dark-muted); }
.steps-section { background: var(--deck); }
.steps-section .section-intro p { font-size: 1.125rem; color: var(--on-dark-muted); }
/* The steps sit on one track, each at a station. */
.steps { display: grid; gap: 32px; margin-top: 44px; padding-left: 28px; border-left: 1px solid var(--hair-strong); }
.steps li { position: relative; }
.steps li::before { content: ''; position: absolute; left: -33px; top: 6px; width: 9px; height: 9px; background: var(--deck); border: 1px solid var(--accent); }
.step-number { display: block; font-size: .875rem; color: var(--accent); }
.steps h3 { margin-top: 6px; }
.steps p { color: var(--on-dark-muted); }
.steps-call { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--hair); max-width: 100%; }
.steps-call .button-large, .steps-call .button { width: 100%; }
/* A grid of cells divided by hairlines: options, principles, services. */
.options, .principles { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.options li, .principles li { padding: 24px 22px 26px; background: var(--ground); }
.options h3 { font-size: 1.25rem; }
.options p { margin-top: 8px; color: var(--on-dark-muted); }
.note { margin-top: 28px; color: var(--muted); }
.options-section .split > div > p { color: var(--on-dark-muted); }
.integrity { background: var(--ground); }
.integrity .section-intro > p:not(.licence) { color: var(--on-dark-muted); }
.integrity .licence { display: inline-flex; align-items: center; gap: 12px; margin-top: 1.25rem; padding: 10px 16px; border: 1px solid var(--accent); font-size: 1rem; font-weight: 600; color: white; }
.integrity .licence::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--accent); }
.integrity .licence + p { margin-top: 1.25rem; }
.principles { margin-top: 44px; }
.principles li { background: var(--deck); }
.principles p { color: var(--on-dark-muted); }
.principles .text-link { margin-top: 4px; }

/* FAQ, on light for reading */
.faq-list { border-top: 2px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; display: block; padding: 22px 60px 22px 0; font-size: 1.25rem; font-weight: 620; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { text-decoration: underline; text-underline-offset: .2em; }
.faq-symbol { position: absolute; right: 2px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border: 1px solid var(--ink); }
.faq-symbol::before, .faq-symbol::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--ink); }
.faq-symbol::before { width: 14px; height: 2px; margin: -1px 0 0 -7px; }
.faq-symbol::after { width: 2px; height: 14px; margin: -7px 0 0 -1px; }
details[open] .faq-symbol { background: var(--ink); }
details[open] .faq-symbol::before { background: white; }
details[open] .faq-symbol::after { display: none; }
.faq-answer { padding: 0 8px 28px 0; max-width: 38em; }
.faq-answer p { font-size: 1.125rem; line-height: 1.65; }

/* Closing call */
.closing { position: relative; overflow: hidden; padding-block: 64px; background: var(--deck); border-top: 1px solid var(--hair); }
.closing p { color: var(--on-dark-muted); font-size: 1.125rem; }
.closing-inner { position: relative; z-index: 1; display: grid; gap: 36px; }
.closing-call { max-width: 460px; }
.mark-closing { width: 560px; left: -330px; bottom: -170px; }

/* Inner page headings */
.page-hero, .policy-heading { position: relative; overflow: clip; padding-block: 40px 48px; background: var(--ground); border-bottom: 1px solid var(--hair); }
.page-hero-inner, .policy-heading .wrap { position: relative; z-index: 1; }
.signature-page { display: none; }
.page-hero h1 { max-width: 15em; }
.page-hero .lede { margin-top: 18px; }
.page-hero .hero-call { margin-top: 32px; }
.policy-heading h1 { font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem); }

/* Payment options: light, plain and roomy. */
.payment-options h2 + .options { margin-top: 32px; }
.light .options { background: var(--line); border-color: var(--line); }
.light .options li { background: var(--white); }
.light .options p { color: var(--text); }
.methods-section { background: var(--white); }
.methods { border-top: 2px solid var(--ink); }
.methods li { display: flex; align-items: flex-start; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--line); font-size: 1.25rem; font-weight: 620; color: var(--ink); }
.methods li::before { content: ''; flex: none; width: 9px; height: 9px; margin-top: .55em; background: var(--ink); }
.methods-section .review-note { max-width: 28em; }
.setup-section { background: var(--deck); }
.setup-section .split { align-items: center; }
.setup-section p { color: var(--on-dark-muted); }
.setup-call { max-width: 460px; }

/* Contact */
.contact-grid { display: grid; gap: 40px; }
.contact-call { padding: 32px 24px; background: var(--deck); border: 1px solid var(--hair); border-top: 2px solid var(--accent); }
.contact-call p { color: var(--on-dark-muted); }
.contact-phone { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; margin-top: 22px; font-family: var(--mono); font-size: clamp(1.4rem, 1rem + 2vw, 2.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; max-width: 100%; color: var(--accent); text-decoration-thickness: 1px; }
.contact-details { display: grid; align-content: start; border-top: 1px solid var(--hair-strong); }
.contact-details > div { padding-block: 18px; border-bottom: 1px solid var(--hair); }
.contact-details dt { font-size: .8125rem; text-transform: uppercase; color: var(--on-dark-muted); }
.contact-details dd { margin-top: 6px; font-size: 1.125rem; font-weight: 560; color: white; }
.contact-details a { overflow-wrap: anywhere; }
.contact-details .licence { font-size: inherit; color: inherit; }

/* Policies: a heading band, then the text on light at a comfortable size. */
.legal-page { padding-top: 8px; }
.legal-copy { padding-bottom: 80px; overflow-wrap: anywhere; font-size: 1.125rem; line-height: 1.7; }
.legal-copy h2 { margin: 44px 0 0; font-size: 1.375rem; font-weight: 640; letter-spacing: -.015em; line-height: 1.3; }
.legal-copy p { margin-top: 16px; }

/* For businesses: the furthest into the theme. Every service is a numbered cell. */
.page-business .page-hero + .wrap .review-note { margin-top: 32px; }
.service-list { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.service-list li { padding: 28px 22px 32px; background: var(--ground); }
.service-list h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }
.service-body { margin-top: .9rem; max-width: 38em; color: var(--on-dark-muted); }
.service-feature { position: relative; background: var(--deck) !important; }
.service-feature::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--accent); }
.service-feature .service-body { color: var(--on-dark); }
.service-tagline { margin-top: 14px; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 560; line-height: 1.25; letter-spacing: -.02em; color: var(--accent); }
.business-contact { background: var(--deck); }
.business-contact .split { align-items: center; }
.business-contact p { color: var(--on-dark-muted); }
.business-email { max-width: 520px; }
.business-email .button { max-width: 100%; overflow-wrap: anywhere; flex-wrap: wrap; column-gap: .35em; padding-inline: 16px; font-size: 1.0625rem; }
@media (min-width: 440px) { .business-email .button { padding-inline: 32px; font-size: 1.1875rem; } }

/* Footer and the phone call bar */
.site-footer { padding-block: 56px calc(var(--bar) + 24px); background: var(--ground); border-top: 1px solid var(--hair); }
.footer-grid { display: grid; gap: 28px; }
.footer-brand .brand { width: 170px; }
.footer-line { margin-top: 16px; font-size: 1.125rem; color: var(--on-dark); max-width: 18em; }
.footer-phone { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: 1.5rem; font-weight: 500; text-decoration: none; }
.footer-phone:hover { text-decoration: underline; }
.footer-contact p { margin: 4px 0 8px; max-width: 22em; color: var(--on-dark-muted); }
.footer-contact > a:last-child { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 560; }
.footer-base { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--hair); font-size: .9375rem; color: var(--on-dark-muted); }
.footer-base .licence { color: var(--on-dark-muted); }
.footer-base > * + * { margin-top: 8px; }
.mobile-call { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); background: var(--ground); border-top: 1px solid var(--hair-strong); box-shadow: 0 -12px 28px -16px rgb(0 0 0 / .8); }
.mobile-call a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding-left: 8px; color: white; text-decoration: none; }
.mobile-call-text { display: grid; line-height: 1.25; font-size: .875rem; color: var(--on-dark-muted); }
.mobile-call-text strong { font-size: 1rem; font-weight: 620; color: white; }
.mobile-call-number { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; background: var(--accent); color: var(--ink); font-weight: 680; white-space: nowrap; }
.mobile-call :focus-visible { outline-offset: 2px; }

/* Root language choice */
.language-page { display: grid; min-height: 100vh; align-content: start; }
.language-choice { width: min(640px, 100% - 40px); margin: 12vh auto 48px; text-align: center; }
.language-choice img { margin: 0 auto 28px; }
.language-choice h1 { font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); }
.language-choice h1 span { display: block; margin-top: 8px; font-size: .75em; color: var(--on-dark-muted); }
.language-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 36px; }
.language-options .button { min-width: 180px; }

@media (min-width: 440px) {
  .lang-long { display: inline; }
  .lang-short { display: none; }
  .brand { width: 176px; }
}
@media (min-width: 700px) and (min-height: 501px) {
  :root { --header: 69px; }
  .header-inner { min-height: 68px; }
}
@media (min-width: 700px) {
  .wrap { width: min(1200px, 100% - 80px); }
  .section { padding-block: 72px 96px; }
  .section-rule { margin-bottom: 44px; }
  .hero { padding-top: 64px; }
  .hero .lede { margin-top: 28px; font-size: 1.375rem; }
  .hero-call { margin-top: 40px; }
  .signature-hero { width: 100%; margin: 24px 0 -8px auto; max-width: 760px; }
  .button-large { width: auto; padding-inline: 36px; }
  .page-hero, .policy-heading { padding-block: 72px 80px; }
  .page-hero .lede { font-size: 1.375rem; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 40px 48px; padding-left: 0; padding-top: 32px; border-left: 0; border-top: 1px solid var(--hair-strong); }
  .steps li::before { left: 0; top: -37px; }
  .steps-call { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; }
  .steps-call .button-large, .steps-call .button { width: auto; }
  .steps-call .call-meta { margin-top: 0; }
  .options, .principles, .service-list { grid-template-columns: repeat(2, 1fr); }
  .options li, .principles li, .service-list li { padding: 28px 28px 32px; }
  .contact-call { padding: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid nav { grid-column: 1 / -1; }
  .footer-grid nav ul { display: flex; flex-wrap: wrap; gap: 0 28px; }
  .closing { padding-block: 96px; }
  .mark-closing { width: 820px; left: -460px; bottom: -280px; }
  .legal-copy { padding-bottom: 96px; }
}
@media (min-width: 1000px) {
  :root { --bar: 0px; --header: 85px; --header-text: 7.25rem; }
  body { font-size: 1.125rem; }
  .header-inner { min-height: 84px; gap: 4px; }
  .brand { width: 196px; flex: none; }
  .mobile-call { display: none; }
  .header-call { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-left: 12px; padding: 0 18px; background: var(--accent); color: var(--ink); font-weight: 650; white-space: nowrap; text-decoration: none; }
  .header-call:hover { background: var(--accent-hover); }
  .language-switch { margin-left: 4px; }
  .split { grid-template-columns: 5fr 7fr; align-items: start; }
  /* Wide first screen: the words hold the left, the signature runs off the right edge. */
  .hero { display: block; padding-block: 88px 104px; }
  .hero-inner { max-width: 620px; margin-left: max(40px, (100% - 1200px) / 2); margin-right: auto; width: auto; }
  .hero .lede { font-size: 1.375rem; }
  .signature-hero { position: absolute; top: 50%; right: -60px; width: min(62vw, 900px); max-width: none; margin: 0; transform: translateY(-46%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
  .page-hero-inner { max-width: 760px; margin-left: max(40px, (100% - 1200px) / 2); width: auto; }
  .signature-page { position: absolute; display: block; top: 50%; right: -80px; width: min(48vw, 680px); transform: translateY(-50%); opacity: .8; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%); mask-image: linear-gradient(90deg, transparent 0, #000 35%); }
  .principles { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 7fr 5fr; gap: 72px; align-items: start; }
  .steps { grid-template-columns: repeat(4, 1fr); gap: 36px; }
  .options-section .options { grid-template-columns: repeat(2, 1fr); }
  .page-payments .options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13em), 1fr)); }
  /* The first service and the litigation feature run full width: heading left, text right. */
  .service-list li:first-child, .service-feature { grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 7fr; column-gap: 72px; align-items: start; }
  .service-list li:first-child .service-body, .service-feature .service-body { margin-top: 0; }
  .service-list li { padding: 40px 40px 44px; }
  .service-feature { padding: 56px 40px 60px !important; }
  .closing-inner { grid-template-columns: 7fr 5fr; align-items: center; gap: 72px; }
  .closing h2 { font-size: clamp(2.5rem, 1rem + 2.6vw, 3.5rem); }
  .footer-grid { grid-template-columns: 5fr 4fr 3fr; }
  .footer-grid nav { grid-column: auto; }
  .footer-grid nav ul { display: block; }
  .site-footer { padding-bottom: 36px; }
  .legal-copy { font-size: 1.1875rem; }
}
/* On tablets an odd last cell spans the row rather than leaving a hole in the grid. */
@media (min-width: 700px) and (max-width: 999px) {
  .principles li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Only the first row of steps sits on the track. */
  .steps li:nth-child(n+3)::before { display: none; }
}
/* The full navigation needs room for the longer French labels. */
@media (min-width: 1120px) {
  .nav-menu { display: none; }
  .nav-wide { display: block; }
  .header-inner { flex-wrap: wrap; }
  .nav-wide ul { display: flex; flex-wrap: wrap; gap: 2px; }
  .nav-wide a { display: inline-flex; align-items: center; min-height: 48px; padding-inline: 10px; font-size: 1rem; font-weight: 560; color: var(--on-dark); text-decoration: none; }
  .nav-wide a:hover { text-decoration: underline; }
  .nav-wide a[aria-current] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .5em; }
  /* For businesses is for creditors: set slightly apart from the debtor pages. */
  .nav-wide li:last-child { margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--hair-strong); }
}
/* Between those widths the header call shrinks to its icon; the number stays as its accessible name. */
@media (min-width: 1120px) and (max-width: 1279px) {
  .header-call { width: 48px; padding: 0; justify-content: center; }
  .header-call span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* On Home the hero already shows a large Call button, so the bar slides in only once that button
   scrolls away. Browsers without scroll-driven animations, and reduced-motion users, keep the bar. */
@keyframes call-bar-in { from { transform: translateY(110%); visibility: hidden; } to { transform: none; visibility: visible; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 999px) and (min-height: 560px) {
    .page-home { timeline-scope: --hero-call; }
    .page-home .hero-call { view-timeline: --hero-call block; }
    .page-home .mobile-call { animation: call-bar-in linear both; animation-timeline: --hero-call; animation-range: exit 0% exit 100%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .button, .mobile-call-number, .review-note, .nav-menu summary, .header-call, .integrity .licence { border: 2px solid ButtonText; }
  .faq-symbol::before, .faq-symbol::after, .menu-bars, .menu-bars::before { background: CanvasText; }
  .mark, .signature, .button-large::after, .service-feature::before, .hero::before, .page-hero::before, .closing::before, .policy-heading::before { display: none; }
  .site-header .brand img, .site-footer .brand img, .language-choice img { filter: none; }
}
@media print {
  .site-header, .mobile-call, .skip-link, .closing, .mark, .signature { display: none; }
  body { background: white; color: black; font-size: 12pt; }
  body *, body *::before { color: black !important; background: none !important; }
  .site-footer .brand img { filter: none; }
  .wrap { width: 100%; }
  .site-footer { padding: 12pt 0 0; }
}