/* ==========================================================================
   SIBNI v4 "Madum and the Map" — site.css
   One stylesheet for the home, the static pages and the shared parts of /check.
   Tokens first, then base, layout, components and the home's eight sections in page order (v4 r8 "Breathe",
   BREATHE.md: one question per section, madum in three places, boxes only for the price cards and the form).
   Design notes: /Users/jannafta/Developer/sibni-v2-work/v4/DESIGN.md
   Fonts: Bricolage Grotesque (standard width 100) and Instrument Sans, SIL Open Font License 1.1
   (assets/fonts/OFL-*.txt). Subset to Latin, Latin-1 and Latin Extended-A
   (Maltese ċ ġ ħ ż), with metric-matched Arial fallbacks so nothing shifts.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-v5.woff2") format("woff2");
  font-weight: 500 760;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-v4.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 96.8%;
  ascent-override: 100%;
  descent-override: 29%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 101.5%;
  ascent-override: 95.5%;
  descent-override: 24.5%;
  line-gap-override: 0%;
}

:root {
  /* Brand */
  --navy: #0a245c;
  --navy-950: #06163d;
  --navy-700: #1b3a78;
  --navy-600: #2a4a86;
  --navy-300: #9fb0d3;
  --navy-200: #c4cfe4;
  --navy-100: #e3e9f4;
  --green: #5cae30;
  --green-hover: #6fbf45;
  --green-600: #3f8a1c;
  --green-700: #2d6e12;
  --green-300: #9ed27f;
  --green-100: #e4f2da;
  --green-50: #f1f8ec;
  --paper: #faefe2;
  --stone-100: #f2e4cf;
  --stone-200: #eddfc9;
  --stone-300: #e1ccaa;
  --stone-400: #cdb38b;
  --stone-500: #b79767;
  --white: #ffffff;
  --ink: #0a245c;
  --ink-2: #3b4868;
  --ink-3: #46506c;
  --line: #e6d8c2;
  --line-strong: #8c7a60;
  --alert: #a4262c;
  --alert-bg: #fbeeee;
  --focus: #0a245c;

  /* Madum tiles (original SVG tiles drawn for SIBNI, see DESIGN.md) */
  --madum-warda-honey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23F6EBDA'/%3E%3Ccircle cx='0' cy='0' r='37' fill='%23E8D5B3'/%3E%3Ccircle cx='0' cy='0' r='29' fill='none' stroke='%23F6EBDA' stroke-width='2.5'/%3E%3Ccircle cx='0' cy='0' r='15' fill='%23D6BB8E'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%23F6EBDA'/%3E%3Ccircle cx='80' cy='0' r='37' fill='%23E8D5B3'/%3E%3Ccircle cx='80' cy='0' r='29' fill='none' stroke='%23F6EBDA' stroke-width='2.5'/%3E%3Ccircle cx='80' cy='0' r='15' fill='%23D6BB8E'/%3E%3Ccircle cx='80' cy='0' r='6' fill='%23F6EBDA'/%3E%3Ccircle cx='0' cy='80' r='37' fill='%23E8D5B3'/%3E%3Ccircle cx='0' cy='80' r='29' fill='none' stroke='%23F6EBDA' stroke-width='2.5'/%3E%3Ccircle cx='0' cy='80' r='15' fill='%23D6BB8E'/%3E%3Ccircle cx='0' cy='80' r='6' fill='%23F6EBDA'/%3E%3Ccircle cx='80' cy='80' r='37' fill='%23E8D5B3'/%3E%3Ccircle cx='80' cy='80' r='29' fill='none' stroke='%23F6EBDA' stroke-width='2.5'/%3E%3Ccircle cx='80' cy='80' r='15' fill='%23D6BB8E'/%3E%3Ccircle cx='80' cy='80' r='6' fill='%23F6EBDA'/%3E%3Cg fill='%230A245C'%3E%3Cpath transform='rotate(0 40 40)' d='M40 40C44.5 35 44.5 27 40 21C35.5 27 35.5 35 40 40Z'/%3E%3Cpath transform='rotate(90 40 40)' d='M40 40C44.5 35 44.5 27 40 21C35.5 27 35.5 35 40 40Z'/%3E%3Cpath transform='rotate(180 40 40)' d='M40 40C44.5 35 44.5 27 40 21C35.5 27 35.5 35 40 40Z'/%3E%3Cpath transform='rotate(270 40 40)' d='M40 40C44.5 35 44.5 27 40 21C35.5 27 35.5 35 40 40Z'/%3E%3Ccircle cx='40' cy='31' r='2.2' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='31' r='2.2' transform='rotate(135 40 40)'/%3E%3Ccircle cx='40' cy='31' r='2.2' transform='rotate(225 40 40)'/%3E%3Ccircle cx='40' cy='31' r='2.2' transform='rotate(315 40 40)'/%3E%3C/g%3E%3Ccircle cx='40' cy='40' r='3.6' fill='%235CAE30'/%3E%3C/svg%3E");
  --madum-frieze-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Crect width='80' height='40' fill='%2306163D'/%3E%3Cpath d='M0 40V28A20 20 0 0 1 40 28V40ZM40 40V28A20 20 0 0 1 80 28V40Z' fill='%230F2D66'/%3E%3Cpath d='M7 40V29A13 13 0 0 1 33 29V40ZM47 40V29A13 13 0 0 1 73 29V40Z' fill='%2306163D'/%3E%3Ccircle cx='20' cy='32' r='3.4' fill='%235CAE30'/%3E%3Ccircle cx='60' cy='32' r='3.4' fill='%235CAE30'/%3E%3Cpath d='M40 2L44 6L40 10L36 6ZM0 2L4 6L0 10L-4 6ZM80 2L84 6L80 10L76 6Z' fill='%232A4A86'/%3E%3C/svg%3E");

  /* Type */
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", "Arial Narrow", Arial, sans-serif;
  --font-sans: "Instrument Sans", "Instrument Fallback", Arial, Helvetica, sans-serif;
  --fs-micro: .8125rem;                                  /* 13 */
  --fs-small: .875rem;                                   /* 14 */
  --fs-body: clamp(1rem, .96rem + .16vw, 1.09375rem);    /* 16 to 17.5 */
  --fs-lead: clamp(1.0625rem, .98rem + .38vw, 1.3125rem);/* 17 to 21 */
  --fs-h3: clamp(1.3125rem, 1.2rem + .45vw, 1.625rem);   /* 21 to 26 */
  --fs-h2: clamp(1.6875rem, 1.35rem + 1.2vw, 2.5rem);    /* 27 to 40: the H1 stays the one headline */
  --fs-h1: clamp(2.125rem, 1.5rem + 2.75vw, 4.25rem);    /* 34 to 68 */
  --fs-price: clamp(4.25rem, 3.4rem + 3.4vw, 7rem);      /* 68 to 112 */

  /* Space, radii, depth, motion */
  --gutter: clamp(16px, 4.2vw, 32px);
  --container: 1240px;
  --section: clamp(56px, 2.5rem + 3.2vw, 88px);
  --header-h: 68px;
  --split: minmax(0, 1fr) minmax(0, 1.08fr);
  --split-gap: clamp(40px, 5.5vw, 88px);
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(10, 36, 92, .06), 0 1px 1px rgba(10, 36, 92, .04);
  --sh-2: 0 1px 2px rgba(10, 36, 92, .05), 0 10px 28px -10px rgba(10, 36, 92, .20);
  --sh-3: 0 2px 6px rgba(10, 36, 92, .08), 0 30px 70px -24px rgba(6, 22, 61, .45);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 180ms;
  --t-slow: 420ms;
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html.smooth { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, ul, ol, figure, h1, h2, h3, h4, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -.02em; line-height: 1.04; font-weight: 620; }
h2 { font-size: var(--fs-h2); letter-spacing: -.015em; }
h3 { font-size: var(--fs-h3); letter-spacing: 0; line-height: 1.2; }
h4 { font-size: 1.125rem; letter-spacing: 0; line-height: 1.25; }
p, li { text-wrap: pretty; }
/* r10: short multi-line text balances (Firefox has balance but not pretty, and left single-word last lines). */
.dots li, .example__line, .proof__also, .part__line, .plan__desc, .stats__source, .field-hint, .form__reply, .hero__trust, .hero__hint { text-wrap: balance; }
strong, b { font-weight: 650; color: var(--navy); }
::selection { background: var(--green-100); color: var(--navy); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.gstar, .icon.gstar { fill: currentColor; stroke: none; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--navy); color: var(--white); padding: 12px 18px; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; transition: top var(--t-fast) var(--ease); }
.skip-link:focus, .skip-link:focus-visible { top: 12px; outline-color: var(--green); }
main:focus { outline: none; }

/* --------------------------------------------------------------------------
   Typography helpers (the lead and the arrow link stay for /check and the quiet pages; v4 r8: no eyebrow
   or section head is left on any page, so their rules are gone)
   -------------------------------------------------------------------------- */
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.section { padding-block: var(--section); position: relative; }
h2 + .lead { margin-top: 16px; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 650; color: var(--navy); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1.5px no-repeat;
}
.link-arrow .icon { transition: transform var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover .icon { transform: translateX(3px); } }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover { background-size: 100% 2.5px; } }
.link-arrow:active { opacity: .8; }

/* Stars: always brand green */
.stars { display: inline-flex; gap: 1px; color: var(--green); }
.stars .icon { width: 14px; height: 14px; }

/* The home's type scale (v4 r8, BREATHE.md 5.2): nine sizes at any width, exact at 390 and 1440.
   13 · 15 · body 16.5 to 17.5 · lead 18 to 20 · H3 21 to 26 · beat 28 to 36 · H2 28 to 44 · H1 35 to 56 · numerals 68 to 112 */
:root {
  --t-micro: .8125rem;
  --t-small: .9375rem;
  --t-body: clamp(16.5px, 16.13px + .0952vw, 17.5px);
  --t-lead: clamp(18px, 17.26px + .1905vw, 20px);
  --t-h3: clamp(21px, 19.14px + .4762vw, 26px);
  --t-beat: clamp(28px, 25.03px + .7619vw, 36px);
  --t-h2: clamp(28px, 22.06px + 1.5238vw, 44px);
  --t-h1: clamp(35px, 27.2px + 2vw, 56px);
  --t-num: clamp(68px, 51.66px + 4.1905vw, 112px);
  --pad: clamp(72px, 4vw + 48px, 112px);
  --gap-block: 64px;
  --gap-head: 32px;
}
@media (min-width: 768px) { :root { --gap-block: 96px; --gap-head: 48px; } }
/* The quiet pages and /check keep their own section rhythm (48px on the smallest phones). */
@media (max-width: 479px) { :root { --section: 48px; } }
body.page-home { font-size: var(--t-body); line-height: 1.55; }
:where(.page-home main) strong, :where(.page-home main) b { font-weight: 600; }
.page-home .section { padding-block: var(--pad); }
/* r10: a jump to a section lands with its H2 40px under the header, not on the band's top padding. */
.page-home main > .section[id] { scroll-margin-top: calc(24px - var(--pad)); }
:where(.page-home main) h2 { font-size: var(--t-h2); font-weight: 620; letter-spacing: -.015em; line-height: 1.05; }
:where(.page-home main) h3 { font-size: var(--t-h3); font-weight: 620; letter-spacing: -.005em; line-height: 1.15; }
:where(.page-home main) .lead { font-size: var(--t-lead); line-height: 1.55; }
.page-home main .btn { font-size: var(--t-body); font-weight: 600; }
/* A standalone text link: a 44px hit area, navy with an underline (limestone on navy). */
.text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
@media (hover: hover) and (pointer: fine) { .text-link:hover { text-decoration-thickness: 2px; } }
/* A list marked with the motto's green diamond (r11, brand critic: a SIBNI mark in place of a generic dot). */
.dots li { position: relative; padding-left: 22px; }
.dots li::before { content: ""; position: absolute; left: 2px; top: calc(.775em - 3.5px); width: 7px; height: 7px; border-radius: 1.5px; background: var(--green); transform: rotate(45deg); }

/* --------------------------------------------------------------------------
   Buttons
   Green = the free check. Navy = talk to SIBNI. Outline = WhatsApp. No shadow at rest; a filled button's edge is its fill.
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy); --btn-fg: var(--white); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border: 1.5px solid var(--btn-bd); border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-sans); font-size: 1rem; font-weight: 650; line-height: 1.2; letter-spacing: -.005em;
  text-decoration: none; text-align: center; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn .icon { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); } }
.btn:active { transform: translateY(1px) scale(.985); transition-duration: 60ms; }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn .icon:last-child:not(:first-child) { transition: transform var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn:hover .icon:last-child:not(:first-child) { transform: translateX(3px); } }
.btn--primary { --btn-bg: var(--navy); --btn-fg: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { --btn-bg: var(--navy-700); } }
.btn--primary:active { --btn-bg: var(--navy-950); }
.btn--go { --btn-bg: var(--green); --btn-fg: var(--navy); }
@media (hover: hover) and (pointer: fine) { .btn--go:hover { --btn-bg: var(--green-hover); } }
.btn--go:active { --btn-bg: #55a52b; }
.btn--outline, .btn--secondary { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--navy); }
@media (hover: hover) and (pointer: fine) { .btn--outline:hover, .btn--secondary:hover { --btn-bg: var(--navy); --btn-fg: var(--white); } }
.btn--outline:active, .btn--secondary:active { --btn-bg: var(--navy-950); --btn-bd: var(--navy-950); --btn-fg: var(--white); }
.btn--sm { min-height: 44px; padding: 9px 18px; font-size: .9375rem; }
.btn--lg { min-height: 56px; padding: 15px 28px; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }
/* r11: below 400px a label may wrap (WCAG 1.4.12: with wider letter and word spacing a nowrap label ran off the page). */
@media (max-width: 399px) { .btn { white-space: normal; text-wrap: balance; } }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; border: 1.5px solid var(--line); background: var(--white); color: var(--navy);
  text-decoration: none; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.icon-btn .icon { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { border-color: var(--navy); background: var(--stone-100); } }
.icon-btn:active { background: var(--navy-100); }

/* --------------------------------------------------------------------------
   Under construction notice and staging marks
   -------------------------------------------------------------------------- */
.site-banner { background: var(--stone-200); color: var(--navy); font-size: var(--fs-micro); font-weight: 550; line-height: 1.4; }
.site-banner__inner { display: flex; align-items: center; justify-content: center; min-height: 32px; padding-block: 6px; text-align: center; }

.site-banner__mark { display: inline-block; width: 8px; height: 8px; margin-right: 10px; vertical-align: .08em; background: var(--green); transform: rotate(45deg); border-radius: 1.5px; }
.site-banner__text { margin: 0; }
.staging-banner { background: var(--stone-200); color: var(--navy); font-size: var(--fs-micro); text-align: center; padding: 8px 16px; }
.staging [data-placeholder] { outline: 2px dashed #8a5a12; outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 239, 226, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(10,36,92,.45); background: rgba(250, 239, 226, .985); }
.site-header__row { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; border-radius: 6px; }
.brand, .brand__logo { flex: none; }
/* /check: */
.header-actions { min-width: 0; }
.page-check .header-cta .label-long { display: none; }
.page-check .header-check--again { display: none; }
@media (min-width: 560px) { .page-check .header-cta .label-long { display: inline; } .page-check .header-cta .label-short { display: none; } }
@media (min-width: 768px) and (max-width: 1099px), (min-width: 1280px) { body.page-check[data-cta-mode="report"] .header-check--again { display: inline-flex; } }
@media (max-width: 479px) { .page-check .header-cta { padding-inline: 16px; } }
@media (max-width: 359px) { .page-check .header-wa { display: none; } }
@media (max-width: 399px) { .site-header .brand__logo { width: 96px; } .site-header__row { gap: 10px; } }
.brand__logo { width: 108px; height: auto; }
.nav { display: none; }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 11px; font-size: 1rem; font-weight: 550; color: var(--navy); text-decoration: none; border-radius: 8px; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; border-radius: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease); }
.nav a.is-active::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav a:hover::after { transform: scaleX(1); } }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-check { display: none; align-items: center; gap: 8px; min-height: 44px; padding-inline: 10px; font-size: 1rem; font-weight: 600; color: var(--navy); text-decoration: none; border-radius: 8px; }
.header-check .icon { color: var(--green-700); width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .header-check:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--green); text-underline-offset: .3em; } }
.header-check:active { opacity: .8; }
.header-review { display: none; }
.header-review .label-long { display: none; }
.header-cta.is-cta-hidden { display: none; }
.nav-toggle { position: relative; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-menu { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }
.mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--paper); max-height: calc(100svh - var(--header-h)); overflow-y: auto; }
.mobile-nav.is-open { display: block; animation: navIn var(--t-slow) var(--ease-out); }
@keyframes navIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mobile-nav__links { padding-block: 8px; }
.mobile-nav__links a { display: flex; align-items: center; min-height: 52px; font-family: var(--font-display); font-size: 1.3125rem; font-weight: 600; letter-spacing: -.01em; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-nav__actions { display: grid; gap: 10px; padding-block: 16px 24px; }
.mobile-nav__check { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: var(--r-pill); border: 1.5px solid var(--navy); background: var(--white); color: var(--navy); font-weight: 650; text-decoration: none; }
.mobile-nav__check .icon { width: 20px; height: 20px; color: var(--green-700); stroke-width: 2.25; }
.mobile-nav__call { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; color: var(--navy); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.mobile-nav__call .icon { width: 18px; height: 18px; color: var(--green-700); }
body.has-menu-open { overflow: hidden; }
@media (min-width: 560px) {
  .header-review { display: inline-flex; }
}
/* The free check stays one click away in the header wherever there is room for it. */
@media (min-width: 768px) and (max-width: 1099px) { .header-check { display: inline-flex; } }
@media (min-width: 1100px) {
  :root { --header-h: 76px; }
  .brand__logo { width: 124px; }
  .nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
  .brand { margin-right: 24px; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}
@media (min-width: 1280px) {
  .header-check { display: inline-flex; }
  .header-review .label-long { display: inline; }
  .header-review .label-short { display: none; }
}
/* Header */
.header-check .label-short, .header-find { display: none; }
@media (min-width: 1100px) and (max-width: 1279px) {
  .header-check { display: inline-flex; padding-inline: 6px; }
  .header-check .label-long { display: none; }
  .header-check .label-short { display: inline; }
  .nav a { padding-inline: 9px; }
}
/* Home below 768px: one check control and one request button (r11: the home header has no WhatsApp icon at all). */
.header-find { align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 11px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--white); color: var(--navy); font-size: .9375rem; font-weight: 650; line-height: 1; text-decoration: none; white-space: nowrap; }
.header-find .icon { width: 18px; height: 18px; color: var(--green-700); stroke-width: 2.25; }
@media (hover: hover) and (pointer: fine) { .header-find:hover { border-color: var(--navy); } }
@media (max-width: 767px) { .page-home .header-find { display: inline-flex; } }
@media (max-width: 359px) { .header-find { padding-inline: 10px 12px; } }
/* The open phone menu dims the page under it (tap to close) */
@media (max-width: 1099px) {
  body.has-menu-open::after { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(6, 22, 61, .42); cursor: pointer; }
}
/* The notice bar on phones: left aligned with a hanging diamond */
@media (max-width: 559px) {
  :root { --header-h: 60px; }
  .site-banner__inner { justify-content: flex-start; text-align: left; min-height: 32px; padding-block: 6px; }
  .site-banner__text { padding-left: 18px; text-indent: -18px; }
}
.site-banner__text { text-wrap: balance; }
body:has(.site-banner) .staging-banner { display: none; }
/* v4 r9, home only: while the hero's two buttons are on screen the header holds back its request button and its
   WhatsApp icon, and while the hero's check is on screen its check links. main.js drops the classes once the twins
   scroll away; the boxes stay (no shift) and the links fade in. Without JavaScript nothing is held back. */
.site-header :is(.header-review, .header-wa, .header-check, .header-find) {
  transition: opacity var(--t-fast) var(--ease), visibility 0s, background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
/* r10: the same for the contact form (main.js observes it with the hero buttons and, r11, with the hero's check, so the
   header is back to its first-paint state there) and for the open phone menu (it carries every action itself). */
.js .site-header.is-hero-talk .header-review,
.js .site-header.is-hero-check :is(.header-check, .header-find),
body.has-menu-open .site-header :is(.header-review, .header-wa, .header-check, .header-find) { visibility: hidden; opacity: 0; transition: opacity var(--t-fast) var(--ease), visibility 0s linear var(--t-fast); }

/* --------------------------------------------------------------------------
   Business search (shared with /check; SIBNI-CHECK-SPEC 5.1)
   -------------------------------------------------------------------------- */
.bsearch { position: relative; }
.bsearch__form { margin: 0; }
.bsearch__field {
  display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 6px 0 18px;
  background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  box-shadow: 0 1px 0 rgba(10,36,92,.04), 0 12px 30px -18px rgba(10,36,92,.45);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.bsearch__field:has(.bsearch__input:focus) { border-color: var(--navy); outline: 3px solid var(--navy); outline-offset: 3px; box-shadow: 0 0 0 4px var(--green-100), 0 12px 30px -18px rgba(10,36,92,.45); }
.bsearch__icon { width: 22px; height: 22px; color: var(--navy); flex: none; }
img.bsearch__icon { opacity: .75; }
.bsearch__input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 1.0625rem; color: var(--navy); outline: none; padding: 0; }
.bsearch__input::placeholder { color: var(--ink-3); opacity: 1; }
.bsearch__input:focus-visible { outline: none; }
.bsearch__status { width: 20px; height: 20px; flex: none; display: none; }
.bsearch[data-state="loading"] .bsearch__status { display: block; border: 2px solid var(--stone-300); border-top-color: var(--navy); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bsearch__clear { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: var(--stone-100); color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .bsearch__clear:hover { background: var(--stone-200); } }
.bsearch__clear .icon { width: 18px; height: 18px; }
.bsearch__region { display: none; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-pill); background: var(--stone-100); color: var(--navy); font-size: var(--fs-small); font-weight: 600; flex: none; }
.bsearch__region .icon, .bsearch__region img { width: 16px; height: 16px; color: var(--green-700); }
.bsearch__go { min-height: 48px; height: 48px; padding: 0 20px; flex: none; }
.bsearch__go-icon { display: none; }
.bsearch__drop {
  position: absolute; top: calc(100% + 8px); left: 0; width: 100%; z-index: 40;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-3); padding: 6px 0 4px; max-height: min(var(--drop-max, 58svh), 460px); overflow-y: auto;
}
.bsearch__drop:has(#bsearch-list:empty) { max-height: none; overflow: visible; }
.bsearch__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 60px; padding: 8px 16px; cursor: pointer; }
.bsearch__row + .bsearch__row { border-top: 1px solid var(--stone-100); }
/* The keyboard row: a navy frame and bar (3:1 and more against white and the tint, WCAG 1.4.11). */
.bsearch__row.is-active { background: var(--green-50); box-shadow: inset 4px 0 0 var(--navy), inset 0 0 0 2px var(--navy); }
.bsearch__thumb { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; background: var(--stone-100); }
/* No photo: the pin glyph alone, not on a tile (BREATHE.md 5.5). */
.bsearch__thumb.bsearch__thumb--pin { background: none; color: var(--green-700); }
.bsearch__body { display: grid; min-width: 0; }
.bsearch__name { font-weight: 650; font-size: 1rem; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsearch__addr { font-size: var(--fs-small); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsearch__rate { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-small); color: var(--ink-3); }
.bsearch__rating { font-weight: 650; color: var(--navy); }
.bsearch__rate .gstar { width: 14px; height: 14px; color: var(--green); fill: var(--green); }
.bsearch__msg { padding: 14px 18px; }
.bsearch__msg-text { font-weight: 600; color: var(--navy); }
.bsearch__msg-hint { font-size: var(--fs-small); color: var(--ink-3); margin-top: 4px; }
.bsearch__msg-link { display: inline-flex; min-height: 44px; align-items: center; font-weight: 650; color: var(--navy); }
.bsearch__msg-offer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--stone-100); font-weight: 600; color: var(--navy); }
.bsearch__msg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 559px) { .bsearch__msg-actions .btn { flex: 1 1 100%; } }
.bsearch__foot { font-size: .75rem; color: var(--ink-3); padding: 8px 18px 6px; border-top: 1px solid var(--stone-100); }
@media (min-width: 768px) {
  .bsearch__region { display: inline-flex; }
}
@media (max-width: 479px) {
  .bsearch__field { height: 56px; padding: 0 5px 0 14px; }
  .bsearch__input { font-size: 1rem; }
  .bsearch__go { width: 46px; min-width: 46px; height: 46px; min-height: 46px; padding: 0; }
  .bsearch__go-label { display: none; }
  .bsearch__go-icon { display: block; }
}
/* Search list on phones */
@media (max-width: 479px) {
  .bsearch__row { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
  .bsearch__thumb { width: 40px; height: 40px; grid-row: span 2; align-self: start; }
  .bsearch__rate { grid-column: 2; }
  .bsearch__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
}
@media (hover: hover) { .bsearch__row:hover:not(.is-active) { background: var(--paper); } }
/* The Check button's focus ring sits inside the search pill's own frame */
.bsearch__go:focus-visible { outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--white); }
.bsearch__region { height: auto; padding: 0 10px 0 4px; background: none; color: var(--ink-3); font-weight: 500; }
.bsearch__short { margin: 8px 4px 0; font-size: var(--fs-small); font-weight: 600; color: var(--navy); }

/* --------------------------------------------------------------------------
   Madum and the pin (the hero wall, the local-work islands, and the art of /check, thank-you and 404)
   -------------------------------------------------------------------------- */
.isle { position: absolute; aspect-ratio: 1000 / 890; }
.isle::before, .isle__tiles { content: ""; position: absolute; inset: 0; -webkit-mask: url("../svg/malta-mask.svg") center / 100% 100% no-repeat; mask: url("../svg/malta-mask.svg") center / 100% 100% no-repeat; }
.isle--main::before, .isle--main .isle__tiles { -webkit-mask-image: url("../svg/malta-main-mask.svg"); mask-image: url("../svg/malta-main-mask.svg"); }
.isle::before { background: var(--stone-100); transform: scale(1.012); filter: drop-shadow(0 16px 22px rgba(0,0,0,.4)); }
.isle__tiles { background: var(--madum-warda-honey) center / 30px 30px; }
.brand-pin { display: block; fill: var(--green); stroke: none; overflow: visible; }

/* --------------------------------------------------------------------------
   1. Hero: the motto, the H1, the two brief buttons, the trust line, the free check, the phone on the navy wall
   -------------------------------------------------------------------------- */
.hero { position: relative; padding-block: 24px 40px; }
.hero__grid { display: grid; gap: var(--gap-block); grid-template-columns: minmax(0, 1fr); }
.hero__main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.motto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-family: var(--font-display); font-size: var(--t-body); font-weight: 620; line-height: 1.3; color: var(--navy); }
.motto__sep { width: 7px; height: 7px; background: var(--green); transform: rotate(45deg); border-radius: 1.5px; flex: none; }
@media (max-width: 349px) { .hero .motto { gap: 4px 10px; font-size: var(--t-small); } }
.hero__title { margin-top: 16px; max-width: 16ch; font-size: var(--t-h1); font-weight: 620; letter-spacing: -.02em; line-height: 1.04; }
/* The green words of the H1 and the contact H2 (r10): green-600, the one display green for text (shared with the stat suffixes). */
.hl { color: var(--green-600); }
.hero__sub { margin-top: 24px; max-width: 34em; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
/* vuk-oct1: the free check right under the subheading, then the two buttons (Vuk, 1 October). */
.hero__ctas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 28px; }
.hero__ctas .btn { font-size: var(--t-body); }
.hero__trust { order: 2; margin-top: 24px; font-size: var(--t-small); line-height: 1.45; color: var(--ink-3); }
.hero__check { position: relative; z-index: 30; width: 100%; margin-top: 32px; }
.hero__check-title { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.005em; line-height: 1.2; }
.hero__check .bsearch { margin-top: 12px; }
.hero .bsearch__field { height: 56px; border: 1px solid var(--stone-300); box-shadow: none; }
.hero .bsearch__field:has(.bsearch__input:focus) { border-color: var(--navy); box-shadow: 0 0 0 4px var(--green-100); }
.hero .bsearch__go { font-size: var(--t-body); }
.hero .bsearch__go-label { display: inline; }
.hero__hint { margin-top: 10px; max-width: 60ch; font-size: var(--t-small); line-height: 1.45; color: var(--ink-3); }
/* The open dropdown covers the hint; its first letter no longer shows through the panel's rounded corner. */
.bsearch:has(> .bsearch__drop:not([hidden])) ~ .hero__hint { visibility: hidden; }
@media (max-width: 479px) {
  .hero .bsearch__go { width: auto; min-width: 0; padding: 0 18px; }
  /* r11: a lighter first phone screen. The brief's two buttons at 48px (8px apart), the check title at the lead size
     so the H1 is the screen's one headline, and the room saved goes above the check, so it reads as its own group. */
  .hero__ctas { gap: 8px; }
  .hero__ctas .btn--lg { min-height: 48px; padding-block: 11px; }
  .hero__check { margin-top: 28px; }
  .hero__check-title { font-size: var(--t-lead); line-height: 1.3; }
}
@media (max-width: 339px) { .hero .bsearch__go { padding: 0 14px; } .hero .bsearch__field { padding-left: 12px; gap: 6px; } }
/* Phones: the two brief buttons fill their line, the same width as the field under them. */
@media (max-width: 559px) { .hero__ctas .btn { flex: 1 1 auto; } }
/* Phones: the art follows the check at 32px (its navy edge shows on the first screen) and the trust line closes
   the hero after the caption, still after the check group (decision 83). */
@media (max-width: 767px) {
  .hero__grid { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .hero__main { display: contents; }
  .hero__art { order: 1; align-self: stretch; margin-top: 32px; }
  .hero__trust { order: 2; margin-top: 32px; font-size: var(--t-body); color: var(--ink-2); }
}
@media (min-width: 768px) {
  .hero__trust { order: 0; margin-top: 16px; }
  .hero .bsearch__field { height: 60px; }
}

/* The art: the navy wall with Malta in madum and the pin, the phone standing in front of it. */
.hero__art { position: relative; isolation: isolate; }
.hero__wall { position: absolute; z-index: -1; inset: 0; border-radius: var(--r-xl); background: var(--navy); overflow: hidden; container-type: size; }
.hero__isle { position: absolute; aspect-ratio: 1000 / 890; }
.hero__isle .isle__tiles { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23F6EBDA'/%3E%3Ccircle cx='0' cy='0' r='37' fill='%23EEDFC4'/%3E%3Ccircle cx='0' cy='0' r='29' fill='none' stroke='%23F6EBDA' stroke-width='2.5'/%3E%3Ccircle cx='0' cy='0' r='15' fill='%23E3CCA5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%23F6EBDA'/%3E%3Ccircle cx='80' cy='0' r='37' fill='%23EEDFC4'/%3E%3Ccircle cx='80' cy='0' r='29' fill='none' stroke='%23F6EBDA' stroke-width='2.5'/%3E%3Ccircle cx='80' cy='0' r='15' fill='%23E3CCA5'/%3E%3Ccircle cx='80' cy='0' r='6' fill='%23F6EBDA'/%3E%3Ccircle cx='0' cy='80' r='37' fill='%23EEDFC4'/%3E%3Ccircle cx='0' cy='80' r='29' fill='none' stroke='%23F6EBDA' stroke-width='2.5'/%3E%3Ccircle cx='0' cy='80' r='15' fill='%23E3CCA5'/%3E%3Ccircle cx='0' cy='80' r='6' fill='%23F6EBDA'/%3E%3Ccircle cx='80' cy='80' r='37' fill='%23EEDFC4'/%3E%3Ccircle cx='80' cy='80' r='29' fill='none' stroke='%23F6EBDA' stroke-width='2.5'/%3E%3Ccircle cx='80' cy='80' r='15' fill='%23E3CCA5'/%3E%3Ccircle cx='80' cy='80' r='6' fill='%23F6EBDA'/%3E%3Cg fill='%231B3A78'%3E%3Cpath transform='rotate(0 40 40)' d='M40 40C44.5 35 44.5 27 40 21C35.5 27 35.5 35 40 40Z'/%3E%3Cpath transform='rotate(90 40 40)' d='M40 40C44.5 35 44.5 27 40 21C35.5 27 35.5 35 40 40Z'/%3E%3Cpath transform='rotate(180 40 40)' d='M40 40C44.5 35 44.5 27 40 21C35.5 27 35.5 35 40 40Z'/%3E%3Cpath transform='rotate(270 40 40)' d='M40 40C44.5 35 44.5 27 40 21C35.5 27 35.5 35 40 40Z'/%3E%3Ccircle cx='40' cy='31' r='2.2' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='31' r='2.2' transform='rotate(135 40 40)'/%3E%3Ccircle cx='40' cy='31' r='2.2' transform='rotate(225 40 40)'/%3E%3Ccircle cx='40' cy='31' r='2.2' transform='rotate(315 40 40)'/%3E%3C/g%3E%3Ccircle cx='40' cy='40' r='3.6' fill='%235CAE30'/%3E%3C/svg%3E") center / 52px 52px; } /* r11: 52px tiles, about a third as many motifs, so the phone carries the art */
.hero__note { font-size: var(--t-micro); line-height: 1.45; color: var(--ink-3); text-wrap: balance; }

/* Phones and tablets: the phone rises out of the wall under the text, cropped at 280px, the caption under the crop. */
@media (max-width: 1023px) {
  .hero__art { display: grid; }
  .hero__wall { position: relative; grid-area: 1 / 1; height: 280px; }
  .hero .phone--hero { grid-area: 1 / 1; --pw: 232px; margin: 28px 0 0 20px; height: 252px; overflow: hidden; border-radius: 46px 46px 0 0; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 0 3px rgba(0,0,0,.35); }
  .phone--hero .phone__screen { height: calc(var(--pw) * 600 / 292 - 18px); }
  .phone--hero .ps-sheet { display: none; }
  .hero__isle { width: 200cqw; left: calc(78cqw - 152.8cqw); top: calc(46cqh - 106.1cqw); clip-path: inset(0 0 0 calc(6px + 232px + 74.8cqw)); }
  .hero__note { margin-top: 8px; }
}
/* r11, 480 to 1023: the island's north coast sits inside the wall, 20px under its top, tucked 20px behind the phone,
   and sized so its east end stops 16px short of the wall's edge; only the south runs off the crop. So it reads as
   Malta, not as a strip of tiles cut at both edges. The main island fills x .3532 to .972 and y .318 of its box. */
@media (min-width: 480px) and (max-width: 1023px) {
  .hero__isle { --iw: calc((100cqw - 248px) / .619); width: var(--iw); left: calc(232px - .3532 * var(--iw)); top: calc(20px - .318 * var(--iw)); clip-path: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero .phone--hero { --pw: 250px; margin-left: 40px; }
  .hero__isle { --iw: min(calc((100cqw - 286px) / .619), 900px); left: calc(270px - .3532 * var(--iw)); }
}

/* Laptops: two columns, the copy centred against the wall, the caption inside the wall at its foot. */
@media (min-width: 1024px) {
  .hero { padding-block: 32px 48px; }
  .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: clamp(32px, 4vw, 56px); } /* r11: 56px from 1400px, so 1600 and 1920 keep the 1440 hero */
  .hero__main { align-self: center; }
  .motto { margin-top: 0; }
  .hero__title { margin-top: 16px; max-width: 15ch; }
  .hero__sub { margin-top: 24px; }
  .hero__check { margin-top: 32px; }
  .hero__ctas { margin-top: 28px; }
  .hero__art { display: grid; align-content: center; justify-items: start; min-height: 640px; padding: 32px 0 72px 7%; }
  .hero .phone--hero { --pw: 256px; }
  .hero__isle { width: 136cqw; left: calc(70cqw - 103.9cqw); top: calc(47cqh - 72.14cqw); }
  .hero__note { position: absolute; left: 7%; right: 24px; bottom: 24px; color: var(--navy-200); }
}
/* 1024 to 1279: a slimmer phone further left, and a larger Malta moved with it (r11: the island was a 6% sliver at
   1024), so its bays and tiles show beside the phone, about the share of the wall they take at 1440. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__art { padding-left: 3%; }
  .hero .phone--hero { --pw: 224px; }
  .hero .phone--hero .ps-search { margin-top: 6px; } /* the pin's label clears the search pill in the slimmer phone */
  .hero__isle { width: 165cqw; left: calc(58cqw - 126cqw); top: calc(42cqh - 87.6cqw); }
}
@media (min-width: 1024px) and (max-width: 1099px) { .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
/* Short laptop screens (1280x720, 1366x768, 1536x864): the H1 at 52px, tighter steps, the check on the first screen. */
@media (min-width: 1024px) and (max-height: 879px) {
  .hero { padding-block: 24px 40px; }
  .hero__title { font-size: min(var(--t-h1), 52px); max-width: 17ch; }
  .page-home main h2:not(.hero__check-title) { font-size: min(var(--t-h2), 41.5px); }
  .hero__title { margin-top: 12px; }
  .hero__sub { margin-top: 16px; }
  .hero__check { margin-top: 24px; }
  .hero__ctas { margin-top: 20px; }
  .hero__art { min-height: 600px; }
}
@media (min-width: 1024px) and (max-height: 767px) {
  .hero__sub { font-size: var(--t-body); }
  .hero__check { margin-top: 20px; }
  .hero__ctas { margin-top: 16px; }
  .hero__trust { margin-top: 12px; }
}
@media (max-width: 380px) and (max-height: 700px) {
  .hero { padding-top: 16px; }
  .hero__check { margin-top: 20px; }
  .hero__ctas { margin-top: 20px; }
}

/* --------------------------------------------------------------------------
   The example phone (hero only)
   -------------------------------------------------------------------------- */
.phone {
  --pw: min(78vw, 292px);
  position: relative; width: var(--pw); aspect-ratio: 292 / 600;
  padding: 9px; border-radius: 46px;
  background: linear-gradient(145deg, #1b2f5e, #07132f 55%, #13244d);
  box-shadow: var(--sh-3), inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 0 3px rgba(0,0,0,.35);
}
.phone::before { /* the camera island */
  content: ""; position: absolute; top: 18px; left: 50%; z-index: 5; width: 30%; height: 22px; transform: translateX(-50%);
  border-radius: 20px; background: #050b1d;
}
/* The screen is painted by the map and the listing sheet. Its own fill is the map's paper. */
.phone__screen {
  position: relative; height: 100%; overflow: hidden; border-radius: 37px;
  background-image: linear-gradient(#f2e7d5, #f2e7d5); font-family: var(--font-sans); color: var(--navy);
  font-size: 12px; font-weight: 400; line-height: 1.35;
  container-type: inline-size;
}
.ps-top { position: absolute; z-index: 3; inset: 0 0 auto; padding: 12px 14px 0; }
.ps-status { display: flex; justify-content: space-between; align-items: center; padding: 3px 12px 0; height: 22px; font-weight: 600; font-size: 11.5px; }
.ps-status__r { display: inline-flex; gap: 3px; align-items: flex-end; }
.ps-status__r i { width: 3px; background: var(--navy); border-radius: 1px; }
.ps-status__r i:nth-child(1) { height: 5px; } .ps-status__r i:nth-child(2) { height: 7px; } .ps-status__r i:nth-child(3) { height: 9px; }
.ps-search {
  display: flex; align-items: center; gap: 8px; margin-top: 16px; height: 40px; padding: 0 14px;
  background: var(--white); border-radius: var(--r-pill); box-shadow: 0 4px 14px -6px rgba(10,36,92,.35);
  font-size: 13px; font-weight: 400; color: var(--navy); white-space: nowrap; overflow: hidden;
}
.ps-search .icon { width: 16px; height: 16px; color: var(--navy); }
.ps-map { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 360 / 560; }
.ps-map__art { width: 100%; height: 100%; font-family: var(--font-sans); }
.ps-chosen { position: absolute; left: 55.6%; top: 51.8%; width: 34px; height: 44px; margin: -44px 0 0 -17px; z-index: 2; }
/* The phone's "Your business" pin is Vuk's cutout pin (the wordmark's), with a white halo on the map. */
.ps-chosen__pin.brand-pin { width: 100%; height: 100%; fill: var(--green); filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 6px 8px rgba(10, 36, 92, .35)); }
.ps-chosen::before { /* ground pulse */
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 18px; height: 8px; margin-left: -9px; border-radius: 50%;
  background: rgba(92,174,48,.45); animation: pinPulse 1.8s var(--ease-out) 3;
}
@keyframes pinPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.ps-chosen__label {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  max-width: 150px; padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--navy); color: var(--white); font-weight: 600; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 6px 14px -6px rgba(10,36,92,.6);
}
.ps-chosen__label::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--navy); }
.phone--hero .ps-chosen { animation: pinDrop .7s var(--ease-out) .45s both; }
@keyframes pinDrop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
.ps-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 18px 16px 18px; background: var(--white);
  border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px -12px rgba(10,36,92,.28);
}
.ps-sheet::before { content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--stone-300); }
/* The listing (the business people choose) */
.listing { display: grid; gap: 3px; min-width: 0; }
.listing__name { font-family: var(--font-display); font-size: 18px; font-weight: 620; letter-spacing: -.012em; line-height: 1.15; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing__rating { display: flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: 12px; }
.listing__rating b { color: var(--navy); font-weight: 600; }
.listing__typed { display: none; font-size: 11.5px; color: var(--green-700); font-weight: 600; }
.listing.is-typed .listing__rating, .listing.is-typed .listing__meta { display: none; }
.listing.is-typed .listing__typed { display: block; }
.listing__meta { font-size: 12px; color: var(--ink-3); }
.listing__open { color: var(--green-700); font-weight: 600; }
.listing__acts { display: flex; justify-content: space-between; gap: 4px; margin-top: 10px; }
.listing__acts > * { flex: 1 1 0; min-width: 0; }
.listing__act { display: grid; justify-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--navy); text-align: center; }
.listing__act-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--stone-100); color: var(--navy); }
.listing__act-ic .icon { width: 17px; height: 17px; stroke-width: 1.75; }
.listing__act:first-child .listing__act-ic { background: var(--navy); color: var(--white); }
.listing__act--call .listing__act-ic { background: var(--green); color: var(--navy); }

/* --------------------------------------------------------------------------
   2. Why it matters (limestone): the lead, Google's three figures (the band's one focal point), "Sound familiar?"
   One axis per width: centred from 768px, left on phones (r9).
   -------------------------------------------------------------------------- */
.why { background: var(--stone-100); }
.why__head h2 { max-width: 24ch; }
.why__head .lead { max-width: 36em; margin-top: 16px; } /* r10: about 75 characters a line when centred (62ch of the body face) */
.stats { margin-top: 48px; }
.stats__title { font-size: var(--t-lead); font-weight: 600; line-height: 1.4; color: var(--navy); text-wrap: balance; }
.stats__list { display: grid; gap: 24px; margin: 32px 0 0; }
.stat { display: grid; grid-template-columns: 156px minmax(0, 1fr); align-items: center; column-gap: 16px; } /* r11: 156px, so "50%" keeps 16px before its label */
.stat__num { font-family: var(--font-display); font-size: var(--t-num); font-weight: 620; letter-spacing: -.02em; line-height: .92; color: var(--navy); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.stat__suffix { margin-left: .04em; color: var(--green-600); }
.stat__label { margin: 0; color: var(--ink-2); text-wrap: balance; }
.stats__source { margin-top: 16px; font-size: var(--t-micro); color: var(--ink-3); }
.why__problem { max-width: 62ch; margin-top: var(--gap-block); }
.why__problem p { color: var(--ink-2); }
.why__problem strong { color: var(--navy); }
@media (min-width: 768px) {
  .why .container { text-align: center; }
  .why__head h2 { margin-inline: auto; }
  .why__head .lead { margin-inline: auto; }
  .stats { margin-top: 64px; }
  .stats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
  .stat { display: block; }
  .stat__label { max-width: 16ch; margin: 8px auto 0; }
  .why__problem { margin-inline: auto; }
}
/* r10: from 1024px each label holds one line, so the three figures end level above the source. */
@media (min-width: 1024px) { .stat__label { max-width: 40ch; } }

/* --------------------------------------------------------------------------
   3. What is included (paper): four parts on hairlines, then one line on the setup extras
   -------------------------------------------------------------------------- */
.split-head { display: grid; gap: 16px; }
.split-head h2 { max-width: 24ch; }
.split-head .lead { margin: 0; }
.parts { display: grid; gap: 32px; margin-top: var(--gap-head); }
.part { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: center; padding-top: 20px; border-top: 1px solid var(--stone-300); }
/* r10: one solid family, each glyph 24px tall on its own tight viewBox (widths follow the shapes). */
/* r11: the wordmark's green (decorative, aria-hidden: the title carries the meaning), so every pin on the page is one green. */
.part__ic { display: block; height: 24px; color: var(--green); fill: currentColor; stroke: none; }
/* r11: the titles at the lead size and weight 600, so the H2 is the section's one focal point and the parts read as one row. */
:where(.page-home main) .part__title { font-size: var(--t-lead); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.part__ic--profile { width: 18.44px; }
.part__ic--reviews { width: 25.25px; }
.part__ic--content { width: 25.45px; }
.part__ic--direction { width: 22px; }
@media (max-width: 639px) { .part__ic { justify-self: center; } }
.part__line { grid-column: 1 / -1; margin-top: 8px; max-width: 34ch; color: var(--ink-2); }
.included__extras { max-width: 70ch; margin-top: 48px; color: var(--ink-2); text-wrap: balance; }
/* From 640px the icon, the title and the line of every part share row tracks (subgrid), so the lines of a row start
   level whatever their titles wrap to. The 40px between the two rows of the 2x2 grid is the second row's margin. */
@media (min-width: 640px) {
  .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .part { grid-template-columns: minmax(0, 1fr); grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-items: start; }
  .part:nth-child(n+3) { margin-top: 40px; }
  .part__title { margin-top: 16px; }
}
@media (min-width: 1024px) {
  .split-head { grid-template-columns: var(--split); column-gap: var(--split-gap); align-items: start; }
  .split-head .lead { align-self: end; } /* r11: the lead sits on the H2's last line (an editorial split, no dead band) */
}
@media (min-width: 1200px) {
  .parts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .part:nth-child(n+3) { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   4. Local work (navy): the islands on the left, four rows on the right
   -------------------------------------------------------------------------- */
.proof { --focus: var(--green-300); background: var(--navy); color: var(--navy-200); }
.proof__grid { display: flex; flex-direction: column; }
.proof__copy { display: contents; }
.proof h2 { order: 1; color: var(--white); }
.proof .lead { order: 2; margin-top: 16px; color: var(--navy-200); }
.proof__map { order: 3; align-self: center; width: min(100%, 330px); margin-top: 64px; }
.examples { order: 4; margin-top: 32px; }
.proof__also { order: 5; }
.proof__note { order: 6; }
.malta { position: relative; aspect-ratio: 1000 / 890; }
.malta__tiles { position: absolute; inset: 0; background: var(--madum-warda-honey) center / 18px 18px; -webkit-mask: url("../svg/malta-mask.svg") center / 100% 100% no-repeat; mask: url("../svg/malta-mask.svg") center / 100% 100% no-repeat; filter: drop-shadow(0 12px 18px rgba(0,0,0,.3)); }
.malta__art { position: relative; width: 100%; height: 100%; fill: none; stroke: var(--stone-100); stroke-width: 4; }
/* vuk-oct1: about 30% bigger than r11 (Vuk, 1 October), the tip (bottom centre) on the place at every size. */
/* Jan, 2 October: the pins twice the 1 October size. The phone map grows from 247 to 330px (400 from 640px) so they do not
   overlap, and its top margin leaves room for the Gozo pin, which rises above the island box. */
.malta__pin { position: absolute; z-index: 2; width: 68px; height: 88px; margin: -88px 0 0 -34px; }
.malta__pin--sm { width: 56px; height: 74px; margin: -74px 0 0 -28px; }
.malta__pin .brand-pin { position: relative; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 4px 5px rgba(0,0,0,.35)); }
/* A "ground pulse" at each pin's tip: a green ring expands and fades, repeating. The pin glyph sits above it
   (z-index). Base state is invisible, so under prefers-reduced-motion (which halts the loop) nothing is left behind.
   Release 14 October: a brand-green ring with a tinted fill, flattened onto the ground, that holds most of its
   strength through the first half of the beat. The light green fill alone hardly showed on the cream island. */
.malta__pin::after {
  content: ""; position: absolute; left: 50%; bottom: 0; z-index: 0; width: 22px; height: 22px; box-sizing: border-box;
  border: 2px solid var(--green); border-radius: 50%; background: rgba(92, 174, 48, .26); opacity: 0; pointer-events: none;
  transform: translate(-50%, 50%) scale(.5, .2);
}
/* The pulse loops only while the map is on screen (main.js toggles .is-onscreen), so it isn't compositing
   off-screen for the whole visit — the loop ran continuously even at the top of the page otherwise. */
.malta.is-onscreen .malta__pin::after { animation: maltaPinPulse 2.6s var(--ease-out) infinite; }
@keyframes maltaPinPulse {
  0%   { opacity: 1;  transform: translate(-50%, 50%) scale(.5, .2); }
  55%  { opacity: .7; }
  100% { opacity: 0;  transform: translate(-50%, 50%) scale(3, 1.2); }
}
/* The pins drop in from above the first time the map scrolls into view (main.js arms them hidden, then triggers
   the drop with a per-pin stagger via --drop-delay). The parent's opacity 0 also hides the ::after ring until the
   pin lands. No-JS and reduced motion never arm, so the pins just sit in place. */
.malta.pins-armed .malta__pin { opacity: 0; }
.malta.pins-drop .malta__pin { animation: maltaPinDrop .62s var(--ease-out) var(--drop-delay, 0s) both; }
@keyframes maltaPinDrop {
  0%   { opacity: 0; transform: translateY(-46px); }
  60%  { opacity: 1; transform: translateY(4px); }
  80%  { transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}
.example { padding-block: 16px; }
@media (min-width: 1024px) { .example { padding-block: 14px; } } /* vuk-oct1: five rows fit the section's 860px ceiling */
.example + .example { border-top: 1px solid var(--navy-600); }
.example__name { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 620; letter-spacing: -.005em; line-height: 1.15; color: var(--white); }
.example__line { margin-top: 4px; color: var(--navy-200); }
.example__shot, .example picture img { display: block; width: 100%; max-width: 256px; height: auto; aspect-ratio: 16 / 10; margin-top: 12px; object-fit: cover; object-position: top; border-radius: var(--r-sm); }
.example picture { display: contents; }
/* r10: from 640px the screenshot is a 176px thumbnail beside the name and line (about +50px a row, the ceiling allows 180). */
@media (min-width: 640px) {
  .example:has(.example__shot) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 24px; }
  .example:has(.example__shot) :is(.example__name, .example__line) { grid-column: 1; }
  .example .example__shot, .example picture img { grid-column: 2; grid-row: 1 / -1; width: 176px; margin-top: 0; }
}
.proof__also { margin-top: 16px; color: var(--navy-200); }
.proof__note { margin-top: 16px; font-size: var(--t-small); line-height: 1.55; color: var(--navy-200); }
/* The link keeps a 45px hit area (padding, cancelled by a negative margin), and its ring sits 2 to 4px off the text. */
.proof__note a { display: inline-block; padding: 11px 13px; margin: -11px -13px; color: var(--stone-100); font-weight: 600; text-decoration: underline; text-decoration-color: var(--stone-100); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.proof__note a:focus-visible { outline-offset: -9px; }
@media (hover: hover) and (pointer: fine) { .proof__note a:hover { text-decoration-thickness: 2px; } }
@media (min-width: 640px) { .proof__map { width: min(100%, 400px); margin-top: 56px; } .malta__tiles { background-size: 28px 28px; } .malta__pin { width: 78px; height: 102px; margin: -102px 0 0 -39px; } .malta__pin--sm { width: 64px; height: 84px; margin: -84px 0 0 -32px; } }
@media (min-width: 1024px) {
  .proof__grid { display: grid; grid-template-columns: var(--split); column-gap: var(--split-gap); align-items: center; }
  .proof__copy { display: block; }
  .proof__map { order: 0; align-self: center; width: min(100%, 494px); margin-top: 0; }
  .malta__tiles { background-size: 34px 34px; }
  .examples { margin-top: 32px; }
}

/* --------------------------------------------------------------------------
   5. AI-search readiness (paper): the promise and the five fundamentals, one labelled example
   -------------------------------------------------------------------------- */
.ai__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.ai__list { display: grid; gap: 12px; margin-top: 32px; color: var(--ink-2); }
/* Cap the chat figure's width so the right-justified question and the left-justified answer stay a tight pair.
   Uncapped, a wide column (desktop) or wide single column (tablet) flings the question to the far margin. The cap
   is inert on phones (100% < 33rem). From 640px up the answer may fill the capped figure (each sentence keeps its
   line). The question keeps the 88% edge guard at every width, so it always sits visibly to the right, as in a chat. */
.ai__example { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; align-content: start; width: 100%; max-width: 33rem; }
@media (min-width: 640px) { .ai__example .bubble--a { max-width: 100%; } }
/* r10: each bubble is as wide as its longest line (the answer's sentences are lines of their own). r11: one tone on the
   paper band, the question in limestone and the answer in white, so the green pin is the example's one accent. */
.bubble { width: max-content; max-width: min(88%, 30em); padding: 14px 18px; border-radius: 16px; line-height: 1.5; color: var(--navy); }
.bubble__s { display: block; }
/* r12: a wrapped sentence is balanced at every width (no "until 7 pm." alone on a line), and main.js sets each bubble to
   its furthest word, so no band of empty bubble is left on the right. */
.bubble--q, .bubble__s { text-wrap: balance; }
.bubble--q { justify-self: end; border-bottom-right-radius: 4px; background: var(--stone-100); }
/* Vuk's pin, inside the answer as its speaker mark (r11: it no longer straddles the corner or pokes into the gutter). */
.bubble--a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: start; justify-self: start; border-bottom-left-radius: 4px; background: var(--white); }
.bubble__pin { width: 14px; height: 18px; margin-top: .2em; }
.ai__label { font-size: var(--t-micro); line-height: 1.45; color: var(--ink-3); }
.ai__note { font-size: var(--t-small); color: var(--ink-3); }
@media (min-width: 1024px) {
  .ai__grid { grid-template-columns: var(--split); column-gap: var(--split-gap); align-items: center; }
  /* Anchor the capped chat figure to the left of its column so it groups with the copy, not the page margin. */
  .ai__example { justify-self: start; }
  .ai__note { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   6. Pricing (navy): Vuk's two packages, "then" between them, the VAT and not-included lines under them
   -------------------------------------------------------------------------- */
.pricing { --focus: var(--green-300); background: var(--navy); color: var(--navy-200); }
.pricing__title { max-width: 24ch; margin-inline: auto; text-align: center; color: var(--white); }
.plans { display: grid; max-width: var(--container); margin: var(--gap-head) auto 0; }
.plans__then { display: grid; place-items: center; height: 64px; font-size: var(--t-lead); color: var(--navy-200); } /* r11: a pause, not a squeezed label */
.plan { --focus: var(--navy); display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-lg); background: var(--white); color: var(--ink-2); box-shadow: var(--sh-2); }
.plan__price { display: grid; justify-items: start; gap: 4px; margin-top: 16px; }
.plan__amount { display: inline-flex; align-items: flex-start; font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-price); font-weight: 700; letter-spacing: -.015em; line-height: .92; color: var(--navy); font-variant-numeric: lining-nums; }
.plan__cur { font-size: .56em; line-height: 1; margin: .1em .08em 0 0; letter-spacing: 0; font-weight: 650; }
.pricing .plan__amount { font-size: var(--t-num); font-weight: 620; }
.pricing .plan__cur { font-size: max(35px, .5em); font-weight: 620; margin-top: .12em; } /* r11: the H1's size at 390 and 1440, no ninth size */
.plan__note { font-size: var(--t-small); font-weight: 600; color: var(--navy); }
.plan__desc { margin-top: 16px; }
/* r10: Vuk's full lists without markers (17 green dots out), the rows spaced by the gap alone. */
.plan__list { display: grid; gap: 8px; margin: 24px 0; font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); }
.plan__list li { text-wrap: balance; }
.plan__cta { margin-top: auto; }
/* r11: a footnote under the cards, left-aligned on the first card's edge. Not included is one plain sentence (Vuk's items
   joined by commas), its label on a line of its own, read the same by eyes and screen readers at every width. */
.pricing__small { max-width: 72ch; margin-top: 32px; font-size: var(--t-small); line-height: 1.5; color: var(--navy-200); }
.pricing__small p { text-wrap: pretty; }
.pricing__small p + p { margin-top: 12px; }
.pricing__notinc-label { display: block; color: var(--white); }
.pricing__terms.is-placeholder { display: none; }
.staging .pricing__terms.is-placeholder { display: block; }
@media (min-width: 640px) { .plan { padding: 40px; } }
/* Two columns only where every item holds one line (decision 217, fixed in r10): the first and longest feature
   ("Google Business Profile optimisation / management") takes the whole row, and the wider column is the left one,
   which gets the longer names of the rows under it. */
@media (min-width: 640px) and (max-width: 1023px), (min-width: 1280px) {
  .plan__list { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 24px; }
  .plan__list li:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .plans { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 24px; }
  /* r10: "then" sits on the numerals' optical centre, so "€300 then €155" reads across the band as one phrase
     (card padding, the name's line, its 16px gap, half the numeral, less half of this line). */
  .plans__then { display: block; align-self: start; height: auto; margin-top: calc(40px + var(--t-h3) * 1.15 + 16px + var(--t-num) * .46 - var(--t-lead) * .775); }
  .plan__list { row-gap: 12px; }
}

/* --------------------------------------------------------------------------
   7. FAQ (limestone): the title on the left, the seven questions as rows on hairlines, all closed
   -------------------------------------------------------------------------- */
.faq-section { background: var(--stone-100); }
.faq__grid { display: grid; gap: var(--gap-head); }
.faq__title { max-width: 24ch; }
.faq { border-bottom: 1px solid var(--stone-300); }
.faq:first-child { border-top: 1px solid var(--stone-300); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px; padding: 16px 12px; margin-inline: -12px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 16px; height: 16px; flex: none; background: linear-gradient(var(--navy), var(--navy)) center / 16px 2px no-repeat, linear-gradient(var(--navy), var(--navy)) center / 2px 16px no-repeat; transition: transform var(--t-fast) var(--ease), background-size var(--t-fast) var(--ease); }
.faq[open] summary::after { transform: rotate(180deg); background-size: 16px 2px, 2px 0; }
.faq summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 6px; }
/* r11: Firefox ignores the html scroll padding for some focus scrolls, so tabbing up never parks these under the header. */
.faq summary, .route, .text-link, .contact__wa { scroll-margin-top: calc(var(--header-h) + 16px); }
.faq__q { font-size: var(--t-lead); font-weight: 400; line-height: 1.3; color: var(--navy); text-wrap: balance; } /* r11: 400, the plus says they open */
@media (hover: hover) and (pointer: fine) { .faq summary:hover .faq__q { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--stone-500); text-underline-offset: .22em; } }
.faq__a { padding-bottom: 24px; }
.faq__a p { max-width: 62ch; color: var(--ink-2); }
.faq__a a { color: var(--navy); font-weight: 600; }
.faq__more { color: var(--ink-2); }
.faq__more .text-link { margin-left: 4px; } /* r11: its focus ring clears the "?" before it */
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: var(--split); grid-template-rows: auto 1fr; column-gap: var(--split-gap); row-gap: 24px; align-items: start; }
  .faq__title { grid-column: 1; grid-row: 1; }
  .faq-list { grid-column: 2; grid-row: 1 / span 2; }
  .faq__more { grid-column: 1; grid-row: 2; }
}

/* --------------------------------------------------------------------------
   8. Contact (paper): the H2, the lead, the three direct routes and Vuk on the left, the form on the right
   -------------------------------------------------------------------------- */
.contact { background: var(--paper); }
.contact__grid { display: grid; gap: 40px; }
.contact__copy h2 { max-width: 24ch; }
.contact__copy .lead { max-width: 32em; margin-top: 16px; }
.contact__wa { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
@media (hover: hover) and (pointer: fine) { .contact__wa:hover { text-decoration-thickness: 2px; } }
.routes li + li { border-top: 1px solid var(--stone-300); }
.route { display: grid; grid-template-columns: 20px 5.5em minmax(0, 1fr); column-gap: 16px; align-items: center; min-height: 56px; padding: 8px 12px; margin-inline: -12px; color: var(--navy); text-decoration: none; }
.route__ic { width: 20px; height: 20px; }
.route__label { font-size: var(--t-small); color: var(--ink-3); }
.route__value { font-size: var(--t-lead); line-height: 1.3; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .route:hover .route__value { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; } }
.route:focus-visible { outline-offset: -3px; border-radius: 6px; }
.founder { display: flex; align-items: center; gap: 16px; margin-top: 32px; color: var(--ink-2); }
.founder strong { color: var(--navy); }
.founder__img, .founder picture img { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; }
.founder picture { display: contents; }
/* vuk-oct1: the booking block, where every "Book a meeting" lands (#book). No box: a title, one line and one button.
   With a Calendly link the button becomes the inline scheduler on request (main.js). Calendly's inline page needs about
   700px on a laptop and more in its one-column phone layout; it reports its own height, which main.js applies. */
.book { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--stone-300); } /* the page's scroll-padding-top lands it at header + 16, as every other target */
.book__title { font-size: var(--t-h3); font-weight: 620; letter-spacing: -.005em; outline: none; }
.book__title:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.book__line { margin-top: 8px; color: var(--ink-2); }
.book__open { margin-top: 16px; }
.book.is-open .book__open { display: none; }
.book__frame { margin-top: 16px; margin-inline: calc(-1 * var(--gutter)); }
.book__frame iframe { display: block; width: 100%; height: var(--book-h, 1080px); min-height: 640px; border: 0; background: var(--paper); }
.book__note { margin-top: 12px; font-size: var(--t-small); color: var(--ink-3); }
/* From 640px the frame is the column's width (about 560px at 1440), where Calendly stacks the event above the calendar:
   900px holds both. Anything taller scrolls inside the frame until Calendly reports its height. */
@media (min-width: 640px) { .book__frame { margin-inline: 0; } .book__frame iframe { height: var(--book-h, 900px); border-radius: var(--r-md); } }

.form { padding: 24px; border-radius: var(--r-lg); background: var(--white); }
.form__title { font-size: var(--t-h3); font-weight: 620; letter-spacing: -.005em; }
.form-grid { display: grid; gap: 20px; margin-top: 24px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: .9375rem; font-weight: 600; color: var(--navy); }
.field .opt { font-weight: 400; color: var(--ink-3); }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--white);
  font-size: 1rem; color: var(--navy);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 100px; max-height: 320px; resize: none; field-sizing: content; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .field input:hover, .field textarea:hover { border-color: var(--navy-600); } }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-color: var(--navy); box-shadow: 0 0 0 6px var(--green-100); }
.field--check { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.field--check input { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; min-height: 0; margin: 1px 0 0; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--white) center / 16px 16px no-repeat; cursor: pointer; }
.field--check input:checked { border-color: var(--navy); background-color: var(--navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.field--check input:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: none; }
@media (forced-colors: active) { .field--check input { -webkit-appearance: auto; appearance: auto; } }
.field--check label { font-weight: 400; font-size: .9375rem; color: var(--ink-2); }
.field--check label a { padding-block: 3px; color: var(--navy); font-weight: 600; }
.field--check label a:focus-visible { outline-offset: 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* r11 */
@media (hover: hover) and (pointer: fine) { .field--check label a:hover { text-decoration-thickness: 2px; } }
.field--check .field__error { grid-column: 1 / -1; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--alert); background-color: #fffafa; }
.field:not(.is-invalid):not(.is-bad) .field__error { display: none; }
.field__error { display: flex; gap: 6px; align-items: flex-start; font-size: .9375rem; font-weight: 600; color: var(--alert); }
.field__error::before, .field-hint.is-error::before { content: "!"; display: grid; place-items: center; width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 50%; background: var(--alert); color: var(--white); font-size: 12px; font-weight: 700; line-height: 1; }
.field-hint { display: flex; gap: 8px; align-items: flex-start; margin-top: -8px; font-size: .9375rem; line-height: 1.45; color: var(--ink-3); }
.field-hint.is-error { color: var(--alert); font-weight: 600; }
.form-grid .full { grid-column: 1 / -1; }
label { text-wrap: pretty; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: grid; gap: 12px; margin-top: 24px; }
.form-msg:empty { display: none; }
.form-msg { padding: 12px 14px; border-radius: var(--r-sm); font-weight: 600; font-size: .9375rem; }
.form-msg.is-error { background: var(--alert-bg); color: var(--alert); }
.form-msg.is-success { background: var(--green-100); color: var(--green-700); }
.form__reply { font-size: .9375rem; color: var(--ink-3); text-align: center; }
/* The package a price card asked about, named under the form title. */
.form__pkg { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin-top: 12px; padding: 4px 4px 4px 12px; border-radius: var(--r-pill); background: var(--green-50); font-size: .9375rem; font-weight: 600; color: var(--navy); }
.form__pkg[hidden] { display: none; }
.form__pkg-x { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .form__pkg-x:hover { background: var(--green-100); } }
.form__pkg-x .icon { width: 16px; height: 16px; }
/* The inline success panel that replaces the fields after a send. */
.form-done { display: grid; gap: 12px; justify-items: start; padding: 8px 0 4px; }
.form-done__badge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--green); color: var(--navy); }
.form-done__badge .icon { width: 24px; height: 24px; stroke-width: 2.5; }
.form-done__title { font-size: var(--t-h3); outline: none; }
.form-done__text { color: var(--ink-2); }
.form-done .btn-row { margin-top: 6px; }
.form-done .btn .icon { width: 20px; height: 20px; }
.form.is-done .form-grid, .form.is-done .form-actions, .form.is-done .form__title, .form.is-done .form__pkg { display: none; }
@media (max-width: 559px) { .form-done .btn-row { display: grid; width: 100%; } .form-done .btn-row .btn { width: 100%; } }
@media (min-width: 560px) {
  .form-done .btn-row { display: inline-grid; grid-template-columns: minmax(0, max-content); gap: 10px; }
  .form-done .btn-row .btn { width: 100%; justify-content: center; }
}
@media (min-width: 640px) { .form { padding: 40px; } }
@media (min-width: 1024px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .contact__grid { grid-template-columns: var(--split); grid-template-areas: "copy form" "more form"; grid-template-rows: auto 1fr; column-gap: var(--split-gap); row-gap: 40px; align-items: start; }
  .contact__copy { grid-area: copy; }
  .contact__grid > .form { grid-area: form; }
  .contact__more { grid-area: more; }
}

/* --------------------------------------------------------------------------
   Footer (every page): the frieze, the motto on one line, the wordmark, the links and contact, the legal row
   -------------------------------------------------------------------------- */
.site-footer { --focus: var(--green-300); position: relative; background: var(--navy-950); color: var(--navy-200); padding-bottom: 24px; }
.site-footer__frieze { height: 24px; background: var(--madum-frieze-navy) 0 0 / 48px 24px; }
/* vuk-oct1 (Vuk's footer image, 1 October): the motto centred over the columns at every width. */
.footer-motto { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 .4em; padding-top: 40px; font-family: var(--font-display); font-size: 28px; font-weight: 620; letter-spacing: -.012em; line-height: 1.1; color: var(--white); text-align: center; }
.footer-motto .motto__sep { width: .3em; height: .3em; border-radius: .06em; } /* r10: a diamond at every size (about 6px at 20px) */
.footer-motto > span:not(.motto__sep) { white-space: nowrap; }
/* Phones: one line with its diamonds, sized to the width. r11: under wider text spacing (WCAG 1.4.12) it wraps between
   beats, never inside one, instead of running off the page. */
@media (max-width: 599px) { .footer-motto { gap: 0 .3em; font-size: min(28px, 5.2vw); } }
/* Phones (vuk-oct1): the wordmark, then "Explore SIBNI" in two short columns, then Contact as icon and label rows. */
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 28px 20px; }
.footer-brand__logo { width: 108px; }
.footer-title { margin-bottom: 4px; font-family: var(--font-sans); font-size: .9375rem; font-weight: 600; letter-spacing: 0; color: var(--navy-300); }
.footer-col a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--white); text-decoration: none; }
@media (min-width: 360px) { .footer-col--nav a { white-space: nowrap; } } /* r11: below 360px a label may wrap (WCAG 1.4.12) */
@media (hover: hover) and (pointer: fine) { .footer-col a:hover { text-decoration: underline; text-underline-offset: .25em; } }
.footer-col--nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 32px; }
@media (max-width: 359px) { .footer-col--nav ul { column-gap: 20px; } }
.footer-contact a { overflow-wrap: anywhere; }
.footer-contact .icon { width: 20px; height: 20px; color: var(--navy-300); }
.footer-area { font-size: .9375rem; color: var(--navy-200); text-wrap: balance; }
/* vuk-oct1: X and Facebook, once Vuk sends the links (empty: the list is not printed). 44px targets, the glyphs in white.
   They share the area line's row when it has room (from about 1280px), else wrap under it with their glyphs on the text's
   left edge. Either way the row adds 44px at most (breathe.mjs measures the footer with the links set, SPEC item 17). */
.footer-reach { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; margin-top: 4px; }
.footer-social { display: flex; gap: 4px; margin: 0 -11px 0 -10px; }
.footer-social a { justify-content: center; width: 44px; height: 44px; min-height: 0; border-radius: var(--r-sm); }
.footer-social .icon { width: 22px; height: 22px; color: var(--white); }
@media (hover: hover) and (pointer: fine) { .footer-social a:hover { background: rgba(196,207,228,.12); } }
.footer-legal { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 24px; padding-top: 16px; border-top: 1px solid rgba(196,207,228,.16); font-size: var(--t-micro); line-height: 1.55; color: var(--navy-200); }
.footer-legal a { color: var(--white); }
.footer-copy, .footer-legal .footer-fine { flex: 1 1 100%; }
.footer-copy { margin-bottom: 4px; text-wrap: balance; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-fine { max-width: 110ch; }
body.page-check[data-cta-mode="search"] #check-footer-line { display: none; } /* r10: no Google data or projection on the landing */
.footer-notes > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; list-style: none; }
/* r11: "Legal notes" follows Terms at the row's one 24px gap, and it never moves when it opens: the details box is
   display: contents, so the summary stays a flex item of the legal row and the notes take the rows under it. A browser
   without it keeps the details as one flex item (the summary then starts the next row when open). */
.footer-notes { display: contents; }
.footer-notes::details-content { flex: 1 1 100%; }
.footer-notes > summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .footer-links a:hover, .footer-notes > summary:hover { text-decoration-thickness: 2px; } }
.footer-notes .footer-fine + .footer-fine, .footer-notes > summary + .footer-fine { margin-top: 8px; }
/* Tablets: the wordmark on its own row, then the two columns side by side. */
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: 64px; }
  .footer-brand { grid-column: 1 / -1; }
}
/* Laptops: the three columns of the image, the wordmark centred against the two lists beside it. */
@media (min-width: 1024px) {
  .footer-motto { padding-top: 48px; font-size: 36px; }
  .footer-brand__logo { width: 124px; }
  .footer-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1.1fr); column-gap: 48px; padding-block: 40px 32px; }
  .footer-brand { grid-column: auto; align-self: center; }
  .footer-copy { flex: 1 1 0; min-width: 0; margin-bottom: 0; padding-top: 11px; }
  /* The links and Legal notes sit on the row's last line, open or closed, when the copy beside them wraps. */
  .footer-links, .footer-notes > summary { align-self: flex-end; }
}
/* Release 14 October: the wordmarks carry a version (the geometric pin, e13736f), bumped whenever the files change.
   This stylesheet's own ?v= brings the new address, so nobody keeps last month's file. */
@media (forced-colors: active) and (prefers-color-scheme: dark) { .brand__logo { content: url("../img/sibni-wordmark-white.svg?v=20261014"); } }
@media (forced-colors: active) and (prefers-color-scheme: light) { .footer-brand__logo { content: url("../img/sibni-wordmark.svg?v=20261014"); } }

/* --------------------------------------------------------------------------
   Cookie consent (only printed when a GA id is set)
   -------------------------------------------------------------------------- */
.consent { position: fixed; z-index: 90; left: 12px; right: 12px; bottom: 12px; display: none; gap: 12px; padding: 16px 18px; border-radius: var(--r-md); background: var(--white); box-shadow: var(--sh-3); border: 1px solid var(--line); font-size: .9375rem; }
.consent.is-visible { display: grid; }
.consent__actions, .consent .btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.consent a { color: var(--navy); font-weight: 600; }
@media (min-width: 768px) { .consent { left: auto; right: 20px; bottom: 20px; max-width: 460px; } }
/* While it shows, focused controls scroll clear of it and the footer grows by its room, so its last links can too
   (WCAG 2.4.11). main.js measures --consent-room. The id outranks /check's chip padding, which the room includes. */
@media screen {
  html:has(#consent.is-visible) { scroll-padding-bottom: var(--consent-room, 50vh); }
  html:has(#consent.is-visible) .site-footer { padding-bottom: calc(24px + var(--consent-room, 50vh)); }
}

/* --------------------------------------------------------------------------
   Reveal on scroll (main.js adds it only below the fold, never under reduced motion): opacity only
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; }
/* Anything that takes keyboard focus shows at once, even mid-reveal. */
.reveal:focus-within { opacity: 1; transition: none; }
.reveal.is-in { opacity: 1; transition: opacity var(--t-slow) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  html.smooth { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition: none !important; }
  .reveal { opacity: 1; }
  .btn:hover { transform: none; }
}
@media (forced-colors: active) {
  .btn, .icon-btn, .bsearch__field, .field input, .field textarea { border: 1px solid CanvasText; }
  .motto__sep { background: CanvasText; }
}

/* Shared by /check (its other pieces live in check.css). */
.gcard__pin { width: 48px; height: 48px; border-radius: 14px; background: var(--green-100); display: inline-flex; align-items: center; justify-content: center; color: var(--navy); flex: none; }
.gcard__pin .icon { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   Print and Save as PDF: every block visible, the bands in ink on white, no floating UI
   -------------------------------------------------------------------------- */
@media print {
  .reveal { opacity: 1 !important; }
  .site-banner, .staging-banner, .nav-toggle, .mobile-nav, .header-actions, .skip-link, .bsearch, .consent, .wow-ticker { display: none !important; }
  .site-header { position: static !important; background: #fff !important; box-shadow: none !important; }
  body { background: #fff; }
  .pricing, .proof, .why, .faq-section, .site-footer { background: #fff !important; }
  .site-footer__frieze { display: none !important; }
  .pricing, .pricing h2, .pricing__small, .pricing__notinc strong, .proof, .proof h2, .proof .lead, .example__name, .example__line, .proof__also, .proof__note, .proof__note a, .site-footer, .site-footer a, .footer-motto, .footer-title, .footer-legal { color: #0a245c !important; }
  .plan { box-shadow: none !important; border: 1px solid #cdb38b; }
  .hero__wall, .malta__tiles, .isle__tiles { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .plan, .faq { break-inside: avoid; }
}