/* ════════════════════════════════════════════════════════════════════════
   Barba demo — PAGE AESTHETIC (Dennis Snellenberg feel)
   BRIGHT / bold / fast: cream bg, near-black bold display type, ONE accent,
   generous whitespace. Shared by index.html + work-twice.html.
   (Motion mechanics live in barba-motion.css.)
   ════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Palette: Signature */
  --cream: #f4efe6;
  --cream-2: #ede8df;
  --ink: #14110f;
  --ink-sub: #6a6258;
  --accent: #ff4d2e;
  --line: rgba(20,17,15,0.12);
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* Typography System */
  --font-display: Inter;
  --font-body: Inter;
  --font-mono: JetBrains Mono;

  /* Spacing & Layout */
  --nav-h:       72px;
  --section-pad: 120px;
  --container:   1200px;
  --radius: 6px;
  --radius-lg: 36px;
  --transition:  .3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-display);
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* Type scale — big, bold, tight tracking */
h1, h2, h3 { font-weight: 900; letter-spacing: -0.035em; line-height: 0.95; }
.display {
  font-size: clamp(3.4rem, 12vw, 11rem);
  font-weight: 900; letter-spacing: -0.045em; line-height: 0.86;
}
.eyebrow {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-sub);
}
.accent { color: var(--accent); }
p { color: var(--ink-sub); font-size: 1.15rem; max-width: 56ch; }

/* ── Nav ──────────────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 40px; mix-blend-mode: difference; color: #fff;
}
nav .brand { font-family: var(--mono); font-weight: 500; letter-spacing: 0.05em; }
nav .nav-right { display: flex; gap: 30px; font-family: var(--mono); font-size: 0.85rem; }
/* Dark-hero pages (contact): mix-blend-mode:difference is unreliable over the
   .tone-ink hero, so drop the blend and paint the nav in plain cream. */
body.nav-on-dark nav { mix-blend-mode: normal; color: var(--cream, #f4efe6); }

/* ── EN/FR language toggle (mirrors Vitrina, Eximius palette) ────────────────
   The no-FOUC inline head script sets html.lang-en|lang-fr from localStorage;
   barba-motion.js wires the [data-lang-toggle] button. Generic chrome strings
   carry .lang-en/.lang-fr span pairs; CSS hides the inactive language. */
html.lang-en .lang-fr, html.lang-fr .lang-en { display: none !important; }
.lang-toggle { cursor: pointer; background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: inherit; transition: border-color .3s, color .3s; }
.lang-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ── Buttons / links ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 34px; border-radius: 999px; font-weight: 600; font-size: 1rem;
  background: var(--ink); color: var(--cream);
}
.btn--accent { background: var(--accent); color: #fff; }
.link-underline { position: relative; font-weight: 600; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.link-underline:hover::after { transform: scaleX(1); }

/* ── Hero (full-bleed real image + cream wash) ────────────────────────── */
.hero {
  position: relative; min-height: 100vh;
 min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 140px 0 80px; overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* keep it BRIGHT: a cream wash (heavier left for the headline, soft at top
   for the nav) lets the warm image show through on the right while the dark
   display type stays crisply legible — no dark/heavy overlay. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(244,239,230,0.90) 0%, rgba(244,239,230,0) 22%),
    linear-gradient(100deg, rgba(244,239,230,0.92) 0%, rgba(244,239,230,0.58) 36%, rgba(244,239,230,0.05) 68%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero .eyebrow { margin-bottom: 28px; }
.hero h1 { margin-bottom: 36px; }
.hero .tagline { font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 500; color: var(--ink); line-height: 1.2; max-width: 22ch; letter-spacing: -0.02em; }
.hero .meta-row { display: flex; gap: 40px; margin-top: 56px; flex-wrap: wrap; }
.hero .meta-row .eyebrow span { display: block; color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.01em; text-transform: none; margin-top: 6px; }
.hero .scroll-hint { margin-top: auto; padding-top: 60px; }

/* ── Section frame ────────────────────────────────────────────────────── */
section { position: relative; padding: 120px 0; }
.section-label { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 22px; margin-bottom: 70px; }
.section-label h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); }

/* ── Horizontal-scroll giant type band ────────────────────────────────── */
.scroll-band { padding: 80px 0; overflow: hidden; }
.scroll-band .row {
  font-size: clamp(3rem, 9vw, 8rem); font-weight: 900; letter-spacing: -0.05em;
  line-height: 0.92; white-space: nowrap; will-change: transform;
}
.scroll-band .row .outline {
  color: transparent; -webkit-text-stroke: 2px var(--ink); paint-order: stroke;
}
.scroll-band .row .accent { color: var(--accent); }

/* ── Recent work list (hover-reveal rows) ─────────────────────────────── */
/* .work-list is now the SECTION; .work-rows is the rows container (border-top). */
.work-rows { border-top: 1px solid var(--line); }
.work-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 30px;
  padding: 42px 8px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: padding-left 0.45s cubic-bezier(.2,.8,.2,1), color 0.4s ease;
}
.work-row:hover { padding-left: 28px; }
.work-row:hover .work-row__name { color: var(--accent); }
.work-row__idx, .work-row__num { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-sub); }
.work-row__name { font-size: clamp(2rem, 6vw, 4.6rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; transition: color 0.4s ease; }
.work-row__svc, .work-row__role { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-sub); text-align: right; }
.work-row__yr { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-sub); }
@media (max-width: 720px) {
  .work-row { grid-template-columns: auto 1fr auto; }
  .work-row__svc, .work-row__role { display: none; }
}

/* ── Project page ─────────────────────────────────────────────────────── */
.proj-hero { min-height: 78vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 160px 0 60px; }
.proj-hero .display { margin-bottom: 40px; }
.proj-meta { display: grid; grid-template-columns: repeat(3, auto); gap: 60px; border-top: 1px solid var(--line); padding-top: 30px; }
.proj-meta .eyebrow span { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.media-block { margin: 60px 0; border-radius: 8px; overflow: hidden; background: var(--cream-2); }
.media-block img { width: 100%; height: auto; }
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 720px) { .media-grid, .proj-meta { grid-template-columns: 1fr; gap: 28px; } }
.back-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1.05rem; margin: 40px 0 0; }
.back-link .arrow { transition: transform 0.4s cubic-bezier(.2,.8,.2,1); }
.back-link:hover .arrow { transform: translateX(-6px); }

/* ── UPGRADE 2 · depth stack — pinned statement + overlapping panel ────────
   The pinned section recedes (scale/fade, in JS) while the next section,
   given a solid background + higher z-index, slides up and OVER it — the
   "page behind the page" depth cue. */
.depth-pin {
  min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  position: relative; z-index: 0; background: var(--cream-2);
  overflow: hidden;
}
.depth-pin .depth-layers { position: relative; width: 100%; }
/* type sits above the figure plane */
.depth-pin .depth-tag, .depth-pin .depth-title, .depth-pin .depth-foot { position: relative; z-index: 2; }
.depth-pin .depth-tag { display: block; margin-bottom: 22px; }
.depth-pin .depth-title { font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.9; }
.depth-pin .depth-foot { display: block; margin-top: 28px; color: var(--accent); }
/* the real image on its own (farther) depth plane — behind/right of the type.
   A flex wrapper handles centering so GSAP's data-depth transform on the
   figure stays conflict-free (it owns translate; the wrapper owns position). */
.depth-figure-wrap {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: flex-end;
}
.depth-figure {
  width: min(46%, 560px); margin: 0 -2% 0 0;
  border-radius: 10px; overflow: hidden;            /* frame clips the in-frame drift */
  box-shadow: 0 40px 90px -40px rgba(20,17,15,0.4);
  will-change: transform;
}
.depth-figure img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 820px) {
  /* keep the type the hero on small screens — the image steps back, low and soft */
  .depth-figure { width: 78%; margin-right: -10%; opacity: 0.32; }
}
/* The overlapping panel — solid bg + lift shadow so it reads as "in front". */
.depth-over {
  position: relative; z-index: 2; background: var(--cream);
  border-radius: 36px 36px 0 0; margin-top: -4px;
  box-shadow: 0 -40px 80px -50px rgba(20,17,15,0.5);
  padding-top: 110px;
}
/* [showcase_decouple 20260627] Gives the data-pin-stack room to finish its pin
   (CONFIG.depth.pinDistance = 72% vh) before the next section enters, so the
   following section's reveal/stagger ScrollTriggers fire normally. */
.depth-spacer { min-height: 75vh; }

footer { padding: 100px 0 60px; border-top: 1px solid var(--line); }
footer .display { font-size: clamp(2.4rem, 8vw, 7rem); }
footer .foot-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 30px; margin-top: 40px; }
footer .eyebrow { color: var(--ink-sub); }

/* ════════════════════════════════════════════════════════════════════════
   EXIMIUS token-slot components (Koda-parity sections, themed bright/premium)
   Added for the production template; all use only palette/engine vars.
   ════════════════════════════════════════════════════════════════════════ */

/* hero media painted as a background div by barba-motion paintDataImages
   (data-img="{{HERO_IMAGE}}") — empty token leaves the gradient fallback. */
.hero__media {
  background-size: cover; background-position: center;
  background-image: linear-gradient(135deg, var(--cream-2), var(--cream));
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* generic section heading block (About, etc.) */
.lede { max-width: 70ch; }
.lede h2 { font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: 24px; letter-spacing: -0.03em; }
.lede p  { font-size: 1.25rem; color: var(--ink-sub); }

/* ── Showcase grid (8 tiles, auto-fit, prune-collapsing) ──────────────── */
.showcase { padding: var(--section-pad) 0; }
.showcase > .wrap > h2 { font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: 14px; letter-spacing: -0.03em; }
.showcase > .wrap > p { color: var(--ink-sub); font-size: 1.15rem; margin-bottom: 60px; }
.showcase-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.showcase-tile {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: var(--cream-2); cursor: pointer;
  box-shadow: 0 30px 70px -40px rgba(20,17,15,0.35);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), border-color 0.4s ease;
}
.showcase-tile:hover { transform: translateY(-8px); border-color: var(--accent); }
.showcase-tile__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.showcase-tile:hover .showcase-tile__bg { transform: scale(1.06); }
.showcase-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(20,17,15,0.6) 0%, rgba(20,17,15,0.05) 45%, transparent 70%);
}
.showcase-tile__label {
  position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2;
  font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
  line-height: 1.1; letter-spacing: -0.02em; color: #fff;
}
.slot-token { display: none !important; }

/* ── Services (3-card grid, stagger cascade, magnetic hover) ───────────── */
.services-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px; margin-top: 60px;
}
.service-card {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 44px 38px;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), border-color 0.4s ease;
}
.service-card:hover { border-color: var(--accent); }
.service-card h3 { font-size: 1.5rem; margin-bottom: 14px; letter-spacing: -0.02em; }
.service-card p  { color: var(--ink-sub); font-size: 1.05rem; }
.service-card p a { color: var(--accent); }
.service-card .num { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); letter-spacing: 0.2em; display: block; margin-bottom: 22px; }
.service-card .from { display: block; margin-top: 20px; font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.06em; color: var(--ink); }
.service-card .from a { color: var(--accent); }

/* ── Pricing (2 tiers + rich detail) ──────────────────────────────────── */
.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px; margin-top: 60px;
}
.price-card {
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 50px 44px;
}
.price-card--featured { border-color: var(--accent); background: var(--cream); box-shadow: 0 40px 90px -50px rgba(255,77,46,0.4); }
.price-card .tier { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.price-card .amount { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.04em; margin: 16px 0; line-height: 1; }
.price-card p { color: var(--ink-sub); font-size: 1.05rem; }
.price-card p a { color: var(--accent); font-weight: 600; }
.buy-title { font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -0.03em; max-width: 20ch; margin-top: 18px; }
.buy-cta { margin-top: 48px; }
.pricing-detail { margin-top: 50px; padding: 34px 38px; border-left: 3px solid var(--accent); background: var(--cream-2); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.pricing-detail p { color: var(--ink); font-size: 1.2rem; font-weight: 500; }
.pricing-detail h3 { font-size: 1.4rem; margin-bottom: 18px; letter-spacing: -0.02em; }
.price-list { list-style: none; margin-bottom: 26px; }
.price-list li { display: flex; justify-content: space-between; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; color: var(--ink); }
.price-list li span:last-child { font-weight: 700; white-space: nowrap; }
.price-list a { color: var(--accent); }
.pricing-detail .note { font-size: 0.95rem; font-weight: 400; color: var(--ink-sub); margin-top: 8px; }
.price-market { margin-top: 22px; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--ink-sub); }

/* ── Contact rows + contact image ─────────────────────────────────────── */
.contact-rows { max-width: 560px; margin: 50px 0; }
.contact-rows .row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 26px 4px; border-bottom: 1px solid var(--line);
  font-size: 1.15rem;
}
.contact-rows .row .k { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-sub); }
.contact-rows .row .v { font-weight: 600; }
.contact-rows .row a.v:hover { color: var(--accent); }
.contact-image { margin: 60px 0; }
.contact-image__bg {
  width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
  background-size: cover; background-position: center;
  background-color: var(--cream-2); border: 1px solid var(--line);
}

/* word-split halves on showcase tiles read white (labels sit over the image) */
.showcase-tile .dm-split__half { color: #fff; }

/* ════════════════════════════════════════════════════════════════════════
   TONAL SECTIONS — palette-adaptive surfaces (no hardcoded theme colors).
   .tone-2      warmer/darker surface (--cream-2)
   .tone-bright gallery-bright: near-white in light palettes, a lifted surface
                in dark palettes (color-mix toward #fff, relative to --cream)
   .tone-ink    always INVERTS the page → dramatic high-contrast block (dark
                block w/ cream type in light themes; light block in dark themes)
   ════════════════════════════════════════════════════════════════════════ */
.tone-2      { background: var(--cream-2); }
.tone-bright { background: color-mix(in srgb, var(--cream) 60%, #fff); }
.tone-ink    { background: var(--ink); color: var(--cream); }
.tone-ink h1, .tone-ink h2, .tone-ink h3, .tone-ink p, .tone-ink .display { color: var(--cream); }
.tone-ink .eyebrow { color: color-mix(in srgb, var(--cream) 62%, transparent); }
.tone-ink .accent  { color: var(--accent); }

/* ══ DAMPHI MOBILE BASELINE v1 — GENERATED, DO NOT HAND-EDIT ══
   Source: templates/_shared/mobile/mobile_baseline.css
   Regenerate: python3 Tools/apply_mobile_baseline.py eximius
   Edit the baseline, never this block. ══ */
@media (max-width: 768px) {
  section, .hero, footer { padding-top: 4rem; padding-bottom: 4rem; }
}
/* ══ END DAMPHI MOBILE BASELINE ══ */

/* ── Mobile fit: nav and page gutters (ai.damphi.com, OTA 8) ─────────── */
@media (max-width: 768px) {
  nav { padding: 16px 20px; }
  nav .nav-right { gap: 14px; font-size: 0.75rem; }
  .wrap { padding: 0 20px; }
}
@media (max-width: 480px) {
  nav { flex-wrap: wrap; row-gap: 8px; }
  nav .brand { font-size: 0.8rem; }
  nav .nav-right { gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
}

/* ── Mobile fit: nav and page gutters (ai.damphi.com, OTA 8) ─────────── */
@media (max-width: 768px) {
  nav { padding: 16px 20px; }
  nav .nav-right { gap: 14px; font-size: 0.75rem; }
  .wrap { padding: 0 20px; }
}
@media (max-width: 480px) {
  nav { flex-wrap: wrap; row-gap: 8px; }
  nav .brand { font-size: 0.8rem; }
  nav .nav-right { gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
}

/* ── Mobile fit: nav and page gutters (ai.damphi.com, OTA 8) ─────────── */
@media (max-width: 768px) {
  nav { padding: 16px 20px; }
  nav .nav-right { gap: 14px; font-size: 0.75rem; }
  .wrap { padding: 0 20px; }
}
@media (max-width: 480px) {
  nav { flex-wrap: wrap; row-gap: 8px; }
  nav .brand { font-size: 0.8rem; }
  nav .nav-right { gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
}