/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — CONTACT
   Page styles for /en/contact/  (namespace: .ct-)
   Built on Signal Core tokens in global.css.
   ============================================================================ */

/* Black page base for the Reveal Lift seam: every section paints its own
   opaque background, so the base colour only shows through the footer seam. */
.ct-page { background: var(--wr-black) !important; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.ct-qlink, .ct-btn, .ct-seg__opt, .ct-switch__btn, a.ct-nap__v, .ct-tlink { -webkit-tap-highlight-color: transparent; }

/* Section scaffolding ------------------------------------------------------ */
.ct-section { position: relative; z-index: 2; width: 100%; padding: clamp(96px, 13vh, 180px) var(--wr-pad-x); background: var(--wr-white); }
.ct-section--dark  { background: var(--wr-hero);  color: var(--wr-white); }
.ct-section--black { background: var(--wr-black); color: var(--wr-white); }
.ct-inner { position: relative; z-index: 4; max-width: var(--wr-max-width); margin: 0 auto; width: 100%; }
.ct-eyebrow { margin-bottom: 28px; }

.ct-h2 { font-size: clamp(28px, 3.6vw, 48px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: var(--wr-black); max-width: 20ch; text-wrap: balance; }
.ct-section--dark .ct-h2, .ct-section--black .ct-h2 { color: var(--wr-white); }
.ct-lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; color: var(--wr-black-40); max-width: 60ch; margin-top: 22px; }
.ct-section--dark .ct-lead, .ct-section--black .ct-lead { color: var(--wr-white-65); }
.ct-head--center { text-align: center; }
.ct-head--center .ct-h2, .ct-head--center .ct-lead { margin-left: auto; margin-right: auto; }

/* Buttons (mirror the Signal System action button) ------------------------- */
.ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 30px; border-radius: var(--wr-radius-pill); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--wr-black); position: relative; isolation: isolate; border: none; cursor: pointer; font-family: inherit; background: var(--wr-grad); background-size: 200% auto; animation: gradientShimmerSlow 4s ease-in-out infinite alternate; transition: transform 0.25s var(--wr-ease-out), box-shadow 0.3s ease; box-shadow: 0 8px 30px -10px #F0492366; }
.ct-btn svg { width: 15px; height: 15px; stroke: var(--wr-black); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--wr-ease-out); }
@media (hover: hover) and (pointer: fine) { .ct-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px -10px #F0492399; } .ct-btn:hover svg { transform: translateX(4px); } }
.ct-btn--ghost { background: transparent; animation: none; box-shadow: none; color: var(--wr-white); border: 1.5px solid var(--wr-white-16); }
.ct-btn--ghost svg { stroke: var(--wr-orange); }
@media (hover: hover) and (pointer: fine) { .ct-btn--ghost:hover { transform: translateY(-2px); border-color: var(--wr-orange); } }

.ct-tlink { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--wr-black); text-decoration: none; }
.ct-section--dark .ct-tlink, .ct-section--black .ct-tlink { color: var(--wr-white); }
.ct-tlink svg { width: 14px; height: 14px; stroke: var(--wr-orange); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.22s var(--wr-ease-out); }
@media (hover: hover) and (pointer: fine) { .ct-tlink:hover svg { transform: translateX(4px); } }

/* Breadcrumb --------------------------------------------------------------- */
.ct-crumb { display: inline-flex; align-items: center; gap: 9px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wr-white-45); margin-bottom: 22px; }
.ct-crumb a { color: var(--wr-white-65); text-decoration: none; transition: color 0.2s ease; }
.ct-crumb a:hover { color: var(--wr-white); }
.ct-crumb span { color: var(--wr-white-16); }
.ct-crumb b { color: var(--wr-orange); font-weight: 700; }

/* ============================================================================
   HERO — the form is the page. One DOM, three Hero Modes via .is-mode-*:
   A Signal Split (dark, copy left / form right · default)
   B Centred       (dark, copy stacked over a centred form card)
   C Daylight      (light split)
   ========================================================================== */
.ct-hero { position: relative; z-index: 2; width: 100%; background: var(--wr-hero); color: var(--wr-white); overflow: hidden; }
.ct-hero__glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(54% 46% at 84% 10%, #F0492329 0%, transparent 62%), radial-gradient(42% 40% at 2% 74%, #FFD80016 0%, transparent 56%); }
.ct-hero__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, #F2F2F212 1px, transparent 1.4px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(120% 90% at 80% 8%, #000 0%, transparent 64%); mask-image: radial-gradient(120% 90% at 80% 8%, #000 0%, transparent 64%); opacity: 0.7; }
.ct-hero__beam { position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, #F0492366 26%, #FFD80088 50%, #F0492366 74%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); opacity: 0.5; }

.ct-hero__inner { position: relative; z-index: 2; max-width: var(--wr-max-width); margin: 0 auto; min-height: 100vh; min-height: 100svh; padding: calc(var(--wr-nav-height) + 56px) var(--wr-pad-x) clamp(72px, 10vh, 120px); display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(36px, 5vw, 80px); align-items: start; }

/* Copy rail ---------------------------------------------------------------- */
.ct-rail { position: relative; }
.ct-h1 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; color: var(--wr-white); max-width: 16ch; text-wrap: balance; }
.ct-hero__sub { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.62; color: var(--wr-white-75); max-width: 48ch; margin-top: 24px; }
.ct-hero__sub strong { color: var(--wr-white); font-weight: 700; }

/* Quick-contact strip in the rail (always-visible NAP shortcuts + promise) */
.ct-quick { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
/* Contact shortcuts — clean text links (no pill backgrounds), orange icon + bold value */
.ct-quick__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; }
.ct-qlink { display: inline-flex; align-items: center; gap: 9px; padding: 4px 0; background: none; border: none; border-radius: 0; color: var(--wr-white); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; transition: color 0.2s ease; }
.ct-qlink svg { width: 17px; height: 17px; stroke: var(--wr-orange); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .ct-qlink:hover { color: var(--wr-orange); } }
.ct-promise { display: inline-flex; align-items: center; gap: 11px; font-size: 13.5px; font-weight: 600; color: var(--wr-white-75); padding-top: 4px; }
.ct-promise b { color: var(--wr-white); font-weight: 700; }
.ct-promise__dot { position: relative; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--wr-orange); box-shadow: 0 0 10px #F04923; }
.ct-promise__dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--wr-orange); animation: ctPulse 2.4s ease-out infinite; }
@keyframes ctPulse { 0% { box-shadow: 0 0 0 0 #F0492366; } 70% { box-shadow: 0 0 0 9px #F0492300; } 100% { box-shadow: 0 0 0 0 #F0492300; } }

/* ============================================================================
   FORM CARD
   ========================================================================== */
.ct-form { position: relative; border-radius: var(--wr-radius-card); padding: clamp(28px, 3vw, 40px); background: linear-gradient(180deg, #15100B, #0C0907); overflow: hidden; box-shadow: 0 50px 120px -50px #000, 0 0 0 1px var(--wr-white-08); isolation: isolate; }
.ct-form::before { content: ''; position: absolute; inset: 0; border-radius: var(--wr-radius-card); padding: 1.4px; background: linear-gradient(135deg, #F04923, #FFD80055 50%, #F0492300); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0.55; pointer-events: none; }
.ct-form__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.ct-form__title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--wr-white); }
.ct-form__req { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wr-white-45); }
.ct-form__req b { color: var(--wr-orange); }

.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; }
.ct-field { display: flex; flex-direction: column; gap: 8px; }
.ct-field--full { grid-column: 1 / -1; }
.ct-label { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wr-white-65); }
.ct-label b { color: var(--wr-orange); font-weight: 700; }
.ct-input, .ct-select, .ct-textarea { width: 100%; font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--wr-white); background: #0C0907; border: 1px solid var(--wr-white-10); border-radius: var(--wr-radius-sm); padding: 13px 15px; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; -webkit-appearance: none; appearance: none; }
.ct-input::placeholder, .ct-textarea::placeholder { color: var(--wr-white-38); font-weight: 400; }
.ct-input:focus, .ct-select:focus, .ct-textarea:focus { outline: none; border-color: var(--wr-orange); box-shadow: 0 0 0 3px #F0492326; background: #100B08; }
.ct-textarea { resize: vertical; min-height: 118px; line-height: 1.55; }
.ct-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F04923' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 42px; cursor: pointer; }
.ct-select:invalid { color: var(--wr-white-38); }
.ct-select option { color: #0D0A07; background: #fff; }

/* Segmented radio (scale) */
.ct-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ct-seg__opt { position: relative; }
.ct-seg__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ct-seg__opt span { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 8px; text-align: center; border-radius: var(--wr-radius-sm); border: 1px solid var(--wr-white-10); background: #0C0907; color: var(--wr-white-65); font-size: 13px; font-weight: 700; letter-spacing: 0.01em; transition: all 0.2s ease; }
.ct-seg__opt input:checked + span { color: var(--wr-black); background: var(--wr-grad); border-color: transparent; }
.ct-seg__opt input:focus-visible + span { box-shadow: 0 0 0 3px #F0492340; }
@media (hover: hover) and (pointer: fine) { .ct-seg__opt input:not(:checked):hover + span { border-color: var(--wr-orange); color: var(--wr-white); } }

.ct-form__foot { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ct-form .ct-btn { flex: 1; min-width: 220px; }
.ct-form__note { font-size: 12px; line-height: 1.5; color: var(--wr-white-45); flex: 1; min-width: 200px; }
.ct-form__note a { color: var(--wr-white-75); text-decoration: none; border-bottom: 1px solid var(--wr-white-16); }

/* Privacy consent — point-of-collection acknowledgment (GDPR) */
.ct-consent-wrap { margin-top: 22px; }
.ct-consent { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.ct-consent__cb { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ct-consent__mark {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--wr-white-16); border-radius: 6px;
  display: grid; place-items: center; background: var(--wr-white-08);
  transition: background .18s ease, border-color .18s ease;
}
.ct-consent__mark svg { width: 12px; height: 12px; fill: none; stroke: var(--wr-black); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .18s var(--wr-ease-out); }
.ct-consent__cb:checked + .ct-consent__mark { background: var(--wr-grad); border-color: transparent; }
.ct-consent__cb:checked + .ct-consent__mark svg { opacity: 1; transform: none; }
.ct-consent__cb:focus-visible + .ct-consent__mark { outline: 2px solid var(--wr-yellow); outline-offset: 2px; }
.ct-consent__txt { font-size: 12.5px; line-height: 1.55; color: var(--wr-white-65); }
.ct-consent__txt b { color: var(--wr-orange); }
.ct-consent__txt a { color: var(--wr-white); text-decoration: underline; text-underline-offset: 2px; }
.ct-consent-wrap.is-invalid .ct-consent__mark { border-color: #FF5B3D; }
.ct-consent-wrap.is-invalid .ct-error { display: block; margin-top: 8px; }

.ct-error { display: none; font-size: 12px; font-weight: 600; color: #FF7A5C; }
.ct-field.is-invalid .ct-input, .ct-field.is-invalid .ct-select, .ct-field.is-invalid .ct-textarea { border-color: #FF5B3D; }
.ct-field.is-invalid .ct-error { display: block; }

/* Success state */
.ct-success { display: none; flex-direction: column; align-items: flex-start; text-align: left; padding: 8px 4px; }
.ct-form.is-sent .ct-grid, .ct-form.is-sent .ct-form__foot, .ct-form.is-sent .ct-consent-wrap, .ct-form.is-sent .ct-form__head { display: none; }
.ct-form.is-sent .ct-success { display: flex; }
.ct-success__badge { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, #FFD80022, #F0492322); border: 1px solid var(--wr-white-10); margin-bottom: 22px; }
.ct-success__badge svg { width: 28px; height: 28px; stroke: var(--wr-orange); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ct-success__t { font-size: 23px; font-weight: 800; letter-spacing: -0.01em; color: var(--wr-white); }
.ct-success__d { font-size: 14.5px; line-height: 1.6; color: var(--wr-white-65); margin-top: 12px; max-width: 40ch; }
.ct-success__d b { color: var(--wr-white); }

/* ── Hero Mode B · Centred ────────────────────────────────────────────────── */
.ct-hero.is-mode-b .ct-hero__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(40px, 5vh, 60px); }
.ct-hero.is-mode-b .ct-rail { max-width: 720px; }
.ct-hero.is-mode-b .ct-h1, .ct-hero.is-mode-b .ct-hero__sub { max-width: none; margin-left: auto; margin-right: auto; }
.ct-hero.is-mode-b .ct-crumb { justify-content: center; }
.ct-hero.is-mode-b .ct-quick { align-items: center; }
.ct-hero.is-mode-b .ct-quick__row { justify-content: center; }
.ct-hero.is-mode-b .ct-form { width: 100%; max-width: 660px; text-align: left; }

/* ── Hero Mode C · Daylight (light split) ─────────────────────────────────── */
.ct-hero.is-mode-c { background: var(--wr-white); color: var(--wr-black); }
.ct-hero.is-mode-c .ct-hero__glow { background: radial-gradient(54% 46% at 84% 10%, #F0492314 0%, transparent 62%), radial-gradient(42% 40% at 2% 74%, #FFD8000F 0%, transparent 56%); }
.ct-hero.is-mode-c .ct-hero__grid { background-image: radial-gradient(circle, #0D0A0710 1px, transparent 1.4px); }
.ct-hero.is-mode-c .ct-crumb { color: var(--wr-black-40); }
.ct-hero.is-mode-c .ct-crumb a { color: var(--wr-black); }
.ct-hero.is-mode-c .ct-crumb span { color: var(--wr-black-15); }
.ct-hero.is-mode-c .ct-h1 { color: var(--wr-black); }
.ct-hero.is-mode-c .ct-hero__sub { color: var(--wr-black-40); }
.ct-hero.is-mode-c .ct-hero__sub strong { color: var(--wr-black); }
.ct-hero.is-mode-c .ct-qlink { background: none; border: none; color: var(--wr-black); }
@media (hover: hover) and (pointer: fine) { .ct-hero.is-mode-c .ct-qlink:hover { color: var(--wr-orange); } }
.ct-hero.is-mode-c .ct-promise { color: var(--wr-black-40); }
.ct-hero.is-mode-c .ct-promise b { color: var(--wr-black); }
.ct-hero.is-mode-c .ct-form { background: var(--wr-white); box-shadow: 0 1px 2px rgba(13,10,7,0.05), 0 40px 90px -50px rgba(13,10,7,0.45); }
.ct-hero.is-mode-c .ct-form::before { opacity: 0.9; background: linear-gradient(135deg, #F0492355, #FFD80033 55%, transparent); }
.ct-hero.is-mode-c .ct-form__title { color: var(--wr-black); }
.ct-hero.is-mode-c .ct-form__req { color: var(--wr-black-40); }
.ct-hero.is-mode-c .ct-label { color: var(--wr-black); }
.ct-hero.is-mode-c .ct-input, .ct-hero.is-mode-c .ct-select, .ct-hero.is-mode-c .ct-textarea { color: var(--wr-black); background: var(--wr-white); border-color: var(--wr-black-15); }
.ct-hero.is-mode-c .ct-input::placeholder, .ct-hero.is-mode-c .ct-textarea::placeholder { color: var(--wr-black-40); }
.ct-hero.is-mode-c .ct-input:focus, .ct-hero.is-mode-c .ct-select:focus, .ct-hero.is-mode-c .ct-textarea:focus { background: var(--wr-white); }
.ct-hero.is-mode-c .ct-seg__opt span { background: var(--wr-white); border-color: var(--wr-black-15); color: var(--wr-black-40); }
.ct-hero.is-mode-c .ct-form__note { color: var(--wr-black-40); }
.ct-hero.is-mode-c .ct-consent__txt { color: var(--wr-black-40); }
.ct-hero.is-mode-c .ct-consent__txt a { color: var(--wr-black); }
.ct-hero.is-mode-c .ct-consent__mark { background: var(--wr-white); border-color: var(--wr-black-15); }
.ct-hero.is-mode-c .ct-form__note a { color: var(--wr-black); border-bottom-color: var(--wr-black-15); }
.ct-hero.is-mode-c .ct-success__t { color: var(--wr-black); }
.ct-hero.is-mode-c .ct-success__d { color: var(--wr-black-40); }
.ct-hero.is-mode-c .ct-success__d b { color: var(--wr-black); }

@media (max-width: 960px) {
  .ct-hero__inner { grid-template-columns: 1fr; gap: clamp(36px, 6vh, 56px); }
}
@media (max-width: 540px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ct-seg { grid-template-columns: 1fr; }
  .ct-h1 { font-size: clamp(30px, 8.5vw, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .ct-promise__dot::after { animation: none; }
}

/* ── Hero Mode switcher (inline review control) ───────────────────────────── */
.ct-switch { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: var(--wr-radius-pill); background: #0D0A07CC; border: 1px solid var(--wr-white-16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 40px -16px #000; max-width: calc(100vw - 24px); }
.ct-switch__lab { font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--wr-white-45); padding: 0 10px 0 8px; }
.ct-switch__btn { appearance: none; border: none; cursor: pointer; height: 30px; padding: 0 14px; border-radius: var(--wr-radius-pill); background: transparent; color: var(--wr-white-75); font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; transition: background 0.2s ease, color 0.2s ease; }
.ct-switch__btn.is-active { background: var(--wr-grad); color: var(--wr-black); }
@media (max-width: 560px) { .ct-switch__lab { display: none; } }

/* ============================================================================
   WHAT TO INCLUDE — four prompts (light)
   ========================================================================== */
.ct-inc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 60px; }
.ct-inc__card { position: relative; padding: 26px 24px 28px; border-radius: var(--wr-radius-card); background: var(--wr-white); border: 1px solid var(--wr-black-08); overflow: hidden; box-shadow: 0 1px 2px rgba(13,10,7,0.04), 0 18px 40px -34px rgba(13,10,7,0.5); transition: transform 0.35s var(--wr-ease-out), border-color 0.3s ease, box-shadow 0.4s ease; }
/* Step number — the confident lead element of each card (big gradient numeral) */
.ct-inc__n { display: block; font-family: var(--wr-font); font-size: clamp(38px, 8vw, 52px); font-weight: 800; line-height: 0.92; letter-spacing: -0.03em; background: var(--wr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Icon chip sits in the top-right corner, secondary to the numeral */
.ct-inc__ic { position: absolute; top: 22px; right: 22px; width: auto; height: auto; display: block; background: none; border: none; border-radius: 0; margin: 0; }
.ct-inc__ic svg { width: 22px; height: 22px; stroke: var(--wr-orange); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ct-inc__t { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--wr-black); line-height: 1.2; margin-top: 18px; }
.ct-inc__d { font-size: 13.5px; line-height: 1.58; color: var(--wr-black-40); margin-top: 10px; }
@media (hover: hover) and (pointer: fine) { .ct-inc__card:hover { transform: translateY(-3px); border-color: var(--wr-black-15); box-shadow: 0 30px 60px -40px rgba(13,10,7,0.5); } }
@media (max-width: 900px) { .ct-inc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ct-inc { grid-template-columns: 1fr; } }

/* ============================================================================
   RESPONSE TIME — black callout band
   ========================================================================== */
.ct-resp { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(18px, 3.5vh, 32px); max-width: 820px; margin: 0 auto; }
.ct-resp__big { font-size: clamp(56px, 9vw, 104px); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; background: var(--wr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }
.ct-resp__num { font-weight: inherit; font-variant-numeric: tabular-nums; }
.ct-resp__big span { display: block; font-size: 0.26em; letter-spacing: 0.12em; text-transform: uppercase; -webkit-text-fill-color: var(--wr-white-45); margin-top: 14px; font-weight: 700; }
.ct-resp__copy { max-width: 620px; }
.ct-resp__copy h2, .ct-resp__copy p { margin-left: auto; margin-right: auto; }
.ct-resp__copy h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.02em; color: var(--wr-white); line-height: 1.15; max-width: 22ch; }
.ct-resp__copy p { font-size: clamp(15px, 1.3vw, 17px); line-height: 1.6; color: var(--wr-white-65); margin-top: 16px; max-width: 52ch; }
.ct-resp__copy p a { color: var(--wr-yellow); font-weight: 700; text-decoration: none; }
.ct-resp__copy p a:hover { text-decoration: underline; }
@media (max-width: 680px) {
  .ct-resp { gap: 26px; }
  /* Make the 24h huge on phones; keep it on one line and cap the eyebrow so it
     doesn't scale into the headline. */
  .ct-resp__big { white-space: nowrap; font-size: clamp(80px, 30vw, 160px); line-height: 0.85; }
  .ct-resp__big span { font-size: 13px; margin-top: 12px; }
}

/* Full-viewport dark stage + live Signal Atmosphere background (Waveform Drift).
   The section keeps its own Signal-Black paint; the canvas sits behind the
   content and animates brand-colour broadcast levels.
   PARALLAX: the 24h is the slower, DEEPER layer. It sits one tier below the
   neighbouring light sections (which ride at z-3) but still above the reveal-
   footer (z-1, so no bleed), and it overlaps both neighbours via negative
   margins. So the previous section flies away to REVEAL it, and the next slides
   up to COVER it; meanwhile its own content scrolls slower than the page (JS),
   so it drifts as it's uncovered. */
#response.ct-section--black { position: relative; z-index: 2; margin: -12vh 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
#response .ct-inner { position: relative; z-index: 2; width: 100%; will-change: transform; }
#response .wr-atmo-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Neighbours ride one tier above the 24h, opaque, so they reveal/cover it as
   they scroll past. They still cover the reveal-footer (z-3 > 1). */
#include, #direct { position: relative; z-index: 3; }

/* ============================================================================
   DIRECT CONTACT — full NAP grid + Brussels plate (light)
   ========================================================================== */
.ct-nap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 44px; }
/* Clean contact list — NO per-item card boxes, NO icon-chip boxes (kills the
   box-in-box-in-box). Each method is a row: plain orange icon + label, a bold
   value, a muted note, divided by a hairline rule. */
.ct-nap__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(26px, 4vw, 48px); }
.ct-nap__item { position: relative; padding: 22px 0; background: none; border: none; border-top: 1px solid var(--wr-black-10); box-shadow: none; border-radius: 0; display: flex; flex-direction: column; }
.ct-nap__item--wide { grid-column: 1 / -1; }
.ct-nap__head { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.ct-nap__ic { width: auto; height: auto; flex-shrink: 0; display: inline-flex; background: none; border: none; border-radius: 0; padding: 0; }
.ct-nap__ic svg { width: 18px; height: 18px; stroke: var(--wr-orange); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ct-nap__k { font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wr-black-40); }
.ct-nap__v { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; color: var(--wr-black); text-decoration: none; line-height: 1.2; }
a.ct-nap__v { transition: color 0.2s ease; }
a.ct-nap__v:hover { color: var(--wr-orange); }
.ct-nap__sub { font-size: 13px; line-height: 1.55; color: var(--wr-black-40); margin-top: 8px; }
.ct-nap__ph { display: inline-flex; align-items: center; font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--wr-black-40); }
.ct-nap__addr { font-size: 18px; font-weight: 700; letter-spacing: -0.005em; color: var(--wr-black); line-height: 1.45; font-style: normal; }
.ct-nap__langs { display: flex; gap: 0; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.ct-nap__lang { font-size: 16px; font-weight: 700; color: var(--wr-black); padding: 0; background: none; border: none; border-radius: 0; }
.ct-nap__lang + .ct-nap__lang::before { content: '·'; margin: 0 10px; color: var(--wr-black-15); font-weight: 700; }

/* Brussels plate (image-ready Brand Plate) */
.ct-plate { position: relative; border-radius: var(--wr-radius-card); overflow: hidden; min-height: 320px; background-color: #0D0A07; background-image: repeating-linear-gradient(135deg, #F2F2F20A 0 2px, transparent 2px 11px); display: flex; flex-direction: column; justify-content: space-between; }
.ct-plate::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 70% 30%, #F0492320, transparent 62%); pointer-events: none; }
.ct-plate__pin { position: relative; z-index: 2; margin: 26px; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wr-white); padding: 9px 14px; border-radius: var(--wr-radius-pill); background: #0D0A07AA; border: 1px solid var(--wr-white-16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ct-plate__pin svg { width: 14px; height: 14px; stroke: var(--wr-orange); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ct-plate__tag { position: relative; z-index: 2; margin: 26px; align-self: flex-start; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wr-white-65); padding: 6px 11px; border: 1px solid var(--wr-white-16); border-radius: var(--wr-radius-pill); background: #0D0A07AA; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 880px) { .ct-nap { grid-template-columns: 1fr; } .ct-plate { min-height: 240px; } }
@media (max-width: 480px) { .ct-nap__list { grid-template-columns: 1fr; } }

/* ============================================================================
   REVEAL LIFT — footer fixed beneath the page; body padding-bottom is the
   scroll room that uncovers it.
   ========================================================================== */
.ct-foot-reveal #site-footer-mount { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1; width: 100%; }
.ct-foot-reveal { padding-bottom: 55vh; }
@media (prefers-reduced-motion: reduce) {
  .ct-foot-reveal #site-footer-mount { position: static; }
  .ct-foot-reveal { padding-bottom: 0; }
}

/* ============================================================================
   RESPONSIVE & CROSS-DEVICE — layered refinements
   Tiers (max-width unless noted): ultra-wide >=1700 · laptop 1180 · tablet 960
   · landscape/large-phone 760 · phone 600 · small phone 420 · micro 360.
   Keeps the site-wide 1280 edge so hero copy still aligns with nav + footer.
   ========================================================================== */

/* — Ultra-wide: lift the hero's presence; type scales, layout stays on-grid — */
@media (min-width: 1700px) {
  .ct-h1        { font-size: clamp(56px, 3.3vw, 70px); }
  .ct-hero__sub { font-size: 20px; max-width: 50ch; }
  .ct-resp__big { font-size: clamp(96px, 7vw, 120px); }
}

/* — Laptop: relax the asymmetric hero split to even columns before stacking — */
@media (max-width: 1180px) and (min-width: 961px) {
  .ct-hero__inner { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
}

/* — Tablet & down: hero is single-column (set at 960 above). Cap the copy and
     the form so neither stretches to uncomfortable line lengths on wide tablets. */
@media (max-width: 960px) {
  /* The header is two rows (~107px) below 1024px, so clear it with real breathing
     room before the breadcrumb instead of tucking under it. */
  .ct-hero__inner { padding-top: calc(var(--wr-nav-height) + 60px); justify-items: center; }
  .ct-rail, .ct-form { max-width: 720px; margin-left: auto; margin-right: auto; }
  .ct-hero.is-mode-a .ct-form,
  .ct-hero.is-mode-c .ct-form { width: 100%; }
  /* Center all content in the first section on the stacked layout */
  .ct-rail { text-align: center; }
  .ct-crumb { justify-content: center; }
  .ct-h1, .ct-hero__sub { margin-left: auto; margin-right: auto; }
  .ct-quick { align-items: center; }
  .ct-quick__row { justify-content: center; }
  .ct-promise { justify-content: center; text-align: center; }
}

/* — Landscape phone / small tablet — (the 2-up card grid is already set by the
     900px rule; re-declaring it here would override the 480px single-column rule
     that follows it in source order, so keep this block free of .ct-inc) */
@media (max-width: 760px) {
  .ct-form__head { flex-wrap: wrap; row-gap: 4px; }
}

/* — Phone: stop iOS focus-zoom (inputs must be ≥16px), full-width primary CTA — */
@media (max-width: 600px) {
  .ct-input, .ct-select, .ct-textarea { font-size: 16px; }
  .ct-form .ct-btn   { flex: 1 1 100%; min-width: 0; width: 100%; }
  .ct-form__note     { min-width: 0; flex: 1 1 100%; }
  .ct-form__foot     { gap: 14px; }
  .ct-h1             { font-size: clamp(28px, 8.4vw, 38px); }
  .ct-hero__inner    { padding-top: calc(var(--wr-nav-height) + 66px); padding-bottom: clamp(56px, 9vh, 96px); }
  .ct-crumb          { margin-bottom: 18px; }
  .ct-resp__copy p a { word-break: break-word; }
  /* Tighten the tall section rhythm so phones aren't all whitespace */
  .ct-section        { padding-top: clamp(60px, 9vh, 92px); padding-bottom: clamp(60px, 9vh, 92px); }
  .ct-inc            { margin-top: 38px; }
  .ct-nap            { margin-top: 36px; }
  /* Stack the phone/email cards to full width before the number can wrap mid-token */
  .ct-nap__list      { grid-template-columns: 1fr; }
  .ct-nap__v         { word-break: normal; overflow-wrap: anywhere; }
}

/* — Small phone: tighten the form box, stack the quick-contact links — */
@media (max-width: 420px) {
  .ct-form        { padding: 22px 18px; border-radius: 18px; }
  .ct-quick__row  { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ct-nap__item   { padding: 22px 20px; }
  .ct-nap__v      { font-size: 17px; word-break: break-word; }
  .ct-switch__btn { padding: 0 11px; font-size: 11.5px; }
}

/* — Micro screens: never let long tokens (email, phone) force a scrollbar — */
@media (max-width: 360px) {
  .ct-crumb     { font-size: 10px; gap: 6px; }
  .ct-qlink     { font-size: 13px; }
  .ct-success__t { font-size: 20px; }
}

/* — Coarse pointers: give tap targets comfortable height regardless of width — */
@media (pointer: coarse) {
  .ct-qlink     { padding-top: 13px; padding-bottom: 13px; }
  .ct-nap__lang { padding: 8px 14px; }
}

/* ============================================================================
   COMPACT FOOTER — contact-page presentation (mobile)
   Show the footer image as a rounded inset card with breathing room on every
   side (it was full-bleed, touching the edges) and drop the redundant logo —
   the mark already sits in the header. Scoped to .ct-page so other pages that
   share the compact footer are untouched.
   ========================================================================== */
@media (max-width: 768px) {
  .ct-page .wr-fc {
    width: auto;
    margin: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px;            /* .wr-fc already has overflow:hidden, so the bg image is clipped to the rounded card */
  }
  .ct-page .wr-fc-logo { display: none; }
  /* tighten the now-card padding a touch so content doesn't crowd the rounded edge */
  .ct-page .wr-fc-card { padding-left: 22px; padding-right: 22px; }
}