/* ==========================================================
   BRIGGS ZHANG LLP - SHARED STYLESHEET
   styles.css · All pages link to this file
   Page-specific styles remain in each HTML <style> block
   ========================================================== */

/* --- FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500&display=swap');

/* --- FOCUS ---------------------------------------------------------------
   A safety net, added 23 Oct 2026. Before this the site had exactly two
   focus-visible rules (the practice cards and the scroll cue) and relied on
   Chrome's default ring for everything else. That mostly worked, but it meant
   a single `outline:none` anywhere could silently remove the only indicator on
   a control - which is precisely what had happened on the enquiry form.

   Stating it once here means the indicator is a decision rather than a default
   we happen not to have overridden. Dark ink on light backgrounds; white where
   the control sits on a photograph or a dark band, because an ink outline on
   the footer would be invisible. :focus-visible, not :focus, so a mouse click
   does not draw a ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
  border-radius: 1px;
}

.nav--over .nav-links a:focus-visible,
.site-footer a:focus-visible,
.cta-band a:focus-visible,
.page-header a:focus-visible,
.hero a:focus-visible {
  outline-color: #fff;
}

/* --- VARIABLES --- */
:root {
  --gold:        #B5A26A;   /* brand gold - use on light backgrounds */
  --gold-light:  #d4c28a;   /* lighter gold - hover states, italic headings on dark */
  /* THE DARK COLOUR. Change these two lines together to retheme every dark
     band on the site - page headers, hero, CTA band. --ink-rgb must be the
     same colour as --black, written as r,g,b so it works inside rgba().
       slate       #2E3A3F / 46,58,63      (current)
       near-black  #1a1a1a / 26,26,26
       deep navy   #14243D / 20,36,61
       ink blue    #1C2B3A / 28,43,58
       forest      #1B3A32 / 27,58,50
       oxblood     #3B2129 / 59,33,41
       warm char.  #282420 / 40,36,32                                   */
  --black:       #2E3A3F;
  --ink-rgb:     46,58,63;
  --off-white:   #f8f7f4;
  --mid-grey:    #6b6b6b;
  --border:      #e0ddd6;

  /* CARD HOVER (Lynn, 27 Oct). One ground colour for the hover state on the
     homepage practice cards, the Expertise rows and the Insights news cards,
     with the text colours that read on it. Lynn finds the header grey a touch
     dark and is sending a hex of the firm's choosing: change --hover-bg HERE
     and nowhere else. If the new colour is light, --hover-title and
     --hover-text need darkening to match. */
  --hover-bg:     #3F4348;   /* Lynn's pick of 27 Oct; was the header grey, var(--black) */
  --hover-title:  #ffffff;
  --hover-text:   rgba(255, 255, 255, 0.78);
  --hover-line:   rgba(255, 255, 255, 0.28);   /* tag outlines on the hover ground */

  /* SUBTITLES (Lynn, 27 Oct evening). The serif title that sits under a small
     gold label or beside a gold rule and above a line of body text: the
     homepage why-block and practice cards, the About firm-stat and How We
     Work steps, the Expertise stats and practice rows. They were five
     different sizes at the regular weight and Lynn found them small and
     inconsistent; the homepage why-block at 600 / 1.15rem is the one she
     liked. Change the two values HERE and every one of those follows. */
  --subtitle-size:   1.15rem;
  --subtitle-weight: 600;

  /* THE DEFAULT HEADER PHOTOGRAPH, used by any page that does not set its own
     `headerPhoto` in front matter. The named options live in
     src/_data/photos.json; this must stay in step with the `city` entry there.

     Rule for any replacement: no single identifiable office building. The
     Royal Exchange shot was dropped on 9 Oct because a competitor firm has
     offices in it. Wide views, streets and interiors are safe. */
  --header-photo:    url('photos/headers/westminster.jpg');
  --header-photo-sm: url('photos/headers/westminster-sm.jpg');

  /* Photographs are shown exactly as they came off the camera.

     This used to apply saturation and brightness, to push an image back up
     through the dark overlay that sat on top of it. The overlay was removed on
     15 Oct, so there is nothing left to compensate for - and without one, a
     lift stops reading as a photograph and starts reading as a filter
     (Lynn, 15 Oct). Kept as a variable rather than deleted, so it is one line
     to reinstate if an overlay ever comes back. */
  --photo-lift: none;
}

/* --- RESET --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* --- BASE --- */
body {
  font-family: 'Inter', sans-serif;
  color: var(--black);
  background: #fff;
  font-size: 15px;
  line-height: 1.7;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ==========================================================
   NAVIGATION
   ========================================================== */
/* Scoped to .site-nav, NOT to the bare `nav` element.
   This rule used to be `nav { ... }`. When the footer was rebuilt on 13 Oct it
   gained a <nav class="footer-nav"> for its link rows - a correct bit of
   markup - and this rule promptly painted it ivory, gave it a border and made
   it sticky, which put a pale box over the dark footer with white links
   sitting invisibly on it. An element selector for a component is a trap: the
   moment the element is used anywhere else, it inherits styling nobody
   intended. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 86px;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  /* The build spec asked for 280-340px wide. At 58px tall that landed at
     about 325px and read as too big next to the navigation (Lynn, 14 Oct), so
     it is back to 46px - roughly 258px wide. Still clearly legible, including
     the SOLICITORS · LONDON line, but no longer dominating the bar. */
  height: 46px;
  width: auto;
  display: block;
  /* logo.png has white margin baked in at its left edge; offset by that
     margin at this render height so the artwork aligns with the container. */
  margin-left: -5px;
}

/* Two logo files, one shown at a time. The reversed-out version is used only
   while the header is sitting on the hero photograph. */
/* `.logo img` above is (0,1,1) and this was (0,1,0), so `display: block` from
   that rule beat `display: none` here and BOTH logos rendered side by side on
   every page with an ordinary solid header - all seven policy pages. It was
   invisible on the hero pages only because `.nav--over .logo-light` is (0,2,0)
   and outranks both. Qualifying the selector puts it level with `.logo img`,
   where source order then decides, and it is the later rule. */
.logo img.logo-light {
  display: none;
  margin-left: 0;

  /* The two files are NOT the same shape: logo.png is 2682x476 (5.63:1) and
     logo-footer.png is 2563x340 (7.54:1), because the reversed artwork was
     cut without the vertical padding. Matching them on height therefore made
     the reversed one a third wider - 302px against 225px on a phone - which
     is why the wordmark ran into the menu button over the hero but not on a
     white bar. So the reversed one is sized by width instead, to the width
     the dark one happens to occupy at its own height. */
  height: auto;

  /* Width, not height, for the reason above. Matching the dark mark's 259px
     exactly made it diminutive on a full-width screen (Phil, 14 Oct), since
     this mark is all artwork and no padding - so it is given its own sizes,
     generous where there is room and tightening as the bar narrows. The dark
     mark stays at the 46px Lynn settled on for the solid bar. */
  width: clamp(240px, 24vw, 320px);
}

/* ── Header over the hero (spec section 3) ──
   Transparent, laid over the photograph rather than in a strip above it. The
   nav is taken out of the flow so the hero starts at the top of the page, and
   the hero carries top padding to clear it. */
.nav--over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
}

/* The backdrop that makes the navigation readable. Half as tall again as the
   bar, fading to nothing, so it reads as a soft vignette at the top of the
   photograph rather than a band.

   This is the only darkening left anywhere on the photographs. The overlay
   behind the hero wording was removed on 15 Oct; this one stays because
   without it the navigation is unreadable over a bright sky, and it covers
   only the height of the bar. */
.nav--over::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 150%;
  pointer-events: none;
  /* Firmed up 19 Oct when the text shadows came off - see the note below.
     The links sit at about a third of the way down this element, where the
     old ramp gave 0.74 and only 3.1:1 against a white sky. */
  background: linear-gradient(to bottom,
    rgba(var(--ink-rgb),0.94) 0%,
    rgba(var(--ink-rgb),0.88) 45%,
    rgba(var(--ink-rgb),0) 100%);
}

.nav--over.nav--solid::before { display: none; }

.nav--over .nav-inner { position: relative; z-index: 1; }

.nav--over .logo-dark  { display: none; }
.nav--over .logo img.logo-light { display: block; }
.nav--over .nav-links > li > a { color: #fff; }
.nav--over .nav-links > li > a:hover,
.nav--over .nav-links > li > a.active { color: var(--gold-light); }
.nav--over .nav-toggle span { background: #fff; }

/* The Contact button needs an outline rather than a dark fill when it is
   sitting on a photograph. */
.nav--over .nav-cta {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.55);
}
.nav--over .nav-cta:hover {
  background: var(--gold) !important;
  border-color: var(--gold);
}

/* The links and the mark used to carry a 12px text-shadow and a 10px
   drop-shadow so they would hold up over a bright sky. Lynn read the result
   as dirty and Phil as smudged, and they are right: a blurred halo around
   every glyph is what smudged looks like.

   Legibility still has to come from somewhere, so it comes from the backdrop
   above instead of from the letterforms. Measured on the brightest hero we
   publish (skyhaze - the sky fills the top of the frame): white text on the
   scrim is 5.8:1 at worst (dome) and runs to 9.9:1, all clear of the
   4.5:1 AA floor for text this size. The shadows were not buying legibility. The
   glyphs themselves are now clean. */

/* ── Scrolled state ──
   Once the hero has passed, the bar becomes solid and behaves like the
   ordinary header. Added by nav.js; without JavaScript the header simply
   stays transparent over the hero, which is still readable. */
.nav--over.nav--solid {
  position: fixed;
  background: var(--off-white);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 24px rgba(var(--ink-rgb),0.07);
}

.nav--over.nav--solid .logo-dark  { display: block; }
.nav--over.nav--solid .logo img.logo-light { display: none; }
.nav--over.nav--solid .nav-links > li > a { color: var(--black); text-shadow: none; }
.nav--over.nav--solid .nav-links > li > a:hover,
.nav--over.nav--solid .nav-links > li > a.active { color: var(--gold); }
.nav--over.nav--solid .nav-toggle span { background: var(--black); }
.nav--over.nav--solid .nav-cta {
  background: var(--black);
  border-color: var(--black);
}

/* The dropdown panel is the same in every header state. Stated explicitly so
   a future change to the "over the hero" rules cannot bleed into it again. */
.nav--over .dropdown-menu li a,
.nav--over.nav--solid .dropdown-menu li a {
  color: var(--black);
  text-shadow: none;
  filter: none;
}

.nav--over .dropdown-menu li a:hover,
.nav--over.nav--solid .dropdown-menu li a:hover { color: var(--gold); }

/* A page whose header sits over the hero needs the hero to start at the very
   top of the document. */
.has-hero-header .hero,
.has-hero-header .page-header { padding-top: 10rem; }

/* legacy CSS logo elements - kept for fallback, hidden when img present */
.logo-bars { display: none; }
.logo-text { display: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

@media (max-width: 1180px) {
  .nav-links { gap: 1.3rem; }
  .nav-links a { font-size: 0.78rem; }
}

.nav-links a {
  text-decoration: none;
  white-space: nowrap;
  color: var(--black);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active { color: var(--gold); }

.nav-cta {
  background: var(--black);
  color: #fff !important;
  padding: 0.5rem 1.2rem;
  letter-spacing: 0.1em !important;
}

.nav-cta:hover { background: var(--gold) !important; }

/* ── Hamburger toggle button (hidden on desktop) ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px 4px;
  z-index: 101;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--black);
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Services dropdown (desktop hover) ── */
.has-dropdown { position: relative; }
.dropdown-toggle { display: none; } /* shown only on mobile */

/* Invisible bridge fills the gap between nav link and dropdown */
.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: -1.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  min-width: 230px;
  list-style: none;
  padding: 0.4rem 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.09);
  z-index: 200;
}
.has-dropdown:hover .dropdown-menu { display: block; }

.dropdown-menu li a {
  display: block;
  padding: 0.55rem 1.4rem;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: color 0.15s, background 0.15s;
}
.dropdown-menu li a:hover {
  color: var(--gold);
  background: var(--off-white);
}

/* ── Mobile and tablet navigation ──
   Was 768px. At the larger logo size the six links and the mark stop fitting
   on one line somewhere around 1000px, and the bar started overlapping
   itself, so the menu button now takes over earlier. */
@media (max-width: 1100px) {
  /* Not enough width for brand, links and badge abreast: the badge drops
     below the links and the two columns share the width again. */
  /* Two and two rather than four thin columns. */
  .footer-top { grid-template-columns: 275px minmax(0, 1fr); row-gap: 2.5rem; }
}

@media (max-width: 1000px) {
  .nav-toggle { display: flex; }

  .nav-links {
    display: none;
    position: fixed;
    top: 86px;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 2rem 3rem;
    background: #fff;
    overflow-y: auto;
    z-index: 99;
    border-top: 1px solid var(--border);
    list-style: none;
  }
  .nav-links.open { display: flex; }

  .nav-links > li { border-bottom: 1px solid var(--border); }
  .nav-links > li:first-child { border-top: 1px solid var(--border); margin-top: 1rem; }

  .nav-links > li > a {
    display: block;
    padding: 1rem 0;
    font-size: 0.82rem;
  }

  /* Services row: link + toggle button side by side */
  .has-dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .has-dropdown > a { flex: 1; }

  .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 1rem 0.25rem;
    font-size: 1.1rem;
    color: var(--mid-grey);
    transition: transform 0.2s;
    line-height: 1;
  }
  .has-dropdown.dropdown-open .dropdown-toggle { transform: rotate(90deg); }

  /* Mobile dropdown – accordion */
  .has-dropdown .dropdown-menu {
    display: none;
    position: static;
    border: none;
    box-shadow: none;
    padding: 0 0 0.75rem 1rem;
    min-width: 0;
    width: 100%;
    background: transparent;
  }
  .has-dropdown.dropdown-open .dropdown-menu { display: block; }

  .dropdown-menu li a {
    padding: 0.45rem 0;
    font-size: 0.73rem;
    color: var(--mid-grey);
    background: none;
  }
  .dropdown-menu li a:hover { background: none; }

  /* Contact Us button stays styled as a button */
  .nav-links > li:last-child { border-bottom: none; padding-top: 1.5rem; }
  .nav-cta { display: inline-block; }

  /* ── The open menu is a white sheet, so nothing on it is over the hero ──

     `.nav--over` dresses the top-level links for a photograph: white text
     with a dark glow behind it, and the Contact button outlined rather than
     filled. On a desktop bar those links really are on the image. On a phone
     they are not - tapping the menu button drops a full-height white panel
     over the page, and the over-hero styling followed them onto it, giving
     white-on-white text readable only as a smudge of its own drop-shadow.
     That is the "dirty" look.

     Same root cause as the footer and the dropdown before it: styling keyed
     to where the header sits rather than to what the link is sitting on.
     Undone here for the panel, where the answer is always a white sheet. */
  .nav--over .nav-links > li > a,
  .nav--over.nav--solid .nav-links > li > a {
    color: var(--black);
    text-shadow: none;
    filter: none;
  }
  .nav--over .nav-links > li > a:hover,
  .nav--over .nav-links > li > a.active,
  .nav--over.nav--solid .nav-links > li > a:hover,
  .nav--over.nav--solid .nav-links > li > a.active { color: var(--gold); }

  .nav--over .nav-cta,
  .nav--over.nav--solid .nav-cta {
    background: var(--black);
    border-color: var(--black);
    color: #fff !important;
  }
}

/* ==========================================================
   PAGE HEADER (used on all inner pages)
   ========================================================== */
/* Page header band.
   Was solid black, which read as too heavy once it appeared on every page
   (review meeting, 5 Oct). It now carries a photograph, which each page picks
   for itself via `headerPhoto` in its front matter - see src/_data/photos.json.

   Three things were wrong with the first attempt and all three are fixed here.
   The tint was a flat 0.90 wash, so the photograph may as well not have been
   there. A flat wash also forces a choice between a legible heading and a
   visible image, so the tint now runs left to right: strongest behind the
   text, clearing entirely on the right. And the photographs themselves were
   grey; the image layer used to be lifted by --photo-lift, now set to none.

   At 30% the tint no longer carries the text on its own - over a bright sky it
   is around 2:1 - so the heading and standfirst take a soft shadow instead
   (see below). That is load-bearing, not decoration: delete it and the
   headings become unreadable on the lighter photographs.

   The photograph sits on ::before rather than on the element itself so the
   filter can reach the image without also washing out the tint over it. */
/* The hero fills most of the first screen, so a page opens with one image and
   one statement and you scroll for the detail. 72vh rather than 100vh on
   purpose: a sliver of the next section shows at the bottom, which is what
   tells a reader there is more below. A min-height, not a height, so a long
   heading can still push it taller, and capped on short screens. */
.page-header {
  position: relative;
  background: var(--black);   /* only seen if the photograph fails to load */
  /* How much of a photograph you actually see is height divided by (width ÷
     the image's aspect ratio) - `cover` always fills the width, so the band's
     height is the only thing that decides it. At 660px on a 1962px-wide
     window that was 45% of the frame, which is why the Gherkin looked
     enormous on About and the Shard looked cropped on Insights, however the
     images were re-cut. The cap now scales with width on wide screens: 42vw
     is below 68vh at 1440x900 and under, so ordinary laptops are unchanged,
     and a wide monitor gets a taller band showing more of the picture. */
  height: clamp(420px, max(68vh, 42vw), 880px);
  display: flex;
  align-items: flex-end;
  padding: 5rem 2rem 3.5rem;
  overflow: hidden;
}

@media (max-width: 860px) {
  .page-header { height: auto; min-height: clamp(360px, 52vh, 460px); }
}

/* Layer 1: the photograph, lifted. */
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--header-photo);
  background-size: cover;
  /* Per-image, from photos.json. A single fixed 55% was cutting the top off
     the Gherkin, Big Ben, the Shard and the dome of St Paul's. */
  background-position: var(--header-pos, center 55%);
  filter: var(--photo-lift);
}

/* Phones get the 900px file instead of the 1800px one - roughly a third of
   the bytes for a photograph nobody can see the detail of anyway. The switch
   has to happen here rather than inline, because base.njk sets both variables
   as an inline style and a media query cannot override one of those. */
@media (max-width: 700px) {
  .page-header::before { background-image: var(--header-photo-sm); }
}

/* Layer 2: the tint, which must not be filtered.

   Raised from 0.30 on 12 Oct. 30% was set against grey stock photography and
   was fine over it. Lynn's photographs include dusk and night shots with lit
   windows and bright sky, and over those the breadcrumb and standfirst stopped
   being readable - checked on the Shard-at-dusk header, where white text was
   coming out around 2:1. The numbers below hold AA over the brightest part of
   the brightest image in the set. */


/* Layer 3: the wording. */
.page-header-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* Breadcrumb: white text on dark background for readability.
   Gold is reserved for decorative/accent use on dark sections. */
.breadcrumb {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Raised from 0.55 when the tint was lightened - over a photograph rather
     than near-solid black, 0.55 white no longer clears AA at this size. */
  color: rgba(255,255,255,0.95);
  margin-bottom: 1.5rem;
}

.breadcrumb a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb a:hover { color: var(--gold); }

/* The shadow is what keeps white text legible now the tint is only 30%. Three
   layers, each doing a different job: a wide halo that pulls down the whole
   area around the wording, a mid one that separates it from busy detail, and a
   tight one that keeps the letterforms crisp. All use --ink-rgb, so they stay
   in key if the colour changes. */
.page-header h1,
.page-header p,
.breadcrumb {
  text-shadow:
    0 2px 40px rgba(var(--ink-rgb),1),
    0 1px 18px rgba(var(--ink-rgb),0.98),
    0 1px 8px  rgba(var(--ink-rgb),0.9),
    0 1px 2px  rgba(var(--ink-rgb),0.85);
}

/* The heading and standfirst sit in a narrower column so the right-hand side
   of the photograph is left alone. */
.page-header-inner > * { max-width: 560px; }

.page-header h1 {
  font-size: clamp(2.1rem, 4.8vw, 3.2rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
}

.page-header h1 em {
  font-style: italic;
  color: var(--gold-light);
}

.page-header p {
  /* Full white, not 90%. Measured against the brightest 5% of each of Lynn's
     photographs, 90% white fails AA at this size over all seven of them. */
  color: #fff;
  font-size: 0.93rem;
  margin-top: 1.3rem;
  line-height: 1.8;
}

/* ==========================================================
   SHARED COMPONENTS
   ========================================================== */

/* Section label - used on light/off-white backgrounds, gold reads well here */
.section-label {
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
  display: block;
}

/* Buttons */
.btn-primary {
  background: var(--gold);
  color: #fff;
  padding: 0.8rem 2rem;
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background 0.2s;
  display: inline-block;
}

.btn-primary:hover { background: var(--gold-light); }

.btn-outline {
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 0.8rem 2rem;
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  transition: border-color 0.2s, color 0.2s;
  display: inline-block;
}

.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

/* Language strip */
/* The band holds Latin and Chinese on one line, and the two have very
   different line boxes - whichever font the browser falls back to for 英语及
   中文服务 sets the height, and it is usually much taller than the Latin.
   That is why the band rendered 48px here and about 80px on Phil's machine
   with the text sitting low in it.

   Centring the text with padding depends on that line box. Centring it with
   flex does not: the band is a fixed height and the text is centred in it
   whatever the fallback font does. */
.lang-strip {
  background: var(--gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.5rem 2rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Bilingual banner (gold band) */
.bilingual {
  background: var(--gold);
  padding: 3rem 2rem;
  text-align: center;
  color: #fff;
}

.bilingual h3 {
  font-size: 1.5rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 0.6rem;
}

.bilingual p {
  font-size: 0.88rem;
  opacity: 0.88;
  max-width: 560px;
  margin: 0 auto;
}

/* Tags */
.tag, .lang-tag {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 0.2rem 0.55rem;
  color: var(--mid-grey);
}

/* ==========================================================
   CTA BAND
   ========================================================== */
/* Superseded by the photographic CTA band further down the file (build spec
   section 9.8). Only the padding and text colour survive from the original. */
.cta-band {
  color: #fff;
  padding: 5rem 2rem;
}

.cta-band h2 {
  font-size: 2.3rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 0.9rem;
  line-height: 1.2;
}

.cta-band p {
  color: rgba(255,255,255,0.92);
  font-size: 0.92rem;
  margin-bottom: 2rem;
  max-width: 52ch;
  line-height: 1.85;
}

/* ==========================================================
   FOOTER
   ========================================================== */
footer {
  background: #111;
  color: rgba(255,255,255,0.5);
  padding: 3rem 2rem;
}

/* The reversed-out logo. Sized to sit a little below the header mark, which
   is 56px tall on a white bar; the footer version is cropped tight, so the
   same height would read as larger. */
.footer-logo {
  /* Sized by width, like the header mark - logo-footer.png is 7.54:1, so
     setting a height instead gives a width that overruns the column. 320px
     fills the column it now has, up from 250. */
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}

.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
}

footer h4 {
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  font-family: 'Inter', sans-serif;
}

footer a {
  display: block;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 0.83rem;
  margin-bottom: 0.5rem;
  transition: color 0.2s;
}

footer a:hover { color: var(--gold); }

/* SRA digital badge strip. Sits between the link columns and the copyright
   line, which is where the firms that display it put it. */
/* The badge sits at the foot of the link column, pushed to the right edge.

   It has been in three places. A full-width band of its own left it alone
   on a dark footer with most of a screen of space beside it. Under the
   tagline it was better, but the left column then ran 160px longer than the
   right and the hole simply moved. Here it closes the space under the links
   and lands where the eye already ends up, at the bottom right - the
   arrangement Phil pointed to on 19 Oct. */
.footer-badge {
  /* 2.8rem + the 1.5rem taken off .footer-brand's padding-top, so the badge
     stays exactly where it was while the mark moves up. */
  margin: 4.3rem 0 0;
}

/* Yoshki's own box: 275x163 maximum, and the 59.1% padding holds that
   shape open while the frame loads. Their markup carries these inline; they
   live here instead. Do not pin a height - the badge is re-rendered daily
   with the current date, which is how the SRA spots copied static images. */
/* 275 x 163 is the size Yoshki issues, and their installation guide is
   explicit: "Firms are not authorised to resize the logo without
   permission", and the supplied images are already the minimum allowable.
   This was briefly set to 190px on the assumption that 275 was a maximum
   rather than a specification. It is not. Do not change these numbers;
   larger sizes are available from sra@yoshki.com on request. */
.sra-badge {
  /* An explicit width, not just a cap. The frame below is an aspect-ratio
     box: its height comes from a percentage of its own width, and the iframe
     inside it is absolutely positioned, so the box has no content to measure.
     Given only a max-width it collapses to nothing the moment its parent
     stops handing it a width - which is exactly what happened when this was
     briefly a flex child. 275px is the issued size, so stating it is correct
     rather than a resize. */
  width: 275px;
  max-width: 100%;
  max-height: 163px;
  /* Flush left, under the mark. This was margin-left: auto from when the
     badge lived at the right-hand end of the links column; with the
     column now 320px and the badge 275px, auto was indenting it 45px
     from the logo above it. */
  margin-left: 0;
}

@media (max-width: 600px) {
  /* Stacked footer: hard against the right edge looks stranded. */
  .sra-badge { margin-left: 0; }
}
.sra-badge-frame {
  position: relative;
  padding-bottom: 59.1%;
  height: auto;
  overflow: hidden;
}
.sra-badge-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  background-color: transparent;
  display: block;
}

.footer-badge-missing {
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--gold);
  border: 1px dashed rgba(181,162,106,0.5);
  padding: 0.7rem 0.9rem;
  max-width: 48ch;
}

.footer-bottom {
  max-width: 1180px;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ==========================================================
   SERVICE DETAIL PAGES (shared across all service-*.html)
   ========================================================== */
.content-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 5rem 2rem;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 5rem;
  align-items: start;
}

.content-main h2 { font-size: 2rem; margin-bottom: 1.2rem; line-height: 1.2; }
.content-main p  { color: var(--mid-grey); font-size: 0.93rem; line-height: 1.9; margin-bottom: 1.2rem; }

.content-block { margin-bottom: 3.5rem; }
.content-block:last-child { margin-bottom: 0; }

/* Matters list */
.matters-list { list-style: none; margin-top: 0.5rem; }
.matters-list li {
  padding: 0.75rem 0 0.75rem 1.4rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--mid-grey);
  position: relative;
}
.matters-list li:first-child { border-top: 1px solid var(--border); }
/* An em dash here is a drawn bullet, not punctuation - the no-em-dash rule
   is about writing, and a hyphen in this slot reads as a stub. */
.matters-list li::before { content: '\2014'; position: absolute; left: 0; color: var(--gold); font-size: 0.8rem; }

/* Process steps */
.process-steps { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0; }
.process-step  { display: flex; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.process-step:first-child { border-top: 1px solid var(--border); }
.process-step-num { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 300; color: var(--border); line-height: 1; flex-shrink: 0; width: 36px; }
/* Scoped under .content-block on purpose: the practice pages' style partial
   (fees.njk) turns every h4 in a content block into a small gold uppercase
   label, and that was reaching these step titles - Lynn found them unclear
   (27 Oct). This outranks it and gives the steps the shared subtitle format. */
.content-block .process-step h4,
.process-step h4 {
  font-size: var(--subtitle-size);
  font-weight: var(--subtitle-weight);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--black);
  margin: 0 0 0.3rem;
}
.process-step p  { font-size: 0.85rem; color: var(--mid-grey); line-height: 1.8; margin: 0; }

/* FAQs */
.faq-item { border-bottom: 1px solid var(--border); padding: 1.2rem 0; }
.faq-item:first-child { border-top: 1px solid var(--border); }
/* Black, bold and bigger (Lynn, 27 Oct). The shared subtitle weight and
   colour, but a size of its own: she asked for bigger again once it was at
   the subtitle size, so the question now sits a step above the other
   subtitles, with the answer at body size beneath it. */
.faq-q { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: var(--subtitle-weight); line-height: 1.3; color: var(--black); margin-bottom: 0.45rem; }
.faq-a { font-size: 0.85rem; color: var(--mid-grey); line-height: 1.8; }

/* Audience / two-column cards (employment page) */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 0.5rem; }
.audience-card { background: var(--off-white); padding: 1.8rem; }
.audience-card h4 { font-size: 1rem; margin-bottom: 0.8rem; }
.audience-card ul { list-style: none; }
.audience-card ul li { font-size: 0.83rem; color: var(--mid-grey); padding: 0.35rem 0 0.35rem 1.2rem; position: relative; border-bottom: 1px solid var(--border); }
.audience-card ul li:last-child { border-bottom: none; }
.audience-card ul li::before { content: '-'; position: absolute; left: 0; color: var(--gold); font-size: 0.75rem; }

/* Core badge (services page) */
.core-badge { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; background: var(--gold); color: #fff; padding: 0.2rem 0.55rem; display: inline-block; margin-bottom: 0.5rem; }

/* Sidebar */
.sidebar { position: sticky; top: 88px; }
.sidebar-card { background: var(--off-white); padding: 2rem; margin-bottom: 1.5rem; }
.sidebar-card h4 { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; font-family: 'Inter', sans-serif; }
.sidebar-card p  { font-size: 0.83rem; color: var(--mid-grey); line-height: 1.7; margin-bottom: 1.2rem; }
.sidebar-card .btn-primary { width: 100%; text-align: center; padding: 0.75rem 1.5rem; font-size: 0.76rem; }

.sidebar-links { list-style: none; }
.sidebar-links li { border-bottom: 1px solid var(--border); }
.sidebar-links li:first-child { border-top: 1px solid var(--border); }
.sidebar-links a { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; text-decoration: none; color: var(--black); font-size: 0.83rem; transition: color 0.2s; }
.sidebar-links a:hover { color: var(--gold); }
.sidebar-links a span { color: var(--border); font-size: 0.8rem; transition: color 0.2s; }
.sidebar-links a:hover span { color: var(--gold); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 960px) {
  .content-wrap { grid-template-columns: 1fr; gap: 3rem; }
  .sidebar      { position: static; }
  .two-col      { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .page-header h1 { font-size: 2.2rem; }
}

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .page-header h1 { font-size: 2.2rem; }
}

/* ==========================================================
   REDESIGN COMPONENTS (build spec, 13 Oct 2026)
   ----------------------------------------------------------
   Everything below implements Lynn's build specification. The
   components are shared across pages rather than hand-built per
   page, which is what section 23 asks for.
   ========================================================== */

/* ── Reveal on scroll (spec section 20: subtle only) ──
   The hidden state is added by nav.js, never here, so the content is visible
   if JavaScript does not run. Skipped entirely under reduced-motion. */
.reveal-init { opacity: 0; transform: translateY(14px); }
.reveal-in   { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s ease; }

@media (prefers-reduced-motion: reduce) {
  .reveal-init, .reveal-in { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* The three !important hero overrides that were here are gone: they dated
   from when the hero wording was centred, and partials/styles/home.njk now
   sets the alignment directly. !important to beat your own stylesheet is
   always a sign two places are fighting over the same thing. */

/* ── Section heading row ── */
.section-head {
  max-width: 1180px;
  margin: 0 auto;
  padding: 4.5rem 2rem 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.section-head h2 {
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.25;
  max-width: 22ch;
}

.section-head .section-more {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 0.4rem;
}

.section-head .section-more:hover { color: var(--black); }
.section-head .section-more .arr { transition: transform 0.2s ease; display: inline-block; }
.section-head .section-more:hover .arr { transform: translateX(4px); }

/* ── Expertise preview cards, image-led (spec section 9.3) ── */
.expertise-preview {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 2rem 1rem;
  display: grid;
  /* Three across, not the mock-up's five: six areas are shown rather than
     five, and each card carries its summary paragraph, so the cards need
     width to breathe. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.ep-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--border);
  background: #fff;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              border-color 0.25s ease, background 0.25s ease;
}

.ep-card:hover { border-color: var(--gold); }

.ep-media {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center 55%;
  transition: transform 0.5s ease;
}

.ep-card:hover .ep-media { transform: scale(1.02); }

.ep-body {
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.ep-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: var(--gold);
  display: block;
  margin-bottom: 0.3rem;
}

.ep-body h3 {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--black);
  margin-bottom: 0.45rem;
}

.ep-body p {
  font-size: 0.8rem;
  color: var(--mid-grey);
  line-height: 1.75;
}

.ep-body .arr { color: var(--gold); font-size: 0.85rem; transition: transform 0.2s ease; }
.ep-card:hover .arr { transform: translateX(3px); }

/* ── Split editorial section (spec sections 9.4 / 10.3) ── */
.split {
  max-width: 1180px;
  margin: 4.5rem auto 0;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.split--reverse .split-media { order: 2; }

.split-media {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center 55%;
  position: relative;
}

.split-media-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 1.4rem 1.6rem;
  color: #fff;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.8;
  text-shadow: 0 1px 16px rgba(var(--ink-rgb),0.9);
  background: linear-gradient(to top, rgba(var(--ink-rgb),0.75), transparent);
  width: 100%;
}

.split-body h2 {
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 1.1rem;
}

.split-body > p {
  font-size: 0.92rem;
  color: var(--mid-grey);
  line-height: 1.95;
  margin-bottom: 1.6rem;
}

.split-points { list-style: none; margin: 1.6rem 0 0; padding: 0; }

.split-point {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--border);
}

.split-point:last-child { border-bottom: 1px solid var(--border); }

.split-point svg { width: 20px; height: 20px; color: var(--gold); margin-top: 2px; }
.split-point strong { display: block; font-size: 0.88rem; font-weight: 500; margin-bottom: 0.15rem; }
.split-point span { font-size: 0.82rem; color: var(--mid-grey); line-height: 1.7; }

/* ── Numbered process columns (spec section 10.5) ── */
.howwework {
  max-width: 1180px;
  margin: 0 auto;
  padding: 4.5rem 2rem 1rem;
  display: grid;
  grid-template-columns: 0.9fr 2.1fr;
  gap: 3rem;
  align-items: start;
}

.howwework h2 { font-size: 2.1rem; font-weight: 400; line-height: 1.25; }

.howwework-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}

.howwework-step .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  color: var(--border);
  display: block;
  line-height: 1;
  margin-bottom: 0.7rem;
}

.howwework-step h3 { font-size: 1.15rem; font-weight: 400; margin-bottom: 0.5rem; line-height: 1.3; }
.howwework-step p  { font-size: 0.84rem; color: var(--mid-grey); line-height: 1.85; }

/* ── Expertise list rows (spec section 11.3) ── */
.ex-list { max-width: 1180px; margin: 2rem auto 0; padding: 0 2rem 1rem; }

.ex-row {
  display: grid;
  grid-template-columns: 72px 300px 1fr 36px;
  gap: 1.6rem;
  align-items: start;
  padding: 1.9rem 0;
  border-top: 1px solid var(--border);
  text-decoration: none;
  transition: background 0.18s ease;
}

.ex-row:last-child { border-bottom: 1px solid var(--border); }
.ex-row:hover { background: var(--off-white); }

.ex-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  color: var(--border);
  line-height: 1.1;
}

.ex-row h3 { font-size: 1.35rem; font-weight: 400; line-height: 1.25; color: var(--black); }

.ex-row p {
  font-size: 0.85rem;
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 0.9rem;
}

.ex-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.ex-tag {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid-grey);
  border: 1px solid var(--border);
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
}

.ex-arrow { color: var(--gold); font-size: 1rem; text-align: right; transition: transform 0.2s ease; }
.ex-row:hover .ex-arrow { transform: translateX(4px); }

/* ── Bilingual band (spec section 10.6) ── */
.bilingual-band {
  background: var(--gold);
  color: #fff;
  text-align: center;
  padding: 2.4rem 2rem;
  margin-top: 4.5rem;
}

.bilingual-band p { font-size: 0.95rem; letter-spacing: 0.04em; }
.bilingual-band .zh { font-size: 0.88rem; opacity: 0.92; margin-top: 0.5rem; line-height: 1.8; }

/* ── Person preview cards (spec section 9.6) ── */
.people-preview {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 2rem 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

/* ── CTA band over photography (spec sections 9.8 / 11.5) ── */
.cta-band {
  position: relative;
  overflow: hidden;
  text-align: left;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--cta-photo, var(--header-photo));
  background-size: cover;
  /* Set per photograph by the cta partial. A fixed 60% was cutting the
     subject out of a band only a few hundred pixels tall. */
  background-position: var(--cta-pos, center 60%);
  filter: var(--photo-lift);
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right,
    rgba(var(--ink-rgb),0.80) 0%,
    rgba(var(--ink-rgb),0.62) 50%,
    rgba(var(--ink-rgb),0.34) 100%);
}

.cta-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem;
}

.cta-band h2,
.cta-band p {
  text-shadow: 0 2px 30px rgba(var(--ink-rgb),1), 0 1px 10px rgba(var(--ink-rgb),0.85);
}

/* ── Footer, rebuilt (spec section 8) ── */
/* Three columns, not two: brand, links, badge.

   The badge has to live somewhere, and wherever it went below the links it
   left a rectangle of nothing beside it - about 160px tall and most of the
   page wide. That is the dead space Phil kept pointing at, and no amount of
   moving it up and down fixes it. Side by side does: the three columns come
   out at roughly 120px, 155px and 163px tall, so they finish within about
   40px of each other and there is nothing left over.

   The cost is that the notices no longer sit on one line - in a 493px
   column they take two. That is a fair trade for the hole, and two even
   lines in a narrow column read as deliberate in a way that one wrapped
   line never did. */
.footer-top {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  /* Four: mark and badge | Address | Contact | Notices, with a rule between
     them - the mock-up of 19 Oct.

     The three text columns are equal rather than sized to their contents.
     Sized to content they came out 190, 230 and 341 wide, so the dividers
     fell at uneven intervals and the whole thing looked loose on one side
     and tight on the other. Equal columns put the rules on a regular beat,
     which is the spacing Phil was after. It also gives Contact the room he
     asked for, since it needs the least. */
  /* 320 rather than 275 for the mark's column: the badge is fixed at 275
     and the firm's own logo was being held to the same width, which made
     it the smaller of the two. Widening the column lets the logo lead. */
  grid-template-columns: 320px repeat(3, minmax(0, 1fr));
  gap: 3rem;
  /* stretch, not start: the rules between the columns run to a common depth
     the way the mock-up draws them, instead of each stopping wherever its
     own column happens to end. */
  align-items: stretch;
  padding-bottom: 2.5rem;
}

/* Stacked lists, per Lynn's sketch. The notices run in two sub-columns
   rather than one tall one - Phil's suggestion, and it halves a column that
   was otherwise 303px against 150px beside it. column-count rather than a
   grid so the eight items balance themselves four and four, and still do if
   the firm adds a ninth. */
.footer-primary,
.footer-legal {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-primary { display: flex; flex-direction: column; gap: 0.55rem; }

/* One column again now the notices have a column of the footer to
   themselves rather than sharing with the addresses. */
/* One step for every list in the footer: the gap between notices, between
   the two addresses, and between Email and Telephone are all this. */
.footer-legal { display: flex; flex-direction: column; gap: 0.62rem; }

/* The rule under the menu went with the row layout - a horizontal border
   below a vertical list would cut the footer in half. */
.footer-primary { padding-bottom: 0; border-bottom: none; }

.footer-primary a {
  display: inline;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 0;
}

/* The eight policy links run as one wrapping row rather than a tall column -
   section 8.1 is explicit that they must not go back to a vertical list. */
.footer-legal { margin-top: 0; gap: 0.5rem; }

.footer-legal a {
  display: inline;
  font-size: 0.75rem;
  white-space: nowrap;   /* a link must not break across two lines mid-phrase */
  color: rgba(255,255,255,0.55);
  padding: 0;
}

.footer-legal a:hover,
.footer-primary a:hover { color: var(--gold); }

/* ==========================================================
   RESPONSIVE (spec section 17)
   ========================================================== */
@media (max-width: 1100px) {
  .ex-row { grid-template-columns: 54px 240px 1fr 28px; gap: 1.2rem; }
}

@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: 2.2rem; }
  .split--reverse .split-media { order: 0; }
  .howwework { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-badge { margin-top: 0.5rem; }
  .people-preview { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  /* Value strip becomes 2x2 rather than four cramped columns. */
  .value-strip-inner,
  .positioning-inner { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 0; }
  .value-item:nth-child(odd),
  .positioning-item:nth-child(odd) { border-left: none; }
  .expertise-preview { grid-template-columns: repeat(2, 1fr); }
  .howwework-steps { grid-template-columns: 1fr; gap: 1.6rem; }
  .ex-row { grid-template-columns: 44px 1fr 24px; }
  .ex-row h3 { grid-column: 2; }
  .ex-row .ex-body { grid-column: 2; }
  .section-head h2 { font-size: 1.7rem; }
  .has-hero-header .hero,
  .has-hero-header .page-header { padding-top: 8rem; }
}

@media (max-width: 600px) {
  .expertise-preview { grid-template-columns: 1fr; }
  .people-preview { grid-template-columns: 1fr; }
  .nav-inner { height: 72px; }
  .nav-links { top: 72px; }
  .opening { scroll-margin-top: 72px; }  /* matches the shorter header */
  /* Smaller again on a phone: at 40px the mark was crowding the menu
     button. 36px is 203px wide, with the reversed file width-matched. */
  .logo img { height: 36px; }
  .logo img.logo-light { width: 200px; }
  .value-item h3 { font-size: 1rem; }
}


/* ──────────────────────────────────────────────────────────────────────────
   CARD LINKS
   Every card on this site is an <a> wrapping a block of content. A link needs
   `text-decoration: none` and `color: inherit` or the browser renders it blue
   and underlined - which is exactly what happened to the homepage practice
   areas and the Expertise rows on 14 Oct, when those two declarations were
   lost in a tidy-up.

   They are declared once, here, for every card type at the same time, so a
   change to one card cannot strip them from another. Add new card classes to
   this list.
   ────────────────────────────────────────────────────────────────────────── */
a.service-card,
a.service-row,
a.ep-card,
a.person-card,
a.newsitem,
a.ex-row {
  text-decoration: none;
  color: inherit;
}

a.service-card h3,
a.service-row .service-row-title,
a.ep-card h3,
a.person-card h3,
a.ex-row h3 { color: var(--black); }

/* ==========================================================
   RESTYLING THE EXISTING SECTIONS (13 Oct)
   ----------------------------------------------------------
   Phil's instruction: take the styling from the mock-ups, not
   the content. So rather than introduce new components that
   would need new copy, the sections the site already has are
   restyled to the mock-ups' look. Every word on the page is
   the approved wording, unchanged.
   ========================================================== */

/* ── Expertise page intro strip -> the four-column value strip look ──
   Same three lines of approved copy per item; label, value, description. */
.intro-strip {
  background: var(--off-white);
  border-top: none;
  border-bottom: 1px solid var(--border);
}

.intro-strip-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.4rem 2rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
}

.intro-stat {
  text-align: center;
  padding: 0 1.6rem;
  border-left: 1px solid var(--border);
}
.intro-stat:first-child { border-left: none; }

.intro-stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.intro-stat-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--subtitle-size);
  font-weight: var(--subtitle-weight);
  line-height: 1.25;
  margin-bottom: 0.45rem;
}

.intro-stat-desc {
  font-size: 0.78rem;
  color: var(--mid-grey);
  line-height: 1.75;
}

/* ── About page firm-stat block -> the same treatment ── */
.firm-overview-right { display: grid; gap: 0; }

.firm-stat {
  padding: 1.3rem 0;
  border-top: 1px solid var(--border);
}
.firm-stat:last-child { border-bottom: 1px solid var(--border); }

.firm-stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}

.firm-stat-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--subtitle-size);
  font-weight: var(--subtitle-weight);
  margin-bottom: 0.3rem;
}

.firm-stat-desc { font-size: 0.8rem; color: var(--mid-grey); line-height: 1.75; }

/* ── Homepage practice-area cards -> image-led ──
   The card keeps its number, title and approved summary; the photograph is
   added above them. No wording changes. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  background: transparent;
  border: none;
}

.service-card {
  background: #fff;
  border: 1px solid var(--border);
  padding: 0;
  /* visible, not hidden: overflow: hidden would clip the lift shadow and the
     focus outline. The gold rule is positioned inside the card anyway. */
  overflow: visible;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease;
}

/* Hover: the card lifts, a gold rule runs across the top, and the ground
   goes to the header's dark grey with the text turned light (Lynn, 27 Oct -
   "too much light areas"; she pointed at the header grey, which is --black).
   Before that the ground only warmed to #fdfcf9 and the heading took the
   gold (Phil, 20 Oct - the state before his changed only the border, which
   was too quiet to read as interactive).

   The number and arrow were already gold and stay gold; on the dark ground
   they read as the accent rather than the signal. */
.service-card { position: relative; }

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--gold);
  transition: width 0.35s ease;
  z-index: 2;
}
.service-card:hover::before,
.service-card:focus-within::before { width: 100%; }

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(var(--ink-rgb), 0.22);
  border-color: var(--hover-bg);
  background: var(--hover-bg);
}

.service-card h3,
.service-card p { transition: color 0.25s ease; }
.service-card:hover h3,
.service-card:focus-within h3 { color: var(--hover-title); }
.service-card:hover p,
.service-card:focus-within p { color: var(--hover-text); }

.service-card:hover .service-arrow,
.service-card:focus-within .service-arrow { transform: translateX(7px); }

/* Keyboard users get the same signal, and the outline is not clipped by the
   card's overflow: hidden. */
.service-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  /* Colour still changes; nothing moves. */
  .service-card,
  .service-card::before,
  .service-card h3,
  .service-card p,
  .service-card .service-arrow { transition: none; }
  .service-card:hover,
  .service-card:focus-within { transform: none; box-shadow: none; }
  .service-card:hover::before,
  .service-card:focus-within::before { width: 100%; }
}

/* The photographs came off these cards on 14 Oct - six images stacked under
   the hero was too much picture for one page. Text only, in the mock-ups'
   card frame. */
.service-card .card-body { padding: 1.7rem 1.6rem 1.9rem; flex: 1; display: flex; flex-direction: column; }
.service-card .card-body p { flex: 1; }

.service-card .service-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  color: var(--gold);
  display: block;
  margin-bottom: 0.3rem;
  position: static;
}

.service-card h3 { font-size: var(--subtitle-size); font-weight: var(--subtitle-weight); line-height: 1.3; margin-bottom: 0.45rem; }
.service-card p  { font-size: 0.8rem; color: var(--mid-grey); line-height: 1.75; }

.service-card .service-arrow {
  color: var(--gold);
  display: inline-block;
  margin-top: 0.9rem;
  transition: transform 0.2s ease;
  position: static;
}
.service-card:hover .service-arrow { transform: translateX(4px); }

/* ── Expertise listing rows -> the mock-ups' numbered rows ── */
/* The grid asked for four columns - number, title, body, arrow - but the
   markup only ever had three children, because the title, description and
   tags are wrapped together in .service-row-body. So the body landed in the
   300px column, the 1fr column stayed empty, and every practice area was
   squeezed into a third of the page with two thirds of white beside it.
   That is what Lynn saw.

   Three columns to match the markup, and the body carries the title/text
   split internally. Same look as intended, but the row now fills the page. */
.service-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 36px;
  gap: 1.6rem;
  /* center, not start (Lynn, 27 Oct: "too much space under the words"):
     the number, the area name and the arrow sit level with the middle of
     the description and tags rather than hanging off the top of the row. */
  align-items: center;
  /* Side padding so the number and the arrow sit inside the hover ground
     rather than on its edges (Lynn, 27 Oct: "the number is too far left").
     Before the dark hover the ground was off-white and nobody noticed. */
  padding: 1.9rem 1.5rem;
  border-top: 1px solid var(--border);
  border-bottom: none;
  transition: background 0.18s ease;
}
.service-row:last-of-type { border-bottom: 1px solid var(--border); }
/* Hover: the same ground as the homepage practice cards and the Insights
   news cards (Lynn, 27 Oct), from the --hover-* variables in :root. Title and
   number go light, the tags take a light outline, the arrow stays gold. */
.service-row:hover,
.service-row:focus-within { background: var(--hover-bg); }
.service-row-num,
.service-row-title,
.service-row-desc,
.service-row-tags .tag { transition: color 0.25s ease, border-color 0.25s ease; }
.service-row:hover .service-row-title,
.service-row:focus-within .service-row-title { color: var(--hover-title); }
.service-row:hover .service-row-num,
.service-row:focus-within .service-row-num { color: var(--gold); }
.service-row:hover .service-row-desc,
.service-row:focus-within .service-row-desc,
.service-row:hover .service-row-tags .tag,
.service-row:focus-within .service-row-tags .tag { color: var(--hover-text); }
.service-row:hover .service-row-tags .tag,
.service-row:focus-within .service-row-tags .tag { border-color: var(--hover-line); }

.service-row-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  color: var(--border);
  line-height: 1.1;
}

.service-row-title {
  font-family: 'Cormorant Garamond', serif;
  /* The same size as the FAQ questions on the practice pages, a step above
     the other subtitles (Lynn, 27 Oct): the area name is the row's heading. */
  font-size: 1.4rem;
  font-weight: var(--subtitle-weight);
  line-height: 1.25;
  color: var(--black);
}

.service-row-body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0 2.4rem;
  align-items: start;
}
/* The title spans both body rows (description, tags) and centres against
   them; on its own it only filled the first row and the space below it was
   what Lynn pointed at. */
.service-row-title { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; }
.service-row-desc,
.service-row-tags { grid-column: 2; }

.service-row-desc {
  font-size: 0.85rem;
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 0.9rem;
  max-width: 76ch;   /* long lines are wide, not readable */
}

.service-row-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }

.service-row-tags .tag {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid-grey);
  border: 1px solid var(--border);
  padding: 0.3rem 0.6rem;
  background: transparent;
}

.service-row-arrow { color: var(--gold); text-align: right; transition: transform 0.2s ease; }
.service-row:hover .service-row-arrow { transform: translateX(4px); }

@media (max-width: 1100px) {
  .service-row { grid-template-columns: 54px minmax(0, 1fr) 28px; gap: 1.2rem; }
  .service-row-body { grid-template-columns: 220px minmax(0, 1fr); gap: 0 1.6rem; }
}
@media (max-width: 860px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .intro-strip-inner { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 0; }
  .intro-stat:nth-child(odd) { border-left: none; }
  .service-row { grid-template-columns: 44px 1fr 24px; }
  /* One column on a phone: the title sits above its own text again. */
  .service-row { align-items: start; }
  .service-row-body { grid-template-columns: 1fr; gap: 0; }
  .service-row-title,
  .service-row-desc,
  .service-row-tags { grid-column: 1; }
  /* Stacked: the title is a heading above the text again, not centred. */
  .service-row-title { grid-row: auto; align-self: start; margin-bottom: 0.5rem; }
}
@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr; }
  .intro-strip-inner { grid-template-columns: 1fr; }
  .intro-stat { border-left: none; }
}

/* ==========================================================
   PICTURE FIRST (15 Oct 2026)
   ----------------------------------------------------------
   The photograph fills the screen; the words are below it, on
   white. Replaces the old .page-header, where the wording sat
   on the image under a dark overlay.
   ========================================================== */
.cover {
  position: relative;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
  background: var(--black);
}

/* Reference pages - policies, fees - get a shorter band. Nobody should have
   to scroll a full screen to reach a complaints procedure. */
/* .cover--short is unused since 20 Oct, when the notice pages moved to the
   full-height hero. Kept as a one-liner in case a reference page ever wants
   a band again; set heroShort in its front matter. */
.cover--short { height: 62vh; min-height: 400px; }

.cover-pic {
  position: absolute;
  inset: 0;
  background: var(--header-photo);
  background-size: cover;
  background-position: var(--header-pos, center 55%);
  filter: var(--photo-lift);   /* currently none - see :root */
}

/* Phones get two-thirds of the screen rather than all of it, so the first
   words arrive after a short scroll rather than a long one. */
@media (max-width: 860px) {
  .cover { height: 72vh; min-height: 420px; }
  .cover--short { height: 46vh; min-height: 300px; }
}

/* The scroll cue. A visitor sees no words at all until they scroll, so this
   has to be unmissable. It sits on its own soft disc rather than relying on a
   shadow, because the bottom of these photographs is often pale. */
.cover-cue {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  color: #fff;
  text-decoration: none;
  background: rgba(var(--ink-rgb), 0.45);
  padding: 0.9rem 1.4rem 0.7rem;
  transition: background 0.2s ease;
}

.cover-cue:hover,
.cover-cue:focus-visible { background: rgba(var(--ink-rgb), 0.68); }

.cover-cue span {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.cover-cue svg { width: 22px; height: 22px; animation: cover-bob 2.4s ease-in-out infinite; }

@keyframes cover-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .cover-cue svg { animation: none; }
}

/* ── The wording, on white ── */
.opening {
  max-width: 1180px;
  margin: 0 auto;
  padding: 5rem 2rem 3rem;

  /* The menu links point at #opening, so arriving from the menu lands here
     rather than at the top of the photograph. The header is fixed once it
     has gone solid, so without this it would cover the breadcrumb and sit
     tight against the heading. Offsetting the landing point by exactly the
     header's height puts the last 86px of the hero behind the bar - hidden,
     not a visible sliver of photograph - and leaves the breadcrumb clear. */
  scroll-margin-top: 86px;

  /* Was 3rem. With the section below carrying its own 6rem the heading sat
     in about 230px of white, which Lynn flagged on About, Our People and
     Insights. Set here rather than per page so every page keeps the same
     rhythm. */
  padding-bottom: 1.25rem;
}

/* The first section after the page heading closes up to match. Pairs with
   the padding above - between them the gap goes from about 230px to about
   85px, on every page at once. */
/* `.opening` is deliberately tight at the bottom, so whatever follows it
   opens the gap back up. The selector is positional, which caught something
   it should not have: on the homepage the element after `.opening` is the
   gold language strip, and it inherited a 2.75rem top padding against its
   own 0.5rem bottom. That is why the wording sat low in the band rather than
   centred - the band was 44px of padding above and 8px below, not an
   alignment problem at all. Banded elements set their own vertical rhythm
   and are excluded. */
.opening + section:not(.lang-strip):not(.bilingual),
.opening + div:not(.lang-strip):not(.bilingual) {
  padding-top: 2.75rem;
}

.opening-crumb {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}

.opening-crumb a { color: inherit; text-decoration: none; }
.opening-crumb a:hover { color: var(--black); }

.opening h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.14;
  max-width: 20ch;
  margin-bottom: 1.5rem;
}

.opening h1 em { font-style: italic; color: var(--gold); }

.opening-intro {
  font-size: 1.02rem;
  line-height: 1.95;
  color: var(--mid-grey);
  max-width: 62ch;
}

@media (max-width: 860px) {
  .opening { padding: 3rem 2rem 2rem; }
}


/* ── Footer, Lynn's layout (19 Oct) ───────────────────────────────────────
   Address and Contact share the middle column, Notices takes the right.
   Headings are small caps in the same gold as the rest of the site's labels,
   with the short rule under them that the sketch shows. */
/* The two blocks are columns of the footer grid itself, not a grid of their
   own - display: contents lifts them out so the rule between columns lines
   up across all four. */
.footer-details { display: contents; }

/* The mark and badge start lower than the headings beside them, so the pair
   sits against the body of the other columns rather than floating above it
   (Phil, 19 Oct). Matched to the depth of a heading plus its rule. */
/* Raised again on 20 Oct: the mark had drifted low against the headings
   beside it. The badge holds its position - the gap between mark and badge
   below absorbs exactly what comes off here, so only the logo moves. */
.footer-brand { padding-top: 0.9rem; }

/* A hairline between the columns, as drawn. Not on the mark, which sits at
   the edge of the page. */
.footer-block,
.footer-nav {
  border-left: 1px solid rgba(255,255,255,0.11);
  padding-left: 3rem;
}

.footer-head {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}

.footer-block p {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.62);
}
.footer-block p:last-child { margin-bottom: 0; }

/* Label above value, four pairs in one block. A definition list because that
   is what it is, and it keeps the label tied to its value for a screen
   reader rather than being two loose paragraphs. */
.footer-pairs { margin: 0; }

/* Every label in gold: Head office and Registered office now match Email
   and Telephone, which were the only gold ones. Four labels in one treatment
   reads as a set; two gold and two white read as an accident. */
.footer-pairs dt {
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.6;
  margin-bottom: 0.15rem;
}
.footer-pairs dt + dt { margin-top: 0; }
/* Opened up from 0.95rem. Address and Contact are short columns beside a
   notices list of eight, and packed tight at the top they left the column
   looking unfinished. This spreads them down it. */
.footer-pairs dd + dt { margin-top: 1.9rem; }

.footer-pairs dd {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.62);
  /* The email is the longest thing in this column; letting it break mid-word
     would look like a fault, so the column is sized to hold it instead. */
  white-space: nowrap;
}

.footer-block a { color: inherit; text-decoration: none; }
.footer-block a:hover { color: var(--gold); }

@media (max-width: 980px) {
  /* Stacked: the rules would be meaningless as horizontal dividers, so they
     come off and the indent with them. */
  .footer-block,
  .footer-nav { border-left: none; padding-left: 0; }
}

/* Standfirst under "Our Areas of Expertise", added 23 Oct 2026 from the new
   wording. Held to a readable measure rather than the full 1180px of the
   section, which at this size would run to well over 120 characters a line. */
.services-lead {
  max-width: 72ch;
  margin: 0 0 2.6rem;
}
.services-lead p {
  color: var(--mid-grey);
  font-size: 0.93rem;
  line-height: 1.9;
  margin: 0 0 1.1rem;
}
.services-lead p:last-child { margin-bottom: 0; }