/* ==========================================================================
   AKI Hospitality Group — site stylesheet (V6)

   Direction: editorial confidence with restraint. The photography and the
   type carry each page; sets of items sit in quiet bordered cards. Red is
   one wine red (#6E0C0E) for every button, link, rule, pin and the closing
   band; the logo's own #A71516 lives only inside the logo files.

   Identity kept exactly: the AKI logo as supplied, charcoal ink, warm white
   paper, Fraunces (display) + Inter (body), both self-hosted.

   Rules this file follows on purpose:
   - Type scale is the owner's (round 2, Oct 2026): see the --fs-* tokens
     below (h1 at most 52px, h2 at most ~34px, h3 1.15rem, body 16px).
   - Headings never hyphenate (hyphens: manual) and are balanced
     (text-wrap: balance); paragraphs use text-wrap: pretty.
   - Hover effects only under (hover: hover), so touch screens never get
     stuck hover states.
   - Every animation stops under prefers-reduced-motion.
   - Nothing here hides content unless the script has confirmed it can
     reveal it again (the "js-motion" class on <html>).
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;   /* the only weight the site uses (a fixed 400 cut, half the size) */
  font-display: swap;
  src: url("../assets/fonts/fraunces-v6-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;   /* the range the site uses */
  font-display: swap;
  src: url("../assets/fonts/inter-v6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* Stand-in for Fraunces before it arrives: Georgia scaled to its width (measured:
   Fraunces is 6.0% wider, its "0" 5.7%), so headings wrap the same either way. */
@font-face {
  font-family: "Fraunces Fallback";
  font-weight: 400;
  src: local("Georgia"), local("Georgia-Regular");
  size-adjust: 106%;
}

/* Stand-in shown for the moment before Inter arrives: Arial scaled to Inter's
   width (measured: Inter regular is 6.4% wider, semibold 0.7%), so lines wrap
   the same and nothing moves when Inter takes over. */
@font-face {
  font-family: "Inter Fallback";
  font-weight: 400 500;
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
  size-adjust: 106.4%;
  ascent-override: 91%;
  descent-override: 22.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  font-weight: 600 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold");
  size-adjust: 100.7%;
  ascent-override: 96.2%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- Tokens -- */

:root {
  /* Surfaces */
  --white:        #FFFFFF;
  --paper:        #FCFAF7;
  --paper-2:      #F4EFE7;
  --paper-3:      #EDE5D9;
  --line:         #E4DCD0;
  --line-strong:  #CBBFAE;

  /* Ink */
  --ink:          #15120F;
  --ink-2:        #2B2621;
  --ink-soft:     #4A433C;
  --muted:        #655C53;

  /* One wine red for everything large or interactive (owner's choice,
     round 2, Oct 2026): a large flat area of the logo's #A71516 read brighter
     than the logo's small lettering. #A71516 now lives ONLY inside the logo
     files. --brand and --brand-live are kept as names and point at the wine. */
  --brand-wine:       #6E0C0E;
  --brand-wine-hover: #5A0A0C;
  --brand:            var(--brand-wine);
  --brand-live:       var(--brand-wine-hover);
  --brand-tint:       rgba(110, 12, 14, 0.08);

  /* Charcoal — the one dark section, the footer and the menu */
  --charcoal:     #191613;
  --charcoal-2:   #221E1A;
  --charcoal-3:   #2E2924;
  --on-dark:      #F7F2EA;
  --on-dark-muted:#BFB5A8;
  --on-dark-line: rgba(247, 242, 234, 0.16);

  --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Inter Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Type scale (owner's numbers, round 2: "clearly smaller") */
  --fs-hero:      clamp(1.9rem, 3.8vw, 3.25rem);   /* at most 52px */
  --fs-h1:        clamp(1.9rem, 3.8vw, 3.25rem);
  --fs-h2:        clamp(1.45rem, 2.4vw, 2.1rem);   /* at most ~34px */
  --fs-h3:        1.15rem;
  --fs-h4:        1rem;
  --fs-lede:      1.08rem;
  --fs-small:     0.875rem;

  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-wipe:    cubic-bezier(0.77, 0, 0.18, 1);

  --gutter:       clamp(1.25rem, 4vw, 3rem);
  --maxw:         1240px;
  --header-h:     80px;
  --header-h-sm:  64px;
  --section:      clamp(3rem, 5vw, 4.5rem);
  --radius:       3px;

  /* Smooth open/close for <details> where supported */
  interpolate-size: allow-keywords;
}

@media (max-width: 767px) {
  :root { --header-h: 66px; --header-h-sm: 58px; }
}

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

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

/* "hidden" always hides, whatever display a component gives itself */
[hidden]:not([hidden="until-found"]) { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h-sm) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;          /* 16px at every width */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: inherit;
  /* Never split a word with a hyphen. break-word is only a safety net for a
     word longer than the whole line, which no heading on this site has. */
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

h3, h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  /* 1.2 rather than 1.1: a bold sans-serif at 18px needs a little more room
     between two lines than the display face does */
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h4 { font-size: var(--fs-h4); }
/* Same size, set in the display face (names of people and brands) */
.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }

/* Body-text widths are in em, not ch: "ch" follows whichever font is showing, so
   text re-wrapped when Inter arrived. 0.6309em is one Inter "0" (65ch = 41.008em). */
p { margin: 0 0 1.1em; max-width: 41.008em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

small, .small { font-size: var(--fs-small); }

a { color: var(--brand); text-decoration: none; }

/* Links inside running text are underlined, so they never rely on colour
   alone (WCAG 1.4.1); the line draws thicker on hover. Navigation, buttons
   and .link styles carry their own affordance. */
main p a:not(.btn):not(.link), main li > p a:not(.btn):not(.link), main dd a:not(.btn):not(.link),
.prose a:not(.btn):not(.link), .cookie-banner p a:not(.link) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
@media (hover: hover) {
  main p a:not(.btn):not(.link):hover, .prose a:not(.btn):not(.link):hover { text-decoration-thickness: 2px; color: var(--brand-live); }
}

/* A phone number never breaks across two lines */
a[href^="tel:"] { white-space: nowrap; }
/* keeps a hyphenated pair such as "premium-casual" on one line in headings */
.nowrap { white-space: nowrap; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

.on-dark :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .site-footer :focus-visible,
.menu :focus-visible, .cta-band :focus-visible, .cookie-banner :focus-visible, .announce :focus-visible {
  outline-color: #fff;
}
/* Transparent header over a photograph: the same white ring (WCAG 1.4.11) */
.site-header.is-overlay:not(.is-solid) :focus-visible { outline-color: #fff; }

::selection { background: var(--brand); color: #fff; }

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

/* Keep content clear of the notch / rounded corners in landscape */
@supports (padding: max(0px)) {
  .container {
    width: min(var(--maxw), 100% - 2 * max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)));
  }
}

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

.skip-link {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  z-index: 200;
  padding: 0.8rem 1.2rem;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: none; color: #fff; }

/* ------------------------------------------------------------ Typography -- */

/* A label only where it tells you something the heading doesn't. */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  /* also when a label is the section heading (h2.label) */
  font-family: var(--font-body);
  line-height: inherit;
  text-wrap: wrap;
}
.label::before {
  content: "";
  width: 24px; height: 1px;
  background: currentColor;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34.069em;
}

.muted { color: var(--muted); }

/* Inline link with an underline that draws in on hover */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--ink);
  padding-block: 0.35rem;
  min-height: 44px;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; right: 1.55rem; bottom: 0.45rem;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.link svg { width: 1.05em; height: 1.05em; flex: none; transition: transform 0.35s var(--ease-out); }
.link--light { color: #fff; }
@media (hover: hover) {
  .link:hover { color: var(--brand); }
  .link--light:hover { color: #fff; }
  .link:hover::after { animation: underline-draw 0.6s var(--ease-out); }
  .link:hover svg { transform: translateX(4px); }
}
@keyframes underline-draw { 0% { transform: scaleX(1); transform-origin: right; } 45% { transform: scaleX(0); transform-origin: right; } 46% { transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

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

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background-color: transparent; /* <button> otherwise keeps the grey system fill */
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), background-color 0.35s var(--ease-out), transform 0.15s var(--ease-out);
}
.btn svg { width: 1rem; height: 1rem; flex: none; transition: transform 0.35s var(--ease-out); }

/* The fill rises from the bottom on hover */
.btn::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
}

.btn--primary { background: var(--brand); color: #fff; }
/* On charcoal the wine fill alone is too close to the background: a light edge keeps the button's shape */
.on-dark .btn--primary { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.btn--primary::before { background: var(--brand-wine-hover); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light::before { background: var(--ink); }

.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline::before { background: var(--ink); }

.btn--outline-light { border-color: rgba(255, 255, 255, 0.75); color: #fff; }
.btn--outline-light::before { background: #fff; }

@media (hover: hover) {
  .btn:hover::before { transform: none; }
  .btn:hover svg { transform: translateX(4px); }
  .btn--primary:hover, .btn--light:hover { color: #fff; }
  .btn--outline:hover { color: var(--paper); }
  .btn--outline-light:hover { color: var(--ink); border-color: #fff; }
}
/* Press feedback */
.btn:active { transform: translateY(1px) scale(0.985); }
.btn[disabled] { opacity: 0.7; cursor: progress; }
/* A button the script reveals (e.g. "Cookie settings" in the cookie policy)
   stays hidden until then, even though .btn sets a display */
.btn[hidden] { display: none; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }

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

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  color: var(--ink);
  view-transition-name: site-header;
  transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), color 0.4s var(--ease-out);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: var(--header-h);
  transition: height 0.4s var(--ease-out);
}

/* Solid state (pages without a photo header, and every page once the photo
   has scrolled away): near-opaque paper (at least 96%) with a hairline, so
   no colour from the page beneath tints it. */
.site-header.is-solid {
  background: rgba(252, 250, 247, 0.97);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}

/* Gently smaller once the page has moved */
.site-header.is-compact .site-header__inner { height: var(--header-h-sm); }

/* Over a photograph: transparent, white type, light logo */
.site-header.is-overlay:not(.is-solid) { color: #fff; }
.site-header.is-overlay:not(.is-solid) .site-nav__links a,
.site-header.is-overlay:not(.is-solid) .menu-toggle { text-shadow: 0 1px 10px rgba(14, 11, 9, 0.55); }

.site-header__logo {
  position: relative;
  display: block;
  flex: none;
  width: 184px;
  min-height: 44px;
  transition: width 0.4s var(--ease-out);
}
.site-header.is-compact .site-header__logo { width: 160px; }
@media (max-width: 359px) {
  .site-header__inner { gap: 1rem; }
  .site-header__logo, .site-header.is-compact .site-header__logo { width: 150px; }
}
.site-header__logo img { width: 100%; height: auto; transition: opacity 0.35s var(--ease-out); }
.site-header__logo .logo--light { position: absolute; inset: 0; opacity: 0; }
.site-header.is-overlay:not(.is-solid) .logo--dark { opacity: 0; }
.site-header.is-overlay:not(.is-solid) .logo--light { opacity: 1; }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.site-nav__links { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 1.8rem); margin: 0; padding: 0; list-style: none; }

.site-nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.94rem;
  font-weight: 500;
  color: inherit;
}
.site-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.55rem;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.site-nav__links a[aria-current="page"]::after { transform: scaleX(1); background: var(--brand); }
.site-header.is-overlay:not(.is-solid) .site-nav__links a[aria-current="page"]::after { background: #fff; }
@media (hover: hover) {
  .site-nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
}

.site-header .btn { min-height: 44px; padding: 0.55rem 1.2rem; font-size: 0.9rem; }
.site-header.is-overlay:not(.is-solid) .btn--primary { background: #fff; color: var(--ink); }
.site-header.is-overlay:not(.is-solid) .btn--primary::before { background: var(--brand-wine-hover); }
@media (hover: hover) {
  .site-header.is-overlay:not(.is-solid) .btn--primary:hover { color: #fff; }
}

/* Menu button (phones and tablets) */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.25rem 0 0.75rem;
  margin-right: -0.25rem;
  background: none;
  border: 0;
  color: inherit;
  font: 600 0.92rem/1 var(--font-body);
  cursor: pointer;
}
.menu-toggle__icon { position: relative; width: 24px; height: 12px; }
.menu-toggle__icon::before, .menu-toggle__icon::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after  { top: 10px; }

@media (max-width: 1099px) {
  .site-nav { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* ------------------------------------------------------------ Menu (overlay) -- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 0.25rem) max(var(--gutter), env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 1.5rem) max(var(--gutter), env(safe-area-inset-left));
  background: var(--charcoal);
  color: var(--on-dark);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease-wipe), opacity 0s linear 0.6s, visibility 0s linear 0.6s;
}
.menu.is-open {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.6s var(--ease-wipe), opacity 0s, visibility 0s;
}
/* Until the menu is first opened, the browser skips laying out what is inside
   it: less work on every page load, and when the web font arrives. The script
   adds "has-opened" on the first open. */
.menu:not(.is-open):not(.has-opened) { content-visibility: hidden; }

.menu__top {
  position: sticky;            /* Close stays in reach when the menu scrolls */
  top: calc(-1 * (env(safe-area-inset-top) + 0.25rem));
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  flex: none;
  background: var(--charcoal);
}
.menu__top img { width: 160px; height: auto; }

.menu__close {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0 0.25rem 0 0.75rem;
  margin-right: -0.25rem;
  background: none;
  border: 0;
  color: inherit;
  font: 600 0.92rem/1 var(--font-body);
  cursor: pointer;
}
.menu__close-icon { position: relative; width: 24px; height: 24px; }
.menu__close-icon::before, .menu__close-icon::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 11px;
  height: 2px; background: currentColor; border-radius: 2px;
}
.menu__close-icon::before { transform: rotate(45deg); }
.menu__close-icon::after  { transform: rotate(-45deg); }

.menu__links {
  list-style: none;
  margin: auto 0;
  padding: 1.75rem 0;
  display: grid;
  gap: 0.1rem;
}
.menu__links a {
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 2.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--on-dark);
}
.menu__links a[aria-current="page"] { color: #fff; }
.menu__links a[aria-current="page"]::before {
  content: "";
  align-self: center;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--brand);
}
@media (hover: hover) { .menu__links a:hover { color: #fff; } }
/* Phones on their side: smaller links, so most of the list fits at once */
@media (max-height: 500px) {
  .menu__links { padding: 0.75rem 0 1.25rem; }
  .menu__links a { font-size: clamp(1.4rem, 6vh, 1.9rem); }
}

.menu__foot {
  display: grid;
  gap: 0.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--on-dark-line);
  font-size: 1rem;
}
.menu__foot a { color: var(--on-dark-muted); min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) { .menu__foot a:hover { color: #fff; } }

/* Links rise in one after another as the menu opens */
.js-motion .menu__links li, .js-motion .menu__foot {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
}
.js-motion .menu.is-open .menu__links li, .js-motion .menu.is-open .menu__foot { opacity: 1; transform: none; }
.js-motion .menu.is-open .menu__links li:nth-child(1) { transition-delay: 0.16s; }
.js-motion .menu.is-open .menu__links li:nth-child(2) { transition-delay: 0.21s; }
.js-motion .menu.is-open .menu__links li:nth-child(3) { transition-delay: 0.26s; }
.js-motion .menu.is-open .menu__links li:nth-child(4) { transition-delay: 0.31s; }
.js-motion .menu.is-open .menu__links li:nth-child(5) { transition-delay: 0.36s; }
.js-motion .menu.is-open .menu__links li:nth-child(6) { transition-delay: 0.41s; }
.js-motion .menu.is-open .menu__links li:nth-child(7) { transition-delay: 0.46s; }
.js-motion .menu.is-open .menu__links li:nth-child(8) { transition-delay: 0.51s; }
.js-motion .menu.is-open .menu__foot { transition-delay: 0.56s; }

/* While the menu is open the page underneath cannot scroll (the script
   pins it in place, which also works on iOS Safari). */
body.menu-open { overflow: hidden; }
/* The cookie banner steps aside while the menu is open (it would cover the
   email and both phone numbers at the foot of the menu); it returns on close. */
body.menu-open .cookie-banner { visibility: hidden; }

/* ---------------------------------------------------------- Contact phones -- */
/* Phone lists: both numbers, in the order from js/data.js. */
.contact-phones { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.contact-phone { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; }
.contact-phone a { display: inline-flex; align-items: center; min-height: 44px; }
/* The two numbers sit one under the other, with no names beside them
   (owner's rule, round 2: footer, mobile menu and the Contact page). */

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

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  background: var(--charcoal);
  isolation: isolate;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* The layer that holds the slides. It never moves (no pointer parallax:
   removed at the owner's request, round 2). */
.hero__drift { position: absolute; inset: 0; }

.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease-in-out); }
.hero__slide.is-active { opacity: 1; z-index: 1; }

.hero__slide picture, .hero__slide img { display: block; width: 100%; height: 100%; }
.hero__slide img { object-fit: cover; object-position: var(--focus, 50% 50%); }
/* Upright phones get a tall cut that is already centred on the subject */
@media (max-aspect-ratio: 4/5) { .hero__slide img { object-position: 50% 50%; } }

/* Ken Burns: a slow 6% zoom over each slide's life (5 s + the 1 s crossfade),
   in on one slide and out on the next. Paused only by the keyboard "Pause
   motion" control (and the clock stops while the tab is hidden). */
@media (prefers-reduced-motion: no-preference) {
  .hero__slide.kb-in img  { animation: kb-in var(--kb-ms, 6000ms) linear both; }
  .hero__slide.kb-out img { animation: kb-out var(--kb-ms, 6000ms) linear both; }
  .hero.is-paused .hero__slide img { animation-play-state: paused; }
}
@keyframes kb-in  { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes kb-out { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Light shading only where type sits: under the header, and behind the
   headline block. The rest of the photograph is left untouched. */
.hero__scrim {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 11, 9, 0.42) 0%, rgba(14, 11, 9, 0) 18%),
    linear-gradient(0deg, rgba(14, 11, 9, 0.76) 0%, rgba(14, 11, 9, 0.5) 32%, rgba(14, 11, 9, 0.18) 52%, rgba(14, 11, 9, 0) 66%);
}
@media (min-width: 900px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(14, 11, 9, 0.5) 0%, rgba(14, 11, 9, 0.18) 9%, rgba(14, 11, 9, 0) 20%),
      radial-gradient(ellipse 60% 55% at 18% 62%, rgba(14, 11, 9, 0.44) 0%, rgba(14, 11, 9, 0) 74%),
      linear-gradient(90deg, rgba(14, 11, 9, 0.42) 0%, rgba(14, 11, 9, 0.12) 45%, rgba(14, 11, 9, 0) 64%),
      linear-gradient(0deg, rgba(14, 11, 9, 0.55) 0%, rgba(14, 11, 9, 0.14) 32%, rgba(14, 11, 9, 0) 54%);
  }
}

.hero__inner {
  position: relative;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

/* All headlines share one grid cell, so the box is always as tall as the
   tallest and nothing below it moves when the headline changes. */
.hero__headlines { position: relative; display: grid; margin: 0 0 1.1rem; }

/* Extra shade behind the headline for photographs marked tone: "bright" in
   js/data.js. It sits on the headline itself (so it follows the words on any
   screen width) and fades with the photographs. */
.hero__headlines::before {
  content: "";
  position: absolute;
  inset: -30% -18% -45% -14%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(14, 11, 9, 0.5) 0%, rgba(14, 11, 9, 0.3) 55%, rgba(14, 11, 9, 0) 100%);
  opacity: 0;
  transition: opacity 1.2s var(--ease-in-out);
}
.hero[data-tone="bright"] .hero__headlines::before { opacity: 1; }

.hero__headline {
  grid-area: 1 / 1;
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.16);
  visibility: hidden;
}
.hero__headline.is-active, .hero__headline.is-leaving { visibility: visible; }
/* The real <h1> never leaves the accessibility tree: while another slide
   shows, only its words are faded out (.js-motion .w, below). */
#hero-title { visibility: visible; }
.hero__headline .w { display: inline-block; }

/* Lines rise in (0.6s each, 80ms apart) as the new photograph fades in; the
   old lines fade out first. The script gives each word its line number. */
.js-motion .hero__headline .w {
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(var(--line, 0) * 80ms + 280ms);
}
.js-motion .hero__headline.is-active .w { opacity: 1; transform: none; }
.js-motion .hero__headline.is-leaving .w {
  opacity: 0;
  transform: translateY(-0.2em);
  transition-duration: 0.3s;
  transition-delay: 0s;
}
/* First load: the same rise, as an animation that starts faintly visible, so
   the headline is on screen from the very first frame (browsers measure the
   page's main content then; an invisible headline would not count). */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .hero__headline.is-intro .w { animation: line-in 0.75s var(--ease-out) both; animation-delay: calc(var(--line, 0) * 80ms + 200ms); }
}
@keyframes line-in { from { opacity: 0.01; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }

.hero__sub {
  max-width: 21.451em;
  margin: 0 0 1.6rem;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
}

/* Pause/play: invisible until reached with the keyboard (WCAG 2.2.2), then a
   small pill in the corner. Mouse and touch users never see it. */
.hero__pause {
  position: absolute;
  top: calc(var(--header-h) + 0.75rem);
  right: max(var(--gutter), env(safe-area-inset-right));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 17, 14, 0.78);
  color: #fff;
  font: 600 0.88rem/1 var(--font-body);
  cursor: pointer;
}
.hero__pause svg { width: 16px; height: 16px; }
.hero__pause .icon-play { display: none; }
.hero__pause[aria-pressed="true"] .icon-play { display: block; }
.hero__pause[aria-pressed="true"] .icon-pause { display: none; }
.hero__pause:not(:focus) {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hero__scroll {
  position: absolute;
  right: 0;
  bottom: clamp(2.5rem, 6vh, 4.5rem);
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 44px;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.88);
}
.hero__scroll svg { width: 16px; height: 16px; }
@media (max-width: 767px) { .hero__scroll { display: none; } }

/* ----- Hero entrance: one orchestrated moment on load ----------------------
   Pure CSS, so it needs no script and every animation ends visible. The
   photograph is on screen from the very first frame. */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero__sub, .hero .actions, .hero__scroll { animation: fade-up 0.4s var(--ease-out) both; }
  .hero .hero__sub  { animation-delay: 0.45s; }
  .hero .actions    { animation-delay: 0.55s; }
  .hero__scroll     { animation-delay: 0.7s; }
  .site-header.is-overlay { animation: fade-in 0.4s var(--ease-out) 0.2s both; }
}
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }


/* ------------------------------------------------------- Inner page hero -- */
/* Full-width photograph with the heading over it; the photograph is uncovered
   by a curtain that wipes away on load (the image itself is on screen from
   the first frame, under the curtain). */

.page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(24rem, 64svh, 38rem);
  color: #fff;
  background: var(--charcoal);
  isolation: isolate;
  overflow: hidden;
}
.page-hero--short { min-height: clamp(20rem, 48svh, 30rem); }

.page-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.page-hero__media picture, .page-hero__media img { display: block; width: 100%; height: 100%; }
.page-hero__media img { object-fit: cover; object-position: var(--focus, 50% 50%); }
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 11, 9, 0.45) 0%, rgba(14, 11, 9, 0) 26%),
    linear-gradient(0deg, rgba(14, 11, 9, 0.7) 0%, rgba(14, 11, 9, 0.32) 40%, rgba(14, 11, 9, 0) 70%);
}
@media (min-width: 900px) {
  .page-hero::before {
    background:
      linear-gradient(180deg, rgba(14, 11, 9, 0.45) 0%, rgba(14, 11, 9, 0) 24%),
      linear-gradient(90deg, rgba(14, 11, 9, 0.48) 0%, rgba(14, 11, 9, 0.14) 48%, rgba(14, 11, 9, 0) 66%),
      linear-gradient(0deg, rgba(14, 11, 9, 0.5) 0%, rgba(14, 11, 9, 0) 55%);
  }
}
.page-hero__inner { padding-top: calc(var(--header-h) + 2.5rem); padding-bottom: clamp(2.25rem, 5vh, 3.75rem); }

/* Shading variants for particular photographs (each changes only what that
   photo needs; they must come after the .page-hero::before rules above).
   --shade-top: a darker band behind the see-through header, for a bright top
     edge (Our Brands, Smoky Boys).
   --shade-bottom: phones and tablets only, a stronger lower shade where the
     kicker sits over something bright.
   --bright: a bright photograph overall (sky, cafe ceiling): deeper shade
     where the type sits (Property, Partnerships, Insights).
   --deep: phones and tablets only, a deeper corner and lower half (Careers). */
.page-hero--shade-top::before {
  background:
    linear-gradient(180deg, rgba(14, 11, 9, 0.7) 0%, rgba(14, 11, 9, 0.42) 16%, rgba(14, 11, 9, 0) 34%),
    linear-gradient(0deg, rgba(14, 11, 9, 0.7) 0%, rgba(14, 11, 9, 0.32) 40%, rgba(14, 11, 9, 0) 70%);
}
.page-hero--bright::before {
  background:
    linear-gradient(180deg, rgba(14, 11, 9, 0.45) 0%, rgba(14, 11, 9, 0) 26%),
    linear-gradient(0deg, rgba(14, 11, 9, 0.8) 0%, rgba(14, 11, 9, 0.64) 50%, rgba(14, 11, 9, 0.45) 100%);
}
@media (min-width: 900px) {
  .page-hero--shade-top::before {
    background:
      linear-gradient(180deg, rgba(14, 11, 9, 0.7) 0%, rgba(14, 11, 9, 0.42) 16%, rgba(14, 11, 9, 0) 34%),
      linear-gradient(90deg, rgba(14, 11, 9, 0.48) 0%, rgba(14, 11, 9, 0.14) 48%, rgba(14, 11, 9, 0) 66%),
      linear-gradient(0deg, rgba(14, 11, 9, 0.5) 0%, rgba(14, 11, 9, 0) 55%);
  }
  .page-hero--bright::before {
    background:
      linear-gradient(180deg, rgba(14, 11, 9, 0.45) 0%, rgba(14, 11, 9, 0) 24%),
      linear-gradient(90deg, rgba(14, 11, 9, 0.62) 0%, rgba(14, 11, 9, 0.3) 48%, rgba(14, 11, 9, 0) 70%),
      linear-gradient(0deg, rgba(14, 11, 9, 0.5) 0%, rgba(14, 11, 9, 0) 55%);
  }
}
@media (max-width: 899px) {
  .page-hero--shade-bottom::before {
    background:
      linear-gradient(180deg, rgba(14, 11, 9, 0.45) 0%, rgba(14, 11, 9, 0) 26%),
      linear-gradient(0deg, rgba(14, 11, 9, 0.76) 0%, rgba(14, 11, 9, 0.48) 40%, rgba(14, 11, 9, 0) 74%);
  }
  .page-hero--shade-top.page-hero--shade-bottom::before {
    background:
      linear-gradient(180deg, rgba(14, 11, 9, 0.7) 0%, rgba(14, 11, 9, 0.42) 16%, rgba(14, 11, 9, 0) 34%),
      linear-gradient(0deg, rgba(14, 11, 9, 0.76) 0%, rgba(14, 11, 9, 0.48) 40%, rgba(14, 11, 9, 0) 74%);
  }
  .page-hero--deep::before {
    background:
      radial-gradient(ellipse 75% 36% at 0 0, rgba(14, 11, 9, 0.55) 0%, rgba(14, 11, 9, 0.3) 55%, rgba(14, 11, 9, 0) 100%),
      linear-gradient(180deg, rgba(14, 11, 9, 0.5) 0%, rgba(14, 11, 9, 0.2) 18%, rgba(14, 11, 9, 0) 30%),
      linear-gradient(0deg, rgba(14, 11, 9, 0.78) 0%, rgba(14, 11, 9, 0.55) 50%, rgba(14, 11, 9, 0.1) 80%, rgba(14, 11, 9, 0) 90%);
  }
}
/* --plate: a soft shade behind the words themselves (it follows them at every
   width), for photographs with bright patches exactly where the type falls.
   Target, measured on the brightest 10% of pixels under each line: headline
   3.5:1 or more, kicker and lede 4.5:1 or more (aki-tools text-contrast.mjs). */
.page-hero--plate .page-hero__inner { position: relative; }
.page-hero--plate .page-hero__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: calc(var(--header-h) + 0.5rem);
  bottom: -1rem;
  left: calc(-1 * var(--gutter));
  width: min(100% + 2 * var(--gutter), 52rem);
  background: radial-gradient(farthest-side at 32% 58%, rgba(14, 11, 9, 0.6) 0%, rgba(14, 11, 9, 0.42) 50%, rgba(14, 11, 9, 0) 100%);
}
/* Phones and tablets: the words fill more of the width and the kicker sits
   higher, so the shade starts higher and is centred higher. */
@media (max-width: 899px) {
  .page-hero--plate .page-hero__inner::before {
    top: calc(var(--header-h) - 0.5rem);
    background: radial-gradient(farthest-side at 30% 48%, rgba(14, 11, 9, 0.62) 0%, rgba(14, 11, 9, 0.52) 62%, rgba(14, 11, 9, 0) 100%);
  }
}
.page-hero .label { color: #fff; }
/* Same soft shadow as the overlay header links, for bright patches behind the kicker */
.page-hero .label { text-shadow: 0 1px 10px rgba(14, 11, 9, 0.55); }
.page-hero h1 { max-width: 20ch; margin-bottom: 0.4em; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.16); }
.page-hero__lede { max-width: 31.545em; margin: 0; font-size: var(--fs-lede); line-height: 1.55; color: rgba(255, 255, 255, 0.92); }

/* The photograph is simply there when it loads (no curtain, no zoom: round 2).
   Only the words get the light 0.4 s fade. */
@media (prefers-reduced-motion: no-preference) {
  .page-hero__inner > * { animation: fade-up 0.4s var(--ease-out) both; }
  .page-hero__inner > :nth-child(1) { animation-delay: 0.1s; }
  .page-hero__inner > :nth-child(2) { animation-delay: 0.18s; }
  .page-hero__inner > :nth-child(3) { animation-delay: 0.26s; }
}

/* Pages with no photograph (legal pages, thank-you, 404): a quiet title band */
.page-head { padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { max-width: 22ch; }
.page-head .lede { margin-top: 0.75rem; }
.page-head__meta { margin-top: 1rem; font-size: var(--fs-small); color: var(--muted); }

/* --------------------------------------------------------- Sector strip -- */

.sectors {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}

.sectors__track {
  display: flex;
  width: max-content;
  padding-block: clamp(0.9rem, 1.6vw, 1.3rem);
}

.sectors__list {
  display: flex;
  align-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sectors__list li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.sectors__list li::after {
  content: "";
  width: 7px; height: 7px;
  margin-inline: clamp(1.1rem, 2.2vw, 1.9rem);
  border-radius: 50%;
  background: var(--brand);
}

/* Moves whenever the page is open (40 s a loop, no pause on hover or when
   off screen: the owner found the stop-start looked static). Only the
   keyboard "Pause motion" control, or a tap on the strip, holds it still. */
@media (prefers-reduced-motion: no-preference) {
  .sectors__track { animation: marquee 40s linear infinite; }
  .sectors.is-held .sectors__track, .motion-paused .sectors__track { animation-play-state: paused; }
}
/* Three identical lists in the track: moving by exactly one list's width
   (a third of the track) loops seamlessly, even on very wide screens. */
@keyframes marquee { to { transform: translateX(-33.3333%); } }

/* Without motion: one wrapped, centred line; the copies are hidden */
@media (prefers-reduced-motion: reduce) {
  .sectors__track { width: auto; justify-content: center; padding-inline: var(--gutter); }
  .sectors__list { flex-wrap: wrap; justify-content: center; row-gap: 0.3rem; }
  .sectors__list[aria-hidden="true"] { display: none; }
}

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

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.7); }

/* Sections further down the page are laid out only when they come near the
   screen, so phones can show the top of the page sooner. "auto" remembers
   each section's real height once it has been seen. Never the first two
   blocks of a page: they can be on screen at load, and Chrome lays them out
   at the stand-in height for the first frame, which made the footer jump on
   short pages (thank-you, 404). Nor a section with a form: accessibility
   checkers misread the colours of skipped content. (A browser without :has()
   drops this whole rule, which only means no deferral, never a broken page.) */
main > section:nth-child(n+3):not(.hero):not(.page-hero):not(.sectors):not(.page-head):not(:has(form)) {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}
.section--tint { background: var(--paper-2); }
.section--flush-top { padding-top: 0; }

.on-dark {
  background: var(--charcoal);
  color: var(--on-dark);
}
.on-dark h2, .on-dark h3 { color: #fff; }
.on-dark p, .on-dark .lede { color: var(--on-dark-muted); }
.on-dark .label { color: #F08A8B; }
.on-dark .link { color: #fff; }
@media (hover: hover) { .on-dark .link:hover { color: #F08A8B; } }

.section-head { max-width: 44rem; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.section-head h2 { margin-bottom: 0.4em; }
.section-head--split {
  max-width: none;
  display: grid;
  gap: 1rem 3rem;
  align-items: end;
}
@media (min-width: 900px) { .section-head--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.section-head--split p { margin-bottom: 0.35rem; }
/* A split head whose text column carries more than a lede (a paragraph and a
   button too): ordinary paragraph spacing, heading level with the top of the copy */
.section-head--copy { align-items: start; }
.section-head--copy > div > p:not(.label) { margin-bottom: 1.1em; }
.section-head--copy .actions { margin-top: 1.6rem; }

/* Running text set comfortably (inner pages) */
.prose { max-width: 42.901em; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.6em; margin-bottom: 0.4em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.4em; max-width: 41.008em; }
.prose li::marker { color: var(--brand); }

/* Two columns: heading on the left, text on the right (desktop) */
.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
}
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; } }

/* ----------------------------------------------------------------- Intro -- */

.intro {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) { .intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }

.intro__text h2 { max-width: 16ch; margin-bottom: 0.55em; }
.intro__text .lede { margin-bottom: 1.1rem; }
.intro__text p:not(.lede) { color: var(--ink-soft); margin-bottom: 1.3rem; }
.intro .frame { max-height: 34rem; }

/* ----------------------------------------------- Image frames + reveals -- */

.frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--paper-2);
}
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.frame__caption {
  position: absolute; left: 1rem; bottom: 1rem;
  padding: 0.35rem 0.7rem;
  background: rgba(21, 18, 15, 0.82);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
}
.frame--portrait { aspect-ratio: 4 / 5; }
.frame--landscape { aspect-ratio: 3 / 2; }
.frame--wide { aspect-ratio: 16 / 9; }
.frame--square { aspect-ratio: 1; }
/* A framed photograph that only earns its place beside a long form on wide screens */
@media (max-width: 899px) { .frame--desktop-only { display: none; } }

/* Pictures are visible the moment they load: no wipe, no zoom, no fade and
   nothing that waits for a script (owner's rule, round 2). */

/* --------------------------------------------------------------- Brands -- */

.brand-feature { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }

/* width: 100% matters: with only an aspect ratio, the minimum height would
   widen the picture past the screen on phones. */
.brand-feature__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 260px;
}
@media (min-width: 900px) { .brand-feature__media { aspect-ratio: 5 / 2; } }

.brand-feature__panel {
  position: relative;
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  width: min(26rem, calc(100% - 2rem));
  margin: -3.5rem 0 0 clamp(1rem, 4vw, 3rem);
  padding: clamp(1.3rem, 2.5vw, 2rem);
  background: var(--white);
  box-shadow: 0 30px 60px -34px rgba(21, 18, 15, 0.45);
}

/* Franchise marks are reproduced exactly as supplied. Never recolour,
   stretch or filter them. Clear space >= the wordmark's own cap height. */
.brand-mark { padding: 12px 0; }
.brand-mark img { width: 168px; height: auto; filter: none; }

.brand-feature__panel h3 { margin: 0.1rem 0 0; }
.brand-feature__panel .brand-status { margin: 0; font-size: var(--fs-small); color: var(--muted); }
/* Brand name as an h2 (data-heading="h2", where it is the first heading under
   the page h1): same size and spacing as the h3 version */
.brand-feature__panel :is(h2, h3) { margin: 0.1rem 0 0; }
.brand-tile :is(h2, h3) { margin: 0; }
.brand-feature__panel h2, .brand-tile h2 { font-size: var(--fs-h3); line-height: 1.3; }

.brand-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 760px) { .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .brand-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.brand-tile { display: grid; gap: 0.9rem; color: inherit; }
.brand-tile .frame { aspect-ratio: 4 / 3; }
.brand-tile h3 { margin: 0; }
.brand-tile .brand-status { margin: 0; color: var(--muted); font-size: var(--fs-small); }

.brand-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.75rem; }
.brand-filters button {
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  font: 500 0.92rem/1 var(--font-body);
  color: var(--ink-soft);
  cursor: pointer;
}
.brand-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.portfolio-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1.5rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.portfolio-note p { margin: 0; color: var(--ink-soft); max-width: 39.116em; }

/* A quiet panel (e.g. the franchisor note on Our Brands) */
.panel {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--paper-2);
  border-left: 2px solid var(--brand);
}
.panel p { color: var(--ink-soft); }

/* Brand gallery strip: swipe sideways on phones (snaps to each picture),
   three across on larger screens */
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 0.6rem;
}
.gallery > * { scroll-snap-align: start; aspect-ratio: 4 / 3; }
@media (min-width: 760px) {
  .gallery { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
}

/* Facts (label / value pairs) */
.facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.facts > div { display: grid; gap: 0.15rem 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 600px) { .facts > div { grid-template-columns: 11rem minmax(0, 1fr); } }
.facts dt { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.facts dd { margin: 0; }

/* -------------------------------------------------------- Expertise list -- */
/* Not a sequence, so no numbers: spacing and hairlines only. */

.expertise {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
}
@media (min-width: 960px) {
  .expertise { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: start; }
}

.rule-list { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 640px) { .rule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); } }
.rule-list li { padding: 1.15rem 0 1.25rem; border-top: 1px solid var(--line-strong); }
.rule-list h3 { margin: 0 0 0.35rem; }
.rule-list p { margin: 0; color: var(--ink-soft); max-width: 27.76em; }
/* Three items: one column until 900px (no item left alone), then three across */
@media (min-width: 640px) and (max-width: 899px) { .rule-list--3 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) { .rule-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ Map -- */
/* "Where we are": the map on the left (about 55%), text on the right. */

.where {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
/* The map takes about 55% of the row on wide screens */
@media (min-width: 900px) { .where { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); } }

.gbmap-wrap { display: grid; justify-items: center; gap: 0.9rem; }
.gbmap {
  --map-h: clamp(520px, 92vh, 820px);   /* never shorter than 420px (520 here); the tall shape is limited by height, not width */
  position: relative;
  width: min(100%, calc(var(--map-h) * 0.4995));
  aspect-ratio: 520 / 1041;
}
@media (max-width: 899px) { .gbmap { --map-h: max(420px, min(560px, 125vw)); } }
.gbmap > svg { width: 100%; height: 100%; overflow: visible; }
/* A clearly visible outline (charcoal at 40%) on a land fill a step darker
   than the tinted section behind it */
.gbmap__land { fill: #E6DDCF; stroke: rgba(21, 18, 15, 0.42); stroke-width: 1.2; stroke-linejoin: round; }

.gbmap__pins { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.gbmap__pin-wrap { position: absolute; width: 0; height: 0; }
.gbmap__pin {
  position: absolute;
  left: -22px; top: -22px;
  width: 44px; height: 44px;           /* full-size tap target around a small dot */
  display: grid; place-items: center;
  border-radius: 50%;
  cursor: pointer;
}
.gbmap__dot {
  position: relative;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brand-wine);
  box-shadow: 0 0 0 3px var(--paper), 0 4px 12px rgba(21, 18, 15, 0.3);
}
/* The place name beside the pin (the pin's own text is for screen readers) */
.gbmap__label {
  position: absolute;
  left: 30px; top: 50%;
  transform: translateY(-50%);
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  background: rgba(252, 250, 247, 0.92);
  border: 1px solid var(--line);
  border-radius: 4px;
  pointer-events: none;
}
/* Narrow screens: the label sits centred under the pin, so it can never run
   past the edge of the screen */
@media (max-width: 599px) {
  .gbmap__label { left: 50%; top: 30px; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: no-preference) {
  .gbmap__dot::after {
    content: "";
    position: absolute; inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--brand-wine);
    animation: pin-pulse 2.6s var(--ease-out) infinite;
  }
}
@keyframes pin-pulse { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(2.8); opacity: 0; } }

.gbmap__card {
  position: absolute;
  z-index: 5;
  width: max-content;
  max-width: min(17rem, calc(100vw - 2.5rem));
  padding: 0.9rem 1rem 0.75rem;
  background: var(--white);
  color: var(--ink);
  border-radius: 4px;
  box-shadow: 0 18px 44px -18px rgba(21, 18, 15, 0.45), 0 0 0 1px var(--line);
  font-size: var(--fs-small);
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0s linear 0.2s;
}
.gbmap__card.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0s; }
.gbmap__card strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; letter-spacing: -0.01em; }
.gbmap__card span { display: block; color: var(--muted); }
.gbmap__card .link { min-height: 44px; padding-block: 0.2rem; font-size: 0.9rem; }

.gbmap__caption { max-width: 21.451em; margin: 0; text-align: center; font-size: var(--fs-small); color: var(--muted); }
.gbmap__caption a { font-weight: 600; }

.where__text h2 { max-width: 16ch; }
.where__text h3 { margin: 1.4rem 0 0.4rem; font-size: var(--fs-small); letter-spacing: 0.01em; color: var(--muted); }
.sector-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; }
.sector-list li { padding: 0.25rem 0.75rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-small); color: var(--ink-soft); }
.site-list { margin: 0; padding: 0; list-style: none; }
.site-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.site-list li:first-child { border-top: 1px solid var(--line); }
.site-list a { padding-block: 12px; font-weight: 600; color: var(--ink); }   /* inline, but a 44px tall tap area */
.site-list span { color: var(--muted); }

/* -------------------------------------------------------- Principles (dark) -- */

.principles {
  display: grid;
  gap: 0;
  margin: 0; padding: 0;
  list-style: none;
  border-top: 1px solid var(--on-dark-line);
}
@media (min-width: 640px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .principles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.principles li { padding: 1.25rem 0 1.4rem; border-bottom: 1px solid var(--on-dark-line); }
@media (min-width: 640px) {
  .principles li { padding-right: 1.5rem; }
  .principles li:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--on-dark-line); }
}
@media (min-width: 1100px) {
  .principles li { border-bottom: 0; padding: 1.5rem 1.5rem 0.25rem; border-left: 1px solid var(--on-dark-line); }
  .principles li:first-child { padding-left: 0; border-left: 0; }
}
.principles h3 { margin: 0 0 0.4rem; color: #fff; }
.principles p { margin: 0; color: var(--on-dark-muted); max-width: 18.927em; }
/* Three values: one column until 900px, then three across */
@media (min-width: 640px) and (max-width: 899px) {
  .principles--3 { grid-template-columns: minmax(0, 1fr); }
  .principles--3 li, .principles--3 li:nth-child(even) { padding: 1.25rem 0 1.4rem; border-left: 0; }
  .principles--3 p { max-width: 27.76em; }
}
@media (min-width: 900px) {
  .principles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principles--3 li { border-bottom: 0; padding: 1.5rem 1.5rem 0.25rem; border-left: 1px solid var(--on-dark-line); }
  .principles--3 li:first-child { padding-left: 0; border-left: 0; }
}

/* ------------------------------------------- Full-bleed picture + text band -- */

.band {
  display: grid;
  background: var(--paper-2);
}
@media (min-width: 960px) {
  .band { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: min(76vh, 680px); }
  .band--reverse .band__media { order: 2; }
}
.band__media { min-height: 240px; }
.band__media .frame { height: 100%; }
.band__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter);   /* half the round-1 space above and below the photograph */
}
@media (min-width: 960px) { .band__body { padding-inline: clamp(2rem, 4vw, 4rem); } }
.band__body .lede { margin-bottom: 1.6rem; }
.band__body p:not(.lede):not(.label) { color: var(--ink-soft); }
/* A hairline list in a band: two columns while the band is stacked (full
   width), one column beside the photograph */
@media (min-width: 960px) {
  .band__body .rule-list { grid-template-columns: minmax(0, 1fr); }
  .band__media .frame { aspect-ratio: auto; }
}
/* Stacked (phones, tablets): the band's photograph is cut to 4:3 so a tall
   picture never fills the screen on its own; its height comes from the ratio
   alone (the 300px minimum would push it sideways past a narrow screen) */
@media (max-width: 959px) {
  .band__media { min-height: 0; }
  .band__media .frame { height: auto; aspect-ratio: 4 / 3; }
}
.on-dark.band, .band.on-dark { background: var(--charcoal); }

/* ---------------------------------------------------------------- People -- */

.people { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 640px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.person { display: grid; gap: 0; align-content: start; }
.person__portrait {
  position: relative;
  aspect-ratio: 1;
  max-width: 340px;
  margin: 0 0 1.1rem;
  overflow: hidden;
  /* Neutral placeholder while the photograph arrives (no initials) */
  background: var(--paper-3);
}
.people--large .person__portrait { max-width: 460px; }
.person__portrait > picture { position: relative; z-index: 1; }
.person__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.person__portrait.is-fallback { background: var(--charcoal-2); }
.person__portrait.is-fallback picture { display: none; }
/* Initials only when a photograph genuinely fails to load */
.person__initials { display: none; }
.person__portrait.is-fallback .person__initials {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 3rem;
  letter-spacing: 0.04em;
  color: var(--on-dark);
}
.person__role { display: block; margin-bottom: 0.3rem; font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.person h3 { margin: 0 0 0.5rem; font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.people--large .person h3 { font-size: var(--fs-h2); }
.people--large .person h3 { line-height: 1.1; letter-spacing: -0.02em; }
/* Two directors side by side: portrait, role, name and bio line up across
   the pair even when one role wraps (subgrid; older browsers keep the plain layout) */
@media (min-width: 640px) {
  .people--large { row-gap: 0; }
  .people--large .person { grid-row: span 4; grid-template-rows: subgrid; }
}
.person p { color: var(--ink-soft); max-width: 31.545em; }

/* ---------------------------------------------------- Closing call to action -- */
/* One flat block of the exact logo red. */

.cta-band {
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  background: var(--brand-wine);
  color: #fff;
}
.cta-band h2 { max-width: 20ch; margin-bottom: 0.4em; color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.92); font-size: var(--fs-lede); max-width: 29.021em; margin-bottom: 1.75rem; }
.cta-band .btn--light::before { background: var(--ink); }
.cta-band h2 + .actions { margin-top: 1.75rem; }   /* heading and buttons with no paragraph */
.cta-band p a:not(.btn):not(.link), .cta-band p a:not(.btn):not(.link):hover { color: #fff; }
.cta-band__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  margin: 1.9rem 0 0;
  padding: 1.1rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
}
.cta-band__links .link { color: #fff; }
@media (hover: hover) { .cta-band__links .link:hover { color: #fff; } }

/* ------------------------------------------------- Comparison (two columns) -- */

.compare { display: grid; gap: 0; }
@media (min-width: 760px) { .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compare__col { display: grid; gap: 0.9rem; align-content: start; padding: 1.5rem 0; border-top: 1px solid var(--line-strong); }
@media (min-width: 760px) {
  .compare__col { padding: 0 clamp(1.5rem, 3vw, 3rem) 0 0; border-top: 0; }
  .compare__col + .compare__col { padding: 0 0 0 clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--line-strong); }
}
.compare__col .frame { aspect-ratio: 3 / 2; margin-bottom: 0.4rem; }
.compare__col h3 { margin: 0; }
.compare__col p { margin: 0; color: var(--ink-soft); }

/* ------------------------------------------------------ Steps (a sequence) -- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); } }
.steps li { counter-increment: step; position: relative; padding: 1.25rem 0 1.4rem 3.4rem; border-top: 1px solid var(--line); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--brand);
}
@media (min-width: 900px) {
  .steps li { padding: 3.2rem 0 0; border-top: 0; }
  .steps li::before { top: 0; }
  .steps li::after { content: ""; position: absolute; left: 2.6rem; right: 0; top: 0.85rem; height: 1px; background: var(--line-strong); }
}
.steps h3 { margin: 0 0 0.35rem; }
.steps p { margin: 0; color: var(--ink-soft); }

/* ------------------------------------------------------------ Quote panel -- */

.quote-panel {
  margin: 0;
  padding: clamp(1.5rem, 3.5vw, 2.6rem) 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.quote-panel blockquote { margin: 0; }
.quote-panel blockquote p {
  max-width: 30ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.quote-panel figcaption, .quote-panel > p { margin-top: 0.9rem; color: var(--ink-soft); max-width: 35.33em; }
.on-dark .quote-panel { border-color: var(--on-dark-line); }
.on-dark .quote-panel blockquote p { color: #fff; }

/* ---------------------------------------- Expandable items (<details>) -- */
/* Used for the property checklist and the careers role cards. Native
   <details>, so it works without the script and with every keyboard. */

.accordion { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.accordion details { border-bottom: 1px solid var(--line-strong); }
.accordion summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 60px;
  padding: 1rem 2.75rem 1rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  position: absolute; right: 0.4rem; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform 0.35s var(--ease-out);
}
.accordion details[open] > summary::after { transform: rotate(135deg); }
@media (hover: hover) { .accordion summary:hover { color: var(--brand); } }
.accordion__body { padding: 0 0 1.4rem; color: var(--ink-soft); }
.accordion__body > :last-child { margin-bottom: 0; }
.accordion summary .accordion__meta { margin-left: auto; font-weight: 500; font-size: var(--fs-small); color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .accordion details::details-content {
    block-size: 0;
    overflow: clip;
    /* 6px either side, so a focused link at the edge keeps its whole ring */
    margin-inline: -6px;
    padding-inline: 6px;
    transition: block-size 0.4s var(--ease-out), content-visibility 0.4s allow-discrete;
  }
  .accordion details[open]::details-content { block-size: auto; }
}

/* The checklist variant: each item carries a tick */
.checklist summary::before {
  content: "";
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.checklist .accordion__body { padding-left: calc(22px + 1rem); }
.checklist + p { margin-top: 1.4rem; }

/* Role cards (careers) */
.roles details { padding-inline: 0; }
.roles summary { flex-wrap: wrap; row-gap: 0.15rem; }
/* Where a title would push the location onto a second line, every location
   sits under its title instead (never some right-aligned and some not) */
@media (max-width: 599px), (min-width: 900px) and (max-width: 1023px) {
  .roles summary .accordion__meta { flex-basis: 100%; margin-left: 0; }
}

/* ----------------------------------------------------------------- Forms -- */

.form { display: grid; gap: 1.1rem; }
.form__grid { display: grid; gap: 1.1rem 1.25rem; }
@media (min-width: 720px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form__field--full { grid-column: 1 / -1; } }

.form__field { display: grid; gap: 0.4rem; align-content: start; }
.form__field label, .form__label { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.form__field .optional { font-weight: 400; color: var(--muted); }
.form__hint { margin: 0; font-size: var(--fs-small); color: var(--muted); }

.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="date"],
.form input[type="number"], .form select, .form textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: 400 1rem/1.4 var(--font-body);   /* 16px or more: phones do not zoom in */
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.form textarea { min-height: 9rem; resize: vertical; }
.form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.6rem;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315120F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 0.85rem center / 18px no-repeat;
}
.form select:invalid { color: var(--muted); }
@media (hover: hover) {
  .form input:hover, .form select:hover, .form textarea:hover { border-color: var(--muted); }
}
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-color: var(--ink);
}

.form__field.has-error input, .form__field.has-error select, .form__field.has-error textarea { border-color: var(--brand); }
.form__field.has-valid input, .form__field.has-valid select, .form__field.has-valid textarea { border-color: #4F7A52; }
.form__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--brand);
}
.form__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: 0.72rem; font-weight: 700; }

/* Consent: the box and its sentence side by side, the sentence one block */
.form__consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 0.8rem; align-items: start; }
.form__consent input[type="checkbox"] {
  width: 24px; height: 24px;
  margin: 0.1rem 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.form__consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.form__consent label { font-weight: 400; font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); }
.form__consent label a, .who-list span a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
@media (hover: hover) {
  .form__consent label a:hover, .who-list span a:hover { text-decoration-thickness: 2px; color: var(--brand-live); }
}
.form__consent .form__error { grid-column: 2; }
.form__consent.has-error input[type="checkbox"] { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Honeypot: off-screen for people, still present for bots */
.form__hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Error summary (appears above the form on a failed submit) */
.form__summary {
  padding: 1rem 1.2rem;
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  background: #FDF3F3;
}
.form__summary[hidden] { display: none; }
.form__summary h3 { margin: 0 0 0.4rem; color: var(--brand); font-size: 1rem; }
.form__summary ul { margin: 0; padding-left: 1.1rem; }
.form__summary a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.form__status { display: none; padding: 1rem 1.2rem; border-radius: var(--radius); font-weight: 500; }
.form__status.is-visible { display: block; }
.form__status--sending { background: var(--paper-2); color: var(--ink-soft); }
.form__status--success { background: #EEF5EE; color: #1F4D24; border: 1.5px solid #9CC29F; }
.form__status--error { background: #FDF3F3; color: #7A1012; border: 1.5px solid #E5A9AA; }
.form__status a { color: inherit; text-decoration: underline; }
.form__note { font-size: var(--fs-small); color: var(--muted); margin: 0; }

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

.contact-grid { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }

.contact-details { display: grid; gap: 1.5rem; }
.contact-details h2, .contact-details h3 { margin-bottom: 0.3rem; }
.contact-details address { font-style: normal; color: var(--ink-soft); }
.contact-details .contact-phone span { font-weight: 600; }
.contact-email { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
@media (hover: hover) { .contact-email:hover { color: var(--brand); } }

.who-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.who-list li { display: grid; gap: 0.15rem 1.25rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 600px) { .who-list li { grid-template-columns: 10rem minmax(0, 1fr); } }
.who-list strong { font-weight: 600; }
.who-list span { color: var(--ink-soft); }
.who-list span a { white-space: nowrap; }
.who-list span a[href^="mailto:"] { white-space: normal; overflow-wrap: anywhere; }
/* Stacked (phones, tablets): a hairline between the details and the form */
@media (max-width: 959px) {
  .contact-grid > .form { padding-top: clamp(2rem, 5vw, 2.5rem); border-top: 1px solid var(--line-strong); }
}
/* Tablets: Email and Phone side by side, Registered office below */
@media (min-width: 640px) and (max-width: 959px) {
  .contact-details { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

/* ------------------------------------------------------------ Insights -- */

/* One card style for every set of items (owner's choice, round 2): a 1px
   border, 8px corners, 1.5rem padding, no shadow, the border darkens on
   hover. Cards in a row share a height; 2 across on tablets, 1 on phones. */
.cards { display: grid; gap: 1rem; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.3s var(--ease-out);
}
.section--tint .card { background: var(--paper); }
@media (hover: hover) { .card:hover { border-color: var(--line-strong); } }
.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  margin-bottom: 0.4rem;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
}
.card__icon svg { width: 22px; height: 22px; }
/* A number only where the items are a sequence */
.card__num { font-family: var(--font-display); font-size: 1.35rem; line-height: 1; color: var(--brand); }
.card__meta { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.card h2, .card h3, .card h4 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; }
.card h2 a, .card h3 a { color: var(--ink); }
/* The title link covers the whole card */
.card h2 a::after, .card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card p { margin: 0; color: var(--ink-soft); }
/* A link at the foot of a card sits at the same height across the row */
.card .link { margin-top: auto; padding-top: 0.4rem; position: relative; z-index: 2; }
@media (hover: hover) {
  .card:hover h2 a, .card:hover h3 a { color: var(--brand); }
}
.card:focus-within { outline: 2px solid var(--brand); outline-offset: 4px; }
.card h2 a:focus-visible, .card h3 a:focus-visible { outline: none; }
/* On the dark section */
.on-dark .card { background: var(--charcoal-2); border-color: var(--on-dark-line); }
@media (hover: hover) { .on-dark .card:hover { border-color: rgba(247, 242, 234, 0.34); } }
.on-dark .card h3, .on-dark .card h4 { color: #fff; }
.on-dark .card p { color: var(--on-dark-muted); }
.on-dark .card__icon { background: rgba(247, 242, 234, 0.1); color: #F08A8B; }

/* Article pages: comfortable reading width, a sticky way back (desktop) */
.article { display: grid; gap: 1.5rem; }
@media (min-width: 1100px) {
  .article { grid-template-columns: 12rem minmax(0, 42.901em); gap: 3rem; justify-content: center; }
  .article__aside { position: sticky; top: calc(var(--header-h-sm) + 1.75rem); align-self: start; }
}
.article__back { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; font-weight: 600; color: var(--ink); }
.article__back svg { width: 16px; height: 16px; transform: rotate(180deg); transition: transform 0.35s var(--ease-out); }
@media (hover: hover) { .article__back:hover { color: var(--brand); } .article__back:hover svg { transform: rotate(180deg) translateX(4px); } }
.article__meta { margin: 0 0 1.5rem; font-size: var(--fs-small); color: var(--muted); }
.article .prose { font-size: 1.0625rem; }
.article .prose p, .article .prose li { max-width: 42.901em; }

/* --------------------------------------------------------- Legal pages -- */

.legal { max-width: 44.163em; }
.legal h2 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem); margin-top: 2em; }
.legal h3 { margin-top: 1.5em; }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 0.95rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid var(--line); }
.legal th { font-weight: 600; }
.table-scroll { overflow-x: auto; }
/* A hairline and room between the page head and the text, so "Last updated"
   is not read as part of section 1 */
.page-head + .section--flush-top .legal { padding-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--line); }
/* Cookie names in a proper monospace, not smaller than the text around them */
.legal code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1em; }
.legal td:first-child code { font-weight: 600; }
/* A table that stacks on phones: each row becomes a short block (the name,
   then each detail beside its column name); the labels are hidden from
   screen readers, which already announce the column headers */
@media (max-width: 599px) {
  .table-stack, .table-stack tbody, .table-stack tr { display: block; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-stack tr { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
  .table-stack tr:first-child { border-top: 1px solid var(--line); }
  .table-stack td { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding: 0.15rem 0; border: 0; }
  .table-stack td::before { content: attr(data-label); content: attr(data-label) / ""; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
  .table-stack td:first-child { display: block; margin-bottom: 0.25rem; }
  .table-stack td:first-child::before { content: none; }
}

/* ------------------------------------------------ Simple message pages -- */

.message { padding: calc(var(--header-h) + clamp(3rem, 9vw, 7rem)) 0 var(--section); }
.message h1 { max-width: 18ch; }
.message .lede { margin-bottom: 1.75rem; }

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

/* Compact (at most 560px tall on desktop), on the v5 structure: a top row
   (small logo + description | labelled contact block), four link columns,
   then the legal lines with the copyright and "Back to top". Phone numbers
   are shown without names (owner's rule, round 2). */
.site-footer {
  background: var(--charcoal);
  color: var(--on-dark-muted);
  /* --banner-room: set by the script while the cookie banner is showing */
  padding: clamp(2rem, 1.5rem + 1.5vw, 2.5rem) 0 calc(1rem + env(safe-area-inset-bottom) + var(--banner-room, 0px));
  font-size: 0.9375rem;
  line-height: 1.5;
}
.site-footer__top {
  display: grid;
  gap: 1.5rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--on-dark-line);
}
@media (min-width: 960px) { .site-footer__top { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr); align-items: start; gap: 2.5rem; } }
.site-footer__mark { display: block; width: 184px; }
.site-footer__mark img { width: 100%; height: auto; }
.site-footer__tagline { margin: 0.7rem 0 0; max-width: 25.236em; color: var(--on-dark-muted); }

/* Three labelled blocks side by side where they fit; a block moves to the
   next line rather than squeezing (the email address is never broken). */
.site-footer__contact { display: grid; gap: 1.25rem; font-size: 0.9rem; }
@media (min-width: 640px) { .site-footer__contact { display: flex; flex-wrap: wrap; gap: 1rem 2rem; } }
.site-footer__contact > div { display: grid; gap: 0.1rem; align-content: start; flex: none; }
.site-footer__contact a { color: #fff; }
.site-footer__contact address { font-style: normal; color: var(--on-dark-muted); }
.site-footer__contact .contact-phones { gap: 0; }
.site-footer__contact .contact-phone a { color: #fff; }
@media (hover: hover) { .site-footer__contact a:hover { color: #F08A8B; } }

.site-footer__nav {
  display: grid;
  gap: 1rem 2rem;
  padding-block: 1.2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) { .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-footer__heading {
  margin: 0 0 0.4rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
/* Links are 34px apart with a mouse and 44px (a finger's width) on touch screens */
.site-footer__nav a, .site-footer__button, .site-footer__contact a, .site-footer__base a {
  display: inline-flex; align-items: center; min-height: 34px; color: var(--on-dark-muted);
}
.site-footer__contact a { color: #fff; }
@media (pointer: coarse) {
  .site-footer__nav a, .site-footer__button, .site-footer__contact a, .site-footer__base a { min-height: 44px; }
}
.site-footer__button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.site-footer__button[hidden] { display: none; }
@media (hover: hover) { .site-footer__nav a:hover, .site-footer__button:hover, .site-footer__base a:hover { color: #fff; } }

.site-footer__legal {
  padding-top: 1rem;
  border-top: 1px solid var(--on-dark-line);
  font-size: 0.8125rem;
  line-height: 1.55;
}
.site-footer__legal p { max-width: 69.399em; margin-bottom: 0.5em; color: #A99F92; }
.site-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 2rem; margin-top: 0.3rem; }
.site-footer__base p { margin: 0; }

/* --------------------------------------------------------- Announcement -- */

.announce {
  position: relative;
  z-index: 61;
  background: var(--brand);
  color: #fff;
}
.announce__inner { display: flex; align-items: center; gap: 1rem; min-height: 46px; padding-block: 0.4rem; }
.announce__text { margin: 0; max-width: none; flex: 1; font-size: 0.92rem; line-height: 1.45; }
.announce__text a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.announce__close {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px;
  background: none; border: 0; border-radius: 50%;
  color: #fff; cursor: pointer;
}
@media (hover: hover) { .announce__close:hover { background: rgba(0, 0, 0, 0.18); } }
body.has-announce .site-header { top: var(--announce-h, 46px); }

/* ---------------------------------------------------------- Cookie banner -- */

.cookie-banner {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 90;
  max-width: 540px;
  margin-inline: auto;
  padding: 1.3rem 1.4rem;
  background: var(--charcoal);
  color: var(--on-dark);
  border-radius: 6px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .cookie-banner { animation: banner-in 0.5s var(--ease-out) both; }
}
@keyframes banner-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cookie-banner p { margin: 0 0 1rem; font-size: 0.92rem; color: var(--on-dark-muted); }
.cookie-banner p a { color: #fff; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.cookie-banner .btn { min-height: 44px; padding: 0.5rem 1.25rem; font-size: 0.9rem; }

/* Small and landscape phones: a slim bar, not a third of the screen */
@media (max-width: 600px), (max-height: 500px) {
  .cookie-banner {
    left: 0; right: 0; bottom: 0;
    max-width: none;
    padding: 0.85rem max(1rem, env(safe-area-inset-right)) calc(0.85rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    border-radius: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  }
  .cookie-banner p { margin: 0; flex: 1 1 18rem; font-size: 0.86rem; line-height: 1.45; }
  .cookie-banner__actions { flex: none; }
  .cookie-banner .btn { padding: 0.45rem 1.1rem; }
}

/* ------------------------------------------------------- Page transitions -- */

/* Pages cross-fade into each other where the browser supports it; the header
   stays put. Older browsers simply load the page as normal. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: var(--ease-out); }

/* --------------------------------------------------------- Reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .page-hero__media::after { display: none; }
  @view-transition { navigation: none; }
}

/* ---------------------------------------------------- Forced colours mode -- */

@media (forced-colors: active) {
  .hero__scrim, .page-hero::before { display: none; }
  .btn, .brand-filters button, .menu-toggle, .menu__close, .hero__pause { border: 1px solid ButtonText; }
  .label::before, .sectors__list li::after { background: CanvasText; forced-color-adjust: none; }
  .gbmap__dot { forced-color-adjust: none; background: Highlight; box-shadow: 0 0 0 3px Canvas; }
  .accordion summary::after {
    forced-color-adjust: none;
    background:
      linear-gradient(CanvasText, CanvasText) center / 14px 2px no-repeat,
      linear-gradient(CanvasText, CanvasText) center / 2px 14px no-repeat;
  }
  .gbmap__land { stroke: CanvasText; }
}

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

@media print {
  .site-header, .menu, .hero__media, .hero__scrim, .hero__pause, .hero__scroll, .sectors, .cookie-banner, .announce,
  .page-hero__media, .page-hero::before, .gbmap__pins { display: none !important; }
  .hero, .page-hero { min-height: 0; color: var(--ink); background: none; }
  .hero__headline, .page-hero h1, .page-hero__lede { color: var(--ink); visibility: visible; opacity: 1; text-shadow: none; }
  .hero__headline:not(#hero-title) { display: none; }
  .hero__sub, .page-hero .label, .on-dark h2, .on-dark h3, .on-dark p, .on-dark .label, .principles h3,
  .cta-band h2, .cta-band p, .btn--outline-light, .btn--light { color: #000 !important; }
  .on-dark, .cta-band, .band.on-dark { background: none !important; }
  .on-dark .card { background: none !important; border-color: #999 !important; }
  main > section { content-visibility: visible !important; }
  body { background: #fff; }
}