/* ==========================================================================
   Cherry Street Finance
   Implementation of "Cherry Street Finance.dc.html"
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces */
  --ivory:        #F8F6F1;
  --ivory-sunk:   #F2EFE8;
  --rule:         #DCD6CA;
  --rule-strong:  #C3BCAE;

  /* Ink */
  --navy-deep:    #011538;
  --navy:         #012152;
  --ink-body:     #4C5567;
  --ink-meta:     #6B7385;
  --ink-quote:    #2C3849;

  /* On navy */
  --on-navy:          #F8F6F1;
  --on-navy-bright:   #EDF0F5;
  --on-navy-body:     #D6DCE6;
  --on-navy-muted:    #C9D2E0;
  --on-navy-dim:      #A9B6CB;
  --on-navy-label:    #8FA0BB;
  --on-navy-footer:   #7E90AC;

  /* Accent */
  --red:          #C32B2A;

  /* Placeholder / note ink */
  --note:         #8A8577;
  --placeholder:  #E7E2D8;
  --placeholder2: #EFEBE3;
  --figure-ghost: #B9B2A4;

  /* Type */
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;

  /* Layout */
  --shell: 1280px;
  --gutter: 40px;
  --header-h: 88px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Sticky header must not cover in-page anchor targets. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--navy-deep);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

img, svg { max-width: 100%; }
img { border-style: none; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--red); }

input, textarea, select, button { font: inherit; color: inherit; }

::selection { background: var(--navy); color: var(--ivory); }

/* Visible keyboard focus everywhere — the design file specified only
   :focus styling for text inputs. */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--navy);
  color: var(--ivory);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: top 160ms ease;
}
.skip-link:focus { top: 12px; color: var(--ivory); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ivory);
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

main { flex: 1 0 auto; }

.section        { padding-block: 110px; }
.section--tight { padding-block: 88px; }
.section--sunk  { background: var(--ivory-sunk); border-top: 1px solid var(--rule); }
.section--navy  { background: var(--navy-deep); color: var(--on-navy); }
.section--navy-mid { background: var(--navy); color: var(--on-navy); }
.section--ruled { border-bottom: 1px solid var(--rule); }

/* Two-column editorial splits. Ratios mirror the source design. */
.split {
  display: grid;
  gap: 96px;
  align-items: start;
}
.split--1-145 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.split--1-16  { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.split--1-13  { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.split--12-1  { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 80px; align-items: end; }
.split--115-1 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split--1-1   { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.split--media { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 88px; align-items: center; }
.split--form  { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); }

/* A row that pushes a heading and a link apart. */
.headed-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 64px;
}
.headed-row--baseline { align-items: baseline; margin-bottom: 60px; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 26px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-meta);
}
.eyebrow--onnavy { color: var(--on-navy-label); margin-bottom: 22px; }
.eyebrow--light  { color: var(--on-navy-muted); }
.eyebrow--red    { color: var(--red); letter-spacing: 0.2em; margin-bottom: 8px; font-size: 11px; }

.label {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-meta);
}

.h-display {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(42px, 5.4vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--navy-deep);
}

.h-hero {
  margin: 0;
  max-width: 15ch;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(44px, 5.4vw, 92px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: var(--ivory);
}

.h-section {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy-deep);
}

.h-block {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--navy-deep);
}

.h-cta {
  margin: 0;
  max-width: 26ch;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--on-navy);
}

.h-card {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.2;
  color: var(--navy-deep);
}

.statement {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--navy-deep);
}

.lede {
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-body);
}
.lede + .lede { margin-top: 24px; }
.lede--loose { line-height: 1.78; }

.body-sm {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}

.note {
  margin: 0;
  font: 400 10px/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--note);
}

/* --------------------------------------------------------------------------
   5. Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 17px 34px;
  border: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

.btn--solid { background: var(--navy); color: var(--ivory); }
.btn--solid:hover { background: var(--red); color: var(--ivory); }

.btn--ivory { background: var(--ivory); color: var(--navy-deep); padding: 18px 38px; }
.btn--ivory:hover { background: var(--red); color: var(--ivory); }

.btn--ghost {
  border: 1px solid rgba(248, 246, 241, 0.4);
  color: var(--ivory);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--ivory);
  color: var(--ivory);
  background: rgba(248, 246, 241, 0.08);
}

.btn--ghost-solidhover {
  border: 1px solid rgba(248, 246, 241, 0.45);
  color: var(--ivory);
  background: transparent;
  padding: 18px 38px;
}
.btn--ghost-solidhover:hover {
  background: var(--ivory);
  color: var(--navy-deep);
  border-color: var(--ivory);
}

.btn--underline {
  padding: 17px 34px;
  color: var(--ivory);
  border-bottom: 1px solid rgba(248, 246, 241, 0.4);
}
.btn--underline:hover { color: var(--ivory); border-bottom-color: var(--red); }

/* Small uppercase link with a red rule under it. */
.link-rule {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--red);
  padding-bottom: 5px;
  color: var(--navy);
  transition: color 220ms ease;
}
.link-rule:hover { color: var(--red); }

.link-quiet {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-meta);
}
.link-quiet:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 246, 241, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.site-header__logo img { height: 34px; width: auto; display: block; }

/* Groups the phone, the menu button and the nav. Keeps the phone visible
   at every width — on mobile it sits beside the menu button rather than
   being buried inside the dropdown. */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--navy);
  white-space: nowrap;
  transition: color 220ms ease;
}
.site-header__phone:hover { color: var(--red); }
.site-header__phone svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.site-nav { display: flex; align-items: center; gap: 34px; }

.site-nav__link {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
  padding-top: 2px;
  transition: color 220ms ease;
}
.site-nav__link:hover { color: var(--red); }

/* The rule beneath a nav item; red only on the current page. */
.site-nav__link::after {
  content: "";
  display: block;
  height: 1px;
  background: transparent;
  transition: background-color 220ms ease;
}
.site-nav__link[aria-current="page"]::after { background: var(--red); }

.site-nav__cta { margin-left: 6px; padding: 13px 22px; }
.site-nav__cta:hover { background: var(--navy-deep); color: var(--ivory); }

/* Mobile disclosure button — hidden until the nav has to collapse. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--navy);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars {
  position: relative;
  width: 16px;
  height: 9px;
  flex: 0 0 auto;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 220ms ease, opacity 220ms ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-4px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hero {
  position: relative;
  min-height: 800px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Navy stands in if the photograph is missing, so the hero never breaks. */
  background: var(--navy-deep);
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

.hero__duotone {
  position: absolute;
  inset: 0;
  background: var(--navy);
  mix-blend-mode: color;
  opacity: 0.62;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(78deg,
    rgba(1, 21, 56, 0.9) 0%,
    rgba(1, 21, 56, 0.66) 46%,
    rgba(1, 21, 56, 0.22) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  padding-top: 64px;
  padding-bottom: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 440px);
  gap: 72px;
  align-items: end;
  animation: rise 900ms ease-out both;
}

.hero__copy p.hero__sub {
  margin: 30px 0 0;
  max-width: 44ch;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--on-navy-body);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__inner { animation: none; }
  * { transition-duration: 1ms !important; }
}

/* --------------------------------------------------------------------------
   8. Marquee strip
   -------------------------------------------------------------------------- */

.strip {
  border-bottom: 1px solid var(--rule);
  background: var(--ivory);
}
.strip__inner {
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-meta);
}
.dot {
  width: 4px; height: 4px;
  background: var(--red);
  border-radius: 50%;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   9. Cards, lists and tiles
   -------------------------------------------------------------------------- */

/* Hairline-separated tile grid. box-shadow draws the rules so the tiles
   can reflow at any column count without doubled borders. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  overflow: hidden;
}
.tile {
  background: var(--ivory-sunk);
  box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule);
  padding: 44px 34px 52px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: background-color 220ms ease;
}
.tile:hover { background: var(--ivory); }
.tile__n {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--red);
}

.figures { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.figure-tile {
  background: var(--ivory);
  box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule);
  padding: 38px 30px;
}
.figure-tile__value {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 300;
  font-size: 52px;
  line-height: 1;
  color: var(--figure-ghost);
}
.figure-tile__label {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-deep);
}

/* Bulleted property list on navy. */
.pill-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pill-list li {
  border-top: 1px solid rgba(248, 246, 241, 0.18);
  padding: 22px 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--on-navy-bright);
}
.pill-list li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--red);
  border-radius: 50%;
  flex: 0 0 auto;
}

/* The same list on an ivory background: single column, ink on light. */
.pill-list--light { grid-template-columns: 1fr; }
.pill-list--light li {
  border-top-color: var(--rule);
  color: var(--ink-body);
  padding: 18px 0;
}
.pill-list--light li:last-child { border-bottom: 1px solid var(--rule); }

/* Numbered process steps. */
.steps { display: flex; flex-direction: column; }
.step {
  border-top: 1px solid var(--rule);
  padding: 28px 0;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
}
.step__n {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--red);
  padding-top: 5px;
}
.step__title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  color: var(--navy-deep);
}
.step__body { max-width: 46ch; }

/* Principles / reviews — a red rule above each. */
.rule-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 56px;
}
.rule-card { border-top: 1px solid var(--red); padding-top: 26px; }
.rule-card__title { margin: 0 0 14px; }

.reviews { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 64px; }
.review { border-top: 1px solid var(--red); padding-top: 30px; }
.review__stars {
  margin: 0 0 20px;
  font-size: 13px;
  letter-spacing: 0.34em;
  color: var(--red);
}
.review__title {
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--navy-deep);
}
.review__quote {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-quote);
}
.review__by {
  margin: 24px 0 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-meta);
}

/* --------------------------------------------------------------------------
   10. Media
   -------------------------------------------------------------------------- */

.media-figure {
  margin: 0;
  width: 100%;
}
.media-figure img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
  background: var(--placeholder);
}
.media-figure--offset img { object-position: 60% 50%; }

/* Diagonal hatch used wherever artwork is still to be supplied. */
.to-supply {
  background: repeating-linear-gradient(135deg,
    var(--placeholder) 0 11px,
    var(--placeholder2) 11px 22px);
  display: flex;
  align-items: flex-end;
  padding: 14px;
}
.to-supply span {
  font: 400 9px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--note);
}

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */

.enquiry { display: flex; flex-direction: column; gap: 20px; }
.enquiry--page { gap: 30px; }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
}
.enquiry--page .field-row {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.enquiry--page .field { gap: 10px; }

.field__label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-meta);
}
.enquiry--page .field__label { font-size: 11px; }

.field__input {
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  background: transparent;
  padding: 7px 0;
  font-size: 16px;
  font-weight: 300;
  color: var(--navy-deep);
  outline: none;
  border-radius: 0;
  transition: border-color 220ms ease;
}
.enquiry--page .field__input { padding: 10px 0; font-size: 17px; }
.field__input:focus { border-bottom-color: var(--navy); }
.field__input:focus-visible { outline: none; border-bottom-color: var(--red); }

/* Native validation styling, only once the field has been interacted with. */
.field__input:user-invalid { border-bottom-color: var(--red); }
.field__error {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--red);
  min-height: 0;
}

/* Fields flagged by our own validation pass on a failed submit. */
.field__input[aria-invalid="true"] { border-bottom-color: var(--red); }

/* Asterisk marking a required field. Decorative only — the required
   attribute is what assistive tech actually announces. */
.field__req { color: var(--red); margin-left: 2px; }

/* Boxed form treatment: gives the fields a visible container so what
   needs completing reads as one obvious block. */
.enquiry--boxed {
  border: 1px solid var(--rule-strong);
  background: var(--ivory-sunk);
  padding: 40px 38px 42px;
}
@media (max-width: 620px) {
  .enquiry--boxed { padding: 28px 22px 30px; }
}

/* "* Required" note at the head of a boxed form. */
.form-legend {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-meta);
}

/* Select fields keep the underline treatment of .field__input. The
   native control chrome is removed and replaced with a chevron so the
   field looks the same in every browser. */
.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23011538' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1px center;
  background-size: 14px;
}
/* Placeholder option is styled as a hint until a real region is picked. */
.field__select:has(option[value=""]:checked) { color: var(--ink-meta); }
.field__select option { color: var(--navy-deep); }

/* Multi-line note field, on the same underline as the rest. */
.field__input--area {
  min-height: 92px;
  padding-top: 10px;
  resize: vertical;
}

/* Spam trap. Off-screen rather than display:none — some bots skip
   fields that are not rendered at all. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  margin: 0;
  padding: 12px 14px;
  background: rgba(195, 43, 42, 0.08);
  border-left: 2px solid var(--red);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--red);
}

.enquiry__submit { margin-top: 6px; padding: 17px 30px; }
.enquiry__submit[disabled] { opacity: 0.62; cursor: progress; }
.enquiry__submit[disabled]:hover { background: var(--navy); }
.enquiry--page .enquiry__submit {
  align-self: flex-start;
  margin-top: 8px;
  padding: 18px 40px;
}

/* Hero enquiry panel. */
.enquiry-panel {
  background: rgba(248, 246, 241, 0.97);
  padding: 38px 36px 40px;
  box-shadow: 0 26px 60px rgba(1, 21, 56, 0.34);
}
.enquiry-panel__title {
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.15;
  color: var(--navy-deep);
}
.enquiry-panel__intro {
  margin: 0 0 28px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-body);
}

/* Post-submit acknowledgement. */
.thanks { padding: 10px 0 6px; }
.thanks__title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.15;
  color: var(--navy-deep);
}
.thanks--page { border-top: 1px solid var(--red); padding: 44px 0; }
.thanks--page .thanks__title { font-size: 38px; margin-bottom: 16px; }

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   12. Contact details list
   -------------------------------------------------------------------------- */

.contact-rows { display: flex; flex-direction: column; }
.contact-row { border-top: 1px solid var(--rule); padding: 24px 0; }
.contact-row__label { margin: 0 0 10px; }
.contact-row__value {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  color: var(--navy-deep);
}
.contact-row__value a { color: inherit; }
.contact-row__value a:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   13. Services detail rows
   -------------------------------------------------------------------------- */

.service-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.service-row__n {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--red);
  padding-top: 12px;
}
.service-row__title {
  margin: 0 0 22px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--navy-deep);
}
.service-points { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.service-points li {
  border-top: 1px solid var(--rule);
  padding: 18px 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--navy-deep);
}

/* --------------------------------------------------------------------------
   14. News
   -------------------------------------------------------------------------- */

.lead-article {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  color: inherit;
}
.lead-article img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  background: var(--placeholder);
}
.lead-article__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-meta);
}
.lead-article__meta .kind { color: var(--red); }
.lead-article__meta .sep {
  width: 4px; height: 4px;
  background: var(--rule);
  border-radius: 50%;
}
.lead-article__title {
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--navy-deep);
}
.lead-article__blurb {
  margin: 0 0 26px;
  max-width: 52ch;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-body);
}
.lead-article:hover .lead-article__cue { color: var(--red); border-bottom-color: var(--red); }

.journal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1px;
  border-top: 1px solid var(--rule);
  overflow: hidden;
}
.journal-card {
  background: var(--ivory);
  box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule);
  padding: 34px 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: inherit;
  transition: background-color 220ms ease;
}
.journal-card:hover { background: var(--ivory-sunk); }
.journal-card .to-supply { height: 150px; }
.journal-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-meta);
}
.journal-card__meta .kind { color: var(--red); }
.journal-card__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--navy-deep);
}
.journal-card__blurb {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}

/* --------------------------------------------------------------------------
   15. Team
   -------------------------------------------------------------------------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 52px 40px;
}
.team-member { display: flex; flex-direction: column; }
.team-member__photo {
  aspect-ratio: 1 / 1;
  background-color: var(--placeholder);
  background-size: cover;
  background-position: 50% 22%;
  margin-bottom: 20px;
  filter: grayscale(1) contrast(1.04);
  transition: filter 500ms ease;
}
.team-member:hover .team-member__photo { filter: none; }
.team-member__photo--empty {
  background: repeating-linear-gradient(135deg,
    var(--placeholder) 0 11px,
    var(--placeholder2) 11px 22px);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  filter: none;
}
.team-member__name {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.15;
  color: var(--navy-deep);
}
.team-member__role {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-meta);
}

/* --------------------------------------------------------------------------
   16. CTA bands
   -------------------------------------------------------------------------- */

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  padding-block: 104px;
}
.cta-band--tight { padding-block: 96px; gap: 40px; }

/* --------------------------------------------------------------------------
   17. Risk warning
   -------------------------------------------------------------------------- */

.risk-warning {
  background: var(--ivory-sunk);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.risk-warning__inner {
  padding-block: 34px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.risk-warning__dot {
  width: 6px; height: 6px;
  margin-top: 8px;
  background: var(--red);
  border-radius: 50%;
}
.risk-warning p {
  margin: 0;
  max-width: 96ch;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy-deep);
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--navy-deep); color: var(--on-navy); }
.site-footer__inner { padding: 80px 40px 40px; }

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(248, 246, 241, 0.18);
}
.site-footer__mark { height: 30px; width: auto; display: block; margin-bottom: 26px; }
.site-footer__blurb {
  margin: 0;
  max-width: 38ch;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--on-navy-dim);
}
.site-footer__col { display: flex; flex-direction: column; gap: 14px; }
.site-footer__colhead {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-navy-footer);
}
.site-footer__col a,
.site-footer__col span {
  font-size: 15px;
  font-weight: 300;
  color: var(--on-navy-bright);
}
.site-footer__col a:hover { color: var(--red); }
.site-footer__col .muted { color: var(--on-navy-dim); line-height: 1.6; }

.site-footer__legal {
  padding-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px 56px;
}
.site-footer__legal p {
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--on-navy-footer);
}
.site-footer__legal a {
  color: var(--on-navy-dim);
  border-bottom: 1px solid rgba(169, 182, 203, 0.4);
}
.site-footer__legal a:hover { color: var(--ivory); border-bottom-color: var(--ivory); }

.site-footer__base {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(248, 246, 241, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}
.site-footer__base p { margin: 0; font-size: 12px; font-weight: 300; color: var(--on-navy-footer); }
.site-footer__base nav { display: flex; flex-wrap: wrap; gap: 28px; }
.site-footer__base nav a { font-size: 12px; font-weight: 300; color: var(--on-navy-footer); }
.site-footer__base nav a:hover { color: var(--ivory); }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .split,
  .split--12-1,
  .split--115-1,
  .split--1-1,
  .split--media,
  .split--form { gap: 56px; }

  .hero__inner { gap: 48px; }
}

@media (max-width: 1024px) {
  :root { --gutter: 32px; }

  /* Collapse every editorial split to a single column. */
  .split,
  .split--1-145,
  .split--1-16,
  .split--1-13,
  .split--12-1,
  .split--115-1,
  .split--1-1,
  .split--media,
  .split--form,
  .lead-article {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    align-items: start;
  }

  .section { padding-block: 80px; }
  .section--tight { padding-block: 64px; }
  .cta-band, .cta-band--tight { padding-block: 72px; }

  .hero { min-height: 0; }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding-top: 88px;
    padding-bottom: 72px;
  }

  .service-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .service-row__n { padding-top: 0; }

  .media-figure img { height: 420px; }
  .lead-article img { height: 340px; }

  .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .site-footer__inner { padding: 64px var(--gutter) 40px; }

  .rule-cards { gap: 44px; }
  .reviews { gap: 48px; }
}

/* Collapse the nav into a disclosure panel. */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 28px;
    background: var(--ivory);
    border-bottom: 1px solid var(--rule);
  }
  .site-nav[hidden] { display: none; }

  .site-nav__link {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
  }
  .site-nav__link::after { width: 28px; }
  .site-nav__link[aria-current="page"]::after { background: var(--red); }

  .site-nav__cta {
    margin: 22px 0 0;
    padding: 17px 22px;
  }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; --header-h: 72px; }

  .site-header__actions { gap: 14px; }
  .site-header__phone { font-size: 14px; }
  .site-header__logo img { height: 28px; }

  .section { padding-block: 60px; }
  .section--tight { padding-block: 48px; }
  .cta-band, .cta-band--tight { padding-block: 56px; gap: 28px; }

  .split, .lead-article { gap: 36px; }

  .hero__inner { padding-top: 64px; padding-bottom: 56px; gap: 40px; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { flex: 1 1 100%; }

  .enquiry-panel { padding: 30px 24px 32px; }

  .tile { padding: 34px 26px 40px; }
  .figure-tile { padding: 30px 24px; }

  .media-figure img { height: 300px; }
  .lead-article img { height: 240px; }

  .team-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 36px 24px; }
  .team-member__name { font-size: 21px; }

  .strip__inner { gap: 16px; font-size: 11px; }

  .risk-warning__inner { gap: 16px; }
  .risk-warning p { font-size: 12px; line-height: 1.75; }

  .site-footer__base { gap: 18px; }
  .site-footer__base nav { gap: 20px; }

  .btn { padding: 16px 26px; }
  .btn--ivory, .btn--ghost-solidhover { padding: 16px 28px; }
}

/* Very narrow phones: the logo, number and menu button stop fitting on one
   line. Collapse the number to its icon, but keep the digits in the
   accessibility tree so screen readers still announce it. */
@media (max-width: 430px) {
  .site-header__phone {
    padding: 9px;
    border: 1px solid var(--rule-strong);
  }
  .site-header__phone span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .site-header__phone svg { width: 15px; height: 15px; }
  .nav-toggle { padding: 10px 12px; }
}

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .nav-toggle, .hero__media, .hero__scrim, .hero__duotone { display: none !important; }
  body { background: #fff; color: #000; }
  .section--navy, .section--navy-mid, .site-footer { background: #fff !important; color: #000 !important; }
  a { color: #000; }
}