/* Financial Planning & Succession. A private advisory house: deep navy and white, EB Garamond
   for headings and serif text (traditional and trusted, like a firm's letterhead) and Source Sans 3
   for body text. Every value below comes from the tokens in :root; see DESIGN.md before adding any. */

/* Self-hosted Google Fonts (SIL Open Font License 1.1, see assets/fonts/*-OFL.txt).
   Served from this site so pages do not wait on fonts.googleapis.com / fonts.gstatic.com.
   Generated from Google's CSS on 14 Nov 2026; latin and latin-ext only. */
/* EB Garamond is drawn small for its size (short lowercase letters), so it is scaled up 118%
   to read comfortably at the type scale's sizes; tall letters need --dlh 1.18, not less. */
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; size-adjust: 118%;
  src: url("/assets/fonts/eb-garamond-400-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; size-adjust: 118%;
  src: url("/assets/fonts/eb-garamond-400-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; size-adjust: 118%;
  src: url("/assets/fonts/eb-garamond-400-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; size-adjust: 118%;
  src: url("/assets/fonts/eb-garamond-400-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/source-sans-3-400-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/source-sans-3-400-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Metric-matched fallbacks: until the web fonts arrive, the browser shows a local font scaled to the
   same widths and line heights, so text does not jump when they swap in (no layout shift). Numbers
   measured from the font files over the site's own text: Times New Roman and Arial (Apple, Windows;
   Times is closest in shape to EB Garamond, size tuned by measuring line breaks on every page),
   Noto Serif and Roboto (Android). A face only applies on devices that have its local font. */
@font-face { font-family: "EB Garamond Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT");
  size-adjust: 110.79%; ascent-override: 107.25%; descent-override: 31.74%; line-gap-override: 0%; }
@font-face { font-family: "EB Garamond Fallback Android"; src: local("Noto Serif"), local("NotoSerif-Regular");
  size-adjust: 93.72%; ascent-override: 126.79%; descent-override: 37.52%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 Fallback"; src: local("Arial"), local("ArialMT");
  size-adjust: 92.85%; ascent-override: 110.29%; descent-override: 43.08%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 Fallback Android"; src: local("Roboto"), local("Roboto-Regular");
  size-adjust: 93.11%; ascent-override: 109.98%; descent-override: 42.96%; line-gap-override: 0%; }

:root {
  /* Colour */
  --navy: #0a2240;        /* brand: header, hero, bands */
  --navy-deep: #06172d;   /* footer */
  --blue: #1d4f8f;        /* the one accent: links and focus on white */
  --ice: #b9cbe3;         /* muted text on navy */
  --ice-2: #8fb0d8;       /* accent on navy */
  --mist: #f2f5f9;        /* pale band */
  --white: #ffffff;
  --ink: #0e1b2e;         /* text on white, strongest to quietest */
  --ink-2: #39465a;
  --muted: #5f6b7d;
  --line: #dde3ec;        /* dividers on white */
  --field-line: #6b778a;  /* form field edges: 4.5:1 on white */
  --on-navy-line: rgba(255, 255, 255, .16);        /* dividers on navy */
  --on-navy-line-strong: rgba(255, 255, 255, .55); /* outline controls on navy: 5.7:1 */
  --success: #14532d;
  --success-bg: #e8f5ee;
  --error: #8a1c1c;
  --error-bg: #fdecec;
  --focus: var(--blue);   /* switches to white on navy, below */
  --portrait-backdrop: radial-gradient(120% 90% at 50% 30%, #f4f6f9 0%, #dfe4eb 55%, #c6ced9 100%);
  --shadow-panel: 0 18px 32px rgba(4, 14, 30, .35);

  /* Type families */
  --serif: "EB Garamond", "EB Garamond Fallback", "EB Garamond Fallback Android", Georgia, serif;
  --sans: "Source Sans 3", "Source Sans 3 Fallback", "Source Sans 3 Fallback Android", "Segoe UI", system-ui, sans-serif;
  /* Heading type (also driven by the local type tester, build.py --play). */
  --display: var(--serif);
  --dw: 400;
  --dt: -0.015em;
  --dlh: 1.18;
  --dscale: 1;
  --dcase: none;
  --dstretch: 100%;
  --small: var(--serif);
  --sw: 400;

  /* Type scale: the only font sizes used. Fluid steps grow from a 390px to a 1440px screen. */
  --t-xs: 0.9375rem;   /* 15px  fine print */
  --t-sm: 1rem;        /* 16px  interface text, labels, captions, dates */
  --t-md: 1.0625rem;   /* 17px  buttons and form fields */
  --t-base: 1.125rem;  /* 18px  body text */
  --t-read: 1.1875rem; /* 19px  long reading text */
  --t-lg: clamp(1.25rem, 1.2036rem + 0.1905vw, 1.375rem);    /* 20-22px  intro lines, names */
  --t-xl: clamp(1.3125rem, 1.1964rem + 0.4762vw, 1.625rem);  /* 21-26px  list items, lead paragraphs */
  --t-2xl: clamp(1.5625rem, 1.4rem + 0.6667vw, 2rem);         /* 25-32px  article sub-headings, phone */
  --t-3xl: clamp(1.75rem, 1.4714rem + 1.1429vw, 2.5rem);      /* 28-40px  group headings */
  --t-4xl: clamp(2.25rem, 1.6929rem + 2.2857vw, 3.75rem);     /* 36-60px  section headings */
  --t-5xl: clamp(2.625rem, 1.4643rem + 4.7619vw, 5.75rem);    /* 42-92px  page titles, big quote */
  --t-6xl: clamp(2.5rem, 0.9679rem + 6.2857vw, 6.625rem);        /* 40-106px home headline */

  /* Line height: the only values used */
  --lh-tight: var(--dlh); /* display headings, 4xl and up */
  --lh-heading: 1.25;     /* headings 2xl-3xl, the wordmark */
  --lh-snug: 1.4;         /* list items, names, buttons */
  --lh-normal: 1.55;      /* short paragraphs and interface text */
  --lh-relaxed: 1.75;     /* reading text */

  /* Spacing scale: every padding, margin and gap uses one of these. */
  --s4: 4px;
  --s8: 8px;
  --s12: 12px;
  --s16: 16px;
  --s24: 24px;
  --s32: 32px;
  --s48: 48px;
  --s64: 64px;
  --s96: 96px;
  --s128: 128px;

  /* Shape and sizing */
  --radius: 0;            /* square everywhere */
  --radius-round: 50%;    /* author photos only */
  --border: 1px;
  --border-strong: 2px;
  --focus-ring: 3px;
  --underline-offset: 5px;
  --control-sm: 44px;     /* minimum touch target */
  --control: 52px;        /* buttons and form fields share this height */
  --control-lg: 56px;
  --icon: 22px;
  --avatar-sm: 48px;
  --avatar-lg: 72px;
  --measure: 38em;        /* reading width, about 70 characters */
  --measure-short: 30em;  /* intro lines and side notes */

  /* Motion and layering */
  /* Motion: two speeds and one curve for the whole site. Small changes (colour, hover, messages)
     use --dur; things that move or swap a whole view (phone menu, page to page) use --dur-slow. */
  --dur: .2s;
  --dur-slow: .3s;
  --ease: cubic-bezier(.22, .61, .36, 1); /* quick start, soft landing */
  --z-header: 50;
  --z-skip: 100;

  /* Layout. Breakpoints (CSS cannot use variables in media queries): 1180, 960, 760, 520px,
     plus two height steps for the home hero (short screens 820px, landscape phones 500px). */
  --wrap: clamp(1280px, 72vw, 1600px); /* content width grows on big monitors, up to 1600px */
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 128px);
  --header: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + var(--s12)); scroll-behavior: smooth; }
/* Page to page: a soft cross-fade instead of a blank flash (Chrome, Edge, Safari 18.2+; other
   browsers change pages as usual). Parts that are the same on both pages, like the header, stay
   still. The switch that turns it on (@view-transition) is inline in each page's <head> (build.py):
   in this file, Chrome reads it too late on a first visit and skips the fade. */
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-slow); animation-timing-function: var(--ease); }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 var(--t-base)/var(--lh-relaxed) var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
/* Every link and button changes colour at the same speed (hover, focus, current page). */
a, button, .row-title, .next-title, .contact-value {
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
h1, h2, h3 { margin: 0; line-height: var(--lh-heading); text-wrap: balance; color: var(--navy); font-synthesis: none; }
h1, h2, .t-lead { font-family: var(--display); font-weight: var(--dw); text-transform: var(--dcase); font-stretch: var(--dstretch); letter-spacing: var(--dt); }
h3, .row-title, .next-title, .prose h2, .prose h3 { font-family: var(--small); font-weight: var(--sw); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--navy); color: var(--white); }
:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-ring); }
/* Focus ring colour follows the background so it always has strong contrast. */
.site-header, .hero, .navy, .enquire, .cta-band, .site-footer, .page-head, .pull { --focus: var(--white); }
.form-card { --focus: var(--blue); }

.skip { position: absolute; left: -9999px; top: var(--s8); z-index: var(--z-skip); background: var(--white); color: var(--navy); padding: var(--s8) var(--s16); }
.skip:focus { left: var(--s8); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { width: 100%; max-width: calc(720px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-top: var(--section); padding-bottom: var(--section); }
.section-tight { padding-top: clamp(var(--s48), 6vw, var(--s96)); padding-bottom: clamp(var(--s64), 8vw, var(--s96)); }

.label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--muted); margin: 0 0 var(--s8); }
.muted { color: var(--muted); }

.arrow { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--dur) var(--ease); }
a:hover > .arrow, a:hover .arrow { transform: translateX(var(--s4)); }

/* Heading sizes */
.h-xl { font-size: var(--t-4xl); line-height: var(--lh-tight); }
.h-lg { font-size: var(--t-3xl); }

/* Buttons and links: square corners, like a printed letterhead */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s12);
  min-height: var(--control); padding: var(--s12) var(--s24);
  background: var(--navy); color: var(--white);
  border: var(--border-strong) solid var(--navy); border-radius: var(--radius);
  font: 600 var(--t-md)/var(--lh-snug) var(--sans); text-decoration: none; text-align: center; cursor: pointer;
}
.btn:hover { background: var(--blue); border-color: var(--blue); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-lg { min-height: var(--control-lg); padding: var(--s12) var(--s32); font-size: var(--t-base); }
.btn-sm { min-height: var(--control-sm); padding: var(--s8) var(--s24); font-size: var(--t-sm); }
.btn-white { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-white:hover { background: var(--ice); border-color: var(--ice); color: var(--navy); }
.btn-line { background: var(--navy); color: var(--white); border-color: var(--on-navy-line-strong); }
.btn-line:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.link { font-weight: 600; color: var(--blue); text-decoration: underline; text-decoration-thickness: var(--border); text-underline-offset: var(--underline-offset);
  /* Taller tap area (44px+) without moving anything: padding grows the target, negative margin gives the space back. */
  display: inline-block; padding-block: var(--s8); margin-block: calc(-1 * var(--s8)); }
.link:hover { color: var(--navy); text-decoration-thickness: var(--border-strong); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s16); }

/* Header: navy across the whole site */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--navy); color: var(--white); border-bottom: var(--border) solid var(--on-navy-line); }
.header-inner { position: relative; display: flex; align-items: center; gap: var(--s32); min-height: var(--header); }
.brand { display: flex; align-items: center; gap: var(--s16); text-decoration: none; margin-right: auto; min-width: 0; }
.brand-mark { width: 36px; height: 40px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: var(--lh-heading); min-width: 0; }
.brand-name { font: 400 var(--t-lg)/var(--lh-heading) var(--serif); color: var(--white); }
.brand-name i { font-family: var(--serif); font-style: italic; color: var(--ice-2); }
.brand-sub { font-size: var(--t-xs); color: var(--ice); margin-top: var(--s4); }
.site-nav { display: flex; align-items: center; gap: var(--s32); }
.site-nav > a { font-size: var(--t-sm); text-decoration: none; color: var(--ice); padding: var(--s8) 0; border-bottom: var(--border) solid transparent; }
.site-nav > a:hover { color: var(--white); }
.site-nav > a[aria-current="page"] { color: var(--white); border-bottom-color: var(--ice-2); }
.nav-extra, .menu-toggle { display: none; }

/* Hero (home): type-led. The headline sits on plain navy; the Sydney Harbour Bridge and Opera
   House, in black and white and toned into the navy, fade in on the right. Decorative (alt=""). */
.hero { background: var(--navy); color: var(--white); overflow: clip; }
.hero-top { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); }
.hero-media {
  position: absolute; z-index: -1; top: 0; right: 0; width: min(70%, 1200px); height: 100%;
  object-fit: cover; object-position: 62% 60%; mix-blend-mode: luminosity; opacity: .45; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 22%, #000 58%); mask-image: linear-gradient(to right, transparent 22%, #000 58%);
}
.hero-inner { padding-top: clamp(var(--s64), 10vw, var(--s128)); padding-bottom: clamp(var(--s64), 8vw, var(--s128)); }
.hero-title { font-size: calc(var(--t-6xl) * var(--dscale)); line-height: var(--lh-tight); color: var(--white); max-width: 17ch; }
.hero-actions { margin-top: clamp(var(--s32), 4vw, var(--s48)); }
/* These come after the base hero rules on purpose, so they override them. */
/* Every screen: the hero fills the first screen below the header, content centred, so the next
   section never peeks in. svh is the height with the phone browser's toolbars showing (vh is the
   fallback for older browsers); a taller header on small phones only pushes the hero's edge just
   below the screen. */
.hero-inner { display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - var(--header)); min-height: calc(100svh - var(--header)); }
/* Short laptop screens (e.g. 1366x768, 1280x720): one type step down so the buttons stay on screen. */
@media (min-width: 961px) and (max-height: 820px) {
  .hero-title { font-size: calc(var(--t-5xl) * var(--dscale)); }
  .hero-inner { padding-top: var(--s48); padding-bottom: var(--s48); }
}
/* Phones on their side: section-heading size, full width, tighter spacing. */
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  .hero-title { font-size: var(--t-4xl); max-width: none; }
  .hero-inner { padding-top: var(--s32); padding-bottom: var(--s32); }
  .hero-actions { margin-top: var(--s24); }
}

/* Peter's portrait: black and white on a soft studio-grey backdrop (the photo's white background
   is multiplied into the grey, so there are no cut-out edges). Shared by every portrait. */
.portrait { position: relative; isolation: isolate; background: var(--portrait-backdrop); }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; filter: grayscale(1) contrast(1.06); mix-blend-mode: multiply; }


/* Reading text: one column, a comfortable measure, full-strength ink */
.reading { max-width: var(--measure); }
.reading p { font-size: var(--t-read); line-height: var(--lh-relaxed); color: var(--ink); margin-bottom: 1.1em; }
.reading .lead { font: 400 var(--t-xl)/var(--lh-normal) var(--serif); color: var(--navy); margin-bottom: 1em; }
.prose-plain p { font-size: var(--t-read); color: var(--ink); max-width: var(--measure); }

/* Split layout: heading column + content */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s32) clamp(var(--s32), 6vw, var(--s96)); }
.split-label h2 { font-size: var(--t-4xl); line-height: var(--lh-tight); }
.split-label .muted { margin-top: var(--s24); max-width: var(--measure-short); font-size: var(--t-base); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s12) var(--s24); margin-bottom: var(--s32); flex-wrap: wrap; }

/* Navy band */
.navy { background: var(--navy); color: var(--white); }
.navy h2, .navy h3 { color: var(--white); }
.navy .muted { color: var(--ice); }
.navy .link { color: var(--white); }
.navy .link:hover { color: var(--ice); }

/* Questions: serif lines on navy */
.questions-head { font: 400 var(--t-xl)/var(--lh-normal) var(--serif); color: var(--white); max-width: var(--measure-short); margin-bottom: clamp(var(--s32), 4vw, var(--s48)); }
.qgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(var(--s32), 5vw, var(--s96)); border-top: var(--border) solid var(--on-navy-line); }
.qgrid li { padding: var(--s24) 0; border-bottom: var(--border) solid var(--on-navy-line); font: 400 var(--t-xl)/var(--lh-snug) var(--serif); color: var(--white); }

/* Services list */
.svc-list { list-style: none; margin: 0 0 var(--s32); padding: 0; border-top: var(--border) solid var(--navy); }
.svc-list li { padding: var(--s24) 0; border-bottom: var(--border) solid var(--line); font: 400 var(--t-xl)/var(--lh-snug) var(--serif); color: var(--navy); }

/* Pale band */
.mist { background: var(--mist); }

/* Testimonial: one big line, the rest beneath it */
.testimonial { margin: 0 auto; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s32) clamp(var(--s32), 6vw, var(--s96)); align-items: end; }
.testimonial blockquote { margin: 0; position: relative; }
.testimonial .t-lead { font-size: var(--t-5xl); line-height: var(--lh-tight); color: var(--navy); margin-bottom: var(--s32); text-wrap: balance; }
.testimonial blockquote p:not(.t-lead) { font: 400 var(--t-read)/var(--lh-relaxed) var(--serif); color: var(--ink-2); max-width: var(--measure); }
.testimonial figcaption { font-size: var(--t-sm); color: var(--muted); padding-top: var(--s16); border-top: var(--border) solid var(--navy); }
.testimonial figcaption strong { display: block; font: 400 var(--t-lg)/var(--lh-snug) var(--serif); color: var(--navy); }
.testimonial figcaption .link { display: block; width: fit-content; margin-top: var(--s8); } /* + the link's 8px padding = 16px gap */

/* About block on the home page */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s32) clamp(var(--s32), 6vw, var(--s96)); align-items: center; }
.about-photo { width: 100%; max-width: 440px; }
.about .h-xl { margin-bottom: var(--s32); }

/* Article rows */
.rows { border-top: var(--border) solid var(--navy); }
.row {
  display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: var(--s8) var(--s32); align-items: start;
  padding: var(--s24) 0; border-bottom: var(--border) solid var(--line); text-decoration: none;
}
.row-meta { font-size: var(--t-sm); line-height: var(--lh-normal); color: var(--muted); padding-top: var(--s4); }
.row-title { display: block; font-size: var(--t-xl); line-height: var(--lh-snug); margin-bottom: var(--s8); color: var(--navy); }
.row-summary { display: block; color: var(--muted); max-width: var(--measure); }
.row-go { color: var(--navy); }
.row-go .arrow { width: var(--icon); height: var(--icon); margin-top: var(--s4); }
.row:hover .row-title { color: var(--blue); text-decoration: underline; text-decoration-thickness: var(--border); text-underline-offset: var(--underline-offset); }
.group-title { font-size: var(--t-3xl); margin: 0 0 var(--s16); }
.rows + .group-title { margin-top: clamp(var(--s64), 7vw, var(--s96)); }

/* Enquiry section (white on navy, with a white form panel) */
.enquire { background: var(--navy); color: var(--white); padding: var(--section) 0; }
.enquire-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s48) clamp(var(--s32), 6vw, var(--s96)); align-items: start; }
.enquire h2 { color: var(--white); font-size: var(--t-4xl); line-height: var(--lh-tight); margin-bottom: var(--s24); }
.enquire-text > p { color: var(--ice); font-size: var(--t-read); max-width: var(--measure-short); }
.enquire-phone { display: inline-block; margin-top: var(--s24); font: 400 var(--t-2xl)/var(--lh-heading) var(--serif); color: var(--white); text-decoration: none; border-bottom: var(--border) solid var(--ice-2); padding: var(--s8) 0; }
.enquire-phone:hover { border-color: var(--white); }

/* Form */
.form-card { background: var(--white); color: var(--ink); padding: clamp(var(--s24), 3.4vw, var(--s48)); }
.form-card-line { border: var(--border) solid var(--line); border-top: var(--border-strong) solid var(--navy); }
.enquiry { display: grid; gap: var(--s16); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s16); }
.field { display: grid; gap: var(--s8); align-content: start; }
.field > span { font-size: var(--t-md); font-weight: 600; color: var(--ink); }
.field em { font-style: normal; font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--control); font: 400 var(--t-md)/var(--lh-normal) var(--sans); color: var(--ink);
  background: var(--white); border: var(--border) solid var(--field-line); border-radius: var(--radius);
  padding: var(--s12) var(--s16); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: var(--s48); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--navy); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: 1px; border-color: var(--navy); }
.field ::placeholder { color: var(--muted); opacity: 1; }
.hp { display: none; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s12) var(--s24); margin-top: var(--s4); }
.form-note { font-size: var(--t-sm); color: var(--muted); margin: 0; }
.form-note a { color: var(--navy); font-weight: 600; white-space: nowrap; }
.form-status { margin: 0; font-size: var(--t-md); }
.form-status:empty { display: none; }
.form-status.is-ok { background: var(--success-bg); color: var(--success); padding: var(--s16); }
.form-status.is-error { background: var(--error-bg); color: var(--error); padding: var(--s16); }
/* Messages appear with a short fade, so the change is noticed. */
.form-status.is-ok, .form-status.is-error, .field-error { animation: reveal var(--dur) var(--ease); }
/* A field that needs fixing: thicker red edge plus a written message (never colour alone). */
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--error); box-shadow: inset 0 0 0 var(--border) var(--error); }
.field > .field-error { font-size: var(--t-sm); font-weight: 600; color: var(--error); }
@keyframes reveal { from { opacity: 0; transform: translateY(calc(-1 * var(--s4))); } to { opacity: 1; transform: none; } }
/* Plain list of links (404 page) */
.link-list { list-style: none; margin: 0 0 var(--s24); padding: 0; }
.link-list li { padding: var(--s8) 0; font-size: var(--t-read); }

/* Call-to-action band at the end of inner pages */
.cta-band { background: var(--navy); color: var(--white); padding: clamp(var(--s64), 8vw, var(--s128)) 0; }
.cta-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s32); }
.cta-band h2 { color: var(--white); font-size: var(--t-4xl); line-height: var(--lh-tight); max-width: 17.5ch; }
.cta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s12) var(--s24); }
.cta-phone { color: var(--white); text-decoration: underline; text-decoration-color: var(--ice-2); text-underline-offset: var(--underline-offset); padding: var(--s12) 0; }
.cta-phone:hover { text-decoration-color: var(--white); }

/* Footer */
.site-footer { background: var(--navy-deep); color: var(--ice); padding: 0 0 var(--s32); font-size: var(--t-sm); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--s32); padding: var(--s64) 0; }
.footer-name { color: var(--white); font: 400 var(--t-lg)/var(--lh-snug) var(--serif); margin-bottom: var(--s12); }
.site-footer .muted { color: var(--ice); max-width: var(--measure-short); }
.site-footer .label { color: var(--ice-2); margin-bottom: var(--s12); }
.site-footer a { text-decoration: none; color: var(--white); }
.site-footer p a { display: inline-flex; align-items: center; min-height: var(--control-sm); } /* 44px tap targets */
.site-footer a:hover { text-decoration: underline; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s8) var(--s32); border-top: var(--border) solid var(--on-navy-line); padding-top: var(--s24); font-size: var(--t-xs); }
.footer-legal p { margin: 0; }

/* Inner page heads: navy, large serif */
.page-head { background: var(--navy); color: var(--white); padding: clamp(var(--s64), 8vw, var(--s128)) 0 clamp(var(--s48), 6vw, var(--s96)); overflow: clip; }
.page-head h1 { font-size: calc(var(--t-5xl) * var(--dscale)); line-height: var(--lh-tight); max-width: 20ch; color: var(--white); }
.page-head .lede { font-size: var(--t-lg); line-height: var(--lh-relaxed); color: var(--ice); max-width: var(--measure-short); margin-top: var(--s24); }
.page-head .lede strong { color: var(--white); font-weight: 600; }
.page-head-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s32) var(--s64); align-items: end; }
.page-head:has(.portrait-head) { padding-bottom: 0; }
.page-head-split > div:not(.portrait) { padding-bottom: clamp(var(--s48), 6vw, var(--s96)); }
.portrait-head { width: clamp(220px, 26vw, 360px); }

/* Services page */
.svc-cards { list-style: none; margin: 0; padding: 0; border-top: var(--border) solid var(--navy); max-width: 60em; }
.svc-cards li { padding: var(--s24) 0; border-bottom: var(--border) solid var(--line); font: 400 var(--t-xl)/var(--lh-snug) var(--serif); color: var(--navy); }
.issues { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s48); }
.issues li { break-inside: avoid; padding: var(--s16) 0; border-top: var(--border) solid var(--line); color: var(--ink); font: 400 var(--t-read)/var(--lh-normal) var(--serif); }
.pull { margin: var(--s48) 0 0; padding: var(--s32); background: var(--navy); color: var(--white); font: 400 var(--t-lg)/var(--lh-normal) var(--serif); }
.pull strong { color: var(--ice-2); font-weight: 400; font-family: var(--serif); font-style: italic; }

/* Testimonials page */
.attrib { border-top: var(--border) solid var(--navy); padding-top: var(--s16); color: var(--muted); }
.attrib strong { display: block; color: var(--navy); font: 400 var(--t-lg)/var(--lh-snug) var(--serif); }
.quote-full { margin: 0; }
.quote-full p { font-family: var(--serif); }
.quote-full p:first-child { font: 400 var(--t-xl)/var(--lh-normal) var(--serif); color: var(--navy); }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s32) clamp(var(--s32), 5vw, var(--s64)); align-items: start; }
.contact-side { border-top: var(--border) solid var(--navy); }
.contact-item { display: block; padding: var(--s24) 0; border-bottom: var(--border) solid var(--line); text-decoration: none; }
.contact-item .label { margin: 0 0 var(--s4); }
.contact-value { display: block; font: 400 var(--t-2xl)/var(--lh-heading) var(--serif); color: var(--navy); }
.contact-item:hover .contact-value { color: var(--blue); text-decoration: underline; text-decoration-thickness: var(--border); text-underline-offset: var(--underline-offset); }
.contact-person { display: flex; align-items: center; gap: var(--s16); padding-top: var(--s24); }
.contact-person img { width: var(--avatar-lg); height: var(--avatar-lg); border-radius: var(--radius-round); object-fit: cover; border: var(--border) solid var(--line); }
.contact-person p { margin: 0; font-size: var(--t-sm); color: var(--muted); line-height: var(--lh-normal); }
.contact-person strong { display: block; color: var(--ink); font-size: var(--t-md); }

/* Articles */
.article-head { padding-top: clamp(var(--s48), 7vw, var(--s96)); padding-bottom: var(--s32); }
.crumb { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s16); }
.crumb a { color: var(--blue); font-weight: 600; }
/* Inline links: vertical padding on an inline box widens the tap area to 44px+ without moving any text. */
.crumb a, .form-note a { padding-block: var(--s12); }
.article-head h1 { font-size: calc(var(--t-4xl) * var(--dscale)); line-height: var(--lh-tight); }
.byline { display: flex; align-items: center; gap: var(--s16); margin-top: var(--s32); padding-top: var(--s24); border-top: var(--border) solid var(--line); }
.byline img { width: var(--avatar-sm); height: var(--avatar-sm); border-radius: var(--radius-round); object-fit: cover; border: var(--border) solid var(--line); }
.byline p { margin: 0; display: flex; flex-direction: column; line-height: var(--lh-normal); font-size: var(--t-sm); }
.byline span { color: var(--muted); }
.prose { font: 400 var(--t-read)/var(--lh-relaxed) var(--serif); color: var(--ink-2); padding-bottom: var(--s32); }
.prose h2, .prose h3 { color: var(--navy); margin: 1.8em 0 .6em; line-height: var(--lh-heading); }
.prose h2 { font-size: var(--t-2xl); }
.prose h3 { font-size: var(--t-xl); }
.prose p { margin: 0 0 1.15em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--blue); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--blue); }
/* Buttons inside article text keep button colours (the link colour above would make them unreadable). */
.prose .btn { color: var(--white); text-decoration: none; }
.archive-note { background: var(--mist); border-left: var(--border-strong) solid var(--navy); padding: var(--s16); margin-bottom: var(--s32); font: 400 var(--t-md)/var(--lh-normal) var(--sans); color: var(--muted); }
.archive-note strong { color: var(--ink); }
/* Whitepaper pages */
.whitepaper-summary { font: 400 var(--t-xl)/var(--lh-normal) var(--serif); color: var(--navy); }
.download { margin: var(--s32) 0 var(--s48); }
.download-meta { font-weight: 400; }
.article-foot { padding-bottom: clamp(var(--s64), 8vw, var(--s96)); }
.next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4) var(--s16); padding: var(--s24) 0; border-top: var(--border) solid var(--navy); border-bottom: var(--border) solid var(--line); text-decoration: none; }
.next .label { margin: 0; }
.next-title { grid-column: 1; font-size: var(--t-xl); line-height: var(--lh-snug); color: var(--navy); }
.next .arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: var(--icon); height: var(--icon); color: var(--navy); }
.next:hover .next-title { color: var(--blue); }

/* ---------- Responsive (breakpoints: 1180, 960, 760, 520px) ---------- */
@media (max-width: 1180px) {
  .site-nav { gap: var(--s24); }
  .header-cta { display: none; }
}

/* Tablet and phone: Menu button with a full-width panel, single-column layouts.
   site.js closes the menu above this width (min-width: 961px); keep the two in step. */
@media (max-width: 960px) {
  :root { --header: 68px; }
  .header-inner { gap: var(--s12); }
  .brand-mark { width: 30px; height: 33px; }

  /* With JavaScript: the menu opens from a button. */
  .js .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    min-height: var(--control-sm); min-width: 76px; padding: var(--s8) var(--s16);
    background: transparent; color: var(--white); border: var(--border) solid var(--on-navy-line-strong); border-radius: var(--radius);
    font: 600 var(--t-md)/var(--lh-snug) var(--sans); cursor: pointer;
  }
  .js .menu-toggle:hover, .js .is-open .menu-toggle { border-color: var(--white); }
  /* The panel is always laid out but hidden; it slides down and fades in, and back out when closed.
     visibility switches at the end of closing, so hidden links can't be tabbed to or read out. */
  .js .site-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--border);
    max-height: calc(100svh - var(--header)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--navy); border-bottom: var(--border) solid var(--on-navy-line);
    box-shadow: var(--shadow-panel);
    padding: var(--s4) var(--gutter) var(--s24);
    visibility: hidden; opacity: 0; transform: translateY(calc(-1 * var(--s12)));
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
  }
  .js .is-open .site-nav {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), visibility 0s;
  }
  .js .site-nav > a { font: 400 var(--t-lg)/var(--lh-snug) var(--serif); color: var(--white); padding: var(--s16) 0; border-bottom: var(--border) solid var(--on-navy-line); }
  .js .site-nav > a[aria-current="page"] { color: var(--ice-2); border-bottom-color: var(--on-navy-line); }
  .js .nav-extra { display: flex; flex-direction: column; gap: var(--s8); margin-top: var(--s24); }
  .nav-call { text-align: center; color: var(--white); font-weight: 600; padding: var(--s12) 0; }

  /* Without JavaScript: the menu is simply shown, wrapping under the name. */
  html:not(.js) .site-header { position: static; }
  html:not(.js) .header-inner { flex-wrap: wrap; height: auto; padding-top: var(--s12); padding-bottom: var(--s8); }
  html:not(.js) .site-nav { order: 3; width: 100%; flex-wrap: wrap; gap: 0 var(--s24); }
  html:not(.js) .site-nav > a { padding: var(--s12) 0; }

  .hero-media { width: 100%; opacity: .3; object-position: 62% 100%; -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000); mask-image: linear-gradient(to bottom, transparent 30%, #000); }

  .split, .testimonial, .enquire-inner, .contact-grid, .about { grid-template-columns: minmax(0, 1fr); }
  .about-photo { max-width: 360px; }
}

@media (max-width: 760px) {
  body { font-size: var(--t-md); }
  .hero-title { max-width: none; } /* the 17ch shape is for wide screens; phones use the full width */
  .qgrid, .issues { grid-template-columns: minmax(0, 1fr); columns: 1; }
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row-meta { grid-column: 1 / -1; padding-top: 0; }
  .row-main { grid-column: 1; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--s48) 0; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .page-head-split { grid-template-columns: minmax(0, 1fr); }
  .page-head-split > div:not(.portrait) { padding-bottom: 0; }
  .portrait-head { justify-self: center; width: min(320px, 80vw); }
  .cta-inner { align-items: start; }
}

@media (max-width: 520px) {
  /* Phone header: the name on two even lines ("Financial Planning" / "& Succession") with room
     above and below; the "Peter Fysh, Principal" line is left to the page itself. */
  :root { --header: 76px; }
  .header-inner { padding-top: var(--s12); padding-bottom: var(--s12); }
  .brand { gap: var(--s12); }
  .brand-line { display: block; }
  .brand-sub { display: none; }
  /* Stacked buttons share one width instead of looking ragged. */
  .actions .btn, .cta-actions .btn, .form-foot .btn { flex: 1 1 auto; }
  .cta-actions { width: 100%; }
  .pull { padding: var(--s24); }
}

/* The smallest phones (320px): no room for the shield beside the name and the Menu button. */
@media (max-width: 359px) {
  .brand-mark { display: none; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }