@import url('https://fonts.googleapis.com/css2?family=Rosarivo:ital@0;1&display=swap');

:root{
  /* Darkened background palette (approx. 50% darker overall) */
  --bg:#030305;
  --panel:rgba(18,18,26,.70);
  --panel2:rgba(12,12,18,.55);
  --border:rgba(255,255,255,.12);
  --border2:rgba(255,255,255,.08);
  --text:#f4f4f6;
  --muted:rgba(244,244,246,.68);
  --faint:rgba(244,244,246,.42);
  --gold:#d6b35c;
  --gold2:#f0d178;
  --shadow:rgba(0,0,0,.55);
  --radius:18px;
  --radiusSm:14px;
  --blur:18px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  --display-font:'Rosarivo','Times New Roman',serif;
}
*{box-sizing:border-box}
html,body{height:100%  overflow-x:hidden;
}

body{
  margin:0;
  background:radial-gradient(1200px 720px at 20% 10%, rgba(214,179,92,.05) 0%, rgba(3,3,5,0) 60%),
             radial-gradient(1000px 760px at 80% 30%, rgba(240,209,120,.04) 0%, rgba(3,3,5,0) 60%),
             var(--bg);
  color:var(--text);
  font-family:var(--sans);
  overflow-x:hidden;
}

/* Display typography for headers */
h1,h2,h3,
.brandText,
.sectionTitle,
.heroTitle,
.menuItem,
.menuFootBtn,
.workGrid .cardTitle{
  font-family:var(--display-font);
}

/* Subtle moving stars (behind all content, above BG) */
#bgStars{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    radial-gradient(1px 1px at 25px 35px, rgba(255,255,255,.7), rgba(255,255,255,0) 2px),
    radial-gradient(1px 1px at 120px 140px, rgba(255,255,255,.6), rgba(255,255,255,0) 2px),
    radial-gradient(1px 1px at 220px 80px, rgba(255,255,255,.55), rgba(255,255,255,0) 2px),
    radial-gradient(1px 1px at 360px 210px, rgba(255,255,255,.5), rgba(255,255,255,0) 2px),
    radial-gradient(1px 1px at 520px 120px, rgba(255,255,255,.55), rgba(255,255,255,0) 2px),
    radial-gradient(1px 1px at 740px 260px, rgba(255,255,255,.45), rgba(255,255,255,0) 2px);
  background-size: 900px 520px;
  animation: starsDrift 90s linear infinite;
  filter: blur(.15px);
}
#bgStars::before,
#bgStars::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 60px 90px, rgba(255,255,255,.22), rgba(255,255,255,0) 3px),
    radial-gradient(2px 2px at 260px 180px, rgba(255,255,255,.18), rgba(255,255,255,0) 3px),
    radial-gradient(2px 2px at 520px 70px, rgba(255,255,255,.16), rgba(255,255,255,0) 3px);
  background-size: 1000px 700px;
  opacity:.55;
}
#bgStars::before{ animation: starsDrift2 140s linear infinite; }
#bgStars::after{ animation: starsDrift3 210s linear infinite; opacity:.35; }

@keyframes starsDrift{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-120px, -60px, 0); }
}
@keyframes starsDrift2{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(140px, -80px, 0); }
}
@keyframes starsDrift3{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-90px, 120px, 0); }
}

a{color:inherit}
button,input,textarea{font-family:inherit}

/* ---------- Layout shell ---------- */
.appShell{
  min-height:100svh;
}

.topbar{
  position:fixed;
  left:0; right:0; top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  /* Header matches hero overlay tone (subtle gradient) */
  background:linear-gradient(180deg, rgba(200,185,176,.92) 0%, rgba(200,185,176,.60) 100%);
  backdrop-filter:blur(var(--blur));
  border-bottom:1px solid rgba(0,0,0,.10);
  color:#111;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand .coin{
  width:34px; height:34px;
  border-radius:50%;
  overflow:hidden;
  display:block;
  transform-style:preserve-3d;
  animation: coinSpin 6.2s linear infinite;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.45));
}
.brand .brandText{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.brand .brandText strong{font-size:13px; letter-spacing:.2px}
.brand .brandText span{font-size:11px; color:var(--muted)}

@keyframes coinSpin{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(360deg)}
}

.topbarNav{
  display:flex;
  align-items:center;
  gap:10px;
}
.navPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  color:var(--text);
  text-decoration:none;
  font-size:12px;
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.navPill:hover{transform:translateY(-1px); border-color:rgba(214,179,92,.38)}
.navPill:active{transform:translateY(0px) scale(.99)}

/* Keep nav readable on the lighter header */
.topbar .navPill{
  color:#111;
  border-color:rgba(0,0,0,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.12));
}
.topbar .navPill:hover{border-color:rgba(0,0,0,.24)}
.topbar .cta{
  border-color:rgba(0,0,0,.18);
  background:linear-gradient(145deg, rgba(0,0,0,.08), rgba(0,0,0,.02));
}

.cta{
  border:1px solid rgba(214,179,92,.35);
  background:linear-gradient(145deg, rgba(214,179,92,.22), rgba(240,209,120,.08));
}

.sidebar{
  position:fixed;
  left:14px;
  top:64px;
  bottom:14px;
  width:244px;
  padding:14px;
  z-index:25;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(18,18,26,.70), rgba(10,10,14,.45));
  backdrop-filter:blur(var(--blur));
  border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.sidebar .sectionTitle{
  font-size:11px;
  color:var(--muted);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.sidebar .menu{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sidebar .menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  text-decoration:none;
  font-size:13px;
  color:var(--text);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.sidebar .menu a:hover{
  transform:translateX(2px);
  border-color:rgba(214,179,92,.35);
  background:rgba(214,179,92,.08);
}
.sidebar .menu a .tag{
  margin-left:auto;
  font-size:11px;
  color:var(--muted);
  font-family:var(--mono);
}

.content{
  padding-top:74px;
  padding-left: calc(244px + 28px);
}
@media (max-width: 980px){
  .sidebar{display:none}
  .content{padding-left:14px}
}

/* ---------- Hero (3D tunnel) ---------- */
.hero{
  position:relative;
  min-height:220vh;
}
.heroSticky{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  border-bottom:1px solid var(--border);

  /* Full-bleed: ensure the tunnel (and wormhole background) spans the same width as the wall */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.galleryCanvas,
.heroCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.heroOverlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  pointer-events:none;
}
.heroOverlay .panel{
  pointer-events:auto;
  width:min(920px, 92vw);
  border-radius:24px;
  padding:22px 22px 18px;
  /* Hero overlay tone */
  background:rgba(200,185,176,0.86);
  backdrop-filter:blur(var(--blur));
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 28px 80px rgba(0,0,0,.55);
  color:#111;
}
.heroKicker{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.heroKicker .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(214,179,92,.28);
  background:rgba(214,179,92,.08);
  color:rgba(240,209,120,.95);
  font-size:12px;
}
.heroKicker .chip .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gold2);
  box-shadow:0 0 16px rgba(240,209,120,.55);
}
.heroKicker .hint{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.heroTitle{
  margin:0;
  font-size:clamp(34px, 4.2vw, 62px);
  letter-spacing:-.03em;
  font-family:"Times New Roman", Times, serif;
  text-transform:uppercase;
  color:#000;
}
.heroSub{
  margin:10px 0 16px;
  font-size:15px;
  line-height:1.55;
  color:var(--muted);
  max-width:70ch;
}
.heroActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.heroActions .btn{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.28);
  color:#111;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  font-size:13px;
}
.heroActions .btn:hover{
  transform:translateY(-1px);
  border-color:rgba(214,179,92,.35);
  background:rgba(214,179,92,.10);
}
.heroActions .btn.primary{
  border-color:rgba(214,179,92,.38);
  background:linear-gradient(145deg, rgba(214,179,92,.22), rgba(240,209,120,.08));
}

.scrollCue{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--faint);
  font-size:12px;
}
.scrollCue .bar{
  height:1px;
  flex:1;
  background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(214,179,92,.35), rgba(255,255,255,.0));
}

/* ---------- Dashboard blocks ---------- */
.section{
  padding:42px 14px 10px;
}
.section h2{
  margin:0 0 10px;
  font-size:22px;
  letter-spacing:-.01em;
}
.section p{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.6;
}

.cardGrid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:12px;
}
.card{
  grid-column:span 4;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(18,18,26,.65), rgba(10,10,14,.45));
  backdrop-filter:blur(var(--blur));
  padding:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}
.card.wide{grid-column:span 8}
.card.full{grid-column:span 12}
.card .label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.card .value{font-size:30px; letter-spacing:-.03em}
.card .value span{color:var(--gold2)}
.card .small{font-size:12px; color:var(--muted); line-height:1.45; margin-top:8px}

@media (max-width: 980px){
  .card{grid-column:span 12}
  .card.wide{grid-column:span 12}
}

.list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.listItem{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}
.listItem .bullet{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gold2);
  margin-top:6px;
  box-shadow:0 0 14px rgba(240,209,120,.45);
  flex:0 0 auto;
}
.listItem strong{display:block; font-size:13px}
.listItem span{display:block; font-size:12px; color:var(--muted); line-height:1.45}

/* ---------- Tooltip for 3D cards ---------- */
.gallery-tooltip{
  position:fixed;
  z-index:40;
  pointer-events:none;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(214,179,92,.32);
  background:rgba(10,10,14,.78);
  backdrop-filter:blur(16px);
  color:var(--text);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  transform:translate(-50%, calc(-100% - 14px));
  opacity:0;
  transition:opacity .12s ease;
  max-width: min(320px, 86vw);
}
.gallery-tooltip strong{display:block; font-size:13px; margin-bottom:2px}
.gallery-tooltip span{display:block; font-size:12px; color:var(--muted)}
.gallery-tooltip.isVisible{opacity:1}

/* ---------- Live Help widget ---------- */
.liveHelp{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.liveHelpButton{
  appearance:none;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
}
.liveHelpButtonInner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.liveHelpCoin{
  width:78px;
  height:78px;
  border-radius:50%;
  overflow:hidden;
  border:none;
  background:transparent;
  box-shadow:0 16px 34px rgba(0,0,0,.55);
  perspective:900px;
  animation: breathe 2.8s ease-in-out infinite;
  transform-style:preserve-3d;
}
.liveHelpCoin img{
  width:100%;
  height:100%;
  display:block;
}

@keyframes breathe{
  0%{ transform:scale(1); box-shadow:0 16px 34px rgba(0,0,0,.55); }
  50%{ transform:scale(1.06); box-shadow:0 18px 40px rgba(0,0,0,.62); }
  100%{ transform:scale(1); box-shadow:0 16px 34px rgba(0,0,0,.55); }
}

.liveHelpLabel{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(240,209,120,.92);
}

.chatWindow{
  width:min(360px, 92vw);
  height:min(520px, 74svh);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(18,18,26,.85), rgba(10,10,14,.78));
  backdrop-filter:blur(18px);
  box-shadow:0 24px 80px rgba(0,0,0,.65);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.chatHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.chatHeaderLeft{
  display:flex;
  align-items:center;
  gap:10px;
}
.chatHeaderLeft img{
  width:28px; height:28px;
  border-radius:50%;
  border:1px solid rgba(214,179,92,.35);
}
.chatTitle{display:flex; flex-direction:column; line-height:1.1}
.chatTitle strong{font-size:13px}
.chatTitle span{font-size:11px; color:var(--muted)}
.chatHeaderActions{
  display:flex;
  align-items:center;
  gap:8px;
}
.iconBtn{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:10px;
  padding:7px 10px;
  cursor:pointer;
  font-size:12px;
  transition:transform .15s ease, border-color .15s ease;
}
.iconBtn:hover{transform:translateY(-1px); border-color:rgba(214,179,92,.35)}

.chatMessages{
  padding:12px;
  flex:1;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bubble{
  max-width:88%;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  white-space:pre-wrap;
  line-height:1.45;
  font-size:13px;
}
.bubble.user{
  align-self:flex-end;
  border-color:rgba(214,179,92,.26);
  background:rgba(214,179,92,.08);
}
.bubble.assistant{
  align-self:flex-start;
  background:rgba(255,255,255,.04);
}

.chatComposer{
  padding:12px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  gap:8px;
  align-items:flex-end;
}
.chatComposer textarea{
  flex:1;
  min-height:44px;
  max-height:120px;
  resize:none;
  border-radius:14px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
}
.chatComposer textarea:focus{border-color:rgba(214,179,92,.42)}
.chatComposer button{
  min-width:76px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(214,179,92,.35);
  background:linear-gradient(145deg, rgba(214,179,92,.22), rgba(240,209,120,.08));
  color:var(--text);
  cursor:pointer;
  font-weight:700;
}
.chatComposer button:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.typing{
  padding:0 12px 12px;
  font-size:12px;
  color:var(--muted);
}

.quickRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 12px 12px;
}
.quickRow button{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:12px;
  padding:8px 10px;
  cursor:pointer;
}
.quickRow button:hover{
  border-color:rgba(214,179,92,.35);
  background:rgba(214,179,92,.08);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .liveHelpCoin, .liveHelpCoin img, .brand .coin{animation:none}
  .navPill, .sidebar .menu a, .heroActions .btn{transition:none}
}

/* ---------- Case pages (project tabs) ---------- */
.caseBody{background:radial-gradient(1200px 700px at 18% -10%, rgba(214,179,92,.08), transparent 60%), var(--bg); color:var(--text); min-height:100svh}
.caseHeader{
  position:sticky;
  top:0;
  z-index:5;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(7,7,11,.62);
  backdrop-filter:blur(18px);
}
.caseHeader .brand{gap:10px}
.caseHeader .brandText strong{font-size:13px}
.caseHeader .brandText span{font-size:11px}
.caseMain{max-width:1080px; margin:0 auto; padding:22px 14px 80px}
.caseHero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:start;
}
.caseHero .heroImg{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background:rgba(255,255,255,.04);
}
.caseHero img{width:100%; height:auto; display:block}
.caseMeta{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  padding:16px;
}
.caseMeta h1{margin:0 0 6px; font-size:22px; letter-spacing:-.02em}
.caseMeta p{margin:0 0 12px; color:var(--muted); line-height:1.55}
.caseMeta .metaRow{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.caseMeta .pill{font-size:12px; border-radius:999px; padding:8px 10px; border:1px solid rgba(214,179,92,.28); background:rgba(214,179,92,.08)}
.caseGallery{margin-top:16px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px}
.caseShot{border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04)}
.caseShot img{width:100%; height:auto; display:block}
.caseActions{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}
.caseActions a{display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:14px; padding:10px 12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:var(--text)}
.caseActions a.primary{border-color:rgba(214,179,92,.35); background:linear-gradient(145deg, rgba(214,179,92,.22), rgba(240,209,120,.08))}

@media (max-width: 920px){
  .caseHero{grid-template-columns:1fr}
  .caseGallery{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   v2 additions
   - dropdown menu (logo button)
   - modern button styles for .primaryBtn/.ghostBtn
   - 3D coin thickness (.coin3D)
   - wall section (semi-cube)
   - fill missing classnames used by React UI
-------------------------------------------------------------------------- */

/* Root wrapper used by app.js */
.shell{min-height:100svh}

/* Main content needs room for fixed topbar */
.content{
  padding-top:74px;
  padding-left:14px;
  padding-right:14px;
}
@media (min-width: 980px){
  .content{padding-left:28px; padding-right:28px}
}

/* Make in-page anchor jumps land below the fixed header */
section[id]{scroll-margin-top:86px}

/* Topbar inner layout */
.topbarInner{
  width:min(1280px, 100%);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.topbarLeft{position:relative; display:flex; align-items:center; flex:1}

.headerSocial{margin-left:auto}

.brandButton{
  display:flex;
  align-items:center;
  gap:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  color:var(--text);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.brandButton:hover{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  transform:translateY(-1px);
}
.brandButton:active{transform:translateY(0) scale(.99)}

.brandChevron{
  margin-left:2px;
  font-size:13px;
  color:var(--faint);
}

/* Dropdown menu */
.menuDropdown{
  position:absolute;
  left:0;
  top:58px;
  width:min(300px, 86vw);
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(18,18,26,.94), rgba(10,10,14,.84));
  box-shadow:0 36px 100px rgba(0,0,0,.55);
  backdrop-filter:blur(var(--blur));
  display:none;
  transform-origin: top left;
}
.menuDropdown.open{display:block; animation:menuPop .18s ease}
@keyframes menuPop{from{opacity:0; transform:translateY(-8px) scale(.98)}to{opacity:1; transform:translateY(0) scale(1)}}

.menuStatus{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  padding:6px 6px 12px;
  border-bottom:1px solid var(--border2);
}

.menuItems{display:flex; flex-direction:column; gap:8px; padding:10px 0}

.menuItem{
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid transparent;
  background:rgba(255,255,255,.035);
  color:var(--text);
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.menuItem:hover{border-color:rgba(214,179,92,.35); background:rgba(214,179,92,.09); transform:translateY(-1px)}
.menuItem:active{transform:translateY(0) scale(.99)}
.menuItem.active{border-color:rgba(214,179,92,.46); background:rgba(214,179,92,.12)}

.menuLabel{font-size:13px; font-weight:720; letter-spacing:.1px}
.menuHint{display:none}

.menuActions{display:flex; gap:10px; padding-top:10px; border-top:1px solid var(--border2)}
.menuActions .ghostBtn,
.menuActions .primaryBtn{flex:1}

.menuFoot{padding:10px 6px 2px; font-size:11px; color:var(--faint); line-height:1.35}

/* Modern buttons (fixes the "2001" look) */
.ghostBtn,
.primaryBtn,
.pillBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:14px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ghostBtn:hover,
.pillBtn:hover{
  border-color:rgba(214,179,92,.32);
  background:rgba(214,179,92,.08);
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.ghostBtn:active,
.primaryBtn:active,
.pillBtn:active{transform:translateY(0) scale(.99)}

.primaryBtn{
  border-color:rgba(214,179,92,.42);
  background:linear-gradient(145deg, rgba(214,179,92,.26), rgba(240,209,120,.08));
}
.primaryBtn:hover{
  border-color:rgba(214,179,92,.55);
  background:linear-gradient(145deg, rgba(214,179,92,.32), rgba(240,209,120,.10));
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  transform:translateY(-1px);
}

/* Panel base (allow GSAP to animate alpha via CSS var) */
.panel{
  background:rgba(18,18,26,var(--panel-alpha, .86));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  backdrop-filter:blur(var(--blur));
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.heroOverlay .panel{
  background:rgba(200,185,176,0.86);
  border-color:rgba(0,0,0,.12);
  color:#111;
}

.heroPanel{transform-origin:left top; will-change:transform}

.heroBadge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(214,179,92,.26);
  background:rgba(214,179,92,.08);
  color:rgba(240,209,120,.92);
  font-size:12px;
}
/* Keep position/spacing but hide the teacher note pill entirely */
.heroBadge{visibility:hidden}
.heroBadge .dot{width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 6px rgba(214,179,92,.15)}

.heroRow{display:flex; gap:10px; align-items:center; justify-content:center; margin:10px 0 14px}
.heroNote{font-size:12px; color:rgba(0,0,0,.64); text-align:center}
.heroNote.faint{color:var(--faint)}

.heroSubtitle{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  font-size:15px;
}

/* Tooltip classes used by the Three scenes */
.gallery-tooltip .ttTitle{font-weight:760; font-size:13px; letter-spacing:.1px}
.gallery-tooltip .ttSub{font-size:12px; color:var(--muted); margin-top:2px}
.gallery-tooltip .ttHint{font-size:11px; color:var(--faint); margin-top:8px}

/* 3D coin (thicker, not wider) */
.coin3D{
  position:relative;
  display:inline-block;
  transform-style:preserve-3d;
  perspective:800px;
  border-radius:50%;
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.45));
  --coin-thickness:14px;
}
.coin3D .coinSlice,
.coin3D .coinFace{
  position:absolute;
  inset:0;
  border-radius:50%;
  backface-visibility:hidden;
}
.coin3D .coinSlice{
  background:repeating-linear-gradient(90deg,
    rgba(214,179,92,.92) 0 3px,
    rgba(132,106,44,.92) 3px 6px
  );
  opacity:.95;
}
.coin3D .coinFace{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Place faces in 3D space so thickness is visible */
.coin3D .coinFace--front{transform:translateZ(calc(var(--coin-thickness) / 2 + 1px))}
.coin3D .coinFace--back{transform:rotateY(180deg) translateZ(calc(var(--coin-thickness) / 2 + 1px))}

/* Spin behaviour (header + livehelp) */
.brandCoin{animation: coinSpin 6.2s linear infinite}
.liveHelpCoin .coin3D{animation: coinSpin 7.8s linear infinite}

/* Wall section */
.wallSection{position:relative; min-height:180vh; margin:0 -14px}
@media (min-width: 980px){
  .wallSection{margin:0 -28px}
}
.wallSticky{position:sticky; top:0; height:100svh; overflow:hidden}
.wallCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.wallOverlay{position:absolute; inset:0; pointer-events:none}
.wallPanel{
  position:absolute;
  left:clamp(14px, 6vw, 56px);
  top:clamp(96px, 14vh, 156px);
  max-width:min(560px, 92vw);
  padding:18px;
  pointer-events:auto;
}
.wallTitle{margin:12px 0 8px; font-size:34px; letter-spacing:-.02em}
.wallSubtitle{margin:0; color:var(--muted); line-height:1.55}

/* Squarespace-ish “Made with …” wall styling */
.madeWithDh{position:relative}
.madeWithDh__canvas{position:absolute; inset:0; pointer-events:auto}
.madeWithDh__canvasInner{width:100%; height:100%}

.madeWithDh__gradient{
  position:absolute;
  left:0;
  right:0;
  height:160px;
  pointer-events:none;
  z-index:3;
}
.madeWithDh__gradient--top{
  top:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,0));
}
.madeWithDh__gradient--bottom{
  bottom:0;
  background:linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,0));
}

.madeWithDh__title-container{
  position:absolute;
  left:0;
  right:0;
  top:84px;
  display:flex;
  justify-content:center;
  z-index:4;
  pointer-events:none;
}
.madeWithDh__title{
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(12,12,16,.54);
  backdrop-filter: blur(10px);
  transform:perspective(700px) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg));
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  will-change: transform;
}
.madeWithDh__titleText{
  margin:0;
  font-size:14px;
  letter-spacing:.02em;
  color:rgba(245,245,245,.92);
}
.madeWithDh__titleText span{color:rgba(240,209,120,.92)}

.madeWithDh__micro{
  position:absolute;
  left:0;
  right:0;
  top:140px;
  text-align:center;
  font-size:12px;
  color:rgba(220,220,220,.64);
  z-index:4;
  pointer-events:none;
}

.madeWithDh__actions{
  position:absolute;
  left:clamp(14px, 4vw, 56px);
  bottom:clamp(18px, 4vh, 44px);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  z-index:4;
}

/* Visually-hidden but screen-reader accessible */
.srOnly{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Sections below (missing in v1 css) */
.section{max-width:1280px; margin:0 auto; padding:64px 0}
.sectionHeader{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px}
.sectionHeader h2{margin:0; font-size:24px; letter-spacing:-.02em}
.sectionHeader p{margin:0; color:var(--muted); line-height:1.5}

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
}
.projectCard{
  display:flex;
  flex-direction:column;
  gap:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.projectCard:hover{
  transform:translateY(-3px);
  border-color:rgba(214,179,92,.34);
  background:rgba(214,179,92,.06);
}

.thumb{
  width:100%;
  aspect-ratio: 16 / 10;
  background-size:cover;
  background-position:center;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cardBody{padding:14px}
.cardBody .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.cardBody h3{margin:0; font-size:15px; letter-spacing:-.01em}
.cardBody .sub{color:var(--muted); font-size:12px}

.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.tag{font-size:12px; padding:8px 10px; border-radius:999px; border:1px solid rgba(214,179,92,.24); background:rgba(214,179,92,.08); color:rgba(240,209,120,.92)}

.cards{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px}
.card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  padding:16px;
}
.card h3{margin:0 0 10px; font-size:15px}
.card ul{margin:0; padding-left:18px; color:var(--muted); line-height:1.6}

.ctaRow{display:grid; grid-template-columns: 1.4fr .6fr; gap:16px; margin-top:18px}
@media (max-width: 980px){
  .ctaRow{grid-template-columns:1fr}
}
.ctaPanel{padding:18px; border-radius:18px; border:1px solid rgba(214,179,92,.22); background:rgba(214,179,92,.06)}
.ctaPanel h3{margin:0 0 8px; font-size:16px}
.ctaPanel p{margin:0; color:var(--muted); line-height:1.55}
.ctaActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

.opsGrid{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px}
.ops{border-radius:18px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); padding:16px}
.opsTitle{display:flex; align-items:center; gap:10px; font-weight:720; margin-bottom:8px}
.opsIcon{width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid rgba(214,179,92,.26); background:rgba(214,179,92,.08)}
.ops p{margin:0; color:var(--muted); line-height:1.6}

.steps{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px}
.step{border-radius:18px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); padding:16px}
.step .num{font-family:var(--mono); font-size:12px; color:rgba(240,209,120,.85)}
.step h3{margin:10px 0 8px; font-size:15px}
.step p{margin:0; color:var(--muted); line-height:1.6}

.faq{display:grid; grid-template-columns: 1fr; gap:10px}
.faq details{border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); padding:12px 14px}
.faq summary{cursor:pointer; font-weight:720}
.faq p{margin:10px 0 0; color:var(--muted); line-height:1.6}

/* Wall on smaller screens: reduce panel footprint */
@media (max-width: 640px){
  .wallPanel{top:92px; padding:14px}
  .wallTitle{font-size:26px}
  .heroRow{flex-direction:column; align-items:center}
}

/* Respect reduced motion for new animations too */
@media (prefers-reduced-motion: reduce){
  .brandCoin, .liveHelpCoin .coin3D{animation:none}
  .brandButton, .menuItem, .projectCard, .ghostBtn, .primaryBtn{transition:none}
}


/* Header social icons (moved from footer) */
.headerSocial{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-right: 10px;
}
.socialIconBtn{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(200,185,176,.35);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.socialIconBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(200,185,176,.65);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.socialIconBtn--ghost{
  opacity: .85;
}
.socialSvg{
  width: 18px;
  height: 18px;
  fill: rgba(200,185,176,.95);
}

/* Work tiles: ensure thumb always fills */
.workCard .thumb{ background-size: cover; background-position: center; }

/* Live Help coin: remove outer frame and make edge feel more 3D */
.live-help-coin{
  width: 76px;
  height: 76px;
  perspective: 900px;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.55));
}
.coin3d{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: coinSpin 3.6s linear infinite;
}
.coinFace{
  position:absolute;
  inset:0;
  border-radius: 999px;
  backface-visibility: hidden;
  transform: translateZ(7px);
  overflow:hidden;
}
.coinFace img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: translateZ(0);
}
.coinBack{
  transform: rotateY(180deg) translateZ(7px);
  /* keep the same face so it doesn't feel like it "flips" to a different side */
  filter: brightness(.98) contrast(1.02);
}
.coinEdge{
  position:absolute;
  inset:0;
  transform-style: preserve-3d;
}
.coinSlice{
  position:absolute;
  inset:0;
  border-radius: 999px;
  /* crisper ridged edge */
  background:
    repeating-linear-gradient(
      90deg,
      rgba(200,185,176,.18) 0px,
      rgba(200,185,176,.18) 1px,
      rgba(0,0,0,.28) 1px,
      rgba(0,0,0,.28) 2px
    );
  opacity: .95;
}
@keyframes coinSpin{
  0%{ transform: rotateY(0deg) rotateX(-10deg); }
  100%{ transform: rotateY(360deg) rotateX(-10deg); }
}

/* Services heading tweaks: center + mildly fancy */
.services .sectionHeader{
  justify-content: center;
  text-align: center;
}
.services .sectionTitle{
  font-style: italic;
  letter-spacing: 0.02em;
}