/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--color-void);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Slim, quiet scrollbars (page, form overlay, dropdown lists, text areas): thin overlay-style bars. */
@supports selector(::-webkit-scrollbar) {
  /* Chrome, Edge, Safari: a slim rounded thumb, no track, no arrow buttons. */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.32); border: 3px solid transparent; background-clip: content-box; border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); border: 3px solid transparent; background-clip: content-box; }
}
@supports not selector(::-webkit-scrollbar) {
  /* Firefox */
  :root { scrollbar-color: rgba(255,255,255,0.32) transparent; }
  * { scrollbar-width: thin; }
}
img { max-width: 100%; display: block; }
h1, h2, h3, blockquote, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
address { font-style: normal; }
input, select, textarea { font: inherit; color: inherit; }

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 1000;
  background: var(--color-white);
  color: var(--color-black);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-weight: 500;
  transition: top var(--motion-state);
}
.skip-link:focus { top: var(--space-4); }

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

.section-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--section-px);
}

/* ===== Reveal-on-scroll ===== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--load { opacity: 1; transform: none; }

/* Team photos: keep the slide-up motion but skip the opacity fade —
   fading these in from 0 over the dark background reads as a black
   flash before the photo appears, worse on the color-tinted grid shots. */
.team__photo.reveal,
.team-grid__list .reveal {
  opacity: 1;
}

/* ===== Buttons: one pill button used everywhere (nav Enquire, form Submit) ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0.65rem 1.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: var(--ui-text-transform);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-state), transform var(--motion-state), opacity var(--motion-state);
}
.btn:hover { background: var(--color-accent); }
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn:disabled:hover { background: var(--color-white); }
/* In the desktop nav bar the button is the compact size of the same pill (phones keep the full 44px touch size). */
@media (min-width: 1150px) {
  .nav__actions .btn { min-height: 2.375rem; padding: 0.4rem 1.25rem; }
}
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--text-on-dark-muted);
  text-transform: none;
  margin-bottom: var(--space-3);
}

.divider {
  border: 0;
  border-top: 1px solid var(--border-on-dark-strong);
  width: 100%;
  max-width: var(--content-narrow);
  margin-inline: auto;
}
/* The rule between the Claudio signature and his bio is hidden (the space does the separating).
   To bring it back, delete this one rule. */
.team .divider { display: none; }

/* ===== Header / Nav ===== */
/* The nav bar's top fade is parked in --header-gradient (transparent for now; set `background: var(--header-gradient);` to restore it). */
:root { --header-gradient: linear-gradient(180deg, var(--overlay-65) 0%, rgba(0,0,0,0) 100%); }
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 200;
  background: transparent;
}
/* Frosted bar once scrolled: a dark translucent layer with blur, no shadow.
   It lives on a pseudo-element (not the header) so the fixed mobile menu inside the header is unaffected. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color var(--motion-enter),
              backdrop-filter var(--motion-enter),
              -webkit-backdrop-filter var(--motion-enter);
}
.site-header.is-scrolled::before {
  background: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem var(--section-px);
  color: var(--color-white);
}
.nav__logo { position: relative; z-index: 2; display: block; color: var(--color-white); width: 9.25rem; }
.nav__logo svg { display: block; width: 100%; height: auto; }

.nav__burger {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.75rem;
  margin-right: -0.25rem;
}
.nav__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  transition: transform var(--motion-state), opacity var(--motion-state);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__links { display: flex; gap: var(--space-6); }
.nav__links a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  text-transform: var(--ui-text-transform);
  letter-spacing: 0.03em;
  color: var(--text-on-dark-faint);
  text-decoration: none;
  transition: color var(--motion-state);
}
.nav__links a:hover, .nav__links a:focus-visible { color: var(--color-white); }

.nav__actions { display: flex; align-items: center; gap: var(--space-6); }

@media (max-width: 1149px) {
  .nav__burger { display: flex; }
  .nav__menu {
    position: fixed;
    inset: 0;
    top: 0;
    z-index: 1;
    background: var(--color-navy-alt);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 7rem var(--section-px) var(--space-8);
    overflow-y: auto;
    transform: translateY(-16px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--duration-nav) var(--ease-nav), opacity var(--duration-nav) var(--ease-nav), visibility var(--duration-nav);
  }
  .nav__menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav__links { flex-direction: column; align-items: stretch; text-align: left; gap: 0; }
  .nav__links a {
    display: block;
    padding: 1.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 1.75rem;
    text-transform: none;
    letter-spacing: normal;
  }
  .nav__actions { flex-direction: column; align-items: flex-start; gap: var(--space-5); margin-top: var(--space-8); }
}
@media (min-width: 1150px) {
  .nav__burger { display: none; }
  .nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
  .nav__menu { display: contents; }
  .nav__links { justify-content: center; }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Hero image overlay. Currently a flat dim; the original gradient is parked in --hero-scrim-gradient.
   To bring the gradient back, set `background: var(--hero-scrim-gradient);` below. */
:root {
  --hero-dim: rgba(0, 0, 0, 0.6);
  --hero-scrim-gradient:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.15) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 55%);
}
.hero__scrim {
  position: absolute; inset: 0;
  background: var(--hero-dim);
}
.hero__fade {
  display: none;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, transparent 0%, var(--color-void) 100%);
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 6.5rem var(--section-px) var(--space-10);
}
.hero__title { max-width: 60rem; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-hero);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-6);
}
.hero__lead {
  font-size: var(--text-body);
  line-height: 1.55;
  margin-bottom: var(--space-6);
  max-width: 44rem;
}

@media (max-width: 640px) {
  /* Phone layout for the portrait hero (image on top, text below). Used when the hero does NOT have the
     .hero--centered class, so reverting to the portrait photo restores exactly this. */
  .hero:not(.hero--centered) {
    min-height: 0;
    display: block;
    background: var(--color-void);
  }
  .hero:not(.hero--centered) .hero__media {
    position: relative;
    inset: auto;
    height: 78svh;
  }
  .hero:not(.hero--centered) .hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 78% 20%;
  }
  .hero:not(.hero--centered) .hero__fade { display: block; }
  .hero:not(.hero--centered) .hero__content { position: relative; padding: 0 var(--section-px) var(--space-10); }
  .hero:not(.hero--centered) .hero__title {
    margin-top: -6.5rem;
    padding-top: var(--space-6);
    max-width: none;
  }
  .hero:not(.hero--centered) .hero__lead { max-width: none; }

  /* Landscape hero (no portrait to leave room for): the text sits over the whole image,
     in the middle of the screen, a touch lower than centre, never at the bottom. */
  .hero--centered { min-height: 100svh; }
  .hero--centered .hero__content { padding: 6.5rem var(--section-px) 3rem; }
  .hero--centered .hero__title,
  .hero--centered .hero__lead { max-width: none; }
}

/* ===== About ===== */
.about { position: relative; padding: var(--section-py) 0; }
.about__media { position: absolute; inset: 0; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); }
.about__grid {
  position: relative;
  display: grid;
  gap: var(--space-8);
}
.about h2 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: 1.05;
}
.about__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  font-size: var(--text-lead);
  line-height: 1.45;
}
@media (min-width: 900px) {
  .about__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ===== Investment Philosophy ===== */
.philosophy { background: var(--color-navy); padding: var(--section-py) 0; }
.philosophy__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
  max-width: 42rem;
}
.philosophy h2 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: 1.05;
}
.philosophy__intro p { font-size: var(--text-body); line-height: 1.5; }

.philosophy__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 640px) {
  .philosophy__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .philosophy__grid { grid-template-columns: repeat(3, 1fr); }
}

.phil-card {
  position: relative;
  aspect-ratio: 370 / 460;
  perspective: 1400px;
  -webkit-perspective: 1400px;
  container-type: inline-size;
}
.phil-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform var(--duration-slow) var(--ease-standard);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
}
.phil-card[data-flipped="true"] .phil-card__inner { transform: rotateY(180deg); }
.phil-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
.phil-card__face--back { transform: rotateY(180deg) translateZ(0); -webkit-transform: rotateY(180deg) translateZ(0); }
.phil-card__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phil-card__scrim { position: absolute; inset: 0; background: var(--overlay-30); }
.phil-card__scrim--dark { background: var(--overlay-60); }
.phil-card__title {
  position: relative;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-card-title);
  line-height: 1.15;
  color: var(--color-white);
  padding: var(--space-6);
  max-width: 80%;
}
@media (max-width: 640px) {
  .phil-card__title { max-width: 90%; }
}
.phil-card__desc {
  position: relative;
  padding: var(--space-6);
  padding-bottom: 5rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.phil-card__desc p {
  font-size: clamp(0.85rem, 5cqw, var(--text-md));
  line-height: 1.4;
  color: var(--color-white);
  max-width: 85%;
}
.phil-card__toggle {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  z-index: 2;
  width: calc(100% - 3.25rem);
  max-width: 18rem;
  padding: 1rem;
  border-radius: var(--radius-pill);
  background: var(--overlay-35);
  backdrop-filter: blur(2px);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  text-transform: var(--ui-text-transform);
  text-align: center;
  transition: opacity var(--motion-state), transform var(--duration-slow) var(--ease-standard);
}
.phil-card__toggle:hover { opacity: 0.8; }
.phil-card__toggle.is-flipping {
  opacity: 0.5;
  transform: translateX(-50%) scale(0.92);
}
.phil-card__toggle span {
  display: inline-block;
  transition: opacity var(--motion-state);
}
.phil-card__toggle.is-swapping span { opacity: 0; }

/* ===== Team (profile) ===== */
.team { background: linear-gradient(180deg, var(--color-navy-alt) 0%, var(--color-navy-mid) 45%, var(--color-navy-alt) 80%); padding: var(--section-py) 0; }
.team h2 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: 1.05;
  margin-bottom: var(--space-8);
}
.team__photo { margin-bottom: var(--space-10); }
.team__photo img { width: 100%; height: auto; max-height: 46rem; object-fit: cover; border-radius: var(--radius-sm); box-shadow: 0 30px 60px rgba(0,0,0,0.3); }

.team__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  max-width: var(--content-narrow);
  margin-inline: auto;
  text-align: left;
}
.team__quote {
  font-family: var(--font-display);
  font-size: var(--text-quote);
  line-height: 1.35;
}
.team__signature { display: flex; flex-direction: column; gap: var(--space-2); align-self: flex-start; }
.signature { font-family: var(--font-signature); font-size: var(--text-signature); line-height: 1; color: var(--color-accent); }
.signature-title { font-family: var(--font-display); font-size: var(--text-md); color: var(--color-white); }
.team__bio { display: flex; flex-direction: column; gap: var(--space-5); align-self: stretch; }
.team__bio h3 { font-family: var(--font-body); font-size: var(--text-team-title); font-weight: 500; }
.team__bio p, .team__closing { font-size: var(--text-body); line-height: 1.45; }
.team__closing { align-self: stretch; }
.mandates-link {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mandates-link__arrow { display: inline-block; vertical-align: -1px; transition: transform var(--motion-state); }
.mandates-link:hover .mandates-link__arrow { transform: translateX(3px); }

/* ===== Team grid ===== */
/* The Claudio section above ends in the same dark tone, so its bottom padding already provides the gap; no second padding on top. */
.team-grid { background: var(--color-navy-alt); padding: 0 0 var(--section-py); }
.team-grid__list {
  display: grid;
  grid-template-columns: minmax(0, 14rem);
  justify-content: center;
  gap: var(--space-8) var(--space-6);
}
@media (min-width: 560px) {
  .team-grid__list { grid-template-columns: repeat(2, minmax(0, 14rem)); }
}
@media (min-width: 900px) {
  .team-grid__list { grid-template-columns: repeat(3, minmax(0, 14rem)); }
}
.team-grid__photo { position: relative; isolation: isolate; aspect-ratio: 232 / 240; overflow: hidden; border-radius: var(--radius-sm); box-shadow: 0 12px 24px rgba(0,0,0,0.25); margin-bottom: var(--space-2); }
.team-grid__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.team-grid__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-deep);
  mix-blend-mode: color;
  pointer-events: none;
}
.team-grid__name { font-family: var(--font-body); font-size: var(--text-team-name); color: var(--color-white); }
.team-grid__role { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-on-dark-muted); }

/* ===== Contact + Footer ===== */
.contact { position: relative; padding-top: var(--section-py); overflow: hidden; }
.contact__media { position: absolute; inset: 0; }
.contact__media img { width: 100%; height: 100%; object-fit: cover; }
.contact__overlay { position: absolute; inset: 0; background: var(--overlay-45); }
.contact__grid {
  position: relative;
  display: grid;
  gap: var(--space-8);
  padding-bottom: var(--space-16);
}
.contact h2 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: 1.05;
}
.contact__details { display: flex; flex-direction: column; gap: var(--space-6); font-size: var(--text-body); }
.contact__company { font-weight: 700; margin-bottom: 0; }
.contact__details address a { text-decoration: underline; transition: opacity var(--motion-state); }
.contact__details address a:hover { opacity: 0.7; }
.legal { font-size: var(--text-xs); line-height: 1.5; color: var(--text-on-dark-muted); }
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: 1fr 1fr; }
}
.contact__footer-logo {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 3.5rem;
  color: var(--color-white);
}
.contact__footer-logo svg { width: min(36rem, calc(100vw - 4rem)); height: auto; }

/* ===== Past Mandates list (rendered inside the shared .enquire overlay) =====
   Same look as the privacy page's contents list: thin dividers, accent numbers, grey text, two columns on wider screens. */
.mandates-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--space-8);
  border-top: 1px solid var(--border-on-dark);
  counter-reset: mandate;
}
.mandates-list li {
  counter-increment: mandate;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: 0.8rem 0.25rem;
  border-bottom: 1px solid var(--border-on-dark);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--text-on-dark-muted);
}
.mandates-list li::before {
  content: counter(mandate, decimal-leading-zero);
  flex: 0 0 1.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}
@media (min-width: 48rem) {
  .mandates-list { grid-template-columns: 1fr 1fr; }
}
/* Wider panel than the form overlay so the long mandate titles wrap less. */
#pastMandatesModal .enquire__wrap { max-width: 54rem; }

/* ===== Enquire — full-screen overlay ===== */
.enquire {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--color-navy-alt);
  view-transition-name: enquire-panel;
  opacity: 1;
  transition: opacity var(--motion-enter);
}
.enquire[hidden] { display: none; }
.enquire.is-closing { opacity: 0; }
.enquire__scroll { height: 100%; overflow-y: auto; }
.enquire__wrap { max-width: 44rem; margin-inline: auto; padding: 6rem var(--section-px) 6rem; }
.enquire__close {
  position: fixed;
  top: var(--space-5);
  right: var(--section-px);
  z-index: 2;
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--color-white);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color var(--motion-state);
}
.enquire__close:hover { background: rgba(255,255,255,0.16); }

.enquire__intro { margin-bottom: var(--space-12); }
.enquire h2 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: 1.1;
  margin: var(--space-2) 0 var(--space-6);
}
.enquire__lead { font-size: var(--text-body); line-height: 1.5; margin-bottom: var(--space-6); max-width: 38rem; }
.enquire__trust { display: flex; flex-direction: column; gap: var(--space-3); }
.enquire__trust li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--text-sm);
  color: var(--text-on-dark-muted);
}
.enquire__trust li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.enquire__form-heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-8);
}
.enquire fieldset {
  border: 0;
  padding: 0 0 var(--space-8);
  margin: var(--space-8) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.enquire fieldset:first-of-type { margin-top: 0; }
.enquire legend {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  padding: 0 0 var(--space-2);
  margin: 0 0 var(--space-5);
  border-bottom: 1px solid var(--border-on-dark);
  width: 100%;
  grid-column: 1 / -1;
}
@media (min-width: 700px) {
  .enquire fieldset { grid-template-columns: 1fr 1fr; }
  .field--full, .enquire legend, .checkbox-grid { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: var(--text-xs); color: var(--text-on-dark-muted); }
.field__optional { color: var(--text-on-dark-fainter); font-weight: 400; }
.field__required { color: var(--color-accent); font-weight: 400; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="file"],
.field select,
.field textarea {
  background: rgba(255,255,255,0.07);
  border: 0;
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  width: 100%;
  min-height: 3rem;
  transition: background-color var(--motion-state), box-shadow var(--motion-state);
}
.field textarea { resize: vertical; min-height: 5rem; }
.phone-input { display: flex; gap: var(--space-2); }
.phone-code { position: relative; flex: 0 0 auto; }
.phone-code select { width: 5.5rem; color: transparent; }
.phone-code__display {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  pointer-events: none;
}
.phone-input input { flex: 1; min-width: 0; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.25rem;
}
.field select option { color: var(--color-black); }
/* No field strokes or underlines: a focused field is simply brighter. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.dropdown__button:focus-visible {
  outline: none;
  background: rgba(255,255,255,0.11);
}
/* An open dropdown only lifts the fill: no underline while the list is showing. */
.dropdown__button[aria-expanded="true"] { background: rgba(255,255,255,0.11); box-shadow: none; }
/* A field that still needs filling gets a full stroke (plus the underline), the only place a stroke appears. */
.field.has-error input, .field.has-error select, .field.has-error textarea, .field.has-error .dropdown__button {
  box-shadow: inset 0 0 0 1.5px var(--color-error), inset 0 -2px 0 var(--color-error);
}

/* ===== Custom dropdown (enhances the native select; the select stays in the form for submit + validation) ===== */
.dropdown { position: relative; }
.field .dropdown select {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px;
  padding: 0; opacity: 0; pointer-events: none;
  background-image: none;
}
.dropdown__button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 0; border-radius: 8px;
  background: rgba(255,255,255,0.07);
  color: var(--color-white);
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.4;
  text-align: left;
  cursor: pointer;
  min-height: 3rem;
  transition: background-color var(--motion-state), box-shadow var(--motion-state);
}
.dropdown__button:hover { background: rgba(255,255,255,0.1); }
.dropdown__button.is-placeholder .dropdown__value { color: var(--text-on-dark-muted); }
.dropdown__button::after {
  content: "";
  flex: 0 0 auto;
  width: 12px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  transition: transform var(--motion-state);
}
.dropdown__button[aria-expanded="true"]::after { transform: rotate(180deg); }
.dropdown__list {
  position: absolute; z-index: 5;
  left: 0; right: 0; top: calc(100% + 0.4rem);
  max-height: min(20rem, 50vh); overflow-y: auto;
  margin: 0; padding: 0.35rem;
  list-style: none;
  /* Opaque twin of the field fill (white 7% over the overlay), so the list reads as the same grey. */
  background: #24242f;
  background: color-mix(in srgb, #fff 7%, var(--color-navy-alt));
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  outline: none;
}
.dropdown__list[hidden] { display: none; }
.dropdown--phone .dropdown__list { right: auto; width: min(20rem, calc(100vw - 2 * var(--section-px))); }
.dropdown__option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  font-size: var(--text-sm); line-height: 1.4;
  color: var(--text-on-dark-muted);
  cursor: pointer;
}
.dropdown__option:hover, .dropdown__option.is-active { background: rgba(255,255,255,0.14); color: var(--color-white); }
.dropdown__option[aria-selected="true"] { color: var(--color-white); }
.dropdown__option[aria-selected="true"]::after {
  content: "";
  flex: 0 0 auto;
  width: 14px; height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.5l4 4 8-8' stroke='%23abd3ff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Inline validation message: a plain "!" and the text, both in the same red as the field stroke, no coloured badge. */
.field__error {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin-top: var(--space-1);
  font-size: var(--text-xs); line-height: 1.4;
  color: var(--color-error);
}
.field__error-icon { font-weight: 700; }
.checkbox { flex-wrap: wrap; }
.checkbox > span:not(.field__error) { flex: 1 1 0; min-width: 0; }
.checkbox .field__error { flex: 0 0 100%; padding-left: 1.65rem; margin-top: 0; }

.checkbox-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 500px) {
  .checkbox-grid { grid-template-columns: 1fr 1fr; }
}
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--text-sm);
  cursor: pointer;
}
.checkbox input { margin-top: 0.2rem; width: 1rem; height: 1rem; accent-color: var(--color-accent); flex-shrink: 0; }
.checkbox--stacked { padding: 0.35rem 0; }
.checkbox a { text-decoration: underline; }

.enquire__submit-row {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}
.enquire__submit-row .btn { width: 100%; min-height: 3rem; }
.form-status { font-size: var(--text-sm); color: var(--text-on-dark-muted); min-height: 1.2em; text-align: center; }
.form-status.is-error { color: var(--color-error); }

.enquire__success { text-align: center; padding: 4rem var(--section-px); }
.enquire__success h3 { font-family: var(--font-display); font-size: var(--text-heading); margin-bottom: var(--space-4); }
.enquire__success p { font-size: var(--text-body); max-width: 30rem; margin-inline: auto; }

/* ===== View Transitions (continuity) ===== */
@media not (prefers-reduced-motion: reduce) {
  ::view-transition-new(enquire-panel) {
    animation: enquire-fade-in var(--motion-enter);
  }
}
@keyframes enquire-fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== Body scroll lock while an overlay is open ===== */
body.scroll-lock { overflow: hidden; }

/* ===== Placeholder page (privacy notice) ===== */
.placeholder-page { max-width: 42rem; margin-inline: auto; padding: 8rem var(--section-px) 6rem; }
.placeholder-page h1 { font-family: var(--font-display); font-size: var(--text-heading); margin-bottom: var(--space-6); }
.placeholder-page p { font-size: var(--text-lg); line-height: 1.6; margin-bottom: var(--space-5); }
.placeholder-page a.btn { margin-top: var(--space-4); }

/* Long-form legal text (privacy notice, disclaimer) */
/* The privacy page keeps its own sizes, unaffected by the site-wide type changes. */
.legal-page { --text-heading: clamp(2rem, 1.4rem + 2.4vw, 3.625rem); --text-xs: 0.875rem; max-width: 44rem; overflow-wrap: anywhere; }
.legal-page h1 { line-height: 1.1; }
.legal-page p, .legal-page li { font-size: var(--text-sm); line-height: 1.5; }
.legal-page .eyebrow { font-size: var(--text-xs); font-weight: 400; line-height: 1.5; letter-spacing: 0.03em; margin-bottom: var(--space-2); }
.legal-page h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1.25; margin: var(--space-8) 0 var(--space-4); }
.legal-page h3 { font-family: var(--font-body); font-weight: 500; font-size: var(--text-md); margin: var(--space-6) 0 var(--space-3); }
.legal-page ul, .legal-page ol { padding-left: var(--space-5); margin-bottom: var(--space-5); }
.legal-page ul { list-style: disc; }
.legal-page ol { list-style: decimal; }
.legal-page li { margin-bottom: var(--space-3); }
.legal-page li > p:last-child { margin-bottom: 0; }
.legal-page a:not(.btn) { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; }
.legal-page .legal-toc__label { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.03em; color: var(--text-on-dark-muted); margin: var(--space-8) 0 var(--space-3); }
.legal-page .legal-toc {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--space-8);
  border-top: 1px solid var(--border-on-dark);
  counter-reset: toc;
}
.legal-page .legal-toc li { counter-increment: toc; margin: 0; border-bottom: 1px solid var(--border-on-dark); }
.legal-page .legal-toc a {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: 0.8rem 0.25rem;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--text-on-dark-muted);
  text-decoration: none;
  transition: color var(--motion-state);
}
.legal-page .legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: 0 0 1.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}
.legal-page .legal-toc a:hover { color: var(--color-white); }
@media (min-width: 48rem) {
  .legal-page .legal-toc { grid-template-columns: 1fr 1fr; }
}
.legal-page address p { margin-bottom: 0; }
.legal-page .legal-updated { color: var(--text-on-dark-muted); margin-top: var(--space-6); }

/* ===== Unified entrances (one easing, 180ms for state changes, 300ms for things appearing) ===== */
@keyframes ui-rise-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
.dropdown__list:not([hidden]) { animation: ui-rise-in var(--motion-state); }
.field__error { animation: ui-rise-in var(--motion-enter); }
.enquire__success:not([hidden]) { animation: ui-fade-in var(--motion-enter); }

/* ===== Type refinements (site and overlays; the privacy page keeps its own settings) ===== */
/* Playfair Display is loaded at 400 and 500 only. Section titles asked for bold, so the browser faked it
   and they looked heavier than the hero title. They now use the real 500, like the hero. */
.about h2, .philosophy h2, .team h2, .contact h2, .enquire h2, .enquire__form-heading, .enquire__success h3 {
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* Balanced headlines and tidy paragraph endings (progressive enhancement). */
.hero h1, .about h2, .philosophy h2, .team h2, .contact h2, .enquire h2, .enquire__success h3, .team__quote { text-wrap: balance; }
.hero__lead, .about__body p, .philosophy__intro p, .team__bio p, .team__closing, .enquire__lead, .enquire__success p { text-wrap: pretty; }

/* ===== Subtle motion (pointer effects need a real mouse; all of it is off for reduced motion) ===== */

/* Signature: padding keeps the script's flourishes inside the reveal mask; fit-content makes the stroke end where the name ends. */
.signature { width: fit-content; padding: 0.2em 0.25em; margin: -0.2em -0.25em; }

.about__media { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* The signature is written left to right with a soft, slightly slanted pen edge, then the title fades in. */
  .signature {
    -webkit-mask-image: linear-gradient(100deg, #000 45%, transparent 55%);
    mask-image: linear-gradient(100deg, #000 45%, transparent 55%);
    -webkit-mask-size: 260% 100%;
    mask-size: 260% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    transition: -webkit-mask-position 2.6s cubic-bezier(0.45, 0.05, 0.3, 1), mask-position 2.6s cubic-bezier(0.45, 0.05, 0.3, 1);
  }
  .team__signature.is-unsigned .signature { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  .signature-title { transition: opacity 700ms var(--ease-standard) 1.1s; }
  .team__signature.is-unsigned .signature-title { opacity: 0; transition-delay: 0s; }

  /* The bio and the closing line wait for the signature, then arrive once it is finished. */
  .team__signature.is-unsigned ~ .team__bio.reveal,
  .team__signature.is-unsigned ~ .team__closing.reveal { opacity: 0; transform: translateY(16px); }
  .team__signature.is-signing ~ .team__bio.reveal.is-visible { transition-delay: 1.9s; }
  .team__signature.is-signing ~ .team__closing.reveal.is-visible { transition-delay: 2.2s; }

  /* About image drifts slower than the page as you scroll; scaled up so its edges never show. */
  .about__media img { transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.12); will-change: transform; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Soft 3D tilt plus a glare that follows the cursor: team portraits and the philosophy tiles. */
  .team-grid__photo {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 600ms var(--ease-standard), box-shadow 600ms var(--ease-standard);
    will-change: transform;
  }
  .team-grid__photo.is-tilting {
    transition: transform 120ms linear, box-shadow 300ms var(--ease-standard);
    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.38);
  }

  /* Philosophy tiles tilt on the inner layer and keep their flip (180 degrees plus the tilt). */
  .phil-card__inner { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .phil-card[data-flipped="true"] .phil-card__inner { transform: rotateX(var(--rx, 0deg)) rotateY(calc(180deg + var(--ry, 0deg))); }
  .phil-card.is-tilting .phil-card__inner { transition: transform 120ms linear; }

  .tilt-glare {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%);
    mix-blend-mode: soft-light;
    transition: opacity 300ms var(--ease-standard);
  }
  .is-tilting > .tilt-glare,
  .is-tilting .phil-card__face > .tilt-glare { opacity: 1; }
  .phil-card.is-tilting .tilt-glare { opacity: 1; }
}

/* ===== Hero: entrance ease-in and vertical parallax (off for reduced motion) ===== */
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  /* The hero text arrives first, one line at a time; the header fades in once it has settled. */
  .site-header { animation: ui-fade-in 900ms var(--ease-standard) 1400ms backwards; }
  .hero__title .eyebrow { animation: hero-rise 1000ms var(--ease-standard) 150ms backwards; }
  .hero h1 { animation: hero-rise 1100ms var(--ease-standard) 300ms backwards; }
  .hero__lead { animation: hero-rise 1100ms var(--ease-standard) 500ms backwards; }

  /* The picture is pre-scaled so moving it never shows an edge; the script sets --hero-parallax-y on scroll. */
  .hero__media img { transform: translate3d(0, var(--hero-parallax-y, 0px), 0) scale(1.12); will-change: transform; }
}