:root{
  --gold:#B8975A;--gold-l:#C9A96E;--gold-d:#A08548;
}
@keyframes num-in{
  from{opacity:0;transform:translateY(24px) scale(.92);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes gold-shimmer{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.2;}}
@keyframes fade-up{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

.page-not-found-page {
*{box-sizing:border-box;margin:0;padding:0;}

html,body{height:100%;}
body{font-family:'Inter',sans-serif;background:#fff;color:#1a1a1a;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;}

/* ── HERO IMAGE — full-width cinematic banner ── */
.hero-img{
  position:relative;
  width:100%;
  height:58vh;
  min-height:340px;
  overflow:hidden;
  flex-shrink:0;
}
.hero-img img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 40%;
  display:block;
}
/* Dark gradient overlay bottom → nav stays readable */
.hero-img::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.05) 55%,rgba(255,255,255,1) 85%);
  z-index:1;
}
/* Subtle gold vignette left */
.hero-img::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 60%,rgba(184,151,90,.08),transparent 60%);
  z-index:1;pointer-events:none;
}

/* ── NAV (sits on top of hero image) ── */
.page-not-found-page .nav{
  position:absolute;top:0;left:0;right:0;z-index:10;
  padding:18px 48px;
  display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.15) 70%,transparent 100%);
}
.page-not-found-page .nav svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));}

/* ── CONTENT ── */
.main{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  text-align:center;
  padding:0 24px 60px;
  position:relative;z-index:2;
}
/* 404 pulled up to overlap the hero */
.four-zero-four{
  position:relative;
  margin-top:-70px;
  margin-bottom:20px;
  z-index:5;
}


.num-404{
  font-family:'Playfair Display',serif;
  font-size:clamp(110px,18vw,200px);
  font-weight:800;line-height:.85;
  letter-spacing:-6px;user-select:none;
  background:linear-gradient(160deg,#DECE9F 0%,#C9A96E 30%,#B8975A 65%,#A08548 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:num-in .9s cubic-bezier(.22,1,.36,1) both, gold-shimmer 4s ease-in-out 1s infinite;
  text-shadow:none;
  filter:drop-shadow(0 8px 32px rgba(184,151,90,.18));
}




/* Text */
.label-tag{
  animation:fade-up .6s cubic-bezier(.22,1,.36,1) .3s both;

  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:100px;
  background:rgba(184,151,90,.07);border:1px solid rgba(184,151,90,.18);
  font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold-l);margin-bottom:16px;
}
.dot-pulse{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:pulse 2s ease infinite;}


h1{animation:fade-up .6s cubic-bezier(.22,1,.36,1) .5s both;}
.sub{animation:fade-up .6s cubic-bezier(.22,1,.36,1) .65s both;}
.btn-row{animation:fade-up .6s cubic-bezier(.22,1,.36,1) .8s both;}
.quick{animation:fade-up .6s cubic-bezier(.22,1,.36,1) .95s both;}

h1{font-family:'Playfair Display',serif;font-size:clamp(20px,3.5vw,30px);font-weight:700;color:#1a1a1a;margin-bottom:10px;line-height:1.2;}
h1 em{font-style:italic;color:var(--gold-l);font-weight:400;}
.sub{font-size:13px;color:#888;line-height:1.65;max-width:400px;margin:0 auto 30px;}

/* Buttons */
.btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.btn-gold{padding:12px 28px;border-radius:10px;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(135deg,#C4A559 0%,#D4BC7A 40%,#E5D4A0 70%,#EFE2B8 100%);border:none;cursor:pointer;transition:all .2s;box-shadow:0 3px 16px rgba(150,120,62,.22);}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(150,120,62,.32);}
.btn-ghost{padding:12px 28px;border-radius:10px;font-size:12px;font-weight:700;color:#888;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08);cursor:pointer;transition:all .2s;}
.btn-ghost:hover{background:rgba(0,0,0,.06);color:#1a1a1a;}

/* Quick links */
.quick{margin-top:40px;}
.quick-label{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#ccc;margin-bottom:12px;}
.quick-grid{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.quick-item{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:9px;background:#FAFAFA;border:1px solid rgba(0,0,0,.05);cursor:pointer;transition:all .2s;text-decoration:none;color:#888;font-size:11px;font-weight:600;}
.quick-item:hover{background:rgba(184,151,90,.06);border-color:rgba(184,151,90,.15);color:var(--gold-l);}
.quick-item .qi-icon{font-size:13px;}

/* Footer */
footer{padding:18px 48px;border-top:1px solid rgba(0,0,0,.05);text-align:center;font-size:9px;color:#ccc;letter-spacing:.5px;}
footer span{color:var(--gold);}

.hub-link:hover{background:rgba(201,165,74,.25);border-color:rgba(201,165,74,.4);color:#E5D4A0;}
.hub-link-dot{width:6px;height:6px;border-radius:50%;background:#D4BC7A;}


      .st0, .st1 {
        fill: none;
      }

      .st2 {
        fill: url(#tt_g2);
      }

      .st3 {
        fill: #231f20;
      }

      .st4 {
        fill: #d9d9d9;
      }

      .st5 {
        fill: #9e7e3f;
      }

      .st6 {
        fill: #fff;
        stroke: url(#tt_g4);
        stroke-width: 1.62px;
      }

      .st7 {
        fill: url(#tt_g1);
      }

      .st8 {
        clip-path: url(#tt_cp);
      }

      .st1 {
        stroke: url(#tt_g3);
        stroke-width: 1.8px;
      }
}