/* David Adamson Mortgages (built from the Watson Property Finance site)
   Compliance note: risk warnings and disclosures (.risk-box, .risk-caps, .risk-note,
   .footer-legal, form compliance text) must never be hidden, collapsed or animated on their own,
   and must stay bold, boxed and no smaller than the benefit text beside them. The only motion
   allowed is the callback form fading in as a whole on phones, briefly, as the page opens.

   Layout breakpoints (Coreco-aligned): 600 / 800 / 1100, plus 1024 for the header menu
   and 900 / 1280 / 1360 for the services and About grids. Each section keeps its own
   media queries, in the order: base, wider screens, narrower screens. */

@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --fs-card: 0.84375rem;   /* 13.5px: card descriptions and other small supporting text */
  --blue: #4A90F0;
  --blue-hover: #6AA6F5;
  --blue-deep: #1F5FB8;   /* blue text on light backgrounds (6:1) */
  --ink: #1E1E1E;
  --ink-3: #323232;
  --paper: #F8F7F4;
  --white: #FFFFFF;
  --text: #1A1A1A;
  --muted: #5C5C5C;
  --line: #E4E1DA;
  --on-dark: rgba(255, 255, 255, 0.78);
  --on-dark-line: rgba(255, 255, 255, 0.14);
  --error-dark: #FF9C8F;
  --success-dark: #8EE3B5;

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container: 1360px;
  --gutter: max(16px, 6vw);          /* phones: 88% wide, like Coreco */
  --header-h: 68px;
  --section-pad: clamp(48px, 5.5vw, 80px);
  --radius-lg: 18px;
  --radius: 12px;
  --radius-sm: 8px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 601px) { :root { --gutter: 5vw; } }     /* 90% */
@media (min-width: 801px) { :root { --gutter: 4.5vw; } }   /* 91% */
@media (min-width: 1024px) { :root { --header-h: 92px; } }
@media (min-width: 1101px) { :root { --gutter: 4vw; } }    /* 92% */

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);   /* sections land flush under the header */
  /* The page starts (hero) and ends (footer) dark, so the bounce area past either end is dark too.
     The body keeps the light paper colour for everything in between. */
  background: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (min-width: 900px) { body { font-size: 0.9375rem; } }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: currentColor;   /* Phosphor icons are solid shapes */
}

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

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

.skip-link {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }
/* Links to a card or the contact form (rather than a section) leave a little room under the header. */
.service-card, #contact-form { scroll-margin-top: 16px; }

/* ---------- Type ---------- */

.eyebrow {
  margin: 0 0 14px;
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(2.125rem, 1.1rem + 2.3vw, 3.125rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.underlined::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 22px;
  border-radius: 2px;
  background: var(--blue);
  transform-origin: left center;
}

.section-text {
  max-width: 46ch;
  margin-top: 22px;
  color: var(--muted);
}
.section-dark .section-text { color: var(--on-dark); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.btn .icon { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }

.btn-primary { background: var(--blue); color: var(--ink); }
.btn-outline { color: var(--text); background: var(--white); border-color: #D6D2C9; }
.btn-outline:hover { border-color: var(--text); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 0.875rem; }
.btn-block { width: 100%; }

/* ---------- Risk warnings (never animate, hide or shrink below adjacent text) ---------- */

.risk-box {
  margin: 0;
  padding: 11px 14px;
  border: 1px solid rgba(26, 26, 26, 0.55);
  border-radius: var(--radius-sm);
  color: var(--muted);                 /* same colour as the description text in light sections */
  font-size: inherit;                  /* same size as the text beside it, never smaller */
  line-height: 1.5;
}
.risk-box strong { font-weight: 700; }

.risk-box-dark {
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--on-dark);               /* same colour as the description text in dark sections */
}

.risk-caps { letter-spacing: 0.02em; }

.risk-note {
  margin: 0;
  color: var(--muted);
  font-size: inherit;
  font-weight: 400;                    /* "not regulated" lines need no bold; repossession warnings do */
  line-height: 1.5;
}
.risk-group { display: grid; gap: 10px; max-width: 560px; }
.risk-heading {
  margin: 0 0 2px;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  color: var(--white);
  transition: background-color 0.35s, box-shadow 0.35s;
}
.site-header.is-scrolled {
  background: rgba(30, 30, 30, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.brand { display: block; border-radius: 3px; }
/* Header and footer logos: the same size on every screen, a little shorter than the round buttons on phones.
   (.brand img is the 404 page's plain logo.) */
.brand img { width: auto; height: 38px; }
.logo-mark { display: block; width: auto; height: 30px; aspect-ratio: 1874 / 278; overflow: visible; }

/* Both logos draw themselves like the intro, without the zoom: "adamson" rises, "mortgages" drops,
   the triangle falls and the zigzag is written left to right (about 1.7 seconds). The header's plays on
   load, after the intro if that runs; the footer's when it scrolls into view (main.js adds .is-drawn).
   Until then the parts wait out of sight. Without scripts, with motion turned off and in print they're simply there. */
.js .logo-mark .lm-word { opacity: 0; transform: translateY(44px); }
.js .logo-mark .lm-sub { opacity: 0; transform: translateY(-34px); }
.js .logo-mark .lm-tri { opacity: 0; transform: translateY(-48px); }
.js .logo-mark .lm-pen { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .logo-mark.is-drawn .lm-word { animation: intro-in 0.7s var(--ease) forwards; }
.js .logo-mark.is-drawn .lm-sub { animation: intro-in 0.7s var(--ease) 0.25s forwards; }
.js .logo-mark.is-drawn .lm-tri { animation: intro-in 0.5s var(--ease) 0.7s forwards; }
.js .logo-mark.is-drawn .lm-pen { animation: intro-write 0.8s cubic-bezier(0.45, 0.05, 0.4, 1) 0.9s forwards; }

.nav-list { display: flex; margin: 0; padding: 0; list-style: none; }
.nav-list a { position: relative; display: block; text-decoration: none; }

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}
.nav-phone .icon { width: 21px; height: 21px; color: var(--blue); stroke-width: 2.35; }   /* ~2px lines, like the About icons */

/* Phones and tablets: tap-to-call (as Coreco keeps its number in view) and the menu button,
   frosted dark glass like the scrolled header, with blue icons. Both 40px, the size of the
   contact list's circles, with the phone drawn exactly like the contact list's. */
.header-call {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: 999px;
  background: var(--blue);
  color: var(--ink);
}
.header-call .icon { width: 52%; height: 52%; stroke-width: 2.23; }

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(30, 30, 30, 0.55);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  color: var(--blue);
  cursor: pointer;
}
.menu-toggle .icon { grid-area: 1 / 1; width: 20px; height: 20px; }
.menu-toggle .icon-close { display: none; }
.nav-open .menu-toggle .icon-open { display: none; }
.nav-open .menu-toggle .icon-close { display: block; }
/* Smallest phones: logos and round buttons a little smaller together, so the header still fits. */
@media (max-width: 359px) {
  .brand img, .logo-mark { height: 27px; }
  .header-call, .menu-toggle { width: 38px; height: 38px; }
}

/* Desktop header: links, phone number and enquiry button in one row. */
@media (min-width: 1024px) {
  .brand img, .logo-mark { width: 240px; height: auto; }
  .menu-toggle, .header-call { display: none; }

  .site-nav { display: flex; align-items: center; gap: 40px; }
  .nav-scroll { display: contents; }   /* links and actions sit in the header row */
  .nav-list { gap: 32px; }
  .nav-list a {
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: color 0.2s;
  }
  .nav-list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 2px;
    border-radius: 1px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s var(--ease);
  }
  .nav-list a:hover, .nav-list a[aria-current="true"] { color: var(--white); }
  .nav-list a:hover::after, .nav-list a[aria-current="true"]::after { transform: scaleX(1); }

  .nav-actions { display: flex; align-items: center; gap: 28px; }
  .nav-phone { font-size: 0.9375rem; }

  /* None of the mobile-menu extras. */
  .menu-extras, .nav-link-desc, .nav-link-arrow, .nav-cta-mobile { display: none; }
}

/* ---------- Mobile menu (below 1024px) ---------- */

@media (max-width: 1023px) {
  .header-inner { gap: 10px; }

  /* While open, the header steps back so the panel can frost the page itself (nested blurs can't). */
  .site-header.nav-open {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  /* Full-screen frosted panel, behind the logo and buttons, inside the header. */
  .site-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--header-h) 0 0;
    overflow: hidden;
    background: rgba(30, 30, 30, 0.84);
    -webkit-backdrop-filter: saturate(140%) blur(22px);
    backdrop-filter: saturate(140%) blur(22px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s, transform 0.3s var(--ease), visibility 0s 0.3s;
  }
  .nav-open .site-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

  /* Only the contents scroll (on short screens), between the header and the callback button,
     so nothing slides under the logo. Edges fade where there's more to scroll. */
  .nav-scroll {
    --fade-top: 0px;
    --fade-bottom: 0px;
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px var(--gutter) 10px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent);
  }
  .nav-scroll.fade-top { --fade-top: 20px; }
  .nav-scroll.fade-bottom { --fade-bottom: 28px; }

  /* Links: title, one-line description, blue arrow. */
  .nav-list { flex-direction: column; }
  .nav-list a {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 16px;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--on-dark-line);
    font-size: inherit;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .nav-list a[aria-current="true"] { color: var(--blue); }
  .nav-link-title { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
  .nav-link-desc { grid-column: 1; margin-top: 5px; color: var(--on-dark); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; }
  .nav-link-arrow { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--blue); }

  .menu-extras { display: grid; gap: 10px; margin-top: 16px; }
  .menu-label {
    margin: 0 0 8px;
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .menu-label-rule { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--on-dark-line); }

  /* Service shortcuts. */
  .menu-services { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .menu-services a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: var(--white);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
  }
  .menu-services a:hover, .menu-services a:active { border-color: var(--blue); color: var(--blue); }

  /* The adviser card. */
  .menu-adviser {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--white);
    text-decoration: none;
  }
  .menu-adviser img { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; object-fit: cover; object-position: center 20%; }
  .menu-adviser > span { display: grid; gap: 2px; line-height: 1.3; }
  .menu-adviser strong { font-size: 0.9375rem; }
  .menu-adviser > span > span { color: var(--on-dark); font-size: 0.8125rem; }

  /* "Available to speak now": weekdays 9 to 5, UK time (set by main.js). */
  .menu-adviser .menu-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
  }
  .menu-adviser .menu-status[hidden] { display: none; }
  .status-dot { position: relative; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #34c759; }
  .status-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }

  /* Quick contact tiles. */
  .menu-contact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
  .menu-contact a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 6px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--white);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.25s;
  }
  .menu-contact-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--blue);               /* outline icons, like the rest of the site */
    transition: transform 0.3s var(--ease);
  }
  .menu-contact .icon { width: 24px; height: 24px; stroke-width: 2.06; }   /* ~2px lines, like the About icons */
  .menu-contact a:hover, .menu-contact a:active { background: rgba(255, 255, 255, 0.1); }
  .menu-contact a:hover .menu-contact-icon, .menu-contact a:active .menu-contact-icon,
  .menu-contact a:focus-visible .menu-contact-icon { transform: scale(1.08); }

  /* Call to action pinned to the foot of the panel. */
  .nav-actions {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 16px;
    flex-shrink: 0;
    padding: 10px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  }
  .nav-actions .btn { min-height: 48px; font-size: 0.9375rem; }
  .nav-phone, .nav-cta-desktop { display: none; }

}

/* Tablets: links on the left; shortcuts, adviser card and contact on the right, with the button below them. */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav-scroll {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: start;
    flex: 0 1 auto;                    /* the button follows the content rather than the foot of a tall screen */
    padding-top: 16px;
  }
  .menu-extras { margin-top: 10px; }   /* level with the first link's title */
  .nav-actions { padding-top: 8px; padding-left: calc(50% + 24px); }
}

/* Staggered entrance as the menu opens; the green availability dot pulses gently. */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .nav-open .menu-stagger { animation: menu-in 0.5s var(--ease) both; animation-delay: calc(90ms + var(--i, 0) * 45ms); }
  .status-dot::after { animation: dot-pulse 2s ease-out infinite; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes dot-pulse { from { opacity: 0.6; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }

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

.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 20px) 0 48px;
  background: var(--ink);
  color: var(--white);
}
@media (max-width: 800px) { .hero { padding-top: calc(var(--header-h) + 36px); } }   /* phones: room above the eyebrow */

.hero-media { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }   /* photo, then grey wash, then shading */
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}
/* Phones: like Coreco, the photo fills the top of the hero, then fades to solid charcoal behind the form (from
   660px). The shading eases in with the page, so the solid part comes in with the gradient after the intro. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.6) 0, rgba(30, 30, 30, 0.72) 297px, var(--ink) 660px);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 40px;
}

.hero-title {
  margin-bottom: 18px;
  font-size: clamp(2.375rem, 1.2rem + 4.2vw, 4.5rem);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.hero-title .line { display: block; }

.hero-lead {
  margin-bottom: 10px;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.hero-text {
  max-width: 450px;
  margin-bottom: 22px;
  color: rgba(255, 255, 255, 0.86);
}

.tick-list {
  display: grid;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.tick-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: inherit;   /* body size, so the hero warning is never smaller than the benefits above it */
  font-weight: 700;
}
.tick {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue);
  color: var(--ink);
}
.tick .icon { width: 14px; height: 14px; }
.tick-list .tick .icon { transform: translateY(0.5px); }

.hero-risk {
  max-width: 470px;
  background: rgba(30, 30, 30, 0.35);
  color: rgba(255, 255, 255, 0.86);    /* matches .hero-text */
}

/* Side by side: text on the left, the callback form on the right. */
@media (min-width: 801px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: 720px;
    padding: calc(var(--header-h) + 24px) 0 56px;
  }
  /* The photo runs full width and on under the trust strip (clipped by .first-screen), so the intro's window
     shows only the photo. Its fade to charcoal on the right is part of the shading, which arrives with the page. */
  .hero { overflow: visible; }
  .hero-media { bottom: -160px; }
  /* A soft shade along the top keeps the transparent header readable over bright photos. */
  .hero-media::after {
    background:
      linear-gradient(270deg, var(--ink) 18%, rgba(30, 30, 30, 0) 30%),
      linear-gradient(180deg, rgba(30, 30, 30, 0.6) 0, rgba(30, 30, 30, 0) 200px),
      linear-gradient(90deg, rgba(30, 30, 30, 0.88) 0%, rgba(30, 30, 30, 0.6) 40%, rgba(30, 30, 30, 0.12) 65%, rgba(30, 30, 30, 0.3) 100%),
      linear-gradient(0deg, rgba(30, 30, 30, 0.5) 0%, rgba(30, 30, 30, 0) 35%);
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 440px;
    grid-template-areas: "content panel" "risk panel";
    grid-template-rows: auto 1fr;       /* any extra height from the taller form goes below the warning */
    column-gap: 64px;
    row-gap: 0;
  }
  /* Text and form card share a top edge. */
  .hero-content { grid-area: content; align-self: start; }
  .hero-panel { grid-area: panel; align-self: start; }
  .hero-risk { grid-area: risk; align-self: start; margin-top: 30px; }
  /* The benefits a little larger, and the warning with them, so it's never smaller than the benefits. */
  .hero-content .tick-list, .hero-risk { font-size: 1.0625rem; }
  .hero-title { margin-bottom: 24px; }
  .hero-lead { margin-bottom: 12px; }
  .hero-text { margin-bottom: 26px; }
  .tick-list { gap: 12px; margin-bottom: 30px; }
  .hero-content .tick-list { margin-bottom: 0; }
}

/* Tablets and small laptops (801-1100px): the form takes 41%, headline sized to fit two lines. */
@media (min-width: 801px) and (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 41%; column-gap: 4%; }
  .hero-title { font-size: 5.1vw; }
}

/* Small laptops: size the headline to its column so it always sits on two lines. */
@media (min-width: 1101px) and (max-width: 1359px) {
  .hero-title { font-size: clamp(2.75rem, 9.6vw - 54px, 4.5rem); }
}

/* Phones and small tablets: benefits, a thin divider, the callback form, then the warning. */
@media (max-width: 800px) {
  /* The photo is framed 660px tall, showing as much of the room as fits, with the fireplace (57% across the photo,
     which is 990px wide at this height) at the centre of the screen. During the intro it's enlarged from the top to
     fill the screen, so the cutout shows only photo, then drifts slowly back as the page comes in; the box itself covers
     the first screen, and the shading turns it solid charcoal from 660px down. */
  .hero-media { bottom: auto; height: max(660px, 100vh); height: max(660px, 100svh); }
  .hero-media img { height: 660px; object-position: calc(50vw - 564px) center; transform-origin: 50% 0; }
  .hero-grid { row-gap: 24px; }
  .hero-title { font-size: 7vw; }
  .hero-content .tick-list { margin-bottom: 4px; }
  .hero-content::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 24px;
    background: rgba(255, 255, 255, 0.18);
  }
}

@media (max-width: 600px) {
  .hero-title { font-size: clamp(2.5rem, 11vw, 3.25rem); }
  .tick { width: 26px; height: 26px; }
}

/* Smallest phones: keep the hero warning on the first screen. */
@media (max-width: 359px) {
  .hero { padding-top: calc(var(--header-h) + 24px); }
  .hero-title { font-size: 2rem; margin-bottom: 12px; }
  .hero-lead { font-size: 1.0625rem; }
  .hero-text { display: none; }
  .tick-list { gap: 8px; }
}

/* ---------- Forms (hero callback and contact) ---------- */

.form-panel {
  padding: 19px;                       /* + 1px border = the service cards' 20px inset */
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: rgba(28, 28, 28, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--white);
}

.panel-title {
  margin-bottom: 8px;
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.875rem);
  letter-spacing: -0.03em;
}
.panel-intro { margin-bottom: 20px; color: var(--on-dark); font-size: 0.875rem; line-height: 1.5; }
/* The logo badge beside the intro, as tall as the text: two lines (the text never runs wider than that),
   or three on narrower screens (main.js adds .is-3-lines). Sized in the intro's own font size. Phones: 32px. */
.panel-intro-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.panel-intro-row .panel-intro { max-width: 46ch; margin-bottom: 0; }
.panel-avatar {
  --lines: 2;
  flex-shrink: 0;
  width: calc(var(--lines) * 1.5em);
  height: calc(var(--lines) * 1.5em);
  border-radius: 50%;
  font-size: 0.875rem;
  object-fit: cover;
  object-position: center 20%;
}
.is-3-lines .panel-avatar { --lines: 3; }

.field { display: grid; gap: 6px; margin-bottom: 10px; }
.field-row { display: grid; gap: 0 10px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 104px; resize: vertical; }
.field ::placeholder { color: #6B6B6B; opacity: 1; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(74, 144, 240, 0.45);
}
.field [aria-invalid="true"] { border-color: var(--error-dark); box-shadow: 0 0 0 2px rgba(255, 156, 143, 0.6); }

/* Floating labels: the label sits in the field until it's used, then moves to the top. */
.field-float { position: relative; }
.field-float input,
.field-float textarea { padding: 21px 15px 7px; }
.field-float textarea { padding-top: 25px; }
.float-label {
  position: absolute;
  top: 14px;
  left: 16px;
  right: 16px;
  overflow: hidden;
  color: #6B6B6B;
  font-size: 0.9375rem;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.18s var(--ease), color 0.18s;
}
.field-float input:focus + .float-label,
.field-float input:not(:placeholder-shown) + .float-label,
.field-float textarea:focus + .float-label,
.field-float textarea:not(:placeholder-shown) + .float-label {
  color: #5C5C5C;
  transform: translateY(-9px) scale(0.75);
}

.select-wrap { position: relative; }
.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.field select { padding-right: 42px; text-overflow: ellipsis; cursor: pointer; }
.field select:invalid { color: #6B6B6B; }
.field select option { color: var(--text); }
.select-label { display: none; }   /* phones only: a smaller stand-in for the dropdown's placeholder (below) */

.field-error { margin: 0; color: var(--error-dark); font-size: 0.8125rem; font-weight: 600; }
.field-hint { margin: 0; color: var(--on-dark); font-size: 0.75rem; line-height: 1.5; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 6px 0 16px;
}
.field-check input {
  width: 20px;
  height: 20px;
  margin: 5px 0 0;   /* box top level with the top of the 13px label's first line of letters */
  flex-shrink: 0;
  accent-color: var(--blue);
  cursor: pointer;
}
.field-check label { color: var(--on-dark); font-size: 0.8125rem; line-height: 1.5; cursor: pointer; }

.enquiry-form .btn-block { margin-top: 6px; min-height: 54px; padding-block: 10px; white-space: normal; line-height: 1.35; }

.form-status { margin: 12px 0 0; font-size: 0.875rem; font-weight: 600; }
.form-status:empty { display: none; }
.form-status.is-success { color: var(--success-dark); }
.form-status.is-error { color: var(--error-dark); }
.form-status.is-info { color: var(--white); }

.form-small {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  color: var(--on-dark);
  font-size: 0.75rem;
  line-height: 1.5;
}
.form-small p { margin: 0; }
.form-small a {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-underline-offset: 3px;
}

@media (min-width: 801px) {
  .form-panel { padding: 28px; border-radius: var(--radius-lg); }
}

/* Phones: compact headings and placeholders. What visitors type stays 16px, because smaller text makes
   iPhones zoom in when a field is tapped; the placeholders are 14px (12px once raised). The dropdown can't
   have a smaller placeholder than its text, so its own is hidden and a 14px label shows until a service is
   chosen. The small print in both forms (including the opt-in wording and the message hint) is 10px at the
   client's request, flagged to Openwork in the checklist. */
@media (max-width: 800px) {
  .field input, .field select, .field textarea { font-size: 1rem; }
  .float-label { font-size: 0.875rem; }
  .field-float input:focus + .float-label,
  .field-float input:not(:placeholder-shown) + .float-label,
  .field-float textarea:focus + .float-label,
  .field-float textarea:not(:placeholder-shown) + .float-label { transform: translateY(-10px) scale(0.86); }
  .field select:invalid { color: transparent; }
  .field select:invalid ~ .select-label {
    display: block;
    position: absolute;
    top: 14px;
    left: 16px;
    right: 42px;
    overflow: hidden;
    color: #6B6B6B;
    font-size: 0.875rem;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
  }
  .enquiry-form .btn-block { min-height: 58px; }
  .panel-title { margin-bottom: 12px; font-size: 1.375rem; }
  .panel-intro { margin-bottom: 16px; font-size: 0.8125rem; }
  .panel-intro-row { margin-bottom: 16px; }
  /* Phones: a little smaller than the text, whatever its lines, nudged down 1px so it looks centred
     (the dark suit merges into the panel, which makes the photo look high). */
  .panel-avatar { width: 32px; height: 32px; translate: 0 1px; }
  .enquiry-form .btn-caps { font-size: 0.9375rem; }   /* 15px, as on desktop */
  .form-small, .field-check label, .field-hint { font-size: 0.625rem; }   /* 10px at the client's request: flagged to Openwork (checklist) */
  #callback .form-small { margin-top: 20px; }
  .field-check input { margin-top: 4px; }   /* box top level with the top of the 10px label's first line of letters */
}

/* Phones: the callback form's fields are folded away until its button is first tapped (form-fold is set in
   <head>; main.js adds .form-open, plus .form-opening while they slide down). The data-use and internet
   security lines sit outside the fold, so they always show. Without scripts the fields are simply there. */
@media (max-width: 800px) {
  .form-fields { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.5s var(--ease); }
  .form-fields-inner { min-height: 0; transition: opacity 0.4s var(--ease) 0.1s, transform 0.5s var(--ease); }
  .form-fold .hero-panel:not(.form-open) .form-fields { grid-template-rows: 0fr; overflow: hidden; }
  .form-opening .form-fields { overflow: hidden; }   /* clip only while folded or sliding, so focus rings aren't cut off */
  .form-fold .hero-panel:not(.form-open) .form-fields-inner { visibility: hidden; opacity: 0; transform: translateY(-16px); }
}

/* ---------- Trust strip ---------- */

.trust {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--ink);
  color: var(--white);
}

.trust-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 16px;
  margin: 0;
  padding: 24px 0;
  list-style: none;
}

/* Two 20px lines of text = 40px, so the icon is 40px: snug, top to bottom. */
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-icon {
  width: 43px;          /* the widest glyph at this height; narrower ones are centred, so text lines up */
  height: 40px;         /* each glyph is cropped to its outline, so 40px = exactly the two text lines */
  flex-shrink: 0;
  fill: var(--white);
}
.trust-text { display: flex; flex-direction: column; }
.trust-text strong { color: var(--white); font-size: 1rem; font-weight: 700; line-height: 20px; }
.trust-text span { color: var(--on-dark); font-size: 0.875rem; line-height: 20px; }

@media (min-width: 900px) {
  .trust-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 28px 0; }
  .trust-item { gap: 16px; padding: 0 28px; border-left: 1px solid rgba(255, 255, 255, 0.2); }
  .trust-item:first-child { padding-left: 0; border-left: 0; }
}

/* Phones: 2 x 2 like Coreco, with a divider between the columns. Icon height still equals the two text lines. */
@media (max-width: 600px) {
  /* Two columns sized to their content and centred together, with the divider the same distance from each,
     so it sits centrally between them. */
  .trust-list { grid-template-columns: auto auto; justify-content: center; gap: 22px 0; }
  .trust-item { gap: 10px; }
  .trust-item:nth-child(2n+1) { padding-right: 18px; }
  .trust-item:nth-child(2n) { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, 0.2); }
  .trust-icon { width: 39px; height: 36px; }
  .trust-text strong { font-size: 0.875rem; line-height: 18px; }
  .trust-text span { font-size: 0.75rem; line-height: 18px; }
}
@media (max-width: 359px) {
  .trust-item { gap: 6px; }
  .trust-item:nth-child(2n+1) { padding-right: 12px; }
  .trust-item:nth-child(2n) { padding-left: 12px; }
  .trust-icon { width: 35px; height: 32px; }
  .trust-text strong { font-size: 0.8125rem; line-height: 16px; }
  .trust-text span { line-height: 16px; }
}

/* ---------- Sections ---------- */

.section { padding-block: var(--section-pad); }
.section-light { background: var(--paper); }
.section-dark { background: var(--ink); color: var(--white); }

/* ---------- Services ---------- */

.services-grid { display: grid; gap: 40px; }
.services-intro .btn { margin-top: 28px; }
/* Important information: the warnings for every service, shared here rather than on each card. */
.services-risk { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }

.service-cards {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-card {
  position: relative;                  /* the card-wide link area (below) fills the card */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--white);
  transition: transform 0.45s var(--ease), box-shadow 0.45s;
}

.service-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-3); }
.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.service-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 20px 22px;
}
.service-body h3 { margin-bottom: 8px; font-size: 1.0625rem; letter-spacing: -0.015em; line-height: 1.25; }
.service-body > p { margin-bottom: 16px; color: var(--on-dark); font-size: var(--fs-card); line-height: 1.55; }
.card-note { display: block; margin-top: 6px; }   /* e.g. Commercial finance's "This is a referral service." (Openwork, Nov 2026): own line, same size, inside the description so the cards' rows still line up */

.card-link {
  display: inline-grid;
  place-items: center;
  align-self: flex-start;
  width: 40px;
  height: 40px;
  margin-top: auto;                    /* arrows line up along the foot of the cards */
  border-radius: 50%;
  background: var(--blue);
  color: var(--ink);
  transition: background-color 0.25s;
}
.card-link .icon { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
/* The whole card is tappable: the arrow link's area stretches over the card. */
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
/* Keyboard focus outlines the whole card, matching the area that's clickable. */
@supports selector(:has(*)) {
  .service-card:has(.card-link:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
  .card-link:focus-visible { outline: none; }
}

/* Cards in a row share their row tracks (subgrid), so titles, descriptions and arrows line up across the row. */
@supports (grid-template-rows: subgrid) {
  .service-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .service-body { display: contents; }
  .service-body > * { margin-inline: 20px; }
  .service-body h3 { align-self: end; margin-top: 20px; }
  .service-body > p { align-self: start; }
  .card-link { align-self: end; justify-self: start; margin-top: 0; margin-bottom: 22px; }
}

@media (min-width: 600px) {
  .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  /* Intro and Important information box on the left, staying in view beside the cards on the right. */
  .services-grid { grid-template-columns: minmax(250px, 32%) minmax(0, 1fr); gap: clamp(32px, 4vw, 48px); }
  .js .services-intro { position: sticky; top: var(--sticky-top, calc(var(--header-h) + 40px)); align-self: start; }
  .service-media { aspect-ratio: 4 / 3; }
}
@media (min-width: 1360px) {
  .services-grid { grid-template-columns: 360px minmax(0, 1fr); gap: 56px; }
  .service-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Phones and tablets (one column): the Important information box follows the cards. It stays in the
   intro in the page source; the intro's own box is dissolved so the box can be placed after them. */
@media (max-width: 899px) {
  .services-intro { display: contents; }
  .services-risk { order: 1; margin-top: 0; }
  .services-intro .btn { margin-top: 8px; margin-bottom: 16px; }   /* closer to the text, more room before the cards */
}

/* ---------- About ---------- */

.about-grid { display: grid; gap: 56px; align-items: center; }

.portrait {
  position: relative;
  width: min(100%, 400px);
  margin: 0 auto;
}
.portrait-frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.portrait-signature {
  position: absolute;
  right: -3%;            /* small overhang on phones, inside the page gutter */
  bottom: 84px;          /* sits just above the name tag, with room for both to float as you scroll */
  z-index: 1;
  width: 58%;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
/* Signature pen paths (inside the SVG mask). 15px covers the thickest ink (14px), so each pass reveals it fully. */
.sig-pen { fill: none; stroke: #FFFFFF; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }

.portrait-tag {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 11px 16px;
  border-radius: 9px;
  background: var(--white);
  color: var(--text);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.5);
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: nowrap;
}
.portrait-tag strong { font-size: 0.875rem; font-weight: 700; }
.portrait-tag > span { color: var(--muted); }

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 20px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.feature-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--ink);
}
.feature-icon .icon { width: 22px; height: 22px; }
.feature-list h3 { margin-bottom: 10px; font-size: 1.0625rem; line-height: 1.2; letter-spacing: -0.025em; }
.feature-list p { margin: 0; color: var(--on-dark); font-size: var(--fs-card); line-height: 1.55; }

/* Client quotes (switched off in the HTML until real quotes are supplied). */
.client-quote {
  margin: 40px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--on-dark-line);
}
.client-quote blockquote { margin: 0; }
.client-quote blockquote p {
  margin: 0 0 12px;
  color: var(--white);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.client-quote blockquote p::before { content: "\201C"; color: var(--blue); }
.client-quote blockquote p::after { content: "\201D"; color: var(--blue); }
.client-quote figcaption { color: var(--on-dark); font-size: var(--fs-card); }

@media (min-width: 801px) {
  .about-grid { grid-template-columns: 5fr 7fr; gap: clamp(40px, 5vw, 72px); }
  .portrait { width: min(100%, 460px); margin: 0; }
  .portrait-tag { right: 20px; bottom: 20px; }
  .portrait-signature { right: -3%; bottom: 88px; width: 62%; }
  .feature-list { gap: 32px 28px; margin-top: 44px; }
  .feature-list h3 { font-size: 1.1875rem; }
}
@media (min-width: 1280px) {
  .feature-list { grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 48px; }
  .feature-list li { padding: 0 22px; border-left: 1px solid var(--on-dark-line); }
  .feature-list li:first-child { padding-left: 0; border-left: 0; }
  .feature-list li:last-child { padding-right: 0; }
}
@media (min-width: 1360px) { .portrait-signature { right: -14%; } }   /* overhang only where the column gap allows */

/* Phones: text first, then the About photo (Coreco puts copy before the image on phones). */
@media (max-width: 800px) {
  .about-copy { order: -1; }
}

/* ---------- Complex cases ---------- */

.complex { overflow: hidden; }
.complex-grid { display: grid; gap: 48px; align-items: center; }

.complex-list {
  display: grid;
  gap: 22px;
  margin: 32px 0;
  padding: 0;
  list-style: none;
}
.complex-list li { display: flex; align-items: flex-start; gap: 14px; }
.complex-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue);
  color: var(--ink);
}
.complex-icon .icon { width: 20px; height: 20px; }
.complex-list h3 { margin: 2px 0 4px; font-size: 1rem; letter-spacing: -0.01em; }
.complex-list p { margin: 0; color: var(--muted); font-size: var(--fs-card); line-height: 1.55; }


.complex-media { overflow: hidden; border-radius: var(--radius-lg); }
.complex-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 640px) {
  .complex-list { grid-template-columns: 1fr 1fr; gap: 26px 28px; }
}
@media (min-width: 801px) {
  .complex-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); }
  /* Pull the image out to the viewport's right edge, whatever the container width. */
  .complex-media { margin-right: calc((min(var(--container), 100vw - 2 * var(--gutter)) - 100vw) / 2); border-radius: 24px 0 0 24px; }
  .complex-media img { aspect-ratio: auto; height: 100%; min-height: 560px; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .complex-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* Phones: the photo runs off the right edge and sits flush on the section's foot, only its
   top-left corner rounded (as Coreco). */
@media (max-width: 800px) {
  .complex { padding-bottom: 0; }
  .complex-grid { gap: 40px; }
  .complex-media { margin-right: calc(-1 * var(--gutter)); border-radius: 24px 0 0 0; }
  .complex-media img { height: 310px; aspect-ratio: auto; object-position: center 45%; }
}

/* ---------- Contact ---------- */

.contact-grid { display: grid; gap: 48px; }

.contact-list {
  display: grid;
  gap: 16px;
  margin: 30px 0;
  padding: 0;
  list-style: none;
}
.contact-list li { display: flex; align-items: flex-start; gap: 14px; line-height: 1.45; }
.contact-icon {
  --size: calc(1.45 * (0.75rem + 1em) + 2px);   /* label line + 2px + number line */
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue);
  color: var(--ink);
}
.contact-icon .icon { width: 52%; height: 52%; stroke-width: 2.23; }   /* line icons in charcoal; ~2px lines, like the About icons */
.contact-label {
  display: block;
  margin-bottom: 2px;
  color: var(--on-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contact-list a, .contact-list address {
  color: var(--white);
  font-style: normal;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: break-word;
}
/* 44px tall tap targets without changing the layout. */
.contact-list a { display: inline-block; padding-block: 13px; margin-block: -13px; }
.contact-list a:hover { color: var(--blue); }

.contact-panel { background: rgba(255, 255, 255, 0.03); }

@media (min-width: 801px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) 46%; gap: 5%; align-items: start; }   /* text level with the form card's top */
}
@media (min-width: 1101px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) 520px; gap: 80px; }
}
/* Phones: the form follows the address closely once the columns stack. */
@media (max-width: 800px) {
  .contact-grid { row-gap: 32px; }
  .contact-list { margin-bottom: 0; }
}

/* Let grid children shrink below their content width (long dropdown options). */
.hero-grid > *, .services-grid > *, .about-grid > *, .complex-grid > *, .contact-grid > *,
.field > *, .field-row > * { min-width: 0; }

/* ---------- Footer ---------- */

.site-footer {
  padding: 48px 0 calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--on-dark-line);
  background: var(--ink);
  color: var(--on-dark);
  font-size: 0.8125rem;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--on-dark-line);
}
.footer-logo { display: block; }
/* Two groups: the page's sections, then Openwork's notices (on Openwork's site, so they carry an arrow). All the
   links share one style; on wider screens a single divider separates the groups. */
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 32px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.footer-links-legal { padding-left: 32px; border-left: 1px solid var(--on-dark-line); }
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--white); }
.footer-links .icon { width: 13px; height: 13px; color: var(--blue); }

.footer-legal {
  display: grid;
  gap: 8px;
  max-width: 980px;
  padding-top: 24px;
  line-height: 1.6;
}
.footer-legal p { margin: 0; color: rgba(255, 255, 255, 0.72); }
.footer-legal .status-disclosure { color: rgba(255, 255, 255, 0.9); }
.footer-legal .copyright { margin-top: 8px; color: rgba(255, 255, 255, 0.55); }

.placeholder {
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(74, 144, 240, 0.16);
  color: var(--blue);
}

/* Phones: the logo, then the two groups side by side as short lists. */
@media (max-width: 599px) {
  .footer-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-nav { display: grid; grid-template-columns: 1fr 1fr; align-items: start; width: 100%; gap: 0 24px; }
  .footer-links { flex-direction: column; gap: 0; }
  .footer-links-legal { padding-left: 0; border-left: 0; }
  .footer-links a { min-height: 40px; }
}

/* ---------- Exit dialog ---------- */

.exit-dialog {
  width: calc(100% - 32px);
  max-width: 500px;
  padding: 28px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--text);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5);
}
.exit-dialog::backdrop {
  background: rgba(17, 17, 17, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.exit-title { margin-bottom: 10px; font-size: 1.25rem; letter-spacing: -0.02em; }
.exit-text { margin-bottom: 22px; color: var(--muted); font-size: 0.9375rem; }
.exit-actions { display: grid; gap: 10px; }
.exit-actions .btn { white-space: normal; padding-block: 12px; }
@media (min-width: 560px) { .exit-actions { display: flex; flex-wrap: wrap; } }

/* Older Safari (before 15.4) has no <dialog>: keep it hidden until opened, then show it as a
   centred overlay with the same dimmed backdrop (main.js adds .is-fallback). */
.exit-dialog:not([open]) { display: none; }
.exit-dialog.is-fallback[open] {   /* beats the [open] pop animation */
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000;
  margin: 0;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 100vmax rgba(17, 17, 17, 0.6), 0 40px 80px -20px rgba(0, 0, 0, 0.5);
  animation: none;
}

/* ---------- Motion ---------- */

/* The hero warning shares the hero text's rule, with the tick list's --d, so on desktop it arrives with the
   benefits it balances; on phones it rises in with the callback box (below). Never animated on its own. */
.js .hero-anim, .js .hero-risk {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 0.8s var(--ease) forwards;
  animation-delay: calc(120ms + var(--d, 0) * 90ms);
}
.js .hero-media img { animation: settle 3.2s cubic-bezier(0.3, 0, 0.2, 1) both; }
/* A subtle grey wash over the photo clears as it settles. With the intro it stays while the giant W is cut (so
   the cutout shows the photo under the wash), then clears with the zoom. */
.js .hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                          /* above the photo, which moves (and so paints on its own layer) */
  background: rgba(40, 40, 40, 0.5);
  pointer-events: none;
  animation: fade-out 1.5s cubic-bezier(0.3, 0, 0.2, 1) both;
}
/* The shading over the photo eases in with the page, so during the intro only the photo shows through the window. */
.js .hero-media::after { opacity: 0; animation: fade-in 0.7s cubic-bezier(0.33, 0, 0.2, 1) forwards; }
/* With the intro, the photo's slow settle starts as the giant W begins to open the window. */
.intro-played .hero-media img { animation-delay: 1.35s; }
/* Phones: the photo starts enlarged to fill the screen (--photo-cover, set by the intro's script) and drifts slowly
   back to its 660px framing over 5s, easing in and out: with the intro it starts as the giant W is written, and it
   still fills the screen until the shading has turned the bottom charcoal. */
@media (max-width: 800px) {
  .js .hero-media img { animation-name: settle-phone; animation-duration: 5s; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
}
.intro-played .hero-media::before { animation-duration: 0.35s; animation-delay: 2.25s; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }

@keyframes rise { to { opacity: 1; transform: none; } }

/* Desktop: during the intro only the photo shows through the window. Then, from the start of the zoom: the shading
   (with the fade to charcoal on the right) eases in, the header drops in, the hero text rises (the warning with the
   benefits), the callback box rises, the trust strip slides up from the bottom edge and its items follow. In place
   by about 1.5s; the photo keeps settling a little longer. (The header only fades between 801 and 1023px, where the mobile menu lives inside it.) */
@media (min-width: 801px) {
  .first-screen { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--ink); }
  .first-screen .hero { flex: 1 0 auto; }
  .trust { position: relative; z-index: 2; }   /* over the photo, which runs on underneath */
  .js .hero-anim, .js .hero-risk { animation-duration: 0.7s; animation-delay: calc(220ms + var(--d, 0) * 75ms); }   /* just after the shading builds; the warning still with the benefits */
  .js .site-header { opacity: 0; animation: fade-in 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0.15s forwards; }
  .js .hero-panel { opacity: 0; transform: translateY(24px); animation: rise 0.7s var(--ease) 0.3s forwards; }
  .js .trust { transform: translateY(100%); animation: slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards; }
  .js .trust-item { animation: trust-item-in 0.5s var(--ease) both; animation-delay: calc(0.8s + var(--d, 0) * 70ms); }
}
@media (min-width: 1024px) {
  .js .header-inner { transform: translateY(-14px); animation: rise 0.6s var(--ease) 0.15s forwards; }
}
@keyframes slide-up { to { transform: none; } }
@keyframes trust-item-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { to { opacity: 1; } }

/* Phones: the shading eases in, the hero text comes in quickly (in place by 0.8s), then the divider draws in
   (0.6-1s), then the callback box fades in sliding up, with the warning beneath it as one (0.85-1.4s).
   Times count from the start of the intro's zoom. */
@media (max-width: 800px) {
  .js .hero-anim { animation-duration: 0.45s; animation-delay: calc(150ms + var(--d, 0) * 45ms); }   /* just after the shading builds */
  .js .hero-content::after { transform: scaleX(0); transform-origin: left center; animation: hero-line 0.4s var(--ease) 0.6s forwards; }
  .js .hero-panel, .js .hero-risk { opacity: 0; transform: translateY(28px); animation: rise 0.55s var(--ease) 0.85s forwards; }
}
@keyframes hero-line { to { transform: scaleX(1); } }
@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes settle-phone { from { transform: scale(calc(var(--photo-cover, 1) * 1.08)); } to { transform: scale(1); } }
@keyframes fade-out { to { opacity: 0; } }

/* Scroll reveals: only once main.js has set up the observer. A fallback in <head>
   reveals everything if the script never runs. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

.reveal-ready [data-reveal] .underlined::after {
  transform: scaleX(0);
  transition: transform 0.8s var(--ease) 0.3s;
}
.reveal-ready [data-reveal].is-visible .underlined::after { transform: scaleX(1); }

.exit-dialog[open] { animation: pop 0.25s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* Hover effects only where a pointer can hover, so they don't stick after a tap. */
@media (hover: hover) {
  .btn-primary:hover { background: var(--blue-hover); transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(74, 144, 240, 0.6); }
  .service-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.45); }
  .service-card:hover .service-media img { transform: scale(1.05); }
  .service-card:hover .card-link { background: var(--blue-hover); }
  .service-card:hover .card-link .icon { transform: translateX(3px); }
}
@media (hover: none) {
  .btn-primary:active { background: var(--blue-hover); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .hero-anim, .reveal-ready [data-reveal], .js .hero-panel, .js .hero-content::after, .js .hero-risk,
  .js .hero-media::after, .js .site-header, .js .header-inner, .js .trust { opacity: 1; transform: none; animation: none; }
  .js .logo-mark .lm-word, .js .logo-mark .lm-sub, .js .logo-mark .lm-tri { opacity: 1; transform: none; animation: none; }
  .js .logo-mark .lm-pen { stroke-dashoffset: 0; animation: none; }
  .js .hero-media img { animation: none; }
  .js .hero-media::before { display: none; }
  .btn-primary:hover, .service-card:hover, .service-card:hover .service-media img,
  .service-card:hover .card-link .icon { transform: none; }
}

/* Service cards fade in once (warnings included, never left hidden). An animation rather than a
   transition, so the hover lift isn't delayed by the stagger afterwards. */
.reveal-ready .service-card[data-reveal] { transition: transform 0.45s var(--ease), box-shadow 0.45s; transition-delay: 0s; }
.reveal-ready .service-card[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  animation: card-in 0.7s var(--ease) backwards;
  animation-delay: calc(var(--d, 0) * 90ms);
}
@keyframes card-in { from { opacity: 0; transform: translateY(24px); } }
/* Phones and tablets: the cards are simply there as you scroll (dark cards fading in on the light page flashed). */
@media (max-width: 899px) {
  .reveal-ready .service-card[data-reveal], .reveal-ready .service-card[data-reveal].is-visible { opacity: 1; transform: none; animation: none; }
}
@media (hover: hover) {
  .reveal-ready .service-card[data-reveal].is-visible:hover { transform: translateY(-4px); }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .reveal-ready .service-card[data-reveal].is-visible:hover { transform: none; }
}

/* Arrows slide a little to the right when a button is hovered. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover .icon { transform: translateX(4px); }
}

/* ---------- Intro (first view of the page) ----------
   0-1.45s  The logo draws itself on charcoal while slowly zooming in: "adamson" fades up, "mortgages" fades
            down, the house drops in and its blue roof is written left to right.
   1.35s    As it finishes, a giant roof is written behind it, left to right across the whole screen (to 2.2s), cutting
            a window through the charcoal; only the hero photo shows through it, under a subtle grey wash, settling.
   2.25s    The logo zooms out and fades, and the view zooms straight into the roof's apex (at the centre
            of the screen) until the photo fills it (open by about 2.5s; the intro is removed at 2.55s); the grey
            wash over the photo clears as it goes. The page
            comes in from the start of the zoom. The giant roof is placed for each screen by a script in its markup.
   Only with the intro-on class (set in <head>). */

.intro { display: none; }
.intro-on .intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  animation: intro-out 0.01s linear 2.55s forwards;   /* gone once the zoom has opened the window fully */
}
.intro-curtain { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-curtain-fill { fill: var(--ink); }
.intro-bigpen {
  opacity: 0;                          /* nothing at all until the pen starts */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: intro-show 0.01s linear 1.35s forwards, intro-write-big 0.85s cubic-bezier(0.37, 0, 0.63, 1) 1.35s forwards;
}
.intro-through { transform-box: view-box; transform-origin: 0 0; animation: intro-through 0.3s linear 2.25s forwards; }

.intro-logo {
  position: relative;
  width: min(72vw, 520px);
  height: auto;
  overflow: visible;
  animation: intro-zoom 2.55s linear forwards, intro-fade 0.25s cubic-bezier(0.4, 0, 1, 1) 2.25s forwards;
}
.intro-word { opacity: 0; transform: translateY(44px); animation: intro-in 0.6s var(--ease) 0.1s forwards; }
.intro-sub { opacity: 0; transform: translateY(-34px); animation: intro-in 0.6s var(--ease) 0.25s forwards; }
.intro-tri { opacity: 0; transform: translateY(-48px); animation: intro-in 0.4s var(--ease) 0.6s forwards; }
.intro-pen { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-write 0.7s cubic-bezier(0.45, 0.05, 0.4, 1) 0.75s forwards; }

@keyframes intro-in { to { opacity: 1; transform: none; } }
@keyframes intro-write { to { stroke-dashoffset: 0; } }
/* The giant roof's pen: only the stretch that's on screen (worked out per screen by the intro's script). */
@keyframes intro-write-big { from { stroke-dashoffset: var(--pen-from, 1); } to { stroke-dashoffset: var(--pen-to, 0); } }
@keyframes intro-show { to { opacity: 1; } }
@keyframes intro-fade { to { opacity: 0; } }
/* Zoom into the roof: each step multiplies the size, so it reads as an even, accelerating zoom (x60). */
@keyframes intro-through {
  0% { transform: scale(1); }
  10% { transform: scale(1.18); }
  20% { transform: scale(1.54); }
  30% { transform: scale(2.14); }
  40% { transform: scale(3.11); }
  50% { transform: scale(4.72); }
  60% { transform: scale(7.41); }
  70% { transform: scale(12); }
  80% { transform: scale(20); }
  90% { transform: scale(34.2); }
  100% { transform: scale(60); }
}
/* Slow zoom in while it draws (to 1.45s, when it's fully formed), drifts while the giant roof is cut behind it
   (to 2.25s), then zooms out as it fades, with the zoom into the roof (to 2.55s). */
@keyframes intro-zoom {
  0% { transform: scale(0.94); animation-timing-function: cubic-bezier(0.25, 0.4, 0.4, 1); }
  56.9% { transform: scale(1.05); animation-timing-function: linear; }
  88.2% { transform: scale(1.062); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { transform: scale(0.8); }
}
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

/* A tap, scroll or key press skips straight to a quick fade. */
.intro-skip .intro, .intro-skip .intro-logo { animation: intro-out 0.3s ease forwards; }

/* The hero's own entrance (and on desktop the shading, header, warning, callback box and trust strip) and the
   header logo wait until the zoom through the giant W begins (main.js adds .intro-opening), so they arrive as
   the page is revealed; until then only the photo shows through the window. */
.intro-on:not(.intro-opening) .hero-anim, .intro-on:not(.intro-opening) .trust-item,
.intro-on:not(.intro-opening) .hero-panel, .intro-on:not(.intro-opening) .hero-content::after,
.intro-on:not(.intro-opening) .hero-risk, .intro-on:not(.intro-opening) .hero-media::after,
.intro-on:not(.intro-opening) .site-header, .intro-on:not(.intro-opening) .header-inner,
.intro-on:not(.intro-opening) .trust { animation-play-state: paused; }
html.js.intro-on:not(.intro-opening) .brand-mark.is-drawn * { animation-play-state: paused; }   /* specific enough to outrank the logo's own animation rule */

/* ---------- Print / PDF (e.g. for Openwork's review): show everything, no scroll effects ---------- */

@media print {
  /* Print the real colours even when "Background graphics" is off, so white text on the dark
     sections (including the warnings and the status disclosure) never prints white on white. */
  html { background: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .service-card, .risk-box, .risk-group, .form-panel, .portrait,
  .feature-list li, .complex-list li, .contact-list li, .footer-legal p { break-inside: avoid; }
  h1, h2, h3, .eyebrow, .section-title { break-after: avoid; }   /* headings stay with what follows */
  [data-reveal], .hero-anim, .service-card, .hero-panel, .hero-content::after, .hero-risk,
  .hero-media::after, .site-header, .header-inner, .trust { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-media::before { display: none !important; }
  .site-header { position: absolute; }
  .menu-toggle, .header-call, .exit-dialog, .intro { display: none !important; }
  .form-fields { grid-template-rows: 1fr !important; overflow: visible !important; transition: none !important; }
  .form-fields-inner { visibility: visible !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  .sig-pen { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  [data-parallax] { translate: none !important; scale: none !important; }
  .logo-mark .lm-word, .logo-mark .lm-sub, .logo-mark .lm-tri { opacity: 1 !important; transform: none !important; animation: none !important; }
  .logo-mark .lm-pen { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ---------- David Adamson additions ---------- */

/* The logo mark in a square badge (mobile menu card and callback form). */
.avatar-initials {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--on-dark-line);
}
.avatar-initials svg { width: 72%; height: 72%; display: block; }
.menu-adviser .avatar-initials { width: 44px; height: 44px; font-size: 0.9375rem; }

/* Blog: home page teaser, the blog index and each post. */
.blog-head { display: grid; gap: 16px; align-items: end; margin-bottom: 40px; }
.blog-head .section-text { margin: 0; max-width: 60ch; }
.blog-head .btn { justify-self: start; }
@media (min-width: 900px) {
  .blog-head { grid-template-columns: 1fr 1fr auto; gap: 40px; }
}

/* Blog cards are service cards (same look, same whole-card link and hover), with the date above the title. */
.blog-cards .post-date { color: var(--blue); }
@media (min-width: 900px) {
  .blog-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.service-card .post-date { margin: 0 0 6px; }
@supports (grid-template-rows: subgrid) {
  .blog-cards .service-card { grid-row: span 5; }
  .blog-cards .service-body > .post-date { align-self: end; margin: 20px 20px 0; }
  .blog-cards .service-body .post-date + h3 { align-self: start; margin-top: 6px; }
}

/* Line pattern behind About, Contact and the blog's closing call to action, taken from the sweeping lines in the logo
   (tools/build_pattern.py): thick and very faint, decorative only. */
.about, .contact, .cta-band {
  background-image: url("../img/pattern-lines.svg");
  background-size: 1200px;
  background-position: center top;
}

/* ---------- Blog pages (blog/index.html and each post) ----------
   They share the home page's header, footer and motion: the hero text rises in (.hero-anim), the photos settle
   and drift (data-parallax), and sections reveal as they scroll in (data-reveal). */

/* Topic tags: on the cards' photos, the featured post and each post's header. */
.topic-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(74, 144, 240, 0.16);
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.service-media { position: relative; }
.service-media .topic-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  background: rgba(30, 30, 30, 0.72);
  color: var(--white);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Blog page hero: the home page's photo, settling in, with the text rising over it. */
.blog-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(56px, 8vw, 112px)) 0 clamp(48px, 6vw, 88px);
  background: var(--ink);
  color: var(--white);
}
.blog-hero-media { position: absolute; inset: 0; overflow: hidden; }
.blog-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.blog-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(30, 30, 30, 0.94) 0%, rgba(30, 30, 30, 0.8) 45%, rgba(30, 30, 30, 0.5) 100%),
    linear-gradient(0deg, rgba(30, 30, 30, 0.85) 0%, rgba(30, 30, 30, 0) 45%);
}
.js .blog-hero-media img { animation: settle 3.2s cubic-bezier(0.3, 0, 0.2, 1) both; }
.blog-hero-inner { position: relative; z-index: 1; }
.blog-hero .hero-title { max-width: 14ch; }
.blog-hero .hero-lead { max-width: 46ch; margin-bottom: 28px; color: rgba(255, 255, 255, 0.86); font-weight: 500; }

.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-chip {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(30, 30, 30, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--white);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.topic-chip:hover { border-color: var(--blue); }
.topic-chip:active { transform: scale(0.97); }
.topic-chip[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: var(--ink); }

/* The latest post, featured large. */
.blog-listing { padding-top: clamp(40px, 5vw, 72px); }
.feature-post {
  position: relative;
  display: grid;
  overflow: hidden;
  margin-bottom: clamp(48px, 6vw, 88px);
  border-radius: var(--radius-lg);
  background: var(--ink) url("../img/pattern-lines.svg") center top / 1200px;
  color: var(--white);
  transition: transform 0.45s var(--ease), box-shadow 0.45s;
}
.feature-media { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink-3); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.feature-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 52px); }
.feature-label { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.feature-label .topic-tag:first-child { background: var(--blue); color: var(--ink); }
.feature-body .post-date { margin: 0 0 10px; color: var(--on-dark); font-size: 0.875rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.feature-title { margin: 0 0 14px; font-size: clamp(1.625rem, 1rem + 1.7vw, 2.375rem); line-height: 1.12; letter-spacing: -0.035em; }
.feature-title a { color: inherit; text-decoration: none; transition: color 0.25s; }
.feature-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* the whole card opens the post */
.feature-excerpt { max-width: 46ch; margin: 0 0 26px; color: var(--on-dark); font-size: 1rem; line-height: 1.6; }
.feature-body .btn { position: relative; z-index: 2; align-self: flex-start; }
@media (min-width: 900px) {
  .feature-post { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .feature-media { aspect-ratio: auto; min-height: 440px; }
}
@media (hover: hover) {
  .feature-post:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5); }
  .feature-post:hover .feature-media img { transform: scale(1.05); }
  .feature-post:hover .feature-title a { color: var(--blue); }
}
.feature-post:has(a:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Listing heading with the filter's result count, and the filter itself. */
.listing-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.listing-title { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.125rem); line-height: 1.1; letter-spacing: -0.03em; }
.listing-count { margin: 0; color: var(--muted); font-weight: 600; }
.blog-cards:not(.is-filtered) [data-featured] { display: none; }   /* the featured post's card shows only when filtering */
.blog-cards .is-hidden, .feature-post.is-hidden { display: none !important; }
.filter-in { animation: card-in 0.5s var(--ease) both; animation-delay: calc(var(--d, 0) * 60ms); }

/* Each post: a dark header on the line pattern, with the photo framed beside the title. */
.post-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(32px, 5vw, 72px)) 0 clamp(40px, 5vw, 80px);
  background: var(--ink) url("../img/pattern-lines.svg") center top / 1200px;
  color: var(--white);
}
.post-hero-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) {
  .post-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 5vw, 80px); }
}
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--on-dark); font-size: 0.8125rem; font-weight: 600; }
.crumbs a { color: var(--on-dark); text-decoration: none; transition: color 0.2s; }
.crumbs a:hover { color: var(--white); }
.crumbs > span:last-child { color: var(--blue); }
.crumbs > span[aria-hidden] { opacity: 0.4; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; color: var(--on-dark); font-size: 0.875rem; font-weight: 600; }
.post-meta time + span::before { content: "·"; margin-right: 14px; opacity: 0.6; }
.post-title { max-width: 18ch; margin: 0 0 20px; font-size: clamp(2.125rem, 1.1rem + 3vw, 3.5rem); font-weight: 750; line-height: 1.04; letter-spacing: -0.04em; }
.post-lead { max-width: 50ch; margin: 0; color: rgba(255, 255, 255, 0.86); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.55; }
.post-hero-media { overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--ink-3); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.post-hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* Article and its sticky side panel (contents and an adviser card) on desktop. */
.post-section { padding-top: clamp(40px, 5vw, 80px); }
.post-layout { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .post-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(48px, 6vw, 112px); align-items: start; }
  .post-aside { position: sticky; top: calc(var(--header-h) + 24px); }
}
.post-body { max-width: 68ch; font-size: 1.0625rem; }
.post-body > p:first-child { font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem); font-weight: 500; line-height: 1.6; }
.post-body h2 { margin: 2.2em 0 0.7em; font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.75rem); line-height: 1.25; letter-spacing: -0.025em; scroll-margin-top: calc(var(--header-h) + 24px); }
.post-body h2::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: 14px; border-radius: 2px; background: var(--blue); }
.post-body p, .post-body li { color: #2E2E2E; line-height: 1.8; }
.post-body ul { margin: 0 0 1.2em; padding: 0; list-style: none; }
.post-body ul li { position: relative; margin-bottom: 8px; padding-left: 26px; }
.post-body ul li::before { content: ""; position: absolute; top: 0.72em; left: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.post-body .risk-note { margin-top: 44px; }
.post-body .risk-box { margin-top: 16px; }

.post-aside { display: grid; gap: 20px; }
.toc { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.toc-title { margin: 0 0 12px; color: var(--blue-deep); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc a {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.toc a::before { content: counter(toc, decimal-leading-zero); counter-increment: toc; color: var(--blue-deep); font-variant-numeric: tabular-nums; }
.toc a:hover { background: rgba(74, 144, 240, 0.08); color: var(--text); }
.toc a[aria-current="true"] { background: rgba(74, 144, 240, 0.14); color: var(--text); }
@media (max-width: 1023px) { .toc { display: none; } }   /* phones and tablets: the article comes first and the panel follows it */

.adviser-card {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--ink) url("../img/pattern-lines.svg") center / 1200px;
  color: var(--white);
}
.adviser-card .avatar-initials { width: 48px; height: 48px; margin-bottom: 6px; }
.adviser-card-title { margin: 0; font-size: 1.125rem; font-weight: 700; }
.adviser-card-text { margin: 0 0 10px; color: var(--on-dark); font-size: 0.9rem; line-height: 1.5; }
.adviser-card .btn { justify-self: stretch; }
.adviser-card-phone { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--white); font-weight: 600; text-decoration: none; }
.adviser-card-phone .icon { width: 18px; height: 18px; color: var(--blue); stroke-width: 2.2; }
.adviser-card-phone:hover { color: var(--blue); }

/* Newer and older posts. */
.post-pager { display: grid; gap: 16px; margin-top: clamp(48px, 6vw, 80px); }
@media (min-width: 700px) { .post-pager { grid-template-columns: 1fr 1fr; } }
.pager-link {
  display: grid;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.25s, transform 0.3s var(--ease), box-shadow 0.3s;
}
.pager-older { text-align: right; }
.pager-label { color: var(--blue-deep); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.pager-title { font-weight: 700; line-height: 1.35; }
@media (hover: hover) {
  .pager-link:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.3); }
}
.related-posts { padding-top: 0; }

/* The closing call to action, on the line pattern. */
.cta-band-inner { display: grid; gap: 20px; align-items: end; }
.cta-band .section-text { margin: 0; color: var(--on-dark); }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
  .cta-band-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 48px; }
}
.btn-ghost { border-color: rgba(255, 255, 255, 0.28); background: transparent; color: var(--white); }
.btn-ghost:hover { border-color: var(--white); }
.btn-ghost .icon { color: var(--blue); }

/* Reading progress, along the top of the screen on each post. */
.read-progress { position: fixed; inset: 0 0 auto; z-index: 150; height: 3px; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left center; }

/* The current page's link in the header (Blog, on the blog pages). */
.nav-list a[aria-current="page"] { color: var(--blue); }
@media (min-width: 1024px) {
  .nav-list a[aria-current="page"] { color: var(--white); }
  .nav-list a[aria-current="page"]::after { transform: scaleX(1); }
}