/* Tokens: colours are the source's, measured. A brand swap only touches this block. */
:root {
  --bg: rgb(32, 54, 29);
  --stripe-bg: rgb(32, 54, 30);
  --lilac: rgb(210, 187, 218);
  --lilac-edge: rgb(65, 78, 64);
  --white: #fff;
  --btn-ink: rgb(76, 6, 35);
  --pink: rgb(255, 176, 202);
  --pink-hover: rgb(246, 240, 232);
  --blue: rgb(186, 215, 241);
  --blue-hover: rgb(209, 224, 234);
  --dim-fit: .12;
  --dim-kit: .32;
  /* Resampled from frames, 2 runs per button, about 415 ms. */
  --spring: linear(0 0%, .042 3.6%, .167 7.7%, .315 11.8%, .474 15.7%, .617 19.8%, .736 23.9%, .824 28%, .895 31.8%, .944 35.9%, .975 39.8%, .996 43.9%, 1.008 48%, 1.013 51.8%, 1.015 55.9%, 1.014 60%, 1.0126 63.9%, 1.01 68%, 1.008 72%, 1.006 76.1%, 1.004 80%, 1.0026 84.1%, 1.0016 88%, 1.0008 92%, 1.0003 96.1%, 1 100%);
  --H: 0px; --k: 1.9; --z: 1;
}

* { box-sizing: border-box; }
html { background: var(--bg); overflow-y: scroll; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--white); }
h1, h2, p { margin: 0; font-weight: 400; }

/* Measured stripe band: y 0-40, full width; the bottom row is a blend. */
.stripes { display: block; width: 100%; height: 40px; background: var(--stripe-bg); }
.s-a { fill: var(--lilac); }
.s-b { fill: var(--lilac-edge); }

/* Measured hero: y 50, width 94%, flex column, gap 20, padding 50 0. */
.hero {
  width: 94%; margin: 10px auto 0; padding: 50px 0;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}

/* Measured box 27 tall, centred. Live text in the closest free font, not the source's drawn SVG. */
.wordmark {
  height: 27px; line-height: 27px; white-space: nowrap; color: var(--lilac);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 35px;
  font-stretch: 100%; letter-spacing: -.012em; font-variation-settings: 'opsz' 96;
}

/* Measured: Domine 38.08/52.93, -1.14 tracking. */
h1 { font-family: 'Domine', serif; font-size: 38.08px; line-height: 52.93px; letter-spacing: -1.14px; text-align: center; }

/* Measured: Work Sans 16/25.92, 900 wide, centred. */
.intro, .card-in p { font-family: 'Work Sans', sans-serif; font-size: 16px; line-height: 25.92px; text-align: center; }
.intro { width: 900px; max-width: 100%; }

/* Measured: row padding-top 30, gap 50; cards 500 tall, radius 20. */
.row { width: 100%; padding-top: 30px; display: flex; gap: 50px; }
.card { position: relative; flex: 1 1 0; min-width: 0; height: 500px; border-radius: 20px; overflow: hidden; isolation: isolate; }
.card picture, .card img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.card img { object-fit: cover; }
.card::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card-fit::after { background: rgba(0, 0, 0, var(--dim-fit)); }
.card-kit::after { background: rgba(0, 0, 0, var(--dim-kit)); }
.card-in { position: relative; z-index: 2; height: 100%; padding: 0 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; }

/* Measured mark boxes: 41 tall on card one, 84 tall on card two. */
.mark-fit {
  height: 41px; line-height: 41px; white-space: nowrap;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 54px;
  font-stretch: 100%; letter-spacing: -.045em; font-variation-settings: 'opsz' 96;
}
.mark-kit {
  height: 84px; display: flex; flex-direction: column; align-items: flex-start;
  font-family: 'Fraunces', serif; font-weight: 400; font-size: 49px; line-height: 42px; letter-spacing: -.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}
.mark-kit span { display: block; white-space: nowrap; }
.mark-kit .l2 { display: flex; align-items: center; gap: .08em; }
.flour { width: .86em; height: .5em; flex: none; margin-top: .16em; }

/* Measured: 276 x 40, Red Hat Display 14.08/16.05 w500, 1.4 tracking, uppercase. */
.btn {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 276px; height: 40.05px; padding: 12px 40px; white-space: nowrap;
  color: var(--btn-ink); text-decoration: none; text-transform: uppercase;
  font-family: 'Red Hat Display', sans-serif; font-weight: 500; font-size: 14.08px; line-height: 16.05px; letter-spacing: 1.4px;
  transition: background-color 415ms var(--spring), border-radius 415ms var(--spring);
}
.btn-fit { background: var(--pink); border-radius: 5px; }
.btn-kit { background: var(--blue); border-radius: 0; }
@media (hover: hover) {
  .btn-fit:hover { background: var(--pink-hover); border-radius: 50px; }
  .btn-kit:hover { background: var(--blue-hover); border-radius: 50px; }
}
.btn:active { border-radius: 50px; }
.btn-fit:active { background: var(--pink-hover); }
.btn-kit:active { background: var(--blue-hover); }
.btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Measured under 1200: h1 32/44.48, intro 806 wide at 1024, row gap 30, cards 450 tall with 40 padding. */
@media (max-width: 1199.98px) {
  html:not(.zoomed) h1 { font-size: 32px; line-height: 44.48px; }
  html:not(.zoomed) .intro { width: 85%; }
  html:not(.zoomed) .card { height: 450px; }
  html:not(.zoomed) .row { gap: 30px; }
  html:not(.zoomed) .card-in { padding: 0 40px; }
}

/* A narrow desktop window keeps two columns: the 1440 layout, zoomed to fit. */
html.zoomed .page { zoom: var(--z); width: 1440px; }

/* Fill mode: the same two-card hero filling a portrait screen. Gaps are fractions of the screen,
   words sit 13% above their desktop fractions to clear the phone browser's bar, and type is
   enlarged by --k. This type size is the one deliberate difference from strict scaling. */
html.fill { overflow-y: auto; }
html.fill .stripes { height: 60px; }
html.fill .hero {
  margin-top: 0; padding: 0 0 calc(var(--H) * .058); gap: 0; min-height: calc(var(--H) - 60px);
}
html.fill .wordmark { margin-top: calc(var(--H) * .0963 - 60px); height: calc(28.5px * var(--k)); line-height: calc(28.5px * var(--k)); font-size: calc(36.8px * var(--k)); }
html.fill h1 { margin-top: calc(var(--H) * .1415 - var(--H) * .0963 - 28.5px * var(--k)); font-size: calc(38px * var(--k)); line-height: calc(52.6px * var(--k)); letter-spacing: calc(-1.14px * var(--k)); }
html.fill .intro { width: 95%; margin-top: calc(var(--H) * .0703 - 52.6px * var(--k)); min-height: calc(32.6px * var(--k) * 5); font-size: calc(20.4px * var(--k)); line-height: calc(32.6px * var(--k)); text-wrap: pretty; }
html.fill .row { flex: 1 1 auto; padding-top: 0; margin-top: max(40px, calc(var(--H) * .1228 - 32.6px * var(--k) * 5)); }
html.fill .card { height: auto; border-radius: 36px; }
html.fill .card-in { padding: 0 calc(21px * var(--k)); gap: calc(var(--H) * .0333); }
html.fill .card-in p { font-size: calc(21px * var(--k)); line-height: calc(32.6px * var(--k)); text-wrap: pretty; }
html.fill .mark-fit { height: calc(41px * var(--k)); line-height: calc(41px * var(--k)); font-size: calc(45px * var(--k)); }
html.fill .mark-kit { height: calc(84px * var(--k)); font-size: calc(49px * var(--k)); line-height: calc(42px * var(--k)); }
html.fill .btn { width: calc(279px * var(--k)); height: calc(52.6px * var(--k)); padding: 0; font-size: calc(14.7px * var(--k)); line-height: 1; letter-spacing: calc(1.47px * var(--k)); }
html.fill .btn-fit { border-radius: 10px; }