/* Godfrey's Jewelers — site styles (redesign, Oct 2026).
   Colours keep the shop's burgundy and gold; headings use Cormorant Garamond, text uses Inter. */

:root {
  --burgundy: #5e090a;
  --burgundy-dark: #430607;
  --burgundy-deep: #2c0405;
  --gold: #c9a24a;
  --gold-light: #e6c979;
  --gold-dark: #8a6a22;
  --cream: #fbf7f1;
  --sand: #f3ece2;
  --ink: #2b2522;
  --muted: #675d56;
  --line: #e6ddd1;
  --white: #ffffff;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", Arial, sans-serif;
  --radius: 14px;
  --shadow: 0 12px 32px rgba(43, 37, 34, 0.12);
  --wrap: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }   /* links to a section stop below the sticky header (86px) */
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }   /* the WebP/JPEG wrapper around each photo (photo() in header.php) takes no space: the photo is laid out as before */
a { color: var(--burgundy); }
a:hover { color: var(--gold-dark); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; color: var(--burgundy-deep); }
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.6rem; }
/* Home page section titles in the heading font's italic: stylish but quiet (as "Serving the
   Triangle since 1966" in the footer) */
.elegant-title { font-style: italic; }
p { margin: 0 0 1em; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.eyebrow {
  display: inline-block;
  font: 600 0.78rem/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 14px;
}
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 8px 14px; z-index: 100; }
.skip-link:focus { left: 8px; }
/* Read by search engines and screen readers, not shown (the home page's main heading) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px;
  font: 600 0.95rem/1 var(--sans); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--burgundy-deep); }
.btn-gold:hover { background: var(--gold-light); color: var(--burgundy-deep); }
.btn-outline { border-color: rgba(251, 247, 241, 0.6); color: var(--cream); }
.btn-outline:hover { border-color: var(--gold-light); color: var(--gold-light); }
.btn-burgundy { background: var(--burgundy); color: var(--cream); }
.btn-burgundy:hover { background: var(--burgundy-dark); color: var(--gold-light); }
.btn svg { width: 18px; height: 18px; }
/* A small plain button for conveniences, not calls to action ("Book a Consultation" on the
   services cards, "View details" on the piece cards): warm dark gray with 5px corners, not the
   gold or burgundy of the main buttons */
.btn-plain {
  display: inline-block; padding: 8px 18px; border-radius: 5px; background: #4a4440; color: var(--cream);
  font: 500 0.84rem/1.4 var(--sans); letter-spacing: 0.02em; text-decoration: none; transition: background 0.2s;
}
.btn-plain:hover { background: var(--ink); color: var(--white); }
/* A little lighter gray: "Ask about this piece" on the piece pages */
.btn-plain-light { background: #6e6761; }
.btn-plain-light:hover { background: #4a4440; }
/* "Our Services" and "Book a Consultation" at the bottom of the home page: centered on the sand of the
   hours box above them, pulled up into that section's bottom space so they sit halfway between
   the box and the footer */
.home-bottom-links { background: var(--sand); display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: -40px; padding-bottom: 40px; }
#book { scroll-margin-top: 28px; }   /* "Book a Consultation" lands with the same room above its title as a section's top */

/* Header */
.site-header {
  /* A darker burgundy than the hero below, so the two stand apart */
  position: sticky; top: 0; z-index: 50; background: var(--burgundy-dark); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
  border-bottom: 2px solid var(--gold);   /* the same gold line as under the home page hero */
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; }   /* 84px tall */
.logo img { height: 56px; width: auto; }
.main-nav { margin-left: auto; }   /* the menu stays at the right, beside the Facebook and Instagram buttons */
.main-nav ul { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
  color: var(--cream); text-decoration: none; font-size: 0.95rem; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
@media (max-width: 1300px) { .main-nav ul { gap: 22px; } }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--gold-light); border-bottom-color: var(--gold); }
.main-nav .btn { padding: 11px 20px; border-bottom: 2px solid transparent; }
.main-nav .btn:hover { border-bottom-color: transparent; }
.main-nav .btn-gold, .main-nav .btn-gold:hover { color: var(--burgundy-deep); }   /* dark on gold, not the menu's cream (Lighthouse contrast, 2026-10-08) */
/* The menu button (while the menu is folded): in the middle of the header bar on computers and
   tablets, at the right beside the phone icon on phones */
.menu-toggle {
  display: none; align-items: center; height: 40px; padding: 0 11px; background: none;
  border: 1px solid rgba(251, 247, 241, 0.5); border-radius: 8px; color: var(--cream); cursor: pointer;
}
.menu-toggle svg { width: 22px; height: 22px; display: block; }
/* Buttons at the right of the header. Wide screens: Facebook and Instagram after the full menu.
   While the menu is folded (1180px and below): booking, phone, Facebook, Instagram.
   Phones: the phone only. */
.header-actions { display: flex; align-items: center; gap: 12px; order: 1; }
.header-actions > * { height: 40px; flex-shrink: 0; }   /* booking, phone and social buttons the same height as the menu button, never squeezed */
.header-actions .btn { padding: 0 16px; font-size: 0.88rem; white-space: nowrap; }
.header-actions .btn svg { width: 16px; height: 16px; }
.header-actions .header-cta, .header-actions .header-call { display: none; }   /* shown when the menu folds */
.header-social {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; flex: none;
  border: 1px solid rgba(251, 247, 241, 0.5); border-radius: 50%; color: var(--cream);
}
.header-social:hover { border-color: var(--gold-light); color: var(--gold-light); }
.header-social svg { width: 18px; height: 18px; }

/* Hero */
.hero {
  background: radial-gradient(circle at 85% 20%, #7a1416 0%, var(--burgundy) 45%, var(--burgundy-dark) 100%);
  color: var(--cream);
  padding: 44px 0 48px;
  overflow: hidden;
  border-bottom: 2px solid var(--gold);   /* a light gold line where the hero meets the page */
}
/* Everything in the hero centered on every screen: "Godfrey's Jewelers" over the photo and the
   "Family owned…" label under it, below the photo's gold frame (which is offset down and to the
   right) */
.hero-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* "Godfrey's Jewelers" in the heading font's italic; the titles in the banners of the other pages
   (About, Pearl Restringing) use the same */
.hero-name, .page-hero h1 {
  font: italic 600 clamp(2.4rem, 4.2vw, 3.4rem)/1.1 var(--serif); color: var(--white); letter-spacing: 0.01em;
}
.hero-name { margin: 0; }
/* "A family business, for every client" under the name: smaller, in soft gold */
.hero-tagline { margin: 6px 0 26px; font: italic 500 clamp(1.2rem, 1.8vw, 1.45rem)/1.3 var(--serif); color: var(--gold-light); letter-spacing: 0.01em; }
.hero .eyebrow { color: var(--gold-light); margin: 42px 0 0; }
.hero-photo { position: relative; width: 100%; max-width: 520px; }
.hero-photo img { border-radius: var(--radius); aspect-ratio: 5 / 4; object-fit: cover; width: 100%; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.hero-photo::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 2px solid var(--gold); border-radius: var(--radius); z-index: -0;
}
.hero-photo img { position: relative; z-index: 1; }

/* Sections */
.section { padding: 80px 0; }
.section-snug { padding-top: 44px; }   /* Services, gallery, family story, consultation: less space at the top */
.section-tight { padding-top: 28px; }   /* Gallery and "Book a consultation" on larger screens: less still */
.section-services-top { padding-top: 40px; }   /* Our services, under the hero's gold line (phones keep 32px) */
.section-short-bottom { padding-bottom: 44px; }   /* Services and gallery on larger screens (phones keep 56px) */
.section.flush-bottom { padding-bottom: 0; }   /* when the next section has the same background */
.section-alt { background: var(--sand); }
/* Piece pages: a thin gold line, fading at both ends, between "More Pieces" and "Ask About This
   Piece" (both sand). It sits halfway down the space between them: 44px under the gallery and 28px
   over the title on larger screens, so 8px up from the top of the booking section (phones: 56 and
   32). The home page has none between its gallery and "Book a Consultation" (owner, 2026-10-04). */
#more-pieces + #visit { position: relative; }
#more-pieces + #visit::before {
  content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: min(100% - 40px, 760px); height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.section-head { max-width: 740px; margin: 0 auto 44px; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.05rem; text-wrap: balance; }   /* no lone word on the last line */

/* Services: each service's title centered above its card, and the cards in a row the same height */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
.service { display: flex; flex-direction: column; }
.service h3 { margin-bottom: 12px; text-align: center; }
.service-card {
  flex: 1; background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 2px 14px rgba(43, 37, 34, 0.06); border: 1px solid var(--line);
  display: flex; flex-direction: column; transition: box-shadow 0.25s, transform 0.25s;
}
.service-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.service-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.service-card img.contain { object-fit: contain; background: var(--white); padding: 24px; }
/* Custom Jewelry Design: its photo is a small gallery (its own photo, then the pieces) that swipes
   sideways, one photo at a time. Two round arrows side by side at the bottom of the photo (one
   dims at its end) and a count at the top right (owner, 2026-10-08; js/site.js); the photos open
   nothing */
.design-gallery { position: relative; }
.design-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.design-track::-webkit-scrollbar { display: none; }
.design-track:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.design-slide { flex: 0 0 100%; scroll-snap-align: start; }
.design-slide picture { display: block; }
.design-nav {
  position: absolute; bottom: 12px; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 1px solid var(--gold); border-radius: 50%;
  background: rgba(67, 6, 7, 0.78); color: var(--cream); cursor: pointer; transition: opacity 0.2s;
}
.design-nav:hover:not(:disabled) { background: var(--burgundy-dark); color: var(--gold-light); }
.design-nav:disabled { opacity: 0.35; cursor: default; }
.design-nav.prev { right: calc(50% + 5px); }
.design-nav.next { left: calc(50% + 5px); }
.design-nav svg { width: 16px; height: 16px; }
.design-count {
  position: absolute; right: 10px; top: 10px; padding: 5px 9px; border-radius: 999px;
  font: 600 0.75rem/1 var(--sans); letter-spacing: 0.04em; background: rgba(67, 6, 7, 0.78); color: var(--cream);
}
.service-body { padding: 24px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.service-body p { color: var(--muted); font-size: 0.95rem; margin: 0; }
/* "Book a Consultation" (a plain button, see Buttons) at the foot of each card, lined up along the row */
.service-foot { margin-top: auto; padding-top: 22px; text-align: center; }
/* The titles that open the main sections, between two thin gold lines that fade out toward the
   edges ("Our Services", "More Pieces", "A family business…" on
   About). Not on the booking form's title or on sub-headings, so the lines
   stay special. The lines shorten on narrow screens, the words stay on one line (except "A family
   business…" on phones, see Phones) */
.lined-title { display: flex; align-items: center; justify-content: center; gap: 22px; white-space: nowrap; }
.lined-title::before, .lined-title::after { content: ""; flex: 0 1 120px; height: 1px; background: linear-gradient(to right, transparent, var(--gold)); }
.lined-title::after { background: linear-gradient(to left, transparent, var(--gold)); }
.services-head { margin-bottom: 36px; }
.services-head h2 { margin: 0; }

/* Gallery: one row of square photos that scrolls sideways, however many there are. Four show
   at a time on computers, three on tablets; phones show one and a bit, so there are clearly more
   to swipe to. The arrows sit centered under it (js/site.js dims one when there is nothing more
   that way, and hides both when every photo already fits). */
.gallery {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }
.gallery button {
  flex: 0 0 calc((100% - 3 * 16px) / 4); scroll-snap-align: start;
  padding: 0; border: 0; background: var(--white); border-radius: 12px; overflow: hidden; cursor: zoom-in;
  aspect-ratio: 1 / 1;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.gallery button:hover img { transform: scale(1.05); }
.gallery-controls { display: flex; justify-content: center; gap: 14px; margin-top: 22px; }
.gallery-controls[hidden] { display: none; }
.gallery-nav {
  display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0;
  border: 2px solid var(--gold); border-radius: 50%; background: var(--burgundy); color: var(--cream);
  box-shadow: 0 4px 12px rgba(43, 37, 34, 0.2); cursor: pointer; transition: opacity 0.2s;
}
.gallery-nav:hover:not(:disabled) { background: var(--burgundy-dark); color: var(--gold-light); }
.gallery-nav:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
.gallery-nav svg { width: 22px; height: 22px; }

/* Photo viewer: the photo, its caption and count, arrows (and arrow keys, or swiping) for the next */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1100px); }
.lightbox::backdrop { background: rgba(20, 4, 5, 0.88); }
.lightbox img { max-height: 84vh; width: auto; margin: 0 auto; border-radius: 10px; }
.lightbox p { color: var(--cream); text-align: center; margin: 12px 0 0; }
.lightbox-close {
  position: fixed; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: var(--cream); color: var(--burgundy-deep); font-size: 26px; cursor: pointer;
}
.lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%; background: var(--cream); color: var(--burgundy-deep); cursor: pointer;
}
.lightbox-nav svg { width: 24px; height: 24px; }
.lightbox-nav.prev { left: 18px; }
.lightbox-nav.next { right: 18px; }

/* Piece page (piece.php): photos beside the price, details and buttons; status badges; the piece
   cards (piece-cards.php) in the gallery's sideways row */
.crumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 22px; }
.crumbs a { color: var(--burgundy); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.piece-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: start; }
.piece-main img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.piece-thumbs { display: flex; gap: 12px; margin-top: 14px; }
.piece-thumbs button { width: 84px; aspect-ratio: 1 / 1; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; }
.piece-thumbs button[aria-pressed="true"] { border-color: var(--gold); }
.piece-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.status { display: inline-block; font: 600 0.7rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }
.status-sold { background: #efe3e3; color: var(--burgundy); }
.piece-info h1 { font-size: clamp(2rem, 3.4vw, 2.6rem); margin: 14px 0 4px; }
.piece-info h1:first-child { margin-top: 0; }   /* no "Sold" label above it */
.piece-price { font: 600 1.7rem/1.2 var(--serif); color: var(--burgundy); margin: 0 0 14px; }
.piece-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 18px; }
.btn-ghost { border-color: var(--burgundy); color: var(--burgundy); background: transparent; }
.btn-ghost:hover { background: var(--burgundy); color: var(--cream); }
.piece-specs { display: grid; grid-template-columns: auto 1fr; gap: 9px 20px; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.piece-specs dt { font: 600 0.72rem/1.9 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dark); }
.piece-specs dd { margin: 0; }
.piece-assure { list-style: none; display: grid; gap: 10px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.piece-assure li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.93rem; }
.piece-assure svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--gold-dark); }
/* A piece card: photo and name (no one-line description or "View details" button since 2026-10-07,
   no price and no Available/Reserved label since 2026-10-06) */
.gallery > .piece-card {
  flex: 0 0 calc((100% - 3 * 16px) / 4); scroll-snap-align: start;
  display: flex; flex-direction: column; text-align: center; text-decoration: none; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; padding-bottom: 18px;
}
.piece-card-photo { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--white); }
.piece-card-photo img { width: 100%; height: 100%; object-fit: cover; }   /* no zoom on pointing: the cards open nothing */
.piece-card-title { display: block; font: 600 1.2rem/1.25 var(--serif); color: var(--burgundy-deep); margin: 14px 14px 0; }
.piece-bar { display: none; }   /* phones only */

/* Story */
.story-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.story-grid img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.story blockquote {
  margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold);
  font: italic 500 1.5rem/1.4 var(--serif); color: var(--burgundy);
}

/* Contact, hours and location */
/* The form across the full width (up to 900 px), then the hours box and the map side by side,
   the same height. Phones stack all three. */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 900px; margin: 0 auto; }
.contact-grid .card { padding: 28px 24px; }
.contact-grid .info-card { padding-left: 20px; padding-right: 20px; }
.visit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
/* The map inside a very thin burgundy border, with a little white space between the two;
   a pair with the hours box beside it */
.map-frame {
  display: flex; padding: 6px; background: var(--white); border: 2px solid var(--burgundy);
  border-radius: var(--radius); box-shadow: 0 2px 14px rgba(43, 37, 34, 0.12);
}
.visit-row .map { flex: 1; height: auto; min-height: 260px; margin-top: 0; border: 0; border-radius: 6px; }
/* The still map panel (until "Show map" loads the Google map): the pin and address centered on sand */
.map-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--sand); text-align: center; padding: 24px;
}
.map-panel svg { width: 34px; height: 34px; color: var(--burgundy); }
.map-panel p { margin: 0; color: var(--ink); line-height: 1.5; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; box-shadow: 0 2px 14px rgba(43, 37, 34, 0.05); }
.card h3 { margin-bottom: 6px; }
.form-intro { color: var(--muted); margin-bottom: 24px; }
fieldset { border: 0; padding: 0; margin: 0 0 22px; }
legend, .field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 8px; }
/* Choices: the real radio button or checkbox is hidden; the card or row after it shows the state */
.option { position: relative; display: block; cursor: pointer; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-list { display: grid; gap: 10px; }
.option-list.cols-3 { grid-template-columns: repeat(3, 1fr); }   /* Clasp and extras: three cards side by side */
.option-list.cols-3 .option-row { height: 100%; }
/* Three across (computers and tablets): button and title on the first line, the description
   underneath at the card's full width */
@media (min-width: 641px) {
  .option-list.cols-3 { gap: 8px; }
  .option-list.cols-3 .option-row {
    display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start;
    column-gap: 7px; row-gap: 4px; padding: 10px 9px 11px;
  }
  .option-list.cols-3 .option-row > span:not(.mark) { display: contents; }
  .option-list.cols-3 .option-row strong { font-size: 0.9rem; white-space: nowrap; }
  .option-list.cols-3 .option-row small { grid-column: 1 / -1; font-size: 0.82rem; line-height: 1.4; }
  .option-list.cols-3 .mark { margin-top: 0; }
}
/* Centered cards (consultation "I'd like to", pearl Clasp and Anything else): button and title
   centered on the first line, the description centered underneath in evenly balanced lines */
.option-list.centered .option-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: flex-start;
  text-align: center; column-gap: 8px; row-gap: 4px;
}
.option-list.centered .option-row > span:not(.mark) { display: contents; }
.option-list.centered .option-row small { flex-basis: 100%; text-wrap: balance; }
.option-list.centered .mark { margin-top: 0; }
.option-row {
  display: flex; gap: 14px; align-items: flex-start; padding: 13px 16px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--cream);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.option-row strong { display: block; font-size: 0.97rem; font-weight: 600; }
.option-row small { display: block; color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
/* Every choice shows the same round mark on the left: empty, then burgundy with a white tick */
.mark { flex: none; position: relative; width: 20px; height: 20px; margin-top: 2px; border: 2px solid #b9aea3; border-radius: 50%; background: var(--white); }
.option-card {
  position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--cream);
  text-align: center; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.option-card svg { width: 72px; height: 54px; margin-bottom: 4px; }
.option-card strong { font-size: 0.93rem; font-weight: 600; line-height: 1.25; }
.option-card small { color: var(--muted); font-size: 0.8rem; }
.option-card .figure { fill: none; stroke: #b9aea3; stroke-width: 1.6; stroke-linecap: round; }
.option-card .strand { fill: none; stroke: var(--gold-dark); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 0 5.2; }
.option-card text { font: 600 24px var(--serif); fill: var(--gold-dark); }
.option:hover .option-row, .option:hover .option-card { border-color: var(--gold); }
.option input:checked + .option-row,
.option input:checked + .option-card { border-color: var(--burgundy); background: var(--white); box-shadow: inset 0 0 0 1px var(--burgundy); }
.option input:checked + .option-row .mark { border-color: var(--burgundy); background: var(--burgundy); }
.option input:checked + .option-row .mark::after,
.option input:checked + .option-card .mark::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px;
  border: solid var(--white); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.option input:checked + .option-card .strand { stroke: var(--burgundy); }
.option input:checked + .option-card text { fill: var(--burgundy); }
/* The mark on each length card sits in its top-left corner */
.card-mark { position: absolute; top: 9px; left: 9px; margin: 0; }
.option input:checked + .option-card .mark { border-color: var(--burgundy); background: var(--burgundy); }
.option input:focus-visible + .option-row,
.option input:focus-visible + .option-card { outline: 3px solid var(--gold); outline-offset: 2px; }
.length-guide { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field input, .field textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 10px;
  font: inherit; color: var(--ink); background: var(--cream);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: var(--white); }
.field textarea { min-height: 150px; resize: vertical; }
.optional { font-weight: 400; color: var(--muted); }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

.info-card { background: var(--burgundy); color: var(--cream); border: 0; }
.info-card h3 { color: var(--white); }
.info-card a { color: var(--gold-light); }
.info-list { list-style: none; margin: 0 0 24px; padding: 0; }
.info-list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(251, 247, 241, 0.15); }
.info-list li:last-child { border-bottom: 0; }
.info-list svg { flex: none; width: 20px; height: 20px; margin-top: 4px; color: var(--gold-light); }
/* Address and hours: one block centered in the box, its lines left-aligned (centered lines on phones) */
.info-card h3, .info-card .small { text-align: center; }
.info-block { width: fit-content; max-width: 100%; margin: 0 auto; }
/* Opening hours: each time follows its days after the same small gap (not lined up in a column) */
.hours, .hours tbody { display: block; }
.hours { margin: 6px 0 10px; }
.hours tr { display: flex; gap: 14px; border-bottom: 1px solid rgba(251, 247, 241, 0.15); }
.hours td { padding: 7px 0; white-space: nowrap; font-size: 0.88rem; }
.small { font-size: 0.85rem; opacity: 0.85; }
.map { width: 100%; height: 240px; border: 0; border-radius: 10px; margin-top: 14px; }

/* Page hero (inner pages) */
.page-hero { background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-dark) 100%); color: var(--cream); padding: 40px 0 44px; text-align: center; }
.page-hero h1 { color: var(--white); margin: 0; }
.page-hero .eyebrow { color: var(--gold-light); }
.page-hero p { color: rgba(251, 247, 241, 0.85); margin: 12px auto 0; max-width: 40em; }

/* Long text (About) */
.prose { max-width: 720px; margin: 0 auto; font-size: 1.06rem; }
.prose h2 { font-size: 2rem; margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 8px; }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 36px 0; }
.prose > .photo-pair:first-child { margin-top: 0; }   /* About: the photos open the section */
.photo-pair img { border-radius: 12px; aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

/* Mail-in pearl restringing page */
.pearl-intro { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.pearl-photo { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 28px; }
.pearl-photo img { margin: 0 auto; }
.checklist { list-style: none; padding: 0; margin: 0 0 18px; }
.checklist li { position: relative; padding-left: 32px; margin-bottom: 12px; }
.checklist li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 16px; height: 8px;
  border-left: 2.5px solid var(--gold-dark); border-bottom: 2.5px solid var(--gold-dark); transform: rotate(-45deg);
}
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.steps li { counter-increment: step; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; }
.steps li::before {
  content: counter(step); display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; margin-bottom: 16px;
  background: var(--burgundy); color: var(--gold-light); font: 600 1.25rem/1 var(--serif);
}
.steps h3 { font-size: 1.35rem; margin-bottom: 8px; }
.steps p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.pearl-form { max-width: 820px; margin: 0 auto; }
.field select {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 10px;
  font: inherit; color: var(--ink); background: var(--cream);
}
.field textarea.short { min-height: 90px; }
.faq { max-width: 780px; margin: 0 auto; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; margin-bottom: 12px; }
.faq details:last-child { margin-bottom: 0; }
.faq summary { cursor: pointer; font: 600 1.25rem/1.3 var(--serif); color: var(--burgundy-deep); }
.faq details p { margin: 12px 0 0; color: var(--muted); }
.service-link { align-self: center; margin-top: 12px; font-weight: 600; text-decoration: none; }   /* "Mail-in pearl restringing →", centered in its card */
@media (max-width: 980px) {
  .pearl-intro { grid-template-columns: 1fr; gap: 32px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .length-guide { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
  .length-guide { grid-template-columns: repeat(2, 1fr); }
  .length-guide .option:last-child { grid-column: 1 / -1; }   /* "Not sure" spans the row */
}

/* Thank-you / message pages */
.notice { max-width: 620px; margin: 0 auto; text-align: center; }
.notice svg { width: 56px; height: 56px; color: var(--gold-dark); margin: 0 auto 18px; }
.review-ask { margin-top: 28px; color: var(--muted); font-size: 0.95rem; }

/* Older page not in the menu (shoppage.php) */
.main-content { width: min(100% - 40px, 800px); margin: 48px auto; }

/* Footer: "Serving the Triangle" and the copyright */
.site-footer { background: var(--burgundy-deep); color: rgba(251, 247, 241, 0.82); font-size: 0.95rem; }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { color: var(--gold-light); }
.footer-band { padding: 22px 0; text-align: center; }
.footer-band p { margin: 0; }
.footer-band .since { font: italic 600 1.6rem/1.3 var(--serif); color: var(--gold-light); margin-bottom: 6px; }

/* Tablets */
@media (max-width: 980px) {
  .story-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero { padding: 32px 0 52px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery button, .gallery > .piece-card { flex-basis: calc((100% - 2 * 16px) / 3); }   /* three across */
  .piece-grid { grid-template-columns: 1fr; gap: 28px; max-width: 640px; margin: 0 auto; }
  .story-grid img { aspect-ratio: 3 / 2; }
}

/* Menu folds away below the width where all eight links fit on one line */
@media (max-width: 1180px) {
  .menu-toggle { display: flex; }
  /* The folded menu drops down just below the header's gold line */
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 2px); background: var(--burgundy-deep); padding: 10px 20px 22px; }
  .site-header.nav-open .main-nav { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav li a { display: block; padding: 14px 4px; border-bottom: 1px solid rgba(251, 247, 241, 0.12); }
  .main-nav li:last-child { margin-top: 16px; }
  .main-nav .btn { width: 100%; }
  .header-actions .header-cta, .header-actions .header-call { display: inline-flex; }
  .main-nav .nav-cta { display: none; }   /* the booking button is already in the header bar */
}

/* Computers and tablets with the menu folded: three columns, the logo at the left, the menu button
   in the middle, booking, phone, Facebook and Instagram at the right. Tablets: the button centered
   in the space between the logo and the buttons (the bar is too narrow for the exact middle) */
@media (min-width: 641px) and (max-width: 1180px) {
  .header-inner { display: grid; grid-template-columns: auto 1fr auto; }
  .logo { justify-self: start; }
  .menu-toggle { justify-self: center; }
  .header-actions { justify-self: end; }
}
/* Computers (1100px and up, where it still leaves 60px before the booking button): the side columns
   share the space equally, so the button is in the exact middle of the bar */
@media (min-width: 1100px) and (max-width: 1180px) {
  .header-inner { grid-template-columns: 1fr auto 1fr; }
}

/* Narrow tablets and phones: the phone button shows its icon only, the same size as the menu
   button (".header-actions" so it outranks the 16px button padding), so everything fits */
@media (max-width: 760px) {
  .header-actions .header-call {
    width: 45px; padding: 0; margin: 0; justify-content: center;
    border: 1px solid rgba(251, 247, 241, 0.5); border-radius: 8px;
  }
  .header-call .call-number { display: none; }
  .header-actions .header-call svg { width: 22px; height: 22px; flex-shrink: 0; }
}

/* Phones */
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .section { padding: 56px 0; }
  .home-bottom-links { margin-top: -28px; padding-bottom: 28px; }   /* halfway again, in phones' 56px */
  .section-snug { padding-top: 32px; }   /* also undoes .section-tight and .section-services-top: phones keep 32px */
  .section-head { margin-bottom: 32px; }
  #more-pieces + #visit::before { top: -12px; }   /* halfway between the gallery and the booking title */
  .logo img { height: 64px; }
  .header-inner { padding: 10px 0; }   /* 84px tall, with the larger phone logo */
  .page-hero { padding: 30px 0 34px; }
  .eyebrow-lg { font-size: 1.1rem; letter-spacing: 0.2em; margin-bottom: 18px; }   /* "Mail-in service" */
  /* "What every restringing includes" on one line: the text is about 12.5 times its font size
     wide, so the size follows the screen width (less the 40 px of side margins) */
  .pearl-intro h2 { font-size: min(2rem, calc((100vw - 40px) / 12.8)); white-space: nowrap; }
  /* The italic titles shrink a little on the narrowest phones, so each stays on one line */
  .elegant-title { font-size: min(2rem, calc((100vw - 40px) / 9.1)); }
  /* Titles between gold lines: the lines closer in */
  .lined-title { gap: 12px; }
  /* "More Pieces" on the piece pages as large as "Our Services" (below) */
  #more-pieces .lined-title { font-size: 2.4rem; }
  /* "Book a Consultation" (and "Ask About This Piece" on the piece pages) as large too where it
     fits: it is about 7.5 times its size wide, so on the narrowest phones it shrinks just enough to
     stay on one line */
  #visit .section-head h2 { font-size: min(2.4rem, calc((100vw - 40px) / 7.6)); }
  /* "A family business, for every client" (About) is too long for one line: the lines give way
     first, down to 28px each, then the words take two lines. "A family business," is 6.53 times
     its size wide, so it is sized to fit beside the lines (120px with the gaps and margins) */
  .story .lined-title { white-space: normal; text-wrap: balance; font-size: min(2rem, calc((100vw - 120px) / 6.6)); }
  .story .lined-title::before, .story .lined-title::after { flex-shrink: 100; min-width: 28px; }
  /* The hero is "Godfrey's Jewelers" and the photo only: no "Family owned…" label on phones */
  .hero .eyebrow { display: none; }
  /* The hero photo's gold frame sits closer on phones; the story section ("A family business…")
     has no photo on phones */
  .hero-photo::before { inset: 12px -10px -12px 10px; }
  .hero { padding-bottom: 44px; }
  .story-photo { display: none; }
  .story h2, .pearl-intro h2, .prose h2, .prose h3 { text-align: center; }
  .steps h3, .steps p { text-align: center; }
  .steps li::before { margin-left: auto; margin-right: auto; }   /* the step number, above its title */
  .option-list.cols-3 { grid-template-columns: 1fr; }   /* clasp and extras stacked again */
  .card fieldset legend { width: 100%; text-align: center; }   /* "Length", "Clasp", "I'd like to"… over centered cards */
  .info-block { width: auto; }
  .visit-row { grid-template-columns: 1fr; }   /* hours box, then the map */
  .visit-row .map { min-height: 260px; }
  .info-list li { justify-content: center; text-align: center; }
  .hours tr { justify-content: center; }
  /* Every button sits centered on its own line on phones */
  .btn { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
  .services-grid { grid-template-columns: 1fr; }
  /* "Our Services" larger than the other titles on phones (the size of "Godfrey's Jewelers"), so
     it stands well above the card titles */
  .services-head h2 { font-size: 2.4rem; }
  /* Gallery: swiped, edge to edge of the screen (the photos still line up with the text) */
  .gallery { gap: 10px; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .gallery button, .gallery > .piece-card { flex-basis: 72%; }
  /* Piece page: centered details, and the price with "Ask about this piece" kept at the bottom of
     the screen (the footer gets room for it) */
  .piece-info { text-align: center; }
  .piece-actions { justify-content: center; }   /* the two small buttons side by side, centered */
  .piece-thumbs { justify-content: center; }
  .piece-specs { text-align: left; }
  .piece-assure li { text-align: left; }
  .piece-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px;
    background: var(--burgundy-dark); border-top: 2px solid var(--gold); color: var(--cream);
  }
  .piece-bar strong { display: block; font: 600 1.25rem/1.1 var(--serif); color: var(--white); }
  .piece-bar small { font-size: 0.75rem; color: var(--gold-light); letter-spacing: 0.1em; text-transform: uppercase; }
  .piece-bar .btn-plain { padding: 10px 16px; }
  body:has(.piece-bar) .site-footer { padding-bottom: 72px; }
  .lightbox-nav { width: 40px; height: 40px; background: rgba(251, 247, 241, 0.85); }
  .lightbox-nav.prev { left: 8px; }
  .lightbox-nav.next { right: 8px; }
  .card { padding: 26px 22px; }
  .field-row { grid-template-columns: 1fr; }
  /* Phones: booking goes back inside the menu; the phone shows as an icon beside the menu button
     (styled in the 760px block above); no Facebook and Instagram buttons */
  .header-cta { display: none !important; }
  .main-nav .nav-cta { display: block; }
  .header-social { display: none; }
  /* The phone icon and the menu button together at the right, 12px apart */
  .header-actions { margin-left: auto; }
  .menu-toggle { order: 2; margin-left: -12px; }
  .photo-pair { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}