/* NOORINOOH — luxury-corporate static site */

:root {
  --paper: #F4F0E6;
  --paper-sunk: #ECE6D8;
  --ink: #121212;
  --deep: #0C1118;
  --deep-raised: #131A24;
  --gold: #B8955A;
  --gold-hover: #C9A86E;
  --gold-on-paper: #7A5A2E;
  --muted: #6B6560;
  --muted-dark: #A8A199;
  --ink-soft: #534E4A;
  --hairline: rgba(18, 18, 18, 0.12);
  --hairline-dark: rgba(244, 240, 230, 0.12);
  --max: 1120px;
  --header-h: 4.5rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t: 240ms;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Focus indicators need 3:1 against whatever sits behind them. No single gold
     clears that on both grounds, so the token is re-declared on dark surfaces
     and inherits down from there. */
  --focus: #6B4A1F;
}

.site-header,
.site-footer,
.section-dark,
.hero,
.page-hero,
.cta-band {
  --focus: #E8C989;
}

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

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Every img carries width/height attributes to reserve layout space. Without
   height:auto, max-width shrinking the width leaves the attribute height in
   place and the picture is squashed. Today each image also has explicit CSS
   sizing so nothing is affected, but this keeps the next one safe. */
img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

p {
  margin: 0 0 1.15em;
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--gold);
  color: var(--deep);
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.skip-link:focus {
  top: 1rem;
}

.wrap {
  width: min(var(--max), calc(100% - 3rem));
  margin-inline: auto;
}

.wrap-narrow {
  width: min(44rem, calc(100% - 3rem));
  margin-inline: auto;
}

/* Ragged-right rather than justified: without hyphenation, justified French
   copy opens rivers of whitespace between words. */
.wrap-narrow > p,
.wrap-narrow .section-intro,
.wrap-narrow .expertise p {
  text-align: left;
  hyphens: manual;
}

/* ——— Header ——— */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  color: var(--paper);
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), height var(--t) var(--ease);
}

.site-header.is-scrolled {
  background: rgba(12, 17, 24, 0.94);
  box-shadow: 0 1px 0 var(--hairline-dark);
  height: 3.75rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.header-inner {
  width: min(var(--max), calc(100% - 3rem));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
  color: var(--paper);
}

.brand-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.brand-word {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  line-height: 1;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  /* 44px minimum touch target. */
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  padding: 0;
  position: relative;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
}

.nav-toggle span::before {
  transform: translate(-50%, calc(-50% - 6px));
}

.nav-toggle span::after {
  transform: translate(-50%, calc(-50% + 6px));
}

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.15rem 1.65rem;
  list-style: none;
}

.nav-list a {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 240, 230, 0.82);
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

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

.nav-list a.is-active {
  color: var(--paper);
  border-bottom-color: var(--gold);
}

.nav-item {
  position: relative;
}

.nav-item.has-sub > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-item.has-sub > a::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.7;
}

/* Invisible bridge so the menu stays open while the pointer moves down */
.nav-item.has-sub::after {
  content: "";
  position: absolute;
  left: -1.5rem;
  right: -1.5rem;
  top: 100%;
  height: 1.15rem;
}

.subnav {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 16rem;
  background: var(--deep);
  border: 1px solid var(--hairline-dark);
  padding: 0.6rem 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t) var(--ease), visibility var(--t);
}

.subnav a {
  display: block;
  padding: 0.55rem 1.1rem;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.88rem;
  border-bottom: 0;
}

.nav-item.has-sub:hover > .subnav,
.nav-item.has-sub:focus-within > .subnav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  flex-shrink: 0;
}

.lang-switch span {
  color: rgba(244, 240, 230, 0.48);
}

.lang-switch a {
  color: rgba(244, 240, 230, 0.55);
  /* Was 0.2rem vertical only, giving a ~20px tall tap target. */
  padding: 0.5rem 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color var(--t) var(--ease);
}

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

.lang-switch a.is-active {
  color: var(--paper);
  border-bottom-color: var(--gold);
}

/* ——— Buttons ——— */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.85rem;
  padding: 0.7rem 1.55rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.btn:focus-visible,
.nav-list a:focus-visible,
.lang-switch a:focus-visible,
.brand:focus-visible,
.card:focus-visible,
.footer a:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.btn-gold {
  background: var(--gold);
  color: var(--deep);
  border-color: var(--gold);
}

.btn-gold:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--paper);
  /* Raised from .35: a button's visible boundary needs 3:1 (WCAG 1.4.11). */
  border-color: rgba(244, 240, 230, 0.48);
}

.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-ink {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn-ink:hover {
  background: #1c1c1c;
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

.btn-note {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-style: italic;
}

.btn-note.on-dark {
  color: var(--muted-dark);
}

/* ——— Hero ——— */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--deep);
  color: var(--paper);
  overflow: hidden;
  padding: calc(var(--header-h) + 4rem) 0 5rem;
}

/* Photographic ground for the hero, held behind a scrim so the type keeps
   AA contrast wherever the image lands. */
.hero-media {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(12, 17, 24, 0.96) 0%, rgba(12, 17, 24, 0.9) 38%, rgba(12, 17, 24, 0.55) 68%, rgba(12, 17, 24, 0.42) 100%),
    linear-gradient(to top, rgba(12, 17, 24, 0.85) 0%, transparent 45%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: min(var(--max), calc(100% - 3rem));
  margin-inline: auto;
  max-width: 52rem;
}

/* Standalone pages (language chooser, 404) reuse the hero without a nav bar. */
.hero--compact {
  min-height: 100vh;
  min-height: 100svh;
  padding: 4rem 0;
}

.hero--compact .hero-meta a {
  border-bottom: 1px solid transparent;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.hero--compact .hero-meta a:hover,
.hero--compact .hero-meta a:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--gold);
}

.eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.35rem;
}

.hero .eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.28rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--gold);
  margin-bottom: 1.1rem;
}


/* Signature mark sits in the flow above the headline: it can no longer collide
   with the h1 on short viewports the way the absolutely-placed version did. */
.hero-star {
  display: block;
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 0 1.75rem;
  z-index: 1;
}

.hero-star svg {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 3px rgba(255, 248, 230, 1))
    drop-shadow(0 0 12px rgba(232, 201, 137, 0.75))
    drop-shadow(0 0 26px rgba(184, 149, 90, 0.5));
}

.hero-star::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8rem;
  height: 8rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 244, 214, 0.42) 0%, rgba(184, 149, 90, 0.16) 34%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: star-ray 5.5s ease-in-out infinite;
}

@keyframes star-ray {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-star::before { animation: none; }
}

.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.75rem);
  font-weight: 500;
  line-height: 1.04;
  color: var(--paper);
  margin-bottom: 1.5rem;
  max-width: 22ch;
}

.hero-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  color: #D6D0C4;
  max-width: 46ch;
}

/* The four business lines, as a scannable rail rather than a pipe-separated
   run of inline text. */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--hairline-dark);
  max-width: 46rem;
}

.hero-meta li {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold-hover);
}

.page-hero {
  position: relative;
  background: var(--deep);
  color: var(--paper);
  overflow: hidden;
  padding: calc(var(--header-h) + 4.5rem) 0 4.25rem;
}

/* Hairline of light along the bottom of every page banner: ties the section
   banners back to the "Noor" idea without another image request. */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 149, 90, 0.55) 22%, rgba(232, 201, 137, 0.75) 50%, rgba(184, 149, 90, 0.55) 78%, transparent);
}

.page-hero-inner {
  position: relative;
  width: min(44rem, calc(100% - 3rem));
  margin-inline: auto;
}

.page-hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.85rem);
  margin-bottom: 1.15rem;
}

.page-hero h1.tight {
  font-size: clamp(1.55rem, 3.4vw, 2.25rem);
  line-height: 1.28;
}

.page-hero .lead {
  color: var(--muted-dark);
  font-size: 1.05rem;
}

/* ——— Sections ——— */

.section {
  padding: 5.75rem 0;
}

.section-dark {
  background: var(--deep);
  color: var(--paper);
}

.section-rule {
  width: 2.4rem;
  height: 1px;
  background: var(--gold);
  border: 0;
  margin: 0 0 1.1rem;
}

.kicker {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.75rem;
}

.section h2 {
  font-size: clamp(1.85rem, 3.2vw, 2.55rem);
  margin-bottom: 1.15rem;
}

.section h2 + .card-grid {
  margin-top: 2.65rem;
}

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


.section-intro {
  max-width: 40rem;
  color: var(--muted);
  margin-bottom: 2.75rem;
}

.section-dark .section-intro,
.section-dark .muted {
  color: var(--muted-dark);
}

/* ——— Department cards ——— */

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem;
}

.card {
  display: block;
  background: transparent;
  border: 1px solid var(--hairline);
  padding: 1.85rem 1.7rem 1.7rem;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
  color: inherit;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold);
}

.section-dark .card {
  border-color: var(--hairline-dark);
}

.card-index {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 0.85rem;
}

.card h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  margin-bottom: 0.7rem;
}

.card p {
  color: var(--muted);
  font-size: 0.98rem;
  margin: 0;
}

.section-dark .card p {
  color: var(--muted-dark);
}

.card-arrow {
  display: inline-block;
  margin-top: 1.15rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ——— Cards with a photographic header ——— */

.card--media {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--paper-sunk);
}

.section-dark .card--media {
  background: var(--deep-raised);
}

.card-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--deep);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--ease);
}

.card--media:hover .card-media img,
.card--media:focus-visible .card-media img {
  transform: scale(1.04);
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.6rem 1.6rem 1.5rem;
}

.card-body .card-arrow {
  margin-top: auto;
  padding-top: 1.15rem;
}

@media (prefers-reduced-motion: reduce) {
  .card--media:hover .card-media img,
  .card--media:focus-visible .card-media img {
    transform: none;
  }
}

/* ——— Values trio ——— */

.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}

.value h3 {
  font-size: 1.55rem;
  margin-bottom: 0.55rem;
}

.value p {
  color: var(--muted);
  margin: 0;
}

.section-dark .value p {
  color: var(--muted-dark);
}

/* ——— Founders ——— */

.founders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}

.founder {
  border: 1px solid var(--hairline);
  padding: 1.9rem 1.6rem;
}

.founder-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 1.1rem;
}

.founder h3 {
  font-size: 1.2rem;
  margin-bottom: 0.7rem;
}

.founder p {
  color: var(--muted);
  font-style: italic;
  font-size: 0.95rem;
  margin: 0;
}

.arabic-light {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.name-block p {
  margin-bottom: 1.1em;
}

/* ——— Expertise lists ——— */

.expertise {
  list-style: none;
  display: grid;
  gap: 1.6rem;
  margin-top: 0.5rem;
}

.expertise li {
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
}

.expertise h3 {
  font-size: 1.4rem;
  margin-bottom: 0.45rem;
}

.expertise p {
  color: var(--muted);
  margin: 0;
  max-width: none;
}

.expertise--oneline p {
  max-width: 46ch;
  font-size: 1.04rem;
}

.prose {
  max-width: 64ch;
}

.prose p {
  text-align: left;
}

.prose-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.45;
  color: var(--ink);
}

.prose + .prose {
  margin-top: 2.5rem;
}

.footnote {
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  max-width: 38rem;
}

/* ——— CTA band ——— */

.cta-band {
  text-align: center;
  padding: 6rem 1.5rem;
}

.cta-band h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  margin-bottom: 1.1rem;
}

.cta-lead {
  max-width: 46ch;
  margin: 0 auto 2rem;
  color: var(--muted-dark);
}

/* ——— Contact ——— */

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr;
  gap: 3.5rem;
  align-items: start;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
  color: var(--ink);
}

.req {
  color: var(--gold-on-paper);
  margin-left: 0.15rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 0.55rem 0 0.65rem;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t) var(--ease);
}

.form-group select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.5rem;
}

.form-group textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.6;
}

/* The old rule was `outline: none` at .form-group specificity, which beat the
   global :focus-visible ring and left keyboard users with only a 1px gold
   underline at 2.47:1 on ivory. */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-bottom-color: var(--focus);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-bottom-color: var(--focus);
}

.form-group.is-invalid input,
.form-group.is-invalid select,
.form-group.is-invalid textarea {
  border-bottom-color: #8a3a32;
}

.field-error {
  display: none;
  font-size: 0.78rem;
  color: #8a3a32;
  margin-top: 0.4rem;
}

/* Spoken on submit failure. Previously the only signal was a coloured
   underline, which a screen-reader user never learns about. */
.form-error-summary {
  border-left: 2px solid #8a3a32;
  background: #FDF2F1;
  padding: 0.8rem 1rem;
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: #6e2d27;
}

.form-error-summary[hidden] {
  display: none;
}

.form-group.is-invalid .field-error {
  display: block;
}

.form-success {
  display: none;
  border: 1px solid var(--gold);
  padding: 2.25rem 1.75rem;
}

.form-success.is-visible {
  display: block;
}

.form-success h2 {
  font-size: 1.85rem;
  margin-bottom: 0.6rem;
}

.contact-form.is-sent {
  display: none;
}

.details-list {
  list-style: none;
}

.details-list li {
  padding: 1.1rem 0;
  border-top: 1px solid var(--hairline);
}

.details-list li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.details-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}

.placeholder-val {
  font-style: italic;
  color: var(--muted);
}

.placeholder-caption {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.2rem;
  font-style: italic;
}

/* ——— Legal ——— */

.legal-block {
  padding: 1.75rem 0;
  border-top: 1px solid var(--hairline);
}

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

.legal-block h2 {
  font-size: 1.35rem;
  margin-bottom: 0.7rem;
}

.token {
  font-family: var(--font-body);
  font-size: 0.88em;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-style: italic;
  white-space: nowrap;
}

/* ——— Footer ——— */

.site-footer {
  background: var(--deep);
  color: var(--paper);
  padding: 3.5rem 0 2rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--hairline-dark);
}

.footer-pillars {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Columns first, then the legal line on its own row: side by side, the legal
   links read as an orphaned fourth column. */
.footer-mid {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 2rem 0 1.2rem;
}

.footer-mid .footer-legal {
  margin: 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--hairline-dark);
}

/* The footer used to stop at the section hub, leaving the five domains
   reachable only from the header dropdown. */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  flex: 1 1 auto;
}

.footer-col-title {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.9rem;
}

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

.footer-col a {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--muted-dark);
  border-bottom: 1px solid transparent;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--gold);
}

@media (max-width: 720px) {
  .footer-cols {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.footer-legal a,
.footer-bottom a {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--muted-dark);
  transition: color var(--t) var(--ease);
}

.footer-legal a:hover,
.footer-bottom a:hover {
  color: var(--gold);
}

.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted-dark);
  text-align: center;
}

.footer-bottom p {
  margin: 0;
}

/* ——— Mobile nav ——— */

@media (max-width: 860px) {
  .wrap,
  .header-inner,
  .hero-inner {
    width: min(var(--max), calc(100% - 2rem));
  }

  .wrap-narrow,
  .page-hero-inner {
    width: min(44rem, calc(100% - 2rem));
  }

  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    margin: 0;
    background: var(--deep);
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem 1.5rem 3rem;
    gap: 2rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
  }

  .site-header.is-open .site-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .nav-list a {
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    padding: 0.85rem 0;
    display: block;
  }

  .subnav {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0 0 0.4rem 0.9rem;
    display: none;
  }

  .nav-item.has-sub.is-open > .subnav,
  .nav-item.has-sub:focus-within > .subnav {
    display: block;
  }

  .nav-item.has-sub > a::after {
    display: none;
  }

  .lang-switch {
    padding-top: 0.5rem;
    border-top: 1px solid var(--hairline-dark);
  }

  .card-grid,
  .values,
  .founders,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: clamp(2.35rem, 11vw, 3.4rem);
  }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 560px) {
  .section {
    padding: 4rem 0;
  }

  .btn-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .card:hover,
  .card:focus-visible {
    transform: none;
  }
}

/* Contrast: darker gold/muted on paper, original gold on dark bands */
.kicker,
.card-index,
.details-label,
.founder-num,
.arabic-light,
.card-arrow {
  color: #7A5A2E;
}

.hero .eyebrow,
.page-hero .eyebrow,
.section-dark .kicker,
.section-dark .card-index,
.section-dark .card-arrow,
.footer-pillars {
  color: var(--gold);
}

.muted,
.section-intro,
.card p,
.value p,
.founder p,
.expertise p,
.btn-note,
.placeholder-val,
.placeholder-caption,
.footnote,
.token {
  color: #534E4A;
}

/* Every selector tinted --ink-soft above needs a counterpart here, or its text
   inherits a near-black grey onto the near-black band. `.expertise p` was
   missing, which left the "Des outils pour les entreprises" copy on the
   e-commerce pages at 2.31:1 — effectively unreadable. */
.section-dark .section-intro,
.section-dark .muted,
.section-dark .value p,
.section-dark .placeholder-val,
.section-dark .placeholder-caption,
.section-dark .expertise p,
.section-dark .founder p,
.section-dark .footnote,
.section-dark .token,
.section-dark .btn-note,
.section-dark .form-aside,
.section-dark .steps p,
.btn-note.on-dark,
.hero-lead,
.page-hero .lead,
.footer-nav a,
.footer-legal a,
.footer-bottom {
  color: var(--muted-dark);
}

.section-flush {
  padding-top: 0;
}

.section-note {
  padding-top: 3rem;
}

.nav-toggle:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

/* ——— Brand lockup ———
   Mark and wordmark are separated by a hairline rule so the two elements read
   as one deliberate lockup instead of two competing logos. */
.brand-logo {
  display: block;
  height: 34px;
  width: auto;
  object-fit: contain;
  transition: height var(--t) var(--ease);
}

.site-header.is-scrolled .brand-logo {
  height: 29px;
}

.site-footer .brand-logo {
  height: 46px;
}

.brand-rule {
  display: block;
  width: 1px;
  height: 1.6rem;
  background: var(--hairline-dark);
  flex-shrink: 0;
}

.site-footer .brand-rule {
  height: 2.1rem;
}

@media (max-width: 420px) {
  .brand-rule {
    display: none;
  }

  .brand-word {
    font-size: 0.82rem;
    letter-spacing: 0.2em;
  }
}

/* ——— Single founder ——— */
.founder--solo {
  display: grid;
  grid-template-columns: minmax(14rem, 20rem) 1fr;
  gap: 0 2rem;
  align-items: stretch;
  max-width: 56rem;
}

.founder-portrait {
  position: relative;
  width: 100%;
  min-height: 12rem;
  border: 1px solid var(--hairline);
  overflow: hidden;
  background: rgba(18, 18, 18, 0.03);
}

.founder-portrait span {
  font-family: var(--font-display);
  font-size: 1.65rem;
  letter-spacing: 0.2em;
  color: #7A5A2E;
}

.founder-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

.founder-anon {
  font-size: 0.72rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted) !important;
  margin-bottom: 0.85em;
}

.founder--solo .founder-body p {
  font-style: normal;
  font-size: 1.02rem;
  color: var(--ink-soft);
  text-align: left;
}

/* ——— Forms extras ——— */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-aside {
  margin-top: 1.35rem;
  font-size: 0.88rem;
  color: #534E4A;
}

.form-aside a {
  border-bottom: 1px solid var(--gold);
}

.form-aside a:hover,
.form-aside a:focus-visible {
  color: var(--gold);
}

.details-list a {
  border-bottom: 1px solid transparent;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.details-list a:hover,
.details-list a:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.form-group input[type="file"] {
  padding: 0.45rem 0 0.7rem;
  font-size: 0.9rem;
  color: #534E4A;
  cursor: pointer;
}

.form-group input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.4rem 0.75rem;
  margin-right: 0.85rem;
  cursor: pointer;
}

.form-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #534E4A;
}

.legal-block a {
  border-bottom: 1px solid var(--gold);
}

.legal-block a:hover,
.legal-block a:focus-visible {
  color: var(--gold);
}

@media (max-width: 860px) {
  .founder--solo {
    grid-template-columns: 1fr;
  }
}

/* ——— Direct-line float ———
   Was a saturated #25D366 circle, which read as a consumer support widget
   against the paper/gold palette. Now a quiet dark pill in the brand tokens. */

.wa-float {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 2.9rem;
  padding: 0 1.15rem;
  border: 1px solid rgba(184, 149, 90, 0.55);
  border-radius: 999px;
  background: rgba(12, 17, 24, 0.93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--gold-hover);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease);
}

.wa-float:hover,
.wa-float:focus-visible {
  border-color: var(--gold-hover);
  background: var(--deep);
  color: var(--paper);
}

.wa-float:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

.wa-float svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  fill: currentColor;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .wa-float {
    right: 1rem;
    bottom: 1rem;
    height: 2.75rem;
    padding: 0;
    width: 2.75rem;
    justify-content: center;
    gap: 0;
  }

  .wa-float .wa-label {
    display: none;
  }

  .wa-float svg {
    width: 1.2rem;
    height: 1.2rem;
  }
}


/* ——— Expertise blocks with small photos ——— */

.expertise--media li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  column-gap: 1.6rem;
  align-items: start;
}

.expertise--media img {
  width: 7.5rem;
  height: 7.5rem;
  object-fit: cover;
  display: block;
}

.expertise--media h3 {
  margin-top: 0.15rem;
}

@media (max-width: 560px) {
  .expertise--media li {
    grid-template-columns: 4.75rem 1fr;
    column-gap: 1rem;
  }
  .expertise--media img {
    width: 4.75rem;
    height: 4.75rem;
  }
}

/* ——— Proof band ———
   Load-bearing facts, stated plainly. A holding page with no verifiable
   numbers reads as a brochure; this is where they go. */

.proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 2rem;
}

.proof-item {
  border-top: 1px solid var(--hairline-dark);
  padding-top: 1.35rem;
}

.section:not(.section-dark) .proof-item {
  border-top-color: var(--hairline);
}

.proof-figure {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.section:not(.section-dark) .proof-figure {
  color: var(--gold-on-paper);
}

.proof-label {
  display: block;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted-dark);
}

.section:not(.section-dark) .proof-label {
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .proof {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ——— Numbered process ——— */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem 2rem;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  border-top: 1px solid var(--hairline);
  padding-top: 1.35rem;
}

.section-dark .steps li {
  border-top-color: var(--hairline-dark);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--gold-on-paper);
  margin-bottom: 0.75rem;
}

.section-dark .steps li::before {
  color: var(--gold);
}

.steps h3 {
  font-size: 1.25rem;
  margin-bottom: 0.4rem;
}

.steps p {
  font-size: 0.96rem;
  color: var(--ink-soft);
  margin: 0;
}

.section-dark .steps p {
  color: var(--muted-dark);
}

@media (max-width: 860px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* ——— Pull quote ——— */

.pull-quote {
  margin: 0;
  max-width: 40ch;
}

.pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  line-height: 1.35;
  font-style: italic;
  color: var(--paper);
  margin-bottom: 1rem;
}

.pull-quote figcaption {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ——— Scroll reveal ———
   Progressive enhancement: the class is only applied once JS confirms
   IntersectionObserver support, so content is never hidden without it. */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ——— Print ———
   Legal and privacy pages get printed and filed. Drop the furniture, keep the
   text readable on paper, and expose link targets. */

@media print {
  .site-header,
  .nav-toggle,
  .site-nav,
  .wa-float,
  .skip-link,
  .hero-media,
  .hero-star,
  .cta-band {
    display: none !important;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  .section,
  .page-hero,
  .hero {
    padding: 0 0 1.25rem !important;
    min-height: 0 !important;
    background: #fff !important;
    color: #000 !important;
  }

  .wrap,
  .wrap-narrow,
  .page-hero-inner,
  .hero-inner {
    width: 100% !important;
    max-width: none !important;
  }

  .section-dark,
  .section-dark .section-intro,
  .section-dark .muted,
  .section-dark p,
  .page-hero .lead,
  .hero-lead {
    background: #fff !important;
    color: #000 !important;
  }

  .kicker,
  .card-index,
  .eyebrow,
  .proof-figure {
    color: #6b4d22 !important;
  }

  .js-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .card,
  .card--media {
    break-inside: avoid;
    border-color: #bbb !important;
    background: #fff !important;
  }

  .card-media,
  .expertise--media img,
  .founder-portrait {
    display: none !important;
  }

  .expertise--media li {
    grid-template-columns: 1fr !important;
  }

  a[href^="http"]::after,
  a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
    color: #000 !important;
  }
}