/* ==========================================================================
   SUPERHERO landing page
   Colour and type from "SUPERHERO Landing Page Guidance.pdf".
   Layout measured from "SUPERHERO Landing page mock up.png" (1440 x 5211).
   ========================================================================== */

/* --------------------------------------------------------------- Fonts -- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------- Tokens -- */

:root {
  /* Colour — the PDF's seven-colour table, its own names */
  --c-ink:    #0E2A3A;
  --c-cream:  #F4E7CE;
  --c-gold:   #FFC425;
  --c-green:  #1F5C3A;
  --c-grey:   #9FB3BE;
  --c-red:    #B4231F;   /* required marks; also lives in the artwork */
  --c-white:  #FFFFFF;

  /* Derived from Ink. Measured in the mockup, not listed in the PDF table. */
  --c-rule:   rgba(14, 42, 58, .18);  /* #D4D9DB — top bar hairline          */
  --c-ink-75: rgba(14, 42, 58, .75);  /* #4A5F6B — Acknowledgement of Country */
  --c-ink-70: rgba(14, 42, 58, .70);  /* #596C77 — form fine print            */
  --c-ink-65: rgba(14, 42, 58, .65);  /* #60737D — input placeholders         */

  /* Type families */
  --f-head: "Archivo", "Helvetica Neue", Arial, sans-serif;   /* headings, buttons, labels */
  --f-body: "Figtree", "Helvetica Neue", Arial, sans-serif;   /* body */

  /* Type scale */
  --t-display:  44px;  /* section h2 */
  --t-h2-mid:   34px;  /* What happens next */
  --t-h2-form:  34px;  /* Ready to talk? */
  --t-tagline:  29px;  /* If not you, who? */
  --t-when:     28px;  /* [Day, date and time] */
  --t-quote:    26px;  /* the carer quote, Archivo Regular */
  --t-prompt:   24px;  /* Still reading? */
  --t-title:    22px;  /* card titles, step titles, hero eyebrow, callout phone */
  --t-lead:     22px;  /* section leads, IFYS body */
  --t-band:     19px;  /* body on a solid band */
  --t-body:     16.8px;/* body in cards, steps, fields (measured, not 17) */
  --t-btn:      17px;  /* button labels */
  --t-caption:  18px;  /* placeholder caption */
  --t-small:    15px;  /* footer */
  --t-label:    14px;  /* eyebrows, form labels, step numbers, fine print */

  /* Line height */
  --lh-head:   1.15;
  --lh-band:   1.5;
  --lh-body:   1.53;
  --lh-lead:   1.45;

  /* Tracking */
  --ls-eyebrow:      2.05px;
  --ls-hero-eyebrow: 1.17px;
  --ls-label:        0.35px;
  --ls-num:          1.6px;

  /* Space */
  --s-16: 16px;
  --s-24: 24px;
  --s-40: 40px;
  --s-64: 64px;
  --s-96: 96px;

  /* Shape */
  --r-sm: 4px;
  --r-md: 6px;
  --bw:   2px;

  /* Measure */
  --container: 1120px;
  --gutter:     160px;
}

/* ---------------------------------------------------------------- Base -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* Hard line breaks the desktop sketch shows and wrapping alone cannot produce.
   The phone sketch breaks these lines elsewhere, so they are width-scoped. */
.br-wide { display: none; }
.br-narrow { display: none; }   /* the phone sketch breaks these lines; the desktop sketch does not */

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

/* Shared type -------------------------------------------------------- */

.eyebrow {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-label);
  line-height: 20px;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-ink);
}
.eyebrow--gold { color: var(--c-gold); }
.eyebrow--sentence { letter-spacing: 1.96px; }

.h2 {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: var(--lh-head);
  letter-spacing: -0.2px;
  color: var(--c-ink);
}
.h2--cream { color: var(--c-cream); }
.h2--form { font-size: var(--t-h2-form); }
.h2--next { font-size: var(--t-h2-mid); }

.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
}

/* Buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-btn);
  line-height: 17px;
  letter-spacing: 0;
  text-decoration: none;
  text-align: center;
  padding: 20px 28px;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
}
.btn--gold  { background: var(--c-gold); color: var(--c-ink); }
.btn--ink   { background: var(--c-ink);  color: var(--c-cream); }
.btn--block { display: block; width: 100%; }

/* Keyboard focus. currentColor means the ring always contrasts with its own
   ground - ink on white and cream, cream on ink, ink on gold. */
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}
.tick__box:focus-visible { outline-offset: 3px; }

.link-underline {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-btn);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------- Top bar -- */

.topbar {
  position: sticky;
  top: 0;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-rule);
  z-index: 40;
}
.topbar__inner {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  min-height: 80px;
  padding-inline: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-24);
}
.topbar__logo { display: block; flex-shrink: 0; }
.topbar__logo img { width: 148px; height: auto; }
/* Above 1024px the wrapper is not a box at all: the nav sits in the top bar's
   own flex row. Below it, it becomes the panel. Contact Us stays in the bar. */
.topbar__panel { display: contents; }

.topnav { min-width: 0; }

/* Gold, outside the underline nav, so it reads as the way in rather than as
   another heading. Compact, so it holds the right edge without shouting. */
.topbar__cta {
  display: inline-block;
  flex-shrink: 0;
  padding: 12px 20px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: var(--c-ink);
  background: var(--c-gold);
  text-decoration: none;
  border-radius: var(--r-md);
}
.topbar__cta:hover { filter: brightness(0.97); }

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

.topnav__list {
  display: flex;
  align-items: center;
  gap: 18px;
}
.topnav__link {
  position: relative;
  display: block;
  padding-block: 8px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: var(--c-ink);
  text-decoration: none;
  transition: color 180ms cubic-bezier(.2, .7, .3, 1);
}
/* The underline is a pseudo-element rather than text-decoration so it can be
   wiped on and off. Origin left, one property, one direction, no bounce. */
.topnav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms cubic-bezier(.2, .7, .3, 1);
}
.topnav__link:hover::after,
.topnav__link:focus-visible::after { transform: scaleX(1); }

/* Where you are, in Ink, held open. Same shape as the hover state, so the nav
   never needs a second way of marking a link. */
.topnav__link[aria-current="page"]::after {
  background: var(--c-ink);
  transform: scaleX(1);
}

/* Regional support, in the same row as the other tabs. Green with cream
   type, the same pairing as a green band. Gold stays on Contact Us. */
.topnav__link--support {
  padding: 8px 14px;
  color: var(--c-cream);
  background: var(--c-green);
  border-radius: var(--r-md);
}
.topnav__link--support::after {
  left: 12px;
  right: 12px;
  bottom: 4px;
  background: var(--c-gold);
}
.topnav__link--support:hover,
.topnav__link--support:focus-visible { color: var(--c-cream); }
.topnav__link--support:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}
.topnav__link--support[aria-current="page"]::after { background: var(--c-gold); }

/* ---- The toggle. Two bars that cross, shown below 1024px only ---- */

.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;     /* optical: the bars, not the hit area, align right */
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  margin-left: -11px;
  background: currentColor;
  transition: transform 180ms cubic-bezier(.2, .7, .3, 1),
              opacity    120ms linear;
}
.nav-toggle__bars { top: 50%; margin-top: -1px; }
.nav-toggle__bars::before { content: ""; left: 0; margin-left: 0; transform: translateY(-6px); }
.nav-toggle__bars::after  { content: ""; left: 0; margin-left: 0; transform: translateY(6px); }

/* Open: the middle bar goes, the outer two rotate through each other. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg); }

/* ---------------------------------------------------------------- Hero -- */

.hero {
  display: grid;
  grid-template-columns: 48fr 52fr;
  background: var(--c-ink);
}
.hero__band {
  display: flex;
  align-items: center;
  padding-left: var(--gutter);
  padding-right: var(--s-40);
}
.hero__content { width: 100%; }

.lockup { display: block; }
.lockup__eyebrow {
  display: block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.2;
  letter-spacing: var(--ls-hero-eyebrow);
  color: var(--c-grey);
}
.lockup__wordmark {
  width: 100%;
  height: auto;
  margin-top: 9px;
}
.lockup__tagline {
  display: block;
  margin-top: 15px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-tagline);
  line-height: 1.2;
  color: var(--c-gold);
}

.hero__body {
  margin-top: 36px;
  font-size: var(--t-band);
  line-height: var(--lh-band);
  color: var(--c-cream);
}
.hero__actions {
  margin-top: 39px;
  display: flex;
  align-items: center;
  gap: var(--s-24);
}
.hero__actions .link-underline { color: var(--c-cream); }

/* The panel is a square of its own width, so its height no longer depends on
   whatever the artwork's intrinsic pixel size happens to be. */
.hero__art { aspect-ratio: 1 / 1; }
.hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------- 2 The first question ------ */

.check {
  background: var(--c-cream);
  padding-block: var(--s-96);
}
.check .lead { margin-top: 23px; max-width: 760px; }
.check .h2   { margin-top: 16px; }

.check__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-24);
}

.card {
  background: var(--c-white);
  border-radius: var(--r-md);
  padding: var(--s-24) var(--s-24) 21px;
}
.card--gold-top {
  border-top: 6px solid var(--c-gold);
  padding-top: 23px;
}
.card__title {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.2;
}
.card__body { margin-top: 9px; }

.check__footer {
  margin-top: 65px;
}

/* --------------------------------- 3 The form + 4 What happens next ---- */

.enquiry { background: var(--c-white); padding-block: var(--s-96); }
.enquiry__grid {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: var(--s-64);
  align-items: start;
}

.form {
  width: 100%;
  max-width: 560px;
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-md);
  padding: var(--s-40);
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
}
.field { margin-top: 19px; }
.form .h2 + .form__row .field,
.form .h2 + .field { margin-top: 27px; }
.form > .form__row:first-child .field { margin-top: 0; }
.form .form__row + .tick,
.form .field + .tick { margin-top: 27px; }
.form .tick + .field--choice { margin-top: 27px; }

.field__label {
  display: block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-label);
  line-height: 1.2;
  letter-spacing: var(--ls-label);
}
.req {
  color: var(--c-red);
  font-weight: 700;
}
.field__input {
  display: block;
  width: 100%;
  height: 50px;
  margin-top: 7px;
  padding: 0 14px;
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-sm);
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.2;
}
.field__input::placeholder { color: var(--c-ink-65); opacity: 1; }

.field__textarea {
  display: block;
  width: 100%;
  min-height: 150px;
  margin-top: 7px;
  padding: 12px 14px;
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-sm);
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  resize: vertical;
}
.field__textarea::placeholder { color: var(--c-ink-65); opacity: 1; }

.tick {
  margin-top: 21px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
}
.tick__box {
  appearance: none;
  width: 24px;
  height: 24px;
  margin: 3px 0 0;
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-sm);
  background: var(--c-white);
  cursor: pointer;
}
.tick + .tick { margin-top: 15px; }
/* The sketches only ever draw an unticked box, so the ticked state is derived
   from the palette: Gold is the campaign's action colour and the PDF allows it
   for "buttons and small accents". Replace if Your Brand Crew specify one. */
.tick__box:checked {
  background-color: var(--c-gold);
  border-color: var(--c-gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.2 10.4l3.9 3.9 7.7-8.6' fill='none' stroke='%230E2A3A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}
.tick__label { cursor: pointer; }

.field--choice {
  border: 0;
  padding: 0;
  min-width: 0;
}
.field--choice .field__label { padding: 0; }
.choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 7px;
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.choice__option { position: relative; display: block; cursor: pointer; }
.choice__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice__text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-label);
  line-height: 1;
  color: var(--c-ink);
  background: var(--c-white);
  transition: background 180ms cubic-bezier(.2, .7, .3, 1),
              color 180ms cubic-bezier(.2, .7, .3, 1);
}
.choice__option + .choice__option { border-left: var(--bw) solid var(--c-ink); }
.choice__input:checked + .choice__text {
  background: var(--c-gold);
  color: var(--c-ink);
}
.choice__input:focus-visible + .choice__text {
  outline: 2px solid var(--c-ink);
  outline-offset: -3px;
}

.form .btn--block { margin-top: 24px; }

.form__error {
  margin-top: 12px;
  font-size: var(--t-label);
  color: var(--c-red);
  font-weight: 600;
}

.form-success[hidden] { display: none; }

.form-success {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--c-cream);
  border-top: 4px solid var(--c-gold);
  padding: 24px 28px;
  font-family: var(--f-body);
  font-size: var(--t-body);
  color: var(--c-ink);
}

.form-success svg {
  flex-shrink: 0;
  color: var(--c-green);
  margin-top: 2px;
}

.form__fineprint {
  margin-top: 16px;
  font-size: var(--t-label);
  line-height: 1.5;
  color: var(--c-ink-70);
}
.form__fineprint .link-underline {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: var(--t-label);
  text-underline-offset: 3px;
}

/* What happens next */

.next  { padding-top: 42px; }
.steps { margin-top: 34px; counter-reset: step; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: var(--s-16);
  row-gap: 0;
  align-items: start;
}
.step + .step { margin-top: 34px; }
.step::before {
  content: counter(step);
  grid-row: 1 / span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-gold);
  color: var(--c-ink);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1;
}
.step__title {
  grid-column: 2;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.2;
}
.step__body { grid-column: 2; margin-top: 5px; }

.callout {
  margin-top: 41px;
  background: var(--c-cream);
  padding: 23px var(--s-24) 27px;
}
.callout__phone {
  margin-top: 9px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.2;
}
.callout__phone a { text-decoration: none; }

/* ---------------------------------------------------- 5 The draw promo -- */

.draw-promo {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: var(--s-96);
}
.draw-promo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: var(--s-64);
  align-items: center;
}
.draw-promo__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--c-cream);
}
.draw-promo__mark {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--c-gold);
}
.draw-promo__title {
  margin: 22px 0 0;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 104px;
  line-height: 0.84;
  letter-spacing: -2px;
  text-transform: uppercase;
  color: var(--c-gold);
}
.draw-promo__lead {
  max-width: 28em;
  margin: 28px 0 0;
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--c-cream);
}
.draw-promo__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 22px;
  margin: 32px 0 0;
}
.draw-promo__time {
  font-size: var(--t-label);
  line-height: 1.4;
  color: var(--c-grey);
}
.draw-promo__fine { margin: 14px 0 0; }
.draw-promo__fine a {
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-grey);
  text-underline-offset: 3px;
}
.draw-promo__cape {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.draw-promo__cape img {
  display: block;
  width: min(100%, 420px);
  height: auto;
}

/* ------------------------------------------------- Enter the draw page -- */

.draw {
  background: var(--c-cream);
  padding-block: var(--s-96);
}
.draw__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--s-64);
  align-items: start;
}
.prize__card {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  background: var(--c-ink);
  color: var(--c-cream);
  border-radius: var(--r-md);
  padding: 22px 24px 24px;
}
.prize__device { display: block; width: 100%; height: auto; }
.prize__model {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0.3px;
  color: var(--c-gold);
}
.prize__detail {
  margin: 10px 0 0;
  font-size: var(--t-body);
  line-height: 1.5;
}
.draw__howto .h2 { text-transform: uppercase; }
.draw__banner {
  margin-top: var(--s-64);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s-40);
  align-items: center;
  background: var(--c-gold);
  color: var(--c-ink);
  border: 3px solid var(--c-ink);
  padding: 26px 32px;
}
.draw__banner-title {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.4px;
  text-transform: uppercase;
}
.draw__banner p { margin: 0; font-size: var(--t-band); line-height: 1.45; }
.draw .enquiry__grid { margin-top: var(--s-64); }
.draw .form { background: var(--c-white); }
.draw .callout { background: var(--c-gold); }
.draw .next { padding-top: 12px; }

/* -------------------------------------------------- 6 Short breaks ----- */

.breaks { display: grid; grid-template-columns: 56fr 44fr; }
.breaks__art { aspect-ratio: 806 / 520; }   /* the panel the sketch crops to */
.breaks__art img { width: 100%; height: 100%; object-fit: cover; }
.breaks__band {
  background: var(--c-green);
  color: var(--c-cream);
  display: flex;
  align-items: center;
  padding: var(--s-40);
}
.breaks__content { max-width: 490px; }
.breaks__body {
  margin-top: 20px;
  font-size: var(--t-band);
  line-height: var(--lh-band);
}
.breaks__content p:last-child { margin-top: 39px; }

/* --------------------------------------------------- 7 The Academy ----- */

.academy {
  background: var(--c-cream);
  padding-block: var(--s-96);
}
.academy .h2   { margin-top: 16px; }
.academy .lead { margin-top: 23px; max-width: 760px; }

.academy__grid {
  margin-top: 63px;
  padding-top: 44px;            /* the track runs through here, above the cards */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-24);
  counter-reset: academy;
}
.card--step { position: relative; counter-increment: academy; padding-top: 26px; }

/* ---- The roadmap track ----
   One node per step: a dot on the step, and the rule that carries it to the
   next dot. The rule reaches 24px across the gap plus 7px into the next card,
   so it lands on that dot's centre rather than its edge. */
.card__node {
  position: absolute;
  top: -30px;
  left: 7px;
  right: calc(-1 * (var(--s-24) + 7px));
  height: 2px;
  background: rgba(31, 92, 58, .3);   /* Green, held back so the dots lead */
}
.card--step:last-child .card__node { right: auto; width: 0; }
.card__node::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-green);
}
.card--step::before {
  content: counter(academy, decimal-leading-zero);
  display: block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-label);
  line-height: 1.2;
  letter-spacing: var(--ls-num);
  color: var(--c-green);
}
.card--step .card__title { margin-top: 10px; }
.card--step .card__body  { font-size: 16px; line-height: 24px; }

/* ---- The steps arriving ----
   Scoped to (scripting: enabled) because the observer in main.js is the only
   thing that takes the steps back out of this state. With scripting off the
   query never matches and the roadmap is simply there, fully drawn. */
@media (scripting: enabled) {
  .academy__grid[data-reveal] .card--step {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity   420ms cubic-bezier(.2, .7, .3, 1),
                transform 420ms cubic-bezier(.2, .7, .3, 1);
  }
  .academy__grid[data-revealed] .card--step { opacity: 1; transform: none; }
  .academy__grid[data-revealed] .card--step:nth-child(2) { transition-delay:  70ms; }
  .academy__grid[data-revealed] .card--step:nth-child(3) { transition-delay: 140ms; }
  .academy__grid[data-revealed] .card--step:nth-child(4) { transition-delay: 210ms; }
}

.next-evening {
  margin-top: var(--s-64);
  background: var(--c-ink);
  color: var(--c-cream);
  border-radius: var(--r-md);
  padding: var(--s-40);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-40);
}
.next-evening[hidden] { display: none !important; }
.next-evening__when {
  margin-top: 6px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-when);
  line-height: 1.2;
  color: var(--c-cream);
}
.next-evening__where {
  margin-top: 6px;
  color: var(--c-grey);
}

/* --------------------------------------------- 8 IFYS + 9 Footer ------- */

.ifys { background: var(--c-white); padding-block: var(--s-96); }
.ifys__grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-64);
  align-items: start;
}
.ifys__logo { margin-top: 8px; }
.ifys__body {
  margin-top: 16px;
  max-width: 720px;
  font-size: var(--t-band);
  line-height: 1.6;
}
.ifys__lines {
  margin-top: 22px;
  display: grid;
  gap: 8px;
  max-width: 720px;
}
.ifys__lines p {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-band);
  line-height: 1.35;
}
.ifys__lines a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}

.footer-bar {
  background: var(--c-ink);
  color: var(--c-grey);
  padding-block: 56px;
}
.footer-bar__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 64px;
  align-items: start;
}
.footer-bar__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.footer-bar__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: var(--t-small);
  line-height: 1.4;
}
.footer-bar a { text-decoration: none; }
.footer-bar__copyright {
  font-size: var(--t-small);
  line-height: 1.4;
}

.footer-bar__social {
  display: flex;
  gap: 12px;
}
.social {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  color: var(--c-grey);
  transition: color 180ms cubic-bezier(.2, .7, .3, 1);
}
.social:hover,
.social:focus-visible { color: var(--c-cream); }
.social svg { width: 16px; height: 16px; fill: currentColor; }

.footer-bar__plan {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-small);
  line-height: 1.3;
  color: var(--c-cream);
}
.footer-bar__plan svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: currentColor;
}
.footer-bar__plan:hover,
.footer-bar__plan:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.footer-bar__ack {
  display: flex;
  align-items: center;
  gap: 32px;
}
.footer-bar__ack-copy { min-width: 0; }
.footer-bar__commit {
  display: block;
  flex-shrink: 0;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
}
.footer-bar__commit img {
  width: 132px;
  height: 132px;
}

.footer-bar__ack-title {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--c-cream);
}
.footer-bar__ack p {
  margin-top: 16px;
  font-size: var(--t-small);
  line-height: 1.55;
}

/* ==========================================================================
   CONTENT PAGES
   About Foster Care, What Do We Do, Contact Us. No new visual language: the
   bands, the type scale and the cards are the ones the home page already
   uses. Only the page heading and the long-form measure are new.
   ========================================================================== */

.page-banner {
  overflow: hidden;
  background: var(--c-ink);
}
.page-banner img {
  display: block;
  width: 100%;
  height: clamp(200px, 34vh, 340px);
  object-fit: cover;
  object-position: center 20%;
}

.page-hero { background: var(--c-ink); }
.page-hero img {
  display: block;
  width: 100%;
  height: clamp(240px, 42vh, 440px);
  object-fit: cover;
  object-position: center 20%;
}
.page-hero__bar {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: 28px;
}

.page-head {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: 56px;
}
.page-banner + .page-head { padding-block: 48px; }
.page-head--tight { padding-block: 36px; }
.page-head__title {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: var(--lh-head);
  letter-spacing: -0.2px;
}

.band { padding-block: 72px; }
.band--white { background: var(--c-white); }
.band--cream { background: var(--c-cream); }
.band--ink   { background: var(--c-ink); color: var(--c-cream); }
.band--ink .h2 { color: var(--c-cream); }
.band--green { background: var(--c-green); color: var(--c-cream); }
.band--green .h2 { color: var(--c-cream); }
.band--green a { color: var(--c-cream); }
.band--opener { padding-block: 48px; }
.band .h2 { font-size: var(--t-h2-mid); }

/* Running text is set narrower than the 1120px column: a 44px heading can
   span it, ten lines of 19px body cannot be read across it. */
.prose { max-width: 760px; }
.prose p {
  font-size: var(--t-band);
  line-height: 1.6;
}
.prose p + p { margin-top: 18px; }
.prose .h2 + p { margin-top: 22px; }
.prose a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* The documents carry a second-level line under several headings that has no
   content of its own beneath it. It is a deck, not a section, so it is set as
   one and the heading outline stays honest. */
.prose__deck {
  margin-top: 14px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.3;
}
.prose .prose__deck + p { margin-top: 22px; }
.band--ink .prose__deck { color: var(--c-grey); }

.prose__list { margin-top: 22px; }
.prose__list li {
  position: relative;
  padding-left: 28px;
  font-size: var(--t-band);
  line-height: 1.6;
}
.prose__list li + li { margin-top: 12px; }
.prose__list li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-gold);
}
.terms {
  max-width: 760px;
  margin-top: 0;
}
.terms a { text-underline-offset: 3px; }

/* Card rows. Full container width, so they sit outside .prose. */
.care-grid,
.define-grid {
  margin-top: var(--s-40);
  display: grid;
  gap: var(--s-16);
}
.care-grid   { grid-template-columns: repeat(5, 1fr); }
.define-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-24); }
.define-grid .card__body { font-size: var(--t-band); line-height: 1.6; }

.care-grid   + .prose,
.define-grid + .prose { margin-top: var(--s-40); }

.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
  gap: var(--s-24);
  align-items: stretch;
  margin-top: var(--s-40);
}
.compare__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.compare .define-grid {
  margin-top: 0;
  grid-template-columns: 1fr;
  flex: 1;
}
.compare .define-grid .card {
  display: flex;
  align-items: center;
}
.compare .prose { max-width: none; margin-top: var(--s-24); }
.compare .portrait { max-width: none; }

.strip { padding-block: 28px; }
.strip--green { background: var(--c-green); color: var(--c-cream); }
.strip__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: var(--s-40) var(--s-64);
  align-items: start;
}
.strip__lead {
  max-width: 36em;
  font-size: var(--t-band);
  line-height: 1.55;
}
.strip__label {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.3;
}
.strip__contact p {
  font-size: var(--t-band);
  line-height: 1.55;
}
.strip__contact .strip__label + p { margin-top: 12px; }
.strip__contact p + p { margin-top: 6px; }
.strip a {
  color: var(--c-cream);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Headshots still waiting on a file stay as a dashed placeholder.
   Supplied portraits and the road map replace that box with an img. */
.ph {
  display: grid;
  place-items: center;
  padding: 32px;
  text-align: center;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-caption);
  line-height: 1.45;
  color: var(--c-ink-70);
  background-color: rgba(14, 42, 58, .05);
  background-image:
    repeating-linear-gradient(to right,  var(--c-ink-70) 0 6px, transparent 6px 10px),
    repeating-linear-gradient(to right,  var(--c-ink-70) 0 6px, transparent 6px 10px),
    repeating-linear-gradient(to bottom, var(--c-ink-70) 0 6px, transparent 6px 10px),
    repeating-linear-gradient(to bottom, var(--c-ink-70) 0 6px, transparent 6px 10px);
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 5px 0, 5px 100%, 0 4px, 100% 4px;
  background-repeat: no-repeat;
}
.ph--headshot { aspect-ratio: 1; min-height: 260px; }
.ph--portrait { aspect-ratio: 4 / 5; min-height: 320px; }
.ph--video    { aspect-ratio: 16 / 9; min-height: 200px; }
.ph--roadmap  { aspect-ratio: 16 / 7; min-height: 240px; }

.profile {
  display: flow-root;
  max-width: 960px;
}
.profile > img,
.profile__mark {
  float: left;
  display: block;
  width: 280px;
  max-width: 42%;
  height: auto;
  margin: 0 var(--s-64) 12px 0;
}
.profile__mark {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--c-ink);
  color: var(--c-cream);
}
.profile__mark span {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 64px;
  letter-spacing: 1px;
  line-height: 1;
}
.profile__copy { min-width: 0; }
.profile__copy .h2 { max-width: none; }
.profile__role {
  margin-top: 10px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.3;
}
.profile__copy p {
  font-size: var(--t-band);
  line-height: 1.6;
}
.profile__copy .h2 + .profile__role { margin-top: 12px; }
.profile__copy .profile__role + p { margin-top: 22px; }
.profile__copy p + p { margin-top: 18px; }

.agency-grid {
  list-style: none;
  margin: 72px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.agency {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 28px 20px 22px;
  background: var(--c-white);
  border-radius: var(--r-md);
  text-align: center;
  text-decoration: none;
  color: var(--c-ink);
}
.agency:hover { box-shadow: 0 8px 20px rgba(14, 42, 58, .08); }
.agency__logo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 88px;
}
.agency__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 88px;
  object-fit: contain;
}
.agency__name {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
}

.portrait { max-width: 380px; }
.portrait img {
  display: block;
  width: 100%;
  height: auto;
}
.portrait figcaption { margin-top: 14px; }
.portrait__name {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.25;
}
.portrait__role {
  margin-top: 4px;
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--c-ink-70);
}
.portrait + .prose { margin-top: var(--s-64); }
.prose + .portrait { margin-top: var(--s-64); }

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-24);
}
.video-card {
  background: var(--c-white);
  border-radius: var(--r-md);
  overflow: hidden;
}
.video-card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-ink);
}
.video-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-card__title {
  padding: 16px 20px 18px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.3;
}
.roadmap { margin-top: var(--s-40); max-width: 960px; }
.roadmap--wide {
  max-width: none;
  overflow-x: auto;
}
.roadmap img {
  display: block;
  width: 100%;
  height: auto;
}
.prose + .roadmap { margin-top: var(--s-40); }

.facts {
  max-width: 560px;
  padding: 22px 24px 20px;
  background: var(--c-cream);
  border-radius: var(--r-md);
  border-top: 6px solid var(--c-gold);
}
.facts__label {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.3;
}
.facts p {
  font-size: var(--t-band);
  line-height: 1.55;
}
.facts .facts__label + p { margin-top: 14px; }
.facts p + .facts__label { margin-top: 16px; }
.facts p + p { margin-top: 8px; }
.facts a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.facts + .prose { margin-top: var(--s-40); }
.prose + .facts { margin-top: var(--s-24); }

.media-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: var(--s-64);
  align-items: start;
}
.define-grid + .media-row,
.prose + .media-row { margin-top: var(--s-40); }
.media-row .prose { max-width: none; }
.media-row .portrait { max-width: none; }
.media-row__copy .prose + .prose { margin-top: var(--s-64); }
.media-row .define-grid {
  margin-top: var(--s-24);
  grid-template-columns: 1fr;
}
.media-row .define-grid + .prose { margin-top: var(--s-40); }

.contact-pair {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.contact-pair .offices {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.contact-pair .offices__lead { margin-bottom: 16px; }
.contact-pair .offices__grid {
  grid-template-columns: 1fr;
  gap: 16px;
}
.contact-pair .offices .qld-gmap-wrap { height: auto; }
.contact-pair .offices .qld-gmap { height: 260px; }
.contact-form-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
}
.contact-form-col .form { max-width: 520px; }

.offices {
  margin-top: var(--s-64);
  padding-top: var(--s-40);
  border-top: var(--bw) solid var(--c-rule);
}
.offices__lead {
  max-width: 36em;
  font-size: var(--t-band);
  line-height: 1.55;
  margin-bottom: var(--s-40);
  padding-left: 16px;
  border-left: 3px solid var(--c-gold);
}
.offices__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: var(--s-64);
  align-items: stretch;
}
.offices .qld-gmap-wrap {
  margin-top: 0;
  height: 100%;
}
.offices .qld-gmap { height: 100%; }
.offices .qld-cards { margin-top: 0; }
.qld-gmap-wrap {
  margin-top: 24px;
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(14, 42, 58, .04);
}
.qld-gmap {
  position: relative;
  width: 100%;
  height: 460px;
}
.qld-gmap .leaflet-container {
  width: 100%;
  height: 100%;
  font-family: var(--f-body);
  background: #dce6dc;
}
.qld-gmap .leaflet-control-zoom {
  border: var(--bw) solid var(--c-ink) !important;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: none !important;
  background-clip: padding-box;
}
.qld-gmap .leaflet-bar a,
.qld-gmap .leaflet-bar a:hover {
  color: var(--c-ink);
  background: #fff;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border: 0;
  border-bottom: 1px solid var(--c-ink);
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 18px;
  text-indent: 0;
}
.qld-gmap .leaflet-bar a:last-child { border-bottom: 0; }
.qld-gmap .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(244, 231, 206, .92);
  color: var(--c-ink-70);
  max-width: calc(100% - 12px);
}
.qld-gmap .leaflet-control-attribution a {
  color: var(--c-ink);
}
.qld-gmap .leaflet-div-icon.qld-pin {
  background: none;
  border: none;
  overflow: visible;
}
.qld-pin__pulse {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: var(--c-gold);
  opacity: 0;
  pointer-events: none;
  animation: qld-pulse 2.4s ease-out infinite;
}
.qld-pin__mark {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 28px;
  height: 36px;
  margin-left: -14px;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(14, 42, 58, .22));
}
.qld-pin__name {
  position: absolute;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  color: var(--c-ink);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 1px 2px #fff;
}
@keyframes qld-pulse {
  0%   { transform: scale(.55); opacity: .5; }
  70%  { opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

.qld-cards {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
.qld-card {
  background: var(--c-cream);
  border-radius: var(--r-md);
  padding: 20px 22px 18px;
  border-top: 6px solid transparent;
  cursor: pointer;
  transition: border-color 180ms cubic-bezier(.2, .7, .3, 1),
              background 180ms cubic-bezier(.2, .7, .3, 1),
              box-shadow 180ms cubic-bezier(.2, .7, .3, 1);
}
.qld-card:hover {
  box-shadow: 0 8px 20px rgba(14, 42, 58, .08);
}
.qld-card.is-active {
  background: var(--c-white);
  border-top-color: var(--c-gold);
  box-shadow: 0 10px 24px rgba(14, 42, 58, .08);
}
.qld-card:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}
.qld-card__place {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-ink-70);
}
.qld-card__title {
  margin-top: 6px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.25;
  color: var(--c-ink);
}
.qld-card p {
  font-size: var(--t-body);
  line-height: 1.5;
}
.qld-card__title + p { margin-top: 10px; }
.qld-card p + p { margin-top: 10px; }
.qld-card__sub {
  margin-top: 16px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-label);
  line-height: 1.35;
}
.qld-card a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.qld-card a[href^="tel"] { white-space: nowrap; }
.qld-card--static { cursor: default; }
.qld-card--static:hover { box-shadow: none; }

.split-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 48px;
  align-items: start;
}
.split-card .prose { max-width: none; }

.field--suburb { position: relative; z-index: 2; }
.suburb-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 4;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  background: var(--c-white);
  border: var(--bw) solid var(--c-ink);
  border-top: 0;
  box-shadow: 0 12px 24px rgba(14, 42, 58, .12);
}
.suburb-list[hidden] { display: none; }
.suburb-list__option {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  font-size: var(--t-body);
  line-height: 1.3;
  cursor: pointer;
}
.suburb-list__option[aria-selected="true"],
.suburb-list__option:hover { background: var(--c-cream); }
.suburb-list__post { color: var(--c-ink-70); font-variant-numeric: tabular-nums; }
.field__hint {
  margin-top: 8px;
  font-size: var(--t-label);
  color: var(--c-ink-70);
}
.field__hint[hidden] { display: none; }
/* Two headed sections sharing a band need more air between them than a
   heading needs from its own body. */
.prose + .prose { margin-top: var(--s-64); }

/* ------------------------------------------------- The IFYS notice ----- */

/* Centred over a blurred page, because it is the first thing the site says and
   it is asking for one click before anything else. Two panels: the old figure
   on Ink, the mark and the words on White - each asset on the ground it was
   drawn for.

   The layer scrolls and the card centres with `margin: auto` rather than
   `place-items: center`, so on a viewport too short for the card the top of it
   stays reachable instead of being cut off above the fold. */
.notice {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  overflow-y: auto;
  padding: var(--s-24);
}
.notice[hidden] { display: none; }

/* Fixed, not absolute: .notice scrolls, and a scrolling scrim would slide off
   the page behind the card. Dark enough that the ink art panel still reads
   as a card edge against the ink hero, rather than dissolving into it. */
.notice__scrim {
  position: fixed;
  inset: 0;
  background: rgba(14, 42, 58, .70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.notice__card {
  position: relative;   /* lifts the card off the scrim */
  margin: auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  width: 720px;
  max-width: 100%;
  overflow: hidden;
  /* Ink, not White: the radius anti-aliases against the card ground, so a
     white ground showed a few white pixels at the left corners of the art
     panel. Ink matches the panel, so any bleed is invisible. */
  background: var(--c-ink);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18),
              0 28px 72px rgba(14, 42, 58, .55);
}
/* The card takes focus when the modal opens so Tab stays inside it, but it
   is not a control - so no focus ring. */
.notice__card:focus { outline: none; }

/* The figure is scaled to roughly 2.7x the panel width and anchored on his
   chest, so the panel holds a head-and-torso crop crossing the frame rather
   than a whole small man standing inside it. The legs and the tail of the
   cape fall outside and are clipped. */
.notice__art {
  position: relative;
  overflow: hidden;
  background: var(--c-ink);
  /* Same radius as the card on the left edge, so the fill itself is round
     rather than relying only on the parent's overflow clip. */
  border-radius: 10px 0 0 10px;
}
/* Scaled against the panel rather than in pixels, so the head-and-belt framing
   holds whatever height the card ends up at once the real copy lands. */
.notice__art img {
  position: absolute;
  top: -4.6%;
  left: 50%;
  height: 180%;
  width: auto;
  max-width: none;   /* the global img reset would cap it at the panel width */
  transform: translateX(-64%);
}

/* The mark, the greeting it introduces, then who is behind the page, then the
   way out. The greeting and the IFYS lines are two separate thoughts, so a
   hairline carries the join rather than a bigger gap. */
.notice__panel {
  position: relative;
  padding: 40px;
  background: var(--c-white);
}
.notice__logo {
  width: 180px;
  max-width: 100%;
  height: auto;
}
.notice__line {
  margin-top: 24px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-tagline);
  line-height: var(--lh-head);
  color: var(--c-ink);
}
.notice__note {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--c-rule);
}
.notice__note-head {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: var(--lh-head);
  color: var(--c-ink);
}
.notice__note-body {
  margin-top: 10px;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-ink-70);
}
/* nowrap so the number never breaks across lines mid-digits. */
.notice__note-body a { color: var(--c-ink); white-space: nowrap; }
.notice__ok { margin-top: 28px; }

/* Icon-only escape hatch, drawn in CSS the way the nav toggle is. */
.notice__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink-65);
  cursor: pointer;
  transition: color 180ms cubic-bezier(.2, .7, .3, 1);
}
.notice__close:hover { color: var(--c-ink); }
.notice__close::before,
.notice__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1.5px;
  margin: -1px 0 0 -6.5px;
  background: currentColor;
}
.notice__close::before { transform: rotate(45deg); }
.notice__close::after  { transform: rotate(-45deg); }

/* The layer fades, the card rises into it a touch behind the fade. */
@media (scripting: enabled) {
  .notice {
    opacity: 0;
    transition: opacity 320ms cubic-bezier(.2, .7, .3, 1);
  }
  .notice__card {
    transform: translateY(12px) scale(.985);
    transition: transform 420ms cubic-bezier(.2, .7, .3, 1);
  }
  .notice[data-open] { opacity: 1; }
  .notice[data-open] .notice__card { transform: none; }
}

@media (min-width: 1024px) {
  .br-wide { display: inline; }
}


/* ==========================================================================
   PHONE AND TABLET
   From "The sketch, phone" - guidance PDF page 7, drawn at 390px wide.
   Measured off that sketch: container 342px (24px gutters), section padding
   64px, stacked cards with a 16px gap. Everything above this rule is the
   1440px sketch; below 1024px the page collapses to the single column the
   phone sketch draws.
   ========================================================================== */

/* The one-line bar needs the width. Below this, the same menu panel as
   the phone, while the rest of the page stays the desktop layout. */
@media (max-width: 1319px) {
  .topbar__cta { order: 2; margin-left: auto; }
  .nav-toggle { display: block; order: 3; }
  .topbar__panel {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 41;
    padding: 8px 28px 24px;
    background: var(--c-white);
    border-bottom: 1px solid var(--c-rule);
    box-shadow: 0 16px 32px rgba(14, 42, 58, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity    180ms cubic-bezier(.2, .7, .3, 1),
                transform  180ms cubic-bezier(.2, .7, .3, 1),
                visibility 0s linear 180ms;
  }
  .topbar__panel[data-open] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s;
  }
  .topnav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .topnav__list li + li { border-top: 1px solid var(--c-rule); }
  .topnav__link { padding: 14px 0 14px 14px; }
  .topnav__link--support { margin: 8px 0; }
  .topnav__link--support::after {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 3px;
    height: auto;
  }
  .topnav__link::after {
    top: 0;
    right: auto;
    bottom: 0;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: center top;
  }
  .topnav__link:hover::after,
  .topnav__link:focus-visible::after,
  .topnav__link[aria-current="page"]::after { transform: scaleY(1); }
}

@media (max-width: 1023px) {

  :root {
    --gutter:    24px;
    --t-display: 32px;   /* section h2: 44px on desktop */
    --t-tagline: 20px;   /* "If not you, who?": 29px on desktop */
    --t-h2-mid:  30px;   /* "What happens next": 34px on desktop */
    --t-quote:   21px;   /* the carer quote: 26px on desktop */
    --t-prompt:  20px;   /* "Still reading?" */
  }

  .br-narrow { display: inline; }

  .container { padding-inline: var(--gutter); }

  /* ---- Top bar: the logo, and the toggle that opens everything else ---- */
  .topbar__inner {
    min-height: 72px;
    padding: 16px var(--gutter);
  }
  .topbar__logo img { width: 124px; }
  .topbar__cta {
    order: 2;
    margin-left: auto;
    padding: 10px 16px;
    font-size: 14px;
  }
  .nav-toggle { display: block; order: 3; }

  /* The panel stops being display:contents and becomes a box, hanging under
     the bar rather than pushing the page down. It is always in the layout so
     opacity and transform have something to animate; visibility takes it out
     of the tab order once the fade has finished. */
  .topbar__panel {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 41;
    padding: 8px var(--gutter) 24px;
    background: var(--c-white);
    border-bottom: 1px solid var(--c-rule);
    box-shadow: 0 16px 32px rgba(14, 42, 58, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity    180ms cubic-bezier(.2, .7, .3, 1),
                transform  180ms cubic-bezier(.2, .7, .3, 1),
                visibility 0s linear 180ms;
  }
  .topbar__panel[data-open] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s;
  }

  .topnav__link--support::after {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 3px;
    height: auto;
  }
  .topnav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .topnav__list li + li { border-top: 1px solid var(--c-rule); }
  .topnav__link { padding: 14px 0 14px 14px; }

  /* Stacked, a 2px rule the width of the whole row reads as a divider, not as
     a marker. So the same element turns on its side: an accent bar down the
     left edge, wiped in from the top. */
  .topnav__link::after {
    top: 0;
    right: auto;
    bottom: 0;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: center top;
    transition: transform 180ms cubic-bezier(.2, .7, .3, 1);
  }
  .topnav__link:hover::after,
  .topnav__link:focus-visible::after,
  .topnav__link[aria-current="page"]::after { transform: scaleY(1); }

  /* ---- 1 Hero: the ink band, then the artwork full width beneath it ---- */
  .hero { grid-template-columns: 1fr; }
  .hero__band { padding: 64px var(--gutter); }
  .lockup__eyebrow { font-size: 14px; letter-spacing: 0.8px; }
  .hero__body { margin-top: 30px; }
  .hero__actions {
    margin-top: 40px;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .hero__actions .btn { display: block; }
  .hero__actions .link-underline { text-align: center; }

  /* ---- section rhythm ---- */
  .check, .enquiry, .draw-promo, .draw, .academy, .ifys { padding-block: 64px; }
  .check .lead, .academy .lead { max-width: none; }

  /* ---- 2 The first question: six cards in one column ---- */
  .check__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .check__footer { margin-top: 40px; }
  .check__footer .btn { display: block; }

  /* ---- 3 The form, then 4 What happens next beneath it ---- */
  .enquiry__grid { grid-template-columns: 1fr; gap: 56px; }
  .form { padding: 24px; }
  .form__row { grid-template-columns: 1fr; row-gap: 0; }   /* one field per row */
  /* stacked, the second field of the first row must not keep the first row's
     larger top margin - side by side on desktop that margin aligns them. */
  .form .h2 + .form__row .field + .field,
  .form > .form__row:first-child .field + .field { margin-top: 19px; }
  .next { padding-top: 0; }

  /* ---- 5 The draw promo, then the entry page ---- */
  .draw-promo__grid,
  .draw__intro,
  .draw__banner { grid-template-columns: 1fr; }
  .draw-promo__title { font-size: 72px; }
  .draw-promo__cape { justify-self: center; max-width: 320px; }
  .draw-promo__cape img { width: 100%; }
  .prize__card { grid-template-columns: 88px minmax(0, 1fr); }

  /* ---- 6 Short breaks: artwork, then the green band ---- */
  .breaks { grid-template-columns: 1fr; }
  .breaks__art { aspect-ratio: 390 / 294; }
  .breaks__band { padding: 64px var(--gutter); }
  .breaks__content { max-width: none; }

  /* ---- 7 The Academy: four cards in one column, the track on its side ---- */
  .academy__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 40px;
    padding-top: 0;
    padding-left: 30px;        /* the spine runs down here */
  }
  .card__node {
    top: 26px;                 /* level with the step number inside the card */
    bottom: -16px;             /* through the stack gap, onto the next dot */
    left: -30px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .card--step:last-child .card__node { bottom: auto; width: 2px; height: 0; }
  .card__node::before { top: 0; left: -6px; }
  .next-evening {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 24px;
  }
  .next-evening .btn { display: block; }

  /* ---- Content pages ---- */
  .page-head { padding-block: 48px; }
  .page-head--tight { padding-block: 32px; }
  .page-hero img { height: 200px; object-position: center 18%; }
  .page-hero__bar { padding-block: 24px; }
  .band { padding-block: 64px; }
  .band--opener { padding-block: 40px; }
  .prose { max-width: none; }
  .care-grid, .define-grid { grid-template-columns: 1fr; margin-top: 32px; }
  .care-grid + .prose,
  .define-grid + .prose { margin-top: 32px; }
  .prose + .prose { margin-top: 48px; }
  .profile > img,
  .profile__mark {
    float: none;
    width: 100%;
    max-width: 280px;
    margin: 0 0 32px;
  }
  .split-card { grid-template-columns: 1fr; gap: 32px; }
  .agency-grid { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
  .ph--headshot, .ph--portrait { min-height: 220px; }
  .video-grid { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .compare .prose { margin-top: 32px; }
  .compare .define-grid {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 0;
  }
  .strip__inner { grid-template-columns: 1fr; gap: 24px; }
  .page-banner img { height: 200px; object-position: center 18%; }
  .portrait + .prose { margin-top: 40px; }
  .prose + .portrait { margin-top: 40px; }
  .media-row,
  .contact-pair,
  .offices__grid { grid-template-columns: 1fr; gap: 32px; }
  .roadmap--wide img { width: 960px; max-width: none; }
  .contact-pair .offices .qld-gmap { height: 240px; }
  .offices { margin-top: 48px; padding-top: 32px; }
  .qld-gmap,
  .offices .qld-gmap { height: 360px; }
  .offices .qld-gmap-wrap { height: auto; }

  /* ---- 8 IFYS: logo above the text ---- */
  .ifys__grid { grid-template-columns: 1fr; gap: 32px; }
  .ifys__logo { margin-top: 0; width: 220px; }
  .ifys__body { max-width: none; }

  /* ---- 9 Footer: stacked, acknowledgement under the links ---- */
  .footer-bar { padding-block: 40px; }
  .footer-bar__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .footer-bar__ack { gap: 20px; }
  .footer-bar__commit,
  .footer-bar__commit img { width: 112px; height: 112px; }

  /* ---- The IFYS notice: narrower, so it clears a 360px screen ---- */
  .notice { padding: var(--s-16); }
  .notice__card { grid-template-columns: 1fr; width: 420px; }
  .notice__art {
    height: 176px;
    border-radius: 10px 10px 0 0;   /* stacked: round the top edge, not the side */
  }
  /* A landscape band wants a different window on the figure: head and
     shoulders rather than the tall head-to-belt crop. -58% rather than -50%
     because his body sits right of centre in the artwork, and centring the
     file would leave his head against the right edge. */
  .notice__art img {
    top: -4%;
    width: 140%;
    height: auto;
    transform: translateX(-58%);
  }
  .notice__panel { padding: 24px; }
  .notice__logo { width: 152px; }
  .notice__line { font-size: var(--t-prompt); }
  .notice__note { margin-top: 20px; padding-top: 20px; }
}


/* ==========================================================================
   REDUCED MOTION
   Nothing on the page needs movement to be understood: every animated state
   is also a colour, a position or a presence. So for anyone who has asked
   their system for less movement, the states still change - instantly.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .topnav__link,
  .topnav__link::after,
  .topbar__panel,
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    transition: none;
  }

  /* The roadmap is drawn, not animated in. */
  .academy__grid[data-reveal] .card--step {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* The notice is there, or it is not. */
  .notice, .notice__card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .qld-card { transition: none; }
  .qld-pin__pulse { animation: none; opacity: 0; }
}