/* ==========================================================================
   Alketbi & Partners — "The Line of Judgment" design system
   Kufic-derived geometry: thin document rules, angular frames, cropped mark
   fragments, controlled terracotta line movement.

   DEVELOPMENT NOTE: The final Kufic mark should be professionally redrawn as
   vector artwork and linguistically verified by an Arabic identity designer
   before formal launch. The current mark is a concept, not final artwork.
   ========================================================================== */

/* Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --charcoal:  #17130F;   /* warm charcoal — signature, panels, footer */
  --hero-bg:   #1A1714;   /* hero canvas */
  --header-bg: #211D19;   /* sticky masthead */
  --ink:       #0E0D0C;   /* deep charcoal — reserved for the darkest moments */
  --ivory:     #F4EFE6;   /* warm ivory — primary content ground */
  --stone:     #E9E2D5;   /* warm stone — alternating sections */

  /* Text */
  --text-main:      #1D1B18;
  --text-soft:      #5F594F;
  --on-dark:        #F3EEE2;
  --on-dark-strong: #C6BFAF;
  --on-dark-muted:  #A99F8D;

  /* Accent. Terracotta fails AA for small text on ivory, so small accent text
     on light surfaces uses --accent-ink (5.8:1). Buttons pair the accent with
     pure white (4.5:1). On dark surfaces the accent is reserved for non-text
     geometry (rules, ticks, the mark), which needs only 3:1. */
  --accent:     #C94F3D;
  --accent-ink: #A03E2F;

  /* Rules */
  --line-dark:    #2B2620;
  --line-light:   #D8D0BF;
  --line-stone:   #CBC2B0;
  --line-control: #6A6455; /* quiet-link underline on dark: clears 3:1 */

  /* Type */
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:  'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kufi:  'Noto Kufi Arabic', var(--sans);

  --label-size:  12.5px;
  --label-track: 0.14em;

  /* Rhythm */
  --gutter:  clamp(20px, 5vw, 64px);
  --section: clamp(90px, 10vw, 150px);
  --measure: 1240px;

  --masthead-h: 81px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--text-main);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 18.5px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
::selection { background: var(--accent); color: #fff; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Utilities
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--accent); flex-shrink: 0; }
.eyebrow--dark { color: var(--on-dark-muted); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

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

/* Motion: reveal on scroll. Defaults to visible so no-JS and reduced-motion
   users never see a blank page. Images settle from a 1.03 scale. */
.reveal { opacity: 1; }
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-img { overflow: hidden; }
.js .reveal-img > * { transform: scale(1.03); transition: transform 1.2s var(--ease); }
.js .reveal-img.is-visible > * { transform: scale(1); }

/* Hero entrance: kicker → title → lede → actions cascade once on load. */
.js .hero__kicker,
.js .hero__title,
.js .hero__lede,
.js .hero__actions {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .hero.is-ready .hero__kicker,
.js .hero.is-ready .hero__title,
.js .hero.is-ready .hero__lede,
.js .hero.is-ready .hero__actions { opacity: 1; transform: none; }
.js .hero.is-ready .hero__title   { transition-delay: 0.08s; }
.js .hero.is-ready .hero__lede    { transition-delay: 0.16s; }
.js .hero.is-ready .hero__actions { transition-delay: 0.24s; }

/* Interim brand compositions
   Elegant abstract stand-ins shown until original photography is supplied:
   a cropped Kufic-inspired geometry fragment on a warm ground, a thin inset
   frame, and one restrained terracotta rule. No text, no filenames. Replace
   the <figure> with a real <img> (same wrapper class) per the code comment
   beside each slot when the photography arrives.
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--stone) 0%, var(--ivory) 100%);
}
.ph__frag {
  position: absolute;
  inset: 0;
  object-fit: contain;
  object-position: 118% 128%;
  width: 100%; height: 100%;
  transform: scale(1.35);
  opacity: 0.11;
  filter: grayscale(1) brightness(0.35);
  pointer-events: none;
}
/* restrained terracotta rule, dropping from the top edge */
.ph::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 40px;
  width: 2px; height: 46px;
  background: var(--accent);
  opacity: 0.85;
  pointer-events: none;
}
.ph::after {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(95, 89, 79, 0.28);
  pointer-events: none;
}
.ph--dark { background: linear-gradient(135deg, #221D17 0%, var(--charcoal) 100%); }
.ph--dark .ph__frag { filter: none; opacity: 0.12; }
.ph--dark::after { border-color: rgba(243, 238, 226, 0.16); }

/* Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 14px 34px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: #B94E3A; transform: translateY(-2px); }

/* Quiet secondary action on dark grounds: readable label, small arrow, a
   clear underline, and a full 44px+ interaction height. */
.btn--ghost {
  gap: 10px;
  color: var(--on-dark);
  border: none;
  border-bottom: 1px solid var(--line-control);
  padding: 14px 4px;
  font-size: 14px;
}
.btn--ghost .a { color: var(--accent); transition: transform 0.3s var(--ease); }
.btn--ghost:hover { border-bottom-color: var(--accent); color: #fff; }
.btn--ghost:hover .a { transform: translateX(5px); }
[dir="rtl"] .btn--ghost:hover .a { transform: translateX(-5px); }

/* Solid dark action for light grounds (EMAIL THE FIRM on ivory). */
.btn--dark {
  gap: 10px;
  background: var(--charcoal);
  color: var(--on-dark);
  border: 1px solid var(--charcoal);
}
.btn--dark .a { color: var(--accent); transition: transform 0.3s var(--ease); }
.btn--dark:hover { background: transparent; color: var(--text-main); transform: translateY(-2px); }
.btn--dark:hover .a { transform: translateX(5px); }
[dir="rtl"] .btn--dark:hover .a { transform: translateX(-5px); }

/* Masthead CTA. */
.btn--outline {
  border: 1px solid var(--accent);
  color: var(--on-dark);
  font-size: 12px;
  letter-spacing: 0.12em;
  min-height: 44px;
  padding: 10px 20px;
  white-space: nowrap;
}
.btn--outline:hover { background: var(--accent); color: #fff; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-main);
}
.arrow-link .a { transition: transform 0.3s var(--ease); color: var(--accent-ink); }
.arrow-link:hover .a { transform: translateX(6px); }
[dir="rtl"] .arrow-link:hover .a { transform: translateX(-6px); }

/* Masthead
   Sticky warm-charcoal bar with a slight blur; one integrated brand lockup.
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--gutter);   /* 62px mark + 2×14 ≈ 91px header */
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(243, 238, 226, 0.06);
}
.masthead.is-open { background: var(--header-bg); }

.brand { display: flex; align-items: center; gap: 18px; flex-shrink: 0; text-decoration: none; min-width: 0; }
/* Height-driven so the true aspect ratio (779×552) governs width — no crop
   box, no letterboxing, no distortion. */
.brand__mark { height: 62px; width: auto; flex-shrink: 0; }
.brand__name {
  display: block;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: var(--on-dark);
  white-space: nowrap;
}
.brand__descriptor {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--on-dark-strong);
  white-space: nowrap;
  margin-top: 5px;
}

.nav { display: flex; align-items: center; flex-wrap: nowrap; gap: 28px; }
.nav__link {
  position: relative;
  color: var(--on-dark);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  white-space: nowrap;
  padding: 6px 0;
  transition: opacity 0.2s var(--ease);
}
.nav__link:hover { opacity: 1; }
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="true"]::after { transform: scaleX(1); }
.nav__link[aria-current="true"] { opacity: 1; }

.nav__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  margin-inline-end: -9px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav__toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--on-dark);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.masthead.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.masthead.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.masthead.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero
   Image-led asymmetric composition. Left: kicker, headline, actions.
   Right: supporting paragraph above the architectural image, divided by a
   terracotta seam that drops along the column edge.
   -------------------------------------------------------------------------- */
.hero {
  background: var(--hero-bg);
  color: var(--on-dark);
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  min-height: 86vh;
}
.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 110px var(--gutter) 90px;
  padding-inline-start: max(var(--gutter), calc((100vw - var(--measure)) / 2 + var(--gutter)));
}
.hero__kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: 36px;
}
.hero__kicker::before { content: ''; width: 44px; height: 1px; background: var(--accent); flex-shrink: 0; }
.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(46px, 5.8vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--on-dark);
  text-wrap: balance;
  max-width: 13ch;
}
.hero__actions { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin-top: 56px; }

.hero__right { position: relative; display: flex; flex-direction: column; min-width: 0; }
.hero__lede {
  font-size: 19px;
  line-height: 1.75;
  color: var(--on-dark-strong);
  max-width: 44ch;
  text-wrap: pretty;
  padding: 118px clamp(28px, 3vw, 56px) 44px;
}
.hero__visual { position: relative; flex: 1; min-height: 340px; overflow: hidden; }
.hero__visual .ph { position: absolute; inset: 0; }
.hero__seam {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -1px;
  width: 2px;
  background: linear-gradient(var(--accent) 0 62%, transparent 62%);
  z-index: 2;
}

/* Centered variant for standalone pages (404). */
.hero--centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100svh;
  padding: 120px var(--gutter);
}
.hero--centered .hero__kicker { justify-content: center; margin-bottom: 26px; }
.hero--centered .hero__kicker::before { display: none; }
.hero--centered .hero__title { margin-bottom: 26px; max-width: none; }
.hero--centered .hero__lede { max-width: 52ch; padding: 0 0 12px; }
.hero--centered .hero__actions { justify-content: center; margin-top: 36px; }

/* Sections
   -------------------------------------------------------------------------- */
.section { padding: var(--section) 0; }
.section--stone { background: var(--stone); }

.hero, .section { scroll-margin-top: var(--masthead-h); }

.section__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--text-main);
  text-wrap: balance;
}

/* The Firm
   -------------------------------------------------------------------------- */
.firm__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(44px, 6vw, 110px);
  align-items: start;
}
.firm__body { color: var(--text-soft); }
.firm__body p { margin-bottom: 26px; text-wrap: pretty; }
.firm__body .is-emphasis { color: var(--text-main); font-weight: 400; }

/* Four factual authority statements as ruled graphic panels, not bullets. */
.firm__facts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-light); margin-top: 64px; }
.fact { position: relative; padding: 34px 28px 30px; border-bottom: 1px solid var(--line-light); }
.fact:nth-child(odd) { border-inline-end: 1px solid var(--line-light); }
.fact::before { content: ''; position: absolute; top: -1px; inset-inline-start: 0; width: 34px; height: 2px; background: var(--accent); }
.fact__label {
  font-family: var(--serif);
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-main);
  line-height: 1.3;
}
.fact__note { font-size: 14px; line-height: 1.6; color: var(--text-soft); margin-top: 8px; }

/* Featured capabilities — three large editorial panels
   -------------------------------------------------------------------------- */
.feat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--line-light);
}
.feat:last-of-type { border-bottom: 1px solid var(--line-light); }
.feat__visual { position: relative; min-height: 380px; overflow: hidden; }
.feat__visual .ph { position: absolute; inset: 0; transition: transform 1s var(--ease); }
.feat:hover .feat__visual .ph { transform: scale(1.02); }
.feat__body {
  padding: clamp(44px, 4.5vw, 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.feat:nth-of-type(even) .feat__visual { order: 2; }
.feat__num {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px;
}
.feat__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(27px, 2.6vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--text-main);
  margin-bottom: 18px;
  text-wrap: balance;
}
.feat__desc { color: var(--text-soft); max-width: 52ch; margin-bottom: 30px; text-wrap: pretty; }

/* Capability ledger — remaining disciplines
   -------------------------------------------------------------------------- */
.ledger { border-top: 1px solid var(--line-light); }
.lrow {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 5fr) minmax(0, 7fr) 44px;
  gap: clamp(20px, 3vw, 52px);
  align-items: baseline;
  padding: 38px 26px;
  border-bottom: 1px solid var(--line-light);
  text-decoration: none;
  transition: background 0.35s var(--ease);
}
.lrow::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: -1px; bottom: -1px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s var(--ease);
}
.lrow:hover { background: var(--charcoal); }
.lrow:hover::before { transform: scaleY(1); }
.lrow__num {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  transition: color 0.35s var(--ease);
}
.lrow__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(23px, 2.2vw, 30px);
  line-height: 1.22;
  color: var(--text-main);
  transition: color 0.35s var(--ease);
}
.lrow__desc {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-soft);
  text-wrap: pretty;
  transition: color 0.35s var(--ease);
}
.lrow__go {
  align-self: center;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  font-size: 20px;
  color: var(--text-soft);
  opacity: 0.5;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.lrow:hover .lrow__num { color: var(--accent); }
.lrow:hover .lrow__title { color: var(--ivory); }
.lrow:hover .lrow__desc { color: var(--on-dark-strong); }
.lrow:hover .lrow__go { opacity: 1; color: var(--ivory); transform: translateX(5px); }
.lrow:focus-visible { background: var(--charcoal); }
.lrow:focus-visible .lrow__title { color: var(--ivory); }
[dir="rtl"] .lrow:hover .lrow__go { transform: translateX(-5px); }

.ledger__footer {
  padding: 30px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.ledger__footer p { font-size: 15px; line-height: 1.7; color: var(--text-soft); max-width: 62ch; }

/* People
   -------------------------------------------------------------------------- */
.people__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(44px, 6vw, 100px);
  align-items: center;
}
.people__portrait { position: relative; aspect-ratio: 4 / 5; }
.people__portrait .ph { position: absolute; inset: 0; }
.people__portrait::after {
  content: '';
  position: absolute;
  inset-block: 26px;
  inset-inline-end: -14px;
  width: 2px;
  background: var(--accent);
  opacity: 0.85;
}
.people__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--text-main);
  margin-bottom: 10px;
}
.people__role {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 34px;
}
.people__bio p { color: var(--text-soft); margin-bottom: 24px; text-wrap: pretty; }

.credentials {
  border: 1px solid var(--line-stone);
  background: var(--ivory);
  padding: 26px 28px;
  margin: 10px 0 34px;
}
.credentials__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 14px;
}
.credentials__list { margin: 0; padding: 0; list-style: none; font-size: 16.5px; line-height: 2; color: var(--text-soft); }
.credentials__note { font-size: 13px; color: var(--text-soft); margin-top: 12px; font-style: italic; }

/* Signature statement
   -------------------------------------------------------------------------- */
.signature {
  background: var(--charcoal);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
  padding: clamp(100px, 12vw, 170px) 0;
}
.signature__frag {
  position: absolute;
  inset-block: -10%;
  inset-inline-end: -12%;
  width: 44%;
  height: 120%;
  object-fit: contain;
  object-position: right center;
  opacity: 0.05;
  filter: grayscale(1) brightness(4);
  pointer-events: none;
}
.signature__rule { width: 56px; height: 2px; background: var(--accent); margin-bottom: 44px; }
.signature__text {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 4.8vw, 64px);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--on-dark);
  max-width: 20ch;
  text-wrap: balance;
  position: relative;
}

/* Contact — split composition
   -------------------------------------------------------------------------- */
.engage__intro { color: var(--text-soft); max-width: 52ch; margin: 14px 0 0; text-wrap: pretty; }
.engage__split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border: 1px solid var(--line-light);
  margin-top: 56px;
}
.engage__panel {
  background: var(--charcoal);
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
}
.engage__panel-img { position: relative; min-height: 220px; }
.engage__panel-img .ph { position: absolute; inset: 0; }
.engage__panel-body {
  padding: clamp(36px, 3.5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 26px;
  flex: 1;
}
.engage__panel h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(27px, 2.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.008em;
}
.engage__panel dl { margin: 0; display: flex; flex-direction: column; gap: 13px; font-size: 16px; }
.engage__panel .row { display: flex; gap: 10px; flex-wrap: wrap; }
.engage__panel dt { color: var(--on-dark); flex-shrink: 0; }
.engage__panel dd { margin: 0; color: var(--on-dark-strong); }
.engage__panel a {
  color: var(--on-dark-strong);
  text-decoration: none;
  border-bottom: 1px solid #4A443A;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.engage__panel a:hover { color: var(--on-dark); border-bottom-color: var(--on-dark-muted); }
.engage__urgent {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--on-dark-muted);
  border-top: 1px solid var(--line-dark);
  padding-top: 22px;
  margin-top: auto;
}

/* Direct-contact panel — the production experience until the secure endpoint
   exists. Two clear actions on the ivory side of the split. */
.engage__form { padding: clamp(36px, 3.5vw, 56px); display: flex; flex-direction: column; }
.engage__direct { display: flex; flex-direction: column; }
.engage__direct h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(27px, 2.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--text-main);
  margin-bottom: 14px;
}
.engage__direct p { color: var(--text-soft); max-width: 46ch; margin-bottom: 30px; text-wrap: pretty; }
.engage__buttons { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 26px; }
.engage__finalising {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
  border-top: 1px solid var(--line-light);
  padding-top: 20px;
  margin-bottom: 0;
}

/* Form — warm ivory area, boxed accessible fields (kept for the endpoint) */
.enquiry { display: flex; flex-direction: column; }
.enquiry__row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.enquiry__legend { font-size: 13.5px; color: var(--text-soft); margin-bottom: 26px; }

/* Interim notice while the enquiry form awaits its production endpoint. */
.enquiry__notice {
  border: 1px solid var(--line-stone);
  border-inline-start: 2px solid var(--accent);
  background: var(--stone);
  color: var(--text-main);
  font-size: 15.5px;
  line-height: 1.7;
  padding: 16px 20px;
  margin-bottom: 28px;
}
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; }
.field__req { color: var(--accent-ink); margin-inline-start: 3px; letter-spacing: 0; }
.enquiry__legend .field__req { margin-inline-start: 0; margin-inline-end: 3px; }

.field { display: flex; flex-direction: column; margin-bottom: 26px; }
.field__label {
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  line-height: 1.4;
  min-height: 2.8em;
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}
.field__input {
  width: 100%;
  background: #FFFDF8;
  border: 1px solid var(--line-stone);
  color: var(--text-main);
  font-size: 17px;
  font-family: var(--sans);
  font-weight: 300;
  padding: 13px 15px;
  min-height: 50px;
  border-radius: 0;
  transition: border-color 0.25s var(--ease);
}
.field__input:hover { border-color: #B3A995; }
.field__input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
textarea.field__input { resize: vertical; min-height: 110px; }
select.field__input { cursor: pointer; }
.field__input:user-invalid,
.field__input[aria-invalid="true"] { border-color: var(--accent-ink); }

/* Inline validation text, injected by site.js. */
.field__error {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--accent-ink);
  margin-top: 8px;
}

.enquiry > .btn--primary { align-self: flex-start; margin-top: 8px; }

.enquiry__disclaimer {
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.7;
  margin-top: 22px;
  max-width: 52ch;
  text-wrap: pretty;
}

.form-status {
  border: 1px solid var(--accent);
  padding: 40px 30px;
  text-align: center;
  color: var(--text-main);
  margin-top: 56px;
}
.form-status__title { font-family: var(--serif); font-size: 28px; margin-bottom: 12px; }
.form-status p { font-size: 16px; line-height: 1.8; color: var(--text-soft); }
.form-status--error { border-color: var(--accent-ink); }
.form-status a { color: var(--accent-ink); }
[hidden] { display: none !important; }

/* Colophon
   Institutional footer: identity, navigation, legal links and contact, then
   the legal-entity disclosure in deliberately smaller compliance text.
   -------------------------------------------------------------------------- */
.colophon { background: var(--charcoal); color: var(--on-dark); padding: clamp(70px, 8vw, 110px) 0 36px; }
.colophon__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(36px, 4.5vw, 72px);
  padding-bottom: 60px;
}
.colophon__mark { height: 92px; width: auto; margin-bottom: 22px; }
.colophon__name { font-weight: 600; font-size: 24px; letter-spacing: 0.04em; color: var(--on-dark); }
.colophon__descriptor { font-size: 13px; letter-spacing: 0.08em; color: var(--on-dark-strong); margin-top: 6px; }
.colophon__ar { font-family: var(--kufi); font-size: 15px; line-height: 2; color: var(--on-dark-muted); margin-top: 20px; }
.colophon__heading {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: 20px;
}
.colophon__nav { display: flex; flex-direction: column; gap: 13px; }
.colophon__nav a {
  font-size: 15px;
  color: var(--on-dark-strong);
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.colophon__nav a:hover { color: var(--on-dark); border-bottom-color: var(--on-dark-muted); }
.colophon address { font-style: normal; font-size: 15px; line-height: 2; color: var(--on-dark-strong); }
.colophon address a { color: inherit; text-decoration: none; border-bottom: 1px solid #4A443A; transition: color 0.25s var(--ease); }
.colophon address a:hover { color: var(--on-dark); }

.colophon__legal-entity {
  border-top: 1px solid var(--line-dark);
  padding-top: 28px;
  display: flex;
  gap: 16px 56px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.8;
  color: var(--on-dark-muted);
}
.colophon__legal-entity p { margin: 0; }
.colophon__legal-entity b {
  display: block;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.colophon__legal-entity span { color: var(--on-dark-strong); }

.colophon__bar {
  border-top: 1px solid var(--line-dark);
  margin-top: 28px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px 28px;
  flex-wrap: wrap;
}
.colophon__links { display: flex; gap: 26px; flex-wrap: wrap; }
.colophon__links a {
  font-size: 13px;
  color: var(--on-dark-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.colophon__links a:hover { color: var(--on-dark); border-bottom-color: var(--on-dark-muted); }
.colophon__legal { font-size: 13px; color: var(--on-dark-muted); }

/* Prose (legal pages)
   -------------------------------------------------------------------------- */
.prose {
  max-width: 760px;
  margin-inline: auto;
  padding: 90px var(--gutter) var(--section);
}
.prose h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--text-main);
  margin-bottom: 16px;
}
.prose h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  color: var(--text-main);
  margin: 48px 0 16px;
}
.prose p, .prose li {
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-soft);
  text-wrap: pretty;
}
.prose p { margin-bottom: 18px; }
.prose ul { padding-inline-start: 20px; margin-bottom: 18px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--accent-ink); text-underline-offset: 3px; }
.prose__updated {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-light);
}

/* RTL
   Layout is built on logical properties; these are the cases that don't
   resolve themselves: typefaces, tracking, glyph direction, LTR runs.
   -------------------------------------------------------------------------- */
[dir="rtl"] body { font-family: var(--kufi); }

[dir="rtl"] .hero__title,
[dir="rtl"] .section__title,
[dir="rtl"] .people__name,
[dir="rtl"] .feat__title,
[dir="rtl"] .lrow__title,
[dir="rtl"] .fact__label,
[dir="rtl"] .signature__text,
[dir="rtl"] .engage__panel h3,
[dir="rtl"] .form-status__title,
[dir="rtl"] .prose h1,
[dir="rtl"] .prose h2 {
  font-family: var(--kufi);
  font-weight: 500;
  line-height: 1.55;
}

/* Kufi runs wider and taller than the serif it replaces. */
[dir="rtl"] .hero__title { font-size: clamp(34px, 4.4vw, 60px); }
[dir="rtl"] .section__title { font-size: clamp(28px, 3.2vw, 42px); }
[dir="rtl"] .people__name { font-size: clamp(28px, 3.2vw, 40px); }
[dir="rtl"] .feat__title { font-size: clamp(22px, 2.2vw, 29px); }
[dir="rtl"] .lrow__title { font-size: clamp(20px, 1.9vw, 24px); }
[dir="rtl"] .fact__label { font-size: clamp(18px, 1.7vw, 22px); }
[dir="rtl"] .signature__text { font-size: clamp(30px, 3.8vw, 50px); }
[dir="rtl"] .lrow__num,
[dir="rtl"] .feat__num { font-family: var(--serif); }

/* Tracking is a Latin device; it breaks Arabic letter joining. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .hero__kicker,
[dir="rtl"] .people__role,
[dir="rtl"] .field__label,
[dir="rtl"] .credentials__label,
[dir="rtl"] .colophon__heading,
[dir="rtl"] .prose__updated,
[dir="rtl"] .btn,
[dir="rtl"] .arrow-link,
[dir="rtl"] .ph__tag,
[dir="rtl"] .nav__link {
  letter-spacing: 0;
  text-transform: none;
}

/* Brand lockup and Latin-script contact values stay LTR. */
[dir="rtl"] .brand { direction: ltr; }
[dir="rtl"] .brand__name,
[dir="rtl"] .brand__descriptor,
[dir="rtl"] .colophon__name,
[dir="rtl"] .colophon__descriptor { letter-spacing: 0.1em; }
[dir="rtl"] .engage__panel dd,
[dir="rtl"] .colophon address a { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] .engage__panel .row { justify-content: flex-start; }

/* Responsive
   -------------------------------------------------------------------------- */
/* Tighten the masthead before anything is allowed to wrap or overflow. */
@media (max-width: 1100px) {
  .masthead { gap: 18px; }
  .brand { gap: 12px; }
  .nav { gap: 18px; }
  .btn--outline { padding: 10px 14px; }
}

/* The Arabic nav carries one more item (the English link), so it collapses to
   the menu earlier than the English page does. */
@media (max-width: 1100px) {
  [dir="rtl"] .nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 18px;
    background: var(--charcoal);
    padding: 24px var(--gutter) 32px;
    border-top: 1px solid var(--line-dark);
  }
  [dir="rtl"] .masthead.is-open .nav { display: flex; }
  [dir="rtl"] .nav__toggle { display: flex; }
}

/* Enlarged brand needs the nav out of its way sooner: collapse to the menu at
   ≤1024 so the wordmark never collides with the links. */
@media (max-width: 1024px) {
  .nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 18px;
    background: var(--charcoal);
    padding: 24px var(--gutter) 32px;
    border-top: 1px solid var(--line-dark);
  }
  .masthead.is-open .nav { display: flex; }
  .nav__toggle { display: flex; }
  .nav__link { font-size: 15px; }
}

@media (max-width: 960px) {
  /* Mobile hero: flatten both columns into one ordered, centred stack —
     kicker, headline, paragraph, buttons, image. */
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 96px var(--gutter) 0; text-align: center; }
  .hero__text, .hero__right { display: contents; }
  .hero__kicker { order: 1; justify-content: center; }
  .hero__kicker::before { display: none; }
  .hero__title { order: 2; max-width: none; }
  .hero__lede { order: 3; margin-inline: auto; text-align: center; padding: 34px 0 0; max-width: 52ch; }
  .hero__actions { order: 4; justify-content: center; margin-top: 44px; margin-bottom: 56px; }
  .hero__visual { order: 5; min-height: 300px; flex: none; margin-inline: calc(-1 * var(--gutter)); }
  .hero__seam { display: none; }

  .firm__grid { grid-template-columns: 1fr; gap: 44px; }
  .feat { grid-template-columns: 1fr; }
  .feat:nth-of-type(even) .feat__visual { order: 0; }
  .feat__visual { min-height: 260px; }
  .people__grid { grid-template-columns: 1fr; }
  .people__portrait { max-width: 480px; }
  .engage__split { grid-template-columns: 1fr; }
  .colophon__grid { grid-template-columns: 1fr 1fr; gap: 44px; }
}

/* Mobile brand lockup: compact targets, header ≈ 73px, full descriptor kept. */
@media (max-width: 820px) {
  .masthead { padding: 13px var(--gutter); }
  .brand { gap: 12px; }
  .brand__mark { height: 46px; }
  .brand__name { font-size: 17px; letter-spacing: 0.03em; }
  .brand__descriptor { font-size: 10.5px; letter-spacing: 0.06em; margin-top: 4px; }

  /* Footer lockup at mobile */
  .colophon__mark { height: 64px; }
  .colophon__name { font-size: 20px; }
  .colophon__descriptor { font-size: 11.5px; }
}

@media (max-width: 760px) {
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; gap: 20px; margin-inline: auto; }
  .hero__actions .btn { white-space: normal; text-align: center; }
  .hero__actions .btn--ghost { padding-inline: 0; }

  .firm__facts { grid-template-columns: 1fr; }
  .fact:nth-child(odd) { border-inline-end: none; }

  .lrow { grid-template-columns: 44px 1fr 40px; row-gap: 12px; padding: 30px 16px; }
  .lrow__num { grid-row: 1; }
  .lrow__title { grid-column: 2; }
  .lrow__desc { grid-column: 2 / 4; }
  .lrow__go { grid-column: 3; grid-row: 1; opacity: 0.75; }

  .enquiry__row { grid-template-columns: 1fr; gap: 0; }
  .enquiry > .btn--primary { align-self: stretch; white-space: normal; }
  .field__label { min-height: 0; }
  .engage__buttons { flex-direction: column; }
  .engage__buttons a { width: 100%; }

  .colophon__grid { grid-template-columns: 1fr; }
  .colophon__bar { flex-direction: column; align-items: flex-start; }
  .colophon__legal-entity { flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal, .js .reveal-img > * { opacity: 1; transform: none; }
  .js .hero__kicker, .js .hero__title, .js .hero__lede, .js .hero__actions {
    opacity: 1; transform: none;
  }
}

/* Print
   -------------------------------------------------------------------------- */
@media print {
  .masthead, .nav__toggle, .hero__actions, .enquiry, .skip-link, .ph, .signature { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .engage__panel, .colophon, .section--stone { background: #fff !important; color: #000 !important; }
  .hero__title, .section__title, .feat__title, .lrow__title, .people__name { color: #000 !important; }
  .lrow__desc, .feat__desc, .firm__body, .people__bio, .colophon address { color: #333 !important; }
  .hero { min-height: auto; padding: 24px 0; display: block; }
  .section { padding: 24px 0; }
  .lrow, .feat, .credentials { break-inside: avoid; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 10px; color: #666; }
}

/* ==========================================================================
   PRESENCE PASS — architectural compositions, grain, and display typography
   --------------------------------------------------------------------------
   The six image slots previously rendered as one faded mark on a flat wash,
   which read as unfinished rather than restrained. They are now built as
   constructed architectural compositions: a fin/louvre facade, a floor datum,
   a raking light shaft, and a horizon. Everything is CSS + data: URIs, so it
   satisfies the strict img-src CSP and ships with no external requests.

   These remain INTERIM. When the six commissioned photographs arrive, replace
   each <figure class="ph …"> with <img> per the comment beside each slot; the
   wrapper classes and aspect ratios are unchanged, so nothing else moves.
   ========================================================================== */

/* Grain: breaks the digital flatness of large single-colour grounds. Fixed,
   inert, and dropped entirely for reduced-motion and print. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

/* ---- Architectural composition base -------------------------------------
   Layer order (top to bottom): raking light, vertical fins, floor datum,
   ground wash. Each variant re-times the fins and moves the light. */
.ph {
  background:
    linear-gradient(112deg,
      transparent 34%,
      rgba(255, 255, 255, 0.42) 44%,
      rgba(255, 255, 255, 0.06) 51%,
      transparent 58%),
    repeating-linear-gradient(90deg,
      rgba(29, 27, 24, 0.13) 0 1px,
      transparent 1px 42px),
    linear-gradient(0deg,
      rgba(29, 27, 24, 0.16) 0 1px,
      transparent 1px) 0 72% / 100% 100% no-repeat,
    radial-gradient(126% 84% at 80% 6%, rgba(255, 255, 255, 0.60), transparent 62%),
    linear-gradient(158deg, var(--stone) 0%, var(--ivory) 78%);
}

.ph--dark {
  background:
    linear-gradient(112deg,
      transparent 32%,
      rgba(243, 238, 226, 0.13) 43%,
      rgba(243, 238, 226, 0.02) 50%,
      transparent 57%),
    repeating-linear-gradient(90deg,
      rgba(243, 238, 226, 0.11) 0 1px,
      transparent 1px 42px),
    linear-gradient(0deg,
      rgba(243, 238, 226, 0.16) 0 1px,
      transparent 1px) 0 72% / 100% 100% no-repeat,
    radial-gradient(112% 76% at 74% 0%, rgba(201, 79, 61, 0.20), transparent 64%),
    radial-gradient(88% 62% at 16% 104%, rgba(243, 238, 226, 0.08), transparent 60%),
    linear-gradient(158deg, #241E18 0%, var(--charcoal) 72%);
}

/* The mark fragment becomes a deliberate compositional element rather than a
   faint smudge: larger, cropped hard to the trailing corner, still quiet. */
.ph__frag {
  object-position: 128% 132%;
  transform: scale(1.5);
  opacity: 0.09;
}
.ph--dark .ph__frag { opacity: 0.14; }

/* ---- Per-slot variants: each composition reads differently -------------- */

/* Hero — tallest rhythm, light raking from high right. */
.ph--tower {
  background:
    linear-gradient(104deg,
      transparent 26%,
      rgba(243, 238, 226, 0.16) 39%,
      rgba(243, 238, 226, 0.03) 47%,
      transparent 55%),
    repeating-linear-gradient(90deg,
      rgba(243, 238, 226, 0.13) 0 1px,
      transparent 1px 30px),
    repeating-linear-gradient(90deg,
      rgba(243, 238, 226, 0.07) 0 1px,
      transparent 1px 120px),
    linear-gradient(0deg,
      rgba(243, 238, 226, 0.20) 0 1px,
      transparent 1px) 0 84% / 100% 100% no-repeat,
    radial-gradient(104% 72% at 80% -4%, rgba(201, 79, 61, 0.26), transparent 62%),
    linear-gradient(168deg, #2A231C 0%, var(--charcoal) 68%);
}

/* Capability 01 — converging perspective, weighted low. */
.ph--converge {
  background:
    linear-gradient(96deg, transparent 40%, rgba(243, 238, 226, 0.12) 49%, transparent 57%),
    repeating-linear-gradient(84deg,
      rgba(243, 238, 226, 0.10) 0 1px,
      transparent 1px 34px),
    linear-gradient(0deg,
      rgba(243, 238, 226, 0.18) 0 1px,
      transparent 1px) 0 66% / 100% 100% no-repeat,
    radial-gradient(96% 66% at 26% 4%, rgba(201, 79, 61, 0.17), transparent 62%),
    linear-gradient(152deg, #241E18 0%, var(--charcoal) 74%);
}

/* Capability 02 — regulatory grid: a measured facade, both axes. */
.ph--grid {
  background:
    linear-gradient(118deg, transparent 36%, rgba(255, 255, 255, 0.40) 45%, transparent 54%),
    repeating-linear-gradient(90deg, rgba(29, 27, 24, 0.11) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(29, 27, 24, 0.09) 0 1px, transparent 1px 46px),
    radial-gradient(118% 78% at 84% 8%, rgba(255, 255, 255, 0.58), transparent 62%),
    linear-gradient(160deg, var(--stone) 0%, var(--ivory) 80%);
}

/* Capability 03 — horizontal strata, corporate and level. */
.ph--strata {
  background:
    linear-gradient(120deg, transparent 38%, rgba(255, 255, 255, 0.38) 46%, transparent 55%),
    repeating-linear-gradient(0deg, rgba(29, 27, 24, 0.10) 0 1px, transparent 1px 26px),
    linear-gradient(0deg, rgba(201, 79, 61, 0.55) 0 2px, transparent 2px) 0 78% / 100% 100% no-repeat,
    radial-gradient(120% 80% at 18% 6%, rgba(255, 255, 255, 0.62), transparent 64%),
    linear-gradient(200deg, var(--stone) 0%, var(--ivory) 78%);
}

/* Portrait — a formal arch/aperture, light entering from the left. */
.ph--aperture {
  background:
    radial-gradient(58% 46% at 50% 62%, rgba(255, 255, 255, 0.72), transparent 68%),
    linear-gradient(96deg, rgba(255, 255, 255, 0.34) 0 18%, transparent 34%),
    repeating-linear-gradient(90deg, rgba(29, 27, 24, 0.08) 0 1px, transparent 1px 54px),
    linear-gradient(0deg, rgba(29, 27, 24, 0.18) 0 1px, transparent 1px) 0 88% / 100% 100% no-repeat,
    linear-gradient(168deg, var(--stone) 0%, var(--ivory) 74%);
}

/* Contact panel — Kufic-derived lattice, dark and quiet. */
.ph--lattice {
  background:
    repeating-linear-gradient(45deg, rgba(243, 238, 226, 0.09) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(243, 238, 226, 0.09) 0 1px, transparent 1px 26px),
    radial-gradient(94% 66% at 70% 0%, rgba(201, 79, 61, 0.20), transparent 64%),
    linear-gradient(158deg, #241E18 0%, var(--charcoal) 76%);
}

/* ---- Hero: give the canvas itself depth and lift the display type ------- */
.hero {
  position: relative;
  background:
    radial-gradient(78% 60% at 84% -6%, rgba(201, 79, 61, 0.13), transparent 62%),
    radial-gradient(64% 52% at 4% 102%, rgba(243, 238, 226, 0.05), transparent 60%),
    var(--hero-bg);
}
.hero__text { position: relative; z-index: 1; }
.hero__title {
  font-size: clamp(52px, 7vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  max-width: 12ch;
}
/* Optical: the serif's terminal sits high, so the kicker needs a touch more air. */
.hero__kicker { margin-bottom: 40px; }

/* ---- Signature: deepen the statement moment ----------------------------- */
.signature {
  background:
    radial-gradient(72% 108% at 50% 0%, rgba(201, 79, 61, 0.15), transparent 64%),
    var(--ink);
}

/* ---- Motion and surface polish ----------------------------------------- */
.feat:hover .feat__visual .ph { transform: scale(1.035); }
.btn--primary:active,
.btn--dark:active,
.btn--outline:active { transform: translateY(0) scale(0.985); }

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  .feat:hover .feat__visual .ph { transform: none; }
}

@media print {
  body::after { display: none; }
}

/* ==========================================================================
   FULL-BLEED HERO (.hero--media)
   --------------------------------------------------------------------------
   Scoped to its own modifier so the centred 404 variant (.hero--centered) and
   the two-column base .hero are both left untouched.
   ========================================================================== */
:root { --accent-warm: #E08063; }

.hero--media {
  display: block;
  position: relative;
  min-height: min(100svh, 940px);
  overflow: hidden;
  background: var(--ink);
  padding: 0;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  transform: scale(1.035);
  animation: heroBreath 22s ease-in-out infinite alternate;
}
@keyframes heroBreath { to { transform: scale(1.085) translateX(-0.7%); } }

/* Two washes: a horizontal one to seat the type over the dark stone, and a
   vertical one to anchor the meta rail at the foot. */
.hero__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(14, 13, 12, 0.93) 0%,
      rgba(14, 13, 12, 0.74) 38%,
      rgba(14, 13, 12, 0.24) 68%,
      rgba(14, 13, 12, 0.08) 100%),
    linear-gradient(0deg, rgba(9, 8, 7, 0.62) 0%, transparent 46%);
}
[dir="rtl"] .hero__media img { object-position: center left; }
[dir="rtl"] .hero__wash {
  background:
    linear-gradient(270deg,
      rgba(14, 13, 12, 0.93) 0%,
      rgba(14, 13, 12, 0.74) 38%,
      rgba(14, 13, 12, 0.24) 68%,
      rgba(14, 13, 12, 0.08) 100%),
    linear-gradient(0deg, rgba(9, 8, 7, 0.62) 0%, transparent 46%);
}

.hero--media .hero__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: min(100svh, 940px);
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(140px, 20vh, 220px) var(--gutter) clamp(130px, 17vh, 180px);
}

/* Display type: the single largest lever on how consequential the page reads. */
.hero--media .hero__title {
  font-size: clamp(54px, 8.6vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.042em;
  font-weight: 400;
  max-width: 15ch;
  margin: 0;
}
.hero--media .hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-warm);
}

.hero--media .hero__kicker { margin-bottom: clamp(28px, 4vh, 44px); }

.hero--media .hero__lede {
  padding: 0;
  margin: clamp(30px, 4.5vh, 46px) 0 0;
  max-width: 52ch;
  font-size: clamp(16.5px, 1.35vw, 20px);
  color: rgba(243, 238, 226, 0.84);
}

.hero--media .hero__actions { margin-top: clamp(34px, 5vh, 54px); }

/* Foot rail: the firm's three standing facts, stated once, quietly. */
.hero__meta {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: clamp(22px, 4vh, 40px);
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 46px);
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(243, 238, 226, 0.62);
}
.hero__meta span { display: flex; align-items: center; gap: 11px; }
.hero__meta span::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .hero--media { min-height: 760px; }
  .hero--media .hero__text { min-height: 760px; padding-top: 150px; padding-bottom: 150px; }
  .hero--media .hero__title { max-width: none; }
  .hero__meta { gap: 12px 24px; font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; transform: none; }
}

@media print {
  .hero__media, .hero__wash, .hero__meta { display: none; }
}

/* ==========================================================================
   COMMISSIONED IMAGERY (.ph--shot)
   --------------------------------------------------------------------------
   Real architectural photography now fills the five remaining slots. The
   figure wrapper is kept so the two signature devices survive: the terracotta
   rule dropping from the top edge (.ph::before) and the thin inset frame
   (.ph::after). Both are lifted above the photograph.
   ========================================================================== */
.ph--shot { background: var(--charcoal); }
.ph--shot .shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ph--shot::before, .ph--shot::after { z-index: 1; }

/* The frame reads too heavy over a photograph — soften it on both grounds. */
.ph--shot::after { border-color: rgba(243, 238, 226, 0.22); }
.ph--shot:not(.ph--dark)::after { border-color: rgba(255, 255, 255, 0.30); }

/* A faint warm scrim keeps the light slots from competing with body copy. */
.ph--shot .shot { filter: saturate(0.94); }

/* ========================================================================== 
   2026 PREMIUM REFINEMENT
   A quieter identity, a cypress-led palette and a broader editorial image
   system inspired by the restraint—not the imitation—of global elite firms.
   ========================================================================== */
:root {
  --charcoal: #111816;
  --hero-bg: #111715;
  --header-bg: #101614;
  --ink: #09120F;
  --ivory: #F3F1EA;
  --stone: #E6E8E1;
  --text-main: #16201C;
  --text-soft: #52605A;
  --on-dark: #F3F1E9;
  --on-dark-strong: #CAD2CC;
  --on-dark-muted: #98A69F;
  --accent: #B75A43;
  --accent-ink: #914431;
  --cypress: #173D35;
  --cypress-deep: #0E2B25;
  --mineral: #AEB7B1;
  --line-dark: #283A34;
  --line-light: #CDD3CE;
  --line-stone: #C3CCC5;
  --masthead-h: 72px;
}

/* The wordmark leads; the Kufic geometry becomes a compact seal. */
.masthead { padding-block: 11px; border-bottom-color: rgba(243,241,233,.1); }
.brand { gap: 13px; }
.brand__mark { height: 44px; filter: saturate(.78) brightness(.92); }
.brand__name { font-size: 17px; letter-spacing: .07em; }
.brand__descriptor { margin-top: 4px; font-size: 9px; letter-spacing: .12em; color: var(--on-dark-muted); }
.nav { gap: clamp(18px,2.2vw,30px); }
.nav__link { font-size: 12px; letter-spacing: .12em; }
.nav__cta { padding: 12px 16px; }

/* Refined interaction weight: crisp hover, tactile press, no theatrical lag. */
.btn,.nav__cta,.arrow-link,.future-card { will-change: transform; }
.btn:active,.nav__cta:active,.future-card:active { transform: scale(.985); }
.btn { transition: transform .24s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.arrow-link { transition: color .25s var(--ease), transform .25s var(--ease); }
.arrow-link:hover { transform: translateX(3px); }

/* Frontier work: a contemporary visual register beyond stone and boardrooms. */
.future { background: var(--cypress-deep); color: var(--on-dark); overflow: hidden; }
.future__intro {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(280px,.55fr);
  gap: clamp(48px,9vw,130px);
  align-items: end;
  margin-bottom: clamp(52px,7vw,92px);
}
.future .eyebrow { color: #D08068; }
.future .section__title { color: var(--on-dark); max-width: 17ch; }
.future__intro > p { margin: 0 0 8px; color: var(--on-dark-strong); max-width: 47ch; }
.future__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: rgba(243,241,233,.18); }
.future-card { position: relative; display: grid; grid-template-rows: minmax(260px,36vw) 1fr; min-width: 0; background: var(--ivory); color: var(--text-main); text-decoration: none; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.future-card:hover { z-index: 2; transform: translateY(-6px); box-shadow: 0 24px 54px rgba(0,0,0,.22); }
.future-card--dark { background: #111715; color: var(--on-dark); }
.future-card--wide { grid-column: 1 / -1; grid-template-columns: minmax(0,1.3fr) minmax(320px,.7fr); grid-template-rows: minmax(420px,48vw); }
.future-card__media { position: relative; overflow: hidden; margin: 0; min-height: 0; background: #0E1513; }
.future-card__media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg,transparent 55%,rgba(9,18,15,.18)); pointer-events:none; }
.future-card__media img { width:100%; height:100%; object-fit:cover; filter:saturate(.9); transform:scale(1.015); transition:transform 1.1s var(--ease),filter .6s var(--ease); }
.future-card:hover .future-card__media img { transform:scale(1.055); filter:saturate(1); }
.future-card__body { position:relative; padding:clamp(30px,4vw,58px); }
.future-card__index { margin:0 0 20px; color:var(--accent-ink); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.future-card--dark .future-card__index { color:#D08068; }
.future-card__body h3 { margin:0 0 16px; max-width:16ch; font-family:var(--serif); font-size:clamp(29px,3.2vw,45px); font-weight:500; line-height:1.05; letter-spacing:-.015em; }
.future-card__body p:not(.future-card__index) { margin:0; max-width:47ch; color:var(--text-soft); font-size:15.5px; line-height:1.7; }
.future-card--dark .future-card__body p:not(.future-card__index) { color:var(--on-dark-strong); }
.future-card__body > span { position:absolute; right:clamp(26px,3vw,46px); top:clamp(28px,3.5vw,52px); font-size:24px; color:var(--accent); transition:transform .35s var(--ease); }
.future-card:hover .future-card__body > span { transform:translateX(7px); }
.future-card--wide .future-card__media { min-height:420px; }
.future-card--wide .future-card__body { display:flex; flex-direction:column; justify-content:center; }

@media (max-width: 900px) {
  .future__intro { grid-template-columns:1fr; gap:30px; }
  .future__grid { grid-template-columns:1fr; }
  .future-card--wide { grid-column:auto; grid-template-columns:1fr; grid-template-rows:minmax(300px,68vw) 1fr; }
  .future-card--wide .future-card__media { min-height:300px; }
}

@media (max-width: 560px) {
  .brand__mark { height:38px; }
  .brand__name { font-size:14.5px; }
  .brand__descriptor { font-size:8px; }
  .future-card { grid-template-rows:minmax(250px,70vw) 1fr; }
  .future-card__body { padding:28px 24px 34px; }
  .future-card__body h3 { font-size:31px; }
}

/* ========================================================================== 
   2026 IDENTITY UNIFICATION
   One editorial system from the masthead through the contact and footer.
   ========================================================================== */
:root {
  --accent: #B75A43;
  --accent-ink: #984631;
  --cypress: #102B25;
  --cypress-deep: #0B211D;
  --ivory: #F3F1EA;
  --stone: #E8EAE4;
  --charcoal: #102B25;
  --header-bg: #0B211D;
  --ink: #0B211D;
}

/* Wordmark-led identity: lighter, quieter and legible at every size. */
.masthead { background: rgba(11,33,29,.96); min-height: 76px; }
.brand { gap: 14px; color: var(--on-dark); }
.brand__word { font-family: var(--serif); font-size: clamp(29px,2.5vw,39px); font-weight: 500; line-height: .9; letter-spacing: .015em; }
.brand__rule { width: 1px; height: 36px; background: var(--accent); }
.brand__suffix { display:flex; flex-direction:column; gap:7px; }
.brand__suffix strong { font-size:12px; font-weight:500; letter-spacing:.19em; }
.brand__suffix small { color:var(--on-dark-muted); font-size:8px; letter-spacing:.15em; }

/* Copper is a signature, not a field colour. */
.btn--primary { background: var(--cypress); border-color: var(--cypress); color: var(--ivory); }
.hero .btn--primary { background: var(--ivory); border-color: var(--ivory); color: var(--cypress-deep); }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); color:#fff; }
.hero--media .hero__title em { color: #D27A62; }
.hero__meta span::before { width:18px; height:1px; transform:none; background:var(--accent); }

/* A single photographic grammar: muted colour, fine rule, square corners. */
.ph--shot .shot,
.frontier img,
.engage__panel-img img { filter:saturate(.72) contrast(.98); }
.feat__visual::after,
.frontier__lead::after,
.frontier__green::after { content:""; position:absolute; inset:18px; border:1px solid rgba(255,255,255,.28); pointer-events:none; }

/* Contemporary business now follows the same editorial rhythm as Capabilities. */
.frontier { background: var(--cypress); color:var(--on-dark); }
.frontier__intro { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.55fr); gap:clamp(48px,9vw,130px); align-items:end; margin-bottom:clamp(52px,7vw,88px); }
.frontier .eyebrow { color:#D27A62; }
.frontier .section__title { color:var(--on-dark); max-width:16ch; }
.frontier__intro>p { color:var(--on-dark-strong); max-width:48ch; margin:0 0 7px; }
.frontier__layout { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr); min-height:760px; border-top:1px solid rgba(243,241,234,.22); border-bottom:1px solid rgba(243,241,234,.22); }
.frontier__lead,.frontier__green { position:relative; margin:0; overflow:hidden; }
.frontier__lead img,.frontier__green img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease),filter .5s var(--ease); }
.frontier__lead:hover img,.frontier__green:hover img { transform:scale(1.035); filter:saturate(.9); }
.frontier__services { display:grid; grid-template-rows:auto auto auto minmax(220px,1fr); border-left:1px solid rgba(243,241,234,.22); }
.frontier__item { display:grid; grid-template-columns:38px 1fr 24px; gap:20px; color:inherit; text-decoration:none; padding:30px clamp(28px,4vw,54px); border-bottom:1px solid rgba(243,241,234,.22); transition:background .3s var(--ease); }
.frontier__item:hover { background:rgba(255,255,255,.055); }
.frontier__item>span { color:#D27A62; font-size:11px; letter-spacing:.14em; padding-top:6px; }
.frontier__item h3 { font:500 clamp(24px,2.2vw,34px)/1.08 var(--serif); margin:0 0 9px; }
.frontier__item p { color:var(--on-dark-strong); margin:0; font-size:14px; line-height:1.55; }
.frontier__item b { color:var(--accent); font-size:20px; font-weight:400; transition:transform .3s var(--ease); }
.frontier__item:hover b { transform:translateX(5px); }

/* Continue the cypress/ivory cadence through people, statement and contact. */
.section--stone { background:#E8EAE4; }
.people__portrait::after { background:var(--accent); }
.people__role { color:var(--accent-ink); }
.signature { background:var(--cypress-deep); min-height:520px; }
.signature__frag { position:absolute; right:-.02em; bottom:-.25em; color:rgba(243,241,234,.035); font:500 clamp(380px,52vw,760px)/.7 var(--serif); width:auto; height:auto; transform:none; }
.engage__panel { background:var(--cypress); }
.colophon { background:var(--cypress-deep); }
.colophon__name { display:flex; align-items:center; gap:12px; font-family:var(--serif); font-size:30px; font-weight:500; letter-spacing:.01em; }
.colophon__name i { display:inline-block; width:1px; height:26px; background:var(--accent); }
.colophon__descriptor { letter-spacing:.15em; }

@media (max-width: 1024px) {
  .brand__word { font-size:31px; }
  .brand__suffix strong { font-size:11px; }
  .frontier__layout { grid-template-columns:1fr; min-height:0; }
  .frontier__lead { min-height:58vw; }
  .frontier__services { border-left:0; border-top:1px solid rgba(243,241,234,.22); }
  .frontier__green { min-height:45vw; }
}
@media (max-width: 700px) {
  .brand { gap:10px; }
  .brand__word { font-size:26px; }
  .brand__rule { height:29px; }
  .brand__suffix strong { font-size:9px; letter-spacing:.12em; }
  .brand__suffix small { display:none; }
  .frontier__intro { grid-template-columns:1fr; gap:28px; }
  .frontier__item { grid-template-columns:28px 1fr 18px; gap:12px; padding:26px 20px; }
  .frontier__item h3 { font-size:26px; }
  .frontier__lead { min-height:78vw; }
  .frontier__green { min-height:64vw; }
  .colophon__name { font-size:25px; flex-wrap:wrap; }
}

/* ========================================================================== 
   APERTURE IDENTITY — FINAL BRAND APPLICATION
   Night green, warm paper and a single jade signal across every page.
   ========================================================================== */
:root {
  --accent: #4FAE91;
  --accent-ink: #2F7D68;
  --accent-warm: #73C0A7;
  --cypress: #0A201C;
  --cypress-deep: #071814;
  --charcoal: #0A201C;
  --hero-bg: #081B17;
  --header-bg: #071814;
  --ink: #071814;
  --ivory: #F1EFE7;
  --stone: #E4E7E1;
  --text-main: #14231F;
  --text-soft: #53615C;
  --on-dark: #F1EFE7;
  --on-dark-strong: #C1CEC8;
  --on-dark-muted: #8FA39B;
  --line-dark: #29423A;
  --line-light: #C8CEC8;
  --line-stone: #BEC8C1;
}

.masthead { background:rgba(7,24,20,.965); min-height:80px; }
.brand { gap:11px; }
.brand__cipher { width:36px; height:42px; object-fit:contain; flex:0 0 auto; }
.brand__word { font-size:30px; letter-spacing:.005em; }
.brand__rule { height:34px; background:var(--accent); }
.brand__suffix strong { font-size:11px; letter-spacing:.17em; }
.brand__suffix small { color:var(--on-dark-muted); }
.nav__link[aria-current="true"]::after { background:var(--accent); }

.hero--media .hero__title em { color:#79C5AD; }
.hero__kicker::before,.hero__meta span::before,.signature__rule { background:var(--accent); }
.eyebrow,.feat__num,.lrow__num,.people__role { color:var(--accent-ink); }
.frontier .eyebrow,.frontier__item>span { color:#79C5AD; }
.frontier__item b,.arrow-link .a,.lrow__go { color:var(--accent); }
.btn--primary:hover { background:var(--accent); border-color:var(--accent); color:#061713; }
.btn--outline { border-color:rgba(79,174,145,.58); }
.btn--outline:hover { background:var(--accent); border-color:var(--accent); color:#061713; }

.ph::before { background:var(--accent); }
.feat__visual::after,.frontier__lead::after,.frontier__green::after { border-color:rgba(121,197,173,.34); }
.ph--shot .shot,.frontier img,.engage__panel-img img { filter:saturate(.64) contrast(1.02); }
.frontier { background:var(--cypress); }
.signature,.colophon { background:var(--cypress-deep); }
.engage__panel { background:var(--cypress); }
.people__portrait::after { background:var(--accent); }

.signature__frag {
  right:clamp(-70px,-3vw,-20px);
  bottom:-150px;
  width:clamp(420px,48vw,720px);
  height:auto;
  opacity:.055;
  object-fit:contain;
  font:inherit;
}

.colophon__identity { display:flex; align-items:center; gap:16px; margin-bottom:8px; }
.colophon__identity>img { width:42px; height:48px; object-fit:contain; flex:0 0 auto; }
.colophon__identity .colophon__name { margin:0; font-size:22px; gap:8px; flex-wrap:nowrap; white-space:nowrap; }
.colophon__name i { background:var(--accent); }

@media (max-width: 1180px) {
  .brand__cipher { width:31px; height:37px; }
  .brand__word { font-size:27px; }
  .brand__suffix strong { font-size:10px; letter-spacing:.13em; }
  .brand__suffix small { display:none; }
}
@media (max-width: 700px) {
  .masthead { min-height:72px; }
  .brand__cipher { width:27px; height:32px; }
  .brand__word { font-size:23px; }
  .brand__rule { height:28px; }
  .brand__suffix strong { font-size:8.5px; letter-spacing:.09em; }
  .signature__frag { width:430px; right:-120px; bottom:-80px; }
  .colophon__identity { align-items:flex-start; }
  .colophon__identity>img { width:36px; height:42px; }
  .colophon__identity .colophon__name { white-space:normal; flex-wrap:wrap; }
}

/* ========================================================================== 
   WORDMARK-ONLY IDENTITY
   The name is the mark. Terracotta is used only for the single rule device.
   ========================================================================== */
:root {
  --accent: #C24B33;
  --accent-ink: #9B3826;
  --accent-warm: #C24B33;
}

.brand { gap:14px; }
.brand__word { font-family:var(--serif); font-size:32px; font-weight:500; letter-spacing:.065em; }
.brand__rule { width:1px; height:36px; background:#C24B33; }
.brand__suffix { gap:6px; }
.brand__suffix strong { font-family:var(--serif); font-size:17px; font-weight:500; letter-spacing:.08em; }
.brand__suffix small { font-family:var(--sans); font-size:7.5px; letter-spacing:.16em; color:var(--on-dark-muted); }

.hero--media .hero__title em { color:#D36A52; }
.hero__kicker::before,.hero__meta span::before,.signature__rule,
.nav__link[aria-current="true"]::after,.ph::before,.people__portrait::after { background:#C24B33; }
.eyebrow,.feat__num,.lrow__num,.people__role { color:#9B3826; }
.frontier .eyebrow,.frontier__item>span { color:#D9826C; }
.frontier__item b,.arrow-link .a,.lrow__go { color:#C24B33; }
.btn--primary:hover,.btn--outline:hover { background:#C24B33; border-color:#C24B33; color:#fff; }
.btn--outline { border-color:rgba(194,75,51,.62); }
.feat__visual::after,.frontier__lead::after,.frontier__green::after { border-color:rgba(194,75,51,.34); }

.signature__frag {
  position:absolute;
  right:-.04em;
  bottom:-.18em;
  width:auto;
  height:auto;
  opacity:1;
  color:rgba(241,239,231,.035);
  font:500 clamp(170px,30vw,460px)/.72 var(--serif);
  letter-spacing:.02em;
  white-space:nowrap;
}

.colophon__wordmark-stack { display:flex; align-items:stretch; gap:20px; margin-bottom:13px; }
.colophon__wordmark-stack>i { width:2px; min-height:104px; background:#C24B33; flex:0 0 auto; }
.colophon__wordmark-stack p { display:flex; flex-direction:column; justify-content:center; gap:9px; margin:0; color:var(--on-dark); font-family:var(--serif); }
.colophon__wordmark-stack span { font-size:31px; font-weight:500; letter-spacing:.09em; }
.colophon__wordmark-stack strong { font-size:22px; font-weight:500; letter-spacing:.1em; }

@media (max-width: 1180px) {
  .brand__word { font-size:28px; }
  .brand__rule { height:32px; }
  .brand__suffix strong { font-size:14px; }
}
@media (max-width: 700px) {
  .brand { gap:9px; }
  .brand__word { font-size:23px; letter-spacing:.04em; }
  .brand__rule { height:27px; }
  .brand__suffix strong { font-size:11px; letter-spacing:.05em; }
  .signature__frag { right:-.25em; bottom:-.05em; font-size:180px; }
  .colophon__wordmark-stack>i { min-height:88px; }
  .colophon__wordmark-stack span { font-size:26px; }
  .colophon__wordmark-stack strong { font-size:18px; }
}