/* Approved Plans. Reference: GOV.UK childcare account, measured 4 September 2026.
   Responsive type and spacing follow the GOV.UK Design System. Helvetica is
   the recommended alternative for sites outside GOV.UK. Our own brand assets
   and WhatsApp colours are retained. See docs/design-reference.md. */

:root {
  --black: #0b0c0c;
  --white: #ffffff;
  --green: #25d366;
  --green-dark: #075e54;
  --blue: #1d70b8;
  --grey1: #484949;
  --grey2: #cecece;
  --grey3: #f3f3f3;
  /* The hairline the tables, summary lists and section breaks draw: lighter
     than grey2, so a dense page of rows reads as texture, not as bars. */
  --rule: #cecece;
  /* The refreshed brand: brand = blue primary, surface = blue tint-95,
     surface-border = blue tint-50, link = blue shade-10, link-hover = blue
     shade-50. From settings/_colours-palette--internal.scss and
     _colours-functional.scss. */
  --brand: #1d70b8;
  --surface: #f4f8fb;
  --surface-border: #8eb8dc;
  --blue-tint-80: #d2e2f1;
  --link: #1a65a6;
  --link-hover: #0f385c;
  --red: #ca3535;
  --yellow: #ffdd00;
  /* GOV.UK's own button green, read off their live CSS 04/09/2026: green
     primary over shade-50, hovering to shade-25. */
  --btn: #0f7a52;
  --btn-hover: #0b5c3e;
  --btn-edge: #083d29;
  --wa: #25d366;
  --wa-hover: #1fb859;
  --wa-ink: #0b0c0c;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --measure: 1020px;
  /* The measured 630px reading column at the reference desktop width. */
  --text-measure: 39.375rem;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: var(--font); -webkit-text-size-adjust: 100%; background: var(--white); }
body { margin: 0; color: var(--black); background: var(--white); font-size: 19px; line-height: 25px; }
img, svg { max-width: 100%; display: inline-block; vertical-align: middle; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Responsive headings: 32/35 to 48/50; section headings 21/25 to 24/30. */
h1, .h1 { font-size: 32px; line-height: 35px; font-weight: 700; margin-bottom: 20px; text-wrap: wrap; }
h2, .h2 { font-size: 21px; line-height: 25px; font-weight: 700; margin-bottom: 15px; text-wrap: wrap; }
h3, .h3 { font-size: 19px; line-height: 25px; font-weight: 700; margin-bottom: 15px; text-wrap: wrap; }
h4, .h4 { font-size: 19px; line-height: 25px; font-weight: 700; margin-bottom: 15px; }
p, .body { font-size: 19px; line-height: 25px; margin-bottom: 15px; max-width: var(--text-measure); text-wrap: wrap; }
/* Supporting text stays a step above body size, below the page heading. */
.rung { font-size: 21px; line-height: 25px; font-weight: 400; color: var(--grey1); margin-bottom: 20px; max-width: none; text-wrap: wrap; }
.hero-claim { font-size: 19px; line-height: 25px; font-weight: 400; padding: 15px 20px; border-left: 5px solid var(--btn); background: #f3f8f6; color: var(--black); margin-bottom: 20px; max-width: var(--text-measure); }
.lede { font-size: 19px; line-height: 25px; margin-bottom: 15px; }
/* 19 is the floor for anything meant to be read. Only a tag, the step
   counter and the footer's legal line drop to 16. */
.small { font-size: 19px; line-height: 25px; }
.caption { display: block; font-size: 19px; line-height: 25px; color: var(--grey1); margin-bottom: 10px; max-width: var(--text-measure); }
/* Step counter above a step heading. */
.step-caption { display: block; font-size: 16px; line-height: 20px; font-weight: 700; color: var(--grey1); margin-bottom: 5px; }
.caption-l { display: block; font-size: 19px; line-height: 25px; color: var(--grey1); margin-bottom: 15px; }
ul, ol { font-size: 19px; line-height: 25px; margin-bottom: 15px; padding-left: 20px; max-width: var(--text-measure); }
li { margin-bottom: 10px; }
.list-plain { list-style: none; padding-left: 0; }
strong, b { font-weight: 700; }
hr, .rule { border: 0; border-top: 1px solid var(--grey2); margin: 30px 0; }
.rule-dark { border-top-color: var(--black); }

@media (min-width: 641px) {
  h1, .h1 { font-size: 48px; line-height: 50px; margin-bottom: 30px; }
  h2, .h2 { font-size: 24px; line-height: 30px; margin-bottom: 20px; }
  .rung { font-size: 24px; line-height: 30px; }
  .hero-claim { font-size: 19px; line-height: 25px; }
  h3, .h3 { margin-bottom: 20px; }
  p, .body, ul, ol, .lede { margin-bottom: 20px; }
  hr, .rule { margin: 50px 0; }
}

/* Links */
a { color: var(--link); text-decoration: underline; text-decoration-thickness: max(1px, .0625rem); text-underline-offset: .1578em; }
a:hover { color: var(--link-hover); text-decoration-thickness: max(3px, .1875rem, .12em); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 0;
  background: var(--yellow);
  color: var(--black);
  text-decoration: none;
}
.skip { position: absolute; left: -9999px; top: 0; padding: 15px 20px; background: var(--yellow); color: var(--black); font-size: 19px; line-height: 25px; z-index: 100; }
.skip:focus { left: 0; outline: 3px solid var(--yellow); }

/* Layout: 960px width container, 15px gutters on a phone and 30px above. */
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 15px; }
@media (min-width: 641px) { .wrap { padding: 0 30px; } }
main { display: block; }
/* govuk-main-wrapper: 20px of air above and below the page on a phone, 40px
   above tablet. The footer takes no margin of its own; this is the gap. */
main.wrap { padding-top: 20px; padding-bottom: 20px; }
@media (min-width: 641px) { main.wrap { padding-top: 30px; padding-bottom: 30px; } }
.grid { display: grid; gap: 20px; }
@media (min-width: 641px) { .grid { gap: 30px; } }
@media (min-width: 641px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
/* Keep the form and project cards readable on tablets before adding a sidebar. */
@media (min-width: 1000px) {
  .grid-23 { grid-template-columns: minmax(0, calc(66.6667% - 10px)) minmax(0, 1fr); }
}
/* A grid cell's last block does not add its own margin to the row gap. */
.grid > * > :last-child { margin-bottom: 0; }
.stack > * + * { margin-top: 20px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 15px; } .mb-1 { margin-bottom: 15px; }
.mt-2 { margin-top: 20px; } .mb-2 { margin-bottom: 20px; }
/* The one section gap on every page. A visible rule does the separating on
   the pages that have one; this is the fallback where a section stands alone. */
.mt-3 { margin-top: 20px; } .mb-3 { margin-bottom: 20px; }
@media (min-width: 641px) {
  .mt-2 { margin-top: 30px; } .mb-2 { margin-bottom: 30px; }
  .mt-3 { margin-top: 30px; } .mb-3 { margin-bottom: 30px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hide-s { display: none; }
@media (min-width: 641px) { .hide-s { display: initial; } .hide-l { display: none; } }

/* Header (the brand bar) */
/* components/header/_mixin.scss: brand blue, white ink, the mark at the
   logotype's size with 16px above it and 14px under. The same on every
   width, so the bar is about 60px tall on a phone as well as a laptop. */
.header { background: var(--brand); color: var(--white); border-bottom: 1px solid transparent; position: relative; }
.header a { color: var(--white); text-decoration: none; }
.header a:hover { text-decoration: underline; text-decoration-thickness: 3px; }

/* The wordmark reads as one mark, not three labels. GOV.UK's logotype is set
   at 31px; ours is a sentence, not six letters, so the size contrast does the
   work its logotype gets from its shape: "Planning" at 31px, the tail at the
   19 scale beside it. Both stay white - a tint would read as the designed
   answer, but white on brand blue is 4.54:1 and a tint is not. */
.brand { display: inline-flex; align-items: baseline; gap: 0; white-space: nowrap; line-height: 1; }
.brand .brand-word { font-size: 31px; font-weight: 700; letter-spacing: -0.015em; }
.brand .brand-tail { font-size: 19px; line-height: 25px; font-weight: 400; letter-spacing: 0; margin-left: 10px; }
/* Our own crown, never the GOV.UK one. Sized to the cap height of the mark
   and lifted so it sits on the cap line rather than hanging off the baseline.
   Decorative, so it can take blue tint-80 and recede. */
.brand .brand-crown { width: 22px; height: 20px; margin-left: 10px; color: var(--blue-tint-80); transform: translateY(-2px); flex-shrink: 0; }
.header a:focus-visible { color: var(--black); }

/* Service navigation: GOV.UK's own row under the header. The site's links and
   its one action live here rather than on the brand bar, because the bar
   carries the mark at the logotype's full size and has no room to argue with
   three links, and because a GDS green button on brand blue is two fills at
   1.9:1 - on the tint-95 ground it reads as the one action on the page.
   19 scale, 15px above and below, spacing(6) between items. GOV.UK collapses
   these behind a Menu toggle below tablet; there is no script here and no
   spare word for a toggle label, so on a phone they stay visible and the
   button wraps to the row under them, keeping the right edge. */
.servicenav { background: var(--surface); color: var(--black); border-bottom: 1px solid var(--surface-border); font-size: 19px; line-height: 25px; }
.servicenav .wrap { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0 10px; padding-top: 10px; padding-bottom: 10px; }
@media (min-width: 641px) { .servicenav .wrap { align-items: center; gap: 0 30px; padding-top: 0; padding-bottom: 0; } }
/* Not flex-grow: the row distributes its free space evenly between the
   three items, so the gaps repeat instead of packing the two on the right. */
.nav { display: block; flex: 0 0 auto; min-width: 0; }
@media (min-width: 641px) { .nav { display: flex; align-items: center; } }
.nav-toggle { min-width: 0; }
/* The Menu control. A phone cannot hold three 19px links and the button on
   one 345px line, so below 641px the links sit behind this and push the page
   down when it is opened, the way GOV.UK's own row does behind its toggle.
   It is a <details>, because there is no script on this site. 16/20 makes it
   exactly the button's 40px, so the two sit level on the row. */
.nav-menu { list-style: none; cursor: pointer; display: inline-block; font-size: 16px; line-height: 20px; padding: 10px 15px 10px 0; font-weight: 700; color: var(--link); position: relative; }
.nav-menu::-webkit-details-marker { display: none; }
.nav-menu::after { content: ""; position: absolute; right: 0; top: 15px; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nav-toggle[open] > .nav-menu::after { transform: rotate(-135deg); top: 18px; }
.nav-menu:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; font-size: inherit; max-width: none; }
/* Open on a phone the list is a column under the control, in flow, so the
   page moves down and nothing is painted over. */
@media (max-width: 640px) {
  .nav-toggle[open] > .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 10px; }
  .nav-toggle[open] > .nav-list > .nav-item { padding: 10px 0; }
  /* No row to underline in the panel, so the active section takes the left
     border GOV.UK gives it below tablet. */
  .nav-toggle[open] > .nav-list > .nav-item-active { padding-left: 10px; border-left: 5px solid var(--link); }
}
/* Above the breakpoint the control goes and the list is a row again. The
   reveal needs ::details-content; where that is missing the Menu control
   stays on the row, so the links are always reachable. */
@media (min-width: 641px) {
  .nav-list { gap: 0 30px; }
  @supports selector(details::details-content) {
    .nav-menu { display: none; }
    .nav-toggle::details-content { content-visibility: visible; block-size: auto; }
  }
}
/* 15px above and below a 29/19 line box makes the row 60px, GOV.UK's own
   arithmetic; the active item trades 5px of its bottom padding for the
   border so the row height never moves. */
.nav-item { margin: 0; padding: 15px 0; line-height: 25px; }
@media (min-width: 641px) { .nav-item { line-height: 29px; } }
@media (min-width: 641px) { .nav-item-active { padding-bottom: 10px; border-bottom: 5px solid var(--link); } }
.servicenav a.nav-link { color: var(--link); text-decoration: none; }
.servicenav a.nav-link:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.nav-item-active a.nav-link { color: var(--black); }
/* Sized to the row's line box, with the pressed edge a GOV.UK button always
   carries on a light ground. */
.servicenav .btn-nav { margin: 0; font-size: 16px; line-height: 20px; min-height: 40px; height: 40px; padding: 0 10px; border: 0; border-bottom: 2px solid var(--btn-edge); display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
@media (min-width: 641px) { .servicenav .btn-nav { font-size: 19px; line-height: 25px; padding: 0 15px; } }
.servicenav .btn-nav svg { display: none; width: 13px; height: 14px; flex-shrink: 0; }
@media (min-width: 641px) { .servicenav .btn-nav svg { display: inline-block; } }

/* The WhatsApp route, on the service row. As a filled block it was the
   biggest and brightest object in the chrome, wider than the action it sits
   beside, which put the routes in the wrong rank. The green is now on the
   glyph alone - the mark everyone recognises - and the words take the ink, so
   the only filled block on the row is the one thing to do. */
.wa-link { color: var(--black); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; height: 40px; flex-shrink: 0; }
.wa-link:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.wa-link span.plain { font-weight: 400; }
/* The mark is the one place #25D366 appears in the chrome. On the WhatsApp
   button the glyph keeps the button ink, or it would vanish into the fill. */
.wa-link .wa-glyph { color: var(--wa); }
.wa-link svg { margin-right: 10px; }


/* Phase banner */
.phase { border-bottom: 1px solid var(--grey2); }
.phase .wrap { display: flex; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; font-size: 16px; line-height: 20px; }

/* Tag. GDS dropped tracked capitals from tags for legibility, so the tag
   renders the words it was given. */
.tag { display: inline-block; font-size: 16px; line-height: 20px; font-weight: 700; padding: 5px 15px; background: var(--blue); color: var(--white); white-space: nowrap; }
.tag-grey { background: var(--grey3); color: var(--black); border: 1px solid var(--grey2); }
.tag-green { background: #cce2d8; color: #005a30; }
.tag-red { background: #f6d7d2; color: #942514; }
.tag-yellow { background: #fff7bf; color: #594d00; }
.tag-blue { background: var(--blue-tint-80); color: #0f385c; }

/* Buttons */
.btn {
  display: inline-block;
  box-sizing: border-box;
  margin: 0 0 20px;
  padding: 10px 20px;
  min-height: 40px;
  border: 2px solid transparent;
  box-shadow: 0 2px 0 var(--button-edge, var(--btn-edge));
  border-radius: 0;
  font-size: 19px;
  line-height: 25px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  vertical-align: top;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: var(--btn);
  color: var(--white);
}
.btn:hover { background: var(--btn-hover); color: var(--white); text-decoration: none; }
.btn:active { position: relative; top: 2px; box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 0; background: var(--btn-hover); color: var(--white); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-start { padding: 15px 20px; }
.btn-start svg { width: 17px; height: 19px; margin-left: 15px; vertical-align: middle; flex-shrink: 0; }
.btn-secondary { background: var(--grey3); color: var(--black); --button-edge: #929191; }
.btn-secondary:hover { background: #dbdad9; color: var(--black); }
.btn-secondary:focus-visible { background: var(--yellow); color: var(--black); }
.btn-whatsapp { background: var(--wa); color: var(--wa-ink); --button-edge: var(--green-dark); display: inline-flex; align-items: center; gap: 15px; }
.btn-whatsapp:hover { background: var(--wa-hover); color: var(--wa-ink); }
.btn-whatsapp:focus-visible { background: var(--yellow); color: var(--black); }
.btn-warning { background: var(--red); color: var(--white); --button-edge: #55150b; }
.btn-warning:hover { background: #aa2a16; }
.btn-block { width: 100%; }
.btn-group { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-bottom: 20px; }
.btn-group .btn { margin-bottom: 0; }

/* Forms */
/* One gap between form groups at every width. */
.form-group { margin-bottom: 20px; }
.form-group-error { padding-left: 15px; border-left: 5px solid var(--red); }
label, .label { display: block; font-size: 19px; line-height: 25px; font-weight: 400; margin-bottom: 10px; }
.label-l { font-size: 19px; line-height: 25px; margin-bottom: 15px; }
legend { padding: 0; font-weight: 700; font-size: 19px; line-height: 25px; margin-bottom: 15px; }
@media (min-width: 641px) { .label-l, legend { font-size: 24px; line-height: 30px; margin-bottom: 20px; } }
/* Legend carrying the page heading: the H1 keeps the hero sizes, the legend
   adds nothing of its own. */
legend.legend-heading { font-size: inherit; font-weight: 400; margin-bottom: 0; width: 100%; }
legend.legend-heading h1 { margin-bottom: 10px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.hint { font-size: 19px; line-height: 25px; color: var(--grey1); margin-bottom: 15px; max-width: var(--text-measure); }
.error-message { font-size: 19px; line-height: 25px; font-weight: 700; color: var(--red); margin-bottom: 15px; }
.input, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], textarea, select {
  width: 100%;
  height: 40px;
  padding: 5px;
  border: 2px solid var(--black);
  border-radius: 0;
  background: var(--white);
  font-size: 19px;
  line-height: 25px;
  -webkit-appearance: none;
  appearance: none;
}
textarea { height: auto; min-height: 120px; resize: vertical; }
select { background: var(--white) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%230b0c0c' d='M3 6l7 8 7-8z'/%3E%3C/svg%3E") no-repeat right 10px center; padding-right: 30px; }
/* The focus ring thickens the border by 2px each side; the padding gives the
   2px back so the text does not move. A compensation, not a spacing value. */
.input:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="search"]:focus, textarea:focus, select:focus {
  outline: 3px solid var(--yellow);
  outline-offset: 0;
  border-width: 4px;
  padding: 3px;
}
.input-error, .form-group-error input, .form-group-error textarea, .form-group-error select { border-color: var(--red); }
/* The example sits in the field. Grey1 at the field's own size, upright: a
   placeholder that looks like an italic afterthought reads as an error. */
::placeholder { color: var(--grey1); opacity: 1; font-style: normal; }
.input-w-10 { max-width: 23ex; } .input-w-20 { max-width: 41ex; } .input-w-30 { max-width: 59ex; }
.input-suffix-wrap { display: flex; align-items: stretch; }
.input-suffix-wrap .input { flex: 1 1 auto; }
.suffix { display: inline-flex; align-items: center; padding: 0 15px; background: var(--grey3); border: 2px solid var(--black); border-left: 0; font-size: 19px; line-height: 25px; white-space: nowrap; }

/* Radios and checkboxes (large GOV.UK controls) */
.radios, .checkboxes { margin-bottom: 20px; }
.radio, .checkbox { position: relative; display: flex; align-items: flex-start; gap: 15px; min-height: 40px; padding: 5px 0; margin-bottom: 15px; }
.radio input, .checkbox input { appearance: none; -webkit-appearance: none; width: 34px; height: 34px; min-width: 34px; margin: 0; border: 2px solid var(--black); background: var(--white); cursor: pointer; position: relative; flex-shrink: 0; }
.radio input { border-radius: 50%; }
.radio input:checked::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--black); }
.checkbox input:checked::before { content: ""; position: absolute; left: 8px; top: 3px; width: 10px; height: 18px; border: solid var(--black); border-width: 0 4px 4px 0; transform: rotate(45deg); }
.radio input:focus-visible, .checkbox input:focus-visible { outline: 4px solid var(--yellow); outline-offset: 0; }
.radio label, .checkbox label { font-weight: 400; margin: 0; padding-top: 10px; cursor: pointer; }
.radio .hint, .checkbox .hint { margin: 10px 0 0; }
.radios-inline { display: flex; flex-wrap: wrap; gap: 0 30px; }
.radio-divider { font-size: 19px; line-height: 25px; padding: 0 0 15px 15px; }

/* Panels */
.panel { padding: 20px; margin-bottom: 20px; border: 5px solid var(--btn); background: var(--white); color: var(--black); text-align: left; }
@media (min-width: 641px) { .panel { padding: 30px; margin-bottom: 30px; } }
.panel-title { font-size: 19px; line-height: 25px; font-weight: 700; margin-bottom: 15px; text-wrap: wrap; }
@media (min-width: 641px) { .panel-title { font-size: 31px; line-height: 40px; margin-bottom: 20px; } }
.panel-body { font-size: 19px; line-height: 25px; }
.panel-body p, .panel-body ul { font-size: inherit; line-height: inherit; }
.panel-body > :last-child { margin-bottom: 0; }
.panel-neutral { border-color: var(--black); }
.panel-grey { border-color: var(--grey2); background: var(--grey3); }
.panel-warning { border-color: var(--red); }
.panel-whatsapp { border-color: var(--green-dark); }

/* Inset text */
.inset { padding: 15px 20px; margin-bottom: 20px; border-left: 5px solid var(--grey2); clear: both; max-width: var(--text-measure); }
@media (min-width: 641px) { .inset { margin-bottom: 30px; } }
.inset > :last-child { margin-bottom: 0; }

/* Warning text */
.warning { position: relative; padding: 10px 0 10px 50px; margin-bottom: 20px; font-weight: 700; }
.warning-icon { position: absolute; left: 0; top: 8px; width: 34px; height: 34px; border: 3px solid var(--black); border-radius: 50%; background: var(--black); color: var(--white); text-align: center; font-size: 19px; line-height: 28px; font-weight: 700; }

/* Summary list */
.summary { font-size: 19px; line-height: 25px; margin-bottom: 20px; width: 100%; border-collapse: collapse; }
@media (min-width: 641px) { .summary { margin-bottom: 30px; } }
.summary-row { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--rule); padding: 15px 0; gap: 10px; }
@media (min-width: 641px) { .summary-row { grid-template-columns: 38.2% 1fr; gap: 20px; } }
.summary-key { font-weight: 700; margin: 0; }
.summary-value { margin: 0; overflow-wrap: break-word; }
.summary-value > :last-child { margin-bottom: 0; }
.summary-row-borderless { border-bottom: 0; }

/* Accordion and details (native, no JS) */
.accordion { margin-bottom: 30px; border-bottom: 1px solid var(--rule); max-width: var(--text-measure); }
.accordion details { border-top: 1px solid var(--rule); }
.accordion summary { list-style: none; cursor: pointer; padding: 20px 0; font-size: 19px; line-height: 25px; font-weight: 700; color: var(--black); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 19px; line-height: 25px; color: var(--black); flex-shrink: 0; }
.accordion details[open] summary::after { content: "\2013"; }
.accordion summary:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.accordion .accordion-body { padding: 0 0 20px; }
.accordion .accordion-body p { color: var(--grey1); margin-bottom: 0; }
.details { margin-bottom: 20px; font-size: 19px; line-height: 25px; }
.details summary { display: inline-block; color: var(--link); text-decoration: underline; cursor: pointer; margin-bottom: 10px; }
.details summary:hover { color: var(--link-hover); }
.details .details-body { padding: 15px 20px; border-left: 5px solid var(--grey2); }

/* Notification banner */
.notify { border: 5px solid var(--blue); margin-bottom: 20px; }
.notify-head { background: var(--blue); color: var(--white); padding: 10px 20px; font-weight: 700; font-size: 19px; line-height: 25px; }
.notify-body { padding: 20px; font-size: 19px; line-height: 25px; }
.notify-body > :last-child { margin-bottom: 0; }
.notify-success { border: 0; border-left: 5px solid var(--btn); background: #f3f8f6; }
.notify-success .notify-head { background: transparent; color: var(--black); padding: 15px 20px 0; }
.notify-success .notify-body { padding: 10px 20px 15px; }
.notify-error { border-color: var(--red); }
.notify-error .notify-head { background: var(--red); }
.error-summary { border: 5px solid var(--red); padding: 20px; margin-bottom: 30px; }

.error-summary a { color: var(--red); font-weight: 700; }

/* Tables */
table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 19px; line-height: 25px; margin-bottom: 20px; }
@media (min-width: 641px) { table { margin-bottom: 30px; } }
th, td { padding: 15px 20px 15px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
th { font-weight: 700; }
th.num, td.num { text-align: right; padding-right: 0; }
caption { font-weight: 700; text-align: left; margin-bottom: 15px; font-size: 19px; line-height: 25px; }
/* The wrapper carries the gap, not the table inside it, or the two stack. */
.table-wrap table { margin-bottom: 0; }
.table-wrap { overflow-x: auto; margin-bottom: 20px; }
@media (min-width: 641px) { .table-wrap { margin-bottom: 30px; } }

/* Big numbers (approval rates), on the 48 scale with the H1. */
.figure { font-size: 31px; line-height: 40px; font-weight: 700; margin-bottom: 10px; overflow-wrap: break-word; max-width: none; }
@media (min-width: 641px) { .figure { font-size: 50px; line-height: 55px; } }
.figure-caption { font-size: 19px; line-height: 25px; color: var(--grey1); margin-bottom: 20px; }

/* Numbered rows: a bold numeral in a 40px column with a hairline under each
   row. One device for every ordered list on the site; the outlined circles it
   replaces were the only element of their kind on the page. */
/* No top rule: the heading above it is the edge, and a second grey line
   40px under the section break read as a mistake. */
.rows { list-style: none; padding: 0; margin: 0; max-width: var(--text-measure); }
.rows .row { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--rule); margin: 0; }
.row-n { flex: 0 0 40px; font-size: 19px; line-height: 25px; font-weight: 700; }
.row-title { font-size: 19px; line-height: 25px; font-weight: 700; margin: 0 0 10px; max-width: none; }
.row-detail { font-size: 19px; line-height: 25px; color: var(--grey1); margin: 0; max-width: none; }

/* Link rows: a link and its number or its summary, on the same hairline
   rhythm as the numbered rows. */
.linkrows { list-style: none; padding: 0; margin: 0; max-width: var(--text-measure); }
/* The section break under the list is the closing line; the list's own last
   border 21px above it read as a doubled rule. */
.linkrows li:last-child, .rows .row:last-child { border-bottom: 0; }
.linkrows li { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid var(--rule); margin: 0; font-size: 19px; line-height: 25px; }
.linkrows a { font-weight: 700; }
.linkrows-note { color: var(--grey1); }

/* Breadcrumbs and back link */
.breadcrumbs { font-size: 19px; line-height: 25px; margin: 15px 0 10px; }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; font-size: inherit; }
.breadcrumbs li { margin: 0 15px 10px 0; }
.breadcrumbs li + li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 15px 1px 0; border: solid var(--grey1); border-width: 1px 1px 0 0; transform: rotate(45deg); }
.breadcrumbs a { color: var(--black); }
.back { display: inline-block; font-size: 19px; line-height: 25px; margin: 20px 0; color: var(--black); }

/* Footer */
/* components/footer/_mixin.scss: a 10px brand-blue top edge, the template
   background under it, black ink, and responsive 7 over 5 padding. The crest
   slot carries our own crown, never the Royal Arms. */
.footer { background: var(--surface); border-top: 10px solid var(--brand); color: var(--black); font-size: 19px; line-height: 25px; }
.footer .wrap { padding-top: 30px; padding-bottom: 20px; }
@media (min-width: 641px) { .footer .wrap { padding-top: 50px; padding-bottom: 30px; } }
.footer-cols { display: grid; gap: 30px; margin-bottom: 30px; }
@media (min-width: 641px) { .footer-cols { grid-template-columns: repeat(3, 1fr); margin-bottom: 50px; } }
.footer-brand { font-weight: 700; color: var(--black); font-size: 19px; line-height: 25px; margin-bottom: 10px; }
.footer-blurb { margin-bottom: 15px; font-size: 19px; line-height: 25px; max-width: none; }
/* Sentence case, not tracked caps: the markup already says "Company" and
   "Legal", and GOV.UK's own footer headings are bold sentence case. */
.footer-heading { font-weight: 700; color: var(--black); font-size: 19px; line-height: 25px; margin-bottom: 15px; }
.footer ul { list-style: none; padding: 0; margin: 0; font-size: 19px; line-height: 25px; }
.footer li { margin-bottom: 10px; }
.footer a { color: var(--link); }
.footer a:hover { color: var(--link-hover); }
/* GOV.UK gives the crest a 125 by 102 slot under the section break, above the
   copyright line, centred. Our crown is one solid shape where the Royal Arms
   is a drawing, so it carries the same weight at two thirds the size. */
.footer-break { margin: 0; border: 0; border-bottom: 1px solid var(--surface-border); }
.footer-crest { text-align: center; padding: 30px 0 20px; }
.footer-crown { width: 72px; height: 65px; color: var(--brand); }
.footer-meta { font-size: 16px; line-height: 20px; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 641px) { .footer-meta { flex-direction: row; justify-content: space-between; } }

/* Nothing on a page may be wider than the phone it is read on: long
   references, URLs and postcodes break rather than push the page sideways. */
p, li, dd, dt, td, th, caption, summary, .figure, .panel-title { overflow-wrap: break-word; }
img, svg, table, pre { max-width: 100%; }
pre { overflow-x: auto; }

/* Two-thirds / one-third content layout with Related content beside it. */
.layout { display: grid; gap: 20px; }
@media (min-width: 1000px) { .layout { grid-template-columns: minmax(0, calc(66.6667% - 10px)) minmax(0, 1fr); gap: 30px; } }
.layout-main { min-width: 0; }
.layout-main > :last-child, .layout-main > :last-child > :last-child, .layout-main > :last-child > :last-child > :last-child, .layout-main a.btn:last-child { margin-bottom: 0; }
.hero .start { margin-bottom: 0; }
.related { border-top: 2px solid var(--brand); padding-top: 15px; }
/* Every heading in the right column is black at 19px bold over a tint-50
   rule. Blue is for links. */
.related-title { font-size: 19px; line-height: 25px; color: var(--black); margin: 0 0 15px; }
.related-list { list-style: none; margin: 0; padding: 0; font-size: 19px; line-height: 25px; max-width: none; }
.related-list li { margin: 0 0 15px; }
/* The right column's copy of the ask: the same form, tighter, and no step
   counter, because it is not the page's first step. */
.start-compact { padding: 20px; margin-bottom: 20px; max-width: none; }
.start-compact .form-group { margin-bottom: 15px; }
.start-compact .address-search .btn-find { flex: 1 0 100%; }
.start-compact .btn-start { width: 100%; font-size: 19px; }
.start-compact [data-proof-line] { display: none; }
.contact-block { border-top: 1px solid var(--blue-tint-80); padding-top: 15px; margin-top: 20px; }
.contact-block p { font-size: 19px; line-height: 25px; margin-bottom: 10px; }
.contact-block p:last-child { margin-bottom: 0; }
.contact-block .wa-link { display: inline-flex; }

/* Two equal columns with a responsive gutter, stacked on a phone. */
.cols2 { display: grid; gap: 20px; }
@media (min-width: 641px) { .cols2 { grid-template-columns: 1fr 1fr; gap: 30px; } }
.cols2 > p, .cols2 > :last-child { margin-bottom: 0; }

/* GOV.UK section break: a visible rule between sections, not empty space. */
.section-break { border: 0; border-top: 1px solid var(--rule); margin: 20px 0; }
@media (min-width: 641px) { .section-break { margin: 30px 0; } }

/* Contents: the jump list at the top of a long page. */
.contents { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 15px 0; margin-bottom: 20px; max-width: var(--text-measure); }
.contents-title { font-size: 19px; line-height: 25px; margin: 0 0 10px; }
.contents-list { list-style: none; margin: 0; padding: 0; font-size: 19px; line-height: 25px; max-width: none; display: grid; gap: 4px 20px; }
@media (min-width: 641px) { .contents-list { grid-template-columns: 1fr 1fr; } }
.contents-list li { margin: 0 0 4px; }

/* Utilities */
.text-grey { color: var(--grey1); }
.text-red { color: var(--red); }
.text-green { color: var(--green-dark); }
.text-right { text-align: right; }
.bold { font-weight: 700; }
.nowrap { white-space: nowrap; }
.measure { max-width: var(--text-measure); }
/* The mark sits on the text's optical centre, not its baseline: 18px beside
   a 19px label, lifted 1px. Green on white, near-black on the pill. */
.wa-glyph { width: 18px; height: 18px; flex-shrink: 0; vertical-align: middle; transform: translateY(-1px); }
label .wa-glyph { color: var(--wa); margin-left: 10px; }

/* A single page heading, with space before the quieter supporting line. */
.hero h1 { margin-bottom: 20px; }
.hero .hero-claim { padding: 10px 15px; }
.hero .start > form > h2 { margin-bottom: 15px; }
.hero-process .stepnav-list li { padding-bottom: 10px; }
.hero-process .stepnav-list li:last-child { padding-bottom: 0; }
.hero-process .stepnav-step summary { padding-bottom: 15px; }
.hero-process .stepnav-description { padding-bottom: 10px; }
.hero-process .stepnav-all { margin-bottom: 20px; }
/* The two fees are the anchors in this line, so they take the ink; the
   sentence around them stays the quiet grey of a footnote to the rung. */
.offer { font-size: 19px; line-height: 25px; max-width: var(--text-measure); margin-bottom: 20px; }
.offer strong { color: var(--black); }

/* Forms sit on the page without a heavy outer frame. */
.start { border: 0; }
.box { border: 1px solid var(--grey2); }
.start, .box { margin-bottom: 20px; max-width: var(--text-measure); }
.start { padding: 10px 0 0; }
.box { padding: 20px; }
@media (min-width: 641px) { .start, .box { margin-bottom: 30px; } .box { padding: 30px; } }
.box > :last-child { margin-bottom: 0; }
.box-caption { font-size: 19px; line-height: 25px; font-weight: 700; color: var(--grey1); margin-bottom: 10px; max-width: none; }
.box-line { font-size: 21px; line-height: 25px; font-weight: 700; margin-bottom: 20px; max-width: none; text-wrap: wrap; }
@media (min-width: 641px) { .box-line { font-size: 27px; line-height: 30px; } }
/* GOV.UK's own form rhythm at its compact end: group 20, label 5, hint 10,
   nothing above the button group. The heading is the page h2 size. */
.start > form > h2 { font-size: 21px; line-height: 25px; margin-bottom: 20px; }
@media (min-width: 641px) { .start > form > h2 { font-size: 24px; line-height: 30px; } }
.start .form-group { margin-bottom: 20px; }
.start label { margin-bottom: 5px; }
.start .hint { margin-bottom: 10px; }
.start .btn-group { margin-top: 0; margin-bottom: 0; }
/* The proof line sits under the panel, not inside it. */
[data-proof-line] { margin-top: 10px; }
/* The proof line is the panel's last visible block; the script tag after it
   is not, so :last-child was zeroing nothing and the line's own margin was
   adding 21px to the panel's bottom padding. */
.start .check-form > :last-child, .start [data-proof-line] { margin-bottom: 0; }
/* The one green block on the page. It runs the panel's full width on a
   phone, where a 278px button in a 345px box reads as an afterthought. */
.start .btn-start { width: 100%; }
@media (min-width: 641px) { .start .btn-start { width: auto; min-height: 40px; } }

/* Step 1's address search. Shared: the landing, borough and approval-rate
   pages embed the same form, so these rules cannot live in check.css. */
.check-form { max-width: var(--text-measure); }
.address-search { display: flex; gap: 15px; align-items: stretch; flex-wrap: wrap; }
.address-search .input { flex: 1 1 240px; margin-bottom: 0; min-width: 0; }
.address-search .btn-find { font-weight: 400; margin-bottom: 0; min-height: 0; height: 40px; font-size: 19px; line-height: 25px; padding: 0 20px; flex: 1 0 100%; }
@media (min-width: 641px) { .address-search .btn-find { flex: 0 0 auto; } }
.address-suggestions { margin-top: 15px; }
.address-list { border: 2px solid var(--black); max-height: 320px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.address-list li { margin: 0; }
.address-list li + li { border-top: 1px solid var(--grey2); }
.address-option { display: block; width: 100%; text-align: left; background: var(--white); border: 0; padding: 15px 20px; cursor: pointer; font-size: 19px; line-height: 25px; }
.address-option .hint { display: block; margin: 10px 0 0; }
.address-option:hover { background: var(--grey3); }
.address-option:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
/* A radio's own hint sits under its label, at the label's left edge. */
.radio label .hint, .checkbox label .hint { display: block; margin: 10px 0 0; }

/* Two-column link lists (councils, other project types). .grid-2 only sets
   the columns, so the list needs .grid to become a grid at all. */
.grid-tight { gap: 10px 30px; }

/* Guides */
.guide-list { list-style: none; padding: 0; margin: 0; }
.guide-list li { margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--grey2); }
.guide-list a { font-size: 19px; line-height: 25px; font-weight: 700; }
.guide-list p { margin: 10px 0 0; color: var(--grey1); }
.guide h2 { margin-top: 30px; }
.guide h3 { margin-top: 20px; }
@media (min-width: 641px) { .guide h2 { margin-top: 50px; } .guide h3 { margin-top: 30px; } }
.guide table { margin-bottom: 0; }

/* Homepage aside: the plain list of what the check gives you. It used to open
   on a 10px slab of green above the heading and mark every item with a green
   square, which put the second and third loudest coloured objects on the page
   in the column that supports the ask. The whole column now reads one way: a
   heading, a rule under it, and hairline rows. */
.tells-title { font-size: 19px; line-height: 25px; margin: 0 0 15px; }
.tells-body { font-size: 19px; line-height: 25px; color: var(--grey1); margin: 15px 0 0; max-width: none; }

/* Recent projects, ported from Mayfair's homepage right column. */
.projects-head { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; flex-wrap: wrap; border-bottom: 1px solid var(--grey2); padding-bottom: 10px; margin-top: 0; }
.projects-head h2, .projects-head h3 { font-size: 19px; line-height: 25px; margin: 0; }
/* Bounded and scrolled at every width, as Mayfair's desktop column is: the
   full list is 79 entries and unbounded it made the phone page 29,500px
   tall. overscroll-behavior keeps the page from scrolling on with it. */
/* Six render, so the list needs no scroll box of its own: the cap existed to
   stop 79 entries making a 29,500px page on a phone.
   Each card is a golden rectangle, 1.618 wide to 1 high. The aside sets the
   width, so the ratio sets the height: 331 by 205 on a laptop, 345 by 213 on
   a phone. Inside it, phi again: 21px of padding, 13px between lines, and the
   cost pinned to the foot. */
/* Recent projects runs the full width of the page, three across on a laptop
   and one on a phone, so six cards no longer tower over the hero beside it.
   13px clear of the head rule so the rule and the first card's own edge do
   not read as one doubled line. */
.projects { list-style: none; padding: 0; margin: 15px 0 0; max-width: none; display: grid; gap: 15px; }
/* Three across only where the section runs the full width. In the hero aside
   the column is 330px, so three across would be 96px each and clip the names. */
@media (min-width: 641px) and (max-width: 999px) { .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1000px) { .projects:not(.projects-aside) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.projects-tally { font-size: 16px; line-height: 20px; color: var(--grey1); }
/* Three across at 1280 makes a 286px card, so the padding steps down to 13
   there: the ratio is fixed and the content gives way, not the rectangle. */
.project { aspect-ratio: 1.618; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--grey2); margin: 0; overflow: hidden; }
@media (min-width: 641px) { .project { padding: 15px; } }
.project-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 10px; }
.project-name { font-size: 19px; line-height: 25px; font-weight: 700; margin: 0; max-width: none; }
.project-detail { font-size: 19px; line-height: 25px; color: var(--grey1); margin: 0; max-width: none; }
.project-route { font-size: 19px; line-height: 25px; color: var(--grey1); margin: 15px 0 0; max-width: none; }
.project-cost { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-top: auto; padding-top: 15px; }
.project-cost-key { font-size: 19px; line-height: 25px; color: var(--grey1); }
.project-cost-value { font-size: 19px; line-height: 25px; font-weight: 400; }
.projects-summary { margin-top: 0; padding-top: 15px; border-top: 1px solid var(--rule); }
.projects-summary p { font-size: 19px; line-height: 25px; color: var(--grey1); margin: 0; max-width: none; }
.projects-summary strong { color: var(--black); }
.status { display: inline-block; font-size: 16px; line-height: 20px; font-weight: 400; padding: 5px 15px; white-space: nowrap; flex-shrink: 0; }
.status-approved { background: #e7f2ec; color: #005a30; }
.status-active { background: #eaf1f8; color: #0f385c; }
.status-waiting { background: #eeebf5; color: #3d2375; }
.status-grey { background: #f4f5f5; color: #383f43; }

@media print {
  .header, .servicenav, .phase, .footer, .btn, .skip { display: none !important; }
  body { font-size: 12pt; }
  a { color: var(--black); text-decoration: none; }
}

/* The chrome, on values measured from www.gov.uk/sign-in-childcare-account
   and /log-in-register-hmrc-online-services: a 62px brand-blue bar over a
   960px container, the logotype at 30px, a 103 by 61 Menu button at 16px bold
   and a 61 by 61 search button, both white on the blue. Our mark and our
   crown, never the GOV.UK logotype or crown. */
.header { position: sticky; top: 0; z-index: 100; }
.header > .wrap { height: 61px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; gap: 0; }
.header .brand { margin-right: auto; }

.header .brand { display: inline-flex; align-items: center; gap: 0; color: var(--white); text-decoration: none; }
.brand .brand-word, .brand .brand-tail { font-size: 24px; line-height: 30px; letter-spacing: -.025em; }
.brand .brand-word { font-weight: 700; }
.brand .brand-tail { font-weight: 400; color: rgba(255, 255, 255, .55); margin-left: 7px; }
.brand .brand-crown { width: 19px; height: 17px; margin-left: 7px; color: rgba(255, 255, 255, .55); transform: none; }
.header .brand:focus, .header .brand:focus .brand-tail, .header .brand:focus .brand-crown { color: var(--black); }
@media (max-width: 767px) {
  .brand .brand-word, .brand .brand-by { display: none; }
  .brand .brand-tail { font-size: 19px; line-height: 28px; font-weight: 700; color: var(--white); margin-left: 0; }
  .brand .brand-crown { width: 15px; height: 14px; }
}
@media (max-width: 640px) {
  .header .hdr-search { width: 36px; padding: 0; }
  .header .hdr-menu { padding: 0 6px; gap: 4px; }
}

/* The two bar controls: Menu at 16px bold in a 61px-tall box, the search
   glyph in a 61 by 61 square, both GOV.UK's own sizes. */
.hdr-btn { margin-bottom: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 61px; padding: 0 15px; color: var(--white); font-size: 16px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.hdr-search { width: 61px; padding: 0; }
@media (min-width: 641px) { .hdr-search { width: auto; padding: 0 15px; } }
@media (max-width: 374px) { .hdr-btn { padding: 0 8px; gap: 6px; } .hdr-search { width: 44px; padding: 0; } }
.hdr-btn:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.nav-check:focus-visible ~ .wrap .hdr-menu, .search-check:focus-visible ~ .wrap .hdr-search { outline: 3px solid var(--yellow); outline-offset: -3px; }
.nav-check:checked ~ .wrap .hdr-menu svg { transform: rotate(180deg); }

/* The Menu panel and the search row: full-width bands under the bar on the
   tint-95 ground, opened by a checkbox so they work without a script. */
.hdr-menu-panel, .hdr-search-row { position: absolute; top: 100%; left: 0; right: 0; display: none; background: var(--surface); border-bottom: 1px solid var(--surface-border); }
.nav-check:checked ~ .hdr-menu-panel, .search-check:checked ~ .hdr-search-row { display: block; }
.hdr-menu-panel .wrap { padding-top: 20px; padding-bottom: 20px; }
.hdr-menu-panel { max-height: calc(100dvh - 62px); overflow-y: auto; }
.hdr-menu-list a { color: var(--link); text-decoration: underline; }
.hdr-menu-cta { display: block; width: 100%; margin-bottom: 20px; }
@media (min-width: 641px) { .hdr-menu-cta { display: none; } }
.hdr-menu-cols { display: grid; gap: 20px; }
@media (min-width: 641px) { .hdr-menu-cols { grid-template-columns: repeat(3, 1fr); gap: 30px; } }
.hdr-menu-head { font-size: 19px; line-height: 25px; color: var(--black); margin-bottom: 10px; }
.hdr-menu-list { list-style: none; margin: 0; padding: 0; font-size: 19px; line-height: 25px; max-width: none; }
.hdr-menu-list li { margin-bottom: 10px; }
.hdr-search-row .wrap { display: flex; gap: 15px; padding-top: 15px; padding-bottom: 15px; }
.hdr-search-row .input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 9px 10px; }
.hdr-search-row .input:focus { padding: 7px 8px; }
.hdr-search-row .btn { margin: 0; flex: 0 0 auto; height: 48px; padding: 9px 20px; }

/* The bar's action is a desktop object: on a phone the bar holds the mark,
   the search glyph and Menu, and the action is the menu panel's first row. */
.btn-bar { display: none; }
@media (min-width: 641px) { .btn-bar { display: inline-flex; align-items: center; margin: 0 15px 0 0; min-height: 40px; height: 40px; padding: 0 15px; font-size: 16px; line-height: 20px; font-weight: 700; border: 0; box-shadow: 0 2px 0 var(--btn-edge); flex-shrink: 0; white-space: nowrap; } }

.servicenav .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; min-height: 48px; padding-top: 8px; padding-bottom: 8px; gap: 20px; }
.contact-availability { display: flex; align-items: center; gap: 10px; min-width: 0; }
.contact-hours { font-size: 13px; line-height: 20px; color: var(--grey1); white-space: nowrap; }
.servicenav .wa-link { height: 32px; padding: 6px 8px; gap: 6px; border-radius: 3px; font-size: 14px; line-height: 20px; white-space: nowrap; }
.servicenav .wa-link svg { width: 16px; height: 16px; margin-right: 0; }
@media (min-width: 641px) { .contact-availability { gap: 15px; } .contact-hours { font-size: 16px; } .servicenav .wa-link { font-size: 16px; padding: 6px 10px; } }
.wa-link { background: var(--wa); color: var(--wa-ink); padding: 5px 10px; font-size: 16px; line-height: 20px; }
@media (min-width: 641px) { .wa-link { padding: 5px 15px; font-size: 19px; line-height: 25px; } }
.wa-link:hover { background: var(--wa-hover); color: var(--wa-ink); }
.wa-link .wa-glyph { color: var(--wa-ink); }
.wa-link svg { margin-right: 10px; }
.contact-email { color: var(--link); text-decoration: none; font-size: 16px; line-height: 20px; white-space: nowrap; }
.contact-email:hover { text-decoration: underline; }

/* GOV.UK's breadcrumbs: 16/20 with chevron separators, and on a phone only
   the parent, which is their collapse-on-mobile variant. */
.breadcrumbs { font-size: 16px; line-height: 20px; margin: 15px 0 10px; }
.breadcrumbs li + li::before { border-color: var(--black); }
@media (max-width: 640px) {
  .breadcrumbs li { display: none; }
  .breadcrumbs li:nth-last-child(2) { display: block; }
  .breadcrumbs li:nth-last-child(2)::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 1px 0; border: solid var(--black); border-width: 1px 1px 0 0; transform: rotate(-135deg); }
}

/* The step-by-step block from the childcare page: a 2px top rule, a 19px
   heading over a 16px "Part of", 30px numbered circles on white with a 1px
   edge, and a 1px line joining them. */
.stepnav { border-top: 2px solid var(--brand); padding-top: 15px; margin-bottom: 20px; }
.stepnav-pre { font-size: 19px; line-height: 25px; font-weight: 700; margin-bottom: 10px; }
.stepnav-title { font-size: 19px; line-height: 26.6px; font-weight: 700; margin-bottom: 15px; }
.stepnav-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.stepnav-list li { position: relative; padding: 0 0 20px 45px; margin: 0; font-size: 19px; line-height: 25px; }
.stepnav-list li:last-child { padding-bottom: 0; }
.stepnav-list li::before { content: attr(data-n); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border: 1px solid var(--grey2); border-radius: 50%; background: var(--white); text-align: center; font-size: 16px; line-height: 29px; font-weight: 700; z-index: 1; }
.stepnav-list li::after { content: ""; position: absolute; left: 15px; top: 30px; bottom: 0; width: 1px; background: var(--grey2); }
.stepnav-list li:last-child::after { display: none; }
.stepnav-step { border-top: 1px solid var(--grey2); }
.stepnav-step summary { display: block; cursor: pointer; padding: 5px 0 20px; list-style: none; }
.stepnav-step summary::-webkit-details-marker { display: none; }
.stepnav-step-title { display: block; font-size: 19px; line-height: 26.6px; font-weight: 700; }
.stepnav-toggle { display: block; color: var(--link); margin-top: 10px; font-size: 16px; line-height: 20px; }
.stepnav-toggle::before, .stepnav-all::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 5px; vertical-align: -5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%231a65a6'%3E%3Ccircle cx='10' cy='10' r='9'/%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") center / 20px no-repeat; }
.stepnav-toggle::after { content: "Show"; }
.stepnav-step[open] .stepnav-toggle::before, .stepnav-all[aria-expanded="true"]::before { transform: rotate(180deg); }
.stepnav-step[open] .stepnav-toggle::after { content: "Hide"; }
.stepnav-description { padding-bottom: 20px; }
.stepnav-cost { display: block; font-size: 19px; line-height: 25px; margin-top: 5px; color: var(--grey1); }
.stepnav-all { display: block; margin: 10px 0 25px; padding: 0; border: 0; background: none; color: var(--link); font-size: 16px; line-height: 20px; cursor: pointer; }
.stepnav-all[hidden] { display: none; }
.stepnav-all:hover { text-decoration: underline; }
.stepnav-list li:first-child::before { background: var(--black); border-color: var(--black); color: var(--white); }
.stepnav-description p { margin-bottom: 15px; }

/* GOV.UK's "Help improve" band above the footer: tint-95, 1px top rule. */
.help-improve { padding-bottom: 30px; }
/* 21px of air over its rule on a phone, 34 on a laptop, so the gap between
   the page's last block and this band passes on its own. */
.help-improve-panel { padding: 15px; border-left: 10px solid var(--btn); background: var(--grey3); }
.help-improve-title { font-size: 19px; line-height: 25px; font-weight: 400; margin-bottom: 0; }
.help-improve p { margin-bottom: 0; font-size: 19px; line-height: 25px; }

.search-page-form { margin-bottom: 20px; max-width: var(--text-measure); }
.search-page-form .btn { margin-bottom: 0; }

/* The sticky bar must not sit on top of whatever the keyboard just reached. */
h1, h2, h3, input, select, textarea, summary, .start, #free-check { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.check-form[data-check-form] .input { height: 48px; padding: 9px 10px; }
.check-form[data-check-form] .input:focus { padding: 7px 8px; }
.check-form[data-check-form] label { margin-bottom: 8px; }
.check-form[data-check-form] .address-search { gap: 10px; }
.check-form[data-check-form] .btn-find { height: 48px; padding: 9px 15px; }
.check-form[data-check-form] .btn-start { min-height: 48px; padding: 9px 20px; display: inline-flex; align-items: center; justify-content: center; }
.check-form[data-check-form] .btn-start svg { margin-left: 10px; }
.check-proof { margin-top: 15px; color: var(--grey1); font-size: 16px; line-height: 22px; }
.check-proof summary { color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.check-proof p { margin: 10px 0 0; font-size: inherit; line-height: inherit; }

.check-form .phone-hint, .check-form .field-hint { margin: 8px 0 0; font-size: 16px; line-height: 22px; color: var(--grey1); }

.check-form[data-check-form] .form-group, .check-form[data-check-form] .btn-group { max-width: 480px; }

@media (min-width: 641px) {
  .check-form[data-check-form] .address-search { display: grid; grid-template-columns: minmax(0, 1fr) 145px; }
  .start-compact .check-form[data-check-form] .address-search { display: flex; }
}

.start-panel { max-width: 540px; padding: 20px; background: var(--grey3); }
.start-panel .btn-secondary { background: #e0e0e0; }
.start-panel .btn-secondary:hover { background: #cecece; }
.start-panel .btn-secondary:focus-visible { background: var(--yellow); }
@media (min-width: 641px) { .start-panel { padding: 30px; } }

a:focus { outline: 3px solid transparent; background: var(--yellow); color: var(--black); box-shadow: 0 -2px var(--yellow), 0 4px var(--black); text-decoration: none; }
.btn { font-weight: 400; line-height: 1; }
.btn-start { font-weight: 700; }
.btn:focus { outline: 3px solid transparent; border-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.btn:focus:not(:hover):not(:active) { background: var(--yellow); color: var(--black); box-shadow: 0 2px var(--black); }
@media (min-width: 641px) { .check-form[data-check-form] .btn-start { font-size: 24px; line-height: 24px; } }
.servicenav .wa-link { padding-left: 0; padding-right: 0; background: transparent; color: var(--link); font-weight: 400; border-radius: 0; }
.servicenav .wa-link .wa-glyph { color: var(--btn); }
.servicenav .wa-link:hover { background: transparent; color: var(--link-hover); text-decoration: underline; }
.servicenav .wa-link:focus { background: var(--yellow); color: var(--black); }
.check-form .phone-label { display: flex; align-items: center; gap: 8px; }
.check-form .phone-label .wa-glyph { width: 22px; height: 22px; margin: 0; color: var(--btn); stroke: currentColor; stroke-width: .3; flex-shrink: 0; }
.stepnav-step-title { line-height: 23px; }
.stepnav-description, .stepnav-description p, .stepnav-cost { font-size: 16px; line-height: 22px; }
.stepnav-toggle { width: fit-content; }
.stepnav-step summary:hover .stepnav-step-title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
.stepnav-step summary:hover .stepnav-toggle { color: var(--link-hover); }
.stepnav-step summary:focus { outline: none; background: transparent; }
.stepnav-step summary:focus .stepnav-step-title, .stepnav-step summary:focus .stepnav-toggle, .stepnav-all:focus, .check-proof summary:focus, .details summary:focus {
  outline: 3px solid transparent; background: var(--yellow); color: var(--black); box-shadow: 0 -2px var(--yellow), 0 4px var(--black); text-decoration: none;
}
.stepnav-all { width: fit-content; }
.stepnav-step summary:focus .stepnav-toggle::before, .stepnav-all:focus::before { filter: brightness(0); }
.accordion summary:focus { outline: 3px solid transparent; background: var(--yellow); box-shadow: 0 4px var(--black); text-decoration: none; }
.hero-process .stepnav-list li { padding-bottom: 15px; }
.hero-process .stepnav-list li:last-child { padding-bottom: 0; }
.hero .hero-claim { max-width: 540px; }

.check-form[data-check-form] .btn-find { display: inline-flex; align-items: center; justify-content: center; line-height: 19px; }

.grid + .contents { margin-top: 30px; }

.grid + .contents { border-bottom: 0; }
.contents + .layout { border-top: 1px solid var(--rule); padding-top: 20px; }
.contents + .layout > .related { position: relative; border-top: 0; padding-top: 0; }
.contents + .layout > .related::before { content: ""; position: absolute; top: -21px; left: 0; right: 0; border-top: 2px solid var(--brand); }
.contents + .layout > .related > .start { padding-top: 0; }

.header .btn-bar { font-weight: 700; line-height: 20px; }

.refusal-layout { display: grid; gap: 20px; align-items: start; }
.refusal-guarantee { padding: 20px; border-left: 5px solid var(--btn); background: #f3f8f6; }
.refusal-layout h3 { font-size: 19px; line-height: 25px; margin: 0 0 10px; }
.refusal-guarantee h3 { font-weight: 400; }
.refusal-guarantee .refusal-amount { font-size: 48px; line-height: 50px; font-weight: 700; margin: 0 0 10px; }
.refusal-guarantee > :last-child, .refusal-detail > :last-child { margin-bottom: 0; }
.refusal-detail { max-width: var(--text-measure); }
@media (min-width: 641px) { .refusal-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 30px; } .refusal-detail { padding-top: 20px; } }

@media (min-width: 641px) and (max-width: 767px) { .header .hdr-search { width: 44px; padding: 0; } .header .hdr-search span { display: none; } }

.header .btn-bar { gap: 10px; font-size: 19px; line-height: 24px; }
.header .btn-bar svg { width: 14px; height: 16px; flex-shrink: 0; }

.data-page > .layout { margin-bottom: 30px; }
.data-page > .start-panel { margin-top: 30px; }
.related > .btn-start, .guide-next-step .btn-start { font-size: 19px; line-height: 25px; padding: 10px 15px; }
.related > .btn-start svg { width: 14px; height: 16px; margin-left: 10px; }
.guide .contents { margin-top: 30px; }
.az-jump { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.az-jump li { margin: 0; }
.az-jump a { display: inline-block; padding: 5px; min-width: 28px; text-align: center; }
[data-examples] { min-width: 640px; }
.guide-next-step { margin-bottom: 30px; }

.council-finder { margin-bottom: 30px; }
.council-finder h2 { margin-bottom: 20px; }
.council-finder .input { max-width: 180px; text-transform: uppercase; }
.council-finder .btn { margin-bottom: 0; }
.council-result { scroll-margin-top: 82px; border-left: 5px solid var(--brand); padding: 0 0 0 20px; margin-bottom: 30px; }
.council-result li { margin-bottom: 10px; }
.council-result .btn-start { display: inline-flex; align-items: center; text-align: left; font-size: 19px; line-height: 25px; }