/* Smart Flat-Pack — shared styles */

:root {
  --color-navy: #225ca8;
  --color-navy-dark: #163f73;
  --color-orange: #e8722f;
  --color-orange-dark: #c65a1e;
  --color-cream: #faf7f2;
  --color-white: #ffffff;
  --color-gray-100: #f3f2ef;
  --color-gray-300: #d9d6cf;
  --color-gray-600: #6b6a66;
  --color-gray-800: #33322f;
  --color-success: #2f7d5c;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 10px;
  --shadow: 0 4px 16px rgba(34, 92, 168, 0.08);
  --shadow-lg: 0 12px 32px rgba(34, 92, 168, 0.14);

  --max-width: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--color-white);
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-gray-800);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: on short-content pages (404, thank-you) the
     header + .error-page min-height didn't reach the bottom of a tall
     desktop viewport, leaving a white gap below the footer instead of
     the footer sitting flush at the bottom. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1 0 auto;
}

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

a {
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--color-navy);
  font-weight: 800;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 4vw + 1rem, 3.2rem); }
h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.3rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

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

.section {
  padding: 72px 0;
}

.section--tight {
  padding: 48px 0;
}

.section--alt {
  background: var(--color-cream);
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange-dark);
  margin-bottom: 12px;
}

.lede {
  font-size: 1.15rem;
  color: var(--color-gray-600);
  max-width: 62ch;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  /* Button labels should never wrap mid-phrase — a squeezed flex parent
     was breaking "Get a Free Quote" across three lines in the header. */
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.96); }

.btn--primary {
  background: var(--color-orange);
  color: var(--color-white);
  box-shadow: 0 6px 18px rgba(232, 114, 47, 0.35);
}
.btn--primary:hover { background: var(--color-orange-dark); }

.btn--secondary {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.btn--secondary:hover { background: var(--color-navy); color: var(--color-white); }

/* Any always-navy-background container needs this — not just .cta-banner —
   so a .btn--secondary dropped into a new dark container doesn't go
   invisible again. */
.cta-banner .btn--secondary,
.hero__visual .btn--secondary {
  color: var(--color-white);
  border-color: rgba(255,255,255,0.5);
}
.cta-banner .btn--secondary:hover,
.hero__visual .btn--secondary:hover { background: var(--color-white); color: var(--color-navy); }

.btn--block { width: 100%; justify-content: center; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-gray-300);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Guarantees clear separation between the logo and the nav — with 8 nav
     items, space-between alone collapses to a zero gap on desktop. */
  gap: 48px;
  padding: 16px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--color-navy);
}

.brand__logo {
  height: 34px;
  width: auto;
  display: block;
}

.footer__brand-logo {
  height: 30px;
  width: auto;
  display: block;
  margin-bottom: 14px;
}

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

.nav__links a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-gray-800);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  /* Multi-word items ("Areas Covered", "Our Work") must not wrap to two
     lines — that doubles the header height on the desktop nav. */
  white-space: nowrap;
}

.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--color-orange-dark);
  border-bottom-color: var(--color-orange);
}

.nav__cta { display: none; flex-shrink: 0; }
@media (min-width: 1080px) {
  .nav__cta { display: inline-flex; }
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 2px solid var(--color-navy);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--color-navy);
  cursor: pointer;
}
@media (min-width: 1080px) {
  .nav__toggle { display: none; }
}

.nav__links {
  display: none;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1080px) {
  .nav__links { display: flex; }
}

.nav__links--open {
  display: flex !important;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  flex-direction: column;
  padding: 16px 24px 24px;
  border-bottom: 1px solid var(--color-gray-300);
  box-shadow: var(--shadow);
  gap: 10px;
}
.nav__links--open a {
  display: inline-block;
  padding: 6px 0 10px;
}

.site-header__inner { position: relative; }

/* Hero */
.hero {
  padding: 64px 0 56px;
  background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-white) 100%);
}

.hero__grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
/* For non-hero uses of this grid (e.g. contact.html's form + info-card
   layout) where the two columns are very different heights — top-align
   instead of vertically centering the shorter column. */
.hero__grid--top {
  align-items: start;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-gray-800);
}

.hero__visual {
  background: var(--color-navy);
  border-radius: 20px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(232,114,47,0.35), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), transparent 45%);
}

.hero__visual--photo {
  padding: 0;
  aspect-ratio: 4 / 5;
  min-height: 0;
}
.hero__visual--photo picture,
.hero__visual--photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
@media (min-width: 900px) {
  .hero__visual--photo { aspect-ratio: 3 / 4; }
}

/* Cards / grids */
.grid {
  display: grid;
  gap: 24px;
}
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.review-card {
  background: var(--color-cream);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius);
  padding: 28px;
  grid-column: 1 / -1;
}

.review-card__stars {
  display: flex;
  gap: 3px;
  color: var(--color-orange);
  margin-bottom: 14px;
}
.review-card__stars .icon {
  fill: currentColor;
  stroke: none;
}

.rating-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.rating-callout__score {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1;
}

.rating-callout__stars {
  display: flex;
  gap: 2px;
  color: var(--color-orange);
}
.rating-callout__stars .icon {
  fill: currentColor;
  stroke: none;
}

.rating-callout__count {
  color: var(--color-gray-600);
  font-size: 0.92rem;
}

/* Small homepage-badge variant, reusing the .badge shell -- this one is a
   real link to /reviews, so it needs its own decoration/hover treatment
   since the plain .badge <span> instances never needed either. */
.badge--rating {
  gap: 6px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.badge--rating:hover {
  border-color: var(--color-orange);
  transform: translateY(-1px);
}
.badge--rating .rating-callout__stars {
  gap: 1px;
}
.badge--rating .rating-callout__stars .icon {
  width: 13px;
  height: 13px;
}

.review-card__text {
  font-size: 1.05rem;
  color: var(--color-gray-800);
  margin-bottom: 12px;
}

.review-card__author {
  font-weight: 700;
  margin: 0;
}

.review-card__source {
  font-weight: 400;
  color: var(--color-gray-600);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.card:hover .card__icon {
  background: var(--color-navy);
  color: var(--color-white);
}
.card__icon {
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}
.card:hover .card__icon svg {
  transform: scale(1.08);
}

.card__icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--color-navy);
}

/* Shared icon system — coherent line-icon language across the site */
.icon {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.15em;
}

.card--flat {
  border: none;
  box-shadow: none;
  background: var(--color-cream);
}

.list-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.list-check li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.list-check li::before {
  content: "✓";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-success);
  color: var(--color-white);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.list-cross {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.list-cross li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--color-gray-600);
}
.list-cross li::before {
  content: "×";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-gray-300);
  color: var(--color-gray-800);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

/* Steps */
.steps {
  display: grid;
  gap: 28px;
}
@media (min-width: 700px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}
.step {
  padding-top: 8px;
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-orange);
  color: var(--color-white);
  font-weight: 800;
  margin-bottom: 16px;
}

/* CTA banner */
.cta-banner {
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: 20px;
  padding: 48px;
  text-align: center;
}
.cta-banner h2 { color: var(--color-white); }
.cta-banner .lede { color: rgba(255,255,255,0.75); margin-left: auto; margin-right: auto; }
.cta-banner__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* Forms */
.form {
  display: grid;
  gap: 18px;
  max-width: 560px;
}
.form-row {
  display: grid;
  gap: 6px;
}
.form-row label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-navy);
}
.form-row input,
.form-row select,
.form-row textarea {
  padding: 12px 14px;
  border: 1.5px solid var(--color-gray-300);
  border-radius: 8px;
  font: inherit;
  color: var(--color-gray-800);
  background: var(--color-white);
}
.form-row textarea {
  resize: none;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-orange);
}
.form-note {
  font-size: 0.85rem;
  color: var(--color-gray-600);
}

/* FAQ */
.faq-item {
  border-bottom: 1px solid var(--color-gray-300);
  padding: 20px 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-navy);
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--color-orange);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin-top: 12px;
  color: var(--color-gray-600);
}
/* Belt-and-braces: force-collapse body content when closed, in case a
   browser doesn't fully suppress non-summary children of <details>. */
.faq-item:not([open]) > *:not(summary) {
  display: none;
}

.service-video {
  width: 100%;
  max-width: 640px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: var(--color-navy-dark);
  display: block;
  margin-top: 32px;
}

/* Work gallery cards */
.work-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1);
}
.work-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.work-card picture,
.work-card img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
}
.work-card__body {
  padding: 24px 26px 28px;
}
.work-card__body h2 {
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.work-card__meta {
  display: inline-block;
  background: var(--color-cream);
  color: var(--color-orange-dark);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.work-card__body p:last-child {
  margin-bottom: 0;
  color: var(--color-gray-600);
  font-size: 0.95rem;
}

/* Team / character-select cards */
.team-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 760px;
}

.team-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: center;
}

.team-card__avatar {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 2.6rem;
  font-weight: 800;
  position: relative;
}

.team-card__body {
  padding: 18px 16px 22px;
}

.team-card__name {
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: 4px;
}

.team-card__role {
  font-size: 0.85rem;
  color: var(--color-gray-600);
  margin-bottom: 10px;
}

.team-card__blurb {
  font-size: 0.88rem;
  color: var(--color-gray-600);
  margin: 0;
}

/* Locked placeholder card — the character-select wink */
.team-card--locked .team-card__avatar {
  background: linear-gradient(135deg, #4b4b4b, #2a2a2a);
  filter: grayscale(100%) brightness(0.75);
}

.team-card--locked .team-card__silhouette {
  font-size: 2.8rem;
  opacity: 0.55;
}

.team-card--locked .team-card__lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}

.team-card--locked .team-card__lock svg {
  width: 34px;
  height: 34px;
  stroke: var(--color-white);
}

.team-card--locked .team-card__name {
  color: var(--color-gray-600);
  letter-spacing: 0.08em;
}

/* Reused lock-icon motif for the Services "Coming Soon" section */
.coming-soon-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.coming-soon-card {
  background: var(--color-white);
  border: 1.5px dashed var(--color-gray-300);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.coming-soon-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.coming-soon-card__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-gray-600);
}

.coming-soon-card h3 {
  font-size: 1rem;
  margin-bottom: 2px;
}

.coming-soon-card p {
  font-size: 0.85rem;
  color: var(--color-gray-600);
  margin: 0;
}

/* Footer */
.site-footer {
  background: var(--color-navy-dark);
  color: rgba(255,255,255,0.8);
  padding: 56px 0 28px;
}
.footer__grid {
  display: grid;
  gap: 32px;
  /* Explicit columns rather than auto-fit -- auto-fit couldn't fit all 5
     columns (brand, Site, Contact, Legal, Follow) at container width, so
     Follow dropped to its own row under the logo, leaving a large dead
     gap to the right on desktop. */
  grid-template-columns: 1fr;
  margin-bottom: 40px;
}
@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__grid > div:first-child {
    grid-column: 1 / -1;
  }
}
/* .footer__links wraps the 4 link columns (Site/Contact/Legal/Follow).
   display:contents below 960px means the wrapper itself takes no part
   in layout -- its children rejoin .footer__grid directly, so mobile
   and tablet tiers are unaffected. */
.footer__links {
  display: contents;
}
@media (min-width: 960px) {
  .footer__grid {
    /* A flexible brand-column track was absorbing all the container's
       leftover width itself (fr tracks grow to fill space), so the
       logo/tagline stayed hugging the left edge while the extra width
       piled up as one large gap in front of the link block, instead of
       being split evenly around it. Switching to flex + auto margins
       on the link wrapper (below) puts equal leftover space on both
       sides of that wrapper instead. */
    display: flex;
    align-items: flex-start;
  }
  .footer__grid > div:first-child {
    flex-shrink: 0;
  }
  .footer__links {
    display: flex;
    gap: 32px;
    /* Flexbox splits a flex item's own leftover free space evenly
       between left/right auto margins when both are set -- this is
       what actually centres the link block with equal gaps on either
       side, rather than pinning it to one edge. */
    margin: 0 auto;
    flex-shrink: 0;
  }
}
.footer__grid h4 {
  color: var(--color-white);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  /* Centred over its list -- with columns now sized to content
     (max-content), a long line like the email address was left-aligned
     against a short heading, making the column look lopsided. */
  text-align: center;
}
.footer__grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  text-align: center;
}
.footer__grid a {
  text-decoration: none;
  color: rgba(255,255,255,0.75);
  font-size: 0.92rem;
}
.footer__grid a:hover { color: var(--color-orange); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}

/* Utility */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.stack { display: grid; gap: 12px; }

/* Spacing standardisation — these replace inline style="margin-top:Npx"
   that had drifted to six different values (40/32/28/24/16/12px) across
   pages for what were all the same two jobs: a grid/list sitting below a
   heading, or a button sitting below a paragraph. */
.content-gap { margin-top: 32px; }
.btn-gap { margin-top: 16px; }

/* The centred "eyebrow + h2 + lede" intro block used above a grid,
   e.g. "Why Smart Flat-Pack", "Pricing". Was hand-styled inline on each
   occurrence with slightly different values. */
.section-intro {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

/* Inline accent link (orange, bold) inside body copy — was repeated as
   an inline style on every occurrence instead of a class. */
.link-accent {
  color: var(--color-orange-dark);
  font-weight: 700;
}

.mb-content { margin-bottom: 24px; }

/* Long-form prose (legal pages) — one consistent rhythm between sections,
   rather than relying on default heading/paragraph margins which left a
   0px gap after lists and 16px elsewhere. */
.prose {
  max-width: 760px;
}
.prose h2 {
  margin-top: 40px;
  margin-bottom: 10px;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose p,
.prose ul {
  margin-bottom: 0;
}
.prose > *:last-child {
  margin-bottom: 0;
}

/* Sits directly under a page-title block that already provides spacing */
.section--flush-top {
  padding-top: 8px;
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--color-gray-600);
  padding-top: 32px;
}
.breadcrumb a { color: var(--color-gray-600); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-orange-dark); }

.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
}
.error-page .code {
  font-size: 5rem;
  font-weight: 800;
  color: var(--color-orange);
  line-height: 1;
  margin-bottom: 12px;
}

/* ============================================
   Motion system — entrance reveals + micro-interactions.
   Everything here is inert until JS adds .is-visible,
   and fully disabled under prefers-reduced-motion.
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Hero — plays once on load, no observer needed */
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .hero__grid > * {
    animation: fade-up 0.6s cubic-bezier(0.2, 0, 0, 1) both;
  }
  .hero__grid > *:nth-child(1) { animation-delay: 0.05s; }
  .hero__grid > *:nth-child(2) { animation-delay: 0.18s; }

  /* Group scroll reveal — children stagger in via nth-child delay */
  .reveal-group > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s cubic-bezier(0.2, 0, 0, 1), transform 0.5s cubic-bezier(0.2, 0, 0, 1);
  }
  .reveal-group.is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; }
  .reveal-group.is-visible > *:nth-child(2) { transition-delay: 80ms; }
  .reveal-group.is-visible > *:nth-child(3) { transition-delay: 160ms; }
  .reveal-group.is-visible > *:nth-child(4) { transition-delay: 240ms; }
  .reveal-group.is-visible > *:nth-child(5) { transition-delay: 320ms; }
  .reveal-group.is-visible > *:nth-child(6) { transition-delay: 400ms; }
  .reveal-group.is-visible > *:nth-child(7) { transition-delay: 480ms; }
  .reveal-group.is-visible > *:nth-child(8) { transition-delay: 560ms; }
  .reveal-group.is-visible > *:nth-child(n+9) { transition-delay: 560ms; }

  .team-card,
  .coming-soon-card {
    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1);
  }
  .team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .coming-soon-card:hover { transform: translateY(-2px); }

  .faq-item summary::after {
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
  }

  .nav__links--open {
    animation: fade-up 0.22s cubic-bezier(0.2, 0, 0, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-group > * { opacity: 1; transform: none; }
}

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--color-navy-dark);
  color: var(--color-white);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
}

.cookie-banner__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cookie-banner__text {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.85);
  max-width: 640px;
}

.cookie-banner__text a {
  color: var(--color-white);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-banner__btn {
  padding: 10px 22px;
  font-size: 0.92rem;
}

/* Secondary (Reject) needs its own light styling here since .btn--secondary
   otherwise renders navy-on-navy against this banner's dark background --
   both buttons must read as equally prominent, not one primary + one ghost. */
.cookie-banner .btn--secondary {
  color: var(--color-white);
  border-color: rgba(255,255,255,0.6);
}
.cookie-banner .btn--secondary:hover {
  background: var(--color-white);
  color: var(--color-navy-dark);
}

@media (max-width: 640px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cookie-banner__actions {
    justify-content: center;
  }
}