/* Jain, Neil & Ruddy — design system
   Ink: Victorian ironwork green. Paper: blonde sandstone. Brass for rules only. */

:root {
  /* Jain, Neil & Ruddy brand identity, 2026.
     Sampled from the branding document: navy #0A1C34, ivory #F1ECE2,
     gold #AD8955, burgundy #782436, sage #849184. */
  --navy: #0A1C34;
  --ink: #0A1C34;        /* 16.57:1 on paper */
  --ink-70: #455467;     /* 7.49:1  — body colour for secondary text */
  --ink-45: #5C6A7E;     /* 5.33:1  — labels, captions, breadcrumbs */
  --paper: #FEFBF7;      /* document background */
  --paper-2: #F1ECE2;    /* warm ivory, for panels and hover fills */
  --gold: #AD8955;       /* rules and borders only: 3.14:1, too low for text */
  --gold-text: #86683C;  /* 5.02:1, for gold used as text */
  --burgundy: #782436;   /* 9.67:1, errors and emphasis */
  --sage: #849184;       /* 3.20:1, decorative only, never text */

  /* aliases kept so existing rules do not all need rewriting */
  --brass: var(--gold);
  --brass-text: var(--gold-text);

  --line: rgba(10, 28, 52, 0.16);
  --line-soft: rgba(10, 28, 52, 0.08);

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --measure: 66ch;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --rhythm: clamp(3.5rem, 7vw, 6.5rem);
  --header-h: 5.75rem;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Cross-document crossfade between pages. Chrome and Edge today, ignored elsewhere. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  line-height: 1.65;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif); font-weight: 600; line-height: 1.14;
  letter-spacing: -0.012em; margin: 0; text-wrap: balance;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
p { margin: 0 0 1.15em; max-width: var(--measure); text-wrap: pretty; }
a { color: inherit; }

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.wrap { width: 100%; max-width: 1220px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--rhythm); border-top: 1px solid var(--line-soft); }
.section:first-of-type { border-top: 0; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1rem; font-family: var(--sans); font-size: 0.9rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 100; }

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

/* The header floats over the hero photograph at the top of every page, then
   settles onto paper once you scroll. data-scrolled defaults to "true" in the
   markup so that without JavaScript the header is always the readable version. */
.masthead {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  transition: border-color 220ms var(--ease-out), background-color 220ms var(--ease-out);
}
.masthead[data-scrolled="false"] {
  border-bottom-color: transparent;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Reading position on long pages. Off the main thread, no JS. */
@supports (animation-timeline: scroll()) {
  .masthead::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--brass); transform: scaleX(0); transform-origin: 0 50%;
    animation: read-progress linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes read-progress { to { transform: scaleX(1); } }

.masthead__inner {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 1.5rem; padding-block: 0; position: static;
  min-height: calc(var(--header-h) - 1px);
}
.masthead__inner > .wordmark, .masthead__inner > .nav-toggle { align-self: center; }

.wordmark { text-decoration: none; display: inline-block; line-height: 0; position: relative; }
.wordmark img { display: block; width: clamp(150px, 15vw, 190px); height: auto; }
.masthead .wordmark img { transition: opacity 220ms var(--ease-out); }
.masthead .wordmark .logo--paper { position: absolute; inset: 0; opacity: 0; }
.masthead[data-scrolled="false"] .wordmark .logo--ink { opacity: 0; }
.masthead[data-scrolled="false"] .wordmark .logo--paper { opacity: 1; }
.footer .wordmark img { width: 190px; margin-bottom: 1.35rem; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); font-family: var(--sans); font-size: 0.9rem; }
.nav { align-self: stretch; }
.nav a {
  text-decoration: none; padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms ease, color 220ms var(--ease-out),
              background-color 220ms var(--ease-out);
}
.masthead[data-scrolled="false"] .nav a { color: var(--paper); }
.masthead[data-scrolled="false"] .nav .tel { background: var(--paper); color: var(--ink); }
.masthead[data-scrolled="false"] .nav-toggle { color: var(--paper); border-color: rgba(254, 251, 247, 0.4); }
.nav .tel {
  font-variant-numeric: tabular-nums; font-weight: 600;
  padding: 0.55rem 0.95rem; background: var(--ink); color: var(--paper);
  border-radius: 3px; border-bottom: 0;
  transition: background-color 160ms ease, transform 140ms var(--ease-out);
}
.nav .tel:active { transform: scale(0.97); }

.nav-toggle {
  display: none; font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.06em;
  background: none; border: 1px solid var(--line); border-radius: 3px;
  padding: 0.5rem 0.8rem; color: inherit; cursor: pointer;
  transition: background-color 160ms ease, transform 140ms var(--ease-out);
}
.nav-toggle:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .nav a:hover { border-bottom-color: var(--brass); }
  .nav .tel:hover { background: #06121F; border-bottom-color: transparent; }
  .nav-toggle:hover { background: var(--paper-2); }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.5rem; z-index: 40;
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out),
                visibility 0s linear 200ms;
  }
  .nav[data-open="true"] {
    visibility: visible; opacity: 1; transform: translateY(0);
    transition-delay: 0s;
  }
  .nav a { width: 100%; padding-block: 0.75rem; border-bottom: 1px solid var(--line-soft); }
  .nav .tel { margin-top: 1rem; width: auto; }
}

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

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  background: var(--ink);
  /* sits behind the sticky header, which paints above it */
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%;
}
/* Scrim: heavier at the top so the navigation stays legible, heavier again at
   the foot where the headline sits. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(10, 28, 52, 0.74) 0%,
      rgba(10, 28, 52, 0.34) 34%,
      rgba(10, 28, 52, 0.52) 66%,
      rgba(10, 28, 52, 0.88) 100%);
}
.hero--tall { min-height: clamp(24rem, 33vw, 32rem); }
.hero--band { min-height: clamp(15rem, 21vw, 21rem); }

.hero__inner { padding-block: clamp(2rem, 4vw, 3.5rem); color: var(--paper); }
.hero h1 {
  color: var(--paper);
  font-size: clamp(2.4rem, 6.4vw, 4.75rem);
  font-weight: 600; letter-spacing: -0.03em; max-width: 15ch;
}
.hero--band h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 20ch; }
.hero__tagline {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: rgba(254, 251, 247, 0.82); margin-top: 1.1rem; max-width: 42ch;
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem;
  margin-top: 1.5rem; font-family: var(--sans); font-size: 0.9rem;
  color: rgba(254, 251, 247, 0.72);
}
.hero__meta a { color: var(--paper); text-decoration-color: var(--brass); text-underline-offset: 3px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.85rem; }
.hero .crumbs { color: rgba(254, 251, 247, 0.7); border-bottom: 0; padding: 0 0 0.65rem; }
.hero .crumbs a { color: var(--paper); }

.btn.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn.btn--onphoto { background: none; color: var(--paper); border-color: rgba(254, 251, 247, 0.45); }
@media (hover: hover) and (pointer: fine) {
  .btn.btn--light:hover { background: #FFFFFF; }
  .btn.btn--onphoto:hover { background: rgba(254, 251, 247, 0.12); }
}

/* ---------- Generic split layout ---------- */

.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.eyebrow {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em;
  color: var(--ink-45); margin: 0 0 1.5rem;
}
.h2 { font-size: clamp(1.85rem, 3.2vw, 2.6rem); margin-bottom: 1.5rem; }
.h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }

.pledges { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pledges li {
  padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft);
  font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.01em;
}

.pullquote {
  border-left: 2px solid var(--brass); padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 2rem 0; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5;
}
.pullquote cite { display: block; margin-top: 0.9rem; font-family: var(--sans); font-style: normal; font-size: 0.85rem; color: var(--ink-45); }

/* ---------- Offices ---------- */

.offices { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 760px) { .offices { grid-template-columns: 1fr; } }
.office { border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.office h3 { font-size: 1.5rem; margin-bottom: 0.85rem; }
.office address { font-style: normal; max-width: 34ch; margin-bottom: 1.1rem; }
.office dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.25rem; margin: 0; font-family: var(--sans); font-size: 0.92rem; }
.office dt { color: var(--ink-45); }
.office dd { margin: 0; }
.office dd a { text-decoration-color: var(--brass); text-underline-offset: 3px; }

/* ---------- Testimonials ---------- */

/* Grid rather than CSS columns: columns flow content top to bottom and left
   the two sides ragged. One lead quote, then the rest in a calm 2x2. */
.quotes {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.quote { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.quote h3 {
  font-family: var(--serif); font-weight: 600; font-size: 1rem;
  color: var(--brass-text); letter-spacing: 0; margin-bottom: 0.85rem;
}
.quote blockquote {
  margin: 0; font-size: 1.02rem; line-height: 1.66;
  white-space: pre-line; color: var(--ink-70); max-width: 46ch;
}
.quote footer {
  font-family: var(--sans); font-size: 0.8rem; color: var(--ink-45);
  margin-top: 1rem; letter-spacing: 0.02em;
}

/* The lead quote runs the full width and is set larger */
.quote--lead { grid-column: 1 / -1; border-top-width: 2px; border-top-color: var(--ink); }
.quote--lead h3 { font-size: 1.15rem; margin-bottom: 1.1rem; }
.quote--lead blockquote {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.5;
  color: var(--ink); max-width: 54ch;
}

@media (max-width: 760px) {
  .quotes { grid-template-columns: 1fr; }
  .quote--lead blockquote { font-size: 1.2rem; }
}

/* ---------- Service and location pages ---------- */

.crumbs { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-45); padding-block: 1.1rem; border-bottom: 1px solid var(--line-soft); }
/* Breadcrumb links were set apart from the surrounding text by opacity alone,
   which is a 1:1 contrast difference. WCAG needs 3:1 if colour is the only
   cue, so the link now carries a persistent underline instead of relying on
   being slightly brighter than the separators around it. */
.crumbs a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(10, 28, 52, 0.4);
  transition: text-decoration-color 160ms ease;
}
.crumbs a:hover { text-decoration-color: var(--gold); }
.hero .crumbs a { text-decoration-color: rgba(254, 251, 247, 0.55); }
.hero .crumbs a:hover { text-decoration-color: var(--gold); }
.crumbs span { padding-inline: 0.5rem; opacity: 0.5; }
.page-head .crumbs { border-bottom: 0; padding-top: 0; margin-bottom: 0.5rem; }

.page-head { padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(1.75rem, 3vw, 2.5rem); }
.page-head h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); max-width: 18ch; }

.article { padding-bottom: var(--rhythm); }
.article--after-hero { padding-top: clamp(2.5rem, 5vw, 4rem); }
.article__body { max-width: var(--measure); }
.article__body h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  margin: 2.75rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft);
}
.article__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article__body h3 { font-size: clamp(1.2rem, 1.7vw, 1.4rem); margin: 2.25rem 0 0.85rem; }
.article__body a { text-decoration-color: var(--brass); text-underline-offset: 3px; }
.article__body img { max-width: 100%; height: auto; }
.article__lede { font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.5; color: var(--ink-70); }

.aside { position: sticky; top: calc(var(--header-h) + 1.5rem); font-family: var(--sans); }
@media (max-width: 900px) { .aside { position: static; margin-top: 3rem; } }
.panel { border-top: 2px solid var(--ink); padding-top: 1.15rem; margin-bottom: 2rem; }
.panel h2 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 0.75rem; }
.panel p { font-size: 0.92rem; color: var(--ink-70); }
.panel__calls { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; margin-top: 1rem; }

.btn {
  display: inline-block; background: var(--ink); color: var(--paper);
  text-decoration: none; padding: 0.8rem 1.35rem; border-radius: 3px;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 160ms ease, transform 140ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--ghost { background: none; color: var(--ink); border-color: var(--line); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #06121F; }
  .btn--ghost:hover { background: var(--paper-2); }
}

.toc { list-style: none; margin: 0; padding: 0; }
.toc li { border-bottom: 1px solid var(--line-soft); }
.toc a {
  position: relative; display: block; padding: 0.65rem 0 0.65rem 0.9rem;
  font-size: 0.9rem; text-decoration: none; color: var(--ink-45);
  transition: color 160ms ease;
}
.toc a::before {
  content: ""; position: absolute; left: 0; top: 0.7rem; bottom: 0.7rem; width: 2px;
  background: var(--brass); transform: scaleY(0); transform-origin: 50% 50%;
  transition: transform 180ms var(--ease-out);
}
.toc a[aria-current="true"] { color: var(--ink); }
.toc a[aria-current="true"]::before { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--ink); } }

.related { border-top: 1px solid var(--line); padding-block: var(--rhythm); }
.related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
@media (max-width: 820px) { .related__grid { grid-template-columns: repeat(2, 1fr); } }
.related__grid a {
  background: var(--paper); padding: 1.1rem 1.15rem; text-decoration: none; font-size: 1rem;
  transition: background-color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .related__grid a:hover { background: var(--paper-2); } }

/* ---------- Team ---------- */

.arealist { margin: 1.5rem 0 2rem; padding: 0; border-top: 1px solid var(--line); }
.arealist dt { padding-top: 0.85rem; font-weight: 600; }
.arealist dt a { text-decoration-color: var(--brass); text-underline-offset: 3px; }
.arealist dd { margin: 0.1rem 0 0; padding-bottom: 0.85rem; border-bottom: 1px solid var(--line-soft); color: var(--ink-70); }

.team { margin-top: 2rem; }
.person { padding-top: 1.75rem; border-top: 1px solid var(--line); margin-bottom: 2rem; }
.person img {
  float: left; width: 116px; height: 116px; object-fit: cover;
  border-radius: 2px; margin: 0.35rem 1.5rem 1rem 0; background: var(--paper-2);
}
.person h3 { font-size: 1.35rem; margin-bottom: 0.65rem; }
.person p { font-size: 0.98rem; }
.person::after { content: ""; display: block; clear: both; }
.person__contact { font-family: var(--sans); font-size: 0.88rem; }
.person__contact a { text-decoration-color: var(--brass); text-underline-offset: 3px; }
@media (max-width: 520px) { .person img { float: none; width: 96px; height: 96px; margin-bottom: 1rem; } }

/* ---------- Enquiry form ---------- */

/* Pages with no sidebar use the whole width, but prose keeps its measure. */
.article--full > .article__body { max-width: none; }
.article--full > .article__body > p,
.article--full > .article__body > ul,
.article--full > .article__body > ol { max-width: var(--measure); }

.enquiry-panel {
  max-width: 46rem;
 margin: 3rem 0 0;
  background: var(--paper-2);
  border-top: 2px solid var(--ink);
  border-radius: 0 0 3px 3px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.enquiry-panel h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin: 0 0 1.5rem; padding: 0; border: 0;
}

.enquiry { margin: 0; font-family: var(--sans); }
.enquiry__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 620px) { .enquiry__pair { grid-template-columns: 1fr; } }
.enquiry__row { margin-bottom: 1.15rem; }
.enquiry label { display: block; font-size: 0.85rem; color: var(--ink-70); margin-bottom: 0.4rem; }

/* Fields were the same colour as the page, so they read as outlines rather
   than as something you type into. Now they are lighter than their panel. */
.enquiry input, .enquiry select, .enquiry textarea {
  width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink);
  background: #FFFFFF; border: 1px solid var(--line);
  border-radius: 3px; padding: 0.7rem 0.8rem; min-height: 2.75rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.enquiry textarea { resize: vertical; min-height: 8rem; }
.enquiry input:focus, .enquiry select:focus, .enquiry textarea:focus {
  border-color: var(--brass); box-shadow: 0 0 0 3px rgba(173, 137, 85, 0.22);
}
@media (hover: hover) and (pointer: fine) {
  .enquiry input:hover, .enquiry select:hover, .enquiry textarea:hover { border-color: var(--ink-45); }
}

.enquiry__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.25rem;
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.enquiry__alt { font-size: 0.9rem; color: var(--ink-70); }
.enquiry__alt a { color: var(--ink); text-decoration-color: var(--brass); text-underline-offset: 3px; }
.enquiry button[disabled] { opacity: 0.45; cursor: not-allowed; }
.enquiry button[disabled]:active { transform: none; }
.enquiry__note { font-size: 0.82rem; color: var(--ink-45); margin: 0.9rem 0 0; }

@media (max-width: 620px) {
  .enquiry__actions .btn { width: 100%; text-align: center; }
}

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

.footer { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer a { color: var(--paper); text-decoration: none; }
.footer a:hover { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h2 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em; font-weight: 500; color: rgba(254, 251, 247, 0.55); margin-bottom: 1.25rem; }
.footer ul { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 0.93rem; }
.footer li { margin-bottom: 0.6rem; }
.footer address { font-style: normal; font-size: 0.95rem; margin-bottom: 1.5rem; opacity: 0.85; }
.footer__locations { columns: 2; column-gap: 2rem; }
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(254, 251, 247, 0.16);
  font-family: var(--sans); font-size: 0.85rem; color: rgba(254, 251, 247, 0.6);
}
.footer__base ul { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__base li { margin: 0; }

/* ---------- Reduced motion: gentler, not none ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .nav .tel, .nav-toggle { transition-property: background-color, border-color, color; }
  .btn:active, .nav .tel:active, .nav-toggle:active { transform: none; }
  .mega .mega__group a::before, .toc a::before { transition: none; }
  .masthead::after { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Services mega menu ---------- */

/* full height of the bar, so there is no gap between trigger and panel */
.nav__item { position: static; display: flex; align-items: center; align-self: stretch; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px -24px rgba(10, 28, 52, 0.45);
  /* never from scale(0): it starts nearly there and eases the last of the way */
  opacity: 0; transform: translateY(-8px) scale(0.995); transform-origin: 50% 0;
  visibility: hidden; pointer-events: none;
  transition: opacity 140ms var(--ease-out) 90ms, transform 140ms var(--ease-out) 90ms,
              visibility 0s linear 230ms;
}
.nav__item:hover .mega,
.nav__item:focus-within .mega {
  opacity: 1; transform: translateY(0) scale(1);
  visibility: visible; pointer-events: auto;
  /* entering is slightly slower than leaving */
  transition: opacity 190ms var(--ease-out), transform 190ms var(--ease-out),
              visibility 0s linear 0s;
}

.mega__inner { padding-block: clamp(1.6rem, 2.2vw, 2.1rem); }
.mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.mega__group .mega__label {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--ink);
  padding-bottom: 0.7rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--line);
}
.mega__group ul { list-style: none; margin: 0; padding: 0; }
.mega__group li { border-bottom: 1px solid var(--line-soft); }
.mega .mega__group a {
  position: relative; display: block; padding: 0.52rem 0.9rem 0.52rem 0;
  font-family: var(--serif); font-size: 0.98rem; line-height: 1.3;
  color: var(--ink); text-decoration: none; border-bottom: 0;
  transition: color 160ms var(--ease-out);
}
.mega .mega__group a::before {
  content: ""; position: absolute; left: 0; bottom: -1px; right: 0; height: 1px;
  background: var(--brass); clip-path: inset(0 100% 0 0);
  transition: clip-path 240ms var(--ease-out);
}
.mega .mega__all {
  display: inline-block; margin-top: 1.35rem;
  font-family: var(--sans); font-size: 0.88rem; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .mega .mega__group a:hover { color: var(--brass-text); }
  .mega .mega__group a:hover::before { clip-path: inset(0 0 0 0); }
  .mega .mega__all:hover { color: var(--brass-text); }
}

/* Trigger keeps its brass underline for as long as the panel is open */
.nav__item:hover .nav__trigger,
.nav__item:focus-within .nav__trigger { border-bottom-color: var(--brass); }

/* Over the hero the bar is transparent; it goes solid while the panel is open
   so the panel is not floating off a see-through header. */
.masthead:has(.nav__item:hover),
.masthead:has(.nav__item:focus-within) {
  background: var(--paper);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom-color: var(--line);
}
.masthead:has(.nav__item:hover) .nav a,
.masthead:has(.nav__item:focus-within) .nav a { color: var(--ink); }
.masthead:has(.nav__item:hover) .nav .tel,
.masthead:has(.nav__item:focus-within) .nav .tel { background: var(--ink); color: var(--paper); }
.masthead:has(.nav__item:hover) .wordmark .logo--ink,
.masthead:has(.nav__item:focus-within) .wordmark .logo--ink { opacity: 1; }
.masthead:has(.nav__item:hover) .wordmark .logo--paper,
.masthead:has(.nav__item:focus-within) .wordmark .logo--paper { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .mega { transition: opacity 140ms ease, visibility 0s linear 140ms; transform: none; }
  .nav__item:hover .mega, .nav__item:focus-within .mega { transform: none; }
}

/* ---------- Mega menu on small screens ---------- */

@media (max-width: 860px) {
  .nav { max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .nav__item { display: block; width: 100%; }
  .nav__trigger { display: block; }
  .mega {
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; box-shadow: none; border: 0; background: none;
    transition: none;
  }
  .mega__inner { padding: 0.25rem 0 0.5rem; }
  .mega__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .mega__group .mega__label { font-size: 0.95rem; padding-bottom: 0.5rem; }
  .mega .mega__group a { padding: 0.5rem 0; font-size: 0.95rem; }
  .mega .mega__all { margin-top: 1rem; }
}

/* When the small-screen menu is open the panel is paper, so the bar and every
   link inside it must use ink regardless of whether the page has scrolled.
   Without this, the links are paper on paper at the top of a page. */
@media (max-width: 860px) {
  .masthead:has(.nav[data-open="true"]) {
    background: var(--paper);
    border-bottom-color: var(--line);
  }
  .masthead:has(.nav[data-open="true"]) .wordmark .logo--ink { opacity: 1; }
  .masthead:has(.nav[data-open="true"]) .wordmark .logo--paper { opacity: 0; }
  .masthead:has(.nav[data-open="true"]) .nav-toggle { color: var(--ink); border-color: var(--line); }
  .masthead[data-scrolled="false"] .nav[data-open="true"] a,
  .masthead[data-scrolled="false"] .nav[data-open="true"] .nav__trigger { color: var(--ink); }
  .masthead[data-scrolled="false"] .nav[data-open="true"] .tel {
    background: var(--ink); color: var(--paper);
  }
  /* Services is a section header inside the panel, not a peer of the others */
  .nav .nav__trigger {
    font-weight: 600; border-bottom: 1px solid var(--line);
  }
}

/* ---------- Mobile call bar ---------- */

/* On a phone the header only has the menu button, so the number would sit two
   taps away. The WordPress site solves this with a floating call button; this
   is the same idea, sized as a proper target and out of the way of content. */
.callbar-wrap { display: none; }
.callbar { display: none; }

@media (max-width: 860px) {
  .callbar-wrap { display: block; }
  .callbar {
    display: flex; align-items: baseline; justify-content: center; gap: 0.55rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    min-height: 3.5rem; padding: 0.9rem 1rem;
    padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
    background: var(--ink); color: var(--paper); text-decoration: none;
    font-family: var(--sans); box-shadow: 0 -10px 30px -18px rgba(10, 28, 52, 0.7);
    transition: background-color 160ms ease, transform 140ms var(--ease-out);
  }
  .callbar:active { transform: scale(0.99); }
  .callbar__label { font-size: 0.82rem; opacity: 0.7; letter-spacing: 0.02em; }
  .callbar__number { font-size: 1.02rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  /* keep the footer clear of it */
  body { padding-bottom: 3.5rem; }
  /* and the open menu, which scrolls */
  .nav { max-height: calc(100vh - var(--header-h) - 3.5rem); }
}

/* ---------- Tap targets ---------- */

/* Standalone links (breadcrumbs, contact details, footer) need 24px of height
   to be a comfortable target. Links inside a sentence are exempt and are left
   alone so prose line spacing is not disturbed. */
@media (max-width: 860px) {
  .crumbs a, .hero__meta a, .office dd a, .person__contact a,
  .footer ul a, .footer address a {
    display: inline-block; padding-block: 0.3rem;
  }
  .footer li { margin-bottom: 0.35rem; }
}

/* Web3Forms honeypot: a real field, hidden from people, catching bots */
.enquiry__botcheck { display: none !important; }

.enquiry__status { margin: 1rem 0 0; font-size: 0.92rem; }
.enquiry__status:empty { margin: 0; }
.enquiry__status.is-ok { color: var(--ink); font-weight: 500; }
.enquiry__status.is-error { color: var(--burgundy); }

/* Link to the team rather than repeating every biography on ten pages */
.team-cta { margin: 1.75rem 0 0; }
/* A 3px gold trim. The base button has a 1px border, so the padding loses the
   extra 2px on each side and the button stays exactly the size it was. */
.team-cta .btn {
  border-color: var(--gold);
  border-width: 3px;
  padding: calc(0.8rem - 2px) calc(1.35rem - 2px);
}
@media (hover: hover) and (pointer: fine) {
  .team-cta .btn:hover { border-color: var(--gold); }
}

/* ---------- Invisible details ---------- */

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

/* Safari paints its own grey flash on tap. We already give better feedback
   through :active, so the default fires a second, slower signal on top. */
a, button, summary, input, select, textarea, label {
  -webkit-tap-highlight-color: transparent;
}

/* Gold on navy is 5.28:1 — fine for text, thin for a 2px ring. */
.footer a:focus-visible, .hero a:focus-visible,
.callbar:focus-visible, .nav .tel:focus-visible {
  outline-color: var(--paper);
}

/* ---------- Homepage hero entrance ---------- */

/* One orchestrated moment, and only here. Interior hero bands stay static:
   a visitor sees those on every page, and motion they see repeatedly turns
   into latency. */
@media (prefers-reduced-motion: no-preference) {
  .hero--tall .hero__inner > * {
    opacity: 0;
    animation: hero-in 420ms var(--ease-out) forwards;
  }
  .hero--tall .hero__inner > *:nth-child(1) { animation-delay:  80ms; }
  .hero--tall .hero__inner > *:nth-child(2) { animation-delay: 135ms; }
  .hero--tall .hero__inner > *:nth-child(3) { animation-delay: 190ms; }
  .hero--tall .hero__inner > *:nth-child(4) { animation-delay: 245ms; }
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Form validation ---------- */

/* :user-invalid, not :invalid. A required field is invalid the moment the
   page loads; marking it red before the person has typed anything is the
   interface telling them off for nothing. */
.enquiry input:user-invalid,
.enquiry select:user-invalid,
.enquiry textarea:user-invalid {
  border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(120, 36, 54, 0.12);
}
.enquiry input:user-valid,
.enquiry select:user-valid,
.enquiry textarea:user-valid { border-color: rgba(10, 28, 52, 0.28); }

/* ---------- Submit spinner ---------- */

.enquiry button[aria-busy="true"] { padding-left: 2.6rem; position: relative; }
.enquiry button[aria-busy="true"]::before {
  content: ""; position: absolute; left: 1.35rem; top: 50%;
  width: 0.85rem; height: 0.85rem; margin-top: -0.425rem;
  border: 2px solid rgba(254, 251, 247, 0.35);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: spin 700ms linear infinite;   /* fast: the wait feels shorter */
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .enquiry button[aria-busy="true"]::before { animation-duration: 2s; }
  .hero--tall .hero__inner > * { opacity: 1; animation: none; }
}

/* ---------- Print ---------- */

@media print {
  .masthead, .callbar, .aside, .hero__media, .enquiry, .footer__locations,
  .skip, .team-cta { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; padding-bottom: 0; }
  .hero { min-height: 0; margin-top: 0; padding: 0 0 1rem; background: none; }
  .hero::after { display: none; }
  .hero h1, .hero .crumbs { color: #000; }
  .wrap { max-width: none; padding-inline: 0; }
  .split, .article--full { display: block; }
  .article__body { max-width: none; }
  a { color: #000; text-decoration: underline; }
  /* an underlined word is useless on paper */
  .article__body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  h1, h2, h3 { break-after: avoid; }
  p, li, .person, .quote { break-inside: avoid; }
  .footer { background: none; color: #000; padding-block: 1rem 0; border-top: 1px solid #000; }
  .footer a, .footer h2 { color: #000; }
  .footer .wordmark { display: none; }
}

/* ---------- Contact page office cards ---------- */

/* The two offices are the main content of this page, so they get the ivory
   panel treatment rather than sitting as loose paragraphs on the page ground. */
.offices--contact {
  margin: 2rem 0 0;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-rows: auto auto auto auto;
}
.offices--contact .office {
  background: var(--paper-2);
  border-top: 2px solid var(--ink);
  border-radius: 0 0 3px 3px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column;
}
/* Subgrid so the heading, address, details and review link line up across both
   cards, even though one address wraps to three lines and the other to two.
   Declared after the flex fallback so it wins where it is supported. */
@supports (grid-template-rows: subgrid) {
  .offices--contact .office {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    align-content: start;
  }
}
.offices--contact .office h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin: 0 0 0.9rem; }
.offices--contact .office address {
  font-style: normal; max-width: 30ch; margin: 0 0 1.15rem;
  color: var(--ink-70); line-height: 1.5;
}
.offices--contact .office dl {
  display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem;
  margin: 0 0 1.35rem; font-family: var(--sans); font-size: 0.92rem;
  padding-top: 1.15rem; border-top: 1px solid var(--line);
  align-content: start;
}
.offices--contact .office dt { color: var(--ink-45); }
.offices--contact .office dd { margin: 0; }
.offices--contact .office dd a {
  font-variant-numeric: tabular-nums; font-weight: 600;
  text-decoration-color: var(--gold); text-underline-offset: 3px;
}

/* The badge was a 200px Google Maps logo stacked on its own. Shrunk and set
   beside a label, it reads as the review link it actually is. */
.office__review {
  margin-top: auto; align-self: start; justify-self: start;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.85rem 0.5rem 0.55rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 3px;
  font-family: var(--sans); font-size: 0.88rem; text-decoration: none; color: var(--ink);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.office__review img { width: 26px; height: auto; display: block; }
@media (hover: hover) and (pointer: fine) {
  .office__review:hover { border-color: var(--gold); background: #FFFFFF; }
}

/* On a page with no sidebar the form lines up with the block above it. */
.article--full .enquiry-panel { max-width: none; }

@media (max-width: 760px) {
  .offices--contact { grid-template-columns: 1fr; grid-template-rows: none; }
  .offices--contact .office { grid-row: auto; display: flex; }
}