*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{margin:0;font-family:'Jost',sans-serif;background:#F7F3EC;color:#17140F;-webkit-font-smoothing:antialiased;}
img{max-width:100%;}


  html, body { margin: 0; padding: 0; background: #17140F; }
  body { font-family: 'Jost', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  a { color: #C9992C; text-decoration: none; }
  a:hover { color: #F6E3A8; }
  /* molten gold surface drift */
  @keyframes gjMolten {
    0%   { background-position: 0% 40%, 80% 20%, 20% 80%, 50% 50%; }
    50%  { background-position: 100% 60%, 20% 70%, 70% 30%, 50% 50%; }
    100% { background-position: 0% 40%, 80% 20%, 20% 80%, 50% 50%; }
  }
  /* light catching dust: near depth — larger, softer, drifts further */
  @keyframes gjDustNear {
    0%   { transform: translate3d(0,0,0) scale(0.9); opacity: 0; }
    22%  { opacity: 0.5; }
    68%  { opacity: 0.34; }
    100% { transform: translate3d(26px,-320px,0) scale(1.1); opacity: 0; }
  }
  /* far depth — smaller, dimmer, slower travel */
  @keyframes gjDustFar {
    0%   { transform: translate3d(0,0,0) scale(0.75); opacity: 0; }
    28%  { opacity: 0.3; }
    70%  { opacity: 0.2; }
    100% { transform: translate3d(-14px,-210px,0) scale(1); opacity: 0; }
  }
  /* light glint sweeping across glass and buttons */
  @keyframes gjGlint {
    0%   { transform: translateX(-120%) rotate(12deg); opacity: 0; }
    12%  { opacity: 0.85; }
    60%  { opacity: 0; }
    100% { transform: translateX(240%) rotate(12deg); opacity: 0; }
  }
  /* slow second gradient layer, counter-drifting for a living molten surface */
  @keyframes gjMoltenB {
    0%   { background-position: 70% 30%, 10% 70%, 50% 50%; transform: scale(1.04) rotate(0.001deg); }
    50%  { background-position: 20% 80%, 85% 25%, 50% 50%; transform: scale(1.1) rotate(0.001deg); }
    100% { background-position: 70% 30%, 10% 70%, 50% 50%; transform: scale(1.04) rotate(0.001deg); }
  }
  /* large soft glare sweeping across the liquid metal */
  @keyframes gjGlare {
    0%   { transform: translate3d(-55%, 12%, 0) rotate(-14deg) scale(1); opacity: 0; }
    18%  { opacity: 0.5; }
    50%  { transform: translate3d(18%, -8%, 0) rotate(-14deg) scale(1.15); opacity: 0.62; }
    82%  { opacity: 0.38; }
    100% { transform: translate3d(85%, 14%, 0) rotate(-14deg) scale(1); opacity: 0; }
  }
  /* grain breathes very slightly so it never reads as a static overlay */
  @keyframes gjGrain {
    0%, 100% { opacity: 0.16; background-position: 0 0; }
    50%      { opacity: 0.22; background-position: 40px 30px; }
  }
  /* centred variant: keeps the -50% X offset while bobbing */
  /* monogram shimmer: the metal gradient drifts to catch the hero glare */
  @keyframes gjMonogram {
    0%, 100% { background-position: 18% 50%; }
    50%      { background-position: 82% 50%; }
  }
  /* dot travelling down the cue line */
  @keyframes gjCueDot {
    0%   { top: 0%; opacity: 0; }
    18%  { opacity: 1; }
    76%  { opacity: 1; }
    100% { top: 92%; opacity: 0; }
  }
  @keyframes gjCueLabel {
    0%, 100% { opacity: 0.72; }
    50%      { opacity: 1; }
  }
  @keyframes gjCue {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50%      { transform: translateY(9px); opacity: 1; }
  }
  @keyframes gjLoaderPulse {
    0%, 100% { opacity: 0.45; letter-spacing: 0.34em; }
    50%      { opacity: 1; letter-spacing: 0.44em; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  }
  .gj-case-glass { transition: box-shadow 0.5s ease, transform 0.5s ease; }
  .gj-case-glass:hover { transform: translateY(-6px); box-shadow: inset 0 2px 30px rgba(255,240,200,0.24), inset 0 -34px 54px rgba(12,8,3,0.62), 0 56px 88px -26px rgba(23,20,15,0.6); }
  .gj-case-glass:hover .gj-spot { opacity: 1; }
  @keyframes gjProdGlow {
    0%, 100% { filter: drop-shadow(0 16px 20px rgba(23,20,15,0.34)) drop-shadow(0 0 16px rgba(255,206,110,0.6)) brightness(1.05); }
    50%      { filter: drop-shadow(0 16px 20px rgba(23,20,15,0.34)) drop-shadow(0 0 34px rgba(255,216,128,1)) brightness(1.12); }
  }
  .gj-case-glass:hover .gj-prod { transform: translate(-50%,-50%) scale(1.07); animation: gjProdGlow 1.9s ease-in-out infinite; }
  @keyframes gjHallGlow { 0%,100% { opacity: 0.88; transform: translate(-50%,-50%) scale(0.99); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.03); } }
  @media (max-width: 860px) {
    .gj-heavy { display: none !important; }
    #gj-nav { grid-template-columns: 1fr !important; padding-top: 12px !important; padding-bottom: 12px !important; }
    .gj-nav-links { display: none !important; }
    .gj-ed-scrim { background: linear-gradient(90deg, rgba(10,7,2,0.82) 0%, rgba(10,7,2,0.56) 55%, rgba(10,7,2,0.40) 100%) !important; }
  }


#__claude_design_branding{position:fixed;right:16px;bottom:16px;z-index:2147483646;display:flex;align-items:center;gap:7px;height:30px;padding:0 5px 0 10px;border-radius:999px;font-family:"Anthropic Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:12.5px;font-weight:400;line-height:1;letter-spacing:normal;text-transform:none;color:#141413;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 0 0 .5px rgba(31,30,29,.14),0 2px 10px rgba(0,0,0,.09)}
#__claude_design_branding *{box-sizing:border-box;margin:0}
#__claude_design_branding a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
#__claude_design_branding a:hover span{text-decoration:underline}
#__claude_design_branding svg{flex:none}
#__claude_design_branding a svg{color:#D97757}
#__claude_design_branding button{width:20px;height:20px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:currentColor;opacity:.55;border:0;background:none;cursor:pointer;flex:none;font:inherit;transition:opacity .14s}
#__claude_design_branding button:hover{opacity:1;background:rgba(127,127,127,.22)}
@media print{#__claude_design_branding{display:none}}

/* hover states (from style-hover) */
.gjh1:hover{color: #F6E3A8;}
.gjh2:hover{color: #F6E3A8;}
.gjh3:hover{color: #F6E3A8;}
.gjh4:hover{color: #F6E3A8;}
.gjh5:hover{background-position: -30% 0; border-color: #E6BC66;}
.gjh6:hover{background-position: -30% 0; border-color: #E6BC66;}
.gjh7:hover{background-position: -30% 0; border-color: #E6BC66;}
.gjh8:hover{background-position: -30% 0; border-color: #CBD5DF;}
.gjh9:hover{color: #F6E3A8; border-color: #F6E3A8;}
.gjh10:hover{color: #F6E3A8; border-color: #F6E3A8;}