/* waqas.co — styles (SPEC 2.0) */

/* ---------- Fonts (TeX Gyre, GUST Font Licence) ---------- */
@font-face { font-family: "Adventor"; src: url("../assets/fonts/adventor-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Adventor"; src: url("../assets/fonts/adventor-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pagella"; src: url("../assets/fonts/pagella-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Heros"; src: url("../assets/fonts/heros-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Heros"; src: url("../assets/fonts/heros-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Heros"; src: url("../assets/fonts/heros-bold.woff") format("woff"); font-weight: 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --bg: #ECE9E6;
  --card: #FFFFFF;
  --ink: #111111;
  --ink-2: #5E5B57;
  --ink-body: #33312E;
  --line: #D6D1CB;
  --frame: #D6D1CB;
  --dash: #B5AFA7;
  --ultra: #1F3BFF;
  --butter: #FFC83D;
  --go: #7CFF6B;
  --dark: #0E0E0E;
  --dark-2: #1C1C1C;
  --paper-muted: rgba(255, 255, 255, 0.72);
  --control: #8A857E;
  --control-on-dark: rgba(255, 255, 255, 0.5);
  --error: #B42318;

  --display: "Adventor", "Avant Garde", "Century Gothic", sans-serif;
  --serif: "Pagella", "Palatino Linotype", Palatino, "Book Antiqua", serif;
  --body: "Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* The vw caps never bite at normal text size (clamp is always smaller); with
     enlarged text they keep display headings inside narrow screens. */
  --fs-h1: min(clamp(3rem, 5.9vw, 5.25rem), 15vw);
  --fs-h2: min(clamp(2.5rem, 4.6vw, 4rem), 12.5vw);
  --pad: 64px;
  --gap-section: 128px;
  --radius-card: 24px;
  --shadow-soft: 0 1px 0 rgba(0, 0, 0, 0.04), 0 12px 32px -20px rgba(40, 30, 20, 0.25);
  --shadow-art: 0 30px 60px -30px rgba(20, 20, 70, 0.5);
  --shadow-dark: 0 30px 60px -28px rgba(0, 0, 0, 0.6);
  color-scheme: light;
}
@media (max-width: 1099px) { :root { --pad: 40px; --gap-section: 96px; } }
@media (max-width: 759px) { :root { --pad: 20px; --gap-section: 72px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Long words break rather than overflow when text is enlarged (WCAG 1.4.4). */
  overflow-wrap: break-word;
}
/* Grid and flex children may shrink below their content width, so enlarged text wraps inside the viewport. */
.hero > *, .plan-dev > *, .estimator__form > *, .estimator__controls > *, .plan__top > *, .apply > *, .about > *, .plans > *, .faq > *, .included > *, .fit > *, .estimator > *, .form > *, .site-footer__top > * { min-width: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ultra); outline-offset: 3px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ---------- Framed canvas ---------- */
.frame {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--pad);
  border-left: 1px solid var(--frame);
  border-right: 1px solid var(--frame);
  min-height: 100vh;
}

/* ---------- Type ---------- */
.accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -0.02em;
}
.h2 {
  font: 400 var(--fs-h2)/1.02 var(--display);
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.label {
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.label--on-dark { color: var(--paper-muted); }
.lead { font-size: 1.1875rem; line-height: 1.5; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: 700 0.9375rem/1 var(--body);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
/* Glossy buttons: a crisp outer edge, a fine inner ring, a lit top edge and a
   shaded base, lifted by a soft shadow. Hover lifts 1px; press sinks 1px. */
.btn--dark {
  border-color: #000;
  color: #fff;
  background-color: #111;
  background-image: linear-gradient(180deg, #333 0%, #161616 48%, #060606 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.55),
    0 1px 1px rgba(0, 0, 0, 0.3),
    0 8px 18px -8px rgba(0, 0, 0, 0.55);
}
.btn--dark:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -2px 0 rgba(0, 0, 0, 0.55),
    0 2px 2px rgba(0, 0, 0, 0.28),
    0 14px 24px -10px rgba(0, 0, 0, 0.6);
}
.btn--light {
  border-color: #CFC9C2;
  color: var(--ink);
  background-color: #fff;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 45%, #EFECE8 100%);
  box-shadow:
    inset 0 0 0 1px #fff,
    inset 0 -2px 0 rgba(0, 0, 0, 0.06),
    0 1px 1px rgba(0, 0, 0, 0.08),
    0 8px 18px -10px rgba(0, 0, 0, 0.35);
}
.btn--light:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px #fff,
    inset 0 -2px 0 rgba(0, 0, 0, 0.06),
    0 2px 2px rgba(0, 0, 0, 0.08),
    0 14px 24px -12px rgba(0, 0, 0, 0.4);
}
.btn--dark:active, .btn--light:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 2px 3px rgba(0, 0, 0, 0.3);
}
.btn--outline {
  border: 1.5px solid var(--ink);
  background: transparent;
  box-shadow: none;
}
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--lg { min-height: 56px; padding: 0 24px; border-radius: 14px; font-size: 1rem; }
.arrow { display: inline-block; transition: transform 160ms ease; }
.btn:hover .arrow, .btn:focus-visible .arrow { transform: translateX(3px); }
.final :focus-visible, .plan :focus-visible, .estimator :focus-visible, .art-card :focus-visible { outline-color: #fff; }

/* Tags and status */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font: 700 0.8125rem/1 var(--body);
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.status__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--go);
  box-shadow: 0 0 0 3px rgba(124, 255, 107, 0.25);
}

/* Brand */
/* Logo lockup (Mo, 30 Sep 2026): a large signature with the name tucked in under its
   rising stroke, sitting on the signature's baseline. No divider. */
.brand {
  display: inline-flex;
  align-items: flex-end;
  font: 400 min(1.25rem, 6.5vw)/1 var(--display); /* the vw cap only applies to enlarged text on small phones */
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}
/* Signature logo (tools/logo.py): fountain-pen MW, sized in px like the other decorative objects. */
.sig { width: 128px; height: 74px; flex: none; overflow: visible; margin-right: -24px; }
.brand__name { position: relative; top: -9px; }
/* Header only: the signature writes itself on load, then the data point lands. Approved by Mo, 30 Sep 2026. */
@media (prefers-reduced-motion: no-preference) {
  .sig--draw .sig__pen { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sig-write 1.6s cubic-bezier(0.55, 0.08, 0.35, 1) 0.2s forwards; }
  .sig--draw .sig__point { opacity: 0; transform-box: fill-box; transform-origin: center; animation: sig-point 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) 1.7s forwards; }
}
@keyframes sig-write { to { stroke-dashoffset: 0; } }
@keyframes sig-point { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
.brand__mark {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--ultra);
  transform: rotate(12deg);
}

/* Monogram */
.monogram {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFE7C2;
  color: #111;
  font: 700 15px/1 var(--display); /* decorative: stays inside its fixed circle */
  letter-spacing: -0.02em;
}
.monogram--sm { width: 26px; height: 26px; font-size: 10px; }
/* The signature icon in place of the old "MW" initials (Mo, 30 Sep 2026). */
.monogram__sig { width: 72%; height: auto; overflow: visible; }
.monogram--lg { width: 88px; height: 88px; font-size: 28px; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.45); }

/* ---------- Header ----------
   The header sits before <main> (banner landmark, skip link bypasses it).
   On desktop it occupies the hero's left column and the hero card is
   pulled up beside it, so the card's top aligns with the wordmark. */
/* One line at normal size; wraps only when text is enlarged. */
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 42px; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 10px; }
.site-nav .btn { min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 0.9375rem; }
@media (min-width: 1100px) {
  .site-header { height: 128px; width: calc((100% - 40px) * 0.575); }
  /* Sub-pages have no hero card beside the header, so the nav reaches the right edge. */
  .site-header--page { width: auto; }
}
@media (max-width: 759px) {
  .site-nav__how { display: none; }
  .site-header { padding-top: 20px; }
  .site-header .brand { font-size: 1rem; }
  .site-header .sig { width: 96px; height: 56px; margin-right: -18px; }
  .site-header .brand__name { top: -7px; }
  .site-nav ul { gap: 8px; }
  .site-nav .btn { min-height: 40px; padding: 0 13px; font-size: 0.875rem; }
}
/* Small phones: tighten the logo and buttons so the header stays on one line. */
@media (max-width: 400px) {
  .site-header .brand { font-size: 0.875rem; }
  .site-header .sig { width: 70px; height: 41px; margin-right: -13px; }
  .site-header .brand__name { top: -5px; }
  .site-nav ul { gap: 6px; }
  .site-nav .btn { padding: 0 11px; font-size: 0.8125rem; }
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  padding-bottom: var(--gap-section);
}
.hero__text { display: flex; flex-direction: column; }
.hero__title {
  margin-top: 104px;
  font: 400 var(--fs-h1)/0.98 var(--display);
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.hero__title .accent { font-size: 1.08em; letter-spacing: -0.03em; }
.hero__sub {
  margin-top: 28px;
  max-width: 44ch;
  text-wrap: pretty;
  color: var(--ink-2);
  font-size: 1.125rem;
  line-height: 1.55;
}
.hero__actions {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}
.hero__card { margin-top: -80px; }
/* `.hero .hero__card` (not `.hero__card`) so it beats `.art-card { min-height }` later in the file. */
@media (min-width: 1100px) { .hero .hero__card { min-height: 700px; } }

/* 900–1099: keep two columns so laptop widths don't read as a phone layout (logged). */
@media (max-width: 1099px) {
  .hero { grid-template-columns: 1fr 0.82fr; gap: 32px; }
  .hero__title { margin-top: 64px; }
  .hero__card { margin-top: 64px; min-height: 600px; }
}
@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; gap: 56px; }
  .hero__title { margin-top: 64px; }
  .hero__card { margin-top: 0; }
}
@media (max-width: 759px) {
  .hero__title { margin-top: 48px; }
  .hero { gap: 48px; }
}

/* ---------- Art card ---------- */
.art-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 640px;
  padding: 28px;
  overflow: hidden;
  border-radius: var(--radius-card);
  color: #fff;
  background: #0B1A9E url("../assets/img/art-hero.jpg") center / cover no-repeat;
  box-shadow: var(--shadow-art);
}
.art-card__foot {
  align-self: stretch;
  margin: auto -28px -28px;
  padding: 120px 28px 28px;
  /* No colour of its own: the card's background-color is the dark fallback
     under the scrim (SPEC §10), and the scrim is a background-image. */
}
.scrim { background-image: linear-gradient(180deg, rgba(20, 16, 90, 0) 0%, rgba(20, 16, 90, 0.5) 45%, rgba(20, 16, 90, 0.72) 100%); }
.art-card__title {
  font: 400 clamp(2.25rem, 3.3vw, 2.75rem)/1 var(--display);
  letter-spacing: -0.04em;
}
.art-card__text { margin-top: 12px; max-width: 32ch; text-wrap: pretty; font-size: 0.9375rem; line-height: 1.5; }
.glass {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  text-decoration: none;
}
.glass:hover { background-color: rgba(255, 255, 255, 0.22); }
.glass__text b { display: block; font-size: 0.9375rem; line-height: 1.25; }
.glass__text small { display: block; margin-top: 2px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.85); }
/* Outline circle with a drawn arrow (Mo chose option 5); the arrow nudges right on hover. */
.glass__go {
  display: grid;
  place-items: center;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  color: #fff;
  flex: none;
  transition: transform 160ms ease;
}
.glass:hover .glass__go, .glass:focus-visible .glass__go { transform: translateX(3px); }

/* ---------- Report card object ---------- */
.report {
  width: 264px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: #FFFCF6;
  color: #111;
  box-shadow: 0 30px 50px -18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  font-size: 13px;
}
.report--hero { position: absolute; top: 104px; right: 28px; transform: rotate(6deg); }
.report__head { display: flex; justify-content: space-between; align-items: center; }
.report__head span { font: 500 10px/1 var(--mono); letter-spacing: 0.14em; color: #6F6B65; }
.report__head .brand__mark { display: block; width: 9px; height: 9px; }
.report__rows { display: grid; grid-template-columns: 1fr auto; margin-top: 10px; }
.report__rows dt, .report__rows dd { padding: 7px 0; border-bottom: 1px solid #EEE8DE; }
.report__rows dt { color: #55524D; }
.report__rows dd { font-weight: 700; text-align: right; }
.report__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed #CFC9BF;
}
.report__rows dt:last-of-type, .report__rows dd:last-of-type { border-bottom: 0; }
.report__total span { font-weight: 700; font-size: 12px; }
.report__total strong { font: 400 38px/1 var(--display); letter-spacing: -0.04em; color: var(--ultra); }
.report__bars { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-top: 12px; }
.report__bars b { flex: 1; border-radius: 3px; background: #E6E1D8; }
.report__bars b:last-child { background: var(--ultra); }
@media (min-width: 760px) and (max-width: 1099px) {
  .report--hero { top: 92px; }
  .hero__card .art-card__foot { padding-top: 160px; }
}
@media (max-width: 759px) {
  /* The report card joins the flow on phones so it can never cover the title. */
  .art-card { min-height: 0; }
  .report--hero { position: relative; top: auto; right: auto; width: min(236px, 86%); margin: 28px 8px 0 auto; }
  .hero__card .art-card__foot { padding-top: 56px; }
}
@media (max-width: 439px) {
  .glass .monogram { display: none; }
  .glass { gap: 10px; padding: 12px 12px 12px 16px; }
}
@media (max-width: 379px) {
  .hero__card { padding: 20px; }
  .hero__card .art-card__foot { margin: auto -20px -20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; }
  .glass__text b { font-size: 0.875rem; }
  .glass__text small { font-size: 0.75rem; }
  .glass__go { width: 36px; height: 36px; }
}

/* ---------- Sections ---------- */
.section { padding-bottom: var(--gap-section); }
.intro { text-align: center; }
.intro .h2 { max-width: 17ch; margin: 14px auto 0; }
.intro__text { max-width: 52ch; margin: 18px auto 0; color: var(--ink-2); }
.sec__body { margin-top: 48px; }
@media (max-width: 759px) { .sec__body { margin-top: 32px; } }

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 480px;
  padding: 24px;
  overflow: hidden;
  border-radius: 22px;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-soft);
}
.step__num { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.14em; }
.step__obj { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 0; }
.step__foot { margin: 0 -24px -24px; padding: 32px 24px 24px; }
.step__title { font: 400 1.75rem/1.05 var(--display); letter-spacing: -0.03em; }
.step__foot p { margin-top: 10px; font-size: 0.9375rem; line-height: 1.5; }
.step--apply { background-color: #FF9A55; background-image: url("../assets/img/art-apply.jpg"); color: var(--ink); }
.step--talk { background-color: #22238A; background-image: url("../assets/img/art-talk.jpg"); color: #fff; }
.step--build { background-color: #0B1A9E; background-image: url("../assets/img/art-build.jpg"); color: #fff; }
.step--numbers { background-color: #8A2A0C; background-image: url("../assets/img/art-numbers.jpg"); color: #fff; }
.step--talk .step__num, .step--build .step__num, .step--numbers .step__num { color: #111; }
.step--talk .step__foot.scrim, .step--build .step__foot.scrim { background-image: linear-gradient(180deg, rgba(8, 18, 110, 0) 0%, rgba(8, 18, 110, 0.35) 60%, rgba(8, 18, 110, 0.6) 100%); }
.step--numbers .step__foot.scrim { background-image: linear-gradient(180deg, rgba(120, 30, 8, 0) 0%, rgba(120, 30, 8, 0.3) 60%, rgba(120, 30, 8, 0.55) 100%); }

/* Step objects */
.mini-form {
  width: 100%;
  max-width: 240px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  color: #57534D;
  font-size: 12px;
  transform: rotate(-3deg);
  box-shadow: 0 20px 40px -18px rgba(90, 40, 0, 0.5);
}
.mini-form__f { display: flex; align-items: center; height: 30px; margin-bottom: 7px; padding: 0 10px; border: 1px solid #E3DED6; border-radius: 8px; }
.mini-form__send { display: grid; place-items: center; height: 32px; border-radius: 9px; background: #111; color: #fff; font-weight: 700; }
.mail {
  width: 100%;
  max-width: 240px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  color: #111;
  font-size: 12px;
  line-height: 1.45;
  transform: rotate(2deg);
  box-shadow: 0 20px 40px -18px rgba(20, 20, 80, 0.55);
}
.mail__from { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.mail__subject { display: block; margin-top: 10px; font-weight: 700; }
.mail__body { display: block; margin-top: 4px; color: #55524D; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font-size: 13px;
}
.chip--solid { background: #111; border-color: #111; color: #fff; }
@media (min-width: 1100px) {
  .chips { gap: 6px; }
  .chip { height: 28px; padding: 0 10px; font-size: 12px; }
}
.stat {
  width: 100%;
  max-width: 230px;
  padding: 16px;
  border-radius: 16px;
  background: #111;
  color: #fff;
  font-size: 14px;
  transform: rotate(3deg);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.5);
}
.stat small { display: block; font: 500 10px/1 var(--mono); letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.7); }
.stat small + small { margin-top: 6px; color: #fff; }
.stat strong { display: block; margin-top: 10px; font: 400 44px/1 var(--display); letter-spacing: -0.04em; }
.stat__delta { display: inline-block; margin-top: 10px; padding: 4px 9px; border-radius: 999px; background: #B9FF9E; color: #111; font-size: 12px; font-weight: 700; }

@media (min-width: 760px) {
  /* Object stage with a common minimum height, so titles share one line across each row. */
  .step__obj { flex: none; min-height: 240px; padding: 0; }
  .step__foot { flex: 1; }
}
@media (max-width: 1099px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 440px; }
}

/* ---------- About ---------- */
/* Heading, portrait, text: beside each other on wider screens, heading first on phones. */
.about {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  grid-template-areas: "portrait title" "portrait text";
  grid-template-rows: auto 1fr;
  column-gap: 64px;
  align-items: start;
}
.about__title { grid-area: title; margin-top: 8px; }
.about__text { grid-area: text; }
/* Portrait (assets/img/mo.jpg). Stays in view while the longer text scrolls, like the FAQ card. */
.about__portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: #2A2A2A;
  box-shadow: var(--shadow-art);
  position: sticky;
  top: 32px;
  /* Kept well shorter than the text so it has room to follow the scroll. */
  max-width: 360px;
  justify-self: end;
  grid-area: portrait;
}
.prose { max-width: 62ch; }
.prose p + p { margin-top: 18px; }
.prose .lead { color: var(--ink); }
.prose p:not(.lead) { color: var(--ink-body); }
@media (max-width: 1099px) { .about { grid-template-columns: 0.72fr 1.28fr; column-gap: 32px; } }
@media (max-width: 759px) {
  .about { grid-template-columns: 1fr; grid-template-areas: "title" "portrait" "text"; grid-template-rows: auto; }
  .about__title { margin-top: 0; }
  .about__portrait { max-width: none; position: static; margin-top: 32px; } /* full width, like the other cards */
}

/* ---------- Benefits ---------- */
.benefits {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.benefit__tile {
  aspect-ratio: 1;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-soft);
}
.benefit__tile--1 { background-color: #FF8A3D; background-image: url("../assets/img/art-benefit-1.jpg"); }
.benefit__tile--2 { background-color: #1F3BFF; background-image: url("../assets/img/art-benefit-2.jpg"); }
.benefit__tile--3 { background-color: #FF7BB8; background-image: url("../assets/img/art-benefit-3.jpg"); }
.benefit__tile--4 { background-color: #7A2BFF; background-image: url("../assets/img/art-benefit-4.jpg"); }
.benefit__tile--5 { background-color: #1F3BFF; background-image: url("../assets/img/art-benefit-5.jpg"); }
.benefit__title { margin-top: 18px; font: 400 1.375rem/1.15 var(--display); letter-spacing: -0.025em; }
.benefit p { margin-top: 6px; max-width: 30ch; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45; }
@media (max-width: 1099px) {
  .benefits { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 20px; }
  .benefit { grid-column: span 2; }
  .benefit:nth-child(4) { grid-column: 2 / span 2; }
}
/* Phones: one row the visitor swipes through, bleeding to the frame edge. */
@media (max-width: 759px) {
  ul.benefits {
    display: flex;
    gap: 16px;
    margin-inline: calc(var(--pad) * -1);
    padding: 0 var(--pad) 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    /* Thin native bar: overlay scrollbars (iOS, macOS) show it only while swiping. */
    scrollbar-width: thin;
    scrollbar-color: var(--dash) transparent;
  }
  .benefit { flex: 0 0 clamp(150px, 42%, 240px); scroll-snap-align: start; }
  .benefits:focus-visible { outline-offset: -3px; }
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.card__title { font: 400 2rem/1.05 var(--display); letter-spacing: -0.03em; }
.disc {
  position: absolute;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* What's included */
.included { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.included__card { padding: 36px; min-height: 420px; }
/* overflow-wrap normal: may run into the disc space rather than split a word. The font cap only
   applies with enlarged text (normal sizes are below it), so "Development" never clips. */
.included__card .card__title { position: relative; padding-right: 96px; overflow-wrap: normal; font-size: min(2rem, 8.2vw); }
.included__card .disc { width: 150px; height: 150px; top: -50px; right: -50px; }
.disc--1 { background-image: url("../assets/img/art-tile-1.jpg"); }
.disc--2 { background-image: url("../assets/img/art-tile-2.jpg"); }
.pills-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; position: relative; }
.pills-list li {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1.5px dashed var(--dash);
  border-radius: 999px;
  font-size: 0.9375rem;
  line-height: 1.3;
}
@media (max-width: 899px) { .included { grid-template-columns: 1fr; } .included__card { min-height: 0; } }
@media (max-width: 759px) {
  .pills-list li { border-radius: 16px; padding: 10px 16px; }
  .included__card { padding: 28px 24px; }
}

/* ---------- Pricing ---------- */
.plans {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 20px;
  align-items: stretch;
}
.join {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  min-height: 560px;
}
.join__text-wrap { margin-top: auto; position: relative; }
.report__extra { display: none; }
.report--join { position: absolute; top: -26px; right: 28px; width: 320px; padding-top: 44px; transform: rotate(-6deg); font-size: 14px; }
.report--join .report__total strong { font-size: 44px; }
@media (min-width: 1100px) {
  .report--join .report__extra { display: block; }
  .report--join .report__bars.report__extra { display: flex; }
  .report--join { top: 40px; right: 24px; left: 24px; width: auto; padding: 24px 26px 20px; transform: rotate(-5deg); font-size: 16px; }
  .report--join .report__rows dt, .report--join .report__rows dd { padding: 10px 0; }
  .report--join .report__total strong { font-size: 56px; }
}
.join__title { margin-top: 18px; font: 400 2.75rem/1 var(--display); letter-spacing: -0.04em; }
.join__text { margin-top: 12px; max-width: 32ch; color: var(--ink-2); }

.plan {
  position: relative;
  overflow: hidden;
  padding: 36px;
  border-radius: var(--radius-card);
  background: var(--dark);
  color: #fff;
  box-shadow: var(--shadow-dark);
}
.plan__top {
  display: flex;
  flex-wrap: wrap; /* the tag drops below the name only when enlarged text needs the room */
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1.5px dashed rgba(255, 255, 255, 0.22);
}
.plan__name { font: 400 1.875rem/1 var(--display); letter-spacing: -0.03em; }
.plan__tag {
  flex: none;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--paper-muted);
}
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 26px; }
.plan__amount { font: 400 clamp(3.5rem, 6vw, 4.75rem)/1 var(--display); letter-spacing: -0.035em; }
.plan__per { color: var(--paper-muted); font-size: 1rem; }
/* Give the £ a hair of air so it never touches the first digit. */
.plan__amount::first-letter, .estimator__figure::first-letter { letter-spacing: 0.03em; }
.plan__scope { margin-top: 10px; color: var(--paper-muted); font-size: 0.9375rem; }
.plan__incl {
  position: relative;
  margin-top: 26px;
  padding: 24px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: var(--dark-2);
}
.plan__incl-tag {
  position: absolute;
  top: -10px;
  left: 22px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: #2A2A2A;
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.78);
}
.plan__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; font-size: 0.9375rem; line-height: 1.4; }
.plan__list li { display: flex; gap: 10px; }
.plan__list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--butter); }
.plan__fine li:first-child { color: #fff; }
.plan__fine--light li:first-child { color: var(--ink-2); }
.plan__fine { display: grid; gap: 6px; margin-top: 22px; color: var(--paper-muted); font-size: 0.8125rem; line-height: 1.5; position: relative; z-index: 1; max-width: 60ch; }
.plan__cta { margin-top: 26px; position: relative; z-index: 1; }
.disc--plan { width: 220px; height: 220px; right: -70px; bottom: -80px; background-image: url("../assets/img/art-tile-3.jpg"); }

.plan-dev {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 0.8fr 1.1fr 300px;
  grid-template-areas: "head body build";
  align-items: center;
  gap: 20px 48px;
  padding: 36px;
}
.plan-dev__head { grid-area: head; align-self: start; }
.plan-dev__body { grid-area: body; }

/* Build object (Development card): an app taking shape in a browser window. Decorative and
   px-sized like the report card; js/build.js plays it once when it scrolls into view. Approved by Mo, 30 Sep 2026. */
.build { grid-area: build; justify-self: end; width: 300px; padding: 20px 20px 18px; border-radius: 18px; background: #FFFCF6; color: #111; font-size: 13px; transform: rotate(3deg);
  box-shadow: 0 30px 50px -18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.build__head { display: flex; justify-content: space-between; align-items: center; }
.build__head span { font: 500 10px/1 var(--mono); letter-spacing: 0.14em; color: #6F6B65; }
.build__head .brand__mark { display: block; width: 9px; height: 9px; }
.build__win { margin-top: 12px; overflow: hidden; border: 1px solid #E6E1D8; border-radius: 12px; background: #fff; }
.build__chrome { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid #EEE8DE; background: #F6F3EE; }
.build__chrome i { width: 7px; height: 7px; border-radius: 50%; background: #D6D1CB; }
.build__chrome span { margin-left: 8px; font: 500 9px/1 var(--mono); letter-spacing: 0.04em; color: #6F6B65; }
.build__app { display: grid; grid-template-columns: 54px 1fr; min-height: 220px; }
.build__side { display: grid; align-content: start; gap: 7px; padding: 10px 8px; border-right: 1px solid #EEE8DE; }
.build__side i { display: block; height: 6px; border-radius: 3px; background: #E6E1D8; }
.build__side i:first-child { width: 70%; background: var(--ultra); }
.build__main { display: grid; align-content: start; gap: 8px; padding: 10px; }
.build__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.build__kpis div { height: 34px; padding: 6px; border-radius: 7px; background: #F6F3EE; }
.build__kpis i { display: block; width: 60%; height: 5px; border-radius: 3px; background: #D6D1CB; }
.build__kpis b { display: block; width: 80%; height: 8px; margin-top: 6px; border-radius: 3px; background: #111; }
.build__chart { display: flex; align-items: flex-end; gap: 6px; height: 78px; padding: 8px; border-radius: 7px; background: #F6F3EE; }
.build__chart i { flex: 1; border-radius: 3px 3px 0 0; background: #CFC9BF; transform-origin: bottom; }
.build__chart i:last-child { background: var(--ultra); }
.build__lines { display: grid; gap: 5px; }
.build__lines i { display: block; height: 6px; border-radius: 3px; background: #EEE8DE; }
.build__lines i:nth-child(2) { width: 85%; }
.build__lines i:nth-child(3) { width: 70%; }
.build__stage { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.build__stage span { font: 500 10px/1 var(--mono); letter-spacing: 0.1em; color: #6F6B65; white-space: nowrap; }
.build__progress { display: block; flex: 1; height: 6px; overflow: hidden; border-radius: 3px; background: #E6E1D8; }
.build__progress s { display: block; width: 72%; height: 100%; border-radius: 3px; background: var(--ultra); }
.build__foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 12px; border-top: 1px dashed #CFC9BF; }
.build__foot > span { font-weight: 700; font-size: 12px; }
.build__foot strong { font: 400 40px/1 var(--display); letter-spacing: -0.04em; color: var(--ultra); }
/* Start state is set by JS only, so no-JS and reduced motion show the finished app. */
.build.is-armed .build__part { opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s; }
.build.is-armed .build__chart i { transform: scaleY(0); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.build.is-armed .build__progress s { width: 0; transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.9s; }
.build.is-playing .build__part { opacity: 1; transform: none; }
.build.is-playing .build__side { transition-delay: 0.1s; }
.build.is-playing .build__kpis { transition-delay: 0.3s; }
.build.is-playing .build__chart { transition-delay: 0.5s; }
.build.is-playing .build__lines { transition-delay: 1.5s; }
.build.is-playing .build__chart i { transform: none; }
.build.is-playing .build__chart i:nth-child(1) { transition-delay: 0.9s; }
.build.is-playing .build__chart i:nth-child(2) { transition-delay: 1s; }
.build.is-playing .build__chart i:nth-child(3) { transition-delay: 1.1s; }
.build.is-playing .build__chart i:nth-child(4) { transition-delay: 1.2s; }
.build.is-playing .build__chart i:nth-child(5) { transition-delay: 1.3s; }
.build.is-playing .build__chart i:nth-child(6) { transition-delay: 1.4s; }
.build.is-playing .build__progress s { width: 72%; }
@media (max-width: 1099px) {
  .plan-dev { grid-template-columns: 0.85fr 1.15fr; grid-template-areas: "head body" "build body"; }
  .build { justify-self: start; margin: 8px 0 12px 8px; }
}
.plan-dev .plan__per, .plan-dev .plan__scope { color: var(--ink-2); }
.plan-dev__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.plan-dev .plan__tag { border-color: var(--line); color: var(--ink-2); }
.plan-dev__lead { margin-top: 18px; max-width: 34ch; color: var(--ink-body); line-height: 1.5; }
.plan-dev__body { padding-top: 6px; }
.plan-dev__body .plan__cta { margin-top: 24px; }
.plan-dev__list { display: grid; gap: 12px; }
.plan-dev__list li { display: flex; gap: 12px; font-size: 1rem; }
.plan-dev__list li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--ultra); }
.plan__fine--light { color: var(--ink-2); padding-top: 18px; border-top: 1.5px dashed var(--line); }

.infoboxes { grid-column: 1 / -1; margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 759px) { .infoboxes { grid-template-columns: 1fr; } }
.infobox {
  padding: 24px 26px;
  border: 1.5px dashed var(--dash);
  border-radius: 20px;
}
.infobox__title { font: 400 1.375rem/1.1 var(--display); letter-spacing: -0.02em; }
.infobox p { margin-top: 8px; color: var(--ink-2); font-size: 0.9375rem; }

@media (max-width: 1099px) {
  .plans { grid-template-columns: 1fr; }
  .join { min-height: 440px; }
}
/* 760–1099: text left, report right, so the price isn't pushed below the fold. */
@media (min-width: 760px) and (max-width: 1099px) {
  .join { min-height: 300px; justify-content: center; padding-right: calc(320px + 48px); }
  .join__text-wrap { margin-top: 0; }
  .report--join { top: 50%; right: 40px; width: 300px; transform: translateY(-50%) rotate(-5deg); padding-top: 18px; }
}
@media (max-width: 759px) {
  .plan-dev { grid-template-columns: 1fr; grid-template-areas: "head" "build" "body"; }
  .build { width: min(300px, 100%); margin: 12px 0 16px 4px; }
  .plan, .plan-dev, .join { padding: 28px 24px; }
  .plan__list { grid-template-columns: 1fr; }
  .plan__top { flex-wrap: wrap; }
  .join { min-height: 480px; }
  .report--join { width: 270px; top: -24px; right: 16px; }
  .disc--plan { display: none; }
}

/* ---------- Estimator ---------- */
.estimator {
  grid-column: 1 / -1;
  padding: 36px;
  border-radius: var(--radius-card);
  background: var(--dark-2);
  color: #fff;
  box-shadow: var(--shadow-dark);
}
.estimator__title { font: 400 1.875rem/1.05 var(--display); letter-spacing: -0.03em; margin-bottom: 32px; text-wrap: balance; }
.estimator__fallback { max-width: 68ch; color: var(--paper-muted); }
.no-js .estimator__form { display: none; }
.estimator__form { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px 56px; }
.estimator__controls { display: grid; gap: 16px; align-content: start; }
.estimator__result { padding-left: 48px; border-left: 1.5px dashed rgba(255, 255, 255, 0.22); }
.estimator__label { display: block; font-weight: 700; }
.estimator__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.estimator__group legend { padding: 0; margin-bottom: 12px; }
/* In normal flow, so enlarged text pushes the next group down instead of overlapping it.
   Hidden with visibility (not display) so switching states doesn't move the controls. */
.estimator__help { margin-top: 8px; color: #fff; line-height: 1.4; font-size: 0.9375rem; }
.estimator__help[hidden] { display: block !important; visibility: hidden; }
.field-range:has(.range:disabled) .field-range__top { opacity: 0.4; }
.estimator__result-label { color: var(--paper-muted); }
.estimator__figure { margin-top: 10px; font: 400 clamp(3.5rem, 6vw, 4.75rem)/1 var(--display); letter-spacing: -0.035em; }
.estimator__prompt { margin-top: 16px; font-size: 1.1875rem; line-height: 1.45; }
.estimator__note { max-width: 60ch; margin-top: 18px; color: var(--paper-muted); font-size: 0.875rem; line-height: 1.5; }
.estimator__note + .estimator__note { margin-top: 8px; }
@media (max-width: 1099px) {
  .estimator__form { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .estimator__result { padding-left: 40px; }
}
@media (max-width: 759px) {
  .estimator { padding: 28px 24px; }
  .estimator__form { grid-template-columns: 1fr; }
  .estimator__result { padding-left: 0; padding-top: 32px; border-left: 0; border-top: 1.5px dashed rgba(255, 255, 255, 0.22); }
}

.field-range__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.field-range__value { font: 400 1.5rem/1 var(--display); letter-spacing: -0.02em; }
.range-wrap { --p: 0; position: relative; }
.range-wrap::before, .range-wrap__fill {
  content: "";
  position: absolute;
  top: 12px; /* centre of the 28px range input, whatever sits below it */
  left: 0;
  height: 4px;
  border-radius: 2px;
  pointer-events: none;
}
.range-wrap::before { right: 0; background: var(--control-on-dark); }
.range-wrap__fill { width: calc(11px + (100% - 22px) * var(--p)); background: #fff; }
.range-wrap:has(.range:disabled)::before, .range-wrap:has(.range:disabled) .range-wrap__fill { opacity: 0.4; }
.range { position: relative; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.range:disabled { opacity: 0.4; cursor: not-allowed; }
.range::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.range::-moz-range-track { height: 4px; background: transparent; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -9px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { outline: 3px solid #fff; outline-offset: 3px; }
.range:focus-visible::-moz-range-thumb { outline: 3px solid #fff; outline-offset: 3px; }

.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--control-on-dark);
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.pill:hover { border-color: #fff; }
.pill__input, .switch__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pill:has(.pill__input:checked) { background: #fff; border-color: #fff; color: var(--ink); }
.pill:has(.pill__input:focus-visible) { outline: 3px solid #fff; outline-offset: 3px; }
.switch { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 16px; width: fit-content; max-width: 100%; min-height: 48px; margin-top: 12px; cursor: pointer; }
.switch__track { position: relative; flex: none; width: 52px; height: 30px; border: 1px solid var(--control-on-dark); border-radius: 999px; }
.switch__knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.switch__input:checked + .switch__track { background: var(--ultra); border-color: var(--ultra); }
.switch__input:checked + .switch__track .switch__knob { transform: translateX(22px); }
.switch__input:focus-visible + .switch__track { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 759px) {
  .pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pill { justify-content: center; padding: 0 8px; }
}
@media (max-width: 359px) { .pill { padding: 0 4px; font-size: 0.9375rem; } }

/* ---------- Who I work with ---------- */
.fit { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.fit__intro { margin-top: 20px; color: var(--ink-2); font-size: 1.1875rem; }
.fit__body.sec__body { margin-top: 0; }
.fit__list[role="list"] { padding: 8px 28px; }
.fit__list li {
  display: flex;
  gap: 16px;
  padding: 22px 0;
  font-size: 1.1875rem;
  line-height: 1.4;
}
.fit__list li + li { border-top: 1.5px dashed var(--line); }
.fit__list li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: var(--butter); box-shadow: 0 0 0 4px rgba(255, 200, 61, 0.25); }
.fit__close { margin-top: 20px; color: var(--ink-2); padding: 0 28px; }
@media (max-width: 1099px) {
  .fit { grid-template-columns: 1fr; gap: 0; }
  .fit__body.sec__body { margin-top: 48px; }
}
@media (max-width: 759px) {
  .fit__body.sec__body { margin-top: 32px; }
  .fit__list[role="list"] { padding: 4px 20px; }
  .fit__list li { font-size: 1.0625rem; padding: 18px 0; }
  .fit__close { padding: 0 20px; }
}

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
.faq__title { max-width: 11ch; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: 4px;
}
.faq__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 160ms ease;
}
.faq__item[open] .faq__icon::before { transform: translateY(3px) rotate(225deg); }
.faq__a { max-width: 60ch; padding: 0 32px 24px 0; color: var(--ink-body); }
.faq__aside { position: sticky; top: 32px; }
.faq__card { min-height: 520px; background-color: #3A1588; background-image: url("../assets/img/art-cta.jpg"); }
.faq__card .art-card__foot.scrim { background-image: linear-gradient(180deg, rgba(40, 10, 90, 0) 0%, rgba(40, 10, 90, 0.3) 60%, rgba(40, 10, 90, 0.55) 100%); }
.faq__card .btn { margin-top: 24px; }
.faq__card .art-card__title { text-wrap: balance; font-size: clamp(2rem, 2.8vw, 2.5rem); }
@media (max-width: 1099px) {
  .faq { grid-template-columns: 1fr; gap: 0; }
  /* The final band follows directly; one apply block is enough when stacked (logged). */
  .faq__aside { display: none; }
}
@media (max-width: 759px) { .faq__a { padding-right: 0; } }

/* ---------- Final band ---------- */
.final {
  position: relative;
  overflow: hidden;
  margin-bottom: 64px;
  padding: 72px 64px;
  border-radius: 28px;
  background: var(--dark);
  color: #fff;
  box-shadow: var(--shadow-dark);
}
.final__title {
  position: relative;
  --mw: 13ch;
  max-width: 13ch;
  margin-top: 16px;
  font: 400 clamp(2.75rem, 5.4vw, 4.75rem)/1 var(--display);
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.final__text { --mw: 46ch; position: relative; max-width: 46ch; margin-top: 24px; color: var(--paper-muted); font-size: 1.125rem; }
.final__cta { position: relative; margin-top: 32px; }
.disc--final { width: 360px; height: 360px; right: -80px; top: 50%; margin-top: -180px; background-color: #1F3BFF; background-image: url("../assets/img/art-final.jpg"); }
@media (max-width: 1099px) { .disc--final { width: 240px; height: 240px; right: -90px; margin-top: -120px; } }
/* Reserve the disc's column so enlarged text never runs over it. */
@media (min-width: 1100px) { .final__title, .final__text { max-width: min(var(--mw), calc(100% - 240px)); } }
@media (min-width: 760px) and (max-width: 1099px) { .final__title, .final__text { max-width: min(var(--mw), calc(100% - 110px)); } }
@media (max-width: 759px) {
  .final { padding: 48px 24px; margin-bottom: 40px; }
  .final__title { font-size: var(--fs-h2); }
  .disc--final { display: none; }
}

/* ---------- Footer ---------- */
.site-footer { padding: 16px 0 48px; }
.site-footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.site-footer__tagline { margin-top: 12px; color: var(--ink-2); }
.site-footer__links { display: flex; gap: 24px; }
.site-footer__links a { text-underline-offset: 4px; }
.site-footer__links a:hover { color: var(--ultra); }
.site-footer__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 0.875rem; }

/* ---------- Sub-pages (SPEC §6b) ---------- */
.page { padding: 72px 0 var(--gap-section); }

/* Apply */
.apply {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: start;
  padding: 72px 0 var(--gap-section);
}
.apply__intro { position: sticky; top: 32px; }
/* Only stick when the whole intro fits in the window. */
@media (max-height: 819px) { .apply__intro { position: static; } }
.apply__title { max-width: 9ch; }
.apply__lead { max-width: 34ch; margin-top: 24px; color: var(--ink-body); font-size: 1.1875rem; line-height: 1.5; }
.apply__time { margin-top: 20px; }
.apply__art {
  position: relative;
  height: 320px;
  margin-top: 40px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: #0B1A9E url("../assets/img/art-hero.jpg") center / cover no-repeat;
  box-shadow: var(--shadow-art);
}
.report--apply { position: absolute; top: 30px; left: 50%; margin-left: -132px; transform: rotate(-5deg); }
/* Project page: the Development build object on its own art panel, tilted the other way from the home page. */
.apply__art--build { height: 540px; background-image: url("../assets/img/art-build.jpg"); }
.apply__art--build .build { position: absolute; top: 36px; left: 50%; margin-left: -150px; transform: rotate(-4deg); }
.apply__card { padding: 40px; overflow: visible; }

@media (max-width: 1099px) { .apply { gap: 32px; } .apply__card { padding: 32px; } }
@media (max-width: 899px) {
  .apply { grid-template-columns: 1fr; padding-top: 56px; }
  .apply__intro { position: static; }
  .apply__title { max-width: none; }
  .apply__art { display: none; }
}
@media (max-width: 759px) { .apply { padding-top: 40px; } .apply__card { padding: 24px; } }

/* Form */
.form { display: grid; gap: 28px; }
.field { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { padding: 0; font-weight: 700; font-size: 1rem; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.field__hint { margin-left: 6px; font-weight: 400; color: var(--ink-2); }
.field--group { display: block; }
/* A floated legend behaves like an ordinary block, so spacing and wrapping are predictable. */
.field--group > legend { float: left; width: 100%; margin-bottom: 12px; }
.field--group > :not(legend) { clear: both; }
.field--group > .field__error { margin-bottom: 10px; }
.field__input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--control);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: 400 1.0625rem/1.4 var(--body);
}
.field__input--area { min-height: 112px; resize: vertical; }
/* Transparent outline keeps a visible ring in forced-colours mode, where box-shadow is dropped. */
.field__input:focus { outline: 3px solid transparent; border-color: var(--ultra); box-shadow: 0 0 0 3px var(--ultra); }
.has-error .field__input { border: 2px solid var(--error); padding: 11px 15px; }
.has-error .field__input:focus { border-color: var(--ultra); }
.field__error {
  padding-left: 12px;
  border-left: 3px solid var(--error);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-row--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-row--grid .choice span { width: 100%; }
@media (max-width: 479px) { .choice-row--grid { grid-template-columns: 1fr; } }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1.5px dashed var(--dash);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9375rem;
}
.choice input:hover + span { border-color: var(--ink-2); }
.choice input:checked + span { border: 1.5px solid var(--ink); background: var(--ink); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--ultra); outline-offset: 3px; }
.field--group.has-error .choice span { border-color: var(--error); }
.field--group.has-error .choice input:checked + span { border-color: var(--ink); }

.consent { position: relative; display: flex; gap: 14px; align-items: flex-start; cursor: pointer; line-height: 1.5; color: var(--ink-body); }
.consent input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 1.5px solid var(--control);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.consent input::after { content: ""; width: 10px; height: 6px; margin-top: -3px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); opacity: 0; }
.consent input:checked { border-color: var(--ink); background: var(--ink); }
.consent input:checked::after { opacity: 1; }
.consent input:focus-visible { outline: 3px solid var(--ultra); outline-offset: 3px; }
.consent a { text-underline-offset: 3px; }
.has-error .consent input { border: 2px solid var(--error); }
.field--consent { padding-top: 4px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.error-summary {
  padding: 20px 22px;
  border-left: 3px solid var(--error);
  border-radius: 4px 14px 14px 4px;
  background: var(--bg);
}
.error-summary:focus { outline: 3px solid var(--ultra); outline-offset: 3px; }
.error-summary__title { font: 700 1.0625rem/1.35 var(--body); }
.error-summary__list { margin-top: 10px; display: grid; gap: 6px; }
.error-summary__list a { color: var(--ink); text-underline-offset: 3px; }
.error-summary__list a:hover { color: var(--ultra); }

.form__failure {
  padding: 16px 18px;
  border-left: 3px solid var(--error);
  border-radius: 4px 14px 14px 4px;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}
.form__failure a { text-underline-offset: 3px; }
.form__submit { padding-top: 4px; }
.form__submit .btn[disabled] { opacity: 0.85; justify-content: center; cursor: progress; transform: none; }
@media (max-width: 479px) { .form__submit .btn { width: 100%; justify-content: center; } }

/* Confirmation: shown by JS, or by :target after a no-JS post */
.sent { display: none; }
.sent:target, .sent.is-shown { display: block; }
.sent:target ~ .form { display: none; }
.sent__title:focus { outline: none; }
.sent__title { font: 400 2rem/1.05 var(--display); letter-spacing: -0.03em; }
.sent__text { margin-top: 12px; color: var(--ink-body); }
.sent .btn { margin-top: 28px; }

/* Privacy */
.legal { max-width: 760px; margin: 0 auto; padding: 56px; }
.legal__status {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  min-height: 34px;
  margin-top: 20px;
  padding: 6px 14px;
  border: 1.5px dashed var(--dash);
  border-radius: 17px;
  line-height: 1.35;
  color: var(--ink-2);
  font-size: 0.875rem;
}
.legal__sec { margin-top: 40px; }
.legal__sec + .legal__sec { padding-top: 32px; border-top: 1px solid var(--line); margin-top: 32px; }
.legal__h { font: 400 1.75rem/1.1 var(--display); letter-spacing: -0.03em; }
.legal__sec p { margin-top: 12px; max-width: 62ch; color: var(--ink-body); }
.legal a { text-underline-offset: 3px; }
@media (max-width: 759px) { .legal { padding: 24px; } .page { padding-top: 40px; } }

/* 404 */
.notfound { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 96px; }
.notfound__disc {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #1F3BFF url("../assets/img/art-final.jpg") center / cover no-repeat;
  box-shadow: var(--shadow-art);
}
.notfound__title { margin-top: 48px; max-width: 14ch; }
.notfound__text { margin-top: 20px; color: var(--ink-body); font-size: 1.1875rem; }
.notfound__cta { margin-top: 32px; }
@media (max-width: 759px) { .notfound { padding-top: 56px; } .notfound__disc { width: 160px; height: 160px; } }

/* ---------- Display text sized to its box ----------
   Each cap sits between the largest size used at normal text (so it never
   applies then) and the size at which the longest word would stop fitting,
   so enlarged text shrinks to its card instead of breaking mid-word. */
.plan__top, .plan-dev__head, .plan__price, .estimator__result, .benefit, .step__foot { container-type: inline-size; }
.plan__name { font-size: min(1.875rem, 15cqi); }
.plan__amount { font-size: min(clamp(3.5rem, 6vw, 4.75rem), 30cqi); }
.estimator__figure { font-size: min(clamp(3.5rem, 6vw, 4.75rem), 25cqi); white-space: nowrap; } /* sized for the longest figure, "£9,250+" */
.benefit__title { font-size: min(1.375rem, 15cqi); } /* longest word "accountable" */
.step__title { font-size: min(1.75rem, 22cqi); }
/* ---------- Object spacers ----------
   Cards with an illustration at the top and text at the bottom reserve the
   illustration's height with a spacer, so enlarged text grows downward
   instead of up under it. At normal text size the spacer is shorter than the
   gap that is already there, so nothing moves. */
@media (min-width: 760px) and (max-width: 1099px) {
  .hero__card::after { content: ""; order: 1; flex: none; height: 196px; }
  .hero__card .art-card__foot { order: 2; }
}
@media (max-width: 759px) {
  .join::before { content: ""; flex: none; height: 200px; }
}
/* ---------- Narrow phones (last, so they win over the 759px rules) ---------- */
@media (max-width: 379px) {
  .report--join { width: calc(100% - 56px); right: 22px; }
  .join__title { font-size: min(2.375rem, 12vw); }
  .estimator__title { font-size: 1.625rem; }
  .included__card .disc { width: 110px; height: 110px; top: -40px; right: -40px; }
  .included__card .card__title { font-size: min(1.75rem, 8.8vw); }
}
@media (max-width: 359px) {
  .btn--lg { padding: 0 16px; font-size: 0.9375rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Forced colours (last, so it wins over the checked-state rules) ---------- */
@media (forced-colors: active) {
  .choice input:checked + span,
  .pill:has(.pill__input:checked) { forced-color-adjust: none; border-color: SelectedItem; background: SelectedItem; color: SelectedItemText; }
  .consent input:checked { forced-color-adjust: none; background: SelectedItem; border-color: SelectedItem; }
  .consent input:checked::after { border-color: SelectedItemText; }
  .range-wrap::before { forced-color-adjust: none; background: GrayText; }
  .range-wrap__fill { forced-color-adjust: none; background: Highlight; height: 6px; margin-top: -1px; }
  .range::-webkit-slider-thumb { forced-color-adjust: none; background: CanvasText; border: 2px solid Canvas; }
  .range::-moz-range-thumb { forced-color-adjust: none; background: CanvasText; border: 2px solid Canvas; }
  .switch__knob { forced-color-adjust: none; background: CanvasText; }
  .switch__input:checked + .switch__track { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .switch__input:checked + .switch__track .switch__knob { background: HighlightText; }
  /* These controls opt out of system colours, so their white focus rings need the system text colour. */
  .range:focus-visible::-webkit-slider-thumb { outline-color: CanvasText; }
  .range:focus-visible::-moz-range-thumb { outline-color: CanvasText; }
  .pill:has(.pill__input:focus-visible) { outline-color: CanvasText; }
  .switch__input:focus-visible + .switch__track { outline-color: CanvasText; }
  .choice input:focus-visible + span { outline-color: CanvasText; }
}

/* ---------- Enlarged text (browser text size) ----------
   Buttons keep one line at normal sizes; when the text is enlarged beyond
   the column, they wrap instead of pushing past the viewport. */
.btn { max-width: 100%; }
@media (max-width: 479px) {
  .btn { white-space: normal; text-align: center; padding-top: 8px; padding-bottom: 8px; line-height: 1.2; }
  .legal__status, .site-footer__links { flex-wrap: wrap; max-width: 100%; }
  .tag { max-width: 100%; padding-top: 6px; padding-bottom: 6px; line-height: 1.25; }
  /* Three pills per row at normal size (4em < a third of the column, even at 320); fewer when text is enlarged. */
  .pills { grid-template-columns: repeat(auto-fit, minmax(min(100%, 4em), 1fr)); }
}