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

   1. Base           document defaults
   2. Design system  the tokens every component is built from
   3. Components     topbar, heroes, sections, cards, forms, footer

   The system is deliberately small: two radii, one hairline, one shadow,
   one accent. A component that looks like it needs a new value is usually
   a component that needs rethinking.
   ========================================================= */

/* ---------- 1. Base ---------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: var(--font-ui);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { margin: 0 0 16px; font-weight: 700; line-height: 1.15; }

/* ---------- 2. Design system ---------- */

:root {
  /* brand */
  --blue: #0f56d1;
  --blue-hover: #0b45ab;
  --accent-soft: #83b4f2;        /* the brand blue, legible on a dark ground */

  /* type */
  --font-ui: 'Inter', 'Segoe UI', Arial, Helvetica, sans-serif;
  --font-mono: 'Share Tech Mono', ui-monospace, 'Courier New', monospace;
  --measure: 62ch;               /* reading width for body copy */

  /* surfaces and lines */
  --surface: #0b1424;            /* card fill on the dark page */
  --surface-raised: #101c31;
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.3);
  --ink-2: rgba(255, 255, 255, 0.74);   /* body copy */
  --ink-3: rgba(255, 255, 255, 0.5);    /* meta, captions */

  /* The header and footer bars */
  --bar-bg: #06101f;
  --bar-line: rgba(255, 255, 255, 0.1);

  /* shape, depth, rhythm */
  --r-control: 6px;              /* buttons, inputs, tags */
  --r-card: 14px;                /* cards, image frames, heroes */
  --shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  --focus-ring: 0 0 0 3px rgba(77, 148, 240, 0.35);
  --shell: 1320px;
  --section-y: 84px;
}

/* ---------- 3. Components ---------- */
/* =========================================================
   HOME + SUBPAGES
   Topbar, hero, sections, cards
   ========================================================= */

.home,
.subpage {
  --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 bar itself, so the rounded corners reveal the page gradient behind it
   rather than the body colour */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bar-bg);
  border-radius: 0 0 var(--r-card) var(--r-card);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
}

.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-ui);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.topbar-nav a:hover { color: #fff; }

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

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

/* Services is a <details>, exactly like the footer list: it opens with no
   JavaScript at all, and the caret is drawn with borders rather than an SVG,
   so it cannot render oversized if the stylesheet is ever late. */
.nav-sub { position: relative; }

.nav-sub summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-ui);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink-2);
  white-space: nowrap;
}

.nav-sub summary::-webkit-details-marker { display: none; }
.nav-sub summary:hover { color: #fff; }
.nav-sub.is-current > summary { text-decoration: underline; text-underline-offset: 6px; }

.nav-sub summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.nav-sub[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

/* Blink lets an absolutely positioned child escape the hiding a closed
   <details> normally does, so the menu is hidden explicitly rather than
   relying on the browser to do it. */
.nav-sub:not([open]) > .nav-sub-menu { display: none; }

.nav-sub-menu {
  position: absolute;
  top: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 204px;
  padding: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.nav-sub-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-control);
  font-size: 15px;
  color: var(--ink-2);
}

.nav-sub-menu a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.nav-sub-menu a.active { color: var(--accent-soft); text-decoration: none; }

.topbar-toggle {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  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: 548px;
  border-radius: var(--r-card);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer-x)) 0,
    100% var(--chamfer-y),
    100% 100%,
    0 100%
  );
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0) 85%);
}

/* 1px rule that follows the rounded shape and stops at the chamfer */
.hero-card-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: rgba(255, 255, 255, 0.34);
  -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: 1px;
  background: rgba(255, 255, 255, 0.34);
  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 28px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* 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-ui);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #fff;
  text-decoration: none;
  background: var(--blue);
  border: 1px solid var(--blue);
  padding: 14px 26px;
  border-radius: var(--r-control);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.hero-btn:hover { background: var(--blue-hover); border-color: var(--blue-hover); }

/* ---------- 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: 84px 28px 58px;
  text-align: center;
}

.agency-heading {
  max-width: 100%;
  margin: 0 auto;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(27px, 3.4vw, 46px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}

/* ---------- Service cards ---------- */

.services-strip { padding: 10px 28px 104px; }

.services-grid {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  /* Two services, so the pair is centred at the width the cards were drawn
     for rather than stretched across the full shell. */
  grid-template-columns: repeat(2, minmax(0, 400px));
  justify-content: center;
  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: 22px;
  min-height: 400px;
  padding: 34px var(--card-pad-x) 28px;
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.glass-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-raised);
}

.glass-card-title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  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 var(--line);
  }

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

  /* On a phone it opens inline, like the footer list, instead of floating. */
  .nav-sub { width: 100%; }

  .nav-sub summary {
    display: flex;
    justify-content: space-between;
    padding: 14px 4px;
    border-top: 1px solid var(--line);
  }

  .nav-sub-menu {
    position: static;
    transform: none;
    min-width: 0;
    margin: 0 0 6px 4px;
    padding: 0 0 0 14px;
    background: none;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }

  .nav-sub-menu a { padding: 11px 4px; 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: var(--r-card); }

  /* 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: var(--r-card); }
  .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: var(--r-card);
  }
}

@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 surface ---------- */

.panel {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}

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

.panel-pad { padding: 34px 36px; }

/* light variant for panels sitting on the dark middle of the page */
.panel-lift { background: var(--surface-raised); }

/* Grouped content that does not need a box: a hairline opens it instead. */
.block { padding-top: 26px; border-top: 1px solid var(--line); }

/* A standalone text block: the heading sits over its copy, and the column is
   centred in the shell so the slack falls evenly on both sides. */
.block-split { text-align: center; }
.block-head { margin-bottom: 24px; }
.block-head .split-title { margin-bottom: 0; }

.block-body {
  max-width: var(--measure);
  margin: 0 auto;
}

.block-body > :last-child { margin-bottom: 0; }
.block-split .btn-row { justify-content: center; }
.block + .block { margin-top: 32px; }
.block > :last-child { margin-bottom: 0; }
.block .feature-list:last-child { margin-bottom: 0; }

/* Secondary headings inside a block or a form, one step down from .split-title */
.split-title-sm { font-size: clamp(22px, 1.9vw, 26px); }

/* Small shared utilities, replacing the inline styles that were scattered
   across the pages. */
.pill-row-center { justify-content: center; }
.btn-row-center { justify-content: center; margin-top: 34px; }
.form-fieldset { border: 0; padding: 0; margin: 0 0 4px; }
.partner-badge { max-width: 300px; }
.contact-slideshow {
  position: static;
  transform: none;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
}

/* ---------- 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: var(--r-card);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer-x)) 0,
    100% var(--chamfer-y),
    100% 100%,
    0 100%
  );
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0) 85%);
}

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

.page-eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

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

.page-lead {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

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

.section { padding: var(--section-y) 0; }
.section-tight { padding: 54px 0; }

/* Section heads are opened by a hairline and centred over the content that
   follows: eyebrow, heading and lead stacked on one axis, with the slack
   falling evenly on both sides of the shell. */
.section-head {
  margin-bottom: 42px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.section-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

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

.section-lead {
  max-width: var(--measure);
  margin: 0 auto;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink-2);
}

.section-title:last-child, .section-lead:last-child { margin-bottom: 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: 30px;
  height: 440px;
  background: #eaf0f8;
  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 — both of these sit
     high. These offsets come from each file's measured pixel bounding box. No
     scaling: once contain-fitted the artwork already lands 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%; }

.split-title {
  margin: 0 0 18px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: #fff;
}

.split-body {
  margin: 0 0 20px;
  max-width: var(--measure);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink-2);
}

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

/* ---------- 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: var(--ink-2);
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 9px;
  border: solid var(--accent-soft);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

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

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }

.pill {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  padding: 6px 10px;
}

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

.btn-primary,
.btn-ghost {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }

.btn-ghost { color: #fff; border-color: var(--line-strong); }
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }

.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: 30px 32px; }

.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: var(--r-control);
  box-shadow: var(--shadow);
}

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

.work-card .flip-toggle {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  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: var(--r-card);
}

.flip-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  background: #fff;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--shadow);
}

.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: var(--r-control);
  background: rgba(10, 18, 36, 0.86);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  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: var(--r-control);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  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: 170px;
  padding: 24px;
  border-radius: var(--r-card);
  background: #fff;
}

.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);
  column-gap: 40px;
  row-gap: 34px;
}

/* Four steps read as four columns; three in a row of three leaves one
   stranded under an empty half. */
@media (min-width: 1100px) {
  .tile-grid-4 { grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
}

@media (min-width: 980px) and (max-width: 1099px) {
  .tile-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Steps and benefits are a list, not a row of cards: a hairline above each
   one does the grouping that a box used to. */
.tile { padding: 24px 0 0; border-top: 1px solid var(--line); }

.tile-num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.tile-title {
  margin: 0 0 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #fff;
}

.tile-body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-2);
}

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

.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }

/* Rows divided by hairlines — a question does not need its own box. */
.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 52px 20px 0;
  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: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border: solid var(--accent-soft);
  border-width: 0 1.5px 1.5px 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 52px 22px 0;
  max-width: 86ch;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-2);
}

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

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

/* A quote is text, not a box: a hairline and the measure do the work. */
.testimonial {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.testimonial-stars { display: flex; gap: 3px; margin-bottom: 16px; color: #e8b43c; }
.testimonial-stars svg { width: 19px; height: 19px; }

.testimonial-quote {
  margin: 0 0 18px;
  flex: 1;
  max-width: var(--measure);
  font-size: 16.5px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.88);
}

.testimonial-author {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.testimonial-note {
  max-width: var(--measure);
  margin: 30px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.42);
}

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

.newsletter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 46px;
  border-top: 1px solid var(--line);
}

.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 ---------- */

/* Long-form prose is centred in the shell, so the slack sits on both sides
   rather than piling up on the right. */
.legal { max-width: 860px; margin: 0 auto; }

.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: 10px 0 96px; }

/* The closing call to action is the one place a centred block earns its
   place, so it gets a rule and air instead of a box. */
.cta-inner {
  text-align: center;
  padding: 52px 24px 0;
  border-top: 1px solid var(--line);
}

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

.cta-body {
  max-width: 56ch;
  margin: 0 auto 28px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
}

.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 var(--line);
}

.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: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

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

.form-group input,
.form-group textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border-radius: var(--r-control);
  border: 1px solid var(--line-strong);
  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: var(--focus-ring);
}

.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: var(--r-control);
  border: 1px solid var(--line);
  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: var(--r-control);
  border: 1px solid var(--line-strong);
}

.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: var(--r-control);
  background: var(--blue);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.005em;
  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: var(--r-control);
  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: var(--r-control);
  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: var(--r-card);
  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: var(--r-control);
  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: var(--r-control);
  border: 1px solid var(--line-strong);
  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: var(--focus-ring);
}

/* 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 ---------- */


@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: #060c1a;
    border-top: 1px solid var(--line);
  }

  .lp-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    border-radius: var(--r-control);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
  }

  .lp-bar-call {
    flex: 0 0 96px;
    color: #fff;
    border: 1px solid var(--line-strong);
  }

  .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: var(--bar-bg);
  border-top: 1px solid var(--bar-line);
  padding: 58px 0 28px;
}

.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: var(--accent-soft);
}

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

.footer-list a,
.footer-list span {
  font-size: 15.5px;
  color: var(--ink-2);
  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: var(--r-control);
  border: 1px solid var(--line);
  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 var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--ink-3);
}

.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: var(--r-card); 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: var(--r-card);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: #fff;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.lp-jump:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--line-strong); }
.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: var(--r-control); 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 var(--line); }
.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: var(--r-control); 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 var(--line);
  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: var(--ink-2);
}
.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 var(--line);
}
.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-color: var(--line-strong);
}
.hero-btn-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: #fff; }
@media (max-width: 980px) { .hero-btns { justify-content: center; } }
.glass-card-body {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  text-align: center;
  color: var(--ink-2);
}
/* 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: 12px;
    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: 14px; padding: 12px 16px; }
}

/* 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; }
}

/* =========================================================================
   Graphic design page — the same landing layout, but the work shown is
   print, which is nearer 4:3 than the 2:1 website screenshots.
   ========================================================================= */
.lp-print .lp-jump-show { aspect-ratio: 4 / 3; max-width: 230px; }

@media (min-width: 981px) {
  .lp-print .lp-jump-show { max-width: 200px; }
}

/* Each piece is shown whole and centred, so the three cards keep the same
   height whether the artwork is portrait or landscape. */
.lp-print .lp-shot { padding: 20px; }
.lp-print .lp-shot img {
  height: 270px;
  object-fit: contain;
  border-radius: var(--r-control);
}

@media (max-width: 980px) {
  .lp-print .lp-shot img { height: 320px; }
}