/*
Theme Name: Feder Asset Management
Theme URI: https://feder-asset.com
Author: Synapse Hub
Author URI: https://synapsehub.com
Description: Custom theme for Feder Asset Management AG. Editorial layout, zero JS dependencies, bilingual EN/FR without a translation plugin.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: feder
*/

/* ---------------------------------------------------
   Design Tokens
   --------------------------------------------------- */
:root {
  --bg: #F5F3EF;
  --bg-secondary: #EBE8E1;
  --text: #1A1A1A;
  --text-secondary: #6B6B6B;
  /* Brand taupe, straight from the logo. Fails AA on paper at 2.91:1,
     so it is decorative only: rules, marks, fills. Never text. */
  --brand-taupe: #9E8C7D;

  /* Same hue, darkened until it clears AA. This is the text accent. */
  --accent: #6F6053;

  --hairline: #D4D0C8;
  --surface-hover: #E8E5DD;

  --font-serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Geometric sans for the header navigation and language switcher. Its wide,
     even letterforms suit small uppercase labels better than Inter, which was
     drawn for text at reading size. Loaded at one weight. */
  --font-nav: "Poppins", "Century Gothic", "Futura", var(--font-sans);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --space-2xl: 12rem;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ---------------------------------------------------
   Reset & Base
   --------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

ul, ol {
  list-style: none;
}

/* ---------------------------------------------------
   Accessibility
   --------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 999;
  padding: var(--space-xs) var(--space-sm);
  background: var(--text);
  color: var(--bg);
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 2px;
}

.skip-link:focus {
  top: var(--space-sm);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ---------------------------------------------------
   Layout
   --------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 64px;
  }
}

@media (min-width: 1440px) {
  .container {
    padding: 0 96px;
  }
}

/* ---------------------------------------------------
   Typography
   --------------------------------------------------- */
/* Heading sizes are set on body descendants rather than bare elements.
   The bare-element form ties on specificity with the global-styles block
   WordPress injects after this stylesheet, and loses on source order. One
   extra compound selector settles it without touching the cascade
   elsewhere. */
body h1, body h2, body h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

body h1 {
  font-size: clamp(3rem, 9vw, 8rem);
}

body h2 {
  font-size: clamp(2rem, 4.5vw, 4rem);
}

body h3 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

p {
  max-width: 65ch;
}

.section-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.section-header {
  margin-bottom: var(--space-lg);
}

.section-header h2 {
  margin: 0;
}

/* ---------------------------------------------------
   Header
   --------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(245, 243, 239, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.site-header.scrolled {
  border-color: var(--hairline);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: 72px;
}

/* The nav takes the free space, so it and everything after it sit right.
   space-between would scatter four children instead of grouping three. */
.site-nav {
  margin-left: auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  white-space: nowrap;
}

/* The mark is a tall shape; height is the dimension that matters, so width
   is left to follow. Fixed height keeps the header row stable. */
.logo-mark {
  width: auto;
  height: 30px;
  display: block;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.logo-name {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
}

.logo-sub {
  font-family: var(--font-sans);
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-taupe);
  margin-top: 2px;
}

@media (max-width: 480px) {
  .logo-mark { height: 26px; }
  .logo-name { font-size: 0.9375rem; letter-spacing: 0.16em; }
  .logo-sub  { font-size: 0.4375rem; letter-spacing: 0.16em; }
}

.site-nav ul {
  display: flex;
  gap: var(--space-md);
}

.site-nav a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-nav);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-bottom: 6px;
  transition: color 200ms var(--ease-out-quart);
}

/* The rule is drawn with a pseudo-element rather than a border so it can
   grow from the left instead of appearing all at once. transform is used
   rather than width so the animation stays on the compositor. */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--brand-taupe);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-out-quart);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--text);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* The current page keeps its rule up, so the hover state reads as a preview
   of where you are about to be rather than a separate signal. */
.site-nav a[aria-current="page"] {
  color: var(--text);
}

.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--text);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  padding: 4px;
}

@media (max-width: 767px) {
  .menu-toggle {
    display: block;
  }

  /* The nav is taken out of flow here, so the language switcher becomes the
     first right-aligned item and has to push itself over. */
  .lang-switch {
    margin-left: auto;
  }

  .site-nav {
    position: absolute;
    top: 72px;
    left: 0;
    width: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    padding: var(--space-md);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s var(--ease-out-quart), opacity 0.3s ease;
  }

  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav ul {
    flex-direction: column;
    gap: var(--space-xs);
  }

  /* Uppercase at 12px is a fine desktop label and a poor touch target. The
     links get a real tap area here without changing the type treatment. */
  .site-nav a {
    font-size: 0.9375rem;
    padding: 10px 0;
  }

  .site-nav a::after {
    bottom: 6px;
  }
}

/* ---------------------------------------------------
   Hero
   --------------------------------------------------- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 120px;
  padding-bottom: var(--space-xl);
}

.hero h1 {
  /* Restated here at higher specificity than the global rule. This is the
     one heading WordPress most reliably manages to shrink, because the
     inline global-styles block lands after the theme stylesheet and ties
     with a bare `body h1`. A class in the selector ends the tie. */
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 1.05;
  margin-bottom: var(--space-md);
}

/* WordPress 6.9+/7.x can inject/hoist global heading styles after the
   theme stylesheet on classic themes. Keep the home display heading at its
   intended desktop scale even if core or a plugin emits a later h1 rule. */
@media (min-width: 1024px) {
  body.home .hero h1 {
    font-size: clamp(3rem, 9vw, 8rem) !important;
  }
}

.line {
  display: block;
  overflow: hidden;
}

.line-inner {
  display: block;
  transform: translateY(110%);
  animation: revealLine 1.2s var(--ease-out-expo) forwards;
}

.line:nth-child(1) .line-inner { animation-delay: 0.2s; }
.line:nth-child(2) .line-inner { animation-delay: 0.38s; }
.line:nth-child(3) .line-inner { animation-delay: 0.56s; }

@keyframes revealLine {
  to { transform: translateY(0); }
}

.hero-sub {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 48ch;
  margin-bottom: var(--space-lg);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  font-size: 1rem;
  color: var(--text);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 6px;
  transition: border-color 0.3s ease, color 0.3s ease;
  will-change: transform;
}

.hero-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.hero-cta .arrow {
  transition: transform 0.3s var(--ease-out-quart);
}

.hero-cta:hover .arrow {
  transform: translateX(4px);
}

/* ---------------------------------------------------
   Image Band
   --------------------------------------------------- */
.image-band {
  width: auto;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  background: var(--bg-secondary);
}

.image-band-inner {
  aspect-ratio: 21 / 9;
  position: relative;
  will-change: transform;
}

.image-band-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ---------------------------------------------------
   Services
   --------------------------------------------------- */
.services {
  padding: var(--space-xl) 0;
}

.services-list {
  border-top: 1px solid var(--hairline);
}

.service-row {
  display: grid;
  grid-template-columns: 48px 1fr 1fr;
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--hairline);
  cursor: default;
  transition: background-color 0.5s var(--ease-out-quart),
              padding-left 0.5s var(--ease-out-quart);
}

.service-row:hover {
  background-color: var(--surface-hover);
  padding-left: var(--space-sm);
}

.service-num {
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

.service-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  transition: transform 0.5s var(--ease-out-quart);
}

.service-row:hover .service-title {
  transform: translateX(10px);
}

.service-desc {
  color: var(--text-secondary);
  align-self: center;
  font-size: 1rem;
}

@media (max-width: 767px) {
  .service-row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) 0;
  }

  .service-num {
    margin-bottom: var(--space-xs);
  }
}

/* ---------------------------------------------------
   About
   --------------------------------------------------- */
.about {
  padding: var(--space-2xl) 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.about-main {
  max-width: 65ch;
}

.about-body p + p {
  margin-top: var(--space-sm);
}

.about-marginalia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-content: start;
}

.stat-number {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  display: block;
  margin-bottom: var(--space-xs);
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .about-main {
    margin-left: 8vw;
  }

  .about-marginalia {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding-left: var(--space-lg);
    border-left: 1px solid var(--hairline);
  }
}

/* ---------------------------------------------------
   Process
   --------------------------------------------------- */
.process {
  padding: var(--space-xl) 0;
}

.svg-line {
  display: block;
  width: 120px;
  height: 2px;
  margin-top: var(--space-sm);
  color: var(--accent);
}

.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.process-step {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-md);
  max-width: 55ch;
}

.step-num {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}

.process-step h3 {
  margin-bottom: var(--space-xs);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.process-step p {
  color: var(--text-secondary);
}

@media (min-width: 768px) {
  .process-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-lg) var(--space-md);
  }

  .process-step:nth-child(1) { grid-column: 1 / 7; }
  .process-step:nth-child(2) { grid-column: 6 / 12; }
  .process-step:nth-child(3) { grid-column: 2 / 8; }
  .process-step:nth-child(4) { grid-column: 5 / 11; }
}

/* ---------------------------------------------------
   Contact
   --------------------------------------------------- */
.contact {
  padding: var(--space-2xl) 0 var(--space-xl);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.contact-main p {
  color: var(--text-secondary);
  max-width: 55ch;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-block {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-sm);
}

.contact-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.contact-block a,
.contact-block address {
  font-style: normal;
  text-decoration: none;
  font-size: 1.125rem;
  line-height: 1.5;
}

.contact-block a:hover {
  color: var(--accent);
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-2xl);
  }
}

/* ---------------------------------------------------
   Footer
   --------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: var(--space-2xl);
  background-color: var(--bg-secondary);
  padding: var(--space-lg) 0 var(--space-md);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
}

/* Brand block */
.footer-logo {
  width: auto;
  height: 76px;
  display: block;
  margin-bottom: var(--space-sm);
}

.footer-tagline {
  max-width: 34ch;
  line-height: 1.65;
}

/* Link columns */
.footer-col h2 {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  margin-bottom: var(--space-sm);
}

.footer-col ul {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms var(--ease-out-quart);
}

.site-footer a:hover {
  color: var(--accent);
}

.footer-contact address {
  font-style: normal;
  line-height: 1.7;
  margin-bottom: var(--space-xs);
}

.footer-mail {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
}

.footer-mail:hover {
  border-color: var(--accent);
}

/* Registry strip — the legal identifiers, set as data rather than prose */
.footer-registry {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.footer-reg-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brand-taupe);
  margin-bottom: 5px;
}

/* Registry numbers are set in the display serif rather than a system mono.
   The mono stack renders as a different face on every platform and reads as
   code; the serif reads as the fine print of an annual report, which is what
   these identifiers actually are. Tabular figures keep the digits aligned. */
.footer-reg-value {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}

/* Bottom bar */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-md);
  font-size: 0.8125rem;
}

.footer-bottom ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .footer-top {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: var(--space-lg) var(--space-md);
  }

  .footer-contact {
    grid-column: 2 / -1;
  }

  .footer-registry {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .site-footer {
    padding-top: var(--space-xl);
  }

  .footer-top {
    grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  }

  .footer-contact {
    grid-column: auto;
  }
}

/* ---------------------------------------------------
   Scroll Marks
   --------------------------------------------------- */
.scroll-marks {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 14px;
  z-index: 50;
}

.scroll-mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hairline);
  transition: background 0.3s ease, transform 0.3s var(--ease-out-quart);
}

.scroll-mark.active {
  background: var(--accent);
  transform: scale(1.4);
}

@media (min-width: 1024px) {
  .scroll-marks {
    display: flex;
  }
}

/* ---------------------------------------------------
   Reveals & Motion
   --------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out-quart), transform 0.9s var(--ease-out-quart);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger-children > .reveal:nth-child(1) { transition-delay: 0s; }
.stagger-children > .reveal:nth-child(2) { transition-delay: 0.08s; }
.stagger-children > .reveal:nth-child(3) { transition-delay: 0.16s; }
.stagger-children > .reveal:nth-child(4) { transition-delay: 0.24s; }
.stagger-children > .reveal:nth-child(5) { transition-delay: 0.32s; }
.stagger-children > .reveal:nth-child(6) { transition-delay: 0.40s; }
.stagger-children > .reveal:nth-child(7) { transition-delay: 0.48s; }
.stagger-children > .reveal:nth-child(8) { transition-delay: 0.56s; }

/* Anything past the eighth child reveals with the eighth, so a long list
   never leaves the reader waiting on an ever-growing delay. */
.stagger-children > .reveal:nth-child(n+9) { transition-delay: 0.56s; }

/* ---------------------------------------------------
   Reduced Motion
   --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .line-inner {
    animation: none;
    transform: translateY(0);
  }

  .js .reveal,
  .js .stagger-children > .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }

  .parallax {
    transform: none !important;
  }

  /* The underline still appears, it just stops sliding. Removing the cue
     entirely would cost the hover state its only visual signal. */
  .site-nav a::after,
  .lang-switch-item::after {
    transition: none;
  }
}


/* ===================================================
   PAGE-SPECIFIC STYLES
   =================================================== */

/* ---------------------------------------------------
   Page Hero (shared across About, Services, Contact)
   --------------------------------------------------- */
.page-hero {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 120px;
  padding-bottom: var(--space-xl);
}

.page-hero h1 {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 1.05;
  max-width: 18ch;
  margin-top: var(--space-sm);
}

/* ---------------------------------------------------
   History (About page)
   --------------------------------------------------- */
.history {
  padding: var(--space-xl) 0;
}

.history-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.history-body p + p {
  margin-top: var(--space-sm);
}

.history-marginalia {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
}

.timeline-entry {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-sm);
  align-items: baseline;
}

.timeline-year {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--accent);
  line-height: 1;
}

.timeline-event {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

@media (min-width: 1024px) {
  .history-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .history-main {
    margin-left: 8vw;
  }

  .history-marginalia {
    border-top: none;
    border-left: 1px solid var(--hairline);
    padding-top: 0;
    padding-left: var(--space-lg);
  }
}

/* ---------------------------------------------------
   Team (About page)
   --------------------------------------------------- */
.team {
  padding: var(--space-2xl) 0;
  background: var(--bg-secondary);
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.team-member {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-md);
  align-items: start;
}

.team-portrait {
  aspect-ratio: 3 / 4;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-portrait .image-filename {
  font-size: 0.6875rem;
  text-align: center;
  padding: var(--space-xs);
}

.team-member h3 {
  font-size: 1.5rem;
  margin-bottom: 2px;
}

.team-role {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.team-bio {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  max-width: 50ch;
}

@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl) var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------------------------------------------
   Philosophy (About page)
   --------------------------------------------------- */
.philosophy {
  padding: var(--space-2xl) 0;
}

.philosophy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.philosophy-body p + p {
  margin-top: var(--space-sm);
}

.philosophy-marginalia blockquote {
  border-left: 1px solid var(--hairline);
  padding-left: var(--space-md);
  margin: 0;
}

.philosophy-marginalia blockquote p {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-style: italic;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

.philosophy-marginalia blockquote footer {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

@media (min-width: 1024px) {
  .philosophy-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .philosophy-main {
    margin-left: 8vw;
  }

  .philosophy-marginalia {
    padding-top: var(--space-xl);
  }
}

/* ---------------------------------------------------
   Service Detail (Services page)
   --------------------------------------------------- */
.service-detail {
  padding: var(--space-xl) 0;
}

.service-block {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--hairline);
}

.service-block:last-child {
  border-bottom: 1px solid var(--hairline);
}

.service-block-header {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-md);
  align-items: baseline;
  margin-bottom: var(--space-md);
}

.service-block-num {
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

.service-block-header h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

.service-block-body {
  margin-left: calc(48px + var(--space-md));
  max-width: 70ch;
}

.service-block-body p + p {
  margin-top: var(--space-sm);
}

.fee-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-md);
  font-size: 0.9375rem;
}

.fee-table th,
.fee-table td {
  text-align: left;
  padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
  border-bottom: 1px solid var(--hairline);
}

.fee-table th {
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--text);
}

.fee-table td {
  color: var(--text-secondary);
}

@media (max-width: 767px) {
  .service-block-body {
    margin-left: 0;
  }

  .service-block-header {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
}

/* ---------------------------------------------------
   Markets (Services page)
   --------------------------------------------------- */
.markets {
  padding: var(--space-2xl) 0;
  background: var(--bg-secondary);
}

.markets-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.market-region {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-md);
}

.market-region h3 {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.market-region p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

@media (min-width: 768px) {
  .markets-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) var(--space-md);
  }
}

@media (min-width: 1024px) {
  .markets-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------------------------------------------------
   Contact Detail (Contact page)
   --------------------------------------------------- */
.contact-detail {
  padding: var(--space-xl) 0;
}

.contact-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.contact-detail-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-detail-block {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-md);
}

.contact-detail-block a,
.contact-detail-block address {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  text-decoration: none;
  font-style: normal;
  display: block;
  margin-top: var(--space-xs);
}

.contact-detail-block a:hover {
  color: var(--accent);
}

.contact-note {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: var(--space-xs);
  max-width: 50ch;
}

.contact-detail-marginalia {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
}

.office-hours table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-xs);
  font-size: 0.9375rem;
}

.office-hours td {
  padding: 4px 0;
  color: var(--text-secondary);
}

.office-hours td:first-child {
  width: 40%;
  color: var(--text);
}

.languages p {
  margin-top: var(--space-xs);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

@media (min-width: 1024px) {
  .contact-detail-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .contact-detail-main {
    margin-left: 8vw;
  }

  .contact-detail-marginalia {
    border-top: none;
    border-left: 1px solid var(--hairline);
    padding-top: 0;
    padding-left: var(--space-lg);
  }
}

/* ---------------------------------------------------
   Map Band (Contact page)
   --------------------------------------------------- */
.map-band {
  width: auto;
  margin-inline: calc(50% - 50vw);
  position: relative;
  isolation: isolate;
  height: clamp(360px, 46vh, 560px);
  background: var(--bg-secondary);
  border-block: 1px solid var(--hairline);
}

/* Google's own tiles are blue and green and loud. grayscale strips the
   colour, sepia and the warm veil put what is left back inside the palette.
   The map stays fully interactive underneath. */
.map-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(1) sepia(0.34) saturate(0.9) brightness(1.02) contrast(0.92);
}

.map-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg);
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
}

@media (max-width: 767px) {
  .map-band {
    height: clamp(300px, 52vh, 420px);
  }
}


/* ---------------------------------------------------
   Enquiry (Contact page)
   --------------------------------------------------- */
.enquiry {
  padding: var(--space-2xl) 0;
}

.enquiry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: end;
}

.enquiry-body p + p {
  margin-top: var(--space-sm);
}

.enquiry-cta {
  padding-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .enquiry-grid {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-2xl);
  }
}


/* ===================================================
   TEAM PAGE STYLES
   =================================================== */

/* ---------------------------------------------------
   Team Page Intro
   --------------------------------------------------- */
.team-page-intro {
  padding: var(--space-xl) 0;
}

.team-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.team-intro-body p + p {
  margin-top: var(--space-sm);
}

.team-intro-marginalia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-content: start;
}

@media (min-width: 1024px) {
  .team-intro-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .team-intro-main {
    margin-left: 8vw;
  }

  .team-intro-marginalia {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding-left: var(--space-lg);
    border-left: 1px solid var(--hairline);
  }
}

/* ---------------------------------------------------
   Team Listing (Partner Cards)
   --------------------------------------------------- */
.team-listing {
  padding: var(--space-2xl) 0;
  background: var(--bg-secondary);
}

.team-rows {
  border-top: 1px solid var(--hairline);
}

.team-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--hairline);
}

.team-row-mark {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  transition: color 300ms var(--ease-out-quart);
}

.team-row:hover .team-row-mark {
  color: var(--accent);
}

.team-row-identity h3 {
  font-size: 1.75rem;
  margin-bottom: 2px;
}

.team-row-role {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.team-row-body p {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 58ch;
}

.team-row-meta {
  margin-top: var(--space-sm);
  display: grid;
  gap: 4px;
}

.team-row-meta div {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
}

.team-row-meta dt {
  font-family: "SF Mono", Monaco, monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  min-width: 9ch;
}

.team-row-meta dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text);
}

@media (min-width: 768px) {
  .team-row {
    grid-template-columns: 4rem minmax(14rem, 1fr) 2fr;
    gap: var(--space-md);
    align-items: start;
    padding: var(--space-lg) 0;
  }

  .team-row-mark {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .team-row {
    grid-template-columns: 6rem minmax(16rem, 1fr) 2fr;
    gap: var(--space-lg);
    padding: var(--space-xl) 0;
  }

  .team-row-mark {
    font-size: 2.75rem;
  }
}

/* ---------------------------------------------------
   Associates (Editorial List)
   --------------------------------------------------- */
.associates {
  padding: var(--space-2xl) 0;
}

.associates-grid {
  border-top: 1px solid var(--hairline);
}

.associate-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--hairline);
  cursor: default;
  transition: background-color 0.5s var(--ease-out-quart),
              padding-left 0.5s var(--ease-out-quart);
}

.associate-row:hover {
  background-color: var(--surface-hover);
  padding-left: var(--space-sm);
}

.associate-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  transition: transform 0.5s var(--ease-out-quart);
}

.associate-row:hover .associate-name {
  transform: translateX(10px);
}

.associate-role {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.associate-joined {
  color: var(--text-secondary);
  font-size: 0.875rem;
  text-align: right;
}

@media (max-width: 767px) {
  .associate-row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) 0;
  }

  .associate-joined {
    text-align: left;
  }
}

/* ---------------------------------------------------
   Partnership Structure
   --------------------------------------------------- */
.partnership-structure {
  padding: var(--space-2xl) 0;
}

.partnership-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.partnership-body p + p {
  margin-top: var(--space-sm);
}

.partnership-marginalia {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
}

.partnership-fact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  align-items: baseline;
}

.partnership-fact-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.partnership-fact-value {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  text-align: right;
}

@media (min-width: 1024px) {
  .partnership-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .partnership-main {
    margin-left: 8vw;
  }

  .partnership-marginalia {
    border-top: none;
    border-left: 1px solid var(--hairline);
    padding-top: 0;
    padding-left: var(--space-lg);
  }
}

/* ---------------------------------------------------
   Paper texture — very subtle, on secondary surfaces
   --------------------------------------------------- */
/* Surface texture.

   isolation: isolate makes the section its own stacking context, so the
   negative-z pseudo-element paints on top of the section's own background
   rather than vanishing behind it.

   Source images are despeckled before the high-pass, and the result is
   floored so nothing lands in the dark. Skipping either step turns dust in
   the original scan into black dots that read as a dirty screen.

   Textures are rendered at their natural grain size and tiled. A high-pass
   filter has already stripped the low-frequency gradients from each image,
   which is what normally makes a tile seam readable, so the repeat does not
   register at this opacity. Each page sets its own via --texture-src. */
.textured {
  position: relative;
  isolation: isolate;
  background-color: var(--texture-base, var(--bg));
}

.markets.textured,
.team-listing.textured {
  --texture-base: var(--bg-secondary);
}

.textured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--texture-src, url("assets/img/tex-paper.webp"));
  background-size: 500px;
  background-position: center;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: var(--texture-opacity, 0.4);
  pointer-events: none;
}

/* One surface per page */
.about.textured        { --texture-src: url("assets/img/tex-paper.webp"); }
.markets.textured      { --texture-src: url("assets/img/tex-concrete.webp"); }
.team-listing.textured { --texture-src: url("assets/img/tex-stone.webp"); }
.philosophy.textured   { --texture-src: url("assets/img/tex-linen.webp"); --texture-opacity: 0.26; }
.enquiry.textured      { --texture-src: url("assets/img/tex-paper.webp"); }

/* ---------------------------------------------------
   People teaser (about page)
   --------------------------------------------------- */
.people-teaser {
  padding: var(--space-2xl) 0;
}

.people-teaser-body {
  max-width: 58ch;
}

.people-teaser-body p {
  margin-bottom: var(--space-sm);
}

.text-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 200ms var(--ease-out-quart);
}

.text-link:hover {
  opacity: 0.7;
}

/* The services list is split in two by the image band. The upper half keeps
   its normal padding; the lower half opens with less, so the band reads as a
   pause inside one list rather than the start of a new section. */
.service-detail-continued {
  padding-top: var(--space-xl);
}

/* Full-bleed bands should never sit flush against a coloured section. */
.image-band + .service-detail-continued,
.image-band + .markets {
  border-top: 0;
}

/* Registry identifiers on the contact page, matching the footer treatment */
.contact-registry {
  display: grid;
  gap: 2px;
  margin-top: var(--space-xs);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.contact-registry .reg-num {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}

/* ---------------------------------------------------
   404
   --------------------------------------------------- */
.error-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.error-404-body {
  max-width: 44ch;
  color: var(--text-secondary);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* ---------------------------------------------------
   Editor content (legal pages)
   --------------------------------------------------- */
.page-content {
  max-width: 62ch;
}

.page-content > * + * {
  margin-top: var(--space-sm);
}

.page-content h2 {
  font-size: 1.75rem;
  margin-top: var(--space-md);
}

.page-content h3 {
  font-size: 1.25rem;
  margin-top: var(--space-sm);
}

.page-content ul,
.page-content ol {
  padding-left: 1.25rem;
}

.page-content li + li {
  margin-top: 0.35rem;
}

.page-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------
   Language switcher
   --------------------------------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  /* Together with the header's 1rem flex gap this gives the language link
     the same 2rem spacing used between navigation items. */
  margin-left: calc(var(--space-md) - var(--space-sm));
}

/* Same treatment as the nav links, so the switcher reads as part of the same
   row rather than a control bolted on beside it. */
.lang-switch-item {
  position: relative;
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-secondary);
  padding-bottom: 6px;
  transition: color 200ms var(--ease-out-quart);
}

.lang-switch-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--brand-taupe);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-out-quart);
}

.lang-switch-item:hover,
.lang-switch-item:focus-visible {
  color: var(--text);
}

.lang-switch-item:hover::after,
.lang-switch-item:focus-visible::after {
  transform: scaleX(1);
}


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

/* Keep the language link right-aligned beside the hamburger on mobile. This
   override lives after the base switcher rule so the desktop spacing does not
   win through the cascade. */
@media (max-width: 767px) {
  .lang-switch {
    margin-left: auto;
  }
}