/* design\components.css: the CSS of the components in design\components.md, the director's: the header, the footer,
   the exit popup, the call bar, the stop icon, and each section pattern, card, form box and call-to-action block as the
   home page built them. Every page loads it (the build copies it to site\assets\css\components.css). Every page uses these
   classes as they are; a page's own CSS only places and sizes its parts, with the tokens of system.css. */

/* ---- the frame: wrap, sections, headings ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: clip; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
a { color: var(--c-brand-text); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--c-brand-dark); }
:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 3px; border-radius: 6px; }
img { display: block; height: auto; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max-w)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-y); }
.section--grey { background: var(--c-paper-alt); }
.section-head { display: grid; gap: var(--space-3); max-width: 760px; margin-bottom: var(--space-6); }
.h2 { font: 800 var(--fs-h2)/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); color: var(--c-ink); }
.h2--on-navy { color: var(--c-on-brand); }
.lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--c-ink-soft); max-width: 62ch; }
.lead--on-navy { color: var(--c-on-navy-soft); }
.lead a { font-weight: 600; }

/* A navy band that rests on real footage, graded navy, shaded only where the words sit. */
.band { position: relative; isolation: isolate; overflow: hidden; background: var(--c-ink); color: var(--c-on-brand); padding-block: var(--section-y); }
.band__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.band__shade { position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--c-ink) 78%, transparent); }

/* ---- buttons ---- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px;
  border: 0; border-radius: var(--radius-pill); font: 700 1.0625rem/1.1 var(--font-ui); text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.button--main { background: var(--c-brand); color: var(--c-on-brand); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c-brand) 75%, transparent); }
.button--main:hover { background: var(--c-brand-dark); color: var(--c-on-brand); transform: translateY(-1px); }
.button--main:active { transform: translateY(0); }
.button--quiet { background: transparent; color: var(--c-ink); padding: 0 18px; box-shadow: inset 0 0 0 1.5px var(--c-line); }
.button--quiet:hover { color: var(--c-brand-text); box-shadow: inset 0 0 0 1.5px var(--c-brand); }
.button__arrow { flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.button:hover .button__arrow { transform: translateX(3px); }
.cta-row { display: grid; justify-items: start; gap: var(--space-2); }
.cta-row__line { font-size: var(--fs-small); color: var(--c-ink-soft); }
.cta-row__line--on-navy { color: var(--c-on-navy-soft); }

/* ---- the header ---- */
.skip { background: var(--c-paper); color: var(--c-ink); padding: 10px 14px; border-radius: var(--radius-s); box-shadow: var(--shadow-m); font-weight: 700; }
.site-header {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: var(--space-4);
  height: 76px; padding-inline: max(var(--gutter), (100vw - var(--max-w)) / 2);
  background: color-mix(in srgb, var(--c-paper) 96%, transparent); border-bottom: 1px solid var(--c-line);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.site-header__logo { display: block; flex: none; margin-right: auto; border-radius: 4px; }
.site-header__logo img { width: auto; height: 46px; }
.site-header__nav .nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav__item a { display: block; padding: 10px 14px; border-radius: var(--radius-pill); font: 600 1rem/1 var(--font-ui); color: var(--c-ink); text-decoration: none; }
.nav__item a:hover { background: var(--c-paper-alt); color: var(--c-brand-text); }
.nav__item a[aria-current="page"] { color: var(--c-brand-text); box-shadow: inset 0 -2px 0 var(--c-brand); border-radius: 0; }
.nav__item a[data-planned] { color: var(--c-ink); }
.site-header__cta { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: var(--radius-pill); background: var(--c-brand); color: var(--c-on-brand); font: 700 .9375rem/1 var(--font-ui); text-decoration: none; white-space: nowrap; }
.site-header__cta:hover { background: var(--c-brand-dark); color: var(--c-on-brand); }
.site-header__menu { display: none; }
@media (max-width: 1099px) {
  .site-header { height: 68px; gap: var(--space-3); }
  .site-header__logo img { height: 40px; }
  .site-header__menu { order: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); background: var(--c-paper-alt); color: var(--c-ink); font: 700 .9375rem/1 var(--font-ui); cursor: pointer; }
  .site-header__menu::after { content: ""; width: 14px; height: 10px; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }
  .site-header__nav { position: absolute; left: 0; right: 0; top: 100%; display: none; padding: var(--space-3) var(--gutter) var(--space-4); background: var(--c-paper); border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-m); }
  .site-header[data-open] .site-header__nav { display: block; }
  .site-header__nav .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__item a { padding: 14px 12px; border-radius: var(--radius-s); font-size: 1.0625rem; }
  .nav__item a[aria-current="page"] { box-shadow: none; background: var(--c-brand-light); }
  .site-header__cta { order: 1; margin-left: auto; min-height: 44px; padding: 0 16px; font-size: .875rem; }
  .site-header__logo { margin-right: 0; }
}
@media (max-width: 560px) { .site-header__cta { display: none; } .site-header__logo { margin-right: auto; } }

/* ---- the stop icon: small, round, glass over footage ---- */
.stop {
  position: absolute; z-index: 5; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0;
  border-radius: 50%; cursor: pointer; color: var(--c-on-brand);
  background: color-mix(in srgb, var(--c-ink) 50%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-on-brand) 26%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.stop:hover { background: color-mix(in srgb, var(--c-ink) 72%, transparent); }
.stop--light { color: var(--c-ink); background: color-mix(in srgb, var(--c-paper) 82%, transparent); box-shadow: inset 0 0 0 1px var(--c-line), var(--shadow-s); }
.stop--light:hover { background: var(--c-paper); }
/* the tour's own stop (kit tabs-stop) shows one icon at a time, as h.stop() does */
[data-kit-tabs-stop] .stop__play { display: none; }
[data-kit-tabs-stop][aria-pressed="true"] .stop__play { display: inline; }
[data-kit-tabs-stop][aria-pressed="true"] .stop__pause { display: none; }

/* ---- the enquiry form: the site's main action, in its own white box ---- */
.form-box { position: relative; background: var(--c-paper); color: var(--c-ink); border-radius: 22px; padding: 22px 22px 20px; box-shadow: var(--shadow-l); }
.enquiry { display: grid; gap: 16px; }
.enquiry__marks { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.enquiry__mark { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding-bottom: 10px; border-bottom: 3px solid var(--c-line); font: 600 .8125rem/1.2 var(--font-ui); color: var(--c-ink-soft); }
.enquiry__mark[aria-current="step"] { border-color: var(--c-brand); color: var(--c-ink); }
.enquiry__mark[data-kit-past] { border-color: color-mix(in srgb, var(--c-brand) 45%, var(--c-line)); }
.enquiry__dot { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c-paper-alt); font: 700 .75rem/1 var(--font-ui); color: var(--c-ink-soft); }
.enquiry__mark[aria-current="step"] .enquiry__dot { background: var(--c-brand); color: var(--c-on-brand); }
.enquiry__mark[data-kit-past] .enquiry__dot { background: var(--c-brand-light); color: var(--c-brand-text); }
.enquiry__mark-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enquiry__step { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.enquiry__step:focus { outline: none; }
.enquiry__legend { float: left; width: 100%; margin-bottom: 2px; padding: 0; font: 700 1.125rem/1.3 var(--font-ui); color: var(--c-ink); }
.enquiry__legend + * { clear: both; }
.enquiry__chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.enquiry__go { width: 100%; }
.enquiry__nav { display: flex; gap: 10px; }
.enquiry__nav .button--main { flex: 1; }

.chip { position: relative; display: block; cursor: pointer; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip__face { display: grid; place-items: center; min-height: 52px; padding: 0 8px; border-radius: 14px; background: var(--c-paper); box-shadow: inset 0 0 0 1.5px var(--c-line); font: 700 1.0625rem/1 var(--font-ui); color: var(--c-ink); transition: box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.chip:hover .chip__face { box-shadow: inset 0 0 0 1.5px var(--c-brand); }
.chip input:focus-visible + .chip__face { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.chip[data-kit-on] .chip__face, .chip input:checked + .chip__face { background: var(--c-brand); color: var(--c-on-brand); box-shadow: none; }
.chip--small .chip__face { min-height: 44px; padding: 0 16px; font-size: .9375rem; }

.enquiry__options { display: grid; gap: 8px; }
.option { position: relative; display: block; cursor: pointer; }
.option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.option__face { display: grid; gap: 2px; padding: 12px 16px 12px 48px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--c-line); background: var(--c-paper); position: relative; transition: box-shadow var(--dur-fast) var(--ease-out); }
.option__face::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--c-line); background: var(--c-paper); }
.option:hover .option__face { box-shadow: inset 0 0 0 1.5px var(--c-brand); }
.option input:focus-visible + .option__face { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.option[data-kit-on] .option__face, .option input:checked + .option__face { box-shadow: inset 0 0 0 2px var(--c-brand); background: color-mix(in srgb, var(--c-brand-light) 55%, var(--c-paper)); }
.option[data-kit-on] .option__face::before, .option input:checked + .option__face::before { box-shadow: inset 0 0 0 6px var(--c-brand); }
.option__name { font: 700 1rem/1.3 var(--font-ui); color: var(--c-ink); }
.option__sub { font-size: .875rem; line-height: 1.35; color: var(--c-ink-soft); }

.enquiry__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__label { font: 600 .9375rem/1.2 var(--font-ui); color: var(--c-ink); }
.field__input { width: 100%; min-height: 50px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--c-paper); box-shadow: inset 0 0 0 1.5px var(--c-line); font: 500 1rem/1.2 var(--font-text); color: var(--c-ink); }
.field__input::placeholder { color: color-mix(in srgb, var(--c-ink-soft) 80%, transparent); }
.field__input:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-brand) 55%, var(--c-line)); }
.field__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--c-brand), 0 0 0 4px color-mix(in srgb, var(--c-brand) 16%, transparent); }
.field[data-kit-invalid] .field__input { box-shadow: inset 0 0 0 2px var(--c-error); }
.field__error { font: 600 .875rem/1.3 var(--font-ui); color: var(--c-error); }
.mini { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.mini__legend { padding: 0; margin-bottom: 6px; font: 600 .9375rem/1.2 var(--font-ui); color: var(--c-ink); }
.mini__chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 520px) {
  .form-box { padding: 18px 16px 16px; border-radius: 20px; }
  .enquiry__chips { gap: 6px; }
  .chip__face { min-height: 50px; border-radius: 12px; font-size: 1rem; }
  .enquiry__grid { grid-template-columns: 1fr; }
  .enquiry__mark-name { display: none; }
  .enquiry__mark { justify-content: center; }
}

.form-lines { display: grid; gap: 4px; font-size: var(--fs-small); line-height: 1.45; color: var(--c-ink-soft); }
.form-lines a { font-weight: 700; }
.form-lines--on-navy { color: var(--c-on-navy-soft); }
.form-lines--on-navy a { color: var(--c-on-brand); }
.form-lines__true { font-weight: 600; }
.form-lines--on-navy .form-lines__true { color: var(--c-on-brand); }

/* ---- the footer ---- */
.site-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-5) var(--space-4); padding: var(--space-6) max(var(--gutter), (100vw - var(--max-w)) / 2) var(--space-5); background: var(--c-paper-alt); border-top: 1px solid var(--c-line); color: var(--c-ink); }
.site-footer__brand { display: grid; gap: var(--space-3); align-content: start; }
.site-footer__logo { display: inline-block; width: max-content; border-radius: 4px; }
.site-footer__logo img { width: auto; height: 54px; }
.site-footer__line { max-width: 34ch; font-size: var(--fs-small); color: var(--c-ink-soft); }
.site-footer__title { margin-bottom: var(--space-3); font: 700 .9375rem/1.2 var(--font-ui); color: var(--c-ink); }
.site-footer__col ul, .site-footer__legal ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer__col a, .site-footer__legal a, .site-footer__contact a { color: var(--c-ink-soft); text-decoration: none; font-size: var(--fs-small); }
.site-footer__col a:hover, .site-footer__legal a:hover, .site-footer__contact a:hover { color: var(--c-brand-text); text-decoration: underline; }
.site-footer__contact { display: grid; gap: 10px; align-content: start; }
.site-footer__contact a { font-weight: 700; color: var(--c-ink); font-size: 1rem; }
.site-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-ink-soft); }
.site-footer__legal ul { display: flex; gap: var(--space-4); }
@media (max-width: 900px) { .site-footer { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .site-footer { grid-template-columns: 1fr; } }

/* ---- the exit popup ---- */
.exit { width: min(560px, 100% - 32px); max-width: none; max-height: calc(100% - 32px); margin: auto; padding: 0; border: 0; border-radius: 24px; background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-l); overflow: auto; }
.exit::backdrop { background: color-mix(in srgb, var(--c-navy-deep) 62%, transparent); backdrop-filter: blur(3px); }
.exit[data-kit-on] .exit__in { animation: exit-in var(--dur-med) var(--ease-out); }
@keyframes exit-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .exit[data-kit-on] .exit__in { animation: none; } }
.exit__in { position: relative; display: grid; gap: 18px; padding: 28px 26px 24px; }
.exit__head { display: grid; gap: 8px; padding-right: 40px; }
.exit__title { font: 800 1.75rem/1.12 var(--font-display); letter-spacing: var(--ls-display); color: var(--c-ink); }
.exit__line { color: var(--c-ink-soft); }
.exit__close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--c-paper-alt); color: var(--c-ink); cursor: pointer; }
.exit__close:hover { background: var(--c-brand-light); color: var(--c-brand-text); }
html[data-kit-modal] { overflow: hidden; }

/* ---- the FAQ ---- */
.faq-list { display: grid; gap: 10px; }
.faq-list details { border-radius: 16px; background: var(--c-paper); box-shadow: inset 0 0 0 1px var(--c-line); }
.faq-list details[open] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-brand) 40%, var(--c-line)), var(--shadow-s); }
.faq-list summary { position: relative; display: block; padding: 20px 56px 20px 22px; font: 700 1.0625rem/1.35 var(--font-ui); color: var(--c-ink); cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2.5px solid var(--c-brand); border-bottom: 2.5px solid var(--c-brand); transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease-out); }
.faq-list details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-list summary:hover { color: var(--c-brand-text); }
.faq-list .faq-a { display: grid; gap: 10px; padding: 0 22px 22px; color: var(--c-ink-soft); }

/* ---- photo tiles (who we help) ---- */
.tile { position: relative; display: block; overflow: hidden; height: 100%; min-height: 260px; border-radius: 22px; background: var(--c-ink); color: var(--c-on-brand); text-decoration: none; isolation: isolate; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease-out); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--c-navy-deep) 88%, transparent) 0%, color-mix(in srgb, var(--c-navy-deep) 40%, transparent) 45%, transparent 75%); }
.tile:hover img { transform: scale(1.04); }
.tile:hover { color: var(--c-on-brand); }
.tile__words { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 20px 20px 18px; }
.tile__name { font: 800 1.375rem/1.15 var(--font-display); letter-spacing: -.01em; }
.tile__fields { font-size: .9375rem; line-height: 1.4; color: color-mix(in srgb, var(--c-on-brand) 86%, transparent); }
.tile--more { display: grid; align-content: end; gap: 10px; padding: 24px; background: var(--c-brand); }
.tile--more::after { display: none; }
.tile--more .tile__name { font-size: 1.75rem; }
.tile__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 700 1rem/1 var(--font-ui); }

/* ---- the thank-you page ---- */
.page-thanks main { min-height: 60vh; }
.thanks { width: min(100% - 2 * var(--gutter), 760px); margin: 0 auto; padding-block: clamp(64px, 10vw, 140px); display: grid; gap: var(--space-4); }
.thanks__headline { font: 800 var(--fs-h1)/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); color: var(--c-ink); }
.thanks__body { font-size: 1.1875rem; line-height: 1.6; color: var(--c-ink-soft); }
.thanks__next { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.thanks__next a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--c-line); color: var(--c-ink); font-weight: 700; text-decoration: none; }
.thanks__next li:first-child a { background: var(--c-brand); color: var(--c-on-brand); box-shadow: none; }
.thanks__next a[data-planned] { color: var(--c-ink-soft); }