/* V2: light, sky card with a chrome knot, pale-blue pills, black buttons */

.v2 {
  /* Palette: the decided brand colours for Sky (documented on /pages/brand.html) */
  --brand-ink: #0b0b0b;
  --brand-paper: #ffffff;
  --brand-fog: #f8f8f8;
  --brand-pale-sky: #d4e3ef;
  --brand-sky: #3f8fd2;
  --brand-ice: #8cc0ea;
  --brand-cloud: #f4f6f8;

  --btn-bg: var(--brand-ink);
  --btn-ink: #fff;
  --nav-bg: rgb(255 255 255 / 0.72);
  --nav-border: rgb(0 0 0 / 0.06);
  --nav-ink: #111;
  --nav-indicator: var(--brand-pale-sky);
  --nav-shadow: 0 12px 40px -18px rgb(20 40 60 / 0.35);
  --tag-bg: #e3ecf4;
  --card-bg: var(--brand-cloud);
  --mention-hover: #eef4f9;
  --footer-line: rgb(0 0 0 / 0.14);

  --cover-bg: linear-gradient(172deg, #2f7fc2 0%, #5fa3db 45%, #a9cfee 78%, #eef6fc 100%);
  --cover-ink: #fff;
  --cover-accent: var(--brand-ink);
  --spine-bg: linear-gradient(90deg, #1b5a8f, #2f7fc2 50%, #1b5a8f);

  --panel-bg:
    radial-gradient(55% 80% at 88% 8%, rgb(74 155 214 / 0.42), transparent 60%),
    var(--brand-ink);
  --panel-ink: #fff;
  --panel-muted: rgb(255 255 255 / 0.68);
  --panel-accent: var(--brand-ice);
  --field-bg: rgb(255 255 255 / 0.06);
  --field-border: rgb(255 255 255 / 0.18);
  --focus: var(--brand-ice);
  --focus-ring: rgb(140 192 234 / 0.25);
  --chip-on-bg: var(--brand-pale-sky);
  --chip-on-ink: var(--brand-ink);
  --term-bg: #000;
  --term-ok: var(--brand-ice);
}

/* Hero sits on a soft grey sheet */
.v2 .hero {
  background: var(--brand-fog);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 18px 40px -30px rgb(0 0 0 / 0.25);
}
.v2 .hero__inner {
  padding: 120px clamp(20px, 4.9vw, 70px) 60px clamp(20px, 10.3vw, 149px);
}

/* About with the chrome corner */
.v2 .about__inner {
  position: relative;
  padding: clamp(64px, 7.6vw, 110px) 0 0 clamp(44px, 6.3vw, 91px);
}
.v2 .about__curve {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(170px, 23.6vw, 340px);
  aspect-ratio: 1;
  translate: -16.5% -18%;
  filter: drop-shadow(5px 6px 8px rgb(0 0 0 / 0.22));
  pointer-events: none;
}
.v2 .about__curve .gl__fallback {
  position: absolute;
  left: 14%;
  top: 14%;
  width: 78%;
  filter: none;
}
.v2 .about .pill { background: var(--brand-pale-sky); }
.v2 .about .pill:hover { background: #c2d6e8; }

/* Origin gets its own tinted sheet */
.v2 .origin { background: #f4f7fa; }

/* Work */
.v2 .case--featured { background: #e6eef5; }

/* Contact */
.v2 .contact .btn { --btn-bg: var(--brand-pale-sky); --btn-ink: var(--brand-ink); }

/* Footer */
.v2 .footer { border-top: 1px solid rgb(0 0 0 / 0.08); }

@media (max-width: 1000px) {
  .v2 .hero__inner { padding-left: var(--gutter); padding-right: var(--gutter); }
  .v2 .knot-visual { justify-self: center; margin-right: 12%; }
}