/* =========================================================
   STUNNING DIGITAL — SHARED STYLESHEET
   ========================================================= */

:root {
  --color-dark: #3B3A3B;
  --color-accent: #014AAC;
  --color-text: #000000;
  --color-bg: #ffffff;
  --color-bg-alt: #f2f4f7;
  --color-border: #ccd6e5;
  --font-heading: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
  --max-width: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

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

a { color: var(--color-accent); }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: none;
  color: var(--color-text);
  line-height: 1.15;
  margin: 0 0 16px;
}

h1 { font-size: clamp(28px, 4vw, 44px); }
h2 { font-size: clamp(24px, 3.2vw, 34px); }
h3 { font-size: clamp(20px, 2.4vw, 26px); }

.accent { color: var(--color-accent); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 64px 0; }
.section-alt { background: var(--color-bg-alt); }
.section-dark { background: var(--color-dark); color: #fff; }

.text-center { text-align: center; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lede {
  max-width: 860px;
  margin: 0 auto 8px;
  text-align: center;
  color: #222;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  padding: 14px 32px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn:hover { background: #013a87; }

/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  background: var(--color-dark);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.header-brand img.logo { height: 34px; width: auto; }
.header-brand img.badge { height: 34px; width: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav a {
  color: #fff;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a.active {
  border-bottom-color: var(--color-accent);
}

.nav-dropdown { position: relative; }

.nav-dropdown > button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 2px;
}

.nav-dropdown svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.nav-dropdown.open svg { transform: rotate(180deg); }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  min-width: 180px;
  overflow: hidden;
  padding: 6px 0;
}

.nav-dropdown.open .nav-dropdown-menu { display: block; }

.nav-dropdown-menu a {
  display: block;
  padding: 10px 18px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.nav-dropdown-menu a:hover { background: var(--color-bg-alt); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle svg { width: 28px; height: 28px; }

@media (max-width: 860px) {
  .header-brand img.logo { height: 26px; }
  .header-brand img.badge { height: 26px; }

  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-dark);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
    box-shadow: 0 12px 20px rgba(0,0,0,0.25);
  }

  .site-nav.open { display: flex; }

  .site-nav a {
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .nav-dropdown { width: 100%; }

  .nav-dropdown > button {
    width: 100%;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    background: rgba(255,255,255,0.04);
    display: none;
  }

  .nav-dropdown.open .nav-dropdown-menu { display: block; }

  .nav-dropdown-menu a { color: #fff; padding: 12px 36px; }
  .nav-dropdown-menu a:hover { background: rgba(255,255,255,0.08); }
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  padding: 56px 0 40px;
  text-align: center;
}

.hero-heading {
  font-family: var(--font-heading);
  color: var(--color-accent);
  font-size: clamp(22px, 3vw, 30px);
  margin: 32px 0 24px;
}

.hero-visual-crop {
  width: 100%;
  max-width: 960px;
  margin: 0 auto 8px;
  aspect-ratio: 1500 / 400;
  overflow: hidden;
  border-radius: 6px;
}

.hero-visual-crop img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   INTRO / SERVICE CARDS
   ========================================================= */

.intro-block {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.intro-block p { margin: 0 0 18px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.service-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
  display: block;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.service-card img { width: 100%; height: auto; display: block; }

@media (max-width: 860px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}

.testimonial {
  background: var(--color-bg-alt);
  border-radius: 10px;
  padding: 28px 32px;
  text-align: center;
}

.testimonial p:first-child { margin-top: 0; }

.testimonial .author { font-weight: 700; margin: 0; }

.testimonial-note {
  text-align: center;
  color: #aaa;
  font-size: 12px;
  margin-top: 18px;
}

@media (max-width: 860px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   NEWSLETTER
   ========================================================= */

.newsletter-form {
  max-width: 560px;
  margin: 0 auto;
}

.newsletter-form label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}

.newsletter-form input[type="email"] {
  width: 100%;
  height: 46px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 16px;
  margin-bottom: 16px;
}

.newsletter-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 20px;
  font-size: 14px;
  color: #333;
}

.newsletter-consent input { margin-top: 3px; }

/* =========================================================
   SERVICES PAGE
   ========================================================= */

.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 48px 0;
  border-bottom: 1px solid var(--color-bg-alt);
}

.service-detail:last-child { border-bottom: none; }

.service-detail.reverse .service-detail-media { order: 2; }

.service-detail-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-bg-alt);
}

.service-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 88%;
}

.service-detail h2 { color: var(--color-accent); }

.service-detail p { margin: 0 0 16px; }

@media (max-width: 860px) {
  .service-detail,
  .service-detail.reverse .service-detail-media {
    grid-template-columns: 1fr;
    order: initial;
  }
  .service-detail { grid-template-columns: 1fr; }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.owner-quote {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.owner-quote blockquote {
  margin: 0;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
}

.owner-quote .author { margin-top: 20px; font-weight: 700; font-style: normal; }

.owner-quote img { border-radius: 10px; width: 100%; }

@media (max-width: 860px) {
  .owner-quote { grid-template-columns: 1fr; }
}

/* =========================================================
   PROJECTS PAGE
   ========================================================= */

.project-card {
  border: 2px solid var(--color-accent);
  border-radius: 10px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 28px;
}

.project-card img { border-radius: 6px; }

.project-card h3 { color: var(--color-accent); margin-bottom: 10px; }

.project-flip { text-align: center; }
.project-flip img {
  border-radius: 6px;
  margin: 0 auto 14px;
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
}

.flip-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.flip-toggle {
  border: 1.5px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  border-radius: 8px;
  padding: 6px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.flip-toggle.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: center;
  text-align: center;
}

.logo-grid img { margin: 0 auto; max-height: 100px; }

@media (max-width: 860px) {
  .project-card { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.contact-visual h3 {
  font-size: 22px;
  margin-bottom: 20px;
}

.contact-visual-images {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-visual-images img { border-radius: 6px; }

@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  background: var(--color-dark);
  color: #fff;
  padding: 40px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: start;
  text-align: left;
}

.footer-grid h4 {
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  margin-bottom: 12px;
}

.footer-grid a { color: #fff; text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; }

.footer-center { text-align: center; }
.footer-center img.logo { height: 30px; margin: 0 auto 10px; }
.footer-center img.badge { height: 30px; margin: 0 auto 12px; }

.footer-social { text-align: right; }

.footer-social-icons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.footer-social-icons a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-social-icons svg { width: 17px; height: 17px; fill: #fff; }

.footer-bottom {
  text-align: center;
  margin-top: 28px;
  font-size: 13px;
  color: #cfcfcf;
}

.footer-bottom a { color: #cfcfcf; }

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
  }
  .footer-social { order: -2; text-align: center; }
  .footer-social-icons { justify-content: center; }
  .footer-center { order: -1; }
}

/* =========================================================
   FORM RESULT (shared by newsletter + contact forms)
   ========================================================= */

.sd-form-result {
  display: none;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.sd-form-result.success {
  display: block;
  color: #11652a;
  background: #effbf2;
  border: 1px solid #c6eccf;
}

.sd-form-result.error {
  display: block;
  color: #a21f2d;
  background: #fff2f3;
  border: 1px solid #f2c7cc;
}

/* =========================================================
   PRIVACY POLICY PAGE
   ========================================================= */

.policy-content h2 { margin-top: 40px; color: var(--color-accent); }
.policy-content p, .policy-content li { color: #222; }
.policy-content { max-width: 860px; margin: 0 auto; }

/* =========================================================
   HOME PAGE — 2026 REDESIGN
   Topbar + hero slideshow + glass service cards
   ========================================================= */

.home,
.subpage {
  --blue: #0f56d1;
  --blue-hover: #0b45ab;
  --font-mono: 'Share Tech Mono', ui-monospace, 'Courier New', monospace;
  --font-ui: 'Inter', 'Segoe UI', Arial, Helvetica, sans-serif;
  --shell: 1320px;
  --bar-h: 72px; /* topbar height: 10px + --bar-item-h + 10px */
  --chamfer-x: 190px;
  --chamfer-y: 130px;
  --chamfer-len: 230px;
  background: #000;
  font-family: var(--font-ui);
}

/* ---------- Topbar ---------- */

.topbar {
  --bar-item-h: 52px;
  /* relative, not sticky — the bar scrolls away with the page. It still needs
     a positioned box so ::before (the white bar) can sit behind the content. */
  position: relative;
  z-index: 200;
  /* transparent so the rounded bottom corners reveal the page gradient that
     .home-stage pulls up behind the bar, at whatever scroll offset we're at */
  background: transparent;
}

/* the white bar itself, so the corners reveal --bar-backdrop, not the body */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}

.topbar-inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.topbar-brand { display: block; line-height: 0; min-width: 0; }
.topbar-brand img { height: var(--bar-item-h); width: auto; max-width: 100%; }

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.topbar-nav a {
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}

.topbar-nav a:hover { color: var(--blue-hover); }

.topbar-cta {
  display: inline-flex;
  align-items: center;
  height: var(--bar-item-h);
  background: var(--blue);
  color: #fff !important;
  padding: 0 22px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.topbar-cta:hover { background: var(--blue-hover); }

.topbar-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--blue);
  cursor: pointer;
  padding: 4px;
}

.topbar-toggle svg { width: 30px; height: 30px; }

/* ---------- Page gradient behind sections 1–3 ---------- */

.home-stage {
  /* run the gradient up behind the sticky bar so its rounded corners always
     sit on the gradient rather than on the black body background */
  margin-top: calc(var(--bar-h) * -1);
  padding-top: var(--bar-h);
  background: linear-gradient(
    180deg,
    #a9cff6 0%,
    #2b7ae0 6%,
    #0b4bb0 15%,
    #052a63 23%,
    #04132c 30%,
    #000 44%,
    #000 62%,
    #06214c 76%,
    #1a66cf 90%,
    #6ba9ec 100%
  );
  overflow: hidden;
}

/* ---------- Hero ---------- */

.home .hero {
  padding: 62px 28px 40px;
  text-align: left;
}

.hero-inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
}

.hero-card {
  position: relative;
  width: 66%;
  min-height: 610px;
  border-radius: 46px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer-x)) 0,
    100% var(--chamfer-y),
    100% 100%,
    0 100%
  );
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 62%),
    linear-gradient(158deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02) 46%, rgba(255, 255, 255, 0) 78%);
  backdrop-filter: blur(2px);
}

/* 1px ring that follows the rounded shape and stops at the chamfer */
.hero-card-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.35) 40%, rgba(255, 255, 255, 0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* the diagonal line across the cut corner */
.hero-card-chamfer {
  position: absolute;
  top: 0;
  left: calc(100% - var(--chamfer-x));
  width: var(--chamfer-len);
  height: 1.5px;
  background: rgba(255, 255, 255, 0.55);
  transform-origin: 0 50%;
  transform: rotate(34.4deg);
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding: 58px 60px 70px;
  max-width: 560px;
}

.hero-eyebrow {
  margin: 0 0 34px;
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

/* max is capped so "that work" fits the 440px copy column on one line —
   at 106px only about 8 characters fit and the heading broke onto 3 lines */
.hero-title {
  margin: 0 0 34px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: #fff;
}

.hero-sub {
  margin: 0 0 34px;
  font-family: var(--font-ui);
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 30em;
}

.hero-btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  background: var(--blue);
  padding: 16px 30px;
  border-radius: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.hero-btn:hover { background: var(--blue-hover); transform: translateY(-2px); }

/* ---------- Hero slideshow ---------- */

.hero-slideshow {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 50%;
  transform: translateY(-46%);
  width: 60%;
  max-width: 820px;
}

.hero-slideshow-track {
  position: relative;
  width: 100%;
  aspect-ratio: 1246 / 612;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.hero-slide.is-active { opacity: 1; visibility: visible; }

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.45));
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- Agency headline ---------- */

.agency {
  padding: 96px 28px 84px;
  text-align: center;
}

.agency-heading {
  max-width: 1240px;
  margin: 0 auto;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(28px, 4.3vw, 58px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #fff;
}

/* ---------- Glass service cards ---------- */

.services-strip { padding: 40px 28px 130px; }

.services-grid {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}

.glass-card {
  --card-pad-x: 26px;
  --art-scale: 1.092; /* 84% of the content box, enlarged 30% */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  min-height: 400px;
  padding: 40px var(--card-pad-x) 34px;
  border-radius: 26px;
  overflow: hidden;
  text-decoration: none;
  background:
    linear-gradient(
      180deg,
      rgba(6, 8, 12, 0.97) 0%,
      rgba(9, 12, 20, 0.93) 40%,
      rgba(94, 130, 178, 0.34) 74%,
      rgba(226, 238, 252, 0.50) 100%
    );
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.16) 45%, rgba(255, 255, 255, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* diagonal sheen across the top of each card */
.glass-card::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -30%;
  width: 90%;
  height: 190%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(24deg);
  pointer-events: none;
}

.glass-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.52);
}

.glass-card-title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(21px, 2.1vw, 31px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
  color: #fff;
}

.glass-card-art {
  position: relative;
  z-index: 2;
  margin-top: auto;
  margin-inline: calc(var(--card-pad-x) * -1);
  width: calc(100% + var(--card-pad-x) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass-card-art img {
  width: calc((100% - var(--card-pad-x) * 2) * var(--art-scale));
  max-width: 100%; /* never wider than the card itself */
  height: auto;
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .topbar { --bar-item-h: 46px; }
  .topbar-inner { padding: 10px 20px; }
  .topbar-nav { gap: 20px; }

  .home, .subpage { --bar-h: 66px; --chamfer-x: 140px; --chamfer-y: 96px; --chamfer-len: 170px; }
  .hero-card { width: 62%; min-height: 540px; }
  .hero-copy { padding: 46px 42px 56px; }
  .hero-slideshow { width: 64%; }
  .services-grid { gap: 22px; }
  .glass-card { --card-pad-x: 18px; padding: 32px var(--card-pad-x) 28px; }
}

@media (max-width: 980px) {
  /* The mobile header swaps in logo-mobile.svg (7:1, badge stacked) via
     <picture>, so the brand is ~41px tall at 360px and up to the 52px cap on a
     wide phone — taller than the old 10:1 lockup managed, which is the point.
     --bar-h feeds .home-stage's negative margin, so it has to cover the tallest
     the bar can get (10 + 52 + 10). Overshooting is invisible, because the
     white bar sits on top of the gradient; undershooting exposes the black body
     at the header's rounded bottom corners. */
  .home, .subpage { --bar-h: 72px; }
  .topbar-inner { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .topbar-brand { flex: 1 1 0; min-width: 0; }
  .topbar-brand img { height: auto; width: 100%; max-height: 52px; }
  .topbar-toggle { display: inline-flex; flex: 0 0 auto; padding: 3px; }
  .topbar-toggle svg { width: 28px; height: 28px; }

  .topbar-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 4px;
  }

  .topbar-nav.is-open { display: flex; }

  .topbar-nav a {
    padding: 14px 4px;
    border-top: 1px solid #e6ecf6;
  }

  .topbar-cta {
    margin-top: 12px;
    justify-content: center;
    text-align: center;
    border-top: 0;
  }

  /* hero stacks: card on top, devices below and overlapping */
  .home { --chamfer-x: 110px; --chamfer-y: 75px; --chamfer-len: 133px; }

  .home .hero { padding: 40px 20px 0; }
  .hero-card { width: 100%; min-height: 0; border-radius: 34px; }

  /* Centred column: eyebrow, title, sub, laptop, button.
     main.js moves the slideshow in here ahead of the button at this width. */
  .hero-copy { padding: 40px 26px 38px; max-width: none; text-align: center; }

  .hero-slideshow {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    width: 100%;
    max-width: 560px;
    margin: 10px auto 30px;
    transform: none;
  }

  .agency { padding: 64px 20px 60px; }
  .services-strip { padding: 20px 20px 90px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 560px) {
  .home, .subpage { --chamfer-x: 74px; --chamfer-y: 51px; --chamfer-len: 90px; }
  .hero-card { border-radius: 26px; }
  .hero-copy { padding: 34px 18px 32px; }



  .services-grid { gap: 14px; }

  .glass-card {
    --card-pad-x: 14px;
    --art-scale: 1.16; /* as much of the 30% bump as the narrow card allows */
    min-height: 232px;
    gap: 14px;
    padding: 24px var(--card-pad-x) 20px;
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .glass-card, .hero-btn { transition: none; }
}

/* =========================================================
   SHARED SUBPAGE SYSTEM
   Services / Portfolio / Info / Contact.
   Reuses the home tokens (--blue, --font-mono, --shell, --bar-h …)
   ========================================================= */

/* ---------- Stage ---------- */

/* Fixed-px stops so the "sky" fade is identical no matter how long the page
   runs — percentage stops would stretch it on the long Portfolio page. */
.subpage-stage {
  margin-top: calc(var(--bar-h) * -1);
  padding-top: var(--bar-h);
  background:
    linear-gradient(
      180deg,
      #a9cff6 0px,
      #2b7ae0 96px,
      #0b4bb0 230px,
      #052a63 360px,
      #04132c 470px,
      #000 660px
    ),
    #000;
  overflow: hidden;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 28px;
}

.shell-narrow {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Reusable glass panel ---------- */

.panel {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(6, 8, 12, 0.92) 0%, rgba(9, 22, 48, 0.72) 48%, rgba(16, 50, 110, 0.55) 100%);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42);
}

/* hairline gradient ring */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.14) 45%, rgba(255, 255, 255, 0.38));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* diagonal sheen, matching the home service cards */
.panel::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -30%;
  width: 90%;
  height: 190%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.09) 45%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(24deg);
  pointer-events: none;
  z-index: 1;
}

.panel > * { position: relative; z-index: 2; }

.panel-pad { padding: 44px 46px; }

/* light variant for panels sitting on the dark middle of the page */
.panel-lift {
  background:
    linear-gradient(180deg, rgba(18, 32, 60, 0.85) 0%, rgba(10, 16, 32, 0.9) 100%);
}

/* ---------- Page hero ---------- */

.page-hero { padding: 58px 28px 26px; }

.page-hero-card {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  min-height: 300px;
  border-radius: 46px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer-x)) 0,
    100% var(--chamfer-y),
    100% 100%,
    0 100%
  );
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 62%),
    linear-gradient(158deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02) 46%, rgba(255, 255, 255, 0) 78%);
  backdrop-filter: blur(2px);
}

.page-hero-copy {
  position: relative;
  z-index: 2;
  padding: 54px 60px 58px;
  max-width: 860px;
}

.page-eyebrow {
  margin: 0 0 26px;
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.page-title {
  margin: 0 0 26px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.032em;
  color: #fff;
}

.page-lead {
  margin: 0;
  max-width: 720px;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.84);
}

/* ---------- Section heads ---------- */

.section { padding: 74px 0; }
.section-tight { padding: 46px 0; }

.section-head { margin-bottom: 46px; text-align: center; }

.section-eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6ba9ec;
}

.section-title {
  margin: 0 0 18px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
}

.section-lead {
  max-width: 760px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.76);
}

.section-head-left { text-align: left; }
.section-head-left .section-lead { margin-left: 0; }

/* ---------- Alternating split rows ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}

.split + .split { margin-top: 84px; }

/* image column second on reversed rows, without reordering the DOM */
.split-reverse .split-art { order: 2; }

.split-art {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* object-fit keeps portrait artwork in proportion when max-height kicks in */
.split-art img { width: 100%; height: auto; max-height: 620px; object-fit: contain; }

/* Card behind service artwork. Lighter than the standard .panel so logos with
   black in them (the X mark especially) have something to sit against, and a
   fixed height so all four cards line up instead of each hugging its artwork. */
/* Opaque and light: a translucent card picked up whatever the page gradient was
   doing behind it, so the same card looked pale at the top of the page and
   almost black further down. */
.split-art.art-pad {
  padding: 34px;
  height: 470px;
  background: linear-gradient(168deg, #f2f7fd 0%, #dfeaf8 55%, #cfe0f4 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* contain + 100% box keeps the artwork centred and as large as it can be */
.split-art.art-pad img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  /* Each SVG has uneven whitespace baked into its own canvas, so object-fit
     faithfully centres a canvas whose artwork is off-centre — most of them sit
     high, and digital-advertising has 46% empty space below it. These offsets
     come from each file's measured pixel bounding box. No scaling: once
     contain-fitted the four artworks already land at ~58% of card height. */
  transform: translate(var(--art-x, 0), var(--art-y, 0));
}

.art-web     { --art-x: 1.2%;  --art-y: 3.8%;  }
.art-graphic { --art-x: -0.7%; --art-y: 12.6%; }
.art-ads     { --art-x: 0.4%;  --art-y: 19.6%; }
.art-social  { --art-x: 0.3%;  --art-y: 12.7%; }

.split-title {
  margin: 0 0 20px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
}

.split-body {
  margin: 0 0 22px;
  font-size: 16.5px;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.78);
}

.split-body strong { color: #fff; font-weight: 700; }

/* ---------- Feature lists ---------- */

.feature-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.feature-list li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 9px;
  border: solid #4d94f0;
  border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg);
}

/* ---------- Pills / tags ---------- */

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }

.pill {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #a9cff6;
  border: 1px solid rgba(150, 195, 250, 0.42);
  border-radius: 999px;
  padding: 7px 14px;
}

/* ---------- Buttons ---------- */

.btn-primary,
.btn-ghost {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 8px;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); transform: translateY(-2px); }

.btn-ghost {
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.42);
}

.btn-ghost:hover { border-color: #fff; transform: translateY(-2px); }

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

/* ---------- Project cards (Portfolio) ----------
   Named .work-card, not .project-card: the legacy light-theme block further up
   this file already owns .project-card / .project-flip / .flip-toggle. */

.work-card { padding: 40px 44px; }

.project-grid { display: grid; gap: 34px; }

.project-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 44px;
}

.project-split-reverse .project-shot { order: 2; }

.project-shot img { width: 100%; height: auto; }

.project-name {
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(24px, 2.5vw, 35px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}

.project-kicker {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6ba9ec;
}

.project-body {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- Front/back flip (print pieces) ----------
   Scoped under .work-card so these beat the legacy .project-flip / .flip-toggle
   rules above. The .project-flip hook itself stays — main.js looks for it. */

.work-card .project-flip {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: left;
}

.work-card .project-flip .flip-img {
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  margin: 0;
  border-radius: 10px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5);
}

.work-card .flip-controls { display: flex; gap: 10px; }

.work-card .flip-toggle {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.work-card .flip-toggle:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); }

.work-card .flip-toggle.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* =========================================================
   FLIP CARD (flyer, postcard)
   Ported from the original flyer/postcard preview code, generalised so one
   component drives every two-sided piece instead of one block each.
   ========================================================= */

.flip-scene { position: relative; width: 100%; perspective: 1400px; }

.flip-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* replaced from the image's real ratio by main.js */
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
  outline: none;
}

.flip-card.is-flipped { transform: rotateY(180deg); }

.flip-card:focus-visible {
  outline: 3px solid rgba(107, 169, 236, 0.6);
  outline-offset: 6px;
  border-radius: 14px;
}

.flip-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5);
}

.flip-front { z-index: 2; }
.flip-back { transform: rotateY(180deg); }

.flip-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
}

.flip-tag {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 5;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(10, 18, 36, 0.86);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.flip-hint {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.flip-hint strong { color: #fff; font-weight: 600; }

/* =========================================================
   Z-FOLD BROCHURE — interactive 3D
   Ported from the original z-fold preview. Drag to rotate, click to open.
   Panels are slices of the two flat artwork files (background-size: 300%).
   ========================================================= */

.vz-wrap { width: 100%; margin: 0 auto; user-select: none; -webkit-user-select: none; }

.vz-hint {
  margin-bottom: 12px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.vz-hint strong { color: #fff; font-weight: 600; }

.vz-scene { position: relative; width: 100%; aspect-ratio: 11 / 8.5; perspective: 1800px; }

.vz-shadow {
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 48%;
  height: 8%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 36%, rgba(0, 0, 0, 0) 76%);
}

/* closed: shift one panel left so the folded cover sits centred */
.vz-stage {
  position: absolute;
  inset: 5%;
  transform-style: preserve-3d;
  transform: translateX(-33.333333%);
  transition: transform 0.85s cubic-bezier(0.22, 0.72, 0.18, 1);
}

.vz-stage.is-open { transform: translateX(0); }

.vz-model {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 83.333333% 50%;
  cursor: grab;
  touch-action: pan-y;
  will-change: transform;
  transition: transform 0.65s cubic-bezier(0.22, 0.72, 0.18, 1), transform-origin 0.85s ease;
}

.vz-stage.is-open .vz-model { transform-origin: 50% 50%; }
.vz-model.is-dragging { cursor: grabbing; transition: none; }

/* right panel is the anchor the other two fold off */
.vz-right {
  position: absolute;
  top: 0;
  left: 66.666667%;
  width: 33.333333%;
  height: 100%;
  transform-style: preserve-3d;
  z-index: 3;
}

.vz-middle,
.vz-left {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 100% 50%;
  transition: transform 0.72s cubic-bezier(0.22, 0.72, 0.18, 1);
}

/* the two panels fold opposite ways — that's what makes it a Z */
.vz-middle { transform: rotateY(-179.5deg); transition-delay: 0.28s; }
.vz-left { transform: rotateY(179.5deg); transition-delay: 0s; }

.vz-stage.is-open .vz-middle { transform: rotateY(0deg); transition-delay: 0s; }
.vz-stage.is-open .vz-left { transform: rotateY(0deg); transition-delay: 0.28s; }

.vz-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 300% 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.25);
}

.vz-face-front { transform: translateZ(0.7px); }
.vz-face-back { transform: rotateY(180deg) translateZ(0.7px); }

/* The two flat artwork files are ~3.5MB each and are referenced only from CSS,
   so they'd download the moment the page renders. Gating them behind .vz-ready
   (added by main.js when the brochure nears the viewport) keeps 7MB off the
   initial load of the Portfolio page. */

/* open front: ABOUT US | HOW IT'S MADE | DEVRIES */
.vz-ready .vz-left > .vz-face-front,
.vz-ready .vz-middle > .vz-face-front,
.vz-ready .vz-right > .vz-face-front { background-image: url("/assets/projects/zfold-front.png"); }

.vz-left > .vz-face-front { background-position: 0% center; }
.vz-middle > .vz-face-front { background-position: 50% center; }
.vz-right > .vz-face-front { background-position: 100% center; }

/* rotating the whole model reverses the panel order, so the back slices flip */
.vz-ready .vz-left > .vz-face-back,
.vz-ready .vz-middle > .vz-face-back,
.vz-ready .vz-right > .vz-face-back { background-image: url("/assets/projects/zfold-back.png"); }

.vz-right > .vz-face-back { background-position: 0% center; }
.vz-middle > .vz-face-back { background-position: 50% center; }
.vz-left > .vz-face-back { background-position: 100% center; }

/* clean covers so the fully folded state has no panel overlap */
.vz-cover {
  position: absolute;
  inset: 0;
  z-index: 50;
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-color: #fff;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s linear 0.92s;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.vz-cover-front {
  background-position: 100% center;
  transform: translateZ(7px);
}

.vz-cover-back {
  background-position: 100% center;
  transform: rotateY(180deg) translateZ(7px);
}

.vz-ready .vz-cover-front { background-image: url("/assets/projects/zfold-front.png"); }
.vz-ready .vz-cover-back { background-image: url("/assets/projects/zfold-back.png"); }

.vz-stage.is-open .vz-cover { opacity: 0; transition: opacity 0.08s linear 0s; }

/* real faces stay hidden until opening, so the closed stack looks clean */
.vz-real-face { opacity: 0; transition: opacity 0s linear 1s; }
.vz-stage.is-open .vz-real-face { opacity: 1; transition: opacity 0s; }

.vz-left > .vz-face::after,
.vz-middle > .vz-face::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.13));
}

.vz-middle::after,
.vz-left::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.vz-stage:not(.is-open) .vz-middle::after {
  opacity: 0.12;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent 70%);
}

.vz-stage:not(.is-open) .vz-left::after {
  opacity: 0.09;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent 70%);
}

.vz-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.vz-btn {
  min-width: 68px;
  min-height: 42px;
  padding: 0 18px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vz-btn:hover:not(:disabled) { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.vz-btn.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.vz-btn:disabled { opacity: 0.5; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .flip-card, .vz-stage, .vz-model, .vz-middle, .vz-left { transition: none; }
}

/* ---------- Logo grid ---------- */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  padding: 26px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
}

.logo-tile img { max-width: 100%; max-height: 138px; width: auto; height: auto; }

/* ---------- Stat / step tiles ---------- */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.tile { padding: 34px 30px; }

.tile-num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.16em;
  color: #6ba9ec;
}

.tile-title {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.015em;
  color: #fff;
}

.tile-body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 14px; }

.faq-item {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 24px;
  position: relative;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  color: #fff;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border: solid #6ba9ec;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }

.faq-item p {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.76);
}

/* ---------- Testimonials ---------- */

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.testimonial { margin: 0; display: flex; flex-direction: column; }

.testimonial-stars { display: flex; gap: 4px; margin-bottom: 18px; color: #ffc542; }
.testimonial-stars svg { width: 19px; height: 19px; }

.testimonial-quote {
  margin: 0 0 20px;
  flex: 1;
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
}

.testimonial-author {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6ba9ec;
}

.testimonial-note {
  max-width: 760px;
  margin: 34px auto 0;
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
  color: rgba(255, 255, 255, 0.42);
}

/* ---------- Newsletter ---------- */

.newsletter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.newsletter .split-title { margin-bottom: 16px; }
.newsletter .split-body { margin-bottom: 0; }
.newsletter-form .form-submit { margin-top: 4px; }

/* consent statement in place of a tick box */
.form-consent-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}

.form-consent-note a { color: #6ba9ec; font-weight: 600; text-decoration: none; }
.form-consent-note a:hover { text-decoration: underline; }

/* ---------- Legal / long-form prose ---------- */

.legal h2 {
  margin: 38px 0 14px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  color: #fff;
}

.legal h2:first-child { margin-top: 0; }

/* full white — the 0.78 body text read as grey against the dark panel */
.legal p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: #fff;
}

.legal .feature-list li { color: #fff; }

.legal p strong { color: #fff; }
.legal a { color: #6ba9ec; text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal .feature-list { margin-bottom: 20px; }

/* ---------- CTA band ---------- */

.cta-band { padding: 20px 0 96px; }

.cta-inner {
  text-align: center;
  padding: 58px 46px;
}

.cta-title {
  margin: 0 0 16px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
}

.cta-body {
  max-width: 620px;
  margin: 0 auto 30px;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

.cta-inner .btn-row { justify-content: center; }

/* ---------- Contact layout ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 34px;
  align-items: start;
}

.contact-detail {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-detail:last-child { border-bottom: 0; }

.contact-detail svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: #6ba9ec;
}

.contact-detail-label {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.contact-detail a,
.contact-detail span.contact-detail-value {
  font-size: 16.5px;
  color: #fff;
  text-decoration: none;
}

.contact-detail a:hover { color: #6ba9ec; }

/* ---------- Dark form ---------- */

.form-group { margin-bottom: 18px; }

.form-group label,
.form-legend {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.form-req { color: #6ba9ec; }

.form-group input,
.form-group textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-group textarea { min-height: 128px; resize: vertical; line-height: 1.55; }

.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255, 255, 255, 0.4); }

.form-group input:focus,
.form-group textarea:focus {
  border-color: #4d94f0;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 4px rgba(77, 148, 240, 0.16);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.service-option { position: relative; display: block; min-width: 0; cursor: pointer; }

.service-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.service-face {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14.5px;
  font-weight: 600;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.service-option:hover .service-face { border-color: rgba(150, 195, 250, 0.6); }

.service-box {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  position: relative;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.service-option input:checked + .service-face {
  border-color: #4d94f0;
  background: rgba(77, 148, 240, 0.16);
  color: #fff;
}

.service-option input:checked + .service-face .service-box {
  background: var(--blue);
  border-color: var(--blue);
}

.service-option input:checked + .service-face .service-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.service-option input:focus-visible + .service-face {
  outline: 2px solid #6ba9ec;
  outline-offset: 2px;
}

.form-consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 4px 0 22px;
}

.form-consent input {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  flex-shrink: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.form-consent label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
}

.form-submit {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
}

.form-submit:hover { background: var(--blue-hover); }
.form-submit:disabled { opacity: 0.65; cursor: not-allowed; }
.form-submit svg { width: 19px; height: 19px; }

.form-note {
  /* the icon sits inline with the first word rather than being a flex
     sibling: centred text that wraps to two lines used to leave the lock
     stranded out to the left */
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.form-note svg {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
}
.form-note a { color: #6ba9ec; font-weight: 600; text-decoration: none; }
.form-note a:hover { text-decoration: underline; }

.form-result {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  text-align: center;
}

.form-result.is-success {
  display: block;
  color: #b7f0c6;
  background: rgba(23, 92, 44, 0.35);
  border: 1px solid rgba(94, 200, 128, 0.5);
}

.form-result.is-error {
  display: block;
  color: #ffc9ce;
  background: rgba(120, 26, 36, 0.35);
  border: 1px solid rgba(226, 110, 124, 0.5);
}

/* =========================================================
   ADS LANDING PAGE (/website-design/)
   Single conversion goal: the quote form. No nav competing with it.
   ========================================================= */

.lp-topbar .topbar-inner { justify-content: space-between; }

.lp-callbtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: var(--bar-item-h);
  padding: 0 20px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.lp-callbtn:hover { background: var(--blue-hover); }
.lp-callbtn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Hero ---------- */

.lp-hero { padding: 46px 0 30px; }

.lp-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: start;
}

.lp-title {
  margin: 0 0 20px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: #fff;
}

.lp-lead {
  margin: 0 0 24px;
  font-size: clamp(16px, 1.35vw, 18.5px);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.84);
}

.lp-offer {
  margin: 0 0 26px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid rgba(150, 195, 250, 0.45);
  background: rgba(15, 86, 209, 0.16);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.lp-offer strong { color: #fff; }

.lp-points { margin-bottom: 26px; }

.lp-trust {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

.lp-trust img {
  width: 120px;
  height: auto;
  background: #fff;
  border-radius: 8px;
  padding: 7px 10px;
}

/* ---------- Form card ---------- */

.lp-formcard { scroll-margin-top: 20px; }

.lp-formtitle {
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 29px);
  letter-spacing: -0.02em;
  color: #fff;
}

.lp-formsub {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

.lp-optional {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.45);
}

/* select needs the same treatment as the text inputs */
.form-group select {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 16px;
  outline: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.6) 50%),
                    linear-gradient(135deg, rgba(255,255,255,0.6) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-group select:focus {
  border-color: #4d94f0;
  box-shadow: 0 0 0 4px rgba(77, 148, 240, 0.16);
}

/* native dropdown list is drawn by the OS — needs readable colours */
.form-group select option { background: #0d1730; color: #fff; }

/* ---------- Proof ---------- */

.lp-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.lp-shot { margin: 0; padding: 22px 22px 0; overflow: hidden; }
.lp-shot img { width: 100%; height: auto; }

.lp-shot figcaption {
  padding: 14px 2px 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #6ba9ec;
}

/* ---------- Sticky mobile action bar ---------- */

.lp-bar { display: none; }

/* ---------- Footer ---------- */

.lp-footer { text-align: center; }
.lp-footer-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lp-footer-logo { width: 280px; max-width: 100%; height: auto; }
.lp-footer .footer-blurb { margin: 0; max-width: 560px; }

.lp-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}

.lp-footer-links a {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
}

.lp-footer-links a:hover { color: #fff; }

.lp-footer-copy { margin: 6px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.45); }

@media (max-width: 980px) {
  .lp-hero { padding: 30px 0 20px; }
  .lp-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .lp-proof { grid-template-columns: 1fr; }
  .lp-callbtn span { display: none; }
  .lp-callbtn { padding: 0 16px; }

  /* flex-basis 0 on .topbar-brand already yields to the call button here */

  /* fixed bar so the phone and the form are always one tap away */
  .lp-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(6, 12, 26, 0.94);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
  }

  .lp-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .lp-bar-call {
    flex: 0 0 96px;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
  }

  .lp-bar-call svg { width: 17px; height: 17px; }
  .lp-bar-quote { flex: 1; background: var(--blue); color: #fff; }

  /* keep the bar from covering the footer / last CTA */
  .lp .site-footer { padding-bottom: 96px; }
}

/* ---------- Footer ---------- */

.site-footer {
  background: linear-gradient(180deg, #0a1a3a 0%, #06122a 55%, #030a18 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 62px 0 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 44px;
  align-items: start;
}

.footer-brand img { width: 300px; max-width: 100%; height: auto; }

.footer-blurb {
  margin: 20px 0 0;
  max-width: 380px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

.footer-title {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6ba9ec;
}

.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

.footer-list a,
.footer-list span {
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
}

.footer-list a:hover { color: #fff; }

.footer-social { display: flex; gap: 12px; margin-top: 20px; }

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.footer-social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.footer-social svg { width: 19px; height: 19px; }

.footer-bottom {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a { color: rgba(255, 255, 255, 0.62); text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Active nav link ---------- */

.topbar-nav a.active { text-decoration: underline; text-underline-offset: 6px; }
.topbar-nav a.topbar-cta.active { text-decoration: none; }

/* ---------- Subpage responsive ---------- */

@media (max-width: 1180px) {
  .page-hero-copy { padding: 46px 42px 50px; }
  .panel-pad { padding: 36px 34px; }
  .split { gap: 40px; }
  .split + .split { margin-top: 64px; }
  .work-card { padding: 32px 30px; }
  .project-split { gap: 32px; }
}

@media (max-width: 980px) {
  .section { padding: 58px 0; }

  .split,
  .project-split,
  .contact-grid,
  .testimonial-grid,
  .newsletter {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* keep the artwork above the copy once stacked */
  .split-reverse .split-art,
  .project-split-reverse .project-shot { order: 0; }

  .split-art img { max-width: 520px; margin: 0 auto; }
  .split-art.art-pad { height: 340px; padding: 26px; }

  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .shell, .shell-narrow { padding: 0 18px; }
  .page-hero { padding: 34px 18px 18px; }
  .page-hero-card { border-radius: 26px; min-height: 0; }
  .page-hero-copy { padding: 30px 22px 34px; }
  .section { padding: 44px 0; }
  .panel-pad, .work-card { padding: 26px 20px; }
  .cta-inner { padding: 38px 22px; }
  .tile-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .split + .split { margin-top: 44px; }
  .project-grid { gap: 22px; }
  .site-footer { padding: 44px 0 26px; }

  /* Everything in the footer centres once it stacks into one column */
  .footer-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 36px;
  }

  .footer-brand img { margin-left: auto; margin-right: auto; }
  .footer-blurb { margin-left: auto; margin-right: auto; }
  .footer-social { justify-content: center; }

  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-ghost, .flip-toggle, .footer-social a { transition: none; }
  .btn-primary:hover, .btn-ghost:hover { transform: none; }
}

/* =========================================================================
   Ads landing page — jump links, professional form
   ========================================================================= */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.lp-work { scroll-margin-top: 20px; }

/* "See our work" card under the trust badge */
.lp-jump {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.lp-jump:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(107, 169, 236, 0.6); transform: translateY(-2px); }
.lp-jump-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lp-jump-text strong { font-size: 16px; font-weight: 700; }
.lp-jump-text span { font-size: 14px; color: rgba(255, 255, 255, 0.66); }
.lp-jump-arrow { width: 22px; height: 22px; margin-left: auto; flex-shrink: 0; color: #6ba9ec; }
.lp-jump:hover .lp-jump-arrow { animation: lp-nudge 0.9s ease-in-out infinite; }
@keyframes lp-nudge { 50% { transform: translateY(4px); } }

/* "Back to the form" link under the proof grid */
.lp-back {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: fit-content; margin: 34px auto 0; padding: 14px 24px;
  border-radius: 999px; background: var(--blue); color: #fff;
  font-weight: 600; text-decoration: none; transition: background 0.2s;
}
.lp-back:hover { background: var(--blue-hover); }
.lp-back svg { width: 18px; height: 18px; }

/* Form */
.lp-formhead { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.lp-formhead .lp-formsub { margin-bottom: 0; }
.lp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.lp-chips { border: 0; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-chips legend { padding: 0; margin-bottom: 10px; }
.lp-chip { position: relative; cursor: pointer; }
.lp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.lp-chip span {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 10px; border-radius: 10px; text-align: center;
  font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lp-chip:hover span { border-color: rgba(255, 255, 255, 0.35); }
.lp-chip input:checked + span { background: rgba(15, 86, 209, 0.35); border-color: #3f86ec; color: #fff; }
.lp-chip input:focus-visible + span { outline: 2px solid #6ba9ec; outline-offset: 2px; }

/* only flag a field once the visitor has actually left it wrong */
.lp-formcard .form-group input:user-invalid { border-color: #e5484d; }

.lp-formcard .form-submit { display: flex; align-items: center; justify-content: center; gap: 10px; }
.lp-formcard .form-submit svg { transition: transform 0.2s; }
.lp-formcard .form-submit:hover svg { transform: translateX(3px); }

.lp-assure {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  font-size: 13px; color: rgba(255, 255, 255, 0.72);
}
.lp-assure li { display: inline-flex; align-items: center; gap: 6px; }
.lp-assure svg { width: 14px; height: 14px; color: #5fd08a; }
.lp-privacy { margin-top: 10px; }

@media (max-width: 980px) {
  /* on phones the form comes straight after the hero; this card would push it
     down, and visitors reach the work by scrolling past the form anyway */
  .lp-jump { display: none; }
  .lp-bar-quote { flex: 1; }
}
@media (max-width: 480px) {
  .lp-row { grid-template-columns: 1fr; }
}

/* "See our work" card as a slideshow (reuses the home page crossfade) */
.lp-jump {
  flex-wrap: wrap;
  padding: 16px 22px 16px;
  column-gap: 14px;
  row-gap: 14px;
}
.lp-jump-show {
  display: block;
  flex: 0 0 100%;
  aspect-ratio: 1246 / 612;
}
.lp-jump-show .hero-slide img { filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.45)); }
.lp-jump-text { flex: 1; }
.lp-jump-text [data-slide-caption] { transition: opacity 0.3s; }
/* sized so the card finishes level with the bottom of the form on desktop */
@media (min-width: 981px) {
  .lp-jump { display: grid; grid-template-columns: 1fr auto; align-items: center; }
}
.lp-jump-show { grid-column: 1 / -1; width: 100%; max-width: 420px; justify-self: center; }


/* Trust line: one line with a dot on desktop, stacked beside the badge on phones */
.lp-trust-text > span + span::before { content: " · "; }
@media (max-width: 980px) {
  .lp-trust { flex-wrap: nowrap; }
  .lp-trust-text { display: flex; flex-direction: column; }
  .lp-trust-text > span + span::before { content: none; }
}

/* Landing page: keep "Website design · Wasaga Beach" on one line on phones.
   Scales down with the screen so it still fits on a 320px phone. */
@media (max-width: 980px) {
  .lp .page-eyebrow {
    font-size: min(15px, 3.7vw);
    letter-spacing: 0.12em;
    white-space: nowrap;
    margin-bottom: 18px;
  }
}

/* Footer: Services opens to show its pages, so the list stays short */
.footer-sub summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.74);
}
.footer-sub summary::-webkit-details-marker { display: none; }
.footer-sub summary:hover { color: #fff; }
.footer-sub summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.footer-sub[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.footer-sub ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 12px;
  display: grid;
  gap: 9px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-sub ul a { font-size: 14.5px; }
@media (max-width: 560px) {
  /* the footer centres below 560px, so drop the side rule and indent there */
  .footer-sub ul { padding-left: 0; border-left: 0; }
}
/* the eyebrow is held to one line on phones, so drop its tail there */
@media (max-width: 700px) { .eyebrow-more { display: none; } }

/* Hero: primary + secondary call to action side by side */
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-btn-ghost {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.hero-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
@media (max-width: 980px) { .hero-btns { justify-content: center; } }
.glass-card-body {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
/* keep the two hero buttons on one line inside the 440px copy column */
.hero-btns .hero-btn { font-size: 16px; padding: 14px 22px; }

/* =========================================================================
   Mobile hero: fit eyebrow, headline, sub, laptop and both buttons on one
   screen. Sized against a 360x640 viewport — the smallest common phone once
   the browser's own bars are showing — so taller phones have room to spare.
   ========================================================================= */
@media (max-width: 700px) {
  .home .hero { padding: 22px 16px 0; }
  .hero-copy { padding: 24px 18px 22px; }

  .hero-eyebrow {
    font-size: 11.5px;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    white-space: nowrap;
  }

  .hero-title {
    font-size: clamp(33px, 9.6vw, 44px);
    line-height: 1.02;
    margin-bottom: 14px;
  }

  .hero-sub {
    font-size: 14.5px;
    line-height: 1.5;
    margin: 0 auto 16px;
    max-width: 34em;
  }

  .hero-slideshow { width: 94%; max-width: 440px; margin: 2px auto 18px; }

  .hero-btns { gap: 8px; }
  .hero-btns .hero-btn { font-size: 13.5px; letter-spacing: 0.08em; padding: 12px 15px; }
}

/* very small phones: one more notch down so nothing spills */
@media (max-width: 380px) {
  .hero-title { font-size: 30px; }
  .hero-sub { font-size: 13.5px; }
  .hero-slideshow { width: 96%; }
  .hero-btns .hero-btn { font-size: 12.5px; padding: 11px 12px; }
}

/* The sticky bar carries the same action on phones, and it is always on
   screen, so the "back to your free quote" button is desktop-only. */
@media (max-width: 980px) { .lp-back { display: none; } }

/* =========================================================================
   Ads landing hero: the form and the work preview both have to be visible
   without scrolling on a 1366x768 laptop, so the hero is kept compact and
   neither column is stretched to match the other.
   ========================================================================= */
@media (min-width: 981px) {
  .lp-hero { padding: 26px 0 24px; }
  .lp-hero-grid { align-items: start; gap: 36px; }
  .lp-title { font-size: clamp(34px, 3.1vw, 44px); margin-bottom: 14px; }
  .lp-lead { margin-bottom: 18px; }
  .lp-points { margin-bottom: 18px; }
  .lp-points li { margin-bottom: 6px; }
  .lp-trust { margin-bottom: 0; }
  .lp-jump { margin-top: 18px; padding: 14px 18px 12px; }
  .lp-jump-show { max-width: 330px; }
  .lp-formcard { padding-top: 26px; padding-bottom: 26px; }
  .lp-formhead { margin-bottom: 16px; padding-bottom: 14px; }
  .lp-chips { margin-bottom: 14px; }
  .lp-formcard .form-group { margin-bottom: 12px; }
  .lp-formcard textarea { min-height: 84px; }
}

/* Laptops with a short viewport: squeeze a little further so the work
   preview still clears the fold. */
@media (min-width: 981px) and (max-height: 860px) {
  .lp-hero { padding: 16px 0 14px; }
  .lp-title { font-size: clamp(30px, 2.7vw, 38px); margin-bottom: 10px; }
  .lp-lead { margin-bottom: 12px; font-size: 15px; }
  .lp-points { margin-bottom: 12px; }
  .lp-points li { margin-bottom: 3px; }
  .lp-jump { margin-top: 12px; }
  .lp-jump-show { max-width: 250px; }
  .lp-formcard { padding-top: 20px; padding-bottom: 20px; }
  .lp-formhead { margin-bottom: 12px; padding-bottom: 10px; }
  .lp-formcard .form-group { margin-bottom: 10px; }
  .lp-formcard textarea { min-height: 70px; }
}

/* Bottoms level again, without the dead space that stretching the form
   caused: the form keeps its natural height and defines the row, while the
   copy column stretches to match it and pins the work card to the bottom.
   The gap that absorbs the difference is in the transparent column, not
   inside the form panel. */
@media (min-width: 981px) {
  .lp-hero-grid { align-items: stretch; }
  .lp-formcard { align-self: start; }
  .lp-hero-copy { display: flex; flex-direction: column; }
  .lp-hero-copy .lp-jump { margin-top: auto; }
  .lp-jump-show { max-width: 300px; }
}

/* On a short laptop the form sets the height of both columns, so it has to
   be tight enough that the work card — pinned to its bottom — still clears
   the fold. */
@media (min-width: 981px) and (max-height: 800px) {
  .lp-formcard { padding-top: 16px; padding-bottom: 16px; }
  .lp-formhead { margin-bottom: 10px; padding-bottom: 8px; }
  .lp-formtitle { font-size: 24px; }
  .lp-chips { margin-bottom: 10px; }
  .lp-chips legend { margin-bottom: 6px; }
  .lp-chip span { min-height: 38px; }
  .lp-formcard .form-group { margin-bottom: 8px; }
  .lp-formcard input { padding-top: 10px; padding-bottom: 10px; }
  .lp-formcard textarea { min-height: 56px; }
  .lp-formcard .form-submit { margin-top: 4px; padding-top: 13px; padding-bottom: 13px; }
  .lp-assure { margin-top: 10px; }
  .lp-privacy { margin-top: 6px; }
}
@media (min-width: 981px) and (max-height: 800px) {
  /* the copy column must not outgrow the form, or it sets the row height
     and the bottoms stop matching */
  .lp-jump { padding: 12px 16px 10px; }
  .lp-jump-show { max-width: 272px; }
}

/* Narrow desktops (1024-1100): the copy column wraps onto more lines than
   the form can match, so let the card sit naturally rather than stretch to
   a bottom it cannot reach. */
@media (min-width: 981px) and (max-width: 1100px) {
  .lp-hero-copy .lp-jump { margin-top: 18px; }
}