:root{
    --ink:var(--ds-ink); --body:#4a4550; --gold:var(--ds-gold-line); --gold-deep:#7A6446;
    --ivory:var(--ds-ivory); --line:#ece3d1;
  }
  html{scroll-behavior:smooth}
  body{font-family:'Inter',system-ui,sans-serif;color:var(--body);background:#fff;-webkit-font-smoothing:antialiased}
  .display{font-family:'Manrope', ui-sans-serif, system-ui, sans-serif}
  .gold-shimmer{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    background:linear-gradient(180deg, var(--ds-gold) 0%, #C9A33D 52%, #C58E3A 100%);
    border:1px solid rgba(145,113,0,0.85);
    overflow:hidden;
    isolation:isolate;
    color:#FFFDE5;
    text-shadow:0 -1px 0 rgba(178,140,2,0.85);
    transition:transform 0.25s cubic-bezier(0.1,0.4,0.2,1), box-shadow 0.25s cubic-bezier(0.1,0.4,0.2,1), filter var(--dur-base) var(--ease-standard);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.55),
      inset 0 -2px 0 rgba(0,0,0,0.08),
      0 6px 18px -4px rgba(246,197,118,0.45),
      0 2px 4px rgba(31,26,21,0.12);
  }
  .gold-shimmer::before{
    content:"";
    position:absolute;
    inset:2px;
    border-radius:inherit;
    background:linear-gradient(180deg, rgba(255,253,221,0.55) 0%, rgba(133,104,7,0.18) 55%, rgba(255,241,179,0.35) 100%);
    pointer-events:none;
    z-index:-1;
  }
  .gold-shimmer::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.55) 55%, transparent 80%);
    transform:translateX(-120%);
    animation:shimmerSweep 3s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes shimmerSweep{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
  .gold-shimmer:hover{
    filter:brightness(1.05);
    transform:translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.65),
      inset 0 -2px 0 rgba(0,0,0,0.06),
      0 12px 28px -8px rgba(246,197,118,0.55),
      0 4px 8px rgba(31,26,21,0.14);
  }
  .gold-shimmer:active{
    transform:translateY(0) scale(0.98);
    filter:brightness(0.95);
  }
  .gold-shimmer iconify-icon{
    transition:transform var(--dur-base) var(--ease-standard);
  }
  .gold-shimmer:hover iconify-icon{
    transform:translateX(3px);
  }
  .card{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
  .card:hover{transform:translateY(-4px);box-shadow:0 1rem 2rem -1rem rgba(143,120,87,.18),0 2.5rem 5rem -1.5rem rgba(30,27,36,.14)}
  .chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.gold-shimmer{animation:none}.gold-shimmer::after{animation:none}}
  .drawer{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  /* ============ Agency polish layer ============ */
  main > section { padding-top: clamp(96px,10vw,144px); padding-bottom: clamp(96px,10vw,144px); }
  h1,h2 { text-wrap: balance; letter-spacing:-.03em; line-height:1.05; }
  h3,h4 { font-family:'Inter','Inter',sans-serif; font-weight:500; letter-spacing:-.01em; text-wrap:balance; }
  p { line-height:1.65; }
  a,button,[role="button"]{ transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:9999px;
  }
  @media (max-width:640px){ a[class*="rounded-full"], button { min-height:44px; } }

/* --- mobile audit fixes --- */
footer a,.site-footer a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:639px){
  .eyebrow{font-size:12px!important}
  .marquee,.logo-track{animation-play-state:paused!important}
  .btn,.btn-premium,.gold-shimmer{min-height:48px!important}
}
@media(prefers-reduced-motion:reduce){.marquee,.logo-track{animation:none!important}}
.drawer{height:100dvh!important}
.card-title-link,.prod-link{min-height:44px;display:inline-flex;align-items:center}


.card a[href^="/store/"]{min-height:44px;display:inline-flex;align-items:center}
.grid a[href^="/store/"] h3,.grid a[href^="/store/"] p{display:block}
@media(max-width:639px){[data-product] + [data-product]{margin-top:4px}}

/* --- mobile-first polish (<=640px) --- */
@media (max-width:640px){
  #fx-hero{
    min-height:auto;
    padding-top:0;
    padding-bottom:0;
  }
  #fx-hero > .relative{
    padding-top:64px;
    padding-bottom:64px;
  }
  .text-\[10px\]{font-size:11.5px!important;line-height:1.5!important}
  .text-\[11px\]{font-size:12px!important;line-height:1.55!important}
  .tracking-\[0\.32em\]{letter-spacing:.2em!important}
  .tracking-\[0\.28em\]{letter-spacing:.18em!important}
  .tracking-\[0\.26em\]{letter-spacing:.17em!important}
  p,li{text-wrap:pretty}
  h1,h2,h3{text-wrap:balance;overflow-wrap:anywhere}
  img,video,svg,table{max-width:100%}
}
@media (max-width:900px){
  footer a,nav a,header a{min-height:44px;display:inline-flex;align-items:center}
  label:has(input[type=checkbox]),label:has(input[type=radio]){min-height:44px;display:flex;align-items:center}
  input,select,textarea{font-size:16px!important}
}
/* Mobile-first centering */
@media (max-width: 768px) {
  main section h1,
  main section h2,
  main section h3,
  main section h4,
  main section p,
  main section .eyebrow,
  main section [class*="eyebrow"],
  main section .hero-trust-row,
  main section .display,
  main section dl,
  main section dt,
  main section dd,
  main section li,
  main section h2 .word,
  main section h3 .word,
  main section .reveal-title .word,
  main section .reveal-title {
    text-align: center !important;
  }
  main section .flex:not(.logo-track):not(.marquee):not(.items-start),
  main section .grid {
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
  }
  main section .max-w-xl,
  main section .max-w-lg,
  main section .max-w-2xl,
  main section .max-w-3xl,
  main section .max-w-4xl,
  main section .max-w-5xl,
  main section > div:first-child {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  main section div:not(.logo-track):not(.marquee),
  main section article,
  main section li,
  main section dl > div {
    text-align: center !important;
  }
  main section img:not(.logo-badge):not(.w-full):not([class*="h-full"]) {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  main section .max-w-md,
  main section .max-w-sm,
  main section .max-w-prose,
  main section form {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  main section a.inline-flex,
  main section a[class*="skeuomorphic"],
  main section button {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .skeuomorphic-btn,
  .skeuomorphic-btn-secondary,
  .gold-shimmer,
  .btn-premium,
  .btn {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



/* clean+bold pairing: Manrope display, Inter body */
h1,h2,h3,h4,h5,.display,.brand-logo{font-family:'Manrope',ui-sans-serif,system-ui,sans-serif!important;font-style:normal!important;letter-spacing:-.02em}
h1,h2{font-weight:600!important}
h3,h4,h5{font-weight:500!important}
body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}


    @keyframes blurRise{from{opacity:0;filter:blur(16px);transform:translateY(30px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
    .fx-rise{opacity:0;animation:blurRise 1s cubic-bezier(.2,.7,.2,1) forwards}
    #fx-hero{position:relative;overflow:hidden;background:#fff;min-height:76vh;display:flex;align-items:center}
    #fx-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:blur(2px) saturate(1.06);transform:scale(1.06)}
    #fx-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
      background:
        radial-gradient(120% 100% at 50% 44%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.80) 30%, rgba(255,255,255,.46) 58%, rgba(255,255,255,.20) 100%),
        linear-gradient(to bottom, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 82%, rgba(255,255,255,.92) 100%);}
    #fx-scrim::after{content:"";position:absolute;left:50%;top:46%;width:640px;height:640px;transform:translate(-50%,-50%);filter:blur(20px);
      background:radial-gradient(circle, rgba(184,160,126,.16), transparent 62%)}
    .fx-kicker{display:inline-flex;align-items:center;gap:16px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.30em;color:var(--body)}
    .fx-kicker::before,.fx-kicker::after{content:"";width:26px;height:1px;background:var(--gold)}
    .fx-h1{font-size:clamp(46px,8vw,112px);line-height:.94;letter-spacing:-.04em}
    .fx-dot{color:var(--gold-deep)}
    .fx-meta{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;color:#9a94a6}
    .fx-meta i{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--gold);vertical-align:middle}
    @media (prefers-reduced-motion: reduce){.fx-rise{animation:none;opacity:1;filter:none;transform:none}#fx-video{filter:saturate(1.06)}}