:root{
    --black:#0b0a08;
    --black-2:#141210;
    --gold:#c9a227;
    --gold-bright:#e8c565;
    --gold-dim:#8a6f28;
    --cream:#ece3cf;
    --cream-dim:#b8ac91;
    --burgundy:#4a1518;
    --line: rgba(201,162,39,0.35);
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--black);
    color:var(--cream);
    font-family:'Cormorant Garamond', serif;
    font-size:19px;
    line-height:1.7;
    overflow-x:hidden;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }

  ::selection{background:var(--gold-dim); color:var(--black);}

  h1,h2,h3,.display{
    font-family:'Rye', serif;
    font-weight:400;
    letter-spacing:0.01em;
    color:var(--gold);
    background: linear-gradient(180deg, #f0d67e 0%, #d4a92e 35%, #a87a1e 60%, #c9962b 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:none;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.55)) drop-shadow(0 1px 0 rgba(232,197,101,0.25));
  }

  .flourish{
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin:0.9rem auto 0;
  }
  .flourish .fl-line{ width:38px; height:1px; background:var(--gold-dim); }
  .flourish svg{ flex-shrink:0; }

  .eyebrow, nav a, .btn, .label, footer .cols h4{
    font-family:'Jost', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.22em;
  }

  a{color:inherit; text-decoration:none;}

  /* ---------- Background texture ---------- */
  .bg-texture{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
      radial-gradient(circle at 20% 20%, rgba(201,162,39,0.05), transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(201,162,39,0.04), transparent 45%);
  }

  /* ---------- Sunburst signature motif ---------- */
  .sunburst{
    width:1px; height:1px;
    position:relative;
    display:block;
  }
  .sunburst svg{ overflow:visible; }
  .ray{
    stroke:var(--gold);
    stroke-width:1;
    opacity:0;
    transform-origin:center;
    animation:rayIn 1.4s ease forwards;
  }
  @keyframes rayIn{
    from{opacity:0; stroke-dashoffset:60;}
    to{opacity:0.85; stroke-dashoffset:0;}
  }

  /* ---------- Chevron divider ---------- */
  .chevron-divider{
    display:flex; align-items:center; justify-content:center;
    gap:10px; margin:0 auto; width:100%; max-width:340px;
    padding: 2.2rem 0;
  }
  .chevron-divider .line{ flex:1; height:1px; background:var(--line); }
  .chevron-divider svg{ flex-shrink:0; }

  /* ---------- Top nav ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:rgba(11,10,8,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1180px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 1.4rem;
  }
  .brandmark{
    font-family:'Rye', serif;
    font-size:1.3rem; font-weight:400;
    color:var(--gold-bright);
    letter-spacing:0.02em;
  }
  .brandmark span{ display:block; font-family:'Jost',sans-serif; font-size:0.55rem; letter-spacing:0.35em; color:var(--cream-dim); font-weight:400; margin-top:2px;}

  nav.links{ display:none; gap:1.8rem; }
  nav.links a{ font-size:0.68rem; color:var(--cream-dim); transition:color .25s; }
  nav.links a:hover{ color:var(--gold-bright); }

  .menu-btn{
    display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
  }
  .menu-btn span{ width:22px; height:1px; background:var(--gold); display:block; }

  .mobile-panel{
    display:none; flex-direction:column;
    background:var(--black-2);
    border-bottom:1px solid var(--line);
  }
  .mobile-panel.open{ display:flex; }
  .mobile-panel a{
    padding:1rem 1.4rem; font-size:0.75rem; color:var(--cream-dim);
    border-top:1px solid rgba(201,162,39,0.12);
  }

  @media(min-width:820px){
    nav.links{ display:flex; }
    .menu-btn{ display:none; }
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:auto;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding:3.2rem 1rem;
  }
  .hero-frame{
    position:relative;
    width:100%; max-width:900px;
    margin:1.6rem auto;
    padding:2.6rem 1.6rem 2.2rem;
    border:2px solid var(--gold);
    border-radius:26px;
    box-shadow:0 0 0 5px var(--black), 0 0 0 6px var(--gold-dim);
  }
  @media(min-width:700px){ .hero-frame{ padding:3.4rem 3rem 2.8rem; } }
  .hero-frame::before{
    content:'';
    position:absolute; inset:9px;
    border:1px solid var(--gold-dim);
    border-radius:19px;
    pointer-events:none;
  }

  .archwrap{
    max-width:640px; margin:0 auto;
    opacity:0; animation:fadeUp 1s ease forwards; animation-delay:.15s;
  }
  .archwrap svg{ width:100%; height:auto; display:block; }
  .arch-text{ font-family:'Rye', serif; }

  .under-title{
    font-family:'Rye', serif; font-size:clamp(1.3rem,4.2vw,1.9rem);
    letter-spacing:0.02em; margin-top:0.4rem;
    background: linear-gradient(180deg, #f0d67e 0%, #d4a92e 40%, #a87a1e 65%, #c9962b 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5));
    opacity:0; animation:fadeUp 1s ease forwards; animation-delay:.3s;
  }

  .cream-banner{
    display:inline-block; margin:1.8rem auto 0; max-width:100%;
    background:linear-gradient(180deg,#efe3c0,#d9c793);
    color:#1a1408;
    border:1px solid var(--gold-dim);
    padding:0.9rem 1.6rem;
    font-family:'Jost',sans-serif; font-weight:600;
    font-size:clamp(0.72rem, 2.4vw, 0.95rem);
    letter-spacing:0.06em; text-transform:uppercase;
    opacity:0; animation:fadeUp 1s ease forwards; animation-delay:.45s;
  }

  .category-row{
    margin-top:1.6rem;
    font-family:'Jost',sans-serif; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--cream-dim);
    display:flex; flex-wrap:wrap; gap:0.5rem 0.9rem; justify-content:center;
    opacity:0; animation:fadeUp 1s ease forwards; animation-delay:.55s;
  }
  .category-row span.dot{ color:var(--gold-dim); }

  .contact-line{
    margin-top:2.2rem;
    display:flex; align-items:center; justify-content:center; gap:1rem;
    font-family:'Rye', serif; color:var(--gold);
    font-size:clamp(1.1rem,4vw,1.6rem);
    opacity:0; animation:fadeUp 1s ease forwards; animation-delay:.65s;
  }
  .contact-line .orn-line{ width:34px; height:1px; background:var(--gold-dim); position:relative; }
  .contact-line .orn-line::before{ content:'»'; position:absolute; left:-14px; top:-11px; color:var(--gold-dim); font-size:0.9rem; }
  .contact-line .orn-line.right::before{ content:'«'; left:auto; right:-14px; }
  .site-line{
    margin-top:0.5rem; font-family:'Jost',sans-serif; font-size:0.75rem; letter-spacing:0.2em; color:var(--gold-bright);
    opacity:0; animation:fadeUp 1s ease forwards; animation-delay:.75s;
  }

  .hero p.lede{
    max-width:520px; margin:1.8rem auto 0; color:var(--cream-dim); font-size:1.1rem; font-style:italic;
    opacity:0; animation:fadeUp 1s ease forwards; animation-delay:.85s;
  }
  .hero .ctas{
    display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:2.2rem;
    opacity:0; animation:fadeUp 1s ease forwards; animation-delay:.95s;
  }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }

  .btn{
    display:inline-block; font-size:0.7rem; padding:0.95rem 2rem;
    border:1px solid var(--gold); color:var(--gold-bright);
    transition:all .3s ease; position:relative;
  }
  .btn:hover{ background:var(--gold); color:var(--black); }
  .btn.solid{ background:var(--gold); color:var(--black); }
  .btn.solid:hover{ background:var(--gold-bright); }

  /* ---------- Section shell ---------- */
  section{ position:relative; padding:5.5rem 1.4rem; max-width:1180px; margin:0 auto; }
  .section-head{ text-align:center; margin-bottom:3rem; }
  .section-head .eyebrow{ font-size:0.68rem; color:var(--gold); letter-spacing:0.35em; margin-bottom:1rem; }
  .section-head h2{ font-size:clamp(1.8rem,4.5vw,2.6rem); }
  .section-head p{ color:var(--cream-dim); max-width:560px; margin:1.4rem auto 0; }

  /* ---------- About ---------- */
  .about-grid{
    display:grid; gap:2.5rem;
    grid-template-columns:1fr;
  }
  @media(min-width:860px){ .about-grid{ grid-template-columns:1fr 1fr; align-items:center; gap:4rem; } }
  .about-panel{
    border:1px solid var(--line); padding:2.4rem;
    background:linear-gradient(180deg, rgba(201,162,39,0.04), transparent);
  }
  .about-panel h3{ font-size:1.3rem; margin-bottom:1rem; }
  .stat-row{ display:flex; gap:2rem; margin-top:2rem; flex-wrap:wrap; }
  .stat{ }
  .stat .num{ font-family:'Cinzel', serif; font-size:2rem; color:var(--gold-bright); display:block; }
  .stat .lab{ font-family:'Jost',sans-serif; font-size:0.62rem; letter-spacing:0.18em; color:var(--cream-dim); text-transform:uppercase; }

  /* ---------- Service cards ---------- */
  .grid-2{ display:grid; gap:1.6rem; grid-template-columns:1fr; }
  @media(min-width:760px){ .grid-2{ grid-template-columns:1fr 1fr; } }
  .grid-3{ display:grid; gap:1.6rem; grid-template-columns:1fr; }
  @media(min-width:760px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }

  .card{
    border:1px solid var(--line);
    padding:2.4rem 2rem;
    position:relative;
    transition:border-color .3s, transform .3s;
  }
  .card:hover{ border-color:var(--gold); transform:translateY(-4px); }
  .card .icon{ margin-bottom:1.4rem; }
  .card h3{ font-size:1.15rem; margin-bottom:0.8rem; }
  .card p{ color:var(--cream-dim); font-size:1rem; }
  .card ul{ margin-top:1.2rem; padding-left:1.1rem; color:var(--cream-dim); font-size:0.98rem; }
  .card ul li{ margin-bottom:0.4rem; }
  .card .corner{
    position:absolute; width:14px; height:14px; border:1px solid var(--gold-dim);
  }
  .card .corner.tl{ top:8px; left:8px; border-right:none; border-bottom:none; }
  .card .corner.br{ bottom:8px; right:8px; border-left:none; border-top:none; }

  /* ---------- Process steps (appraisals) ---------- */
  .steps{ counter-reset:step; display:grid; gap:0; grid-template-columns:1fr; border-top:1px solid var(--line); }
  .step{
    counter-increment:step;
    display:grid; grid-template-columns:70px 1fr; gap:1.4rem;
    padding:2rem 0; border-bottom:1px solid var(--line);
    align-items:start;
  }
  .step::before{
    content: counter(step, decimal-leading-zero);
    font-family:'Cinzel', serif; font-size:1.6rem; color:var(--gold-dim);
  }
  .step h3{ font-size:1.1rem; margin-bottom:0.4rem; }
  .step p{ color:var(--cream-dim); font-size:1rem; }

  /* ---------- Band / quote ---------- */
  .band{
    background:var(--black-2);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:4.5rem 1.4rem; text-align:center;
  }
  .band blockquote{
    font-size:clamp(1.3rem,3.4vw,1.9rem); max-width:760px; margin:0 auto; color:var(--cream);
    font-style:italic;
  }
  .band cite{ display:block; margin-top:1.4rem; font-style:normal; font-family:'Jost',sans-serif; font-size:0.7rem; letter-spacing:0.3em; color:var(--gold); }

  /* ---------- Contact / CTA ---------- */
  .cta-section{ text-align:center; }
  .contact-grid{ display:grid; gap:2rem; margin-top:3rem; grid-template-columns:1fr; text-align:left; max-width:760px; margin-left:auto; margin-right:auto;}
  @media(min-width:700px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
  .contact-item{ border-left:1px solid var(--gold-dim); padding-left:1.2rem; }
  .contact-item h4{ font-family:'Jost',sans-serif; font-size:0.65rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--gold); margin-bottom:0.5rem; }
  .contact-item p{ color:var(--cream-dim); }

  /* ---------- Footer ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:3.5rem 1.4rem 2.5rem;
    text-align:center;
  }
  footer .fname{ font-family:'Cinzel Decorative', serif; color:var(--gold-bright); font-size:1.1rem; margin-bottom:0.6rem; }
  footer .ftag{ font-family:'Jost',sans-serif; font-size:0.62rem; letter-spacing:0.3em; color:var(--cream-dim); text-transform:uppercase; margin-bottom:0.6rem; }
  footer .faddr{ font-family:'Jost',sans-serif; font-size:0.68rem; letter-spacing:0.08em; color:var(--cream-dim); margin-bottom:2rem; }
  footer .fnav{ display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:center; margin-bottom:2rem; }
  footer .fnav a{ font-family:'Jost',sans-serif; font-size:0.68rem; letter-spacing:0.15em; color:var(--cream-dim); }
  footer .fnav a:hover{ color:var(--gold-bright); }
  footer .fine{ color:var(--cream-dim); font-size:0.75rem; font-family:'Jost',sans-serif; opacity:0.6; }

  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

/* ---------- Category hub cards (link cards) ---------- */
.card-link{ display:block; }
.card-link .card{ height:100%; }
.card-link:hover .card{ border-color:var(--gold); transform:translateY(-4px); }
.card .more{
  display:inline-block; margin-top:1rem; font-family:'Jost',sans-serif;
  font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  max-width:1180px; margin:0 auto; padding:1.4rem 1.4rem 0;
  font-family:'Jost',sans-serif; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--cream-dim);
}
.breadcrumb a{ color:var(--gold-dim); }
.breadcrumb a:hover{ color:var(--gold-bright); }
.breadcrumb .sep{ margin:0 0.5rem; color:var(--gold-dim); }

/* ---------- Category page header ---------- */
.cat-hero{
  max-width:900px; margin:0 auto; padding:2.5rem 1.4rem 1rem; text-align:center;
}
.cat-hero .eyebrow{ font-size:0.68rem; color:var(--gold); letter-spacing:0.35em; margin-bottom:1rem; }
.cat-hero h1{ font-size:clamp(2rem,6vw,3.2rem); line-height:1.08; }
.cat-hero p.lede{ color:var(--cream-dim); max-width:640px; margin:1.4rem auto 0; font-size:1.1rem; font-style:italic; }

.collections-banner{
  max-width:780px; margin:2rem auto 0;
  background:linear-gradient(180deg,#efe3c0,#d9c793);
  color:#1a1408; border:1px solid var(--gold-dim);
  padding:1rem 1.6rem; text-align:center;
  font-family:'Jost',sans-serif; font-weight:600; font-size:0.85rem; letter-spacing:0.03em;
}

/* ---------- Item detail blocks ---------- */
.item-grid{ display:grid; gap:2.2rem; grid-template-columns:1fr; margin-top:1rem; }
@media(min-width:760px){ .item-grid{ grid-template-columns:1fr 1fr; } }
.item-block{ border:1px solid var(--line); padding:2rem 1.8rem; }
.item-block h2{ font-size:1.35rem; margin-bottom:0.7rem; }
.item-block p{ color:var(--cream-dim); font-size:1rem; }

.related-cats{
  margin-top:1rem; display:flex; flex-wrap:wrap; gap:0.9rem; justify-content:center;
}
.related-cats a{
  font-family:'Jost',sans-serif; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--cream-dim); border:1px solid var(--line); padding:0.7rem 1.2rem;
  transition:all .25s;
}
.related-cats a:hover{ color:var(--gold-bright); border-color:var(--gold); }

/* ============================================================
   POLISH PASS — responsive rhythm, accessibility, consistency
   ============================================================ */

/* Prevent the sticky header from covering section titles on anchor jumps */
section[id], .hero[id]{ scroll-margin-top:76px; }

/* Keyboard focus states — visible, on-brand, never invisible */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
  border-radius:2px;
}

/* Tighter, calmer vertical rhythm on phones — 5.5rem reads as dead space at 375px wide */
@media(max-width:640px){
  section{ padding:3.4rem 1.2rem; }
  .band{ padding:3rem 1.2rem; }
  .section-head{ margin-bottom:2.2rem; }
  .hero{ padding:2.2rem 0.9rem; }
  .hero-frame{ padding:2.1rem 1.2rem 1.8rem; margin:1.1rem auto; }
  .card{ padding:1.9rem 1.5rem; }
  .item-block{ padding:1.6rem 1.4rem; }
  .about-panel{ padding:1.8rem; }
  footer{ padding:2.8rem 1.2rem 2rem; }
}

/* Card grids: stretch items evenly so mismatched copy lengths don't break the row rhythm */
.grid-2, .grid-3, .item-grid{ align-items:stretch; }
.card{ display:flex; flex-direction:column; }
.card p{ flex-grow:1; }

/* Footer: separate the two nav rows so the category links don't run into the main nav */
footer .fnav + .fnav{
  margin-top:-0.6rem;
  padding-top:1.6rem;
  border-top:1px solid rgba(201,162,39,0.15);
}
footer .fnav a{ transition:color .25s; }

/* Category pills in the hero — cleaner than bare dot-separated text */
.category-row{ gap:0.6rem; }
.category-row span:not(.dot){
  border:1px solid var(--line);
  padding:0.4rem 0.85rem;
  border-radius:999px;
  transition:border-color .25s, color .25s;
}
.category-row span:not(.dot):hover{ border-color:var(--gold); color:var(--gold-bright); }
.category-row span.dot{ display:none; }

/* Breadcrumb: keep it from wrapping awkwardly on narrow screens */
.breadcrumb{ line-height:1.9; }

/* Buttons: slightly deeper hover state for a more tactile, premium feel */
.btn{ box-shadow:0 0 0 0 rgba(201,162,39,0); }
.btn:hover{ box-shadow:0 4px 14px rgba(201,162,39,0.25); }

/* Links between h-tags inside cards shouldn't inherit the gold gradient clip on hover states oddly — ensure crisp rendering */
h1,h2,h3{ text-wrap:balance; }

/* Ensure images/svgs never overflow their containers on odd viewport widths */
img, svg{ max-width:100%; }

/* Slightly tighten hero lede + ctas gap on small screens for a less scattered look */
@media(max-width:480px){
  .hero .ctas{ flex-direction:column; align-items:stretch; gap:0.8rem; }
  .hero .ctas .btn{ text-align:center; }
}

/* ---------- FAQ blocks ("Where to sell my ___") ---------- */
.faq-grid{ display:grid; gap:1.4rem; grid-template-columns:1fr; margin-top:1rem; }
@media(min-width:760px){ .faq-grid{ grid-template-columns:1fr 1fr; } }
.faq-block{
  border-left:2px solid var(--gold-dim);
  padding:0.3rem 0 0.3rem 1.4rem;
}
.faq-block h3{
  font-family:'Cormorant Garamond', serif;
  background:none; -webkit-text-fill-color:var(--gold-bright); color:var(--gold-bright);
  filter:none; font-weight:600; font-style:italic;
  font-size:1.15rem; margin-bottom:0.4rem; letter-spacing:0;
}
.faq-block p{ color:var(--cream-dim); font-size:0.98rem; }
