/* ==========================================================================
   Diginova — design system
   Dark base, neon cyan + electric violet, glass surfaces, monospace accents.
   ========================================================================== */

:root {
  /* Base */
  --bg:            #0A0E1A;
  --bg-2:          #0D1322;
  --bg-3:          #111a2e;
  --surface:       rgba(255, 255, 255, 0.035);
  --surface-2:     rgba(255, 255, 255, 0.06);
  --line:          rgba(255, 255, 255, 0.09);
  --line-strong:   rgba(255, 255, 255, 0.16);

  /* Accents */
  --cyan:          #00E5FF;
  --violet:        #7C3AED;
  --violet-soft:   #A77BFF;
  --cyan-dim:      rgba(0, 229, 255, 0.5);
  --violet-dim:    rgba(124, 58, 237, 0.5);

  /* Text */
  --text:          #EAF0FF;
  --text-muted:    #9AA7C2;
  --text-dim:      #7C8AAA;
  --lead:          #C3CEE6;

  /* Gradients */
  --grad:          linear-gradient(115deg, var(--cyan) 0%, var(--violet) 100%);
  --grad-soft:     linear-gradient(115deg, rgba(0, 229, 255, .16), rgba(124, 58, 237, .16));
  --glow-cyan:     0 0 32px rgba(0, 229, 255, .28);
  --glow-violet:   0 0 32px rgba(124, 58, 237, .32);

  /* Type */
  --font-head:     'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:     'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Layout */
  --shell:         1200px;
  --radius:        16px;
  --radius-lg:     24px;
  --header-h:      76px;
}

/* ---------------------------------------------------------- Light theme ---
   The palette is entirely tokens, so the light theme is a token swap. Accents
   shift to darker equivalents because neon cyan on white fails contrast badly.
   The hero keeps its dark photographic panel and re-declares its own tokens,
   which is why its text stays legible over the night-city image. */

:root[data-theme="light"] {
  --bg:            #F6F8FC;
  --bg-2:          #FFFFFF;
  --bg-3:          #EEF2F9;
  --surface:       rgba(14, 22, 38, 0.035);
  --surface-2:     rgba(14, 22, 38, 0.065);
  --line:          rgba(14, 22, 38, 0.10);
  --line-strong:   rgba(14, 22, 38, 0.18);

  --cyan:          #0B7285;
  --violet:        #6D28D9;
  --violet-soft:   #7C3AED;
  --cyan-dim:      rgba(11, 114, 133, 0.45);
  --violet-dim:    rgba(109, 40, 217, 0.4);

  --text:          #0D1524;
  --text-muted:    #44506A;
  --text-dim:      #5A6780;
  --lead:          #37435C;

  --grad:          linear-gradient(115deg, #0891B2 0%, #6D28D9 100%);
  --grad-soft:     linear-gradient(115deg, rgba(8, 145, 178, .12), rgba(109, 40, 217, .12));
  --glow-cyan:     0 0 26px rgba(8, 145, 178, .18);
  --glow-violet:   0 0 26px rgba(109, 40, 217, .18);
}

:root[data-theme="light"] body::before {
  background:
    radial-gradient(720px 480px at 10% -10%, rgba(8, 145, 178, .10), transparent 60%),
    radial-gradient(760px 520px at 92% 2%, rgba(109, 40, 217, .10), transparent 62%),
    radial-gradient(900px 700px at 50% 112%, rgba(8, 145, 178, .07), transparent 60%);
}

:root[data-theme="light"] .grain { opacity: .015; }

:root[data-theme="light"] .site-header { background: rgba(255, 255, 255, .72); }
:root[data-theme="light"] .site-header.is-stuck { background: rgba(255, 255, 255, .94); }
:root[data-theme="light"] .mega-inner { background: rgba(255, 255, 255, .98); box-shadow: 0 30px 70px rgba(14, 22, 38, .16); }
:root[data-theme="light"] .site-nav { background: #FFFFFF; }

:root[data-theme="light"] .glass:hover { box-shadow: 0 18px 40px rgba(14, 22, 38, .12); }
:root[data-theme="light"] .btn-primary { color: #FFFFFF; }
:root[data-theme="light"] .btn-primary:hover { color: #FFFFFF; }
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea { background: #FFFFFF; }
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder { color: #667285; }
:root[data-theme="light"] select option { background: #FFFFFF; color: var(--text); }
:root[data-theme="light"] .preview { box-shadow: 0 16px 36px rgba(14, 22, 38, .16); }
:root[data-theme="light"] .media-band { box-shadow: 0 20px 44px rgba(14, 22, 38, .18); }

/* The page-head photographs are dark artwork; in the light theme they are
   dropped rather than veiled, so those pages stay genuinely light. */
:root[data-theme="light"] .page-media { display: none; }

/* The home hero keeps its night photograph, so it re-declares dark-theme
   tokens for its own subtree only. */
:root[data-theme="light"] .hero {
  --text:        #F2F6FF;
  --text-muted:  #C3CEE6;
  --text-dim:    #93A2BE;
  --cyan:        #2FD8F5;
  --surface:     rgba(255, 255, 255, .07);
  --surface-2:   rgba(255, 255, 255, .12);
  --line:        rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .22);
  --grad:        linear-gradient(115deg, #00E5FF 0%, #7C3AED 100%);
  --grad-soft:   linear-gradient(115deg, rgba(0, 229, 255, .18), rgba(124, 58, 237, .18));
}
:root[data-theme="light"] .hero p.lead { color: #D7E1F2; }
:root[data-theme="light"] .hero .btn-primary { color: #05101c; }

/* Components that carried light-on-dark colours need their light equivalents,
   or they vanish against the pale background. */

:root[data-theme="light"] a:hover { color: #0369A1; }

:root[data-theme="light"] .notice-ok {
  border-color: rgba(8, 145, 178, .4);
  background: rgba(8, 145, 178, .08);
  color: #0E5E70;
}
:root[data-theme="light"] .notice-bad {
  border-color: rgba(190, 40, 40, .35);
  background: rgba(220, 60, 60, .07);
  color: #9B1C1C;
}
:root[data-theme="light"] .field-error { color: #B91C1C; }

:root[data-theme="light"] .cta-band {
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(8, 145, 178, .13), transparent 62%),
    radial-gradient(600px 320px at 90% 100%, rgba(109, 40, 217, .15), transparent 62%),
    #FFFFFF;
}

:root[data-theme="light"] .sample-flag {
  border-color: rgba(180, 108, 0, .5);
  background: rgba(245, 165, 36, .14);
  color: #A96500;
}

:root[data-theme="light"] .chip,
:root[data-theme="light"] .tag { background: rgba(14, 22, 38, .04); }

:root[data-theme="light"] .hero .chip { background: rgba(255, 255, 255, .1); }

/* Theme switch ------------------------------------------------------------ */

.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--cyan-dim); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-dark { display: none; }
:root[data-theme="light"] .theme-toggle .icon-dark { display: block; }
:root[data-theme="light"] .theme-toggle .icon-light { display: none; }

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Ambient background wash — fixed so it never causes reflow while scrolling */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(760px 520px at 12% -8%, rgba(0, 229, 255, .13), transparent 62%),
    radial-gradient(820px 560px at 92% 4%, rgba(124, 58, 237, .16), transparent 64%),
    radial-gradient(900px 700px at 50% 112%, rgba(124, 58, 237, .10), transparent 60%);
}

/* Subtle film grain */
.grain {
  position: fixed;
  inset: -50%;
  z-index: -1;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(8) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-4%, -4%); }
  30% { transform: translate(3%, -2%); }
  50% { transform: translate(-2%, 4%); }
  70% { transform: translate(4%, 2%); }
  90% { transform: translate(-3%, 1%); }
}

/* --------------------------------------------------------- Typography --- */

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 1.15em; color: var(--text-muted); }
p.lead { font-size: 1.16rem; color: var(--lead); max-width: 62ch; }

a { color: var(--cyan); text-decoration: none; transition: color .2s ease; }
a:hover { color: #7FF3FF; }

strong { color: var(--text); font-weight: 600; }

.mono {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--cyan);
  color: #04121a;
  padding: .7rem 1.1rem;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------- Layout --- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

section { position: relative; }

.section {
  padding-block: clamp(72px, 10vw, 128px);
}

.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--grad);
}

/* Animated gradient section divider */
.divider-line {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent);
  background-size: 220% 100%;
  opacity: .5;
  animation: slide-grad 7s linear infinite;
}
@keyframes slide-grad {
  0%   { background-position: 0% 0; }
  100% { background-position: 220% 0; }
}

/* ------------------------------------------------------------- Header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(10, 14, 26, .62);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.site-header.is-stuck {
  background: rgba(10, 14, 26, .9);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--text); }
.logo-mark { display: grid; place-items: center; filter: drop-shadow(0 0 10px rgba(0, 229, 255, .35)); }
.logo-text {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -.02em;
}
.logo-accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.site-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-list > li > a {
  display: block;
  padding: .55rem .85rem;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: .94rem;
  font-weight: 500;
  transition: color .2s ease, background .2s ease;
}
.nav-list > li > a:hover,
.nav-list > li > a.is-current { color: var(--text); background: var(--surface-2); }

/* Services mega menu */
.has-menu { position: relative; }
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 8px);
  width: min(720px, 86vw);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 60;
}
.has-menu:hover .mega,
.has-menu:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: rgba(13, 19, 34, .96);
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.mega-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .7rem;
  border-radius: 10px;
  color: var(--text);
  transition: background .18s ease;
}
.mega-item:hover { background: var(--surface-2); }
.mega-item i, .mega-item svg { width: 18px; height: 18px; color: var(--cyan); flex: none; }
.mega-item strong { display: block; font-size: .9rem; font-weight: 600; }
.mega-item small { display: block; font-size: .74rem; color: var(--text-dim); }

/* Mobile-only disclosure for the Services sub-list */
.mega-toggle { display: none; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  place-items: center;
  gap: 4px;
}
.nav-toggle span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--text);
  transition: transform .25s ease, opacity .25s ease;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  overflow-wrap: anywhere;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn-sm { padding: .62rem 1.15rem; font-size: .88rem; }

.btn-primary {
  background: var(--grad);
  color: #05101c;
  box-shadow: 0 8px 26px rgba(0, 229, 255, .2);
}
.btn-primary:hover {
  color: #05101c;
  transform: translateY(-2px);
  box-shadow: 0 12px 38px rgba(0, 229, 255, .34), var(--glow-violet);
}

.btn-ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover {
  color: var(--text);
  border-color: var(--cyan-dim);
  box-shadow: var(--glow-cyan);
  transform: translateY(-2px);
}

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

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

/* Photography ------------------------------------------------------------- */

.hero-media,
.page-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-media img,
.page-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

/* The copy sits over the left of the frame, so the veil is heaviest there. */
.hero-media::after,
.page-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(10, 14, 26, .94) 0%, rgba(10, 14, 26, .78) 34%,
                    rgba(10, 14, 26, .3) 62%, rgba(10, 14, 26, .45) 100%),
    linear-gradient(to bottom, rgba(10, 14, 26, .55) 0%, transparent 32%, rgba(10, 14, 26, .75) 100%);
}

.hero-media img { opacity: .95; }
.page-media img { opacity: .75; }
.page-media::after {
  background:
    linear-gradient(100deg, rgba(10, 14, 26, .97) 0%, rgba(10, 14, 26, .92) 45%,
                    rgba(10, 14, 26, .72) 100%),
    linear-gradient(to bottom, rgba(10, 14, 26, .6) 0%, transparent 35%, var(--bg) 100%);
}

.page-hero.has-media { overflow: hidden; }
.page-hero.has-media .shell { position: relative; z-index: 2; }

/* A framed photograph used inside a section */
.media-band {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
}
.media-band img { display: block; width: 100%; height: auto; }
.media-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 14, 26, .88) 0%, rgba(10, 14, 26, .15) 55%, transparent 100%);
}
.media-band figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 24px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #C3CEE6;   /* always over a darkened photograph */
}


.hero {
  position: relative;
  /* The hero re-declares --text for its own subtree (it sits on a dark
     photograph in both themes). Custom properties only take effect where they
     are USED, and `color` is set on body, so without this line the heading
     keeps body's inherited colour and disappears in the light theme. */
  color: var(--text);
  min-height: min(92vh, 940px);
  display: flex;
  align-items: center;
  padding-block: clamp(72px, 12vh, 140px);
  overflow: hidden;
}

#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: .85;
}

.hero .shell { position: relative; z-index: 2; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 56px;
  align-items: center;
}

.hero h1 { margin-bottom: .35em; }

.typewriter {
  display: block;
  min-height: 1.15em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.caret {
  display: inline-block;
  width: 3px;
  height: .92em;
  margin-left: 4px;
  vertical-align: text-bottom;
  background: var(--cyan);
  box-shadow: var(--glow-cyan);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Centred hero (no side panel) */
.hero-centre {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.hero-centre h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); }
.hero-centre p.lead {
  margin-inline: auto;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  max-width: 54ch;
}

.btn-lg {
  padding: 1.05rem 2.1rem;
  font-size: 1.02rem;
}

/* Service links as a single readable row of pills */
.tag-lg {
  font-family: var(--font-body);
  font-size: .9rem;
  letter-spacing: normal;
  text-transform: none;
  padding: .6rem 1.05rem;
  border-radius: 999px;
  color: var(--text);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}
.chip {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .07em;
  padding: .42rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-muted);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* -------------------------------------------------------------- Cards --- */

.glass {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.glass::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad);
  -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;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.glass:hover {
  transform: translateY(-5px);
  background: var(--surface-2);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .42);
}
.glass:hover::before { opacity: .85; }

/* Service grid */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 26px 24px 24px;
  color: var(--text);
}
.service-card .icon-wrap {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--grad-soft);
  margin-bottom: .4rem;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1.2), box-shadow .3s ease;
}
.service-card:hover .icon-wrap {
  transform: translateY(-3px) rotate(-6deg) scale(1.06);
  box-shadow: var(--glow-cyan);
}
.service-card .icon-wrap i,
.service-card .icon-wrap svg { width: 22px; height: 22px; color: var(--cyan); }
.service-card h3 { margin: 0; font-size: 1.08rem; }
.service-card p { margin: 0; font-size: .92rem; color: var(--text-muted); }
.service-card .more {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: gap .2s ease;
}
.service-card:hover .more { gap: .75rem; }

/* Product preview artwork -------------------------------------------------- */

.preview {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 250;
  border-radius: 12px;
  overflow: hidden;
  background: #080C16;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  transition: transform .4s cubic-bezier(.2, .8, .3, 1), box-shadow .4s ease;
}

.service-card .preview {
  margin-bottom: .9rem;
  border: 1px solid var(--line);
}
.service-card:hover .preview {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .55), var(--glow-cyan);
}

/* Work page: the artwork leads the entry */
.product-figure { margin: 0 0 1.6rem; }
.product-figure .preview { border: 1px solid var(--line-strong); }

/* Campaign landing page + application form -------------------------------- */

.landing-badge {
  margin-left: auto;
  color: var(--text-dim);
  font-size: .7rem;
  white-space: nowrap;
}

/* It wraps to four lines beside the logo on a phone; the page says the same
   thing in its copy, so it simply goes. */
@media (max-width: 640px) {
  .landing-badge { display: none; }
}

.landing-hero {
  padding-block: clamp(48px, 7vw, 92px);
}

.landing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: 56px;
  align-items: start;
}

.landing-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.landing-points { margin-top: 28px; }
.landing-points li { font-size: 1rem; }

.landing-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

/* The form itself --------------------------------------------------------- */

.apply-form { padding: 28px 26px 24px; }

.apply-progress { margin-bottom: 1.4rem; }
.apply-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
  overflow: hidden;
}
.apply-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--grad);
  transition: width .35s cubic-bezier(.3, .8, .3, 1);
}
.apply-progress p { margin: .55rem 0 0; }

.apply-step {
  border: 0;
  margin: 0;
  padding: 0;
}
/* Without JavaScript every step simply stays on the page and the form posts
   in one go, so the page still works with scripting off. */
.js-steps .apply-step { display: none; }
.js-steps .apply-step.is-active { display: block; }
.apply-step + .apply-step { margin-top: 26px; }
.js-steps .apply-step + .apply-step { margin-top: 0; }

.apply-legend {
  font-family: var(--font-head);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0;
  margin-bottom: .4rem;
  color: var(--text);
}
.apply-help {
  font-size: .9rem;
  margin-bottom: 1rem;
  color: var(--text-muted);
}

.apply-options { display: grid; gap: 9px; }

.apply-option {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem .9rem;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .95rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  transition: border-color .18s ease, background .18s ease;
}
.apply-option:hover { border-color: var(--cyan-dim); background: var(--surface-2); }
.apply-option input { width: 17px; height: 17px; flex: none; accent-color: var(--violet); }
.apply-option:has(input:checked) {
  border-color: var(--cyan-dim);
  background: var(--grad-soft);
}

.apply-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 22px;
}
.apply-actions .btn { flex: 1 1 auto; }

.apply-note {
  font-size: .8rem;
  color: var(--text-dim);
  margin: 14px 0 0;
}

@media (max-width: 1000px) {
  .landing-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 560px) {
  .apply-actions { flex-direction: column-reverse; }
  .apply-actions .btn { width: 100%; }
}

/* Consent -------------------------------------------------------------- */

.consent {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-muted);
}
.consent input {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: .1rem;
  accent-color: var(--violet);
}
.consent-note {
  margin: .7rem 0 0;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--text-dim);
}

/* The spend-to-revenue chain */
.chain { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; counter-reset: chain; }
.chain li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  font-size: .95rem;
  color: var(--text-muted);
}
.chain-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: var(--grad-soft);
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--cyan);
}

/* Interactive: dashboard tabs ---------------------------------------------- */

.tabs-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 26px;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.tab-btn svg { width: 15px; height: 15px; }
.tab-btn:hover { color: var(--text); border-color: var(--cyan-dim); }
.tab-btn[aria-selected="true"] {
  color: var(--text);
  border-color: transparent;
  background: var(--grad-soft);
  box-shadow: inset 0 0 0 1px var(--cyan-dim);
}

.tab-panel[hidden] { display: none; }

.tab-panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* Interactive: lead value calculator --------------------------------------- */

.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.calc-field + .calc-field { margin-top: 20px; }

.calc-field label {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--font-body);
  font-size: .95rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}

.calc-input-wrap { position: relative; }
.calc-input-wrap .prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: .95rem;
  pointer-events: none;
}
.calc-input-wrap input[type="number"] { padding-left: 32px; }

input[type="range"] {
  width: 100%;
  padding: 0;
  height: 6px;
  border: 0;
  border-radius: 3px;
  background: var(--surface-2);
  accent-color: var(--violet);
}

.calc-readout {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: .5rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-dim);
}

.calc-result {
  padding: 26px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--grad-soft);
}
.calc-result .calc-big {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.calc-result .calc-caption { margin: .7rem 0 0; font-size: .95rem; }

.calc-rows { margin-top: 1.4rem; display: grid; gap: .55rem; }
.calc-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .55rem;
  border-top: 1px solid var(--line);
  font-size: .92rem;
  color: var(--text-muted);
}
.calc-row strong { color: var(--text); }

.calc-note {
  margin: 1.2rem 0 0;
  font-size: .8rem;
  color: var(--text-dim);
}

/* Interactive: FAQ (native details/summary — no JavaScript needed) ---------- */

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

.faq details {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color .2s ease;
}
.faq details[open] { border-color: var(--cyan-dim); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 18px 20px;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

.faq .faq-body {
  padding: 0 20px 20px;
  font-size: .96rem;
  color: var(--text-muted);
}
.faq .faq-body p { margin: 0; color: inherit; }

@media (max-width: 900px) {
  .tab-panel-inner { grid-template-columns: 1fr; gap: 26px; }
  .calc-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* Platform screens -------------------------------------------------------- */

.screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 22px 52px rgba(0, 0, 0, .45);
}

.screen-row {
  align-items: center;
  gap: 48px;
  padding-block: clamp(28px, 4vw, 44px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.screen-figure { margin: 0; }
.screen-figure figcaption {
  margin-top: .7rem;
  text-align: center;
  color: var(--text-dim);
  font-size: .68rem;
}

.screen-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--grad-soft);
  margin-bottom: 1rem;
}
.screen-icon svg { width: 20px; height: 20px; color: var(--cyan); }

/* Walkthrough: the "your part" column sits beside the description */
.walk-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.walk-you {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}

@media (max-width: 900px) {
  .screen-row { grid-template-columns: 1fr; gap: 28px; }
  /* Keep the picture under its description on narrow screens, whatever the
     source order is, so the alternating desktop layout does not shuffle. */
  .screen-figure { order: 2; }
  .walk-body { grid-template-columns: 1fr; gap: 16px; }
}

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

.quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 28px 26px 26px;
  margin: 0;
}

.quote-card .quote-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: var(--grad-soft);
}
.quote-card .quote-mark svg { width: 17px; height: 17px; color: var(--cyan); }

.quote-card blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.quote-card figcaption {
  margin-top: auto;
  padding-top: .6rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .2rem;
}
.quote-card figcaption strong { font-size: .96rem; }
.quote-card figcaption > span { font-size: .87rem; color: var(--text-muted); }

.quote-meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  text-transform: none;
  letter-spacing: .04em;
  font-size: .72rem;
}
.quote-meta svg { width: 12px; height: 12px; color: var(--cyan); }

/* Unmistakable while the quote is still a placeholder. */
.sample-flag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 6px;
  border: 1px dashed rgba(245, 165, 36, .55);
  background: rgba(245, 165, 36, .1);
  color: #F5A524;
}

/* Counters */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}
.stat {
  padding: 28px 24px;
  text-align: center;
}
.stat .num {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5vw, 3.3rem);
  font-weight: 700;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat .label {
  display: block;
  margin-top: .6rem;
  font-family: var(--font-mono);
  font-size: .73rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.stat .stat-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0 auto .9rem;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: var(--grad-soft);
}
.stat .stat-icon svg { width: 18px; height: 18px; color: var(--cyan); }

.footer-head {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.footer-head svg { width: 14px; height: 14px; color: var(--cyan); flex: none; }

/* Steps / process */
.step-list { display: grid; gap: 16px; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px;
}
.step .step-num {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--grad-soft);
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--cyan);
}
.step .step-num::before { content: counter(step, decimal-leading-zero); }
.step h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.step p { margin: 0; font-size: .94rem; }

/* Lists */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.check-list li {
  position: relative;
  padding-left: 31px;
  color: var(--text-muted);
  font-size: .97rem;
}
/* A real check glyph rather than a dot — drawn as a background image so the
   markup stays a plain list and no extra DOM is shipped per item. */
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .18em;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  border: 1px solid rgba(0, 229, 255, .28);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E5FF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"),
    linear-gradient(115deg, rgba(0, 229, 255, .16), rgba(124, 58, 237, .16));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px, auto;
}

.tag-cloud { display: flex; flex-wrap: wrap; gap: 9px; }
.tag {
  font-family: var(--font-mono);
  font-size: .75rem;
  padding: .4rem .78rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-muted);
  transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.tag:hover { border-color: var(--cyan-dim); color: var(--text); box-shadow: var(--glow-cyan); }

/* ---------------------------------------------------------- Page head --- */

.page-hero {
  padding-block: clamp(80px, 12vw, 132px) clamp(40px, 6vw, 64px);
  position: relative;
}
.page-hero h1 { max-width: 20ch; }
.page-hero p.lead { margin-top: .4rem; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb li + li::before { content: '/'; margin-right: .5rem; color: var(--line-strong); }

/* Two-column content */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 56px;
  align-items: start;
}
.sticky-side { position: sticky; top: calc(var(--header-h) + 28px); }

.panel { padding: 30px 28px; }
.panel h3 { font-size: 1.05rem; }

/* CTA band */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(0, 229, 255, .16), transparent 62%),
    radial-gradient(600px 320px at 90% 100%, rgba(124, 58, 237, .22), transparent 62%),
    rgba(255, 255, 255, .03);
  padding: clamp(40px, 6vw, 68px);
  text-align: center;
}
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band p { max-width: 60ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 28px; }

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

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field.full { grid-column: 1 / -1; }

label {
  font-family: var(--font-mono);
  font-size: .73rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.req { color: var(--cyan); }

input, select, textarea {
  width: 100%;
  padding: .85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(8, 12, 22, .6);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .96rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea { min-height: 150px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #737F9C; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cyan-dim);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, .12), var(--glow-cyan);
  background: rgba(8, 12, 22, .85);
}
select option { background: #0D1322; color: var(--text); }

.field-error { color: #ff8b8b; font-size: .84rem; font-family: var(--font-mono); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.notice {
  padding: 1rem 1.15rem;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  margin-bottom: 24px;
  font-size: .95rem;
}
.notice-ok { border-color: rgba(0, 229, 255, .45); background: rgba(0, 229, 255, .08); color: #C9F7FF; }
.notice-bad { border-color: rgba(255, 120, 120, .4); background: rgba(255, 90, 90, .08); color: #ffd4d4; }

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

.site-footer { margin-top: clamp(60px, 9vw, 110px); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-block: clamp(48px, 7vw, 76px) 40px;
}
.footer-blurb { font-size: .93rem; margin-top: 1rem; max-width: 34ch; }
.footer-meta { margin: 0; }
.footer-head { margin-bottom: 1.1rem; color: var(--text); font-size: .74rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-col a { color: var(--text-muted); font-size: .92rem; }
.footer-col a:hover { color: var(--cyan); }
.footer-contact { margin-top: 1.2rem; font-size: .92rem; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding-block: 22px 32px;
  border-top: 1px solid var(--line);
}
.footer-bottom p { margin: 0; }

/* ------------------------------------------------------- Cursor glow --- */

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(circle, rgba(0, 229, 255, .10), rgba(124, 58, 237, .07) 42%, transparent 70%);
  transition: opacity .35s ease;
  will-change: transform;
}
body.cursor-on .cursor-glow { opacity: 1; }

/* ------------------------------------------------- Reveal animations --- */

/* Content is visible by default and only hidden once JavaScript has confirmed it
   can animate it back in. Hiding first and revealing later means any failure in
   the animation path — a blocked CDN, a mis-measured trigger — leaves the page
   permanently blank. Visible-by-default cannot fail that way. */
.js-anim .reveal { opacity: 0; transform: translateY(26px); }
.js-anim .reveal.revealed,
.revealed { opacity: 1; transform: none; }
.no-js .reveal, .no-motion .reveal { opacity: 1; transform: none; }

/* ------------------------------------------------------------ Mobile --- */

/* The nav carries seven items now; below this the "Start a project" button no
   longer fits beside it, and Contact is in the nav anyway. */
@media (max-width: 1080px) {
  .header-cta { display: none; }
}

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .sticky-side { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 820px) {
  .header-cta { display: none; }
  /* The nav goes position:fixed here, so its margin-left:auto no longer pushes
     anything. Without this the controls sit against the logo with the rest of
     the bar empty. The auto margin moves to the first control so the pair stays
     together at the right edge. */
  .header-inner { gap: 10px; }
  .theme-toggle { margin-left: auto; }
  .nav-toggle { display: grid; margin-left: 0; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    /* Fully opaque, and deliberately no backdrop-filter: nested inside the
       header's own backdrop-filter, Chromium composites this panel's
       background washed out and the page text ghosts through the menu. */
    background: #090D18;
    border-bottom: 1px solid var(--line);
    padding: 16px 24px 26px;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-list > li > a { padding: .8rem .6rem; font-size: 1rem; }

  .mega {
    position: static;
    transform: none;
    width: 100%;
    opacity: 1;
    visibility: visible;
    margin-top: 4px;
  }
  .mega-inner {
    grid-template-columns: 1fr;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 8px 8px;
  }
  .mega-item small { display: none; }

  /* Services collapses on mobile: eleven sub-items otherwise push Process,
     About and Contact below the fold. */
  .has-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .has-menu > a { flex: 1 1 auto; }

  .mega-toggle {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
  }
  .mega-toggle svg { transition: transform .2s ease; }
  .has-menu.is-expanded .mega-toggle { color: var(--cyan); border-color: var(--cyan-dim); }
  .has-menu.is-expanded .mega-toggle svg { transform: rotate(180deg); }

  .has-menu .mega { display: none; flex-basis: 100%; }
  .has-menu.is-expanded .mega { display: block; }

  .form-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 12px; }
  .cursor-glow { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .shell { padding-inline: 18px; }
}

/* ------------------------------------------------- Touch targets --- */

/* On touch devices every control gets at least a 44px tap area (WCAG 2.5.5).
   Desktop keeps the tighter sizing, which is why this is pointer-scoped. */
@media (pointer: coarse) {
  .btn,
  .btn-sm {
    min-height: 44px;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
  }

  .nav-list > li > a,
  .mega-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .tag {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }

  .footer-col a,
  .footer-contact a,
  .breadcrumb a {
    display: inline-block;
    padding-block: 4px;
  }

  /* Hover-only affordances do not apply on touch, so nothing should depend
     on them: the mega menu is laid out open inside the mobile nav instead. */
  .glass:hover { transform: none; }
}

/* ------------------------------------------------- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .grain { animation: none; }
  #heroCanvas { display: none; }
  .cursor-glow { display: none; }
}

@media print {
  .site-header, .site-footer, #heroCanvas, .grain, .cursor-glow { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------ Top strip + contact --- */

:root { --strip-h: 32px; }
.top-strip { border-bottom: 1px solid var(--line); font-size: .82rem; }
.top-strip-inner { display: flex; align-items: center; gap: 18px; height: var(--strip-h); }
.top-strip-mail { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); }
.top-strip-mail:hover { color: var(--text); }
.top-strip-note { margin-left: auto; color: var(--text-dim); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; }

.header-contact {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--cyan-dim); color: var(--text);
  font-size: .92rem; font-weight: 600;
  transition: background .2s ease, border-color .2s ease;
}
.header-contact:hover, .header-contact.is-current { background: var(--surface-2); border-color: var(--cyan); color: var(--text); }

@media (max-width: 820px) {
  .site-nav { inset: calc(var(--header-h) + var(--strip-h)) 0 auto 0; max-height: calc(100dvh - var(--header-h) - var(--strip-h)); }
  .header-contact { margin-left: auto; padding: .45rem .85rem; font-size: .88rem; }
  .theme-toggle { margin-left: 0; }
}
@media (max-width: 560px) {
  .top-strip-note { display: none; }
  .top-strip-inner { justify-content: center; }
}

/* ----------------------------------------------------- Aotearoa touches --- */

:root { --pohutukawa: #C8102E; --bush: #1F6B4F; }
.hero-nz { object-position: center 70%; }

/* Koru pattern and a pohutukawa-to-bush stripe on the closing call to action */
.cta-band.nz-band::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--pohutukawa), #E0364E 35%, var(--bush));
}
.cta-band.nz-band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 58c-11 0-18-8-18-17 0-10 7-18 17-18 8 0 14 6 14 13 0 6-4 10-10 10-4 0-8-3-8-7 0-3 2-6 5-6 2 0 4 2 4 4' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 72px 72px;
}
:root[data-theme="light"] .cta-band.nz-band::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 58c-11 0-18-8-18-17 0-10 7-18 17-18 8 0 14 6 14 13 0 6-4 10-10 10-4 0-8-3-8-7 0-3 2-6 5-6 2 0 4 2 4 4' fill='none' stroke='%231F6B4F' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cta-band.nz-band > * { position: relative; z-index: 1; }

/* Mountain ridge above the footer */
.site-footer { position: relative; }
.site-footer::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(40px, 6vw, 90px);
  background: url("../img/brand/ridge-line.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.nz-sign { display: inline-flex; align-items: center; gap: 8px; }
.nz-sign svg { color: var(--bush); }
:root:not([data-theme="light"]) .nz-sign svg { color: #3FA37C; }
.hero-media.nz::after {
  background: linear-gradient(to bottom, rgba(5, 10, 24, .35) 0%, rgba(5, 10, 24, .15) 45%, rgba(5, 10, 24, .55) 100%);
}
.hero-media.nz img { opacity: 1; }

/* ------------------------------------------------------ Advisory board --- */
.advisor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.advisor { display: flex; flex-direction: column; gap: 14px; padding: 26px; position: relative; overflow: hidden; }
.advisor::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--pohutukawa), var(--bush)); }
.advisor-top { display: flex; align-items: center; gap: 14px; }
.advisor-mark {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  color: #fff; background: linear-gradient(145deg, var(--bush), #154A37);
  box-shadow: 0 0 0 3px rgba(31, 107, 79, .25);
}
.advisor h3 { margin: 0; font-size: 1.15rem; }
.advisor-role { margin: 2px 0 0; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.advisor-focus { margin: 0; color: var(--text); font-weight: 500; }
.advisor .check-list { margin: 0; font-size: .92rem; }
.advisor-link { margin-top: auto; font-weight: 600; font-size: .92rem; }
@media (max-width: 1000px) { .advisor-grid { grid-template-columns: 1fr; } }

/* .btn sets display, which would otherwise override the hidden attribute */
.apply-actions [hidden] { display: none !important; }
.advisor-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.advisor-skills li {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .03em;
  padding: 4px 9px; border-radius: 6px; border: 1px solid var(--cyan-dim); color: var(--cyan);
  background: rgba(0, 229, 255, .05);
}
.advisor-role { color: var(--cyan) !important; }
.advisor-photo {
  width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px rgba(31, 107, 79, .35);
}