/* =====================================================================
   Lev-Koren, Shoshani, Zini, Benaim — Law & Notary office
   Design system: brand palette drawn from the firm's logo —
   deep navy (authority) · turquoise (accents/links) · gold (restrained
   accent: rules, small details, hover states — never large fills) ·
   white (generous space). Luxurious yet restrained, modern, readable.
   Bilingual (RTL/LTR).
   ===================================================================== */

/* ---------- Brand palette (client questionnaire §D — no brand book;
   these custom properties are the single source of truth) ---------- */
:root {
  --c-navy: #13293F;
  /* deep navy — authority (dark sections) */
  --c-navy-deep: #0D1E30;
  /* deepest navy (footer) */
  --c-navy-raised: #18324B;
  /* raised navy panel */
  --c-navy-card: #1F3D5A;
  /* navy card */
  --c-navy-line: #33506B;
  /* hairline on navy */
  --c-turquoise: #2FA9A2;
  /* turquoise — accents & links */
  --c-turquoise-light: #7FD0CB;
  /* turquoise on dark surfaces */
  --c-turquoise-dark: #176660;
  /* text-grade turquoise on light surfaces (AA on cream) */
  --c-turquoise-soft: rgba(47, 169, 162, .14);
  --c-gold: #C9A961;
  /* gold — decorative rules & small details only */
  --c-gold-light: #DFC98F;
  /* gold on dark surfaces */
  --c-gold-dark: #6E5A26;
  /* text-grade gold on light surfaces (AA on cream) */
  --c-gold-soft: rgba(201, 169, 97, .13);
  /* light ramp = CREAM ONLY (redesign §2): flat bright white dropped as a
     surface; one rich warm cream family carries every light background */
  --c-white: #F7F1E4;
  /* raised cream (cards, inputs — replaces #fff) */
  --c-white-warm: #F2EADA;
  /* page cream */
  --c-white-deep: #EAE0CB;
  --c-stone: #E0D4BA;
  --c-stone-line: #D3C5A6;
}

/* ---------- Tokens (legacy names mapped onto the brand palette) ---------- */
:root {
  /* surfaces */
  --ink: var(--c-navy);
  /* deep navy (dark sections) */
  --ink-1: var(--c-navy-raised);
  /* raised navy */
  --ink-2: var(--c-navy-card);
  /* card navy */
  --ink-line: var(--c-navy-line);
  /* hairline on dark */
  --paper: var(--c-white-warm);
  /* warm white */
  --paper-1: var(--c-white-deep);
  /* deep white */
  --paper-2: var(--c-stone);
  /* light stone */
  --paper-line: var(--c-stone-line);
  /* hairline on light */

  /* accent — gold (var name kept as --copper so existing rules pick it up) */
  --copper: var(--c-gold);
  --copper-light: var(--c-gold-light);
  --copper-dark: var(--c-gold-dark);
  --copper-soft: var(--c-gold-soft);

  /* text */
  --on-dark: #F4F6F7;
  --on-dark-muted: #A9B7C3;
  --on-light: #22313D;
  --on-light-muted: #53616C;

  /* type */
  --sans: "Heebo", "Assistant", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* display — Suez One: Hebrew-native display serif, one confident weight
     (Google Fonts, hebrew subset). The centrepiece of the redesign.
     (Bona Nova and Frank Ruhl Libre were both rejected — do not swap back.) */
  --serif: "Suez One", "David Libre", "Times New Roman", serif;
  /* editorial display scale (redesign §3a — real contrast against body) */
  --display-1: clamp(2.5rem, 1.6rem + 3.6vw, 4.9rem);
  --display-2: clamp(1.9rem, 1.5rem + 2vw, 3.2rem);
  /* Suez One is a wide, heavy display cut — sized so hero lines never wrap */

  /* fluid scale */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
  --step-5: clamp(3.2rem, 2.2rem + 5vw, 6.4rem);

  /* layout */
  --maxw: 1240px;
  --gut: clamp(1.1rem, 0.6rem + 2.4vw, 3rem);
  --radius: 8px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* "expensive" ease-out-expo — slow, confident settling. No default ease anywhere. */
  --header-shrunk: 56px;
  /* shrunk sticky-header height (sticky table offsets) */
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box
}

* {
  margin: 0
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip, NOT hidden: overflow-x:hidden creates a scroll container that
     silently kills position:sticky on the header (the "nav disappears when
     I scroll" bug). clip prevents horizontal overflow without that side effect. */
  overflow-x: clip;
  /* in-page anchors land below the sticky header */
  scroll-padding-top: calc(var(--header-shrunk, 56px) + 1.25rem)
}

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

body {
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--on-light);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none
}

ul {
  list-style: none;
  padding: 0
}

h1,
h2,
h3,
h4 {
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.01em
}

:focus-visible {
  outline: 2px solid var(--c-turquoise-dark);
  outline-offset: 3px;
  border-radius: 2px
}

/* Tabler icon font — ensure glyphs render regardless of CDN base selector */
.ti {
  font-family: "tabler-icons" !important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: never
}

/* ---------- Bilingual visibility + direction ---------- */
html[data-lang="he"] [lang="en"] {
  display: none !important
}

html[data-lang="en"] [lang="he"] {
  display: none !important
}

/* logical properties below handle RTL<->LTR mirroring automatically */

/* ---------- Helpers ---------- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut)
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper);
  display: inline-flex;
  align-items: center;
  gap: .7em;
}

.eyebrow::before {
  content: "";
  width: 2.4em;
  height: 1px;
  background: var(--copper)
}

.skip-link {
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  z-index: 200;
  transform: translateY(-130%);
  background: var(--ink);
  color: var(--on-dark);
  padding: .7rem 1.2rem;
  border-radius: 0 0 var(--radius) var(--radius);
}

.skip-link:focus {
  transform: none
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0
}

/* number/lockup direction safety */
.ltr-num {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: .04em;
  padding: .95em 1.7em;
  border-radius: var(--radius);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
}

.btn .ar {
  transition: transform .3s var(--ease)
}

html[dir="rtl"] .btn .ar {
  transform: scaleX(-1)
}

.btn:hover {
  transform: translateY(-2px)
}

.btn:hover .ar {
  transform: translateX(.25em)
}

html[dir="rtl"] .btn:hover .ar {
  transform: scaleX(-1) translateX(.25em)
}

/* monochrome buttons: black on light surfaces, white on dark surfaces */
.btn-primary {
  background: var(--ink);
  color: #fff
}

.btn-primary:hover {
  background: #000;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .5)
}

.hero .btn-primary,
.site-header .btn-primary,
.nav .btn-primary,
.section-dark .btn-primary,
.section-deep .btn-primary,
.cta-band .btn-primary {
  background: var(--paper);
  color: var(--ink)
}

.hero .btn-primary:hover,
.site-header .btn-primary:hover,
.nav .btn-primary:hover,
.section-dark .btn-primary:hover,
.section-deep .btn-primary:hover,
.cta-band .btn-primary:hover {
  background: #fff;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .55)
}

.btn-ghost {
  border: 1px solid currentColor;
  color: var(--on-dark)
}

.btn-ghost:hover {
  background: var(--on-dark);
  color: var(--ink)
}

.btn-dark {
  background: var(--ink);
  color: var(--on-dark)
}

.btn-dark:hover {
  background: var(--ink-2)
}

/* on the (now dark) CTA band, "dark" buttons flip to cream */
.cta-band .btn-dark {
  background: var(--paper);
  color: var(--ink)
}

.cta-band .btn-dark:hover {
  background: #fff
}

/* link with animated underline */
.ulink {
  position: relative;
  color: var(--c-turquoise-dark);
  font-weight: 700
}

.ulink::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -3px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .3s var(--ease)
}

.ulink:hover::after {
  transform: scaleX(1)
}

/* ============================ HEADER ============================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(19, 41, 63, .55);
  border-bottom: 1px solid rgba(241, 237, 229, .08);
  transition: background .4s var(--ease), padding .3s var(--ease), box-shadow .4s var(--ease);
}

/* the glass blur lives on a pseudo-element: backdrop-filter on the header
   itself would make it the containing block for the fixed mobile drawer,
   trapping the drawer inside the header box */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
}

.site-header.shrink {
  background: rgba(19, 41, 63, .92);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55)
}

.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
  transition: padding .3s var(--ease);
}

.site-header.shrink .bar {
  padding-block: .65rem
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--on-dark)
}

.brand svg {
  height: 38px;
  width: auto;
  transition: height .3s var(--ease)
}

.site-header.shrink .brand svg {
  height: 32px
}

.brand .bt {
  display: flex;
  flex-direction: column;
  line-height: 1.05
}

.brand .bt b {
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em
}

.brand .bt span {
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-dark-muted)
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.1vw, 2.5rem)
}

.nav a {
  color: var(--on-dark);
  font-size: .94rem;
  font-weight: 500;
  letter-spacing: .03em;
  position: relative;
  padding-block: .45rem;
  opacity: .82;
  transition: color .35s var(--ease), opacity .35s var(--ease)
}

.nav a:hover {
  opacity: 1;
  color: var(--c-turquoise-light)
}

.nav a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--c-turquoise-light);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform .45s var(--ease)
}

.nav a:hover::after {
  transform: scaleX(1);
  transform-origin: inline-start
}

.nav a[aria-current="page"] {
  opacity: 1;
  color: var(--c-turquoise-light);
  font-weight: 700
}

.nav a[aria-current="page"]::after {
  transform: scaleX(1);
  height: 2px
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem
}

.lang-toggle {
  color: var(--on-dark);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: .45em .8em;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: .4em;
  transition: border-color .2s, color .2s
}

.lang-toggle:hover {
  border-color: var(--c-turquoise);
  color: var(--c-turquoise-light)
}

.header-cta {
  white-space: nowrap
}

/* single CTA: the nav-list copy is hidden on desktop (header-cta is the one shown) */
.nav .nav-cta {
  display: none
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  color: var(--on-dark)
}

.nav-toggle svg {
  margin-inline: auto
}

@media (max-width:920px) {
  .header-cta {
    display: none
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center
  }

  .nav {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(82vw, 360px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: .4rem;
    background: var(--ink-1);
    border-inline-start: 1px solid var(--ink-line);
    padding: min(14vh, 7rem) 2rem 2rem;
    overflow-y: auto;
    transform: translateX(110%);
    /* closed drawer must not be focusable/readable — visibility flips after
       the slide-out transition ends */
    visibility: hidden;
    transition: transform .4s var(--ease), visibility 0s .4s;
    z-index: 130;
  }

  html[dir="rtl"] .nav {
    transform: translateX(-110%)
  }

  .nav.open,
  html[dir="rtl"] .nav.open {
    /* the RTL selector must out-specify html[dir="rtl"] .nav above */
    transform: translateX(0);
    visibility: visible;
    transition: transform .4s var(--ease)
  }

  .nav a {
    font-size: 1.4rem;
    font-weight: 700;
    padding-block: .6rem;
    border-bottom: 1px solid var(--ink-line)
  }

  .nav a::after {
    display: none
  }

  .nav .nav-cta {
    display: inline-flex;
    margin-top: 1rem;
    border-bottom: none;
    justify-content: center
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 120
  }

  .nav-backdrop.show {
    opacity: 1;
    visibility: visible
  }
}

/* ============================ HERO (blueprint skyline) ============================
   Open typographic composition on graphite; the firm's actual work — the towers
   it accompanies — drawn as a hairline greige "blueprint" skyline that sketches
   itself in on load, windows lighting up after. No stock imagery.            */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--on-dark);
  overflow: hidden;
  background: var(--ink)
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 75% at 82% 6%, rgba(201, 169, 97, .10), transparent 55%),
    radial-gradient(85% 60% at 8% 100%, rgba(255, 255, 255, .03), transparent 60%);
}

.hero .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  /* balanced top/bottom — the hero settles on true vertical centre */
  padding-block: clamp(6rem, 13vh, 9rem)
}

/* --hoff shifts the copy entrance behind the intro curtain on first visit */
.hero-content {
  max-width: 56rem;
  --hoff: 0s
}

html:not(.intro-skip) .hero-content {
  --hoff: 1.05s
}

.hero-content .eyebrow {
  margin-bottom: 1.4rem;
  animation: heroFade .7s var(--ease) calc(.15s + var(--hoff)) both
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.9rem + 2.9vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 1.2rem
}

.hero h1 .accent {
  color: var(--copper-light)
}

/* masked line-by-line rise */
.hero h1 .hl {
  display: block;
  overflow: hidden;
  padding-block: .09em;
  margin-block: -.09em
}

.hero h1 .hl-in {
  display: block;
  transform: translateY(118%);
  animation: heroRise .95s var(--ease) both;
  /* compositor-only, crisp text during motion */
  will-change: transform, opacity;
  backface-visibility: hidden
}

/* FOUT guard: with JS, the headline waits for the display font so glyphs
   never swap mid-rise (html.fonts-ready set by main.js via document.fonts.ready,
   with a timeout fallback). Without JS the animation runs immediately. */
html.js:not(.fonts-ready) .hero h1 .hl-in {
  animation-play-state: paused
}

.hero h1 .hl:nth-child(1) .hl-in {
  animation-delay: calc(.25s + var(--hoff))
}

.hero h1 .hl:nth-child(2) .hl-in {
  animation-delay: calc(.42s + var(--hoff))
}

@keyframes heroRise {
  to {
    transform: translateY(0)
  }
}

@keyframes heroFade {
  from {
    opacity: 0;
    transform: translateY(18px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.hero .lead {
  font-size: var(--step-1);
  color: var(--on-dark);
  max-width: 56ch;
  font-weight: 300;
  margin-bottom: 1.7rem;
  animation: heroFade .8s var(--ease) calc(.68s + var(--hoff)) both
}

.hero .tagline {
  font-weight: 500;
  color: #fff
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.7rem;
  animation: heroFade .8s var(--ease) calc(.84s + var(--hoff)) both
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 1.9rem;
  color: var(--on-dark);
  font-size: var(--step--1);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(241, 237, 229, .14);
  animation: heroFade .8s var(--ease) calc(1s + var(--hoff)) both;
  position: relative
}

/* soft graphite wash so the skyline linework recedes behind the stats */
.hero-meta::before {
  content: "";
  position: absolute;
  inset: -1.2rem -2rem -1.6rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(130% 130% at 50% 50%, rgba(19, 41, 63, .92) 40%, transparent 78%)
}

.hero-meta span {
  display: flex;
  flex-direction: column;
  line-height: 1.15
}

.hero-meta b {
  color: var(--copper-light);
  font-weight: 700;
  font-size: var(--step-2);
  font-family: var(--serif)
}

/* ---- skyline artwork ---- */
.hero-skyline {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  height: clamp(190px, 36vh, 390px);
  pointer-events: none;
  will-change: transform
}

.hero-skyline svg {
  width: 100%;
  height: 100%;
  display: block
}

.sk-l {
  fill: none;
  stroke: #7FD0CB;
  stroke-opacity: .5;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke
}

.sk-b {
  fill: none;
  stroke: #7FD0CB;
  stroke-opacity: .18;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke
}

.sk-ground {
  stroke-opacity: .4
}

.sk-d {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: skDraw 1.5s var(--ease) both
}

@keyframes skDraw {
  to {
    stroke-dashoffset: 0
  }
}

.sk-g1 .sk-d {
  animation-delay: .45s
}

.sk-g2 .sk-d {
  animation-delay: .9s
}

.sk-g3 .sk-d {
  animation-delay: 1.2s
}

.sk-g4 .sk-d {
  animation-delay: 1.45s
}

.sk-g5 .sk-d {
  animation-delay: 1.7s
}

.sk-g6 .sk-d {
  animation-delay: 2s
}

.sk-win rect {
  fill: #DFC98F;
  opacity: 0;
  animation: winOn .6s var(--ease) 2.7s both
}

.sk-win rect:nth-child(2n) {
  animation-delay: 3s
}

.sk-win rect:nth-child(3n) {
  animation-delay: 3.25s
}

.sk-win rect:nth-child(5n) {
  animation-delay: 2.55s
}

.sk-win rect:nth-child(7n) {
  animation-delay: 3.5s
}

@keyframes winOn {
  to {
    opacity: .8
  }
}

/* aviation beacon on the landmark tower */
.sk-beacon {
  fill: #DFC98F;
  opacity: .15;
  animation: beacon 2.8s ease-in-out 3.2s infinite
}

@keyframes beacon {

  0%,
  100% {
    opacity: .15
  }

  50% {
    opacity: .95
  }
}

/* crane hook sways gently */
.sk-hook {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: hookSway 7s ease-in-out 3.5s infinite alternate
}

@keyframes hookSway {
  from {
    transform: rotate(-1.4deg)
  }

  to {
    transform: rotate(1.4deg)
  }
}

/* (the hero scroll indicator was removed 2026-08 — markup, styles and its
   animations are gone; the hero centres itself with balanced padding) */

@media (max-width:880px) {
  .hero .wrap {
    padding-block: clamp(6.5rem, 14vh, 9rem)
  }
}

@media (max-width:600px) {
  .hero {
    min-height: 96svh
  }

  .hero-skyline {
    height: clamp(150px, 26vh, 240px)
  }
}

@media (prefers-reduced-motion:reduce) {

  .hero-content .eyebrow,
  .hero h1 .hl-in,
  .hero .lead,
  .hero-cta,
  .hero-meta {
    animation: none;
    transform: none
  }

  .sk-d {
    animation: none;
    stroke-dashoffset: 0
  }

  .sk-win rect {
    animation: none;
    opacity: .8
  }

  .sk-beacon {
    animation: none;
    opacity: .7
  }

  .sk-hook {
    animation: none
  }

}

/* ============================ SECTIONS ============================ */
.section {
  padding-block: clamp(3.5rem, 7vw, 6.5rem)
}

.section.tight {
  padding-block: clamp(2.5rem, 5vw, 4.5rem)
}

.section-dark {
  background: var(--ink);
  color: var(--on-dark)
}

.section-deep {
  background: var(--ink-1);
  color: var(--on-dark)
}

.section-paper {
  background: var(--paper)
}

.section-paper-2 {
  background: var(--paper-1)
}

.section-head {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 4vw, 3.4rem)
}

.section-head.center {
  margin-inline: auto;
  text-align: center
}

.section-head h2 {
  font-family: var(--serif);
  font-size: var(--step-3);
  margin-block: 1rem .6rem
}

.section-head p {
  color: var(--on-light-muted);
  font-size: var(--step-1);
  font-weight: 300
}

.section-dark .section-head p,
.section-deep .section-head p {
  color: var(--on-dark-muted)
}

.section-num {
  font-family: var(--serif);
  color: var(--copper);
  font-size: var(--step-1);
  opacity: .8
}

/* ---------- Reasons / feature trio ---------- */
.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem
}

.feature {
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease)
}

.feature::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--copper);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s var(--ease)
}

.feature:hover {
  transform: translateY(-5px);
  border-color: var(--copper-dark)
}

.feature:hover::before {
  transform: scaleY(1)
}

.feature .ic {
  color: var(--c-turquoise-light);
  font-size: 1.9rem;
  margin-bottom: 1rem
}

.feature h3 {
  font-size: var(--step-1);
  margin-bottom: .5rem;
  color: var(--on-dark)
}

.feature p {
  color: var(--on-dark-muted);
  font-size: var(--step--1);
  line-height: 1.7
}

/* ---------- Why-us footer: partners row + links ---------- */
.why-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--ink-line)
}

.partners {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap
}

.partners .avatars {
  display: flex
}

.partners .avatars .av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin-inline-start: -12px;
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  border: 2px solid var(--ink-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--copper-light);
  font-size: .95rem
}

.partners .avatars .av:first-child {
  margin-inline-start: 0
}

.partners .ptxt {
  display: flex;
  flex-direction: column;
  line-height: 1.25
}

.partners .ptxt b {
  color: var(--on-dark);
  font-weight: 700;
  font-size: var(--step-0)
}

.partners .ptxt span {
  color: var(--on-dark-muted);
  font-size: var(--step--1)
}

.why-links {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem
}

@media (max-width:560px) {
  .why-foot {
    flex-direction: column;
    align-items: flex-start
  }
}

/* ---------- Stats ---------- */
/* explicit cells — a stat may NEVER bleed into its neighbour. 4-up on
   desktop, 2×2 from tablet down (wrap, don't shrink illegibly). */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow: hidden
}

@media (max-width:980px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

.stat {
  background: var(--ink);
  padding: 2.2rem 1.5rem;
  text-align: center
}

.stat .num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--step-4);
  color: var(--copper-light);
  line-height: 1
}

/* prefix/suffix symbols ("+", "~") are part of the number: same gold, same
   face, optically smaller and top-aligned — never a full-size white glyph */
.stat .num .suffix {
  color: inherit;
  font-family: inherit;
  font-size: .55em;
  vertical-align: .45em;
  margin-inline: .06em
}

.stat .lbl {
  margin-top: .7rem;
  color: var(--on-dark-muted);
  font-size: var(--step--1);
  letter-spacing: .02em
}

/* ---------- Practice grid ---------- */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem
}

.practice {
  display: block;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 1.8rem 1.7rem;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease)
}

.section-paper-2 .practice {
  background: #fff
}

.practice .pn {
  font-family: var(--serif);
  color: var(--copper);
  font-size: .95rem;
  opacity: .7
}

.practice .ic {
  font-size: 1.7rem;
  color: var(--c-turquoise-dark);
  margin-block: .5rem .9rem
}

.practice h2,
.practice h3 {
  font-size: var(--step-1);
  margin-bottom: .55rem;
  line-height: 1.2;
  transition: color .3s
}

.practice p {
  color: var(--on-light-muted);
  font-size: var(--step--1);
  line-height: 1.65
}

.practice .go {
  margin-top: 1.1rem;
  color: var(--copper-dark);
  font-weight: 700;
  font-size: var(--step--1);
  display: inline-flex;
  align-items: center;
  gap: .4em;
  opacity: 0;
  transform: translateX(-6px);
  transition: .3s var(--ease)
}

html[dir="rtl"] .practice .go {
  transform: translateX(6px)
}

.practice:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -28px rgba(20, 22, 26, .5)
}

.practice:hover h3 {
  color: var(--c-turquoise-dark)
}

.practice:hover .go {
  opacity: 1;
  transform: translateX(0)
}

.practice .go .ar {
  transition: transform .3s
}

html[dir="rtl"] .practice .go .ar {
  transform: scaleX(-1)
}

/* ---------- Split (about teaser etc.) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center
}

.split.narrow {
  grid-template-columns: 1.1fr .9fr
}

@media (max-width:820px) {

  .split,
  .split.narrow {
    grid-template-columns: 1fr
  }
}

.prose p {
  margin-bottom: 1.1rem;
  color: inherit
}

.prose p:last-child {
  margin-bottom: 0
}

.section-paper .prose p,
.section-paper-2 .prose p {
  color: var(--on-light-muted)
}

.prose h2,
.prose h3 {
  font-family: var(--serif);
  font-size: var(--step-2);
  margin-block: 1.6rem .7rem
}

.checklist li {
  position: relative;
  padding-inline-start: 1.9em;
  margin-bottom: .7rem;
  color: var(--on-light-muted)
}

.checklist li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  top: .05em;
  color: var(--copper);
  font-weight: 700
}

.section-dark .checklist li,
.section-deep .checklist li {
  color: var(--on-dark-muted)
}

/* image frame placeholder */
.frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  aspect-ratio: 4/3;
  border: 1px solid var(--paper-line)
}

.frame .ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  color: var(--on-dark-muted);
  text-align: center;
  padding: 1rem
}

.frame .ph i {
  font-size: 2.2rem;
  color: var(--copper)
}

.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 169, 97, .25);
  border-radius: var(--radius);
  pointer-events: none
}

/* ---------- Testimonials ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.3rem
}

.quote {
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  position: relative
}

.quote .mark {
  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: .6;
  color: var(--copper);
  opacity: .5;
  height: .5em
}

.quote p {
  color: var(--on-dark);
  font-size: var(--step-0);
  line-height: 1.7;
  margin-block: 1rem 1.4rem
}

.quote .who {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--on-dark-muted);
  font-size: var(--step--1)
}

.quote .who .av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--copper-soft);
  color: var(--copper-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 1px solid var(--copper-dark)
}

.quote .stars {
  color: var(--copper);
  letter-spacing: .15em;
  font-size: .85rem;
  margin-bottom: .2rem
}

/* ---------- Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.3rem
}

.member {
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease)
}

.section-paper-2 .member {
  background: #fff
}

.member:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -28px rgba(20, 22, 26, .45)
}

.member .photo {
  aspect-ratio: 1/1.12;
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}

.member .photo .initials {
  font-family: var(--serif);
  font-size: 2.6rem;
  color: var(--copper-light);
  font-weight: 700
}

.member .photo::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .35s var(--ease)
}

.member:hover .photo::after {
  transform: scaleX(1)
}

.member .info {
  padding: 1.1rem 1.2rem 1.4rem
}

.member .info h3 {
  font-size: var(--step-1);
  margin-bottom: .15rem
}

.member .role {
  color: var(--copper-dark);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  margin-bottom: .6rem
}

.member .spec {
  color: var(--on-light-muted);
  font-size: var(--step--1);
  line-height: 1.55
}

.team-group-title {
  font-family: var(--serif);
  font-size: var(--step-2);
  margin-block: clamp(2rem, 4vw, 3rem) 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem
}

.team-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--paper-line)
}

/* ---------- Projects table ---------- */
.proj-tablewrap {
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff
}

.proj-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1)
}

.proj-table th,
.proj-table td {
  padding: .85rem 1rem;
  text-align: start;
  border-bottom: 1px solid var(--paper-line)
}

.proj-table thead th {
  background: var(--ink);
  color: var(--on-dark);
  font-weight: 700;
  letter-spacing: .03em;
  position: sticky;
  top: var(--header-shrunk, 56px);
  white-space: nowrap
}

.proj-table tbody tr {
  transition: background .15s
}

.proj-table tbody tr:hover {
  background: var(--paper-1)
}

.proj-table tbody tr:last-child td {
  border-bottom: none
}

.proj-table .pname {
  font-weight: 700;
  color: var(--on-light)
}

.tag-pill {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .25em .7em;
  border-radius: 20px;
  background: var(--copper-soft);
  color: var(--copper-dark);
  white-space: nowrap
}

.tag-pill.t-done {
  background: rgba(29, 158, 117, .14);
  color: #0f6e56
}

.tag-pill.t-plan {
  background: rgba(55, 138, 221, .14);
  color: #185fa5
}

.proj-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.4rem
}

.proj-controls button {
  border: 1px solid var(--paper-line);
  border-radius: 20px;
  padding: .45em 1.1em;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--on-light-muted);
  transition: .2s
}

.proj-controls button:hover {
  border-color: var(--copper);
  color: var(--copper-dark)
}

.proj-controls button.active {
  background: var(--ink);
  color: var(--on-dark);
  border-color: var(--ink)
}

/* selected projects marquee (home) */
.proj-marquee {
  display: flex;
  gap: 1rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)
}

.proj-track {
  display: flex;
  gap: 1rem;
  animation: scrollx 42s linear infinite
}

.proj-marquee:hover .proj-track,
.proj-marquee:focus-within .proj-track,
.proj-marquee.paused .proj-track {
  animation-play-state: paused
}

/* explicit pause control (WCAG 2.2.2 — hover alone isn't a mechanism) */
.marquee-pause {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-block-start: 1rem;
  padding: .5rem 1rem;
  min-block-size: 44px;
  background: transparent;
  border: 1px solid var(--ink-line);
  border-radius: 20px;
  color: var(--on-dark-muted);
  font-family: var(--sans);
  font-size: var(--step--1);
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease)
}

.marquee-pause:hover {
  color: var(--c-white-warm);
  border-color: var(--c-turquoise-light)
}

.marquee-pause .lbl-play,
.marquee-pause.is-paused .lbl-pause {
  display: none
}

.marquee-pause.is-paused .lbl-play {
  display: inline
}

@keyframes scrollx {
  to {
    transform: translateX(calc(-50% - .5rem))
  }
}

html[dir="rtl"] .proj-track {
  animation-direction: reverse
}

.proj-card {
  flex: 0 0 auto;
  width: 230px;
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 1.3rem
}

.proj-card .city {
  color: var(--copper-light);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase
}

.proj-card h4,
.proj-card .pname {
  color: var(--on-dark);
  font-size: var(--step-1);
  margin-block: .4rem .7rem;
  font-family: var(--serif)
}

.proj-card .meta {
  color: var(--on-dark-muted);
  font-size: var(--step--1)
}

@media (prefers-reduced-motion:reduce) {
  .proj-track {
    animation: none;
    flex-wrap: wrap
  }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink);
  color: var(--on-dark);
  text-align: center;
  position: relative;
  isolation: isolate
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(90% 120% at 50% 0%, rgba(255, 255, 255, .05), transparent 60%)
}

.cta-band h2 {
  font-family: var(--serif);
  font-size: var(--step-3);
  margin-bottom: .7rem
}

.cta-band p {
  color: var(--on-dark-muted);
  font-size: var(--step-1);
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: 1.8rem
}

.cta-band .btn-dark:hover {
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .8)
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem)
}

@media (max-width:820px) {
  .contact-grid {
    grid-template-columns: 1fr
  }
}

.info-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--ink-line)
}

.info-row:last-child {
  border-bottom: none
}

.info-row .ic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-turquoise-soft);
  color: var(--c-turquoise-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: 1px solid var(--c-turquoise-dark)
}

.info-row .lbl {
  color: var(--on-dark-muted);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase
}

.info-row .val {
  color: var(--on-dark);
  font-size: var(--step-0)
}

.info-row a.val:hover {
  color: var(--copper-light)
}

.form {
  display: grid;
  gap: 1rem
}

.form .field {
  display: flex;
  flex-direction: column;
  gap: .4rem
}

.form label {
  font-size: var(--step--1);
  color: var(--on-light-muted);
  font-weight: 500
}

.form input,
.form textarea,
.form select {
  font: inherit;
  font-size: var(--step-0);
  padding: .85em 1em;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--on-light);
  transition: border-color .2s, box-shadow .2s
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: 2px solid var(--c-turquoise-dark);
  outline-offset: 1px;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px var(--copper-soft)
}

/* invalid state — shown only after the user has interacted with the field */
.form input:user-invalid,
.form textarea:user-invalid,
.form select:user-invalid {
  border-color: #B4453A;
  box-shadow: 0 0 0 3px rgba(180, 69, 58, .12)
}

/* bilingual required-fields hint, CSS-only via :has() */
.form-err {
  display: none;
  color: #8f372e;
  background: rgba(180, 69, 58, .08);
  border: 1px solid rgba(180, 69, 58, .3);
  padding: .7rem 1rem;
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 500
}

.form:has(:user-invalid) .form-err,
.form-err.show {
  display: block
}

/* JS-driven invalid state (aria-invalid wiring in main.js) — mirrors
   :user-invalid for browsers without it */
.form .field.invalid input,
.form .field.invalid textarea,
.form .field.invalid select {
  border-color: #B4453A;
  box-shadow: 0 0 0 3px rgba(180, 69, 58, .12)
}

.form .field.invalid .f-hint {
  display: block;
  color: #8f372e
}

.form .row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}

@media (max-width:520px) {
  .form .row2 {
    grid-template-columns: 1fr
  }
}

.form-note {
  font-size: .8rem;
  color: var(--on-light-muted)
}

.form-ok {
  display: none;
  background: rgba(29, 158, 117, .12);
  color: #0f6e56;
  border: 1px solid rgba(15, 110, 86, .3);
  padding: 1rem;
  border-radius: var(--radius);
  font-weight: 500
}

.form-ok.show {
  display: block
}

/* honest "form not wired yet" notice — replaces the old fake success */
.form-pending {
  display: none;
  background: rgba(201, 169, 97, .12);
  color: #6d5926;
  border: 1px solid rgba(126, 103, 46, .35);
  padding: 1rem;
  border-radius: var(--radius);
  font-weight: 500
}

.form-pending a {
  font-weight: 700;
  text-decoration: underline
}

.form-pending.show {
  display: block
}

/* ============================ FOOTER ============================ */
.site-footer {
  background: var(--c-navy-deep);
  color: var(--on-dark);
  padding-block: clamp(3rem, 5vw, 4.5rem) 0;
  border-top: 1px solid var(--ink-line)
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--ink-line)
}

@media (max-width:780px) {
  .footer-top {
    grid-template-columns: 1fr
  }
}

.footer-brand .brand {
  margin-bottom: 1.2rem
}

.footer-brand p {
  color: var(--on-dark-muted);
  font-size: var(--step--1);
  max-width: 38ch
}

.footer-col h4 {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper-light);
  margin-bottom: 1.1rem
}

.footer-col li {
  margin-bottom: .6rem
}

.footer-col a {
  color: var(--on-dark-muted);
  font-size: var(--step--1);
  transition: color .2s
}

.footer-col a:hover {
  color: var(--on-dark)
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.6rem;
  color: var(--on-dark-muted);
  font-size: .8rem
}

.footer-bottom a {
  color: var(--on-dark-muted)
}

.footer-bottom a:hover {
  color: var(--c-turquoise-light)
}

/* ============================ Reveal animation ============================
   hiding is scoped to html.js (set by the inline head script) AND :not(.in),
   so content is visible when JS is blocked — and the .in state always wins
   (never give the hidden rule higher specificity than the shown state) */
html.js .reveal:not(.in) {
  opacity: 0;
  transform: translateY(26px)
}

.reveal {
  transition: opacity .7s var(--ease), transform .7s var(--ease)
}

.reveal.in {
  opacity: 1;
  transform: none
}

.reveal.d1 {
  transition-delay: .08s
}

.reveal.d2 {
  transition-delay: .16s
}

.reveal.d3 {
  transition-delay: .24s
}

.reveal.d4 {
  transition-delay: .32s
}

@media (prefers-reduced-motion:reduce) {
  html.js .reveal:not(.in) {
    opacity: 1;
    transform: none;
    transition: none
  }
}

/* ============================ utilities ============================ */
:target {
  scroll-margin-top: 6rem
}

.center {
  text-align: center
}

.mt-s {
  margin-top: 1rem
}

.mt-m {
  margin-top: 1.8rem
}

.mt-l {
  margin-top: 2.6rem
}

.maxw-prose {
  max-width: 64ch
}

.divider {
  height: 1px;
  background: var(--ink-line);
  border: none
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: var(--copper-soft);
  color: var(--copper-light);
  border: 1px solid var(--copper-dark);
  border-radius: 30px;
  padding: .4em 1em;
  font-size: var(--step--1);
  font-weight: 500
}

.page-hero {
  background: var(--ink);
  color: var(--on-dark);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden
}

.page-hero::before {
  content: "";
  position: absolute;
  inset-inline-end: -5%;
  top: -30%;
  width: 46vw;
  height: 46vw;
  max-width: 560px;
  max-height: 560px;
  background: radial-gradient(circle, rgba(201, 169, 97, .12), transparent 62%);
  pointer-events: none
}

.page-hero .wrap {
  position: relative;
  z-index: 1
}

.page-hero h1 {
  font-family: var(--serif);
  font-size: var(--step-4);
  margin-block: 1rem .8rem;
  max-width: 18ch
}

.page-hero p {
  color: var(--on-dark-muted);
  font-size: var(--step-1);
  font-weight: 300;
  max-width: 60ch
}

.crumbs {
  font-size: var(--step--1);
  color: var(--on-dark-muted)
}

.crumbs a:hover {
  color: var(--c-turquoise-light)
}

.crumbs .sep {
  margin-inline: .5em;
  color: var(--copper)
}

/* =====================================================================
   ★ PREMIUM POLISH LAYER ★  (depth · light · metal · motion)
   Additive only — extends the "Marble & Stone" system, overrides nothing
   structural. Everything here degrades gracefully + respects reduced-motion.
   ===================================================================== */

/* ---- metallic accent tokens (polished limestone sheen) ---- */
:root {
  --metal: linear-gradient(100deg, #a8894e 0%, #d8bc7e 22%, #f3e6bd 42%, #d8bc7e 60%, #9a7c42 100%);
  --shadow-card: 0 1px 2px rgba(20, 22, 26, .04), 0 12px 28px -16px rgba(20, 22, 26, .28);
  --shadow-card-hover: 0 2px 4px rgba(20, 22, 26, .06), 0 30px 60px -28px rgba(20, 22, 26, .45);
  --shadow-dark: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 50px -24px rgba(0, 0, 0, .6);
  --ease-spring: cubic-bezier(.34, 1.4, .46, 1);
}

/* ---------- 1. Scroll progress bar (injected by JS) ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 0;
  z-index: 200;
  background: var(--metal);
  background-size: 200% 100%;
  box-shadow: 0 0 12px -2px rgba(223, 201, 143, .65);
  transform-origin: inline-start;
  pointer-events: none;
  transition: width .1s linear;
}

/* ---------- 2. Film grain — subtle stone tooth over everything ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Header legibility — solid ink bar ---------- */
/* every page opens with a dark hero, so at rest the header is solid ink:
   it fuses with the hero below into one continuous navy field (no mushy
   translucent band over the light body background) */
.site-header {
  background: var(--ink);
}

.site-header.shrink {
  background: rgba(16, 34, 53, .94);
}

.site-header.shrink::before {
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

.nav a {
  opacity: .9
}

/* ---------- 4. Dark sections — light & atmosphere ---------- */
.section-dark,
.section-deep,
.hero,
.page-hero {
  position: relative;
  isolation: isolate
}

.section-dark::before,
.section-deep::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% 0%, rgba(201, 169, 97, .08), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(47, 169, 162, .05), transparent 60%);
}

/* hairline top edge — like light catching a stone seam */
.section-dark::after,
.section-deep::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(223, 201, 143, .30), transparent);
}

/* ---------- 5. Hero — metallic headline ---------- */
.hero h1 .accent {
  background: var(--metal);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* entrance only — the old infinite `sheen` repainted background-position
     every frame on top of the rise, which read as flicker. Removed. */
  animation: heroRise .95s var(--ease) both;
}

@keyframes sheen {
  to {
    background-position: 220% center
  }
}

.hero-meta b {
  background: var(--metal);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* stat-style metal numbers everywhere (counters, hero meta) */
.stat .num,
.partners .avatars .av {
  will-change: transform
}

/* ---------- 6. Buttons — sheen sweep + spring lift ---------- */
.btn {
  overflow: hidden
}

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .65s var(--ease);
  pointer-events: none;
}

.btn:hover::after {
  inset-inline-start: 130%
}

.btn-primary:hover {
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .2)
}

/* ---------- 7. Cards — refined elevation + spring hover ---------- */
.feature,
.practice,
.member,
.quote {
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease)
}

.practice,
.member {
  box-shadow: var(--shadow-card)
}

.practice:hover,
.member:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-card-hover)
}

.feature {
  box-shadow: var(--shadow-dark)
}

.feature:hover {
  transform: translateY(-7px)
}

.quote {
  box-shadow: var(--shadow-dark)
}

/* practice cards get a faint corner glow on hover */
.practice::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(120% 80% at 100% 0%, rgba(201, 169, 97, .08), transparent 55%);
  transition: opacity .4s var(--ease);
}

html[dir="ltr"] .practice::after {
  background: radial-gradient(120% 80% at 0% 0%, rgba(201, 169, 97, .08), transparent 55%)
}

.practice:hover::after {
  opacity: 1
}

/* feature icon: subtle pop on hover */
.feature .ic,
.practice .ic {
  transition: transform .4s var(--ease-spring), color .3s var(--ease)
}

.feature:hover .ic,
.practice:hover .ic {
  transform: translateY(-2px) scale(1.08)
}

/* ---------- 8. Section headings — accent rule under H2 ---------- */
.section-head h2 {
  position: relative
}

.eyebrow::before {
  transition: width .5s var(--ease)
}

.section-head.in .eyebrow::before {
  animation: rule .7s var(--ease) both
}

@keyframes rule {
  from {
    width: 0
  }

  to {
    width: 2.4em
  }
}

/* ---------- 9. Reveal — add gentle blur clear + scale ---------- */
.reveal {
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease)
}

html.js .reveal:not(.in) {
  filter: blur(2px)
}

.reveal.d3 {
  transition-delay: .24s
}

.reveal.d4 {
  transition-delay: .32s
}

.reveal.d5 {
  transition-delay: .4s
}

/* ---------- 10. Testimonial cards — quotation flourish ---------- */
.quote .mark {
  font-size: 4rem;
  opacity: .35;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent
}

.quote .stars {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3))
}

/* ---------- 11. Footer — top seam of light ---------- */
.site-footer {
  position: relative
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223, 201, 143, .35), transparent)
}

/* ---------- 12. Selection + nicer scrollbar ---------- */
::selection {
  background: rgba(47, 169, 162, .35);
  color: #fff
}

@media (min-width:1025px) {
  html {
    scrollbar-color: var(--copper-dark) transparent;
    scrollbar-width: thin
  }
}

/* ---------- reduced-motion: kill the moving parts ---------- */
@media (prefers-reduced-motion:reduce) {

  .hero h1 .accent,
  .hero-meta b {
    animation: none
  }

  .scroll-progress {
    transition: none
  }

  html.js .reveal:not(.in) {
    filter: none
  }

  .section-head.in .eyebrow::before {
    animation: none
  }

  .btn::after {
    display: none
  }
}

/* =====================================================================
   ★ DEMO MOTION LAYER ★  cinematic page transitions · branded intro ·
   per-page hero entrances. Chrome-first, graceful elsewhere, RTL-safe,
   fully reduced-motion guarded.
   ===================================================================== */

/* ---------- A. Cross-document page transitions (Chrome/Edge) ---------- */
@view-transition {
  navigation: auto
}

/* keep the chrome steady while content swaps */
.site-header {
  view-transition-name: site-header
}

.site-footer {
  view-transition-name: site-footer
}

/* the content (root) cross-fades with a soft directional rise */
::view-transition-old(root) {
  animation: vt-out .34s var(--ease) both
}

::view-transition-new(root) {
  animation: vt-in .46s var(--ease) both
}

@keyframes vt-out {
  to {
    opacity: 0;
    transform: translateY(-10px)
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(14px)
  }
}

/* ---------- B. Branded intro curtain (homepage, once per session) ---------- */
html.intro-skip .intro {
  display: none
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  animation: intro-clear 0s linear 1.75s forwards;
  /* self-clear even w/o JS */
}

@keyframes intro-clear {
  to {
    visibility: hidden;
    pointer-events: none
  }
}

.intro-panel {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50.5%;
  background: linear-gradient(180deg, #18324B, #0D1E30);
  will-change: transform;
}

.intro-left {
  inset-inline-start: 0;
  animation: intro-part-start .8s var(--ease) .95s both
}

.intro-right {
  inset-inline-end: 0;
  animation: intro-part-end .8s var(--ease) .95s both
}

@keyframes intro-part-start {
  to {
    transform: translateX(-101%)
  }
}

@keyframes intro-part-end {
  to {
    transform: translateX(101%)
  }
}

/* RTL: inline-start/end flip but translateX stays physical — swap the
   animations so the panels part OUTWARD instead of sliding across */
html[dir="rtl"] .intro-left {
  animation-name: intro-part-end
}

html[dir="rtl"] .intro-right {
  animation-name: intro-part-start
}

/* hairline of light down the seam */
.intro::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 50%;
  width: 1px;
  z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(223, 201, 143, .5), transparent);
  animation: intro-seam .9s var(--ease) .95s both;
}

@keyframes intro-seam {
  to {
    opacity: 0
  }
}

.intro-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  animation: intro-center-out .45s var(--ease) .9s both;
}

@keyframes intro-center-out {
  to {
    opacity: 0;
    transform: translateY(-8px)
  }
}

.intro-logo {
  width: 62px;
  height: auto;
  animation: intro-pop .8s var(--ease) both
}

@keyframes intro-pop {
  from {
    opacity: 0;
    transform: scale(.82) translateY(12px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.intro-name {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + 1vw, 1.7rem);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--on-dark);
  text-align: center;
  opacity: 0;
  animation: intro-up .7s var(--ease) .28s both;
}

.intro-sub {
  font-size: .7rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  opacity: 0;
  animation: intro-up .7s var(--ease) .42s both;
}

@keyframes intro-up {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.intro-rule {
  height: 2px;
  width: 0;
  background: var(--metal);
  background-size: 200% auto;
  animation: intro-rule .6s var(--ease) .5s forwards
}

@keyframes intro-rule {
  to {
    width: 150px
  }
}

/* ---------- C. Per-page hero entrance (inner pages) ---------- */
.page-hero .wrap>* {
  animation: heroUp .85s var(--ease) both
}

.page-hero .crumbs {
  animation-delay: .1s
}

.page-hero h1 {
  animation-delay: .24s
}

.page-hero p {
  animation-delay: .4s
}

@keyframes heroUp {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(3px)
  }

  to {
    opacity: 1;
    transform: none;
    filter: blur(0)
  }
}

/* draw the eyebrow rule on the home hero too */
.hero-content .eyebrow::before {
  animation: rule .7s var(--ease) calc(.55s + var(--hoff, 0s)) both
}

/* ---------- reduced-motion / no-transition fallbacks ---------- */
@media (prefers-reduced-motion:reduce) {
  .intro {
    display: none
  }

  .page-hero .wrap>* {
    animation: none
  }

  .hero-content .eyebrow::before {
    animation: none
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important
  }
}

/* =====================================================================
   ★ MODERN TYPE TUNING ★  Assistant headings — weight + tracking so the
   sans reads confident, sleek and contemporary.
   ===================================================================== */
.hero h1,
.page-hero h1 {
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.04
}

.section-head h2,
.cta-band h2,
.prose h2,
.prose h3,
.team-group-title {
  font-weight: 700;
  letter-spacing: -.02em
}

.feature h3,
.practice h2,
.practice h3,
.member .info h3,
.proj-card h4,
.proj-card .pname {
  font-weight: 700;
  letter-spacing: -.01em
}

.stat .num,
.hero-meta b {
  font-weight: 800;
  letter-spacing: -.01em
}

.brand .bt b {
  font-weight: 700
}

/* =====================================================================
   ★ REAL TEAM PHOTOS ★  partner headshots fill their frames; subtle
   stone-desaturation at rest that warms to full colour on hover.
   ===================================================================== */
.member .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(.18) contrast(1.02);
  transition: filter .4s var(--ease), transform .5s var(--ease);
}

.member:hover .photo img {
  filter: grayscale(0);
  transform: scale(1.03)
}

/* hide the gradient placeholder behind a loaded photo so no seam shows */
.member .photo:has(img) {
  background: var(--ink)
}

/* home "partners" overlapping avatars — now real photos */
.partners .avatars .av {
  overflow: hidden;
  padding: 0
}

.partners .avatars .av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 50%
}

/* =====================================================================
   ★ MASONRY LAYER ★  subtle stone-course (brick) texture — hairline
   mortar joints tiled over concrete sections; a lighter version over
   the stone-gray light sections. Pure CSS/SVG, zero requests.
   ===================================================================== */
:root {
  --masonry-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='128'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.028'%3E%3Cpath d='M0 .5H260M0 64.5H260'/%3E%3Cpath d='M130.5 0V64M65.5 64V128M195.5 64V128'/%3E%3C/g%3E%3C/svg%3E");
  --masonry-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='128'%3E%3Cg fill='none' stroke='%2313293F' stroke-opacity='.038'%3E%3Cpath d='M0 .5H260M0 64.5H260'/%3E%3Cpath d='M130.5 0V64M65.5 64V128M195.5 64V128'/%3E%3C/g%3E%3C/svg%3E");
}

.hero,
.page-hero,
.section-dark,
.section-deep,
.cta-band,
.site-footer {
  background-image: var(--masonry-dark);
}

.section-paper-2 {
  background-image: var(--masonry-light);
}

/* the mobile nav drawer reads as a concrete slab too */
@media (max-width:920px) {
  .nav {
    background-image: var(--masonry-dark);
    background-color: var(--ink-1)
  }
}

/* =====================================================================
   ★ BRAND & LEAD-GEN LAYER ★  (client questionnaire, 2026-07)
   Contrast-safe accents, differentiators strip, credibility badges,
   floating WhatsApp, mobile click-to-call, TODO placeholders,
   article cards. Additive only.
   ===================================================================== */

/* ---------- Contrast fixes (WCAG AA / IS 5568) ----------
   gold reads too light on white surfaces — use text-grade gold-dark on
   light sections and gold-light on dark ones. */
.eyebrow {
  color: var(--c-gold-dark)
}

.section-dark .eyebrow,
.section-deep .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.cta-band .eyebrow {
  color: var(--c-gold-light)
}

.section-dark .eyebrow::before,
.section-deep .eyebrow::before,
.hero .eyebrow::before,
.page-hero .eyebrow::before,
.cta-band .eyebrow::before {
  background: var(--c-gold-light)
}

/* visible focus on dark surfaces */
.section-dark :focus-visible,
.section-deep :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.cta-band :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--c-turquoise-light)
}

/* ---------- Differentiators strip (home, §A1) ---------- */
.diff-band {
  border-top: 1px solid var(--ink-line)
}

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

@media (max-width:920px) {
  .diff-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:560px) {
  .diff-grid {
    grid-template-columns: 1fr
  }
}

.diff-grid li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding-block: .9rem;
  border-bottom: 1px solid var(--ink-line);
  color: var(--on-dark);
  font-size: var(--step--1);
  line-height: 1.55;
  font-weight: 500
}

.diff-grid li i {
  flex: 0 0 auto;
  font-size: 1.35rem;
  color: var(--c-turquoise-light);
  margin-top: .1em
}

/* ---------- Credibility badges band (home, §F1 — empty until client
   supplies verified badges) ---------- */
.badges-band .badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  min-height: 84px;
  margin-top: 1.6rem;
  padding: 1.4rem;
  border-block: 1px solid var(--paper-line)
}

.badges-band .badge-row img {
  max-height: 64px;
  width: auto;
  filter: grayscale(1) opacity(.75);
  transition: filter .3s var(--ease)
}

.badges-band .badge-row img:hover {
  filter: none
}

/* ---------- Floating WhatsApp button (§C1, all pages, RTL-aware) ---------- */
.wa-float {
  position: fixed;
  inset-inline-end: clamp(1rem, 2.5vw, 1.6rem);
  bottom: clamp(1rem, 2.5vw, 1.6rem);
  z-index: 150;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #128C7E;
  /* darker WhatsApp green — ≥3:1 for the white glyph (non-text contrast) */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .5);
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease)
}

.wa-float:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, .55)
}

.wa-float:focus-visible {
  outline-color: var(--c-turquoise-dark)
}

@media (max-width:600px) {
  .wa-float {
    width: 52px;
    height: 52px;
    font-size: 1.7rem
  }
}

/* ---------- Click-to-call (§C2) — prominent in the footer on mobile ---------- */
.site-footer .btn-primary {
  background: var(--paper);
  color: var(--ink)
}

.site-footer .btn-primary:hover {
  background: #fff
}

.footer-call {
  margin-top: .5rem
}

@media (max-width:780px) {
  .footer-call {
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: var(--step-0);
    padding: 1em 1.7em
  }
}

/* footer phone links */
.footer-col .ltr-num a {
  color: var(--on-dark-muted)
}

.footer-col .ltr-num a:hover {
  color: var(--on-dark)
}

/* ---------- TODO placeholders (content pending from the client) ---------- */
.ph-todo {
  color: var(--on-light-muted);
  font-style: italic;
  font-size: .8rem;
  opacity: .8
}

/* collapsible full profile on team cards */
.member .profile {
  border-top: 1px dashed var(--paper-line);
  margin-top: .8rem;
  padding-top: .6rem
}

.member .profile summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .03em;
  color: var(--c-turquoise-dark);
  list-style-position: inside;
  padding-block: .8rem
  /* ≥44px touch target now that profiles are visible */
}

.member .profile summary:hover {
  color: var(--c-turquoise)
}

.member .profile .profile-field {
  margin-top: .6rem
}

.member .profile .profile-field b {
  display: block;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-light-muted);
  margin-bottom: .15rem
}

/* ---------- Article cards (articles.html, §B1) ---------- */
.article-card {
  display: flex;
  flex-direction: column
}

.article-card .excerpt {
  color: var(--on-light-muted);
  font-size: var(--step--1);
  line-height: 1.65;
  flex: 1
}

.article-card .go {
  opacity: 1;
  transform: none
}

.article-card .tag-pill {
  align-self: flex-start;
  margin-bottom: .7rem
}

.article-card .soon {
  margin-top: 1.1rem;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--on-light-muted);
  letter-spacing: .04em
}

/* ---------- Review-pass fixes (a11y + states) ---------- */
/* zero-results row for the filtered projects table */
.proj-table .no-results td {
  text-align: center;
  color: var(--on-light-muted);
  padding-block: 1.6rem;
  font-weight: 500
}

/* touch targets ≥44px (IS 5568 / WCAG 2.2) */
.lang-toggle,
.proj-controls button {
  min-height: 44px
}

.nav-toggle {
  width: 44px;
  height: 44px
}

.footer-col a {
  display: inline-block;
  padding-block: .55rem
  /* ≈44px touch target with the step--1 line box */
}

.crumbs a {
  display: inline-block;
  padding-block: .55rem
}

/* visited-link distinction on content links (≥4.5:1 on page cream) */
.ulink:visited,
.prose a:visited {
  color: #49606B
}

/* visible (but restrained) heading for the differentiators band */
.diff-band .diff-head {
  margin-bottom: 1.1rem
}

/* =====================================================================
   ★ EDITORIAL REDESIGN 2026-08 ★
   Bona Nova display serif · cream-only light surfaces · dramatic scale
   contrast · asymmetric editorial grids · engraved-registry stats ·
   accordion disclosure. Additive layer — wins by cascade order.
   ===================================================================== */

/* ---------- 1. Cream replaces every #fff surface ---------- */
.section-paper-2 .practice,
.section-paper-2 .member,
.proj-tablewrap {
  background: var(--c-white)
}

.form input,
.form textarea,
.form select {
  background: var(--c-white)
}

.btn-primary:hover {
  background: var(--c-navy-deep)
}

.hero .btn-primary:hover,
.site-header .btn-primary:hover,
.nav .btn-primary:hover,
.section-dark .btn-primary:hover,
.section-deep .btn-primary:hover,
.cta-band .btn-primary:hover,
.cta-band .btn-dark:hover,
.site-footer .btn-primary:hover {
  background: var(--c-white)
}

/* ---------- 2. Display typography — the centrepiece ---------- */
.hero h1,
.page-hero h1,
.section-head h2,
.cta-band h2,
.prose h2,
.prose h3,
.team-group-title,
.quote-feature blockquote {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0
}

.hero h1 {
  font-size: var(--display-1);
  line-height: 1.08
}

.page-hero h1 {
  font-size: var(--display-1);
  line-height: 1.05
}

.section-head h2,
.cta-band h2 {
  font-size: var(--display-2);
  line-height: 1.1
}

.prose h2,
.prose h3 {
  font-size: var(--step-2)
}

/* gold hairline draws in under section headings */
.section-head h2::after {
  content: "";
  display: block;
  width: 76px;
  height: 1px;
  background: var(--c-gold);
  margin-top: .55em;
  transform: scaleX(1);
  transform-origin: inline-start;
  transition: transform .9s var(--ease) .15s
}

html.js .section-head.reveal:not(.in) h2::after {
  transform: scaleX(0)
}

.section-head.center h2::after {
  margin-inline: auto;
  transform-origin: center
}

/* eyebrows: quieter, wider air below */
.eyebrow {
  letter-spacing: .32em;
  margin-bottom: .4rem
}

/* ---------- 3. Whitespace & rhythm — let sections breathe ---------- */
.section {
  padding-block: clamp(4.5rem, 9vw, 8.5rem)
}

.section.tight {
  padding-block: clamp(3rem, 6vw, 5.5rem)
}

.section-head {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem)
}

.page-hero {
  padding-block: clamp(4.5rem, 9vw, 8rem) clamp(3.5rem, 7vw, 6rem)
}

.hero .lead {
  font-weight: 400;
  max-width: 46ch
}

/* ---------- 4. Editorial asymmetric grid ---------- */
.ed-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start
}

.ed-grid .ed-aside {
  position: sticky;
  top: calc(var(--header-shrunk) + 2rem)
}

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

  .ed-grid .ed-aside {
    position: static
  }
}

/* ---------- 5. Engraved-registry stats (signature treatment) ---------- */
.stats {
  gap: 0;
  background: transparent;
  border: none;
  border-block: 1px solid rgba(223, 201, 143, .35);
  border-radius: 0;
  overflow: visible
}

.stat {
  background: transparent;
  padding: clamp(2.2rem, 5vw, 3.6rem) 1.5rem;
  border-inline-start: 1px solid var(--ink-line)
}

.stat:first-child {
  border-inline-start: none
}

@media (max-width:980px) {
  .stat {
    border-inline-start: none;
    border-top: 1px solid var(--ink-line)
  }

  .stat:nth-child(-n+2) {
    border-top: none
  }

  .stat:nth-child(even) {
    border-inline-start: 1px solid var(--ink-line)
  }
}

.stat .num {
  font-size: clamp(2.2rem, 4.6vw, 4.6rem);
  font-weight: 700;
  max-width: 100%
}

.hero-meta b {
  font-weight: 700
}

/* ---------- 6. Accordion (practices, process — progressive disclosure) ---------- */
.acc {
  border-top: 1px solid var(--paper-line)
}

.acc>details {
  border-bottom: 1px solid var(--paper-line)
}

.acc summary {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding-block: clamp(1.2rem, 2.5vw, 1.8rem);
  cursor: pointer;
  list-style: none;
  transition: color .25s var(--ease)
}

.acc summary::-webkit-details-marker {
  display: none
}

.acc summary .num {
  font-family: var(--serif);
  font-size: var(--step-0);
  color: var(--c-gold-dark);
  min-width: 2.2em
}

.acc summary h3,
.acc summary .acc-t {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: 0;
  flex: 1;
  line-height: 1.15
}

.acc summary .acc-x {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--c-turquoise-dark);
  line-height: 1;
  transition: transform .3s var(--ease)
}

.acc details[open] summary .acc-x {
  transform: rotate(45deg)
}

.acc summary:hover h3,
.acc summary:hover .acc-t {
  color: var(--c-turquoise-dark)
}

.acc .acc-body {
  padding: 0 0 clamp(1.4rem, 3vw, 2rem);
  padding-inline-start: calc(2.2em + 1.1rem);
  color: var(--on-light-muted);
  max-width: 68ch;
  line-height: 1.8
}

@media (max-width:640px) {
  .acc .acc-body {
    padding-inline-start: 0
  }
}

.section-dark .acc,
.section-deep .acc {
  border-color: var(--ink-line)
}

.section-dark .acc>details,
.section-deep .acc>details {
  border-color: var(--ink-line)
}

.section-dark .acc .acc-body,
.section-deep .acc .acc-body {
  color: var(--on-dark-muted)
}

.section-dark .acc summary .num,
.section-deep .acc summary .num {
  color: var(--c-gold-light)
}

.section-dark .acc summary:hover h3,
.section-deep .acc summary:hover h3,
.section-dark .acc summary:hover .acc-t,
.section-deep .acc summary:hover .acc-t {
  color: var(--c-turquoise-light)
}

/* ---------- 7. Testimonials — one voice, large ---------- */
.quote-feature {
  max-width: 60rem
}

.quote-feature blockquote {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.35;
  color: var(--on-dark)
}

.quote-feature blockquote::before {
  content: "”";
  display: block;
  font-size: 4.5rem;
  line-height: .5;
  margin-bottom: .35em;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent
}

.quote-feature .who {
  margin-top: 1.6rem;
  color: var(--on-dark-muted);
  font-size: var(--step--1);
  display: flex;
  align-items: center;
  gap: .8rem
}

.quote-feature .who::before {
  content: "";
  width: 2.4em;
  height: 1px;
  background: var(--c-gold)
}

.quotes-side {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.8rem, 4vw, 2.6rem);
  border-top: 1px solid var(--ink-line)
}

.quotes-side .q p {
  color: var(--on-dark);
  line-height: 1.7;
  margin-bottom: .9rem
}

.quotes-side .q .who {
  color: var(--on-dark-muted);
  font-size: var(--step--1)
}

/* ---------- 8. Team — uniform, engraved, quiet ---------- */
.member {
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0
}

.section-paper-2 .member,
.section-paper .member {
  background: transparent
}

.member:hover {
  transform: none;
  box-shadow: none
}

.member .photo {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--paper-line)
}

.member .photo img {
  filter: grayscale(.85) sepia(.06) contrast(1.02);
}

.member:hover .photo img {
  filter: grayscale(0)
}

.member .photo::after {
  height: 2px;
  background: var(--c-gold)
}

.member .info {
  padding: 1.1rem .2rem 1.6rem
}

.member .info h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0
}

.member .role {
  color: var(--c-gold-dark);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .72rem
}

.team-group-title {
  font-size: var(--display-2);
  letter-spacing: 0
}

.team-group-title::after {
  background: linear-gradient(90deg, var(--c-gold), transparent)
}

/* ---------- 9. Projects — substantial, numeric, editorial ---------- */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-line);
  gap: 1px
}

@media (max-width:900px) {
  .feat-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:560px) {
  .feat-grid {
    grid-template-columns: 1fr
  }
}

.feat {
  background: var(--c-white);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-height: 11.5rem;
  transition: background .3s var(--ease)
}

.feat:hover {
  background: var(--paper)
}

.feat .city {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-turquoise-dark)
}

.feat h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: 0;
  line-height: 1.1;
  flex: 1
}

.feat .n {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3rem);
  color: var(--c-gold-dark);
  line-height: 1
}

.feat .n small {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--on-light-muted);
  letter-spacing: .02em
}

/* the full table becomes the "registry" appendix */
.proj-table thead th {
  background: var(--c-navy)
}

/* ---------- 10. Contact — effortless, generous ---------- */
.form {
  gap: 1.4rem
}

.form label {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 700;
  color: var(--on-light-muted)
}

.form input,
.form textarea,
.form select {
  padding: 1em 1.1em
}

.contact-call {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ink-line)
}

.contact-call .big {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--on-dark)
}

.contact-call .big:hover {
  color: var(--c-turquoise-light)
}

/* ---------- 11. Practice cards (home highlights) — quieter ---------- */
.practice {
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--paper-line);
  box-shadow: none;
  background: transparent;
  padding-inline: 0
}

.section-paper-2 .practice {
  background: transparent
}

.practice:hover {
  transform: none;
  box-shadow: none;
  background: transparent
}

.practice::after {
  display: none
}

.practice h2,
.practice h3 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0;
  font-size: var(--step-2)
}

.practice .pn {
  color: var(--c-gold-dark);
  font-size: .85rem
}

.practice-grid {
  gap: 0 clamp(1.5rem, 4vw, 3.5rem)
}

/* ---------- 12. Cards on dark keep their surface ---------- */
.feature {
  border-radius: var(--radius)
}

/* ---------- 13. Serif numerals in ordered process steps ---------- */
.steps {
  counter-reset: step;
  max-width: 62ch
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 3.2em;
  padding-block: .9rem;
  border-bottom: 1px solid var(--paper-line)
}

.steps li:last-child {
  border-bottom: none
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: .95rem;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--c-gold-dark);
  font-size: var(--step-1);
  line-height: 1.4
}

.section-dark .steps li,
.section-deep .steps li {
  border-color: var(--ink-line)
}

.section-dark .steps li::before,
.section-deep .steps li::before {
  color: var(--c-gold-light)
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {

  html.js .section-head.reveal:not(.in) h2::after {
    transform: scaleX(1);
    transition: none
  }

  .acc summary .acc-x {
    transition: none
  }
}

/* =====================================================================
   ★ ALIVE LAYER 2026-08 ★  (Awwwards pass)
   Suez One display · layered cinematic hero · ARCHITECTURAL NAV BLOCKS
   (the signature) · staggered scroll choreography · depth everywhere.
   Restrained and expensive: transform/opacity only, ease-out-expo,
   600–900ms, everything off under prefers-reduced-motion.
   ===================================================================== */

/* ---------- 1. Suez One display tuning ---------- */
.hero h1,
.page-hero h1,
.section-head h2,
.cta-band h2,
.prose h2,
.prose h3,
.team-group-title,
.quote-feature blockquote,
.acc summary h3,
.acc summary .acc-t,
.feat h3,
.member .info h3 {
  font-weight: 400
  /* Suez One ships one confident weight — hierarchy comes from scale */
}

.hero h1 {
  line-height: 1.14
}

[lang="en"] {
  letter-spacing: .005em
  /* Latin runs a touch looser than Hebrew in this face */
}

/* whole-document English tuning — Heebo's Latin wants slightly tighter
   leading than Hebrew's tall marks, and Suez One's Latin display cut runs
   wide, so headings step down a touch */
html[data-lang="en"] body {
  line-height: 1.65
}

html[data-lang="en"] .hero h1 {
  letter-spacing: .01em
}

/* EN nav labels are longer than Hebrew — keep the blocks single-line
   instead of wrapping into uneven two-line tiles */
html[data-lang="en"] .nav a {
  white-space: nowrap
}

/* ---------- 2. HERO — layered, cinematic ---------- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none
}

/* TODO (CLIENT — HERO IMAGE): drop a licensed architectural photo here as
   <img class="hero-photo" src="..." alt=""> inside .hero-bg — a dusk-lit
   residential tower / construction crane silhouette, cool-toned. It will
   inherit the duotone overlay + Ken Burns drift below. Until then a layered
   navy gradient-scape stands in. */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(120% 90% at 80% 8%, rgba(47, 169, 162, .16), transparent 52%),
    radial-gradient(80% 65% at 12% 88%, rgba(201, 169, 97, .11), transparent 58%),
    radial-gradient(140% 100% at 50% 120%, rgba(13, 30, 48, .9), transparent 70%),
    linear-gradient(205deg, #1C405F 0%, var(--c-navy) 48%, var(--c-navy-deep) 100%);
  animation: kenburns 46s var(--ease) infinite alternate;
  will-change: transform
}

.hero-bg .hero-photo {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  filter: grayscale(.4) sepia(.12) hue-rotate(160deg) saturate(.9) brightness(.55) contrast(1.05);
  animation: kenburns 46s var(--ease) infinite alternate;
  will-change: transform
}

@keyframes kenburns {
  from {
    transform: scale(1) translate3d(0, 0, 0)
  }

  to {
    transform: scale(1.06) translate3d(0, -1.4%, 0)
  }
}

/* ---------- 3. ARCHITECTURAL NAV — blocks, built in place ---------- */
.nav {
  gap: .45rem
}

.nav a:not(.nav-cta) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 55%), var(--c-navy-raised);
  border: 1px solid rgba(223, 201, 143, .14);
  border-radius: 4px;
  padding: .5rem .9rem;
  opacity: .94;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 6px 14px -9px rgba(0, 0, 0, .6);
  transition: transform .5s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .5s var(--ease), color .35s var(--ease)
}

/* hairline draws along the block's lower edge on hover */
.nav a::after {
  inset-inline: 8%;
  width: 84%;
  bottom: 3px;
  background: var(--c-gold-light)
}

.nav a:hover {
  opacity: 1;
  transform: translateY(-2px);
  border-color: rgba(223, 201, 143, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 12px 22px -10px rgba(0, 0, 0, .65);
  color: var(--on-dark)
}

/* the active page's block is "set in place" — seated, not floating */
.nav a[aria-current="page"] {
  background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 60%), var(--c-navy-deep);
  border-color: rgba(223, 201, 143, .5);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45);
  transform: none;
  color: var(--c-gold-light)
}

.nav a[aria-current="page"]::after {
  transform: scaleX(1);
  height: 2px
}

/* (the "blocks assembling" nav build-in animation was removed per client
   feedback 2026-08 — the block styling stays, nothing animates on load) */
@media (max-width:920px) {
  .nav a:not(.nav-cta) {
    border-radius: 4px;
    border-bottom: 1px solid rgba(223, 201, 143, .14);
    margin-bottom: .35rem
  }
}

/* ---------- 4. Stats band builds in segments ----------
   Hidden state scoped to :not(.in) so the shown state always wins. */
html.js .stats:not(.in) .stat {
  opacity: 0;
  transform: translateY(20px)
}

.stats .stat {
  transition: opacity .8s var(--ease), transform .8s var(--ease)
}

.stats.in .stat:nth-child(2) {
  transition-delay: .12s
}

.stats.in .stat:nth-child(3) {
  transition-delay: .24s
}

.stats.in .stat:nth-child(4) {
  transition-delay: .36s
}

/* ---------- 5. Depth — cards catch light, shadows bloom ---------- */
.feature,
.quote,
.proj-card {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 45%)
}

.feat {
  position: relative
}

.feat::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .6s var(--ease)
}

.feat:hover {
  box-shadow: 0 24px 48px -26px rgba(20, 22, 26, .4)
}

.feat:hover::after {
  transform: scaleX(1)
}

.section-paper {
  background-image: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .35), transparent 60%), var(--masonry-light)
}

/* ---------- 6. Contact — fields respond to touch ---------- */
.form .field label {
  transition: color .3s var(--ease)
}

.form .field:focus-within label {
  color: var(--c-turquoise-dark)
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  border-color: var(--c-turquoise);
  box-shadow: 0 0 0 3px var(--c-turquoise-soft)
}

/* ---------- 7. Accordion body eases open ---------- */
.acc details[open] .acc-body {
  animation: accIn .6s var(--ease)
}

@keyframes accIn {
  from {
    opacity: 0;
    transform: translateY(-8px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* =====================================================================
   ★ REFINEMENT LAYER 2026-08b ★
   Foundation-line heading system (Option A: a course of stone segments
   with a gold hairline running through) · flicker/CLS/legibility fixes ·
   contact on cream · projects as a structured registry of cards.
   ===================================================================== */

/* ---------- Heading rule: SHORT SOLID GOLD HAIRLINE + square terminal ----------
   (redesigned 2026-08 — the segmented "dashed" course is gone site-wide)
   A 76px solid gold hairline under the heading with a 5px square terminal at
   the anchor end. Anchored inline-start (auto-mirrors in RTL), draws in on
   scroll. Thin, precise, quiet — typography stays the hero. Decorative only. */
.section-head h2::after,
.h-course::after {
  content: "";
  display: block;
  width: 76px;
  height: 5px;
  margin-top: .6em;
  background:
    linear-gradient(var(--c-gold), var(--c-gold)) 0 50% / 5px 5px no-repeat,
    linear-gradient(var(--c-gold), var(--c-gold)) 0 50% / 100% 1px no-repeat;
  transform: scaleX(1);
  transform-origin: inline-start;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1) .08s
}

/* the square terminal sits at the anchor end — mirror it for RTL */
html[dir="rtl"] .section-head h2::after,
html[dir="rtl"] .h-course::after {
  background-position: 100% 50%, 100% 50%
}

.section-head.center h2::after {
  margin-inline: auto;
  transform-origin: center;
  background:
    linear-gradient(var(--c-gold), var(--c-gold)) 50% 50% / 100% 1px no-repeat
}

/* choreography: rule draws first, heading text follows ~90ms later */
html.js .section-head.reveal:not(.in) h2::after {
  transform: scaleX(0)
}

.section-head h2>span {
  display: inline-block;
  transition: opacity .8s var(--ease) .09s, transform .8s var(--ease) .09s
}

html.js .section-head.reveal:not(.in) h2>span {
  opacity: 0;
  transform: translateY(14px)
}

/* group titles: same short rule, static (no flex-fill line) */
.team-group-title {
  display: block
}

.team-group-title::after {
  content: "";
  display: block;
  flex: none;
  width: 76px;
  height: 5px;
  margin-top: .5em;
  background:
    linear-gradient(var(--c-gold), var(--c-gold)) 0 50% / 5px 5px no-repeat,
    linear-gradient(var(--c-gold), var(--c-gold)) 0 50% / 100% 1px no-repeat
}

html[dir="rtl"] .team-group-title::after {
  background-position: 100% 50%, 100% 50%
}

/* section transition: one quiet gold hairline (the dashed divider is gone) */
.sec-arch-top {
  position: relative
}

.sec-arch-top::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, .45), transparent)
}

/* ---------- Legibility fixes (§1c) ---------- */
.ph-todo {
  opacity: 1
}

.practice .pn {
  opacity: 1
}

.form-note {
  font-size: .85rem;
  line-height: 1.6
}

/* count-up numbers hold their width — no jitter mid-count */
.stat .num,
.hero-meta b,
.feat .n {
  font-variant-numeric: tabular-nums
}

/* ---------- Contact on cream (§4a/4d) ---------- */
.section-paper .info-row {
  border-color: var(--paper-line)
}

.section-paper .info-row .lbl {
  color: var(--on-light-muted)
}

.section-paper .info-row .val,
.section-paper .contact-call .big {
  color: var(--on-light)
}

.section-paper .info-row .ic {
  color: var(--c-turquoise-dark);
  border-color: var(--c-turquoise-dark)
}

.section-paper .info-row a.val:hover,
.section-paper .contact-call .big:hover {
  color: var(--c-turquoise-dark)
}

.section-paper .contact-call {
  border-color: var(--paper-line)
}

.section-paper .contact-call+.frame {
  border-color: var(--paper-line)
}

.form-panel {
  background: var(--c-white);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: 0 1px 2px rgba(20, 22, 26, .04), 0 18px 40px -24px rgba(20, 22, 26, .25)
}

/* focus: a gold-to-turquoise hairline grows in along the field's bottom edge */
.form input,
.form textarea,
.form select {
  background-image: linear-gradient(90deg, var(--c-gold), var(--c-turquoise));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: bottom center;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-size .5s var(--ease)
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  background-size: 100% 2px
}

/* friendly inline validation hints (shown once a field is user-invalid) */
.f-hint {
  display: none;
  font-size: .8rem;
  color: #8f372e;
  margin-top: .3rem
}

.field:has(:user-invalid) .f-hint {
  display: block
}

.form button[type="submit"] {
  font-size: var(--step-0);
  padding: 1.05em 1.7em
}

/* ---------- Projects registry cards (§3) ---------- */
.proj-group-head {
  margin-block: clamp(2.2rem, 5vw, 3.4rem) 1.2rem
}

.pcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px;
  background: var(--paper-line);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  overflow: hidden
}

.pcard {
  background: var(--c-white);
  padding: 1.4rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  transition: background .3s var(--ease)
}

.pcard:hover {
  background: var(--paper)
}

.pcard .city {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-turquoise-dark)
}

.pcard h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.15;
  letter-spacing: 0;
  flex: 1
}

.pcard .units {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--c-gold-dark);
  line-height: 1.1;
  font-variant-numeric: tabular-nums
}

.pcard .units small {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .78rem;
  color: var(--on-light-muted);
  letter-spacing: .02em
}

.pcard .pstatus {
  font-size: var(--step--1);
  color: var(--on-light-muted);
  margin-top: .35rem;
  padding-top: .55rem;
  border-top: 1px solid var(--paper-line)
}

/* cards assemble in — same block motion language.
   Hidden state scoped to :not(.in) so the shown state always wins. */
html.js .pcard:not(.in) {
  opacity: 0;
  transform: translateY(16px)
}

.pcard {
  transition: opacity .7s var(--ease), transform .7s var(--ease), background .3s var(--ease)
}

/* ---------- reduced motion (refinement layer) ---------- */
@media (prefers-reduced-motion:reduce) {

  .section-head h2::after,
  .h-course::after,
  .section-head h2>span {
    transition: none
  }

  html.js .section-head.reveal:not(.in) h2>span {
    opacity: 1;
    transform: none
  }

  html.js .pcard:not(.in) {
    opacity: 1;
    transform: none;
    transition: none
  }

  .form input,
  .form textarea,
  .form select {
    transition: none
  }
}

/* =====================================================================
   ★ REFERENCE LAYER 2026-08c ★  (client's reference-site patterns)
   Real photography in navy duotone · centred cinematic hero · GHOSTED
   DIVIDER BANDS (Pattern A) · flush tile grid with one gold accent tile
   (Pattern B) · split image+text (Pattern C) · refined gold-kicker text
   (Pattern D). All imagery credited in assets/img/CREDITS.md.
   ===================================================================== */

/* ---------- one consistent image treatment: navy duotone ---------- */
.duo {
  filter: grayscale(1) sepia(.22) hue-rotate(172deg) saturate(1.1) brightness(.82) contrast(1.05)
}

/* ---------- gold "small-caps" kicker (Hebrew: size+weight+tracking) ---------- */
.kicker {
  display: block;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-gold-dark)
}

.section-dark .kicker,
.section-deep .kicker,
.dband .kicker,
.hero .kicker {
  color: var(--c-gold-light)
}

/* ---------- HERO — centred over a single photograph ---------- */
.hero-centered .hero-content {
  margin-inline: auto;
  text-align: center;
  max-width: 60rem
}

.hero-centered .hero-content .eyebrow {
  justify-content: center
}

.hero-centered .hero-content .eyebrow::before {
  display: none
}

.hero-centered h1 {
  margin-inline: auto
}

.hero-centered .lead {
  margin-inline: auto
}

.hero-centered .hero-cta {
  justify-content: center
}

.hero-bg>img {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  object-position: center 30%;
  animation: kenburns 48s var(--ease) infinite alternate;
  will-change: transform
}

/* legibility overlay: navy gradient + deep fade into the next section */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(13, 30, 48, .62), rgba(19, 41, 63, .68) 55%, var(--c-navy-raised) 97%);
  animation: none
}

.hero-icon {
  display: inline-flex;
  color: var(--c-gold-light);
  margin-bottom: 1.2rem;
  animation: heroFade .8s var(--ease) .1s both
}

.hero-icon svg {
  width: 44px;
  height: 44px
}

/* ---------- PATTERN A — ghosted divider band ---------- */
.dband {
  position: relative;
  isolation: isolate;
  background: var(--c-navy-deep);
  color: var(--on-dark);
  text-align: center;
  overflow: hidden;
  padding-block: clamp(6rem, 22vh, 11rem)
}

.dband>img {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  opacity: .14;
  z-index: -1;
  animation: kenburns 52s var(--ease) infinite alternate;
  will-change: transform
}

.dband .dicon {
  display: inline-flex;
  color: var(--c-gold-light);
  margin-bottom: 1.2rem
}

.dband .dicon svg {
  width: 36px;
  height: 36px
}

.dband h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--display-2);
  letter-spacing: 0;
  line-height: 1.15;
  margin-bottom: .7rem
}

.dband p {
  color: var(--on-dark-muted);
  max-width: 55ch;
  margin-inline: auto;
  font-size: var(--step-0)
}

/* choreography: icon → headline → line, staggered; :not(.in)-scoped */
.dband .dicon,
.dband h2,
.dband p {
  transition: opacity .8s var(--ease), transform .8s var(--ease)
}

.dband h2 {
  transition-delay: .12s
}

.dband p {
  transition-delay: .24s
}

html.js .dband.reveal:not(.in) .dicon,
html.js .dband.reveal:not(.in) h2,
html.js .dband.reveal:not(.in) p {
  opacity: 0;
  transform: translateY(16px)
}

/* the band itself never hides — only its children choreograph */
html.js .dband.reveal:not(.in) {
  opacity: 1;
  transform: none;
  filter: none
}

/* ---------- PATTERN B — flush tile grid, one gold accent ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0
}

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

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

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: .7rem;
  padding: clamp(1.8rem, 3vw, 2.6rem) 1.2rem;
  min-height: 15.5rem;
  background: var(--c-white-warm);
  transition: background .35s var(--ease)
}

.tile:nth-child(even) {
  background: var(--c-white-deep)
}

.tile .ti {
  font-size: 1.9rem;
  color: var(--c-gold-dark);
  transition: transform .5s var(--ease)
}

.tile b {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-light);
  line-height: 1.5
}

.tile p {
  font-size: .84rem;
  color: var(--on-light-muted);
  line-height: 1.6;
  max-width: 24ch
}

.tile::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .5s var(--ease)
}

.tile:hover {
  background: var(--c-white)
}

.tile:hover .ti {
  transform: translateY(-3px)
}

.tile:hover::after {
  transform: scaleX(1)
}

/* the ONE gold-accented tile — deliberate focal point. Navy panel with a
   gold hairline + gold type: reads as the "index card" of the grid without
   breaking the no-large-gold-fills rule. */
.tile-gold,
.tile-gold:nth-child(even) {
  background: var(--c-navy);
  border: 1px solid var(--c-gold);
  color: var(--c-gold-light)
}

.tile-gold .ti,
.tile-gold b,
.tile-gold p {
  color: var(--c-gold-light)
}

.tile-gold:hover {
  background: var(--c-navy-raised)
}

.tile-gold::after {
  background: var(--c-gold)
}

/* ---------- PATTERN C — split image + text ---------- */
.split-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch
}

.split-media .txt-side {
  padding: clamp(3rem, 7vw, 6.5rem) clamp(1.4rem, 5vw, 5rem);
  max-width: 44rem;
  justify-self: end
}

.split-media.img-first .txt-side {
  justify-self: start
}

.split-media .img-side {
  position: relative;
  min-height: 420px
}

.split-media .img-side img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

@media (max-width:900px) {
  .split-media {
    grid-template-columns: 1fr
  }

  .split-media .txt-side {
    max-width: none;
    justify-self: stretch
  }

  .split-media .img-side {
    min-height: 300px;
    order: -1
  }
}

.split-sec {
  padding-block: 0;
  background: var(--paper)
}

/* ---------- PATTERN D — refined text, gold kickers, hairlines ---------- */
.refined {
  max-width: 66ch;
  margin-inline: auto
}

.refined .kicker {
  text-align: center;
  margin-bottom: 1.2rem
}

.refined .hair {
  border: 0;
  height: 1px;
  background: var(--paper-line);
  margin-block: clamp(2.4rem, 5vw, 3.6rem)
}

.refined p {
  color: var(--on-light-muted);
  margin-bottom: 1.1rem
}

/* ---------- stats: measured min-width is set by JS; cells never share a box ---------- */
.stat .num {
  display: inline-block;
  white-space: nowrap
}

.stat .num>span {
  display: inline-block;
  min-inline-size: var(--numw, auto)
}

/* ---------- team strip (home) ---------- */
.team-strip {
  text-align: center
}

.team-strip .partners {
  justify-content: center
}

.team-strip .avatars {
  justify-content: center
}

/* ---------- closing contact on cream ---------- */
.close-contact {
  text-align: center
}

.close-contact h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--display-2);
  letter-spacing: 0;
  margin-bottom: .7rem
}

.close-contact p {
  color: var(--on-light-muted);
  max-width: 52ch;
  margin-inline: auto
}

.close-contact .hero-cta {
  justify-content: center;
  margin-top: 2rem
}

.close-contact .btn-ghost {
  color: var(--on-light);
  border-color: var(--paper-line)
}

.close-contact .btn-ghost:hover {
  background: var(--c-navy);
  color: var(--on-dark)
}

/* =====================================================================
   ★ SITE-WIDE SYSTEM 2026-08d ★  (homepage design system → every page)
   Shared components (documented):
     .dband / .dband-page  ghosted navy divider band & page header
     .tiles / .tile        flush tile grid (one .tile-gold accent)
     .split-media          split image + text
     .refined + .kicker    gold small-caps text pattern
     .acc                  numbered accordion (blueprint-corner indicator)
     .stats                width-locked count-up band
   Plus: slim no-shift sticky header, scroll-padding anchors.
   ===================================================================== */

/* ---------- sticky header: slim, transparent→solid, ZERO layout shift ----------
   Height never changes (constant padding); state change is background/
   hairline/shadow only, and the logo condenses via transform (no reflow). */
.site-header .bar {
  padding-block: .75rem
}

.site-header.shrink .bar {
  padding-block: .75rem
}

.site-header {
  /* the header is sticky in-flow (it does not overlap the hero), so the
     resting state is quiet solid navy; scrolling adds elevation + hairline */
  background: linear-gradient(180deg, var(--c-navy-deep), var(--c-navy));
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease)
}

.site-header.shrink {
  background: rgba(16, 34, 53, .96);
  border-bottom: 1px solid rgba(223, 201, 143, .18);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55)
}

.brand img {
  transition: transform .3s var(--ease);
  transform-origin: center
}

.site-header.shrink .brand img {
  transform: scale(.85)
}

/* ---------- .dband-page — ghosted band as page header ---------- */
.dband-page {
  padding-block: clamp(6.5rem, 24vh, 11rem) clamp(4.5rem, 14vh, 7rem)
}

.dband-page h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--display-1);
  letter-spacing: 0;
  line-height: 1.1;
  margin-bottom: .7rem
}

.dband-page p {
  color: var(--on-dark-muted);
  max-width: 55ch;
  margin-inline: auto
}

.dband-page .crumbs {
  margin-bottom: 1.6rem
}

.dband .dicon,
.dband h1,
.dband h2,
.dband p {
  transition: opacity .8s var(--ease), transform .8s var(--ease)
}

.dband h1 {
  transition-delay: .12s
}

html.js .dband.reveal:not(.in) h1 {
  opacity: 0;
  transform: translateY(16px)
}

/* ---------- accordion indicator: BLUEPRINT CORNER (architect's crop mark)
   Two thin gold right-angle strokes; the mark rotates 45° on open —
   drafting-precise, unmistakably togglable, no icon font. ---------- */
.acc summary .acc-x {
  color: var(--c-gold-dark);
  display: inline-flex
}

.section-dark .acc summary .acc-x,
.section-deep .acc summary .acc-x {
  color: var(--c-gold-light)
}

.acc summary .acc-x svg {
  width: 17px;
  height: 17px;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1)
}

.acc details[open] summary .acc-x svg {
  transform: rotate(45deg)
}

.acc details[open] summary .acc-x {
  transform: none
}

@media (prefers-reduced-motion:reduce) {
  .acc summary .acc-x svg {
    transition: none
  }

  .dband h1 {
    transition: none
  }

  html.js .dband.reveal:not(.in) h1 {
    opacity: 1;
    transform: none
  }
}

/* ---------- reduced motion (reference layer) ---------- */
@media (prefers-reduced-motion:reduce) {

  .hero-bg>img,
  .dband>img {
    animation: none
  }

  html.js .dband.reveal:not(.in) .dicon,
  html.js .dband.reveal:not(.in) h2,
  html.js .dband.reveal:not(.in) p {
    opacity: 1;
    transform: none;
    transition: none
  }

  .hero-icon {
    animation: none
  }

  .tile .ti,
  .tile::after {
    transition: none
  }
}

/* ---------- reduced motion: the site stands still, fully readable ---------- */
@media (prefers-reduced-motion:reduce) {

  .hero-bg::before,
  .hero-bg .hero-photo {
    animation: none
  }


  html.js .stats:not(.in) .stat {
    opacity: 1;
    transform: none;
    transition: none
  }

  .acc details[open] .acc-body {
    animation: none
  }

  .feat::after {
    transition: none
  }
}