/* Watson Property Finance
   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: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --fs-card: 0.84375rem;   /* 13.5px: card descriptions and other small supporting text */
  --orange: #F7931E;
  --orange-hover: #FFA53A;
  --orange-deep: #A85400;   /* orange text on light backgrounds (5: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: "Plus Jakarta Sans", 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: 24px;
  --radius: 16px;
  --radius-sm: 10px;
  --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(--orange); 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(--orange);
  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(--orange);
  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(--orange);
  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(--orange); 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: 4px; }
/* 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: 38px; aspect-ratio: 1805 / 386; overflow: visible; }

/* Both logos draw themselves like the intro, without the zoom: "watson" rises, "property finance" 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: 18px; height: 18px; color: var(--orange); }

/* 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 orange icons. */
.header-call {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: 999px;
  background: var(--orange);
  color: var(--ink);
}
.header-call .icon { width: 19px; height: 19px; }

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  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(--orange);
  cursor: pointer;
}
.menu-toggle .icon { grid-area: 1 / 1; width: 22px; height: 22px; }
.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: 34px; }
  .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: 180px; 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(--orange);
    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, .menu-mark, .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, orange 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(--orange); }
  .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(--orange); }

  .menu-extras { display: grid; gap: 10px; margin-top: 16px; }
  .menu-label {
    margin: 0 0 8px;
    color: var(--orange);
    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(--orange); color: var(--orange); }

  /* Andrew's mini card. */
  .menu-andrew {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--white);
    text-decoration: none;
  }
  .menu-andrew img { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; object-fit: cover; object-position: center 20%; }
  .menu-andrew > span { display: grid; gap: 2px; line-height: 1.3; }
  .menu-andrew strong { font-size: 0.9375rem; }
  .menu-andrew > 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-andrew .menu-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
  }
  .menu-andrew .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(3, 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: 14px;
    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;
    border-radius: 50%;
    background: var(--orange);
    color: var(--ink);
    transition: transform 0.3s var(--ease), box-shadow 0.3s;
  }
  .menu-contact .icon { width: 17px; height: 17px; }
  .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); box-shadow: 0 0 0 5px rgba(247, 147, 30, 0.2); }

  /* 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; }

  /* Faint W watermark, hanging off the right edge (the panel clips it). */
  .menu-mark {
    position: absolute;
    right: -70px;
    bottom: 110px;
    width: 320px;
    height: 162px;
    color: var(--orange);
    opacity: 0.06;
    pointer-events: none;
  }
}

/* Tablets: links on the left; shortcuts, Andrew 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);
}

.hero-media { position: absolute; inset: 0; overflow: hidden; }
.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 behind the form. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.6) 0%, rgba(30, 30, 30, 0.72) 45%, var(--ink) 100%);
}

.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(--orange);
  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: clamp(720px, 100vh, 880px);
    min-height: clamp(720px, 100svh, 880px);
    padding: calc(var(--header-h) + 24px) 0 56px;
  }
  .hero-media {
    right: auto;
    width: 82%;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }
  /* A soft shade along the top keeps the transparent header readable over bright photos. */
  .hero-media::after {
    background:
      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; }
  .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) {
  .hero-media { bottom: auto; height: min(660px, 100%); }
  .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) + 12px); }
  .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: 18px;
  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; }

.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(--orange);
  box-shadow: 0 0 0 3px rgba(247, 147, 30, 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); }

.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: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--orange);
  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, .site-footer .footer-nav a[data-exit] {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 3px;
}

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

/* Phones: Coreco-like sizes. 16px fields stop iPhones zooming in when a field is tapped, and the
   small print carries required Openwork wording, so it stays readable. */
@media (max-width: 800px) {
  .field input, .field select, .field textarea, .float-label { font-size: 1rem; }
  .enquiry-form .btn-block { min-height: 58px; }
  .panel-title { font-size: 1.75rem; }
  .panel-intro { font-size: 0.9375rem; }
  .enquiry-form .btn-caps { font-size: 1rem; }
  .form-small { font-size: 0.8125rem; }
  .field-check label { font-size: 0.875rem; }
  .field-hint { font-size: 0.8125rem; }
}

/* ---------- 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) {
  .trust-list { gap: 22px 0; }
  .trust-item { gap: 10px; }
  .trust-item:nth-child(2n) { padding-left: 14px; 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) { padding-left: 10px; }
  .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-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(--orange);
  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(--orange); 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; }
}

/* ---------- 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: 12px;
  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 strong span { color: var(--orange); font-size: 0.75rem; 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(--orange);
  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(--orange); }
.client-quote blockquote p::after { content: "\201D"; color: var(--orange); }
.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 Andrew's 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(--orange);
  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: 32px 0 0 32px; }
  .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: 32px 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(--orange);
  color: var(--ink);
}
.contact-icon .icon { width: 46%; height: 46%; }
.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(--orange); }

.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. */
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 40px; }
.footer-links { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-left: 1px solid var(--on-dark-line);
  color: var(--on-dark);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links li:first-child a { padding-left: 0; border-left: 0; }
.footer-links li:last-child a { padding-right: 0; }
.footer-links a:hover { color: var(--white); }

.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: 4px;
  background: rgba(247, 147, 30, 0.16);
  color: var(--orange);
}

/* Phones: logo, then each group on its own line, all left-aligned. */
@media (max-width: 599px) {
  .footer-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-nav { flex-direction: column; align-items: flex-start; }
  .footer-links a { padding: 0 14px; }
}

/* ---------- 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 ---------- */

.js .hero-anim {
  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 1.8s var(--ease) both; }

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

/* Phones: the hero text comes in quickly (in place by 0.7s), then the divider draws in (0.55-1s), then
   the callback form fades in sliding up (0.85-1.45s). Times count from the end of the intro. */
@media (max-width: 800px) {
  .js .hero-anim { animation-duration: 0.5s; animation-delay: calc(var(--d, 0) * 50ms); }
  .js .hero-content::after { transform: scaleX(0); transform-origin: left center; animation: hero-line 0.45s var(--ease) 0.55s forwards; }
  .js .hero-panel { opacity: 0; transform: translateY(28px); animation: rise 0.6s var(--ease) 0.85s forwards; }
}
@keyframes hero-line { to { transform: scaleX(1); } }
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }

/* 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(--orange-hover); transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(247, 147, 30, 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(--orange-hover); }
  .service-card:hover .card-link .icon { transform: translateX(3px); }
}
@media (hover: none) {
  .btn-primary:active { background: var(--orange-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 { 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; }
  .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); } }
@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) ----------
   The logo draws itself on charcoal while slowly zooming in: "watson" fades up, "property finance"
   fades down, the orange triangle drops in, the orange zigzag is written left to right (formed at
   1.85s). It holds for a beat, then zooms back out as it fades away with the background (2.25-2.8s).
   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;
  background: var(--ink);
  animation: intro-out 0.55s cubic-bezier(0.4, 0, 0.6, 1) 2.25s forwards;   /* with the zoom-out, ending just before it */
}
.intro-logo {
  width: min(72vw, 520px);
  height: auto;
  overflow: visible;
  animation: intro-zoom 2.85s linear forwards;
}
.intro-word { opacity: 0; transform: translateY(44px); animation: intro-in 0.7s var(--ease) 0.15s forwards; }
.intro-sub { opacity: 0; transform: translateY(-34px); animation: intro-in 0.7s var(--ease) 0.4s forwards; }
.intro-tri { opacity: 0; transform: translateY(-48px); animation: intro-in 0.5s var(--ease) 0.85s forwards; }
.intro-pen { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-write 0.8s cubic-bezier(0.45, 0.05, 0.4, 1) 1.05s forwards; }

@keyframes intro-in { to { opacity: 1; transform: none; } }
@keyframes intro-write { to { stroke-dashoffset: 0; } }
/* Slow zoom in while it draws (to 1.85s, when it's fully formed), hold (to 2.25s), zoom out while fading (to 2.85s). */
@keyframes intro-zoom {
  0% { transform: scale(0.94); animation-timing-function: cubic-bezier(0.25, 0.4, 0.4, 1); }
  65% { transform: scale(1.06); animation-timing-function: linear; }
  79% { transform: scale(1.06); animation-timing-function: cubic-bezier(0.55, 0, 0.35, 1); }
  100% { transform: scale(0.86); }
}
@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 the header logo wait until the intro has gone. */
.intro-on .hero-anim, .intro-on .hero-media img, .intro-on .hero-panel,
.intro-on .hero-content::after { animation-play-state: paused; }
html.js.intro-on .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 { opacity: 1 !important; transform: none !important; animation: none !important; }
  .site-header { position: absolute; }
  .menu-toggle, .header-call, .exit-dialog, .intro { display: 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; }
}