/* ============================================================
   The Tee Family House — v3-base.css
   Version 3 "الفخمة" — design language faithfully adapted from
   the user's reference site (Deeb Trading): warm near-black,
   cream ink, copper accent + gold, dark/light theme, Lenis.
   Owned by the brain — v3 builders read, never edit.
   Loaded ONLY by v3.html.
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #080706;      --bg-rgb: 8, 7, 6;
  --bg2: #100e0c;
  --cream: #f1e9dc;
  --ink: #f6f2eb;     --ink-rgb: 246, 242, 235;
  --dark: #14110e;    --dark-rgb: 20, 17, 14;
  --mut: #a69c8f;     --mut-rgb: 166, 156, 143;
  --acc: #ee7c2b;     --acc-rgb: 238, 124, 43;
  --acc2: #f5a15c;
  --gold: #d9a441;    --gold-rgb: 217, 164, 65;
  --pink: #f48fb1;    /* the initiative's brand — small doses only */
  --line: rgba(var(--ink-rgb), 0.09);
  --copper: linear-gradient(120deg, #f7b27a 0%, #ee7c2b 45%, #c05f1a 100%);
  /* warm-gradient service cards, darkest → lightest */
  --card1: #161310; --card2: #1b1611; --card3: #201a13;
  --card4: #251d14; --card5: #2a2015; --card6: #302416;
  /* flipped (light) panel used as a visual divider */
  --flip-bg: #f1e9dc; --flip-ink: #14110e; --flip-ink-rgb: 20, 17, 14;
  --flip-acc: #b4560f; --flip-mut: #8c6e4a; --flip-line: rgba(20, 17, 14, 0.14);
  --flip-card: #ffffff;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* AR-first type: Alexandria plays the grotesk role, Amiri italic plays Playfair */
  --ff-d: 'Alexandria', 'Space Grotesk', sans-serif;
  --ff-b: 'Alexandria', 'Inter', sans-serif;
  --ff-s: 'Amiri', 'Playfair Display', serif;
}

/* ══════════ LIGHT THEME ══════════ */
html[data-theme='light'] {
  color-scheme: light;
  --bg: #faf6ef;  --bg-rgb: 250, 246, 239;
  --bg2: #ffffff;
  --cream: #14110e;
  --ink: #171310; --ink-rgb: 23, 19, 16;
  --mut: #6e6357; --mut-rgb: 110, 99, 87;
  --acc: #b4560f; --acc-rgb: 180, 86, 15;
  --acc2: #8c4510;
  --line: rgba(23, 19, 16, 0.1);
  --card1: #ffffff; --card2: #fdf9f2; --card3: #fbf4ea;
  --card4: #f9efe1; --card5: #f7ead8; --card6: #f5e5cf;
  --flip-bg: #14110e; --flip-ink: #f1e9dc; --flip-ink-rgb: 241, 233, 220;
  --flip-acc: #f5a15c; --flip-mut: #a69c8f; --flip-line: rgba(241, 233, 220, 0.13);
  --flip-card: #1c1712;
}
/* sections that sit on photo/video keep light ink in both themes */
.v3 .hero3, .v3 .cine { color: #f6f2eb; --ink: #f6f2eb; --ink-rgb: 246, 242, 235; --mut: #a69c8f; }

/* ---------- ground ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body.v3 {
  background: var(--bg); color: var(--ink);
  font-family: var(--ff-b); font-size: 16.5px; line-height: 1.75;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body.v3.is-locked { overflow: hidden; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.v3 ::selection { background: var(--acc); color: var(--bg); }

.v3 .container { max-width: 1240px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 48px); }
.v3 .section { padding-block: clamp(84px, 13vh, 150px); position: relative; }

/* ---------- type helpers ---------- */
.v3 .display { font-family: var(--ff-d); font-weight: 700; line-height: 1.32; letter-spacing: -0.01em; }
.v3 .display em { font-family: var(--ff-s); font-style: italic; font-weight: 700; color: var(--acc); }
.v3 .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.24em; color: var(--acc);
}
.v3 .eyebrow i { inline-size: 30px; block-size: 1px; background: var(--copper); display: inline-block; }
.v3 .lede { color: var(--mut); font-size: clamp(1rem, 1.7vw, 1.18rem); max-width: 60ch; }
/* outlined display text (the reference's .oln) */
.v3 .oln {
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(var(--ink-rgb), 0.85);
}

/* ---------- buttons ---------- */
.v3 .btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px; border-radius: 999px; font-weight: 600; font-size: 0.98rem;
  transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease), background 0.3s, color 0.3s;
}
.v3 .btn:active { transform: scale(0.96); }
.v3 .btn--gold { background: var(--copper); color: #14110e; box-shadow: 0 12px 34px -12px rgba(var(--acc-rgb), 0.55); }
.v3 .btn--gold:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -12px rgba(var(--acc-rgb), 0.7); }
.v3 .btn--ghost { border: 1px solid var(--line); color: var(--ink); background: rgba(var(--ink-rgb), 0.04); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.v3 .btn--ghost:hover { border-color: var(--acc); color: var(--acc); }

/* ---------- reveal contract (v3 entrance system lives in js/v3-hero.js) ---------- */
html.js .v3 [data-v3-reveal] { opacity: 0; }
html.js.reduce-motion .v3 [data-v3-reveal] { opacity: 1; }

/* class-driven (?motion=off), not the OS media query — owner's call:
   full motion for everyone, explicit opt-out preserved */
html.reduce-motion .v3 *, html.reduce-motion .v3 *::before, html.reduce-motion .v3 *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }