@charset "UTF-8";
/* ==========================================================================
   Durmisi&Clean — Stylesheet

   Palette: ink navy, near-monochrome. There is deliberately NO second accent
   colour. Emphasis comes from using one navy at different strengths against
   warm off-white, so nothing on the page competes for attention.

   1. Tokens      5. Buttons      9.  Process
   2. Reset       6. Header/Nav   10. FAQ
   3. Typography  7. Hero         11. Forms / Footer
   4. Layout      8. Cards        12. Motion / Print
   ========================================================================== */

/* 1. TOKENS =============================================================== */
:root {
  /* The single brand colour, at nine strengths */
  --navy-950: #0c1526;
  --navy-900: #16233f;
  --navy-800: #1e3054;
  --navy-700: #294070;
  --navy-600: #35528c;
  --navy-500: #4667a8;
  --navy-400: #6e8abf;
  --navy-300: #9db0d3;
  --navy-200: #c6d2e6;
  --navy-100: #e3eaf4;
  --navy-50:  #f2f5fa;

  /* Neutrals — warm, so the navy reads calm rather than cold */
  --paper:   #f7f6f3;
  --paper-2: #efede7;
  --line:    #e6e4df;
  --ink:     #1a1d24;
  --ink-2:   #4a505c;
  --ink-3:   #666d7c;   /* muted, but still AA on white and on --paper */
  --surface: #ffffff;
  --page:    #ffffff;

  /* Elevation — neutral, never coloured */
  --sh-sm: 0 1px 2px rgba(12,21,38,.05), 0 2px 6px rgba(12,21,38,.05);
  --sh-md: 0 4px 12px rgba(12,21,38,.06), 0 14px 30px rgba(12,21,38,.07);
  --sh-lg: 0 10px 24px rgba(12,21,38,.08), 0 28px 64px rgba(12,21,38,.10);
  --sh-btn: 0 6px 18px rgba(22,35,63,.18);

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-full: 999px;

  /* Fluid type */
  --fs-xs:   .8125rem;
  --fs-sm:   .9063rem;
  --fs-base: clamp(1rem, .972rem + .12vw, 1.0625rem);
  --fs-lg:   clamp(1.0938rem, 1.03rem + .3vw, 1.25rem);
  --fs-xl:   clamp(1.1875rem, 1.09rem + .45vw, 1.4375rem);
  --fs-h4:   clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-h3:   clamp(1.3125rem, 1.16rem + .7vw, 1.75rem);
  --fs-h2:   clamp(1.75rem, 1.32rem + 1.95vw, 2.875rem);
  --fs-h1:   clamp(2.1rem, 1.35rem + 3.35vw, 4.05rem);

  /* Rhythm */
  --sec-y:  clamp(3.5rem, 7.5vw, 7rem);
  --gap:    clamp(1.15rem, 2.6vw, 2rem);
  --gutter: clamp(1.15rem, 4.2vw, 2.75rem);
  --maxw:   1220px;
  --maxw-narrow: 760px;

  --font: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --header-h: 74px;
}

/* Prevent flash of German for stored-English visitors */
html.i18n-boot body { visibility: hidden; }

/* 2. RESET ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
  /* Light only — tells the browser not to auto-darken form controls either */
  color-scheme: light;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.68;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--navy-500);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--navy-200); color: var(--navy-950); }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--navy-900); color: #fff;
  padding: .8rem 1.25rem; border-radius: var(--r-sm); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* 3. TYPOGRAPHY =========================================================== */
h1, h2, h3, h4 {
  line-height: 1.12;
  letter-spacing: -.022em;
  font-weight: 700;
  color: var(--navy-950);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -.032em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.028em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: 1.28; }
p  { text-wrap: pretty; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy-600); margin-bottom: .85rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--navy-400);
}
.eyebrow.is-centered { justify-content: center; }
.eyebrow.on-dark { color: var(--navy-300); }
.eyebrow.on-dark::before { background: var(--navy-400); }

.lead {
  font-size: var(--fs-lg);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 62ch;
}
.lead.on-dark { color: rgba(255,255,255,.78); }

.section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head p { margin-top: .9rem; }
.section-head.is-centered .lead { margin-inline: auto; }

/* Used once, on the hero headline. A crisp rule reads far cleaner over a photo
   than a highlighter block, which muddies into the image behind it. */
.hl-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 100%;
  padding-bottom: .08em;
}

/* 4. LAYOUT =============================================================== */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.25rem); }
.section--sand { background: var(--paper); }
.section--mist { background: linear-gradient(180deg, var(--navy-50), #fff 70%); }
.section--dark { background: var(--navy-950); color: rgba(255,255,255,.80); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

.grid { display: grid; gap: var(--gap); }

/* auto-fit is right for 3 and 6 item grids, which divide evenly */
.grid--auto  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 288px), 1fr)); }

/* Four-item grids get explicit steps. auto-fit drops to three columns first,
   which strands the fourth item alone on a row. Never 3+1. */
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .grid--4 { grid-template-columns: 1fr; } }

/* Three-item grids: three across, then straight to one. 2+1 strands the last. */
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: 1fr; } }

/* Sits inside one half of a split, so two across is the most it should be */
.grid--auto-sm { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 520px) { .grid--auto-sm { grid-template-columns: 1fr; } }

.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left  { grid-template-columns: 1.15fr .85fr; }
  .split--wide-right { grid-template-columns: .85fr 1.15fr; }
  .split__media.is-first { order: -1; }
}

.media-frame {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-lg); background: var(--navy-100);
  aspect-ratio: 4 / 3;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--tall { aspect-ratio: 3 / 4; }
.media-frame--wide { aspect-ratio: 16 / 10; }

.media-stack { position: relative; }

/* 5. BUTTONS ==============================================================
   Sizing is fluid: padding and font scale with the viewport, every button is
   capped at the width of its container, and labels wrap rather than overflow.
   Below 600px a button row becomes a full-width stack. */
.btn {
  --btn-bg: var(--navy-900);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: clamp(.72rem, .62rem + .34vw, .92rem) clamp(1.05rem, .8rem + 1.05vw, 1.6rem);
  min-height: 48px;                 /* comfortable tap target on touch */
  max-width: 100%;                  /* never wider than its container */
  background: var(--btn-bg); color: var(--btn-fg);
  border-radius: var(--r-full);
  font-weight: 650; font-size: var(--fs-sm); letter-spacing: .012em;
  line-height: 1.25;
  text-decoration: none;
  white-space: normal;              /* wrap long labels instead of overflowing */
  text-align: center;
  text-wrap: balance;
  transition: box-shadow .22s var(--ease-out),
              background-color .22s var(--ease), color .22s var(--ease);
  box-shadow: var(--sh-btn);
}
.btn:hover { box-shadow: 0 10px 26px rgba(22,35,63,.26); }
.btn svg { width: 17px; height: 17px; flex: none; }

/* The primary call to action. Solid navy on light surfaces… */
.btn--accent { --btn-bg: var(--navy-900); --btn-fg: #fff; }

/* …and inverted to white where it sits on a dark band, so one class stays
   correct in both contexts without touching the markup. */
.hero .btn--accent,
.pagehero .btn--accent,
.ctaband .btn--accent,
.section--dark .btn--accent {
  --btn-bg: #fff; --btn-fg: var(--navy-900);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.hero .btn--accent:hover,
.pagehero .btn--accent:hover,
.ctaband .btn--accent:hover,
.section--dark .btn--accent:hover {
  --btn-bg: var(--navy-50);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--navy-800);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--ghost:hover {
  --btn-fg: var(--navy-900);
  box-shadow: inset 0 0 0 1.5px var(--navy-300);
}

.btn--on-dark {
  --btn-bg: rgba(255,255,255,.08); --btn-fg: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.34);
  backdrop-filter: blur(8px);
}
.btn--on-dark:hover {
  --btn-bg: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
}

.btn--lg {
  padding: clamp(.85rem, .72rem + .45vw, 1.08rem) clamp(1.25rem, .95rem + 1.4vw, 1.95rem);
  min-height: 54px;
  font-size: var(--fs-base);
}
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* On phones a row of CTAs reads better as a full-width stack — no cramped
   half-width buttons, no label spilling past the screen edge. */
@media (max-width: 600px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row > .btn { width: 100%; }
  .ctaband .btn-row, .hero .btn-row { align-items: stretch; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 650; font-size: var(--fs-sm); color: var(--navy-700);
  text-decoration: none;
}
.link-arrow svg { width: 15px; height: 15px; }
.link-arrow:hover { text-decoration: underline; }

/* 6. HEADER / NAV ========================================================= */
.topbar {
  background: var(--navy-950); color: rgba(255,255,255,.70);
  font-size: var(--fs-xs);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem 1rem; min-height: 40px; flex-wrap: wrap;
}
.topbar__list { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; min-width: 0; }
.topbar__list a {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: .45rem;
  min-width: 0; transition: color .2s;
}
.topbar__list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__list a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; color: var(--navy-300); flex: none; }
.topbar__note { display: inline-flex; align-items: center; gap: .45rem; }
@media (max-width: 860px) { .topbar__note { display: none; } .topbar__list { gap: 1.05rem; } }
/* Below this the phone number alone is the useful bit */
@media (max-width: 430px) { .topbar__list li:nth-child(2) { display: none; } }

/* Solid white, deliberately NOT backdrop-filtered. `backdrop-filter` makes an
   element the containing block for its `position: fixed` descendants, which
   collapsed the nav drawer's clipping shell down to the height of the header
   and cut the menu off after the first link. Opaque white also reads cleaner
   than translucency over photography. */
.header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease);
}
.header.is-stuck { box-shadow: 0 4px 20px rgba(12,21,38,.08); }
.header__inner { display: flex; align-items: center; gap: .75rem; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .68rem; text-decoration: none; margin-right: auto; min-width: 0; }
.brand__mark { width: 42px; height: 42px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand__name { font-weight: 800; font-size: 1.115rem; letter-spacing: -.028em; color: var(--navy-950); white-space: nowrap; }
.brand__name em { font-style: normal; color: var(--navy-500); }
.brand__tag {
  font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 420px) { .brand__tag { display: none; } .brand__mark { width: 38px; height: 38px; } }

/* On desktop the shell creates no box at all, so .nav stays a flex item of the
   header exactly as before. On mobile it becomes a viewport-sized clipping
   frame — without it the off-screen drawer extends the document's scrollable
   width and the whole page can be swiped sideways. Clipping on `html` or
   `body` instead would fix the scroll but breaks the sticky header. */
.nav-shell { display: contents; }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav__link {
  position: relative; padding: .58rem .8rem; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link:hover { color: var(--navy-900); background: var(--navy-50); }
/* The current page must be unmistakable: full-strength navy, heavier weight,
   and a solid rule under it. */
.nav__link[aria-current="page"] { color: var(--navy-900); font-weight: 750; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .2rem;
  height: 3px; border-radius: 3px; background: var(--navy-900);
}

/* The drawer's shell is a descendant of the header, so it paints inside the
   header's stacking context and would cover the close button. Lift the logo and
   the controls above it so the X and the language pill stay visible and
   tappable while the menu is open. */
.brand, .header__actions { position: relative; z-index: 2; }

.header__actions { display: flex; align-items: center; gap: .55rem; flex: none; }

/* The in-drawer CTA is for the mobile drawer only — the header has its own. */
.nav__cta { display: none; }

/* The header CTA is a compact variant: it must never crowd the nav */
.header__cta { min-height: 44px; padding: .55rem 1.15rem; font-size: var(--fs-sm); box-shadow: none; }
.header__cta:hover { box-shadow: 0 6px 16px rgba(22,35,63,.2); }

/* Language toggle — segmented pill */
.lang {
  position: relative; display: inline-flex; align-items: center; flex: none;
  padding: 3px; border-radius: var(--r-full);
  background: var(--navy-50); box-shadow: inset 0 0 0 1px var(--line);
}
.lang__thumb {
  position: absolute; top: 3px; left: 3px; height: calc(100% - 6px); width: 40px;
  border-radius: var(--r-full); background: var(--navy-900);
  transition: transform .32s var(--ease-out);
}
.lang[data-active="en"] .lang__thumb { transform: translateX(40px); }
.lang__btn {
  position: relative; z-index: 1; width: 40px; padding: .34rem 0;
  font-size: .75rem; font-weight: 800; letter-spacing: .07em;
  color: var(--ink-3); border-radius: var(--r-full);
  transition: color .28s var(--ease);
}
.lang__btn[aria-pressed="true"] { color: #fff; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: var(--r-sm); flex: none;
  align-items: center; justify-content: center; color: var(--navy-950);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.nav-toggle:hover { background: var(--navy-50); }
.nav-toggle__bars { position: relative; width: 20px; height: 14px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .3s var(--ease-out), opacity .2s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(12,21,38,.5); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

@media (max-width: 1040px) {
  .header__cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-shell {
    display: block;
    position: fixed; inset: 0; z-index: 1;   /* below .header__actions above */
    overflow: hidden;        /* contains the closed, off-screen drawer */
    pointer-events: none;    /* never intercepts taps on the page below */
  }
  .nav {
    position: absolute; top: 0; right: 0;
    pointer-events: auto;
    width: min(360px, 86vw); height: 100%;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    /* Clears the top bar + sticky header, which paint above the drawer */
    gap: .2rem; padding: calc(var(--header-h) + 3rem) 1.25rem 2rem;
    background: #fff; box-shadow: -20px 0 60px rgba(12,21,38,.16);
    transform: translateX(100%);
    /* `visibility` keeps the closed drawer out of the tab order — without it the
       off-screen links stay focusable and a keyboard user tabs into an invisible
       menu. Asymmetric delay: visible the instant it opens (so it can take
       focus), hidden only after the slide-out finishes. */
    visibility: hidden;
    transition: transform .38s var(--ease-out), visibility 0s linear .38s;
    overflow-y: auto;
  }
  .nav.is-open {
    transform: translateX(0); visibility: visible;
    transition: transform .38s var(--ease-out), visibility 0s linear 0s;
  }
  .nav__link {
    padding: .95rem 1rem; font-size: 1.0625rem; border-radius: var(--r-sm);
    white-space: normal; color: var(--ink-2);
  }
  /* In the drawer the current page gets a filled row with a solid navy bar on
     the leading edge — readable at a glance, unlike a thin underline. */
  .nav__link[aria-current="page"] {
    background: var(--navy-50); color: var(--navy-900);
  }
  .nav__link[aria-current="page"]::after {
    left: 0; right: auto; top: .5rem; bottom: .5rem;
    width: 3px; height: auto; border-radius: 0 3px 3px 0;
  }
  .nav__cta { display: inline-flex; width: 100%; margin-top: 1.1rem; }
}

/* 7. HERO ================================================================= */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-950); }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(12,21,38,.95) 8%, rgba(12,21,38,.84) 42%, rgba(12,21,38,.48) 78%, rgba(12,21,38,.34) 100%),
    linear-gradient(180deg, rgba(12,21,38,.5), rgba(12,21,38,0) 34%);
}
.hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 10vw, 8rem) clamp(5.5rem, 10vw, 8.5rem);
  max-width: 780px; color: #fff;
}
.hero h1 { color: #fff; }
.hero__sub { margin-top: 1.35rem; font-size: var(--fs-lg); color: rgba(255,255,255,.82); max-width: 56ch; }
.hero .btn-row { margin-top: clamp(1.8rem, 3.5vw, 2.5rem); }

/* KPI strip that overlaps the hero */

/* Page hero (inner pages) */
.pagehero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-950); color: #fff;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
}
.pagehero h1 { color: #fff; max-width: 18ch; }
.pagehero .lead { margin-top: 1.15rem; }

.crumbs { display: flex; flex-wrap: wrap; gap: .45rem; font-size: var(--fs-sm); color: rgba(255,255,255,.58); margin-bottom: 1.1rem; }
.crumbs a { color: rgba(255,255,255,.78); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: .5; }

/* 8. CARDS ================================================================ */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); overflow: hidden;
  border: 1px solid var(--line);
}
.card:hover { border-color: transparent; }
.card__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--navy-100); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: clamp(1.25rem, 2.2vw, 1.65rem); display: flex; flex-direction: column; flex: 1; gap: .65rem; }
.card__body p { color: var(--ink-2); font-size: var(--fs-sm); }
.card__body .link-arrow { margin-top: auto; padding-top: .5rem; }

.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  color: var(--navy-700);
}
.icon-badge svg { width: 26px; height: 26px; }

/* Feature card (icon + text, no image) */
.feature {
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: var(--surface); border-radius: var(--r-lg);
  border: 1px solid var(--line); box-shadow: var(--sh-sm);
  display: flex; flex-direction: column; gap: .9rem;
  transition: border-color .3s;
}
.feature:hover { border-color: var(--navy-200); }
.feature p { color: var(--ink-2); font-size: var(--fs-sm); }

/* Check list */
.checks { display: grid; gap: .7rem; }
.checks li { display: flex; align-items: flex-start; gap: .68rem; font-size: var(--fs-sm); color: var(--ink-2); }
.checks svg { width: 20px; height: 20px; flex: none; color: var(--navy-600); margin-top: .16rem; }
.checks.on-dark li { color: rgba(255,255,255,.76); }
.checks.on-dark svg { color: var(--navy-300); }
.checks--cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: .7rem 1.6rem; }

/* 9. PROCESS ============================================================== */
.steps {
  counter-reset: step; display: grid; gap: var(--gap);
  /* Three steps, so three columns — a 4-column track left an empty slot and
     shunted the whole row to the left. Straight to one column below: 2+1
     would strand the last step on its own. */
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 3.6rem; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em;
  color: var(--navy-400); line-height: 1;
}
.step h3 { font-size: var(--fs-h4); margin-bottom: .5rem; }
.step p { font-size: var(--fs-sm); color: var(--ink-2); }
.section--dark .step::before { color: var(--navy-400); }
.section--dark .step p { color: rgba(255,255,255,.66); }

/* 10. FAQ ================================================================= */
.faq { display: grid; gap: .75rem; max-width: 860px; margin-inline: auto; }
.faq__item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq__item.is-open { border-color: var(--navy-200); box-shadow: var(--sh-md); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem clamp(1.05rem, 2vw, 1.5rem); text-align: left;
  font-weight: 650; font-size: var(--fs-base); color: var(--navy-950); line-height: 1.4;
}
.faq__q:hover { background: var(--navy-50); }
.faq__icon {
  position: relative; width: 22px; height: 22px; flex: none;
  border-radius: 50%; background: var(--navy-50); box-shadow: inset 0 0 0 1px var(--navy-200);
  transition: background-color .25s, transform .3s var(--ease-out);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; inset: 50% 30%; height: 2px; margin-top: -1px;
  background: var(--navy-700); border-radius: 2px; transition: transform .3s var(--ease-out), opacity .2s;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon { background: var(--navy-900); box-shadow: none; transform: rotate(180deg); }
.faq__item.is-open .faq__icon::before, .faq__item.is-open .faq__icon::after { background: #fff; }
.faq__item.is-open .faq__icon::after { opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease-out); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 clamp(1.05rem, 2vw, 1.5rem) 1.25rem; color: var(--ink-2); font-size: var(--fs-sm); }

/* CTA band */
.ctaband {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--navy-950), var(--navy-800));
  color: #fff; padding: clamp(2rem, 5vw, 4rem); text-align: center;
}
.ctaband > * { position: relative; }
.ctaband h2 { color: #fff; margin-inline: auto; max-width: 20ch; }
.ctaband .lead { margin: 1.1rem auto 0; color: rgba(255,255,255,.78); }
.ctaband .btn-row { justify-content: center; margin-top: 2rem; }

/* 11. FORMS / FOOTER ====================================================== */
.form { display: grid; gap: 1.05rem; }
.field { display: grid; gap: .42rem; }
.field label { font-size: var(--fs-sm); font-weight: 650; color: var(--navy-950); }
.field label .req { color: #c0392b; }
.field input, .field textarea, .field select {
  width: 100%; padding: .82rem 1rem; min-height: 48px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666d7c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 17px; padding-right: 2.6rem;
}
.field input::placeholder, .field textarea::placeholder { color: #9aa1ad; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 4px rgba(70,103,168,.18);
}
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #d7503c; }
.field.has-error .field__error { display: block; }
.field__error { display: none; font-size: var(--fs-xs); color: #c0392b; font-weight: 600; }
.checkbox-wrap.has-error .field__error { display: block; }
.form__row { display: grid; gap: 1.05rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.form__note { font-size: var(--fs-xs); color: var(--ink-3); }
.checkbox { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.checkbox input { width: 20px; height: 20px; flex: none; margin-top: .16rem; accent-color: var(--navy-700); }

.form-status {
  display: none; gap: .65rem; align-items: flex-start;
  padding: .95rem 1.1rem; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600;
}
.form-status.is-visible { display: flex; }
.form-status--ok { background: var(--navy-50); color: var(--navy-800); box-shadow: inset 0 0 0 1px var(--navy-200); }
.form-status--err { background: #fdf0ee; color: #a5321f; box-shadow: inset 0 0 0 1px #f3c9c1; }
.form-status svg { width: 19px; height: 19px; flex: none; margin-top: .1rem; }

.panel {
  background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--sh-md); padding: clamp(1.4rem, 3vw, 2.4rem);
}

.contact-list { display: grid; gap: 1.1rem; }
.contact-item { display: flex; gap: .95rem; align-items: flex-start; }
.contact-item > span { min-width: 0; }
.contact-item__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ink-3); }
.contact-item__value {
  font-weight: 650; color: var(--navy-950); font-size: var(--fs-base);
  text-decoration: none; display: block; overflow-wrap: anywhere;
}
a.contact-item__value:hover { color: var(--navy-600); text-decoration: underline; }
.contact-item .icon-badge { width: 46px; height: 46px; border-radius: var(--r-sm); }
.contact-item .icon-badge svg { width: 21px; height: 21px; }

.hours { display: grid; gap: .55rem; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); padding-bottom: .55rem; border-bottom: 1px dashed var(--line); }
.hours li:last-child { border-bottom: 0; padding-bottom: 0; }
.hours span:first-child { color: var(--ink-2); }
.hours span:last-child { font-weight: 650; color: var(--navy-950); text-align: right; overflow-wrap: anywhere; }

.footer { background: var(--navy-950); color: rgba(255,255,255,.64); padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.footer h4 { color: #fff; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.1rem; font-weight: 700; }
/* Explicit steps rather than auto-fit, which wrapped 3+1 between 700–1040px and
   left the contact column orphaned on a row of its own. The brand block spans
   the full width once there is no room for four columns. */
.footer__grid {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1.6fr 1fr 1fr 1.25fr;
  align-items: start;
}
.footer__brand { max-width: 36ch; }

@media (max-width: 1040px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: 1 / -1; max-width: 52ch; }
}
@media (max-width: 640px) {
  /* Two columns: the brand rejoins the grid so it pairs up rather than
     spanning and pushing the last column onto a row by itself. */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .footer__brand { grid-column: auto; max-width: none; }
}
@media (max-width: 420px) {
  .footer__grid { grid-template-columns: 1fr; }
}
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__name em { color: var(--navy-300); }
.footer__brand .brand__tag { color: rgba(255,255,255,.45); }
.footer__brand p { margin-top: 1.05rem; font-size: var(--fs-sm); line-height: 1.62; }
.footer__links { display: grid; gap: .6rem; }
.footer__links a { color: rgba(255,255,255,.64); text-decoration: none; font-size: var(--fs-sm); transition: color .2s, padding-left .2s var(--ease-out); }
.footer__links a:hover { color: #fff; padding-left: 4px; }
.footer__contact { display: grid; gap: .75rem; font-size: var(--fs-sm); }
.footer__contact a { color: rgba(255,255,255,.78); text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; overflow-wrap: anywhere; }
.footer__contact a:hover { color: #fff; text-decoration: underline; }
.footer__contact svg { width: 16px; height: 16px; color: var(--navy-300); flex: none; }
.socials { display: flex; gap: .55rem; margin-top: 1.25rem; }
.socials a {
  width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.8);
  transition: background-color .22s, color .22s;
}
.socials a:hover { background: var(--navy-600); color: #fff; }
.socials svg { width: 19px; height: 19px; }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-block: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(255,255,255,.5);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__bottom a { color: rgba(255,255,255,.62); text-decoration: none; }
.footer__bottom a:hover { color: #fff; text-decoration: underline; }

/* Floating mobile call bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: .55rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
  box-shadow: 0 -2px 20px rgba(12,21,38,.12);
}
.callbar .btn {
  flex: 1 1 0; min-width: 0; box-shadow: none;
  min-height: 46px; padding-inline: .6rem;
  font-size: var(--fs-sm);
}
@media (max-width: 700px) { .callbar { display: flex; } body { padding-bottom: 76px; } }
/* Very narrow phones: drop the icon so the labels always fit */
@media (max-width: 360px) { .callbar .btn svg { display: none; } }


/* --- Component + utility classes -----------------------------------------
   These replace repeated inline style attributes. Values are unchanged. */

/* Footer contact rows that are plain <p> rather than links */
.footer__contact p { display: flex; gap: .55rem; align-items: flex-start; }
.footer__contact p svg { width: 16px; height: 16px; color: var(--navy-300); flex: none; margin-top: .28rem; }

/* Legal page: long prose panel */
.legal h3 { font-size: var(--fs-h4); margin-top: 1.9rem; }
.legal p  { margin-top: .6rem; color: var(--ink-2); font-size: var(--fs-sm); }

/* One service block on the services page */
.service > .lead   { margin-top: 1rem; }
.service h3        { margin-top: 2rem; font-size: var(--fs-h4); }
.service .checks   { margin-top: 1rem; }
.service .btn-row  { margin-top: 1.8rem; }
.service__ideal    { margin-top: 1.6rem; font-size: var(--fs-sm); color: var(--ink-2); }
.service__ideal strong { color: var(--navy-700); }

/* Panel headings */
.panel__title    { font-size: var(--fs-h3); }
.panel__title--sm { font-size: var(--fs-h4); margin-bottom: 1.2rem; }
.panel__title--md { font-size: var(--fs-h4); margin-bottom: 1.4rem; }

/* Layout helpers */
.stack           { display: grid; gap: var(--gap); }
.split--top      { align-items: start; }
.section--center { text-align: center; }
.section--center .lead { margin-inline: auto; }
.btn-row--center { justify-content: center; }

/* Spacing utilities */
.mt-xs { margin-top: .4rem; }
.mt-sm { margin-top: 1.1rem; }
.mt-md { margin-top: 1.5rem; }
.mt-lg { margin-top: 1.9rem; }
.mt-xl { margin-top: 2rem; }
.mt-gap { margin-top: var(--gap); }
.text-muted { color: var(--ink-2); }
.text-fine  { font-size: var(--fs-xs); color: var(--ink-3); }

/* 12. MOTION / PRINT ====================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .header, .topbar, .callbar, .nav-scrim, .btn, .footer__bottom nav { display: none !important; }
  body { color: #000; }
  .hero, .pagehero, .section--dark, .ctaband { background: none !important; color: #000 !important; }
  .hero h1, .pagehero h1, .ctaband h2 { color: #000 !important; }
  a { text-decoration: underline; }
}