/* Valkyrie Consulting preview: Prospectus v2 (refreshed).
   Same brand system as v1: Newsreader + IBM Plex Sans, deck navy #003366, wordmark blue #0A63AD.
   v2 changes: tighter rhythm, pale-blue sections, a services grid, larger matched portraits,
   the logo mark as a quiet motif on navy bands, one 14px media radius, clickable partners.
   Every element is authored at rest; motion only runs under html.motion (see site.js). */

@font-face { font-family: Newsreader; src: url('fonts/newsreader-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Newsreader; src: url('fonts/newsreader-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Newsreader; src: url('fonts/newsreader-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --navy: #003366;
  --navy-deep: #00264d;
  --paper: #ffffff;
  --wash: #eaf2f9;
  --wash-line: #d5e3ef;
  --blue: #0a63ad;
  --sky: #69a5d9;
  --ink: #101e33;
  --muted: #47566b;
  --deck: #d6e4f0;
  --footer-text: #c9d8e6;
  --rule: #d3dbe3;
  --rule-plate: rgba(255, 255, 255, 0.18);
  --field: #7a8da3;
  --error: #9c3028;

  --serif: Newsreader, Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --display-weight: 400;

  --radius: 8px;
  --radius-lg: 14px;
  --shadow-soft: 0 1px 2px rgba(16, 30, 51, 0.05), 0 18px 40px -24px rgba(16, 30, 51, 0.3);
  --shadow-lift: 0 2px 4px rgba(16, 30, 51, 0.06), 0 26px 48px -26px rgba(16, 30, 51, 0.38);
  --shadow-figure: 0 28px 56px -30px rgba(0, 25, 50, 0.55);

  --gap: 32px;
  --section: 80px;
  --header: 84px;
  --cross: 96px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  font-synthesis: none;
  scroll-padding-top: calc(var(--header) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 20rem;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
::selection { background: var(--deck); color: var(--navy); }
h1, h2, h3, p, figure, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
p, li, dd { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; text-wrap: balance; }
strong, b { font-weight: 500; }
button, input, textarea { font: inherit; color: inherit; }
address { font-style: normal; font-variant-numeric: tabular-nums; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.plate :focus-visible,
.site-footer :focus-visible { outline-color: #ffffff; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.shell { width: min(1200px, 100% - 2 * clamp(16px, 5vw, 64px)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* Skip link */

.skip {
  position: absolute;
  z-index: 40;
  top: 12px;
  left: 12px;
  padding: 12px 20px;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--blue);
  font: 500 0.9375rem/1.4 var(--sans);
  text-decoration: none;
  transform: translateY(-180%);
}
.skip:focus { transform: none; }

/* Header */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  border-top: 4px solid var(--navy);
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(12px);
}
.masthead-row { height: calc(var(--header) - 5px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: block; flex-shrink: 0; width: 196px; }
.brand img { width: 100%; }

.nav { display: flex; align-items: center; gap: 36px; }
.nav a,
.menu summary { color: var(--ink); font: 500 0.9375rem/1.4 var(--sans); letter-spacing: 0.01em; }
.nav a { padding: 12px 0; text-decoration: none; transition: color 150ms ease-out; }
.nav a:hover { color: var(--blue); }
.nav a[aria-current] { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 10px; }

.menu { display: none; }
.menu summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 2px; list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: '+'; font-size: 1.25rem; line-height: 1; }
.menu[open] summary::after { content: '\2212'; }
.menu nav {
  position: absolute;
  z-index: 22;
  top: 100%;
  left: 0;
  right: 0;
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--rule);
  background: #ffffff;
  box-shadow: 0 24px 32px -28px rgba(16, 30, 51, 0.4);
}
.menu nav a { display: block; min-height: 48px; padding: 12px clamp(16px, 5vw, 64px); color: var(--ink); font: 500 1rem/1.5 var(--sans); text-decoration: none; }
.menu nav a:hover { background: var(--wash); }
.menu nav a[aria-current] { background: var(--wash); color: var(--blue); }
.menu nav a:focus-visible { outline-offset: -3px; }

/* Buttons and links */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--blue);
  color: #ffffff;
  font: 500 0.9375rem/1.4 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
}
.button:hover { background: var(--navy); }
.button-on-plate { background: #ffffff; color: var(--navy); }
.button-on-plate:hover { background: var(--wash); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  color: var(--blue);
  font: 500 0.9375rem/1.5 var(--sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.text-link:hover { text-decoration-thickness: 2px; }
.text-link-on-plate { color: #ffffff; text-decoration-color: rgba(255, 255, 255, 0.55); }
.text-link-on-plate:hover { text-decoration-color: #ffffff; }

.arrow { flex-shrink: 0; width: 16px; height: 16px; transition: transform 180ms var(--ease); }
a:hover > .arrow { transform: translateX(3px); }

/* Navy plates and the logo-mark motif */

.plate { position: relative; isolation: isolate; background: var(--navy); color: #ffffff; }
.plate a:not(.button) { color: #ffffff; }
.motif { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.motif img {
  position: absolute;
  top: 50%;
  right: -6%;
  width: min(620px, 62vw);
  max-width: none;
  opacity: 0.07;
  filter: brightness(0) invert(1);
  transform: translateY(-50%);
}

.title-plate { padding: 64px 0 68px; }
.title-plate h1,
.hero h1 { font-weight: var(--display-weight); }
.title-plate h1 { max-width: 20ch; color: #ffffff; font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.1; letter-spacing: -0.01em; }
.deck { max-width: 48ch; margin-top: 16px; color: var(--deck); font-family: var(--serif); font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.375rem); font-style: italic; font-weight: 400; line-height: 1.45; }
.title-plate.has-figure { padding: 72px 0 0; }
.title-plate.has-figure .motif img { top: 38%; }
.title-plate.has-figure .grid { align-items: end; }
.title-copy { grid-column: 1 / 7; padding-bottom: 104px; }
.title-figure { grid-column: 8 / 13; margin-bottom: calc(-1 * var(--cross)); position: relative; z-index: 2; }
.title-plate.has-figure + .services-body { padding-top: calc(var(--cross) + 40px); }
.title-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 55% 50%; border-radius: var(--radius-lg); box-shadow: var(--shadow-figure); }
.cover-rule { display: block; width: 96px; height: 1px; margin-top: 28px; background: var(--sky); }

/* Home heroes (three layout options share everything below the hero) */

.hero h1 { font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.1; letter-spacing: -0.01em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }

/* A: split cover. Text on navy, the coastal image crossing the navy edge. */
.hero-a { padding-top: 72px; }
.hero-a .grid { align-items: end; }
.hero-a .hero-copy { grid-column: 1 / 7; padding-bottom: 80px; }
.hero-a h1 { color: #ffffff; max-width: 12em; }
.hero-a .hero-figure { grid-column: 7 / 13; margin-bottom: calc(-1 * var(--cross)); }
.hero-figure img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-figure); }
.hero-a + .section { padding-top: calc(var(--cross) + 48px); }

/* Portrait frames: one crop (4:5), one radius, clickable */

.frame { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: var(--wash); }
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; transition: transform 500ms var(--ease); }
a.frame:hover img { transform: scale(1.035); }
.role { color: var(--muted); font: 500 0.9375rem/1.5 var(--sans); }

/* Sections */

.section { padding: var(--section) 0; }
.section-wash { background: var(--wash); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; margin-bottom: 36px; }
.section-head p { max-width: 52ch; color: var(--muted); }
h2 { color: var(--ink); font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); line-height: 1.12; letter-spacing: -0.008em; }
h3 { color: var(--ink); font-size: 1.375rem; line-height: 1.25; }
.h2-sm { font-size: 1.75rem; line-height: 1.2; letter-spacing: 0; }
.lead { color: var(--ink); font-family: var(--serif); font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.5rem); font-weight: 400; line-height: 1.45; }
.muted { color: var(--muted); }
.prose { max-width: 66ch; }
.prose > p + p { margin-top: 20px; }

/* Home: introduction */

.intro-copy { grid-column: 1 / 8; }
.intro-copy .intro-text { max-width: 62ch; margin-top: 16px; }
.intro-copy .muted { max-width: 64ch; margin-top: 18px; }
.intro-copy .text-link { margin-top: 10px; }
.intro-facts { grid-column: 9 / 13; align-self: center; }

.facts { display: grid; grid-template-columns: minmax(96px, auto) 1fr; column-gap: 24px; font-variant-numeric: tabular-nums; }
.facts dt,
.facts dd { padding: 12px 0; border-top: 1px solid var(--rule); }
.facts dt:last-of-type,
.facts dd:last-of-type { border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--muted); font: 500 0.875rem/1.55 var(--sans); }
.facts dd { color: var(--ink); font: 400 1rem/1.55 var(--sans); }


/* Home: services grid */

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--wash-line);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  scroll-margin-top: calc(var(--header) + 20px);
}
.tile h2 { font-size: 1.375rem; line-height: 1.25; letter-spacing: 0; }
.tile p { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
.tile:target { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10, 99, 173, 0.2), var(--shadow-soft); }
.tile-featured { grid-column: span 2; overflow: hidden; isolation: isolate; border-color: var(--navy); background: var(--navy); color: #ffffff; }
.tile-featured h2 { color: #ffffff; font-size: 1.625rem; }
.tile-featured p { max-width: 46ch; color: var(--deck); font-size: 1rem; }
.tile-featured:target { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(105, 165, 217, 0.45), var(--shadow-soft); }
.tile-featured .motif img { right: -10%; width: 380px; opacity: 0.08; }
.tile-list { display: grid; gap: 6px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--ink); font-size: 0.9375rem; line-height: 1.45; }
.tile-list li { display: flex; gap: 10px; }
.tile-list li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; margin-top: 0.5em; border-radius: 50%; background: var(--sky); }
.tile-featured .tile-list { grid-template-columns: 1fr 1fr; column-gap: 24px; max-width: 620px; border-top-color: rgba(255, 255, 255, 0.2); color: #ffffff; }

/* Home: What we do */

.what-copy { grid-column: 1 / 6; align-self: center; }
.what-copy .intro-text { max-width: 52ch; margin-top: 16px; }
.what-copy .muted { max-width: 44ch; margin-top: 14px; }
.what-copy .button { margin-top: 28px; }
.what-list { grid-column: 7 / 13; }
.what-list ul { padding: 8px 28px; border: 1px solid var(--wash-line); border-radius: var(--radius-lg); background: #ffffff; box-shadow: var(--shadow-soft); }
.what-list li + li { border-top: 1px solid var(--rule); }
.what-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  color: var(--ink);
  font: 500 1.0625rem/1.4 var(--sans);
  text-decoration: none;
  transition: color 150ms ease-out;
}
.what-list a .arrow { color: var(--blue); }
.what-list a:hover { color: var(--blue); }
.what-list a:focus-visible { outline-offset: -2px; }

/* Partner cards (Home) */

.partner-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.partner-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: #ffffff;
}
.partner-card > .frame { aspect-ratio: auto; height: 100%; min-height: 250px; }
.partner-card h3 { font-size: 1.5rem; }
.partner-card h3 a { color: var(--ink); text-decoration: none; }
.partner-card h3 a:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.partner-card .role { margin-top: 2px; }
.partner-card-copy { display: flex; flex-direction: column; align-items: flex-start; }
.partner-card-copy .expertise-label,
.partner-card-copy .expertise { align-self: stretch; }
.partner-card .text-link { margin-top: 10px; }
.partner-card .connect { margin-top: auto; }

/* Partner expertise: a ruled list under a small capitals label, like the firm facts table */

.expertise-label {
  margin-top: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--navy);
  color: var(--navy);
  font: 500 0.75rem/1.4 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.expertise li { padding: 8px 0; border-bottom: 1px solid var(--rule); color: var(--ink); font: 400 0.9375rem/1.45 var(--sans); }

/* LinkedIn link under each partner */

.connect {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  font: 500 0.9375rem/1.4 var(--sans);
  text-decoration: none;
}
.connect:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.linkedin-icon { flex-shrink: 0; width: 24px; height: 24px; }

/* People */

.person { align-items: start; }
.person + .person { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--wash-line); }
.person .frame { grid-column: 1 / 4; }
.person-copy { grid-column: 4 / 12; }
.person-copy h3 { font-size: 1.75rem; line-height: 1.2; }
.person-copy h3 a { color: var(--ink); text-decoration: none; }
.person-copy h3 a:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.person-copy .role { margin-top: 4px; }
.person-copy .bio { max-width: 66ch; margin-top: 18px; }
.person-copy .expertise-label,
.person-copy .expertise { max-width: 640px; }
.person-copy .expertise-label { margin-top: 24px; }
.person-copy .expertise,
.profile-article .expertise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.person-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 32px; margin-top: 12px; }

/* Profiles */

.profile-plate { padding-bottom: calc(68px + 150px); }
.profile { padding-bottom: var(--section); }
.profile-aside { grid-column: 1 / 4; }
.profile-aside .frame { position: relative; z-index: 2; margin-top: -170px; border: 6px solid #ffffff; box-shadow: var(--shadow-figure); }
.profile-aside .connect { margin-top: 18px; }
.profile-aside .text-link { display: flex; width: fit-content; margin-top: 4px; }
.profile-article { grid-column: 5 / 13; padding-top: 44px; }
.profile-article .lead { max-width: 60ch; margin-top: 18px; }
.profile-article .lead + p { max-width: 66ch; margin-top: 22px; }
.profile-article .rows-heading { margin-top: 44px; }
.profile-article .expertise { max-width: 640px; margin-top: 16px; border-top: 1px solid var(--navy); }

.next-partner {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 20px;
  max-width: 560px;
  margin-top: 48px;
  padding: 16px 20px 16px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.next-partner img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; object-position: 50% 22%; }
.next-partner small { display: block; color: var(--muted); font: 400 0.8125rem/1.4 var(--sans); }
.next-partner strong { display: block; font: 500 1.25rem/1.3 var(--serif); }
.next-partner .arrow { color: var(--blue); }
.next-partner:hover { border-color: var(--sky); box-shadow: var(--shadow-soft); }
.next-partner:hover strong { color: var(--blue); }

/* About */

.about-plate { padding-bottom: calc(68px + 140px); }
.who { padding-bottom: var(--section); }
.who-copy { grid-column: 1 / 6; grid-row: 1; padding-top: 48px; }
.who-copy .prose { margin-top: 18px; }
.who-copy .prose p:last-child { color: var(--muted); }
.who-figure { grid-column: 7 / 13; grid-row: 1; position: relative; z-index: 2; margin-top: -150px; }
.who-figure img { width: 100%; border: 6px solid #ffffff; border-radius: var(--radius-lg); box-shadow: var(--shadow-figure); }

.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pillars article { padding: 28px 24px; border: 1px solid var(--wash-line); border-radius: var(--radius-lg); background: #ffffff; }
.pillars h3 { font-size: 1.375rem; }
.pillars h3::before { content: ''; display: block; width: 32px; height: 2px; margin-bottom: 18px; background: var(--blue); }
.pillars p { margin-top: 10px; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }

.firm-grid { align-items: start; }
.firm-grid .section-head { grid-column: 1 / 5; display: block; margin: 0; }
.firm-grid .facts { grid-column: 6 / 13; }
.firm-grid .facts dd { font-size: 1.0625rem; }

/* Services page */

.services-body { padding: 56px 0 var(--section); background: var(--wash); }
.services-partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 40px; }
.services-partners > p { color: var(--ink); font: 400 1.375rem/1.35 var(--serif); font-style: italic; }
.partner-chips { display: flex; flex-wrap: wrap; gap: 16px; }
.partner-chip {
  display: grid;
  grid-template-columns: 64px auto;
  column-gap: 16px;
  align-items: center;
  padding: 10px 24px 10px 10px;
  border: 1px solid var(--wash-line);
  border-radius: var(--radius-lg);
  background: #ffffff;
}
.partner-chip .frame { aspect-ratio: 1; border-radius: 10px; }
.partner-chip .name { color: var(--ink); font: 500 1rem/1.4 var(--sans); text-decoration: none; }
.partner-chip .name:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.partner-chip .role { font-size: 0.8125rem; }

/* Contact */

.contact-body { padding: 64px 0 var(--section); background: var(--wash); }
.contact-body .grid { align-items: start; }
.office { grid-column: 1 / 5; }
.office address { margin-top: 18px; color: var(--ink); }
.office address strong,
.office address span { display: block; }
.office address strong { margin-bottom: 4px; }
.office .serving { max-width: 34ch; margin-top: 18px; }
.office .figure { margin-top: 28px; }
.office .figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 60%; border-radius: var(--radius-lg); }
.inquiry { grid-column: 6 / 13; min-width: 0; padding: 36px 40px 40px; border: 1px solid var(--wash-line); border-radius: var(--radius-lg); background: #ffffff; box-shadow: var(--shadow-soft); }

.inquiry fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.inquiry legend { margin-bottom: 22px; padding: 0; color: var(--ink); font: 500 1.625rem/1.25 var(--serif); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 18px; }
.inquiry label { display: block; color: var(--ink); font: 500 0.9375rem/1.4 var(--sans); }
.optional { margin-left: 6px; color: var(--muted); font: 400 0.8125rem/1 var(--sans); }
.inquiry input,
.inquiry textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--field);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
}
.inquiry textarea { min-height: 150px; resize: vertical; }
.inquiry input:focus-visible,
.inquiry textarea:focus-visible { outline-offset: 2px; }
.inquiry [aria-invalid='true'] { border-color: var(--error); }
.inquiry fieldset:disabled { opacity: 0.7; }
.hint,
.field-error { display: block; margin-top: 6px; font: 400 0.8125rem/1.5 var(--sans); }
.hint { color: var(--muted); }
.field-error { color: var(--error); }
.field-error:empty { display: none; }
.form-note { margin-bottom: 14px; color: var(--muted); font: 400 0.9375rem/1.55 var(--sans); }

.form-status { margin-top: 24px; padding: 24px; border-radius: var(--radius-lg); background: var(--wash); overflow-wrap: anywhere; }
.form-status h3 { margin-bottom: 8px; font-size: 1.375rem; }
.form-status p { color: var(--muted); font: 400 0.9375rem/1.55 var(--sans); }
.form-status dl { margin: 0; }
.form-status dt { margin-top: 14px; color: var(--muted); font: 500 0.8125rem/1.5 var(--sans); }
.form-status dd { margin: 4px 0 0; color: var(--ink); white-space: pre-wrap; }

/* Footer: one centered navy block with the call to action and basic firm details */

.site-footer { position: relative; isolation: isolate; overflow: hidden; padding: 72px 0 32px; background: var(--navy); color: #ffffff; text-align: center; }
.footer-center { display: grid; justify-items: center; }
.footer-cta h2 { color: #ffffff; font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); }
.footer-cta p { max-width: 48ch; margin: 12px auto 0; color: var(--deck); }
.footer-cta .button { margin-top: 28px; }
.footer-info { display: grid; justify-items: center; width: 100%; }
.footer-cta + .footer-info { margin-top: 48px; }
.footer-info img { width: 34px; margin-bottom: 10px; }
.footer-name { color: #ffffff; font: 500 1.0625rem/1.3 var(--serif); }
.footer-info p:not(.footer-name) { margin-top: 4px; color: var(--footer-text); font-size: 0.8125rem; line-height: 1.5; }
.footer-info .legal { margin-top: 14px; font: 400 0.75rem/1.5 var(--sans); font-variant-numeric: tabular-nums; }

/* Wide: pillars need room for four columns */

@media (max-width: 1199px) {
  .pillars { grid-template-columns: 1fr 1fr; }
  .partner-card { grid-template-columns: 160px 1fr; gap: 22px; }
}

/* M: 768 to 1023 */

@media (max-width: 1023px) {
  :root { --gap: 24px; --section: 60px; --cross: 64px; }

  .title-copy { grid-column: 1 / -1; padding-bottom: 32px; }
  .title-figure { grid-column: 1 / -1; max-width: 560px; }
  .hero-a .hero-copy { grid-column: 1 / -1; padding-bottom: 40px; }
  .hero-a .hero-figure { grid-column: 1 / -1; }

  .intro-copy { grid-column: 1 / -1; }
  .intro-facts { grid-column: 1 / -1; margin-top: 32px; }

  .tiles { grid-template-columns: 1fr 1fr; }
  .what-copy { grid-column: 1 / -1; }
  .what-list { grid-column: 1 / -1; margin-top: 32px; }
  .partner-cards { grid-template-columns: 1fr; }
  .partner-card { grid-template-columns: 180px 1fr; }

  .person .frame { grid-column: 1 / 5; }
  .person-copy { grid-column: 5 / 13; }

  .profile-aside { grid-column: 1 / 5; }
  .profile-article { grid-column: 5 / 13; }

  .about-plate { padding-bottom: calc(68px + 96px); }
  .who-copy { grid-column: 1 / 7; }
  .who-figure { grid-column: 7 / 13; margin-top: -110px; }
  .firm-grid .section-head { grid-column: 1 / -1; margin-bottom: 24px; }
  .firm-grid .facts { grid-column: 1 / -1; }


  .office { grid-column: 1 / 6; }
  .inquiry { grid-column: 6 / 13; padding: 28px; }

}

/* S: up to 767 */

@media (max-width: 767px) {
  :root { --section: 48px; --header: 72px; --cross: 48px; }
  body .grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  body .grid > * { grid-column: 1 / -1; }

  .brand { width: 164px; }
  .nav { display: none; }
  .menu { display: block; }

  .title-plate { padding: 48px 0 52px; }
  .hero h1 br { display: none; }
  .hero-actions { gap: 12px 24px; }
  .hero-a { padding-top: 48px; }

  .motif img { width: 420px; right: -30%; }

  .section-head { margin-bottom: 28px; }
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tile { padding: 24px; }
  .tile-featured { grid-column: auto; }
  .tile-list, .tile-featured .tile-list { grid-template-columns: minmax(0, 1fr); }
  .what-list ul { padding: 4px 20px; }
  .services-partners > p { font-size: 1.25rem; }
  .partner-card { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .partner-card > .frame { max-width: 240px; aspect-ratio: 4 / 5; height: auto; min-height: 0; }


  .person .frame { max-width: 280px; margin-bottom: 20px; }
  .person-copy .expertise,
  .profile-article .expertise { grid-template-columns: minmax(0, 1fr); }

  .profile-plate { padding-bottom: calc(52px + 96px); }
  .profile-aside .frame { max-width: 240px; margin-top: -120px; }
  .profile-article { padding-top: 28px; }
  .next-partner { grid-template-columns: 56px 1fr auto; gap: 14px; }
  .next-partner img { width: 56px; height: 56px; }

  .about-plate { padding-bottom: calc(52px + 56px); }
  .who-figure { grid-row: 1; margin-top: -64px; }
  .who-copy { grid-row: 2; padding-top: 28px; }
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { padding-bottom: 0; }
  .facts dd { padding-top: 4px; border-top: 0; }
  .facts dt:last-of-type { border-bottom: 0; }

  .services-body { padding-top: 40px; }

  .contact-body { padding-top: 48px; }
  .office .figure { max-width: 420px; }
  .inquiry { margin-top: 36px; padding: 24px 20px; }
  .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }

}

/* Motion: only when the visitor has not asked for less of it */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }

.motion .hero-copy > *,
.motion .title-plate .shell > * { animation: rise 560ms var(--ease) both; }
.motion .hero-copy > :nth-child(2),
.motion .title-plate .shell > :nth-child(2) { animation-delay: 80ms; }
.motion .hero-copy > :nth-child(3) { animation-delay: 160ms; }
.motion .hero-copy > :nth-child(4),
.motion .title-plate .shell > :nth-child(3) { animation-delay: 240ms; }
.motion .hero-figure img { animation: settle 900ms var(--ease) 120ms both; }

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

@media (forced-colors: active) {
  .frame, .hero-figure img, .who-figure img, .tile, .partner-card, .pillars article { border: 1px solid CanvasText; }
  .cover-rule, .tile-list li::before { background: CanvasText; }
  .motif { display: none; }
}

@media print {
  .masthead, .menu, .skip, .inquiry, .hero-actions, .site-footer, .motif { display: none; }
  .masthead { position: static; }
  .plate, .section-wash, .services-body, .contact-body { background: #ffffff; color: var(--ink); }
  .plate h1, .plate h2, .hero h1, .tile-featured h2, .tile-list { color: var(--ink); }
  .deck, .tile-featured p { color: var(--muted); }
  .tile-featured { background: #ffffff; border-color: var(--rule); }
  .profile-aside .frame, .who-figure { margin-top: 0; }
  .hero-a .hero-figure { margin-bottom: 0; }
  .profile-plate, .about-plate { padding-bottom: 24px; }
  .shell { width: 100%; }
}

/* Optional office photo slots (filled when assets/office.* or assets/rooftop-harbor.* exist) */

.office-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.intro-facts .office-figure { margin-bottom: 20px; }
.firm-office { max-width: 340px; margin-top: 24px; }
.office-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }
@media (max-width: 1023px) {
  .firm-office { max-width: 420px; }
}

/* Temporary picture options page (hero-options.html, hero-options.js): the home page with a picture
   slider in the hero. Only the picture moves. Remove with that page. */

/* Like the photo hero: the picture drops into the white section below, and the faint mark shows
   in the navy band (hidden only while the animated logo is showing, so the logo never appears twice). */
body.options-page .hero-a > .motif { display: block; transition: opacity 300ms; }
body.options-page .hero-a.shows-logo > .motif { opacity: 0; }
body.options-page .hero-a + .section { padding-top: calc(var(--cross) + 48px); }
.hero-a .pic-figure { align-self: end; margin-bottom: calc(-1 * var(--cross)); padding: 0; position: relative; z-index: 2; }

.pic-frame {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-figure);
  transition: box-shadow 300ms;
}
.pic-track {
  display: flex; height: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pic-track::-webkit-scrollbar { display: none; }
.pic-track:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; }
.pic-slide { position: relative; flex: 0 0 100%; height: 100%; display: grid; place-items: center; scroll-snap-align: start; scroll-snap-stop: always; }
.hero-figure .pic-slide > img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; animation: none; }


/* Your own picture */
.upload-figure { position: relative; width: 100%; height: 100%; background: var(--navy-deep); }
.upload-pick {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 24px 72px 72px; text-align: center;
  border: 2px dashed rgba(255, 255, 255, 0.45); border-radius: var(--radius-lg); color: #ffffff; cursor: pointer;
  transition: background-color 160ms, border-color 160ms;
}
.upload-pick:hover, .upload-figure.is-over .upload-pick { background: rgba(255, 255, 255, 0.07); border-color: #ffffff; }
.upload-pick:focus-within { outline: 2px solid #ffffff; outline-offset: -6px; }
.upload-title { font-weight: 500; font-size: 1.125rem; }
.upload-hint { max-width: 30ch; color: var(--deck); font-size: 0.9375rem; }
.hero-figure .upload-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; animation: none; }
.upload-figure.has-picture .upload-pick {
  inset: 12px 12px auto auto; padding: 8px 16px; border: 0; border-radius: 999px;
  background: rgba(0, 38, 77, 0.82); font-size: 0.9375rem;
}
.upload-figure.has-picture .upload-title { font-size: 0.9375rem; }
.upload-figure.has-picture .upload-hint { display: none; }

/* Arrows at the sides of the picture; dots along its bottom edge. The option name is for screen readers only. */
.pic-figure:not(.is-ready) .options-arrow,
.pic-figure:not(.is-ready) .pic-caption { display: none; }
.options-arrow {
  position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  translate: 0 -50%; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px;
  background: rgba(0, 38, 77, 0.6); color: #ffffff; cursor: pointer;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background-color 160ms, opacity 160ms;
}
.arrow-prev { left: 12px; }
.arrow-next { right: 12px; }
.options-arrow:hover:not(:disabled) { background: rgba(0, 38, 77, 0.88); }
.options-arrow:disabled { opacity: 0; pointer-events: none; }
.options-arrow .arrow { width: 18px; height: 18px; }
.arrow-back { transform: scaleX(-1); }
.pic-caption {
  position: absolute; left: 50%; bottom: 12px; z-index: 3; display: grid; justify-items: center; gap: 2px;
  max-width: calc(100% - 24px); translate: -50% 0;
}
.options-dots { display: flex; }
.options-dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.options-dot::before {
  content: ""; position: absolute; inset: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 38, 77, 0.35), 0 1px 4px rgba(0, 20, 40, 0.5);
  transition: background-color 200ms, transform 200ms var(--ease);
}
.options-dot[aria-current="true"]::before { background: #ffffff; transform: scale(1.3); }

@media (max-width: 767px) {
  .hero-a .pic-figure { margin-top: 20px; }
  .pic-frame { aspect-ratio: 4 / 3; }
  .options-arrow { width: 40px; height: 40px; }
  .upload-pick { padding: 16px 56px 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .pic-frame, .options-arrow, .options-dot::before, .upload-pick, body.options-page .hero-a > .motif { transition: none; }
}

/* Temporary company overview options page (overview-options.html). Remove with its NAV entry, the
   OVERVIEW_OPTIONS section in _build.py, and assets/overview-options/ once an option is chosen. */
.ov-list { display: grid; gap: 40px; }
.ov-option { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px 36px; align-items: center; padding: 24px; border: 1px solid var(--wash-line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-soft); }
.ov-cover img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-figure); }
.ov-copy h2 { color: var(--navy); font-family: var(--serif); font-size: 32px; font-weight: 500; }
.ov-copy p { margin: 8px 0 16px; color: var(--muted); }
.ov-thumbs { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ov-thumbs img { width: 100%; height: auto; border: 1px solid var(--wash-line); border-radius: 6px; }
@media (max-width: 760px) {
  .ov-option { grid-template-columns: 1fr; padding: 16px; }
  .ov-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}