/* Compliz landing page. Palette and rules follow 01-brief.md section C.7. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Hero wording only: Noto Sans has a width axis, which the hero title needs for its 70% stretch (client, 26 September 2026). */
@font-face {
  font-family: "Noto Sans Hero";
  src: url("/fonts/noto-sans-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef5fb;    /* light blue tint: inner panels */
  --tint: #eef5fb;         /* section band: light blue */
  --tint-grey: #f3f5f8;    /* section band: light grey */
  --border: #dbe4ee;
  --fg: #1e293b;           /* body text: slate, softer than black */
  --heading: #123a5c;      /* headings: deep blue */
  --muted: #475569;
  --navy: #0b1b33;
  --blue: #123a5c;
  --brand: #1b97b2;        /* logo teal: large shapes and icons only */
  --accent: #0e7490;       /* text-safe teal on light */
  --cta: #f59e0b;
  --cta-hover: #fbbf24;
  --cta-text: #0b1b33;
  --ok: #15803d;
  --err: #b91c1c;
  --link: #0b57d0;
  --shadow: 0 1px 3px rgba(18, 58, 92, .08), 0 6px 18px rgba(18, 58, 92, .07);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1rem/1.6 var(--font); }
img, svg { max-width: 100%; }
a { color: var(--link); }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.01em; margin: 0; color: var(--heading); }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
section[id], main[id] { scroll-margin-top: 5.5rem; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: .5rem; top: -4rem; background: #fff; color: #0b1b33; padding: .6rem 1rem; border-radius: .4rem; z-index: 100; font-weight: 600; }
.skip:focus { top: .5rem; }

.container { max-width: 70rem; margin-inline: auto; padding-inline: 1rem; }
.icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.section { padding-block: 3.5rem; }
.section-head { max-width: 42rem; margin-bottom: 2rem; }
.section-head.center { margin-inline: auto; text-align: center; }
/* Section titles. The size and weight of the small label (eyebrow) and of the section heading are swapped (client, 26 September 2026):
   the label carries the big title size, the heading carries the small label size. Colours are unchanged. To swap back, exchange the two token pairs. */
:root {
  --title-size: clamp(1.625rem, 4.5vw, 2.1rem); --title-weight: 750;   /* eyebrow: 2.1rem and weight 750, set with the section text tuner, 26 Sept 2026 (still scales down on small screens) */
  --label-size: 1.1rem; --label-weight: 700;   /* section heading: 1.1rem (17.6 px), set with the text tuner, 26 Sept 2026 */
}
.eyebrow { display: block; margin-bottom: .5rem; font-size: var(--title-size); font-weight: var(--title-weight); line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.section h2 { font-size: var(--label-size); font-weight: var(--label-weight); line-height: 1.25; }   /* line height 1.25, set with the section text tuner, 26 Sept 2026 */
/* Body text weight 350 on the landing page (set with the text tuner, 26 Sept 2026): paragraphs, list items, FAQ questions,
   quote captions and footer text. #top is the landing page body, so the other pages keep weight 400. */
:root { --body-weight: 350; }
#top main p, #top main li, #top main summary, #top main figcaption, #top .site-footer p { font-weight: var(--body-weight); }
.lede { margin: .75rem 0 0; font-size: 1rem; color: var(--muted); }
main .section-head .lede, main .quote-layout > div > .lede { line-height: 1.5; }   /* section text line height 1.5, set with the section text tuner, 26 Sept 2026 */   /* section text: 1rem (16 px), set with the text tuner, 26 Sept 2026 */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .65rem 1.4rem; border: 2px solid transparent; border-radius: .5rem;
  font: 700 1rem/1.2 var(--font); text-decoration: none; cursor: pointer; text-align: center;
}
.btn-cta { background: var(--cta); color: var(--cta-text); }
.btn-cta:hover { background: var(--cta-hover); }
.btn-cta:focus-visible { outline-color: var(--fg); }
.btn-outline { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-outline:hover { border-color: var(--accent); }
.btn-wa { background: #128c4a; color: #fff; }
.btn-wa:hover { background: #0f7a41; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* Header: white so the charcoal wordmark stays readable */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #e2e8f0; --hdr-fg: #0f172a; }
.site-header .container { display: flex; align-items: center; gap: .75rem; min-height: 4.25rem; }
.brand { display: block; line-height: 0; margin-right: auto; }
.brand img { display: block; height: 2.75rem; width: auto; }
.primary-nav ul { display: flex; gap: 1.5rem; }
/* The header row has a .75rem gap; this makes the space between the last link and the button match the 1.5rem between links. */
@media (min-width: 56rem) { .primary-nav { margin-right: .75rem; } }
.primary-nav a { color: var(--hdr-fg); font-weight: 600; font-size: .9375rem; text-decoration: none; padding: .5rem 0; }
.primary-nav a:hover { color: #0e7490; text-decoration: underline; text-underline-offset: 4px; }
.site-header .btn { min-height: 2.75rem; padding-inline: 1.1rem; font-size: .9375rem; }
.menu-btn { display: none; width: 2.75rem; height: 2.75rem; padding: 0; background: #fff; color: var(--hdr-fg); border: 1px solid #e2e8f0; border-radius: .5rem; cursor: pointer; align-items: center; justify-content: center; }
@media (max-width: 55.99rem) {
  .js .menu-btn { display: inline-flex; }
  .js .primary-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid #e2e8f0; padding: .5rem 1rem 1rem; }
  .js .primary-nav.open { display: block; }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav a { display: block; padding: .8rem .25rem; border-bottom: 1px solid #eef2f7; }
  .site-header .container { position: relative; }
  .no-js .primary-nav { order: 5; width: 100%; }
  .no-js .site-header .container { flex-wrap: wrap; padding-block: .5rem; }
  .no-js .primary-nav ul { flex-wrap: wrap; gap: .25rem 1rem; }
}
@media (max-width: 26rem) { .site-header .btn { padding-inline: .8rem; font-size: .875rem; } }

/* Hero: the lobby photo at full colour, with the text on a white panel so nothing tints the picture. */
/* The photo is its own layer so it can be zoomed and moved inside the banner: change --hero-zoom, --hero-x and --hero-y.
   Zoom 1 = the photo fills the banner; x and y are the point of the photo kept in place (0% = left or top). --hero-panel sets the text panel whiteness (default .5). */
.hero {
  --hero-zoom: 1.15; --hero-x: 5%; --hero-y: 54%;   /* chosen with the hero tuner, 26 Sept 2026 (second pass) */
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--fg); padding-block: 3.5rem 4rem; background: #3a3f47;
  /* The photo fills the first screen below the sticky header (4.25rem); the text panel is centred in it. svh keeps it right on phones whose address bar moves. */
  min-height: calc(100vh - 4.25rem); min-height: calc(100svh - 4.25rem);
  display: flex; align-items: center;
}
.hero > .container { width: 100%; }
/* Phones: the photo is wider than the screen and gets cropped. Keep the right side (the world map) in view instead of the lobby on the left (the panel stays centred so the buttons are on the first screen). */
@media (max-width: 47.99rem) { .hero { --hero-x: 78%; } }
/* The photo is a real <img> (not a CSS background) so the browser can start loading it from the first line of the page. It sits behind the text, covers the banner and keeps the zoom and position set above. */
.hero-photo { position: absolute; inset: 0; z-index: -1; display: block; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-x) var(--hero-y); transform: scale(var(--hero-zoom)); transform-origin: var(--hero-x) var(--hero-y); display: block; }
.hero-card { max-width: 41rem; padding: 2rem 2.25rem 2.25rem; background: rgba(255, 255, 255, .93); border-radius: 1rem; box-shadow: 0 12px 40px rgba(11, 27, 51, .28); }
/* Wash-out: where the browser can blur what is behind the panel, the panel is see-through so the photo shows softly and the text stays readable. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero-card { background: rgba(255, 255, 255, var(--hero-panel, .5)); -webkit-backdrop-filter: blur(3px) saturate(1.1); backdrop-filter: blur(3px) saturate(1.1); }
  .hero-card h1, .hero-card p, .hero-card .hero-cta span { text-shadow: 0 0 10px rgba(255, 255, 255, .85), 0 0 2px rgba(255, 255, 255, .9); }
}
@media (max-width: 47.99rem) { .hero { padding-block: 2rem 2.5rem; } .hero-card { padding: 1.5rem 1.25rem 1.75rem; } }
/* Hero text values chosen with the hero text tuner, 26 September 2026 (the tuner was then removed).
   Title: 2rem, weight 650, stretch 70%, letter spacing .02em, line height 1.3. Body: 1rem, weight 400.
   The sizes are fixed on every screen width. #top is needed so the weight beats the landing page body weight of 350. */
.hero h1 { font-family: "Noto Sans Hero", var(--font); font-size: 2rem; font-weight: 650; font-stretch: 70%; letter-spacing: .02em; line-height: 1.3; color: var(--heading); }
.hero p { margin: 1.1rem 0 0; font-family: "Noto Sans Hero", var(--font); font-size: 1rem; color: #1e293b; }
#top .hero p, #top .hero .hero-cta span { font-weight: 400; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.75rem; }
.hero-cta span { color: #1e293b; font-family: "Noto Sans Hero", var(--font); font-size: 1rem; }
.hero .btn { font-size: 1.0625rem; padding-inline: 1.75rem; }

/* Proof bar */
.proof { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; padding-block: 2rem; text-align: center; }
/* Three figures: three across on wider screens; on phones two across, with the odd third one centred on its own row. */
.proof-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 48rem) { .proof-grid { grid-template-columns: repeat(3, 1fr); } .proof-grid > :last-child:nth-child(odd) { grid-column: auto; } }
.proof-num { font-size: clamp(1.875rem, 5vw, 2.5rem); font-weight: 700; line-height: 1.1; color: var(--accent); }
.proof-label { margin-top: .35rem; font-size: .875rem; color: var(--muted); }

/* Service cards */
.cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; box-shadow: var(--shadow); padding: 1.5rem; display: flex; flex-direction: column; }
.card-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .75rem; background: var(--brand); color: #fff; margin-bottom: 1rem; }
.card h3 { font-size: 1.25rem; }
.card > p { margin: .5rem 0 1rem; color: var(--muted); font-size: .9375rem; }
.ticks li { position: relative; padding-left: 1.5rem; margin-bottom: .45rem; font-size: .9375rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: .9rem; height: .5rem; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: translateY(-40%) rotate(-45deg) scale(.85); }
.card details { margin-top: auto; padding-top: .5rem; }
.card summary, .faq summary { cursor: pointer; font-weight: 600; }
.card summary { color: var(--accent); font-size: .9375rem; padding: .5rem 0; }
.card details .ticks { margin-top: .5rem; }

/* Why */
.why-band { background: var(--surface); border-block: 1px solid var(--border); }
/* Section bands alternate: white, light blue, light grey */
#services, #how { background: var(--tint); }
#credentials { background: var(--tint-grey); }
.why-grid { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .why-grid { grid-template-columns: 1fr 1fr; } }
.why-item { display: flex; gap: .875rem; }
.why-item .icon { color: var(--ok); margin-top: .1rem; }
.why-item h3 { font-size: 1.0625rem; margin-bottom: .25rem; }
.why-item p { margin: 0; color: var(--muted); font-size: .9375rem; }
/* "A quote built around you": a highlight banner, full width and level with the grid's left and right edges.
   A teal accent bar and a larger title set it apart from the six ordinary items; it has no icon (client, 26 Sept 2026). */
.why-item.lead {
  grid-column: 1 / -1; align-items: center; gap: 1.25rem; padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, #e3effa 0%, #f3f8fd 100%);
  border: 1px solid #c3daee; border-left: 6px solid var(--brand); border-radius: .75rem; box-shadow: var(--shadow);
}
.why-item.lead h3 { font-size: 1.375rem; margin-bottom: .35rem; }
.why-item.lead p { font-size: 1.0625rem; color: var(--fg); }
@media (max-width: 30rem) { .why-item.lead { padding: 1.25rem 1rem; gap: .9rem; } }

/* Credentials */
.cred-group + .cred-group { margin-top: 2rem; }
.cred-group h3 { font-size: 1rem; margin-bottom: 1rem; color: var(--muted); font-weight: 600; }
.cred-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .cred-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cred-grid.four { grid-template-columns: repeat(4, 1fr); } }
.cred { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: .5rem; padding: 1rem 1.25rem; }
.cred h3 { font-size: 1rem; margin-bottom: .25rem; color: var(--heading); font-weight: 700; }
.cred p { margin: 0; font-size: .875rem; color: var(--muted); }

/* Client feedback */
.quotes { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { margin: 0; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--brand); border-radius: .75rem; box-shadow: var(--shadow); }
.quote blockquote { margin: 0; flex: 1; }
.quote blockquote p { margin: 0; font-size: 1rem; }
.quote figcaption { font-size: .875rem; font-weight: 600; color: var(--muted); }
.quote figcaption::before { content: "\2014\00a0"; }

/* Rolling carousel (with JavaScript). Without it, the cards stay in the grid above. */
.carousel-controls { display: none; }
.js .carousel-controls { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: 1rem; }
.car-btn { min-width: 2.75rem; min-height: 2.75rem; padding: 0 1rem; background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: .5rem; font: 700 1.25rem/1 var(--font); cursor: pointer; }
.car-btn:hover { border-color: var(--accent); }
.car-toggle { font-size: .9375rem; }
.js .quotes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .25rem; }
.js .quotes::-webkit-scrollbar { display: none; }
.js .quote { flex: 0 0 100%; scroll-snap-align: start; }
@media (min-width: 40rem) { .js .quote { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (min-width: 64rem) { .js .quote { flex-basis: calc((100% - 2.5rem) / 3); } }

/* Steps */
.steps { display: grid; gap: 1rem; grid-template-columns: 1fr; counter-reset: step; list-style: none; margin: 0; padding: 0; }
@media (min-width: 36rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; box-shadow: var(--shadow); padding: 1.25rem; }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .75rem; border-radius: .6rem; background: var(--blue); color: #fff; font-weight: 700; }
.step h3 { font-size: 1.0625rem; margin-bottom: .35rem; }
.step p { margin: 0; font-size: .9375rem; color: var(--muted); }
.more-link { margin-top: 1.5rem; font-weight: 600; }

/* Quote section and form */
.quote-band { background: linear-gradient(160deg, #e3effa 0%, #cfe3f5 100%); color: var(--fg); border-block: 1px solid #c3daee; }
.quote-band .lede, .quote-band li { color: var(--muted); }
.quote-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 60rem) { .quote-layout { grid-template-columns: 5fr 7fr; gap: 3rem; } }
.quote-points { margin-top: 1.5rem; display: grid; gap: 1rem; }
.quote-points li { display: flex; gap: .75rem; font-size: .9375rem; }
.quote-points .icon { color: var(--accent); margin-top: .1rem; }
.quote-points strong { display: block; color: var(--heading); }
.quote-note { margin: 1.25rem 0 0; font-size: .9375rem; color: var(--muted); }
.quote-note + .quote-note { margin-top: .4rem; }
.form-card { background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: .75rem; padding: 1.5rem; box-shadow: 0 10px 30px rgba(18, 58, 92, .16); }
.form-card h3 { font-size: 1.25rem; margin-bottom: .25rem; }
.form-card .lede { margin: 0 0 1.25rem; font-size: .9375rem; color: var(--muted); }
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field legend { padding: 0; }
.field label, .field legend { display: block; margin-bottom: .35rem; font-size: .875rem; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea, .field select {
  width: 100%; min-height: 2.75rem; padding: .6rem .8rem; font: 400 1rem/1.4 var(--font);
  color: var(--fg); background: var(--bg); border: 1px solid #94a3b8; border-radius: .5rem;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--err); }
.field-error { margin: .3rem 0 0; font-size: .8125rem; color: var(--err); font-weight: 600; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: .55rem .95rem; border: 1px solid #94a3b8; border-radius: 2rem; font-size: .875rem; font-weight: 600; background: var(--bg); }
.chip input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.field .consent { display: flex; gap: .65rem; align-items: flex-start; margin: 0; font-size: .875rem; font-weight: 400; }
.field label.chip { display: inline-block; margin: 0; font-weight: inherit; }
.consent input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; flex: none; accent-color: var(--blue); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.form-hint { margin: 0; font-size: .8125rem; color: var(--muted); }
.form-hint[hidden] { display: none; }
.form-note { margin: 1rem 0 0; font-size: .8125rem; color: var(--muted); }
.form-status { margin-top: 1rem; padding: .85rem 1rem; border-radius: .5rem; font-size: .9375rem; font-weight: 600; }
.form-status:empty { display: none; }
.form-status.ok { background: rgba(21, 128, 61, .12); color: var(--ok); border: 1px solid var(--ok); }
.form-status.bad { background: rgba(185, 28, 28, .1); color: var(--err); border: 1px solid var(--err); }
.form-status a { color: inherit; }

/* FAQ */
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.tab { min-height: 2.75rem; padding: .5rem 1.1rem; border: 1px solid var(--border); border-radius: 2rem; background: var(--surface); color: var(--fg); font: 600 .9375rem/1.2 var(--font); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.js .faq-group[hidden] { display: none; }
.no-js .tabs { display: none; }
.faq-group h3 { font-size: 1.125rem; margin: 0 0 1rem; }
.no-js .faq-group + .faq-group { margin-top: 2rem; }
.js .faq-group h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.faq { background: var(--surface); border: 1px solid var(--border); border-radius: .6rem; margin-bottom: .6rem; }
.faq summary { padding: 1rem 1.25rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--accent); flex: none; }
.faq[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 1.25rem 1.1rem; color: var(--muted); font-size: .9375rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* Contact */
.contact-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.channel { background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; box-shadow: var(--shadow); padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.channel h3 { font-size: 1.125rem; display: flex; align-items: center; gap: .6rem; }
.channel h3 .icon { color: var(--accent); }
.channel p { margin: 0; color: var(--muted); font-size: .9375rem; }
.channel .btn { margin-top: auto; }
.qr { display: none; }
@media (min-width: 48rem) {
  .qr { display: block; width: 10rem; height: 10rem; border: 1px solid var(--border); border-radius: .5rem; background: #fff; }
  .wa-tap { display: none; }
}
.wa-alt { font-size: .8125rem; }

/* WhatsApp panel inside the form: QR on larger screens, tap button on phones */
.wa-panel { margin-top: 1rem; padding: 1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: .75rem; }
.wa-panel[hidden] { display: none; }
.no-js .wa-panel[hidden] { display: block; }
/* Without JavaScript the form cannot pass the bot check, so hide the submit button; the note below the form gives the alternatives. */
.no-js .form-actions { display: none; }
.wa-panel-body { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.wa-panel-body p { margin: 0 0 .6rem; font-size: .9375rem; }
.wa-panel-body .wa-alt { font-size: .8125rem; color: var(--muted); }
.wa-panel-title { font-weight: 700; font-size: 1.0625rem !important; }
.txt-desktop { display: none; }
.wa-panel .qr { width: 10rem; height: 10rem; }
@media (min-width: 48rem) {
  .wa-panel-body { flex-direction: row; align-items: center; gap: 1.5rem; }
  .txt-desktop { display: block; }
  .txt-mobile { display: none; }
}
.response { margin: 1.5rem auto 0; max-width: 40rem; text-align: center; color: var(--muted); font-size: .9375rem; }
.response + .response { margin-top: .5rem; }

/* Footer: light so the logo needs no reversed version */
.site-footer { background: #fff; color: #0f172a; border-top: 1px solid #e2e8f0; padding-top: 2.5rem; --f-muted: #475569; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-brand img { display: block; height: 3.25rem; width: auto; margin-bottom: 1rem; }
.footer-brand p { margin: 0 0 .5rem; font-size: .9375rem; color: var(--f-muted); max-width: 28rem; }
.site-footer h2 { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--f-muted); margin-bottom: .75rem; }
.site-footer nav a { display: block; padding: .3rem 0; color: #0b57d0; font-size: .9375rem; }
.footer-bar { margin-top: 2rem; padding-block: 1.25rem; border-top: 1px solid #e2e8f0; font-size: .8125rem; color: var(--f-muted); }
.footer-bar p { margin: 0; }

/* Data protection form on the Privacy Policy page: keep the card's own type sizes inside the legal page styles */
.legal .dpo-card { margin: 1.5rem 0 1.5rem; }
.legal .dpo-card h3 { margin: 0 0 .25rem; font-size: 1.25rem; }
.legal .dpo-card .lede { margin: 0 0 1.25rem; font-size: .9375rem; }

/* Country field: type to search, with the list under the box */
.combo { position: relative; }
.combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: .25rem 0 0; padding: .25rem 0; max-height: 15rem; overflow-y: auto; list-style: none; background: #eaf3fb; border: 1px solid #9dbad6; border-radius: .5rem; box-shadow: 0 10px 30px rgba(18, 58, 92, .18); }
.combo-list[hidden] { display: none; }
.combo-list li { padding: .5rem .8rem; font-size: .9375rem; line-height: 1.3; cursor: pointer; color: var(--fg); }
.combo-list li[role="option"]:hover, .combo-list li[aria-selected="true"] { background: #cfe2f4; color: var(--heading); }
.combo-list li[aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.combo-list .combo-last-pinned { border-bottom: 1px solid #b7cee4; }
.combo-list .combo-empty { cursor: default; color: var(--muted); }
.combo input::placeholder { font-size: .875rem; }

/* Cookie consent banner: gates Google Analytics, 27 September 2026 */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 1.1rem 1rem;
  transform: translateY(100%); transition: transform .25s ease;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .15);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner-inner { max-width: 70rem; margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.cookie-banner p { margin: 0; flex: 1 1 20rem; font-size: .9375rem; line-height: 1.5; color: #e2e8f0; }
.cookie-banner p a { color: #7dd3fc; }
.cookie-banner-actions { display: flex; gap: .75rem; flex: 0 0 auto; }
.cookie-banner .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .4); }
.cookie-banner .btn-outline:hover { border-color: #fff; }
@media (max-width: 32rem) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 1rem; }
  /* In a column, the 20rem flex-basis of the text would become a 320px minimum height */
  .cookie-banner p { flex: 0 0 auto; }
  .cookie-banner-actions .btn { flex: 1 1 0; }
}

.footer-link-btn {
  display: block; width: 100%; margin: 0; padding: .3rem 0; border: 0; background: none;
  color: #0b57d0; font: inherit; font-size: .9375rem; text-align: left; cursor: pointer;
}
.footer-link-btn:hover { text-decoration: underline; }

/* Service cards on the landing page link to the service pages */
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--accent); text-decoration: underline; }
.ticks li a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.ticks li a:hover { color: var(--accent); text-decoration-color: currentColor; }
.card > .card-more { margin: auto 0 0; padding-top: .75rem; font-size: .9375rem; font-weight: 600; }
.card-more a { color: var(--accent); }

/* WhatsApp links: header button on wide screens, menu entry on narrow ones */
/* WhatsApp brand green; dark text keeps the contrast readable (white on this green is too faint) */
.site-header .btn-wa { background: #25d366; color: #0b1f14; border: 1px solid #25d366; }
.site-header .btn-wa:hover { background: #1ebe5a; border-color: #1ebe5a; }
.site-header .btn-wa:focus-visible { outline-color: #0b1f14; }
.nav-wa { display: none; }
@media (max-width: 55.99rem) { .nav-wa { display: list-item; } }
@media (max-width: 59.99rem) { .site-header .btn-wa { display: none; } }
.js .primary-nav .nav-wa a { color: #1f6f43; }