/* ==========================================================================
   Abdelrahman Gad — portfolio
   Design system: "Atelier". Warm ink, gold, high-contrast serif display.
   Logical properties throughout, so RTL is a true mirror.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Sampled from the portrait itself (backdrop corners #0B0C14, mid #171928).
     The old values were warm-neutral while the photograph is cool navy, so the
     portrait read as a rectangle pasted onto a different page. These are the
     same lightness steps, shifted onto the photo's hue so the image belongs. */
  --ink:      #0A0B12;
  --ink-2:    #101220;
  --ink-3:    #171928;
  --ink-4:    #242739;
  --line:     rgba(255, 255, 255, .085);
  --line-2:   rgba(255, 255, 255, .17);

  --cream:    #F6F3EE;
  --cream-2:  #B9B3AA;
  --cream-3:  #8F897F;

  --gold:     #D4A94A;
  --gold-2:   #E7C878;
  --gold-ink: #14100A;
  --gold-dim: rgba(212, 169, 74, .13);

  --ff-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --ff-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --ff-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 68px);
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --lh-head: 1.04;
  --lh-body: 1.68;
  --track-head: -.018em;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

html[dir="rtl"] {
  --ff-display: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  --ff-body:    'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  /* An Arabic glyph box runs ~1.9x the font size — headings and body both need air. */
  --lh-head: 1.42;
  --lh-body: 1.95;
  --track-head: 0;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: var(--ff-body);
  background: var(--ink);
  color: var(--cream);
  line-height: var(--lh-body);
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--gold); color: var(--gold-ink); }

/* Film grain — stops the black reading as flat void. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(76px, 11vw, 152px); position: relative; }
.section + .section { border-block-start: 1px solid var(--line); }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  text-wrap: balance;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { font-weight: 700; }

.h-xl { font-size: clamp(3rem, 8.4vw, 6.6rem); }
.h-lg { font-size: clamp(2.2rem, 5.2vw, 4rem); }
.h-md { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.h-sm { font-size: clamp(1.2rem, 2vw, 1.5rem); }

.lede { font-size: clamp(1.04rem, 1.5vw, 1.24rem); color: var(--cream-2); max-inline-size: 64ch; line-height: 1.62; }
html[dir="rtl"] .lede { max-inline-size: 56ch; line-height: 1.95; }

/* Editorial section header: index · rule · label */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-block-end: 26px;
}
html[dir="rtl"] .eyebrow { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: 13.5px; font-weight: 600; }
.eyebrow::after { content: ''; flex: 1; block-size: 1px; background: var(--line); max-inline-size: 90px; }

.sec-head { max-inline-size: 820px; margin-block-end: clamp(44px, 6vw, 76px); }
.sec-head p.sec-sub { margin-block-start: 20px; }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 28px; border-radius: 100px;
  border: 1px solid var(--line-2);
  font-family: var(--ff-body);
  font-weight: 500; font-size: 15px; letter-spacing: -.005em;
  cursor: pointer; background: transparent;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); border-color: var(--cream-3); background: rgba(255,255,255,.04); }
.btn.btn-primary { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); font-weight: 600; }
.btn.btn-primary:hover { background: var(--gold-2); border-color: var(--gold-2); }
.btn.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn .arw { transition: transform .35s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }
html[dir="rtl"] .btn .arw { transform: scaleX(-1); }
html[dir="rtl"] .btn:hover .arw { transform: scaleX(-1) translateX(4px); }

/* ---------- 5. Header ---------- */
.hdr {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  border-block-end: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.hdr.is-stuck {
  background: rgba(11, 11, 12, .82);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-block-end-color: var(--line);
}
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 15px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  inline-size: 38px; block-size: 38px; flex: none;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--ink-3);
}
.brand-mark img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.brand-txt { font-family: var(--ff-display); font-size: 19px; letter-spacing: -.01em; line-height: 1.15; }
html[dir="rtl"] .brand-txt { font-weight: 700; font-size: 17px; line-height: 1.5; }
.brand-txt small {
  display: block; font-family: var(--ff-body); font-size: 10.5px; font-weight: 500;
  color: var(--cream-3); letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; margin-block-start: 2px;
}
html[dir="rtl"] .brand-txt small { font-size: 12.5px; letter-spacing: 0; text-transform: none; line-height: 1.6; }
@media (max-width: 520px) { .brand-txt small { display: none; } }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  padding: 9px 15px; font-size: 14.5px; color: var(--cream-2);
  border-radius: 100px; transition: color .25s, background .25s;
}
.nav a:hover { color: var(--cream); background: rgba(255,255,255,.05); }
.hdr-act { display: flex; align-items: center; gap: 10px; }
.lang-sw {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .06em;
  padding: 9px 15px; border: 1px solid var(--line-2); border-radius: 100px;
  color: var(--cream-2); transition: .25s;
}
html[dir="rtl"] .lang-sw { font-family: var(--ff-body); letter-spacing: 0; font-size: 13px; }
.lang-sw:hover { color: var(--gold); border-color: var(--gold); }

.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span { display: block; inline-size: 22px; block-size: 1.5px; background: var(--cream); margin-block: 5px; transition: .3s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 960px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset-block-start: 69px; inset-inline: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-2); border-block-end: 1px solid var(--line);
    padding: 12px var(--gut) 26px;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: .3s var(--ease);
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 15px 4px; font-size: 17px; border-block-end: 1px solid var(--line); border-radius: 0; }
  .hdr-act .btn { display: none; }
}

.skip {
  position: absolute; inset-block-start: -60px; inset-inline-start: var(--gut);
  background: var(--gold); color: var(--gold-ink); padding: 10px 18px;
  border-radius: 0 0 10px 10px; z-index: 200; font-weight: 600; transition: .25s;
}
.skip:focus { inset-block-start: 0; }

/* ---------- 6. Hero ---------- */
.hero { position: relative; padding-block: clamp(126px, 17vh, 200px) clamp(56px, 7vw, 92px); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg::before {
  content: ''; position: absolute;
  inset-block-start: -28%; inset-inline-end: -6%;
  inline-size: min(920px, 105vw); block-size: min(920px, 105vw);
  background: radial-gradient(circle, rgba(212,169,74,.15) 0%, rgba(212,169,74,.05) 40%, transparent 68%);
  filter: blur(22px);
}
.hero-rule {
  position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 100%;
  background-image: linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
}
.hero-in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.28fr .72fr;
  gap: clamp(34px, 5vw, 76px); align-items: center;
}
@media (max-width: 1000px) { .hero-in { grid-template-columns: 1fr; } }

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream-2); border: 1px solid var(--line-2);
  padding: 8px 17px; border-radius: 100px; margin-block-end: 30px;
}
html[dir="rtl"] .hero-badge { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: 13px; }
.hero-badge .dot {
  inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--gold); flex: none;
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(212,169,74,.55); } 50% { opacity: .55; box-shadow: 0 0 0 7px rgba(212,169,74,0); } }

.hero h1 { margin-block-end: 30px; }
.hero h1 em { font-style: italic; color: var(--gold); }
html[dir="rtl"] .hero h1 em { font-style: normal; }
.hero p.hero-sub { margin-block-end: 38px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Portrait */
.portrait { position: relative; justify-self: center; inline-size: 100%; max-inline-size: 390px; }
.portrait-frame {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: 0 50px 100px -34px rgba(0,0,0,.95);
  /* 4:5 to match the photograph. A 1:1 frame crops the shoulders and pushes the
     face off-centre, which is what made the old square portrait feel cramped. */
  aspect-ratio: 4 / 5;
  /* the photo's own backdrop, sampled from the file (#0B0C14 corners, #171928
     mid) — so the image sits ON its own colour and the frame edge disappears */
  background: #12141F;
}
.portrait-frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.portrait-frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,12,.62) 0%, transparent 46%);
}
.portrait-cap {
  position: absolute; inset-block-end: 18px; inset-inline: 18px; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.portrait-name { font-family: var(--ff-display); font-size: 21px; line-height: 1.2; }
html[dir="rtl"] .portrait-name { font-weight: 700; font-size: 19px; line-height: 1.5; }
.portrait-role { font-size: 11.5px; color: var(--gold-2); letter-spacing: .06em; text-transform: uppercase; margin-block-start: 3px; }
html[dir="rtl"] .portrait-role { letter-spacing: 0; text-transform: none; font-size: 13px; }
.portrait-tag {
  position: absolute; inset-block-start: -14px; inset-inline-start: -14px; z-index: 3;
  background: var(--gold); color: var(--gold-ink);
  font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em;
  padding: 7px 14px; border-radius: 100px;
}
html[dir="rtl"] .portrait-tag { font-family: var(--ff-body); letter-spacing: 0; font-size: 12.5px; font-weight: 600; }
@media (max-width: 1000px) { .portrait { max-inline-size: 320px; margin-block-start: 12px; } }

/* ---------- 7. Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (max-width: 1080px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--ink); padding: clamp(26px, 3.4vw, 40px) clamp(16px, 2vw, 26px); transition: background .4s var(--ease); }
.stat:hover { background: var(--ink-2); }
.stat-v {
  font-family: var(--ff-display); font-size: clamp(2.1rem, 3.8vw, 3.1rem);
  letter-spacing: -.02em; line-height: 1; color: var(--cream);
}
html[dir="rtl"] .stat-v { font-weight: 700; letter-spacing: 0; line-height: 1.35; }
.stat-l { font-size: 12.5px; color: var(--cream-3); margin-block-start: 10px; line-height: 1.5; }
html[dir="rtl"] .stat-l { font-size: 13px; line-height: 1.85; }

/* ---------- 8. Marquee ---------- */
.marquee-sec { padding-block: 50px; border-block-end: 1px solid var(--line); overflow: hidden; }
.marquee-label {
  text-align: center; font-family: var(--ff-mono); font-size: 10.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--cream-3); margin-block-end: 30px;
}
html[dir="rtl"] .marquee-label { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: 13px; }
.marquee {
  display: flex; overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; gap: 52px; flex: none; padding-inline-end: 52px; animation: slide 72s linear infinite; }
html[dir="rtl"] .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-100%); } }
.marquee-item {
  font-family: var(--ff-display); font-size: clamp(17px, 1.9vw, 22px);
  color: var(--cream-3); white-space: nowrap; letter-spacing: -.01em; transition: color .3s;
}
html[dir="rtl"] .marquee-item { font-weight: 700; letter-spacing: 0; font-size: clamp(15px, 1.7vw, 19px); }
.marquee-item:hover { color: var(--gold); }

/* ---------- 9. Featured work ---------- */
.feats { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.feat {
  display: grid; grid-template-columns: 96px 1fr auto;
  gap: clamp(18px, 3.4vw, 48px); align-items: center;
  padding: clamp(28px, 4vw, 46px) clamp(4px, 1vw, 12px);
  background: var(--ink); position: relative;
  transition: background .45s var(--ease);
}
.feat::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 2px; background: var(--acc, var(--gold));
  transform: scaleY(0); transform-origin: center; transition: transform .5s var(--ease);
}
.feat:hover { background: var(--ink-2); }
.feat:hover::before { transform: scaleY(1); }
.feat-idx {
  font-family: var(--ff-mono); font-size: 12px; color: var(--cream-3);
  letter-spacing: .1em; padding-inline-start: clamp(12px, 2vw, 26px);
}
html[dir="rtl"] .feat-idx { font-family: var(--ff-body); letter-spacing: 0; }
.feat-body h3 { font-size: clamp(1.5rem, 3vw, 2.3rem); margin-block-end: 12px; }
.feat-body h3 .feat-client { color: var(--acc, var(--gold)); }
.feat-line { color: var(--cream-2); font-size: clamp(15px, 1.4vw, 16.5px); max-inline-size: 62ch; }
.feat-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--cream-3); margin-block-start: 16px; }
.feat-meta span { display: inline-flex; align-items: center; gap: 8px; }
.feat-meta span + span::before { content: ''; inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--cream-3); }
.feat-go {
  inline-size: 52px; block-size: 52px; flex: none; margin-inline-end: clamp(12px, 2vw, 26px);
  border-radius: 50%; border: 1px solid var(--line-2);
  display: grid; place-items: center; color: var(--cream-2);
  transition: .45s var(--ease);
}
.feat:hover .feat-go { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
html[dir="rtl"] .feat-go svg { transform: scaleX(-1); }
@media (max-width: 800px) {
  .feat { grid-template-columns: 1fr; gap: 14px; padding-inline: clamp(12px, 3vw, 22px); }
  .feat-idx { order: -1; padding-inline-start: 0; }
  .feat-go { display: none; }
}

/* ---------- 10. Client grid ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 38px; }
.filter {
  padding: 9px 18px; border-radius: 100px;
  border: 1px solid var(--line); background: transparent;
  font-size: 13.5px; color: var(--cream-2); cursor: pointer; transition: .3s var(--ease);
}
.filter:hover { border-color: var(--line-2); color: var(--cream); }
.filter[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 600; }

.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ccard {
  position: relative; display: flex; flex-direction: column; gap: 13px;
  padding: 24px 22px 20px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  transition: .4s var(--ease); overflow: hidden;
}
.ccard::after {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px;
  background: var(--acc, var(--gold)); transform: scaleX(0); transform-origin: inline-start;
  transition: transform .45s var(--ease);
}
.ccard:hover { border-color: var(--line-2); background: var(--ink-3); transform: translateY(-3px); }
.ccard:hover::after { transform: scaleX(1); }
.ccard.is-hidden { display: none; }
.ccard-top { display: flex; align-items: flex-start; gap: 14px; }
.ccard-logo {
  inline-size: 46px; block-size: 46px; flex: none; border-radius: 10px; overflow: hidden;
  background: #fff; display: flex; align-items: center; justify-content: center; padding: 4px;
}
/* explicit px, not % — see the note on .own-logo */
.ccard-logo img { max-inline-size: 38px; max-block-size: 38px; inline-size: auto; block-size: auto; object-fit: contain; }
/* Monogram fallback for brands with no logo file. Same white tile as a real logo so the
   grid reads as one set. NOT the client accent — every accent fails contrast on white
   (gold is 2.4:1, cyan 1.9:1); --ink on white is ~19:1. */
.ccard-logo.is-text {
  background: #fff; color: var(--ink);
  font-family: var(--ff-display); font-size: 21px; letter-spacing: -.02em;
}
html[dir="rtl"] .ccard-logo.is-text { font-weight: 700; letter-spacing: 0; }
html[dir="rtl"] .ccard-logo.is-text { font-weight: 700; letter-spacing: 0; }
.ccard-head { flex: 1; min-inline-size: 0; }
.ccard h3 { font-family: var(--ff-body); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
html[dir="rtl"] .ccard h3 { line-height: 1.6; letter-spacing: 0; }
.ccard-yr { font-family: var(--ff-mono); font-size: 11.5px; color: var(--cream-3); margin-block-start: 4px; display: block; }
html[dir="rtl"] .ccard-yr { font-family: var(--ff-body); }
.ccard-d { font-size: 13.5px; color: var(--cream-2); line-height: 1.6; flex: 1; }
html[dir="rtl"] .ccard-d { line-height: 1.9; }
.ccard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block-start: 13px; border-block-start: 1px solid var(--line); }
.ccard-loc { font-size: 11.5px; color: var(--cream-3); }
.ccard-go { font-size: 12px; color: var(--gold); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-block-size: 34px; }
.ccard-badge {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-dim); border: 1px solid rgba(212,169,74,.3);
  padding: 4px 9px; border-radius: 100px;
}
html[dir="rtl"] .ccard-badge { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: 11.5px; }

/* ---------- 10b. Third-party proof ---------- */
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.proof-card {
  background: var(--ink-2); padding: clamp(26px, 3vw, 34px);
  display: flex; flex-direction: column; gap: 12px;
  transition: background .4s var(--ease);
}
.proof-card:hover { background: var(--ink-3); }
.proof-stat {
  font-family: var(--ff-display); font-size: clamp(1.6rem, 2.8vw, 2.15rem);
  letter-spacing: -.025em; line-height: 1.05; color: var(--acc, var(--gold));
}
html[dir="rtl"] .proof-stat { font-weight: 700; letter-spacing: 0; line-height: 1.45; }
.proof-d { font-size: 14px; color: var(--cream-2); line-height: 1.6; flex: 1; }
html[dir="rtl"] .proof-d { line-height: 1.9; }
.proof-foot { display: flex; flex-direction: column; gap: 3px; padding-block-start: 14px; border-block-start: 1px solid var(--line); }
.proof-brand { font-size: 13px; font-weight: 600; color: var(--cream); }
.proof-src { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-3); }
html[dir="rtl"] span.proof-src { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: 13px; }

/* ---------- 10c. Testimonials (renders only when TESTIMONIALS is non-empty) ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.quote-card {
  margin: 0; padding: clamp(26px, 3vw, 36px);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; gap: 20px;
}
.quote-card blockquote {
  margin: 0; font-family: var(--ff-display); font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.45; color: var(--cream); flex: 1;
}
html[dir="rtl"] .quote-card blockquote { font-weight: 700; line-height: 1.75; }
.quote-card blockquote::before { content: '“'; color: var(--gold); }
.quote-card blockquote::after { content: '”'; color: var(--gold); }
html[dir="rtl"] .quote-card blockquote::before { content: '«'; }
html[dir="rtl"] .quote-card blockquote::after { content: '»'; }
.quote-card figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-block-start: 16px; border-block-start: 1px solid var(--line); }
.quote-name { font-size: 14.5px; font-weight: 600; color: var(--cream); }
.quote-role { font-size: 13px; color: var(--cream-3); flex: 1; }
.quote-verify { color: var(--gold); display: inline-flex; }

/* ---------- 11. Own brands ---------- */
.own-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 12px; }
.own-card {
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  transition: .4s var(--ease);
}
.own-card:hover { border-color: var(--gold); background: var(--ink-3); transform: translateY(-3px); }
/* The logo band. `max-block-size: 100%` does NOT work here — a percentage max-height
   resolves against the containing block, which is indefinite for a centred grid/flex
   item, so the browser used each image's natural 200px and it spilled ~140px over the
   card heading. Bound it in explicit px (tile 84 − 2×12 padding = 60) and clip as a
   belt-and-braces guarantee. Do not switch these back to percentages. */
.own-logo {
  inline-size: 100%; block-size: 96px; flex: none;
  border-radius: 10px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 14px; overflow: hidden;
}
.own-logo img {
  max-inline-size: 100%; max-block-size: 68px;
  inline-size: auto; block-size: auto; object-fit: contain;
}
/* Letter fallback sits on the same white tile so the row reads as one set. */
.own-logo.is-text { background: #fff; color: var(--ink); font-family: var(--ff-display); font-size: 30px; letter-spacing: -.02em; }
html[dir="rtl"] .own-logo.is-text { font-weight: 700; letter-spacing: 0; }
.own-card h3 { font-family: var(--ff-body); font-size: 15px; font-weight: 600; }
.own-card p { font-size: 13px; color: var(--cream-2); line-height: 1.6; flex: 1; }
html[dir="rtl"] .own-card p { line-height: 1.9; }
.own-visit { font-size: 12px; color: var(--gold); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-block-size: 32px; }

/* ---------- 12. Layers ---------- */
.layers { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.layer {
  display: grid; grid-template-columns: 88px 1fr 1.08fr;
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(26px, 3.4vw, 42px);
  background: var(--ink-2); transition: background .4s var(--ease);
}
.layer:hover { background: var(--ink-3); }
.layer-num {
  font-family: var(--ff-display); font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  /* #5E6167 was tuned to exactly 3.00:1 on the old warm ink and fell to 2.99 when
     the base shifted to navy. Sitting a hair above the threshold is how a token
     silently fails later — #666A73 measures 3.2:1 and keeps headroom. */
  letter-spacing: -.03em; color: #666A73; line-height: 1; transition: color .4s;
}
html[dir="rtl"] .layer-num { font-weight: 700; letter-spacing: 0; }
.layer:hover .layer-num { color: var(--gold); }
.layer h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-block-end: 8px; }
.layer-tag { font-size: 13px; color: var(--gold); }
.layer-body { font-size: 15px; color: var(--cream-2); margin-block-end: 20px; }
.layer-items { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; }
.layer-items li {
  font-size: 12.5px; color: var(--cream-2); background: rgba(255,255,255,.045);
  border: 1px solid var(--line); padding: 6px 13px; border-radius: 100px;
}
@media (max-width: 940px) { .layer { grid-template-columns: 1fr; gap: 14px; } .layer-num { font-size: 2.2rem; } }

/* ---------- 13. Timeline ---------- */
.tl { position: relative; display: grid; }
.tl::before { content: ''; position: absolute; inset-block: 14px; inset-inline-start: 7px; inline-size: 1px; background: var(--line); }
.tl-item { position: relative; padding-inline-start: 42px; padding-block: 26px; }
.tl-item + .tl-item { border-block-start: 1px solid var(--line); }
.tl-item::before {
  content: ''; position: absolute; inset-inline-start: 1px; inset-block-start: 36px;
  inline-size: 13px; block-size: 13px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--ink-4); transition: .4s var(--ease);
}
.tl-item:hover::before, .tl-item:first-child::before {
  border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 5px rgba(212,169,74,.14);
}
.tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-block-end: 8px; }
.tl-period { font-family: var(--ff-mono); font-size: 12px; color: var(--gold); letter-spacing: .05em; }
html[dir="rtl"] .tl-period { font-family: var(--ff-body); letter-spacing: 0; }
.tl-item h3 { font-size: clamp(1.2rem, 2.1vw, 1.6rem); }
.tl-org { font-size: 13.5px; color: var(--cream-2); margin-block-end: 12px; }
.tl-org b { color: var(--cream); font-weight: 600; }
.tl-d { font-size: 14.5px; color: var(--cream-2); max-inline-size: 80ch; }

/* ---------- 14. Tools ---------- */
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tool-g { background: var(--ink-2); padding: 28px 24px; }
.tool-g h3 {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-block-end: 18px; font-weight: 500;
}
html[dir="rtl"] .tool-g h3 { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: 14px; font-weight: 700; }
.tool-g ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.tool-g li { font-size: 14px; color: var(--cream-2); display: flex; align-items: center; gap: 10px; }
.tool-g li::before { content: ''; inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--gold); flex: none; }

/* ---------- 15. About ---------- */
.about-in { display: grid; grid-template-columns: 1fr .72fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
@media (max-width: 960px) { .about-in { grid-template-columns: 1fr; } }
.about-body p { color: var(--cream-2); font-size: clamp(1rem, 1.35vw, 1.1rem); margin-block-end: 22px; max-inline-size: 64ch; }
.about-body p:first-of-type { color: var(--cream); }
.about-side { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.fact { background: var(--ink-2); padding: 22px 24px; }
.fact-k {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream-3); margin-block-end: 9px;
}
html[dir="rtl"] .fact-k { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.fact-v { font-size: 14.5px; color: var(--cream); }

/* ---------- 16. Contact ---------- */
.contact-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .contact-in { grid-template-columns: 1fr; } }
.ch-list { display: grid; gap: 10px; margin-block-start: 32px; }
.ch {
  display: flex; align-items: center; gap: 15px; padding: 16px 20px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: .35s var(--ease);
}
.ch:hover { border-color: var(--gold); background: var(--ink-3); transform: translateX(3px); }
html[dir="rtl"] .ch:hover { transform: translateX(-3px); }
.ch-ic { inline-size: 38px; block-size: 38px; border-radius: 9px; background: var(--ink-4); display: grid; place-items: center; color: var(--gold); flex: none; }
.ch-k { font-size: 12px; color: var(--cream-3); display: block; }
.ch-v { font-size: 14.5px; font-weight: 500; color: var(--cream); word-break: break-word; display: block; }

.cform { display: grid; gap: 14px; padding: clamp(24px, 3vw, 34px); background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); }
.cform label { font-size: 12px; color: var(--cream-3); display: block; margin-block-end: 7px; }
.cform input, .cform textarea {
  inline-size: 100%; padding: 13px 15px; background: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 15px; transition: border-color .3s;
}
.cform input:focus, .cform textarea:focus { border-color: var(--gold); outline: none; }
.cform textarea { resize: vertical; min-block-size: 118px; font-family: inherit; }
.cform-note { font-size: 12px; color: var(--cream-3); }

/* ---------- 17. Footer + FAB ---------- */
.ftr { border-block-start: 1px solid var(--line); padding-block: 50px 34px; background: var(--ink-2); }
.ftr-in { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
.ftr-links { display: flex; flex-wrap: wrap; gap: 2px 26px; }
.ftr-links a { font-size: 14px; color: var(--cream-2); transition: color .25s; display: inline-flex; align-items: center; min-block-size: 40px; }
.ftr-links a:hover { color: var(--gold); }
.ftr-btm { margin-block-start: 34px; padding-block-start: 24px; border-block-start: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 12.5px; color: var(--cream-3); }

.fab {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 90;
  inline-size: 54px; block-size: 54px; border-radius: 50%;
  background: #25D366; color: #062E17; display: grid; place-items: center;
  box-shadow: 0 12px 32px -6px rgba(37,211,102,.45); transition: transform .35s var(--ease);
}
.fab:hover { transform: scale(1.08); }
@media (max-width: 640px) { .fab { inline-size: 50px; block-size: 50px; inset-block-end: 16px; inset-inline-end: 16px; } }

/* ---------- 18. Case / client page ---------- */
.cs-hero { padding-block: clamp(124px, 16vh, 178px) clamp(44px, 6vw, 68px); position: relative; overflow: hidden; }
.cs-hero::before {
  content: ''; position: absolute; inset-block-start: -34%; inset-inline-end: -8%;
  inline-size: 780px; block-size: 780px; max-inline-size: 120vw;
  background: radial-gradient(circle, var(--acc-soft, rgba(212,169,74,.13)) 0%, transparent 64%);
  filter: blur(16px); pointer-events: none;
}
.cs-hero > * { position: relative; z-index: 1; }
.crumb { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--cream-3); margin-block-end: 32px; transition: color .25s; }
.crumb:hover { color: var(--gold); }
html[dir="rtl"] .crumb svg { transform: scaleX(-1); }

.cs-top { display: flex; align-items: center; gap: 18px; margin-block-end: 24px; flex-wrap: wrap; }
.cs-logo {
  inline-size: 62px; block-size: 62px; border-radius: 13px; background: #fff; padding: 7px; flex: none;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* explicit px, not % — see the note on .own-logo */
.cs-logo img { max-inline-size: 48px; max-block-size: 48px; inline-size: auto; block-size: auto; object-fit: contain; }
.cs-logo.is-text { background: #fff; color: var(--ink); font-family: var(--ff-display); font-size: 28px; letter-spacing: -.02em; }
html[dir="rtl"] .cs-logo.is-text { font-weight: 700; letter-spacing: 0; }
.cs-client { font-family: var(--ff-body); font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 600; color: var(--acc, var(--gold)); }
.cs-sector { font-size: 13px; color: var(--cream-3); margin-block-start: 3px; }
.cs-hero h1 { font-size: clamp(2.1rem, 5vw, 3.8rem); margin-block-end: 28px; max-inline-size: 21ch; }
.cs-summary { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--cream-2); max-inline-size: 68ch; }
html[dir="rtl"] .cs-summary { max-inline-size: 58ch; }

.cs-links { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 30px; }
.cs-link {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 100px;
  font-size: 13.5px; color: var(--cream-2); transition: .3s var(--ease); min-block-size: 40px;
}
.cs-link:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.cs-link svg { flex: none; }

.cs-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin-block-start: clamp(38px, 5vw, 58px); }
@media (max-width: 860px) { .cs-facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .cs-facts { grid-template-columns: 1fr; } }
.cs-fact { background: var(--ink); padding: 22px 24px; }

.cs-sec { padding-block: clamp(52px, 7vw, 92px); }
.cs-sec + .cs-sec { border-block-start: 1px solid var(--line); }
.cs-sec h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-block-end: 32px; }
.cs-prose { font-size: clamp(1rem, 1.4vw, 1.12rem); color: var(--cream-2); max-inline-size: 72ch; }
html[dir="rtl"] .cs-prose { max-inline-size: 62ch; }
.cs-pull {
  font-family: var(--ff-display); font-size: clamp(1.4rem, 2.8vw, 2rem);
  color: var(--cream); line-height: 1.3; max-inline-size: 30ch;
  padding-inline-start: 22px; border-inline-start: 2px solid var(--acc, var(--gold));
}
html[dir="rtl"] .cs-pull { font-weight: 700; line-height: 1.55; }

.cs-list { list-style: none; padding: 0; display: grid; gap: 15px; max-inline-size: 84ch; }
.cs-list li { position: relative; padding-inline-start: 30px; font-size: clamp(15px, 1.35vw, 16.5px); color: var(--cream-2); }
.cs-list li::before {
  content: ''; position: absolute; inset-inline-start: 3px; inset-block-start: .62em;
  inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--acc, var(--gold)); opacity: .8;
}
html[dir="rtl"] .cs-list li::before { inset-block-start: .78em; }

.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.step { background: var(--ink-2); padding: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: 56px 1fr; gap: clamp(14px, 2vw, 30px); transition: background .35s; }
.step:hover { background: var(--ink-3); }
.step-n { font-family: var(--ff-mono); font-size: 13px; color: var(--acc, var(--gold)); padding-block-start: 5px; }
html[dir="rtl"] .step-n { font-family: var(--ff-body); }
.step h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); margin-block-end: 11px; }
.step-d { font-size: 15px; color: var(--cream-2); max-inline-size: 74ch; }
@media (max-width: 660px) { .step { grid-template-columns: 1fr; gap: 10px; } }

.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.res { background: var(--ink-2); padding: 30px 24px; }
.res-k { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-3); margin-block-end: 14px; }
html[dir="rtl"] .res-k { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.res-v { font-family: var(--ff-display); font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.02em; color: var(--acc, var(--gold)); line-height: 1.05; margin-block-end: 11px; }
html[dir="rtl"] .res-v { font-weight: 700; letter-spacing: 0; line-height: 1.45; }
.res-d { font-size: 13.5px; color: var(--cream-2); line-height: 1.55; }
html[dir="rtl"] .res-d { line-height: 1.9; }
.cs-close { margin-block-start: 36px; font-size: 15px; color: var(--cream-2); max-inline-size: 74ch; padding-inline-start: 18px; border-inline-start: 2px solid var(--acc, var(--gold)); }

/* related + prev/next */
.cs-rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(266px, 1fr)); gap: 12px; }
.cs-nav-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .cs-nav-row { grid-template-columns: 1fr; } }
.cs-nav-card {
  display: flex; flex-direction: column; gap: 8px; padding: clamp(22px, 3vw, 30px);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); transition: .4s var(--ease);
}
.cs-nav-card:hover { border-color: var(--gold); background: var(--ink-3); }
.cs-nav-card.is-next { text-align: end; }
.cs-nav-k { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-3); }
html[dir="rtl"] .cs-nav-k { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.cs-nav-t { font-family: var(--ff-display); font-size: clamp(1.15rem, 2vw, 1.5rem); }
html[dir="rtl"] .cs-nav-t { font-weight: 700; }

/* ---------- 19. 404 ---------- */
.nf { min-block-size: 76vh; display: grid; place-items: center; text-align: center; padding-block: 124px 60px; }
.nf-code { font-family: var(--ff-display); font-size: clamp(5.5rem, 19vw, 13rem); line-height: 1; color: var(--ink-4); }
.nf h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin-block: 20px 16px; }

/* ---------- 20. Reveal ----------
   Gated on .js (set by an inline script in <head>). If JavaScript fails or is
   disabled the class never lands and every section renders visible, instead of
   the whole page silently sitting at opacity:0. */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }

/* ---------- 21. Arabic small-type floor ----------
   Latin is legible down to ~11px; Arabic is not — the glyph box is taller but
   the counters and diacritic space are far tighter, so the same nominal size
   reads noticeably smaller. Every selector names its element so it beats the
   base rule rather than tying with it. Keep this as ONE block. */
html[dir="rtl"] span.ccard-yr,
html[dir="rtl"] span.ccard-loc,
html[dir="rtl"] span.ccard-badge,
html[dir="rtl"] span.ch-k,
html[dir="rtl"] span.tl-period,
html[dir="rtl"] span.feat-idx,
html[dir="rtl"] span.portrait-role,
html[dir="rtl"] span.ccard-go,
html[dir="rtl"] span.own-visit,
html[dir="rtl"] a.cs-link,
html[dir="rtl"] a.lang-sw,
html[dir="rtl"] .cform label,
html[dir="rtl"] p.cform-note,
html[dir="rtl"] div.fact-k,
html[dir="rtl"] div.res-k,
html[dir="rtl"] span.cs-nav-k { font-size: 13px; }

/* ---------- 22. Print ---------- */
@media print {
  body::after, .hdr, .fab, .hero-bg, .marquee-sec { display: none !important; }
  body { background: #fff; color: #000; }
  .ccard, .feat, .layer, .step, .res { border-color: #ccc; background: #fff; }
}

/* ==========================================================================
   SERVICES — the hire-me surface.

   The cards use a numbered-index + rule treatment rather than icons: generic
   service icons (a rocket, a magnifying glass) read as template, and this site
   is competing against templates.
   ========================================================================== */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-block-start: clamp(28px, 4vw, 46px);
}
.svc-card {
  --acc: var(--gold);
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--ink);
  text-decoration: none;
  transition: background .35s var(--ease);
}
.svc-card:hover, .svc-card:focus-visible { background: var(--ink-2); }
/* accent rule that grows on hover — an inline-size transition, so it runs the
   correct direction under RTL without a separate rule */
.svc-card::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  block-size: 2px; inline-size: 0; background: var(--acc);
  transition: inline-size .45s var(--ease);
}
.svc-card:hover::before, .svc-card:focus-visible::before { inline-size: 100%; }

.svc-n {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .18em;
  color: var(--acc);
}
html[dir="rtl"] .svc-n { font-family: var(--ff-body); letter-spacing: 0; font-size: 13px; font-weight: 700; }
.svc-n.is-lg { display: block; font-size: 13px; margin-block-end: 14px; }

.svc-card h3.svc-name {
  font-family: var(--ff-display); font-size: clamp(1.28rem, 2.1vw, 1.6rem);
  line-height: 1.2; color: var(--cream); margin: 0;
}
html[dir="rtl"] .svc-card h3.svc-name { font-family: var(--ff-head); line-height: 1.5; }
.svc-card p.svc-promise { font-size: 14.5px; line-height: 1.65; color: var(--cream-2); margin: 0; flex: 1; }
html[dir="rtl"] .svc-card p.svc-promise { line-height: 1.95; }
.svc-go {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--acc); margin-block-start: 8px;
}
.svc-go svg { transition: transform .35s var(--ease); }
html[dir="rtl"] .svc-go svg { transform: scaleX(-1); }
.svc-card:hover .svc-go svg { transform: translateX(4px); }
html[dir="rtl"] .svc-card:hover .svc-go svg { transform: scaleX(-1) translateX(4px); }

.svc-all { margin-block-start: 26px; }
.svc-all a { color: var(--gold); font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px; }
html[dir="rtl"] .svc-all a svg { transform: scaleX(-1); }

/* ---------- service pages ---------- */
.svc-hero { padding-block: clamp(38px, 6vw, 74px) clamp(24px, 3vw, 38px); border-bottom: 1px solid var(--line); }
.svc-hero .crumb { margin-block-end: clamp(20px, 3vw, 32px); }
.svc-hero h1 {
  font-family: var(--ff-display); font-size: clamp(2.1rem, 5vw, 3.5rem);
  line-height: 1.05; color: var(--cream); margin: 0;
  max-inline-size: 18ch;
}
html[dir="rtl"] .svc-hero h1 { font-family: var(--ff-head); line-height: 1.45; }
.svc-hero p.svc-hero-sub { max-inline-size: 62ch; margin-block-start: 18px; }
.svc-hero p.svc-promise-lg {
  font-family: var(--ff-display); font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  line-height: 1.4; color: var(--gold); max-inline-size: 46ch; margin: 16px 0 0;
}
html[dir="rtl"] .svc-hero p.svc-promise-lg { font-family: var(--ff-head); line-height: 1.7; }

.svc-for {
  margin-block-start: clamp(24px, 3vw, 34px);
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--acc, var(--gold));
  max-inline-size: 58ch;
}
.svc-for p { margin: 6px 0 0; color: var(--cream-2); font-size: 15px; line-height: 1.7; }
html[dir="rtl"] .svc-for p { line-height: 1.95; }

/* Deliverables get a drawn check. The theme suppresses ::marker on some lists,
   so the mark is a real pseudo-element rather than list-style. */
ul.svc-deliv { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-inline-size: 68ch; }
ul.svc-deliv li {
  position: relative; padding-inline-start: 30px;
  font-size: 15.5px; line-height: 1.7; color: var(--cream-2);
}
html[dir="rtl"] ul.svc-deliv li { line-height: 1.95; }
ul.svc-deliv li::before {
  content: ''; position: absolute; inset-inline-start: 2px; inset-block-start: .62em;
  inline-size: 9px; block-size: 5px;
  border-inline-start: 1.5px solid var(--acc, var(--gold));
  border-block-end: 1.5px solid var(--acc, var(--gold));
  transform: rotate(-45deg);
}
html[dir="rtl"] ul.svc-deliv li::before { transform: rotate(-45deg) scaleX(-1); }

/* "What it is not" — muted and struck, so it reads as an exclusion at a glance. */
ul.svc-not { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-inline-size: 68ch; }
ul.svc-not li {
  position: relative; padding-inline-start: 30px;
  font-size: 15px; line-height: 1.7; color: var(--cream-3);
}
html[dir="rtl"] ul.svc-not li { line-height: 1.95; }
ul.svc-not li::before {
  content: ''; position: absolute; inset-inline-start: 4px; inset-block-start: .78em;
  inline-size: 11px; block-size: 1.5px; background: var(--cream-3);
}

.svc-cta {
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
  max-inline-size: 74ch;
}
.svc-cta h2 {
  font-family: var(--ff-display); font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.2; color: var(--cream); margin: 0 0 12px;
}
html[dir="rtl"] .svc-cta h2 { font-family: var(--ff-head); line-height: 1.5; }
.svc-cta p { color: var(--cream-2); font-size: 15.5px; line-height: 1.75; margin: 0 0 24px; max-inline-size: 60ch; }
html[dir="rtl"] .svc-cta p { line-height: 1.95; }

/* Audience line — only on the services index, where it helps a visitor
   self-select before clicking. `.svc-card p.svc-for-line` includes the element
   so it beats the base `.svc-card p.svc-promise` rule regardless of order. */
.svc-card p.svc-for-line {
  font-size: 13px; line-height: 1.6; color: var(--cream-3);
  margin: 0; padding-block-start: 12px;
  border-block-start: 1px solid var(--line);
}
html[dir="rtl"] .svc-card p.svc-for-line { font-size: 13.5px; line-height: 1.9; }
.svc-card p.svc-for-line span {
  display: block; color: var(--acc); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  font-family: var(--ff-mono); margin-block-end: 4px;
}
html[dir="rtl"] .svc-card p.svc-for-line span {
  font-family: var(--ff-body); letter-spacing: 0; text-transform: none;
  font-size: 12.5px; font-weight: 600;
}

/* ==========================================================================
   FLAGSHIP CASE STUDIES — the two pages that receive paid traffic.

   Heavier than the standard case study on purpose: an ad visitor decides in
   seconds, so the hero carries the outcome and four hard numbers before any
   scrolling, and the client identity is demoted to a strip underneath.
   ========================================================================== */

.fs-hero {
  padding-block: clamp(34px, 5vw, 64px) clamp(30px, 4vw, 52px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--acc, var(--gold)) 9%, transparent), transparent 62%),
    var(--ink);
}
.fs-hero .crumb { margin-block-end: clamp(18px, 3vw, 28px); }
.fs-eyebrow {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acc, var(--gold)); margin: 0 0 14px;
}
html[dir="rtl"] .fs-eyebrow {
  font-family: var(--ff-body); letter-spacing: 0; text-transform: none;
  font-size: 13.5px; font-weight: 600;
}
.fs-hero h1 {
  font-family: var(--ff-display);
  font-size: clamp(2.15rem, 5.6vw, 4rem); line-height: 1.02;
  color: var(--cream); margin: 0; max-inline-size: 17ch;
}
html[dir="rtl"] .fs-hero h1 { font-family: var(--ff-head); line-height: 1.45; max-inline-size: 20ch; }
.fs-hero p.fs-sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.7;
  color: var(--cream-2); max-inline-size: 60ch; margin: 20px 0 0;
}
html[dir="rtl"] .fs-hero p.fs-sub { line-height: 1.95; }

/* Four hard numbers, above the fold. */
.fs-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; margin-block-start: clamp(28px, 4vw, 42px);
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.fs-kpi { background: var(--ink-2); padding: 20px 18px; }
.fs-kpi-v {
  font-family: var(--ff-display); font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1; color: var(--acc, var(--gold));
}
html[dir="rtl"] .fs-kpi-v { font-family: var(--ff-head); line-height: 1.3; }
.fs-kpi-l { font-size: 12.5px; line-height: 1.5; color: var(--cream-2); margin-block-start: 8px; }
html[dir="rtl"] .fs-kpi-l { font-size: 13px; line-height: 1.85; }

/* Client identity strip — deliberately below the outcome. */
.fs-client {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-block-start: clamp(24px, 3vw, 34px);
  padding-block-start: clamp(20px, 3vw, 28px);
  border-block-start: 1px solid var(--line);
}
.fs-logo { inline-size: 52px; block-size: 52px; flex: none; }
.fs-client-n { font-size: 15.5px; font-weight: 600; color: var(--cream); }
.fs-client-m { font-size: 13px; color: var(--cream-3); margin-block-start: 2px; }
html[dir="rtl"] .fs-client-m { font-size: 13.5px; }
.fs-live {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--acc, var(--gold)); white-space: nowrap;
}
html[dir="rtl"] .fs-live svg { transform: scaleX(-1); }

.fs-prose p { font-size: 16px; line-height: 1.8; color: var(--cream-2); max-inline-size: 66ch; margin: 0 0 16px; }
html[dir="rtl"] .fs-prose p { line-height: 2; }
.fs-prose p:last-child { margin-block-end: 0; }

/* ---------- the findings: the page's centre of gravity ---------- */
.fs-found-sec { background: var(--ink-2); }
ol.fs-found { list-style: none; padding: 0; margin: clamp(26px,4vw,40px) 0 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
ol.fs-found > li {
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  padding: clamp(22px, 3vw, 32px); background: var(--ink);
}
.fs-found-n {
  font-family: var(--ff-mono); font-size: 12px; color: var(--acc, var(--gold)); padding-block-start: 4px;
}
html[dir="rtl"] .fs-found-n { font-family: var(--ff-body); font-size: 14px; font-weight: 700; }
ol.fs-found h3 {
  font-family: var(--ff-display); font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  line-height: 1.25; color: var(--cream); margin: 0 0 10px;
}
html[dir="rtl"] ol.fs-found h3 { font-family: var(--ff-head); line-height: 1.55; }
ol.fs-found p { font-size: 15px; line-height: 1.75; color: var(--cream-2); margin: 0; max-inline-size: 68ch; }
html[dir="rtl"] ol.fs-found p { line-height: 1.95; }
@media (max-width: 560px) {
  ol.fs-found > li { grid-template-columns: 1fr; gap: 10px; }
}

.fs-disclaimer {
  font-size: 12.5px; line-height: 1.7; color: var(--cream-3);
  margin-block-start: 24px; max-inline-size: 70ch;
}
html[dir="rtl"] .fs-disclaimer { font-size: 13px; line-height: 1.9; }

/* ---------- the bridge: turns a case study into a lead source ---------- */
.fs-bridge-sec { background: var(--ink-2); }
.fs-bridge { max-inline-size: 74ch; }
.fs-bridge h2 {
  font-family: var(--ff-display); font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.15; color: var(--cream); margin: 0 0 14px;
}
html[dir="rtl"] .fs-bridge h2 { font-family: var(--ff-head); line-height: 1.5; }
.fs-bridge p.fs-bridge-lede { font-size: 16px; line-height: 1.8; color: var(--cream-2); margin: 0 0 26px; }
html[dir="rtl"] .fs-bridge p.fs-bridge-lede { line-height: 2; }

ul.fs-signs { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
ul.fs-signs li {
  position: relative; padding-inline-start: 32px;
  font-size: 15.5px; line-height: 1.7; color: var(--cream);
}
html[dir="rtl"] ul.fs-signs li { line-height: 1.95; }
/* The theme suppresses ::marker, so the tick is drawn rather than listed. */
ul.fs-signs li::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .52em;
  inline-size: 16px; block-size: 16px; border-radius: 4px;
  border: 1.5px solid color-mix(in srgb, var(--acc, var(--gold)) 55%, transparent);
}

/* ---------- CTA ---------- */
.fs-cta {
  margin-block-start: clamp(30px, 4vw, 46px);
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid color-mix(in srgb, var(--acc, var(--gold)) 34%, var(--line));
  border-radius: var(--r);
  background: color-mix(in srgb, var(--acc, var(--gold)) 6%, var(--ink));
  max-inline-size: 74ch;
}
.fs-cta h2 {
  font-family: var(--ff-display); font-size: clamp(1.35rem, 2.7vw, 1.95rem);
  line-height: 1.2; color: var(--cream); margin: 0 0 12px;
}
html[dir="rtl"] .fs-cta h2 { font-family: var(--ff-head); line-height: 1.5; }
.fs-cta p { font-size: 15.5px; line-height: 1.75; color: var(--cream-2); margin: 0 0 24px; max-inline-size: 62ch; }
html[dir="rtl"] .fs-cta p { line-height: 1.95; }
.fs-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   FLAGSHIP — mandate grid, channel split and live-channel block.
   ========================================================================== */

/* ---------- what I own ---------- */
.fs-own-sec { background: var(--ink-2); }
.fs-own {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  margin-block-start: clamp(26px, 4vw, 40px);
}
.fs-own-i {
  background: var(--ink); padding: clamp(22px, 2.6vw, 30px);
  position: relative; transition: background .3s var(--ease);
}
.fs-own-i:hover { background: var(--ink-3); }
/* accent rule that grows on hover — inline-size so it runs the right way under RTL */
.fs-own-i::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  block-size: 2px; inline-size: 0; background: var(--acc, var(--gold));
  transition: inline-size .45s var(--ease);
}
.fs-own-i:hover::before { inline-size: 100%; }
.fs-own-k {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--acc, var(--gold)); display: block; margin-block-end: 12px;
}
html[dir="rtl"] .fs-own-k { font-family: var(--ff-body); letter-spacing: 0; font-size: 13px; font-weight: 700; }
.fs-own-i h3 {
  font-family: var(--ff-display); font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.25; color: var(--cream); margin: 0 0 9px;
}
html[dir="rtl"] .fs-own-i h3 { font-family: var(--ff-head); line-height: 1.55; }
.fs-own-i p { font-size: 14.5px; line-height: 1.7; color: var(--cream-2); margin: 0; }
html[dir="rtl"] .fs-own-i p { line-height: 1.95; }

/* ---------- channel split ---------- */
.fs-chan {
  margin: clamp(22px, 3vw, 32px) 0 0; padding: clamp(22px, 3vw, 32px);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
}
.fs-chan figcaption { margin-block-end: 22px; }
.fs-chan figcaption b {
  display: block; font-family: var(--ff-display); font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--cream); font-weight: 400; margin-block-end: 7px;
}
html[dir="rtl"] .fs-chan figcaption b { font-family: var(--ff-head); font-weight: 700; line-height: 1.55; }
.fs-chan figcaption span { font-size: 14px; line-height: 1.7; color: var(--cream-2); max-inline-size: 66ch; display: block; }
html[dir="rtl"] .fs-chan figcaption span { line-height: 1.95; }
.fs-chan-rows { display: grid; gap: 15px; }
.fs-chan-row { display: grid; grid-template-columns: minmax(120px, 30%) 1fr auto; gap: 14px; align-items: center; }
.fs-chan-l { font-size: 14px; color: var(--cream-2); }
.fs-chan-row.is-hi .fs-chan-l { color: var(--cream); font-weight: 600; }
.fs-chan-track { block-size: 14px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.fs-chan-fill {
  display: block; block-size: 100%; border-radius: 99px; background: var(--ink-4);
  inline-size: var(--w);
}
.fs-chan-row.is-hi .fs-chan-fill { background: var(--acc, var(--gold)); }
.fs-chan-v { font-family: var(--ff-mono); font-size: 14px; color: var(--cream); min-inline-size: 54px; text-align: end; }
html[dir="rtl"] .fs-chan-v { font-family: var(--ff-mono); direction: ltr; text-align: start; }
/* animate from zero only once revealed, and only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .rv .fs-chan-fill { inline-size: 0; transition: inline-size 1.1s cubic-bezier(.2,.7,.2,1) .15s; }
  .rv.is-in .fs-chan-fill { inline-size: var(--w); }
}
@media (max-width: 600px) {
  .fs-chan-row { grid-template-columns: 1fr auto; }
  .fs-chan-track { grid-column: 1 / -1; }
}

/* ---------- live channels ---------- */
.fs-pres-sec { background: var(--ink-2); }
.fs-aud {
  display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: flex-end;
  margin-block-start: clamp(24px, 3vw, 34px);
  padding-block-end: clamp(22px, 3vw, 30px); border-block-end: 1px solid var(--line);
}
.fs-aud-n {
  font-family: var(--ff-display); font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1; color: var(--acc, var(--gold));
}
html[dir="rtl"] .fs-aud-n { font-family: var(--ff-head); line-height: 1.3; }
.fs-aud-l { font-size: 13px; color: var(--cream-2); margin-block-start: 7px; }
html[dir="rtl"] .fs-aud-l { font-size: 13.5px; }
.fs-aud-note { flex-basis: 100%; font-size: 12.5px; color: var(--cream-3); margin: 4px 0 0; }
html[dir="rtl"] .fs-aud-note { font-size: 13px; }

.fs-links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 10px; margin-block-start: clamp(22px, 3vw, 30px);
}
.fs-link {
  display: block; padding: 17px 19px; background: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; text-decoration: none;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.fs-link:hover, .fs-link:focus-visible { border-color: var(--acc, var(--gold)); transform: translateY(-2px); }
.fs-link.is-site { border-color: color-mix(in srgb, var(--acc, var(--gold)) 45%, var(--line)); }
.fs-link-k {
  display: block; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acc, var(--gold)); margin-block-end: 6px;
}
html[dir="rtl"] .fs-link-k { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: 12.5px; font-weight: 600; }
/* Handles and URLs are always Latin — force LTR so an RTL page does not reorder
   them, and allow a break so a long handle cannot widen the grid. */
.fs-link-v {
  display: block; font-size: 14px; color: var(--cream); direction: ltr;
  text-align: start; overflow-wrap: anywhere;
}

/* ==========================================================================
   FLAGSHIP v2 — the console treatment.

   Scoped to `.fs2` on <body> of flagship pages only, so the rest of the site is
   untouched. This is Direction A applied for real: a hairline grid under
   everything, corner brackets on every panel, monospace readouts, and telemetry
   bars with tick marks instead of soft progress pills.

   The argument it makes visually: he sells measurement, so his case study should
   look like an instrument rather than a brochure.
   ========================================================================== */
.fs2 {
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
}
/* square everything: radius reads as "app", brackets read as "instrument" */
.fs2 .fs-own, .fs2 .fs-links, .fs2 .fs-kpis, .fs2 ol.fs-found,
.fs2 .fs-chan, .fs2 .fs-cta, .fs2 .dg, .fs2 .fs-link, .fs2 .fs-own-i { border-radius: 0; }

.fs2 .fs-chan, .fs2 .dg { position: relative; }
.fs2 .fs-chan::before, .fs2 .fs-chan::after,
.fs2 .dg::before, .fs2 .dg::after {
  content: ''; position: absolute; inline-size: 10px; block-size: 10px;
  border: 1px solid var(--acc, var(--gold)); pointer-events: none;
}
.fs2 .fs-chan::before, .fs2 .dg::before {
  inset-block-start: -1px; inset-inline-start: -1px; border-block-end: 0; border-inline-end: 0;
}
.fs2 .fs-chan::after, .fs2 .dg::after {
  inset-block-end: -1px; inset-inline-end: -1px; border-block-start: 0; border-inline-start: 0;
}

.fs2 .fs-hero h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); }
html[dir="rtl"] .fs2 .fs-hero h1 { font-size: clamp(2.1rem, 5.6vw, 4rem); }

/* KPI strip becomes a readout bank, colour-coded by what the number means */
.fs2 .fs-kpi { background: #0C0D10; border-block-start: 2px solid transparent; }
.fs2 .fs-kpi:nth-child(1) { border-block-start-color: var(--acc, var(--gold)); }
.fs2 .fs-kpi:nth-child(2), .fs2 .fs-kpi:nth-child(3) { border-block-start-color: #C8922E; }
.fs2 .fs-kpi:nth-child(4) { border-block-start-color: var(--cream-3); }
.fs2 .fs-kpi-v {
  font-family: var(--ff-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
}
/* digits are Latin in both languages, so force LTR or an RTL page reorders them */
html[dir="rtl"] .fs2 .fs-kpi-v { font-family: var(--ff-mono); direction: ltr; text-align: start; }

/* telemetry bars: square, ticked, measured rather than decorative */
.fs2 .fs-chan-track {
  border-radius: 0; block-size: 24px; background: #0A0B0E;
  border: 1px solid var(--line-2); position: relative;
}
.fs2 .fs-chan-track::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 10%);
}
.fs2 .fs-chan-fill { border-radius: 0; opacity: .92; }

/* findings become numbered channels */
.fs2 .fs-found-n {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .16em;
  border: 1px solid var(--line-2); padding: 5px 9px; align-self: start;
}
html[dir="rtl"] .fs2 .fs-found-n { font-family: var(--ff-mono); letter-spacing: 0; }

.fs2 .fs-own-i { border-block-start: 1px solid transparent; }
.fs2 .fs-own-i:hover { border-block-start-color: var(--acc, var(--gold)); }
.fs2 .fs-own-k, html[dir="rtl"] .fs2 .fs-own-k { font-family: var(--ff-mono); }

@media (prefers-reduced-motion: no-preference) {
  .fs2 .fs-kpi { transition: background .3s var(--ease); }
  .fs2 .fs-kpi:hover { background: var(--ink-3); }
}

/* ==========================================================================
   CAMPAIGN GALLERY — real design work, the first visual proof on the site.

   4:5 tiles because that is the native Instagram ratio; forcing a square would
   crop every headline off the top of the artwork.
   ========================================================================== */
.fs-gal-sec { background: var(--ink-2); }
.fs-gal {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 12px; margin-block-start: clamp(26px, 4vw, 40px);
}
.fs-gal-i {
  display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--ink-3);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.fs-gal-i:hover, .fs-gal-i:focus-visible {
  border-color: var(--acc, var(--gold)); transform: translateY(-3px);
}
.fs-gal-i img {
  inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.fs-gal-i:hover img { transform: scale(1.03); }
/* an "open" affordance, so it is obvious the tile is clickable */
.fs-gal-i::after {
  content: ''; position: absolute; inset-block-end: 10px; inset-inline-end: 10px;
  inline-size: 26px; block-size: 26px; border-radius: 7px;
  background: rgba(10,11,18,.72) no-repeat center/12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 3h12v12M21 3L9 15M15 21H3V9'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity .3s var(--ease);
}
.fs-gal-i:hover::after, .fs-gal-i:focus-visible::after { opacity: 1; }
@media (max-width: 520px) {
  .fs-gal { grid-template-columns: repeat(2, 1fr); gap: 9px; }
}