/* ==========================================================================
   THE ATKINSON METHOD — STYLESHEET
   Depends on tokens.css. Never hard-code a colour or size here; use a token.
   ========================================================================== */

/* --- RESET ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
img, picture, svg { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }


/* --- BASE ----------------------------------------------------------------- */

body {
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--mobile-cta-h); /* room for sticky mobile CTA */
}

@media (min-width: 900px) { body { padding-bottom: 0; } }

/* Pages without a sticky CTA shouldn't reserve room for one. */
body:not(:has(.mobile-cta)) { padding-bottom: 0; }
body:not(:has(.mobile-cta)) .cookie { bottom: var(--s-4); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-primary);
  text-wrap: balance;
}

h1 { font-size: var(--t-display-l); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { color: var(--text-primary); max-width: var(--measure); }
p + p { margin-top: var(--s-4); }

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: var(--fw-semibold); }


/* --- LAYOUT --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 780px; }

.section {
  padding-block: var(--section-y);
  background: var(--bg-page);
  color: var(--text-primary);
}

.section--tight { padding-block: calc(var(--section-y) * 0.6); }

.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 700px)  { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); } }

/* Mobile first: every column spans the full grid. Without this they
   auto-place into a single track and collapse to a quarter width. */
.col-full, .col-head, .col-body, .col-wide { grid-column: 1 / -1; }

@media (min-width: 1000px) {
  .col-head { grid-column: 1 / span 6; }   /* asymmetric editorial split */
  .col-body { grid-column: 8 / span 5; }
  .col-wide { grid-column: 1 / span 8; }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }


/* --- TYPE HELPERS --------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
  display: block;
}

.lead {
  font-size: var(--t-body-l);
  color: var(--text-muted);
  max-width: var(--measure-lead);
}

.muted { color: var(--text-muted); }

.small { font-size: var(--t-small); }

.rule {
  border: 0;
  border-top: var(--border-hairline) solid var(--border-subtle);
  margin-block: var(--s-6);
}


/* --- PLACEHOLDER MEDIA -----------------------------------------------------
   Every image slot until real photography arrives. Deliberately visible.
--------------------------------------------------------------------------- */

.ph {
  position: relative;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--c-grey-50) 0 12px,
      var(--c-white) 12px 24px
    );
  border: var(--border-hairline) dashed var(--c-blue-line);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ph::after {
  content: attr(data-slot);
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-blue);
  text-align: center;
  padding: var(--s-4);
  line-height: 1.5;
}

.ph--dark {
  background:
    repeating-linear-gradient(
      -45deg,
      var(--c-ink-raised) 0 12px,
      var(--c-ink) 12px 24px
    );
  border-color: rgba(255,255,255,0.16);
  border-radius: 0;
}
.ph--dark::after { color: var(--c-blue-bright); }

.ph[data-ratio="3-2"]  { aspect-ratio: 3 / 2; }
.ph[data-ratio="4-5"]  { aspect-ratio: 4 / 5; }
.ph[data-ratio="16-10"]{ aspect-ratio: 16 / 10; }
.ph[data-ratio="21-9"] { aspect-ratio: 21 / 9; }
.ph[data-ratio="1-1"]  { aspect-ratio: 1 / 1; }


/* --- PLACEHOLDER TEXT ------------------------------------------------------
   Unresolved [[TOKENS]] from the content pack. Loud on purpose.
--------------------------------------------------------------------------- */

.todo {
  background: var(--c-blue-wash);
  border-left: 3px solid var(--c-blue);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--c-ink);
  font-size: var(--t-small);
  max-width: var(--measure);
}
.todo b {
  font-family: var(--font-display);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-size: var(--t-eyebrow);
  color: var(--c-blue);
  display: block;
  margin-bottom: var(--s-2);
}
.on-ink .todo { background: var(--c-ink-raised); color: var(--c-white); border-left-color: var(--c-blue-bright); }
.on-ink .todo b { color: var(--c-blue-bright); }


/* --- BUTTONS -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap-min);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--t-body);
  letter-spacing: -0.01em;
  text-decoration: none;
  text-align: center;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.btn--primary {
  background: var(--c-blue);
  color: var(--c-white);
  border: var(--border-hairline) solid var(--c-blue);
}
.btn--primary:hover { background: var(--c-blue-hover); border-color: var(--c-blue-hover); }

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border: var(--border-hairline) solid var(--border-subtle);
}
.btn--secondary:hover { border-color: var(--text-primary); }

.on-ink .btn--secondary,
.on-blue .btn--secondary,
.hero .btn--secondary,
.page-head .btn--secondary { color: var(--c-white); border-color: rgba(255,255,255,0.4); }
.on-ink .btn--secondary:hover,
.on-blue .btn--secondary:hover,
.hero .btn--secondary:hover,
.page-head .btn--secondary:hover { border-color: var(--c-white); background: rgba(255,255,255,0.08); }

.on-blue .btn--primary { background: var(--c-white); color: var(--c-blue-deep); border-color: var(--c-white); }
.on-blue .btn--primary:hover { background: var(--c-grey-50); border-color: var(--c-grey-50); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-row .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .btn-row .btn { flex: 0 0 auto; } }


/* --- NAVIGATION ----------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px);
  border-bottom: var(--border-hairline) solid var(--c-grey-100);
}

.nav__inner {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.nav__brand {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink);
  text-decoration: none;
  line-height: 1.1;
}
.nav__brand span { display: block; color: var(--c-blue); }

.nav__links { display: none; }

@media (min-width: 1000px) {
  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--s-5);
  }
  .nav__links a {
    color: var(--c-ink);
    text-decoration: none;
    font-size: var(--t-small);
    font-weight: var(--fw-medium);
    padding-block: var(--s-3);
    border-bottom: 2px solid transparent;
  }
  .nav__links a:hover { border-bottom-color: var(--c-blue); }
  .nav__links a[aria-current="page"] { border-bottom-color: var(--c-blue); }
}

.nav__actions { display: flex; align-items: center; gap: var(--s-2); }

.nav__ig {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  color: var(--c-ink);
  border-radius: var(--r-sm);
}
.nav__ig:hover { color: var(--c-blue); }

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

.nav__toggle {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--r-sm);
}
@media (min-width: 1000px) { .nav__toggle { display: none; } }

/* Mobile menu panel */
.menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) + 1);
  background: var(--c-ink);
  color: var(--c-white);
  padding: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.menu[data-open="true"] { transform: translateY(0); visibility: visible; }

.menu__top { display: flex; justify-content: space-between; align-items: center; }
.menu__close { width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; color: var(--c-white); }

.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  color: var(--c-white);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  padding-block: var(--s-3);
  border-bottom: var(--border-hairline) solid var(--c-ink-line);
}
.menu__links a:hover { color: var(--c-blue-bright); }

.menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-4); }


/* --- STICKY MOBILE CTA ----------------------------------------------------- */

.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-mobile-cta);
  min-height: var(--mobile-cta-h);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sticky);
  display: flex;
  align-items: center;
}
.mobile-cta .btn { width: 100%; }
@media (min-width: 900px) { .mobile-cta { display: none; } }


/* --- HERO ----------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--c-ink);
  color: var(--c-white);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }
.hero__media .ph { width: 100%; height: 100%; border-radius: 0; }

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(11,13,16,0.94) 0%,
    rgba(11,13,16,0.86) 42%,
    rgba(11,13,16,0.55) 100%
  );
}

.hero__inner {
  position: relative;
  padding-block: clamp(var(--s-8), 14vh, var(--s-10));
}

.hero h1 { color: var(--c-white); font-size: var(--t-display-xl); max-width: 15ch; }

.hero__support {
  margin-top: var(--s-5);
  font-size: var(--t-body-l);
  color: #D6DAE1;
  max-width: 44ch;
}

.hero__services {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--c-blue-bright);
}
.hero__services li { display: flex; align-items: center; gap: var(--s-4); }
.hero__services li:not(:last-child)::after {
  content: "";
  width: 4px; height: 4px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.6;
}

.hero .btn-row { margin-top: var(--s-7); }

.hero__note {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: var(--border-hairline) solid rgba(255,255,255,0.18);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--c-grey-400);
}


/* --- PAGE HEADER (inner pages) --------------------------------------------- */

.page-head {
  background: var(--c-ink);
  color: var(--c-white);
  padding-block: var(--s-8) var(--s-8);
}
.page-head h1 { color: var(--c-white); max-width: 18ch; }
.page-head .lead { color: var(--c-grey-400); margin-top: var(--s-5); }
.page-head .eyebrow { color: var(--c-blue-bright); }


/* --- PROCESS (numbered — a real sequence) ---------------------------------- */

.process { display: grid; gap: 0; margin-top: var(--s-6); }
@media (min-width: 900px) { .process { grid-template-columns: repeat(5, 1fr); } }

.process__step {
  padding: var(--s-5) 0;
  border-top: var(--border-hairline) solid var(--border-subtle);
}
@media (min-width: 900px) {
  .process__step { padding: var(--s-5) var(--s-5) var(--s-6) 0; }
}

.process__n {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent);
  display: block;
  margin-bottom: var(--s-3);
}
.process__step h3 { font-size: 1.125rem; margin-bottom: var(--s-2); }
.process__step p { font-size: var(--t-small); color: var(--text-muted); }


/* --- CARDS ---------------------------------------------------------------- */

.cards {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-7);
}
@media (min-width: 800px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  /* A card carries its own white background, so it must also reset the
     colour scope. Without this it inherits white text from an .on-ink
     section and renders white-on-white. Any component that sets its own
     background needs this reset. */
  --text-primary: var(--c-ink);
  --text-muted:   var(--c-grey-600);
  --border-subtle: var(--c-grey-100);
  --accent:       var(--c-blue);
  --focus-colour: var(--c-blue);

  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  background: var(--c-white);
  border: var(--border-hairline) solid var(--c-grey-100);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.card:hover { border-color: var(--c-blue); transform: translateY(-2px); }

.card__media .ph { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }

.card__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }

.card__price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  color: var(--c-blue);
  margin-block: var(--s-3) var(--s-4);
  display: block;
}
.card__price span {
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  color: var(--c-grey-600);
  display: block;
}

.card__badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--c-blue-wash);
  color: var(--c-blue-hover);
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-4);
}

.card__desc { font-size: var(--t-small); color: var(--c-grey-600); }

.card__list { margin-block: var(--s-5); display: grid; gap: var(--s-3); }
.card__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--s-3);
  font-size: var(--t-small);
  align-items: start;
}
.card__list li::before {
  content: "";
  width: 8px; height: 8px;
  margin-top: 7px;
  border-left: 2px solid var(--c-blue);
  border-bottom: 2px solid var(--c-blue);
  transform: rotate(-45deg);
}

.card .btn { margin-top: auto; width: 100%; }


/* --- FEATURE BAND --------------------------------------------------------- */

.band { position: relative; overflow: hidden; background: var(--c-blue-deep); }
.band__media { position: absolute; inset: 0; opacity: 0.25; }
.band__media .ph { width: 100%; height: 100%; border: 0; border-radius: 0; }
.band__inner { position: relative; padding-block: var(--section-y); }
.band h2 { color: var(--c-white); max-width: 20ch; }
.band p { color: #C9D4EE; max-width: var(--measure-lead); margin-top: var(--s-5); }
.band .btn-row { margin-top: var(--s-6); }
.band__note { margin-top: var(--s-4); font-size: var(--t-small); color: #A9B8DD; }


/* --- INSTAGRAM GRID -------------------------------------------------------- */

.ig-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-6);
}
@media (min-width: 700px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .ig-grid { grid-template-columns: repeat(6, 1fr); } }


/* --- ACCORDION (FAQs) ------------------------------------------------------ */

.faq { border-top: var(--border-hairline) solid var(--border-subtle); }
.faq__item { border-bottom: var(--border-hairline) solid var(--border-subtle); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--tap-min);
  padding-block: var(--s-4);
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.faq__q:hover { color: var(--accent); }

.faq__icon { position: relative; flex: 0 0 16px; height: 16px; }
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__icon::before { inset: 7px 0 7px 0; height: 2px; }
.faq__icon::after  { inset: 0 7px 0 7px; width: 2px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq__a[data-open="true"] { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: var(--s-5); color: var(--text-muted); font-size: var(--t-body); }


/* --- FORMS ---------------------------------------------------------------- */

.field { margin-bottom: var(--s-5); }

.field label,
.fieldset__legend {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--s-2);
  color: var(--text-primary);
}

.field__hint { font-size: var(--t-small); color: var(--text-muted); margin-bottom: var(--s-2); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--s-3) var(--s-4);
  background: var(--c-white);
  border: var(--border-hairline) solid var(--c-grey-100);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-grey-600); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--c-blue); }
.textarea { min-height: 140px; resize: vertical; padding-top: var(--s-3); }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-ink) 50%),
                    linear-gradient(135deg, var(--c-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s-8);
}

.radio-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.choice {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap-min);
  padding: var(--s-3) var(--s-4);
  border: var(--border-hairline) solid var(--c-grey-100);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--t-small);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.choice:hover { border-color: var(--c-blue); }
.choice input { accent-color: var(--c-blue); width: 18px; height: 18px; flex: 0 0 auto; }
.choice:has(input:checked) { border-color: var(--c-blue); background: var(--c-blue-wash); }

.consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--t-small);
  color: var(--text-muted);
  margin-bottom: var(--s-4);
  cursor: pointer;
}
.consent input { accent-color: var(--c-blue); width: 20px; height: 20px; margin-top: 2px; }

.form-note {
  font-size: var(--t-small);
  color: var(--text-muted);
  border-left: 2px solid var(--c-grey-100);
  padding-left: var(--s-4);
  margin-bottom: var(--s-5);
}


/* --- FOOTER --------------------------------------------------------------- */

.footer { background: var(--c-ink); color: var(--c-white); padding-block: var(--s-8) var(--s-6); }
.footer a { color: var(--c-grey-400); text-decoration: none; }
.footer a:hover { color: var(--c-white); }

.footer__grid { display: grid; gap: var(--s-7); }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }

.footer__tag {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-white);
  max-width: 28ch;
  margin-top: var(--s-4);
}

.footer__h {
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-blue-bright);
  margin-bottom: var(--s-4);
}

.footer__list { display: grid; gap: var(--s-3); font-size: var(--t-small); }

.footer__bottom {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: var(--border-hairline) solid var(--c-ink-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  font-size: var(--t-small);
  color: var(--c-grey-400);
}


/* --- COOKIE BANNER --------------------------------------------------------- */

.cookie {
  position: fixed;
  left: var(--s-4); right: var(--s-4);
  bottom: calc(var(--mobile-cta-h) + var(--s-4));
  z-index: var(--z-cookie);
  max-width: 560px;
  background: var(--c-ink);
  color: var(--c-white);
  border: var(--border-hairline) solid var(--c-ink-line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
}
@media (min-width: 900px) { .cookie { bottom: var(--s-5); left: var(--s-5); right: auto; } }
.cookie[hidden] { display: none; }
.cookie p { color: var(--c-grey-400); font-size: var(--t-small); margin-bottom: var(--s-4); }
.cookie .btn { font-size: var(--t-small); padding-inline: var(--s-4); }


/* --- SCROLL REVEAL --------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal[data-visible="true"] { opacity: 1; transform: none; }

/* If JS never runs, content must still be visible. */
.no-js .reveal { opacity: 1; transform: none; }


/* --- REVIEW FIXES ---------------------------------------------------------- */

/* The wordmark inherits ink-on-ink inside dark chrome. Force legible colours. */
.footer .nav__brand,
.menu .nav__brand { color: var(--c-white); }
.footer .nav__brand span,
.menu .nav__brand span { color: var(--c-blue-bright); }

/* .on-blue paints a solid background, which would hide the band's image.
   The band gets its colour from the section, not the token scope. */
.band__inner { background: transparent; }

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  background: rgba(31, 79, 216, 0.1);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}


/* --- QUESTIONNAIRE --------------------------------------------------------
   Click-to-load. Typeform's script warms in the background while the visitor
   reads the panel, then the form mounts on tap. Height is set by --tf-height
   in tokens.css, not here.
-------------------------------------------------------------------------- */

.tf-launch {
  background: var(--c-ink);
  color: var(--c-white);
  border: var(--border-hairline) solid var(--c-ink-line);
  border-radius: var(--r-md);
  padding: clamp(var(--s-6), 5vw, var(--s-8));
  display: grid;
  gap: var(--s-5);
  justify-items: start;
}
.tf-launch h2 { color: var(--c-white); max-width: 20ch; }
.tf-launch p { color: var(--c-grey-400); max-width: 56ch; }
.tf-launch__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  font-family: var(--font-display); font-size: var(--t-small);
  font-weight: var(--fw-semibold); color: var(--c-blue-bright);
}
.tf-launch .btn { width: 100%; }
@media (min-width: 560px) { .tf-launch .btn { width: auto; min-width: 280px; } }
.tf-launch__status { font-size: var(--t-small); color: var(--c-grey-400); min-height: 1.4em; }

.tf-embed {
  position: relative;
  width: 100%;
  height: var(--tf-height);
  border-radius: var(--r-md);
  overflow: hidden;
  background: transparent;
}
.tf-embed iframe { border: 0; width: 100%; height: 100%; display: block; }

/* Typeform injects its own wrapper between .tf-embed and the iframe, and may
   set an inline height on it. Inline styles beat stylesheet rules, so these
   need !important to force the chain to fill the container. If the form is
   still short after this, the constraint is inside Typeform's own layout and
   cannot be reached from here. */
.tf-embed > *,
.tf-embed [data-tf-live] {
  height: 100% !important;
  min-height: 100% !important;
}
.tf-embed[hidden] { display: none; }

@media (max-width: 600px) {
  .tf-embed { height: var(--tf-height-mobile); border-radius: var(--r-sm); }
}


/* --- PHOTOGRAPHY ----------------------------------------------------------- */

picture { display: block; }
picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero__media picture,
.hero__media img { width: 100%; height: 100%; }
.band__media picture,
.band__media img { width: 100%; height: 100%; }

.card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.ig-grid picture { aspect-ratio: 1 / 1; border-radius: var(--r-sm); overflow: hidden; }
.col-head > picture { border-radius: var(--r-md); overflow: hidden; }



/* --- MOBILE HARDENING ------------------------------------------------------
   Long unbroken strings (handles, emails, URLs) are the usual cause of
   sideways scroll on narrow screens.
-------------------------------------------------------------------------- */

body { overflow-wrap: break-word; }
a, .eyebrow, .footer__list, .tf-launch__meta { overflow-wrap: anywhere; }

/* Nothing should exceed the viewport. Note: overflow-x:hidden here would
   break position:sticky on the nav by creating a scroll container.
   overflow-x:clip does the same job without that side effect. */
html, body { max-width: 100%; }
body { overflow-x: clip; }

@media (max-width: 640px) {
  /* Section headings and body text sit closer together when stacked. */
  .grid { row-gap: var(--s-5); }

  /* The process list reads as a list on a phone, not a 5-across row. */
  .process__step { padding-block: var(--s-4); }

  /* Give stacked hero buttons room without them touching. */
  .hero .btn-row { gap: var(--s-3); }

  /* Portrait images shouldn't dominate the whole screen height. */
  .col-head > picture { max-height: 70vh; }
  .col-head > picture img { object-position: center 30%; }
}

@media (max-width: 380px) {
  /* Smallest common phones: ease the display sizes slightly. */
  .nav__brand { font-size: 0.8rem; }
  .menu__links a { font-size: 1.5rem; }
}



/* --- LIGHT SURFACE UTILITY -------------------------------------------------
   The mirror of .on-ink. Put it on any element with its own light background
   that sits inside a dark section, so text and borders resolve correctly.
-------------------------------------------------------------------------- */

.on-light {
  --bg-page:       var(--c-white);
  --bg-subtle:     var(--c-grey-50);
  --text-primary:  var(--c-ink);
  --text-muted:    var(--c-grey-600);
  --border-subtle: var(--c-grey-100);
  --accent:        var(--c-blue);
  --focus-colour:  var(--c-blue);
  color: var(--text-primary);
}