/*
    Design direction from the ui-ux-pro-max skill (variance 2 / motion 2 / density 2):
    minimal, spacious, subtle scroll reveal (8-16px, ~400ms), step indicator in the
    configurator, balanced headline wrapping, reduced-motion respected.
    Palette + type follow the SDC brief: white/ivory canvas, one sapphire-navy anchor,
    one lighter sapphire for interaction. No gradients.
  */
  :root {
    --white: #FFFFFF;
    --ivory: #F6F1E4;          /* the cream of the SDC seal */
    --anchor: #15181D;         /* anchor: the black of the SDC seal */
    --sapphire: #3A5FA0;       /* interaction: links, hovers, selection (6.1:1 on white) */
    --ink: #1D1F23;
    --muted: #5E5A54;          /* warm grey: 6.8:1 on white, 6.1:1 on cream */
    --hairline: #E6DFD1;
    --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
    --sans: "Inter", system-ui, -apple-system, sans-serif;
    --gutter: clamp(16px, 4vw, 72px);
    --max: 1880px;
    --ease: cubic-bezier(.25,.1,.25,1);
    --grade: sepia(.08) saturate(.9) contrast(.96) brightness(1.02); /* one grade for every photo */
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--white); color: var(--ink); font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
  img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--grade); }
  h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; margin: 0; color: var(--anchor); text-wrap: balance; }
  h1 em, h2 em { font-style: italic; letter-spacing: .04em; }
  p { margin: 0; }
  a { color: inherit; text-decoration: none; }
  :focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
  .label { font: 500 11px/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }

  /* Understated underline link */
  .link { position: relative; display: inline-block; padding-bottom: 6px; font: 500 11px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--anchor); cursor: pointer; background: none; border: 0; }
  .link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform .5s var(--ease); }
  .link:hover { color: var(--accent); }
  .link:hover::after { transform: scaleX(.4); }
  .link.quiet::after { transform: scaleX(0); }
  .link.quiet:hover::after { transform: scaleX(1); }

  /* Header */
  header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); }
  header .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; height: 64px; }
  header nav { display: flex; gap: clamp(18px, 2.4vw, 36px); }
  header nav .link[aria-current] { color: var(--accent); }
  header nav .link[aria-current]::after { transform: scaleX(1); }
  .wordmark { font: 600 20px/1 var(--serif); letter-spacing: .42em; color: var(--anchor); white-space: nowrap; }
  .brand { display: flex; align-items: center; gap: 14px; }
  .brand img { width: 36px; height: auto; filter: none; }
  .header-end { display: flex; align-items: center; gap: 24px; }
  .header-call { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 12px/1 var(--sans); letter-spacing: .12em; color: var(--anchor); white-space: nowrap; transition: color .3s var(--ease); }
  .header-call:hover { color: var(--accent); }
  .header-call svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
  .menu-btn { display: none; }
  /* Home: the header waits until the cover has scrolled away */
  body.home header { position: fixed; left: 0; right: 0; transition: transform .5s var(--ease), visibility .5s; }
  .js body.home header:not(.show):not(:focus-within) { transform: translateY(-100%); visibility: hidden; }

  /* Hero */
  /* Hero: one full-width photograph, words over its quiet left side */
  .hero { --edge: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
    --photo-bg: #F2EEEA; /* matches the photograph's background so the two read as one image */
    position: relative; overflow: hidden; display: flex; align-items: center;
    min-height: calc(100svh - 64px); background: var(--photo-bg); padding: clamp(56px, 6vw, 96px) var(--edge); }
  .hero .copy { position: relative; z-index: 1; width: min(48%, 820px); display: flex; flex-direction: column; gap: clamp(24px, 2.4vw, 36px); }
  .hero h1 { font-size: clamp(56px, 7.4vw, 136px); line-height: 1.02; max-inline-size: 12ch; }
  .hero p { color: var(--muted); max-width: 34em; font-size: clamp(17px, 1.25vw, 21px); line-height: 1.7; }
  .hero p.sub { font: 500 italic clamp(22px, 1.8vw, 30px)/1.4 var(--serif); color: var(--anchor); max-width: 30em; }
  .hero .facts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; list-style: none; margin: 4px 0 0; padding: 22px 0 0; border-top: 1px solid var(--hairline); max-width: 40em; }
  .hero .facts li { font: 500 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--anchor); }
  .hero .facts li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 22px; background: var(--accent); opacity: .55; transform: rotate(45deg) translateY(-2px); }
  .hero .ctas { display: flex; flex-wrap: wrap; gap: 20px 40px; margin-top: 6px; }
  .hero figure { position: absolute; top: 0; right: 0; bottom: 0; width: 72%; margin: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%); mask-image: linear-gradient(to right, transparent 0%, #000 30%); }
  .hero figure img { object-position: 30% 55%; }

  /* Statement */
  .statement { padding: clamp(96px, 14vw, 180px) 0; text-align: center; }
  .statement p.big { font: 500 clamp(26px, 3vw, 40px)/1.35 var(--serif); color: var(--anchor); max-width: 30ch; margin: 24px auto 0; text-wrap: balance; }

  /* Categories */
  .cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 8px; }
  .cat { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ivory); display: block; }
  .cat.wide { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
  .cat img { transition: transform 1.6s var(--ease); }
  .cat:hover img { transform: scale(1.04); }
  .cat .over { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px; color: #fff; background: rgba(21,24,29,.3); display: flex; flex-direction: column; gap: 6px; }
  .cat .over .label { color: rgba(255,255,255,.9); }
  .cat .over span.line { font: 500 italic 22px/1.3 var(--serif); letter-spacing: .02em; }

  /* Atelier */
  .atelier { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 120px); align-items: center; padding: clamp(96px, 12vw, 160px) var(--gutter); max-width: var(--max); margin: 0 auto; }
  .atelier figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
  .atelier .copy { display: flex; flex-direction: column; gap: 28px; max-width: 460px; }
  .atelier h2 { font-size: clamp(38px, 4.4vw, 64px); }
  .atelier p { color: var(--muted); }

  /* Configurator */
  .config { background: var(--white); border-top: 1px solid var(--hairline); padding: clamp(96px, 12vw, 160px) 0; }
  .config-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 72px; }
  .config-head h2 { font-size: clamp(38px, 4.4vw, 64px); }
  .progress { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
  .progress li { font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #9AA0AA; padding-bottom: 8px; border-bottom: 1px solid transparent; transition: color .4s var(--ease), border-color .4s var(--ease); }
  .progress li.done { color: var(--muted); }
  .progress li.current { color: var(--anchor); border-color: var(--anchor); }
  .step { display: none; }
  .step.active { display: block; animation: page .6s var(--ease); }
  @keyframes page { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .step-title { display: flex; align-items: baseline; gap: 20px; margin-bottom: 56px; }
  .step-title .num { font: 500 italic 22px/1 var(--serif); color: var(--muted); }
  .step-title h3 { font-size: clamp(28px, 3vw, 40px); }
  .options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 48px; margin: 0; padding: 0; border: 0; }
  .options.dense { grid-template-columns: repeat(4, 1fr); gap: 44px 40px; }
  .options.dense .opt .t { font-size: clamp(24px, 2.1vw, 32px); }
  .options legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .opt { position: relative; cursor: pointer; display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; }
  .opt input { position: absolute; opacity: 0; pointer-events: none; }
  .opt .t { font: 500 clamp(28px, 2.6vw, 38px)/1.1 var(--serif); color: var(--ink); transition: color .35s var(--ease); }
  .opt .s { font: 500 10.5px/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
  .opt::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 48px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
  .opt:hover .t { color: var(--accent); }
  .opt:has(input:checked) .t { color: var(--anchor); }
  .opt:has(input:checked)::after { transform: scaleX(1); }
  .opt:has(input:focus-visible) { outline: 1px solid var(--accent); outline-offset: 8px; }
  .nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 88px; padding-top: 28px; border-top: 1px solid var(--hairline); }
  .nav-row .count { font: 500 11px/1 var(--sans); letter-spacing: .24em; color: var(--muted); }
  .link[disabled] { visibility: hidden; }
  .summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; }
  .summary div { display: flex; flex-direction: column; gap: 10px; }
  .summary .v { font: 500 clamp(26px, 2.4vw, 34px)/1.15 var(--serif); color: var(--anchor); }
  .summary-note { margin-top: 56px; color: var(--muted); max-width: 38em; }
  form#builder { display: block; }
  .inquire-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--hairline); max-width: 1120px; }
  .step-hint { margin-top: 16px; font-size: 14px; color: var(--accent); min-height: 1.4em; text-align: right; }

  /* Appointment */
  .appointment { background: var(--ivory); padding: clamp(96px, 12vw, 160px) 0; }
  .appointment .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 8vw, 140px); }
  .appointment h2 { font-size: clamp(38px, 4.4vw, 64px); margin: 20px 0 28px; }
  .appointment .intro p { color: var(--muted); max-width: 26em; }
  .appointment dl { margin: 48px 0 0; display: grid; gap: 20px; font-size: 14px; }
  .appointment dd { margin: 4px 0 0; color: var(--ink); }
  form { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 40px; align-content: start; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field.full { grid-column: 1 / -1; }
  form label { font: 500 10.5px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
  input[type=text], input[type=email], input[type=tel], textarea {
    font: 400 17px/1.5 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid #CFC7BA;
    border-radius: 0; padding: 10px 0; min-height: 48px; width: 100%; transition: border-color .3s var(--ease);
  }
  textarea { resize: vertical; min-height: 96px; }
  input:focus, textarea:focus { outline: none; border-bottom-color: var(--accent); }
  .form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
  .status { font-size: 14px; color: var(--accent); }
  .status.error { color: #9B2C2C; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .privacy { grid-column: 1 / -1; font-size: 13px; color: var(--muted); margin-top: -12px; }
  .link:disabled { opacity: .5; cursor: default; }
  .thanks { display: flex; flex-direction: column; gap: 20px; align-self: center; }
  .thanks h3 { font-size: clamp(32px, 3.4vw, 48px); }
  .thanks p { color: var(--muted); max-width: 30em; }

  /* Page header (inner pages) */
  .page-head { background: var(--ivory); padding: clamp(72px, 10vw, 128px) 0 clamp(56px, 7vw, 88px); }
  .page-head h1 { font-size: clamp(44px, 5.6vw, 80px); margin: 18px 0 20px; }
  .page-head p.intro { color: var(--muted); max-width: 36em; }
  .crumbs { font: 500 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
  .crumbs a:hover { color: var(--accent); }
  .section { padding: clamp(88px, 11vw, 150px) 0; }
  .section.ivory { background: var(--ivory); }
  .section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
  .section-head h2 { font-size: clamp(38px, 4.4vw, 64px); margin-top: 18px; }

  /* Category tiles (home: shop fine jewelry, collections page) */
  .tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .tiles.three { grid-template-columns: repeat(3, 1fr); }
  .tile { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; background: var(--ivory); }
  .tile img { transition: transform 1.6s var(--ease); }
  .tile:hover img { transform: scale(1.04); }
  .tile .over { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; background: rgba(21,24,29,.3); color: #fff; display: flex; flex-direction: column; gap: 4px; }
  .tile .over .label { color: rgba(255,255,255,.92); }
  .tile .over .line { font: 500 italic 19px/1.3 var(--serif); }

  /* Shop */
  .shop-nav { position: sticky; top: 64px; z-index: 10; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--hairline); }
  .shop-nav .wrap { display: flex; gap: 32px; overflow-x: auto; height: 52px; align-items: center; scrollbar-width: none; }
  .shop-nav .link { white-space: nowrap; }
  .shop-nav .link.on { color: var(--accent); }
  .shop-nav .link.on::after { transform: scaleX(1); }
  .shop-section { padding: 88px 0 24px; scroll-margin-top: 116px; }
  .shop-section + .shop-section { border-top: 1px solid var(--hairline); }
  .shop-section h2 { font-size: clamp(34px, 3.8vw, 52px); margin: 14px 0 44px; }
  .products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 24px; }
  .product { display: flex; flex-direction: column; gap: 6px; }
  .product .ph { overflow: hidden; aspect-ratio: 4 / 5; background: var(--ivory); margin-bottom: 16px; }
  .product .ph img { transition: transform 1.6s var(--ease); }
  .product:hover .ph img { transform: scale(1.04); }
  .product h3 { font-size: 24px; color: var(--ink); }
  .product:hover h3 { color: var(--accent); }
  .product .meta { font-size: 13px; color: var(--muted); }
  .product .price { font: 500 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--anchor); margin-top: 8px; }
  .product .amount { font: 500 22px/1.2 var(--serif); color: var(--anchor); margin-top: 8px; letter-spacing: .01em; }
  .product .price-note { font: 500 10px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
  .product .ph.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--ivory); border: 1px solid var(--hairline); }
  .product .ph.empty svg { width: 44px; height: 44px; fill: none; stroke: #B9B0A2; stroke-width: 1; }
  .product .ph.empty span { font: 500 10px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
  .product:hover .ph.empty { border-color: var(--accent); }
  .family + .family { margin-top: 72px; }
  .family-title { font: 500 italic clamp(24px, 2vw, 30px)/1.2 var(--serif); color: var(--anchor); padding-bottom: 14px; margin-bottom: 28px; border-bottom: 1px solid var(--hairline); }
  .products.five { grid-template-columns: repeat(5, 1fr); gap: 40px 20px; }
  .products.five .product h3 { font-size: 21px; }
  .more-brands { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--hairline); font: 500 italic clamp(21px, 1.7vw, 26px)/1.35 var(--serif); color: var(--anchor); }
  .more-brands + .disclaimer { margin-top: 28px; }
  .disclaimer { margin-top: 64px; font-size: 12px; line-height: 1.7; color: var(--muted); max-width: 70em; }
  .disclaimer.credits { margin-top: 12px; font-size: 11px; }
  .disclaimer a { text-decoration: underline; text-underline-offset: 2px; }
  .disclaimer a:hover { color: var(--accent); }

  /* Family legacy */
  .legacy { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 8vw, 140px); align-items: start; }
  .legacy h2 { font-size: clamp(38px, 4.4vw, 64px); margin: 18px 0 28px; }
  .legacy .lead p { color: var(--muted); max-width: 28em; }
  .gens { list-style: none; margin: 0; padding: 0; }
  .gens li { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 32px 0; border-top: 1px solid var(--hairline); }
  .gens li:last-child { border-bottom: 1px solid var(--hairline); }
  .gens .n { font: 500 italic 30px/1 var(--serif); color: var(--accent); }
  .gens h3 { font-size: 26px; margin-bottom: 8px; }
  .gens p { color: var(--muted); font-size: 15px; }

  /* Feature split (custom design teaser, about) */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 120px); align-items: center; }
  .split figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
  .split .copy { display: flex; flex-direction: column; gap: 26px; max-width: 480px; }
  .split h2 { font-size: clamp(38px, 4.4vw, 64px); }
  .split p { color: var(--muted); }

  /* FAQ */
  .faq-layout { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(48px, 7vw, 140px); align-items: start; }
  .faq-intro { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 22px; }
  .faq-intro h2 { font-size: clamp(38px, 4vw, 60px); }
  .faq-intro p:not(.label) { color: var(--muted); max-width: 26em; }
  .faq { display: flex; flex-direction: column; gap: 44px; }
  .faq-group > .label { margin-bottom: 10px; color: var(--accent); }
  .faq details { border-bottom: 1px solid #DDD5C8; }
  .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 17px 0; font: 500 clamp(19px, 1.45vw, 23px)/1.35 var(--serif); color: var(--anchor); transition: color .3s var(--ease); }
  .faq summary::-webkit-details-marker { display: none; }
  /* Fine plus that turns into a minus */
  .faq summary::after { content: ""; flex-shrink: 0; width: 11px; height: 11px;
    background: linear-gradient(currentColor, currentColor) center / 11px 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 11px no-repeat;
    color: var(--muted); transition: transform .4s var(--ease); }
  .faq details[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 11px 1px no-repeat; transform: rotate(180deg); }
  .faq summary:hover { color: var(--accent); }
  .faq details[open] summary { color: var(--accent); }
  .faq .a { padding: 0 40px 22px 0; color: var(--muted); font-size: 15px; line-height: 1.75; max-width: 44em; }
  .faq details[open] .a { animation: faq-open .45s var(--ease); }
  @keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .faq .a a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

  /* Footer */
  footer { padding: 0; }

  /* 1. Visit the house (ivory) */
  .f-contact { background: var(--ivory); border-top: 1px solid var(--hairline); padding: clamp(80px, 9vw, 120px) 0 clamp(72px, 8vw, 104px); text-align: center; }
  .f-contact .f-title { font: 500 clamp(32px, 3.4vw, 46px)/1.15 var(--serif); color: var(--anchor); margin: 16px 0 clamp(48px, 6vw, 72px); }
  .f-contact .f-title em { font-style: italic; letter-spacing: .04em; }
  .contact-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
  .contact-strip > div { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 24px; }
  .contact-strip > div + div { border-left: 1px solid #DCD4C6; }
  .contact-strip .label { letter-spacing: .32em; font-size: 10.5px; }
  .contact-strip .v { font: 500 23px/1.3 var(--serif); color: var(--anchor); min-height: 1.3em; display: flex; align-items: center; }
  .contact-strip .v a { transition: color .3s var(--ease); }
  .contact-strip .v a:hover { color: var(--accent); }
  .contact-strip .v:empty::before { content: ""; display: block; width: 28px; height: 1px; background: #CBC2B3; }
  .contact-strip .note { display: flex; flex-direction: column; gap: 2px; font: 500 italic 16px/1.35 var(--serif); color: var(--muted); letter-spacing: .02em; margin-top: -6px; }

  /* 2. Trust line */
  .f-trust { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 28px; padding: 30px var(--gutter); background: var(--white); border-top: 1px solid var(--hairline); }
  .badge { display: inline-flex; align-items: center; gap: 12px; font: 500 10.5px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--anchor); }
  .badge svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 1.2; flex-shrink: 0; }
  .f-trust .sep { width: 5px; height: 5px; background: var(--accent); opacity: .55; transform: rotate(45deg); }

  /* 3. Closing band (navy) */
  .f-base { background: var(--anchor); color: rgba(255,255,255,.72); text-align: center; padding: clamp(64px, 7vw, 88px) 0 36px; }
  .f-base .f-mark { display: inline-block; font: 600 clamp(18px, 2vw, 28px)/1.2 var(--serif); letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: #fff; }
  .f-base .f-tag { font: 500 italic 19px/1.4 var(--serif); letter-spacing: .03em; color: rgba(255,255,255,.7); margin-top: 18px; }
  .foot-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 44px; margin: 44px 0 0; }
  .f-base .link { color: rgba(255,255,255,.82); }
  .f-base .link:hover, .f-base .link[aria-current] { color: #fff; }
  .f-base .link[aria-current]::after { transform: scaleX(1); }
  .f-base .f-rule { width: 100%; height: 1px; background: rgba(255,255,255,.14); margin: 56px 0 28px; }
  .f-base .f-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
  .f-base :focus-visible { outline-color: #fff; }

  /* Large screens: a touch larger overall so the page fills the view */
  @media (min-width: 1600px) {
    body { font-size: 17.5px; }
    .label, .link, .progress li, .opt .s, form label, .badge, .crumbs { font-size: 12px; }
    .product h3 { font-size: 28px; }
    .product .meta { font-size: 14px; }
    .gens h3 { font-size: 30px; }
    .gens p, .split p, .legacy .lead p, .page-head p.intro { font-size: 18px; }
    .faq .a { font-size: 16px; }
    header .wrap { height: 72px; }
    .wordmark { font-size: 22px; }
    .shop-nav { top: 72px; }
    .shop-section { scroll-margin-top: 124px; }
  }

  @media (max-width: 1024px) {
    .contact-strip { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
    .contact-strip > div:nth-child(3) { border-left: 0; }
    .tiles { grid-template-columns: repeat(3, 1fr); }
    .products, .products.five { grid-template-columns: repeat(3, 1fr); }
    .legacy, .split, .faq-layout { grid-template-columns: 1fr; }
    .faq-intro { position: static; }
  }
  @media (max-width: 700px) {
    .tiles, .tiles.three { grid-template-columns: repeat(2, 1fr); }
    .products, .products.five { grid-template-columns: repeat(2, 1fr); gap: 40px 14px; }
    .products.five .product h3 { font-size: 18px; }
    .product .amount { font-size: 19px; }
    .product h3 { font-size: 20px; }
    .contact-strip { grid-template-columns: 1fr; }
    .contact-strip > div { padding: 26px 0; }
    .contact-strip > div + div { border-left: 0; border-top: 1px solid #DCD4C6; }
    .contact-strip .v { font-size: 21px; }
    .f-trust { flex-direction: column; gap: 14px; }
    .f-trust .sep { display: none; }
    .f-base .f-mark { font-size: 16px; letter-spacing: .18em; padding-left: .18em; }
    .foot-links { gap: 18px 28px; }
    .f-base .f-legal { justify-content: center; text-align: center; }
    .gens li { grid-template-columns: 48px 1fr; gap: 16px; }
  }

  /* Soft fade-up on scroll: content stays visible without JS */
  .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }

  @media (max-width: 1024px) {
    .menu-btn { display: inline-block; }
    header nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--white); border-bottom: 1px solid var(--hairline); padding: 8px var(--gutter) 24px; }
    header nav.open { display: flex; }
    header nav .link { padding: 14px 0; align-self: flex-start; }
    header nav .all { padding-left: 0; border-left: 0; }
    /* Narrow screens: photo on top, words below, so the ring is never covered */
    .hero { flex-direction: column; align-items: stretch; min-height: 0; padding: 0 var(--gutter) 72px; gap: 40px; }
    .hero figure { order: -1; position: relative; width: auto; margin: 0 calc(-1 * var(--gutter)); aspect-ratio: 4 / 3; -webkit-mask-image: none; mask-image: none; }
    .hero .copy { width: auto; }
    .atelier, .appointment .wrap { grid-template-columns: 1fr; }
    .options, .options.dense { grid-template-columns: repeat(3, 1fr); }
    .summary { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .cats { grid-template-columns: 1fr; }
    .cat, .cat.wide { aspect-ratio: 4 / 5; }
    .options { grid-template-columns: 1fr; gap: 36px; }
    .options.dense { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
    .options.dense .opt .t { font-size: 22px; }
    .options.dense .opt .s { letter-spacing: .16em; }
    form, .inquire-fields { grid-template-columns: 1fr; }
    .summary { gap: 28px 20px; }
    .progress { gap: 16px; }
    .progress li:not(.current) { display: none; }
    .wordmark { font-size: 17px; letter-spacing: .34em; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .cat img, .tile img, .product .ph img, .link::after, .opt::after { transition: none; }
    .step.active, .faq details[open] .a { animation: none; }
  }

  /* =====================================================================
     Home, v2 (SDC): logo cover, live spot prices, services,
     products, custom, visit, about. Layout follows the reference site.
     Palette: white / ivory canvas, navy anchor, gold accents. The logo keeps
     its own blue; everything else is navy, white and gold.
     ===================================================================== */
  :root {
    --gold: #C9A24A;           /* the seal's gold: hairlines, dots, icons */
    --gold-text: #86671F;      /* the seal's text gold (#8A6A22), a shade deeper so small text passes on cream: 5.3:1 white, 4.7:1 cream */
    --gold-display: #A5822F;   /* large gold italics in headings (3.6:1, large-text AA) */
    --gold-light: #C9A24A;     /* gold on the black bands (7.5:1) */
    --accent: var(--gold-text);/* the site's one accent / interaction colour */
    --on-dark: rgba(255,255,255,.72);
    --rule-dark: rgba(255,255,255,.12);
  }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  section[id] { scroll-margin-top: 64px; }
  .sub { color: var(--muted); max-width: 36em; }

  /* Buttons: square, hairline, tracked capitals, like the rest of the house */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 28px; border: 1px solid currentColor;
    font: 500 11.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
    transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
  .btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  /* On white: navy, turning to gold lettering on hover */
  .btn.solid, .btn.dark { background: var(--anchor); border-color: var(--anchor); color: #fff; }
  .btn.solid:hover, .btn.dark:hover { background: #000000; border-color: #000000; color: var(--gold-light); }
  .btn.line { color: var(--anchor); border-color: rgba(21,24,29,.28); }
  .btn.line:hover { color: var(--gold-text); border-color: var(--gold); }
  /* On navy: gold, and a white hairline */
  .btn.ghost-light { color: #fff; border-color: rgba(255,255,255,.34); }
  .btn.ghost-light:hover { color: var(--gold-light); border-color: var(--gold-light); }
  .btns { display: flex; flex-wrap: wrap; gap: 12px; }
  .prices :focus-visible { outline-color: var(--gold-light); }

  .live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 12px; border-radius: 50%; background: var(--gold); vertical-align: middle; transform: translateY(-1px); animation: live 2.4s ease-in-out infinite; }
  @keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

  /* 1. Cover: the logo on clean white, with call / directions / about */
  .cover { position: relative; min-height: 100svh; display: flex; flex-direction: column; background: var(--white); color: var(--ink); text-align: center; overflow: hidden; }
  .cover-inner { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(40px, 7vh, 88px) var(--gutter) clamp(32px, 5vh, 56px); }
  /* The SDC seal, then the name set beneath it */
  .cover-title { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: 1; }
  .cover-logo { width: min(380px, 70vw, 38svh); height: auto; filter: none; }
  .cover-name { margin-top: clamp(22px, 3.4vh, 36px); font: 600 clamp(22px, 2.6vw, 40px)/1.1 var(--serif); letter-spacing: .26em; padding-left: .26em; text-transform: uppercase; color: var(--anchor); }
  .cover-sub { display: flex; align-items: center; gap: 16px; margin-top: 14px; font: 600 12px/1 var(--sans); letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: var(--gold-text); }
  .cover-sub::before, .cover-sub::after { content: ""; width: 52px; height: 1px; background: var(--gold); }
  .cover-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(24px, 4.5vh, 48px); }
  .cover-meta { display: flex; align-items: center; gap: 18px; margin-top: clamp(26px, 4vh, 40px); font: 500 11.5px/1 var(--sans); letter-spacing: .42em; padding-left: .42em; text-transform: uppercase; color: var(--gold-text); }
  .cover-tag { margin-top: 16px; max-width: 32em; font: 500 italic clamp(18px, 1.5vw, 22px)/1.5 var(--serif); color: var(--muted); text-wrap: balance; }
  .cover-ticker { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px clamp(24px, 3.4vw, 56px); padding: 18px var(--gutter); border-top: 1px solid var(--hairline);
    font: 500 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); transition: color .3s var(--ease); }
  .cover-ticker:hover { color: var(--anchor); }
  .cover-ticker b { margin-left: 10px; font-weight: 400; letter-spacing: .06em; color: var(--anchor); font-variant-numeric: tabular-nums; }
  .cover-ticker .tk-live { color: var(--gold-text); }
  .js .cover-inner > * { animation: rise 1.1s var(--ease) both; }
  .js .cover-inner > :nth-child(2) { animation-delay: .25s; }
  .js .cover-inner > :nth-child(3) { animation-delay: .4s; }
  .js .cover-inner > :nth-child(4) { animation-delay: .5s; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  /* 2. Live spot prices */
  .prices { background: var(--anchor); color: #fff; padding: clamp(88px, 10vw, 140px) 0; }
  .prices .label { color: var(--gold-light); }
  .prices .live-dot { background: var(--gold-light); }
  .prices h2 em { color: var(--gold-light); }
  .prices-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(44px, 5vw, 64px); }
  .prices h2 { color: #fff; font-size: clamp(38px, 4.4vw, 64px); margin-top: 18px; }
  .prices-head .sub { margin-top: 16px; color: var(--on-dark); font-size: 15px; letter-spacing: .02em; }
  .metal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); }
  .metal { position: relative; display: flex; flex-direction: column; background: var(--anchor); padding: clamp(28px, 3vw, 44px); }
  .metal::before { content: ""; position: absolute; top: -1px; left: clamp(28px, 3vw, 44px); width: 48px; height: 1px; background: var(--gold-light); }
  .metal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
  .metal-name { font: 500 clamp(24px, 2vw, 30px)/1 var(--serif); color: #fff; letter-spacing: .02em; }
  .metal-sym { font: 500 11px/1 var(--sans); letter-spacing: .2em; color: rgba(255,255,255,.5); }
  .metal-price { margin-top: clamp(24px, 3vw, 40px); font: 500 clamp(44px, 4.4vw, 68px)/1.05 var(--serif); color: #fff; font-variant-numeric: lining-nums tabular-nums; transition: color 1.2s var(--ease); }
  .metal-price.tick { color: var(--gold-light); transition: none; }
  .metal-unit { margin-top: 10px; font: 500 10.5px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.58); }
  .metal-gram { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule-dark); font-size: 14px; color: var(--on-dark); font-variant-numeric: tabular-nums; }
  .metal-grid[aria-busy="true"] .metal-price { color: rgba(255,255,255,.28); }
  .prices-status { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 20px; margin-top: 28px; font-size: 13px; color: var(--on-dark); text-align: center; }
  .prices-status a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
  .prices-status .warn { color: #F3C98B; }
  .refresh { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; background: none; border: 0; cursor: pointer;
    font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); transition: color .3s var(--ease); }
  .refresh:hover { color: #fff; }
  .refresh:disabled { cursor: default; opacity: .6; }
  .refresh svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .refresh.spin svg { animation: spin 1s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .prices-note { margin-top: 4px; text-align: center; font-size: 12px; color: rgba(255,255,255,.52); }
  .prices-cta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px 40px; margin-top: clamp(56px, 6vw, 80px); padding-top: 40px; border-top: 1px solid var(--rule-dark); }
  .prices-cta p { font: 500 clamp(22px, 2vw, 28px)/1.35 var(--serif); color: #fff; max-width: 26em; }
  .prices-cta p a { color: var(--gold-light); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color .3s var(--ease); }
  .prices-cta p a:hover { color: #fff; }
  /* Phone and email links inside messages and the footer line: always visibly links */
  .status a { text-decoration: underline; text-underline-offset: 3px; }
  .f-base .f-legal a { transition: color .3s var(--ease); }
  .f-base .f-legal a:hover { color: #fff; }

  /* 3. Services */
  .center-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(56px, 6vw, 80px); }
  .center-head h2 { font-size: clamp(38px, 4.4vw, 64px); margin-top: 18px; }
  .center-head .sub { margin-top: 18px; }
  .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
  .service { display: flex; flex-direction: column; gap: 18px; padding: clamp(36px, 4vw, 56px) clamp(22px, 2.4vw, 40px); }
  .service + .service { border-left: 1px solid var(--hairline); }
  .service .n { font: 500 italic 24px/1 var(--serif); color: var(--accent); }
  .service .ic { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
  .service h3 { font-size: clamp(30px, 2.4vw, 38px); }
  .service p { color: var(--muted); }
  .service .tags { margin-top: auto; padding-top: 12px; font: 500 10.5px/1.7 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--anchor); }
  .service .tags .link { font-size: inherit; }
  .deal { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: clamp(48px, 5vw, 72px) 0 0; padding: 0; }
  .deal li { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px; text-align: center; }
  .deal li + li { border-left: 1px solid var(--hairline); }
  .deal svg { width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
  .deal span { font: 500 clamp(20px, 1.6vw, 24px)/1.2 var(--serif); color: var(--anchor); }

  /* 4. Products */
  .section-head .sub { margin-top: 16px; }
  .tiles.six { grid-template-columns: repeat(3, 1fr); }
  .tiles.six .tile { aspect-ratio: 4 / 5; }
  .tiles.six .tile .over { padding: clamp(20px, 2vw, 32px); }
  .tiles.six .tile .line { font-size: clamp(18px, 1.4vw, 22px); }

  /* 5. Custom (reuses .split) */
  img.own-photo { filter: none; } /* Our own photography: shown true to colour, without the stock-photo grade */
  .split .ctas { display: flex; flex-wrap: wrap; gap: 20px 40px; margin-top: 8px; }
  .steps { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--hairline); }
  .steps li { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--hairline); font: 500 clamp(19px, 1.5vw, 22px)/1.3 var(--serif); color: var(--anchor); }
  .steps span { width: 32px; font-style: italic; color: var(--accent); }

  /* 6. Visit */
  .visit { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(48px, 8vw, 140px); align-items: start; }
  .visit h2 { font-size: clamp(38px, 4.4vw, 64px); margin: 18px 0 32px; }
  .visit address { font: 500 clamp(22px, 1.8vw, 27px)/1.45 var(--serif); font-style: normal; color: var(--anchor); }
  .visit address a:hover, .visit-phone:hover, .visit-email:hover { color: var(--accent); }
  .visit-email { display: block; width: fit-content; margin-top: 8px; font: 500 clamp(19px, 1.5vw, 22px)/1.3 var(--serif); color: var(--anchor); overflow-wrap: anywhere; transition: color .3s var(--ease); }
  .visit-phone { display: inline-block; margin-top: 20px; font: 500 clamp(26px, 2.3vw, 34px)/1.2 var(--serif); color: var(--anchor); letter-spacing: .02em; transition: color .3s var(--ease); }
  .visit .btns { margin-top: 36px; }
  .hours-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; padding-bottom: 14px; }
  .open-status { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
  .open-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
  .open-status.open::before { background: #2F855A; }
  .open-status:empty { display: none; }
  .hours { width: 100%; border-collapse: collapse; border-top: 1px solid #DDD5C8; }
  .hours th, .hours td { padding: 15px 0; border-bottom: 1px solid #DDD5C8; text-align: left; }
  .hours th { font: 500 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
  .hours td { text-align: right; font: 500 clamp(19px, 1.5vw, 22px)/1.3 var(--serif); color: var(--anchor); }
  .hours td.appt { font-style: italic; color: var(--muted); }
  .hours tr.today th, .hours tr.today td { color: var(--accent); }
  .hours tr.today th::after { content: "Today"; margin-left: 14px; padding: 3px 7px 2px; border: 1px solid currentColor; font-size: 9.5px; letter-spacing: .2em; vertical-align: 1px; }
  .hours-note { margin-top: 18px; font-size: 14px; color: var(--muted); }
  .hours-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
  .map { margin-top: clamp(56px, 6vw, 88px); height: clamp(300px, 32vw, 440px); background: var(--white); border: 1px solid var(--hairline); }
  .map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.92) brightness(1.03); }

  /* 7. About */
  .about-facts { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 8px 0 0; padding: 22px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
  .about-facts div { display: flex; flex-direction: column; gap: 8px; }
  .about-facts dd { margin: 0; font: 500 clamp(22px, 1.8vw, 26px)/1.2 var(--serif); color: var(--anchor); }

  /* Cormorant defaults to old-style figures; phone numbers, hours and years read better lining */
  body, .hours td, .visit address, .visit-phone, .about-facts dd, .contact-strip .v, .contact-strip .note, .appointment dd, .product .amount { font-variant-numeric: lining-nums; }
  .contact-strip .v { overflow-wrap: break-word; }
  .contact-strip .v a[href^="mailto:"] { font-size: .88em; }

  /* Footer mark */
  .f-base .f-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 26px; }
  .f-base .f-brand img { width: 132px; height: auto; filter: none; }

  @media (min-width: 1600px) {
    section[id] { scroll-margin-top: 72px; }
    .btn { font-size: 12px; }
    .service p, .split p, .sub { font-size: 18px; }
  }
  @media (max-width: 1200px) {
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .service:nth-child(3) { border-left: 0; }
    .service:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  }
  @media (max-width: 1024px) {
    .visit { grid-template-columns: 1fr; }
    .metal-grid { grid-template-columns: 1fr; }
    .metal { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "top top" "price price" "unit gram"; align-items: end; column-gap: 16px; }
    .metal-top { grid-area: top; } .metal-price { grid-area: price; } .metal-unit { grid-area: unit; }
    .metal-gram { grid-area: gram; margin: 0; padding: 0; border: 0; text-align: right; }
    .tiles.six { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 700px) {
    .cover-actions { flex-direction: column; align-items: stretch; width: min(100%, 340px); gap: 10px; margin-top: 26px; }
    .cover-actions .btn { min-height: 48px; }
    .cover-inner { padding-top: 28px; padding-bottom: 24px; }
    .cover-logo { width: min(232px, 62vw, 30svh); }
    .cover-name { margin-top: 18px; }
    .cover-meta { margin-top: 22px; }
    .cover-ticker { gap: 6px 18px; letter-spacing: .18em; font-size: 10.5px; }
    .cover-ticker .tk-live { flex-basis: 100%; }
    .service-grid { grid-template-columns: 1fr; }
    .service + .service { border-left: 0; border-top: 1px solid var(--hairline); }
    .deal { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
    .deal li:nth-child(4) { border-left: 0; }
    .prices-cta .btns, .visit .btns { flex-direction: column; align-items: stretch; width: 100%; }
    .tiles.six { gap: 6px; }
    .tiles.six .tile .over { padding: 14px; }
    .tiles.six .tile .line { font-size: 16px; }
    .about-facts { flex-direction: column; gap: 18px; }
    .header-call span { display: none; }
  }
  @media (max-width: 420px) {
    .tiles.six { grid-template-columns: 1fr; }
    .tiles.six .tile { aspect-ratio: 4 / 3; }
    .cover-sub::before, .cover-sub::after { width: 22px; }
    .cover-name { font-size: 20px; letter-spacing: .2em; padding-left: .2em; }
  }
  @media (prefers-reduced-motion: reduce) {
    .live-dot, .refresh.spin svg { animation: none; }
    .js .cover-inner > * { animation: none; }
    body.home header, .metal-price { transition: none; }
  }

  /* Gold accents, applied last so they hold everywhere: eyebrow labels, the italic
     word in each heading, numerals, icons and fine rules */
  .label { color: var(--gold-text); }
  h1 em, h2 em, .f-contact .f-title em { color: var(--gold-display); }
  .service .n, .gens .n, .steps span { color: var(--gold-display); }
  .service .ic, .deal svg, .badge svg { stroke: var(--gold); }
  .f-trust .sep { background: var(--gold); opacity: .85; }
  .f-base .f-tag { color: var(--gold-light); }
  .f-base .f-rule { background: rgba(201,162,74,.35); }

  /* Shiny gold: a gold-leaf gradient clipped to the letters, with a soft top light.
     --foil     bright leaf with a champagne highlight: dark bands, fine lines, the gold button
     --foil-ink deeper leaf whose highlight never washes out: gold lettering on white and cream
     Both tile every 260px so short and long lines of text catch the same shine. */
  :root {
    --foil: linear-gradient(90deg, #9C7A2A 0%, #C9A24A 18%, #EBD08A 38%, #FBF0C4 50%, #E2C06A 62%, #B38C33 82%, #9C7A2A 100%);
    --foil-ink: linear-gradient(90deg, #6F5214 0%, #8E6D1F 24%, #B8933B 46%, #CFAB52 52%, #A8842E 68%, #6F5214 100%);
    --foil-sheen: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.06) 100%);
  }
  .label, h1 em, h2 em, .f-contact .f-title em, .service .n, .gens .n, .steps span, .cover-sub, .cover-ticker .tk-live,
  .prices .label, .prices h2 em, .f-base .f-tag {
    background-image: var(--foil-sheen), var(--foil-ink);
    background-size: 100% 100%, 260px 100%; background-repeat: no-repeat, repeat-x;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .prices .label, .prices h2 em, .f-base .f-tag { background-image: var(--foil-sheen), var(--foil); }
  h1 em, h2 em, .f-contact .f-title em { padding-right: .12em; margin-right: -.12em; } /* keeps the italic's last stroke inside the gold */
  .cover-sub::before, .cover-sub::after, .metal::before, .live-dot, .f-trust .sep { background: var(--foil); }
  .f-trust .sep { opacity: 1; }
  .f-base .f-rule { background: var(--foil); opacity: .5; }
  .btn.gold { background-image: var(--foil-sheen), var(--foil); background-size: 100% 100%, 220% 100%; background-position: 0 0, 0 0; background-color: #C9A24A; border-color: #D8B458; color: var(--anchor);
    transition: background-position .9s var(--ease), border-color .3s var(--ease); }
  .btn.gold:hover { background-position: 0 0, 100% 0; border-color: #F2DE9C; } /* the light sweeps across on hover */

  /* Titles in the SDC seal's own typeface: Libre Caslon Text Bold (the seal's "SDC" and
     "WE BUY · SELL · TRADE" are set in it). Italic words use its true italic, never a slanted bold. */
  :root { --display: "Libre Caslon Text", "Cormorant Garamond", Georgia, serif; }
  h1, h2, h3, .metal-name, .family-title, .f-contact .f-title, .wordmark, .cover-name, .f-base .f-mark {
    font-family: var(--display); font-weight: 700; font-synthesis: none;
  }
  h1 em, h2 em, h3 em, .f-contact .f-title em { font-weight: 400; }
  .family-title { font-weight: 400; font-style: italic; }

  /* 404: the seal on clean white, like the cover, with the way back */
  .not-found { display: flex; align-items: center; min-height: 72svh; background: var(--white); text-align: center; }
  .not-found .wrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .nf-seal { width: min(190px, 46vw); height: auto; margin-bottom: clamp(24px, 4vh, 40px); }
  .not-found .intro { margin-inline: auto; text-wrap: balance; }
  .not-found .intro a { color: var(--anchor); border-bottom: 1px solid var(--gold); }
  .not-found .intro a:hover { color: var(--gold-text); }

  /* Watches tile: a slideshow of our own photos that slides on by itself, like the reference site.
     The whole tile stays one link; the arrows and bars sit above it. */
  .carousel .slides { display: flex; height: 100%; transition: transform .9s var(--ease); }
  .carousel .slide { flex: 0 0 100%; min-width: 0; height: 100%; overflow: hidden; }
  .carousel .tile-link { position: absolute; inset: 0; z-index: 1; }
  .carousel .tile-link:focus-visible { outline-color: #fff; outline-offset: -8px; }
  .car-btn { position: absolute; top: 50%; z-index: 2; width: 38px; height: 38px; margin-top: -19px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--gold); background: rgba(255,255,255,.78); color: var(--anchor); cursor: pointer; opacity: 0;
    transition: opacity .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }
  .car-btn.prev { left: 12px; }
  .car-btn.next { right: 12px; }
  .car-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .carousel:hover .car-btn, .car-btn:focus-visible { opacity: 1; }
  .car-btn:hover { background: var(--anchor); color: var(--gold-light); }
  @media (hover: none) { .car-btn { display: none; } } /* phones swipe instead */
  /* Which photo: thin bars at the top, the current one longer and solid */
  .car-dots { position: absolute; top: 8px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; }
  .car-dots button { padding: 10px 3px; border: 0; background: none; cursor: pointer; }
  .car-dots button::before { content: ""; display: block; width: 14px; height: 2px; background: rgba(21,24,29,.3); transition: width .5s var(--ease), background-color .5s var(--ease); }
  .car-dots button[aria-current="true"]::before { width: 28px; background: var(--anchor); }
  .car-dots button:focus-visible { outline-offset: 0; }
  /* Instagram: under the footer links, and in the home page's Visit block */
  .f-base .f-socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 36px; margin-top: 36px; }
  .f-base .f-social { display: inline-flex; align-items: center; gap: 12px; padding: 6px 2px;
    font: 500 12px/1 var(--sans); letter-spacing: .14em; color: rgba(255,255,255,.82); transition: color .3s var(--ease); }
  .f-base .f-social:hover { color: #fff; }
  .f-social svg, .visit-ig svg, .cover-ig svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.4; }
  .cover-ig { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 6px 2px;
    font: 500 12px/1 var(--sans); letter-spacing: .14em; color: var(--anchor); transition: color .3s var(--ease); }
  .cover-ig:hover { color: var(--gold-text); }
  .cover-ig svg { width: 18px; height: 18px; color: var(--gold); }

  /* Cover: the Google rating row under the buttons (like the reference site). Until there are reviews it reads "Review us on Google". */
  .cover-reviews { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; margin-top: clamp(12px, 2vh, 22px); padding: 4px 2px;
    font: 500 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--anchor); transition: color .3s var(--ease); }
  .cover-reviews:hover { color: var(--gold-text); }
  .cover-reviews svg { flex-shrink: 0; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linejoin: round; }
  .cover-reviews > svg { width: 18px; height: 18px; }
  .cover-reviews .stars { position: relative; display: inline-flex; }
  .cover-reviews .stars-bg, .cover-reviews .stars-fg { display: flex; gap: 2px; }
  .cover-reviews .stars-fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--gold); }
  .cover-reviews .stars svg { width: 17px; height: 17px; }
  .cover-reviews b { font: 700 19px/1 var(--display); letter-spacing: 0; color: var(--anchor); }
  .js .cover-inner > :nth-child(5) { animation-delay: .6s; }
  /* Room for the rating row: the seal a touch smaller and the lines a touch closer, so the cover still fits a laptop screen */
  .cover-logo { width: min(380px, 70vw, 36svh); }
  .cover-tag { margin-top: 12px; }
  .cover-ig { margin-top: 10px; }
  @media (max-width: 700px) {
    .cover-logo { width: min(232px, 62vw, 30svh); }
    .cover-reviews { margin-top: 14px; }
    .cover-tag { margin-top: 8px; }
    .cover-ig { margin-top: 4px; }
  }
  .f-base .f-social svg { color: var(--gold-light); }
  .visit-ig { display: flex; align-items: center; gap: 10px; }
  .visit-ig svg { width: 18px; height: 18px; color: var(--gold); }

  /* With reduced motion the photos don't slide; they fade softly from one to the next */
  @media (prefers-reduced-motion: reduce) {
    .carousel .slides { transition: opacity .3s ease; }
    .car-dots button::before { transition: none; }
  }