/* ==========================================================================
   KC's Custom Computers — site stylesheet
   Palette: white/near-white surfaces, cobalt #1B4DE4, navy ink #0B1B3F
   Type:    Schibsted Grotesk (display) + Instrument Sans (UI/body)
   ========================================================================== */

:root {
  --plate:        #FAFAFA;   /* page background, matches the hero video plate */
  --surface:      #FFFFFF;
  --ink:          #0B1B3F;
  --ink-2:        #55668A;
  --ink-3:        #8494B3;
  --ink-4:        #A3B0CB;
  --line:         #E7ECF6;
  --line-2:       #DCE4F5;
  --line-3:       #EDF1F9;
  --blue:         #1B4DE4;
  --blue-dark:    #1339B8;
  --blue-tint:    #E3EAFD;
  --blue-border:  #D6DFF2;
  --wall:         #C3CCDB;   /* hero type sitting on the video's back wall */
  --danger:       #B4462F;
  --danger-tint:  #F3E7E3;

  --display: 'Schibsted Grotesk', system-ui, sans-serif;
  --ui: 'Instrument Sans', system-ui, sans-serif;

  --nav-h: 74px;
  --pad-x: 54px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--plate);
}

body {
  font-family: var(--ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--blue); }

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

/* `hidden` has to mean hidden. The browser's own rule for it loses to any
   class that sets display — .pill is inline-block, .modal is flex — so
   toggling el.hidden silently did nothing on those, and pages were patching
   it one element at a time. */
[hidden] { display: none !important; }

/* Read by screen readers, not shown. */
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
button { font-family: inherit; }

h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.03em; }

.eyebrow {
  font: 600 11px var(--ui);
  letter-spacing: 0.22em;
  color: var(--blue);
  text-transform: uppercase;
}
/* The Prime Series eyebrow is the one that reads as a name rather than a
   label, so it keeps its capitals. */
.eyebrow--cased { text-transform: none; }

.muted { color: var(--ink-3); }
.wrap { padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* --------------------------------------------------------------- nav ---- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px var(--pad-x);
  background: transparent;
  transition: background .22s ease, border-color .22s ease;
}

.nav--solid {
  background: rgba(250, 250, 250, 0.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-3);
}

.nav__logo {
  font: 700 18px/1.2 var(--display);
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  color: #000;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.nav__divider {
  width: 1px;
  height: 24px;
  background: var(--line-2);
  margin: 0 4px;
}

/* ----------------------------------------------------------- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 13.5px var(--ui);
  letter-spacing: -0.005em;
  height: 42px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.btn--ghost {
  border-color: var(--blue-border);
  background: rgba(255, 255, 255, 0.72);
  color: #000;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.95); border-color: var(--blue); color: #000; }

.btn--ghost.is-active { border-color: var(--blue); background: rgba(27, 77, 228, 0.07); }

.btn--primary {
  background: var(--blue);
  color: #fff;
  padding: 0 22px;
  box-shadow: 0 6px 18px rgba(27, 77, 228, 0.22);
}
.btn--primary:hover { background: var(--blue-dark); color: #fff; }

.btn--lg { height: 54px; padding: 0 34px; font-size: 15px; }
.btn--block { width: 100%; }

.btn--disabled,
.btn--disabled:hover {
  background: #F1F4FA;
  color: var(--ink-4);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--icon {
  width: 42px;
  height: 42px;
  padding: 0;
  flex-shrink: 0;
  border-color: var(--blue-border);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
}
.btn--icon:hover { background: rgba(255, 255, 255, 0.95); border-color: var(--blue); color: var(--blue); }

/* -------------------------------------------------------------- pills --- */

.pill {
  display: inline-block;
  font: 600 11px var(--ui);
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill--blue    { background: var(--blue-tint); color: var(--blue); }
.pill--stock   { background: #E9EEFB; color: #4B62A8; }
.pill--out     { background: var(--danger-tint); color: var(--danger); }
.pill--popular { background: var(--blue); color: #fff; }
.pill--outline {
  font: 600 12px var(--ui);
  letter-spacing: 0;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  background: var(--surface);
  padding: 8px 15px;
}

/* The warranty badge is the one pill that goes somewhere. */
a.pill--outline:hover { color: var(--blue); border-color: var(--blue-border); }

/* --------------------------------------------------------------- hero --- */

.hero { position: relative; height: 420vh; }

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: transparent;
}

.hero__clip {
  position: absolute;
  inset: 0;
  background: transparent;
}
.hero__clip video,
.hero__clip canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
#clip-a { z-index: 1; }
#clip-b { z-index: 2; opacity: 0; }

.hero__title {
  position: absolute;
  top: 12%;
  right: 3.2%;
  z-index: 3;
  margin: 0;
  font: 700 clamp(38px, 10.8vw, 210px)/0.88 var(--display);
  letter-spacing: -0.04em;
  text-align: right;
  white-space: nowrap;
  color: var(--wall);
  mix-blend-mode: multiply;
  pointer-events: none;
  transform: perspective(1600px) rotateY(-13deg) rotateX(2deg) scale(0.96);
  transform-origin: 100% 40%;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75), 0 -1px 0 rgba(11,27,63,0.06);
}

/* spec card that unfolds as the build finishes */
.hero__card {
  position: absolute;
  right: 34px;
  bottom: 34px;
  z-index: 5;
  width: 268px;
  padding: 18px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: 0 18px 46px rgba(11, 27, 63, 0.13);
}
.hero__card-kicker {
  font: 600 11px var(--ui);
  letter-spacing: 0.16em;
  color: var(--ink-3);
  white-space: nowrap;
}
.hero__card-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}
.hero__card-price b {
  font: 700 28px var(--display);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
#card-tier { opacity: 0; }
.hero__card-specs { overflow: hidden; height: 0; opacity: 0; }
.hero__card-foot {
  font: 500 11.5px var(--ui);
  color: var(--ink-3);
  margin-top: 11px;
  text-align: center;
}
.hero__card-note {
  font: 400 10.5px var(--ui);
  color: var(--ink-4);
  margin-top: 10px;
}
.hero__card-note a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.hero__card-note a:hover { color: var(--blue); }

/* Sits under both clip layers, matched to the frame the hero opens on, so a
   stage that never gets a video is still the photograph rather than nothing.
   contain and the same box as the clips, so the handover is invisible. */
.hero__poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The mobile stand-in for the scrubbed clips. Hidden on desktop, where the
   video does the work; below the breakpoint it is the whole hero. */
.hero__still { display: none; }

/* ------------------------------------------------------- hero callouts -- */

.callouts {
  position: absolute;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.callouts svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.callouts svg g {
  stroke: var(--blue);
  stroke-width: 1;
  fill: none;
  opacity: 0.45;
}
.co-head {
  position: absolute;
  left: 66%;
  top: 5%;
  /* the frame behind this is a pale bench, so multiply keeps the type sitting
     in the photograph rather than on top of it */
  mix-blend-mode: multiply;
  font: 700 clamp(22px, 2.9vw, 56px)/0.92 var(--display);
  letter-spacing: -0.035em;
  color: var(--wall);
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75), 0 -1px 0 rgba(11,27,63,0.06);
}
.co-sub {
  position: absolute;
  left: 66%;
  top: 17%;
  font: 500 clamp(10px, 0.95vw, 13px) var(--ui);
  letter-spacing: 0.01em;
  color: var(--ink-3);
  white-space: nowrap;
}
.co-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 999px;
  background: var(--blue);
}
.co-label { position: absolute; white-space: nowrap; }
/* One line per label now, centred on the end of its leader line. The label's
   top sits exactly on the line and the text is pulled up by half its own line
   height, in em, so it stays centred at every viewport size. It cannot be a
   translateY: home.js writes transform on every label to animate it in. */
.co-label b {
  display: block;
  font: 600 clamp(12px, 1.25vw, 17px) var(--ui);
  line-height: 1.2;
  margin-top: -0.6em;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* ----------------------------------------------------------- sections --- */

.section { padding: 90px var(--pad-x) 30px; }
.section--tight { padding-top: 70px; }
/* Whichever shop section KC has put first sits closer to the page title. It
   used to be hard-wired onto the pre-built grid, which is only first when
   shop_order says so. */
.section.section--lead { padding-top: 48px; }

/* Name first, in the display face, with its line underneath in blue. The two
   used to sit side by side on one baseline, which read as one long sentence
   and buried the name — "One-time deals  One of one. When it's gone, it's
   gone." Placed by grid rather than by source order, so the markup can keep
   the eyebrow first where it already does. */
.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
  margin-bottom: 26px;
}
.section__head h2 {
  grid-column: 1;
  grid-row: 1;
  font: 700 clamp(28px, 2.6vw, 40px) var(--display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.section__head .eyebrow {
  grid-column: 1;
  grid-row: 2;
  margin-top: 6px;
  /* these read as sentences KC writes in Shopify, not as labels */
  font: 500 14px/1.45 var(--ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--blue);
  text-wrap: pretty;
}
.section__head .spacer {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-left: auto;
}

/* Sort control on the shop page. */
.sortbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 26px var(--pad-x) 0;
}
.sortbar__label {
  font: 600 11px var(--ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sortbar__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sortopt {
  font: 600 12.5px var(--ui);
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sortopt:hover { border-color: var(--blue); color: var(--ink); }
.sortopt.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.sortopt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Shown in place of the machines when the catalogue cannot be loaded. */
.unavailable {
  max-width: 620px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.unavailable b { font: 700 19px var(--display); letter-spacing: -0.015em; }
.unavailable p { margin: 8px 0 0; font: 400 15px/1.6 var(--ui); color: var(--ink-2); }
.unavailable a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* A collection's own description, from Shopify. Sits under the heading and
   above the row, at the width prose stays readable at rather than the full
   grid — a category blurb is a sentence, not a column of text. */
.section__lede {
  margin: -14px 0 26px;
  max-width: 620px;
  font: 400 16px/1.65 var(--ui);
  color: var(--ink-2);
}


.manifesto {
  padding: 96px var(--pad-x) 20px;
  max-width: 1180px;
}
.manifesto p {
  margin: 0;
  font: 700 clamp(30px, 3.6vw, 56px)/1.14 var(--display);
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

.page-head { padding: 142px var(--pad-x) 10px; }
.page-head h1 {
  margin: 14px 0 0;
  font: 700 clamp(36px, 4.4vw, 68px)/1.05 var(--display);
  letter-spacing: -0.035em;
}
.page-head p {
  margin: 16px 0 0;
  font: 400 17px/1.6 var(--ui);
  color: var(--ink-2);
  max-width: 560px;
  text-wrap: pretty;
}

/* -------------------------------------------------------- configurator -- */

.config {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(11, 27, 63, 0.06);
}
.config__shot {
  position: relative;
  aspect-ratio: 4 / 5;
  align-self: start;
  background: var(--surface);
}
.config__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
}
.config__shot .tag {
  position: absolute;
  top: 20px;
  left: 22px;
  font: 600 11px var(--ui);
  letter-spacing: 0.16em;
  color: #fff;
  background: rgba(11, 27, 63, 0.55);
  backdrop-filter: blur(6px);
  padding: 7px 14px;
  border-radius: 999px;
}
.config__panel {
  padding: 34px 36px 30px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line-3);
}
.config__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Desktop only. The photo used to be the wider column at a fixed 4:5, so on a
   laptop it stood ~800px tall and the spec panel beside it ran out of things
   to say halfway down. Now the panel sets the height and the photo fills
   whatever that is, in the narrower column — the tile is as tall as its
   content and no taller. Mobile keeps the stacked 4:5 layout untouched: the
   max-width: 860px rules never see any of this. */
@media (min-width: 861px) {
  .config { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .config__shot {
    aspect-ratio: auto;
    align-self: stretch;
    min-height: 440px;
  }
}

.chip {
  font: 600 12.5px var(--ui);
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover { border-color: var(--blue); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.config__price { font: 700 32px var(--display); letter-spacing: -0.02em; }
/* Price on the left, the button pushed right. The price box takes the room the
   button leaves and wraps its sub-line inside it; its flex-basis is 0 so the
   row only breaks onto two lines when the price itself cannot fit beside the
   button, not whenever the sub-line would like to be wide. */
.config__buyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.config__pricebox { flex: 1 1 0; min-width: 0; }

/* ---------------------------------------------------------- spec rows --- */

.spec {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-3);
}
.spec dt { font: 500 12px var(--ui); color: var(--ink-3); margin: 0; }
.spec dd { font: 600 13.5px var(--ui); margin: 0; text-align: right; }

.spec--sm { padding: 7px 0; border-bottom: none; border-top: 1px solid var(--line-3); }
.spec--sm dt { font-size: 11.5px; }
.spec--sm dd { font-size: 12.5px; white-space: nowrap; }

/* ---------------------------------------------------------- benchmarks -- */

.bench { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.bench__game {
  font: 500 12px var(--ui);
  color: var(--ink-2);
  width: 74px;
  flex-shrink: 0;
}
.bench__bar {
  height: 9px;
  min-width: 0;
  border-radius: 999px;
  background: var(--blue);
  transition: flex-basis .35s ease;
}
.bench__bar--2 { background: #5C86EF; }
.bench__bar--3 { background: #B7C7F5; }
.bench__fps {
  font: 600 13px var(--ui);
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 52px;
}

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

.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); gap: 18px; }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(11, 27, 63, 0.04);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.card:hover { border-color: var(--blue); }
.card--hero { border: 1.5px solid var(--blue); box-shadow: 0 14px 36px rgba(27, 77, 228, 0.15); }
.card--out { opacity: 0.92; }
.card--out .card__shot img { filter: grayscale(0.55); }

.card__shot { position: relative; display: block; }
.card__shot img {
  width: 100%;
  height: 300px;
  object-fit: contain;
  background: var(--surface);
  padding: 14px 0;
}
.card__shot .pill { position: absolute; top: 14px; z-index: 2; }
.card__shot .pill--popular { left: 14px; }
.card__shot .pill--stock,
.card__shot .pill--out { right: 14px; }

.card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.card__title .name { font: 700 19px var(--display); }
.card__title .price { font: 700 22px var(--display); }
.card__foot {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding-top: 18px;
}
.card__foot .link {
  font: 600 13px var(--ui);
  color: var(--ink-2);
  white-space: nowrap;
}
.card__foot .btn { margin-left: auto; }

.card--deal .card__shot img { height: 200px; }
.card--deal .card__body { padding: 18px 22px 20px; }
.card--deal .name { font: 600 14px var(--ui); margin-top: 10px; display: block; }
.card--deal .sub { font: 400 12.5px/1.5 var(--ui); color: var(--ink-3); margin-top: 4px; }
.card--deal .btn { margin-top: 16px; }

/* -------------------------------------------------------- build custom -- */

.custom {
  border: 1px solid var(--line-2);
  border-radius: 28px;
  padding: 54px 56px 50px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(11, 27, 63, 0.06);
}
.custom h2 {
  margin: 0;
  font: 700 clamp(30px, 3.2vw, 50px)/1.1 var(--display);
  max-width: 760px;
  text-wrap: pretty;
}
/* A step above the paragraph below it, a step below the name above it.
   Written as `.custom > p.custom__lead` so it outranks the `.custom > p`
   rule below, which would otherwise pull it back to the body size. */
.custom > p.custom__lead {
  margin: 14px 0 0;
  font: 500 clamp(19px, 1.7vw, 23px)/1.45 var(--ui);
  color: var(--ink);
  max-width: 700px;
  text-wrap: pretty;
}
.custom > p {
  margin: 14px 0 0;
  font: 400 17px/1.6 var(--ui);
  color: var(--ink-2);
  max-width: 620px;
  text-wrap: pretty;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 40px;
}
.steps > li {
  list-style: none;
  background: var(--surface);
  padding: 26px 26px 30px;
}
.steps .num { font: 600 11px var(--ui); letter-spacing: 0.18em; color: var(--blue); }
.steps h3 { font: 700 18px var(--display); margin-top: 10px; letter-spacing: -0.015em; }
.steps p { margin: 6px 0 0; font: 400 13.5px/1.55 var(--ui); color: var(--ink-2); }

.custom__cta {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 36px;
}

/* ------------------------------------------------------- product page --- */

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 12.5px var(--ui);
  color: var(--ink-4);
  margin-bottom: 22px;
}
.crumbs a { color: var(--ink-3); }

.product {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.product__stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.product__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 26px;
}
.product__stage .pill { position: absolute; top: 18px; left: 20px; }

.thumbs { display: flex; gap: 12px; margin-top: 12px; }
.thumb {
  width: 92px;
  height: 72px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 4px;
  cursor: pointer;
}
.thumb.is-active { border: 1.5px solid var(--blue); }
.thumb img { width: 100%; height: 100%; object-fit: contain; }

.product h1 {
  margin: 12px 0 0;
  font: 700 clamp(30px, 3.4vw, 52px)/1.05 var(--display);
  letter-spacing: -0.035em;
}
.product__tagline {
  margin: 12px 0 0;
  font: 500 17px/1.5 var(--ui);
  color: var(--ink-2);
  max-width: 460px;
  text-wrap: pretty;
}
.product__price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 26px;
}
.product__price b { font: 700 40px var(--display); letter-spacing: -0.03em; }

.buybar { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.qty {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--blue-border);
  border-radius: 999px;
  padding: 4px;
  background: var(--surface);
}
.qty button {
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  font: 600 17px var(--ui);
  color: var(--ink-2);
}
.qty button:hover { background: var(--line-3); }
.qty span { min-width: 26px; text-align: center; font: 600 15px var(--ui); }
.buybar .btn { flex: 1; min-width: 200px; height: 54px; font-size: 15px; }

.buynote { font: 500 12.5px var(--ui); color: var(--ink-3); margin-top: 12px; }
.buynote.is-out { color: var(--danger); }

.block { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 24px; }
.block__label { font: 600 11px var(--ui); letter-spacing: 0.18em; color: var(--ink-4); }
.block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.restabs { display: flex; gap: 2px; }
.restab {
  font: 600 12px var(--ui);
  padding: 7px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.restab.is-on { background: var(--ink); color: #FFFFFF; }
/* A resolution with no numbers yet still lists the games, so the switch shows
   what is coming rather than collapsing to nothing. */
.bench.is-pending .bench__bar { background: var(--line-3); }
.bench.is-pending .bench__fps { color: var(--ink-4); }
.benchnote { margin-top: 12px; font: 400 11.5px var(--ui); color: var(--ink-4); }
.product__blurb {
  margin: 26px 0 0;
  font: 400 15px/1.65 var(--ui);
  color: var(--ink-2);
  max-width: 500px;
  text-wrap: pretty;
}
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---------------------------------------------- options and add-ons --- */

/* A colour, length, or any other option an accessory offers. Same pill shape
   as the configurator chips, but the chosen one is outlined rather than filled
   so its swatch stays visible — a filled black pill would swallow a black
   swatch. */
.opts { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.choice__label { font: 600 11px var(--ui); letter-spacing: 0.18em; color: var(--ink-4); text-transform: uppercase; }
.choice__label b { margin-left: 6px; font: 600 13px var(--ui); letter-spacing: 0; text-transform: none; color: var(--ink); }
.choice__values { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.optval {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 13px var(--ui);
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.optval:hover { border-color: var(--blue); color: var(--ink); }
.optval.is-on { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.optval.is-out { color: var(--ink-4); }
.optval.is-out:not(.is-on) { text-decoration: line-through; }
.optval:disabled { cursor: not-allowed; }
.optval:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.optval--sm { gap: 6px; padding: 4px 10px 4px 6px; font-size: 12px; }

.swatch {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 999px;
  /* a white stand's swatch has to show on a white pill */
  box-shadow: inset 0 0 0 1px rgba(11, 27, 63, 0.22);
}
.optval--sm .swatch { width: 12px; height: 12px; }

/* Accessories offered on a PC's page, above the button that adds them. */
.addons {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.addons__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-3);
}
.addons__head a { font: 600 12.5px var(--ui); color: var(--blue); }
.addons__list { list-style: none; margin: 0; padding: 0; }

.addon {
  display: grid;
  grid-template-columns: auto 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  transition: background .15s ease;
}
.addon + .addon { border-top: 1px solid var(--line-3); }
.addon.is-on { background: #F5F8FF; }
/* The label holds the tick box and the photo, so tapping either one toggles;
   `contents` lets both still sit in the row's grid as their own columns. */
.addon__pick { display: contents; cursor: pointer; }
.addon__pick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.addon__box {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.addon__box::after {
  content: '';
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0;
}
.addon__pick input:checked + .addon__box { background: var(--blue); border-color: var(--blue); }
.addon__pick input:checked + .addon__box::after { opacity: 1; }
.addon__pick input:focus-visible + .addon__box { outline: 2px solid var(--blue); outline-offset: 2px; }
.addon__shot {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--plate);
  object-fit: cover;
  cursor: pointer;
}
.addon__name { font: 600 14px/1.3 var(--ui); color: var(--ink); }
.addon__vals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.addon__select {
  font: 500 12.5px var(--ui);
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  max-width: 100%;
}
.addon__price {
  font: 600 13.5px var(--ui);
  color: var(--ink-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The protection plans, directly above the accessories.
 *
 * Both blocks were the same shape, the same size and the same colour, one on
 * top of the other, and between them they owned the buy column — the price
 * and the button were pushed off the screen on a laptop. This one is the
 * quieter of the two: no photograph, one line a row, and a tint so the eye
 * reads two blocks rather than one list of four.
 */
.addons--plans {
  background: #F8FAFF;
  border-color: var(--blue-border);
}
.addons--plans .addons__head { padding: 8px 14px; border-bottom-color: var(--blue-border); }
.addons--plans .block__label { font-size: 10px; letter-spacing: 0.14em; }
.addons--plans .addons__head a { font-size: 11.5px; }
.addons--plans .addon {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 7px 14px;
}
.addons--plans .addon + .addon { border-top-color: var(--blue-border); }
.addons--plans .addon.is-on { background: var(--blue-tint); }
.addons--plans .addon__box { width: 18px; height: 18px; border-radius: 6px; }
.addons--plans .addon__box::after { width: 5px; height: 9px; }
.addons--plans .addon__name { font: 600 13px/1.3 var(--ui); }
.addons--plans .addon__price { font-size: 13px; }

/* Accessory card: the deal card's shape, with the colours it comes in. */
/* KC's accessory shots are photographs on a desk, not cut-outs on white, so
   they fill the frame instead of floating in padding like the PC renders. */
.card--accessory .card__shot img { object-fit: cover; padding: 0; }
.card--accessory .price small { font: 600 12px var(--ui); color: var(--ink-3); letter-spacing: 0; }
.swatches { display: inline-flex; gap: 5px; }

.related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.related .card__shot img { height: 150px; padding: 12px 0; }
.related .card__body { padding: 16px 18px 18px; }
.related .name { font: 700 15px var(--display); }
.related .price { font: 700 16px var(--display); }
.related .stock { font: 500 12px var(--ui); color: var(--blue); margin-top: 6px; }
.related .stock.is-out { color: var(--danger); }

/* ------------------------------------------------------------- footer --- */

.footer {
  border-top: 1px solid var(--line);
  padding: 64px var(--pad-x) 0;
  margin-top: 60px;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: 60px;
  align-items: start;
}
.footer__brand { max-width: 380px; }
.footer__brand h3 { font: 700 20px/1.2 var(--display); letter-spacing: -0.02em; }
.footer__brand p { margin: 12px 0 0; font: 400 14px/1.65 var(--ui); color: var(--ink-3); }

.footer__mail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  max-width: 340px;
  background: var(--surface);
}
/* :not(.btn) matters — this selector outranks .btn--primary, and without it
   the "Get in touch" button's white label was repainted muted grey on blue. */
.footer__mail span,
.footer__mail > a:not(.btn) { font: 500 13.5px var(--ui); color: var(--ink-2); white-space: nowrap; }
.footer__mail > a:not(.btn):hover { color: var(--blue); }
.footer__mail .btn { margin-left: auto; height: 38px; padding: 0 20px; font-size: 13px; }

.footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }

/* Each group is a native <details>, so the mobile accordion needs no JS and no
   state to track. Above the mobile breakpoint the panel is force-shown whatever
   the open attribute says, so the desktop footer stays the flat grid it was. */
.footer__col > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 10.5px var(--ui);
  letter-spacing: 0.18em;
  color: var(--ink-4);
  list-style: none;
}
.footer__col > summary::-webkit-details-marker { display: none; }
.footer__col > summary::marker { content: ''; }
/* an author display on a <details> child overrides the UA's closed-state
   hiding, so the closed panel has to be taken down explicitly */
.footer__col > div { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.footer__col:not([open]) > div { display: none; }
.footer__col a { font: 500 14px var(--ui); color: var(--ink-2); white-space: nowrap; }
.footer__chev { display: none; }

@media (min-width: 861px) {
  .footer__col > div { display: flex !important; }
  .footer__col > summary { cursor: default; pointer-events: none; }
}

.footer__mark {
  margin-top: 46px;
  font: 700 26px var(--display);
  letter-spacing: -0.025em;
  color: #D9E1F2;
  user-select: none;
}
.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding: 20px 0 30px;
  font: 400 12px var(--ui);
  color: var(--ink-4);
}

/* Privacy Policy and Terms links, between the copyright and the payment
   methods. Quieter than the column links: legal pages are looked for, not
   browsed to. */
.footer__policies { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__policies a { color: var(--ink-3); }
.footer__policies a:hover { color: var(--blue); }

/* ------------------------------------------------------------ policies --- */

/* KC's policies, as Shopify publishes them. The markup is Shopify's — h2s,
   paragraphs, lists, a few links — with its classes stripped, so it is styled
   here by element. A reading measure, not the full page width: these are
   long and mostly read top to bottom. */
.policy { max-width: 720px; font: 400 16px/1.7 var(--ui); color: var(--ink-2); }
.policy h2 {
  margin: 42px 0 12px;
  font: 700 clamp(20px, 2.1vw, 25px)/1.25 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.policy p { margin: 0 0 14px; }
.policy ul, .policy ol { margin: 0 0 18px; padding-left: 22px; }
.policy li { margin-bottom: 8px; }
.policy li::marker { color: var(--ink-4); }
.policy strong, .policy b { font-weight: 600; color: var(--ink); }
.policy a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
/* Shopify opens every policy with "Last updated: …" */
.policy > div > p:first-child {
  margin-bottom: 26px;
  font: 600 12px var(--ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
/* Loading, not published yet, or could not be fetched. */
.policy__status {
  max-width: 620px;
  margin: 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font: 500 15px/1.6 var(--ui);
  color: var(--ink-2);
}
.policy__status a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* ----------------------------------------------- warranty & plans ------- */

/* The two short blocks above the contracts. Same measure as .policy so the
   whole page reads as one column. */
.legal__intro { max-width: 720px; font: 400 16.5px/1.7 var(--ui); color: var(--ink-2); }
.legal__intro p { margin: 0 0 14px; }
.legal__intro b { font-weight: 600; color: var(--ink); }

.legal__note {
  max-width: 720px;
  margin: 22px 0 0;
  font: 400 14.5px/1.65 var(--ui);
  color: var(--ink-3);
}
.legal__note a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* The numbers a buyer needs before they read 54 numbered clauses. */
.facts {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.facts--plain { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; }
.fact { padding: 18px 20px; background: var(--surface); }
.fact span {
  display: block;
  margin-top: 5px;
  font: 400 14px/1.55 var(--ui);
  color: var(--ink-2);
}
.fact__n {
  font: 700 19px/1.2 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Plus and Premium, side by side. Two cards, not a feature matrix — Premium
   is Plus plus four lines, so a matrix would be nine rows of two ticks. */
.tiers {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.tier {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 24px 24px 26px;
}
.tier--featured { border-color: var(--blue-border); box-shadow: 0 1px 0 var(--blue-tint) inset; }
.tier__head h3 {
  margin: 0;
  font: 700 clamp(19px, 2vw, 23px)/1.2 var(--display);
}
.tier__tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--blue-tint);
  font: 600 11px var(--ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}
.tier__price { margin: 14px 0 0; display: flex; align-items: baseline; gap: 7px; }
.tier__price b { font: 700 30px/1 var(--display); letter-spacing: -0.03em; }
.tier__price span { font: 500 13.5px var(--ui); color: var(--ink-3); }
.tier__alt { margin: 6px 0 0; font: 400 14px/1.5 var(--ui); color: var(--ink-2); }
.tier__alt b { font-weight: 600; color: var(--ink); }
.tier__also {
  margin: 20px 0 0;
  font: 600 13px var(--ui);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.tier__list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font: 400 15px/1.55 var(--ui);
  color: var(--ink-2);
}
.tier__list li { position: relative; padding: 0 0 10px 24px; }
.tier__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 11px;
  height: 6px;
  border: solid var(--blue);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

/* The contracts themselves: .policy sets the type, .legal adds the numbering
   and the section index. */
.legal { margin-top: 30px; }
.legal__title {
  margin: 0 0 4px;
  font: 700 clamp(19px, 2vw, 24px)/1.25 var(--display);
  letter-spacing: -0.025em;
}
.legal__lead { margin: 14px 0 6px; }
.legal__toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 16px 0 4px;
  border-bottom: 1px solid var(--line);
}
.legal__toc a {
  font: 500 13px var(--ui);
  color: var(--ink-2);
  text-decoration: none;
}
.legal__toc a:hover { color: var(--blue); }
.legal h3 {
  margin: 34px 0 12px;
  font: 700 17px/1.3 var(--display);
  letter-spacing: -0.015em;
  color: var(--ink);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.legal__sub {
  margin: 20px 0 8px;
  font: 600 15px/1.4 var(--ui);
  color: var(--ink);
}
/* Clause numbers, held in their own colour so the prose still reads as prose. */
.legal__n { font-weight: 600; color: var(--ink-3); }
.legal__list { margin: 0 0 16px; padding-left: 26px; }
.legal__list li { margin-bottom: 7px; }

/* ------------------------------------------------------------- mobile --- */

@media (max-width: 1080px) {
  .facts--plain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4, .related { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root { --pad-x: 20px; }

  .nav {
    padding: 10px 16px;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .nav__logo { font-size: 15px; }
  .nav__actions { gap: 6px; }
  .nav__actions .btn { height: 36px; padding: 0 13px; font-size: 12.5px; }
  .nav__actions .btn--icon { width: 36px; padding: 0; }
  .nav__divider { display: none; }

  /* No scrubbing on a phone, so the hero stops being a sticky stage that
     three screens of scroll play through. It becomes what it actually is
     here: a headline, a photograph of the build, and the card — stacked,
     each taking the room it needs. Absolutely positioning them inside a
     100vh box left the wide still stranded in a band of empty white. */
  .hero { height: auto; }
  .hero__stage {
    position: static;
    height: auto;
    padding: calc(var(--nav-h) + 10px) 0 22px;
  }
  .callouts { display: none; }
  .hero__clip { display: none; }
  /* the phone has its own still; this one would only be a second download */
  .hero__poster { display: none; }

  .hero__title {
    position: static;
    text-align: right;
    padding: 0 16px;
    font-size: clamp(38px, 12vw, 76px);
  }
  .hero__still {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 6px;
  }
  .hero__card {
    position: static;
    width: auto !important;
    margin: 18px 16px 0;
  }

  /* minmax(0, …), not 1fr: a bare 1fr column will not shrink below its
     widest unbreakable content, which here is the price beside a nowrap
     button. That row needs ~316px on a phone where the panel has 291, so the
     column grew past the tile, the tile's overflow:hidden cut it, and the
     spec values and the button lost their right edge — 4px of it at $2,500. */
  .config { grid-template-columns: minmax(0, 1fr); }
  .config__panel { border-left: none; border-top: 1px solid var(--line-3); padding: 24px 22px; }

  .tiers { grid-template-columns: 1fr; }
  .facts, .facts--plain { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .grid--3, .grid--4, .product, .related { grid-template-columns: 1fr; }
  .product { gap: 28px; }
  .related { grid-template-columns: repeat(2, 1fr); }

  .custom { padding: 30px 22px 32px; }
  .steps { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: 1fr; gap: 34px; }
  .footer__legal { flex-direction: column; align-items: flex-start; }

  .footer__col { border-top: 1px solid var(--line); }
  .footer__col > summary { min-height: 44px; cursor: pointer; }
  .footer__col > div { padding-bottom: 14px; }
  .footer__chev {
    display: block;
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--ink-4);
    border-bottom: 1.5px solid var(--ink-4);
    transform: rotate(45deg);
    transition: transform 180ms ease;
  }
  .footer__col[open] > summary .footer__chev { transform: rotate(-135deg); }
}

@media (max-width: 520px) {
  /* A phone cannot spare a column for the price: it squeezed names and colour
     buttons onto two lines each. The price drops under the name instead, and
     the colour buttons grow to a size a thumb can hit reliably. */
  .addon {
    grid-template-columns: auto 46px minmax(0, 1fr);
    grid-template-areas: "box shot body" "box shot price";
    column-gap: 12px;
    row-gap: 6px;
    padding: 12px 14px;
  }
  .addon__box   { grid-area: box; }
  .addon__shot  { grid-area: shot; width: 46px; height: 46px; }
  .addon__body  { grid-area: body; }
  .addon__price { grid-area: price; font-size: 13px; }

  /* A plan's row carries no photograph and no colour buttons, so it still
     fits on one line at this width. Without this it inherits the two-row
     layout above and reserves a 46px column for a picture that is not
     there. */
  .addons--plans .addon {
    grid-template-areas: none;
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 0;
    padding: 8px 14px;
  }
  .addons--plans .addon__box,
  .addons--plans .addon__body,
  .addons--plans .addon__price { grid-area: auto; }
  .optval--sm   { padding: 8px 12px 8px 9px; }
  /* Room for the price beside the button on a 360px phone: a tighter gap, a
     slightly smaller price and less side padding on the button. On anything
     narrower the button drops below instead of being cut off. */
  .config__buyrow { gap: 12px; }
  .config__price { font-size: 28px; white-space: nowrap; }
  .config__buyrow [data-cfg="buy"] { padding: 0 18px; flex: none; }
  .nav__logo { font-size: 14px; }
  .nav__actions .btn { padding: 0 11px; font-size: 12px; }
  .related { grid-template-columns: 1fr; }

  /* one column of stacked accordions, and every link a 44px tap target */
  .footer__links { grid-template-columns: 1fr; gap: 0; }
  .footer__col a { min-height: 44px; display: flex; align-items: center; }
}

/* ------------------------------------------------------------ contact --- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 54px;
  align-items: start;
}
.contact__intro p {
  margin: 0;
  font: 400 16px/1.65 var(--ui);
  color: var(--ink-2);
}
.contact__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.contact__meta dt {
  font: 600 11px var(--ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 2px;
}
.contact__meta dd { margin: 0; font: 500 14px var(--ui); color: var(--ink); }
.contact__meta a { color: var(--blue); }
.contact__aside {
  margin-top: 26px !important;
  font-size: 14px !important;
  color: var(--ink-3) !important;
}
.contact__aside a { color: var(--blue); }

.contact__form {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 30px 30px 32px;
  box-shadow: 0 10px 30px rgba(11, 27, 63, 0.04);
}
.contact__form select {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  font: 500 14px var(--ui);
  color: var(--ink);
}
.formgrid__wide { grid-column: 1 / -1; }
/* honeypot — a field only a bot fills in */
.contact__hp { position: absolute; left: -9999px; }

@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; gap: 30px; }
  .contact__form { padding: 22px 20px 24px; }
}
.contact__meta a { color: var(--blue); }
.contact__note {
  display: block;
  margin-top: 4px;
  font: 400 12.5px var(--ui);
  color: var(--ink-3);
}

/* Designer credit — last line in the footer, left, deliberately quiet. */
.footer__credit {
  padding: 0 0 22px;
  font: 400 11px var(--ui);
  letter-spacing: 0.01em;
  color: var(--ink-4);
}