/* ==========================================================================
   Pietas Law — Stage 1
   Vanilla CSS. Organised: Base · Tokens · Typography · Layout · Header ·
   Hero · Sections · Practice Areas · About · Contact · Footer · Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   Desktop values are the approved design. The two media queries at the foot
   of this file step them down; nothing else changes between breakpoints.
   -------------------------------------------------------------------------- */

:root {
  /* Colour — navy-led, with neutral-grey accents. */
  --navy: #14263F;
  --navy-dark: #101E33;
  --navy-hover: #1D3554;
  --navy-field: #1B3050;

  --ink: #2B2F36;
  --ink-muted: #55606E;
  --rule: #DDE1E6;
  --rule-strong: #C3CAD3;
  --rule-soft: #B8C0CA;
  --surface: #FFFFFF;
  --surface-alt: #F4F5F7;
  --surface-press: #E4E8ED;

  --on-navy: #FFFFFF;
  --on-navy-muted: #C6CFDB;
  --on-navy-soft: #A9B6C6;
  --on-navy-dim: #8FA0B5;
  --on-navy-footer: #9BA8B9;
  --rule-on-navy: rgba(255, 255, 255, 0.22);
  --rule-on-navy-soft: rgba(255, 255, 255, 0.16);

  --accent: var(--rule-strong);

  /* Type */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'IBM Plex Sans', Helvetica, Arial, sans-serif;

  --fs-h1: 56px;
  --fs-h2: 42px;
  --fs-h3: 30px;
  --fs-h4: 23px;
  --fs-h5: 21px;
  --fs-lede: 18.5px;
  --fs-quote: 24px;
  --fs-stat: 30px;
  --fs-body: 16px;
  --fs-copy: 15px;
  --fs-fine: 14.5px;
  --fs-label: 11.5px;
  --fs-small: 13.5px;
  --fs-tiny: 13px;

  /* Space */
  --pad-x: 72px;
  /* Horizontal inset for full-bleed background bands: pad-x normally, growing
     past the 1920px content width so the band's own content stays centered. */
  --pad-x-outer: max(var(--pad-x), calc((100% - 1920px) / 2 + var(--pad-x)));
  --sec-top: 80px;
  --sec-bot: 72px;
  --band-top: 96px;
  --band-bot: 88px;
  --gap-lg: 88px;
  --gap-md: 72px;
  --gap-sm: 48px;
  --gap-row: 40px;

  /* Grid ratios */
  --g-75: 7fr 5fr;
  --g-57: 5fr 7fr;
  --g-48: 4fr 8fr;
  --g-84: 8fr 4fr;
  --g-2col: repeat(2, 1fr);
  --g-4col: repeat(4, 1fr);
  --g-foot: 5fr 2fr 2fr 3fr;

  /* Rails — the right-hand column of a split becomes a stacked block below
     its sibling on smaller screens, so its divider moves from left to top. */
  --rail-border-left: 1px solid var(--rule-on-navy);
  --rail-border-top: 0 none;
  --rail-pad-left: 40px;
  --rail-pad-top: 0px;

  --transition: 180ms ease;
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.page {
  width: 100%;
  overflow-x: hidden;
}

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--navy); color: var(--on-navy); }

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

.visually-hidden {
  position: absolute;
  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: -100px; left: 24px;
  z-index: 100;
  padding: 12px 22px;
  background: var(--navy);
  color: var(--on-navy);
  font-size: var(--fs-fine);
  font-weight: 500;
  transition: top var(--transition);
}
.skip-link:focus { top: 12px; color: var(--on-navy); }

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   Two families only: Source Serif 4 for headings and pull statements,
   IBM Plex Sans for everything else.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--navy);
}

p { margin: 0; }

.h1 { font-size: var(--fs-h1); line-height: 1.11; letter-spacing: -0.014em; max-width: 24ch; text-wrap: pretty; }
.h2 { font-size: var(--fs-h2); line-height: 1.11; letter-spacing: -0.014em; }
.h3 { font-size: var(--fs-h3); line-height: 1.16; }
.h4 { font-size: var(--fs-h4); line-height: 1.3; }
.h5 { font-size: var(--fs-h5); line-height: 1.3; }

.lede { font-size: var(--fs-lede); line-height: 1.72; text-wrap: pretty; }
.body-text { font-size: var(--fs-body); line-height: 1.8; color: var(--ink-muted); }
.copy { font-size: var(--fs-copy); line-height: 1.8; color: var(--ink-muted); }
.fine { font-size: var(--fs-fine); line-height: 1.8; color: var(--ink-muted); }

/* The single uppercase label style, used for every eyebrow and field label. */
.label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.label--tight { letter-spacing: 0.12em; }

.measure-46 { max-width: 46ch; }
.measure-48 { max-width: 48ch; }
.measure-52 { max-width: 52ch; }
.measure-54 { max-width: 54ch; }
.measure-56 { max-width: 56ch; }
.measure-62 { max-width: 62ch; }
.measure-66 { max-width: 66ch; }
.measure-70 { max-width: 70ch; }

.emphasis { color: var(--navy); font-weight: 500; }

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */

.section { padding: var(--sec-top) var(--pad-x-outer) var(--sec-bot); }
.section--alt { background: var(--surface-alt); border-top: 1px solid var(--rule); }
.hero ::selection, .section--navy ::selection { background: var(--surface); color: var(--navy); }

.section--navy {
  background: var(--navy);
  color: var(--on-navy);
  padding: var(--band-top) var(--pad-x-outer) var(--band-bot);
}

.split { display: grid; gap: var(--gap-md); }
.split--75 { grid-template-columns: var(--g-75); }
.split--57 { grid-template-columns: var(--g-57); }
.split--48 { grid-template-columns: var(--g-48); }
.split--84 { grid-template-columns: var(--g-84); }
.split--end { align-items: end; }
.split--wide { gap: var(--gap-lg); }

.section-head { margin-bottom: var(--gap-sm); }

/* Right-hand column of a navy split. */
.rail {
  border-left: var(--rail-border-left);
  border-top: var(--rail-border-top);
  padding-left: var(--rail-pad-left);
  padding-top: var(--rail-pad-top);
}

/* --------------------------------------------------------------------------
   BUTTONS AND LINKS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 15px 28px;
  border: none;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn--navy { background: var(--navy); color: var(--on-navy); }
.btn--navy:hover { background: var(--navy-hover); color: var(--on-navy); }
.btn--light { background: var(--surface); color: var(--navy); }
.btn--light:hover { background: var(--surface-press); color: var(--navy); }

.link-underline {
  color: var(--navy);
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 1px;
}
.link-underline:hover { color: var(--navy-hover); }

.link-on-navy {
  color: var(--on-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 2px;
}
.link-on-navy:hover { color: var(--on-navy); }

/* A neutral-grey hairline for the hero and contact eyebrows. */
.accent-rule {
  flex: none;
  width: 40px;
  height: 1px;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

.utility-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  padding: 9px var(--pad-x-outer);
  background: var(--navy);
  color: var(--on-navy-footer);
  font-size: 12.5px;
}
.utility-bar__group { display: flex; flex-wrap: wrap; gap: 6px 30px; }
.utility-bar a { color: var(--on-navy-footer); }
.utility-bar a:hover { color: var(--on-navy); }

.masthead {
  position: relative;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px var(--pad-x-outer);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.masthead__brand {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 18px;
  min-width: 0;
}
.wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.wordmark:hover { color: var(--navy); }
.masthead__tagline { display: none; }

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: var(--fs-fine);
}
.nav__link { color: var(--ink); }
.nav__link:hover { color: var(--navy); }
.nav__cta {
  min-height: 44px;
  padding: 12px 22px;
  background: var(--navy);
  color: var(--on-navy);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--transition);
}
.nav__cta:hover { background: var(--navy-hover); color: var(--on-navy); }

.nav-toggle {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--navy); }
.nav-toggle__bar {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  background: var(--navy);
  transform: translateX(-50%);
}
.nav-toggle__bar:nth-child(1) { top: 15px; }
.nav-toggle__bar:nth-child(2) { top: 21px; }
.nav-toggle__bar:nth-child(3) { top: 27px; }

.nav-mobile__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.nav-mobile__wordmark {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-decoration: none;
}

.nav-mobile__close {
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
}

body.nav-mobile-locked { overflow: hidden; }

.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(10, 20, 35, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nav-mobile-overlay.is-open { display: block; opacity: 1; }

.nav-mobile {
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  width: min(320px, 85vw);
  flex-direction: column;
  padding: 20px var(--pad-x) 24px;
  background: var(--surface);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.nav-mobile.is-open { transform: translateX(0); }
.nav-mobile__link {
  padding: 17px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-size: var(--fs-h5);
  color: var(--ink);
}
.nav-mobile__link:hover { color: var(--ink); }
.nav-mobile__cta { margin-top: auto; }
.nav-mobile__tel {
  margin-top: 14px;
  text-align: center;
  font-size: var(--fs-fine);
  color: var(--ink-muted);
}
.nav-mobile__tel:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: var(--g-2col);
  background: var(--navy);
  color: var(--on-navy);
}
/* Image runs edge to edge, so the inset lives on the text column instead. */
.hero__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--band-top) var(--pad-x) var(--band-bot);
  padding-left: max(var(--pad-x), calc((100vw - 1920px) / 2 + var(--pad-x)));
}
.hero__eyebrow {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 38px;
  color: var(--on-navy-muted);
}
.hero h1 { color: var(--on-navy); margin-bottom: 44px; }
.hero__lede { color: var(--on-navy-muted); max-width: 60ch; }
.hero__lede a { color: inherit; text-decoration: underline; }
.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 30%;
}

/* --------------------------------------------------------------------------
   WHOM WE ADVISE
   -------------------------------------------------------------------------- */

.serve__action { margin-top: var(--gap-sm); }
.audience-grid {
  display: grid;
  grid-template-columns: var(--g-2col);
  gap: 0 var(--gap-lg);
}
.audience {
  border-top: 1px solid var(--rule);
  padding: 24px 0;
}
.audience--lead { border-top-color: var(--navy); }
.audience h3 { margin-bottom: 10px; }

.exclusion {
  display: grid;
  grid-template-columns: var(--g-57);
  gap: 14px var(--gap-md);
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.exclusion--single { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }

/* --------------------------------------------------------------------------
   PRACTICE AREAS
   -------------------------------------------------------------------------- */

.practice {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gap-sm);
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
}
.practice__lists {
  display: grid;
  grid-template-columns: var(--g-2col);
  gap: var(--gap-sm);
}
.practice--first { border-top: 2px solid var(--navy); }
.practice__qualifier {
  margin-bottom: 18px;
  padding-left: 16px;
  border-left: 2px solid var(--navy);
  font-size: var(--fs-copy);
  line-height: 1.75;
  color: var(--ink-muted);
  max-width: 46ch;
}
.practice__byline { font-size: var(--fs-fine); line-height: 1.8; color: var(--ink-muted); }
.matter-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
  font-size: var(--fs-copy);
  color: var(--ink);
}
.matter-list li {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
}
.matter-list li:last-child { border-bottom: none; padding-bottom: 0; }

.engagement__label { margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   MID-PAGE CALL TO ACTION
   -------------------------------------------------------------------------- */

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px var(--gap-sm);
  padding: 36px var(--pad-x-outer);
  background: var(--navy);
}
.cta-band__text {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: 1.45;
  color: var(--on-navy);
  max-width: 62ch;
  text-wrap: pretty;
}
.cta-band .btn { flex: none; }

/* --------------------------------------------------------------------------
   APPROACH
   -------------------------------------------------------------------------- */

.principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-row) var(--gap-lg);
}
.principle { border-top: 1px solid var(--rule); padding: 18px 0 24px; }
.principle--lead { border-top: 2px solid var(--navy); }
.principle h3 { margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   ABOUT THE ATTORNEY
   -------------------------------------------------------------------------- */

.attorney__credentials { border-top: 2px solid var(--navy); padding-top: 18px; }
.attorney__role { margin-bottom: 16px; }
.attorney__name { margin-bottom: 20px; font-size: var(--fs-h4); line-height: 1.12; letter-spacing: -0.014em; }

.credentials {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding-top: 4px;
}
.credentials > div { border-top: 1px solid var(--rule); padding-top: 14px; }
.credentials dt { margin-bottom: 6px; }
.credentials dd {
  margin: 0;
  font-size: var(--fs-copy);
  line-height: 1.6;
  color: var(--ink);
}

.attorney__body { display: flex; flex-direction: column; }
.attorney__quote {
  margin: 0 0 24px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: 1.55;
  color: var(--navy);
  max-width: 46ch;
  text-wrap: pretty;
}
.attorney__body p + p { margin-top: 20px; }

.first-meeting {
  margin-top: 24px;
  padding: 24px 26px;
  background: var(--surface);
  border-left: 2px solid var(--navy);
  max-width: 66ch;
}
.first-meeting__label { color: var(--navy); margin-bottom: 12px; }
.first-meeting p + p { margin-top: 14px; }

.attorney__action { margin-top: 24px; }

/* --------------------------------------------------------------------------
   ENGAGEMENT STEPS
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: var(--g-4col);
  gap: var(--gap-row) var(--gap-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.step {
  border-top: 2px solid var(--navy);
  padding-top: 16px;
}
.step h3 { margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   QUESTIONS
   -------------------------------------------------------------------------- */

.faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 46ch;
  margin: 0 auto var(--gap-lg);
  text-align: center;
}
.faq__list { max-width: 760px; margin: 0 auto; }

.faq { margin: 0; }
.faq__row { border-top: 1px solid var(--rule); }
.faq__row:first-child { border-top: 2px solid var(--navy); }
.faq__row:last-of-type { border-bottom: 1px solid var(--rule); }
.faq__question {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-row);
  padding: 22px 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: 1.34;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after { content: "+"; flex: none; font-weight: 400; }
.faq__row[open] .faq__question::after { content: "\2212"; }
.faq__answer { margin: 0 0 24px; font-size: var(--fs-copy); line-height: 1.8; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   CONTACT
   Phase 1 is enquiry only. When scheduling is added in Phase 2 it becomes a
   further band below this one; this form and its details list are unaffected.
   -------------------------------------------------------------------------- */

.contact__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  color: var(--on-navy-muted);
}
.contact__eyebrow .accent-rule { width: 34px; }
.contact h2 { color: var(--on-navy); margin-bottom: 24px; max-width: 22ch; }
.contact__notice { color: var(--on-navy-muted); max-width: 54ch; margin-bottom: 30px; }

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}
.contact-details__row {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  align-items: baseline;
  gap: 8px 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-on-navy);
}
.contact-details__row:last-child { padding-bottom: 0; border-bottom: none; }
.contact-details dt { color: var(--on-navy-dim); }
.contact-details dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--on-navy);
  text-align: left;
}
.contact-details__email { word-break: break-word; }

.enquiry h3 { color: var(--on-navy); margin-bottom: 8px; }
.enquiry__note { margin-bottom: 26px; font-size: var(--fs-small); line-height: 1.75; color: var(--on-navy-dim); }

.field-grid {
  display: grid;
  grid-template-columns: var(--g-2col);
  gap: 20px;
}
.field--wide { grid-column: 1 / -1; }

.field label {
  display: block;
  margin-bottom: 8px;
  color: var(--on-navy-muted);
}
.field__optional { color: var(--on-navy-dim); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  background: var(--navy-field);
  color: var(--on-navy);
  font-family: var(--font-sans);
  font-size: var(--fs-copy);
}
.field textarea {
  min-height: 120px;
  line-height: 1.7;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--on-navy-dim); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); }

.enquiry__submit { margin-top: 26px; }

.form-status {
  margin-top: 20px;
  padding: 14px 16px;
  border-left: 2px solid var(--accent);
  background: rgba(255, 255, 255, 0.08);
  font-size: var(--fs-fine);
  line-height: 1.75;
  color: var(--on-navy);
}
.form-status[hidden] { display: none; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  padding: 40px var(--pad-x-outer) 26px;
  background: var(--navy-dark);
  color: var(--on-navy-footer);
}
.site-footer a { color: var(--on-navy-footer); }
.site-footer a:hover { color: var(--on-navy); }

.site-footer__grid {
  display: grid;
  grid-template-columns: var(--g-foot);
  gap: 28px var(--gap-row);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule-on-navy-soft);
}
.site-footer__wordmark {
  margin-bottom: 10px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h5);
  letter-spacing: -0.01em;
  color: var(--on-navy);
}
.site-footer__descriptor { font-size: var(--fs-small); line-height: 1.8; max-width: 34ch; }
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--fs-small);
  font-style: normal;
}
.site-footer__email { word-break: break-word; }

.site-footer__base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 30px;
  padding-top: 18px;
  font-size: 12.5px;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.site-footer__cookie-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--on-navy-footer);
  text-decoration: underline;
  cursor: pointer;
}
.site-footer__cookie-link:hover { color: var(--on-navy); }

/* --------------------------------------------------------------------------
   COOKIE BANNER
   -------------------------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--navy-dark);
  border-top: 1px solid var(--rule-on-navy-soft);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 40px;
  padding: 20px var(--pad-x-outer);
}
.cookie-banner__text {
  flex: 1 1 480px;
  max-width: 68ch;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--on-navy-footer);
}
.cookie-banner__text a { color: var(--on-navy); text-decoration: underline; }
.cookie-banner__actions { display: flex; flex: none; gap: 12px; }
.cookie-banner .btn { min-height: 40px; padding: 10px 22px; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   Only tokens change. No component defines its own breakpoint behaviour.
   -------------------------------------------------------------------------- */

/* Tablet — splits that read as two columns fold; three-column registers pair. */
@media (max-width: 1024px) {
  :root {
    --pad-x: 40px;
    --sec-top: 64px;
    --sec-bot: 56px;
    --band-top: 72px;
    --band-bot: 64px;
    --gap-lg: 48px;
    --gap-md: 44px;
    --gap-sm: 36px;
    --gap-row: 32px;

    --fs-h1: 44px;
    --fs-h2: 34px;
    --fs-h3: 26px;
    --fs-h4: 21px;
    --fs-h5: 19px;
    --fs-lede: 17px;
    --fs-quote: 21px;
    --fs-stat: 26px;

    --g-75: 1fr;
    --g-57: 1fr;
    --g-84: 1fr;
    --g-4col: repeat(2, 1fr);
    --g-foot: 1fr 1fr;

    --rail-border-left: 0 none;
    --rail-border-top: 1px solid var(--rule-on-navy);
    --rail-pad-left: 0px;
    --rail-pad-top: 28px;
  }

  .nav { display: none; }
  .nav-toggle { display: inline-flex; }

  .principles { grid-template-columns: repeat(2, 1fr); }
  .practice__lists { grid-template-columns: 1fr; }
  .practice__qualifier { max-width: none; }

  /* Mobile header: one navy block (logo + tagline + hamburger), contact
     info moves into a light row underneath. */
  header { display: flex; flex-direction: column; }

  .masthead {
    order: 1;
    background: var(--navy);
    border-bottom: none;
  }
  .masthead__brand { flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; max-width: 100%; }
  .masthead .wordmark { color: var(--on-navy); }
  .masthead__tagline {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--on-navy-muted);
  }

  .nav-toggle { background: transparent; border-color: var(--on-navy); }
  .nav-toggle__bar { background: var(--on-navy); }

  .utility-bar {
    order: 2;
    background: var(--surface);
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .utility-bar__descriptor { display: none; }
  .utility-bar__divider { display: none; }
  .utility-bar__group { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 0; }
  .utility-bar__group a {
    padding: 9px 0;
    text-align: center;
    color: var(--ink);
  }
  .utility-bar__group a:first-child { border-right: 1px solid var(--rule); }
  .utility-bar a:hover { color: var(--navy); }

  .hero { grid-template-columns: 1fr; }
  .hero__image { height: auto; aspect-ratio: 4 / 3; }
}

/* Phone — single column throughout. */
@media (max-width: 640px) {
  :root {
    --pad-x: 24px;
    --sec-top: 48px;
    --sec-bot: 44px;
    --band-top: 52px;
    --band-bot: 48px;
    --gap-lg: 32px;
    --gap-md: 28px;
    --gap-sm: 26px;
    --gap-row: 20px;

    --fs-h1: 33px;
    --fs-h2: 27px;
    --fs-h3: 23px;
    --fs-h4: 19px;
    --fs-h5: 18px;
    --fs-lede: 16.5px;
    --fs-quote: 19px;
    --fs-stat: 23px;
    --fs-body: 15.5px;

    --g-48: 1fr;
    --g-2col: 1fr;
    --g-4col: 1fr;
    --g-foot: 1fr;
  }

  .hero__eyebrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .principles { grid-template-columns: 1fr; }
  .practice { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Privacy policy page */
.policy h2 { margin: 32px 0 10px; }
.policy .body-text + .body-text { margin-top: 10px; }
.policy ul { margin: 10px 0 10px; padding-left: 22px; }
.policy li + li { margin-top: 4px; }
.policy li .emphasis { color: var(--ink); font-weight: 600; }