/* ==========================================================================
   MNK Technology — Corporate Site Design System

   Palette: teal accent on slate-navy structure, white surfaces.
   sampled from the SWIFT brand reference:
     slate-navy  #1F394E   headlines / structure
     teal        #3AA694   accent, rules, labels, icon tint
     mint        #6FC5B2   light accent
     deep teal   #185E53   logo mark
     surface     #F6FAFB   card / section fill
   Every text/background pair below meets WCAG AA (>= 4.5:1).
   ========================================================================== */

:root {
  --navy-900: #0f2436;
  --navy-800: #142b3f;
  --navy-700: #1b364c;
  --navy-600: #24435c;

  --ink: #12293d;
  --ink-2: #31485c;
  --muted: #5f7488;
  --muted-2: #61748a;

  --line: #e0edeb;
  --line-2: #edf4f3;

  --bg: #ffffff;
  --bg-soft: #f6fafb;
  --bg-tint: #fbfdfd;

  /* Brand teal. 600 = primary button fill, 700 = accent text on white. */
  --brand-900: #0b4a3f;
  --brand-800: #0f6a5b;
  --brand-700: #127363;
  --brand-600: #1b8471;
  --brand-500: #2e9b89;
  --brand-400: #6fc5b2;
  --brand-300: #9bd8cb;
  --brand-100: #d8efea;
  --brand-050: #f1f9f7;

  --ok: #0f7a4e;
  --ok-050: #eaf6f0;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(18, 41, 61, .05), 0 1px 3px rgba(18, 41, 61, .04);
  --shadow: 0 2px 6px rgba(18, 41, 61, .05), 0 12px 28px -14px rgba(18, 41, 61, .16);
  --shadow-lg: 0 4px 10px rgba(18, 41, 61, .06), 0 28px 56px -20px rgba(18, 41, 61, .24);

  --wrap: 1200px;
  --wrap-narrow: 860px;

  --ff: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
        "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --ff-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin: 0;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--brand-100); color: var(--ink); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding: 88px 0; }
.section--tight { padding: 60px 0; }
.section--soft { background: var(--bg-soft); }
.section--tint { background: var(--bg-tint); }
.section--navy { background: var(--navy-900); color: #c8d2e2; }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }

.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- typography ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-050);
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  padding: 5px 13px;
  margin-bottom: 18px;
}
.section--navy .eyebrow {
  color: var(--brand-400);
  background: rgba(46, 155, 137, .12);
  border-color: rgba(46, 155, 137, .28);
}

h1 { font-size: clamp(2rem, 4.4vw, 3.05rem); }
h2 { font-size: clamp(1.55rem, 2.9vw, 2.2rem); }
h3 { font-size: clamp(1.14rem, 1.7vw, 1.36rem); }
h4 { font-size: 1.03rem; }

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  color: var(--muted);
  line-height: 1.72;
}
.section--navy .lede { color: #9dacc4; }

.section-head h2 + .lede { margin-top: 16px; }

.accent { color: var(--brand-600); }
.strong-ink { color: var(--ink); font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background .18s ease, box-shadow .18s ease,
              transform .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--brand-500); color: #ffffff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--brand-400); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--dark { background: var(--navy-800); color: #fff; }
.btn--dark:hover { background: var(--navy-700); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn--ghost:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-050); }
.btn--onnavy { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.24); }
.btn--onnavy:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); }
.btn--lg { padding: 15px 28px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--link { padding: 0; color: var(--brand-700); font-weight: 600; }
.btn--link:hover { color: var(--brand-600); }
.btn--link::after { content: "\2192"; transition: transform .18s ease; display: inline-block; }
.btn--link:hover::after { transform: translateX(3px); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 78px;
}
/* The header carries the mark on its own (no sub-line), so it can be set far
   larger than a stacked lockup and the bar height follows it. Sized by height
   alone; the width/height attributes carry the 1.92 aspect ratio so space is
   reserved before the file loads. */
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand__logo { display: block; width: auto; height: 48px; flex-shrink: 0; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  font-size: .96rem;
  font-weight: 550;
  color: var(--ink-2);
  transition: background .16s, color .16s;
}
.nav__link:hover { background: var(--bg-soft); color: var(--ink); }
.nav__link.is-active { color: var(--brand-700); background: var(--brand-050); }
.nav__caret { width: 10px; height: 10px; opacity: .55; }

.nav__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 274px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__menu a {
  display: block;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  color: var(--ink-2);
  transition: background .14s, color .14s;
}
.nav__menu a:hover { background: var(--brand-050); color: var(--brand-700); }
.nav__menu a.is-current { background: var(--brand-050); color: var(--brand-700); }
.nav__menu a.is-current span { color: var(--brand-600); }
.nav__menu a span { display: block; font-size: .755rem; color: var(--muted-2); margin-top: 1px; }
.nav__menu-label {
  padding: 8px 12px 4px;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
}

.header-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.nav-toggle span { display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(46, 155, 137, .16), transparent 62%),
    radial-gradient(900px 480px at 6% 8%, rgba(36, 67, 92, .07), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
  border-bottom: 1px solid var(--line-2);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: 56px;
  align-items: center;
  padding: 84px 0 76px;
}
.hero h1 { margin-bottom: 22px; }
.hero .lede { max-width: 560px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero__panel {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 30px;
  box-shadow: var(--shadow-lg);
}
.hero__panel img { width: 100%; height: auto; }

/* ---------- page hero (inner pages) ---------- */
.page-hero {
  background:
    radial-gradient(900px 420px at 88% -20%, rgba(46, 155, 137, .14), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--bg-soft));
  border-bottom: 1px solid var(--line-2);
  padding: 66px 0 58px;
}
.page-hero__inner { max-width: 820px; }
.page-hero h1 { margin-bottom: 18px; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--muted-2);
  margin-bottom: 20px;
}
.breadcrumb a:hover { color: var(--brand-700); }
.breadcrumb span { opacity: .5; }

/* ---------- grids ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.grid--wide { gap: 32px; }

/* ---------- cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--brand-400); box-shadow: var(--shadow); transform: translateY(-2px); }
.card__icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--brand-050);
  border: 1px solid var(--brand-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--brand-700);
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: .925rem; color: var(--muted); }

.card--plain { background: var(--bg-tint); border-color: var(--line-2); }
.card--plain:hover { transform: none; box-shadow: none; border-color: var(--line); }

.card--num { position: relative; padding-top: 30px; }
.card__num {
  position: absolute;
  top: 20px; right: 24px;
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--brand-100);
  line-height: 1;
  letter-spacing: -0.04em;
}

/* ---------- stat strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat { background: #fff; padding: 26px 24px; }
.stat__val {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.stat__val em { font-style: normal; color: var(--brand-600); }
.stat__label { font-size: .84rem; color: var(--muted); margin-top: 7px; }

.section--navy .stats { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.12); }
.section--navy .stat { background: var(--navy-800); }
.section--navy .stat__val { color: #fff; }
.section--navy .stat__label { color: #9dacc4; }

/* ---------- feature list ---------- */
.ticks { display: grid; gap: 13px; }
.ticks li { display: flex; gap: 11px; align-items: flex-start; font-size: .935rem; }
.ticks li::before {
  content: "";
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--ok-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8a5b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.section--navy .ticks li::before { background-color: rgba(255,255,255,.14); }

.ticks--amber li::before {
  background-color: var(--brand-050);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cf8419' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.ticks--deny li::before {
  border-radius: 4px;
  background-color: #fdeeee;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4232a' stroke-width='3.6' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
}

/* ---------- tables ---------- */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
table.spec {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: .895rem;
}
table.spec caption {
  caption-side: top;
  text-align: left;
  padding: 20px 24px 4px;
  font-weight: 700;
  color: var(--ink);
  font-size: 1rem;
}
table.spec thead th {
  background: var(--brand-700);
  color: #fff;
  font-weight: 650;
  font-size: .82rem;
  letter-spacing: .02em;
  text-align: left;
  padding: 13px 18px;
  white-space: nowrap;
  vertical-align: bottom;
  border-bottom: 1px solid var(--brand-800);
}
table.spec thead th:first-child { border-top-left-radius: 0; }
table.spec tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-soft);
  padding: 13px 18px;
  width: 210px;
  vertical-align: top;
}
table.spec tbody td {
  padding: 13px 18px;
  border-top: 1px solid var(--line-2);
  color: var(--ink-2);
  vertical-align: top;
}
table.spec tbody tr:hover th,
table.spec tbody tr:hover td { background: var(--brand-050); }
table.spec tbody tr:hover th { background: var(--brand-100); }
table.spec .hl { color: var(--brand-700); font-weight: 650; }
table.spec .num { font-variant-numeric: tabular-nums; }
table.spec .sub { display: block; font-size: .78rem; color: var(--muted-2); margin-top: 2px; }
table.spec--compact tbody th { width: 170px; }

/* Links inside body copy and specification tables.
   Without this they inherit the surrounding colour and read as plain text,
   which breaks any "click through for more" cell. Underlined so the link is
   not signalled by colour alone. */
p a, li a, td a, th a {
  color: var(--brand-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .14s;
}
p a:hover, li a:hover, td a:hover, th a:hover { color: var(--brand-900); }
/* on dark bands the deep teal would disappear */
.section--navy p a, .section--navy li a, .section--navy td a, .section--navy th a { color: var(--brand-400); }

/* badge in table header */
.th-badge {
  display: inline-block;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--brand-500);
  color: #ffffff;
  border-radius: 3px;
  padding: 2px 6px;
  margin-left: 7px;
  vertical-align: middle;
  font-weight: 800;
}

/* ---------- product card ---------- */
.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.product-card:hover { border-color: var(--brand-400); box-shadow: var(--shadow); transform: translateY(-3px); }
.product-card__media {
  background: linear-gradient(180deg, #fff, var(--bg-soft));
  border-bottom: 1px solid var(--line-2);
  padding: 26px 26px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 196px;
}
.product-card__media img { max-height: 158px; width: auto; object-fit: contain; }
.product-card__body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.product-card__tag {
  font-size: .69rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand-700);
  font-weight: 750;
  margin-bottom: 9px;
}
.product-card__body h3 { margin-bottom: 9px; }
.product-card__body p { font-size: .9rem; color: var(--muted); }
.product-card__meta {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.pill {
  font-size: .735rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
}
.product-card__foot { margin-top: 18px; }

/* ---------- split feature ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 52px;
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow);
}
.split__media img { width: 100%; }
.split__body h2 { margin-bottom: 16px; }

/* ---------- case study ---------- */
.case {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.case + .case { margin-top: 26px; }
.case__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  padding: 26px 30px 20px;
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, #fff, var(--bg-tint));
}
.case__head h3 { flex: 1 1 320px; }
.case__sector {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 750;
  color: var(--brand-700);
  background: var(--brand-050);
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  padding: 4px 11px;
}
.case__body { padding: 26px 30px 30px; }
.case__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.case__col h4 {
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 12px;
}
.case__result {
  margin-top: 26px;
  padding: 18px 22px;
  background: var(--brand-050);
  border: 1px solid var(--brand-100);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--radius);
  font-size: .92rem;
}
.case__result strong { color: var(--ink); }
.case__quote {
  margin-top: 22px;
  padding-left: 20px;
  border-left: 3px solid var(--line);
  font-size: .92rem;
  font-style: italic;
  color: var(--muted);
}
.case__quote cite { display: block; font-style: normal; font-size: .82rem; color: var(--muted-2); margin-top: 9px; }

/* ---------- metrics row ---------- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; }
.metric {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.metric__val { font-size: 1.85rem; font-weight: 800; color: var(--brand-600); letter-spacing: -0.035em; line-height: 1; }
.metric__label { font-size: .85rem; color: var(--ink-2); margin-top: 8px; font-weight: 550; }
.metric__note { font-size: .78rem; color: var(--muted-2); margin-top: 4px; }

/* ---------- timeline ---------- */
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 6px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-400), var(--line));
}
.tl-year { position: relative; padding-bottom: 34px; }
.tl-year:last-child { padding-bottom: 0; }
.tl-year::before {
  content: "";
  position: absolute;
  left: -30px; top: 5px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--brand-500);
}
.tl-year > h3 { font-size: 1.12rem; margin-bottom: 14px; }
.tl-items { display: grid; gap: 10px; }
.tl-item { display: flex; gap: 14px; font-size: .91rem; align-items: baseline; }
.tl-item time {
  flex-shrink: 0;
  min-width: 74px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.tl-item span { color: var(--ink-2); }

/* ---------- architecture diagram ---------- */
.arch { display: grid; gap: 14px; }
.arch__tier {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 18px 20px;
}
.arch__tier-label {
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 750;
  color: var(--brand-700);
  margin-bottom: 12px;
}
.arch__nodes { display: flex; flex-wrap: wrap; gap: 9px; }
.arch__node {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 13px;
}
.arch__node small { display: block; font-weight: 500; color: var(--muted); font-size: .72rem; }

/* ---------- forms ---------- */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: .85rem;
  font-weight: 650;
  color: var(--ink);
  margin-bottom: 7px;
}
.field .req { color: var(--brand-600); }
.field .hint { font-size: .78rem; color: var(--muted-2); margin-top: 6px; }
.input, .select, .textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: .93rem;
  font-family: inherit;
  transition: border-color .16s, box-shadow .16s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: 0;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(46, 155, 137, .16);
}
.textarea { min-height: 132px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367758d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 15px; padding-right: 38px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 11px; }
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .89rem;
  cursor: pointer;
  transition: border-color .16s, background .16s;
}
.check:hover { border-color: var(--brand-400); background: var(--brand-050); }
.check input { margin-top: 3px; accent-color: var(--brand-600); flex-shrink: 0; }
.check span strong { display: block; color: var(--ink); font-weight: 600; }
.check span small { color: var(--muted-2); font-size: .78rem; }

.consent { display: flex; gap: 11px; align-items: flex-start; font-size: .86rem; color: var(--muted); }
.consent input { margin-top: 4px; accent-color: var(--brand-600); flex-shrink: 0; }

/* Spam trap. Kept in the DOM and technically fillable, but pushed off-screen so
   no human ever sees it. Do NOT change this to display:none — the whole point is
   that the field is present for anything that scrapes the markup. */
.form-trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  display: none;
  margin-top: 20px;
  padding: 15px 18px;
  border-radius: var(--radius-sm);
  font-size: .89rem;
  border: 1px solid transparent;
}
.form-status.is-error { display: block; background: #fdf0f0; border-color: #f3cfcf; color: #93201f; }
.form-status.is-ok { display: block; background: var(--ok-050); border-color: #c5e5d4; color: #14603d; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 44px; align-items: start; }
.info-list { display: grid; gap: 4px; }
.info-item { display: flex; gap: 15px; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.info-item:last-child { border-bottom: 0; }
.info-item__icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--brand-050);
  border: 1px solid var(--brand-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-700);
}
.info-item h4 { font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 5px; }
.info-item p, .info-item a { font-size: .95rem; color: var(--ink-2); }
.info-item a:hover { color: var(--brand-700); }

.map-embed {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-soft);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  color: var(--muted);
  font-size: .89rem;
}

/* ---------- before / after visual ---------- */
.ba {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.ba__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.ba__item--after { border-color: var(--brand-400); }
.ba__label {
  padding: 11px 18px;
  font-size: .75rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 750;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-soft);
  color: var(--muted);
}
.ba__item--after .ba__label { background: var(--brand-050); color: var(--brand-700); border-color: var(--brand-100); }
.ba__body { padding: 22px; }
.ba__body .big { font-size: 1.7rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }

/* ---------- cta band ---------- */
.cta-band {
  background:
    radial-gradient(760px 380px at 78% 0%, rgba(46, 155, 137, .2), transparent 60%),
    var(--navy-900);
  border-radius: var(--radius-xl);
  padding: 56px 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
}
.cta-band h2 { color: #fff; margin-bottom: 12px; max-width: 620px; }
.cta-band p { color: #9dacc4; max-width: 620px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-900); color: #94a3ba; padding: 68px 0 30px; font-size: .9rem; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-footer .brand { margin-bottom: 2px; }
.site-footer .brand__logo { height: 54px; }
.footer-about p { margin-top: 18px; max-width: 340px; color: #8394ad; font-size: .88rem; }
.footer-col h4 {
  color: #fff;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col a { display: block; padding: 6px 0; color: #94a3ba; font-size: .875rem; transition: color .15s; }
.footer-col a:hover { color: var(--brand-400); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font-size: .82rem;
  color: #7d8fa8;
}
.footer-bottom a:hover { color: var(--brand-400); }

/* ---------- notice banner ---------- */
.notice {
  background: var(--brand-050);
  border-bottom: 1px solid var(--brand-100);
  font-size: .84rem;
  color: var(--brand-700);
  text-align: center;
  padding: 9px 20px;
}
.notice strong { font-weight: 750; }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- utility ---------- */
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-24 { margin-bottom: 24px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.nowrap { white-space: nowrap; }
.divider { height: 1px; background: var(--line-2); border: 0; margin: 44px 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; padding: 66px 0 60px; }
  .hero__panel { max-width: 640px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* Collapse the menu bar before it runs into the header buttons.
   Six top-level items plus two buttons stop fitting around 1180px, so the
   burger takes over from there rather than at the generic mobile breakpoint. */
@media (max-width: 1200px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .header-cta .btn { display: none; }
  .header-cta .btn--keep { display: inline-flex; }
}

@media (max-width: 900px) {
  .section { padding: 66px 0; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split--reverse .split__media { order: 0; }
  .case__cols { grid-template-columns: 1fr; gap: 24px; }
  .cta-band { padding: 40px 32px; }
  .form-card { padding: 26px 22px; }
  .field-row { grid-template-columns: 1fr; }
  .ba { grid-template-columns: 1fr; }
}

/* mobile drawer */
@media (max-width: 1200px) {
  .site-header.is-open .nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 12px 20px 22px;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .site-header.is-open .nav__item { display: block; }
  .site-header.is-open .nav__link { display: block; padding: 12px 6px; font-size: .98rem; }
  .site-header.is-open .nav__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    margin: 0 0 8px 6px;
    padding: 2px 0 2px 10px;
    min-width: 0;
  }
  .site-header.is-open .nav__menu-label { display: none; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 18px; }
  .brand__logo { height: 40px; }
  .site-footer .brand__logo { height: 46px; }
  .section { padding: 54px 0; }
  .grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .cta-band { padding: 32px 24px; border-radius: var(--radius-lg); }
  table.spec { font-size: .84rem; }
  table.spec tbody th { width: 150px; padding: 11px 13px; }
  table.spec tbody td { padding: 11px 13px; }
  .card { padding: 22px; }
  .case__head, .case__body { padding-left: 20px; padding-right: 20px; }
}

/* print */
@media print {
  .site-header, .site-footer, .cta-band__actions, .nav-toggle { display: none !important; }
  body { color: #000; }
  .section { padding: 22px 0; }
}