/* Font faces are now auto-generated — load fonts-generated.css before this file */
/* ===== MODERN GLOW DESIGN SYSTEM — 2026 ===== */
:root{
  --color-bg-primary:#111114;
  --color-bg-secondary:#18181c;
  --color-bg-tertiary:#202024;
  --color-bg-accent:rgba(160,160,170,.12);
  --color-bg-card-dark:#0c0c0e;
  --color-text-primary:#e8eaf0;
  --color-text-secondary:#8a8ea0;
  --color-text-on-dark:#e8eaf0;
  --color-text-muted:#4a4e60;
  --color-border:rgba(255,255,255,.06);
  --color-border-strong:rgba(255,255,255,.15);
  --color-accent:#007588;
  --color-accent-hover:#63b7ed;
  --color-accent-rgb:0,117,136;
  /* Map to existing var names for compatibility */
  --bg:var(--color-bg-primary);--bg2:var(--color-bg-secondary);--bg3:var(--color-bg-tertiary);
  --text:var(--color-text-primary);--text2:var(--color-text-secondary);--text3:var(--color-text-muted);
  --accent:var(--color-accent);
  --accent2:var(--color-accent-hover);
  --border:var(--color-border);--border2:var(--color-border-strong);
  --nav-bg:rgba(17,17,20,.82);
  --footer-bg:var(--color-bg-primary);
  --tag-bg:var(--color-bg-tertiary);--tag-text:var(--color-text-secondary);
  --cursor-border:rgba(0,180,210,.4);
  --hero-canvas-h:100svh;
  --font-primary:'DM Sans', -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', 'Fira Code', monospace;
  --radius-card:10px;
  --radius-btn:var(--radius-card);
  --radius-small:6px;
  --transition-fast:180ms ease;
  --transition-med:350ms ease;
}
[data-theme="light"]{
  --color-bg-primary:#f0eee8;
  --color-bg-secondary:#e4e2da;
  --color-bg-tertiary:#d8d6ce;
  --color-bg-accent:rgba(0,149,160,.12);
  --color-bg-card-dark:#1a1a1f;
  --color-text-primary:#1a1a22;
  --color-text-secondary:#555566;
  --color-text-on-dark:#e8eaf0;
  --color-text-muted:#8a8a96;
  --color-border:rgba(0,0,0,.08);
  --color-border-strong:rgba(0,0,0,.18);
  --color-accent:#007588;
  --color-accent-hover:#3290b3;
  --color-accent-rgb:0,117,136;
  --bg:var(--color-bg-primary);--bg2:var(--color-bg-secondary);--bg3:var(--color-bg-tertiary);
  --text:var(--color-text-primary);--text2:var(--color-text-secondary);--text3:var(--color-text-muted);
  --accent:var(--color-accent);--accent2:var(--color-accent-hover);--accent3:var(--color-accent);--accent4:var(--color-accent-hover);
  --border:var(--color-border);--border2:var(--color-border-strong);
  --nav-bg:rgba(228,226,218,.82);
  --footer-bg:var(--color-bg-primary);
  --tag-bg:var(--color-bg-tertiary);--tag-text:var(--color-text-secondary);
  --cursor-border:rgba(0,133,136,.35)
}

[data-theme="darkproject"]{
  --color-bg-primary:#111114;
  --color-bg-secondary:#18181c;
  --color-bg-tertiary:#202024;
  --color-bg-accent:rgba(160,160,170,.12);
  --color-bg-card-dark:#0c0c0e;
  --color-text-primary:#e0e0e4;
  --color-text-secondary:#8a8a94;
  --color-text-on-dark:#e0e0e4;
  --color-text-muted:#55555e;
  --color-border:rgba(255,255,255,.07);
  --color-border-strong:rgba(255,255,255,.14);
  --color-accent:#e0e0e4;
  --color-accent-hover:#a8a8b0;
  --color-accent-rgb:136,136,144;
  --bg:var(--color-bg-primary);--bg2:var(--color-bg-secondary);--bg3:var(--color-bg-tertiary);
  --text:var(--color-text-primary);--text2:var(--color-text-secondary);--text3:var(--color-text-muted);
  --accent:var(--color-accent);--accent2:var(--color-accent-hover);
  --border:var(--color-border);--border2:var(--color-border-strong);
  --nav-bg:rgba(17,17,20,.85);
  --footer-bg:var(--color-bg-primary);
  --tag-bg:var(--color-bg-tertiary);--tag-text:var(--color-text-secondary);
  --pdetail-dt:var(--color-text-on-dark);
  --cursor-border:rgba(136,136,144,.35)
}
[data-theme="lightproject"]{
  --color-bg-primary:#f5f5f3;
  --color-bg-secondary:#eaeae8;
  --color-bg-tertiary:#ddddd9;
  --color-bg-accent:rgba(100,100,110,.1);
  --color-bg-card-dark:#1a1a1e;
  --color-text-primary:#1a1a1e;
  --color-text-secondary:#5a5a64;
  --color-text-on-dark:#e0e0e4;
  --color-text-muted:#8a8a92;
  --color-border:rgba(0,0,0,.07);
  --color-border-strong:rgba(0,0,0,.16);
  --color-accent:#1a1a1e;
  --color-accent-hover:#727278;
  --color-accent-rgb:90,90,98;
  --bg:var(--color-bg-primary);--bg2:var(--color-bg-secondary);--bg3:var(--color-bg-tertiary);
  --text:var(--color-text-primary);--text2:var(--color-text-secondary);--text3:var(--color-text-muted);
  --accent:var(--color-accent);--accent2:var(--color-accent-hover);--accent3:var(--color-accent);--accent4:var(--color-accent-hover);
  --border:var(--color-border);--border2:var(--color-border-strong);
  --nav-bg:rgba(240,240,238,.85);
  --footer-bg:var(--color-bg-primary);
  --tag-bg:var(--color-bg-tertiary);--tag-text:var(--color-text-secondary);
  --pdetail-dt:var(--color-text-primary);
  --cursor-border:rgba(90,90,98,.3)
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;font-size:125%}
body{font-family:var(--font-primary);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .45s,color .35s;overflow-x:hidden;position:relative}
a{color:inherit;text-decoration:none}button{cursor:none}img{max-width:100%;display:block}
::selection{background:rgba(var(--color-accent-rgb),.25);color:var(--color-text-primary)}
/* ===== HERO DOTTED PAPER PATTERN ===== */
.hero-rickroll::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0);
  background-size:32px 32px;
}
[data-theme="light"] .hero-rickroll::before{
  background-image:radial-gradient(circle at 1px 1px, rgba(0,0,0,.09) 1px, transparent 0);
}
[data-theme="lightproject"] .hero-rickroll::before{
  background-image:radial-gradient(circle at 1px 1px, rgba(0,0,0,.09) 1px, transparent 0);
}
/* CANVAS NOISE OVERLAY — disabled for flat editorial look */
.hero-noise{display:none;opacity:0}
[data-theme="light"] .hero-noise{display:none;opacity:0}
[data-theme="lightproject"] .hero-noise{display:none;opacity:0}
/* ===== CURSOR (hover ring + label only) ===== */
.cursor{position:fixed;width:70px;height:70px;border:1.5px solid var(--accent);border-radius:50%;pointer-events:none;z-index:10000;transform:translate(-50%,-50%) scale(.4);transition:transform .25s cubic-bezier(.23,1,.32,1),border-color .3s,background .3s,opacity .3s,box-shadow .3s;background:rgba(var(--color-accent-rgb),.08);opacity:0}
.cursor.h{opacity:1;transform:translate(-50%,-50%) scale(1)}
.clbl{position:fixed;pointer-events:none;z-index:10001;transform:translate(-50%,-50%);font-size:.6rem;font-family:var(--font-mono);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);opacity:0;transition:opacity .25s;white-space:nowrap}.clbl.v{opacity:1}
@media(hover:none),(pointer:coarse){.cursor,.clbl{display:none!important}}
a,button,.witem,.nav-logo,.font-card,.faq-question,.lightbox-zoom-slider,.ft-slider{cursor:pointer}
.letter-link,.letter-link a,.flegal a{cursor:pointer !important}
/* ===== PAGE TRANSITION ===== */
.page-trans {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--color-bg-secondary);
  z-index: 999;
  pointer-events: none;
  transform: translateY(-100%);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.page-trans.cover {
  transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1), border-radius 0.5s cubic-bezier(0.8, 0, 0.2, 1);
  transform: translateY(0);
  border-radius: 0;
}
.page-trans.reveal {
  transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1), border-radius 0.5s cubic-bezier(0.8, 0, 0.2, 1);
  transform: translateY(100%);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
/* ===== FLOATING ISLAND NAV — glassmorphism ===== */
.nav-outer{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;justify-content:center;padding:16px 16px 0;pointer-events:none}
.nav-outer.nav-initial{transform:translateY(-120%);animation:navSlideIn .8s cubic-bezier(.16,1,.3,1) .15s forwards}
@keyframes navSlideIn{from{transform:translateY(-120%)}to{transform:translateY(0)}}
.nav{
  pointer-events:auto;
  position:relative;
  width:min(94vw, 680px);
  display:flex;
  flex-direction:column;
  padding:14px;
  background:rgba(38,38,38,.88);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  overflow:hidden;
  height:74px;
  box-shadow:0 8px 32px rgba(0,0,0,.2);
  transition:
    height .55s cubic-bezier(.76,0,.24,1),
    width .55s cubic-bezier(.76,0,.24,1),
    padding .55s cubic-bezier(.76,0,.24,1),
    background .4s,
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
[data-theme="light"] .nav{ background:rgba(38,38,38,.88);border-color:rgba(255,255,255,.1); }
[data-theme="lightproject"] .nav{ background:rgba(38,38,38,.88);border-color:rgba(255,255,255,.1); }
/* Logo */
.nav-logo{
  z-index:1002;
  position:relative;
  flex-shrink:0;
  line-height:0;
  display:flex;
  align-items:center;
}
.nav-logo-img{
  height:2.1rem;
  width:auto;
  display:block;
}
/* Theme-based logo switching — Nav is always dark bg, so always use dark logos */
/* Default (dark theme): show dark logo */
.nav-logo-dark{display:block}
.nav-logo-light{display:none}
.nav-logo-dark-project{display:none}
.nav-logo-light-project{display:none}
/* Light theme: nav stays dark → keep dark logo in nav, swap in footer */
[data-theme="light"] .nav .nav-logo-dark{display:block}
[data-theme="light"] .nav .nav-logo-light{display:none}
[data-theme="light"] .footer .nav-logo-dark{display:none}
[data-theme="light"] .footer .nav-logo-light{display:block}
/* Dark project: show dark-project logo everywhere */
[data-theme="darkproject"] .nav-logo-dark{display:none}
[data-theme="darkproject"] .nav-logo-dark-project{display:block}
/* Light project: nav stays dark → dark-project logo in nav, light-project in footer */
[data-theme="lightproject"] .nav-logo-dark{display:none}
[data-theme="lightproject"] .nav .nav-logo-dark-project{display:block}
[data-theme="lightproject"] .nav .nav-logo-light-project{display:none}
[data-theme="lightproject"] .footer .nav-logo-dark-project{display:none}
[data-theme="lightproject"] .footer .nav-logo-light-project{display:block}
/* Right side controls wrapper */
.nav-right{display:flex;align-items:center;gap:8px;z-index:1002;position:relative;flex-shrink:0}
/* Desktop-only toggle buttons */
.nav-toggle-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  height:46px;
  width:46px;
  padding:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-small);
  color:rgba(255,255,255,.85);
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:all var(--transition-fast);
  white-space:nowrap;
  flex-shrink:0;
}
[data-theme="light"] .nav-toggle-btn{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.85);
}
[data-theme="lightproject"] .nav-toggle-btn{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.85);
}
.nav-toggle-btn:hover{
  background:rgba(255,255,255,.18);
  color:#fff;
  border-color:rgba(255,255,255,.25);
}
[data-theme="light"] .nav-toggle-btn:hover{
  background:rgba(255,255,255,.18);
  color:#fff;
  border-color:rgba(255,255,255,.25);
}
[data-theme="lightproject"] .nav-toggle-btn:hover{
  background:rgba(255,255,255,.18);
  color:#fff;
  border-color:rgba(255,255,255,.25);
}
.nav-toggle-btn svg{width:18px;height:18px;flex-shrink:0}
/* Hamburger button */
.ham{
  display:flex;
  background:var(--accent);
  border:none;
  border-radius:var(--radius-small);
  padding:0;
  width:46px;
  height:46px;
  align-items:center;
  justify-content:center;
  z-index:1002;
  position:relative;
  transition:all var(--transition-fast);
  flex-shrink:0;
}
[data-theme="light"] .ham{background:var(--accent)}
[data-theme="lightproject"] .ham{background:#111114}
.ham:hover{
  background:var(--accent2);
}
[data-theme="light"] .ham:hover{background:var(--accent2)}
[data-theme="lightproject"] .ham{background:#e0e0e4}
[data-theme="lightproject"] .ham:hover{background:#c8c8cc}
.ham svg{width:26px;height:26px}
.ham .line{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;transition:stroke-dasharray 500ms cubic-bezier(.76,0,.24,1),stroke-dashoffset 500ms cubic-bezier(.76,0,.24,1)}
.ham .line1{stroke-dasharray:60 207;stroke-dashoffset:0}
.ham .line2{stroke-dasharray:60 60;stroke-dashoffset:0}
.ham .line3{stroke-dasharray:60 207;stroke-dashoffset:0}
.ham.open .line1{stroke-dasharray:90 207;stroke-dashoffset:-134}
.ham.open .line2{stroke-dasharray:1 60;stroke-dashoffset:-30}
.ham.open .line3{stroke-dasharray:90 207;stroke-dashoffset:-134}
[data-theme="light"] .ham .line{fill:none;stroke:var(--color-text-on-dark);stroke-width:6;stroke-linecap:round;transition:stroke-dasharray 500ms cubic-bezier(.76,0,.24,1),stroke-dashoffset 500ms cubic-bezier(.76,0,.24,1)}
[data-theme="lightproject"] .ham .line{fill:none;stroke:#111114;stroke-width:6;stroke-linecap:round;transition:stroke-dasharray 500ms cubic-bezier(.76,0,.24,1),stroke-dashoffset 500ms cubic-bezier(.76,0,.24,1)}
[data-theme="darkproject"] .ham{background:#e0e0e4}
[data-theme="darkproject"] .ham:hover{background:#c8c8cc}
[data-theme="darkproject"] .ham .line{fill:none;stroke:#111114;stroke-width:6;stroke-linecap:round;transition:stroke-dasharray 500ms cubic-bezier(.76,0,.24,1),stroke-dashoffset 500ms cubic-bezier(.76,0,.24,1)}
/* ===== ISLAND EXPANDED STATE ===== */
.nav.island-open{
  height:var(--island-h, 520px);
  padding:14px 14px 28px 14px;
  border-color:rgba(255,255,255,.15);
  box-shadow:0 12px 50px rgba(0,0,0,.35);
}
[data-theme="light"] .nav.island-open{ border-color:rgba(255,255,255,.15); }
[data-theme="lightproject"] .nav.island-open{ border-color:rgba(255,255,255,.15); }
/* Top row stays pinned */
.nav-top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  flex-shrink:0;
  min-height:46px;
}
/* Menu content inside the island */
.island-menu{
  width:100%;
  padding:16px 4px 0;
  display:flex;
  flex-direction:column;
  gap:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s cubic-bezier(.76,0,.24,1);
}
.nav.island-open .island-menu{
  opacity:1;
  pointer-events:auto;
  transition-delay:.12s;
}
.island-menu-link{
  font-family:var(--font-primary);
  font-size:clamp(1.2rem, 2.4vw, 1.8rem);
  font-weight:500;
  text-transform:none;
  color:rgba(255,255,255,.7);
  line-height:1;
  padding:12px 0;
  display:block;
  position:relative;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .4s cubic-bezier(.76,0,.24,1), transform .4s cubic-bezier(.76,0,.24,1), color var(--transition-fast);
}
.nav.island-open .island-menu-link{
  opacity:1;
  transform:translateY(0);
}
.nav.island-open .island-menu-link:nth-child(1){transition-delay:.06s}
.nav.island-open .island-menu-link:nth-child(2){transition-delay:.1s}
.nav.island-open .island-menu-link:nth-child(3){transition-delay:.14s}
.nav.island-open .island-menu-link:nth-child(4){transition-delay:.18s}
.nav.island-open .island-menu-link:nth-child(5){transition-delay:.22s}
.island-menu-link:hover{color:#fff}
/* Island menu footer — mobile controls */
.island-menu-footer{
  display:none;
  gap:8px;
  margin-top:16px;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .4s cubic-bezier(.76,0,.24,1), transform .4s cubic-bezier(.76,0,.24,1);
}
.nav.island-open .island-menu-footer{
  opacity:1;
  transform:translateY(0);
  transition-delay:.26s;
}
/* Hide desktop controls on mobile, show footer controls instead */
@media(max-width:768px){
  .nav-toggle-btn.desktop-only{display:none}
  .island-menu-footer{display:flex;margin-top:6px}
  .nav-outer{padding:10px 10px 0}
  .nav{padding:10px;border-radius:16px;height:62px}
  .nav-logo-img{height:1.7rem}
  .ham{width:42px;height:42px}
  .nav-toggle-btn{width:42px;height:42px}
  .nav-top-row{min-height:42px}
  .island-menu{padding:10px 2px 0}
  .island-menu-link{font-size:clamp(1.1rem, 4vw, 1.5rem);padding:10px 0}
}
@media(min-width:769px){
  .nav-toggle-btn.desktop-only{display:flex}
  .island-menu-footer{display:none}
}
.mmenu{display:none!important}
/* ===== GLOW BUTTON — .tos-btn ===== */
.tos-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:2rem;padding:.7rem 1.6rem;font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text);border:1px solid var(--color-border);background:transparent;transition:all var(--transition-fast);border-radius:var(--radius-btn)}
[data-theme="light"] .tos-btn{background:transparent;border-color:var(--color-border);color:var(--color-text-primary)}
[data-theme="lightproject"] .tos-btn{background:transparent;border-color:var(--color-border);color:var(--color-text-primary)}
.tos-btn:hover{border-color:rgba(var(--color-accent-rgb),.4);background:rgba(var(--color-accent-rgb),.06);color:var(--accent)}
/* PAGE TRANSITIONS */
.page{opacity:1;transform:none;animation:none}
/* ===== HERO — RICKROLL SPLIT LAYOUT ===== */
.hero-rickroll {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
  background: var(--color-bg-primary);
}
.hero-rickroll-inner {
  position:relative;
  z-index:2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%;
  padding: 9rem 8vw 4rem;
  gap: clamp(2rem, 4vw, 5rem);
  min-height: 100svh;
}
/* ---- Left: Text content ---- */
.hero-rickroll-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}
.hero-rickroll-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.8rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hero-rickroll-label::before {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: var(--accent);
}
.hero-rickroll-title {
  font-family: var(--font-primary);
  font-size: clamp(2.4rem, min(5.5vw, 7svh), 5.5rem);
  font-weight: 700;
  line-height: .92;
  text-transform: uppercase;
  color: var(--color-text-primary);
}
.hero-rickroll-title em {
  font-style: normal;
  font-weight: inherit;
  display: inline;
  position: relative;
}
.hero-rickroll-sub {
  font-size: 1.5rem;
  color: var(--color-text-secondary);
  max-width: 900px;
  margin-top: 1.8rem;
  line-height: 1.75;
  font-weight: 300;
  hyphens: auto;
}
.hero-rickroll-ctas {
  display: flex;
  gap: 1rem;
  margin-top: 2.8rem;
  flex-wrap: wrap;
}
/* ---- Right: 3D Container ---- */
.hero-rickroll-3d {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  overflow: visible;
}
.hero-3d-container {
  width: 200%;
  aspect-ratio: 1 / 1;
  position: relative;
  opacity: 0;
  animation: fadeUp .9s .5s forwards;
}
.hero-3d-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-3d-container canvas.visible {
  opacity: 1;
}
/* ---- Scroll down indicator ---- */
.hero-rickroll-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .6rem;
  z-index: 3;
}
.hero-rickroll-scroll-hint span {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-rickroll-scroll-hint .scroll-arrow {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: rgba(var(--color-accent-rgb), .12);
  border: 1px solid rgba(var(--color-accent-rgb), .35);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
.hero-cta-primary{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-text-on-dark);
  border:1px solid rgba(var(--color-accent-rgb),.35);
  padding:1.05rem 2.4rem;
  background:rgba(var(--color-accent-rgb),.12);
  border-radius:var(--radius-btn);
  transition:all .25s ease;
  position:relative;
  overflow:hidden;
}
.hero-cta-primary::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(var(--color-accent-rgb),.15) 0%, transparent 60%);
  opacity:0;
  transition:opacity .3s;
}
.hero-cta-primary:hover{
  background:rgba(var(--color-accent-rgb),.2);
  border-color:rgba(var(--color-accent-rgb),.6);
  transform:translateY(-1px);
}
.hero-cta-primary:hover::before{opacity:1}
[data-theme="light"] .hero-cta-primary{background:var(--color-accent);color:var(--color-text-on-dark);border-color:var(--color-accent)}
[data-theme="lightproject"] .hero-cta-primary{background:var(--color-accent);color:var(--color-text-on-dark);border-color:var(--color-accent)}
[data-theme="light"] .hero-cta-primary:hover{background:var(--accent2)}
[data-theme="lightproject"] .hero-cta-primary:hover{background:var(--accent2)}
.hero-cta-secondary{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-text-primary);
  border:1px solid var(--color-border);
  padding:1.05rem 2.4rem;
  background:transparent;
  border-radius:var(--radius-btn);
  transition:all .25s ease;
}
.hero-cta-secondary:hover{
  background:rgba(var(--color-accent-rgb),.06);
  border-color:rgba(var(--color-accent-rgb),.3);
  color:var(--accent);
  transform:translateY(-1px);
}
[data-theme="light"] .hero-cta-secondary{border-color:var(--color-border-strong);color:var(--color-text-primary);background:transparent}
[data-theme="lightproject"] .hero-cta-secondary{border-color:var(--color-border-strong);color:var(--color-text-primary);background:transparent}
[data-theme="light"] .hero-cta-secondary:hover{background:rgba(var(--color-accent-rgb),.06);border-color:rgba(var(--color-accent-rgb),.3);color:var(--accent)}
[data-theme="lightproject"] .hero-cta-secondary:hover{background:rgba(var(--color-accent-rgb),.06);border-color:rgba(var(--color-accent-rgb),.3);color:var(--accent)}
/* HERO ACCENT STRIP */
.hero-accent{background:var(--color-bg-card-dark);padding:3rem 8vw;position:relative;overflow:hidden;border-top:1px solid rgba(var(--color-accent-rgb),.1);border-bottom:1px solid rgba(var(--color-accent-rgb),.1)}
[data-theme="light"] .hero-accent{background:var(--color-bg-secondary);border-top-color:var(--color-border);border-bottom-color:var(--color-border)}
[data-theme="lightproject"] .hero-accent{background:var(--color-bg-secondary);border-top-color:var(--color-border);border-bottom-color:var(--color-border)}
.hero-accent::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%, rgba(var(--color-accent-rgb),.04) 0%, transparent 70%);pointer-events:none}
.hero-accent-inner{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;position:relative;z-index:1}
.hero-accent-text{font-family:var(--font-mono);font-size:clamp(1rem,2vw,1.6rem);font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-on-dark)}
[data-theme="light"] .hero-accent-text{color:var(--color-text-primary)}
[data-theme="lightproject"] .hero-accent-text{color:var(--color-text-primary)}
.hero-accent-dot{font-size:clamp(1.4rem,3vw,2.8rem);color:var(--color-accent);font-weight:300}
/* STORY SECTION */
.story-section{padding:10rem 8vw;position:relative;display:flex;align-items:center;justify-content:center;min-height:70vh;border-bottom:1px solid var(--color-border)}
.story-text{font-family:var(--font-primary);font-size:clamp(1.6rem,3.2vw,2.8rem);font-weight:300;line-height:1.55;max-width:1250px;text-align:left;color:var(--text)}
.story-text em{font-style:normal;font-weight:inherit;color:var(--text);position:relative;display:inline;white-space:nowrap}
.story-text em::before{content:'';position:absolute;left:-.06em;right:-.06em;bottom:.05em;height:.35em;background:rgba(var(--color-accent-rgb),.15);z-index:-1;border-radius:3px;transform-origin:left;transform:scaleX(0);transition:transform .6s cubic-bezier(.23,1,.32,1)}
.reveal.vis .story-text.na-highlights-ready em::before,.reveal.vis.na-highlights-ready .story-text em::before{transform:scaleX(1)}
/* SECTIONS */
.section{padding:7rem 8vw;position:relative;border-bottom:1px solid var(--color-border)}
.section-label{font-family:var(--font-mono);font-size:.68rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.section h2{font-family:var(--font-primary);font-size:clamp(2.4rem,5.5vw,5rem);font-weight:700;line-height:1.05;max-width:720px;margin-bottom:2.5rem;text-transform:uppercase}
.section h2 em{font-style:normal;font-weight:inherit;color:var(--text);text-transform:uppercase;position:relative;display:inline;white-space:nowrap}
.section h2 em::before{content:'';position:absolute;left:-.06em;right:-.06em;bottom:.05em;height:.35em;background:rgba(var(--color-accent-rgb),.15);z-index:-1;border-radius:3px;transform-origin:left;transform:scaleX(0);transition:transform .6s cubic-bezier(.23,1,.32,1)}
.reveal.vis .section h2.na-highlights-ready em::before,.reveal.vis.na-highlights-ready .section h2 em::before{transform:scaleX(1)}
.section-text{font-size:1.5rem;color:var(--text2);max-width:900px;line-height:1.8;font-weight:300;hyphens:auto}
/* ===== SERVICE CARDS  ===== */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;background:none;margin-top:3rem;overflow:visible;border:none;}
.scard{background:var(--bg2);padding:2.8rem 2.2rem;transition:all .3s ease;border-radius:var(--radius-card);border:1px solid var(--color-border);position:relative}
.scard:hover{}
.scard .num{font-family:var(--font-mono);font-size:2.8rem;font-weight:700;color:var(--color-text-muted);line-height:1;margin-bottom:1.2rem;transition:color var(--transition-fast),text-shadow var(--transition-fast)}
.scard:hover .num{}
.scard h3{font-family:var(--font-primary);font-size:clamp(1.7rem,2.5vw,2.3rem);font-weight:600;margin-bottom:.8rem;text-transform:uppercase}
.scard p{font-size:1.5rem;color:var(--text2);line-height:1.7;font-weight:300;hyphens:auto}
.stags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.3rem}
.stag{font-size:.6rem;padding:.3rem .7rem;background:transparent;color:var(--tag-text);letter-spacing:.08em;border-radius:var(--radius-btn);font-weight:500;font-family:var(--font-mono);border:1px solid var(--color-border);text-transform:uppercase;transition:all var(--transition-fast)}
.scard:hover .stag{}
/* ===== WORK GRID  ===== */
.wgrid{display:grid;grid-template-columns:1fr;gap:3rem;margin-top:4rem}
.witem{position:relative;overflow:hidden;aspect-ratio:16/9;background:transparent;border-radius:var(--radius-card);border:none}
.witem:hover{border-color:rgba(var(--color-accent-rgb),.25)}
.witem img{width:100%;height:100%;object-fit:cover}
.witem:hover img{transform:scale(1.02)}
.woverlay{position:absolute;bottom:-1px;left:-1px;right:-1px;padding:2.2rem;padding-bottom:calc(2.2rem + 1px);background:rgba(6,6,10,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transform:translateY(16px);opacity:0;transition:all .3s ease;z-index:3;border-top:1px solid rgba(var(--color-accent-rgb),.12)}
.witem:hover .woverlay{opacity:1;transform:translateY(0)}
.woverlay h3{font-family:var(--font-primary);font-size:clamp(1.7rem,2.5vw,2.3rem);font-weight:600;color:var(--color-text-on-dark);margin-bottom:.3rem;text-transform:uppercase}
.woverlay .wcat{font-size:.65rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.1em;font-weight:500;font-family:var(--font-mono)}
.wgrid.home-grid{grid-template-columns:repeat(2,1fr);gap:3rem}
.wgrid.home-grid .witem{aspect-ratio:16/11}
.wgrid.home-grid .witem.feat{grid-column:span 2;aspect-ratio:21/9}
/* CONTENT BLOCKS */
.cblock{display:grid;grid-template-columns:1fr 1.4fr;gap:0rem 1rem;padding:4rem 0;align-items:start}
.cblock-label{font-family:var(--font-primary);font-size:clamp(2rem,3vw,2.8rem);font-weight:600;text-transform:uppercase;line-height:1.15;color:var(--text);position:relative}
.cblock-body{font-size:1.5rem;color:var(--text2);line-height:1.85;font-weight:300;hyphens:auto}
.cblock-body p{text-align: left;margin-bottom:1.2rem}
.cblock-body p:last-child{margin-bottom:0}
.centerblock{text-align:center;max-width:none;margin:0 auto;padding:4rem 0}
.centerblock h3{font-family:var(--font-primary);font-size:clamp(2rem,3vw,2.8rem);font-weight:600;text-transform:uppercase;margin-bottom:1.2rem;color:var(--text)}
.centerblock p{text-align: left;font-size:1.5rem;color:var(--text2);line-height:1.85;font-weight:300;hyphens:auto}
.fullimg{width:100%;aspect-ratio:21/7;background:var(--bg2);overflow:hidden;margin-top:3rem;margin-bottom:1rem;border-radius:var(--radius-card);border:none}
.fullimg img{width:100%;height:100%;object-fit:cover}
.fullimg-nobg{background:none;border-radius:0}
.fullimg-nobg img{object-fit:contain}
/* Strategy Section — 3D + Text */
.strategy-section{display:grid;grid-template-columns:1fr 1.4fr;gap:0rem 1rem;padding:5rem 0;align-items:center}
.strategy-3d{width:100%;aspect-ratio:1/1;max-width:420px}
.strategy-3d canvas{display:block;width:100%!important;height:100%!important}
.strategy-label{font-family:var(--font-primary);font-size:clamp(.65rem,.9vw,.75rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.strategy-title{font-family:var(--font-primary);font-size:clamp(2rem,3vw,2.8rem);font-weight:600;text-transform:uppercase;line-height:1.15;color:var(--text);margin-bottom:1.4rem}
.strategy-text{font-size:1.5rem;color:var(--text2);line-height:1.85;font-weight:300;hyphens:auto}
.strategy-text p{margin-bottom:1.2rem}
.strategy-text p:last-child{margin-bottom:0}
@media(max-width:1120px){.strategy-section{grid-template-columns:1fr;gap:2rem}.strategy-3d{max-width:280px;margin:0 auto}}
@media(max-width:600px){.strategy-3d{max-width:200px}}
@media(max-width:1120px){.cblock{grid-template-columns:1fr;gap:1rem}.cblock-label{position:static}.fullimg{aspect-ratio:16/7}}
/* PROJECT */
.pdetail{padding:9rem 8vw 5rem;background:var(--pdetail-bg,transparent);transition:background .4s}
.pdetail .pback{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--pdetail-text2,var(--text2));margin-bottom:2.5rem;background:none;border:none;transition:color var(--transition-fast),text-shadow var(--transition-fast)}
.pdetail .pback:hover{color:var(--accent)}
.pheader{max-width:800px;margin-bottom:3.5rem}
.pheader h1{font-family:var(--font-primary);font-size:clamp(2.4rem,5.5vw,5rem);font-weight:700;line-height:1.05;margin-bottom:1.5rem;text-transform:uppercase;color:var(--pdetail-h1,var(--text))}
.pmeta{display:flex;gap:2.5rem;flex-wrap:wrap;font-size:1.1rem;color:var(--pdetail-text2,var(--text2))}
.pmeta dt{font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;color:var(--pdetail-dt,var(--accent));margin-bottom:.2rem;font-weight:700;font-family:var(--font-mono)}
.pdesc{max-width:900px;font-size:1.5rem;color:var(--pdetail-p,var(--text2));line-height:1.85;font-weight:300;margin-bottom:3.5rem;hyphens:auto}
.pgal{display:flex;flex-direction:column;gap:1.5rem}
.pgal .pgal-frame{overflow:hidden;border-radius:var(--radius-card);background:transparent;border:none;transition:box-shadow .3s}
.pgal .pgal-frame:hover{}
.pgal .pgal-frame img{width:100%;display:block}
.pgal .pgal-frame:hover img{}
.pgal .irow{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
/* TESTIMONIAL */
.ptestimonial{margin-top:4rem;padding:3rem 0;border-top:1px solid var(--color-border)}
.ptesti-inner{display:flex;gap:2rem;align-items:flex-start}
.ptesti-photo{width:128px;height:128px;max-width:100%;border-radius:var(--radius-small);background:var(--bg3);flex-shrink:0;object-fit:cover;display:block;border:none}
.ptesti-content{flex:1}
.ptesti-label{font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.ptesti-name{font-family:var(--font-primary);font-size:1.5rem;font-weight:600;color:var(--pdetail-h1,var(--text));margin-bottom:.15rem}
.ptesti-role{font-size:1.1rem;color:var(--pdetail-text2,var(--text2));font-weight:400;margin-bottom:1.2rem}
.ptesti-quote{font-size:1rem;color:var(--pdetail-p,var(--text2));line-height:1.85;font-weight:300;font-style:italic;max-width:700px;hyphens:auto}
/* ===== CONTACT FORM PAGE ===== */
.contact-page{padding:9rem 8vw 5rem}
.contact-page .pback{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text2);margin-bottom:2.5rem;background:none;border:none;transition:color var(--transition-fast)}
.contact-page .pback:hover{color:var(--accent)}
.contact-top{margin-bottom:3.5rem}
.contact-header-inner{margin-bottom:3rem}
.contact-body{display:grid;grid-template-columns:1fr 1.2fr;gap:4.5rem;align-items:start}
.contact-photo-wrap{display:flex;flex-direction:column;align-items:center}
.contact-photo{width:80%;aspect-ratio:1/1;background:var(--bg3);border-radius:var(--radius-card);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;overflow:hidden;border:none;font-family:var(--font-mono)}
.contact-photo img{width:100%;height:100%;object-fit:cover;display:block}
.contact-photo-name{display:block;margin-top:1.2rem;font-size:1.3rem;font-weight:700;color:var(--text1);letter-spacing:.02em;text-align:center}
.contact-photo-bio{margin-top:.4rem;font-size:.85rem;color:var(--text3);text-align:center;line-height:1.5;max-width:90%;font-weight:400}
.contact-header-inner h1{font-family:var(--font-primary);font-size:clamp(2.4rem,5.5vw,5rem);font-weight:700;line-height:1.05;margin-bottom:1.5rem;text-transform:uppercase}
.contact-header-inner h1 em{font-style:normal;font-weight:inherit;position:relative;display:inline;white-space:nowrap}
.contact-header-inner h1 em::before{content:'';position:absolute;left:-.06em;right:-.06em;bottom:.05em;height:.35em;background:rgba(var(--color-accent-rgb),.15);z-index:-1;border-radius:3px;transform-origin:left;transform:scaleX(0);transition:transform .6s cubic-bezier(.23,1,.32,1)}
.contact-header-inner h1.hw-vis.na-highlights-ready em::before,.contact-header-inner h1.na-highlights-ready em::before{transform:scaleX(1)}
.contact-intro{font-size:1.5rem;color:var(--text2);line-height:1.85;font-weight:300;hyphens:auto}
/* ===== FORM focus states ===== */
.contact-form{display:flex;flex-direction:column;gap:1.8rem;width:100%}
.cf-group input,.cf-group textarea{font-family:var(--font-primary);font-size:.92rem;font-weight:400;color:var(--text);background-color:rgba(var(--color-accent-rgb),.02);border:1px solid var(--color-border);padding:.85rem 1rem;border-radius:var(--radius-small);transition:all .25s ease;outline:none;width:100%}
.cf-group input::placeholder,.cf-group textarea::placeholder{color:var(--text3);font-weight:300}
.cf-group input:focus,.cf-group textarea:focus{border-color:rgba(var(--color-accent-rgb),.4);background-color:rgba(var(--color-accent-rgb),.04)}
.cf-group label{font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text2)}
.cf-group label .req{color:var(--accent);margin-left:.15rem}
.cf-group textarea{resize:vertical;min-height:160px}
/* CUSTOM SELECT */
.csel{position:relative;width:100%}
.csel-trigger{font-family:var(--font-primary);font-size:.92rem;font-weight:400;color:var(--text);background-color:rgba(var(--color-accent-rgb),.02);border:1px solid var(--color-border);padding:.85rem 1rem;border-radius:var(--radius-small);transition:all .25s ease;width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.csel-trigger.placeholder{color:var(--text3);font-weight:300}
.csel-trigger:focus,.csel.open .csel-trigger{border-color:rgba(var(--color-accent-rgb),.4);background-color:rgba(var(--color-accent-rgb),.04)}
.csel-trigger svg{flex-shrink:0;transition:transform .3s;color:var(--text3)}
.csel.open .csel-trigger svg{transform:rotate(180deg)}
.csel-opts{position:absolute;top:calc(100% + 4px);left:0;right:0;background-color:var(--bg2);border:1px solid rgba(var(--color-accent-rgb),.15);border-radius:var(--radius-small);max-height:290px;overflow-y:auto;z-index:500;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .25s;scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;backdrop-filter:blur(16px);box-shadow:0 8px 32px rgba(0,0,0,.3)}
.csel.open .csel-opts{opacity:1;transform:translateY(0);pointer-events:auto}
.csel-opt{font-family:var(--font-primary);font-size:.88rem;font-weight:400;color:var(--text2);padding:.75rem 1rem;transition:all var(--transition-fast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csel-opt:hover{background-color:rgba(var(--color-accent-rgb),.08);color:var(--text)}
.csel-opt.active{color:var(--accent);font-weight:600}
.csel-trigger,.csel-opt{cursor:pointer}
/* ===== SUBMIT BUTTON  ===== */
.cf-submit{
  display:inline-flex;align-items:center;gap:.7rem;padding:1.05rem 2.4rem;
  background:rgba(var(--color-accent-rgb),.12);
  color:var(--accent);
  font-family:var(--font-mono);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(var(--color-accent-rgb),.35);
  border-radius:var(--radius-btn);
  transition:all .25s ease;margin-top:.5rem;
  position:relative;overflow:hidden;
}
.cf-submit::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(var(--color-accent-rgb),.15) 0%, transparent 60%);
  opacity:0;transition:opacity .3s;
}
[data-theme="light"] .cf-submit{background:var(--color-accent);color:var(--color-text-on-dark);border-color:var(--color-accent)}
[data-theme="lightproject"] .cf-submit{background:var(--color-accent);color:var(--color-text-on-dark);border-color:var(--color-accent)}
.cf-submit:hover{
  background:rgba(var(--color-accent-rgb),.2);
  border-color:rgba(var(--color-accent-rgb),.6);
  color:var(--color-text-primary);
  transform:translateY(-1px);
}
.cf-submit:hover::before{opacity:1}
[data-theme="light"] .cf-submit:hover{background:var(--color-accent-hover);color:var(--color-text-on-dark)}
[data-theme="lightproject"] .cf-submit:hover{background:var(--color-accent-hover);color:var(--color-text-on-dark)}
.cf-success{display:none;padding:2rem;background:transparent;border:1px solid rgba(var(--color-accent-rgb),.2);border-radius:var(--radius-card);text-align:center;width:100%}
.cf-success h3{font-family:var(--font-primary);font-size:1.3rem;font-weight:600;text-transform:uppercase;margin-bottom:.6rem}
.cf-success p{font-size:.92rem;color:var(--text2);font-weight:300}
/* ToS checkbox */
.cf-tos-group{margin-top:-.4rem}
.cf-tos-label{display:inline-flex;align-items:flex-start;gap:.65rem;cursor:pointer;font-family:var(--font-primary);font-size:.82rem;color:var(--text2);line-height:1.5;font-weight:300}
.cf-tos-label input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0}
.cf-tos-check{flex-shrink:0;width:18px;height:18px;border:1px solid var(--color-border);border-radius:4px;background:rgba(var(--color-accent-rgb),.02);transition:all .2s ease;position:relative;margin-top:1px}
.cf-tos-label input:checked~.cf-tos-check{background:rgba(var(--color-accent-rgb),.15);border-color:rgba(var(--color-accent-rgb),.5)}
.cf-tos-label input:checked~.cf-tos-check::after{content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
[data-theme="light"] .cf-tos-label input:checked~.cf-tos-check{background:var(--color-accent);border-color:var(--color-accent)}
[data-theme="light"] .cf-tos-label input:checked~.cf-tos-check::after{border-color:var(--color-text-on-dark)}
[data-theme="lightproject"] .cf-tos-label input:checked~.cf-tos-check{background:var(--color-accent);border-color:var(--color-accent)}
[data-theme="lightproject"] .cf-tos-label input:checked~.cf-tos-check::after{border-color:var(--color-text-on-dark)}
.cf-tos-label input:focus-visible~.cf-tos-check{outline:2px solid var(--accent);outline-offset:2px}
.cf-tos-text a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.cf-tos-text a:hover{color:var(--color-text-primary)}
/* Turnstile widget */
.cf-turnstile{margin-top:.2rem}
/* Error message */
.cf-error{display:none;font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.04em;color:#e85454;padding:.7rem 1rem;background:rgba(232,84,84,.06);border:1px solid rgba(232,84,84,.2);border-radius:var(--radius-small)}
.cf-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}
@media(max-width:1120px){.contact-body{grid-template-columns:1fr;gap:2rem}.contact-photo-wrap{position:static;max-width:400px;margin:0 auto}}
@media(max-width:600px){.ptesti-inner{flex-direction:column;gap:1rem}}
/* ===== ABOUT — SNELLENBERG-INSPIRED ===== */
.abt-page{padding-top:9rem}

/* Hero */
.abt-hero-section{padding:0 8vw 5rem}
.abt-headline{font-size:clamp(3rem,7vw,6rem)!important;line-height:1.02!important;letter-spacing:-.03em}

/* Intro: portrait + text — same grid ratio as cblock (1fr 1.4fr) */
.abt-intro-section{padding:0 8vw 0}
.abt-intro-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:0rem 1rem;align-items:start}
.abt-portrait{width:80%;aspect-ratio:1/1;border-radius:var(--radius-card);overflow:hidden;border:none;background:var(--bg3);position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:4rem}
.abt-portrait img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.abt-portrait-label{position:absolute;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);font-weight:500;z-index:0}
.abt-portrait img+.abt-portrait-label{display:none}
.abt-portrait-ph .abt-portrait-label{display:block}
.abt-intro-text{padding-top:.5rem;hyphens:auto}
.abt-body{font-family:var(--font-primary);font-size:1.5rem;color:var(--text2);line-height:1.85;font-weight:300}
.abt-body em{font-style:normal;color:var(--text);font-weight:400}

/* cblock sections inside about — inherits cblock styling, just needs wrapper padding */
.abt-block-section{padding:0 8vw;border-top:1px solid var(--color-border)}
.abt-block-section .cblock{padding:4rem 0}

/* ===== 3D CARDS SECTION ===== */
.abt-3d-section{padding:5rem 8vw;position:relative;border-top:1px solid var(--color-border)}
.abt-3d-cards-wrap{display:flex;flex-direction:column;align-items:center}
.abt-3d-headline{
  font-family:var(--font-primary);
  font-size:clamp(2rem,3vw,2.8rem);
  font-weight:600;
  text-transform:uppercase;
  line-height:1.15;
  color:var(--text);
  text-align:center;
  margin-bottom:3rem;
}
.abt-3d-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  width:100%;
}
.abt-3d-card{
  background:var(--bg2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  overflow:hidden;
  transition:all .4s cubic-bezier(.23,1,.32,1);
  display:flex;
  flex-direction:column;
}
.abt-3d-card:hover{
  border-color:rgba(var(--color-accent-rgb),.25);
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,.12);
}
.abt-3d-card-canvas{
  width:100%;
  aspect-ratio:1/1;
  position:relative;
  background:transparent;
  overflow:hidden;
}
.abt-3d-card-canvas canvas{
  display:block;
  width:100%!important;
  height:100%!important;
  background:transparent!important;
  opacity:0;
  transition:opacity .4s ease;
}
.abt-3d-card-canvas canvas.visible{opacity:1}
.abt-3d-card-content{
  padding:1.6rem 1.8rem 2rem;
  border-top:1px solid var(--color-border);
}
.abt-3d-card-label{
  font-family:var(--font-mono);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:block;
  margin-bottom:.6rem;
}
.abt-3d-card-desc{
  font-family:var(--font-primary);
  font-size:1.5rem;
  color:var(--text2);
  line-height:1.7;
  font-weight:300;
}
.abt-3d-caption-text{
  font-family:var(--font-primary);
  font-size:1.5rem;
  color:var(--text2);
  line-height:1.8;
  font-weight:300;
  text-align:center;
  max-width:700px;
  hyphens:auto;
  margin-top:2.5rem;
}

/* Philosophy — uses centerblock, just needs wrapper padding */
.abt-philosophy-section{padding:2rem 8vw 6rem;border-top:1px solid var(--color-border)}

/* About responsive */
@media(max-width:1120px){
  .abt-intro-grid{grid-template-columns:1fr 1.4fr;gap:0 1rem}
}
@media(max-width:768px){
  .abt-page{padding-top:7rem}
  .abt-hero-section{padding:0 6vw 3rem}
  .abt-intro-section{padding:0 6vw 0}
  .abt-intro-grid{grid-template-columns:1fr;gap:2.5rem}
  .abt-portrait{width:100%;max-width:none;margin:0 auto 2rem}
  .abt-block-section{padding:0 6vw}
  .abt-3d-section{padding:3rem 6vw}
  .abt-3d-cards{grid-template-columns:1fr;max-width:none;margin:0}
  .abt-philosophy-section{padding:1rem 6vw 4rem}
}
@media(max-width:600px){
  .abt-headline{font-size:clamp(2.2rem,10vw,3.2rem)!important}
  .abt-portrait{max-width:none}
  .abt-block-section{padding:0 1.5rem}
  .abt-3d-section{padding:2.5rem 1.5rem}
  .abt-3d-cards{max-width:none;gap:1.2rem}
  .abt-3d-card-content{padding:1.2rem 1.4rem 1.6rem}
  .abt-philosophy-section{padding:1rem 1.5rem 3rem}
}
/* ===== STATS GRID (shared) ===== */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--color-border)}
.sgrid .num{font-family:var(--font-mono);font-size:2.8rem;font-weight:600;color:var(--accent);line-height:1}
.sgrid .label{font-size:.6rem;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;margin-top:.35rem;font-weight:400;font-family:var(--font-mono)}

/* ===== 404 NOT FOUND PAGE ===== */
.notfound-page{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;min-height:100dvh;
  padding:9rem 8vw 4rem;
  text-align:center;
}
.notfound-inner{
  max-width:820px;width:100%;margin:0 auto;
}
.notfound-img-wrap{
  width:100%;aspect-ratio:16/9;
  border-radius:var(--radius-card,12px);
  overflow:hidden;margin-bottom:2.5rem;
}
.notfound-img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.notfound-title{
  font-size:clamp(2rem,5vw,3.5rem);
  margin-bottom:.8rem;
}
.notfound-sub{
  font-family:var(--font-primary);font-size:1.5rem;
  color:var(--text2);line-height:1.6;
  max-width:500px;margin:0 auto 2rem;
}
.notfound-cta{
  display:flex;justify-content:center;
}
.notfound-btn{
  margin:0 auto;
}
@media(max-width:600px){
  .notfound-page{padding:7rem 5vw 3rem}
  .notfound-inner{max-width:100%}
  .notfound-img-wrap{margin-bottom:1.8rem}
  .notfound-sub{margin-bottom:1.5rem}
}

/* ===== FOOTER ===== */
.footer{background:var(--footer-bg);padding:4rem 0 2rem;border-top:1px solid rgba(var(--color-accent-rgb),.08)}
.footer-inner{max-width:1600px;margin:0 auto;padding:0 8vw}
.ftop{display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:2.5rem;margin-bottom:3.5rem}
.fbrand{display:flex;align-items:center}.fbrand .nav-logo-img{height:2.4rem;width:auto}
.ftag{font-family:var(--font-primary);font-size:1.8rem;font-weight:300;font-style:italic;color:var(--text2);max-width:400px;line-height:1.3;margin-top:.6rem}
/* Footer CTA button */
.fcta{
  display:inline-flex;align-items:center;gap:.7rem;padding:1.05rem 2.4rem;
  background:rgba(var(--color-accent-rgb),.12);
  color:var(--accent);
  font-family:var(--font-mono);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(var(--color-accent-rgb),.35);
  border-radius:var(--radius-btn);
  transition:all .25s ease;
  position:relative;overflow:hidden;
}
.fcta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(var(--color-accent-rgb),.15) 0%, transparent 60%);
  opacity:0;transition:opacity .3s;
}
[data-theme="light"] .fcta{background:var(--color-accent);color:var(--color-text-on-dark);border-color:var(--color-accent)}
[data-theme="lightproject"] .fcta{background:#007588;color:#e0e0e4;border-color:#007588}
[data-theme="darkproject"] .fcta{background:rgba(0,180,210,.12);color:#007588;border-color:rgba(0,180,210,.35)}
.fcta:hover{
  background:rgba(var(--color-accent-rgb),.2);
  border-color:rgba(var(--color-accent-rgb),.6);
  color:var(--color-text-primary);
  transform:translateY(-1px);
}
.fcta:hover::before{opacity:1}
[data-theme="light"] .fcta:hover{background:var(--color-accent-hover);color:var(--color-text-on-dark)}
[data-theme="lightproject"] .fcta:hover{background:#3290b3;color:#e0e0e4}
[data-theme="darkproject"] .fcta:hover{background:rgba(0,180,210,.2);border-color:rgba(0,180,210,.6);color:#63b7ed}
.fmid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;padding:2rem 0;margin-bottom:1.8rem;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.fsocial{display:flex;gap:2.5rem;align-items:center}
/* ===== LETTER-ANIMATED SOCIAL LINKS ===== */
.letter-link{
  display:inline-block;
  overflow:hidden;
  position:relative;
}
.letter-link a{
  font-family:var(--font-mono);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text);
  display:inline-flex;
  position:relative;
}
.letter-link a .letter{
  display:inline-block;
  transition:transform .4s cubic-bezier(.23,1,.32,1), color .3s;
  position:relative;
}
.letter-link:hover a .letter{
  transform:translateY(-110%);
  color:var(--accent);
}
/* Staggered delays for each letter */
.letter-link a .letter:nth-child(1){transition-delay:0ms}
.letter-link a .letter:nth-child(2){transition-delay:20ms}
.letter-link a .letter:nth-child(3){transition-delay:40ms}
.letter-link a .letter:nth-child(4){transition-delay:60ms}
.letter-link a .letter:nth-child(5){transition-delay:80ms}
.letter-link a .letter:nth-child(6){transition-delay:100ms}
.letter-link a .letter:nth-child(7){transition-delay:120ms}
.letter-link a .letter:nth-child(8){transition-delay:140ms}
.letter-link a .letter:nth-child(9){transition-delay:160ms}
/* The duplicate text for the reveal-from-below effect */
.letter-link .letter-clone{
  position:absolute;
  top:0;
  left:0;
  display:inline-flex;
  pointer-events:none;
}
.letter-link .letter-clone .letter{
  display:inline-block;
  transform:translateY(110%);
  transition:transform .4s cubic-bezier(.23,1,.32,1), color .3s;
  color:var(--accent);
}
.letter-link:hover .letter-clone .letter{
  transform:translateY(0);
}
.letter-link .letter-clone .letter:nth-child(1){transition-delay:0ms}
.letter-link .letter-clone .letter:nth-child(2){transition-delay:20ms}
.letter-link .letter-clone .letter:nth-child(3){transition-delay:40ms}
.letter-link .letter-clone .letter:nth-child(4){transition-delay:60ms}
.letter-link .letter-clone .letter:nth-child(5){transition-delay:80ms}
.letter-link .letter-clone .letter:nth-child(6){transition-delay:100ms}
.letter-link .letter-clone .letter:nth-child(7){transition-delay:120ms}
.letter-link .letter-clone .letter:nth-child(8){transition-delay:140ms}
.letter-link .letter-clone .letter:nth-child(9){transition-delay:160ms}
.fbot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:.72rem;color:var(--text3);font-weight:300}
.flegal{display:flex;gap:1.3rem}
.flegal a{color:var(--text3);transition:color .3s}.flegal a:hover{color:var(--accent)}
/* LEGAL */
.lpage{padding:9rem 8vw 5rem;max-width:780px}
.lpage .pback{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text2);margin-bottom:2.5rem;background:none;border:none;transition:color var(--transition-fast)}
.lpage .pback:hover{color:var(--accent)}
.lpage h1{font-family:var(--font-primary);font-size:2.8rem;font-weight:700;margin-bottom:2rem;text-transform:uppercase}
.lpage h2{font-family:var(--font-primary);font-size:1.3rem;font-weight:600;margin:2rem 0 .8rem;text-transform:uppercase}
.lpage p{font-size:.92rem;color:var(--text2);line-height:1.8;margin-bottom:.8rem;font-weight:300}
/* ===== LEGAL PAGE — Sidebar Navigation Layout ===== */
.lpage-with-nav{max-width:1100px}
.lpage-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:4rem;
  align-items:start;
}
.lpage-nav{
  position:sticky;
  top:7rem;
  display:flex;
  flex-direction:column;
  gap:0;
  padding-right:1.5rem;
  border-right:1px solid var(--color-border);
}
.lpage-nav-label{
  font-family:var(--font-mono);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1.2rem;
  padding-bottom:.8rem;
  border-bottom:1px solid var(--color-border);
}
.lpage-nav-link{
  font-family:var(--font-primary);
  font-size:.78rem;
  font-weight:400;
  color:var(--text3);
  padding:.5rem 0;
  transition:color .25s ease;
  line-height:1.4;
}
.lpage-nav-link:hover{
  color:var(--accent);
}
.lpage-nav-link.active{
  color:var(--text);
  font-weight:600;
}
.lpage-content{
  min-width:0;
}
.lpage-content h2{
  scroll-margin-top:7rem;
}
@media(max-width:900px){
  .lpage-layout{
    grid-template-columns:1fr;
    gap:0;
  }
  .lpage-nav{
    display:none;
  }
}
/* ===== COOKIE BAR — glass ===== */
.ckb{position:fixed;bottom:0;left:0;right:0;z-index:9000;background:var(--nav-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:1.4rem 8vw;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;transform:translateY(100%);transition:transform .5s cubic-bezier(.23,1,.32,1);border-top:1px solid rgba(var(--color-accent-rgb),.1)}
.ckb.show{transform:translateY(0)}
.ckt{font-size:.82rem;color:var(--color-text-primary);max-width:600px;line-height:1.6;font-weight:300}.ckt a{text-decoration:underline;color:var(--accent);text-underline-offset:2px;font-weight:500}
[data-theme="light"] .ckt{color:var(--color-text-primary)}[data-theme="light"] .ckt a{color:var(--accent);font-weight:600}
[data-theme="lightproject"] .ckt{color:var(--color-text-primary)}[data-theme="lightproject"] .ckt a{color:var(--accent);font-weight:600}
.ckbtns{display:flex;gap:.6rem}
.ckbtn{padding:.6rem 1.4rem;font-size:.65rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--color-border);background:transparent;color:var(--color-text-primary);transition:all var(--transition-fast);font-family:var(--font-mono);border-radius:var(--radius-btn)}
[data-theme="light"] .ckbtn{background:transparent;border-color:var(--color-border);color:var(--color-text-primary)}
[data-theme="lightproject"] .ckbtn{background:transparent;border-color:var(--color-border);color:var(--color-text-primary)}
.ckbtn:hover{border-color:rgba(var(--color-accent-rgb),.3);color:var(--accent)}
.ckbtn.acc{
  background:rgba(var(--color-accent-rgb),.12);
  color:var(--accent);
  border-color:rgba(var(--color-accent-rgb),.35);
}
.ckbtn.acc:hover{
  background:rgba(var(--color-accent-rgb),.2);
  border-color:rgba(var(--color-accent-rgb),.6);
}
[data-theme="light"] .ckbtn.acc{background:var(--color-accent);color:var(--color-text-on-dark);border-color:var(--color-accent)}
[data-theme="lightproject"] .ckbtn.acc{background:var(--color-accent);color:var(--color-text-on-dark);border-color:var(--color-accent)}
[data-theme="light"] .ckbtn.acc:hover{background:var(--accent2)}
[data-theme="lightproject"] .ckbtn.acc:hover{background:var(--accent2)}
/* ===== FAQ ACCORDION ===== */
#hero3dContainer, #faq3dContainer, #strategy3dContainer, #about3dCard1, #about3dCard2, #about3dCard3{background:transparent!important;overflow:hidden}
#hero3dContainer canvas, #faq3dContainer canvas, #strategy3dContainer canvas, #about3dCard1 canvas, #about3dCard2 canvas, #about3dCard3 canvas{background:transparent!important;opacity:0;transition:opacity 0.4s ease}
#hero3dContainer canvas.visible, #faq3dContainer canvas.visible, #strategy3dContainer canvas.visible, #about3dCard1 canvas.visible, #about3dCard2 canvas.visible, #about3dCard3 canvas.visible{opacity:1}
.faq-section{padding:7rem 8vw;position:relative;border-bottom:1px solid var(--color-border)}
.faq-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:4.5rem;align-items:start;margin-top:3rem}
.faq-hero{position:relative;width:75%;aspect-ratio:1/1;background:transparent;border-radius:0;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;font-family:var(--font-mono);border:none;overflow:visible}
.faq-hero img{width:100%;height:100%;object-fit:contain}
.faq-hero svg{width:64px;height:64px;color:var(--accent);opacity:.45}
.faq-hero canvas{display:block}
.faq-hero .faq-3d-wrap{width:100%;height:100%}
.faq-hero .faq-3d-fallback{width:100%;height:100%}
.faq-hero .faq-3d-fallback img{width:100%;height:100%;object-fit:contain}
.faq-list{display:flex;flex-direction:column;gap:1rem}
.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden;transition:all .3s ease}
.faq-item:hover,.faq-item.open{border-color:rgba(var(--color-accent-rgb),.2)}
.faq-question{width:100%;background:transparent;border:none;padding:1.4rem 1.6rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;color:var(--text);font-family:var(--font-primary);font-size:1.5rem;font-weight:600;text-align:left;transition:color var(--transition-fast)}
.faq-question:hover{color:var(--accent)}
.faq-question svg{flex-shrink:0;width:18px;height:18px;transition:transform .55s cubic-bezier(.76,0,.24,1);color:var(--text3)}
.faq-item.open .faq-question svg{transform:rotate(45deg);color:var(--accent)}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.76,0,.24,1),padding .4s cubic-bezier(.76,0,.24,1)}
.faq-item.open .faq-answer{grid-template-rows:1fr}
.faq-answer-inner{overflow:hidden;padding:0 1.6rem;font-size:1.5rem;color:var(--text2);line-height:1.8;font-weight:300;transition:padding .4s cubic-bezier(.76,0,.24,1)}
.faq-item.open .faq-answer-inner{padding:0 1.6rem 1.4rem}
@media(max-width:1120px){
  .faq-layout{grid-template-columns:1fr;gap:2rem}
  .faq-hero{position:relative;width:60%;aspect-ratio:1/1;order:-1;max-height:320px;margin:1rem auto 0}
}
@media(max-width:600px){
  .faq-section{padding:4.5rem 1.5rem}
  .faq-hero{position:relative;width:65%;aspect-ratio:1/1;max-height:220px;margin:1rem auto 0}
}
/* SCROLL TOP */
.scroll-top{position:fixed;bottom:2rem;right:2rem;z-index:900;width:48px;height:48px;border-radius:99px;background:rgba(var(--color-accent-rgb),.12);color:var(--accent);border:1px solid rgba(var(--color-accent-rgb),.35);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(20px);transition:all .4s cubic-bezier(.23,1,.32,1);pointer-events:none}
.scroll-top.show{opacity:1;transform:translateY(0);pointer-events:auto}
.scroll-top:hover{background:rgba(var(--color-accent-rgb),.2);border-color:rgba(var(--color-accent-rgb),.6);transform:translateY(-2px)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(24px);transition:all .5s cubic-bezier(.16,1,.3,1)}.reveal.vis{opacity:1;transform:translateY(0)}
.hw{transition:font-weight .55s cubic-bezier(.16,1,.3,1);font-weight:200}
.hw.hw-vis{font-weight:700}
/* ===== EXTERNAL LINK MODAL — glass ===== */
.ext-overlay{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s}
.ext-overlay.show{opacity:1;pointer-events:auto}
.ext-modal{background:var(--bg2);border:1px solid rgba(var(--color-accent-rgb),.15);padding:2.5rem;max-width:420px;width:90%;text-align:center;transform:scale(.92) translateY(10px);transition:transform .4s cubic-bezier(.23,1,.32,1);border-radius:var(--radius-card);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.ext-overlay.show .ext-modal{transform:scale(1) translateY(0)}
.ext-modal h4{font-family:var(--font-primary);font-size:1.1rem;font-weight:600;text-transform:uppercase;margin-bottom:.8rem}
.ext-modal p{font-size:.85rem;color:var(--text2);line-height:1.7;margin-bottom:1.5rem;font-weight:300}
.ext-modal .ext-url{font-size:.65rem;color:var(--accent);font-weight:600;letter-spacing:.04em;word-break:break-all;display:block;margin-bottom:1.5rem;padding:.5rem .8rem;background:rgba(var(--color-accent-rgb),.04);border:1px solid rgba(var(--color-accent-rgb),.15);border-radius:var(--radius-small);font-family:var(--font-mono)}
.ext-btns{display:flex;gap:.6rem;justify-content:center}
.ext-btn{padding:.6rem 1.4rem;font-size:.65rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--color-border);background:transparent;color:var(--text);transition:all var(--transition-fast);font-family:var(--font-mono);border-radius:var(--radius-btn)}
.ext-btn:hover{border-color:rgba(var(--color-accent-rgb),.3);color:var(--accent)}
.ext-btn.go{
  background:rgba(var(--color-accent-rgb),.12);
  color:var(--accent);
  border-color:rgba(var(--color-accent-rgb),.35);
}
.ext-btn.go:hover{
  background:rgba(var(--color-accent-rgb),.2);
  border-color:rgba(var(--color-accent-rgb),.6);
}
/* ===== LIGHTBOX ===== */
.lightbox{position:fixed;inset:0;z-index:9600;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s cubic-bezier(.23,1,.32,1)}
.lightbox.show{opacity:1;pointer-events:auto}
.lightbox-close{position:absolute;top:1.5rem;right:1.5rem;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:2;cursor:pointer}
.lightbox-close:hover{color:var(--accent);border-color:rgba(var(--color-accent-rgb),.4);background:rgba(0,0,0,.7)}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);color:#fff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:2;cursor:pointer}
.lightbox-nav:hover{color:var(--accent);border-color:rgba(var(--color-accent-rgb),.4);background:rgba(0,0,0,.7)}
.lightbox-prev{left:1.5rem}
.lightbox-next{right:1.5rem}
.lightbox-counter{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.lightbox-zoom-controls{position:absolute;bottom:1.5rem;right:1.5rem;display:flex;align-items:center;gap:.5rem;z-index:2}
.lightbox-zoom-btn{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);color:#fff;width:36px;height:36px;border-radius:var(--radius-small);display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0;cursor:pointer}
.lightbox-zoom-btn:hover{color:var(--accent);border-color:rgba(var(--color-accent-rgb),.4);background:rgba(0,0,0,.7)}
.lightbox-zoom-slider{-webkit-appearance:none;appearance:none;width:100px;height:2px;background:rgba(255,255,255,.15);border-radius:1px;outline:none;opacity:.85;transition:opacity .2s}
.lightbox-zoom-slider:hover{opacity:1}
.lightbox-zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:none;transition:transform .2s}
.lightbox-zoom-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}
.lightbox-zoom-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:none}
.lightbox-zoom-pct{font-family:var(--font-mono);font-size:.55rem;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.4);min-width:2.5rem;text-align:center}
.lightbox-img-wrap{position:relative;max-width:90vw;max-height:85vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lightbox-img-wrap img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:var(--radius-small);opacity:0;transform-origin:center center;transition:opacity .35s,transform .25s cubic-bezier(.23,1,.32,1);user-select:none;-webkit-user-drag:none}
.lightbox.show .lightbox-img-wrap img{opacity:1}
.lightbox button,.lightbox .lightbox-zoom-slider{cursor:pointer}
.lightbox-img-wrap.lb-zoomed{cursor:grab}
.lightbox-img-wrap.lb-zoomed:active{cursor:grabbing}
.scard{cursor:default}
/* ===== FONTS GALLERY ===== */
.fonts-gallery{padding:9rem 8vw 5rem}
.fonts-gallery h2{font-family:var(--font-primary);font-size:clamp(2.4rem,5.5vw,5rem);font-weight:700;line-height:1.05;margin-bottom:2.5rem;text-transform:uppercase}
.fonts-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:3rem}
.font-card{
  background:var(--bg2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  padding:3rem 2.8rem;
  transition:all .35s ease;
  position:relative;
  overflow:hidden;
}
.font-card:hover{border-color:rgba(var(--color-accent-rgb),.2);background:var(--bg3)}
.font-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}
.font-card-name{font-family:var(--font-mono);font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.font-card-meta{font-family:var(--font-mono);font-size:.6rem;color:var(--text3);letter-spacing:.1em;text-transform:uppercase}
.font-card-preview{font-size:clamp(2.2rem,5vw,4.5rem);line-height:1.15;color:var(--text);word-break:break-word}
.ft-about{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid var(--color-border);
}
.ft-about-desc{
  font-size:1.5rem;
  color:var(--text2);
  line-height:1.8;
  font-weight:300;
  max-width:620px;
  flex:1;
  min-width:200px;
  hyphens:auto;
}
.font-card-dl{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.7rem 1.6rem;
  font-family:var(--font-mono);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  background:rgba(var(--color-accent-rgb),.12);
  border:1px solid rgba(var(--color-accent-rgb),.35);
  border-radius:var(--radius-btn);
  transition:all .25s ease;
  white-space:nowrap;
  flex-shrink:0;
}
[data-theme="light"] .font-card-dl{background:var(--color-accent);color:var(--color-text-on-dark);border-color:var(--color-accent)}
[data-theme="lightproject"] .font-card-dl{background:var(--color-accent);color:var(--color-text-on-dark);border-color:var(--color-accent)}
.font-card-dl:hover{
  background:rgba(var(--color-accent-rgb),.2);
  border-color:rgba(var(--color-accent-rgb),.6);
  color:var(--color-text-primary);
}
[data-theme="light"] .font-card-dl:hover{background:var(--color-accent-hover);color:var(--color-text-on-dark)}
[data-theme="lightproject"] .font-card-dl:hover{background:var(--color-accent-hover);color:var(--color-text-on-dark)}
/* ===== FONT TESTER ===== */
.font-tester{padding:9rem 8vw 5rem}
.font-tester .pback{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text2);margin-bottom:2.5rem;background:none;border:none;transition:color var(--transition-fast)}
.font-tester .pback:hover{color:var(--accent)}
.ft-header{margin-bottom:2.5rem}
.ft-header h1{font-family:var(--font-primary);font-size:clamp(2.4rem,5.5vw,5rem);font-weight:700;line-height:1.05;text-transform:uppercase}
.ft-layout{display:flex;flex-direction:column;gap:2rem}
.ft-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:1.8rem;
  padding:0;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--color-border);
  padding-bottom:1.8rem;
}
.ft-control-group{display:flex;flex-direction:column;gap:.5rem;flex:1;min-width:140px}
.ft-control-label{font-family:var(--font-mono);font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text2);display:flex;align-items:center;justify-content:space-between}
.ft-control-value{font-family:var(--font-mono);font-size:.58rem;font-weight:400;color:var(--text3);letter-spacing:.06em}
.ft-slider{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--color-border);border-radius:2px;outline:none;transition:background var(--transition-fast)}
.ft-slider:hover{background:rgba(var(--color-accent-rgb),.3)}
.ft-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);transition:transform .2s,box-shadow .2s;box-shadow:0 0 0 1px var(--accent)}
.ft-slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 0 1px var(--accent)}
.ft-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--accent)}
.ft-align-btns{display:flex;gap:.4rem}
.ft-align-btn{flex:1;height:38px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-small);color:var(--text3);transition:all var(--transition-fast)}
.ft-align-btn:hover{border-color:rgba(var(--color-accent-rgb),.3);color:var(--accent)}
.ft-align-btn.active{background:rgba(var(--color-accent-rgb),.12);border-color:rgba(var(--color-accent-rgb),.4);color:var(--accent)}
.ft-preview-area{
  min-height:50vh;
  background:var(--bg2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  padding:3rem;
  transition:border-color .3s,box-shadow .3s;
  overflow:hidden;
}
.ft-preview-area:focus-within{border-color:rgba(var(--color-accent-rgb),.3)}
.ft-textarea{
  width:100%;
  min-height:40vh;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text);
  resize:none;
  line-height:1.4;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--color-border) transparent;
}
.ft-textarea::-webkit-scrollbar{width:6px;background:transparent}
.ft-textarea::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}
.ft-textarea::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.ft-textarea::placeholder{color:var(--text3)}
.ft-controls-divider{display:none}
/* Font Meta Tags */
.ft-meta{
  display:flex;
  flex-wrap:wrap;
  gap:2.5rem;
  margin-top:2rem;
  padding:1.8rem 0;
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}
.ft-meta-item dt{
  font-family:var(--font-mono);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.3rem;
}
.ft-meta-item dd{
  font-family:var(--font-primary);
  font-size:.92rem;
  font-weight:400;
  color:var(--text);
  margin:0;
}
/* Font Bento Grid */
.ft-bento{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:1rem;
  margin-top:3rem;
}
.ft-bento-item{
  overflow:hidden;
  border-radius:var(--radius-card);
  border:1px solid var(--color-border);
  background:var(--bg2);
  transition:all .35s ease;
}
.ft-bento-item:hover{border-color:rgba(var(--color-accent-rgb),.2)}
.ft-bento-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.ft-bento-half{grid-column:span 3}
.ft-bento-third{grid-column:span 2}
@media(max-width:600px){
  .fonts-gallery{padding:7rem 1.5rem 4rem}
  .font-tester{padding:7rem 1.5rem 4rem}
  .font-card{padding:2rem 1.6rem}
  .ft-about{flex-direction:column;gap:1.2rem}
  .font-card-dl{width:100%;justify-content:center}
  .ft-controls{flex-direction:column;gap:1.4rem}
  .ft-control-group{min-width:100%}
  .ft-preview-area{padding:1.5rem}
  .ft-meta{gap:1.5rem}
  .ft-bento{grid-template-columns:1fr}
  .ft-bento-half,.ft-bento-third{grid-column:span 1}
}
/* ===== RESPONSIVE BREAKPOINTS ===== */
@media(max-width:1500px){
  .hero-3d-container{width:220%}
}
@media(max-width:1455px){
  .hero-rickroll-ctas{flex-direction:column;gap:.8rem}
  .hero-rickroll-ctas .hero-cta-primary,
  .hero-rickroll-ctas .hero-cta-secondary{display:flex;width:100%;justify-content:center;text-align:center}
}
@media(max-width:1400px){
  .hero-3d-container{width:260%}
}
@media(max-width:1120px){
  html{font-size:112%}
  .nav-outer{padding:12px 12px 0}
  .section{padding:4.5rem 1.5rem}
  .hero-rickroll-inner{grid-template-columns:1.2fr 1fr;padding:8rem 6vw 3rem;gap:2rem}
  .hero-3d-container{width:280%}
  .wgrid,.wgrid.home-grid{grid-template-columns:1fr;gap:2.5rem}
  .wgrid.home-grid .witem,
  .wgrid.home-grid .witem.feat{grid-column:span 1;aspect-ratio:16/9}
  .services-grid{grid-template-columns:1fr}
  .pgal .irow{grid-template-columns:1fr}
  .ftop,.fmid{flex-direction:column;align-items:flex-start}
  .pdetail{padding:7rem 1.5rem 4rem}.lpage{padding:7rem 1.5rem 4rem;margin:0 auto}
  .footer-inner{padding:0 1.5rem}
  .ckb{padding:1.4rem 1.5rem}
  .cblock{grid-template-columns:1fr;gap:1rem}.cblock-label{position:static}.fullimg{aspect-ratio:16/7}
  .contact-body{grid-template-columns:1fr;gap:2rem}.contact-photo-wrap{position:static;max-width:400px;margin:0 auto}
}
@media(max-width:768px){
  .hero-rickroll{min-height:auto}
  .hero-rickroll-inner{grid-template-columns:1fr;min-height:100svh;padding:7.5rem 6vw 3rem;gap:0}
  .hero-rickroll-content{order:2}
  .hero-rickroll-3d{order:1;justify-content:center}
  .hero-3d-container{width:100%;max-width:380px}
  .hero-rickroll-scroll-hint{display:none}
}
@media(max-width:600px){
  html{font-size:100%}
  .hero-rickroll-inner{padding:7rem 1.5rem 2rem}
  .hero-rickroll-title{font-size:clamp(1.6rem, min(8vw, 6svh), 2.8rem)}
  .hero-rickroll-sub{font-size:.85rem;line-height:1.6}
  .hero-rickroll-label{font-size:.55rem;letter-spacing:.12em;margin-bottom:.8rem}
  .hero-rickroll-ctas{flex-direction:column;gap:.8rem}
  .hero-rickroll-ctas .hero-cta-primary,.hero-rickroll-ctas .hero-cta-secondary{width:100%;justify-content:center;padding:.95rem 1.6rem;font-size:.7rem}
  .hero-3d-container{max-width:300px}
  .section h2{font-size:2rem}
  .sgrid .num{font-size:1.8rem}
  .pmeta{gap:1.2rem}
  .fbot{flex-direction:column;align-items:flex-start}
  .mmenu a{font-size:2rem}
  .ckb{padding:1.2rem 1.5rem;flex-direction:column;align-items:flex-start}
  .fsocial{gap:1.5rem}
  .letter-link a{font-size:.75rem}
  .lightbox-zoom-controls{bottom:1rem;right:.5rem;gap:.3rem}
  .lightbox-zoom-slider{width:60px}
  .lightbox-zoom-btn{width:32px;height:32px}
  .lightbox-prev{left:.5rem;width:38px;height:38px}
  .lightbox-next{right:.5rem;width:38px;height:38px}
  .lightbox-close{top:1rem;right:1rem;width:38px;height:38px}
  .ptesti-inner{flex-direction:column;gap:1rem}
  .story-section{padding:6rem 1.5rem;min-height:auto}
  .story-text{font-size:1.3rem}
  .hero-accent-inner{flex-direction:column;gap:.6rem}
  .hero-accent-dot{display:none}
  .hero-accent-text{font-size:clamp(1rem,4vw,1.4rem)}
}

/* =============================================================
   WIDESCREEN & ULTRAWIDE (21:9, 32:9) — 1920px+
   ============================================================= */

/* ---------- 1920px+ : Standard widescreen ---------- */
@media(min-width:1920px){

  /* ---- Hero: contain the grid, cap text, tame the 3D model ---- */
  .hero-rickroll-inner{
    max-width:1800px;
    margin:0 auto;
    padding:9rem 6rem 4rem;
    grid-template-columns:1fr 1.1fr;
    gap:5rem;
  }
  .hero-rickroll-content{max-width:720px}
  .hero-rickroll-title{font-size:clamp(3.2rem,3.8vw,5.5rem)}
  .hero-rickroll-sub{max-width:560px}
  .hero-3d-container{width:160%}

  /* ---- Sections: centre content with max-width ---- */
  .section{
    padding:7rem 0;
  }
  .section > .reveal,
  .section > div{
    max-width:1600px;
    margin-left:auto;
    margin-right:auto;
    padding-left:6rem;
    padding-right:6rem;
  }

  /* ---- Story section ---- */
  .story-section{
    padding:10rem 6rem;
  }
  .story-text{
    max-width:1400px;
    margin-left:auto;
    margin-right:auto;
  }

  /* ---- Hero accent strip ---- */
  .hero-accent{padding:3rem 6rem}

  /* ---- Work grid: keep original 2-col + featured layout ---- */
  .wgrid.home-grid{
    grid-template-columns:repeat(2,1fr);
    gap:3rem;
  }
  .wgrid.home-grid .witem{aspect-ratio:16/11}
  .wgrid.home-grid .witem.feat{
    grid-column:span 2;
    aspect-ratio:21/9;
  }

  /* Full work page: same 2-col */
  .wgrid:not(.home-grid){
    grid-template-columns:repeat(2,1fr);
    gap:3rem;
  }

  /* ---- Services: 3 columns, same container width as cblock/fullimg ---- */
  .services-grid{
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
  }

  /* ---- Content blocks: inherit parent max-width to match services-grid ---- */
  .centerblock{max-width:none}

  /* ---- FAQ ---- */
  .faq-section{padding:7rem 0}
  .faq-section > .reveal{
    max-width:1600px;
    margin:0 auto;
    padding:0 6rem;
  }
  .faq-layout{gap:5rem}

  /* ---- About ---- */
  .abt-page{max-width:1600px;margin:0 auto}
  .abt-hero-section{padding:0 6rem 5rem}
  .abt-intro-section{padding:0 6rem 0}
  .abt-block-section{padding:0 6rem}
  .abt-3d-section{padding:5rem 6rem}
  .abt-philosophy-section{padding:2rem 6rem 6rem}

  /* ---- Project detail ---- */
  .pdetail{
    padding:9rem 6rem 5rem;
    max-width:1600px;
    margin-left:auto;
    margin-right:auto;
  }
  .pheader{max-width:900px}
  .pdesc{max-width:1200px}

  /* ---- Contact ---- */
  .contact-page{
    padding:9rem 6rem 5rem;
    max-width:1600px;
    margin:0 auto;
  }

  /* ---- Fonts gallery ---- */
  .fonts-gallery{
    padding:9rem 6rem 5rem;
    max-width:1600px;
    margin:0 auto;
  }
  .font-tester{
    padding:9rem 6rem 5rem;
    max-width:1600px;
    margin:0 auto;
  }

  /* ---- Footer: full-width bg, constrained inner content ---- */
  .footer{
    padding:4rem 0 2rem;
  }
  .footer-inner{
    max-width:1600px;
    padding:0 6rem;
  }

  /* ---- Legal pages ---- */
  .lpage{
    padding:9rem 6rem 5rem;
    max-width:860px;
    margin:0 auto;
  }
  .lpage-with-nav{max-width:1100px}

  /* ---- Cookie bar ---- */
  .ckb{padding:1.4rem 6rem}

  /* ---- Stats grids: 4 columns ---- */
  .sgrid{grid-template-columns:repeat(4,1fr)}
}

/* ---------- 2560px+ : Ultra-wide (21:9) ---------- */
@media(min-width:2560px){

  /* ---- Hero: widen the content area, bigger text ---- */
  .hero-rickroll-inner{
    max-width:2200px;
    padding:10rem 8rem 5rem;
    grid-template-columns:1fr 1.2fr;
    gap:6rem;
  }
  .hero-rickroll-content{max-width:840px}
  .hero-rickroll-title{font-size:clamp(4rem,3.2vw,6.5rem)}
  .hero-rickroll-sub{
    max-width:640px;
    font-size:1.5rem;
  }
  .hero-3d-container{width:150%}

  /* ---- Sections: wider rail ---- */
  .section > .reveal,
  .section > div{
    max-width:2000px;
    padding-left:8rem;
    padding-right:8rem;
  }

  .story-section{padding:12rem 8rem}
  .story-text{max-width:1600px}

  .hero-accent{padding:3.5rem 8rem}

  /* ---- Work grid: keep original 2-col + featured layout ---- */
  .wgrid.home-grid{
    grid-template-columns:repeat(2,1fr);
    gap:3rem;
  }
  .wgrid:not(.home-grid){
    grid-template-columns:repeat(2,1fr);
    gap:3rem;
  }

  /* ---- Services: 3 columns, inherits parent max-width ---- */
  .services-grid{
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
  }

  /* ---- Content blocks ---- */
  .centerblock{max-width:none}

  /* ---- FAQ ---- */
  .faq-section > .reveal{
    max-width:2000px;
    padding:0 8rem;
  }

  /* ---- About ---- */
  .abt-page{max-width:2000px}
  .abt-hero-section{padding:0 8rem 5rem}
  .abt-intro-section{padding:0 8rem 0}
  .abt-block-section{padding:0 8rem}
  .abt-3d-section{padding:5rem 8rem}
  .abt-philosophy-section{padding:2rem 8rem 6rem}

  /* ---- Project / Contact / Fonts ---- */
  .pdetail{
    padding:9rem 8rem 5rem;
    max-width:2000px;
    margin-left:auto;
    margin-right:auto;
  }
  .contact-page{max-width:2000px;padding:9rem 8rem 5rem}
  .fonts-gallery{max-width:2000px;padding:9rem 8rem 5rem}
  .font-tester{max-width:2000px;padding:9rem 8rem 5rem}

  /* ---- Footer ---- */
  .footer{padding:4rem 0 2rem}
  .footer-inner{
    max-width:2000px;
    padding:0 8rem;
  }
  .ckb{padding:1.4rem 8rem}
  .lpage{max-width:920px}
  .lpage-with-nav{max-width:1200px}

  /* ---- Font bento: 6-col stays but room for larger items ---- */
  .ft-bento{gap:1.5rem}
}

/* ---------- 3440px+ : Super ultra-wide (32:9 / triple) ---------- */
@media(min-width:3440px){

  /* ---- Hero: cap and centre, prevent infinite stretch ---- */
  .hero-rickroll-inner{
    max-width:2800px;
    padding:11rem 10rem 6rem;
    gap:8rem;
  }
  .hero-rickroll-content{max-width:960px}
  .hero-rickroll-title{font-size:5.5rem}
  .hero-rickroll-sub{
    max-width:720px;
    font-size:1.3rem;
  }
  .hero-3d-container{width:130%}

  /* ---- Sections: max rail with generous gutters ---- */
  .section > .reveal,
  .section > div{
    max-width:2600px;
    padding-left:10rem;
    padding-right:10rem;
  }

  .story-section{padding:14rem 10rem}
  .story-text{max-width:1800px;font-size:3rem}

  .hero-accent{padding:4rem 10rem}

  /* ---- Grids: keep original layout at any width ---- */
  .wgrid.home-grid{
    grid-template-columns:repeat(2,1fr);
    gap:3.5rem;
  }
  .wgrid.home-grid .witem.feat{
    grid-column:span 2;
    aspect-ratio:21/9;
  }
  .wgrid:not(.home-grid){
    grid-template-columns:repeat(2,1fr);
    gap:3.5rem;
  }

  .services-grid{
    grid-template-columns:repeat(3,1fr);
    gap:2.5rem;
  }

  /* ---- FAQ ---- */
  .faq-section > .reveal{
    max-width:2600px;
    padding:0 10rem;
  }

  /* ---- About ---- */
  .abt-page{max-width:2600px}
  .abt-hero-section{padding:0 10rem 6rem}
  .abt-intro-section{padding:0 10rem 0}
  .abt-block-section{padding:0 10rem}
  .abt-3d-section{padding:6rem 10rem}
  .abt-philosophy-section{padding:2rem 10rem 7rem}

  /* ---- Project / Contact / Fonts ---- */
  .pdetail{
    padding:10rem 10rem 6rem;
    max-width:2600px;
    margin-left:auto;
    margin-right:auto;
  }
  .pheader{max-width:1100px}
  .pdesc{max-width:1200px;font-size:1.2rem}
  .contact-page{max-width:2600px;padding:10rem 10rem 6rem}
  .fonts-gallery{max-width:2600px;padding:10rem 10rem 6rem}
  .font-tester{max-width:2600px;padding:10rem 10rem 6rem}

  /* ---- Footer ---- */
  .footer{padding:5rem 0 2.5rem}
  .footer-inner{
    max-width:2600px;
    padding:0 10rem;
  }
  .ckb{padding:1.6rem 10rem}
  .lpage{max-width:1000px}
  .lpage-with-nav{max-width:1300px}

  /* ---- Nav: wider island ---- */
  .nav{width:min(94vw, 1600px)}
}

/* ---------- Aspect-ratio aware: extra-wide but short viewports ---------- */
@media(min-width:1920px) and (max-height:900px){
  .hero-rickroll-inner{
    padding-top:7rem;
    padding-bottom:3rem;
    min-height:100svh;
  }
  .hero-rickroll-title{font-size:clamp(2.4rem,4vh,4rem)}
  .hero-rickroll-sub{font-size:.95rem}
  .hero-3d-container{width:140%}
  .story-section{padding:6rem 6rem;min-height:auto}
}

/* ===== FIXES: Legal page back button & nav link cursor ===== */
.lpage .pback,
.lpage-nav-link{cursor:pointer !important}

/* Legal page padding is no longer injected dynamically — scroll is clamped to max in JS */

/* ===== SMOOTHER IMAGE ANIMATIONS ===== */
/* Animate the whole frame (with rounded corners), not the img inside */

/* Project gallery frames inside .reveal */
.reveal .pgal-frame{
  opacity:0;
  transform:translateY(20px) scale(0.985);
  transition:opacity 0.85s cubic-bezier(.25,.1,.25,1),
             transform 0.85s cubic-bezier(.25,.1,.25,1);
}
.reveal.vis .pgal-frame{
  opacity:1;
  transform:translateY(0) scale(1);
}
/* Stagger pair images */
.reveal.vis .irow .pgal-frame:nth-child(2){
  transition-delay:0.12s;
}

/* Hero image (direct child of .pgal, no .reveal wrapper) */
.pgal > .pgal-frame{
  opacity:0;
  transform:translateY(20px) scale(0.985);
  animation:imgReveal 0.85s cubic-bezier(.25,.1,.25,1) 0.35s forwards;
}

/* Work grid items */
.witem{
  opacity:0;
  transform:translateY(16px) scale(0.985);
  transition:opacity 0.75s cubic-bezier(.25,.1,.25,1),
             transform 0.75s cubic-bezier(.25,.1,.25,1),
             border-color .35s ease;
}
.reveal.vis .witem,
.vis .witem{
  opacity:1;
  transform:translateY(0) scale(1);
}
.reveal.vis .witem:nth-child(2){transition-delay:0.1s}
.reveal.vis .witem:nth-child(3){transition-delay:0.2s}

/* Full-width section images */
.reveal .fullimg{
  opacity:0;
  transform:translateY(20px) scale(0.985);
  transition:opacity 0.85s cubic-bezier(.25,.1,.25,1),
             transform 0.85s cubic-bezier(.25,.1,.25,1);
}
.reveal.vis .fullimg{
  opacity:1;
  transform:translateY(0) scale(1);
}

@keyframes imgReveal{
  from{opacity:0;transform:translateY(20px) scale(0.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ===== MOBILE BODY TEXT SCALE ===== */
@media(max-width:768px){
  .section-text,
  .pdesc,
  .contact-intro,
  .scard p,
  .cblock-body,
  .centerblock p,
  .strategy-text,
  .abt-body,
  .abt-3d-card-desc,
  .abt-3d-caption-text,
  .ft-about-desc,
  .faq-answer-inner,
  .notfound-sub,
  .hero-rickroll-sub{
    font-size:1.2rem;
  }
  .ptesti-quote{
    font-size:.6rem;
  }
}