*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#09080a;--paper:#f4f1ec;--paper2:#ece8e1;--rule:#d4ccc0;--grey:#6d645c;--mid:#3f3b37;
  --serif:'Playfair Display',Georgia,serif;
  --ui:'SF Pro Text','SF Pro Display',-apple-system,'Helvetica Neue',sans-serif;--ui-rounded:'SF Pro Rounded','SF Pro Text',-apple-system,sans-serif;
  --mono:'DM Mono',monospace;
  --ease:cubic-bezier(.25,.46,.45,.94);--ease-out:cubic-bezier(0,0,.2,1);
  --r8:8px;--r12:12px;--r16:16px;--r20:20px;--r28:28px;--r40:40px;
}
/* ─── DARK MODE VARIABLES ─── */
[data-theme="dark"] {
  --ink: #f0ede8;
  --paper: #0d0c0e;
  --paper2: #141218;
  --rule: #2e2a32;
  --grey: #9b95a0;
  --mid: #bcb8c2;
}

html{-webkit-overflow-scrolling:touch;background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);font-weight:450;overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased;font-synthesis-weight:none;transition:background .5s var(--ease),color .5s var(--ease);overscroll-behavior-y:none}

/* ─── CALLI-INSPIRED AMBIENT BACKGROUND MESH ─── */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(42,74,168,.07), transparent 60%),
    radial-gradient(ellipse 50% 45% at 88% 15%, rgba(88,50,164,.07), transparent 60%),
    radial-gradient(ellipse 40% 35% at 50% 90%, rgba(28,108,192,.06), transparent 55%);
  animation: meshDrift 18s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  0%   { opacity: .6; transform: scale(1) translateY(0); }
  50%  { opacity: 1;  transform: scale(1.03) translateY(-1%); }
  100% { opacity: .7; transform: scale(1) translateY(0); }
}
[data-theme="dark"] body::after {
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(42,74,168,.12), transparent 60%),
    radial-gradient(ellipse 50% 45% at 88% 15%, rgba(88,50,164,.12), transparent 60%),
    radial-gradient(ellipse 40% 35% at 50% 90%, rgba(28,108,192,.10), transparent 55%);
}

/* ─── DARK MODE COMPONENT OVERRIDES ─── */
[data-theme="dark"] html { background: #181620; } /* lighter than hero #050508 — shows the gap */
[data-theme="dark"] body::before { content:none; }

[data-theme="dark"] .g1 {
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  border-bottom-color:rgba(255,255,255,.07);
  border-right-color:rgba(255,255,255,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 -1px 0 rgba(0,0,0,.4) inset,1px 0 0 rgba(255,255,255,.08) inset,0 12px 40px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.2);
}
[data-theme="dark"] .g1::before { background:linear-gradient(to bottom,rgba(255,255,255,.08),rgba(255,255,255,0)); }
[data-theme="dark"] .g1::after { background:linear-gradient(to bottom,rgba(255,255,255,.18),rgba(255,255,255,.04),rgba(255,255,255,0)); }

[data-theme="dark"] .g2 {
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);
  border-bottom-color:rgba(255,255,255,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 -1px 0 rgba(0,0,0,.5) inset,0 24px 72px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.25);
}
[data-theme="dark"] .g2::before { background:linear-gradient(to bottom,rgba(255,255,255,.07),rgba(255,255,255,0)); }
[data-theme="dark"] .g2::after { background:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(255,255,255,.04),rgba(255,255,255,0)); }

[data-theme="dark"] .g0 {
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 4px 20px rgba(0,0,0,.2);
}

[data-theme="dark"] .chip {
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  border-bottom-color:rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 4px 16px rgba(0,0,0,.2);
  color:var(--grey);
}

[data-theme="dark"] nav{background:rgba(8,6,28,.55);border-bottom-color:rgba(100,130,255,.22);backdrop-filter:blur(72px) saturate(2.8) brightness(1.05) contrast(1.04);-webkit-backdrop-filter:blur(72px) saturate(2.8) brightness(1.05) contrast(1.04);box-shadow:0 1px 0 rgba(120,150,255,.14) inset,0 1px 40px rgba(40,70,200,.18),0 4px 24px rgba(0,0,0,.36)}[data-theme="dark"] .nav-logo{color:#f4f0ea}[data-theme="dark"] .nav-links{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.26);box-shadow:0 1px 0 rgba(255,255,255,.24) inset}[data-theme="dark"] .nav-links a{color:rgba(255,252,248,.92)}[data-theme="dark"] .nav-links a:hover{background:rgba(255,255,255,.12);color:#fff}[data-theme="dark"] .nav-clock-time{color:#f4f0ea}[data-theme="dark"] .nav-clock-label{color:rgba(244,240,234,.72)}[data-theme="dark"] .nav-phone{color:rgba(255,252,248,.88);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);border-top-color:rgba(255,255,255,.36)}[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);border-top-color:rgba(255,255,255,.34);color:rgba(244,241,236,.88)}[data-theme="dark"] .nav-clock{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);border-top-color:rgba(255,255,255,.36)}

[data-theme="dark"] .hero-bg {
  background:
    radial-gradient(ellipse 68% 52% at 72% 18%, rgba(88,50,164,.62), transparent 62%),
    radial-gradient(ellipse 50% 44% at 18% 72%, rgba(42,74,168,.55), transparent 58%),
    radial-gradient(ellipse 40% 36% at 85% 80%, rgba(28,108,192,.38), transparent 52%),
    linear-gradient(160deg, #0a0c28 0%, #0d0a26 40%, #0e0c30 70%, #070718 100%);
}

[data-theme="dark"] .btn-solid { background:rgba(255,255,255,.9); color:#0d0c0e; }
[data-theme="dark"] .mq-wrap {
  border-color:rgba(46,42,50,.8);
  background:rgba(255,255,255,.02);
}
[data-theme="dark"] .mq-inner::before { background:linear-gradient(to right,var(--paper),transparent); }
[data-theme="dark"] .mq-inner::after { background:linear-gradient(to left,var(--paper),transparent); }
[data-theme="dark"] .proj-row:hover { background:rgba(255,255,255,.05); }
[data-theme="dark"] .proj-div { background:rgba(46,42,50,.8); }
[data-theme="dark"] .sc.g1 {
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
}
[data-theme="dark"] .sw-outer { box-shadow:0 2px 0 rgba(255,255,255,.08) inset,0 28px 88px rgba(0,0,0,.5); }
[data-theme="dark"] .sl-info { background:var(--paper2); }
[data-theme="dark"] .sw-btn:hover { background:rgba(255,255,255,.07); }
[data-theme="dark"] .photo-frame {
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 2px 0 rgba(255,255,255,.1) inset,0 28px 80px rgba(0,0,0,.4);
}
[data-theme="dark"] .about-photo { filter:grayscale(100%) contrast(1.1) brightness(.75); }
[data-theme="dark"] footer { background:#080709; }
[data-theme="dark"] .ct-btn.g2 { background:rgba(255,255,255,.07); }
[data-theme="dark"] .bn-preview img { opacity:.92; }
[data-theme="dark"] .dl-btn { background:rgba(255,255,255,.07); color:var(--ink); }
[data-theme="dark"] .dl-btn:hover { background:rgba(255,255,255,.12); }
[data-theme="dark"] .atag { border-color:var(--rule); }
[data-theme="dark"] .p-tag { border-color:var(--rule); }
[data-theme="dark"] .curR { border-color:rgba(240,237,232,.2); }
[data-theme="dark"] .cur { background:var(--ink); }

/* ─── THEME TOGGLE — ICON BUTTON ─── */
.theme-toggle {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  padding: 0;
  flex-shrink: 0;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.07);
  backdrop-filter: blur(40px) saturate(1.9) brightness(0.97);
  -webkit-backdrop-filter: blur(40px) saturate(1.9) brightness(0.97);
  border: 1px solid rgba(0,0,0,.11);
  border-top-color: rgba(255,255,255,.5);
  border-bottom-color: rgba(0,0,0,.06);
  box-shadow: 0 1.5px 0 rgba(255,255,255,.58) inset, 0 4px 16px rgba(0,0,0,.08);
  transition: background .3s, border-color .3s, box-shadow .3s, transform .18s;
  overflow: hidden;
  color: rgba(244,240,234,.92);
}
.theme-toggle::before {
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:50%;
  background:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(255,255,255,0));
  pointer-events:none;border-radius:12px 12px 0 0;
}
.theme-toggle:hover { transform:translateY(-1px); background:rgba(255,255,255,.16); }
[data-theme="dark"] .theme-toggle {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 4px 18px rgba(0,0,0,.35);
  color: rgba(244,241,236,.85);
}
[data-theme="dark"] .theme-toggle:hover { background:rgba(255,255,255,.11); }
.tgl-icon {
  position:absolute;
  width:16px;height:16px;
  transition: opacity .32s, transform .38s cubic-bezier(.34,1.48,.64,1);
}
.tgl-bright { opacity:1; transform:rotate(0deg) scale(1); }
.tgl-moon-i { opacity:0; transform:rotate(-40deg) scale(.55); }
[data-theme="dark"] .tgl-bright { opacity:0; transform:rotate(30deg) scale(.55); }
[data-theme="dark"] .tgl-moon-i { opacity:1; transform:rotate(0deg) scale(1); }


body::before{content:none}

/* CURSOR */
.cur,.curLabel{position:fixed;pointer-events:none;z-index:10060 !important}
.curLabel{mix-blend-mode:difference}
/* ─── CLEAR CIRCLE CURSOR ─── */
.cur{width:30px;height:30px;border-radius:50%;transform:translate(-50%,-50%);background:transparent;border:1.5px solid rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.14);transition:transform .2s var(--ease),opacity .2s ease,border-color .2s ease}
[data-theme="light"] .cur{border-color:rgba(20,20,30,.42);box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.cur::before{content:none}
.cur::after{content:none}
.curArrow{display:none !important}
.curLabel{left:0;top:0;transform:translate(-50%,-50%);padding:7px 12px;border-radius:999px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#fff;white-space:nowrap;opacity:0;transition:opacity .2s ease,transform .25s var(--ease);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
body.cursor-hover .cur{transform:translate(-50%,-50%) scale(1.5);border-color:rgba(255,255,255,.85)}
[data-theme="light"] body.cursor-hover .cur{border-color:rgba(20,20,30,.7)}
body.cursor-hover .curArrow{filter:drop-shadow(0 3px 12px rgba(255,255,255,.28)) drop-shadow(0 0 24px rgba(180,200,255,.22));transform-origin:4px 3px}
body.cursor-hover .curLabel{opacity:1;transform:translate(-50%,-150%)}
body.cursor-scroll .cur{transform:translate(-50%,-50%) scale(1.25)}
body.cursor-scroll .curLabel{opacity:1;transform:translate(-50%,-150%)}
body.cursor-hover .cursor-target{opacity:1 !important;filter:none !important;transform:translateY(-2px) scale(1.01)}
body.cursor-hover .cursor-recede{opacity:.32;filter:saturate(.72) blur(.2px);transition:opacity .24s ease,filter .24s ease,transform .24s ease}

/* ═══ GLASS SYSTEM ═══ */
.g0{background:rgba(255,255,255,.28);backdrop-filter:blur(24px) saturate(1.8) brightness(1.04);-webkit-backdrop-filter:blur(24px) saturate(1.8) brightness(1.04);border:1px solid rgba(255,255,255,.55);border-bottom-color:rgba(210,200,188,.25);box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 4px 20px rgba(9,8,10,.04);border-radius:var(--r16)}

.g1{background:rgba(255,255,255,.52);backdrop-filter:blur(48px) saturate(2.2) brightness(1.09);-webkit-backdrop-filter:blur(48px) saturate(2.2) brightness(1.09);border:1px solid rgba(255,255,255,.88);border-bottom-color:rgba(210,200,188,.38);border-right-color:rgba(210,200,188,.3);box-shadow:0 2px 0 rgba(255,255,255,1) inset,0 -1px 0 rgba(210,200,188,.18) inset,1px 0 0 rgba(255,255,255,.65) inset,0 12px 40px rgba(9,8,10,.07),0 2px 10px rgba(9,8,10,.04);border-radius:var(--r20);position:relative;overflow:hidden}
.g1::before{content:'';position:absolute;top:0;left:0;right:0;height:52%;background:linear-gradient(to bottom,rgba(255,255,255,.36),rgba(255,255,255,0));pointer-events:none}
.g1::after{content:'';position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to bottom,rgba(255,255,255,.95),rgba(255,255,255,.18),rgba(255,255,255,0));pointer-events:none}

.g2{background:rgba(255,255,255,.42);backdrop-filter:blur(80px) saturate(2.6) brightness(1.12);-webkit-backdrop-filter:blur(80px) saturate(2.6) brightness(1.12);border:1px solid rgba(255,255,255,.92);border-bottom-color:rgba(210,200,188,.32);box-shadow:0 2px 0 rgba(255,255,255,1) inset,0 -1px 0 rgba(210,200,188,.12) inset,0 1px 0 rgba(255,255,255,.9) inset,0 24px 72px rgba(9,8,10,.09),0 6px 20px rgba(9,8,10,.05),0 0 0 0.5px rgba(255,255,255,.5);border-radius:var(--r28);position:relative;overflow:hidden}
.g2::before{content:'';position:absolute;top:0;left:0;right:0;height:48%;background:linear-gradient(to bottom,rgba(255,255,255,.32),rgba(255,255,255,0));pointer-events:none}
.g2::after{content:'';position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to bottom,rgba(255,255,255,1),rgba(255,255,255,.14),rgba(255,255,255,0));pointer-events:none}

.g3{background:rgba(7,6,8,.84);backdrop-filter:blur(56px) saturate(1.7);-webkit-backdrop-filter:blur(56px) saturate(1.7);border:1px solid rgba(255,255,255,.11);border-top-color:rgba(255,255,255,.26);box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 -1px 0 rgba(0,0,0,.45) inset,0 24px 72px rgba(0,0,0,.38),0 6px 20px rgba(0,0,0,.22);border-radius:var(--r20);position:relative;overflow:hidden;color:rgba(244,241,236,.9)}
.g3::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:rgba(255,255,255,.28)}
.g3::after{content:'';position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to bottom,rgba(255,255,255,.22),rgba(255,255,255,.05),rgba(255,255,255,0));pointer-events:none}

.chip{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.42);backdrop-filter:blur(20px) saturate(1.9);-webkit-backdrop-filter:blur(20px) saturate(1.9);border:1px solid rgba(255,255,255,.75);border-bottom-color:rgba(210,200,188,.28);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 4px 16px rgba(9,8,10,.05);border-radius:40px;padding:6px 16px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.chip-dk{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);box-shadow:0 1px 0 rgba(255,255,255,.16) inset;color:rgba(244,241,236,.58)}

/* NAV — full-width floating glass bar, connected to top */
nav{
  position:fixed;top:0;left:0;
  z-index:900;width:100%;
  /* LIGHT MODE glass: dark-tinted frosted */
  background:rgba(12,10,22,.14);
  backdrop-filter:blur(72px) saturate(2.2) brightness(0.97) contrast(1.02);
  -webkit-backdrop-filter:blur(72px) saturate(2.2) brightness(0.97) contrast(1.02);
  border:none;
  border-bottom:1px solid rgba(100,130,255,.18);
  box-shadow:
    0 1px 0 rgba(160,180,255,.15) inset,
    0 1px 32px rgba(40,70,200,.10),
    0 4px 24px rgba(0,0,0,.14);
  border-radius:0 0 28px 28px;padding:0 28px;isolation:isolate;
}
/* bottom-half blue-gradient sheen */
nav::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:50%;border-radius:0;
  background:linear-gradient(180deg,rgba(100,130,255,.08),rgba(100,130,255,0));
  pointer-events:none;
}
/* bottom glow line */
nav::after{
  content:'';position:absolute;
  bottom:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,rgba(100,140,255,0),rgba(120,160,255,.35) 30%,rgba(160,100,255,.35) 70%,rgba(100,140,255,0));
  pointer-events:none;
}
/* bottom ambient glow — separate element via html pseudo isn't possible so use box-shadow on nav-in */
.nav-in{display:flex;align-items:center;justify-content:space-between;height:62px;gap:14px;max-width:1200px;margin:0 auto}
.nav-logo{font-family:var(--ui);font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;opacity:0;animation:fu .7s var(--ease) .1s forwards;padding:10px 2px}
/* inner nav-links pill — nested glass */
.nav-links{
  display:flex;align-items:center;gap:2px;list-style:none;
  opacity:0;animation:fu .7s var(--ease) .2s forwards;
  padding:4px;border-radius:999px;
  background:rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.10);
  border-top-color:rgba(255,255,255,.4);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 2px 8px rgba(0,0,0,.06);
}
.nav-links a{font-family:var(--ui);font-size:13px;font-weight:600;color:rgba(9,8,14,.82);text-decoration:none;padding:9px 13px;border-radius:999px;transition:background .28s cubic-bezier(.34,1.56,.64,1),color .18s,transform .28s cubic-bezier(.34,1.56,.64,1);letter-spacing:-.01em}
.nav-links a:hover{background:rgba(0,0,0,.08);color:rgba(9,8,14,.96);transform:translateY(-1px)}
.nav-links a:active{transform:scale(.94);transition:transform .1s ease,background .1s ease}
.nav-cta{font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:-.01em;color:#0a0a0f;text-decoration:none;padding:11px 18px;border-radius:999px;opacity:0;animation:fu .7s var(--ease) .3s forwards;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,248,242,.96),rgba(233,227,222,.9));border:1px solid rgba(255,255,255,.72);box-shadow:0 10px 26px rgba(255,244,234,.12),inset 0 1px 0 rgba(255,255,255,.72);transition:transform .18s,box-shadow .22s,filter .22s}.nav-cta::before{content:'';position:absolute;top:0;left:0;right:0;height:55%;background:linear-gradient(180deg,rgba(255,255,255,.44),rgba(255,255,255,0));pointer-events:none}.nav-cta:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(255,244,234,.18),inset 0 1px 0 rgba(255,255,255,.8);filter:saturate(1.04)}[data-theme="dark"] .nav-cta{color:#0a0a0f;background:linear-gradient(180deg,rgba(255,248,242,.97),rgba(233,227,222,.9));border-color:rgba(255,255,255,.72);box-shadow:0 10px 26px rgba(255,244,234,.12),inset 0 1px 0 rgba(255,255,255,.74)}[data-theme="dark"] .nav-cta:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(255,244,234,.18),inset 0 1px 0 rgba(255,255,255,.82)}
/* nav-cta hover handled above */
.nav-phone{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;font-weight:400;color:rgba(9,8,14,.78);text-decoration:none;padding:0 14px;height:38px;border-radius:12px;border:1px solid rgba(0,0,0,.11);border-top-color:rgba(255,255,255,.5);border-bottom-color:rgba(0,0,0,.06);background:rgba(0,0,0,.07);backdrop-filter:blur(40px) saturate(1.9) brightness(0.97);-webkit-backdrop-filter:blur(40px) saturate(1.9) brightness(0.97);box-shadow:0 1.5px 0 rgba(255,255,255,.58) inset,0 4px 16px rgba(0,0,0,.08);transition:background .18s,color .18s,border-color .18s,transform .18s;white-space:nowrap}
.nav-phone:hover{background:rgba(255,255,255,.08);color:#f4f0ea;border-color:rgba(255,255,255,.18);transform:translateY(-1px)}
[data-theme="dark"] .nav-phone{color:rgba(244,241,236,.52);border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.05)}
[data-theme="dark"] .nav-phone:hover{background:rgba(255,255,255,.1);color:var(--ink);border-color:rgba(255,255,255,.2)}

.nav-utility{display:flex;align-items:center;gap:8px}.nav-clock{display:inline-flex;align-items:center;gap:9px;padding:0 14px 0 10px;height:38px;border-radius:12px;background:rgba(0,0,0,.07);backdrop-filter:blur(40px) saturate(1.9) brightness(0.97);-webkit-backdrop-filter:blur(40px) saturate(1.9) brightness(0.97);border:1px solid rgba(0,0,0,.11);border-top-color:rgba(255,255,255,.5);border-bottom-color:rgba(0,0,0,.06);box-shadow:0 1.5px 0 rgba(255,255,255,.58) inset,0 4px 16px rgba(0,0,0,.08);min-width:0;justify-content:flex-start}.nav-clock-face{width:28px;height:28px;border-radius:50%;position:relative;flex-shrink:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.24),rgba(255,255,255,.05) 66%,rgba(255,255,255,.02) 100%);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 12px rgba(0,0,0,.14)}.nav-clock-face::before{content:'';position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(255,255,255,.06)}.nav-clock-hand{position:absolute;left:50%;bottom:50%;width:1.5px;border-radius:999px;transform-origin:bottom center;background:rgba(244,241,236,.92);box-shadow:0 0 10px rgba(255,255,255,.12)}.nav-clock-hand.hour{height:7px}.nav-clock-hand.minute{height:10px;width:1.2px;opacity:.88}.nav-clock-face .hub{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:rgba(244,241,236,.96);transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(255,255,255,.15)}.nav-clock-copy{display:flex;flex-direction:column;gap:2px;line-height:1}.nav-clock-time{font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}.nav-clock-label{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}[data-theme="dark"] .nav-clock{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.28);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 4px 16px rgba(0,0,0,.28)}[data-theme="dark"] .nav-clock-face{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.16),rgba(255,255,255,.04) 66%,rgba(255,255,255,.02) 100%);border-color:rgba(255,255,255,.13)}

/* HERO */
.hero{padding-top:76px;min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;border-radius:0}
.hero::before{content:'';position:absolute;left:50%;top:50%;width:min(70vw,980px);height:min(70vw,980px);transform:translate(-42%,-44%);background:radial-gradient(circle,rgba(100,80,255,.12) 0%,rgba(70,50,200,.07) 26%,rgba(42,74,168,.04) 50%,rgba(14,14,40,0) 72%);filter:blur(12px);pointer-events:none}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse 68% 52% at 72% 18%, rgba(88,50,164,.55), transparent 62%),
  radial-gradient(ellipse 50% 44% at 18% 72%, rgba(42,74,168,.48), transparent 58%),
  radial-gradient(ellipse 40% 36% at 85% 80%, rgba(28,108,192,.32), transparent 52%),
  radial-gradient(circle at 36% 38%, rgba(108,56,176,.22), transparent 48%),
  linear-gradient(160deg, #0c0e2e 0%, #0f0c2a 35%, #100e32 65%, #08081c 100%)}
/* ─── JAPANESE SUNSET / DISTANT SHIFTING TECH-LIGHT ─── */
.hero-sun{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
/* warm light rising from the horizon */
.hero-sun::after{content:'';position:absolute;left:0;right:0;bottom:0;height:56%;background:linear-gradient(to top,rgba(255,138,96,.15) 0%,rgba(255,112,132,.09) 28%,rgba(150,100,210,.05) 56%,transparent 84%)}
/* the sun — a soft disc that slowly shifts hue, like changing light far away */
.hero-sun .sun{position:absolute;right:9%;top:27%;width:min(36vw,440px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 47%,rgba(255,234,204,.96) 0%,rgba(255,186,132,.8) 30%,rgba(255,128,122,.34) 56%,rgba(150,92,182,.08) 73%,transparent 80%);animation:sunShift 24s ease-in-out infinite alternate;will-change:filter,transform}
.hero-sun .halo{position:absolute;right:3%;top:18%;width:min(50vw,600px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,transparent 55%,rgba(255,172,142,.10) 61%,transparent 66%);animation:sunShift 24s ease-in-out infinite alternate}
/* thin distant horizon line */
.hero-sun .hsun-line{position:absolute;left:0;right:0;top:63%;height:1px;background:linear-gradient(to right,transparent,rgba(255,192,152,.22) 28%,rgba(255,196,158,.32) 50%,rgba(255,192,152,.22) 72%,transparent)}
@keyframes sunShift{0%{filter:hue-rotate(-14deg) saturate(1.05);transform:translateY(0)}50%{filter:hue-rotate(16deg) saturate(1.16);transform:translateY(-10px)}100%{filter:hue-rotate(32deg) saturate(1);transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.hero-sun .sun,.hero-sun .halo{animation:none}}
[data-cherry="true"] .hero-sun .sun{background:radial-gradient(circle at 50% 47%,rgba(255,228,238,.96) 0%,rgba(255,168,196,.8) 30%,rgba(245,120,160,.34) 56%,rgba(180,90,170,.08) 73%,transparent 80%)}
/* glassy specular highlight + refractive rim — makes the sun read like a glass orb */
.hero-sun .sun::before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.6) 0%,rgba(255,255,255,.14) 14%,transparent 32%);mix-blend-mode:screen;pointer-events:none}
.hero-sun .sun::after{content:'';position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 6px 26px rgba(255,255,255,.2),inset 0 -10px 30px rgba(255,150,120,.16);pointer-events:none}
/* reusable sun motif across sections */
.sec-sun{position:absolute;border-radius:50%;pointer-events:none;z-index:0;animation:sunShift 26s ease-in-out infinite alternate;will-change:filter,transform}
.sec-sun::before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.4),transparent 30%);mix-blend-mode:screen}
.contact{position:relative;overflow:hidden}
.contact .sec-sun{width:min(62vw,660px);aspect-ratio:1;left:50%;top:-16%;transform:translateX(-50%);background:radial-gradient(circle at 50% 50%,rgba(255,198,150,.34) 0%,rgba(255,150,140,.18) 36%,rgba(176,120,205,.07) 60%,transparent 72%)}
[data-theme="dark"] .contact .sec-sun{background:radial-gradient(circle at 50% 50%,rgba(255,176,120,.26) 0%,rgba(255,118,128,.14) 38%,rgba(150,100,210,.07) 62%,transparent 74%)}
.phil .sec-sun{width:min(46vw,540px);aspect-ratio:1;right:-7%;top:10%;background:radial-gradient(circle at 50% 50%,rgba(255,182,132,.24) 0%,rgba(255,120,130,.13) 40%,rgba(150,100,200,.06) 64%,transparent 74%)}
@media(prefers-reduced-motion:reduce){.sec-sun{animation:none}}
.hero-inner{max-width:1240px;margin:0 auto;padding:0 40px;position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) 340px;gap:56px;align-items:end}
.hero-tag{margin-bottom:20px;opacity:0;animation:fu .6s var(--ease) .4s forwards}.hero-tag .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);box-shadow:none;color:rgba(244,241,236,.74);padding:7px 14px}
.hero-name{font-family:var(--ui);font-weight:800;font-size:clamp(72px,10.6vw,156px);line-height:.86;letter-spacing:-.065em;margin-bottom:18px;color:#f4f0ea;opacity:0;animation:fu 1s var(--ease) .55s forwards;text-wrap:balance}
.hero-name em{font-style:normal;font-weight:800;display:block;color:rgba(244,240,234,.9)}
/* slot-machine load-in for the name */
.hn-ch{display:inline-block}
.hn-ch.hn-spin{color:rgba(244,240,234,.5)}
@keyframes hnPop{0%{transform:translateY(.05em) scale(1.16)}100%{transform:none}}
.hn-ch.hn-lock{animation:hnPop .26s var(--ease)}
/* desc letters load-in */
.hd-w{display:inline-block;white-space:nowrap}
.hd-ch{display:inline-block;opacity:0}
.hero-desc{font-family:var(--ui);font-size:20px;font-weight:400;color:rgba(244,240,234,.82);max-width:620px;line-height:1.58;margin-bottom:36px;opacity:0;animation:fu .9s var(--ease) .78s forwards}
.hero-attr{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,240,234,.56)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:fu .8s var(--ease) 1s forwards}.btn-solid{font-family:var(--ui);font-size:14px;font-weight:700;color:#0a0a0f;background:#f4f0ea;padding:14px 28px;border-radius:999px;text-decoration:none;transition:transform .38s cubic-bezier(.34,1.56,.64,1),box-shadow .38s cubic-bezier(.34,1.56,.64,1);box-shadow:0 18px 42px rgba(255,244,234,.08)}.btn-solid:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(255,244,234,.14)}.btn-solid:active{transform:scale(.96);transition:transform .12s ease}.btn-ghost{font-family:var(--ui);font-size:14px;font-weight:500;color:#f4f0ea;padding:14px 28px;border-radius:999px;text-decoration:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);transition:transform .38s cubic-bezier(.34,1.56,.64,1),background .22s ease}.btn-ghost:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}.btn-ghost:active{transform:scale(.96);transition:transform .12s ease}
.hero-cards{display:grid;gap:14px;opacity:0;animation:fu 1s var(--ease) 1.15s forwards}
.hcard{padding:18px 18px 20px;min-width:0;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)}
a.hcard-link{display:block;text-decoration:none;cursor:pointer;transition:transform .38s cubic-bezier(.34,1.56,.64,1),box-shadow .38s cubic-bezier(.34,1.56,.64,1),opacity .22s ease}
a.hcard-link:hover{transform:translateY(-3px) scale(1.012);box-shadow:0 32px 64px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.16)}
a.hcard-link:active{transform:scale(.97) translateY(0px);opacity:.82;transition:transform .12s ease,opacity .12s ease}
.hc-lbl{font-family:var(--mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,240,234,.34);margin-bottom:10px}
.hc-val{font-family:var(--ui);font-size:15px;font-weight:600;line-height:1.35;color:#f4f0ea}
.hc-sub{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:400;line-height:1.3;margin-top:5px;opacity:.62}
/* clearer hero cards over the sunset \u2014 darker glass, crisp text */
.hero-cards .hcard{background:linear-gradient(180deg,rgba(18,18,40,.58),rgba(18,18,40,.36));backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);border:1px solid rgba(255,255,255,.2);box-shadow:0 22px 48px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.14)}
.hero-cards .hc-lbl{color:rgba(255,255,255,.66)}
.hero-cards .hc-val{color:#fff}
/* ─── reflective glass motion ─── */
.hero-reflect{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;mix-blend-mode:screen;opacity:.5}
.hero-reflect::before{content:'';position:absolute;top:-40%;left:-30%;width:60%;height:180%;background:linear-gradient(105deg,transparent 0%,rgba(255,236,210,.05) 40%,rgba(255,246,232,.16) 50%,rgba(255,236,210,.05) 60%,transparent 100%);transform:rotate(8deg);animation:heroSheen 14s ease-in-out infinite}
.hero-reflect::after{content:'';position:absolute;top:-30%;right:-40%;width:50%;height:160%;background:linear-gradient(105deg,transparent 0%,rgba(190,205,255,.04) 42%,rgba(214,224,255,.11) 50%,rgba(190,205,255,.04) 58%,transparent 100%);transform:rotate(-6deg);animation:heroSheen2 19s ease-in-out infinite}
@keyframes heroSheen{0%{transform:translateX(-30%) rotate(8deg)}50%{transform:translateX(220%) rotate(8deg)}100%{transform:translateX(-30%) rotate(8deg)}}
@keyframes heroSheen2{0%{transform:translateX(40%) rotate(-6deg)}50%{transform:translateX(-220%) rotate(-6deg)}100%{transform:translateX(40%) rotate(-6deg)}}
/* light-sweep across the glass cards */
.hero-cards .hcard{position:relative;overflow:hidden}
.hero-cards .hcard::after{content:'';position:absolute;top:0;left:-120%;width:65%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16) 48%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.16) 52%,transparent);transform:skewX(-16deg);pointer-events:none;animation:cardSweep 9s ease-in-out infinite}
.hero-cards .hcard:nth-child(2)::after{animation-delay:1.1s}
.hero-cards .hcard:nth-child(3)::after{animation-delay:2.2s}
.hero-cards .hcard:nth-child(4)::after{animation-delay:3.3s}
@keyframes cardSweep{0%{left:-120%}24%{left:160%}100%{left:160%}}
@media(prefers-reduced-motion:reduce){.hero-reflect::before,.hero-reflect::after,.hero-cards .hcard::after{animation:none;opacity:0}}

/* MARQUEE */
/* ── MARQUEE — liquid glass pill ── */
/* ═══ MARQUEE — TIGHT LIQUID GLASS PILL ═══ */
.mq-wrap{
  padding:16px 40px;
  position:relative;
}
/* outer ambient glow */
.mq-wrap::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(200,190,175,.12),transparent 70%);
  pointer-events:none;
}
[data-theme="dark"] .mq-wrap::before{
  background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(100,80,140,.1),transparent 70%);
}
/* the glass ribbon — slim banner with notched ends */
.mq-glass{
  position:relative;
  max-width:840px;
  margin:0 auto;
  border-radius:6px;
  overflow:hidden;
  clip-path:polygon(0 0,100% 0,calc(100% - 17px) 50%,100% 100%,0 100%,17px 50%);
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(64px) saturate(2.4) brightness(1.1);
  -webkit-backdrop-filter:blur(64px) saturate(2.4) brightness(1.1);
  border:1px solid rgba(255,255,255,.88);
  border-bottom-color:rgba(210,200,188,.38);
  border-right-color:rgba(210,200,188,.28);
  filter:drop-shadow(0 12px 30px rgba(9,8,10,.13)) drop-shadow(0 3px 9px rgba(9,8,10,.06));
  box-shadow:
    0 2px 0 rgba(255,255,255,1) inset,
    0 -1px 0 rgba(210,200,188,.2) inset,
    1px 0 0 rgba(255,255,255,.65) inset;
}
[data-theme="dark"] .mq-glass{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14);
  border-bottom-color:rgba(255,255,255,.06);
  border-right-color:rgba(255,255,255,.05);
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.4));
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 -1px 0 rgba(0,0,0,.45) inset,
    1px 0 0 rgba(255,255,255,.1) inset;
}
/* top specular sheen */
.mq-glass::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:52%;
  background:linear-gradient(to bottom,rgba(255,255,255,.36),rgba(255,255,255,0));
  pointer-events:none;
  border-radius:var(--r20) var(--r20) 0 0;
  z-index:3;
}
[data-theme="dark"] .mq-glass::before{
  background:linear-gradient(to bottom,rgba(255,255,255,.08),rgba(255,255,255,0));
}
/* left rim */
.mq-glass::after{
  content:'';
  position:absolute;
  top:8px;left:0;bottom:8px;width:1px;
  background:linear-gradient(to bottom,rgba(255,255,255,.9),rgba(255,255,255,.18),rgba(255,255,255,0));
  pointer-events:none;
  z-index:3;
}
.mq-lbl{
  text-align:center;
  font-family:var(--mono);font-size:7.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--grey);
  padding:9px 0 5px;
  position:relative;z-index:4;
}
.mq-inner{overflow:hidden;position:relative}
/* fade masks — match the glass tint exactly */
.mq-inner::before,.mq-inner::after{
  content:'';position:absolute;top:0;bottom:0;width:64px;z-index:2;pointer-events:none;
}
.mq-inner::before{left:0;background:linear-gradient(to right,rgba(250,247,242,.95),rgba(250,247,242,0))}
.mq-inner::after{right:0;background:linear-gradient(to left,rgba(250,247,242,.95),rgba(250,247,242,0))}
[data-theme="dark"] .mq-inner::before{background:linear-gradient(to right,rgba(18,17,21,.9),rgba(18,17,21,0))}
[data-theme="dark"] .mq-inner::after{background:linear-gradient(to left,rgba(18,17,21,.9),rgba(18,17,21,0))}
.mq-track{display:flex;animation:scroll 24s linear infinite;width:max-content}
.mq-track:hover{animation-play-state:paused}
.mq-item{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:0 30px;
  height:66px;
  opacity:.74;
  filter:none;
  transition:opacity .4s var(--ease),transform .34s var(--ease);
  flex-shrink:0;
}
/* hairline separators between logos */
.mq-item + .mq-item::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:22px;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(140,134,128,.34),transparent);
}
[data-theme="dark"] .mq-item + .mq-item::before{background:linear-gradient(to bottom,transparent,rgba(255,255,255,.16),transparent)}
.mq-item:hover{opacity:1;transform:scale(1.08)}
.mq-item img{height:40px;width:auto;object-fit:contain;display:block;max-width:150px}
.mq-item.mq-gw img{height:32px}
.mq-item.mq-tall img{height:58px;max-width:42px}
.mq-item.mq-seal img{height:46px;max-width:46px;border-radius:50%}
[data-theme="dark"] .mq-track img{filter:invert(1) brightness(1.7)}
[data-theme="dark"] .mq-track img.seal-keep{filter:none}
.mq-track img.seal-keep{filter:none}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}

/* SECTION */
.sec-wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.sec-eye{font-family:var(--mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--grey);margin-bottom:12px}
.sec-title{font-family:var(--serif);font-weight:900;font-size:clamp(40px,6vw,84px);letter-spacing:-.032em;line-height:.93;margin-bottom:10px}
.sec-title em{font-style:italic;font-weight:300}
.sec-sub{font-family:var(--ui);font-size:16px;font-weight:300;color:var(--grey);max-width:420px;line-height:1.52;margin-bottom:52px}

/* ═══════════════════════════════════════════
   BRANDSTORM 2025 — where we started / going
   ═══════════════════════════════════════════ */
.bs{padding:108px 0 0;position:relative;overflow:hidden}
.bs .sec-eye{color:#c47f2a}
[data-theme="dark"] .bs .sec-eye{color:#e8a85a}
.bs-win{position:relative;border-radius:var(--r28);overflow:hidden;margin-top:48px;box-shadow:0 40px 100px rgba(20,24,46,.26),inset 0 1px 0 rgba(255,255,255,.3)}
.bs-win img{display:block;width:100%;height:auto;max-height:640px;object-fit:cover;object-position:center 32%}
.bs-win::after{content:'';position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(to top,rgba(8,10,24,.86),rgba(8,10,24,.34) 50%,transparent);pointer-events:none}
.bs-win-badge{position:absolute;top:22px;left:22px;z-index:2;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:#1a1206;padding:9px 16px 9px 13px;border-radius:999px;background:linear-gradient(135deg,#ffe39c,#e8a83f 60%,#c9842f);box-shadow:0 8px 24px rgba(201,132,47,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.bs-win-badge svg{display:block}
.bs-win-cap{position:absolute;left:30px;right:30px;bottom:26px;z-index:2}
.bs-win-cap h3{font-family:var(--serif);font-weight:800;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.02em;line-height:1.04;color:#fff;margin-bottom:7px}
.bs-win-cap p{font-family:var(--ui);font-size:14px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.78);max-width:560px}
.bs-jrny-lbl{display:flex;align-items:center;gap:14px;margin:54px 0 22px}
.bs-jrny-lbl span{font-family:var(--mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--grey);white-space:nowrap}
.bs-jrny-lbl::after{content:'';flex:1;height:1px;background:var(--rule)}
.bs-journey{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bs-step{display:flex;flex-direction:column;border-radius:var(--r20);overflow:hidden;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 50px rgba(20,24,46,.09),inset 0 1px 0 rgba(255,255,255,.8)}
[data-theme="dark"] .bs-step{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);box-shadow:0 18px 50px rgba(0,0,0,.34)}
.bs-step-img{height:268px;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 100% at 50% 0%,#f3eee6,#e4ddd0);overflow:hidden;padding:14px}
[data-theme="dark"] .bs-step-img{background:radial-gradient(120% 100% at 50% 0%,#1a1820,#100e15)}
.bs-step-img img{max-height:100%;max-width:100%;object-fit:contain;border-radius:8px}
.bs-step-txt{padding:20px 22px 24px}
.bs-step-num{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#c47f2a;margin-bottom:9px}
[data-theme="dark"] .bs-step-num{color:#e8a85a}
.bs-step-h{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.018em;color:var(--ink);margin-bottom:8px}
.bs-step-b{font-family:var(--ui);font-size:13px;font-weight:300;line-height:1.62;color:var(--mid)}
/* the 'going' card — gold, links to product */
.bs-step.go{background:linear-gradient(158deg,#fbe7bd,#e8a83f 70%,#c9842f);border-color:rgba(255,255,255,.5);text-decoration:none;justify-content:flex-end;min-height:268px}
.bs-step.go .bs-step-img{background:transparent;height:auto;flex:1;align-items:flex-end;padding:22px 22px 0}
.bs-go-arrow{width:46px;height:46px;border-radius:50%;background:rgba(26,18,6,.16);display:flex;align-items:center;justify-content:center;color:#1a1206;transition:transform .3s var(--ease),background .3s}
.bs-step.go:hover .bs-go-arrow{transform:translateY(4px);background:rgba(26,18,6,.26)}
.bs-step.go .bs-step-num{color:#7a5414}
.bs-step.go .bs-step-h{color:#241502}
.bs-step.go .bs-step-b{color:rgba(36,21,2,.74)}
@media(max-width:900px){.bs-journey{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}.bs-step.go{min-height:0}}

/* ═══════════════════════════════════════════
   LOOKSMAX — modular product hero
   ═══════════════════════════════════════════ */
.lmx{padding:108px 0;position:relative;overflow:hidden}
.lmx .sec-eye{color:#c47f2a}
[data-theme="dark"] .lmx .sec-eye{color:#e8a85a}
.lmx-stage{display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center;margin-top:50px}
.lmx-vis{position:relative;border-radius:var(--r28);overflow:hidden;background:radial-gradient(120% 90% at 70% 12%,#f6c98a 0%,#c8843f 34%,#7a4a2a 66%,#2c1c16 100%);box-shadow:0 40px 100px rgba(70,38,16,.32),inset 0 1px 0 rgba(255,235,205,.4)}
.lmx-vis::after{content:'';position:absolute;inset:0;border-radius:var(--r28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);pointer-events:none;z-index:3}
.lmx-vis img{display:block;width:100%;height:auto;mix-blend-mode:normal}
.lmx-vis .lmx-glint{position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,244,224,.18) 48%,rgba(255,244,224,.32) 50%,rgba(255,244,224,.18) 52%,transparent);transform:skewX(-14deg);pointer-events:none;animation:lmxGlint 9s ease-in-out infinite;z-index:2}
@keyframes lmxGlint{0%{left:-130%}28%{left:170%}100%{left:170%}}
@media(prefers-reduced-motion:reduce){.lmx-vis .lmx-glint{animation:none;opacity:0}}

.lmx-info{align-self:center}
.lmx-brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#b9802f;padding:8px 14px;border-radius:999px;border:1px solid rgba(200,132,63,.34);background:linear-gradient(180deg,rgba(248,200,138,.16),rgba(200,132,63,.06));margin-bottom:22px}
[data-theme="dark"] .lmx-brand{color:#e8a85a;border-color:rgba(232,168,90,.3)}
.lmx-h{font-family:var(--serif);font-weight:900;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.03em;line-height:1;color:var(--ink);margin-bottom:16px}
.lmx-h em{font-style:italic;font-weight:300;color:#c47f2a}
[data-theme="dark"] .lmx-h em{color:#e8a85a}
.lmx-body{font-family:var(--ui);font-size:15px;font-weight:300;line-height:1.72;color:var(--mid);max-width:440px;margin-bottom:18px}
.lmx-body strong{font-weight:600;color:var(--ink)}
.lmx-specs{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:34px;margin:26px 0 28px;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.lmx-spec .ls-n{font-family:var(--serif);font-weight:800;font-size:30px;letter-spacing:-.02em;color:var(--ink);line-height:1}
.lmx-spec .ls-n em{font-style:normal;color:#c47f2a;font-size:18px;font-weight:700}
[data-theme="dark"] .lmx-spec .ls-n em{color:#e8a85a}
.lmx-spec .ls-l{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-top:8px}
.lmx-tag{font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:#b9802f}
[data-theme="dark"] .lmx-tag{color:#e8a85a}
@media(max-width:900px){.lmx-stage{grid-template-columns:1fr;gap:34px;max-width:520px;margin-left:auto;margin-right:auto}.lmx-specs{gap:24px}}

/* ═══════════════════════════════════════════
   MEN EXPERT — 3-in-1 essentials kit (CAD)
   ═══════════════════════════════════════════ */
.mx{padding:108px 0 0;position:relative;overflow:hidden}
.mx .sec-eye{color:#cf6f24}
[data-theme="dark"] .mx .sec-eye{color:#f0944a}
.mx-hero{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-top:48px}
.mx-render{position:relative;border-radius:var(--r28);overflow:hidden;background:radial-gradient(120% 100% at 50% 18%,#e7e2d8,#d2ccc0 70%,#b8b1a4);box-shadow:0 40px 100px rgba(40,38,32,.24),inset 0 1px 0 rgba(255,255,255,.5)}
.mx-render img{display:block;width:100%;height:auto}
.mx-badge{position:absolute;top:20px;left:20px;z-index:2;display:inline-flex;align-items:baseline;gap:6px;font-family:var(--serif);font-weight:800;font-size:15px;letter-spacing:-.01em;color:#1a1714;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:8px 15px;border-radius:999px;box-shadow:0 6px 18px rgba(40,38,32,.18)}
.mx-badge em{font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:#cf6f24}
.mx-brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#b86424;padding:8px 14px;border-radius:999px;border:1px solid rgba(207,111,36,.32);background:rgba(207,111,36,.06);margin-bottom:20px}
[data-theme="dark"] .mx-brand{color:#f0944a;border-color:rgba(240,148,74,.3)}
.mx-h{font-family:var(--serif);font-weight:900;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.03em;line-height:1;color:var(--ink);margin-bottom:14px}
.mx-h em{font-style:italic;font-weight:300;color:#cf6f24}
[data-theme="dark"] .mx-h em{color:#f0944a}
.mx-body{font-family:var(--ui);font-size:15px;font-weight:300;line-height:1.7;color:var(--mid);max-width:440px;margin-bottom:24px}
.mx-kit{display:grid;gap:0;margin-bottom:26px}
.mx-kit-row{display:flex;align-items:baseline;gap:15px;padding:13px 0;border-top:1px solid var(--rule)}
.mx-kit-row:last-child{border-bottom:1px solid var(--rule)}
.mx-kit-row .mk-n{font-family:var(--mono);font-size:10px;color:#cf6f24;flex-shrink:0;width:22px}
[data-theme="dark"] .mx-kit-row .mk-n{color:#f0944a}
.mx-kit-row .mk-name{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--ink);min-width:104px}
.mx-kit-row .mk-d{font-family:var(--ui);font-size:13px;font-weight:300;color:var(--grey)}
.mx-specs{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:30px}
.mx-spec .ms-v{font-family:var(--serif);font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--ink);line-height:1}
.mx-spec .ms-l{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:7px}
/* drawing sheet */
.mx-sheet{position:relative;margin-top:56px;border-radius:14px;background:#fbfaf7;border:1px solid rgba(40,44,54,.16);box-shadow:0 30px 80px rgba(20,24,40,.14);padding:18px 18px 0}
[data-theme="dark"] .mx-sheet{background:#0e0d12;border-color:rgba(255,255,255,.12)}
.mx-sheet::before{content:'';position:absolute;inset:9px;border:1px solid rgba(40,44,54,.14);border-radius:8px;pointer-events:none}
[data-theme="dark"] .mx-sheet::before{border-color:rgba(255,255,255,.08)}
.mx-sheet-bar{position:absolute;top:-11px;left:24px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);background:var(--paper);padding:0 11px}
.mx-sheet-bar b{color:var(--ink);font-weight:400}
.mx-sheet img{display:block;width:100%;height:auto;border-radius:6px;position:relative;z-index:1}
.mx-sheet-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:13px 8px 15px;font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.mx-sheet-foot span b{color:var(--ink);font-weight:400}
@media(max-width:900px){.mx-hero{grid-template-columns:1fr;gap:32px}.mx-specs{grid-template-columns:1fr 1fr;gap:20px}.mx-render{max-width:480px}}

/* ═══════════════════════════════════════════
   AIRABLE — reinventing climate / HVAC
   ═══════════════════════════════════════════ */
.air{padding:108px 0 0;position:relative;overflow:hidden}
.air .sec-eye{color:#2f8fb8}
[data-theme="dark"] .air .sec-eye{color:#7cc8e6}
.air-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:54px;align-items:center;margin-top:50px}
.air-web{position:relative;margin-top:48px;border-radius:var(--r20);overflow:hidden;border:1px solid rgba(40,70,90,.18);box-shadow:0 34px 90px rgba(20,40,56,.2)}
.air-web-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:linear-gradient(#f2f6f8,#e5edf1);border-bottom:1px solid rgba(40,70,90,.12)}
[data-theme="dark"] .air-web-bar{background:linear-gradient(#1a2129,#131920);border-bottom-color:rgba(255,255,255,.08)}
.awb-dot{width:9px;height:9px;border-radius:50%;background:rgba(40,70,90,.22);flex-shrink:0}
[data-theme="dark"] .awb-dot{background:rgba(255,255,255,.2)}
.air-web-url{margin-left:10px;font-family:var(--mono);font-size:10px;color:var(--grey);letter-spacing:.03em;background:rgba(40,70,90,.07);padding:6px 13px;border-radius:7px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-theme="dark"] .air-web-url{background:rgba(255,255,255,.07)}
.air-web-open{font-family:var(--ui);font-size:11px;font-weight:600;color:#2f8fb8;text-decoration:none;white-space:nowrap;padding:5px 10px;border-radius:7px;transition:background .25s}
.air-web-open:hover{background:rgba(47,143,184,.1)}
.air-web iframe{display:block;width:100%;height:min(66vh,620px);border:none;background:#fff}
.air-wordmark{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px}
.air-wordmark .aw-a{font-family:var(--serif);font-weight:300;font-size:30px;line-height:1;color:#2f8fb8;letter-spacing:-.02em}
[data-theme="dark"] .air-wordmark .aw-a{color:#7cc8e6}
.air-wordmark .aw-t{font-family:var(--ui);font-weight:300;font-size:21px;letter-spacing:.34em;text-transform:lowercase;color:var(--ink)}
.air-h{font-family:var(--serif);font-weight:900;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.03em;line-height:1.02;color:var(--ink);margin-bottom:15px}
.air-h em{font-style:italic;font-weight:300;color:#2f8fb8}
[data-theme="dark"] .air-h em{color:#7cc8e6}
.air-body{font-family:var(--ui);font-size:15px;font-weight:300;line-height:1.72;color:var(--mid);max-width:440px;margin-bottom:22px}
.air-feats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:28px;margin-bottom:30px}
.air-feat .af-v{font-family:var(--serif);font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--ink);line-height:1}
.air-feat .af-l{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:7px}
.air-cta{display:inline-flex;align-items:center;gap:11px;font-family:var(--ui);font-size:14px;font-weight:600;color:#fff;background:linear-gradient(135deg,#3aa0c8,#2f7fb0);padding:15px 26px;border-radius:var(--r40);text-decoration:none;box-shadow:0 14px 34px rgba(47,127,176,.36),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .26s var(--ease),box-shadow .26s}
.air-cta:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(47,127,176,.46)}
.air-cta svg{transition:transform .26s var(--ease)}
.air-cta:hover svg{transform:translateX(4px)}
.air-site{display:inline-flex;align-items:center;gap:10px;margin-top:40px;font-family:var(--ui);font-size:14px;font-weight:600;color:#fff;background:linear-gradient(135deg,#3aa0c8,#2f7fb0);padding:15px 26px;border-radius:var(--r40);text-decoration:none;box-shadow:0 14px 34px rgba(47,127,176,.36),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .26s var(--ease),box-shadow .26s}
.air-site:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(47,127,176,.46)}
.air-site svg{transition:transform .26s var(--ease)}
.air-site:hover svg{transform:translate(3px,-3px)}
@media(max-width:900px){.air-hero{grid-template-columns:1fr;gap:28px}.air-feats{gap:22px}.air-web iframe{height:60vh}}

/* WORK */
.work{padding:100px 0 0}
.proj-grid{display:flex;flex-direction:column;gap:2px}
.proj-row{display:grid;grid-template-columns:52px 1fr auto;align-items:start;gap:24px;padding:22px 18px;border-radius:var(--r12);cursor:pointer;transition:background .18s}
.proj-row:hover{background:rgba(255,255,255,.7)}
.p-num{font-family:var(--mono);font-size:10px;color:var(--grey);padding-top:3px}
.p-client{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.p-name{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-bottom:7px;transition:transform .25s var(--ease)}
.proj-row:hover .p-name{transform:translateX(3px)}
.p-desc{font-family:var(--ui);font-size:13px;font-weight:300;line-height:1.65;color:var(--mid);max-width:510px}
.p-tag{font-family:var(--mono);font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);padding:7px 14px;border-radius:var(--r40);white-space:nowrap;align-self:start;margin-top:3px;border:1px solid var(--rule);transition:border-color .22s,color .22s}
.proj-row:hover .p-tag{border-color:var(--ink);color:var(--ink)}
.proj-div{height:1px;background:rgba(212,204,192,.45);margin:0 18px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:52px;padding-bottom:80px}
.sc{padding:28px 28px 32px}
.sc-lbl{font-family:var(--mono);font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(212,204,192,.38)}
.sc-name{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:-.015em;margin-bottom:10px}
.sc-body{font-family:var(--ui);font-size:13px;font-weight:300;line-height:1.68;color:var(--mid)}
.sc-link{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px;transition:border-color .22s}
.sc-link:hover{border-color:var(--ink)}

/* GALLERY */
.gallery{padding:100px 0 0}
.gallery .sec-wrap{max-width:1440px}
.sw-outer{border-radius:var(--r28);overflow:hidden;box-shadow:0 2px 0 rgba(255,255,255,.85) inset,0 28px 88px rgba(9,8,10,.11)}
.sw-track{display:flex;transition:transform .78s var(--ease-out)}
.slide{min-width:100%;display:grid;grid-template-columns:58% 1fr}
.sl-vis{position:relative;overflow:hidden;border-radius:var(--r28) 0 0 var(--r28);min-height:680px}
.sl-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s var(--ease)}
/* KEY: LooksMax hero uses background-size contain so full product visible */
.sl-bg.contain{background-size:contain;background-repeat:no-repeat;background-color:#0a0818}
.slide:hover .sl-bg{transform:scale(1.03)}
.sl-mosaic{position:absolute;inset:0;display:grid}
.m2{grid-template-columns:1fr 1fr;gap:2px}
.m4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px}
.sl-mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.slide:hover .sl-mosaic img{transform:scale(1.03)}
.sl-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;background:linear-gradient(to top,rgba(6,5,7,.78) 0%,rgba(6,5,7,.22) 44%,transparent 100%)}
.sl-big{font-family:var(--serif);font-weight:900;font-size:clamp(28px,4.2vw,58px);letter-spacing:-.022em;line-height:.93;color:rgba(255,255,255,.93)}
.sl-big.dk{color:rgba(9,8,10,.82)}
.sl-info{padding:36px 38px;display:flex;flex-direction:column;justify-content:center;background:var(--paper2);border-radius:0 var(--r28) var(--r28) 0}
.sl-num{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--grey);margin-bottom:18px}
.sl-h{font-family:var(--serif);font-size:clamp(18px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-bottom:6px}
.sl-h em{font-style:italic;font-weight:300}
.sl-sub{font-family:var(--ui);font-size:12px;font-weight:300;color:var(--grey);margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--rule);line-height:1.5}
.sl-body{font-family:var(--ui);font-size:13px;font-weight:300;line-height:1.78;color:var(--mid);margin-bottom:22px}
.sl-facts{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.sf-l{font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-bottom:3px}
.sf-v{font-family:var(--ui);font-size:14px;font-weight:650;color:var(--ink)}
.sw-ctrls{display:flex;align-items:center;gap:10px;margin-top:18px}
.sw-btn{width:36px;height:36px;border-radius:50%;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s;border:none}
.sw-btn:hover{background:rgba(9,8,10,.07)}
.sw-btn svg{stroke:var(--grey);transition:stroke .18s}
.sw-btn:hover svg{stroke:var(--ink)}
.sw-dots{display:flex;gap:5px}
.sdot{width:4px;height:4px;border-radius:50%;background:var(--rule);cursor:pointer;transition:background .28s,transform .28s}
.sdot.on{background:var(--ink);transform:scale(1.5)}
.sw-prog{font-family:var(--mono);font-size:10px;color:var(--grey);margin-left:auto;letter-spacing:.1em}

/* ABOUT */
.about{padding:100px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-img-wrap{position:relative}
.about-photo{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;border-radius:var(--r20);display:block;position:relative;z-index:1;filter:grayscale(100%) contrast(1.06) brightness(.96)}
.photo-frame{position:absolute;inset:-16px;border-radius:calc(var(--r20) + 14px);z-index:0;background:rgba(255,255,255,.26);backdrop-filter:blur(28px) saturate(1.9);-webkit-backdrop-filter:blur(28px) saturate(1.9);border:1px solid rgba(255,255,255,.78);box-shadow:0 2px 0 rgba(255,255,255,.98) inset,0 28px 80px rgba(9,8,10,.11)}
.about-eye{font-family:var(--mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--grey);margin-bottom:14px}
.about-h{font-family:var(--serif);font-weight:900;font-size:clamp(38px,4.8vw,64px);letter-spacing:-.032em;line-height:.98;margin-bottom:22px}
.about-h em{font-style:italic;font-weight:300}
.about-body{font-family:var(--ui);font-size:15px;font-weight:300;line-height:1.72;color:var(--mid)}
.about-body p+p{margin-top:14px}
.about-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.atag{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);border:1px solid var(--rule);border-radius:var(--r40);padding:7px 16px}

/* PHILOSOPHY */
.phil{padding:100px 0;background:#0d0c0e;position:relative;overflow:hidden}
.phil::before{content:'';position:absolute;inset:0;opacity:.02;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px}
.phil-in{max-width:1240px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.phil-q{font-family:var(--serif);font-weight:900;font-size:clamp(30px,4.2vw,58px);line-height:.98;letter-spacing:-.028em;color:rgba(244,241,236,.94) !important}
.phil-q em{font-style:italic;font-weight:300}
.phil-attr{font-family:var(--mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,241,236,.28) !important;margin-top:22px;display:block}
.phil-body{font-family:var(--ui);font-size:15px;font-weight:300;line-height:1.78;color:rgba(244,241,236,.52) !important}
.phil-body p+p{margin-top:14px}
[data-theme="dark"] .phil { background: #080709; }
[data-theme="dark"] .phil-q { color: rgba(244,241,236,.9); }
[data-theme="dark"] .phil-body { color: rgba(244,241,236,.48); }
[data-theme="dark"] .phil-attr { color: rgba(244,241,236,.22); }

/* PHILOSOPHY — clarity manifesto */
.phil-in2{max-width:1240px;margin:0 auto;padding:0 40px}
.phil-kicker{font-family:var(--mono);font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,241,236,.4);display:block;margin-bottom:30px}
.phil-statement{font-family:var(--serif);font-weight:900;font-size:clamp(44px,7vw,98px);line-height:.92;letter-spacing:-.04em;color:#f4f1ec;max-width:13ch}
.phil-statement em{font-style:italic;font-weight:300;color:rgba(244,241,236,.5)}
.phil-lead{font-family:var(--ui);font-size:clamp(16px,1.55vw,20px);font-weight:300;line-height:1.62;color:rgba(244,241,236,.62);max-width:560px;margin-top:30px}
.phil-tenets{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:68px;background:rgba(244,241,236,.1);border:1px solid rgba(244,241,236,.1);border-radius:var(--r20);overflow:hidden}
.ptenet{padding:40px 36px 46px;background:#0d0c0e;position:relative;transition:background .35s var(--ease)}
.ptenet::before{content:'';position:absolute;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,#9db0ff,#cba23a);transition:width .5s var(--ease)}
.ptenet:hover{background:#15131a}
.ptenet:hover::before{width:100%}
.pt-num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(244,241,236,.34);display:block;margin-bottom:52px}
.pt-h{font-family:var(--serif);font-weight:700;font-size:25px;letter-spacing:-.02em;color:#f4f1ec;margin-bottom:13px}
.pt-b{font-family:var(--ui);font-size:14px;font-weight:300;line-height:1.66;color:rgba(244,241,236,.52)}
.pt-b em{font-style:italic;color:rgba(244,241,236,.78)}
[data-theme="dark"] .ptenet{background:#080709}
[data-theme="dark"] .ptenet:hover{background:#100e14}
@media(max-width:820px){.phil-tenets{grid-template-columns:1fr}.phil-in2{padding:0 max(20px,env(safe-area-inset-left))}}

/* HUMANX */
.hx{padding:100px 0}
.hx-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.hx-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--grey);margin-bottom:12px}
.hx-t{font-family:var(--serif);font-weight:900;font-size:clamp(36px,5.5vw,72px);letter-spacing:-.032em;line-height:.93;margin-bottom:14px}
.hx-t em{font-style:italic;font-weight:300}
.hx-sub{font-family:var(--ui);font-size:16px;font-weight:300;color:var(--grey);margin-bottom:12px}
.hx-body{font-family:var(--ui);font-size:14px;font-weight:300;line-height:1.72;color:var(--mid)}
.hx-link{display:inline-flex;align-items:center;gap:5px;margin-top:18px;font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px;transition:border-color .22s}
.hx-link:hover{border-color:var(--ink)}


/* CONTACT */
.contact{padding:120px 0 96px;text-align:center}
.ct-eye{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);margin-bottom:20px;display:block}
.ct-title{font-family:var(--serif);font-weight:900;font-size:clamp(54px,9.5vw,128px);letter-spacing:-.038em;line-height:.88;margin-bottom:44px}
.ct-title em{font-style:italic;font-weight:300}
.ct-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;padding:16px 36px;border-radius:var(--r40)}
.ct-btns{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}

/* ═══ FOOTER — THIN FLOATING GLASS BAR ═══ */
footer {
  background: transparent;
  padding: 0 40px 40px;
}
.footer-glass {
  max-width: 1240px;
  margin: 0 auto;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(48px) saturate(2) brightness(1.06);
  -webkit-backdrop-filter: blur(48px) saturate(2) brightness(1.06);
  border: 1px solid rgba(255,255,255,.75);
  border-bottom-color: rgba(210,200,188,.3);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,.9) inset,
    0 8px 32px rgba(9,8,10,.06),
    0 2px 8px rgba(9,8,10,.04);
  border-radius: 16px;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
}
.footer-glass::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,0));
  pointer-events: none;
}
[data-theme="dark"] .footer-glass {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.11);
  border-bottom-color: rgba(255,255,255,.05);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 8px 32px rgba(0,0,0,.28);
}
[data-theme="dark"] .footer-glass::before {
  background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,0));
}
.ft-sig {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -.02em;
  color: var(--ink);
  white-space: nowrap;
}
.ft-sig strong { font-weight: 700; font-style: normal; }
.ft-meta {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ft-meta-item {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}
.ft-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--rule); flex-shrink: 0;
}

@keyframes fu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.vis{opacity:1;transform:none}
.rd1{transition-delay:.08s}.rd2{transition-delay:.16s}.rd3{transition-delay:.24s}

@media(max-width:1000px){
  nav{top:18px;width:calc(100% - 26px)}
  .hero-inner{grid-template-columns:1fr}
  .hero-cards{display:none}
  .slide{grid-template-columns:1fr}
  .sl-vis{min-height:260px;border-radius:var(--r28) var(--r28) 0 0}
  .sl-info{border-radius:0 0 var(--r28) var(--r28)}
  .about-grid,.phil-in,.hx-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
  .about-img-wrap{max-width:320px;margin:0 auto}
  footer{flex-direction:column;gap:12px;text-align:center;padding:24px}
  .ft-r{flex-direction:column;gap:8px}
  .proj-row{grid-template-columns:38px 1fr}
  .p-tag{display:none}
}

/* ══════════════════════════════════════════════
   iPHONE LANDSCAPE — 17 Pro / Air / Pro Max
   Landscape: ~852–932px wide × 390–430px tall
   Portrait:  ~390–430px wide
   Safe areas handled via env(safe-area-inset-*)
══════════════════════════════════════════════ */

/* shared mobile base — portrait + landscape */
@media (max-width: 932px) {
  :root {
    --r8: 6px; --r12: 10px; --r16: 12px;
    --r20: 14px; --r28: 18px; --r40: 24px;
  }

  /* disable custom cursor on touch */
  .cur, .curR { display: none; }
  body { cursor: auto; }

  /* nav — full-width connected bar, safe-area aware */
  nav {
    top: 0;
    width: 100%;
    max-width: 100%;
    left: 0;
    transform: none;
    padding: 0 16px;
    border-radius: 0 0 22px 22px;
  }
  .nav-in { height: 66px; }
  .nav-links { display: none; }
  .nav-phone { display: none; }
  .nav-logo { font-size: 16px; font-weight: 700; }

  /* hero */
  .hero { padding-top: 80px; min-height: auto; }
  .hero-inner {
    padding: 32px max(20px, env(safe-area-inset-left)) 40px;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-name { font-size: clamp(52px, 14vw, 88px); margin-bottom: 16px; }
  .hero-desc { font-size: 15px; margin-bottom: 24px; max-width: 100%; }
  .hero-cards { display: none; }
  .hero-actions { gap: 8px; }
  .btn-solid, .btn-ghost { padding: 11px 22px; font-size: 13px; }

  /* marquee */
  .mq-wrap { padding: 16px max(16px, env(safe-area-inset-left)); }
  .mq-item { padding: 0 30px; height: 76px; }
  .mq-item img { height: 44px; max-width: 150px; }
  .mq-item.mq-tall img { height: 66px; max-width: 46px; }
  .mq-lbl { padding: 10px 0 8px; font-size: 7px; }

  /* section wrappers */
  .sec-wrap { padding: 0 max(20px, env(safe-area-inset-left)); }
  .sec-title { font-size: clamp(32px, 9vw, 56px); }
  .sec-sub { font-size: 14px; margin-bottom: 32px; }

  /* work */
  .work { padding: 60px 0 0; }
  .proj-row { grid-template-columns: 36px 1fr; gap: 14px; padding: 16px 12px; }
  .p-name { font-size: clamp(17px, 4vw, 24px); }
  .p-desc { font-size: 12px; }
  .p-tag { display: none; }
  .stat-row { grid-template-columns: 1fr; gap: 10px; margin-top: 32px; padding-bottom: 60px; }
  .sc { padding: 20px 22px 24px; }

  /* gallery */
  .gallery { padding: 60px 0 0; }
  .slide { grid-template-columns: 1fr; }
  .sl-vis { min-height: 220px; border-radius: var(--r28) var(--r28) 0 0; }
  .sl-info { border-radius: 0 0 var(--r28) var(--r28); padding: 24px 24px 28px; }
  .sl-h { font-size: clamp(16px, 4vw, 22px); }
  .sl-body { font-size: 12px; margin-bottom: 16px; }
  .sl-facts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sf-v { font-size: 12px; }
  .sw-outer { border-radius: var(--r20); }

  /* about */
  .about { padding: 60px 0; }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-img-wrap { max-width: 240px; margin: 0 auto; }
  .about-h { font-size: clamp(34px, 9vw, 52px); }
  .about-body { font-size: 14px; }

  /* philosophy */
  .phil { padding: 60px 0; }
  .phil-in { grid-template-columns: 1fr; gap: 28px; padding: 0 max(20px, env(safe-area-inset-left)); }
  .phil-q { font-size: clamp(26px, 7vw, 42px); }
  .phil-body { font-size: 14px; }

  /* humanx */
  .hx { padding: 60px 0; }
  .hx-grid { grid-template-columns: 1fr; gap: 32px; }
  .hx-t { font-size: clamp(32px, 9vw, 56px); }


  /* contact */
  .contact { padding: 80px 0 64px; }
  .ct-title { font-size: clamp(40px, 12vw, 80px); margin-bottom: 32px; }
  .ct-btns { flex-direction: column; gap: 10px; }
  .ct-btn { font-size: 13px; padding: 13px 28px; width: 100%; max-width: 320px; justify-content: center; }

  /* footer */
  footer { padding: 0 max(16px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-bottom)); }
  .footer-glass { padding: 14px 20px; border-radius: 12px; flex-direction: column; gap: 6px; text-align: center; }
  .ft-meta { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .ft-meta-item { font-size: 7px; }
  .ft-sig { font-size: 16px; }
}

/* ── LANDSCAPE SPECIFIC — iPhone 17 Pro / Air / Pro Max ── */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --r8: 6px; --r12: 9px; --r16: 11px;
    --r20: 13px; --r28: 16px; --r40: 20px;
  }

  /* nav — slimmer, safe-area padded on sides */
  nav {
    top: 0;
    width: 100%; max-width: 100%;
    left: 0; transform: none;
    padding: 0 max(18px, env(safe-area-inset-left));
    border-radius: 0 0 18px 18px;
  }
  .nav-in { height: 60px; }
  .nav-links { display: none; }
  .nav-phone, .nav-clock { display: none; }
  .nav-logo { font-size: 13px; }
  .nav-cta { font-size: 11px; padding: 5px 12px; }
  .theme-toggle { width: 52px; height: 26px; border-radius: 13px; }
  .tgl-pill { width: 20px; height: 20px; top: 3px; left: 3px; border-radius: 10px; }
  [data-theme="dark"] .tgl-pill { transform: translateX(26px); }

  /* hero — side-by-side layout restored, tighter */
  .hero { padding-top: 44px; min-height: 100svh; }
  .hero-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    padding: 16px max(52px, env(safe-area-inset-left)) 20px;
    align-items: center;
  }
  .hero-cards { display: flex; flex-direction: column; gap: 6px; }
  .hcard { padding: 10px 14px 12px; min-width: 170px; }
  .hc-lbl { font-size: 7px; margin-bottom: 4px; }
  .hc-val { font-size: 12px; }
  .hero-name { font-size: clamp(36px, 8vw, 64px); margin-bottom: 10px; }
  .hero-desc { font-size: 13px; margin-bottom: 16px; max-width: 400px; }
  .hero-tag { margin-bottom: 12px; }
  .btn-solid, .btn-ghost { padding: 9px 18px; font-size: 12px; }

  /* marquee — ultra compact strip */
  .mq-wrap { padding: 8px max(52px, env(safe-area-inset-left)); }
  .mq-glass { border-radius: var(--r12); }
  .mq-lbl { padding: 6px 0 4px; font-size: 6px; }
  .mq-item { height: 60px; padding: 0 22px; }
  .mq-item img { height: 34px; max-width: 116px; }
  .mq-item.mq-tall img { height: 52px; max-width: 38px; }

  /* all sections — side padding respects notch */
  .sec-wrap { padding: 0 max(52px, env(safe-area-inset-left)); }
  .sec-title { font-size: clamp(26px, 6vw, 44px); }
  .sec-sub { font-size: 13px; margin-bottom: 24px; }

  /* work */
  .work { padding: 36px 0 0; }
  .proj-row { padding: 12px 10px; gap: 12px; }
  .p-name { font-size: clamp(14px, 3vw, 20px); }
  .p-desc { font-size: 11px; line-height: 1.5; }
  .proj-div { margin: 0 10px; }
  .stat-row { grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 20px; padding-bottom: 36px; }
  .sc { padding: 14px 16px 18px; }
  .sc-name { font-size: 16px; }
  .sc-body { font-size: 11px; line-height: 1.55; }

  /* gallery — landscape-friendly split */
  .gallery { padding: 36px 0 0; }
  .slide { display: grid; grid-template-columns: 55% 1fr; }
  .sl-vis { min-height: 200px; border-radius: var(--r16) 0 0 var(--r16); }
  .sl-info { border-radius: 0 var(--r16) var(--r16) 0; padding: 18px 20px 20px; overflow-y: auto; }
  .sl-h { font-size: clamp(14px, 3vw, 20px); margin-bottom: 4px; }
  .sl-sub { font-size: 10px; margin-bottom: 8px; padding-bottom: 8px; }
  .sl-body { font-size: 11px; line-height: 1.6; margin-bottom: 12px; }
  .sl-facts { gap: 6px; }
  .sf-l { font-size: 7px; }
  .sf-v { font-size: 11px; }
  .sl-num { font-size: 8px; margin-bottom: 10px; }
  .sl-big { font-size: clamp(20px, 4vw, 36px); }
  .sw-ctrls { margin-top: 10px; }

  /* about */
  .about { padding: 36px 0; }
  .about-grid { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; }
  .about-img-wrap { max-width: 180px; margin: 0; }
  .about-h { font-size: clamp(28px, 6vw, 44px); margin-bottom: 12px; }
  .about-body { font-size: 12px; line-height: 1.65; }
  .about-tags { gap: 5px; margin-top: 14px; }
  .atag { font-size: 7px; padding: 5px 11px; }

  /* philosophy */
  .phil { padding: 36px 0; }
  .phil-in { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 0 max(52px, env(safe-area-inset-left)); }
  .phil-q { font-size: clamp(20px, 5vw, 34px); }
  .phil-body { font-size: 12px; line-height: 1.7; }

  /* humanx */
  .hx { padding: 36px 0; }
  .hx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .hx-t { font-size: clamp(26px, 6vw, 44px); margin-bottom: 8px; }
  .hx-sub { font-size: 13px; }
  .hx-body { font-size: 12px; line-height: 1.65; }


  /* contact */
  .contact { padding: 48px 0 40px; }
  .ct-title { font-size: clamp(32px, 8vw, 64px); margin-bottom: 24px; }
  .ct-btns { flex-direction: row; gap: 10px; flex-wrap: wrap; }
  .ct-btn { font-size: 12px; padding: 11px 22px; width: auto; max-width: none; }

  /* footer */
  footer { padding: 0 max(52px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-bottom)); }
  .footer-glass {
    padding: 12px 20px;
    border-radius: 10px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  .ft-sig { font-size: 14px; white-space: nowrap; }
  .ft-meta { flex-wrap: nowrap; gap: 10px; }
  .ft-meta-item { font-size: 7px; }
  .ft-dot { width: 2px; height: 2px; }
}
/* ═══ HAMBURGER + DRAWER ═══ */
.nav-ham{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:6px 8px;cursor:pointer;border:none;background:none;border-radius:var(--r8);transition:background .18s;-webkit-tap-highlight-color:transparent}
.nav-ham:hover{background:rgba(9,8,10,.06)}
[data-theme="dark"] .nav-ham:hover{background:rgba(255,255,255,.08)}
.nav-ham span{display:block;width:100%;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .32s cubic-bezier(.34,1.56,.64,1),opacity .22s,width .28s;transform-origin:center}
.nav-ham.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-ham.open span:nth-child(2){opacity:0;width:0}
.nav-ham.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-drawer{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:490;pointer-events:none}
.nav-drawer-bg{position:absolute;inset:0;background:rgba(9,8,10,.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .32s var(--ease)}
.nav-drawer-panel{position:absolute;top:0;right:0;width:min(290px,82vw);height:100%;background:rgba(248,245,240,.94);backdrop-filter:blur(64px) saturate(2.2);-webkit-backdrop-filter:blur(64px) saturate(2.2);border-left:1px solid rgba(255,255,255,.82);box-shadow:-24px 0 64px rgba(9,8,10,.14);transform:translateX(100%);transition:transform .38s cubic-bezier(.34,1.15,.64,1);display:flex;flex-direction:column;padding:max(68px, env(safe-area-inset-top)) 28px max(32px, env(safe-area-inset-bottom));gap:4px;overflow-y:auto}
[data-theme="dark"] .nav-drawer-panel{background:rgba(13,12,14,.94);border-left-color:rgba(255,255,255,.1);box-shadow:-24px 0 64px rgba(0,0,0,.5)}
.nav-drawer.open{pointer-events:auto}
.nav-drawer.open .nav-drawer-bg{opacity:1}
.nav-drawer.open .nav-drawer-panel{transform:translateX(0)}
.drawer-link{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-decoration:none;padding:11px 0;border-bottom:1px solid var(--rule);display:block;transition:opacity .18s}
.drawer-link em{font-style:italic;font-weight:300}
.drawer-link:hover,.drawer-link:active{opacity:.55}
.drawer-divider{height:1px;background:var(--rule);margin:16px 0 12px}
.drawer-phone{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--grey);text-decoration:none;padding:8px 0;transition:color .18s}
.drawer-phone:hover{color:var(--ink)}
.drawer-cta{display:inline-flex;align-items:center;justify-content:center;font-family:var(--ui);font-size:14px;font-weight:600;color:var(--paper);background:var(--ink);padding:13px 24px;border-radius:var(--r40);text-decoration:none;margin-top:10px;transition:opacity .18s}
.drawer-cta:hover{opacity:.82}
[data-theme="dark"] .drawer-cta{background:rgba(255,255,255,.9);color:#0d0c0e}
.sw-hint{display:none;align-items:center;gap:6px;font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);opacity:.65;margin-left:6px}
@media(max-width:932px){
  .nav-links{display:none!important}
  .nav-phone{display:none!important}
  .nav-ham{display:flex}
  .nav-drawer{display:block}
  .sw-hint{display:flex}
}
@media(hover:none){
  .proj-row:active{background:rgba(255,255,255,.7)}
  [data-theme="dark"] .proj-row:active{background:rgba(255,255,255,.05)}
  .ct-btn:active{opacity:.72}
  .drawer-link:active{opacity:.45}
  .nav-ham:active{background:rgba(9,8,10,.1)}
}

/* APPLE INSPIRATION SECTION */
.apple-inspo {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 680px;
  display: flex;
  align-items: stretch;
}
.apple-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  transform: scale(1.04);
  transition: transform 8s ease;
  will-change: transform;
}
.apple-inspo:hover .apple-bg { transform: scale(1.0); }
.apple-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6,5,7,.72) 0%,
    rgba(6,5,7,.55) 40%,
    rgba(6,5,7,.82) 100%
  );
}
.apple-content {
  position: relative;
  z-index: 2;
  padding-top: 100px;
  padding-bottom: 100px;
}
.apple-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(48px, 7.5vw, 96px);
  letter-spacing: -.036em;
  line-height: .9;
  color: rgba(244,241,236,.95);
  margin-bottom: 52px;
}
.apple-title em { font-style: italic; font-weight: 300; }
.apple-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.apple-p {
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.82;
  color: rgba(244,241,236,.62);
  margin-bottom: 18px;
}
.apple-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.apple-quote-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.apple-q {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(22px, 2.8vw, 38px);
  letter-spacing: -.022em;
  line-height: 1.12;
  color: rgba(244,241,236,.9);
}
.apple-q em { font-style: italic; font-weight: 300; }
.apple-attr {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244,241,236,.3);
}
.apple-stat-pair {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.apple-stat-n {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: rgba(244,241,236,.9);
  margin-bottom: 5px;
}
.apple-stat-l {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(244,241,236,.38);
}
@media(max-width: 932px) {
  .apple-inspo { min-height: auto; }
  .apple-content { padding-top: 60px; padding-bottom: 60px; }
  .apple-body-grid { grid-template-columns: 1fr; gap: 32px; }
  .apple-title { font-size: clamp(40px, 11vw, 68px); margin-bottom: 32px; }
  .apple-stat-pair { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .apple-stat-n { font-size: 22px; }
}


/* ─── BABY BLUE LIQUID GLASS FIELD ─── */
.liquid-field{position:fixed;inset:-8vh -8vw;pointer-events:none;z-index:1;overflow:hidden;filter:blur(10px)}
.liquid-orb{position:absolute;border-radius:999px;background:radial-gradient(circle at 32% 28%,rgba(200,220,255,.62) 0%,rgba(130,160,255,.42) 18%,rgba(90,80,200,.22) 42%,rgba(60,50,180,.08) 66%,rgba(40,30,140,0) 78%);backdrop-filter:blur(28px) saturate(1.8);-webkit-backdrop-filter:blur(28px) saturate(1.8);border:1px solid rgba(120,150,255,.32);box-shadow:inset 0 1px 0 rgba(200,220,255,.55),inset 0 -1px 0 rgba(100,130,255,.18),0 14px 48px rgba(80,80,220,.15);mix-blend-mode:screen;opacity:.85;transform:translate3d(var(--tx,0),var(--ty,0),0) scale(var(--s,1)) rotate(var(--r,0deg));transition:transform .18s linear,opacity .35s ease}
.liquid-orb::before{content:'';position:absolute;inset:8% 10% auto auto;width:42%;height:36%;border-radius:999px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.95),rgba(255,255,255,.16) 58%,rgba(255,255,255,0) 72%);filter:blur(2px);opacity:var(--shine,.9)}
.liquid-orb::after{content:'';position:absolute;left:16%;top:18%;width:36%;height:24%;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,0));opacity:calc(var(--shine,.9) * .8)}
.liquid-orb.o1{width:36vw;height:36vw;min-width:320px;min-height:320px;left:-10vw;top:12vh}
.liquid-orb.o2{width:28vw;height:28vw;min-width:260px;min-height:260px;right:-8vw;top:34vh}
.liquid-orb.o3{width:22vw;height:22vw;min-width:220px;min-height:220px;left:34vw;bottom:-7vw}
[data-theme="dark"] .liquid-orb{background:radial-gradient(circle at 32% 28%,rgba(140,170,255,.28) 0%,rgba(100,130,255,.22) 18%,rgba(70,80,210,.14) 42%,rgba(50,60,180,.05) 68%,rgba(30,40,140,0) 78%);border-color:rgba(110,140,255,.18);box-shadow:inset 0 1px 0 rgba(160,190,255,.22),0 18px 56px rgba(70,100,220,.16);mix-blend-mode:normal;opacity:.78}
nav,.hero,.mq-wrap,.sec-wrap,.work,.gallery,.about,.phil,.hx,.apple-inspo,.contact,footer,.nav-drawer{position:relative;z-index:2}
@media(max-width:932px){.liquid-orb.o1{width:54vw;height:54vw;left:-20vw;top:18vh}.liquid-orb.o2{width:44vw;height:44vw;right:-18vw;top:46vh}.liquid-orb.o3{width:36vw;height:36vw;left:28vw;bottom:-10vw}}


@media(max-width:932px){
  .hero{padding-top:120px;min-height:auto}
  .hero-inner{grid-template-columns:1fr;gap:28px;padding:0 24px 44px}
  .hero-name{font-size:clamp(52px,15vw,90px)}
  .hero-desc{font-size:16px;max-width:100%}
  .hero-cards{grid-template-columns:1fr;display:grid}
  .hcard{padding:16px 16px 18px}
  .nav-clock{min-width:auto;padding:7px 9px}
  .nav-clock-time{font-size:12px}
  .nav-clock-face{width:28px;height:28px}
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero{padding-top:92px}
  .hero-inner{grid-template-columns:minmax(0,1fr) 280px;gap:22px;padding:0 52px 24px}
  .hero-name{font-size:clamp(46px,8vw,72px)}
  .hero-desc{font-size:14px;margin-bottom:20px}
  .hcard{padding:12px 14px 14px}
}


/* ══════════════════════════════════════════
   CHERRY BLOSSOM MODE  (data-cherry="true")
══════════════════════════════════════════ */
[data-cherry="true"] body::after {
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(255,160,190,.14), transparent 60%),
    radial-gradient(ellipse 50% 45% at 88% 15%, rgba(255,140,180,.12), transparent 60%),
    radial-gradient(ellipse 40% 35% at 50% 90%, rgba(255,180,210,.10), transparent 55%);
  animation: meshDrift 18s ease-in-out infinite alternate;
}
[data-theme="dark"][data-cherry="true"] body::after {
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(255,100,150,.16), transparent 60%),
    radial-gradient(ellipse 50% 45% at 88% 15%, rgba(220,80,130,.14), transparent 60%),
    radial-gradient(ellipse 40% 35% at 50% 90%, rgba(200,80,140,.12), transparent 55%);
}
[data-cherry="true"] .liquid-orb {
  background: radial-gradient(circle at 32% 28%,rgba(255,210,225,.72) 0%,rgba(255,170,200,.52) 18%,rgba(240,130,175,.28) 42%,rgba(220,100,155,.09) 66%,rgba(200,80,140,0) 78%) !important;
  border-color: rgba(255,180,210,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,240,248,.65),inset 0 -1px 0 rgba(255,150,190,.22),0 14px 48px rgba(255,100,160,.18) !important;
}
[data-theme="dark"][data-cherry="true"] .liquid-orb {
  background: radial-gradient(circle at 32% 28%,rgba(255,160,200,.35) 0%,rgba(255,120,170,.26) 18%,rgba(220,90,150,.18) 42%,rgba(200,70,135,.06) 68%,rgba(180,50,120,0) 78%) !important;
  border-color: rgba(255,150,185,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,200,225,.28),0 18px 56px rgba(220,80,140,.22) !important;
  mix-blend-mode: normal;
}
[data-cherry="true"] .hero-bg {
  background:
    radial-gradient(ellipse 68% 52% at 72% 18%, rgba(200,60,140,.65), transparent 62%),
    radial-gradient(ellipse 50% 44% at 18% 72%, rgba(180,50,120,.58), transparent 58%),
    radial-gradient(ellipse 40% 36% at 85% 80%, rgba(230,80,160,.42), transparent 52%),
    linear-gradient(160deg, #1a0818 0%, #1e0a1c 40%, #1c0a24 70%, #12060e 100%);
}
#cherry-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 1.2s ease;
}
[data-cherry="true"] #cherry-canvas { opacity: 1; }
/* ─── PAGE-WIDE REFLECTIVE GLASS MOTION ─── */
.page-reflect{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden;mix-blend-mode:screen;opacity:.42}
.page-reflect::before{content:'';position:absolute;top:-60%;left:-40%;width:55%;height:220%;background:linear-gradient(104deg,transparent 0%,rgba(255,244,228,.05) 40%,rgba(255,250,240,.14) 50%,rgba(255,244,228,.05) 60%,transparent 100%);transform:rotate(9deg);animation:pageSheen 22s linear infinite}
.page-reflect::after{content:'';position:absolute;top:-50%;right:-50%;width:48%;height:200%;background:linear-gradient(104deg,transparent 0%,rgba(196,210,255,.04) 42%,rgba(220,228,255,.11) 50%,rgba(196,210,255,.04) 58%,transparent 100%);transform:rotate(-7deg);animation:pageSheen2 31s linear infinite}
@keyframes pageSheen{0%{transform:translateX(-40%) rotate(9deg)}100%{transform:translateX(360%) rotate(9deg)}}
@keyframes pageSheen2{0%{transform:translateX(60%) rotate(-7deg)}100%{transform:translateX(-360%) rotate(-7deg)}}
[data-theme="light"] .page-reflect{opacity:.3}
/* light-sweep on glass surfaces site-wide */
.g2,.g3,.sl-vis,.gov-feature,.gov-cred,.about-photo,.mq-glass{position:relative}
.glint{position:relative;overflow:hidden}
.glint::after{content:'';position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.10) 46%,rgba(255,255,255,.20) 50%,rgba(255,255,255,.10) 54%,transparent);transform:skewX(-16deg);pointer-events:none;animation:glintSweep 11s ease-in-out infinite;animation-delay:var(--glint-delay,0s);z-index:5}
@media(prefers-reduced-motion:reduce){.page-reflect::before,.page-reflect::after,.glint::after{animation:none;opacity:0}}
@keyframes glintSweep{0%{left:-130%}30%{left:170%}100%{left:170%}}
.cherry-toggle {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.11);
  border-top-color: rgba(255,255,255,.5);
  border-bottom-color: rgba(0,0,0,.06);
  padding: 0;
  flex-shrink: 0;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.07);
  backdrop-filter: blur(40px) saturate(1.9) brightness(0.97);
  -webkit-backdrop-filter: blur(40px) saturate(1.9) brightness(0.97);
  box-shadow: 0 1.5px 0 rgba(255,255,255,.58) inset, 0 4px 16px rgba(0,0,0,.08);
  transition: background .3s, border-color .3s, box-shadow .3s, transform .18s;
  overflow: hidden;
  font-size: 16px;
  line-height: 1;
}
.cherry-toggle::before {
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(255,255,255,0));
  pointer-events:none;border-radius:12px 12px 0 0;
}
.cherry-toggle:hover { transform: translateY(-1px); background: rgba(255,255,255,.16); }
[data-cherry="true"] .cherry-toggle {
  background: rgba(255,160,200,.22);
  border-color: rgba(255,150,190,.45);
  border-top-color: rgba(255,220,235,.7);
  box-shadow: 0 1.5px 0 rgba(255,240,248,.7) inset, 0 4px 16px rgba(255,100,160,.18);
}
[data-theme="dark"] .cherry-toggle {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 4px 18px rgba(0,0,0,.35);
}
/* music app icon toggle (hides the player) */
.snd-toggle{background:linear-gradient(160deg,#fb5c74 0%,#fa2f54 50%,#fb6f8e 100%) !important;border:none !important;box-shadow:0 3px 10px rgba(250,47,84,.42),0 1.5px 0 rgba(255,255,255,.45) inset !important;color:#fff}
.snd-toggle svg{position:relative;z-index:1;filter:drop-shadow(0 1px 1.5px rgba(150,8,38,.45))}
.snd-toggle:hover{transform:translateY(-1px) scale(1.05);background:linear-gradient(160deg,#fc6b81,#fb3a5d 50%,#fc7d99) !important}
[data-sound="on"] .snd-toggle{box-shadow:0 0 0 2px rgba(255,255,255,.55),0 6px 22px rgba(250,47,84,.7),0 1.5px 0 rgba(255,255,255,.5) inset !important;animation:amIconBounce 1.05s ease-in-out infinite}
@keyframes amIconBounce{0%,100%{transform:translateY(0) scale(1)}28%{transform:translateY(-2.5px) scale(1.09)}55%{transform:translateY(0) scale(1.02)}}
/* animated EQ bars inside icon while playing */
.snd-toggle .snd-eq{display:none;align-items:flex-end;justify-content:center;gap:2px;height:15px;position:relative;z-index:1}
.snd-toggle .snd-eq i{width:2.6px;height:5px;border-radius:2px;background:#fff;box-shadow:0 1px 1.5px rgba(150,8,38,.4);animation:sndBar .72s ease-in-out infinite}
.snd-toggle .snd-eq i:nth-child(2){animation-delay:.14s}
.snd-toggle .snd-eq i:nth-child(3){animation-delay:.30s}
.snd-toggle .snd-eq i:nth-child(4){animation-delay:.44s}
@keyframes sndBar{0%,100%{height:4px}50%{height:15px}}
[data-sound="on"] .snd-toggle .snd-note{display:none}
[data-sound="on"] .snd-toggle .snd-eq{display:flex}
@media(prefers-reduced-motion:reduce){[data-sound="on"] .snd-toggle{animation:none}.snd-toggle .snd-eq i{animation:none;height:9px}}
.liquid-orb {
  position: absolute;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%,rgba(220,235,255,.68) 0%,rgba(160,185,255,.48) 12%,rgba(110,100,220,.28) 32%,rgba(80,70,200,.14) 52%,rgba(60,55,185,.06) 66%,rgba(40,35,160,0) 78%) !important;
  backdrop-filter: blur(32px) saturate(2.0) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(32px) saturate(2.0) brightness(1.08) !important;
  border: 1px solid rgba(140,165,255,.38) !important;
  box-shadow:
    inset 0 2px 0 rgba(220,235,255,.65),
    inset 0 -1px 0 rgba(110,130,255,.22),
    inset 1px 0 0 rgba(200,215,255,.38),
    0 18px 56px rgba(90,90,230,.18),
    0 4px 18px rgba(80,80,210,.12),
    0 0 0 0.5px rgba(160,185,255,.28) !important;
  mix-blend-mode: screen;
  opacity: .82;
  transform: translate3d(var(--tx,0),var(--ty,0),0) scale(var(--s,1)) rotate(var(--r,0deg));
  transition: transform .16s linear, opacity .4s ease;
}
.liquid-orb::before {
  content:'';position:absolute;inset:6% 12% auto auto;width:44%;height:38%;border-radius:999px;
  background:radial-gradient(ellipse at 38% 36%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.72) 22%,rgba(240,248,255,.28) 52%,rgba(255,255,255,0) 72%);
  filter:blur(1.5px);opacity:var(--shine,.92);
  animation:specularPulse 6s ease-in-out infinite alternate;
}
.liquid-orb::after {
  content:'';position:absolute;left:12%;top:14%;width:38%;height:26%;border-radius:999px;
  background:linear-gradient(138deg,rgba(255,255,255,.72) 0%,rgba(200,220,255,.38) 38%,rgba(180,240,255,.22) 62%,rgba(255,255,255,0) 100%);
  opacity:calc(var(--shine,.92)*.85);
  animation:shimmerDrift 9s ease-in-out infinite alternate;
}
@keyframes specularPulse {
  0%{opacity:.82;transform:scale(1) translate(0,0)}
  50%{opacity:.96;transform:scale(1.04) translate(-2%,1%)}
  100%{opacity:.88;transform:scale(.98) translate(1%,-1%)}
}
@keyframes shimmerDrift {
  0%{opacity:.7;transform:translateX(0) rotate(0deg)}
  50%{opacity:.9;transform:translateX(3%) rotate(2deg)}
  100%{opacity:.75;transform:translateX(-2%) rotate(-1deg)}
}
.liquid-orb.o4{width:16vw;height:16vw;min-width:160px;min-height:160px;right:22vw;top:-4vh}
[data-theme="dark"] .liquid-orb {
  background:radial-gradient(circle at 32% 28%,rgba(150,175,255,.32) 0%,rgba(110,140,255,.24) 18%,rgba(80,90,220,.16) 42%,rgba(60,70,195,.06) 68%,rgba(40,50,165,0) 78%) !important;
  border-color:rgba(120,150,255,.22) !important;
  box-shadow:inset 0 2px 0 rgba(180,210,255,.28),inset 0 -1px 0 rgba(100,130,255,.14),0 22px 64px rgba(80,110,230,.20),0 6px 22px rgba(70,100,220,.14) !important;
  mix-blend-mode:normal;opacity:.74;
}
@media(max-width:932px){.liquid-orb.o4{display:none}}

/* ═══ GOVERNMENTAL DESIGN ═══ */
.gov{padding:104px 0}
.gov .sec-eye{color:#2a4aa8}
[data-theme="dark"] .gov .sec-eye{color:#8aa6f0}
.gov-feature{display:grid;grid-template-columns:1.05fr 1fr;gap:46px;align-items:center;margin:46px 0 70px;position:relative;border-radius:var(--r28);padding:34px;background:linear-gradient(158deg,rgba(255,255,255,.55),rgba(238,236,229,.3));backdrop-filter:blur(44px) saturate(1.7);-webkit-backdrop-filter:blur(44px) saturate(1.7);border:1px solid rgba(255,255,255,.82);box-shadow:0 32px 84px rgba(11,30,80,.13),inset 0 1px 0 rgba(255,255,255,.95)}
[data-theme="dark"] .gov-feature{background:linear-gradient(158deg,rgba(46,64,130,.18),rgba(18,22,38,.42));border-color:rgba(120,150,230,.2);box-shadow:0 32px 84px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.gov-browser{border-radius:var(--r16);overflow:hidden;border:1px solid rgba(11,30,80,.16);box-shadow:0 26px 64px rgba(11,30,80,.26)}
.gb-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:linear-gradient(#15285c,#0d1f49);border-bottom:1px solid rgba(255,255,255,.08)}
.gb-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.26);flex-shrink:0}
.gb-url{margin-left:10px;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.5);letter-spacing:.03em;background:rgba(255,255,255,.07);padding:6px 13px;border-radius:7px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb-body{position:relative;padding:34px 30px 32px;min-height:308px;background:radial-gradient(circle at 74% 8%,rgba(64,96,190,.4),transparent 58%),linear-gradient(160deg,#0c1f4a,#0a1838);overflow:hidden}
.gb-seal{position:absolute;right:-46px;top:-34px;width:234px;height:auto;opacity:.13;filter:grayscale(1) brightness(2.1) contrast(1.05);pointer-events:none}
.gb-wordmark{position:relative;font-family:var(--serif);font-weight:900;font-size:42px;color:#fff;letter-spacing:-.022em;line-height:1}
.gb-wordmark span{color:#cba23a}
.gb-tag{position:relative;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.52);margin:9px 0 26px}
.gb-rows{position:relative;display:grid;gap:10px}
.gb-row{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
.gb-row b{font-family:var(--ui);font-size:13px;font-weight:500;color:rgba(255,255,255,.88)}
.gb-pill{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:20px;font-weight:400}
.gb-pill.ok{background:rgba(58,168,110,.18);color:#7fe0ab;border:1px solid rgba(58,168,110,.3)}
.gb-pill.pend{background:rgba(203,162,58,.18);color:#e8c878;border:1px solid rgba(203,162,58,.32)}
.gb-pill.upd{background:rgba(74,120,230,.2);color:#9 db0ff;color:#9db0ff;border:1px solid rgba(74,120,230,.34)}
.gov-eye{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:#2a4aa8;margin-bottom:13px}
[data-theme="dark"] .gov-eye{color:#8aa6f0}
.gov-h{font-family:var(--serif);font-weight:900;font-size:clamp(36px,4vw,54px);letter-spacing:-.03em;line-height:1;margin-bottom:9px}
.gov-role{font-family:var(--ui);font-size:15px;font-weight:500;color:var(--mid);margin-bottom:17px}
.gov-body{font-family:var(--ui);font-size:14px;font-weight:300;line-height:1.72;color:var(--mid);margin-bottom:26px;max-width:448px}
.gov-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:30px;margin-bottom:28px}
.gf-l{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.gf-v{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.gov-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-size:14px;font-weight:600;color:#fff;background:linear-gradient(#173370,#0e2350);padding:14px 28px;border-radius:var(--r40);text-decoration:none;box-shadow:0 14px 32px rgba(11,30,80,.32);transition:transform .26s var(--ease),box-shadow .26s}
.gov-cta:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(11,30,80,.42)}
.gov-creds-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-bottom:18px}
.gov-creds{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gov-cred{display:flex;gap:22px;align-items:flex-start;padding:27px 29px;border-radius:var(--r20);text-decoration:none;background:rgba(255,255,255,.46);backdrop-filter:blur(32px) saturate(1.5);-webkit-backdrop-filter:blur(32px) saturate(1.5);border:1px solid rgba(255,255,255,.72);box-shadow:0 16px 46px rgba(11,30,80,.09),inset 0 1px 0 rgba(255,255,255,.85);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.gov-cred:hover{transform:translateY(-3px);box-shadow:0 26px 60px rgba(11,30,80,.16),inset 0 1px 0 rgba(255,255,255,.9);border-color:rgba(120,150,230,.45)}
.gov-cred{position:relative}
.gov-cred::after{content:'\2197';position:absolute;top:18px;right:22px;font-family:var(--ui);font-weight:500;font-size:16px;color:#2a4aa8;opacity:0;transform:translate(-3px,3px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.gov-cred:hover::after{opacity:.85;transform:none}
[data-theme="dark"] .gov-cred::after{color:#8aa6f0}
[data-theme="dark"] .gov-cred{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);box-shadow:0 16px 46px rgba(0,0,0,.32)}
.gov-cred-logo{height:38px;width:auto;max-width:128px;object-fit:contain;flex-shrink:0;margin-top:2px;padding:11px 13px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.72);border-radius:12px;box-shadow:0 5px 16px rgba(11,30,80,.08),inset 0 1px 0 rgba(255,255,255,.92);box-sizing:content-box}
[data-theme="dark"] .gov-cred-logo:not(.seal){filter:none;background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.45)}
.gov-cred-logo.seal{height:54px;max-width:54px;padding:8px;background:rgba(255,255,255,.5);border-radius:50%}
[data-theme="dark"] .gov-cred-logo.seal{background:rgba(255,255,255,.9)}
.gc-h{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
.gc-b{font-family:var(--ui);font-size:12.5px;font-weight:300;line-height:1.62;color:var(--mid)}
@media(max-width:880px){.gov-feature{grid-template-columns:1fr;gap:28px}.gov-creds{grid-template-columns:1fr}.gov-facts{gap:22px}}

/* ═══════════════════════════════════════════
   PERCH·AI — liquid-glass intelligence
   ═══════════════════════════════════════════ */
@property --perch-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes perchSpin{to{--perch-angle:360deg}}
@keyframes perchFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes perchPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes perchRise{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes dotBob{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
@keyframes orbWave{0%{transform:scaleY(.4)}50%{transform:scaleY(1)}100%{transform:scaleY(.4)}}

/* ── launcher orb ── */
.perch-fab{
  position:fixed;right:26px;bottom:26px;z-index:9000;
  width:62px;height:62px;border:none;border-radius:50%;padding:0;
  cursor:none;background:transparent;
  animation:perchFloat 5.5s var(--ease) infinite;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .4s var(--ease);
}
.perch-fab:hover{transform:scale(1.08)}
.perch-fab:active{transform:scale(.92)}
.perch-fab .pf-glow{position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(from var(--perch-angle),#5b8cff,#a96bff,#ff6ba9,#ffc46b,#6bffd2,#5b8cff);filter:blur(9px);opacity:.85;animation:perchSpin 5s linear infinite}
.perch-fab .pf-face{position:absolute;inset:0;border-radius:50%;background:rgba(14,12,24,.62);backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 30px rgba(10,8,30,.4);display:flex;align-items:center;justify-content:center;overflow:hidden}
.perch-fab .pf-blob{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#cfe0ff,#6f9bff 38%,#a96bff 66%,#ff6ba9 92%);box-shadow:0 0 16px rgba(140,150,255,.7);animation:perchPulse 3s var(--ease) infinite}
[data-theme="light"] .perch-fab .pf-face{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.85)}
.perch-fab.is-open{opacity:0;pointer-events:none;transform:scale(.6)}

/* ── conversation panel ── */
.perch-panel{
  position:fixed;right:24px;bottom:24px;z-index:9001;
  width:min(404px,calc(100vw - 32px));height:min(620px,calc(100vh - 48px));
  display:none;flex-direction:column;
  border-radius:30px;overflow:hidden;
  background:rgba(16,14,26,.66);
  backdrop-filter:blur(60px) saturate(1.9) brightness(1.05);
  -webkit-backdrop-filter:blur(60px) saturate(1.9) brightness(1.05);
  box-shadow:0 40px 100px rgba(8,6,24,.6),inset 0 1px 0 rgba(255,255,255,.18);
  cursor:auto;
}
[data-theme="light"] .perch-panel{background:rgba(248,246,242,.62);box-shadow:0 40px 100px rgba(30,30,60,.22),inset 0 1px 0 rgba(255,255,255,.8)}
.perch-panel.is-open{display:flex;animation:perchRise .5s cubic-bezier(.16,1,.3,1)}
/* the Apple-Intelligence flowing edge light */
.perch-panel::before{content:'';position:absolute;inset:0;border-radius:30px;padding:1.5px;background:conic-gradient(from var(--perch-angle),rgba(91,140,255,.9),rgba(169,107,255,.9),rgba(255,107,169,.9),rgba(255,196,107,.85),rgba(107,255,210,.9),rgba(91,140,255,.9));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:perchSpin 6s linear infinite;pointer-events:none;z-index:4;opacity:.9}
/* soft inner aura that intensifies while thinking */
.perch-panel::after{content:'';position:absolute;inset:0;border-radius:30px;pointer-events:none;z-index:0;box-shadow:inset 0 0 60px rgba(120,120,255,0);transition:box-shadow .6s var(--ease)}
.perch-panel.thinking::after{box-shadow:inset 0 0 70px rgba(140,130,255,.32);animation:perchPulse 2.4s var(--ease) infinite}

.perch-head{position:relative;z-index:3;display:flex;align-items:center;gap:12px;padding:18px 18px 14px}
.perch-id{display:flex;align-items:center;gap:11px}
.perch-mini{width:30px;height:30px;border-radius:50%;position:relative;flex-shrink:0}
.perch-mini .pm-glow{position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from var(--perch-angle),#5b8cff,#a96bff,#ff6ba9,#6bffd2,#5b8cff);filter:blur(4px);opacity:.8;animation:perchSpin 5s linear infinite}
.perch-mini .pm-core{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 38% 34%,#cfe0ff,#7f9bff 44%,#a96bff 80%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.perch-title{font-family:var(--ui);font-weight:500;font-size:15px;letter-spacing:-.01em;color:var(--ink);line-height:1}
.perch-sub{font-family:var(--mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-top:4px}
.perch-x{margin-left:auto;width:30px;height:30px;border-radius:50%;border:none;background:rgba(128,128,150,.16);color:var(--ink);font-size:15px;line-height:1;cursor:none;display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s}
.perch-x:hover{background:rgba(128,128,150,.28);transform:rotate(90deg)}

.perch-scroll{position:relative;z-index:2;flex:1;overflow-y:auto;padding:6px 18px 8px;display:flex;flex-direction:column;gap:13px;scrollbar-width:thin;scrollbar-color:rgba(150,150,170,.4) transparent}
.perch-scroll::-webkit-scrollbar{width:5px}
.perch-scroll::-webkit-scrollbar-thumb{background:rgba(150,150,170,.4);border-radius:3px}

/* welcome state */
.perch-welcome{padding:14px 2px 4px}
.perch-greet{font-family:var(--serif);font-weight:500;font-size:25px;letter-spacing:-.02em;line-height:1.12;color:var(--ink);margin-bottom:8px}
.perch-greet em{font-style:italic;background:linear-gradient(100deg,#6f9bff,#a96bff,#ff6ba9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.perch-blurb{font-family:var(--ui);font-size:13px;font-weight:300;line-height:1.6;color:var(--mid);margin-bottom:16px}
[data-theme="dark"] .perch-blurb{color:rgba(244,241,236,.74)}
[data-theme="dark"] .perch-msg.ai{color:rgba(244,241,236,.92)}
.perch-chips{display:flex;flex-wrap:wrap;gap:8px}
.perch-chip{font-family:var(--ui);font-size:12px;font-weight:500;color:var(--ink);padding:9px 14px;border-radius:999px;border:1px solid rgba(150,150,170,.28);background:rgba(255,255,255,.06);cursor:none;transition:transform .25s var(--ease),background .25s,border-color .25s;text-align:left}
.perch-chip:hover{transform:translateY(-2px);background:rgba(140,130,255,.16);border-color:rgba(140,130,255,.5)}

/* messages */
.perch-msg{max-width:86%;font-family:var(--ui);font-size:13.5px;font-weight:300;line-height:1.6;animation:msgIn .35s var(--ease)}
.perch-msg.user{align-self:flex-end;background:linear-gradient(135deg,#5b8cff,#7c6bff);color:#fff;padding:11px 15px;border-radius:18px 18px 5px 18px;box-shadow:0 8px 22px rgba(91,107,255,.32);font-weight:450}
.perch-msg.ai{align-self:flex-start;color:var(--ink);font-weight:350}
.perch-msg.ai .pa-body{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);padding:12px 15px;border-radius:18px 18px 18px 5px}
[data-theme="light"] .perch-msg.ai .pa-body{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.8)}
.perch-msg.ai .pa-body p{margin:0 0 8px}.perch-msg.ai .pa-body p:last-child{margin:0}
.perch-msg.ai .pa-body strong{font-weight:650}
.perch-attrib{display:flex;align-items:center;gap:7px;margin:0 0 6px;font-family:var(--mono);font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.perch-attrib::before{content:'';width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#cfe0ff,#7f9bff 50%,#a96bff)}
.perch-typing{display:flex;gap:4px;padding:13px 16px;background:rgba(255,255,255,.07);border-radius:18px 18px 18px 5px;align-self:flex-start;align-items:center}
.perch-typing span{width:6px;height:6px;border-radius:50%;background:linear-gradient(#7f9bff,#a96bff);animation:dotBob 1.3s infinite}
.perch-typing span:nth-child(2){animation-delay:.16s}.perch-typing span:nth-child(3){animation-delay:.32s}

/* composer */
.perch-foot{position:relative;z-index:3;padding:12px 14px 15px}
.perch-form{display:flex;align-items:flex-end;gap:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:7px 7px 7px 16px;transition:border-color .3s,box-shadow .3s}
[data-theme="light"] .perch-form{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.85)}
.perch-form:focus-within{border-color:rgba(140,130,255,.6);box-shadow:0 0 0 3px rgba(140,130,255,.16)}
.perch-input{flex:1;border:none;outline:none;background:transparent;resize:none;font-family:var(--ui);font-size:13.5px;line-height:1.45;color:var(--ink);max-height:96px;padding:7px 0;cursor:auto}
.perch-input::placeholder{color:var(--grey)}
.perch-send{width:36px;height:36px;flex-shrink:0;border:none;border-radius:50%;cursor:none;background:linear-gradient(135deg,#5b8cff,#a96bff);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease),opacity .25s}
.perch-send:hover{transform:scale(1.08)}
.perch-send:disabled{opacity:.4;transform:none}
/* mic / dictation button */
.perch-mic{width:36px;height:36px;flex-shrink:0;border:none;border-radius:50%;cursor:none;background:rgba(140,130,255,.16);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease),background .25s}
[data-theme="light"] .perch-mic{color:#3a2f6e}
.perch-mic:hover{transform:scale(1.08);background:rgba(140,130,255,.3)}
/* ── Apple-Intelligence dictation overlay ── */
.perch-dictate{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(14,12,24,.42);backdrop-filter:blur(34px) saturate(1.8);-webkit-backdrop-filter:blur(34px) saturate(1.8);border-radius:30px;overflow:hidden}
[data-theme="light"] .perch-dictate{background:rgba(248,246,242,.5)}
.perch-dictate.is-on{display:flex;animation:msgIn .4s var(--ease)}
.pd-aura{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 62%,rgba(120,120,255,.28),transparent 62%);opacity:.6;animation:perchPulse 3.4s var(--ease) infinite}
.pd-cancel{position:absolute;top:16px;right:16px;width:30px;height:30px;border:none;border-radius:50%;background:rgba(128,128,150,.18);color:var(--ink);font-size:16px;line-height:1;cursor:none;display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s;z-index:2}
.pd-cancel:hover{transform:rotate(90deg);background:rgba(128,128,150,.32)}
.pd-stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px;padding:0 30px;width:100%}
.pd-orb{position:relative;width:74px;height:74px;border-radius:50%;animation:perchFloat 4s var(--ease) infinite}
.pd-orb-glow{position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(from var(--perch-angle),#5b8cff,#a96bff,#ff6ba9,#ffc46b,#6bffd2,#5b8cff);filter:blur(11px);opacity:.9;animation:perchSpin 4.5s linear infinite}
.pd-orb-core{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 38% 34%,#cfe0ff,#7f9bff 42%,#a96bff 74%,#ff6ba9);box-shadow:inset 0 2px 6px rgba(255,255,255,.5),0 0 30px rgba(140,150,255,.6);transition:transform .12s ease-out}
.pd-wave{display:flex;align-items:center;justify-content:center;gap:4px;height:46px}
.pd-wave i{width:4px;height:8px;border-radius:3px;background:linear-gradient(#7f9bff,#a96bff);transform-origin:center;transition:transform .07s ease-out,opacity .07s}
.pd-transcript{min-height:44px;max-height:120px;overflow-y:auto;font-family:var(--ui);font-size:17px;font-weight:300;line-height:1.5;letter-spacing:-.01em;color:var(--ink);text-align:center;max-width:320px}
.pd-transcript .pd-interim{color:var(--grey)}
.pd-transcript .pd-placeholder{color:var(--grey);font-weight:300}
[data-theme="dark"] .perch-dictate .pd-transcript{color:rgba(244,241,236,.95)}
.pd-hint{font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);min-height:11px}
.pd-done{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2;border:none;border-radius:999px;padding:11px 30px;cursor:none;font-family:var(--ui);font-size:13px;font-weight:500;color:#fff;background:linear-gradient(135deg,#5b8cff,#a96bff);box-shadow:0 10px 26px rgba(91,107,255,.4);transition:transform .25s var(--ease),opacity .25s}
.pd-done:hover{transform:translateX(-50%) scale(1.05)}
.perch-mic.is-live{background:linear-gradient(135deg,#5b8cff,#a96bff);color:#fff;animation:perchPulse 1.6s var(--ease) infinite}
/* ── Apple Music player ── */
.am-player{position:fixed;left:24px;bottom:24px;z-index:9001;width:min(360px,calc(100vw - 32px));border-radius:24px;overflow:hidden;display:flex;pointer-events:none;flex-direction:column;background:rgba(16,14,26,.66);backdrop-filter:blur(50px) saturate(1.8);-webkit-backdrop-filter:blur(50px) saturate(1.8);box-shadow:0 36px 90px rgba(8,6,24,.55),inset 0 1px 0 rgba(255,255,255,.16);transform:translateY(16px) scale(.98);opacity:0;transition:opacity .4s var(--ease),transform .4s cubic-bezier(.16,1,.3,1)}
[data-theme="light"] .am-player{background:rgba(248,246,242,.74);box-shadow:0 36px 90px rgba(30,30,60,.2),inset 0 1px 0 rgba(255,255,255,.8)}
.am-player.is-open{opacity:1;transform:none;pointer-events:auto}
.am-head{display:flex;align-items:center;gap:10px;padding:14px 14px 11px}
.am-eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.am-eq i{width:3px;height:6px;border-radius:2px;background:linear-gradient(#5b8cff,#a96bff);animation:amEq 1s ease-in-out infinite}
.am-eq i:nth-child(2){animation-delay:.18s}.am-eq i:nth-child(3){animation-delay:.36s}.am-eq i:nth-child(4){animation-delay:.54s}
@keyframes amEq{0%,100%{height:5px}50%{height:14px}}
.am-title{font-family:var(--ui);font-weight:500;font-size:13px;letter-spacing:-.01em;color:var(--ink)}
.am-title em{font-style:normal;background:linear-gradient(100deg,#6f9bff,#a96bff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:650}
.am-close{margin-left:auto;width:28px;height:28px;border:none;border-radius:50%;background:rgba(128,128,150,.16);color:var(--ink);font-size:15px;line-height:1;cursor:none;display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s}
.am-close:hover{background:rgba(128,128,150,.3);transform:rotate(90deg)}
.am-embed{padding:0 12px}
.am-embed iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:none;border-radius:14px;overflow:hidden;background:#000}
.am-note{font-family:var(--mono);font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);text-align:center;padding:10px 0 13px}
@media(max-width:520px){.am-player{left:8px;right:8px;width:auto;bottom:8px}}
/* two-track switcher */
.am-tracks{display:flex;gap:8px;padding:4px 14px 2px}
.am-trk{flex:1;display:flex;align-items:center;gap:8px;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink);padding:9px 12px;border-radius:12px;border:1px solid rgba(150,150,170,.24);background:rgba(255,255,255,.05);cursor:none;transition:background .25s,border-color .25s,transform .2s var(--ease)}
.am-trk .at-n{font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--grey)}
.am-trk:hover{transform:translateY(-1px);background:rgba(250,47,84,.08);border-color:rgba(250,47,84,.3)}
.am-trk.on{background:linear-gradient(135deg,rgba(251,92,116,.18),rgba(250,47,84,.12));border-color:rgba(250,47,84,.5)}
.am-trk.on .at-n{color:#fb3a5d}
/* ── DJ set visualizer ── */
.dj-deck{position:fixed;left:50%;bottom:98px;transform:translateX(-50%) translateY(14px) scale(.94);z-index:9002;width:224px;padding:13px 15px 10px;border-radius:22px;opacity:0;pointer-events:none;cursor:none;background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(120,110,180,.07) 42%,rgba(20,16,34,.28));backdrop-filter:blur(34px) saturate(2);-webkit-backdrop-filter:blur(34px) saturate(2);border:1px solid rgba(255,255,255,.28);box-shadow:0 30px 80px rgba(8,6,24,.5),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -16px 34px rgba(120,110,200,.16),inset 0 0 0 1px rgba(255,255,255,.06);transition:opacity .5s var(--ease),transform .5s cubic-bezier(.16,1,.3,1)}
/* liquid-glass specular + flowing rim */
.dj-deck::before{content:'';position:absolute;left:8%;right:8%;top:5px;height:42%;border-radius:24px 24px 60% 60%/22px 22px 80% 80%;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.04) 70%,transparent);pointer-events:none;z-index:2;mix-blend-mode:screen}
.dj-deck::after{content:'';position:absolute;inset:0;border-radius:26px;padding:1px;background:conic-gradient(from var(--perch-angle,0deg),rgba(124,120,255,.7),rgba(251,92,116,.7),rgba(110,200,255,.7),rgba(124,120,255,.7));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6;animation:perchSpin 5s linear infinite}
[data-sound="on"] .dj-deck{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)}
.dj-deck.dragging{transition:none;animation:none}
.dj-deck.paused{animation-play-state:paused}
@keyframes djBounce{0%{margin-top:0}100%{margin-top:0}}
.dj-deck-glow{position:absolute;inset:0;border-radius:26px;pointer-events:none;background:radial-gradient(60% 90% at 50% 130%,rgba(124,120,255,.4),transparent 70%),radial-gradient(50% 60% at 18% 12%,rgba(110,200,255,.22),transparent 60%)}
.dj-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;z-index:1}
.dj-turn{width:54px;height:54px;border-radius:50%;flex-shrink:0;background:radial-gradient(circle at 50% 50%,#2a2740 0 28%,#16142a 29%);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 6px 18px rgba(0,0,0,.45)}
.dj-vinyl{width:46px;height:46px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#0c0b16 0 2px,#1a1830 2px 3px);display:flex;align-items:center;justify-content:center;animation:djSpin 1.6s linear infinite}
.dj-vinyl2{animation-duration:2.2s}
.dj-label{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#7c78ff,#fb5c74);box-shadow:0 0 9px rgba(124,120,255,.75);position:relative;overflow:hidden}
.dj-cover{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.dj-label::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#0c0b16;box-shadow:0 0 0 2px rgba(255,255,255,.5);transform:translate(-50%,-50%);z-index:2}
/* play / pause on the deck */
.dj-pp{width:32px;height:32px;border:none;border-radius:50%;cursor:none;background:linear-gradient(135deg,#7c78ff,#fb5c74);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 14px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .2s var(--ease)}
.dj-pp:hover{transform:scale(1.1)}
.dj-pp:active{transform:scale(.92)}
.dj-pp .pp-play{display:none;margin-left:1px}
.dj-deck.paused .dj-pp .pp-pause{display:none}
.dj-deck.paused .dj-pp .pp-play{display:block}
.dj-deck.paused .dj-vinyl,.dj-deck.paused .dj-bars i{animation-play-state:paused}
@keyframes djSpin{to{transform:rotate(360deg)}}
.dj-mixer{flex:1;display:flex;flex-direction:column;gap:11px;align-items:center}
.dj-bars{display:flex;align-items:flex-end;gap:2px;height:30px}
.dj-bars i{width:3px;height:6px;border-radius:2px;background:linear-gradient(to top,#5b8cff,#a96bff,#fb5c74);animation:djBar .9s ease-in-out infinite}
.dj-bars i:nth-child(2){animation-delay:.10s;animation-duration:.70s}
.dj-bars i:nth-child(3){animation-delay:.22s;animation-duration:1.10s}
.dj-bars i:nth-child(4){animation-delay:.05s;animation-duration:.80s}
.dj-bars i:nth-child(5){animation-delay:.30s;animation-duration:.95s}
.dj-bars i:nth-child(6){animation-delay:.15s;animation-duration:.65s}
.dj-bars i:nth-child(7){animation-delay:.26s;animation-duration:1.05s}
.dj-bars i:nth-child(8){animation-delay:.08s;animation-duration:.75s}
.dj-bars i:nth-child(9){animation-delay:.20s;animation-duration:.90s}
@keyframes djBar{0%,100%{height:5px}50%{height:30px}}
.dj-fader{width:72px;height:6px;border-radius:4px;background:rgba(255,255,255,.14);position:relative}
.dj-fader-knob{position:absolute;top:50%;left:0;width:16px;height:12px;border-radius:4px;background:linear-gradient(#fff,#c9d4ff);transform:translateY(-50%);box-shadow:0 2px 6px rgba(0,0,0,.4);animation:djFade 2.4s ease-in-out infinite}
@keyframes djFade{0%,100%{left:0}50%{left:56px}}
.dj-track{position:relative;z-index:1;text-align:center;margin-top:13px;font-family:var(--mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.dj-track b{color:#fff;font-weight:400}
@media(prefers-reduced-motion:reduce){[data-sound="on"] .dj-deck,.dj-vinyl,.dj-bars i,.dj-fader-knob{animation:none}}
@media(max-width:520px){.dj-deck{width:200px;bottom:84px}}
@media(prefers-reduced-motion:reduce){.am-eq i{animation:none}}
.am-head{cursor:none}
.am-player.dragging{transition:none}
.am-player.dragging .am-embed{pointer-events:none}
/* volume slider — long glass line */
.am-vol{display:flex;align-items:center;gap:12px;padding:6px 18px 15px}
.am-vol-ico{flex-shrink:0;color:var(--grey);display:flex}
.am-track{position:relative;flex:1;height:22px;display:flex;align-items:center;cursor:none;touch-action:none;outline:none}
.am-track-rail{position:absolute;left:0;right:0;height:5px;border-radius:3px;background:rgba(140,140,160,.24);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
[data-theme="light"] .am-track-rail{background:rgba(120,120,140,.2)}
.am-track-fill{position:absolute;left:0;top:0;bottom:0;width:var(--pct,80%);border-radius:3px;background:linear-gradient(90deg,#5b8cff,#a96bff);box-shadow:0 0 8px rgba(140,150,255,.5)}
.am-track-knob{position:absolute;top:50%;left:var(--pct,80%);width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 38% 32%,#fff,#e6ebff);border:1px solid rgba(255,255,255,.9);box-shadow:0 2px 7px rgba(40,40,90,.4),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .15s var(--ease)}
.am-track:hover .am-track-knob,.am-track:focus-visible .am-track-knob{transform:translate(-50%,-50%) scale(1.18)}
.am-track:focus-visible .am-track-knob{box-shadow:0 0 0 4px rgba(140,150,255,.3),0 2px 7px rgba(40,40,90,.4)}
.am-vol-val{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink);min-width:34px;text-align:right;flex-shrink:0}
.am-vol-val::after{content:'%';font-size:9px;font-weight:500;opacity:.5;margin-left:1px}
.perch-foot-note{text-align:center;font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-top:9px}
@media(max-width:520px){.perch-panel{right:8px;bottom:8px;height:calc(100vh - 80px)}.perch-fab{right:16px;bottom:16px}}