/* ═══════════════════════════════════════════════════════════════════
   KF Agency — portfolio visual layer
   Shared by /portfolio.html and /ar/portfolio.html.

   Linked AFTER each page's inline <style>, so it wins ties on equal
   specificity without needing !important.

   Direction: "editorial performance report". The page exists to prove
   results, so the numbers lead. Hairline rules and layered depth replace
   the uniform soft-shadow cards, and gradient is spent on data rather
   than on backgrounds.

   Latin display face is Space Grotesk — the same --kf-display the
   homepage and the industries pages already use, so this stays on brand.
   Arabic keeps Cairo, which has the glyph coverage Space Grotesk lacks.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --kf-display: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  --kf-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  --kf-ink: #0c1024;
  --kf-ink-2: #55607a;
  --kf-line: rgba(14,20,48,.11);
  --kf-line-soft: rgba(14,20,48,.06);

  --kf-grad: linear-gradient(112deg, var(--blue), var(--purple) 52%, var(--pink));

  /* Two-part shadows: a tight contact shadow for the edge, a wide soft one
     for lift. One blurry shadow is what makes a card look like a sticker. */
  --kf-sh-1: 0 1px 2px rgba(12,17,43,.055), 0 10px 22px -10px rgba(12,17,43,.16);
  --kf-sh-2: 0 1px 2px rgba(12,17,43,.06),  0 26px 54px -20px rgba(12,17,43,.28);

  --kf-ease: cubic-bezier(.22,.68,0,1.02);
}

/* ── Typography ────────────────────────────────────────────────────
   The page declared "Inter" but only ever loaded DM Sans + Cairo, so it
   rendered in the Segoe UI fallback while the real brand font sat
   downloaded and unused. */
body    { font-family: var(--kf-body); letter-spacing: -0.005em; }
body.ar { font-family: 'Cairo', system-ui, sans-serif; }

body:not(.ar) h1, body:not(.ar) h2, body:not(.ar) h3, body:not(.ar) h4,
body:not(.ar) .metric strong, body:not(.ar) .result strong,
body:not(.ar) .case-stat,     body:not(.ar) .case-title,
body:not(.ar) .eyebrow,       body:not(.ar) .svc-slot {
  font-family: var(--kf-display);
}

h1, h2, h3 { letter-spacing: -0.035em; }
h1, h2 { text-wrap: balance; }

/* Fluid display scale — the fixed 76px/48px steps clipped awkwardly
   between the 1024px and 640px breakpoints. */
.hero h1         { font-size: clamp(40px, 5.4vw, 82px); line-height: 1.02; }
h2               { font-size: clamp(28px, 3.1vw, 46px); line-height: 1.06; }
.section-head h2 { font-size: clamp(26px, 2.7vw, 40px); }

p { color: var(--kf-ink-2); }

/* Proportional figures make a row of stats look misaligned. */
.metric strong, .result strong, .case-stat {
  font-variant-numeric: tabular-nums;
}

/* The counter script writes a <sup>+</sup> when it lands. */
.metric strong sup {
  font-size: .46em; vertical-align: super; margin-inline-start: .04em;
  -webkit-text-fill-color: currentColor;
}

.eyebrow {
  font-size: 11.5px;
  letter-spacing: .2em;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* A small gradient tick anchors every eyebrow to the same left edge. */
.eyebrow::before {
  content: "";
  inline-size: 22px; block-size: 2px;
  border-radius: 2px;
  background: var(--kf-grad);
  flex: none;
}
.section-head .eyebrow::before { display: none; }

/* ── Atmosphere ────────────────────────────────────────────────────
   Light sections were a flat white fill. A barely-there grid gives the
   paper some tooth without reading as a texture. */
section:not(.dark-section):not(.contact):not(.cases)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  var(--kf-line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--kf-line-soft) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 72%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
section > * { position: relative; z-index: 1; }

/* ── Section spine ────────────────────────────────────────────────
   A numbered hairline turns a flat stack of blocks into a sequence you
   can feel your place in. Screen only — print keeps the original
   .accent-line / .kf-mark deck furniture. */
.deck { counter-reset: kf-sec; }
.deck > section { counter-increment: kf-sec; }

@media screen and (min-width: 1025px) {
  .deck > section::after {
    content: counter(kf-sec, decimal-leading-zero);
    position: absolute;
    inset-block-start: 30px;
    inset-inline-end: 32px;
    font-family: var(--kf-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--kf-ink);
    opacity: .26;
    z-index: 2;
    pointer-events: none;
  }
  .dark-section::after, .contact::after { color: #fff; opacity: .34; }

  /* The repeated accent bar + caret are print furniture; on screen they
     read as clutter. Restored in @media print below. */
  .accent-line, .kf-mark { display: none; }
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(ellipse 60% 50% at 88% 12%, rgba(23,198,255,.20), transparent 62%),
    radial-gradient(ellipse 55% 55% at 8% 88%,  rgba(255,75,184,.16), transparent 62%),
    linear-gradient(168deg, #fdfdff 0%, #f4f6ff 58%, #eef1fe 100%);
  padding-block: clamp(48px, 6vw, 92px);
}
.hero-grid { gap: clamp(32px, 4.5vw, 64px); }

/* A ruled row reads as a report figure; three floating boxes read as
   widgets bolted on. */
.metrics {
  gap: 0;
  margin-top: clamp(30px, 3.4vw, 48px);
  border-block-start: 1px solid var(--kf-line);
  padding-block-start: 26px;
}
.metric {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 26px;
  border-inline-start: 1px solid var(--kf-line);
}
.metric:first-child { padding-inline-start: 0; border-inline-start: 0; }

.metric strong {
  font-size: clamp(34px, 3.6vw, 52px);
  letter-spacing: -0.055em;
  line-height: .96;
  background: var(--kf-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.metric-label {
  font-size: 11.5px;
  font-weight: 600;
  /* .1em tipped "Industries covered" onto a second line while the other two
     labels stayed on one, so the row lost its shared baseline. */
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--kf-ink-2);
  margin-top: 12px;
}

/* Give the flat gradient rectangle real material: an inner top highlight,
   a tighter contact edge, and a slow sheen. */
.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(ellipse 120% 90% at 12% 0%, rgba(255,255,255,.26), transparent 58%),
    linear-gradient(140deg, var(--blue) 2%, var(--purple) 52%, var(--pink) 104%);
  box-shadow:
    0 2px 4px rgba(20,88,255,.18),
    0 34px 72px -26px rgba(20,88,255,.55),
    inset 0 1px 0 rgba(255,255,255,.34);
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%);
  transform: translateX(-32%);
  animation: kf-sheen 7s var(--kf-ease) infinite;
  pointer-events: none;
}
@keyframes kf-sheen {
  0%, 62%  { transform: translateX(-32%); }
  92%,100% { transform: translateX(32%); }
}
.hero-card > * { position: relative; z-index: 1; }

.big-logo img {
  max-width: 300px;
  /* Lifts the gradient mark off a background running the same gradient. */
  filter: drop-shadow(0 6px 18px rgba(6,12,40,.30));
}
.hero-card p { font-size: 15.5px; line-height: 1.72; }

/* ── Cards: about, methodology, services ─────────────────────────── */
.card, .service, .svc-core {
  position: relative;
  border: 1px solid var(--kf-line);
  background: #fff;
  box-shadow: var(--kf-sh-1);
  transition: transform .4s var(--kf-ease), box-shadow .4s var(--kf-ease),
              border-color .4s var(--kf-ease);
}

/* A gradient hairline that wakes on hover, drawn as a mask so it stays a
   true 1px edge at any radius. */
.card::after, .service::after, .svc-core::after, .case-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--kf-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s var(--kf-ease);
  pointer-events: none;
}
.card:hover, .service:hover, .svc-core:hover {
  transform: translateY(-4px);
  box-shadow: var(--kf-sh-2);
  border-color: transparent;
}
.card:hover::after, .service:hover::after,
.svc-core:hover::after, .case-card:hover::after { opacity: .85; }

.card b       { font-size: 17px; letter-spacing: -.02em; margin-bottom: 10px; }
.service h4   { font-size: 17px; letter-spacing: -.02em; }
.svc-core h4  { letter-spacing: -.025em; }
.svc-slot     { font-size: 11px; letter-spacing: .18em; }
.svc-also-h   { font-size: 11.5px; letter-spacing: .2em; opacity: .5; }

/* ── Dark sections ────────────────────────────────────────────────── */
.dark-section {
  background:
    radial-gradient(ellipse 70% 60% at 12% 0%,   rgba(20,88,255,.24), transparent 62%),
    radial-gradient(ellipse 60% 60% at 92% 100%, rgba(255,75,184,.16), transparent 62%),
    linear-gradient(172deg, #0b1020, #131a33 62%, #0d1222);
}
.dark-section .card {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 44px -24px rgba(0,0,0,.7);
}
.dark-section .card:hover { background: rgba(255,255,255,.085); }
.dark-section .eyebrow { color: #8fb4ff; }

/* ── Creative sample tiles ────────────────────────────────────────── */
.sample-tile {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 44px -20px rgba(0,0,0,.7);
  transition: transform .45s var(--kf-ease), box-shadow .45s var(--kf-ease);
}
.sample-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 66px -24px rgba(0,0,0,.8);
}
.sample-overlay {
  font-size: 13px;
  background: linear-gradient(transparent, rgba(5,8,20,.9));
  padding-block: 30px 16px;
}

/* ── Case studies — the proof, and the centrepiece ────────────────── */
.cases { background: linear-gradient(180deg, #eef1f9, #e7ebf6) !important; }

.section-inner { max-width: 1180px; }
.section-head  { max-width: 720px; margin-bottom: 40px; }

.filter-btn {
  padding: 8px 16px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--kf-line);
  color: #2a3350;
  transition: all .3s var(--kf-ease);
}
.filter-btn:hover { background: #fff; transform: translateY(-1px); box-shadow: var(--kf-sh-1); }
.filter-btn.active {
  background: var(--kf-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(138,63,252,.6);
}

.cases-grid { gap: 18px; }

.case-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--kf-line);
  box-shadow: var(--kf-sh-1);
  transition: transform .4s var(--kf-ease), box-shadow .4s var(--kf-ease),
              border-color .4s var(--kf-ease);
}
.case-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--kf-sh-2);
  border-color: transparent;
}

.case-tag {
  font-size: 9.5px;
  letter-spacing: .16em;
  padding: 5px 11px;
  background: transparent;
  border: 1px solid var(--kf-line);
  color: #5b6480;
}

/* The number is the argument. Give it the room. */
.case-stat {
  font-size: clamp(21px, 1.7vw, 27px);
  letter-spacing: -.045em;
  line-height: 1.04;
  margin-bottom: 12px;
}
.case-name { font-size: 14px; letter-spacing: -.01em; color: var(--kf-ink); }
.case-desc { font-size: 12.8px; line-height: 1.68; color: #5b6480; }
.case-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--kf-line-soft);
}
.case-meta { font-size: 9.5px; letter-spacing: .13em; color: #8a93a8; }

/* Break the 3-up monotony: the lead case runs wide and states its number
   at report scale. */
@media (min-width: 921px) {
  .cases-grid > .case-card:first-child { grid-column: span 2; }
  .cases-grid > .case-card:first-child .case-stat { font-size: clamp(30px, 3vw, 44px); }
  .cases-grid > .case-card:first-child .case-desc { max-width: 52ch; }
}

/* ── Founders ─────────────────────────────────────────────────────── */
.founder { border-color: var(--kf-line); box-shadow: var(--kf-sh-1); }
.founder:hover { box-shadow: var(--kf-sh-2); }
.founder h3 { font-size: 23px; }

/* ── Contact ──────────────────────────────────────────────────────── */
.contact {
  background-color: #0b1020;
  background:
    radial-gradient(ellipse 60% 70% at 84% 8%,  rgba(255,75,184,.34), transparent 60%),
    radial-gradient(ellipse 60% 70% at 10% 92%, rgba(23,198,255,.22), transparent 60%),
    linear-gradient(140deg, #0b1020, #1a2a6c 54%, #7d1a66 100%);
}
.contact-box {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 40px 80px -40px rgba(0,0,0,.7);
}
.contact-links a {
  border-radius: 14px;
  font-size: 14.5px;
  background: rgba(255,255,255,.09);
  transition: all .3s var(--kf-ease);
}
.contact-links a:hover {
  background: rgba(255,255,255,.17);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.4);
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn { transition: transform .3s var(--kf-ease), box-shadow .3s var(--kf-ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--kf-sh-2); }
.btn-primary { box-shadow: 0 12px 30px -10px rgba(138,63,252,.7); }

/* ── Print hint: a quiet chip, not a black slab over the copy ─────── */
.print-note {
  background: rgba(12,16,36,.78);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 9px 15px;
  opacity: .32;
  transition: opacity .3s var(--kf-ease);
}
.print-note:hover { opacity: 1; }

/* ── Scroll reveal (driven by portfolio-enhance.js) ───────────────── */
.kf-rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--kf-ease), transform .7s var(--kf-ease);
  transition-delay: var(--kf-d, 0s);
}
.kf-rise.kf-in { opacity: 1; transform: none; }

/* ── Dark mode ────────────────────────────────────────────────────── */
body.dark .card, body.dark .service, body.dark .svc-core,
body.dark .case-card, body.dark .founder {
  background: #141227;
  border-color: rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 44px -24px rgba(0,0,0,.8);
}
body.dark .cases { background: linear-gradient(180deg, #0b0a16, #100e1f) !important; }
body.dark .metric  { border-inline-start-color: rgba(255,255,255,.11); background: none; }
body.dark .metrics { border-block-start-color: rgba(255,255,255,.11); }
body.dark .metric-label, body.dark .case-desc { color: #9aa1bb; }
body.dark .case-name { color: #f0ecff; }
body.dark .case-tag  { border-color: rgba(255,255,255,.14); color: #b9c0d8; }
body.dark .filter-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
body.dark .deck > section::after { color: #fff; opacity: .22; }
body.dark .hero {
  background:
    radial-gradient(ellipse 60% 50% at 88% 12%, rgba(23,198,255,.16), transparent 62%),
    radial-gradient(ellipse 55% 55% at 8% 88%,  rgba(255,75,184,.14), transparent 62%),
    linear-gradient(168deg, #0b0a16, #131029 70%);
}
body.dark section:not(.dark-section):not(.contact):not(.cases)::before {
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
}

/* ── Arabic / RTL ─────────────────────────────────────────────────── */
body.ar .eyebrow, body.ar .metric-label, body.ar .case-tag,
body.ar .case-meta, body.ar .svc-slot, body.ar .svc-also-h { letter-spacing: 0; }
body.ar h1, body.ar h2, body.ar h3 { letter-spacing: 0; line-height: 1.28; }
body.ar .metric strong, body.ar .case-stat { letter-spacing: -.02em; }
/* Latin figures inside Arabic copy still want LTR ordering. */
body.ar .metric strong, body.ar .result strong, body.ar .case-stat {
  direction: ltr;
  unicode-bidi: isolate;
}
body.ar .metrics { text-align: start; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .metric { padding-inline: 16px; }
  .hero-card { border-radius: 28px; }
}
@media (max-width: 640px) {
  .metrics { gap: 0; padding-block-start: 18px; }
  .metric {
    padding-inline: 0;
    border-inline-start: 0;
    padding-block: 16px;
    border-block-start: 1px solid var(--kf-line);
  }
  .metric:first-child { border-block-start: 0; padding-block-start: 0; }
  .metric strong { font-size: 38px; }
  .big-logo img  { max-width: 190px; }
  .print-note    { display: none; }
  .case-card     { padding: 20px; }
}

/* ── Motion & print ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .kf-rise { opacity: 1; transform: none; transition: none; }
  .hero-card::after { animation: none; }
}

@media print {
  /* Restore the deck furniture and drop anything that costs ink. */
  .accent-line, .kf-mark { display: block; }
  .deck > section::after,
  section:not(.dark-section):not(.contact):not(.cases)::before,
  .hero-card::after { display: none; }
  /* transition:none matters as much as the opacity — without it the fade is
     still mid-flight (and the --kf-d delay still pending) when the page is
     handed to the printer, which prints half-faded cards. */
  .kf-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .card, .service, .svc-core, .case-card, .founder { box-shadow: none; }
  .print-note { display: none; }
}