@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@400;500;600&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap');

:root {
  --charcoal: #2B2F2E;
  --concrete: #6B7070;
  --olive: #2F3A2F;
  --sand: #D6C3A3;
  --ink: #141716;
  --white: #FAFAF8;
  --border-sand: rgba(214,195,163,0.15);
  --border-sand-h: rgba(214,195,163,0.4);
  --overlay: rgba(27,29,28,0.72);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans',sans-serif;
  font-weight:300;
  font-size:18px;
  line-height:1.7;
  background:var(--ink);
  color:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
img { display:block; max-width:100%; }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--ink); }
::-webkit-scrollbar-thumb { background:rgba(214,195,163,0.3); border-radius:2px; }

/* ── BUTTONS ── */
.btn-primary {
  display:inline-block; font-family:'DM Mono',monospace;
  font-size:clamp(12px,1vw,14px); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink); background:var(--sand); padding:14px 34px;
  border:1px solid var(--sand); transition:all 0.45s ease; cursor:pointer;
}
.btn-primary:hover { background:transparent; color:var(--sand); transform:translateY(-2px); }

.btn-ghost {
  display:inline-block; font-family:'DM Mono',monospace;
  font-size:clamp(12px,1vw,14px); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--sand); background:transparent; padding:12px 28px;
  border:1px solid rgba(214,195,163,0.35); transition:all 0.45s ease; cursor:pointer;
}
.btn-ghost:hover { border-color:var(--sand); background:rgba(214,195,163,0.08); transform:translateY(-2px); }

/* ── EYEBROW (section labels) ── */
.eyebrow {
  font-family:'DM Mono',monospace;
  font-size:clamp(13px,1.1vw,15px);
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--concrete); display:flex; align-items:center; gap:14px; margin-bottom:24px;
}
.eyebrow::before { content:''; display:block; width:44px; height:1px; background:var(--sand); flex-shrink:0; }

/* ── LAYOUT ── */
.container { max-width:1200px; margin:0 auto; padding:0 clamp(20px,5vw,72px); }
.section { position:relative; }
.section-title {
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(40px,5vw,68px); color:var(--white); line-height:1.1;
}

/* ── SCROLL REVEAL - slowed down ── */
.reveal { opacity:0; transform:translateY(32px); transition:opacity 1.1s ease, transform 1.1s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:0.15s; }
.reveal-d2 { transition-delay:0.30s; }
.reveal-d3 { transition-delay:0.45s; }

/* ══════════════════
   INTRO SCREEN
══════════════════ */
#intro {
  position:fixed; inset:0; background:#141716; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  transition:opacity 1.2s ease;
}
#intro.out { opacity:0; pointer-events:none; }

.intro-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(214,195,163,0.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(214,195,163,0.04) 1px,transparent 1px);
  background-size:20px 20px; pointer-events:none;
}
.intro-rings {
  position:absolute; width:min(85vw,85vh); height:min(85vw,85vh);
  animation:spin 120s linear infinite; pointer-events:none;
}
@keyframes spin { to { transform:rotate(360deg); } }

#intro-content {
  text-align:center; position:relative; z-index:2; padding:0 24px;
  display:flex; flex-direction:column; align-items:center;
}

/* Phase 1 - source words */
#intro-phase1 { position:relative; opacity:0; transition:opacity 1.2s ease; }
#intro-phase1.v { opacity:1; }
#intro-phase1.out { opacity:0; transform:scale(0.88); transition:opacity 0.7s ease, transform 0.7s ease; }

#intro-transformation {
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(48px,9vw,100px); color:var(--white);
  opacity:0; transform:translateY(24px);
  transition:opacity 1.2s ease, transform 1.2s ease;
  letter-spacing:0.04em; line-height:1.05;
}
#intro-transformation.v { opacity:1; transform:translateY(0); }

#intro-dynamically {
  font-family:'Cormorant Garamond',serif; font-weight:300; font-style:italic;
  font-size:clamp(26px,5vw,54px); color:var(--sand);
  opacity:0; transform:translateY(14px);
  transition:opacity 1.2s ease 0.18s, transform 1.2s ease 0.18s;
  margin-top:8px; letter-spacing:0.04em;
}
#intro-dynamically.v { opacity:1; transform:translateY(0); }

/* Phase 2 - TRANSDYNE flies forward */
#intro-phase2 {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0.6);
  opacity:0; pointer-events:none;
  transition:opacity 0s, transform 0s; white-space:nowrap;
}
#intro-phase2.emerge {
  opacity:1; transform:translate(-50%,-50%) scale(1);
  transition:opacity 1.0s ease, transform 1.0s cubic-bezier(0.16,1,0.3,1);
}
#intro-phase2.settled { position:relative; top:auto; left:auto; transform:none; opacity:1; transition:none; }

#intro-wordmark { display:flex; align-items:center; justify-content:center; }

#i-tr, #i-ans, #i-dyne {
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(36px,7.5vw,88px); letter-spacing:0.18em;
  white-space:nowrap; color:var(--white);
  transition:opacity 0.6s ease, color 0.6s ease, text-shadow 0.6s ease;
}
#i-tr.dim   { opacity:0.12; }
#i-dyne.dim { opacity:0.12; }
#i-ans.glow { color:var(--sand); animation:ans-pulse 1.8s ease-in-out; }
@keyframes ans-pulse {
  0%,100% { text-shadow:0 0 0 transparent; }
  50%      { text-shadow:0 0 40px rgba(214,195,163,0.8), 0 0 80px rgba(214,195,163,0.4); }
}
#i-tr.restore   { opacity:1; transition:opacity 0.9s ease; }
#i-dyne.restore { opacity:1; transition:opacity 0.9s ease; }

/* Phase 3 - tagline */
#intro-tagline {
  margin-top:32px; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(18px,2.2vw,28px); color:rgba(214,195,163,0.62);
  opacity:0; transition:opacity 1.1s ease; letter-spacing:0.05em;
}
#intro-tagline.v { opacity:1; }

#skip-btn {
  position:fixed; top:24px; right:32px;
  font-family:'DM Mono',monospace; font-size:13px;
  color:var(--concrete); background:none; border:none;
  cursor:pointer; letter-spacing:0.1em; z-index:10000; transition:color 0.3s;
}
#skip-btn:hover { color:var(--sand); }

/* ══════════════════
   NAV
══════════════════ */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px clamp(20px,4vw,56px);
  display:flex; align-items:center; justify-content:space-between;
  transition:background 0.5s ease, padding 0.5s ease, border-color 0.5s ease;
  border-bottom:1px solid transparent;
}
#navbar.scrolled {
  background:rgba(43,47,46,0.95); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  padding:16px clamp(20px,4vw,56px); border-bottom-color:var(--border-sand);
}
.nav-logo { font-family:'DM Mono',monospace; font-size:clamp(14px,1.2vw,16px); letter-spacing:0.14em; color:var(--white); }
.nav-links { display:flex; align-items:center; gap:clamp(16px,2.5vw,36px); list-style:none; }
.nav-links a { font-family:'DM Mono',monospace; font-size:clamp(11px,0.9vw,13px); letter-spacing:0.1em; text-transform:uppercase; color:var(--concrete); transition:color 0.3s; }
.nav-links a:hover,.nav-links a.active { color:var(--white); }
.nav-right { display:flex; align-items:center; gap:20px; }
.hamburger { display:none; flex-direction:column; gap:6px; cursor:pointer; }
.hamburger span { display:block; width:24px; height:1px; background:var(--white); transition:all 0.4s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-menu { display:none; position:fixed; inset:0; background:var(--ink); z-index:99; flex-direction:column; align-items:center; justify-content:center; gap:36px; }
.mobile-menu.open { display:flex; }
.mobile-menu a { font-family:'DM Mono',monospace; font-size:15px; letter-spacing:0.15em; text-transform:uppercase; color:var(--concrete); transition:color 0.3s; }
.mobile-menu a:hover { color:var(--sand); }
@media(max-width:960px) {
  .nav-links { display:none; } .hamburger { display:flex; }
  #navbar { padding:18px 24px; } #navbar.scrolled { padding:14px 24px; }
}

/* ══════════════════
   HERO
══════════════════ */
.hero { position:relative; height:100vh; min-height:700px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.hero-bg-slides { position:absolute; inset:0; }
.hero-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease; }
.hero-slide.active { opacity:1; }
.hero-overlay { position:absolute; inset:0; background:var(--overlay); z-index:1; }
#particle-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; opacity:0.22; }

.hero-content {
  position:relative; z-index:3;
  padding:0 clamp(20px,5vw,72px); max-width:880px;
  margin-left:max(20px,calc((100vw - 1200px)/2));
}
.hero-quotes { position:relative; height:clamp(160px,20vw,240px); margin-bottom:28px; }
.hero-quote {
  position:absolute; inset:0; font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(30px,5vw,68px); line-height:1.12; color:var(--white); opacity:0; transition:opacity 0.9s ease;
}
.hero-quote.active { opacity:1; }
.hero-sub {
  font-family:'DM Sans',sans-serif; font-weight:300;
  font-size:clamp(16px,1.5vw,20px); color:rgba(214,195,163,0.75); margin-top:8px;
}
.hero-dots { position:absolute; bottom:120px; left:max(20px,calc((100vw - 1200px)/2)); display:flex; gap:10px; z-index:3; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--concrete); cursor:pointer; transition:background 0.4s, transform 0.4s; }
.dot.active { background:var(--sand); transform:scale(1.4); }

.stat-bar {
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  background:rgba(43,47,46,0.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--border-sand);
  padding:clamp(20px,2.5vw,36px) clamp(20px,4vw,56px);
  display:flex; align-items:center; justify-content:space-around; flex-wrap:wrap; gap:20px;
}
.stat-item { text-align:center; }
.stat-num { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(32px,4.5vw,58px); color:var(--sand); line-height:1; }
.stat-label { font-family:'DM Mono',monospace; font-size:clamp(12px,1vw,14px); letter-spacing:0.14em; text-transform:uppercase; color:rgba(214,195,163,0.7); margin-top:7px; }
.stat-div { width:1px; height:44px; background:var(--border-sand); flex-shrink:0; }

/* ══════════════════
   INDUSTRIES
══════════════════ */
.industries-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:48px; }
.industry-tile { position:relative; min-height:360px; overflow:hidden; cursor:pointer; }
.tile-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.85s cubic-bezier(0.25,0.46,0.45,0.94); }
.industry-tile:hover .tile-img { transform:scale(1.06); }
.tile-overlay { position:absolute; inset:0; background:rgba(27,29,28,0.62); transition:background 0.5s; }
.industry-tile:hover .tile-overlay { background:rgba(27,29,28,0.38); }
.tile-content { position:relative; z-index:2; padding:44px 36px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; }
.ind-icon { width:44px; height:44px; margin-bottom:18px; }
.tile-title { font-family:'Inter',sans-serif; font-weight:600; font-size:clamp(17px,1.6vw,22px); color:var(--white); margin-bottom:10px; }
.tile-desc { font-family:'DM Sans',sans-serif; font-weight:300; font-size:clamp(14px,1.2vw,17px); color:rgba(255,255,255,0.75); line-height:1.6; margin-bottom:16px; }
.tile-cta { font-family:'DM Mono',monospace; font-size:clamp(12px,1vw,14px); color:var(--sand); letter-spacing:0.12em; transition:letter-spacing 0.4s; }
.industry-tile:hover .tile-cta { letter-spacing:0.22em; }
@media(max-width:960px) { .industries-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px) { .industries-grid { grid-template-columns:1fr; } }

/* ══════════════════
   WHY TRANSDYNE
══════════════════ */
/* ===== WHY TRANSDYNE SECTION ===== */

.why-panels {
  display: flex;
  flex-direction: column;
}

.why-panel {
  position: relative;
  height: 460px;
  overflow: hidden;
  border-top: 1px solid rgba(214,195,163,0.15);
}

.why-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 1;
}

.why-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,15,15,0.92) 0%, rgba(15,15,15,0.75) 40%, rgba(15,15,15,0.35) 100%);
  z-index: 2;
}

.why-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
}

.why-left {
  max-width: 560px;
}

.why-num {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: rgba(214,195,163,0.6);
  margin-bottom: 12px;
}

.why-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--white, #f5f0e8);
  line-height: 1.2;
  margin-bottom: 14px;
}

.why-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: rgba(230,225,215,0.8);
  line-height: 1.5;
  margin-bottom: 20px;
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.why-list-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: rgba(214,195,163,0.85);
  line-height: 1.4;
}

.why-list-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  width: 14px;
  height: 14px;
}

/* Panels 5 & 6 — show full image, no cropping */
.why-panel:nth-child(5),
.why-panel:nth-child(6) {
  height: auto;
  min-height: 460px;
  padding: 50px 0;
}

.why-panel:nth-child(5) .why-bg,
.why-panel:nth-child(6) .why-bg {
  object-fit: cover;
  object-position: center 30%;
}

.why-panel:nth-child(5) .why-content,
.why-panel:nth-child(6) .why-content {
  height: auto;
  align-items: flex-start;
  padding: 10px 0;
}

@media (max-width: 768px) {
  .why-panel {
    height: auto;
    min-height: 420px;
    padding: 40px 0;
  }
  .why-title {
    font-size: 24px;
  }
  .why-desc {
    font-size: 14px;
  }
}
/* ══════════════════
   LOGO MARQUEE
══════════════════ */
.marquee-wrap { overflow:hidden; }
.marquee-track { display:flex; gap:3px; width:max-content; animation:marquee 52s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.logo-pill {
  display:flex; align-items:center; justify-content:center;
  padding:22px 44px; min-width:180px; background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06); cursor:pointer; position:relative; overflow:hidden; transition:border-color 0.4s, background 0.4s;
}
.logo-pill::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(214,195,163,0.08) 0%,transparent 70%); opacity:0; transition:opacity 0.5s; }
.logo-pill:hover { border-color:rgba(214,195,163,0.38); background:rgba(255,255,255,0.06); }
.logo-pill:hover::before { opacity:1; }
.logo-inner { display:flex; flex-direction:column; align-items:center; gap:10px; }
.logo-hex {
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  font-family:'DM Mono',monospace; font-size:14px; font-weight:500; color:var(--sand);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:rgba(214,195,163,0.06); transition:background 0.5s, transform 0.5s;
  animation:hex-pulse 3.5s ease-in-out infinite;
}
.logo-pill:hover .logo-hex { background:rgba(214,195,163,0.2); transform:scale(1.14) rotate(15deg); }
@keyframes hex-pulse { 0%,100%{box-shadow:0 0 0 rgba(214,195,163,0)} 50%{box-shadow:0 0 16px rgba(214,195,163,0.18)} }
.logo-inner span { font-family:'DM Mono',monospace; font-size:clamp(11px,0.9vw,13px); letter-spacing:0.16em; text-transform:uppercase; color:rgba(214,195,163,0.5); transition:color 0.4s; }
.logo-pill:hover .logo-inner span { color:rgba(214,195,163,0.9); }

/* Real client logo badge - white card so colourful/dark logos stay legible */
/* Real client logo — blends directly into dark background, no white card */
.logo-badge {
  width:auto; height:48px; display:flex; align-items:center; justify-content:center;
  transition:transform 0.5s, opacity 0.5s;
  opacity:0.85;
}
.logo-pill:hover .logo-badge { transform:scale(1.08); opacity:1; }
.logo-badge img { height:100%; width:auto; object-fit:contain; max-width:140px; }

/* ══════════════════
   PROCESS
══════════════════ */
.process-pretitle { font-family:'DM Mono',monospace; font-size:clamp(13px,1.1vw,15px); letter-spacing:0.18em; text-transform:uppercase; color:var(--concrete); text-align:center; margin-bottom:10px; }
.process-timeline { position:relative; display:flex; gap:0; margin-top:0; }
.process-line { position:absolute; top:26px; left:48px; right:48px; height:1px; background:rgba(214,195,163,0.3); }
.process-step { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 clamp(8px,1.5vw,20px); cursor:pointer; }
.process-node { width:52px; height:52px; border-radius:50%; border:1px solid var(--sand); background:transparent; display:flex; align-items:center; justify-content:center; position:relative; z-index:2; transition:background 0.5s, transform 0.5s; flex-shrink:0; }
.process-node span { font-family:'Cormorant Garamond',serif; font-size:clamp(16px,1.5vw,22px); color:var(--sand); transition:color 0.5s; }
.process-step:hover .process-node,.process-step.active .process-node { background:var(--sand); transform:scale(1.12); }
.process-step:hover .process-node span,.process-step.active .process-node span { color:var(--charcoal); }
.process-step-title { font-family:'Inter',sans-serif; font-weight:600; font-size:clamp(14px,1.2vw,17px); color:var(--charcoal); margin:16px 0 8px; }
.process-step-desc { font-family:'DM Sans',sans-serif; font-weight:300; font-size:clamp(13px,1.1vw,16px); color:var(--concrete); line-height:1.65; }
@media(max-width:768px) { .process-timeline{flex-direction:column;gap:32px} .process-line{display:none} .process-step{align-items:flex-start;text-align:left;flex-direction:row;gap:20px} }

/* ══════════════════
   PROJECTS (home rows)
══════════════════ */
.project-row { display:grid; grid-template-columns:55% 45%; min-height:500px; border-bottom:1px solid var(--border-sand); }
.project-row.even { grid-template-columns:45% 55%; }
.project-row.even .proj-img { order:2; }
.project-row.even .proj-content { order:1; }
.proj-img { position:relative; overflow:hidden; }
.proj-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94); }
.proj-img video { width:100%; height:100%; object-fit:cover; display:block; background:var(--charcoal); transition:transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94); }
.proj-img .proj-scroll-yt { width:100%; height:100%; background:var(--charcoal) center/cover no-repeat; transition:transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94); }
.proj-img .proj-scroll-yt iframe { width:100%; height:100%; border:0; display:block; }
.project-row:hover .proj-img img { transform:scale(1.05); }
.project-row:hover .proj-img video { transform:scale(1.05); }
.project-row:hover .proj-img .proj-scroll-yt { transform:scale(1.05); }
.proj-content { padding:clamp(36px,5vw,72px); display:flex; flex-direction:column; justify-content:center; background:var(--charcoal); }
.proj-tag { font-family:'DM Mono',monospace; font-size:clamp(12px,0.95vw,14px); letter-spacing:0.2em; color:var(--sand); margin-bottom:20px; }
.proj-name { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(28px,3.2vw,46px); color:var(--white); line-height:1.15; margin-bottom:18px; }
.proj-quote { font-family:'DM Sans',sans-serif; font-weight:300; font-style:italic; font-size:clamp(15px,1.4vw,19px); color:rgba(214,195,163,0.72); line-height:1.65; margin-bottom:26px; }
.proj-meta { font-family:'DM Mono',monospace; font-size:clamp(12px,1vw,15px); color:rgba(214,195,163,0.55); margin-bottom:32px; }
.proj-ctas { display:flex; gap:14px; flex-wrap:wrap; }
@media(max-width:900px) {
  .project-row,.project-row.even{grid-template-columns:1fr}
  .project-row.even .proj-img,.project-row.even .proj-content{order:unset}
  .proj-img{min-height:260px} .proj-content{padding:clamp(28px,5vw,52px)}
}

/* ══════════════════
   CTA SECTION
══════════════════ */
.cta-section { background:var(--olive); padding:clamp(80px,10vw,140px) 0; position:relative; overflow:hidden; }
.cta-grid-overlay { position:absolute; inset:0; background-image:linear-gradient(rgba(214,195,163,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(214,195,163,0.05) 1px,transparent 1px); background-size:20px 20px; pointer-events:none; }
.corner-bracket { position:absolute; width:32px; height:32px; pointer-events:none; }
.corner-bracket.tl{top:32px;left:32px} .corner-bracket.tr{top:32px;right:32px;transform:scaleX(-1)}
.corner-bracket.bl{bottom:32px;left:32px;transform:scaleY(-1)} .corner-bracket.br{bottom:32px;right:32px;transform:scale(-1)}
.corner-bracket::before { content:''; display:block; width:32px; height:32px; border-top:1px solid rgba(214,195,163,0.35); border-left:1px solid rgba(214,195,163,0.35); }
.cta-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(38px,5.5vw,74px); line-height:1.1; color:var(--white); margin-bottom:24px; }
.cta-body { font-family:'DM Sans',sans-serif; font-weight:300; font-size:clamp(16px,1.5vw,21px); color:rgba(250,250,248,0.72); max-width:520px; margin:0 auto 40px; }
.cta-phone { font-family:'DM Mono',monospace; font-size:clamp(13px,1.1vw,15px); color:rgba(214,195,163,0.65); margin-top:20px; letter-spacing:0.09em; }

/* ══════════════════
   FOOTER
══════════════════ */
footer { background:var(--ink); border-top:1px solid rgba(214,195,163,0.09); padding:clamp(56px,7vw,88px) 0 40px; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:clamp(32px,4vw,56px); margin-bottom:52px; }
.footer-brand { font-family:'Cormorant Garamond',serif; font-size:clamp(28px,2.5vw,38px); color:var(--sand); margin-bottom:12px; }
.footer-tagline { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(15px,1.3vw,19px); color:var(--concrete); margin-bottom:14px; }
.footer-meta { font-family:'DM Mono',monospace; font-size:clamp(12px,0.9vw,14px); color:rgba(107,112,112,0.6); letter-spacing:0.07em; line-height:1.9; }
.footer-col-title { font-family:'DM Mono',monospace; font-size:clamp(12px,0.9vw,14px); letter-spacing:0.22em; text-transform:uppercase; color:rgba(214,195,163,0.38); margin-bottom:22px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:14px; }
.footer-links a { font-family:'DM Mono',monospace; font-size:clamp(13px,1vw,15px); letter-spacing:0.08em; color:var(--concrete); transition:color 0.3s; }
.footer-links a:hover { color:var(--sand); }
.footer-contact { font-family:'DM Sans',sans-serif; font-weight:300; font-size:clamp(14px,1.2vw,16px); color:var(--concrete); line-height:2; }
.footer-bottom { border-top:1px solid rgba(214,195,163,0.06); padding-top:28px; display:flex; justify-content:space-between; }
.footer-bottom span { font-family:'DM Mono',monospace; font-size:clamp(12px,0.9vw,14px); color:rgba(107,112,112,0.5); letter-spacing:0.06em; }
@media(max-width:768px) { .footer-grid{grid-template-columns:1fr;gap:36px} .footer-bottom{flex-direction:column;gap:10px} }

/* ══════════════════
   ABOUT PAGE
══════════════════ */
.about-hero { position:relative; height:100vh; min-height:640px; display:flex; align-items:center; overflow:hidden; }
.about-slides { position:absolute; inset:0; }
.about-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease; }
.about-slide.active { opacity:1; }
.about-overlay { position:absolute; inset:0; background:rgba(27,29,28,0.70); }
.about-hero-content { position:relative; z-index:2; padding:0 clamp(20px,5vw,72px); max-width:860px; margin-left:max(20px,calc((100vw - 1200px)/2)); }
.about-hero-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(42px,6vw,82px); line-height:1.08; color:var(--white); margin-bottom:26px; }
.about-hero-sub { font-family:'DM Sans',sans-serif; font-weight:300; font-size:clamp(16px,1.5vw,21px); color:rgba(214,195,163,0.72); max-width:560px; line-height:1.75; }

.brand-story { background:var(--charcoal); padding:clamp(72px,9vw,120px) 0; }
.brand-story-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,7vw,96px); align-items:start; margin-top:48px; }
.brand-quote { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(18px,2.5vw,28px); line-height:1.5; color:var(--white);text-align: left; }
.brand-stats { display:flex; flex-direction:column; gap:30px; }
.brand-stat { border-top:1px solid var(--border-sand); padding-top:26px; }
.brand-stat-num { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(40px,4.5vw,60px); color:var(--sand); line-height:1; }
.brand-stat-label { font-family:'DM Mono',monospace; font-size:clamp(12px,1vw,14px); color:rgba(214,195,163,0.65); letter-spacing:0.14em; text-transform:uppercase; margin-top:7px; }
@media(max-width:768px) { .brand-story-grid{grid-template-columns:1fr;gap:48px} }

/* Leadership */
.leadership-section { background:var(--white); padding:clamp(72px,9vw,120px) 0; }
.leadership-section .eyebrow { color:var(--concrete); }
.leadership-section .section-title { color:var(--charcoal); }
.leadership-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:52px; }
.leader-card {
  background:var(--charcoal); padding:clamp(40px,4vw,64px) clamp(28px,3.5vw,48px);
  position:relative; overflow:hidden; min-height:300px; display:flex; flex-direction:column;
}
.leader-card::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(214,195,163,0.06) 0%,transparent 60%); opacity:0; transition:opacity 0.5s; }
.leader-card:hover::after { opacity:1; }
.leader-role { font-family:'DM Mono',monospace; font-size:clamp(11px,0.95vw,14px); letter-spacing:0.18em; text-transform:uppercase; color:var(--sand); margin-bottom:12px; }
.leader-name { font-family:'Inter',sans-serif; font-weight:600; font-size:clamp(20px,2vw,28px); color:var(--white); margin-bottom:10px; line-height:1.2; }
.leader-edu { font-family:'DM Mono',monospace; font-size:clamp(12px,1vw,14px); color:rgba(214,195,163,0.55); margin-bottom:22px; letter-spacing:0.07em; }
.leader-desc { font-family:'DM Sans',sans-serif; font-weight:300; font-size:clamp(14px,1.3vw,17px); color:rgba(214,195,163,0.75); line-height:1.8; }
@media(max-width:1100px) { .leadership-grid{grid-template-columns:repeat(2,1fr)} .leader-card{min-height:260px} }
@media(max-width:640px) { .leadership-grid{grid-template-columns:1fr} .leader-card{min-height:0} }

.mentor-banner {
  margin-top:3px; background:var(--charcoal); border-left:3px solid var(--sand);
  padding:clamp(36px,4vw,56px) clamp(32px,4vw,64px); position:relative; overflow:hidden;
}
.mentor-banner::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg,rgba(214,195,163,0.05) 0%,transparent 55%); }
.mentor-banner-role { font-family:'DM Mono',monospace; font-size:clamp(11px,0.95vw,14px); letter-spacing:0.18em; text-transform:uppercase; color:var(--sand); margin-bottom:12px; position:relative; }
.mentor-banner-name { font-family:'Inter',sans-serif; font-weight:600; font-size:clamp(22px,2.2vw,30px); color:var(--white); margin-bottom:8px; line-height:1.2; position:relative; }
.mentor-banner-edu { font-family:'DM Mono',monospace; font-size:clamp(12px,1vw,14px); color:rgba(214,195,163,0.55); margin-bottom:20px; letter-spacing:0.07em; position:relative; }
.mentor-banner-desc { font-family:'DM Sans',sans-serif; font-weight:300; font-size:clamp(14px,1.3vw,17px); color:rgba(214,195,163,0.8); line-height:1.85; max-width:900px; position:relative; }
@media(max-width:640px) { .mentor-banner { padding:32px 24px; } }

/* Values */
.values-section { background:var(--olive); padding:clamp(72px,9vw,120px) 0; position:relative; overflow:hidden; }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:52px; }
.value-card {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
  padding:clamp(40px,4vw,64px) clamp(28px,3.5vw,44px); min-height:220px;
  display:flex; flex-direction:column; transition:background 0.4s, border-color 0.4s;
}
.value-card:hover { background:rgba(255,255,255,0.09); border-color:rgba(214,195,163,0.3); }
.value-name { font-family:'Inter',sans-serif; font-weight:600; font-size:clamp(17px,1.7vw,23px); color:var(--white); margin-bottom:16px; }
.value-desc { font-family:'DM Sans',sans-serif; font-weight:300; font-size:clamp(14px,1.3vw,17px); color:rgba(250,250,248,0.7); line-height:1.8; }
@media(max-width:1100px) { .values-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px) { .values-grid{grid-template-columns:1fr} .value-card{min-height:0} }

/* ══════════════════
   PROJECTS PAGE
══════════════════ */
.page-hero { padding:clamp(120px,12vw,180px) 0 clamp(60px,7vw,96px); }
.page-hero-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(42px,5.5vw,74px); color:var(--white); margin-bottom:16px; }
.page-hero-sub { font-family:'DM Sans',sans-serif; font-weight:300; font-size:clamp(15px,1.4vw,19px); color:var(--concrete); margin-top:14px; max-width:540px; line-height:1.75; }
.filter-tabs { display:flex; gap:0; border-bottom:1px solid var(--border-sand); margin-bottom:52px; overflow-x:auto; }
.filter-tab { font-family:'DM Mono',monospace; font-size:clamp(12px,1vw,14px); letter-spacing:0.12em; text-transform:uppercase; padding:16px 28px; color:var(--concrete); background:none; border:none; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:color 0.3s, border-color 0.3s; }
.filter-tab:hover { color:var(--white); }
.filter-tab.active { color:var(--charcoal); border-bottom-color:var(--sand); }
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.proj-tile { background:var(--charcoal); overflow:hidden; cursor:pointer; }
.proj-tile-img { height:clamp(200px,18vw,260px); overflow:hidden; position:relative; }
.proj-tile-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.8s ease; }
.proj-tile:hover .proj-tile-img img { transform:scale(1.07); }

/* Multi-photo auto-rotating carousel inside each project tile */
.proj-tile-img img.tile-carousel-img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; z-index:0; transform:scale(1.06);
  transition: opacity 2.4s cubic-bezier(0.45,0,0.2,1), transform 9s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: opacity, transform;
}
.proj-tile-img img.tile-carousel-img.active { opacity:1; z-index:1; transform:scale(1); }
.proj-tile:hover .proj-tile-img img.tile-carousel-img.active { transform:scale(1.05); }
.tile-carousel-dots { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:2; }
.tile-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.35); transition:background 0.8s ease, transform 0.8s ease; }
.tile-dot.active { background:var(--sand); transform:scale(1.3); }
.proj-tile-body { padding:clamp(20px,2.5vw,34px); }
.proj-tile-tag { font-family:'DM Mono',monospace; font-size:clamp(11px,0.85vw,13px); letter-spacing:0.2em; text-transform:uppercase; color:var(--sand); margin-bottom:12px; }
.proj-tile-name { font-family:'Inter',sans-serif; font-weight:600; font-size:clamp(15px,1.4vw,19px); color:var(--white); margin-bottom:10px; transition:color 0.3s; }
.proj-tile:hover .proj-tile-name { color:var(--sand); }
.proj-tile-val { font-family:'DM Mono',monospace; font-size:clamp(12px,1vw,15px); color:rgba(214,195,163,0.6); margin-bottom:18px; }
@media(max-width:960px) { .projects-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px) { .projects-grid{grid-template-columns:1fr} }
.delivering-section { background:var(--ink); padding:clamp(60px,8vw,100px) 0; }
.delivering-item { display:flex; align-items:center; justify-content:space-between; padding:26px 0; border-bottom:1px solid rgba(214,195,163,0.08); gap:24px; flex-wrap:wrap; }
.del-name { font-family:'Inter',sans-serif; font-weight:500; font-size:clamp(15px,1.4vw,19px); color:var(--white); }
.del-tag { font-family:'DM Mono',monospace; font-size:clamp(12px,0.9vw,14px); letter-spacing:0.16em; text-transform:uppercase; color:var(--sand); }
.del-status { font-family:'DM Mono',monospace; font-size:clamp(12px,0.9vw,14px); color:var(--concrete); }

/* ══════════════════
   ESG PAGE
══════════════════ */
.esg-row { display:grid; grid-template-columns:1fr 1fr; min-height:480px; align-items:center; }
.esg-row.rev { direction:rtl; }
.esg-row.rev > * { direction:ltr; }
.esg-img-col { overflow:hidden; height:480px; }
.esg-img-col img { width:100%; height:100%; object-fit:cover; }
.esg-txt-col { padding:clamp(40px,5.5vw,88px); }
.esg-txt-col.dark { background:var(--charcoal); }
.esg-txt-col.light { background:var(--white); color:var(--charcoal); }
.esg-txt-col.light .eyebrow { color:var(--concrete); }
.esg-row-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(30px,3.2vw,48px); margin-bottom:18px; line-height:1.2; }
.esg-row-desc { font-family:'DM Sans',sans-serif; font-weight:300; font-size:clamp(15px,1.4vw,18px); color:var(--concrete); line-height:1.8; margin-bottom:16px; }
.esg-stat { font-family:'DM Mono',monospace; font-size:clamp(12px,1.1vw,15px); color:var(--sand); letter-spacing:0.1em; border-left:2px solid var(--sand); padding-left:14px; margin-top:18px; }
@media(max-width:768px) { .esg-row,.esg-row.rev{grid-template-columns:1fr;direction:ltr} .esg-img-col{height:240px} .esg-txt-col{padding:clamp(32px,5vw,56px) clamp(20px,4vw,40px)} }

/* ══════════════════
   CONNECT PAGE
══════════════════ */
.connect-hero { background:var(--charcoal); padding:clamp(140px,14vw,200px) 0 clamp(80px,9vw,120px); position:relative; overflow:hidden; }
.connect-hero-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(40px,5.5vw,74px); color:var(--white); margin-bottom:22px; }
.connect-hero-sub { font-family:'DM Sans',sans-serif; font-size:clamp(16px,1.5vw,21px); color:rgba(214,195,163,0.72); max-width:540px; line-height:1.75; }
.three-track-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:52px; }
.track-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); padding:clamp(36px,4vw,60px) clamp(28px,3.5vw,48px); transition:border-color 0.4s, background 0.4s; }
.track-card:hover { background:rgba(255,255,255,0.07); border-color:var(--border-sand); }
.track-label { font-family:'DM Mono',monospace; font-size:clamp(12px,1vw,14px); letter-spacing:0.2em; text-transform:uppercase; color:var(--sand); margin-bottom:14px; }
.track-headline { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(22px,2.2vw,32px); color:var(--white); margin-bottom:24px; line-height:1.3; }
.track-benefits { list-style:none; display:flex; flex-direction:column; gap:13px; }
.track-benefits li { font-family:'DM Sans',sans-serif; font-weight:300; font-size:clamp(14px,1.2vw,17px); color:rgba(214,195,163,0.65); display:flex; gap:12px; }
.track-benefits li::before { content:'→'; color:var(--sand); flex-shrink:0; font-family:'DM Mono',monospace; font-size:13px; }
@media(max-width:768px) { .three-track-grid{grid-template-columns:1fr} }
.register-section { background:var(--charcoal); padding:clamp(72px,9vw,120px) 0; }
.form-tabs { display:flex; gap:0; border-bottom:1px solid var(--border-sand); margin-bottom:52px; }
.form-tab { font-family:'DM Mono',monospace; font-size:clamp(12px,1vw,14px); letter-spacing:0.12em; text-transform:uppercase; padding:16px 32px; background:none; border:none; cursor:pointer; color:var(--concrete); border-bottom:2px solid transparent; transition:color 0.3s, border-color 0.3s; }
.form-tab.active { color:var(--sand); border-bottom-color:var(--sand); }
.form-panel { display:none; }
.form-panel.active { display:block; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3vw,40px) clamp(32px,5vw,68px); max-width:780px; }
.form-field { display:flex; flex-direction:column; }
.form-label { font-family:'DM Mono',monospace; font-size:clamp(11px,0.9vw,13px); letter-spacing:0.16em; text-transform:uppercase; color:rgba(214,195,163,0.6); margin-bottom:12px; }
.form-input { background:transparent; border:none; border-bottom:1px solid rgba(107,112,112,0.5); color:var(--white); font-family:'DM Sans',sans-serif; font-size:clamp(15px,1.3vw,18px); padding:12px 0; outline:none; transition:border-color 0.4s; }
.form-input:focus { border-bottom-color:var(--sand); }
.form-input::placeholder { color:rgba(107,112,112,0.35); }
select.form-input { cursor:pointer; }
select.form-input option { background:var(--charcoal); }
.form-success { display:none; background:rgba(47,58,47,0.5); border:1px solid var(--sand); padding:40px; margin-top:24px; }
.form-success.show { display:block; }
.form-submit-err { font-family:'DM Mono',monospace; font-size:13px; color:#e08a7d; margin-top:16px; min-height:1em; }
@media(max-width:600px) { .form-grid{grid-template-columns:1fr} }

/* ══════════════════
   CONTACT PAGE
══════════════════ */
.contact-split { display:grid; grid-template-columns:45% 55%; min-height:100vh; }
.contact-left { background:var(--charcoal); padding:clamp(80px,9vw,140px) clamp(28px,5vw,80px); display:flex; flex-direction:column; justify-content:center; }
.contact-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(34px,3.8vw,58px); color:var(--white); margin-bottom:52px; line-height:1.2; margin-top:48px; }
.contact-detail { margin-bottom:30px; }
.contact-detail-label { font-family:'DM Mono',monospace; font-size:clamp(12px,0.95vw,14px); letter-spacing:0.2em; text-transform:uppercase; color:var(--sand); margin-bottom:10px; }
.contact-detail-value { font-family:'DM Sans',sans-serif; font-weight:300; font-size:clamp(14px,1.3vw,17px); color:rgba(214,195,163,0.68); line-height:1.85; }
.contact-right { background:var(--white); padding:clamp(80px,9vw,140px) clamp(28px,5vw,80px); display:flex; flex-direction:column; justify-content:center; color:var(--charcoal); }
.contact-form-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(28px,2.8vw,40px); color:var(--charcoal); margin-bottom:44px; margin-top:48px; }
.contact-fields { display:flex; flex-direction:column; gap:30px; margin-bottom:38px; }
.contact-form .form-input { color:var(--charcoal); border-bottom-color:rgba(107,112,112,0.35); }
.contact-form .form-input:focus { border-bottom-color:var(--charcoal); }
.contact-form .form-label { color:var(--concrete); }
textarea.form-input { resize:vertical; min-height:110px; }
@media(max-width:900px) { .contact-split{grid-template-columns:1fr} .contact-left,.contact-right{padding:80px clamp(20px,5vw,48px)} }

/* ══════════════════
   TURNOVER CHART
══════════════════ */
.turnover-bars {
  display:flex; align-items:flex-end; gap:clamp(16px,3vw,40px);
  height:300px; border-bottom:1px solid var(--border-sand); padding-bottom:0;
}
.t-bar-group { display:flex; flex-direction:column; align-items:center; flex:1; height:100%; justify-content:flex-end; }
.t-bar-wrap { display:flex; align-items:flex-end; height:260px; width:100%; justify-content:center; }
.t-bar {
  width:100%; max-width:80px;
  height:var(--h,0px);
  background:rgba(214,195,163,0.25);
  border-top:2px solid rgba(214,195,163,0.5);
  position:relative; display:flex; align-items:flex-start; justify-content:center;
  transition:height 1.5s cubic-bezier(0.25,0.46,0.45,0.94);
}
.t-bar.t-bar-target { background:rgba(214,195,163,0.45); border-color:var(--sand); }
.t-bar span {
  font-family:'DM Mono',monospace; font-size:clamp(10px,0.85vw,12px);
  color:var(--sand); letter-spacing:0.06em; padding-top:8px; text-align:center; line-height:1.4;
}
.t-bar small { font-size:10px; color:rgba(214,195,163,0.6); }
.t-bar-label {
  font-family:'DM Mono',monospace; font-size:clamp(10px,0.85vw,12px);
  color:var(--concrete); letter-spacing:0.08em; margin-top:12px; white-space:nowrap;
}
@media(max-width:600px) { .turnover-bars { gap:8px; } .t-bar { max-width:40px; } .t-bar span { font-size:9px; } }

/* ══════════════════
   PROJECT DESC
══════════════════ */
.proj-desc {
  font-family:'DM Sans',sans-serif; font-weight:300;
  font-size:clamp(13px,1.2vw,16px); color:rgba(214,195,163,0.58); line-height:1.7; margin-bottom:20px;
}

/* ══════════════════
   CAREERS PAGE
══════════════════ */
.careers-hero { background:var(--charcoal); padding:clamp(140px,14vw,200px) 0 clamp(80px,9vw,120px); position:relative; overflow:hidden; }
.careers-hero-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(40px,5.5vw,74px); color:var(--white); margin-bottom:20px; }
.careers-hero-sub { font-family:'DM Sans',sans-serif; font-size:clamp(16px,1.5vw,21px); color:rgba(214,195,163,0.72); max-width:560px; line-height:1.75; }

.why-join-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:52px; }
.why-join-card {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07);
  padding:clamp(36px,4vw,56px) clamp(28px,3.5vw,44px);
  transition:background 0.4s, border-color 0.4s;
}
.why-join-card:hover { background:rgba(255,255,255,0.07); border-color:var(--border-sand); }
.why-join-icon { font-size:28px; margin-bottom:18px; }
.why-join-title { font-family:'Inter',sans-serif; font-weight:600; font-size:clamp(16px,1.5vw,20px); color:var(--white); margin-bottom:12px; }
.why-join-desc { font-family:'DM Sans',sans-serif; font-weight:300; font-size:clamp(14px,1.2vw,16px); color:rgba(214,195,163,0.65); line-height:1.75; }
@media(max-width:768px) { .why-join-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:480px) { .why-join-grid { grid-template-columns:1fr; } }

.roles-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:3px; margin-top:52px; }
.role-card {
  background:var(--charcoal); padding:clamp(32px,3.5vw,52px) clamp(24px,3vw,44px);
  position:relative; overflow:hidden; cursor:pointer;
  transition:background 0.4s;
}
.role-card:hover { background:#323737; }
.role-card::after {
  content:''; position:absolute; top:0; left:0; width:3px; height:100%;
  background:var(--sand); transform:scaleY(0); transform-origin:bottom;
  transition:transform 0.4s ease;
}
.role-card:hover::after { transform:scaleY(1); }
.role-dept { font-family:'DM Mono',monospace; font-size:clamp(11px,0.9vw,13px); letter-spacing:0.18em; text-transform:uppercase; color:var(--sand); margin-bottom:10px; }
.role-title { font-family:'Inter',sans-serif; font-weight:600; font-size:clamp(17px,1.7vw,22px); color:var(--white); margin-bottom:8px; }
.role-location { font-family:'DM Mono',monospace; font-size:clamp(12px,1vw,14px); color:var(--concrete); margin-bottom:16px; }
.role-desc { font-family:'DM Sans',sans-serif; font-weight:300; font-size:clamp(14px,1.2vw,16px); color:rgba(214,195,163,0.62); line-height:1.7; }
.role-apply { display:inline-block; font-family:'DM Mono',monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--sand); margin-top:20px; transition:letter-spacing 0.3s; }
.role-card:hover .role-apply { letter-spacing:0.2em; }
@media(max-width:768px) { .roles-grid { grid-template-columns:1fr; } }

.apply-section { background:var(--charcoal); padding:clamp(72px,9vw,120px) 0; }
.apply-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3vw,40px) clamp(32px,5vw,64px); max-width:800px; margin-top:52px; }
@media(max-width:600px) { .apply-grid { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════════════════
   TRANSDYNE  –  Auth + Behaviour Tracking UI
   tracker.js  /  recommendations.js styles
   All class names are prefixed td- / tdm- / tdn- / tdr- to avoid clashes
═══════════════════════════════════════════════════════════════════════ */

/* ── NAV WIDGET ──────────────────────────────────────────────────────── */
#td-nav-widget {
  display: flex;
  align-items: center;
  margin-right: 14px;
}

/* Sign-In button (logged out) */
.tdn-signin {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sand);
  background: transparent;
  border: 1px solid rgba(214,195,163,0.28);
  padding: 7px 18px;
  cursor: pointer;
  transition: border-color .25s, background .25s;
  white-space: nowrap;
}
.tdn-signin:hover {
  border-color: rgba(214,195,163,0.7);
  background: rgba(214,195,163,0.06);
}

/* User pill (logged in) */
.tdn-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 6px 14px;
  border: 1px solid rgba(214,195,163,0.22);
  -webkit-user-select: none;
  user-select: none;
  transition: border-color .25s;
}
.tdn-pill:hover { border-color: rgba(214,195,163,0.5); }
.tdn-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sand);
  flex-shrink: 0;
}
.tdn-name {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--sand);
}
.tdn-chevron {
  font-size: 9px;
  color: var(--sand);
  opacity: .6;
}
.tdn-drop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 130px;
  background: var(--charcoal);
  border: 1px solid var(--border-sand);
  z-index: 600;
}
.tdn-drop.open { display: block; }
.tdn-drop-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--concrete);
  padding: 11px 16px;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.tdn-drop-item:hover {
  color: var(--white);
  background: rgba(255,255,255,0.04);
}

/* ── AUTH MODAL ──────────────────────────────────────────────────────── */
#td-auth-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
}
#td-auth-modal.tdm-open { display: flex; }

.tdm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,12,10,0.82);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.tdm-box {
  position: relative;
  z-index: 2;
  background: var(--charcoal);
  border: 1px solid rgba(214,195,163,0.22);
  width: min(440px, 94vw);
  padding: clamp(28px,5vw,52px);
  animation: tdm-in .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes tdm-in {
  from { opacity:0; transform:translateY(14px) scale(.97); }
  to   { opacity:1; transform:none; }
}
.tdm-close {
  position: absolute;
  top: 14px; right: 16px;
  font-size: 14px;
  line-height: 1;
  background: none;
  border: none;
  color: var(--concrete);
  cursor: pointer;
  transition: color .2s;
}
.tdm-close:hover { color: var(--white); }

.tdm-brand {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: .35em;
  color: var(--white);
  margin-bottom: 8px;
}
.tdm-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--concrete);
  line-height: 1.6;
  margin-bottom: 24px;
}

.tdm-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-sand);
  margin-bottom: 24px;
}
.tdm-tab {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 20px 10px;
  color: var(--concrete);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.tdm-tab.active { color: var(--sand); border-bottom-color: var(--sand); }

.tdm-panel { display: flex; flex-direction: column; gap: 15px; }
.tdm-hidden { display: none !important; }

.tdm-field { display: flex; flex-direction: column; gap: 5px; }
.tdm-field label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--concrete);
}
.tdm-opt { opacity: .5; font-size: 9px; }
.tdm-pwd-wrap { position: relative; }
.tdm-field input {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--white);
  background: var(--ink);
  border: 1px solid var(--border-sand);
  padding: 10px 14px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .2s;
}
.tdm-field input:focus { border-color: rgba(214,195,163,0.55); }
.tdm-field input::placeholder { color: rgba(255,255,255,0.18); }
.tdm-eye {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  font-size: 13px; cursor: pointer;
  opacity: .45; transition: opacity .2s;
  padding: 0;
}
.tdm-eye:hover { opacity: .9; }

.tdm-err {
  min-height: 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #e07070;
}
.tdm-btn {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sand);
  border: none;
  padding: 13px 24px;
  cursor: pointer;
  margin-top: 4px;
  transition: opacity .2s;
}
.tdm-btn:hover { opacity: .88; }
.tdm-btn:disabled { opacity: .45; cursor: not-allowed; }
.tdm-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--concrete);
  opacity: .65;
  line-height: 1.6;
  margin: 0;
}

/* ── PROJECTS-PAGE TILE INTEREST GLOW ────────────────────────────────── */
/* Tiles get these classes after the user has spent real time on them     */
.proj-tile.td-interest-high {
  border: 1px solid rgba(214,195,163,0.45);
  box-shadow: 0 0 28px rgba(214,195,163,0.07);
  position: relative;
}
.proj-tile.td-interest-high::after {
  content: 'Revisit';
  position: absolute;
  top: 10px; right: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sand);
  background: rgba(14,16,15,.82);
  border: 1px solid rgba(214,195,163,0.2);
  padding: 4px 10px;
  pointer-events: none;
  z-index: 2;
}
.proj-tile.td-interest-med {
  border: 1px solid rgba(214,195,163,0.2);
}

/* ── RECOMMENDATIONS SECTION ─────────────────────────────────────────── */
.tdr-section {
  position: relative;
  background: var(--ink);
  padding: 88px 0 80px;
  border-top: 1px solid var(--border-sand);
  border-bottom: 1px solid var(--border-sand);
  /* entry animation - starts invisible, slides up */
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .8s ease;
  overflow: hidden;
}
.tdr-section.tdr-visible {
  opacity: 1;
  transform: none;
}
.tdr-section.tdr-hiding {
  opacity: 0;
  max-height: 0 !important;
  padding: 0;
  overflow: hidden;
  transition: opacity .5s ease, max-height .6s ease, padding .5s ease;
}

/* Ambient background glow - purely decorative */
.tdr-ambient {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 300px;
  background: radial-gradient(ellipse at center,
    rgba(214,195,163,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.tdr-section .container { position: relative; z-index: 1; }

/* Header */
.tdr-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .7;
  margin-bottom: 12px;
}
.tdr-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(28px,4.5vw,50px);
  color: var(--white);
  letter-spacing: .02em;
  margin: 0 0 14px;
}
.tdr-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px,1.2vw,16px);
  color: var(--concrete);
  max-width: 540px;
  line-height: 1.75;
  margin: 0 0 52px;
}

/* Grid */
.tdr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px,1fr));
  gap: 2px;
  margin-bottom: 40px;
}

/* Card */
.tdr-card {
  background: var(--charcoal);
  opacity: 0;
  transform: translateY(18px);
  animation: tdr-card-in .55s ease forwards;
  transition: box-shadow .4s, transform .4s;
}
.tdr-section.tdr-visible .tdr-card {
  /* cards animate in staggered once section is visible */
  animation: tdr-card-in .55s ease forwards;
}
@keyframes tdr-card-in {
  to { opacity:1; transform:none; }
}
.tdr-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(214,195,163,0.18);
}

/* interest-level border accent */
.tdr-card[data-level="high"]   { border-left: 3px solid rgba(214,195,163,0.6); }
.tdr-card[data-level="medium"] { border-left: 3px solid rgba(214,195,163,0.3); }
.tdr-card[data-level="low"]    { border-left: 3px solid rgba(214,195,163,0.12); }

/* Image */
.tdr-img-wrap {
  position: relative;
  height: clamp(170px,15vw,230px);
  overflow: hidden;
}
.tdr-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.tdr-card:hover .tdr-img { transform: scale(1.06); }
.tdr-img-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(18,20,19,0.72) 100%
  );
}
.tdr-badge {
  position: absolute;
  top: 12px; left: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(14,16,15,.82);
  border: 1px solid rgba(214,195,163,0.18);
}
.tdr-badge-high   { color: var(--sand);              border-color: rgba(214,195,163,.45); }
.tdr-badge-medium { color: rgba(214,195,163,.7); }
.tdr-badge-low    { color: var(--concrete); }
.tdr-tag-overlay {
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* Body */
.tdr-body { padding: clamp(18px,2.5vw,30px); }
.tdr-name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(14px,1.3vw,17px);
  color: var(--white);
  margin-bottom: 9px;
  line-height: 1.35;
}
.tdr-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(13px,1.1vw,15px);
  color: rgba(214,195,163,0.5);
  line-height: 1.55;
  margin-bottom: 10px;
}
.tdr-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(12px,1vw,14px);
  color: var(--concrete);
  line-height: 1.65;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tdr-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}
.tdr-meta-item {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--concrete);
  opacity: .75;
}
.tdr-sep { color: var(--concrete); opacity: .3; font-size: 11px; }

/* Interest signal bar */
.tdr-bar-track {
  width: 100%;
  height: 2px;
  background: rgba(214,195,163,0.1);
  margin-bottom: 14px;
  border-radius: 1px;
  overflow: hidden;
}
.tdr-bar-fill {
  height: 100%;
  border-radius: 1px;
  transition: width 1s ease;
}

.tdr-val {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(214,195,163,0.5);
  margin-bottom: 18px;
}
.tdr-cta {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sand);
  text-decoration: none;
  border-bottom: 1px solid rgba(214,195,163,0.25);
  padding-bottom: 2px;
  display: inline-block;
  transition: border-color .2s, opacity .2s;
}
.tdr-cta:hover { border-color: var(--sand); }

/* Footer */
.tdr-foot {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.tdr-dismiss {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--concrete);
  opacity: .5;
  cursor: pointer;
  transition: opacity .2s;
}
.tdr-dismiss:hover { opacity: 1; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tdr-grid { grid-template-columns: 1fr; }
  #td-nav-widget { margin-right: 6px; }
  .tdn-signin { padding: 6px 11px; font-size: 10px; }
  .tdn-name { display: none; }
  .tdm-box { padding: 28px 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRANSDYNE - Project Detail Modal (customer-facing)
   project-detail.js styles. Prefix: tdp-
═══════════════════════════════════════════════════════════════════════════ */

/* Dynamic tile badge */
.td-dynamic-tile { position: relative; }
.td-dyn-badge {
  position: absolute;
  top: 10px; left: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sand);
  padding: 3px 9px;
  z-index: 2;
  pointer-events: none;
}
.td-dyn-dl-hint {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(214,195,163,0.6);
  margin-bottom: 10px;
}
.td-view-btn { display: inline-block; margin-top: 4px; }

/* ── MODAL SHELL ─────────────────────────────────────────────────────────── */
#tdp-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8500;
}
#tdp-modal.open { display: flex; }

.tdp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,10,9,0.82);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.tdp-drawer {
  position: relative;
  z-index: 2;
  margin-left: auto;
  width: min(780px, 96vw);
  height: 100vh;
  background: var(--ink);
  border-left: 1px solid rgba(214,195,163,0.12);
  display: flex;
  flex-direction: column;
  animation: tdp-in 0.3s cubic-bezier(0.16,1,0.3,1) both;
  overflow: hidden;
}
@keyframes tdp-in {
  from { transform: translateX(50px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.tdp-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(214,195,163,0.1);
  flex-shrink: 0;
  gap: 12px;
}
.tdp-head-left { display: flex; align-items: center; gap: 14px; }
.tdp-tag-line {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: 0.8;
}
.tdp-status {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid;
}
.tdp-status-ongoing   { color: #4ade80; border-color: rgba(74,222,128,0.3); }
.tdp-status-completed { color: var(--concrete); border-color: rgba(107,112,112,0.3); }
.tdp-status-closed    { color: #f87171; border-color: rgba(248,113,113,0.3); }

.tdp-close {
  background: none; border: none;
  color: var(--concrete); font-size: 16px;
  cursor: pointer; padding: 6px; line-height: 1;
  transition: color 0.2s; margin-left: auto;
}
.tdp-close:hover { color: var(--white); }

.tdp-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px 28px 48px;
  /* IE/Edge legacy: prefer autohiding scrollbar; Firefox supports 'scrollbar-width' */
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
@supports (scrollbar-color: auto) {
  .tdp-drawer-body {
    scrollbar-color: rgba(214,195,163,0.12) transparent;
  }
  .tdp-drawer-body::-webkit-scrollbar { width: 4px; }
  .tdp-drawer-body::-webkit-scrollbar-thumb { background: rgba(214,195,163,0.18); }
}

/* ── LOADING / ERROR ─────────────────────────────────────────────────────── */
.tdp-loading-state, .tdp-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 300px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--concrete);
}
.tdp-spinner {
  width: 28px; height: 28px;
  border: 2px solid rgba(214,195,163,0.15);
  border-top-color: var(--sand);
  border-radius: 50%;
  animation: tdp-spin 0.8s linear infinite;
}
@keyframes tdp-spin { to { transform: rotate(360deg); } }

/* ── CONTENT ─────────────────────────────────────────────────────────────── */
.tdp-proj-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(24px,4vw,40px);
  color: var(--white);
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  line-height: 1.2;
}
.tdp-proj-val {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(214,195,163,0.55);
  margin-bottom: 16px;
}
.tdp-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(15px,1.5vw,19px);
  color: rgba(214,195,163,0.5);
  line-height: 1.55;
  margin-bottom: 14px;
  border-left: 2px solid rgba(214,195,163,0.2);
  padding-left: 16px;
}
.tdp-proj-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px,1.2vw,15px);
  color: var(--concrete);
  line-height: 1.75;
  margin-bottom: 32px;
  max-width: 600px;
}

/* ── SECTION ─────────────────────────────────────────────────────────────── */
.tdp-section {
  margin-bottom: 40px;
}
.tdp-section-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: 0.7;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(214,195,163,0.08);
}

/* ── IMAGE GALLERY ───────────────────────────────────────────────────────── */
.tdp-gallery-main {
  width: 100%;
  background: var(--charcoal);
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
  min-height: 200px;
  max-height: clamp(260px, 38vw, 460px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tdp-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: clamp(260px, 38vw, 460px);
  display: block;
}
.tdp-img-placeholder {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--concrete);
  opacity: 0.5;
}
.tdp-gal-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.tdp-gal-btn {
  background: none;
  border: 1px solid rgba(214,195,163,0.2);
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  width: 36px; height: 36px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.tdp-gal-btn:hover:not(:disabled) {
  border-color: var(--sand);
  background: rgba(214,195,163,0.08);
}
.tdp-gal-btn:disabled { opacity: 0.25; cursor: default; }
.tdp-gal-counter {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--concrete);
  letter-spacing: 0.1em;
}
.tdp-strip-wrap {
  overflow-x: auto;
  -ms-overflow-style: none;
}
@supports (scrollbar-width: none) {
  .tdp-strip-wrap {
    scrollbar-width: none;
  }
}
.tdp-strip-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.tdp-gallery-strip {
  display: flex;
  gap: 3px;
  padding-bottom: 4px;
}
.tdp-thumb {
  width: 72px;
  height: 54px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.tdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tdp-thumb.active { border-color: var(--sand); }
.tdp-thumb:hover  { border-color: rgba(214,195,163,0.5); }

/* ── VIDEO ───────────────────────────────────────────────────────────────── */
.tdp-video {
  width: 100%;
  max-height: 400px;
  background: #000;
  display: block;
}
.tdp-media-name {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--concrete);
  margin-top: 6px;
  opacity: 0.6;
}

/* ── DOWNLOADS ───────────────────────────────────────────────────────────── */
.tdp-dl-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--concrete);
  margin-bottom: 14px;
  opacity: 0.8;
}
.tdp-dl-list { display: flex; flex-direction: column; gap: 2px; }
.tdp-dl-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--charcoal);
  border: 1px solid rgba(214,195,163,0.1);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.tdp-dl-item:hover {
  border-color: rgba(214,195,163,0.35);
  background: rgba(43,47,46,0.9);
}
.tdp-dl-icon { font-size: 22px; text-align: center; }
.tdp-dl-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 3px;
}
.tdp-dl-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--concrete);
}
.tdp-dl-arrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--sand);
  white-space: nowrap;
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.tdp-cta {
  padding-top: 28px;
  border-top: 1px solid rgba(214,195,163,0.08);
  margin-top: 8px;
}

/* ── UTIL ────────────────────────────────────────────────────────────────── */
.tdp-hidden { display: none !important; }

@media (max-width: 600px) {
  .tdp-drawer { width: 100vw; border-left: none; }
  .tdp-drawer-head { padding: 14px 18px; }
  .tdp-drawer-body { padding: 20px 18px 40px; }
  .tdp-dl-item { grid-template-columns: 28px 1fr; }
  .tdp-dl-arrow { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRANSDYNE - Behavioural Engagement Nudges (engage.js)
   All nudge styles. Prefix: tde-
   Design: matches site exactly - dark background, sand accents, DM Mono text
═══════════════════════════════════════════════════════════════════════════ */

/* ── SHARED NUDGE BASE ───────────────────────────────────────────────── */
.tde-nudge { box-sizing: border-box; }

/* shared buttons */
.tde-btn-pri {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sand);
  border: 1px solid var(--sand);
  padding: 10px 20px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s;
  white-space: nowrap;
}
.tde-btn-pri:hover { opacity: .85; }

.tde-btn-sec {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sand);
  background: transparent;
  border: 1px solid rgba(214,195,163,.3);
  padding: 10px 20px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  white-space: nowrap;
}
.tde-btn-sec:hover { border-color: var(--sand); }

.tde-btn-ghost {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--concrete);
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s;
  padding: 10px 0;
  white-space: nowrap;
}
.tde-btn-ghost:hover { color: var(--white); }

.tde-nudge-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none;
  border: none;
  color: var(--concrete);
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
  transition: color .2s;
  padding: 4px;
}
.tde-nudge-close:hover { color: var(--white); }

.tde-nudge-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .75;
  margin-bottom: 8px;
}
.tde-nudge-msg {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--white);
  line-height: 1.6;
  margin-bottom: 16px;
}
.tde-nudge-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.tde-sep { color: var(--concrete); opacity: .4; }

/* ── CORNER CARD (warm + hot) ────────────────────────────────────────── */
.tde-corner-card {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 7000;
  width: min(340px, calc(100vw - 32px));
  background: var(--charcoal);
  border: 1px solid rgba(214,195,163,.22);
  padding: 24px 22px 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.tde-corner-card.tde-hot {
  border-color: rgba(214,195,163,.45);
  box-shadow: 0 12px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(214,195,163,.12);
}
.tde-nudge-stats {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--concrete);
  letter-spacing: .08em;
  margin-bottom: 14px;
}
.tde-nudge-phone {
  margin-top: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--concrete);
  letter-spacing: .06em;
}
.tde-nudge-phone a {
  color: var(--sand);
  text-decoration: none;
  border-bottom: 1px solid rgba(214,195,163,.3);
}

/* ── TOP BANNER (hot_contact_push) ───────────────────────────────────── */
.tde-top-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 7500;
  background: var(--charcoal);
  border-bottom: 1px solid rgba(214,195,163,.22);
}
.tde-banner-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.tde-banner-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sand);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(214,195,163,.5);
  animation: tde-dot-pulse 2s ease-in-out infinite;
}
@keyframes tde-dot-pulse {
  0%,100% { box-shadow: 0 0 6px rgba(214,195,163,.5); }
  50%      { box-shadow: 0 0 14px rgba(214,195,163,.9); }
}
.tde-banner-text {
  flex: 1;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--concrete);
  line-height: 1.5;
}
.tde-banner-cta {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sand);
  text-decoration: none;
  border: 1px solid rgba(214,195,163,.3);
  padding: 7px 16px;
  transition: border-color .2s;
  white-space: nowrap;
}
.tde-banner-cta:hover { border-color: var(--sand); }
.tde-banner-close {
  background: none; border: none;
  color: var(--concrete); font-size: 13px;
  cursor: pointer; padding: 4px;
  transition: color .2s; flex-shrink: 0;
}
.tde-banner-close:hover { color: var(--white); }

/* ── INLINE STRIP (after hero) ───────────────────────────────────────── */
.tde-inline-strip,
.tde-return-strip {
  background: var(--charcoal);
  border-top: 1px solid rgba(214,195,163,.12);
  border-bottom: 1px solid rgba(214,195,163,.12);
  padding: 28px 0;
}
.tde-return-strip { background: var(--ink); }
.tde-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.tde-strip-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .65;
  margin-bottom: 6px;
}
.tde-strip-headline {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--white);
  line-height: 1.5;
}
.tde-strip-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── EXIT INTENT OVERLAY ─────────────────────────────────────────────── */
.tde-exit-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tde-exit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,10,9,.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.tde-exit-box {
  position: relative;
  z-index: 2;
  background: var(--charcoal);
  border: 1px solid rgba(214,195,163,.22);
  width: min(520px, 92vw);
  padding: clamp(28px, 5vw, 52px);
  animation: tde-exit-in .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes tde-exit-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.tde-exit-close {
  top: 14px; right: 16px;
}
.tde-exit-brand {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: .35em;
  color: var(--white);
  margin-bottom: 16px;
}
.tde-exit-headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 14px;
  letter-spacing: .01em;
}
.tde-exit-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--concrete);
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 440px;
}
.tde-exit-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tde-exit-trust {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--concrete);
  opacity: .55;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid rgba(214,195,163,.08);
  padding-top: 16px;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .tde-corner-card { bottom: 16px; right: 16px; width: calc(100vw - 32px); }
  .tde-strip-inner { flex-direction: column; align-items: flex-start; }
  .tde-exit-box { padding: 28px 20px; }
}