/* vantyard.com, from the approved mockups (09 Nov 2026). Brand: docs/brand/RULES.md, "Marketing
   pages" included. Figtree is self-hosted (copied from Vantyard.Ui by build.py); flat, no radius,
   no shadows; 44px controls; focus is a 2px #2E86AB outline. */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/figtree-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/figtree-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/figtree-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --navy: #1B3A6B;
  --navy-raised: #39527D;
  --accent: #2E86AB;
  --light: #E8F4FD;
  --ink: #111111;
  --rule: #D6E4F0;
  --quiet: #5A7291;
  --on-navy: #CDD9EC;
  --guard: #1A7A4A;
  --ops: #2E86AB;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FFFFFF; color: var(--ink); font-family: "Figtree", Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; }
h1, h2, h3, p, ul { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip { position: absolute; left: 16px; top: -60px; padding: 12px 16px; background: var(--navy); color: #FFFFFF; z-index: 10; }
.skip:focus { top: 12px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* Header */
.hdr { border-bottom: 1px solid var(--rule); background: #FFFFFF; }
.hdr .wrap { height: 72px; display: flex; align-items: center; gap: 32px; }
.hdr .logo { height: 40px; width: auto; display: block; }
.hdr .nav { display: flex; gap: 28px; margin-left: auto; align-items: center; }
.hdr .nav a { color: var(--navy); text-decoration: none; font-size: 15px; font-weight: 600; }
.hdr .nav a[aria-current="page"] { border-bottom: 3px solid var(--navy); padding: 24px 0 21px; }
.hdr .lang { color: var(--quiet); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-decoration: none; }
.menu { display: none; }

/* Buttons: 44px, 13px/700/+2px caps */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; border: 1px solid var(--navy); white-space: nowrap; }
.btn.primary { background: var(--navy); color: #FFFFFF; }
.btn.ghost { background: transparent; color: var(--navy); }
.on-navy .btn.primary { background: #FFFFFF; color: var(--navy); border-color: #FFFFFF; }
.on-navy .btn.ghost { color: #FFFFFF; border-color: #FFFFFF; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* Bands */
.band { padding: 96px 0; }
.band.light { background: var(--light); }
.on-navy { background: var(--navy); color: #FFFFFF; }
.on-navy .lead { color: var(--on-navy); }
.on-navy a:focus-visible { outline-color: #FFFFFF; }

/* Type */
.display { font-size: 56px; font-weight: 700; line-height: 1.05; letter-spacing: -0.5px; }
.h2 { font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -0.3px; color: var(--navy); }
.on-navy .h2 { color: #FFFFFF; }
.h1-navy { color: var(--navy); }
.h3 { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--navy); }
.lead { font-size: 20px; line-height: 1.55; max-width: 34em; }
.body { font-size: 17px; line-height: 1.6; max-width: 66ch; }
.caps { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--quiet); }

/* Hero */
.hero { padding: 88px 0 96px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.hero .copy, .phead .copy { display: flex; flex-direction: column; gap: 24px; }
.shots { position: relative; padding-bottom: 72px; }
.shot { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: #FFFFFF; }
.on-navy .shot { border-color: var(--navy-raised); }
.shots .front { position: absolute; width: 58%; left: -48px; bottom: 0; border: 1px solid var(--navy); outline: 8px solid var(--navy); }

.closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }

/* Grids */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.point { border-top: 1px solid var(--navy); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }

/* Product cards: a product colour only inside its own card */
.card { border: 1px solid var(--rule); display: flex; flex-direction: column; background: #FFFFFF; }
.card .bar { height: 3px; }
.card .bar.guard { background: var(--guard); }
.card .bar.ops { background: var(--ops); }
.card .in { padding: 32px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.card .name { display: flex; align-items: center; gap: 12px; }
.card .name img { width: 32px; height: 34px; }
.card .more { margin-top: auto; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.card .shot { border-width: 0 0 1px 0; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; }
.step { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--rule); padding-top: 20px; }
.step .n { font-size: 44px; font-weight: 700; color: var(--accent); line-height: 1; }

/* Product page */
.phead { padding: 72px 0 88px; background: var(--light); }
.phead .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.phead .display { color: var(--navy); }
.brandline { display: flex; align-items: center; gap: 14px; }
.brandline img { width: 40px; height: 42px; }
.brandline .name { font-size: 22px; font-weight: 700; color: var(--navy); }
.brandline .tagline { font-size: 13px; font-weight: 400; letter-spacing: 4px; text-transform: uppercase; color: var(--accent); }
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding: 64px 0; border-top: 1px solid var(--rule); }
.feature:first-child { border-top: 0; }
.feature.flip .copy { order: 2; }
.feature .copy { display: flex; flex-direction: column; gap: 16px; }
.extras { padding: 64px 0 96px; border-top: 1px solid var(--rule); }
.who { color: var(--navy); font-weight: 600; }

/* Pricing */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }

/* Contact */
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.option { border: 1px solid var(--rule); border-top: 3px solid var(--navy); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.option .btn { margin-top: auto; align-self: flex-start; }
.checklist { padding-left: 20px; font-size: 17px; line-height: 1.8; }
.mail { font-size: 24px; font-weight: 700; color: var(--navy); text-decoration: none; }

/* Footer */
.ftr { background: var(--navy); color: var(--on-navy); padding: 64px 0 40px; font-size: 15px; line-height: 1.6; }
.ftr .top { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--navy-raised); }
.ftr .logo { height: 40px; width: auto; display: block; margin-bottom: 16px; }
.ftr a { color: #FFFFFF; text-decoration: none; }
.ftr a:hover { text-decoration: underline; }
.ftr .h { color: #FFFFFF; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.ftr .bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: 13px; }

/* Phone */
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .hdr .wrap { height: 60px; gap: 12px; }
  .hdr .logo { height: 30px; }
  .hdr .nav, .hdr .cta { display: none; }
  /* A <details> menu: works without JavaScript. */
  .menu { display: block; margin-left: auto; }
  .menu summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--rule); color: var(--navy); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] .panel { position: absolute; left: 0; right: 0; top: 60px; background: #FFFFFF; border-bottom: 1px solid var(--rule); padding: 8px 16px 16px; display: flex; flex-direction: column; z-index: 5; }
  .menu .panel a { display: flex; align-items: center; min-height: 44px; color: var(--navy); font-size: 17px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--rule); }
  .menu .panel .btn { margin-top: 12px; color: #FFFFFF; border-bottom: 1px solid var(--navy); justify-content: center; font-size: 13px; }
  .hdr { position: relative; }
  .band { padding: 56px 0; }
  .hero, .phead { padding: 48px 0 56px; }
  .hero .wrap, .phead .wrap, .feature { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .feature { padding: 40px 0; }
  .feature.flip .copy { order: 0; }
  .display { font-size: 36px; }
  .h2 { font-size: 28px; }
  .lead { font-size: 18px; }
  .shots { padding-bottom: 48px; }
  .shots .front { left: auto; right: 0; width: 64%; outline-width: 4px; }
  .cols3, .cols2, .options, .facts { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .card .in { padding: 24px; }
  .btns .btn { flex: 1 1 100%; }
  .ftr .top { grid-template-columns: minmax(0, 1fr); }
  .mail { font-size: 20px; }
}