/* ============================================================
   JT Consulting — split/duotone redesign
   Plain CSS, no build step. Shared across homepage and /projects/.
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink:       #0A0A0A;
  --ink-soft:  #161616;
  --ink-line:  rgba(255,255,255,.14);
  --bone:      #F6EEDB; /* subtle warm cream — site light bg */
  --bone-soft: #EFE3C9;
  --bone-line: rgba(10,10,10,.10);
  --fg-dark:   #F6EEDB;
  --fg-dark-m: rgba(246,238,219,.72);
  --fg-light:  #0A0A0A;
  --fg-light-m: rgba(10,10,10,.68);
  --accent:    #E8A94B; /* unified orange — all tiles use this */
  --accent-deep: #B47E24; /* darker orange for bold section headings */
  --easing:    cubic-bezier(.22,1,.36,1);
  --tile-gap:  24px;
}

html { font-family: 'Source Sans 3','Segoe UI',Calibri,sans-serif; -webkit-font-smoothing: antialiased; background: var(--ink); color: var(--fg-dark); }
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ---------- Typography ---------- */
.display, .eyebrow, .headline, .nav-link, .chip, .tag, .btn { font-family: 'DM Sans', sans-serif; }
.display { font-weight: 700; letter-spacing: -0.02em; line-height: 0.96; }
.eyebrow { font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; }
.chip    { display: inline-block; font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 10px; border-radius: 2px; background: rgba(255,255,255,.10); backdrop-filter: blur(6px); }
.mono    { font-family: 'DM Sans', monospace; letter-spacing: 0.12em; }

/* ---------- Section shells ---------- */
.section { position: relative; width: 100%; }
.section.dark  { background: var(--ink);  color: var(--fg-dark); }
.section.light { background: var(--bone); color: var(--fg-light); }
.section.dark .line  { background: var(--ink-line); }
.section.light .line { background: var(--bone-line); }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (min-width: 1100px) { .wrap { padding: 0 56px; } }
@media (max-width: 560px)  { .wrap { padding: 0 20px; } }

/* ---------- Nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; mix-blend-mode: difference; color: #fff; pointer-events: none; }
.nav .brand, .nav .links { pointer-events: auto; }
.nav .brand { font-family: 'DM Sans', sans-serif; font-weight: 700; letter-spacing: 0.16em; font-size: 13px; text-transform: uppercase; text-decoration: none; }
.nav .brand-mark { width: 34px; height: 34px; border: 1.5px solid currentColor; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: 0.04em; margin-right: 10px; vertical-align: middle; }
.nav .links { display: flex; gap: 28px; }
.nav .links a { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.20em; text-transform: uppercase; text-decoration: none; opacity: 0.85; transition: opacity .2s; }
.nav .links a:hover, .nav .links a.active { opacity: 1; }
@media (max-width: 640px) { .nav { padding: 16px 20px; } .nav .links { gap: 16px; } .nav .links a { font-size: 10.5px; letter-spacing: 0.14em; } }

/* ---------- Hero ---------- */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 140px 0 120px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 30%, rgba(232,169,75,.18), transparent 55%), radial-gradient(ellipse at 20% 85%, rgba(31,143,143,.16), transparent 60%); pointer-events: none; }
.hero::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>"); opacity: 0.10; mix-blend-mode: overlay; pointer-events: none; }
.hero .wrap { position: relative; z-index: 2; }
.hero .eyebrow { color: var(--accent); margin-bottom: 36px; display: flex; align-items: center; gap: 14px; }
.hero .eyebrow::before { content: ''; width: 42px; height: 1px; background: var(--accent); display: inline-block; }
.hero .display { font-size: clamp(44px, 9vw, 128px); max-width: 14ch; }
.hero .display > span { display: block; }
.hero .display .accent { color: var(--accent); font-style: italic; font-weight: 500; }
.hero .display .w { display: inline-block; transition: transform .45s var(--easing); will-change: transform; }
.hero .scroll-cue { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-dark-m); }
.hero .scroll-cue::after { content: ''; display: block; width: 1px; height: 42px; background: currentColor; margin: 12px auto 0; opacity: .6; animation: scrollCue 2.4s var(--easing) infinite; transform-origin: top; }

/* Hover-hint for the floating cubes — sits to the right of hero copy, gently pulses */
.cube-hint {
  position: absolute;
  right: clamp(24px, 4vw, 56px);
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-dark-m);
  pointer-events: none;
  z-index: 3;
  animation: hintPulse 2.8s ease-in-out infinite;
}
.cube-hint::before {
  content: '↔';
  margin-right: 10px;
  opacity: .7;
}
@keyframes hintPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@media (hover: none), (max-width: 900px) { .cube-hint { display: none; } }

/* Back-to-top arrow — mirrors .scroll-cue but fixed to the right edge,
   visible once the user has scrolled past the hero. */
.back-to-top {
  position: fixed;
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(24px, 4vw, 48px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--fg-dark);
  border: 1px solid rgba(246,238,219,.18);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .35s var(--easing), transform .35s var(--easing), background .25s, color .25s;
  z-index: 60;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--accent);
  color: #0A0A0A;
  border-color: var(--accent);
}
.back-to-top .btt-arrow { display: block; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity .2s; transform: none; } }
@keyframes scrollCue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Hero 3D metallic cubes ---------- */
.hero-cubes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
/* Raise the cube layer above the hero text whenever any cube is hovered,
   so the label reads on top of the headline rather than being occluded. */
.hero-cubes:has(.cube:hover) { z-index: 5; }

.cube {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  margin-left: calc(var(--size) / -2);
  margin-top:  calc(var(--size) / -2);
  /* Local perspective per cube — edge cubes no longer project from a
     shared vanishing point, which was flattening them visually. */
  perspective: calc(var(--size) * 5);
  transform-style: preserve-3d;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform .5s var(--easing);
  will-change: transform;
}
.cube:hover { z-index: 5; }
/* Soft radial glow sitting behind the cube — lives on a pseudo-element
   so the cube subtree itself never gets a CSS `filter`. (A `filter` on
   .cube-inner flattens the 3D into a 2D image in Chrome/Safari, which
   is why the cubes were rendering as squares.) */
.cube::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: radial-gradient(circle,
    rgba(255,205,130,.55) 0%,
    rgba(232,169,75,.28) 35%,
    rgba(232,169,75,0) 70%);
  pointer-events: none;
  z-index: -1;
  transition: opacity .35s var(--easing);
  opacity: .85;
}
.cube:hover::before { opacity: 1; }

/* Ambient warm glow around every cube — drop-shadow respects the 3D
   silhouette, so it hugs whichever faces are currently visible. */
.cube-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: cubeSpin 22s linear infinite;
  transform-origin: center center;
  /* No CSS filter here — `filter` flattens 3D subtrees in Chrome/Safari,
     which is what was rendering the cubes as plain squares. The glow
     lives on .cube::before instead. */
}
.cube:nth-child(2) .cube-inner { animation-duration: 28s; animation-direction: reverse; }
.cube:nth-child(3) .cube-inner { animation-duration: 18s; }
.cube:nth-child(4) .cube-inner { animation-duration: 32s; animation-direction: reverse; }
.cube:nth-child(5) .cube-inner { animation-duration: 24s; }
.cube:nth-child(6) .cube-inner { animation-duration: 30s; animation-direction: reverse; }
.cube:nth-child(7) .cube-inner { animation-duration: 20s; }
/* Tumble keyframes — offset so three faces are visible at every frame,
   giving a clear 3D cube silhouette throughout the rotation. */
@keyframes cubeSpin {
  0%   { transform: rotateX(-24deg) rotateY(-32deg) rotateZ(0deg); }
  50%  { transform: rotateX(156deg) rotateY(148deg) rotateZ(20deg); }
  100% { transform: rotateX(336deg) rotateY(328deg) rotateZ(0deg); }
}
/* Fast spin triggered on click just before navigation happens */
.cube.spinning .cube-inner {
  animation: cubeSpinFast .75s cubic-bezier(.2,.8,.2,1) 1;
}
@keyframes cubeSpinFast {
  0%   { transform: rotateX(-24deg) rotateY(-32deg) rotateZ(0deg)   scale(1); }
  60%  { transform: rotateX(336deg) rotateY(688deg) rotateZ(18deg)  scale(1.45); }
  100% { transform: rotateX(696deg) rotateY(1048deg) rotateZ(0deg) scale(1); }
}

/* Each face = metallic body gradient + specular highlight radial +
   thin bright rim. Multi-stop linear mimics anisotropic brushed-gold
   shading; the radial is the blown-out highlight spot. */
.cf {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,224,160,.7);
  box-shadow:
    inset 0 0 22px rgba(60,30,5,.55),
    inset 0 1px 0 rgba(255,240,200,.6);
  backface-visibility: visible;
}
.cf-front  {
  transform: translateZ(calc(var(--size) / 2));
  background:
    radial-gradient(ellipse 65% 45% at 28% 22%, rgba(255,250,220,.85) 0%, rgba(255,230,180,0) 55%),
    linear-gradient(135deg, #FFE8B3 0%, #F5C880 22%, #E8A94B 52%, #B47E24 82%, #6B4815 100%);
}
.cf-back   {
  transform: rotateY(180deg) translateZ(calc(var(--size) / 2));
  background:
    radial-gradient(ellipse 70% 50% at 70% 30%, rgba(255,210,150,.45) 0%, transparent 60%),
    linear-gradient(135deg, #8B5F1A 0%, #6B4815 35%, #4A2F0E 75%, #2E1C08 100%);
}
.cf-right  {
  transform: rotateY(90deg)  translateZ(calc(var(--size) / 2));
  background:
    radial-gradient(ellipse 60% 50% at 75% 25%, rgba(255,225,170,.55) 0%, transparent 55%),
    linear-gradient(135deg, #E8A94B 0%, #C99030 30%, #8B5F1A 70%, #4A2F0E 100%);
}
.cf-left   {
  transform: rotateY(-90deg) translateZ(calc(var(--size) / 2));
  background:
    radial-gradient(ellipse 60% 50% at 25% 25%, rgba(255,215,160,.55) 0%, transparent 55%),
    linear-gradient(135deg, #C99030 0%, #8B5F1A 40%, #4A2F0E 80%, #2E1C08 100%);
}
.cf-top    {
  transform: rotateX(90deg)  translateZ(calc(var(--size) / 2));
  background:
    radial-gradient(ellipse 70% 55% at 35% 25%, rgba(255,255,235,.9) 0%, rgba(255,240,200,0) 65%),
    linear-gradient(135deg, #FFF4D0 0%, #FFE0A8 20%, #F5C880 50%, #E8A94B 80%, #B47E24 100%);
}
.cf-bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--size) / 2));
  background:
    radial-gradient(ellipse 70% 50% at 50% 70%, rgba(180,120,50,.35) 0%, transparent 60%),
    linear-gradient(135deg, #4A2F0E 0%, #3D2810 40%, #2E1C08 80%, #1A0F04 100%);
}

/* On hover: keep the spin going (slowed) so the cube visibly rotates
   behind the service-name label. No freeze, no filter, no scale on
   the cube — just slow tumble + brighter face specular. */
.cube:hover .cube-inner {
  animation-duration: 8s;
}
.cube:hover .cf {
  box-shadow:
    inset 0 0 34px rgba(60,30,5,.55),
    inset 0 1px 0 rgba(255,240,200,.75);
}

/* Service label — positioned in front of the cube (large positive Z)
   so it renders above the cube's faces, and we lift the entire cube
   layer via :has() so it also renders above the hero headline. */
.cube-label {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 24px;
  transform: translate(-50%, 8px);
  white-space: nowrap;
  color: #0A0A0A;
  background: linear-gradient(135deg, #FFDDA0 0%, #E8A94B 50%, #B47E24 100%);
  padding: 7px 14px;
  border-radius: 2px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--easing), transform .3s var(--easing);
  box-shadow:
    0 10px 28px rgba(0,0,0,.55),
    0 0 18px rgba(232,169,75,.45),
    inset 0 1px 0 rgba(255,245,210,.8);
  z-index: 10;
}
.cube:hover .cube-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Hide cubes on mobile / touch — too busy on small screens */
@media (hover: none), (max-width: 900px) {
  .hero-cubes { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cube-inner { animation: none; }
  .cube { transition: none; }
}

/* ---------- Section intro ---------- */
.sec-intro { padding: 120px 0 56px; }
.sec-intro .eyebrow { color: var(--accent); display: flex; align-items: center; gap: 14px; margin-bottom: 20px; font-size: 14px; }
.sec-intro .eyebrow::before { content: ''; width: 36px; height: 1px; background: currentColor; }

/* Two-part section heading — mirrors the hero pattern:
   .lead  → bold hero-orange statement
   .sub   → italic secondary (black on light sections, white on dark sections) */
.sec-intro .display { font-size: clamp(38px, 5.5vw, 72px); max-width: 20ch; line-height: 1; }
.sec-intro .display .lead,
.sec-intro .display .sub { display: inline; }
.sec-intro .display .lead { color: var(--accent); font-weight: 700; font-style: normal; margin-right: .35em; }
.sec-intro .display .sub  { color: var(--fg-light); font-weight: 500; font-style: italic; letter-spacing: -0.01em; }
.section.dark .sec-intro .display .sub { color: var(--fg-dark); }

.sec-intro .strap { margin-top: 22px; max-width: 620px; font-size: 19px; line-height: 1.55; color: var(--fg-dark-m); }
.section.light .sec-intro .strap { color: var(--fg-light-m); }

/* ---------- Tile grid ---------- */
.tiles { display: grid; gap: var(--tile-gap); padding: 24px 0 120px; }
.tiles.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tiles.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) { .tiles.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tiles.cols-3, .tiles.cols-2 { grid-template-columns: 1fr; } }

/* ---------- Tile (square image + scroll-revealed details) ---------- */
.tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; cursor: pointer; background: var(--ink); isolation: isolate; transform: translateZ(0); }
.tile .tile-img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); transition: transform 1.2s var(--easing), filter .6s var(--easing); filter: saturate(.85) contrast(1.05); }
.tile .tile-duo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.88) 100%); mix-blend-mode: normal; transition: background .4s var(--easing); z-index: 2; }
.tile.light .tile-duo { background: linear-gradient(180deg, rgba(10,10,10,.10) 0%, rgba(10,10,10,.42) 50%, rgba(10,10,10,.82) 100%); }
.tile .tile-accent-overlay { position: absolute; inset: 0; background: var(--tile-accent, var(--accent)); mix-blend-mode: multiply; opacity: 0.18; transition: opacity .5s var(--easing); z-index: 3; }
.tile .tile-body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 28px 26px; z-index: 4; color: #fff; }
.tile .tile-pills { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; margin-bottom: auto; }
.tile .tile-tag { background: var(--accent); color: #0A0A0A; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 7px 11px; border-radius: 2px; }
.tile .tile-seek { background: #0A0A0A; color: var(--accent); font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 7px 11px; border-radius: 2px; border: 1px solid var(--accent); }
.tile .tile-title { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.04; letter-spacing: -0.01em; margin-bottom: 14px; max-width: 16ch; }
.tile .tile-rule { width: 48px; height: 2px; background: var(--tile-accent, var(--accent)); margin-bottom: 14px; transform-origin: left; }
.tile .tile-outcome { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.88); max-width: 36ch; margin-bottom: 20px; }
.tile .tile-cta { display: inline-flex; align-items: center; gap: 10px; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; }
.tile .tile-cta::after { content: '→'; transition: transform .3s var(--easing); }
.tile:hover .tile-img { transform: scale(1.07); filter: saturate(1) contrast(1.08); }
.tile:hover .tile-accent-overlay { opacity: 0.34; }
.tile:hover .tile-cta::after { transform: translateX(6px); }
.tile:focus-visible { outline: 2px solid var(--tile-accent, var(--accent)); outline-offset: 4px; }

/* ---------- Cream tile variant (projects grid on dark section) ---------- */
.tile.cream { background: var(--bone); color: var(--fg-light); }
.tile.cream .tile-img { filter: saturate(.78) contrast(1.02) brightness(.98); opacity: .28; }
.tile.cream .tile-duo {
  background: linear-gradient(180deg, rgba(246,238,219,0) 0%, rgba(246,238,219,.40) 28%, rgba(246,238,219,.95) 68%, rgba(246,238,219,1) 100%);
}
.tile.cream .tile-accent-overlay { mix-blend-mode: multiply; opacity: .08; }
.tile.cream:hover .tile-accent-overlay { opacity: .16; }
.tile.cream:hover .tile-img { opacity: .44; transform: scale(1.06); }
.tile.cream .tile-body { color: var(--fg-light); }
.tile.cream .tile-title { color: var(--fg-light); font-size: clamp(26px, 2.6vw, 40px); }
.tile.cream .tile-outcome { color: var(--fg-light); opacity: .88; font-size: 18px; max-width: 40ch; }
.tile.cream .tile-cta { color: var(--fg-light); }
.tile.cream .tile-seek { background: transparent; color: var(--fg-light); border-color: var(--accent); }

/* Reveal starting state (GSAP drives the transition). When motion is reduced, we skip these. */
.motion-on .tile .tile-img     { opacity: 0; transform: scale(1.10); }
.motion-on .tile .tile-pills,
.motion-on .tile .tile-title,
.motion-on .tile .tile-outcome,
.motion-on .tile .tile-cta     { opacity: 0; transform: translateY(20px); }
.motion-on .tile .tile-rule    { transform: scaleX(0); }
.motion-on .hero .display > span,
.motion-on .hero .eyebrow      { opacity: 0; transform: translateY(24px); }

/* ---------- Contact panel (light theme, matches footer) ---------- */
.contact { padding: 140px 0 120px; }
.contact .sec-intro { padding-bottom: 0; }
.contact .sec-intro .display { font-size: clamp(44px, 7vw, 96px); max-width: 14ch; }
.contact .btn-row { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 18px 32px; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: transform .25s var(--easing), background .25s, color .25s, border-color .25s, box-shadow .25s; }
.btn-wa { background: #25D366; color: #0A0A0A; box-shadow: 0 6px 20px rgba(37,211,102,.22); }
.btn-wa:hover { background: #1da851; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,.30); }
.btn-em { background: transparent; color: inherit; border: 1px solid rgba(10,10,10,.22); }
.btn-em:hover { background: #0A0A0A; color: var(--bone); transform: translateY(-2px); }
.btn-li { width: 56px; height: 56px; padding: 0; justify-content: center; border: 1px solid rgba(10,10,10,.22); border-radius: 50%; }
.btn-li svg { width: 20px; height: 20px; }
.btn-li svg path { fill: currentColor; transition: fill .25s; }
.btn-li:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; transform: translateY(-2px); }

.contact-meta { margin-top: 64px; display: flex; gap: 48px; flex-wrap: wrap; font-size: 14px; color: var(--fg-light-m); }
.contact-meta strong { color: var(--fg-light); font-weight: 600; display: block; margin-bottom: 4px; font-family: 'DM Sans', sans-serif; letter-spacing: 0.1em; font-size: 11px; text-transform: uppercase; }

/* ---------- Footer (light theme) ---------- */
.site-footer { background: var(--bone); color: var(--fg-light-m); padding: 48px 0 56px; border-top: 1px solid var(--bone-line); }
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.site-footer .brand { display: inline-flex; align-items: center; font-family: 'DM Sans', sans-serif; font-weight: 700; letter-spacing: 0.16em; font-size: 13px; text-transform: uppercase; color: var(--fg-light); text-decoration: none; }
.site-footer .brand-mark { width: 38px; height: 38px; border: 1.5px solid currentColor; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0.04em; margin-right: 12px; }
.site-footer .copy { font-size: 12px; letter-spacing: 0.08em; }

/* ---------- Tile inline expand panel ---------- */
.tile-panel {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  border-radius: 4px;
  margin: 0;
  transition: max-height .45s var(--easing),
              opacity    .35s var(--easing),
              transform  .45s var(--easing),
              margin     .45s var(--easing);
}
.tile-panel.open {
  opacity: 1;
  transform: translateY(0);
  margin: -8px 0 8px;
}
.tile-panel .tp-inner {
  padding: clamp(24px, 3vw, 40px) clamp(28px, 4vw, 48px) clamp(28px, 3vw, 44px);
  padding-right: clamp(56px, 6vw, 72px); /* room for close button */
}
.tile-panel.dark  { background: var(--ink-soft); color: var(--fg-dark); }
.tile-panel.light { background: var(--bone);     color: var(--fg-light); }
.tile-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(28px, 4vw, 48px);
  width: 48px;
  height: 2px;
  background: var(--tile-accent, var(--accent));
}
.tile-panel .tp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tile-panel .tp-tag {
  display: inline-block;
  background: var(--tile-accent, var(--accent));
  color: #0A0A0A;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 2px;
}
.tile-panel .tp-seek {
  display: inline-block;
  background: transparent;
  color: var(--tile-accent, var(--accent));
  border: 1px solid var(--tile-accent, var(--accent));
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 2px;
}
.tile-panel .tp-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  max-width: none;
}
.tile-panel .tp-rule {
  width: 48px;
  height: 2px;
  background: var(--tile-accent, var(--accent));
  margin-bottom: 22px;
}
.tile-panel .tp-body {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: none;
}
.tile-panel.dark  .tp-body { color: var(--fg-dark-m); }
.tile-panel.light .tp-body { color: var(--fg-light-m); }
.tile-panel.dark  .tp-body strong { color: var(--fg-dark);  font-weight: 600; }
.tile-panel.light .tp-body strong { color: var(--fg-light); font-weight: 600; }
.tile-panel .tp-body ul { margin: 12px 0 18px; padding-left: 0; list-style: none; }
.tile-panel .tp-body ul li { position: relative; padding-left: 20px; margin: 8px 0; }
.tile-panel .tp-body ul li::before { content: ''; position: absolute; left: 0; top: 14px; width: 10px; height: 2px; background: var(--tile-accent, var(--accent)); }
.tile-panel .tp-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; }
.tile-panel .tp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 26px;
  border-radius: 2px;
  transition: transform .25s var(--easing), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.tile-panel .tp-btn-wa { background: #25D366; color: #0A0A0A; box-shadow: 0 6px 20px rgba(37,211,102,.22); }
.tile-panel .tp-btn-wa:hover { background: #1da851; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,.30); }
.tile-panel.dark  .tp-btn-sec { background: transparent; color: var(--fg-dark);  border: 1px solid rgba(255,255,255,.24); }
.tile-panel.light .tp-btn-sec { background: transparent; color: var(--fg-light); border: 1px solid rgba(10,10,10,.24); }
.tile-panel.dark  .tp-btn-sec:hover { background: var(--fg-dark);  color: var(--ink);  transform: translateY(-2px); }
.tile-panel.light .tp-btn-sec:hover { background: var(--fg-light); color: var(--bone); transform: translateY(-2px); }
.tile-panel .tp-btn-li {
  width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%;
}
.tile-panel .tp-btn-li svg { width: 18px; height: 18px; }
.tile-panel .tp-btn-li svg path { fill: currentColor; }
.tile-panel .tp-btn-li:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.tile-panel .tp-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  color: inherit;
  opacity: .4;
  transition: opacity .2s, transform .2s;
}
.tile-panel .tp-close:hover { opacity: 1; transform: rotate(90deg); }
.tile.tile-open .tile-accent-overlay { opacity: .38; }
@media (prefers-reduced-motion: reduce) {
  .tile-panel { transition: none; }
}

/* ---------- Custom cursor (desktop) ---------- */
.cursor { position: fixed; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); pointer-events: none; z-index: 999; transform: translate(-50%, -50%) scale(0); transition: transform .25s var(--easing), background .25s; mix-blend-mode: difference; }
.cursor.ring { width: 44px; height: 44px; background: transparent; border: 1px solid #fff; }
@media (hover: none), (max-width: 900px) { .cursor { display: none; } }
body.cursor-on .cursor { transform: translate(-50%, -50%) scale(1); }
body.cursor-tile .cursor { transform: translate(-50%, -50%) scale(3); mix-blend-mode: difference; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .motion-on .tile .tile-img,
  .motion-on .tile .tile-tag,
  .motion-on .tile .tile-title,
  .motion-on .tile .tile-outcome,
  .motion-on .tile .tile-cta,
  .motion-on .tile .tile-rule,
  .motion-on .hero .display > span,
  .motion-on .hero .eyebrow { opacity: 1 !important; transform: none !important; }
  .cursor { display: none; }
}

/* ---------- Utility ---------- */
.hidden-on-mobile { display: inline; }
@media (max-width: 640px) { .hidden-on-mobile { display: none; } }
.section + .section { border-top: 1px solid transparent; }