/* ---------- Tokens ---------- */
:root {
  --ink: #101418;
  --ink-soft: #5b6470;
  --bg: #ffffff;
  --bg-alt: #f5f6f8;
  --accent: #2f5cff;
  --accent-dark: #1e42c8;
  --line: #e6e8ec;
  --radius: 14px;
  --container: 1080px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

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

/* ---------- Type ---------- */
h1 {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
h3 { font-size: 1.15rem; font-weight: 600; }

.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 12px;
}

/* ---------- Northern lights ribbons (canvas) ---------- */
/* Anchored to the top of the document (not the viewport), so the sky
   stays put while you scroll past it. Ribbons are drawn sharp in JS
   and blurred once here on the GPU. */
.glow-bg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 110vh;
  z-index: -1;
  pointer-events: none;
  filter: blur(30px);
}

/* Vivid version inside the dark contact section */
.section-cta { position: relative; }
.cta-glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.section-cta .container { position: relative; }
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.glow-pink {
  width: 46vw;
  height: 46vw;
  bottom: -20vw;
  right: -10vw;
  background: radial-gradient(circle, rgba(217, 70, 239, 0.45), transparent 65%);
  animation: aurora-slide 30s ease-in-out infinite alternate;
}
.glow-blue {
  width: 40vw;
  height: 40vw;
  top: -14vw;
  right: 8vw;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.4), transparent 65%);
  animation: aurora-slide 40s ease-in-out infinite alternate-reverse;
}

/* Yeti mascot placements — all anchored so their base sits on a section line */
.yeti,
.yeti-lounge {
  position: absolute;
  top: 2px;
  transform: translateY(-100%);
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(16, 20, 24, 0.1));
}
.yeti { right: 7%; width: 190px; }
.yeti-lounge { left: 4%; width: 280px; }
/* just enough headroom that the lounging yeti sits close under the cards */
#services.section { padding-bottom: 192px; }
.yeti img,
.yeti-lounge img,
.yeti-wave img,
.yeti-lean img {
  display: block;
  width: 100%;
  /* the width/height attributes reserve space against layout shift;
     height:auto lets the picture scale instead of taking them literally */
  height: auto;
}

.hero { position: relative; }
.yeti-wave {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  bottom: 90px; /* matches hero padding: his base lines up with the buttons */
  width: min(460px, 35vw); /* scales with the viewport, no breakpoint jumps */
  pointer-events: none;
}

.page-hero { position: relative; }
.page-hero--art h1,
.page-hero--art .hero-sub { max-width: calc(100% - 200px); }
.yeti-lean {
  position: absolute;
  right: 0;
  top: -10px;
  width: 170px;
  pointer-events: none;
}

@media (max-width: 1000px) {
  .yeti-lean { width: 120px; }
}
@media (max-width: 820px) {
  .yeti { width: 130px; right: 5%; }
  .yeti-lounge { width: 180px; left: 5%; }
  .yeti-lean { display: none; }
  .page-hero--art h1,
  .page-hero--art .hero-sub { max-width: 100%; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.logo-mark { width: 26px; height: 26px; }
.logo-dot { color: var(--accent); }

/* Text menu: links on the left of the row, one accent button on the end */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 0;
  transition: color 0.2s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-active {
  color: var(--ink);
}
/* underline grows from the middle on hover and stays put on the current section */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a.is-active::after {
  transform: scaleX(1);
}
.nav-cta { padding: 10px 22px; font-size: 0.9rem; }

/* Hamburger: hidden until the links no longer fit */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0 10px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  padding: 110px 24px 90px;
  text-align: left;
}
.hero-sub {
  margin-top: 20px;
  font-size: 1.2rem;
  color: var(--ink-soft);
}
.hero-actions {
  margin-top: 36px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 99px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--bg-alt); }

/* ---------- Sections ---------- */
.section { padding: 90px 24px; }
.section-alt { background: var(--bg-alt); padding: 90px 0; position: relative; }
.section-head { margin-bottom: 48px; }

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.card-more {
  display: inline-block;
  margin-top: 22px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
}

/* AI service card: the special one */
.service-card--ai {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.service-card--ai::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  top: -90px;
  right: -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.4), transparent 65%);
  pointer-events: none;
}
.service-card--ai > * { position: relative; }
.service-card--ai p { color: rgba(255, 255, 255, 0.72); }
.service-card--ai .service-list li {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}
.service-card--ai .card-more { color: #a5b7ff; }
.service-card--ai:hover {
  border-color: #a855f7;
  box-shadow: 0 8px 30px rgba(168, 85, 247, 0.25);
}
.badge-new {
  display: inline-block;
  vertical-align: 3px;
  margin-left: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 99px;
  background: linear-gradient(120deg, var(--accent), #a855f7);
  color: #fff;
}
.card-more span { display: inline-block; transition: transform 0.2s; }
.service-card:hover .card-more span { transform: translateX(4px); }
.service-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 30px rgba(47, 92, 255, 0.08);
}
.service-card p { margin-top: 8px; color: var(--ink-soft); }
.service-list {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.service-list li {
  font-size: 0.82rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--bg-alt);
  color: var(--ink-soft);
}

/* ---------- Service subpages ---------- */
.subpage {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  align-items: start;
}
.side-nav {
  position: sticky;
  top: 0;
  padding: 36px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
.back-link {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
  transition: color 0.2s;
}
.back-link:hover { color: var(--ink); }
.side-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.side-links a { color: var(--ink-soft); transition: color 0.2s; }
.side-links a:hover { color: var(--ink); }
.side-cross {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  width: 100%;
}
.side-cross a { color: var(--accent); }
.side-cross a:hover { color: var(--accent-dark); }

.subpage main { padding: 88px 0 40px; min-width: 0; }
.page-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.page-section { margin-top: 76px; }
.page-section > h2 { margin-bottom: 32px; }

.include-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.include-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  background: rgba(255, 255, 255, 0.55);
}
.include-item p { margin-top: 6px; color: var(--ink-soft); font-size: 0.95rem; }

/* Pricing */
.price-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 26px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.7);
}
.ptoggle {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 99px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.ptoggle.is-on {
  background: var(--accent);
  color: #fff;
}
.ptoggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.price-monthly { display: none; }
#pricing.monthly .price-once { display: none; }
#pricing.monthly .price-monthly { display: block; }
.price-upfront {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: 2px;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.price-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.65);
  padding: 28px 24px;
}
.price-name { font-size: 1.05rem; }
.price-amount {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 10px 0 18px;
}
.price-amount small {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-right: 4px;
}
.price-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 26px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.price-list li { padding-left: 24px; position: relative; }
.price-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.price-card .btn { margin-top: auto; text-align: center; }
.price-note {
  margin-top: 22px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.page-cta {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

@media (max-width: 820px) {
  .subpage { display: block; }
  .side-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 16px 0;
    gap: 14px 20px;
    border-bottom: 1px solid var(--line);
  }
  /* row 1: logo left, back right */
  .side-nav .logo { margin-right: auto; }
  /* rows 2-3: page links, then sibling services, each on their own line */
  .side-links {
    order: 3;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 20px;
    border-top: none;
    padding-top: 0;
    font-size: 0.9rem;
  }
  .side-cross {
    order: 4;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 20px;
    border-top: none;
    padding-top: 0;
    font-size: 0.9rem;
  }
  .subpage main { padding: 48px 0 30px; }
  .include-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .page-cta { padding: 32px 28px; }
}

/* ---------- Work ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.work-card { display: block; }
.work-thumb {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-alt);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
a.work-card:hover .work-thumb {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(16, 20, 24, 0.12);
}
.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.placeholder-bar {
  display: block;
  /* a fixed width overflows the folded sliver, and the clipped ends read as a
     rule drawn across the panel rather than a loading bar */
  width: min(140px, 55%);
  height: 4px;
  margin: 18px auto 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
  position: relative;
}
.placeholder-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: 99px;
  background: var(--accent);
  animation: loading-slide 1.6s ease-in-out infinite;
}
@keyframes loading-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.work-meta { margin-top: 14px; }
.work-meta p { color: var(--ink-soft); font-size: 0.9rem; margin-top: 2px; }

/* Expanding strip: the panel under the cursor opens, the rest fold to slivers.
   With nothing hovered, the panel marked .is-open holds the stage. */
.work-strip {
  display: flex;
  gap: 10px;
  height: clamp(360px, 42vw, 470px);
}
.work-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  transition: flex-grow 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.4s ease;
}
.work-panel:hover,
.work-panel:focus-visible,
.work-strip:not(:hover) .work-panel.is-open {
  flex-grow: 4.2;
  box-shadow: 0 14px 40px rgba(16, 20, 24, 0.18);
}
.work-panel > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* Dark wash at the foot so the caption holds up over any screenshot.
   Fixed stops, not percentages, so the band stays the same weight on a
   short stacked card as on a tall open panel. */
.work-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(12, 15, 19, 0.95) 0,
    rgba(12, 15, 19, 0.95) 62px,
    rgba(12, 15, 19, 0.68) 130px,
    rgba(12, 15, 19, 0.18) 205px,
    rgba(12, 15, 19, 0) 300px);
}

.panel-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 10px;
  transition: padding 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.panel-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
}
.panel-icon svg { width: 21px; height: 21px; }
/* the caption unrolls with the panel rather than popping in */
.panel-meta {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #fff;
  transition: max-width 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity 0.4s ease 0.1s;
}
.panel-title {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 12px rgba(12, 15, 19, 0.6);
}
.panel-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.75);
}
.work-panel:hover .panel-meta,
.work-panel:focus-visible .panel-meta,
.work-strip:not(:hover) .work-panel.is-open .panel-meta {
  max-width: 460px;
  opacity: 1;
}
.work-panel:hover .panel-foot,
.work-panel:focus-visible .panel-foot,
.work-strip:not(:hover) .work-panel.is-open .panel-foot {
  justify-content: flex-start;
  padding: 24px;
}

/* the "your project" panel has no screenshot, so it carries the loading bar */
.work-panel--empty { background: var(--ink); }
.panel-fill {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.work-panel--empty::after { background: none; }
.work-panel--empty .placeholder-bar { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .work-panel,
  .panel-foot,
  .panel-meta { transition: none; }
}

/* ---------- Testimonials ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.quote { margin: 0; }
.stars {
  color: #f6b93b;
  font-size: 1.05rem;
  letter-spacing: 4px;
  margin-bottom: 10px;
}
.quote blockquote {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.quote figcaption {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------- FAQ ---------- */
.faq-container { max-width: 760px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.05rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.faq-item p {
  padding: 0 0 20px;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ---------- Process ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.process-step {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.6);
  padding: 30px 26px 34px;
}
.step-num {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--accent), #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  margin-bottom: 14px;
}
.process-step h3 { font-size: 1.3rem; }
.process-step p { color: var(--ink-soft); font-size: 1rem; margin-top: 8px; }

/* ---------- CTA ---------- */
.section-cta {
  background: var(--ink);
  color: #fff;
  text-align: center;
  border-radius: 0;
}
.cta-inner p {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.05rem;
}

/* Enquiry form */
.enquiry-inner { text-align: left; }
.enquiry-title { margin-bottom: 30px; }

.interest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.chip {
  font: inherit;
  font-size: 1rem;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 99px;
  padding: 12px 26px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.chip:hover { background: rgba(255, 255, 255, 0.12); }
.chip[aria-pressed="true"] {
  background: #fff;
  color: var(--ink);
}
.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.enquiry {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  column-gap: 40px;
  row-gap: 48px;
}
.span-email { grid-column: 3; }
.span-budget { grid-column: 1 / 3; }
.span-full { grid-column: 1 / -1; }

.line-input {
  font: inherit;
  font-size: 1.15rem;
  color: #fff;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 0;
  padding: 8px 2px 12px;
  transition: border-color 0.2s;
}
.line-input::placeholder { color: rgba(255, 255, 255, 0.85); }
.line-input:focus-visible {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 var(--accent);
}
.line-input.invalid { border-bottom-color: #ff7a7a; box-shadow: 0 1px 0 #ff7a7a; }
textarea.line-input { resize: vertical; min-height: 46px; }

.enquiry-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: -8px;
}
.btn-submit { margin-left: auto; }
.btn-submit span { display: inline-block; transition: transform 0.2s; }
.btn-submit:hover span { transform: translateX(4px); }
.form-note {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}
.form-note a { text-decoration: underline; text-underline-offset: 3px; }
.form-success {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 320px;
  padding: 40px 0;
  color: #fff;
}
.form-success h2 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 18px;
}
.form-success p {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: rgba(255, 255, 255, 0.75);
  max-width: 40ch;
}
/* Honeypot: off-screen for people, irresistible to bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.cta-alt {
  margin-top: 44px;
  font-size: 0.95rem !important;
}
.cta-alt a { text-decoration: underline; text-underline-offset: 3px; }
.cta-alt a:hover { color: #fff; }

@media (max-width: 700px) {
  .enquiry {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }
  .span-email, .span-budget { grid-column: 1; }
  .span-full { grid-column: 1; }
  .form-success { min-height: 240px; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 24px; }
.footer-links a:hover { color: var(--ink); }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .placeholder-bar::after { animation: none; width: 60%; left: 20%; }
  .glow, .wave, .wave path { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .services-grid, .work-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 80px 24px 70px; }
  .section { padding: 70px 24px; }
  .section-alt { padding: 70px 0; }

  /* logo left, hamburger right; the links drop down as a panel.
     backdrop-filter on the header would trap the panel inside it,
     so the header goes solid once the panel can open */
  .site-header { backdrop-filter: none; background: #fff; }
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 30px rgba(16, 20, 24, 0.1);
    /* closed by default: collapsed, unclickable, out of the tab order */
    display: none;
  }
  .nav-menu.open { display: flex; }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-links a {
    display: block;
    padding: 14px 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-links li:last-child a { border-bottom: none; }
  /* the growing underline is a desktop flourish; plain rows read better here */
  .nav-links a::after { display: none; }
  .nav-cta {
    margin-top: 18px;
    padding: 14px 26px;
    text-align: center;
    font-size: 0.95rem;
  }

  /* four slivers on a phone would be ~40px each, so the strip becomes
     a plain stack with every caption already open */
  .work-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    height: auto;
  }
  .work-panel { aspect-ratio: 16 / 10; }
  .work-panel:hover,
  .work-strip:not(:hover) .work-panel.is-open { box-shadow: none; }
  .panel-meta { max-width: none; opacity: 1; white-space: normal; }
  .panel-foot { justify-content: flex-start; padding: 20px; }

  .yeti-wave { display: none; }
}

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