:root{
  --ink:#F6F3EE;
  --ink-dim:#91A2AF;
  --bg:#262626;
  --ember:#CB410B;
  --ember-deep:#B84626;
  --steel:#91A2AF;
  --moss:#91A2AF;
  --glass-bg:rgba(38,38,38,0.42);
  --glass-border:rgba(246,243,238,0.14);
}

*{ box-sizing:border-box; }

html{ background:var(--bg); scroll-behavior:auto; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--ember); color:#262626; }

/* ---------- Accessibility / SEO helpers ---------- */
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--ink);
  color:#262626;
  padding:10px 16px;
  border-radius:0 0 10px 0;
  font-size:13px;
  text-decoration:none;
}
.skip-link:focus{ left:0; }

/* ---------- Top glass bar ---------- */
.topbar{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  width:min(94vw, 1180px);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 9px 9px 14px;
  border-radius:999px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 8px 30px rgba(0,0,0,0.35);
}
/* backdrop-filter over a continuously-changing canvas is one of the more
   GPU-hungry things a mobile compositor can be asked to do every frame —
   a lighter blur here costs almost nothing visually but noticeably less
   while the video is playing underneath. */
@media (max-width:820px){
  .topbar{
    -webkit-backdrop-filter:blur(11px);
    backdrop-filter:blur(11px);
  }
}

.wordmark{
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}

/* Cropped tight to the hand-mark square already — plain object-fit cover,
   no manual offsets, so nothing is ever cut off on any screen. */
.brandmark{
  position:relative;
  display:block;
  width:28px;
  height:28px;
  flex:none;
  border-radius:8px;
  overflow:hidden;
  background:#262626;
  box-shadow:
    0 0 0 1px rgba(246,243,238,0.16),
    0 0 14px 1px rgba(203,65,11,0.35);
  transition:box-shadow 0.35s ease, transform 0.35s ease;
}
.brandmark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.wordmark:hover .brandmark{
  transform:translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(246,243,238,0.28),
    0 0 20px 2px rgba(203,65,11,0.55);
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.segmented{
  position:relative;
  display:flex;
  align-items:center;
  gap:0;
}
.segmented button,
.nav-contact-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  border:none;
  background:transparent;
  color:var(--ink-dim);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:500;
  letter-spacing:0.01em;
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  transition:color 0.3s ease, background-color 0.3s ease;
  white-space:nowrap;
}
.segmented button::after{
  content:"";
  position:absolute;
  left:12px; right:12px;
  bottom:5px;
  height:1px;
  background:var(--ember);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform 0.35s cubic-bezier(.22,1,.36,1), opacity 0.35s ease;
  opacity:0;
}
.segmented button:hover{ color:var(--ink); background-color:rgba(255,255,255,0.05); }
.segmented button.active{ color:var(--ink); }
.segmented button.active::after{ transform:scaleX(1); opacity:1; }
/* Contact us is a real link to another page, not a "you are here" scroll
   target — it deliberately skips the active/underline treatment so it
   reads as an action, not a position indicator. */
.nav-contact-link{ margin-left:2px; }
.nav-contact-link:hover{ color:var(--ink); background-color:rgba(255,255,255,0.05); }

/* ---------- Shared pill buttons (topbar auth + manifesto CTA) ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.01em;
  padding:9px 18px;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.btn-ghost{
  color:var(--ink-dim);
  border-color:rgba(246,243,238,0.2);
  background:transparent;
}
.btn-ghost:hover{ color:var(--ink); border-color:rgba(246,243,238,0.4); background:rgba(255,255,255,0.05); }
.btn-solid{
  color:#1a1002;
  background:linear-gradient(100deg, #F6F3EE, var(--ember) 75%);
  box-shadow:0 4px 18px rgba(203,65,11,0.28);
}
.btn-solid:hover{ transform:translateY(-1px); box-shadow:0 6px 22px rgba(203,65,11,0.4); }
.btn-sm{ padding:7px 15px; font-size:12.5px; }
.btn-lg{ padding:12px 26px; font-size:14px; }

.topbar-auth{
  display:flex;
  align-items:center;
  gap:8px;
  padding-left:10px;
  margin-left:2px;
  border-left:1px solid rgba(246,243,238,0.14);
}

@media (max-width:860px){
  .segmented button, .nav-contact-link{ padding:9px 10px; font-size:12.5px; }
  .wordmark{ font-size:14px; }
  .topbar-right{ gap:6px; }
  .topbar-auth{ padding-left:8px; gap:6px; }
}

/* ---------- Hamburger (mobile only) ---------- */
.hamburger{
  display:none;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex:none;
  border:none;
  background:transparent;
  border-radius:999px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hamburger:hover{ background:rgba(255,255,255,0.06); }
.hamburger-box{ position:relative; width:18px; height:13px; display:block; }
.hamburger-line{
  position:absolute;
  left:0;
  width:100%;
  height:1.5px;
  border-radius:1px;
  background:var(--ink);
  transition:transform 0.35s cubic-bezier(.22,1,.36,1), opacity 0.25s ease, top 0.35s cubic-bezier(.22,1,.36,1);
}
.hamburger-line:nth-child(1){ top:0; }
.hamburger-line:nth-child(2){ top:50%; margin-top:-0.75px; }
.hamburger-line:nth-child(3){ top:100%; margin-top:-1.5px; }
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(1){ top:50%; margin-top:-0.75px; transform:rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(3){ top:50%; margin-top:-0.75px; transform:rotate(-45deg); }

/* ---------- Mobile slide-in menu ---------- */
.mobile-menu-scrim{
  position:fixed;
  inset:0;
  z-index:140;
  background:rgba(6,5,4,0.62);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.4s ease;
}
.mobile-menu-scrim.is-open{ opacity:1; pointer-events:auto; }

.mobile-menu{
  position:fixed;
  top:0;
  right:0;
  z-index:150;
  width:min(82vw, 336px);
  height:100svh;
  height:100dvh;
  background:#292929;
  border-left:1px solid rgba(246,243,238,0.1);
  box-shadow:-24px 0 60px rgba(0,0,0,0.5);
  padding:96px 30px 32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transform:translateX(100%);
  transition:transform 0.45s cubic-bezier(.22,1,.36,1);
}
.mobile-menu.is-open{ transform:translateX(0); }

.mobile-menu-nav{ display:flex; flex-direction:column; }
.mobile-menu-link{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:15px 2px;
  border:none;
  background:transparent;
  border-bottom:1px solid rgba(246,243,238,0.08);
  color:var(--ink);
  font-family:var(--font-head);
  font-style:italic;
  font-size:1.3rem;
  font-weight:400;
  text-decoration:none;
  cursor:pointer;
  text-align:left;
  transition:color 0.25s ease, transform 0.25s ease;
}
.mobile-menu-link:hover, .mobile-menu-link:active{ color:var(--moss); transform:translateX(4px); }
.mobile-menu-num{
  font-family:var(--font-body);
  font-style:normal;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--ink-dim);
}
.mobile-menu-auth{ display:flex; flex-direction:column; gap:12px; }
.mobile-menu-auth .btn{ width:100%; padding:13px; font-size:14px; }

@media (max-width:640px), (max-height:500px) and (orientation:landscape){
  .segmented, .topbar-auth{ display:none; }
  .hamburger{ display:flex; }
  .wordmark-text{ display:none; }
  .topbar{ padding:7px 7px 7px 11px; }
}
@media (min-width:641px) and (min-height:501px){
  .mobile-menu, .mobile-menu-scrim{ display:none !important; }
}

/* ---------- Loading screen ---------- */
.loader{
  position:fixed;
  inset:0;
  z-index:500;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity 0.8s cubic-bezier(.22,1,.36,1);
}
.loader.done{ opacity:0; pointer-events:none; }
.loader-inner{
  width:min(78vw, 300px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.loader-mark{
  position:relative;
  display:block;
  width:52px;
  height:52px;
  border-radius:14px;
  overflow:hidden;
  background:#262626;
  box-shadow:0 0 0 1px rgba(246,243,238,0.14), 0 0 34px 2px rgba(203,65,11,0.28);
  animation:mark-breathe 2.6s ease-in-out infinite;
}
.loader-mark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
@keyframes mark-breathe{
  0%,100%{ box-shadow:0 0 0 1px rgba(246,243,238,0.14), 0 0 26px 1px rgba(203,65,11,0.22); }
  50%    { box-shadow:0 0 0 1px rgba(246,243,238,0.22), 0 0 44px 4px rgba(203,65,11,0.5); }
}
.loader-label{
  font-family:var(--font-head);
  font-style:italic;
  font-weight:500;
  font-size:1.15rem;
  color:var(--ink);
  margin:22px 0 26px;
  letter-spacing:0.01em;
}
.loader-track{
  position:relative;
  width:100%;
  height:1px;
  background:rgba(246,243,238,0.14);
  overflow:hidden;
}
.loader-fill{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(203,65,11,0.5), var(--ember) 60%, #F6F3EE);
  box-shadow:0 0 14px 1px rgba(203,65,11,0.7);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 0.35s cubic-bezier(.22,1,.36,1);
}
.loader-meta{
  width:100%;
  display:flex;
  justify-content:space-between;
  margin:14px 0 0;
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
body.is-loading{ overflow:hidden; height:100%; }
body.menu-open{ overflow:hidden; }
body.is-loading .topbar{ opacity:0; transform:translateX(-50%) translateY(-10px); }
.topbar{ transition:opacity 0.7s ease 0.15s, transform 0.7s cubic-bezier(.22,1,.36,1) 0.15s; }

/* ---------- Scroll-driven canvas stage ---------- */
.scroll-stage{
  position:relative;
  height:460vh;
}
.stage-sticky{
  position:sticky;
  top:0;
  /* svh is the safe fallback for browsers without dvh support. dvh tracks
     the *actual current* visible viewport, so this sticky layer keeps
     filling the screen as the mobile browser's address bar collapses on
     the first scroll — with svh alone it stays sized to the smallest
     (address-bar-visible) viewport, leaving a gap of bare background at
     the bottom the instant the chrome hides. */
  height:100svh;
  height:100dvh;
  width:100%;
  overflow:hidden;
  background:#000;
}
#stageCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  transition:opacity 0.5s ease;
}
.stage-scrim{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.06) 20%, rgba(0,0,0,0.18) 52%, rgba(0,0,0,0.80) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0) 78%);
}

/* ---------- Story captions (now a real text column, not a centred line) ---------- */
.caption{
  position:absolute;
  left:clamp(20px, 6vw, 96px);
  bottom:clamp(96px, 15vh, 168px);
  width:min(88vw, 640px);
  text-align:left;
  opacity:0;
  pointer-events:none;
  will-change:opacity, transform;
}
.cap-eyebrow{
  margin:0 0 14px;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ember);
  text-shadow:0 1px 14px rgba(0,0,0,0.8);
}
.cap-title{
  margin:0 0 18px;
  font-family:var(--font-head);
  font-weight:400;
  font-size:clamp(1.55rem, 3.5vw, 2.75rem);
  line-height:1.14;
  letter-spacing:-0.015em;
  color:var(--ink);
  text-shadow:0 2px 26px rgba(0,0,0,0.75);
  max-width:22ch;
}
.cap-body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(0.95rem, 1.35vw, 1.06rem);
  line-height:1.75;
  color:rgba(246,243,238,0.86);
  max-width:56ch;
  text-shadow:0 1px 16px rgba(0,0,0,0.85);
}
.caption .accent,
.caption em.accent{
  font-style:italic;
  color:var(--moss);
  font-weight:500;
}

/* the in-scene slogan gets its own light */
.cap-slogan{
  color:#F6F3EE;
  max-width:none;
  text-shadow:
    0 0 1px rgba(255,255,255,0.6),
    0 0 26px rgba(143,227,199,0.55),
    0 0 70px rgba(143,227,199,0.28),
    0 2px 26px rgba(0,0,0,0.6);
}

/* Section 04 sits right where the footage shows a hand — keep the words
   clear of it by moving the whole block to the right edge instead. */
.caption--right{
  left:auto;
  right:clamp(20px, 6vw, 96px);
  text-align:right;
}

/* ---------- Manifesto section ---------- */
.manifesto{
  position:relative;
  background:var(--bg);
  padding:clamp(92px, 11vh, 124px) 6vw clamp(56px, 10vh, 110px);
  scroll-margin-top:86px;
  display:flex;
  justify-content:center;
}
.manifesto-inner{ max-width:680px; text-align:left; position:relative; }

/* Full lockup, shown whole on a clean plate — nothing cropped on either side */
.manifesto-logo{
  position:relative;
  display:block;
  width:220px;
  height:auto;
  aspect-ratio:936/357;
  padding:14px 18px;
  border-radius:12px;
  background:#ffffff;
  margin-bottom:26px;
  box-shadow:0 10px 34px rgba(0,0,0,0.45);
}
.manifesto-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.manifesto .eyebrow{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ember);
  font-weight:500;
  margin:0 0 18px;
}
.manifesto h2{
  font-family:var(--font-head);
  font-weight:400;
  font-size:clamp(1.9rem, 4.6vw, 3rem);
  line-height:1.24;
  letter-spacing:-0.01em;
  margin:0 0 30px;
  color:var(--ink);
}
.manifesto h2 em{ font-style:italic; color:var(--moss); }
.manifesto p{
  font-family:var(--font-body);
  font-size:clamp(0.98rem, 1.6vw, 1.08rem);
  line-height:1.75;
  color:var(--ink-dim);
  max-width:60ch;
  margin:0 0 16px;
}

/* ---------- The slogan: lit from one side ---------- */
.slogan-wrap{
  display:flex;
  align-items:center;
  gap:22px;
  margin:6px 0 34px;
  flex-wrap:wrap;
}
.slogan{
  position:relative;
  display:block;
  margin:0 !important;
  padding:26px 4px 28px;
  max-width:none !important;
  isolation:isolate;
}
.slogan::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-12%;
  top:50%;
  width:64%;
  height:220%;
  transform:translateY(-50%) rotate(-14deg);
  background:linear-gradient(90deg,
    rgba(143,227,199,0.00) 0%,
    rgba(143,227,199,0.16) 38%,
    rgba(255,240,215,0.22) 62%,
    rgba(203,65,11,0.00) 100%);
  filter:blur(28px);
  animation:slogan-beam 7s ease-in-out infinite;
  pointer-events:none;
}
.slogan-text{
  position:relative;
  display:inline-block;
  font-family:var(--font-head);
  font-style:italic;
  font-weight:500;
  font-size:clamp(2rem, 6vw, 3.5rem);
  line-height:1.05;
  letter-spacing:-0.02em;
  background-image:linear-gradient(100deg,
    #5fbfa0 0%,
    #91A2AF 26%,
    #ffffff 46%,
    #F6F3EE 52%,
    #91A2AF 74%,
    #4aa88a 100%);
  background-size:260% 100%;
  background-position:120% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(143,227,199,0.35));
  animation:slogan-sheen 6.5s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes slogan-sheen{
  0%   { background-position:120% 0; }
  55%  { background-position:-40% 0; }
  100% { background-position:-40% 0; }
}
@keyframes slogan-beam{
  0%,100%{ opacity:0.35; transform:translateY(-50%) rotate(-14deg) translateX(-6%); }
  50%    { opacity:0.9;  transform:translateY(-50%) rotate(-14deg) translateX(10%); }
}

/* ---------- Signature mark: the hand glyph, "signing" the slogan ----------
   mono-hand.png is a pre-cut transparent PNG (just the white hand, alpha
   background) so it composites perfectly everywhere — no blend-mode edge
   artifacts. Reveal is a left-to-right wipe (clip-path) so it reads as being
   drawn/signed rather than just fading in. */
.signature-mark{
  position:relative;
  width:80px;
  height:80px;
  flex:none;
  opacity:0;
  transform:rotate(-10deg) scale(0.8);
  clip-path:inset(0 100% 0 0);
  transition:
    opacity 0.7s cubic-bezier(.22,1,.36,1),
    transform 0.9s cubic-bezier(.22,1,.36,1),
    clip-path 0.9s cubic-bezier(.22,1,.36,1);
  transition-delay:0.35s;
}
.signature-mark img{
  display:block;
  width:100%;
  height:100%;
  filter:drop-shadow(0 0 12px rgba(143,227,199,0.5)) drop-shadow(0 0 2px rgba(255,255,255,0.6));
}
.signature-mark.on{
  opacity:0.95;
  transform:rotate(-4deg) scale(1);
  clip-path:inset(0 0 0 0);
}
@media (max-width:520px){
  .signature-mark{ width:60px; height:60px; }
}
@media (prefers-reduced-motion: reduce){
  .signature-mark{ transition:opacity 0.3s ease; transform:rotate(-4deg) scale(1); clip-path:inset(0 0 0 0); }
}

/* ---------- Services + principles ---------- */
.section-label{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin:46px 0 18px;
}
.services{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:rgba(246,243,238,0.1);
  border:1px solid rgba(246,243,238,0.1);
  border-radius:18px;
  overflow:hidden;
}
.services li{
  background:#2a2a2a;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.services b{
  font-family:var(--font-head);
  font-style:italic;
  font-weight:500;
  font-size:1.05rem;
  color:var(--ink);
}
.services span{
  font-size:0.87rem;
  line-height:1.6;
  color:var(--ink-dim);
}

.principles{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:rgba(246,243,238,0.1);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(246,243,238,0.1);
}
.principles div{ background:#2a2a2a; padding:26px 22px; }
.principles h4{
  font-family:var(--font-head);
  font-weight:500;
  font-style:italic;
  font-size:1.05rem;
  margin:0 0 10px;
  color:var(--ink);
}
.principles p{
  font-size:0.87rem;
  line-height:1.6;
  color:var(--ink-dim);
  margin:0;
  max-width:none;
}
@media (max-width:720px){
  .principles{ grid-template-columns:1fr; }
  .services{ grid-template-columns:1fr; }
}

.cta-block{
  margin-top:48px;
  padding-top:36px;
  border-top:1px solid rgba(246,243,238,0.1);
}
.cta{
  margin:0 0 22px !important;
  font-size:clamp(1rem, 2vw, 1.15rem) !important;
  color:var(--ink) !important;
}
.cta a{
  color:var(--moss);
  text-decoration:none;
  border-bottom:1px solid rgba(143,227,199,0.4);
  transition:color 0.25s ease, border-color 0.25s ease;
}
.cta a:hover{ color:var(--ink); border-color:var(--ink); }
.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

footer{
  position:relative;
  background:var(--bg);
  border-top:1px solid rgba(246,243,238,0.08);
  padding:34px 6vw 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  overflow:hidden;
  /* Nothing above ever reads footer's offset, so it's safe to let the
     browser skip layout/paint for it entirely until it's about to be
     scrolled into view — one less thing competing for work at page load. */
  content-visibility:auto;
  contain-intrinsic-size:auto 220px;
}
.footer-glow{
  position:absolute;
  left:50%;
  top:-140px;
  transform:translateX(-50%);
  width:min(90vw, 900px);
  height:280px;
  pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(203,65,11,0.32), rgba(203,65,11,0) 70%),
    radial-gradient(closest-side, rgba(143,227,199,0.14) 0%, rgba(143,227,199,0) 65%);
  filter:blur(10px);
  opacity:0.85;
  animation:glow-breathe 6s ease-in-out infinite;
}
@keyframes glow-breathe{
  0%,100%{ opacity:0.65; transform:translateX(-50%) scale(1); }
  50%{ opacity:0.95; transform:translateX(-50%) scale(1.06); }
}
footer .fw{ position:relative; font-family:var(--font-body); font-size:13px; color:var(--ink-dim); }
footer .fw b{ color:var(--ink); font-weight:600; }
.fw-slogan{
  font-family:var(--font-head);
  font-style:italic;
  color:var(--moss);
}
footer .fw a{ color:var(--ink-dim); text-decoration:none; border-bottom:1px solid rgba(246,243,238,0.25); transition:color 0.25s ease, border-color 0.25s ease; }
footer .fw a:hover{ color:var(--ember); border-color:var(--ember); }

@media (max-width:520px){
  .caption{ bottom:clamp(88px, 13vh, 130px); width:min(92vw, 640px); }
  .cap-body{ font-size:0.92rem; line-height:1.68; }
  .cap-title{ max-width:none; }
  .manifesto-logo{ width:172px; padding:11px 14px; }
}

@media (prefers-reduced-motion: reduce){
  .footer-glow,
  .slogan::before,
  .slogan-text{ animation:none; }
  .slogan-text{ background-position:20% 0; }
  .caption{ transition:none; }
}

/* ================= Auth pages (login / signup) =================
   Mobile has no room for a side panel, so the hand mark itself — blurred —
   becomes the page's backdrop. From ~960px up there's room to tell the two
   halves apart: a branding panel with the full logo sits beside the form,
   mirrored between login and signup via .auth-split--reverse. */
.auth-split{
  position:relative;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.auth-mobile-bg{
  position:fixed;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(180deg, rgba(38,38,38,0.42), rgba(38,38,38,0.8)),
    url("mono-mark.png");
  background-size:cover;
  background-position:center;
  filter:blur(26px) saturate(115%) brightness(1.15);
  transform:scale(1.15);
}

.auth-panel{ display:none; }

.auth-formside{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100svh;
  min-height:100dvh;
  padding:120px 6vw 60px;
}

@media (min-width:960px){
  .auth-mobile-bg{ display:none; }

  .auth-split{ flex-direction:row; }
  .auth-split--reverse{ flex-direction:row-reverse; }

  .auth-panel{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:1 1 46%;
    min-height:100svh;
    min-height:100dvh;
    background:#2a2a2a;
    border-right:1px solid rgba(246,243,238,0.08);
    overflow:hidden;
    padding:40px;
  }
  .auth-split--reverse .auth-panel{
    border-right:none;
    border-left:1px solid rgba(246,243,238,0.08);
  }
  .auth-panel-glow{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(70vw, 640px);
    height:min(70vw, 640px);
    pointer-events:none;
    background:
      radial-gradient(closest-side, rgba(203,65,11,0.22), rgba(203,65,11,0) 68%),
      radial-gradient(closest-side, rgba(143,227,199,0.14) 0%, rgba(143,227,199,0) 62%);
    filter:blur(26px);
  }
  .auth-panel-logo-plate{
    position:relative;
    width:min(74%, 380px);
    aspect-ratio:936/357;
    background:#ffffff;
    border-radius:18px;
    padding:22px 28px;
    box-shadow:0 26px 70px rgba(0,0,0,0.5);
  }
  .auth-panel-logo-plate img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .auth-panel-tag{
    position:relative;
    margin:28px 0 0;
    text-align:center;
  }
  .auth-panel-tag .slogan-text{
    font-size:clamp(1.25rem, 2.4vw, 1.8rem);
  }

  .auth-formside{
    flex:1 1 54%;
    padding:60px 5vw;
  }
  .auth-glow{ width:min(65%, 520px); height:360px; top:6%; }
}

.auth-glow{
  position:absolute;
  left:50%;
  top:-10%;
  transform:translateX(-50%);
  width:min(90vw, 820px);
  height:420px;
  pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(203,65,11,0.24), rgba(203,65,11,0) 70%),
    radial-gradient(closest-side, rgba(143,227,199,0.12) 0%, rgba(143,227,199,0) 65%);
  filter:blur(20px);
}
.auth-card{
  position:relative;
  width:100%;
  max-width:400px;
  background:rgba(38,38,38,0.55);
  border:1px solid rgba(246,243,238,0.12);
  border-radius:22px;
  padding:clamp(28px, 5vw, 42px);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
}
.auth-logo{
  display:inline-flex;
  width:44px;
  height:44px;
  border-radius:12px;
  overflow:hidden;
  background:#262626;
  box-shadow:0 0 0 1px rgba(246,243,238,0.16), 0 0 20px 1px rgba(203,65,11,0.3);
  margin-bottom:22px;
}
.auth-logo img{ width:100%; height:100%; object-fit:cover; }
.auth-card h1{
  font-family:var(--font-head);
  font-weight:400;
  font-size:clamp(1.6rem, 4vw, 2.1rem);
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0 0 8px;
}
.auth-card h1 em{ font-style:italic; color:var(--moss); }
.auth-sub{
  font-family:var(--font-body);
  font-size:0.95rem;
  line-height:1.6;
  color:var(--ink-dim);
  margin:0 0 28px;
}
.auth-form{ display:flex; flex-direction:column; gap:16px; }
.auth-form label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="tel"],
.auth-form input[type="password"]{
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  color:var(--ink);
  background:rgba(38,38,38,0.55);
  border:1px solid rgba(246,243,238,0.16);
  border-radius:11px;
  padding:12px 14px;
  outline:none;
  transition:border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.auth-form input::placeholder{ color:rgba(201,190,172,0.55); }
.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--ink); caret-color:var(--ink); box-shadow:0 0 0 1000px #33302d inset; transition:background-color 9999s ease-out 0s; }
.auth-form input:focus{
  border-color:var(--ember);
  background:rgba(38,38,38,0.8);
  box-shadow:0 0 0 3px rgba(203,65,11,0.18);
}
.auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin-top:-2px;
}
.auth-form label.auth-check{
  flex-direction:row;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  color:var(--ink-dim);
  cursor:pointer;
}
.auth-check input{ accent-color:var(--ember); width:15px; height:15px; }
.auth-link-sm{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--moss);
  text-decoration:none;
  border-bottom:1px solid rgba(143,227,199,0.35);
}
.auth-link-sm:hover{ color:var(--ink); border-color:var(--ink); }
.auth-hint{
  margin:-6px 0 0;
  font-family:var(--font-body);
  font-size:12px;
  line-height:1.5;
  color:var(--ink-dim);
}
.auth-submit{
  margin-top:6px;
  width:100%;
  border:none;
  font-family:var(--font-body);
}
.auth-note{
  min-height:1.4em;
  margin:14px 0 0;
  font-family:var(--font-body);
  font-size:12.5px;
  line-height:1.6;
  color:var(--moss);
}
.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:26px 0 22px;
  color:var(--ink-dim);
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.auth-divider::before,
.auth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(246,243,238,0.14);
}
.auth-switch{
  margin:0;
  text-align:center;
  font-family:var(--font-body);
  font-size:13.5px;
  color:var(--ink-dim);
}
.auth-switch a{
  color:var(--moss);
  text-decoration:none;
  border-bottom:1px solid rgba(143,227,199,0.35);
}
.auth-switch a:hover{ color:var(--ink); border-color:var(--ink); }

@media (max-width:460px){
  .auth-formside{ padding:104px 5vw 48px; }
  .auth-card{ padding:24px; border-radius:18px; }
}


/* =====================================================================
   NEW SCROLL SECTIONS (featured / capabilities / process / works /
   trusted / team) — all share one reveal-on-scroll primitive.
   ===================================================================== */

[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1);
}
[data-reveal].in{ opacity:1; transform:none; }

.sec{
  position:relative;
  background:var(--bg);
  padding:clamp(70px, 11vh, 130px) 6vw;
  content-visibility:auto;
  contain-intrinsic-size:auto 700px;
}
.sec-inner{ max-width:1080px; margin:0 auto; }
.sec-eyebrow{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ember);
  margin:0 0 16px;
}
.sec-title{
  font-family:var(--font-head);
  font-weight:400;
  font-size:clamp(1.9rem, 4.4vw, 3rem);
  line-height:1.2;
  letter-spacing:-0.015em;
  color:var(--ink);
  margin:0 0 16px;
}
.sec-title--sm{ font-size:clamp(1.4rem, 3vw, 2rem); }
.sec-lede{
  font-family:var(--font-body);
  font-size:clamp(0.98rem, 1.5vw, 1.06rem);
  line-height:1.7;
  color:var(--ink-dim);
  max-width:58ch;
  margin:0 0 46px;
}

/* tinted media plates shared by cards / tiles / avatars */
[data-tint="ember"]{ --tint-a:rgba(203,65,11,0.5); --tint-b:rgba(203,65,11,0.06); }
[data-tint="moss"]{ --tint-a:rgba(143,227,199,0.42); --tint-b:rgba(143,227,199,0.05); }
[data-tint="ink"]{ --tint-a:rgba(246,243,238,0.3); --tint-b:rgba(246,243,238,0.04); }

/* ---------- 02 Featured cards ---------- */
.fcards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.fcard{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#2a2a2a;
  border:1px solid rgba(246,243,238,0.1);
  border-radius:20px;
  padding:16px 16px 22px;
  cursor:pointer;
  overflow:hidden;
  transition:transform 0.45s cubic-bezier(.22,1,.36,1), border-color 0.35s ease, box-shadow 0.45s ease, opacity 0.7s cubic-bezier(.22,1,.36,1);
}
.fcard:hover, .fcard:focus-visible{
  transform:translateY(-6px);
  border-color:rgba(246,243,238,0.24);
  box-shadow:0 22px 50px rgba(0,0,0,0.5);
  outline:none;
}
.fcard-media{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4/3;
  border-radius:13px;
  margin-bottom:18px;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 22% 18%, var(--tint-a), var(--tint-b) 62%),
    #2e2e2e;
}
.fcard-glyph{
  font-family:var(--font-head);
  font-style:italic;
  font-size:clamp(3rem, 7vw, 4.6rem);
  color:rgba(246,243,238,0.92);
  text-shadow:0 6px 30px rgba(0,0,0,0.5);
  transition:transform 0.55s cubic-bezier(.22,1,.36,1);
}
.fcard:hover .fcard-glyph{ transform:scale(1.08) rotate(-3deg); }
.fcard-no{
  position:absolute;
  top:26px; right:28px;
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:0.14em;
  color:rgba(246,243,238,0.7);
}
.fcard-name{
  font-family:var(--font-head);
  font-weight:400;
  font-size:1.2rem;
  line-height:1.25;
  color:var(--ink);
  margin:0 0 7px;
}
.fcard-meta{
  font-family:var(--font-body);
  font-size:0.84rem;
  color:var(--ink-dim);
  margin:0 0 16px;
}
.fcard-cue{
  margin-top:auto;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--moss);
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.35s ease, transform 0.35s ease;
}
.fcard-cue::after{ content:" →"; }
.fcard:hover .fcard-cue, .fcard:focus-visible .fcard-cue{ opacity:1; transform:none; }
@media (max-width:860px){ .fcards{ grid-template-columns:1fr; } }

/* ---------- 03 Capabilities (auto typewriter) ---------- */
.sec-title--type{ min-height:2.4em; }
.type-line{ display:inline; white-space:pre-wrap; }
#typeTarget{ font-style:italic; color:var(--moss); }
.type-caret{
  display:inline-block;
  width:2px;
  height:0.92em;
  margin-left:2px;
  vertical-align:-0.1em;
  background:var(--ember);
  box-shadow:0 0 12px rgba(203,65,11,0.85);
  animation:type-blink 0.75s steps(1) infinite;
}
@keyframes type-blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

.cap-grid{
  list-style:none;
  margin:44px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:rgba(246,243,238,0.1);
  border:1px solid rgba(246,243,238,0.1);
  border-radius:18px;
  overflow:hidden;
}
.cap-grid li{
  background:#2a2a2a;
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:background-color 0.35s ease, opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1);
}
.cap-grid li:hover{ background:#2e2e2e; }
.cap-grid b{
  font-family:var(--font-head);
  font-style:italic;
  font-weight:500;
  font-size:1.05rem;
  color:var(--ink);
}
.cap-grid span{ font-size:0.86rem; line-height:1.6; color:var(--ink-dim); }
@media (max-width:860px){ .cap-grid{ grid-template-columns:1fr; } }

/* ---------- 04 Process ---------- */
.proc{ list-style:none; margin:0; padding:0; }
.proc-step{
  position:relative;
  display:grid;
  grid-template-columns:44px 1fr;
  gap:22px;
  padding-bottom:36px;
}
.proc-step:last-child{ padding-bottom:0; }
.proc-rail{
  position:relative;
  display:block;
  width:44px;
}
/* the connecting line grows downward as each step reveals */
.proc-rail::before{
  content:"";
  position:absolute;
  left:50%;
  top:18px;
  width:1px;
  height:calc(100% + 36px);
  transform:translateX(-50%) scaleY(0);
  transform-origin:top center;
  background:linear-gradient(180deg, var(--ember), rgba(203,65,11,0.05));
  transition:transform 0.9s cubic-bezier(.22,1,.36,1) 0.1s;
}
.proc-step.in .proc-rail::before{ transform:translateX(-50%) scaleY(1); }
.proc-step:last-child .proc-rail::before{ display:none; }
.proc-dot{
  position:absolute;
  left:50%;
  top:8px;
  width:11px; height:11px;
  margin-left:-5.5px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--ember);
  transition:box-shadow 0.5s ease, background-color 0.5s ease, transform 0.5s cubic-bezier(.22,1,.36,1);
}
.proc-step.in .proc-dot{
  background:var(--ember);
  box-shadow:0 0 0 4px rgba(203,65,11,0.16), 0 0 18px 2px rgba(203,65,11,0.6);
  transform:scale(1.1);
}
.proc-body{ padding-top:1px; }
.proc-no{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.16em;
  color:var(--ember);
}
.proc-body h3{
  font-family:var(--font-head);
  font-weight:400;
  font-size:clamp(1.3rem, 2.6vw, 1.8rem);
  color:var(--ink);
  margin:6px 0 10px;
}
.proc-body p{
  font-family:var(--font-body);
  font-size:0.98rem;
  line-height:1.72;
  color:var(--ink-dim);
  max-width:58ch;
  margin:0 0 10px;
}
.proc-when{
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(246,243,238,0.4);
}

/* ---------- 05 Our projects grid ---------- */
.wgrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.wtile{
  position:relative;
  display:block;
  border:1px solid rgba(246,243,238,0.1);
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:1/1;
  padding:0;
  cursor:pointer;
  background:
    radial-gradient(120% 90% at 25% 20%, var(--tint-a), var(--tint-b) 60%),
    #131110;
  transition:transform 0.45s cubic-bezier(.22,1,.36,1), border-color 0.35s ease, box-shadow 0.45s ease, opacity 0.7s cubic-bezier(.22,1,.36,1);
}
.wtile--wide{ grid-column:span 2; aspect-ratio:2/1; }
.wtile:hover, .wtile:focus-visible{
  transform:translateY(-5px);
  border-color:rgba(246,243,238,0.26);
  box-shadow:0 20px 46px rgba(0,0,0,0.5);
  outline:none;
}
.wtile-glyph{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-style:italic;
  font-size:clamp(3rem, 8vw, 5.5rem);
  color:rgba(246,243,238,0.9);
  transition:transform 0.55s cubic-bezier(.22,1,.36,1);
}
.wtile:hover .wtile-glyph{ transform:scale(1.07) rotate(-3deg); }
.wtile-info{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:34px 20px 18px;
  text-align:left;
  background:linear-gradient(180deg, rgba(38,38,38,0), rgba(38,38,38,0.9));
}
.wtile-info b{
  font-family:var(--font-head);
  font-weight:500;
  font-size:1.02rem;
  color:var(--ink);
}
.wtile-info span{
  font-family:var(--font-body);
  font-size:0.8rem;
  color:var(--ink-dim);
}
@media (max-width:860px){
  .wgrid{ grid-template-columns:repeat(2, 1fr); }
  .wtile--wide{ grid-column:span 2; }
}
@media (max-width:520px){
  .wgrid{ grid-template-columns:1fr; }
  .wtile--wide{ grid-column:span 1; aspect-ratio:3/2; }
}

/* ---------- 08 Trusted by ---------- */
.trust-row{
  list-style:none;
  margin:36px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:14px 40px;
  align-items:center;
}
.trust-row li{
  font-family:var(--font-body);
  font-weight:600;
  font-size:clamp(0.95rem, 1.8vw, 1.25rem);
  letter-spacing:0.14em;
  color:rgba(246,243,238,0.38);
  transition:color 0.3s ease, transform 0.3s ease;
  cursor:default;
}
.trust-row li:hover{ color:var(--ink); transform:translateY(-2px); }

/* ---------- 09 Team tree ---------- */
.tree{ display:flex; flex-direction:column; align-items:center; }
.tree-tier{ display:flex; justify-content:center; width:100%; }
.tree-tier--three{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin-top:6px;
}
.tmember{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:#2a2a2a;
  border:1px solid rgba(246,243,238,0.1);
  border-radius:18px;
  padding:24px 18px 20px;
  transition:transform 0.45s cubic-bezier(.22,1,.36,1), border-color 0.35s ease, box-shadow 0.45s ease, opacity 0.7s cubic-bezier(.22,1,.36,1);
}
.tmember:hover{
  transform:translateY(-4px);
  border-color:rgba(246,243,238,0.24);
  box-shadow:0 18px 40px rgba(0,0,0,0.45);
}
.tmember--lead{ min-width:min(90vw, 290px); }
/* swap this block for a real <img> when the photos are ready */
.tavatar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:74px; height:74px;
  border-radius:50%;
  margin-bottom:14px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:0.06em;
  color:var(--ink);
  background:
    radial-gradient(120% 120% at 30% 22%, var(--tint-a, rgba(246,243,238,0.24)), var(--tint-b, rgba(246,243,238,0.04)) 65%),
    #16130f;
  border:1px solid rgba(246,243,238,0.14);
}
.tmember--lead .tavatar{ width:92px; height:92px; font-size:1.2rem; }
.tmember h3{
  font-family:var(--font-head);
  font-weight:400;
  font-size:1.05rem;
  color:var(--ink);
  margin:0 0 6px;
}
.tmember--lead h3{ font-size:1.25rem; }
.tmember p{
  font-family:var(--font-body);
  font-size:0.82rem;
  line-height:1.5;
  color:var(--ink-dim);
  margin:0;
}

/* animated connectors */
.tline{ display:block; pointer-events:none; }
.tline--stem{
  width:1px;
  height:46px;
  background:linear-gradient(180deg, rgba(203,65,11,0.9), rgba(203,65,11,0.15));
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform 0.75s cubic-bezier(.22,1,.36,1);
}
.tline--stem.in{ transform:scaleY(1); }
.tline--spread{
  width:min(100%, 700px);
  height:1px;
  background:linear-gradient(90deg, rgba(203,65,11,0), rgba(203,65,11,0.75) 18%, rgba(203,65,11,0.75) 82%, rgba(203,65,11,0));
  transform:scaleX(0);
  transition:transform 0.9s cubic-bezier(.22,1,.36,1) 0.25s;
}
.tline--spread.in{ transform:scaleX(1); }
/* little drop line from the spread bar into each third-tier card */
.tdrop{
  position:absolute;
  left:50%;
  top:-22px;
  width:1px;
  height:22px;
  background:linear-gradient(180deg, rgba(203,65,11,0.7), rgba(203,65,11,0.05));
  transform:translateX(-50%) scaleY(0);
  transform-origin:top center;
  transition:transform 0.55s cubic-bezier(.22,1,.36,1) 0.5s;
}
.tmember.in .tdrop{ transform:translateX(-50%) scaleY(1); }
@media (max-width:860px){
  .tree-tier--three{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:520px){
  .tree-tier--three{ grid-template-columns:1fr; }
  .tdrop{ display:none; }
  .tline--spread{ display:none; }
}

/* ---------- Project detail modal ---------- */
.pmodal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  visibility:hidden;
  pointer-events:none;
}
.pmodal.is-open{ visibility:visible; pointer-events:auto; }
.pmodal-scrim{
  position:absolute;
  inset:0;
  background:rgba(5,4,3,0.75);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity 0.4s ease;
}
.pmodal.is-open .pmodal-scrim{ opacity:1; }
.pmodal-panel{
  position:relative;
  width:min(94vw, 760px);
  max-height:88vh;
  overflow-y:auto;
  background:#292929;
  border:1px solid rgba(246,243,238,0.12);
  border-radius:24px;
  box-shadow:0 40px 90px rgba(0,0,0,0.6);
  opacity:0;
  transform:translateY(26px) scale(0.975);
  transition:opacity 0.45s cubic-bezier(.22,1,.36,1), transform 0.45s cubic-bezier(.22,1,.36,1);
}
.pmodal.is-open .pmodal-panel{ opacity:1; transform:none; }
.pmodal-close{
  position:absolute;
  top:14px; right:16px;
  z-index:2;
  width:36px; height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(246,243,238,0.16);
  border-radius:50%;
  background:rgba(38,38,38,0.6);
  color:var(--ink);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:background-color 0.25s ease, border-color 0.25s ease;
}
.pmodal-close:hover{ background:rgba(38,38,38,0.9); border-color:rgba(246,243,238,0.4); }
.pmodal-hero{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:16/7;
  border-radius:24px 24px 0 0;
  background:
    radial-gradient(110% 100% at 25% 20%, var(--tint-a), var(--tint-b) 62%),
    #2e2e2e;
}
.pmodal-glyph{
  font-family:var(--font-head);
  font-style:italic;
  font-size:clamp(3.4rem, 9vw, 5.6rem);
  color:rgba(246,243,238,0.94);
  text-shadow:0 8px 34px rgba(0,0,0,0.5);
}
.pmodal-body{ padding:clamp(24px, 4vw, 38px); }
.pmodal-eyebrow{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ember);
  margin:0 0 12px;
}
.pmodal-title{
  font-family:var(--font-head);
  font-weight:400;
  font-size:clamp(1.5rem, 3.4vw, 2.2rem);
  line-height:1.2;
  color:var(--ink);
  margin:0 0 14px;
}
.pmodal-lede{
  font-family:var(--font-head);
  font-style:italic;
  font-size:clamp(1rem, 2vw, 1.2rem);
  line-height:1.55;
  color:var(--moss);
  margin:0 0 24px;
}
.pmodal-facts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  margin:0 0 26px;
  background:rgba(246,243,238,0.1);
  border:1px solid rgba(246,243,238,0.1);
  border-radius:14px;
  overflow:hidden;
}
.pmodal-facts div{ background:#2a2a2a; padding:14px 16px; }
.pmodal-facts dt{
  font-family:var(--font-body);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(246,243,238,0.45);
  margin-bottom:6px;
}
.pmodal-facts dd{
  font-family:var(--font-body);
  font-size:0.9rem;
  color:var(--ink);
  margin:0;
}
.pmodal-text p{
  font-family:var(--font-body);
  font-size:0.98rem;
  line-height:1.75;
  color:var(--ink-dim);
  margin:0 0 14px;
}
@media (max-width:560px){
  .pmodal{ padding:0; }
  .pmodal-panel{ width:100vw; max-height:100svh; max-height:100dvh; border-radius:0; border:none; }
  .pmodal-hero{ border-radius:0; }
  .pmodal-facts{ grid-template-columns:1fr; }
}
body.modal-open{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ transition:none; opacity:1; transform:none; }
  .proc-rail::before, .proc-dot, .tline, .tdrop{ transition:none; }
  .tline--stem{ transform:scaleY(1); }
  .tline--spread{ transform:scaleX(1); }
  .type-caret{ animation:none; }
}

/* footer social row */
.fw-social{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.fw-social a{ font-size:13px; }
@media (max-width:760px){
  footer{ justify-content:flex-start; }
  .fw-social{ width:100%; }
}

/* ---------- Rotate-to-continue gate (phones, once per visit) ---------- */
html.is-gated,
html.is-gated body{ overflow:hidden !important; overscroll-behavior:none; }

.rg{
  position:fixed;
  inset:0;
  z-index:600;                       /* above the loader (500) and top bar (100) */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(24px, env(safe-area-inset-top)) 28px max(24px, env(safe-area-inset-bottom));
  background:var(--bg);
  color:var(--ink);
  text-align:center;
  touch-action:none;
  overscroll-behavior:none;
  transition:opacity 0.6s cubic-bezier(.22,1,.36,1);
}
.rg.rg-out{ opacity:0; pointer-events:none; }
.rg-inner{ max-width:320px; }

.rg-stage{
  position:relative;
  width:150px; height:200px;
  margin:0 auto 20px;
  display:flex; align-items:flex-end; justify-content:center;
  color:var(--ink);
}
.rg-phone{
  display:block;
  transform-origin:50% 50%;
  animation:rg-turn 3.2s cubic-bezier(.65,0,.35,1) infinite;
}
.rg-arrow{
  position:absolute;
  top:4px; left:50%; right:auto;
  margin-left:-60px;             /* centred ABOVE the phone, clear of it */
  transform:scaleX(-1);          /* points left, same way the phone turns */
  color:var(--ember);
  opacity:0;
  animation:rg-arrow 3.2s ease infinite;
}
@keyframes rg-turn{
  0%, 18%   { transform:rotate(0deg); }
  50%, 82%  { transform:rotate(-90deg); }
  100%      { transform:rotate(0deg); }
}
@keyframes rg-arrow{
  0%, 6%    { opacity:0; }
  22%, 44%  { opacity:1; }
  58%, 100% { opacity:0; }
}

.rg-eyebrow{
  margin:0 0 10px;
  font-family:var(--font-body);
  font-size:12px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ember);
}
.rg-title{
  margin:0 0 12px;
  font-family:var(--font-head);
  font-weight:400;
  font-size:clamp(26px, 8vw, 34px);
  line-height:1.1;
}
.rg-sub{
  margin:0;
  font-family:var(--font-body);
  font-size:15px; line-height:1.55;
  color:var(--ink-dim);
}
.rg-skip{
  margin-top:28px;
  padding:10px 4px;
  background:none; border:0;
  font:inherit; font-size:13px;
  color:var(--ink-dim);
  text-decoration:underline; text-underline-offset:4px;
  cursor:pointer;
  animation:rg-fade 0.6s ease both;
}
@keyframes rg-fade{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .rg-phone{ animation:none; transform:rotate(-90deg); }
  .rg-arrow{ animation:none; opacity:0; }
  .rg{ transition:none; }
}

/* Landscape phone: if the gate is somehow still up, keep it compact. */
@media (orientation:landscape) and (max-height:480px){
  .rg-stage{ width:96px; height:96px; margin-bottom:12px; }
  .rg-phone{ width:40px; height:70px; }
  .rg-arrow{ display:none; }
}


/* ---------- Fire glow (campfire flicker over the scroll scene) ---------- */
.fire-layer{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transition:opacity 1s ease 0.2s;
}
body.is-ready .fire-layer{ opacity:1; }
.fire-glow{
  position:absolute; left:0; top:0;
  width:200px; height:200px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,214,140,0.80) 0%,
    rgba(255,150,50,0.50) 22%,
    rgba(210,100,35,0.22) 48%,
    rgba(150,60,20,0.07) 70%,
    rgba(150,60,20,0) 100%);
  opacity:0;
  transform:translate3d(-999px,-999px,0);
  will-change:transform, opacity;
}


/* ---------- Film grain over the scroll scene ----------
   A very fine, barely-there grain breaks up banding in the dark gradients of
   compressed footage and makes the picture read as "filmed" instead of "video".
   Compositor-only (transform), and off for reduced motion. Remove the
   .film-grain element from index.html to turn it off. */
.film-grain{
  position:absolute; inset:-64px;
  pointer-events:none;
  background:url("grain.png");
  background-size:128px 128px;
  opacity:0.04;
  animation:grain-shift 0.9s steps(6) infinite;
  will-change:transform;
}
@keyframes grain-shift{
  0%  { transform:translate3d(0,0,0); }
  17% { transform:translate3d(-23px,17px,0); }
  33% { transform:translate3d(19px,-31px,0); }
  50% { transform:translate3d(-37px,-13px,0); }
  67% { transform:translate3d(29px,27px,0); }
  83% { transform:translate3d(-11px,41px,0); }
  100%{ transform:translate3d(0,0,0); }
}
@media (prefers-reduced-motion: reduce){ .film-grain{ animation:none; } }