/* ==========================================================================
   Uddan Unlimited - shared stylesheet
   White-led palette with a deep-navy / bright-blue brand pair. Every colour
   lives in the tokens below, so the whole site restyles from this one block.
   ========================================================================== */

:root {
  /* brand - navy carries authority, bright blue carries action */
  --ink: #0b2550;          /* deep navy: headings and dark sections */
  --ink-2: #143566;        /* raised navy: cards sitting on --ink */
  --ink-soft: #3a5f93;     /* mid navy: ledes and secondary nav text */
  --accent: #1668e3;       /* primary blue: eyebrows, links, focus, CTAs */
  --accent-2: #4f97ff;     /* lighter blue, legible on navy */
  --accent-soft: #e7f0fe;  /* pale blue tint behind icons and pills */

  /* neutrals - white is the page, blue-grey the alternate band */
  --surface: #ffffff;      /* page and card background */
  --wash: #f3f7fd;         /* soft blue band for alternating sections */
  --line: #e2eaf5;
  --line-2: #cddbed;
  --body: #4b5a70;
  --muted: #62718c;

  /* text on dark navy */
  --on-ink: #d6e4f7;
  --on-ink-dim: #9fb6d6;
  --on-ink-dimmer: #7e97ba;
  --on-ink-accent: #7fb4ff;   /* accent that still reads on navy */
  --footer-bg: #071d3d;

  /* status - deliberately not brand-tinted, so it still reads as status */
  --ok: #1d7a53;
  --danger: #b3261e;

  /* system */
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(11, 37, 80, .06), 0 2px 8px rgba(11, 37, 80, .05);
  --shadow: 0 10px 30px rgba(11, 37, 80, .09);
  --shadow-lg: 0 24px 60px rgba(11, 37, 80, .15);
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wrap: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* --------------------------------------------------------- layout helpers */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--wash { background: var(--wash); }
.section--white { background: var(--surface); }

.grid { display: grid; gap: 26px; }
/* Grid items default to min-width:auto, so a child that refuses to shrink -
   a form control, a long word - widens the whole track and the page with it. */
.grid > *, .split > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

.center { text-align: center; }
.center .sec-lead { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- typography */
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.012em;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.3rem; line-height: 1.3; }
h4 { font-size: 1.05rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--accent); }
.section--ink .eyebrow { color: var(--accent-2); }
.section--ink .eyebrow::before { background: var(--accent-2); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }

.sec-lead { font-size: 1.06rem; color: var(--muted); max-width: 620px; margin-top: 14px; }
.section--ink .sec-lead { color: var(--on-ink-dim); }
.sec-head { margin-bottom: 52px; }

.lede { font-size: 1.12rem; color: var(--ink-soft); }

/* -------------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  padding: 15px 28px; border-radius: 100px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-2); box-shadow: var(--shadow); }

.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-2); box-shadow: 0 10px 26px rgba(22, 104, 227, .32); }

.btn-ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* Every dark surface, not just .section--ink - the CTA band and the page head
   are navy too, and a default ghost button is navy-on-navy there. */
.section--ink .btn-ghost, .cta-band .btn-ghost, .page-head .btn-ghost {
  border-color: rgba(255, 255, 255, .34); color: #fff;
}
.section--ink .btn-ghost:hover, .cta-band .btn-ghost:hover, .page-head .btn-ghost:hover {
  background: #fff; color: var(--ink); border-color: #fff;
}

.btn-sm { padding: 11px 20px; font-size: .88rem; }
.btn-lg { padding: 17px 34px; font-size: 1rem; }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .92rem; color: var(--ink);
}
.link-arrow svg { transition: transform .2s var(--ease); }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; gap: 22px; height: 86px; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand__mark { width: 42px; height: 42px; flex: none; }
.brand__name {
  font-family: var(--display); font-weight: 600; font-size: 1.22rem;
  color: var(--ink); line-height: 1.05; letter-spacing: -.01em;
}
.brand__name small {
  display: block; font-family: var(--sans); font-size: .62rem; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase; color: var(--accent); margin-top: 3px;
}

.menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.menu a {
  position: relative; padding: 9px 13px; border-radius: 9px;
  font-size: .93rem; font-weight: 500; color: var(--ink-soft);
  white-space: nowrap;
  transition: color .18s, background .18s;
}
.menu a:hover { color: var(--ink); background: rgba(11, 37, 80, .06); }
.menu a.is-active { color: var(--ink); font-weight: 600; }
.menu a.is-active::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; background: var(--accent); border-radius: 2px;
}

.nav__cta { display: flex; align-items: center; gap: 12px; flex: none; }
.nav__phone { font-size: .9rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.burger {
  display: none; width: 46px; height: 46px; flex: none;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--surface); cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 13px; width: 20px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform .25s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 27px; }
.burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ----------------------------------------------------------------- mobile nav */
.mobile-nav {
  position: fixed; inset: 86px 0 0 0; z-index: 88;
  background: var(--surface); padding: 24px;
  transform: translateX(100%); transition: transform .3s var(--ease);
  overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
}
.mobile-nav.is-open { transform: none; }
.mobile-nav a {
  padding: 15px 16px; border-radius: 12px; font-size: 1.05rem; font-weight: 600;
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.mobile-nav a.is-active { color: var(--accent); }
.mobile-nav .btn { margin-top: 18px; }
/* `.mobile-nav a` sets a link colour and outranks the button classes on
   specificity, so the solid buttons have to take their text colour back. */
.mobile-nav .btn-accent, .mobile-nav .btn-primary { color: #fff; }
body.nav-open { overflow: hidden; }

/* ----------------------------------------------------------------------- hero */
.hero { position: relative; padding: 86px 0 96px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; top: -280px; right: -220px;
  width: 760px; height: 760px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(22, 104, 227, .13), transparent 62%);
  pointer-events: none;
}
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; position: relative; }
.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero__lede { font-size: 1.14rem; color: var(--ink-soft); max-width: 540px; margin-bottom: 32px; }

.hero__trust { display: flex; gap: 32px; margin-top: 44px; flex-wrap: wrap; }
.hero__trust div { min-width: 104px; }
.hero__trust b { display: block; font-family: var(--display); font-size: 1.95rem; color: var(--ink); line-height: 1; }
.hero__trust span { font-size: .82rem; color: var(--muted); }

.hero__art { position: relative; }
.hero__card {
  position: absolute; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 19px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 12px; font-size: .88rem; font-weight: 600; color: var(--ink);
}
.hero__card i { font-style: normal; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); display: grid; place-items: center; flex: none; }
.hero__card--a { top: 9%; left: -34px; animation: float 6s ease-in-out infinite; }
.hero__card--b { bottom: 11%; right: -22px; animation: float 6s ease-in-out infinite 2.4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

/* ------------------------------------------------------------------ logo strip */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); padding: 26px 0; }
.marquee__inner { display: flex; align-items: center; gap: 56px; flex-wrap: wrap; justify-content: center; }
.marquee span { font-family: var(--display); font-size: 1.12rem; color: var(--muted); opacity: .72; white-space: nowrap; }
.marquee__label { font-family: var(--sans) !important; font-size: .74rem !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent) !important; opacity: 1 !important; }

/* ---------------------------------------------------------------------- cards */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; transition: transform .26s var(--ease), box-shadow .26s, border-color .26s;
  height: 100%; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--line-2); }
.card__icon {
  width: 54px; height: 54px; border-radius: 15px; background: var(--accent-soft);
  display: grid; place-items: center; margin-bottom: 20px; flex: none;
}
.card__icon svg { width: 26px; height: 26px; stroke: var(--accent); fill: none; stroke-width: 1.7; }
.card h3 { margin-bottom: 9px; }
.card p { font-size: .95rem; color: var(--muted); }
.card .link-arrow { margin-top: auto; padding-top: 20px; }

/* illustration band at the top of a product card */
.card__media {
  border-radius: var(--radius); overflow: hidden; margin-bottom: 22px;
  background: var(--accent-soft); line-height: 0;
}
.card__media img { width: 100%; height: auto; }

/* wider illustration above a product write-up */
.prod-media {
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 26px;
  border: 1px solid var(--line); background: var(--accent-soft); line-height: 0;
}
.prod-media img { width: 100%; height: auto; }

.card--ink { background: var(--ink-2); border-color: rgba(255, 255, 255, .1); color: var(--on-ink); }
.card--ink h3 { color: #fff; }
.card--ink p { color: var(--on-ink-dim); }
.card--ink .card__icon { background: rgba(79, 151, 255, .16); }
.card--ink .card__icon svg { stroke: var(--accent-2); }

/* feature list */
.ticks { display: grid; gap: 13px; margin-top: 8px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; }
.ticks svg { width: 21px; height: 21px; flex: none; margin-top: 3px; stroke: var(--accent); fill: none; stroke-width: 2; }
.section--ink .ticks svg { stroke: var(--accent-2); }
.section--ink .ticks li { color: var(--on-ink); }

/* -------------------------------------------------------------------- numbers */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: rgba(255, 255, 255, .1); border-radius: var(--radius-lg); overflow: hidden; }
.stats div { background: var(--ink); padding: 38px 26px; text-align: center; }
.stats b { display: block; font-family: var(--display); font-size: clamp(2rem, 4vw, 2.9rem); color: #fff; line-height: 1; }
.stats b i { font-style: normal; color: var(--accent-2); }
/* direct child only: the counter is a <span> inside <b> and must not pick this up */
.stats > div > span { display: block; margin-top: 10px; font-size: .86rem; color: var(--on-ink-dim); }

/* --------------------------------------------------------------------- steps */
.steps { counter-reset: step; display: grid; gap: 22px; }
.step {
  display: grid; grid-template-columns: 60px 1fr; gap: 22px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px;
}
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--display); font-size: 1.5rem; color: var(--accent);
  border-right: 1px solid var(--line); padding-right: 20px; line-height: 1.2;
}
.step h4 { margin-bottom: 6px; }
.step p { font-size: .94rem; color: var(--muted); }

/* ---------------------------------------------------------------- testimonials */
.quote {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px; display: flex; flex-direction: column; height: 100%;
}
.quote__mark { font-family: var(--display); font-size: 3.4rem; color: var(--accent); line-height: .7; margin-bottom: 14px; }
.quote p { font-size: 1rem; color: var(--ink-soft); flex: 1; }
.quote__who { display: flex; align-items: center; gap: 13px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.quote__who img { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.quote__who b { display: block; font-size: .93rem; color: var(--ink); }
.quote__who span { font-size: .82rem; color: var(--muted); }

/* ---------------------------------------------------------------------- forms */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .87rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 11px;
  font: inherit; font-size: .96rem; color: var(--ink); background: var(--surface);
  transition: border-color .18s, box-shadow .18s;
  /* width:100% does not shrink a control's intrinsic size; this does. */
  min-width: 0;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22, 104, 227, .16);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field__error { display: none; font-size: .82rem; color: var(--danger); margin-top: 6px; }
.field.has-error .field__error { display: block; }
.form-note { font-size: .83rem; color: var(--muted); margin-top: 14px; }
.form-ok {
  display: none; background: #e8f3ee; border: 1px solid #bfdfd0; color: var(--ok);
  padding: 15px 18px; border-radius: 12px; font-size: .93rem; font-weight: 600; margin-bottom: 20px;
}
.form-ok.is-on { display: block; }

/* ------------------------------------------------------------------ accordion */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--ink);
  padding: 24px 44px 24px 0; position: relative;
}
.acc__q::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 1.5rem; font-weight: 400; color: var(--accent); transition: transform .25s var(--ease);
}
.acc__item.is-open .acc__q::after { transform: translateY(-50%) rotate(45deg); }
.acc__a { max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); }
.acc__a p { padding: 0 44px 24px 0; font-size: .97rem; color: var(--muted); }

/* ------------------------------------------------------------------- page head */
.page-head { background: var(--ink); color: var(--on-ink); padding: 64px 0 72px; position: relative; overflow: hidden; }
.page-head::after {
  content: ""; position: absolute; right: -160px; bottom: -220px; width: 560px; height: 560px;
  border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(79, 151, 255, .18), transparent 60%);
}
.page-head h1 { color: #fff; max-width: 760px; position: relative; }
.page-head p { max-width: 620px; margin-top: 16px; color: var(--on-ink-dim); position: relative; font-size: 1.05rem; }
.crumb { font-size: .84rem; color: var(--on-ink-dimmer); margin-bottom: 18px; position: relative; }
.crumb a:hover { color: var(--accent-2); }

/* ---------------------------------------------------------------------- split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split__media img, .split__media svg { border-radius: var(--radius-lg); width: 100%; }

/* ------------------------------------------------------------------- cta band */
.cta-band {
  background: var(--ink); border-radius: var(--radius-lg); padding: 64px 48px;
  text-align: center; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; left: -140px; top: -180px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(79, 151, 255, .2), transparent 62%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; max-width: 680px; margin: 0 auto 16px; }
.cta-band p { color: var(--on-ink-dim); max-width: 560px; margin: 0 auto 30px; }
.cta-band .btn-row { justify-content: center; }

/* --------------------------------------------------------------------- footer */
.site-footer { background: var(--footer-bg); color: #9db2cc; padding: 72px 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.25fr; gap: 44px; padding-bottom: 52px; }
.site-footer h4 { color: #fff; font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 20px; }
.site-footer .brand__name { color: #fff; }
.site-footer ul { display: grid; gap: 11px; }
.site-footer a { font-size: .93rem; transition: color .18s; }
.site-footer a:hover { color: var(--accent-2); }
.footer__about { font-size: .93rem; max-width: 330px; margin: 18px 0 22px; }
.social { display: flex; gap: 10px; }
.social a {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14);
  display: grid; place-items: center; transition: background .18s, border-color .18s;
}
.social a:hover { background: var(--accent); border-color: var(--accent); }
.social svg { width: 17px; height: 17px; fill: currentColor; }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1); padding: 24px 0 30px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .85rem;
}
.footer__legal { max-width: 760px; font-size: .79rem; color: #7e92ab; line-height: 1.65; padding-bottom: 26px; }

/* ----------------------------------------------------------------- utilities */
/*
 * Scroll reveal. Gated on .has-js, which an inline script in <head> sets, so a
 * visitor without JavaScript sees the content rather than a blank page - and
 * there is no flash of hidden content while main.js loads.
 */
.has-js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.has-js .reveal.is-in { opacity: 1; transform: none; }

/* job title under a team member's name. The brand blue is only 2.4:1 on the
   dark card, so that surface gets the lighter tint. */
.role { color: var(--accent); font-weight: 700; }
.card--ink .role, .section--ink .role { color: var(--on-ink-accent); }

.pill {
  display: inline-block; padding: 6px 14px; border-radius: 100px;
  background: var(--accent-soft); color: #17529e; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}

.rate-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.rate-table th, .rate-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: .94rem; }
.rate-table th { background: var(--accent-soft); color: var(--ink); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; }
.rate-table tr:last-child td { border-bottom: 0; }
.rate-table td:first-child { font-weight: 600; color: var(--ink); }

.info-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 26px; }
.info-row__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; flex: none; }
.info-row__icon svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.8; }
.info-row b { display: block; color: var(--ink); font-size: .95rem; margin-bottom: 3px; }
.info-row p, .info-row a { font-size: .94rem; color: var(--muted); }
.info-row a:hover { color: var(--accent); }

.map-frame {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  background: var(--surface); position: relative;
}
.map-frame__pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--surface); border: 1px solid var(--line); border-radius: 100px;
  padding: 11px 20px; font-size: .88rem; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 9px;
  max-width: 280px;
}
/* The inline pin icon carries no width/height of its own, so without this it
   renders at the SVG default size and fills solid black. */
.map-frame__pin svg {
  width: 18px; height: 18px; flex: none;
  stroke: var(--accent); fill: none; stroke-width: 1.9;
}

/* ------------------------------------------------------------------ responsive */
/* Header. The nav measures ~1138px with the phone number and ~1011px without,
   so the phone drops out first and the burger takes over before either can
   overflow. Both used to wait until 900px, which left the header 100px wider
   than the viewport through the whole tablet range. */
@media (max-width: 1180px) {
  .nav__phone { display: none; }
}

@media (max-width: 1080px) {
  .menu { display: none; }
  .burger { display: block; }
  .nav { height: 76px; }
  .mobile-nav { inset: 76px 0 0 0; }
}

@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__art { max-width: 520px; margin: 0 auto; }
  .hero__card--a { left: 0; }
  .hero__card--b { right: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 38px; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .section { padding: 68px 0; }
  .g-3, .split { grid-template-columns: 1fr; }
  .split { gap: 36px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cta-band { padding: 48px 26px; }
  .hero { padding: 60px 0 72px; }
}

@media (max-width: 560px) {
  /* The header CTA and the burger will not both fit on a narrow phone, and the
     CTA is the first item inside the drawer anyway. */
  .nav__cta > .btn { display: none; }
  .brand__name { font-size: 1.08rem; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .g-2, .g-4 { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .sec-head { margin-bottom: 36px; }
  .card { padding: 26px; }
  .step { grid-template-columns: 1fr; gap: 12px; padding: 24px; }
  .step::before { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 10px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .btn-row .btn { width: 100%; }
  .hero__card { display: none; }
  .hero__trust { gap: 22px; }
  .footer__bottom { flex-direction: column; gap: 8px; }
  .page-head { padding: 44px 0 52px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .has-js .reveal { opacity: 1; transform: none; }
}