/* xGU website – styles follow the xGU / Xplanis design system (xplanis.com) */

:root {
  /* brand */
  --orange: #f59c08;
  --orange-hover: #c47c06;
  --orange-lightest: #fef5e6;
  --orange-darker: #623e03;
  --anthracite: #333333;
  /* neutrals */
  --neutral-darkest: #000000;
  --neutral-darker: #191919;
  --neutral-dark: #4c4c4c;
  --neutral-light: #b2b2b2;
  --neutral-lightest: #f2f2f2;
  --white: #ffffff;
  /* semantic (light scheme) */
  --surface: var(--white);
  --surface-raised: var(--neutral-lightest);
  --ink: var(--neutral-darkest);
  --ink-heading: var(--neutral-darker);
  --ink-muted: var(--neutral-dark);
  --accent: var(--orange);
  --accent-hover: var(--orange-hover);
  --on-accent: #ffffff;                    /* website treatment; use var(--neutral-darker) for 8.1:1 contrast */
  --accent-text: var(--orange-darker);
  --border: #00000026;
  --fill-subtle: #0000000d;
  --fill-subtle-hover: #00000026;
  --focus-ring: var(--neutral-darkest);
  --scrim: #00000080;
  /* type */
  --font-sans: Montserrat, Arial, sans-serif;
  /* space & shape */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-20: 80px; --space-24: 96px; --space-32: 128px;
  --page-gutter: 5%;
  --radius-xs: 5px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
  --container-large: 80rem;
  --container-small: 48rem;
  --nav-height: 6rem;
  --ease-link: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-nav: cubic-bezier(0.77, 0, 0.175, 1);
}

/* dark scheme (website colour scheme 3) – applied per section */
.scheme-dark {
  --surface: var(--neutral-darker);
  --surface-raised: var(--neutral-darkest);
  --ink: var(--white);
  --ink-heading: var(--white);
  --ink-muted: var(--neutral-light);
  --accent-text: var(--orange);
  --border: #ffffff33;
  --fill-subtle: #ffffff1a;
  --fill-subtle-hover: #ffffff33;
  --focus-ring: var(--orange);
}
/* orange band (like the feature bands on xplanis.com), dark text for contrast */
.scheme-orange {
  --surface: var(--orange);
  --surface-raised: var(--white);
  --ink: var(--neutral-darker);
  --ink-heading: var(--neutral-darker);
  --ink-muted: var(--neutral-darker);
  --accent-text: var(--neutral-darker);
  --border: #00000033;
  --fill-subtle: #ffffff66;
  --fill-subtle-hover: #ffffffa6;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + var(--space-4)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; text-underline-offset: 3px; }
p a, li a, td a, .faq a { color: var(--accent-text); font-weight: 500; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

h1, h2, h3, h4 { color: var(--ink-heading); font-weight: 500; margin: 0 0 var(--space-4); }
h1 { font-size: 3.9rem;  line-height: 1.2; letter-spacing: -0.045rem; }
h2 { font-size: 3.25rem; line-height: 1.2; letter-spacing: -0.0325rem; }
h3 { font-size: 1.75rem; line-height: 1.4; letter-spacing: -0.0175rem; }
h4 { font-size: 1.375rem; line-height: 1.4; letter-spacing: -0.01375rem; }
p { margin: 0 0 var(--space-4); }
ul { margin: 0 0 var(--space-4); padding-left: 1.25rem; }

.text-medium { font-size: 1.125rem; line-height: 1.5; }
.text-small { font-size: 0.875rem; }
.muted { color: var(--ink-muted); }
.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-4);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.scheme-orange .eyebrow { color: var(--neutral-darker); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 200;
  background: var(--orange); color: var(--neutral-darker); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-xs); font-weight: 500;
}
.skip-link:focus { top: var(--space-4); }

/* ---------- layout ---------- */
.section { background: var(--surface); color: var(--ink); padding: var(--space-24) var(--page-gutter); }
.section--tight { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.container { max-width: var(--container-large); margin: 0 auto; }
.container--small { max-width: var(--container-small); }
.section-head { max-width: 56rem; margin-bottom: var(--space-12); }
.section-head p { color: var(--ink-muted); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.stack > * + * { margin-top: var(--space-20); }

/* ---------- buttons (design system: Button) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 6px var(--space-3);
  border: 1px solid var(--accent); border-radius: var(--radius-xs);
  background: var(--accent); color: var(--on-accent);
  font: 500 1rem/1.5 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, border-color .2s, gap .4s var(--ease-link);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--secondary {
  background: var(--fill-subtle); border-color: transparent; color: var(--ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn--secondary:hover { background: var(--fill-subtle-hover); border-color: transparent; }
.btn--dark { background: var(--neutral-darker); border-color: var(--neutral-darker); color: var(--white); }
.btn--dark:hover { background: var(--anthracite); border-color: var(--anthracite); }
.btn--link { background: transparent; border: none; padding: var(--space-1) 0; color: var(--ink); justify-content: flex-start; align-self: flex-start; }
.btn--link:hover, a.card:hover .btn--link { background: transparent; gap: var(--space-4); }
.btn--large { padding: var(--space-2) var(--space-4); }
.btn .arrow { width: 1em; height: 1em; }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

.tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  background: var(--fill-subtle); color: var(--ink);
  font-size: .875rem; font-weight: 500;
}

/* ---------- header / navigation ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: var(--neutral-darker); color: var(--white);
  transition: box-shadow .3s;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 #ffffff1a; }
.nav {
  display: flex; align-items: center; gap: var(--space-8);
  min-height: var(--nav-height); padding: 0 var(--page-gutter);
  max-width: calc(var(--container-large) + 10%); margin: 0 auto;
}
.nav-brand { display: flex; align-items: center; flex-shrink: 0; }
.nav-brand img { height: 40px; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--space-2); margin: 0 auto; padding: 0; list-style: none; }
.nav-links a {
  display: block; padding: var(--space-2) var(--space-3); color: var(--white); white-space: nowrap;
  text-decoration: none; font-weight: 500; transition: color .35s var(--ease-nav);
}
.nav-links a:hover, .nav-links a.is-active { color: var(--orange); }
.nav-actions { display: flex; align-items: center; gap: var(--space-4); }

.lang { position: relative; }
.lang > button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: none; border: 0; color: var(--white); cursor: pointer;
  font: 500 1rem/1.5 var(--font-sans); padding: var(--space-2);
  transition: color .35s var(--ease-nav);
}
.lang > button:hover { color: var(--orange); }
.lang > button svg { width: 12px; height: 12px; transition: transform .3s; }
.lang.is-open > button svg { transform: rotate(180deg); }
.lang ul {
  display: none; position: absolute; right: 0; top: calc(100% + var(--space-2));
  min-width: 11rem; margin: 0; padding: var(--space-2); list-style: none;
  background: var(--neutral-darker); border: 1px solid #ffffff33; border-radius: var(--radius-lg);
}
.lang.is-open ul { display: block; }
.lang ul a {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  color: var(--white); text-decoration: none; font-weight: 500;
}
.lang ul a:hover { background: #ffffff1a; }
.lang ul a[aria-current="true"] { color: var(--orange); }
.lang ul a span { color: var(--neutral-light); font-weight: 400; }

.nav-toggle {
  display: none; background: none; border: 0; color: var(--white); cursor: pointer;
  padding: var(--space-2); margin-left: auto;
}
.nav-toggle svg { width: 28px; height: 28px; }
.nav-toggle .icon-close { display: none; }
.site-header.is-open .nav-toggle .icon-close { display: block; }
.site-header.is-open .nav-toggle .icon-open { display: none; }

/* ---------- hero ---------- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(52rem, 100vh);
  padding: calc(var(--nav-height) + var(--space-20)) var(--page-gutter) var(--space-24);
  background: var(--neutral-darker) url('../img/VideoThumb.jpg') center / cover no-repeat;
  color: var(--white);
  overflow: hidden;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #000000b3 0%, #00000080 55%, #00000033 100%); }
.hero .container { position: relative; z-index: 2; width: 100%; }
.hero-content { max-width: 46rem; }
.hero h1 { color: var(--white); }
.hero p { font-size: 1.125rem; color: #ffffffe6; max-width: 40rem; }
.hero .eyebrow { color: var(--orange); }

/* ---------- product cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.card {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8); border-radius: var(--radius-lg);
  background: var(--surface-raised); color: var(--ink); text-decoration: none;
  transition: background-color .3s;
}
a.card:hover { background: #e8e8e8; }
.scheme-dark a.card:hover { background: #0a0a0a; }
.card__icon {
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; border: 2px solid var(--orange); color: var(--ink);
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--ink-muted); flex: 1; }

/* ---------- feature split / gallery ---------- */
.gallery__main {
  position: relative; display: block; cursor: zoom-in;
  border-radius: var(--radius-lg); background: var(--surface-raised);
  padding: var(--space-4); overflow: hidden;
}
.gallery__zoom {
  position: absolute; right: var(--space-6); bottom: var(--space-6);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #191919cc; color: var(--white); transition: background-color .2s, transform .2s;
}
.gallery__zoom svg { width: 20px; height: 20px; }
.gallery__main:hover .gallery__zoom { background: var(--neutral-darker); transform: scale(1.08); }
.gallery__main img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.gallery__thumb {
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid transparent; background: var(--fill-subtle); color: var(--ink);
  font: 500 .875rem/1.5 var(--font-sans); cursor: pointer; transition: background-color .2s;
}
.gallery__thumb:hover { background: var(--fill-subtle-hover); }
.gallery__thumb[aria-pressed="true"] { background: var(--orange); color: var(--neutral-darker); }
.scheme-orange .gallery__thumb[aria-pressed="true"] { background: var(--neutral-darker); color: var(--white); }

/* fullscreen image viewer */
.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0;
  padding: 5vh 4vw; border: 0; background: transparent;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: #000000e6; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); cursor: zoom-out; }
.lightbox__close {
  position: fixed; top: var(--space-4); right: var(--space-4); width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #ffffff1a; color: var(--white); cursor: pointer;
}
.lightbox__close:hover { background: var(--orange); }
.lightbox__close svg { width: 22px; height: 22px; }

.check-list { list-style: none; padding: 0; }
.check-list li { position: relative; padding-left: 1.75rem; margin-bottom: var(--space-2); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .7em; height: .7em; background: var(--orange); border-radius: 2px;
}
.scheme-orange .check-list li::before { background: var(--neutral-darker); }

/* ---------- pricing ---------- */
.pricing { margin-top: var(--space-12); }
.pricing h3 { margin-bottom: var(--space-6); }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-4); }
.price-card {
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--surface-raised); border: 1px solid var(--border);
}
.price-card__label { font-weight: 500; color: var(--ink-muted); margin-bottom: var(--space-2); }
.price-card__value { white-space: nowrap; font-size: 1.625rem; line-height: 1.3; font-weight: 500; color: var(--ink-heading); letter-spacing: -0.0175rem; }
.price-card__unit { font-size: .875rem; color: var(--ink-muted); margin-top: var(--space-1); }

.included {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-4);
  margin-top: var(--space-6);
}
.included div { display: flex; gap: var(--space-3); align-items: flex-start; }
.included svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--accent-text); margin-top: 1px; }
.fineprint { margin-top: var(--space-6); font-size: .875rem; color: var(--ink-muted); max-width: 60rem; }
.fineprint p { margin-bottom: var(--space-2); }

/* web-service query packages */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.pkg {
  display: flex; flex-direction: column;
  padding: var(--space-6) var(--space-8); border-radius: var(--radius-lg);
  background: var(--surface-raised); border: 1px solid var(--border);
}
.pkg__label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.pkg__range { margin-top: var(--space-1); font-size: 1.375rem; font-weight: 500; line-height: 1.4; white-space: nowrap; color: var(--ink-heading); }
.pkg__price {
  margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border);
  font-size: 1.75rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.0175rem; white-space: nowrap; color: var(--ink-heading);
}
.pkg__price small { font-size: .875rem; font-weight: 400; letter-spacing: 0; color: var(--ink-muted); }
.pkg__meta { margin-top: auto; padding-top: var(--space-2); font-size: .875rem; color: var(--ink-muted); }
.pkg--request { background: transparent; border-style: dashed; border-color: #00000040; }

/* distance list: price per list with saving */
.tier-bars { display: grid; gap: var(--space-2); }
.tier-bars__head {
  display: flex; justify-content: space-between; gap: var(--space-4); padding: 0 var(--space-6) var(--space-2);
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
}
.tier-bar {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-6);
  padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: var(--fill-subtle);
}
.tier-bar__label { font-weight: 500; white-space: nowrap; }
.tier-bar__price { display: flex; justify-content: flex-end; align-items: baseline; gap: var(--space-3); font-weight: 500; font-size: 1.125rem; white-space: nowrap; }
.tier-bar__saving { font-size: .8125rem; font-weight: 600; color: var(--accent-text); }

/* order box */
.order {
  margin-top: var(--space-12); padding: var(--space-8); border-radius: var(--radius-lg);
  background: var(--surface-raised); display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: center;
}
.order h3 { margin-bottom: var(--space-2); }
.order p:last-child { margin-bottom: 0; }
.order .btn-group { margin-top: 0; }
.scheme-orange .order { background: var(--neutral-darker); }
.scheme-orange .order, .scheme-orange .order h3 { color: var(--white); }
.scheme-orange .order p a { color: var(--orange); }
.scheme-dark .order { border: 1px solid var(--border); }

/* resources */
.resources { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-12); }
.resource { padding: var(--space-8); border-radius: var(--radius-lg); border: 1px solid var(--border); }
.resource h4 { margin-bottom: var(--space-4); }
.resource ul { margin: 0; }
.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li + li { margin-top: var(--space-2); }
.link-list a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--ink); font-weight: 500; text-decoration: none; transition: gap .4s var(--ease-link), color .2s;
}
.link-list a:hover { color: var(--accent-text); gap: var(--space-3); }
.link-list svg { width: 18px; height: 18px; color: var(--accent-text); flex-shrink: 0; }
.link-list small { color: var(--ink-muted); font-weight: 400; }

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-8); }
.quote {
  position: relative; display: flex; flex-direction: column; gap: var(--space-8); margin: 0;
  padding: var(--space-12) var(--space-8) var(--space-8); border-radius: var(--radius-lg); background: var(--surface-raised);
}
.quote__mark {
  position: absolute; top: -28px; left: var(--space-8);
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--orange); color: var(--neutral-darker);
}
.quote__mark svg { width: 26px; height: 26px; }
.quote blockquote { margin: 0; flex: 1; font-size: 1.125rem; line-height: 1.65; color: var(--ink-heading); }
.quote figcaption {
  display: flex; align-items: center; gap: var(--space-4);
  padding-top: var(--space-6); border-top: 1px solid var(--border);
}
.quote figcaption .logo-tile { width: 12rem; height: 6rem; }
.quote figcaption span { font-size: .875rem; color: var(--ink-muted); }

.logo-tile {
  display: grid; place-items: center; padding: var(--space-4);
  border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--border);
}
.logo-tile img { width: 160px; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.logos { margin-top: var(--space-20); }
.logos > p { margin: 0 0 var(--space-6); font-weight: 500; color: var(--ink-muted); }
.logo-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-4); }
.logo-row .logo-tile { height: 8rem; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-6);
  padding: var(--space-6) 0; cursor: pointer; list-style: none;
  font-size: 1.25rem; font-weight: 500; line-height: 1.4; color: var(--ink-heading);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 14px; height: 14px;
  border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .3s;
}
.faq details[open] summary::after { transform: rotate(225deg); }
.faq .answer { padding: 0 0 var(--space-6); color: var(--ink-muted); max-width: 48rem; }
.faq .answer ol { margin: 0; padding-left: 1.25rem; }
.faq .answer li + li { margin-top: var(--space-1); }

/* ---------- contact band ---------- */
.contact-band .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.contact-band h2 { margin-bottom: var(--space-4); }
.contact-options { display: grid; gap: var(--space-4); }
.contact-option {
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-6) var(--space-8); border-radius: var(--radius-lg);
  background: var(--surface-raised); border: 1px solid var(--border);
  color: var(--ink); text-decoration: none; transition: border-color .3s;
}
.contact-option:hover { border-color: var(--orange); }
.contact-option__icon {
  flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; border: 2px solid var(--orange);
}
.contact-option__icon svg { width: 22px; height: 22px; }
.contact-option small { display: block; font-size: .875rem; color: var(--ink-muted); }
.contact-option strong { display: block; font-size: 1.25rem; font-weight: 500; }
.contact-option .arrow { width: 22px; height: 22px; margin-left: auto; flex-shrink: 0; color: var(--orange); transition: transform .4s var(--ease-link); }
.contact-option:hover .arrow { transform: translateX(4px); }

/* ---------- footer ---------- */
.site-footer { background: var(--neutral-darkest); color: var(--neutral-light); padding: var(--space-20) var(--page-gutter) var(--space-8); font-size: .875rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-12); }
.footer-brand img { height: 36px; width: auto; margin-bottom: var(--space-4); }
.footer-brand .endorse { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.footer-brand .endorse img { height: 26px; margin: 0; }
.site-footer h4 { color: var(--white); font-size: 1rem; margin-bottom: var(--space-4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: var(--space-2); }
.site-footer a { color: var(--neutral-light); text-decoration: none; transition: color .35s var(--ease-nav); }
.site-footer a:hover { color: var(--orange); }
.site-footer address { font-style: normal; line-height: 1.8; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid #ffffff1a; font-size: .75rem;
}

/* ---------- video dialog ---------- */
.video-dialog { width: min(960px, 92vw); padding: 0; border: 0; border-radius: var(--radius-lg); background: #000; overflow: visible; }
.video-dialog::backdrop { background: #000000cc; }
.video-dialog video { width: 100%; border-radius: var(--radius-lg); }
.video-dialog__close {
  position: absolute; top: -48px; right: 0; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #ffffff1a; color: var(--white); cursor: pointer;
}
.video-dialog__close:hover { background: var(--orange); color: var(--neutral-darker); }
.video-dialog__close svg { width: 20px; height: 20px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav { flex-wrap: wrap; gap: 0; }
  .nav-brand { min-height: var(--nav-height); } /* keeps the logo row full height when the menu wraps open */
  .nav-toggle { display: block; }
  .nav-links, .nav-actions { display: none; }
  .site-header.is-open .nav-links,
  .site-header.is-open .nav-actions { display: flex; }
  .site-header.is-open .nav { padding-bottom: var(--space-6); }
  .nav-links { order: 3; width: 100%; flex-direction: column; align-items: stretch; margin: 0; border-top: 1px solid #ffffff1a; }
  .nav-links a { padding: var(--space-3) 0; border-bottom: 1px solid #ffffff1a; }
  .nav-actions { order: 4; width: 100%; justify-content: space-between; padding-top: var(--space-4); }
  .lang ul { right: auto; left: 0; }
}
@media (max-width: 991px) {
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2.25rem; }
  h3 { font-size: 1.5rem; }
  .section { padding-top: var(--space-20); padding-bottom: var(--space-20); }
  .grid-2, .quotes, .contact-band .container { grid-template-columns: 1fr; }
  .cards, .resources, .pkg-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

}
@media (max-width: 767px) {
  h1 { font-size: 2.25rem; letter-spacing: -0.02rem; }
  h2 { font-size: 1.875rem; }
  .section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .hero { min-height: auto; padding-top: calc(var(--nav-height) + var(--space-12)); padding-bottom: var(--space-12); }
  .cards, .resources, .pkg-grid { grid-template-columns: 1fr; }
  .tier-bar { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .tier-bars__head { padding: 0 var(--space-4) var(--space-2); }
  .order { grid-template-columns: 1fr; padding: var(--space-6); }
  .card, .resource, .contact-option { padding: var(--space-6); }
  .quote { padding: var(--space-12) var(--space-6) var(--space-6); }
  .quotes { gap: var(--space-12); }
  .quote figcaption .logo-tile { width: 10rem; height: 5rem; }
  .section-head { margin-bottom: var(--space-8); }
  .stack > * + * { margin-top: var(--space-12); }
  .logo-row { grid-template-columns: 1fr 1fr; }
  .logo-row .logo-tile { height: 6rem; }
}
@media (max-width: 479px) {
  .footer-grid { grid-template-columns: 1fr; }
}