/* ==========================================================================
   محمد الحصين — Personal Brand Site
   Design system: white / black / warm gold. Editorial, minimal, cinematic.
   ========================================================================== */

/* ---------- Fonts: DIN Next Arabic (self-hosted, official files) ----------
   Four real weight-specific files, one @font-face per weight — no fake
   bold/light synthesis. font-display:swap avoids blocking first paint.
   Paths are relative to this file (css/style.css → ../assets/fonts/). */
@font-face{
  font-family:'DIN Next Arabic';
  src:url('../assets/fonts/din-next-arabic-light.otf') format('opentype');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'DIN Next Arabic';
  src:url('../assets/fonts/din-next-arabic-regular.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'DIN Next Arabic';
  src:url('../assets/fonts/din-next-arabic-medium.otf') format('opentype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'DIN Next Arabic';
  src:url('../assets/fonts/din-next-arabic-bold.otf') format('opentype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ---------- Design Tokens ---------- */
:root{
  --white:      #FFFFFF;
  --paper:      #FAF8F5;
  --black:      #0B0B0A;
  --ink:        #17130F;
  --charcoal:   #1E1B17;
  --line:       #E7E2D9;
  --line-dark:  #3A342B;
  --gold:       #B8925A;
  --gold-light: #D8B989;
  --gold-deep:  #8C6A3C;
  --muted:      #6B6357;
  --muted-light: rgba(250,248,245,.62);

  --font-display: 'DIN Next Arabic', system-ui, sans-serif;
  --font-body:    'DIN Next Arabic', system-ui, sans-serif;

  --container: 1360px;
  --gutter: clamp(20px, 5vw, 96px);
  --section-pad: clamp(72px, 12vw, 180px);

  --ease: cubic-bezier(.16,.84,.32,1);
  --dur-s: .5s;
  --dur-m: .9s;
  --dur-l: 1.4s;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
img{ max-width:100%; display:block; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.18; letter-spacing:-.01em; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-synthesis:none; /* only the four real DIN Next Arabic files render — no browser-faked bold/oblique */
}

.skip-link{
  position:absolute; right:-999px; top:0; z-index:999;
  background:var(--gold); color:var(--black); padding:14px 22px; font-weight:500;
}
.skip-link:focus{ right:16px; top:16px; }

/* ---------- Utility ---------- */
/* Visually hidden but still announced by screen readers / indexable by
   crawlers — used for the page's semantic <h1> (see index.html hero
   section), which duplicates the hero's own on-screen logo + kicker text
   rather than adding a second visible heading. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:1.05em 2.2em; border:1px solid currentColor;
  font-weight:500; font-size:.95rem; letter-spacing:.02em;
  border-radius:999px; transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.btn--primary{ color:var(--ink); }
.btn--primary:hover, .btn--primary:focus-visible{ background:var(--ink); color:var(--paper); }

/* ---------- Image Placeholder System ---------- */
.ph{
  position:relative; overflow:hidden; background:var(--charcoal);
  border-radius:2px; isolation:isolate;
}
.ph::after{
  content: attr(data-caption);
  position:absolute; inset:auto 0 0 0;
  padding: 14px 18px;
  font-family:var(--font-body); font-size:.68rem; letter-spacing:.03em;
  line-height:1.5; color:rgba(250,248,245,.55);
  background:linear-gradient(0deg, rgba(11,11,10,.85) 0%, transparent 100%);
  opacity:0; transition:opacity var(--dur-s) var(--ease);
  pointer-events:none;
}
.ph:hover::after, .ph:focus-within::after{ opacity:1; }
.ph__texture{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(184,146,90,.07) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(45deg, rgba(184,146,90,.05) 0 1px, transparent 1px 64px),
    linear-gradient(160deg, #211d18 0%, #14120f 60%, #0c0b09 100%);
  transition:transform 1.1s var(--ease);
}
.ph:hover .ph__texture{ transform:scale(1.035); }
@media (prefers-reduced-motion: reduce){ .ph:hover .ph__texture{ transform:none; } }
.ph__texture::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(184,146,90,.35) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity:.35;
}
.ph::before{
  /* aperture / lens mark, centered */
  content:"";
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; z-index:1;
  border:1px solid rgba(216,185,137,.45); border-radius:50%;
}
.ph--portrait{ aspect-ratio: 4/5; }
.ph--tall{ aspect-ratio: 3/4; }
.ph--full{ aspect-ratio: 21/9; }
.ph--cinema{ aspect-ratio: 21/9; }
.ph--ambient{ position:absolute; inset:0; aspect-ratio:auto; }

/* Real photography variant — suppress placeholder decoration, add refined hover */
.ph--photo{ background:var(--black); }
.ph--photo::before,
.ph--photo::after{ content:none; }
.ph--photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.ph--photo:hover img{ transform:scale(1.035); }
@media (prefers-reduced-motion: reduce){ .ph--photo:hover img{ transform:none; } }

/* ---------- Editorial portrait frame ---------- */
.portrait-frame{
  position:relative; aspect-ratio:4/5;
  padding: clamp(14px,1.6vw,22px);
}
.portrait-frame::before{
  content:""; position:absolute; inset:0;
  border:1px solid var(--gold); z-index:0;
}
.portrait-frame img{
  position:relative; z-index:1; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  box-shadow: 0 30px 60px -30px rgba(11,11,10,.35);
}

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(250,248,245,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-color:var(--line);
}
.site-header.is-scrolled .brand__mark--light{ display:none; }
.site-header.is-scrolled .brand__mark--dark{ display:block; }
.site-header.is-scrolled .primary-nav a{ color:var(--ink); }
.site-header.is-scrolled .menu-toggle span{ background:var(--ink); }
.site-header.is-scrolled .social-row--header a{ color:var(--ink); border-color:var(--line); }
.site-header.is-scrolled .social-row--header a:hover,
.site-header.is-scrolled .social-row--header a:focus-visible{
  color:var(--paper); background:var(--ink); border-color:var(--ink);
}

.site-header__row{
  max-width:var(--container); margin:0 auto;
  padding:20px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:block; }
.brand__mark{ width:52px; height:auto; }
.brand__mark--dark{ display:none; }
.brand__mark--light{ display:block; }

.primary-nav{ display:none; gap:2.6rem; }
.primary-nav a{
  font-size:.92rem; font-weight:500; color:var(--paper);
  position:relative; padding-bottom:4px; transition:color var(--dur-s);
}
.primary-nav a::after{
  content:""; position:absolute; right:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width var(--dur-s) var(--ease);
}
.primary-nav a:hover::after, .primary-nav a:focus-visible::after{ width:100%; }

@media (min-width:900px){
  /* Three real columns instead of flex's two-item space-between: a fixed
     track on each outer edge and an auto-sized middle track for the nav.
     The two outer tracks share the exact same minmax() definition, so
     they're always identically sized (in lockstep, both floor and growth)
     regardless of the logo and icon cluster having very different natural
     widths — that's what actually centers the nav in the full row rather
     than just in whatever space happens to be left over next to the logo.
     Plain `1fr auto 1fr` looks equivalent but isn't quite: grid only
     splits free space evenly between equal-fr tracks *before* checking
     each track's own content-minimum, so the (wider) icon cluster would
     win more of that space than the (narrower) logo the moment the row
     gets narrow enough — a real, measurable off-center nav right at this
     900px breakpoint. The 170px floor here is the icon cluster's own
     content width (4 × 32px + 3 × .85rem gaps ≈ 169px, see
     .social-row--header below) rounded up, so it can never be forced
     smaller than what it actually needs. justify-self pins each outer
     item to the true outer edge of its (now roomier) track — RTL: brand
     starts at the right, the icons end at the left — instead of letting
     them stretch across it. Height/padding are unchanged (still set on
     this same element above), and this whole block only applies at the
     same 900px breakpoint the nav already switched on at, so mobile
     (still plain flex, brand + hamburger) is untouched. */
  .site-header__row{ display:grid; grid-template-columns:minmax(170px,1fr) auto minmax(170px,1fr); column-gap:2rem; }
  .brand{ justify-self:start; }
  .primary-nav{ display:flex; justify-self:center; }
  .social-row--header{ display:flex; justify-self:end; gap:.85rem; }
  .social-row--header a{ width:32px; height:32px; }
  .social-row--header a svg{ width:14px; height:14px; }
  /* Desktop already shows the full nav, so the mobile hamburger has no
     job to do here — hide it outright (not just visually) rather than
     leaving a dead, focusable button sitting at the header's far edge. */
  .menu-toggle{ display:none; }
}

.menu-toggle{ display:none; width:34px; height:22px; position:relative; z-index:70; }
.menu-toggle span{
  position:absolute; right:0; width:100%; height:1.5px; background:var(--paper);
  transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease), background var(--dur-s);
}
.menu-toggle span:nth-child(1){ top:0; }
.menu-toggle span:nth-child(2){ top:50%; transform:translateY(-50%); }
.menu-toggle span:nth-child(3){ bottom:0; }
.menu-toggle[aria-expanded="true"] span{ background:var(--paper); }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ bottom:50%; transform:translateY(50%) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:55; background:var(--black);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--gutter);
  transform:translateY(-100%); transition:transform var(--dur-m) var(--ease);
  visibility:hidden;
}
.mobile-menu.is-open{ transform:translateY(0); visibility:visible; }
.mobile-menu ol{ display:flex; flex-direction:column; gap:.4rem; }
.mobile-menu a{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--font-display); font-size:clamp(2.2rem,8vw,4rem); font-weight:700;
  color:var(--paper); padding:.35em 0; border-bottom:1px solid var(--line-dark);
}
.mobile-menu a[data-index]::before{
  content:attr(data-index); font-family:var(--font-body); font-size:.9rem; color:var(--gold);
  font-weight:500;
}
.mobile-menu__footer{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line-dark);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  color:var(--muted-light); font-size:.85rem;
}

.social-row{ display:flex; gap:1.4rem; }
.social-row a{ font-size:.82rem; letter-spacing:.03em; color:inherit; transition:color var(--dur-s); }
.social-row a:hover{ color:var(--gold); }

/* Mobile full-screen menu footer — same circle-outline / fill-on-hover
   icon pattern as the header/contact rows (see .social-row--header and
   .social-row--contact), sized for the menu's small footer row. */
.social-row--mobile{ gap:.75rem; }
.social-row--mobile a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(250,248,245,.35); color:var(--paper);
  transition:color var(--dur-s) var(--ease), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.social-row--mobile a svg{ width:15px; height:15px; }
.social-row--mobile a:hover, .social-row--mobile a:focus-visible{
  color:var(--ink); background:var(--paper); border-color:var(--paper);
}

/* Header icons — same circle-outline / fill-on-hover interaction as
   .social-row--contact at the bottom of the page, colored to follow the
   header's own existing light/dark swap between its transparent-over-hero
   state and its scrolled state (see .site-header.is-scrolled above),
   instead of the contact section's fixed light-background colors.
   Visible at every breakpoint: on mobile it sits where the hamburger used
   to be (left side of the row), sized down small so 4 icons in one row
   never take more than ~40% of the row's mobile width; on desktop
   (≥900px) it sits beside the nav at its original larger size (see the
   900px media query above, which restores the bigger size). */
.social-row--header{ display:flex; gap:.35rem; }
.social-row--header a{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  border:1px solid rgba(250,248,245,.5); color:var(--paper);
  transition:color var(--dur-s) var(--ease), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.social-row--header a svg{ width:10px; height:10px; }
.social-row--header a:hover, .social-row--header a:focus-visible{
  color:var(--ink); background:var(--paper); border-color:var(--paper);
}

/* ---------- Hero ---------- */
.hero{
  position:relative; height:100svh; min-height:600px;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--paper); overflow:hidden;
}
.hero__media{ position:absolute; inset:-4% -4%; z-index:0; will-change:transform; }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  object-position: 68% 55%;
}
@media (max-width:640px){
  .hero__media img{ object-position: 60% 62%; }
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(11,11,10,.92) 0%, rgba(11,11,10,.35) 45%, rgba(11,11,10,.55) 100%);
}
.hero__content{
  position:relative; z-index:2; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1.6rem;
  padding:0 var(--gutter) clamp(48px,8vh,96px);
}
.hero__signature{
  width:min(340px, 62vw); height:auto;
  filter:drop-shadow(0 6px 40px rgba(0,0,0,.4));
}
.hero__kicker{
  font-size:.95rem; letter-spacing:.14em; font-weight:300;
  color:var(--muted-light);
}
.hero__base{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter) clamp(20px,4vh,40px);
  font-size:.78rem; letter-spacing:.06em; color:var(--muted-light);
}
.scroll-cue{ display:inline-flex; align-items:center; color:inherit; }

/* ---------- Statement (kinetic sentence) ---------- */
.statement{
  padding:var(--section-pad) var(--gutter);
  max-width:1180px; margin:0 auto; text-align:center;
}
.statement__text{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(1.9rem, 5.6vw, 4.4rem); line-height:1.35;
}
/* gold-deep, not gold: on this section's paper background plain --gold
   fails WCAG AA contrast (2.71:1, below even the 3:1 large-text floor) —
   gold-deep passes (4.67:1) and is the same token already used for gold
   accents elsewhere on light backgrounds (e.g. .cap-tile__num, .quote-line). */
.statement__text .accent{ color:var(--gold-deep); }

.reveal-lines span{
  display:inline-block; opacity:0; transform:translateY(.5em);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-lines.in-view span{ opacity:1; transform:translateY(0); }
.reveal-lines span:nth-child(1){ transition-delay:.02s; }
.reveal-lines span:nth-child(2){ transition-delay:.07s; }
.reveal-lines span:nth-child(3){ transition-delay:.12s; }
.reveal-lines span:nth-child(4){ transition-delay:.17s; }
.reveal-lines span:nth-child(5){ transition-delay:.22s; }
.reveal-lines span:nth-child(6){ transition-delay:.27s; }
.reveal-lines span:nth-child(7){ transition-delay:.32s; }
.reveal-lines span:nth-child(8){ transition-delay:.37s; }
.reveal-lines span:nth-child(9){ transition-delay:.42s; }
.reveal-lines span:nth-child(10){ transition-delay:.47s; }
.reveal-lines span:nth-child(11){ transition-delay:.52s; }
.reveal-lines span:nth-child(12){ transition-delay:.57s; }

/* ---------- Generic reveal ---------- */
.reveal-up{ opacity:0; transform:translateY(48px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-up.in-view{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(1.06); transition:opacity 1.1s var(--ease), transform 1.4s var(--ease); }
.reveal-scale.in-view{ opacity:1; transform:scale(1); }
[data-delay="1"]{ transition-delay:.1s; }
[data-delay="2"]{ transition-delay:.2s; }
[data-delay="3"]{ transition-delay:.3s; }
[data-delay="4"]{ transition-delay:.4s; }
[data-delay="5"]{ transition-delay:.5s; }
[data-delay="6"]{ transition-delay:.6s; }
[data-delay="7"]{ transition-delay:.7s; }
[data-delay="8"]{ transition-delay:.8s; }
[data-delay="9"]{ transition-delay:.9s; }
[data-delay="10"]{ transition-delay:1s; }

/* ---------- Who / About ---------- */
.who{ padding:var(--section-pad) var(--gutter); background:var(--white); }
.who__grid{
  max-width:var(--container); margin:0 auto;
  display:grid; gap:clamp(32px,6vw,96px);
}
.who__copy h2{ font-size:clamp(2.1rem,4.4vw,3.2rem); margin-bottom:1.1rem; }
.who__copy .lede{ font-size:1.2rem; color:var(--ink); font-weight:500; margin-bottom:1.4rem; }
.who__copy p{ color:var(--muted); max-width:52ch; margin-bottom:1.2rem; }
.quote-line{ font-family:var(--font-display); font-weight:500; color:var(--gold-deep); font-style:normal; font-size:1.15rem; }

@media (min-width:860px){
  .who__grid{ grid-template-columns:.85fr 1.15fr; align-items:center; }
}

/* Mobile only: shrink the portrait slightly and give it a breathing margin
   on each side (~10% of the section's width) instead of running edge to
   edge, keeping it centered. aspect-ratio on .portrait-frame is untouched,
   so the crop/proportions stay exactly the same, just smaller. Desktop
   (≥860px, the breakpoint above) is unaffected. */
@media (max-width:859px){
  .who .portrait-frame{ max-width:80%; margin-inline:auto; }
  .who__copy h2{ margin-top:28px; }
}

/* ---------- Iconic (Bono) ---------- */
.iconic{ position:relative; }
.ph--cinema{ width:100%; }
.iconic__caption{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:clamp(28px,6vw,72px) var(--gutter);
  color:var(--paper);
  background:linear-gradient(0deg, rgba(11,11,10,.9) 0%, transparent 100%);
  max-width:760px;
}
.iconic{ display:grid; }
.iconic .ph{ grid-area:1/1; }
.iconic .iconic__caption{ grid-area:1/1; align-self:end; position:relative; }
.iconic__caption h3{ font-size:clamp(1.8rem,4vw,2.8rem); margin:.4rem 0 .8rem; }
.iconic__caption p{ color:var(--muted-light); max-width:60ch; }

/* Mobile-only copy of the paragraph, rendered in normal flow below the
   image instead of overlaid on it (see the two identical <p> tags in the
   .iconic section markup) — hidden by default so desktop keeps exactly the
   original single overlaid paragraph. */
.iconic__desc--below{ display:none; }

/* On narrow screens the 21/9 "cinema" ratio leaves the photo too short to
   read, and the full overlay (title + paragraph, sized for a wide desktop
   image) ends up covering most of what little height is left. Below 900px
   (the same mobile/desktop split used elsewhere on the site): use a taller
   ratio so the photo actually shows, and move both the title and the
   paragraph into normal flow below the image (title first, then
   description), out of the overlay entirely. Desktop (≥900px) keeps the
   original overlaid title + paragraph, untouched. */
@media (max-width:899px){
  .iconic .ph--cinema{ aspect-ratio:4/5; }
  /* Title moves out of the image overlay and into plain flow directly
     under the photo — centered, and matching the description's own width
     (both share the same var(--gutter) side padding with no extra
     max-width, so their line lengths line up). Higher specificity than
     the base `.iconic .iconic__caption{ grid-area:1/1; align-self:end; }`
     rule above (same compound selector), so this fully replaces the
     overlay placement instead of just adding to it. Desktop (≥900px)
     keeps that original overlaid caption, completely untouched. */
  .iconic .iconic__caption{
    grid-area:2/1; align-self:auto; position:static;
    max-width:none; text-align:center;
    padding:20px var(--gutter) 0;
    background:none;
  }
  .iconic__caption h3{ font-size:clamp(1.5rem,6vw,2rem); margin:0; color:#FFFFFF; }
  .iconic__desc--overlay{ display:none; }
  /* Mobile only, per request: whole section on black with white text —
     size/margins/padding below are unchanged, only colors. */
  .iconic{ background:#000000; }
  .iconic__desc--below{
    display:block; grid-column:1; grid-row:3; /* row 2 is now the title above (see .iconic .iconic__caption) — the description sits in its own row underneath */
    color:#FFFFFF; max-width:none;
    padding:16px var(--gutter) 24px; /* 16px: same gap as above the title, so spacing above/below it reads as consistent; 24px: a small black cushion so the next section doesn't sit flush against the text */
  }
}

/* ---------- Stats ---------- */
.stats{ padding:var(--section-pad) var(--gutter); background:var(--paper); }
.stats__intro{ max-width:var(--container); margin:0 auto clamp(40px,6vw,72px); text-align:center; }
.stats__intro h3{ font-size:clamp(1.8rem,3.6vw,2.6rem); }
.stats__grid{
  max-width:var(--container); margin:0 auto;
  display:grid; gap:2.4rem 1.5rem; grid-template-columns:repeat(2,1fr);
  text-align:center; border-top:1px solid var(--line);
}
.stat{ padding:2.6rem 1rem 0; border-bottom:1px solid var(--line); }
.stat dt{ font-size:.78rem; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin-bottom:.6rem; }
.stat dd{ font-family:var(--font-display); font-size:clamp(1.8rem,4vw,3rem); font-weight:700; color:var(--ink); }
.stat__label{ display:block; margin-top:.4rem; font-size:.85rem; color:var(--muted); }
@media (min-width:760px){ .stats__grid{ grid-template-columns:repeat(4,1fr); } .stat{ border-left:1px solid var(--line); } }

/* ---------- Capabilities ---------- */
.capabilities{ padding:var(--section-pad) var(--gutter); background:var(--white); }
.capabilities__intro{ max-width:var(--container); margin:0 auto clamp(40px,7vw,88px); }
.capabilities__intro h2{ font-size:clamp(2.1rem,4.6vw,3.4rem); max-width:16ch; }

/* ---------- Capabilities carousel — single-image, swipeable gallery ----------
   Apple-style edge-anchored peek carousel: the current photo sits flush at
   the right edge of the frame (RTL reading start) and the next photo's
   other half peeks in on the left, giving a sense there's more to see.
   Mobile shows 1 full photo + a half-photo peek (1.5 "slots" across the
   viewport); desktop shows 3 full photos + a half-photo peek (3.5 slots) —
   never a 4th full photo. A real-time-drag, GPU-accelerated horizontal
   slider, same behaviour on touch and mouse, with a matching full-screen
   lightbox. Section colours/type/card design/image ratios are untouched —
   only the browsing mechanics, nav position and caption layout changed.
   See js/main.js for the drag/snap/lightbox logic. */
.cap-carousel{
  position:relative;
  max-width:var(--container); margin:0 auto;
}
.cap-carousel__viewport{ overflow:hidden; border-radius:20px; }
.cap-carousel__track{
  display:flex;
  direction:ltr; /* keep the slide index/transform math predictable regardless of the page's RTL base direction — same technique as the press carousel */
  flex-direction:row-reverse; /* slide 0 (first in the DOM) renders at the right — the carousel starts at the right-most photo, per the RTL reading order */
  touch-action:pan-y; /* let vertical page scroll pass through; we own horizontal */
  cursor:grab;
  will-change:transform;
  transform:translate3d(0,0,0);
  transition:transform 360ms cubic-bezier(0,0,.2,1); /* ease-out, within the 300–400ms window */
}
.cap-carousel__track.is-dragging{ transition:none; cursor:grabbing; }
.cap-carousel__slide{
  /* 1.5 "slots" visible on mobile (1 full photo + a half-photo peek on the
     left) — see the 900px breakpoint below for the 3.5-slot desktop version.
     Both use the same "n full + half a peek" formula: 100% / (n + 0.5). */
  flex:0 0 calc(100% / 1.5);
  max-width:calc(100% / 1.5);
  padding-inline:clamp(6px, 1.2vw, 12px); /* gap between the peeking edges of adjacent frames */
  user-select:none; -webkit-user-select:none;
}
.cap-carousel__frame{
  position:relative; display:block; width:100%; padding:0; border:0; background:var(--charcoal);
  aspect-ratio:4/5;
  border-radius:20px;
  overflow:hidden;
  border:1px solid #D9D9D9;
  box-shadow:0 8px 30px rgba(0,0,0,.06);
}
.cap-carousel__frame img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; /* full-bleed: fills the 4/5 frame edge-to-edge, cropping any excess evenly instead of letterboxing */
  pointer-events:none; /* the track handles the drag, not the <img> itself */
}
@media (min-width:900px){
  .cap-carousel__slide{ flex:0 0 calc(100% / 3.5); max-width:calc(100% / 3.5); }
}

/* Caption — centered under the photo, its own fixed-height block so every
   card lines up at the same height regardless of title/description length.
   Title and description both clamp to a fixed number of lines with an
   ellipsis instead of growing the card. */
.cap-tile__caption{
  direction:rtl; margin-top:1.15rem; color:var(--ink);
  text-align:center;
  min-height:9.4rem; /* fits a 1-line number badge + a 2-line clamped title + a 2-line clamped description at their largest clamp() sizes, so every card ends up exactly this tall (raised slightly to match the title's taller line-height below) */
}
.cap-tile__num{
  display:block; font-family:var(--font-display); font-weight:500;
  font-size:.72rem; letter-spacing:.1em; color:var(--gold-deep); margin-bottom:.4rem;
}
.cap-tile__caption h3{
  /* line-height:1.4, not the site-wide heading default of 1.18 (see
     h1,h2,h3,h4 in the Reset above) — at 1.18 the DIN Next Arabic
     descenders on letters like ة/ي/ج sit right at (or past) the
     -webkit-line-clamp box's own lower edge and get sliced off by its
     required overflow:hidden. 1.4 gives them enough room without
     changing font-size (still the same clamp() as before). */
  font-size:clamp(1.1rem,1.8vw,1.4rem); line-height:1.4; margin-bottom:.3rem;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.cap-tile__caption p{
  color:var(--muted); font-size:.92rem; max-width:48ch; margin-inline:auto;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* Nav — grouped bottom-left, outside the photo frames, position fixed
   regardless of which slide is showing. Same button design as before
   (size/colours/hover untouched), only repositioned out of the carousel. */
.cap-carousel__nav{
  max-width:var(--container); margin:clamp(20px,3vw,32px) auto 0;
  display:flex; justify-content:flex-start; align-items:center; gap:.55rem;
  direction:ltr; /* forces "flex-start" to reliably mean the physical left edge, regardless of the page's RTL base — same technique as the track above */
}
.cap-carousel__arrow{
  position:relative; flex:0 0 auto; z-index:3;
  height:38px; width:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--white); border:1px solid var(--line); color:var(--ink);
  transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease),
    color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
@media (min-width:700px){ .cap-carousel__arrow{ width:44px; height:44px; } }
.cap-carousel__arrow svg{ width:18px; height:18px; }
.cap-carousel__arrow:hover, .cap-carousel__arrow:focus-visible{
  background:var(--ink); border-color:var(--ink); color:var(--paper); transform:scale(1.06);
}
.cap-carousel__arrow[disabled]{ opacity:.3; pointer-events:none; }

@media (prefers-reduced-motion: reduce){
  .cap-carousel__track{ transition:none; }
}

/* ---------- Capabilities lightbox — full-screen viewer, same drag model ---------- */
.cap-lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(11,11,10,.97);
}
.cap-lightbox[hidden]{ display:none; }
.cap-lightbox__viewport{ width:100%; height:100%; overflow:hidden; }
.cap-lightbox__track{
  display:flex; height:100%;
  direction:ltr; /* same predictable-math technique as the main carousel track */
  touch-action:pan-y; cursor:grab;
  will-change:transform;
  transform:translate3d(0,0,0);
  transition:transform 360ms cubic-bezier(0,0,.2,1);
}
.cap-lightbox__track.is-dragging{ transition:none; cursor:grabbing; }
.cap-lightbox__slide{
  flex:0 0 100%; max-width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,5vw,56px);
}
.cap-lightbox__slide img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; user-select:none; -webkit-user-select:none; pointer-events:none;
}
.cap-lightbox__close{
  position:absolute; top:clamp(16px,3vw,32px); inset-inline-end:clamp(16px,3vw,32px); z-index:2;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(250,248,245,.08); border:1px solid rgba(250,248,245,.25); color:var(--paper);
  transition:background var(--dur-s) var(--ease);
}
.cap-lightbox__close svg{ width:20px; height:20px; }
.cap-lightbox__close:hover, .cap-lightbox__close:focus-visible{ background:rgba(250,248,245,.18); }

@media (prefers-reduced-motion: reduce){
  .cap-lightbox__track{ transition:none; }
}

/* ---------- Selected Work ---------- */
.work{ padding:var(--section-pad) var(--gutter); background:var(--paper); }
.work__intro{ max-width:var(--container); margin:0 auto clamp(40px,7vw,88px); }
.work__intro h2{ font-size:clamp(2.1rem,4.6vw,3.4rem); margin:.6rem 0 1rem; }
.work__intro p{ color:var(--muted); max-width:56ch; }
.work__feature{ max-width:var(--container); margin:0 auto clamp(24px,4vw,40px); position:relative; }
.work__feature figcaption{
  position:absolute; inset:auto auto 24px 24px; z-index:2; color:var(--paper);
  display:flex; flex-direction:column; gap:.3rem;
}
.work__feature figcaption span{ font-size:.78rem; letter-spacing:.08em; color:var(--gold-light); }
.work__feature figcaption h3{ font-size:clamp(1.5rem,3vw,2.2rem); }
.work__split{ max-width:var(--container); margin:0 auto; display:grid; gap:clamp(20px,3vw,32px); grid-template-columns:1fr 1fr; }
.work__split .ph{ position:relative; }
.work__split figcaption{ position:absolute; inset:auto auto 20px 20px; color:var(--paper); }
.work__split figcaption span{ font-size:.75rem; color:var(--gold-light); }
.work__split figcaption h3{ font-size:1.3rem; margin-top:.3rem; }

/* ---------- Clients ---------- */
.clients{ padding:var(--section-pad) var(--gutter); background:var(--black); color:var(--paper); text-align:center; }
.clients__intro{ max-width:var(--container); margin:0 auto clamp(40px,7vw,72px); }
.clients__intro h2{ font-size:clamp(2rem,4.2vw,3rem); color:var(--paper); }
/* Flexbox + wrap + justify-content:center instead of a plain CSS grid: with
   13 logos, a fixed repeat(N,1fr) grid leaves an orphan last row (1, 1, or
   3 logos, depending on breakpoint) flush against one side with empty
   track space next to it — visibly unbalanced. Flex-wrap centers every
   row as a group, including a short last one, while each <li> still gets
   the exact same width the grid columns used to give it (same formula:
   (100% - (n-1)*column-gap) / n), so nothing actually resizes. */
.clients__grid{
  max-width:1100px; margin:0 auto;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:2.2rem 1.5rem;
  font-family:var(--font-display); font-weight:500; font-size:clamp(1rem,2vw,1.3rem);
  color:var(--muted-light);
}
.clients__grid li{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 calc((100% - 1.5rem) / 2); /* 2 per row by default — same width the old repeat(2,1fr) produced */
}
.clients__grid img{
  height:clamp(30px, 4vw, 50px); width:auto; max-width:100%;
  object-fit:contain; display:block;
  transition:transform var(--dur-s) var(--ease);
}
.clients__grid img:hover{ transform:scale(1.03); }
@media (prefers-reduced-motion: reduce){ .clients__grid img:hover{ transform:none; } }
.clients__more{ margin-top:2.4rem; color:var(--muted-light); font-size:.9rem; }
@media (min-width:640px){ .clients__grid li{ flex-basis:calc((100% - 2 * 1.5rem) / 3); } } /* 3 per row — same width repeat(3,1fr) produced */
@media (min-width:960px){ .clients__grid li{ flex-basis:calc((100% - 4 * 1.5rem) / 5); } } /* 5 per row — same width repeat(5,1fr) produced */

/* Mobile only (below the 640px breakpoint above, where it's still 2 per
   row): the 50%-wide cell above centers each logo in its own half, which
   visually reads as two columns pushed apart with dead space between them.
   Give each cell just enough width for the widest logo (FIFA, the widest
   of the 13 at ~92px tall at this section's fixed 30px mobile logo height)
   plus a small margin, so the pair sits close together instead of spread
   across the full row width; .clients__grid's own justify-content:center
   then centers that tight pair as a block, and the unchanged `gap` keeps
   spacing even between every logo, in every row. Logo sizes themselves
   (height:clamp(...) above) are untouched — only how much room the cell
   around each one gets. */
@media (max-width:639px){
  .clients__grid li{ flex-basis:clamp(100px, 30vw, 150px); }
}

/* ---------- Recognition ---------- */
.recognition{ padding:var(--section-pad) var(--gutter); background:var(--white); }
.recognition__intro{ max-width:var(--container); margin:0 auto clamp(40px,7vw,72px); }
.recognition__intro h2{ font-size:clamp(2rem,4.2vw,3rem); }
.recognition__list{ max-width:var(--container); margin:0 auto; border-top:1px solid var(--line); }
.recognition__list > li{
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.4rem 1rem;
  padding:1.5rem 0; border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.05rem,2vw,1.4rem);
}
.rec-tag{ font-family:var(--font-body); font-weight:400; font-size:.85rem; color:var(--muted); }

li.recognition__group{ display:block; padding:1.5rem 0; border-bottom:1px solid var(--line); }
.recognition__group-title{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.05rem,2vw,1.4rem);
}
.recognition__sublist{
  margin-top:1rem; padding-inline-start:1.6rem; display:flex; flex-direction:column; gap:.65rem;
  border-inline-start:1px solid var(--line);
}
.recognition__sublist li{
  font-family:var(--font-body); font-weight:500; font-size:.95rem; color:var(--muted);
  position:relative; padding-inline-start:1.1rem;
}
.recognition__sublist li::before{
  content:""; position:absolute; inset-inline-start:0; top:.55em;
  width:5px; height:5px; border-radius:50%; background:var(--gold);
}

/* ---------- Press / X Recognition ---------- */
.press{ padding:var(--section-pad) var(--gutter); background:var(--paper); }
.press__intro{ max-width:760px; margin:0 auto clamp(40px,7vw,80px); text-align:center; }
.press__intro h2{ font-size:clamp(2rem,4.4vw,3.1rem); margin:.6rem 0 1rem; }
.press__intro p{ color:var(--muted); }
/* ---- Carousel shell ---- */
.press-carousel{
  --pc-gap: clamp(16px, 2.4vw, 28px);
  --pc-ease: cubic-bezier(.42,0,.58,1); /* explicit ease-in-out */
  position:relative;
  max-width:var(--container); margin:0 auto;
  padding-inline:44px;
}
@media (min-width:700px){ .press-carousel{ padding-inline:56px; } }
/* Mobile two-up cards, slightly smaller with more breathing room between
   them — both .press-carousel__slide's width formula and the track's own
   flex gap read from --pc-gap, so raising it here shrinks each card and
   widens the gap between the two visible tweets consistently, with no
   separate values to keep in sync. The embed itself already scales to
   whatever width its card ends up at (see fitEmbedToCard in main.js), so
   it keeps filling the card exactly with no cropping or blank strip.
   Desktop (≥700px) is untouched. */
@media (max-width:699px){
  .press-carousel{ --pc-gap: 26px; padding-inline:0; }
  /* Mobile: exactly one tweet on screen, no arrows, no drag/slide motion.
     The track drops out of its flex row entirely into plain block flow —
     no more horizontal transform track to drag — and a small dedicated
     script (see the mobile-only fade rotator in js/main.js) crossfades
     between slides automatically every 5s. Desktop/tablet (≥700px) keep
     the original multi-up flex track, drag and arrows, untouched. */
  .press-carousel__track{ display:block; transition:none; }
  .press-carousel__slide{ width:100%; }
  .press-carousel__slide:not(:first-child){ display:none; }
  .press-carousel__arrow{ display:none; }
}

/* Entrance: fade + translateY(20px), 0.7s — overrides the site's default
   reveal-up (48px/1s) for this element only via extra specificity. */
.press-carousel.reveal-up{
  transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

.press-carousel__viewport{ overflow:hidden; }
.press-carousel__track{
  display:flex; gap:var(--pc-gap); direction:ltr; touch-action:pan-y; cursor:grab;
  will-change:transform;
  transition:transform 500ms var(--pc-ease);
}
.press-carousel__track.is-dragging{ transition:none; cursor:grabbing; }
.press-carousel.is-dragging .press-card__embed{ pointer-events:none; }
.press-carousel__track:active{ cursor:grabbing; }

/* Mobile (iPhone-style two-up) only: the track's default align-items:stretch
   forces every card in the row — including the two currently in view — up
   to the height of the single tallest tweet anywhere in the whole track
   (text-only tweets included alongside ones with photos), which is what
   made cards look far taller than their own content and crowd/overlap the
   next row when swiping. Letting each card size to its own content keeps
   every pair compact and consistent, and fits more tweets on screen.
   Desktop (≥700px) keeps the original stretch behaviour, untouched. */
@media (max-width:699px){
  .press-carousel__track{ align-items:flex-start; }
}

.press-carousel__slide{
  flex:0 0 auto;
  width:calc((100% - var(--pc-gap)) / 2);
  user-select:none; -webkit-user-select:none;
}
/* 4-up only kicks in once each card is comfortably above X's 220px embed
   floor (see press-card__embed iframe below) — at 1024px the 4-column math
   drops to ~184px per card, forcing the embed wider than its own column and
   clipping it against the carousel viewport's overflow:hidden. 1280px keeps
   every card at 239px or more. */
@media (min-width:1280px){ .press-carousel__slide{ width:calc((100% - 3 * var(--pc-gap)) / 4); } }

/* ---- Arrows — outside the cards, in the reserved side padding ---- */
.press-carousel__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--white); border:1px solid var(--line); color:var(--ink);
  transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease),
    color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
@media (min-width:700px){ .press-carousel__arrow{ width:44px; height:44px; } }
.press-carousel__arrow svg{ width:18px; height:18px; }
.press-carousel__arrow--prev{ inset-inline-end:0; }
.press-carousel__arrow--next{ inset-inline-start:0; }
.press-carousel__arrow:hover, .press-carousel__arrow:focus-visible{
  background:var(--ink); border-color:var(--ink); color:var(--paper); transform:translateY(-50%) scale(1.06);
}

/* ---- Cards — no outer frame/box; the tweet sits directly on the page ---- */
.press-card{
  background:transparent; border:0; border-radius:0; padding:0;
}
.press-card__skeleton{ display:flex; gap:.9rem; align-items:flex-start; margin-bottom:.9rem; }
.press-card__avatar{
  width:36px; height:36px; border-radius:50%; flex:none;
  background:linear-gradient(135deg, var(--line), #fff);
}
.press-card__lines{ flex:1; display:flex; flex-direction:column; gap:.5rem; padding-top:.25rem; }
.press-card__lines span{ display:block; height:7px; border-radius:5px; background:var(--line); }
.press-card__lines span:nth-child(1){ width:55%; }
.press-card__lines span:nth-child(2){ width:92%; }
.press-card__lines span:nth-child(3){ width:78%; }

/* Live X (Twitter) embed — loaded eagerly via JS; skeleton shows until it
   resolves, real embed replaces it, fallback shows only if it fails.
   The JS mounts each tweet at the card's own measured width so the iframe
   never has to be forced into a smaller box than X actually rendered it at
   (that mismatch is what used to leave a blank strip on one side and clip
   frames on some cards). Height is intentionally auto, not fixed: X's own
   script sets the iframe's real height once the tweet's actual content
   (text, media, buttons) is known, and the card must grow to fit that
   exactly — a fixed height + overflow:hidden would crop whatever doesn't
   fit, which is exactly what this avoids. The flex track's default
   align-items: stretch (see .press-carousel__track above) still keeps
   every card in a row lined up to the same height, it just derives that
   height from the tallest real tweet instead of an arbitrary pixel value.
   On the mobile two-up layout, where a card is narrower than X's own
   220px embed floor, the JS instead renders the tweet at that floor width
   and scales it down uniformly with `transform: scale()` (see main.js
   fitEmbedToCard) — that keeps proportions intact instead of forcing X to
   clip or letterbox it. */
.press-card__embed{ overflow:visible; }
/* Mobile two-up only: X always mounts its iframe at its own 220px floor
   first (see fitEmbedToCard in main.js), then that JS scales it down to
   the card's real (much narrower) width on the very next animation
   frame. Between those two moments the iframe briefly sits at its full
   220px+ size — with overflow staying visible (the default above, needed
   on wider layouts so a tall tweet's real height is never clipped) that
   brief full-width flash bleeds sideways into the neighbouring tweet,
   which is what read as the two cards overlapping. Clipping to the card's
   own width for this layout only closes that window; it doesn't affect
   height (still auto) so nothing real gets cropped once the JS settles
   the scale a frame later. Desktop/tablet (≥700px) keeps overflow:visible. */
@media (max-width:699px){
  .press-card__embed{ overflow:hidden; }
}
.press-card__embed iframe{ max-width:100%; width:100%; display:block; }
.press-card__fallback{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem; height:360px; text-align:center;
}
@media (max-width:700px){
  .press-card__fallback{ height:320px; }
}
.press-card__fallback svg{ width:26px; height:26px; fill:var(--ink); opacity:.8; }
.press-card__fallback span{ font-size:.78rem; color:var(--muted); }
.press-card__fallback a{
  font-size:.8rem; font-weight:500; color:var(--gold-deep);
  border-bottom:1px solid var(--gold); padding-bottom:2px; transition:color var(--dur-s);
}
.press-card__fallback a:hover{ color:var(--gold-deep); } /* --gold fails contrast on this light background, see .statement__text .accent above */

@media (prefers-reduced-motion: reduce){
  .press-carousel__track{ transition:none; }
  .press-carousel__arrow{ transition:none; }
}

/* ---------- Philosophy ---------- */
.philosophy{
  position:relative; padding:clamp(120px,20vw,260px) var(--gutter);
  display:flex; align-items:center; justify-content:center; text-align:center;
  overflow:hidden; color:var(--paper);
}
.philosophy .ph--ambient::after{
  content:""; position:absolute; inset:0; background:rgba(11,11,10,.72); z-index:1;
}
.philosophy__quote{
  position:relative; z-index:2; max-width:1100px;
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1.7rem,4.6vw,3.4rem); line-height:1.4;
}
.philosophy__quote .accent{ color:var(--gold); }

/* ---------- Contact ---------- */
.contact{ padding:var(--section-pad) var(--gutter); background:var(--paper); }
.contact__grid{
  max-width:var(--container); margin:0 auto;
  display:grid; gap:clamp(32px,6vw,80px); align-items:center;
}
.contact__copy h2{ font-size:clamp(2.1rem,4.8vw,3.6rem); margin-bottom:1rem; }
.contact__copy p{ color:var(--muted); max-width:50ch; margin-bottom:2rem; font-size:1.05rem; }
.contact__details{ margin:2.4rem 0 1.6rem; display:grid; gap:1.2rem; }
.contact__details dt{ font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; }
.contact__details dd{ font-size:1.05rem; }
.contact__details a{ border-bottom:1px solid var(--gold); transition:opacity var(--dur-s); }
.contact__details a:hover{ opacity:.7; }
.social-row--contact{ gap:1rem; }
.social-row--contact a{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); color:var(--ink);
  transition:color var(--dur-s) var(--ease), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.social-row--contact a svg{ width:18px; height:18px; }
.social-row--contact a:hover, .social-row--contact a:focus-visible{
  color:var(--paper); background:var(--ink); border-color:var(--ink);
}
/* Icons now live in the header on desktop (moved, not duplicated) — this
   copy stays exactly as before on mobile, where the header doesn't show
   them. */
@media (min-width:900px){
  .social-row--contact{ display:none; }
}
@media (min-width:860px){ .contact__grid{ grid-template-columns:1.15fr .85fr; } }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--black); color:var(--muted-light);
  padding:clamp(48px,8vw,72px) var(--gutter);
  display:flex; flex-direction:column; align-items:center; gap:1.4rem;
  text-align:center; font-size:.85rem;
}
.footer__mark{ width:64px; height:auto; opacity:.9; }