/* Big Sky Timepieces — brand styles */
:root {
  --navy: #0a1141;          /* darkest backdrop, derived from logo blue */
  --royal: #0c1a65;         /* EXACT blue sampled from BS LOGO 2.PNG background */
  --royal-mark: #101960;    /* EXACT blue sampled from BS LOGO.jpg (monogram) background */
  --royal-2: #16247f;       /* slightly lighter royal for accents */
  --gold: #c9ad7b;          /* EXACT average gold sampled from logo lettering */
  --gold-bright: #e6cf9c;
  --gold-deep: #93743c;
  --ivory: #ffffff;
  --text: #e9e7f5;
  --muted: #a9a9c4;
  --card: #101a58;
  --line: rgba(201, 173, 123, 0.35);
  /* Background cream is its own token. --ivory gets re-pointed to navy inside
     light sections so headings flip automatically; a section background must
     not follow it, or a light section would paint itself dark. */
  --cream: #ffffff;
  --panel: rgba(255, 255, 255, .02);
  --panel-line: rgba(201, 173, 123, .25);
  --field: #0d1440;
  --shadow-lift: 0 18px 40px rgba(0, 0, 0, .45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  overflow-x: clip;   /* clip rather than hidden: hidden would make body a scroll
                         container and break the sticky header */
  font-family: 'Jost', 'Segoe UI', sans-serif;
  background: var(--navy);
  color: var(--text);
  line-height: 1.65;
  font-size: 16.5px;
}

h1, h2, h3, h4 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; color: var(--ivory); line-height: 1.2; }
.script { font-family: 'Great Vibes', cursive; font-weight: 400; color: var(--gold-bright); }

a { color: var(--gold-bright); text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Gold gradient text + logo lockup (recreates the brand logo in webfont) */
.goldtext {
  background: linear-gradient(180deg, #f6e2a2 0%, #e8c877 30%, #c9a44c 62%, #8c6a1f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.45));
}
.brand .mark { font-family: 'Great Vibes', cursive; font-size: 2.3rem; line-height: 1; padding-right: 2px; }
.logo-lockup { user-select: none; margin-bottom: 26px; }
.logo-lockup .monogram { font-family: 'Great Vibes', cursive; font-size: clamp(4.2rem, 9vw, 6.4rem); line-height: 1; }
.logo-lockup .wordmark { font-family: 'Great Vibes', cursive; font-size: clamp(2.3rem, 5.5vw, 3.6rem); line-height: 1.15; margin-top: 4px; }


/* ---------- Rotating trust bar, above everything ---------- */
.announce {
  background: #060b22;
  border-bottom: 1px solid rgba(201,173,123,.16);
  overflow: hidden;
}
.announce .rail { position: relative; height: 40px; }
.announce a {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  color: var(--gold); font-family: 'Jost', sans-serif;
  font-size: .74rem; letter-spacing: .17em; text-transform: uppercase;
  opacity: 0; transform: translateY(9px);
  animation: annCycle 13.5s cubic-bezier(.22,1,.36,1) infinite;
  transition: color .25s ease;
  /* All three messages are stacked in the same box, so without this the topmost
     one swallows every click and the banner always went to the same page.
     The keyframes hand the hit area to whichever message is actually visible. */
  pointer-events: none;
}
.announce a:hover { color: var(--gold-bright); }
.announce a:nth-child(1) { animation-delay: 0s; }
.announce a:nth-child(2) { animation-delay: 4.5s; }
.announce a:nth-child(3) { animation-delay: 9s; }
.announce svg { width: 15px; height: 15px; flex: none; opacity: .9; }
.announce b { font-weight: 500; color: var(--gold-bright); }
/* 13.5s over three phrases = a 4.5s slot each, one second longer than before.
   The 0.42s fade in and out are unchanged, so the extra second all goes to the
   time the phrase sits still and readable: 2.63s -> 3.63s. */
@keyframes annCycle {
  0%     { opacity: 0; transform: translateY(9px);  pointer-events: none; }
  3.1%   { opacity: 1; transform: translateY(0);    pointer-events: auto; }
  30%    { opacity: 1; transform: translateY(0);    pointer-events: auto; }
  33.1%  { opacity: 0; transform: translateY(-9px); pointer-events: none; }
  100%   { opacity: 0; transform: translateY(-9px); pointer-events: none; }
}
@media (max-width: 620px) {
  .announce .rail { height: 36px; }
  .announce a { font-size: .63rem; letter-spacing: .12em; gap: 8px; padding: 0 12px; text-align: center; }
  .announce svg { width: 13px; height: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .announce a { animation: none; opacity: 0; transform: none; pointer-events: none; }
  .announce a:nth-child(1) { opacity: 1; pointer-events: auto; }
}



/* Footer social icons */
.fsocial { display: flex; gap: 26px; margin-top: 22px; }
.fsocial a {
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); transition: color .25s ease, transform .25s ease;
}
.fsocial a:hover { color: var(--gold-bright); transform: translateY(-3px); }
.fsocial svg { width: 30px; height: 30px; }

/* Chrono24 dealer link — typographic, hairline rule, no frame */
.c24-badge {
  display: inline-flex; align-items: stretch; gap: 14px;
  margin-top: 28px; color: var(--gold);
  transition: color .3s ease;
}
.c24-badge:hover { color: var(--gold-bright); }
.c24-rule {
  flex: none; width: 1px; align-self: stretch;
  background: linear-gradient(180deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
  opacity: .55; transition: opacity .3s ease;
}
.c24-badge:hover .c24-rule { opacity: 1; }
.c24-txt { display: flex; flex-direction: column; line-height: 1.15; }
.c24-kicker {
  font-family: 'Jost', sans-serif; font-size: .63rem; font-weight: 400;
  letter-spacing: .19em; text-transform: uppercase; color: var(--muted);
  transition: color .3s ease;
}
.c24-badge:hover .c24-kicker { color: var(--gold); }
.c24-name {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Jost', sans-serif; font-size: 1.14rem; font-weight: 600;
  letter-spacing: .045em; margin-top: 5px;
}
.c24-name > span { font-weight: 600; }
.c24-arrow {
  width: 13px; height: 13px; opacity: 0;
  transform: translate(-4px, 3px);
  transition: opacity .3s ease, transform .3s ease;
}
.c24-badge:hover .c24-arrow { opacity: .9; transform: translate(0, 0); }

/* Footer legal link row */
.flegal-links {
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center;
  padding: 22px 0 18px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 30px;
}
.flegal-links a { color: var(--muted); font-size: .82rem; letter-spacing: .05em; }
.flegal-links a:hover { color: var(--gold-bright); }

/* Legal page prose */
.legal-page { max-width: 820px; margin: 0 auto; }
.legal-page h3 {
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: 1.05rem;
  color: var(--gold-bright); letter-spacing: .08em; text-transform: uppercase;
  margin: 38px 0 12px;
}
.legal-page p, .legal-page li { color: var(--text); font-size: 1rem; line-height: 1.75; margin-bottom: 14px; }
.legal-page ul { margin: 0 0 18px 22px; }
.legal-page .updated { color: var(--muted); font-size: .88rem; font-style: italic; }

/* Header */
header.site {
  background: var(--royal-mark); /* flat exact logo blue so the monogram image blends seamlessly */
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
/* Three-column grid rather than space-between: the brand keeps the left, the
   links sit dead centre in the row, and the empty right column balances them so
   the centre is the true centre of the header, not the centre of what's left. */
.nav {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 14px 0; gap: 20px;
}
.nav .brand { justify-self: start; }
.nav nav.links { justify-self: center; }
.nav .nav-toggle { justify-self: end; grid-column: 3; }
/* The monogram and wordmark are baked into a single lockup image, aligned on
   their ink centrelines at build time. Two separate images centred by CSS kept
   drifting, because each one carries a different amount of drop shadow below
   the artwork and the box centre is therefore not the optical centre. One
   image means there is nothing left to misalign. */
.brand { display: flex; align-items: center; }
.brand img.lockup { height: 58px; width: auto; flex: none; }
/* Ten items now — never let the row wrap into a ragged second line; it either
   fits on one line or collapses to the menu button. */
nav.links { display: flex; gap: 42px; align-items: center; flex-wrap: nowrap; }
/* :not(.btn) so the Contact button keeps its own full box — the underline
   rule used to override its bottom border and only reveal it on hover */
nav.links a:not(.btn) {
  color: var(--text); font-size: .95rem; letter-spacing: .04em;
  padding: 4px 0;
}
/* Directional underline: on hover the rule grows from the left edge; on
   release it retracts to the right rather than rewinding. Every label is
   wrapped in a span so the rule is exactly as wide as the text. */
nav.links a:not(.btn) > span { position: relative; display: inline-block; }
nav.links a:not(.btn) > span::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
nav.links a:not(.btn):hover > span::after,
nav.links a:not(.btn):focus-visible > span::after {
  transform: scaleX(1); transform-origin: left center;
}
nav.links a:not(.btn):hover { color: var(--gold-bright); }
nav.links a:not(.btn).active { color: var(--gold-bright); }
nav.links a:not(.btn).active > span::after { transform: scaleX(1); transform-origin: left center; }
nav.links a.btn { border: 1px solid var(--gold); }
nav.links a.btn:hover { border-color: var(--gold-bright); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--gold-bright); font-size: 1.4rem; padding: 2px 12px; border-radius: 4px; cursor: pointer; }


/* ---------- Dropdown navigation ---------- */
.navgroup { position: relative; }
.navtop {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 0;
}
/* opening the menu holds the underline out, same wipe as a plain hover */
.navgroup:hover .navtop > span::after,
.navgroup:focus-within .navtop > span::after,
.navtop.active > span::after { transform: scaleX(1); transform-origin: left center; }
.navgroup:hover .navtop, .navtop.active { color: var(--gold-bright); }
.navtop svg { width: 11px; height: 11px; opacity: .5; transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.navgroup:hover .navtop svg, .navgroup:focus-within .navtop svg { transform: rotate(180deg); opacity: .95; }

.navmenu {
  position: absolute; top: 100%; left: 50%;
  /* hug the longest label plus its padding instead of holding a fixed width,
     which was leaving a large empty gutter on the two-item menus */
  width: max-content; min-width: 178px; padding: 14px 0 12px; margin-top: 20px;
  background: linear-gradient(178deg, #0d1747 0%, #080e2f 100%);
  border: 1px solid rgba(201,173,123,.24);
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.03) inset;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .38s cubic-bezier(.16,1,.3,1), transform .38s cubic-bezier(.16,1,.3,1), visibility .38s;
  z-index: 60;
}
/* hairline of gold across the top edge, and a small pointer up to the tab */
.navmenu::after {
  content: ''; position: absolute; top: -1px; left: 22px; right: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.navmenu::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.navgroup:hover .navmenu, .navgroup:focus-within .navmenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
/* Items sit a step down in size from the tabs above them, sentence case so the
   caps-plus-tracking treatment doesn't read heavier than the nav itself.
   The selector carries .navgroup purely to outrank `nav.links a:not(.btn)`
   above, which is (0,2,2) and was otherwise winning the padding and pinning
   these labels flat against the left edge of the panel. */
nav.links .navgroup .navmenu a {
  position: relative; display: block; padding: 11px 30px; white-space: nowrap;
  font-family: 'Jost', sans-serif; font-size: .85rem; font-weight: 400;
  letter-spacing: .02em; color: var(--text); border: 0 !important;
  transition: color .28s ease;
}
.navmenu a > span { position: relative; display: inline-block; }
.navmenu a > span::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.navmenu a:hover > span::after, .navmenu a:focus-visible > span::after {
  transform: scaleX(1); transform-origin: left center;
}
.navmenu a:hover, .navmenu a:focus-visible { color: var(--gold-bright); }
.navmenu a.here { color: var(--gold); }
.navmenu a.here > span::after { transform: scaleX(1); transform-origin: left center; opacity: .45; }


/* ---------- Animated text-link underline ----------
   The rule is painted as a background image rather than a border, because a
   background repeats correctly across line boxes — an absolutely positioned
   pseudo-element only tracks the first fragment, so it breaks on links that
   wrap. Anchoring the size to the right edge at rest and the left edge on hover
   makes it wipe in from the left and retract to the right on release, matching
   the navigation. The faint resting underline stays, so links are still
   identifiable as links before you touch them. */
p a:not(.btn), li a:not(.btn), td a:not(.btn),
.lead-max a, .prose a, .legal-page a, .acc-body a, .sec-head a,
.rvinner a, .faq-empty a, .avail-empty a, .hero p a:not(.btn),
footer.site a:not(.btn),
.trustbadge .promise a, .ccard a, .score a, a.glink {
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  /* y must stay inside the box: calc(100% + 1px) resolves to (H - 1) + 1 = H,
     which is the bottom edge, and backgrounds are clipped to the border box —
     so the line was drawn just outside it and thrown away. 100% sits it on the
     inner edge of the 3px padding, clear of the descenders. */
  background-position: 100% 100%;
  background-size: 0% 1px;
  transition: background-size .45s cubic-bezier(.22, 1, .36, 1),
              background-position .45s cubic-bezier(.22, 1, .36, 1),
              color .3s ease, border-color .3s ease;
}
p a:not(.btn):hover, li a:not(.btn):hover, td a:not(.btn):hover,
.lead-max a:hover, .prose a:hover, .legal-page a:hover, .acc-body a:hover,
.sec-head a:hover, .rvinner a:hover, .faq-empty a:hover, .avail-empty a:hover,
.hero p a:not(.btn):hover,
footer.site a:not(.btn):hover,
.trustbadge .promise a:hover, .ccard a:hover, .score a:hover, a.glink:hover {
  background-position: 0% 100%;
  background-size: 100% 1px;
}
/* Not text links, so they stay out of it:
   .brand is the logo image; .announce a and .acc a.row are full-bleed block
   rails, where a text-width underline would stretch the entire row; .fsocial is
   an icon row; .c24-badge, .brands and the nav have their own hover treatments. */
/* nav.links a is scoped :not(.btn): the blanket background-image:none was also
   erasing the gold gradient fill on the nav's Contact button, since a CSS
   gradient background IS a background-image — which left near-black text
   sitting straight on the navy header. */
.brand, .announce a, .fsocial a, .c24-badge, .brands a,
nav.links a:not(.btn), .navmenu a, .faq-nav a, .brandlist a, .acc a.row,
.igpop a:not(.btn) {
  background-image: none !important;
}

/* Contact sized as a nav element, not a page CTA */
nav.links a.btn.nav-contact {
  padding: 9px 22px !important; font-size: .78rem;
  letter-spacing: .14em;
}

/* ---------- Floating authenticity seal ---------- */
.trustbadge {
  position: fixed; left: 24px; bottom: 26px; z-index: 90;
  display: flex; align-items: center; cursor: pointer; outline: none;
  /* No right padding and equal side margins on the seal, so collapsed the badge
     is a true 104x104 circle with the shield dead centre. The label supplies its
     own trailing space when it expands. */
  height: 104px; padding: 0; border-radius: 52px;
  background: linear-gradient(160deg, rgba(18,29,96,.96), rgba(8,13,42,.96));
  border: 1px solid rgba(201,173,123,.42);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 6px rgba(201,173,123,.05);
  backdrop-filter: blur(8px);
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.trustbadge::before {
  content: ''; position: absolute; inset: 5px; border-radius: 47px;
  border: 1px solid rgba(201,173,123,.16); pointer-events: none;
}
.trustbadge:hover, .trustbadge:focus-visible {
  border-color: var(--gold); transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 0 6px rgba(201,173,123,.09);
}
.trustbadge .seal {
  width: 72px; height: 72px; margin: 0 16px; color: var(--gold); flex: none;
  transition: color .4s ease, filter .4s ease;
}
.trustbadge:hover .seal { color: var(--gold-bright); filter: drop-shadow(0 0 7px rgba(230,207,156,.5)); }
.trustbadge .lbl {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-family: 'Jost', sans-serif; font-size: 1rem; letter-spacing: .19em;
  text-transform: uppercase; opacity: 0;
  transition: max-width .55s cubic-bezier(.16,1,.3,1), opacity .35s ease, padding-right .55s cubic-bezier(.16,1,.3,1);
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold) 38%, #fff3d4 47%,
    #ffffff 50%, #fff3d4 53%, var(--gold) 62%, var(--gold) 100%);
  background-size: 260% 100%; background-position: 130% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: authShimmer 3.4s linear infinite;
}
.trustbadge:hover .lbl, .trustbadge:focus-within .lbl,
.trustbadge.open .lbl { max-width: 290px; opacity: 1; padding-right: 30px; }
.trustbadge .promise {
  position: absolute; left: 0; bottom: calc(100% + 16px); width: min(370px, calc(100vw - 60px));
  background: linear-gradient(178deg, #0d1747 0%, #080e2f 100%);
  border: 1px solid rgba(201,173,123,.4); padding: 24px 26px;
  box-shadow: 0 34px 70px rgba(0,0,0,.6); text-align: left; cursor: default;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1), visibility .4s;
}
/* Hover bridge. The panel floats 16px above the badge, and that gap belongs to
   neither element — so moving the pointer up toward the link left both hover
   targets and the panel vanished before it could be clicked. This fills the gap
   as a child of the panel, so crossing it keeps the badge in :hover. */
.trustbadge .promise::before {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -20px; height: 22px;
}
.trustbadge .promise::after {
  content: ''; position: absolute; top: -1px; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* `.open` is toggled by a click so the panel can be dismissed by tapping the
   badge again — on a touch screen there is no hover to move away from. */
.trustbadge:hover .promise, .trustbadge:focus-within .promise,
.trustbadge.open .promise {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.trustbadge .promise { pointer-events: none; }
.trustbadge:hover .promise, .trustbadge.open .promise { pointer-events: auto; }
/* no hover on touch: the click toggle is the only path, so don't half-open */
@media (hover: none) {
  /* :focus-within has to be neutralised here as well as :hover. The badge is
     focusable, so a tap leaves focus on it — and the focus rule then held the
     pill open after .open had already been removed, which is why the panel shut
     but the badge stayed stretched. */
  .trustbadge:hover .promise,
  .trustbadge:focus-within .promise { opacity: 0; visibility: hidden; pointer-events: none; }
  .trustbadge:hover .lbl,
  .trustbadge:focus-within .lbl { max-width: 0; opacity: 0; padding-right: 0; }
  .trustbadge.open .promise,
  .trustbadge.open:focus-within .promise { opacity: 1; visibility: visible; pointer-events: auto; }
  .trustbadge.open .lbl,
  .trustbadge.open:focus-within .lbl { max-width: 290px; opacity: 1; padding-right: 30px; }
}
.trustbadge .promise strong {
  display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.42rem;
  color: var(--gold-bright); font-weight: 600; margin-bottom: 11px; letter-spacing: .01em;
}
.trustbadge .promise p { color: var(--text); font-size: .89rem; line-height: 1.75; margin-bottom: 15px; }
.trustbadge .promise a {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Jost', sans-serif; font-size: .7rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--gold);
  padding-bottom: 2px;
  transition: color .25s ease;
}
.trustbadge .promise a:hover { color: var(--gold-bright); }
@media (max-width: 620px) {
  /* one block, not three: the old 46px rule was still overriding height here */
  .trustbadge { height: 76px; border-radius: 38px; left: 16px; bottom: 18px; padding: 0; }
  .trustbadge::before { inset: 4px; border-radius: 34px; }
  .trustbadge .seal { width: 54px; height: 54px; margin: 0 11px; }
  /* 11+54+11 of chrome plus 30 of trailing pad, so the label gets whatever is
     left of the screen minus the 16px inset on each side */
  .trustbadge .lbl { font-size: .82rem; }
  /* :focus-within deliberately absent — it appears later in the file than the
     touch overrides, so leaving it here would re-expand the pill on a phone
     after the panel had closed. */
  .trustbadge:hover .lbl, .trustbadge.open .lbl {
    max-width: min(290px, calc(100vw - 138px)); text-overflow: ellipsis;
  }
  .trustbadge .promise { width: calc(100vw - 34px); padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .trustbadge .lbl { animation: none; -webkit-text-fill-color: var(--gold); color: var(--gold); }
}

/* Buttons — square-cut, engraved feel */
.btn {
  display: inline-block; padding: 14px 34px; border-radius: 0;
  font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  transition: all .25s ease; cursor: pointer; border: 1px solid var(--gold);
}
/* One gold button, identical on every background. The values are literal rather
   than tokens on purpose: --gold and --gold-bright get re-pointed to the deep
   golds inside light sections for text legibility, and mixing the gradient from
   them turned the button olive there. */
.btn-gold {
  background: linear-gradient(180deg, #e6cf9c 0%, #c9ad7b 100%);
  color: #1a1508; font-weight: 600; border: 1px solid #b08c4d;
}
.btn-gold:hover {
  background: linear-gradient(180deg, #f0dcb2 0%, #d3b98a 100%);
  border-color: #93743c; transform: translateY(-1px);
}
.btn-ghost { background: transparent; color: var(--gold-bright); }
.btn-ghost:hover { background: rgba(201,164,76,.12); }

/* Hero — flat exact logo blue, framed like an engraved invitation */
.hero {
  background: #0a1141; /* shows only until the video paints */
  text-align: center; padding: 92px 24px 104px;
  position: relative;
}
.hero { overflow: hidden; }
.hero > * { position: relative; z-index: 2; }
.hero video.bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: brightness(.94) contrast(1.06) saturate(.95);
  transform: none;
}
.hero .veil {
  /* Dark scrim, in the Lookout Watch Company idiom: the footage stays fully
     visible but is pushed down in luminance so light type sits cleanly on it.
     Tinted with the brand navy rather than neutral black so it reads as part of
     the palette. Heavier top and bottom — the top carries the sticky header,
     the bottom carries the buttons — and a touch more weight behind the copy. */
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(66% 62% at 50% 47%,
      rgba(4, 8, 22, .34) 0%,
      rgba(4, 8, 22, .18) 62%,
      rgba(4, 8, 22, 0) 100%),
    linear-gradient(180deg,
      rgba(4, 8, 22, .60) 0%,
      rgba(4, 8, 22, .34) 26%,
      rgba(4, 8, 22, .30) 60%,
      rgba(4, 8, 22, .58) 100%);
}
/* logo-full-cut.png is the artwork with the baked shadow removed.
   The backdrop here is near-black, so a shadow has almost nothing to darken —
   that is why the old baked one was invisible and why more of it barely helped.
   There is plenty of headroom to brighten though, so the separation comes from a
   warm rim light: 2px tight at 48% plus a soft 10px at 24%, in the brand gold.
   On metallic artwork that reads as the gold catching a light source rather than
   as a glow effect. The two dark stops after it keep the mark grounded so it
   doesn't float. Order matters — CSS chains these, each casting from the
   previous one's output, so the rim is laid down first and the shadows are then
   cast from glyph-plus-rim. */
.hero img.logo {
  max-width: 500px; width: 84%; margin: 0 auto 14px;
  filter: drop-shadow(0 0 2px rgba(230,207,156,.48))
          drop-shadow(0 0 10px rgba(230,207,156,.24))
          drop-shadow(0 6px 12px rgba(0,0,0,.60))
          drop-shadow(0 18px 34px rgba(0,0,0,.40));
}
.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 14px; color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.hero p.lead {
  max-width: 640px; margin: 0 auto 30px; color: rgba(255,255,255,.94); font-size: 1.12rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.hero .cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* ghost button has to flip dark on the cream hero */
.hero .btn-ghost { color: #ffffff; border-color: rgba(255,255,255,.75); text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.16); color: #ffffff; border-color: #fff; }

/* Sections — strongly alternating backdrops */
/* flow-root establishes a block formatting context. Without it, a section whose
   padding-top is 0 lets its first child's top margin (the grids carry 40-44px)
   collapse straight through, shoving the section down and exposing the navy
   body behind it as a stray blue band. */
section.block { padding: 88px 0; display: flow-root; }
/* Where two cream sections run together they are one block of content, not two.
   Drop the second one's top padding so there is no seam or doubled gutter. */
section.light + section.light { padding-top: 0; }
section.alt {
  background: var(--royal);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* ---------- Light (cream) sections ----------
   Rather than override each component one at a time, the whole palette is
   re-pointed on the section. Anything downstream that draws with a token
   flips automatically; only surfaces with literal fills need help below. */
section.light {
  background: var(--cream);
  --ivory: #141b4d;                    /* headings and emphasis */
  --text: #4c4c58;                     /* body copy */
  --muted: #7c786e;                    /* secondary copy */
  --gold: var(--gold-deep);            /* pale gold is illegible on cream */
  --gold-bright: #6f5628;
  --line: rgba(147,116,60,.34);
  --card: #ffffff;
  --panel: #ffffff;
  --panel-line: rgba(147,116,60,.26);
  --field: #ffffff;
  --shadow-lift: 0 18px 40px rgba(20,27,77,.13);
  color: var(--text);
}
section.light h2.title, section.light h3 { color: #141b4d; }
section.light .kicker { color: var(--gold-deep); }
section.light .lead-max, section.light p { color: #4c4c58; }
/* links were gold-on-cream and unreadable */
section.light a:not(.btn):not(.row):not(.brands a) { color: var(--gold-deep); border-bottom: 0; }
section.light a:not(.btn):not(.row):not(.brands a):hover { color: #6f5628; }

/* Surfaces: panels need a real fill plus a soft cast shadow, because the
   translucent-white trick reads as nothing on a cream backdrop. */
section.light .ccard,
section.light .trust .item,
section.light .review,
section.light .avail-empty,
section.light .brands span,
section.light .brands a {
  background: #fff; border-color: rgba(147,116,60,.26);
  box-shadow: 0 4px 18px rgba(20,27,77,.07);
}

/* ---- Listing cards on cream ----
   White on cream barely separates, so a listing is framed in gold and its
   text half carries the brand navy. The body is a dark island inside a light
   section, so the palette is switched back to the dark set inside it and
   every component that was re-skinned for cream is returned to normal. */
section.light .card {
  background: transparent;
  border: 1px solid var(--gold-deep);
  box-shadow: 0 8px 26px rgba(20,27,77,.09);
}
section.light .card:hover {
  border-color: #b08c4d;
  box-shadow: 0 18px 44px rgba(20,27,77,.17);
}
section.light .card .body {
  background: linear-gradient(180deg, #17257f 0%, #0e1a63 100%);
  --ivory: #ffffff;
  --text: #e9e7f5;
  --muted: #b3b2cb;
  --gold: #c9ad7b;
  --gold-bright: #e6cf9c;
  --line: rgba(201,173,123,.35);
  color: var(--text);
}
section.light .card .body h3 { color: var(--ivory); }
section.light .card .body p { color: var(--text); }
section.light .card .ph { background: var(--royal-mark); }
section.light .card .ph2 { border-bottom: 1px solid var(--gold-deep); }
/* Badges and buttons sit on navy again inside the card, not on cream.
   These chips are given solid fills rather than the translucent washes used
   elsewhere, so they never depend on what happens to be painted underneath. */
section.light .card .badge.avail { background: #26348f; color: #e6cf9c; border-color: rgba(201,173,123,.45); }
section.light .card .badge.sold  { background: #16215f; color: #b9b8d0; border-color: rgba(255,255,255,.16); }
section.light .card .btn-ghost { color: #e6cf9c; border-color: #c9ad7b; background: transparent; }
section.light .card .btn-ghost:hover { background: rgba(201,164,76,.14); color: #f3e3bd; }
section.light .card .btn-gold {
  background: linear-gradient(180deg, #e6cf9c, #c9ad7b); color: #1a1508;
  border-color: #c9ad7b; box-shadow: none; font-weight: 600;
}
section.light .card .btn-gold:hover { filter: brightness(1.07); background: linear-gradient(180deg, #e6cf9c, #c9ad7b); color: #1a1508; }
/* standalone badges still on cream (outside a card) keep the light treatment */
section.light .badge.avail { background: rgba(147,116,60,.11); color: #6f5628; border-color: rgba(147,116,60,.34); }
section.light .badge.sold { background: #f1f1f1; color: #63636b; border-color: rgba(147,116,60,.3); }
section.light .step { border-left-color: var(--gold-deep); }
section.light .avail-empty::before { border-color: rgba(147,116,60,.22); }

/* Form controls invert to white fields with dark text */
section.light input,
section.light select,
section.light textarea {
  background: #fff; border-color: rgba(147,116,60,.42); color: #23283f;
}
section.light input::placeholder, section.light textarea::placeholder { color: #9b968a; }
section.light input:focus, section.light select:focus, section.light textarea:focus {
  border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(147,116,60,.13);
}
section.light label { color: var(--gold-deep); }

/* the ghost outline needs a dark label on a light background */
section.light .btn-ghost { color: #141b4d; border-color: var(--gold-deep); background: transparent; }
section.light .btn-ghost:hover { background: rgba(147,116,60,.12); color: #141b4d; }

/* Accordions and the FAQ search field */
section.light .acc .mname, section.light .brandlist .bname { color: #141b4d; }
/* .faq-tools is not inside a section; it is skinned directly above. */
section.light #faqSearch { background: #fff; border-color: rgba(147,116,60,.4); color: #23283f; }
section.light #faqSearch::placeholder { color: #9b968a; }
section.light #faqSearch:focus { background: #fff; box-shadow: 0 0 0 3px rgba(147,116,60,.14); }
section.light .faq-sec .acc-body strong,
section.light .faq-sec .acc-body a { color: #6f5628; }
section.light .scrub-hint { color: #7c786e; }
section.light .scrub-bars span { background: rgba(147,116,60,.25); }
section.light .scrub-bars span.on { background: var(--gold-deep); }
.band.light a:not(.btn) { color: var(--gold-deep); border-bottom: 0; }
.band.light a:not(.btn):hover { color: #6f5628; }
.kicker {
  color: var(--gold); text-transform: uppercase; letter-spacing: .26em; font-size: .78rem; margin-bottom: 14px;
}
.center .kicker, .kicker.center {
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.center .kicker::before, .center .kicker::after, .kicker.center::before, .kicker.center::after {
  content: ''; height: 1px; width: 52px; flex: none;
}
.center .kicker::before, .kicker.center::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.center .kicker::after, .kicker.center::after { background: linear-gradient(90deg, var(--gold), transparent); }
h2.title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom: 20px; font-weight: 600; letter-spacing: .01em; }
.center { text-align: center; }
.lead-max { max-width: 760px; margin: 0 auto; }

/* Cinematic full-bleed video band */
.cinema {
  position: relative; overflow: hidden; text-align: center;
  padding: 130px 24px;
  border-top: 1px solid var(--line);
}
.cinema video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: brightness(.38) saturate(.9);
}
.cinema::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,17,65,.55), rgba(12,26,101,.35) 50%, rgba(10,17,65,.7));
}
.cinema .inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.cinema h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; }
.cinema p { color: var(--text); font-size: 1.1rem; margin-bottom: 30px; }
.cinema .kicker { display: flex; align-items: center; justify-content: center; gap: 16px; }
.cinema .kicker::before, .cinema .kicker::after { content:''; height:1px; width:52px; flex:none; }
.cinema .kicker::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.cinema .kicker::after { background: linear-gradient(90deg, var(--gold), transparent); }

/* Trust strip */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; margin-top: 40px; }
.trust .item { border: 1px solid var(--line); border-radius: 0; border-top: 2px solid var(--gold); padding: 30px 24px; background: var(--panel); text-align: center; }
.trust .item .ico { display: flex; justify-content: center; margin-bottom: 14px; }
.trust .item .ico svg { width: 32px; height: 32px; color: var(--gold); }
.trust .item h3 { font-size: 1.15rem; margin-bottom: 6px; color: var(--gold-bright); font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: .05em; }
.trust .item p { font-size: .92rem; color: var(--muted); }

/* Brand chips */
.brands { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.brands span, .brands a {
  display: inline-block;
  border: 1px solid var(--line); padding: 9px 22px; border-radius: 30px;
  font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; color: var(--ivory);
  background: var(--panel);
  transition: all .2s ease;
}
.brands a:hover { border-color: var(--gold-bright); color: var(--gold-bright); background: rgba(201,173,123,.1); }

/* Watch grid */
/* min() so the track can shrink below 280px on a 320px phone. A bare
   minmax(280px,1fr) floors the column at 280px, which is wider than the 272px
   of content space there — that overflow is what makes a phone zoom out. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 28px; margin-top: 44px; }
.card {
  background: var(--card); border: 1px solid var(--panel-line); border-radius: 0;
  overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--gold); }
.card .ph {
  aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--royal-mark); /* flat exact logo blue behind the monogram image */
  border-bottom: 1px solid var(--line); gap: 10px;
}
.card .ph .mono { font-family: 'Great Vibes', cursive; font-size: 3.4rem; color: var(--gold); opacity: .9; }
.card .ph img { width: 110px; }
.card .ph2 {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: #ffffff; border-bottom: 1px solid var(--line);
}
.card .ph2 img { width: 84%; height: 84%; object-fit: contain; }
.line-head { margin-top: 54px; }
.line-head:first-of-type { margin-top: 0; }
.card .ph small { color: var(--muted); letter-spacing: .15em; text-transform: uppercase; font-size: .68rem; }
.card { display: flex; flex-direction: column; }
.card .body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card .body .btn { margin-top: auto; align-self: flex-start; }
.card .body .specs { margin-bottom: 18px; }
.card .maker { color: var(--gold); text-transform: uppercase; font-size: .78rem; letter-spacing: .18em; margin-bottom: 4px; }
/* Long model names ("Land-Dweller 36 Everose Baguette") wrap; balance splits
   them evenly across the two lines instead of leaving one orphaned word. */
.card h3 { font-size: 1.3rem; margin-bottom: 6px; text-wrap: balance; overflow-wrap: break-word; }
.card .specs { color: var(--muted); font-size: .88rem; margin-bottom: 14px; line-height: 1.6; }
.card .price { font-size: 1.08rem; color: var(--ivory); margin-bottom: 16px; font-weight: 500; }
.card .price.sold { color: var(--muted); text-decoration: line-through; }
.badge {
  display: inline-block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 20px; margin-bottom: 12px;
}
.badge.avail { background: rgba(201,164,76,.15); color: var(--gold-bright); border: 1px solid var(--line); }
.badge.sold { background: var(--panel); color: var(--muted); border: 1px solid var(--panel-line); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; margin-top: 42px; }
.step { border-left: 2px solid var(--gold); padding: 4px 0 4px 20px; }
.step .num { font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--gold); line-height: 1; margin-bottom: 8px; }
.step h3 { font-size: 1.2rem; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: .95rem; }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 26px; margin-top: 42px; }
.review { background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: 32px; }
section.light .review { background: #fff; border-color: #e3dac4; box-shadow: 0 6px 24px rgba(20,27,77,.07); }
section.light .review p { color: #3c3c46; }
section.light .review .who { color: var(--gold-deep); }
section.light .brands a, section.light .brands span { border-color: rgba(147,116,60,.4); color: #141b4d; background: #fff; }
section.light .brands a:hover { border-color: var(--gold-deep); color: var(--gold-deep); background: #fafafa; }
.review .stars { color: var(--gold-bright); letter-spacing: .2em; margin-bottom: 12px; }
.review p { font-size: .97rem; font-style: italic; margin-bottom: 14px; }
.review .who { color: var(--gold); font-size: .88rem; letter-spacing: .08em; }

/* CTA band */
.band {
  background: linear-gradient(90deg, var(--royal), var(--royal-2), var(--royal));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-align: center; padding: 58px 24px;
}
.band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 10px; }
.band p { color: var(--text); margin-bottom: 26px; }

/* Ivory CTA band variant */
/* same palette swap the cream sections use, so buttons and rules match */
.band.light {
  background: var(--cream);
  border-top: 1px solid rgba(147,116,60,.3); border-bottom: 1px solid rgba(147,116,60,.3);
  --ivory: #141b4d;
  --text: #4c4c58;
  --muted: #7c786e;
  --gold: var(--gold-deep);
  --gold-bright: #6f5628;
  --line: rgba(147,116,60,.34);
  color: var(--text);
}
.band.light .btn-ghost { color: #141b4d; border-color: var(--gold-deep); }
.band.light .btn-ghost:hover { background: rgba(147,116,60,.12); color: #141b4d; }
.band.light h2 { color: #141b4d; }
.band.light p { color: #4c4c58; }

/* Back-to-top button */
#toTop {
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--gold); background: rgba(12,26,101,.88);
  color: var(--gold-bright); font-size: 1.35rem; line-height: 1; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: all .35s ease; box-shadow: 0 10px 28px rgba(0,0,0,.4);
}
#toTop.show { opacity: 1; visibility: visible; transform: none; }
#toTop:hover { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #1a1508; transform: translateY(-3px); }

/* Forms */
form.inquiry { max-width: 680px; margin: 40px auto 0; display: grid; gap: 18px; }
form.inquiry .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
label { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 13px 15px; border-radius: 4px;
  border: 1px solid rgba(201,164,76,.4); background: var(--field); color: var(--ivory);
  font-family: inherit; font-size: 1rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-bright); }
textarea { min-height: 140px; resize: vertical; }

/* Contact cards */
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; margin-top: 40px; }
.ccard { border: 1px solid var(--line); border-radius: 8px; padding: 30px 24px; text-align: center; background: var(--panel); }
.ccard .ico { display: flex; justify-content: center; margin-bottom: 14px; }
.ccard .ico svg { width: 34px; height: 34px; color: var(--gold); }
.ccard h3 { font-size: 1.1rem; margin-bottom: 8px; font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: .06em; color: var(--gold-bright); }
.ccard a.big { font-size: 1.05rem; color: var(--ivory); }
.ccard a.big:hover { color: var(--gold-bright); }
.ccard p { color: var(--muted); font-size: .88rem; margin-top: 6px; }

/* Framed logo plaque — deliberate, engraved-invitation treatment */
/* ---------- About page logo ----------
   Plain on the white page. logo-full-clean.png is the Canva export with its own
   baked drop shadow, drawn for light backgrounds — so no CSS shadow filters
   here; casting one from the alpha would shadow the baked shadow. */
.logo-plaque {
  max-width: 620px; margin: 44px auto 52px;
  text-align: center; border: 0; box-shadow: none; background: none;
}
.logo-plaque img { width: 78%; max-width: 420px; margin: 0 auto; }
.logo-plaque .tick { display: none; }
.logo-plaque .est {
  display: block; margin-top: 16px; color: var(--gold-deep);
  font-family: 'Jost', sans-serif; font-size: .68rem;
  letter-spacing: .32em; text-transform: uppercase;
}
@media (max-width: 560px) {
  .logo-plaque { margin: 30px auto 38px; }
  .logo-plaque img { width: 88%; }
}

/* Prose pages */
.prose { max-width: 780px; margin: 0 auto; }
.prose p { margin-bottom: 18px; font-size: 1.05rem; }
/* Section headings inside prose — serif, gold, with a hairline above so each
   block reads as its own chapter rather than another line of body copy. */
.prose h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 600; letter-spacing: .01em; line-height: 1.2;
  color: var(--gold-bright);
  margin: 52px 0 16px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.prose h3:first-of-type { margin-top: 8px; padding-top: 0; border-top: 0; }
/* --gold-bright is re-pointed to a deep brown inside light sections for text
   legibility, which made the signature look muddy. Give it a real gold fill. */
.prose .sig {
  font-family: 'Great Vibes', cursive; font-size: 2.15rem; margin-top: 10px;
  background: linear-gradient(180deg, #e0bf72 0%, #c9a44c 45%, #9c7826 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.6));
}

/* Footer */
footer.site { background: #0a0f2e; border-top: 1px solid var(--line); padding: 54px 0 30px; font-size: .93rem; }
.fgrid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.fgrid h4 a { color: inherit; transition: color .25s ease; }
.fgrid h4 a:hover { color: var(--gold-bright); }
.fgrid h4 { color: var(--gold); font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; margin-bottom: 14px; }
.fgrid ul { list-style: none; }
.fgrid li { margin-bottom: 9px; }
.fgrid a { color: var(--muted); }
.fgrid a:hover { color: var(--gold-bright); }
.fgrid .about { color: var(--muted); }
.legal { border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; color: #6f6f8f; font-size: .8rem; text-align: center; }

/* Instagram spotlight section */
.ig-sec {
  position: relative; overflow: hidden;
  background: var(--royal);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ig-sec::before {
  content: ''; position: absolute; width: 560px; height: 560px; left: -160px; top: -180px;
  background: radial-gradient(circle, rgba(188,24,136,.4) 0%, rgba(131,58,180,.25) 45%, transparent 70%);
  filter: blur(12px); pointer-events: none;
  animation: auroraA 19s ease-in-out infinite;
}
.ig-sec::after {
  content: ''; position: absolute; width: 560px; height: 560px; right: -160px; bottom: -200px;
  background: radial-gradient(circle, rgba(252,176,69,.35) 0%, rgba(220,39,67,.22) 45%, transparent 70%);
  filter: blur(12px); pointer-events: none;
  animation: auroraB 23s ease-in-out infinite;
}
/* third drifting light — adds depth and keeps the motion from looking like a loop */
.ig-sec .aurora {
  position: absolute; width: 480px; height: 480px; left: 42%; top: -240px;
  background: radial-gradient(circle, rgba(240,148,51,.30) 0%, rgba(204,35,102,.18) 45%, transparent 70%);
  filter: blur(14px); pointer-events: none; z-index: 0;
  animation: auroraC 27s ease-in-out infinite;
}
@keyframes auroraA {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .85; }
  33%      { transform: translate(90px, 70px) scale(1.18); opacity: 1; }
  66%      { transform: translate(40px, -50px) scale(.95); opacity: .7; }
}
@keyframes auroraB {
  0%, 100% { transform: translate(0, 0) scale(1.05); opacity: .8; }
  40%      { transform: translate(-110px, -80px) scale(1.25); opacity: 1; }
  70%      { transform: translate(-30px, 40px) scale(.92); opacity: .65; }
}
@keyframes auroraC {
  0%, 100% { transform: translate(-50%, 0) scale(1); opacity: .5; }
  50%      { transform: translate(-30%, 120px) scale(1.3); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-sec::before, .ig-sec::after, .ig-sec .aurora { animation: none; }
}
.ig-sec .wrap { position: relative; z-index: 1; }
.ig-icon { width: 66px; height: 66px; margin: 0 auto 20px; display: block; animation: igpulse 3.2s ease-in-out infinite; }
@keyframes igpulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(220,39,67,0)); }
  50% { transform: scale(1.07); filter: drop-shadow(0 0 20px rgba(220,39,67,.55)); }
}
.ig-word {
  background: linear-gradient(45deg, #f09433, #dc2743, #cc2366, #833ab4);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.btn-insta {
  border: none; color: #fff; font-weight: 600;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  box-shadow: 0 8px 28px rgba(204,35,102,.4);
}
.btn-insta:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 38px rgba(204,35,102,.55); }
.ig-handle { color: var(--muted); font-size: .95rem; letter-spacing: .06em; margin-top: 18px; }
.ig-handle a { color: var(--gold-bright); }

/* Brand index — editorial list view */
.brandlist { max-width: 940px; margin: 46px auto 0; text-align: left; }
.brandlist a.row {
  display: flex; align-items: baseline; gap: 26px; padding: 36px 14px;
  border-bottom: 1px solid var(--line); transition: background .3s ease, padding .3s ease;
}
.brandlist a.row:first-child { border-top: 1px solid var(--line); }
.brandlist .num { font-size: .78rem; color: var(--gold); letter-spacing: .22em; }
.brandlist .bname { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem, 3.2vw, 2.5rem); color: var(--ivory); flex: 1; transition: color .3s ease; line-height: 1.15; }
.brandlist .models { color: var(--muted); font-size: .88rem; max-width: 360px; text-align: right; }
.brandlist .arrow { color: var(--gold); font-size: 1.3rem; transition: transform .3s ease; }
.brandlist a.row:hover { background: rgba(201,173,123,.06); padding-left: 30px; }
.brandlist a.row:hover .bname { color: var(--gold-bright); }
.brandlist a.row:hover .arrow { transform: translateX(10px); }
@media (max-width: 700px) { .brandlist .models { display: none; } }

/* Model accordions — collapsed list view, expands to variant grid */
.acc { border-bottom: 1px solid var(--line); text-align: left; }
.acc:first-of-type { border-top: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 24px; padding: 30px 14px; transition: background .3s ease; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: rgba(201,173,123,.06); }
.acc .num { font-size: .76rem; color: var(--gold); letter-spacing: .22em; }
.acc .mname { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.35rem, 2.6vw, 2rem); color: var(--ivory); flex: 1; line-height: 1.15; min-width: 0; overflow-wrap: break-word; text-wrap: balance; }
.acc .meta { color: var(--muted); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.acc .chev { color: var(--gold); font-size: 1.6rem; line-height: 1; transition: transform .35s ease; }
.acc[open] .chev { transform: rotate(45deg); }
.acc[open] summary .mname { color: var(--gold-bright); }
.acc .acc-body { padding: 0 14px 48px; animation: accfade .7s cubic-bezier(.16,1,.3,1); }
@keyframes accfade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.acc .grid { margin-top: 20px; }
@media (max-width: 700px) { .acc .meta { display: none; } }

/* ---------- Carousels ----------
   Slides are stacked in a single CSS grid cell, so the frame is always as tall
   as the tallest slide and nothing grows or collapses when it advances. */
.carousel { position: relative; }
.carousel .track { display: grid; }
.carousel .slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transform: translateY(22px);
  transition: opacity .85s cubic-bezier(.16,1,.3,1),
              transform .85s cubic-bezier(.16,1,.3,1),
              visibility .85s;
  pointer-events: none;
}
.carousel .slide.on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.carousel .slide.leaving { transform: translateY(-14px); }

/* children lift in one after another so the change reads as composed, not a cut */
.carousel .slide > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.carousel .slide.on > * { opacity: 1; transform: none; }
.carousel .slide.on > *:nth-child(1) { transition-delay: .10s; }
.carousel .slide.on > *:nth-child(2) { transition-delay: .18s; }
.carousel .slide.on > *:nth-child(3) { transition-delay: .26s; }
.carousel .slide.on > *:nth-child(4) { transition-delay: .34s; }
.carousel .slide.on > *:nth-child(5) { transition-delay: .42s; }

/* The grid itself stops animating so its cells can carry the entrance
   individually, sweeping in from the left one after another. */
.carousel .slide > .trust,
.carousel .slide > .steps { opacity: 1; transform: none; transition: none; }
.carousel .slide .trust .item,
.carousel .slide .steps .step {
  opacity: 0; transform: translateX(-38px);
  transition: opacity .62s cubic-bezier(.16,1,.3,1),
              transform .72s cubic-bezier(.16,1,.3,1);
}
.carousel .slide.on .trust .item,
.carousel .slide.on .steps .step { opacity: 1; transform: none; }
.carousel .slide.on .trust .item:nth-child(1),
.carousel .slide.on .steps .step:nth-child(1) { transition-delay: .16s; }
.carousel .slide.on .trust .item:nth-child(2),
.carousel .slide.on .steps .step:nth-child(2) { transition-delay: .27s; }
.carousel .slide.on .trust .item:nth-child(3),
.carousel .slide.on .steps .step:nth-child(3) { transition-delay: .38s; }
.carousel .slide.on .trust .item:nth-child(4),
.carousel .slide.on .steps .step:nth-child(4) { transition-delay: .49s; }
.carousel .slide.on .trust .item:nth-child(5),
.carousel .slide.on .steps .step:nth-child(5) { transition-delay: .60s; }

/* ---- Pointer-driven carousel (data-scrub) ----
   Pointer position across the frame picks the slide, so the panel follows the
   mouse instead of waiting on a click. Slides travel horizontally in the
   direction of travel to reinforce which way you are moving. */
.carousel[data-scrub] { cursor: default; }
.carousel[data-scrub][data-dir="next"] .slide:not(.on) { transform: translateY(46px); }
.carousel[data-scrub][data-dir="prev"] .slide:not(.on) { transform: translateY(-46px); }
.carousel[data-scrub][data-dir="next"] .slide.leaving { transform: translateY(-34px); }
.carousel[data-scrub][data-dir="prev"] .slide.leaving { transform: translateY(34px); }
/* arrows are redundant when the pointer steers; keep them where there is no hover */
.carousel[data-scrub] .arrow { display: none; }
/* Taken out of the flow entirely. Fading it with opacity alone still left it
   occupying width in the control row, which pushed the progress rules off
   centre once it had been dismissed. */
.carousel[data-scrub] .scrubhint {
  position: absolute; left: 50%; top: calc(100% + 14px);
  transform: translateX(-50%);
  font-family: 'Jost', sans-serif; font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); opacity: .7;
  transition: opacity .5s ease; white-space: nowrap; pointer-events: none;
}
.carousel[data-scrub].touched .scrubhint { opacity: 0; }
@media (hover: none) {
  .carousel[data-scrub] { cursor: auto; }
  .carousel[data-scrub] .arrow { display: flex; }
  .carousel[data-scrub] .scrubhint { display: none; }
  .carousel[data-scrub] .slide:not(.on) { transform: translateY(22px); }
}
@media (prefers-reduced-motion: reduce) {
  .carousel .slide .trust .item,
  .carousel .slide .steps .step { transition: none; opacity: 1; transform: none; }
}

/* Controls sit on their own row under the slide — arrows flank the progress
   rules rather than floating over the copy, so they can never collide with it. */
.cnav {
  display: flex; align-items: center; justify-content: center;
  gap: 26px; margin-top: 46px;
}
.cnav .arrow {
  flex: none; width: 46px; height: 46px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--gold); -webkit-appearance: none; appearance: none;
  transition: border-color .35s ease, background-color .35s ease,
              color .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.cnav .arrow svg { width: 16px; height: 16px; display: block; }
.cnav .arrow:hover {
  border-color: var(--gold); background: rgba(201,173,123,.09);
  color: var(--gold-bright); transform: scale(1.06);
}
.cnav .arrow:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 3px; }
.cnav .arrow:active { transform: scale(.95); }

/* progress dots: a thin rule that fills with gold as the slide plays */
/* The rules gave away how many items there are. Hidden rather than removed so
   the click targets stay in the DOM for assistive tech. */
.cnav .dots {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.cnav .dots button {
  position: relative; width: 54px; height: 2px; padding: 0; border: 0; cursor: pointer;
  background: rgba(201,173,123,.22); overflow: hidden;
  transition: background .3s ease;
}
.cnav .dots button .fill {
  position: absolute; inset: 0; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}
.cnav .dots button:hover { background: rgba(201,173,123,.4); }
.cnav .dots button.done .fill { width: 100%; }
section.light .cnav .dots button { background: rgba(147,116,60,.2); }
section.light .cnav .dots button .fill { background: linear-gradient(90deg, var(--gold-deep), #b08c4d); }
section.light .cnav .dots button:hover { background: rgba(147,116,60,.35); }
@media (prefers-reduced-motion: reduce) {
  .carousel .slide, .carousel .slide > * { transition: none; }
  .cnav .dots button .fill { width: 100%; }
}

/* ---------- Review rail: three at a time, looping ----------
   --per is the number of cards on screen and is read back by the script, so
   the breakpoints below are the single source of truth for how many show. */
.rvrail { position: relative; --per: 3; }
.rvviewport { overflow: hidden; padding: 8px 0 14px; }
.rvtrack {
  display: flex; align-items: stretch;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.rvtrack.nojump { transition: none; }
.rvcard { flex: 0 0 calc(100% / var(--per)); padding: 0 11px; }

.rvinner {
  position: relative; height: 100%; overflow: hidden;
  display: flex; flex-direction: column; text-align: left;
  padding: 36px 30px 28px;
  background: #ffffff;
  border: 1px solid rgba(201,173,123,.5);
  transition: border-color .45s ease, transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
/* gold hairline capping the card, and an oversized quote mark set into the corner */
.rvinner::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .75; transition: opacity .45s ease;
}
.rvinner::after {
  content: '\201C'; position: absolute; right: 20px; top: 10px;
  font-family: 'Cormorant Garamond', serif; font-size: 5.4rem; line-height: 1;
  color: #93743c; opacity: .16; pointer-events: none;
}
.rvcard:hover .rvinner {
  transform: translateY(-5px); border-color: var(--gold);
  box-shadow: 0 22px 48px rgba(0,0,0,.42);
}
.rvcard:hover .rvinner::before { opacity: 1; }

.rvinner .stars {
  color: #b08c4d; letter-spacing: .3em; font-size: .82rem;
  margin-bottom: 18px; position: relative; z-index: 1;
}
.rvinner .quote {
  font-family: 'Cormorant Garamond', serif; font-size: 1.14rem; line-height: 1.66;
  font-style: italic; color: #14171f; margin: 0 0 26px;
  position: relative; z-index: 1;
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rvinner .meta {
  display: flex; align-items: center; gap: 14px;
  margin-top: auto; padding-top: 20px;
  border-top: 1px solid rgba(147,116,60,.24);
}
.rvinner .shot {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid rgba(147,116,60,.45);
}
.rvinner .who .nm {
  font-family: 'Jost', sans-serif; font-size: .95rem; letter-spacing: .03em;
  color: #10142e; font-weight: 500;
}
.rvinner .who .src {
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: #6f6b62; margin-top: 3px;
}
.rvinner .who .bought {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: #8a6d33; margin-top: 4px;
}

/* the card is white on any background; on a white section it just needs an
   edge and a shadow to lift off the page rather than a colour change */
section.light .rvinner {
  border-color: var(--panel-line); box-shadow: 0 6px 22px rgba(20,27,77,.08);
}
section.light .rvcard:hover .rvinner {
  border-color: var(--gold-deep); box-shadow: 0 20px 44px rgba(20,27,77,.16);
}

.rvrail .cnav .dots button .fill { transition: width .5s cubic-bezier(.22,1,.36,1); }
.rvrail .cnav .dots button.at .fill { width: 100%; }

@media (max-width: 980px) { .rvrail { --per: 2; } }
@media (max-width: 640px) {
  .rvrail { --per: 1; }
  .rvcard { padding: 0 4px; }
  .rvinner { padding: 30px 24px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .rvtrack { transition: none; }
  .rvcard:hover .rvinner { transform: none; }
}

/* review slide */
.rvslide { max-width: 780px; margin: 0 auto; text-align: center; }
.rvslide .stars { color: var(--gold-bright); letter-spacing: .28em; font-size: 1.1rem; margin-bottom: 22px; }
section.light .rvslide .stars { color: var(--gold-deep); }
.rvslide .quote {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  line-height: 1.6; font-style: italic; margin-bottom: 30px; color: var(--ivory);
}
section.light .rvslide .quote { color: #1d2450; }
.rvslide .meta { display: flex; align-items: center; justify-content: center; gap: 18px; }
/* Doubled from 76px: at avatar size the watch in the photo was unreadable.
   At 152px it reads as a photograph of the actual watch bought. */
.rvslide .shot {
  width: 152px; height: 152px; object-fit: cover; flex: none; border-radius: 50%;
  border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0,0,0,.3);
}
@media (max-width: 560px) { .rvslide .shot { width: 118px; height: 118px; } }
section.light .rvslide .shot { border-color: rgba(147,116,60,.4); }
.rvslide .who { text-align: left; }
.rvslide .who .nm { font-family: 'Jost', sans-serif; font-size: 1rem; letter-spacing: .06em; color: var(--gold-bright); }
section.light .rvslide .who .nm { color: #141b4d; }
.rvslide .who .src { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
section.light .rvslide .who .src { color: #8a8377; }
.rvslide .bought { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); margin-top: 5px; }
section.light .rvslide .bought { color: var(--gold-deep); }
@media (max-width: 560px) {
  .rvslide .meta { flex-direction: column; gap: 12px; }
  .rvslide .who { text-align: center; }
}


/* ---- Authenticity seal: specular sweep -------------------------------------
   A narrow band of light travels across the face on a slow cycle, the way a
   polished bezel catches a light source, while the shield itself lifts to the
   brighter gold in step with it. The band is a pseudo-element with its own
   border-radius so it stays inside the pill without clipping the promise panel,
   which is a sibling and must be free to overflow. */
@keyframes sealSheen {
  0%   { background-position: 150% 0; opacity: 0; }
  10%  { opacity: 1; }
  52%  { opacity: 1; }
  66%  { background-position: -50% 0; opacity: 0; }
  100% { background-position: -50% 0; opacity: 0; }
}
@keyframes sealLift {
  0%, 100% { color: var(--gold); filter: drop-shadow(0 0 0 rgba(230,207,156,0)); }
  46%      { color: #f2dfae; filter: drop-shadow(0 0 12px rgba(230,207,156,.5)); }
}
.trustbadge::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 1;
  background: linear-gradient(102deg,
    transparent 40%,
    rgba(255,246,214,.16) 46%,
    rgba(255,252,238,.44) 50%,
    rgba(255,246,214,.16) 54%,
    transparent 60%);
  background-size: 280% 100%; background-repeat: no-repeat;
  animation: sealSheen 5.2s cubic-bezier(.4,0,.3,1) infinite;
}
.trustbadge .seal { animation: sealLift 5.2s cubic-bezier(.4,0,.3,1) infinite; position: relative; z-index: 2; }
/* hovering hands control back to the hover styles */
.trustbadge:hover::after, .trustbadge.open::after { animation-play-state: paused; opacity: 0; }
.trustbadge:hover .seal, .trustbadge.open .seal { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .trustbadge::after { animation: none; opacity: 0; }
  .trustbadge .seal { animation: none; }
}

/* ---- Instagram mark in its own colours ------------------------------------
   An SVG stroke can't take a CSS gradient, so the glyph is used as a mask and
   the brand gradient is painted through it. */
.igpop .ico {
  /* the gradient paints the element's own box, so it needs the app icon's
     rounded-square silhouette rather than a hard tile */
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-radius: 28%;
  padding: 11px;
  color: transparent;
  box-shadow: 0 8px 22px rgba(188, 24, 136, .32);
}
.igpop .ico rect, .igpop .ico circle { stroke: #fff; }

/* ---------- Instagram popup ---------- */
.igpop {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(6,11,34,.72); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .4s ease;
}
.igpop.show { display: flex; }
.igpop.in { opacity: 1; }
.igpop .panel {
  position: relative; max-width: 460px; width: 100%; text-align: center;
  background: linear-gradient(165deg, var(--royal-2), var(--navy));
  border: 1px solid var(--gold); padding: 48px 38px 40px;
  box-shadow: 0 40px 90px rgba(0,0,0,.6);
  transform: translateY(18px) scale(.97); transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.igpop.in .panel { transform: none; }
.igpop .panel::before { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(201,173,123,.25); pointer-events: none; }
.igpop .x {
  position: absolute; top: 12px; right: 14px; width: 32px; height: 32px;
  background: none; border: 0; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: color .25s ease;
}
.igpop .x:hover { color: var(--gold-bright); }
/* One glance, one action: a big Instagram tile, a five-word headline, and a
   full-width gradient button. Everything that needed reading is gone. */
.igpop .ico {
  width: 88px; height: 88px; margin: 0 auto 22px; color: var(--gold);
  animation: igBounce 2.6s cubic-bezier(.34,1.4,.4,1) infinite;
}
@keyframes igBounce {
  0%, 100% { transform: translateY(0); }
  12%      { transform: translateY(-7px); }
  24%      { transform: translateY(0); }
}
.igpop h3 {
  font-family: 'Cormorant Garamond', serif; font-size: 2.2rem;
  color: var(--ivory); margin-bottom: 26px; line-height: 1.2; text-wrap: balance;
}
.igpop .btn-insta {
  display: block; width: 100%; padding: 17px 20px; font-size: .95rem;
}
@media (prefers-reduced-motion: reduce) { .igpop .ico { animation: none; } }
@media (max-width: 520px) { .igpop .panel { padding: 40px 24px 32px; } }

/* ---------- Hover-scrub photo galleries ---------- */
/* Shots are laid out as a filmstrip: the live one sits at 0 and every other
   sits one frame width to its left or right, so changing shot slides the strip
   rather than cross-fading. overflow:hidden keeps the off-frames out of sight. */
.card .ph2.scrub { position: relative; overflow: hidden; cursor: ew-resize; outline: none; }
.card .ph2.scrub img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 1; will-change: transform;
  transition: transform .52s cubic-bezier(.22, 1, .36, 1);
}
/* pre-script state, so the stack doesn't flash all shots at once on load */
.card .ph2.scrub img:not(:first-child) { transform: translate3d(100%, 0, 0); }
@media (prefers-reduced-motion: reduce) {
  .card .ph2.scrub img { transition: none; }
}
/* the old zoom-cancel rule is gone: it pinned every shot to transform:none
   on hover, which is exactly the property the filmstrip animates. */
.card .ph2.scrub:focus-visible { box-shadow: inset 0 0 0 2px var(--gold-bright); }
.scrub-bars {
  position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 3;
  display: flex; gap: 5px; opacity: 0; transition: opacity .25s ease;
}
.card:hover .scrub-bars, .scrub:focus-visible .scrub-bars { opacity: 1; }
.scrub-bars span {
  flex: 1; height: 3px; background: rgba(255,255,255,.32); border-radius: 2px;
  transition: background .22s ease;
}
.scrub-bars span.on { background: var(--gold-bright); }
.scrub-hint {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 30px 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(6,11,34,.72));
  color: rgba(255,255,255,.72); font-family: 'Jost', sans-serif;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; text-align: center;
  opacity: 1; transition: opacity .25s ease; pointer-events: none;
}
.card:hover .scrub-hint { opacity: 0; }
@media (hover: none) { .scrub-hint { display: none; } .scrub-bars { opacity: 1; } }

/* Homepage Available Now preview strip */
.avail-preview { margin-top: 46px; }
.avail-preview .grid { text-align: left; }
.avail-more { text-align: center; margin-top: 40px; }

/* ---------- Available Now: designed empty state ---------- */
.avail-empty {
  max-width: 640px; margin: 10px auto 0; padding: 64px 40px; text-align: center;
  border: 1px solid var(--line); background: var(--panel);
  position: relative;
}
.avail-empty::before {
  content: ''; position: absolute; inset: 10px;
  border: 1px solid rgba(201,173,123,.16); pointer-events: none;
}
.avail-empty > svg { width: 54px; height: 54px; color: var(--gold); opacity: .85; margin-bottom: 22px; }
.avail-empty h3 {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(1.7rem, 3vw, 2.2rem);
  color: var(--gold-bright); font-weight: 600; margin-bottom: 16px;
}
.avail-empty p { color: var(--muted); font-size: 1rem; line-height: 1.75; margin-bottom: 14px; }
.avail-empty p strong { color: var(--gold); font-weight: 500; }
.avail-empty .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 560px) { .avail-empty { padding: 44px 22px; } }

/* ---------- Reviews page: score header + masonry wall ---------- */
.score {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  margin: 10px auto 0; padding: 32px 30px; max-width: 620px;
  border-top: 1px solid #e3dac4; border-bottom: 1px solid #e3dac4;
}
.score .top { display: flex; align-items: center; justify-content: center; gap: 22px; }
.score .big {
  font-family: 'Cormorant Garamond', serif; font-size: 4rem; line-height: .9;
  color: var(--gold-deep); font-weight: 600;
}
.score .col { text-align: left; }
.score .stars { color: var(--gold-deep); font-size: 1.25rem; letter-spacing: .18em; line-height: 1; }
.score .sub {
  color: #6a6558; font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; margin-top: 9px;
}
.score .foot {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 16px; padding-top: 4px;
}
.score .foot .dot { color: #c9c0a8; }
.score .foot .note { color: #8a8377; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.score .glink {
  display: inline-flex; align-items: center; gap: 8px; color: var(--gold-deep);
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid rgba(147,116,60,.35); transition: color .25s ease, border-color .25s ease;
}
.score .glink:hover { color: #6f5628; border-bottom-color: #6f5628; }
.score .glink svg { width: 14px; height: 14px; }

.rvwall { columns: 3 320px; column-gap: 24px; margin-top: 46px; text-align: left; }
.rv {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  display: inline-block; width: 100%; margin: 0 0 24px;
  background: #fff; border: 1px solid #e3dac4; padding: 28px 28px 24px;
  box-shadow: 0 6px 24px rgba(20,27,77,.07);
}
.rv .stars { color: var(--gold-deep); letter-spacing: .2em; font-size: .95rem; margin-bottom: 12px; }
.rv p { font-size: .95rem; line-height: 1.7; color: #3c3c46; font-style: italic; margin: 0 0 16px; }
.rv p.clamped { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.rv .more {
  background: none; border: 0; padding: 0; margin: -8px 0 16px; cursor: pointer;
  color: var(--gold-deep); font-family: 'Jost', sans-serif; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid rgba(147,116,60,.4);
}
.rv .more:hover { color: #6f5628; }
.rv .who { display: flex; align-items: center; gap: 11px; padding-top: 14px; border-top: 1px solid rgba(147,116,60,.22); }
.rv .av {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(150deg, var(--royal-2), var(--navy));
  color: var(--gold-bright); display: flex; align-items: center; justify-content: center;
  font-family: 'Jost', sans-serif; font-size: .8rem; letter-spacing: .04em;
}
.rv .nm { font-family: 'Jost', sans-serif; font-size: .9rem; color: #141b4d; font-weight: 500; }
.rv .src { font-size: .74rem; color: #8a8377; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.rv .src b { color: var(--gold-deep); font-weight: 500; }
@media (max-width: 700px) {
  .rvwall { columns: 1; }
  .score { gap: 14px; padding: 26px 16px; }
  .score .big { font-size: 3.2rem; }
  .score .top { gap: 16px; }
}

/* ---------- FAQ page: search, section nav, grouped accordions ---------- */
/* This bar is a sibling of the page sections rather than a child of one, so a
   `section.light` override can never reach it — it carries its own light skin. */
/* This bar is a sibling of the page sections rather than a child of one, so a
   `section.light` override can never reach it — it carries its own light skin.
   It must also be fully opaque: fading to transparent at the lower edge exposed
   the navy <body> behind it as a grey-to-blue band across the category pills. */
.faq-tools {
  position: sticky; top: 0; z-index: 30; padding: 18px 0 22px;
  background: #ffffff;
  box-shadow: 0 12px 20px -14px rgba(20, 27, 77, .16);
}
.faq-searchbox { position: relative; max-width: 640px; margin: 0 auto; }
.faq-searchbox svg.mag {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--gold-deep); opacity: .9; pointer-events: none;
}
#faqSearch {
  width: 100%; box-sizing: border-box; padding: 16px 52px 16px 52px;
  background: #ffffff; border: 1px solid rgba(147,116,60,.42); border-radius: 2px;
  color: #23283f; font-family: 'Jost', sans-serif; font-size: 1rem; letter-spacing: .02em;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
#faqSearch::placeholder { color: #9b968a; }
#faqSearch:focus {
  outline: none; border-color: var(--gold-deep);
  background: #ffffff; box-shadow: 0 0 0 3px rgba(147,116,60,.14);
}
.faq-clear {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: none; align-items: center; justify-content: center;
  background: none; border: 0; color: #6f6b62; cursor: pointer; font-size: 1.3rem; line-height: 1;
  transition: color .25s ease;
}
.faq-clear:hover { color: var(--gold); }
.faq-searchbox.has-text .faq-clear { display: flex; }
.faq-count { text-align: center; color: #6f6b62; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; margin-top: 14px; min-height: 1em; }

.faq-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px auto 0; max-width: 900px; }
.faq-nav a {
  font-family: 'Jost', sans-serif; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: #4c4c58; border: 1px solid rgba(147,116,60,.34); padding: 8px 16px; border-radius: 2px;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.faq-nav a:hover { color: var(--navy); background: var(--gold); border-color: var(--gold); }

.faq-sec { margin-top: 64px; scroll-margin-top: 110px; }
.faq-sec:first-of-type { margin-top: 40px; }
.faq-sec > .sec-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 4px; }
.faq-sec > .sec-head h3 {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(1.55rem, 3vw, 2.15rem);
  color: var(--gold-bright); font-weight: 600; letter-spacing: .01em;
}
.faq-sec > .sec-head p { color: var(--muted); font-size: .95rem; margin-top: 6px; }
.faq-sec .acc:first-of-type { border-top: 0; }
.faq-sec .acc summary { padding: 24px 14px; }
.faq-sec .acc .mname { font-size: clamp(1.1rem, 1.9vw, 1.35rem); }
.faq-sec .acc-body { padding: 0 14px 30px 14px; max-width: 800px; }
.faq-sec .acc-body p { color: var(--text); margin-bottom: 14px; line-height: 1.75; }
.faq-sec .acc-body p:last-child { margin-bottom: 0; }
.faq-sec .acc-body a { color: var(--gold-bright); border-bottom: 0; }
.faq-sec .acc-body a:hover { color: var(--gold-bright); }
.faq-sec .acc-body strong { color: var(--gold-bright); font-weight: 500; }
.faq-hide { display: none !important; }

.faq-empty { display: none; text-align: center; padding: 70px 20px; }
.faq-empty.show { display: block; }
.faq-empty h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; color: var(--ivory); margin-bottom: 12px; }
.faq-empty p { color: var(--muted); max-width: 480px; margin: 0 auto 26px; }
@media (max-width: 700px) {
  /* On a phone the sticky search + section chips ate most of the screen and
     covered the questions. Let them scroll away instead. */
  .faq-tools { position: static; padding: 14px 0 12px; background: #fff; box-shadow: none; }
  #faqSearch { font-size: .95rem; padding: 14px 46px; }
  .faq-nav { gap: 8px; }
  .faq-nav a { font-size: .68rem; padding: 7px 12px; }
}

/* Scroll-reveal animation (classes added by js/site.js) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Product image slow zoom */
.card .ph2 { overflow: hidden; }
.card .ph2 img { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.card:hover .ph2 img { transform: scale(1.07); }

/* Responsive */
/* Tighten the row before it can ever collide with the logo */
@media (max-width: 1180px) {
  nav.links { gap: 26px; }
  nav.links a:not(.btn) { font-size: .88rem; }
  nav.links a.btn { padding: 8px 16px !important; font-size: .78rem; }
  /* scale the lockup down in proportion, don't flatten both to one height */
  .brand img.lockup { height: 50px; }
}

@media (max-width: 1040px) {
  .fgrid { grid-template-columns: 1fr; gap: 28px; }
  form.inquiry .row { grid-template-columns: 1fr; }
  /* No hamburger: the tabs wrap in rows under the logo. Wrapping rather than
     scrolling, because a scroll container's overflow would clip the panels. */
  .nav { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .nav .brand { justify-self: center; }
  .nav-toggle { display: none !important; }
  nav.links {
    display: flex; position: relative; flex-direction: row; flex-wrap: wrap;
    justify-content: center; align-items: center;
    grid-column: 1; justify-self: center;
    gap: 8px 18px; padding: 2px 0 4px; background: none; border: 0;
    overflow: visible;
  }
  nav.links a:not(.btn) { font-size: .74rem; letter-spacing: .06em; padding: 5px 0; }
  .navgroup { width: auto; position: static; }
  .navtop { display: inline-flex; gap: 5px; padding: 5px 0; }
  .navtop svg { width: 9px; height: 9px; }

  /* The panel is a full-width sheet under the whole nav row, identical for
     every group. max-content sizing floated it awkwardly between the wrapped
     tab rows; a fixed centred sheet always lands in the same, obvious place. */
  .navmenu {
    position: absolute; top: 100%; left: 50%; margin-top: 10px;
    transform: translate(-50%, 8px);
    width: calc(100vw - 32px); max-width: 420px; min-width: 0;
    padding: 8px 0; text-align: center;
    background: linear-gradient(178deg, #0d1747 0%, #080e2f 100%);
    border: 1px solid rgba(201,173,123,.26);
    box-shadow: 0 22px 50px rgba(0,0,0,.55);
    opacity: 0; visibility: hidden; pointer-events: none;
    display: block; z-index: 70;
  }
  /* hover and focus are meaningless on touch; only the tapped .open state shows */
  .navgroup:hover .navmenu, .navgroup:focus-within .navmenu {
    opacity: 0; visibility: hidden; pointer-events: none;
  }
  .navgroup.open .navmenu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, 0);
  }
  nav.links .navgroup .navmenu a {
    padding: 13px 22px; font-size: .85rem; text-align: center;
  }
  .navmenu a > span::after { display: none; }   /* underline wipe is a hover effect */
  .navgroup.open .navtop { color: var(--gold-bright); }
  .navgroup.open .navtop svg { transform: rotate(180deg); opacity: .95; }

  /* Contact matches the tab row's scale: same visual height as the text tabs,
     not the desktop CTA block that towered over them. */
  nav.links a.btn.nav-contact {
    padding: 8px 16px !important; font-size: .7rem !important;
    letter-spacing: .1em;
  }
  .brand img.lockup { height: 48px; }
}


@media (max-width: 620px) {
  .brand img.lockup { height: 36px; }
  /* stack the carousel controls tighter so the arrows stay thumb-sized */
  .cnav { gap: 16px; }
  .cnav .arrow { width: 42px; height: 42px; }
  .cnav .dots button { width: 34px; }
}

/* A lone .kicker class is (0,1,0) and loses to container rules like
   `.prose p` at (0,1,1) — which is why the About page kicker rendered at
   1.05rem. Tagged and placed last so it holds its size wherever it sits. */
p.kicker { font-size: .78rem; letter-spacing: .26em; line-height: 1.4; }