/* ==========================================================================
   G Mantella Body Piercing Clinic — site.css
   Direction: "MAISON LIGHT". Ivory canvas, near-black type, gold used only
   for hairlines, small labels, the monogram, prices and active states.
   Sections are separated by space and 1px hairlines, never by coloured
   bands; one full-bleed black band (the trust strip) and a black footer.
   Cormorant Garamond 400/500 (italics for quotes) + Inter 400/500.
   Mobile-first. No build step. Works from file://.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0a. Self-hosted faces — Cormorant Garamond + Inter, latin and latin-ext.
   Folded in from assets/fonts/*.css so the page needs ONE stylesheet, not three.
   Regenerate those files and re-fold if the faces ever change; font-display:swap
   is kept on every face.
   -------------------------------------------------------------------------- */
/* --- cormorant-garamond.css (folded in: one render-blocking stylesheet, and @font-face
   discovery happens in the first one) --- */
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --- inter.css (folded in: one render-blocking stylesheet, and @font-face
   discovery happens in the first one) --- */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-italic-100-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-italic-100-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-normal-100-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-normal-100-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   0. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* canvas */
  --paper:      #FBF9F5;  /* page ground */
  --white:      #FFFFFF;  /* icon / product tiles, header */
  --black:      #0B0B0B;  /* trust band, footer, solid buttons */
  --black-2:    #1A1A1A;  /* solid button hover */

  /* type on light */
  --ink:        #111111;  /* headings & body — 18:1 on paper */
  --ink-2:      #55524D;  /* muted body — 7.4:1 on paper */
  --ink-3:      #6F6B64;  /* captions/meta — 5.0:1 on paper, 5.3:1 on white */
  --ivory-tile: #F4EFE6;  /* ivory tile behind the product photographs (multiply) */

  /* type on black */
  --ivory:      #F3EFE7;  /* 17:1 on black */
  --ivory-2:    #BAB4A8;  /* 9:1 on black */

  /* gold — decorative (hairlines, monogram, rules) vs. text-safe */
  --gold:       #B8912A;  /* decorative on light: rules, marks, borders */
  --gold-text:  #866418;  /* gold as text on light — 5.0:1 on paper      */
  --gold-dark:  #D4AF37;  /* gold on black — 9.2:1                        */
  --champagne:  #E6C980;  /* hover/active on black — 12:1                 */

  /* hairlines */
  --line:       rgba(17, 17, 17, 0.12);
  --line-2:     rgba(17, 17, 17, 0.22);
  --line-gold:  rgba(184, 145, 42, 0.55);
  --line-ivory: rgba(243, 239, 231, 0.16);

  /* type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* fluid type scale (360px → 1440px) */
  --fs--1: 0.875rem;                                     /* 14px meta */
  --fs-0:  clamp(1.0625rem, 1.02rem + 0.15vw, 1.125rem); /* 17–18px body */
  --fs-1:  clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem);       /* lead */
  --fs-2:  clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);      /* h3 */
  --fs-3:  clamp(2rem, 1.6rem + 1.8vw, 3.25rem);         /* h2 */
  --fs-4:  clamp(2.5rem, 1.9rem + 3vw, 4.5rem);          /* h1 inner */
  --fs-5:  clamp(2.9rem, 2rem + 4.6vw, 6rem);            /* h1 hero */

  /* labels */
  --label-size: 0.6875rem;   /* 11px */
  --label-track: 0.18em;

  /* spacing */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --section: clamp(4rem, 2.5rem + 5.5vw, 8rem);          /* 64 → 128px */

  /* layout */
  --container: 80rem;
  --measure: 64ch;
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  --header-h: 3.75rem;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 320ms;
}

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); color-scheme: light; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-4); }
h2 { font-size: var(--fs-3); }
h3 { font-size: var(--fs-2); }
h4 { font-size: var(--fs-1); }
p { margin: 0 0 var(--s-5); }
p:last-child { margin-bottom: 0; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-2); transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); }
a:hover { color: var(--gold-text); text-decoration-color: currentColor; }
strong { font-weight: 500; color: var(--ink); }
em { font-style: italic; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
ul, ol { margin: 0 0 var(--s-5); padding-left: 1.25em; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.on-black :focus-visible, .site-footer :focus-visible { outline-color: var(--gold-dark); }
::selection { background: var(--ink); color: var(--paper); }

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

/* Skip link */
.skip-link {
  position: absolute; left: var(--s-4); top: -100%;
  background: var(--black); color: var(--ivory); padding: var(--s-3) var(--s-5);
  z-index: 1000; text-decoration: none;
  font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: 500;
}
.skip-link:focus { top: var(--s-4); }

/* --------------------------------------------------------------------------
   2. Layout helpers & typographic atoms
   -------------------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.62); }
.section--line { border-top: 1px solid var(--line); }
.section--flush { padding-block: 0 var(--section); }  /* e.g. the info panel directly under the hero */
.text-center { text-align: center; }
.measure { max-width: var(--measure); }
.measure--center { margin-inline: auto; }

/* Label — small uppercase letter-spaced text (nav, eyebrows, captions, prices) */
.label, .eyebrow {
  font-family: var(--font-body); font-size: var(--label-size); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase; line-height: 1.5;
}
.eyebrow { color: var(--gold-text); margin: 0 0 var(--s-4); }
.eyebrow--center { text-align: center; }
.on-black .eyebrow { color: var(--gold-dark); }

/* Heading rule — thin gold rule under a centred heading */
.rule { width: 2.5rem; height: 1px; background: var(--gold); border: 0; margin: var(--s-5) auto; }
.rule--left { margin-inline: 0; }

/* Section head — eyebrow + heading + optional intro, centred */
.section-head { text-align: center; max-width: 46rem; margin-inline: auto; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-head h1, .section-head h2 { margin-bottom: 0; }
.section-head .rule { margin-top: var(--s-5); margin-bottom: 0; }
.section-head__intro { margin-top: var(--s-5); font-size: var(--fs-1); line-height: 1.55; color: var(--ink-2); font-family: var(--font-display); }
.section-head--left { text-align: left; margin-inline: 0; }
.section-head--left .rule { margin-inline: 0; }

/* Ornament — hairline with the gold G at the centre */
.rule-ornament { display: flex; align-items: center; gap: var(--s-5); margin: var(--s-8) 0; }
.rule-ornament::before, .rule-ornament::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rule-ornament img { width: 1.1rem; height: auto; opacity: 0.9; }

/* Buttons — square-cornered, uppercase, letter-spaced */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: 1rem 2rem; min-height: 3rem;
  font-family: var(--font-body); font-size: var(--label-size); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase; text-decoration: none; line-height: 1;
  border: 1px solid var(--black); background: var(--black); color: var(--ivory);
  cursor: pointer; border-radius: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--black-2); border-color: var(--black-2); color: var(--champagne); }
.btn svg { width: 0.9rem; height: 0.9rem; fill: currentColor; flex: none; }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--black); color: var(--ivory); border-color: var(--black); }
.btn--ivory { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.btn--ivory:hover { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }
.btn--ghost-ivory { background: transparent; color: var(--ivory); border-color: rgba(243, 239, 231, 0.5); }
.btn--ghost-ivory:hover { border-color: var(--champagne); color: var(--champagne); background: transparent; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); align-items: center; }
.btn-row--center { justify-content: center; }

/* Text link — understated underlined small caps ("Discover", "Call the clinic") */
.link {
  display: inline-block; font-family: var(--font-body); font-size: var(--label-size); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink);
  text-decoration: none; padding-bottom: 0.3rem; border-bottom: 1px solid var(--ink);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link:hover { color: var(--gold-text); border-color: var(--gold); }
.on-black .link { color: var(--ivory); border-color: rgba(243, 239, 231, 0.6); }
.on-black .link:hover { color: var(--champagne); border-color: var(--champagne); }

/* --------------------------------------------------------------------------
   3. Header — slim, white, sticky; brand row + centred nav row on desktop,
      single row with a full-screen menu below 1024px.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);   /* solid: a backdrop-filter here would trap the fixed menu */
  border-bottom: 1px solid var(--line);
}
.header-bar {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  height: var(--header-h);
}
.brand { display: flex; align-items: center; justify-content: center; gap: 0.6rem; text-decoration: none; color: var(--ink); min-width: 0; grid-column: 2; }
.brand:hover { color: var(--ink); }
.brand__mark { width: 1.6rem; height: auto; flex: none; }
.brand__frog { display: block; flex: none; line-height: 0; }
.brand__frog img { height: 2.35rem; width: auto; }
.brand__wordmark { display: block; height: 1.2rem; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; }
.brand__sub { font-size: var(--label-size); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 0.35rem; line-height: 1.25; font-weight: 500; text-wrap: balance; }
.brand__sub .brand__est { white-space: nowrap; }
.brand__sub .brand__est { color: var(--gold-text); display: none; }
.header-utils { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-5); grid-column: 3; }
.header-est { display: none; }
.header-phone {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 2.75rem; height: 2.75rem; text-decoration: none; color: var(--ink);
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.header-phone:hover { color: var(--gold-text); }
.header-phone svg { width: 1rem; height: 1rem; fill: currentColor; flex: none; }
.header-phone__label { display: none; }
.nav-toggle {
  grid-column: 1; grid-row: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0; margin-left: -0.6rem;
  background: transparent; border: 0; color: var(--ink); cursor: pointer;
}
.nav-toggle:hover { color: var(--gold-text); }
.nav-toggle .icon-bars { width: 1.35rem; height: 1.35rem; }
.nav-toggle .icon-bars rect { fill: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); transform-origin: center; }
.nav-toggle[aria-expanded="true"] .icon-bars rect:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .icon-bars rect:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .icon-bars rect:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Full-screen menu (below 1024px) */
.site-nav {
  display: none;
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--paper);
  overflow-y: auto;
  padding: var(--s-6) var(--gutter) var(--s-8);
  text-align: center;
}
.site-nav.is-open { display: block; }
.no-js .site-nav { display: block; position: static; padding: 0 0 var(--s-4); }
.site-nav ul { list-style: none; margin: 0 auto; padding: 0; max-width: 24rem; }
.site-nav li { border-bottom: 1px solid var(--line); }
.site-nav a {
  display: block; padding: 0.85rem 0;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; text-decoration: none; color: var(--ink);
  line-height: 1.2;
}
.site-nav a:hover { color: var(--gold-text); }
.site-nav a[aria-current="page"] { color: var(--gold-text); }
.site-nav__foot { margin: var(--s-7) auto 0; max-width: 24rem; font-size: var(--fs--1); color: var(--ink-2); line-height: 1.7; }
.site-nav__foot .label { display: block; color: var(--gold-text); margin-bottom: var(--s-2); }
.site-nav__foot p { margin-bottom: var(--s-4); }
.site-nav__foot a { color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 1.5rem; }

/* Narrow screens: the brand column is the smallest here (shop pages put two
   utility icons in column 3), so the strapline is allowed to wrap and is
   tightened rather than running underneath the phone and bag. */
@media (max-width: 599px) {
  .header-utils { gap: var(--s-2); }
}
@media (max-width: 479px) {
  .brand { gap: 0.5rem; }
  .brand__frog img { height: 2.1rem; }
  .brand__wordmark { height: 1.05rem; }
  .brand__sub { font-size: 0.5625rem; letter-spacing: 0.06em; margin-top: 0.25rem; }
}
/* 320px: the shop pages carry a third icon, so claw back the width the
   strapline needs to break as two lines inside the 60px bar. */
@media (max-width: 359px) {
  .header-utils { gap: 0; }
  .nav-toggle { width: 2.25rem; margin-left: -0.45rem; }
  .header-phone, .header-utils .cart-toggle { width: 2.25rem; }
  .brand { gap: 0.4rem; }
  .brand__frog img { height: 1.9rem; }
  .brand__sub { font-size: 0.5rem; letter-spacing: 0.04em; }
}

@media (min-width: 600px) {
  .header-bar { grid-template-columns: 2.75rem minmax(0, 1fr) auto; }
  .brand { justify-content: flex-start; }
  .header-phone { width: auto; padding-inline: var(--s-2); }
  .header-phone__label { display: inline; }
  .brand__sub .brand__est { display: inline; }
}

@media (min-width: 1024px) {
  :root { --header-h: 4.25rem; }
  .header-bar { grid-template-columns: 1fr auto 1fr; gap: var(--s-6); }
  .nav-toggle { display: none; }
  .brand { grid-column: 1; justify-content: flex-start; gap: 0.75rem; }
  .brand__mark { width: 2rem; }
  .brand__name { font-size: 1.45rem; }
  .brand__frog img { height: 3rem; }
  .brand__wordmark { height: 1.5rem; }
  .brand__sub .brand__est { display: none; }
  .header-est { display: inline-block; grid-column: 2; color: var(--gold-text); }
  .header-utils { grid-column: 3; }
  .header-phone { padding-inline: 0; }
  .site-nav {
    display: block; position: static; inset: auto; overflow: visible; z-index: auto;
    padding: 0; background: transparent; border-top: 1px solid var(--line);
  }
  .site-nav > .container { width: min(100% - 2 * var(--gutter), 100rem); }
  .site-nav ul { display: flex; justify-content: center; align-items: stretch; max-width: none; flex-wrap: nowrap; }
  .site-nav li { border: 0; flex: none; }
  .site-nav a {
    position: relative; display: block; white-space: nowrap;
    padding: 0.95rem clamp(0.5rem, 0.05rem + 0.6vw, 1rem) 0.9rem;
    font-family: var(--font-body); font-size: clamp(0.6875rem, 0.6rem + 0.12vw, 0.72rem); font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
    transition: color var(--dur) var(--ease);
  }
  .site-nav a::after {
    content: ""; position: absolute; left: clamp(0.5rem, 0.05rem + 0.6vw, 1rem); right: clamp(0.5rem, 0.05rem + 0.6vw, 1rem); bottom: 0.55rem; height: 1px;
    background: var(--gold); transform: scaleX(0); transform-origin: center; transition: transform var(--dur) var(--ease);
  }
  .site-nav a:hover { color: var(--gold-text); }
  .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .site-nav a[aria-current="page"] { color: var(--gold-text); }
  .site-nav__foot { display: none; }
}

/* --------------------------------------------------------------------------
   3b. Hero image — the jewellers' campaign photographs, full-bleed at the top of the
       home page (hero-jewellers-v2-*) and the shop page (hero-jewellers-*); 1491×1055
       sources, never scaled above ~1.3× thanks to the height cap + object-fit cover,
       focal point top-centre so the model and the gold mark stay in frame
   -------------------------------------------------------------------------- */
.hero-image { margin: 0; line-height: 0; background: var(--black); }
.hero-image picture, .hero-image img { display: block; width: 100%; }
.hero-image img { height: auto; max-height: min(82vh, 60rem); object-fit: cover; object-position: 50% 8%; }
.hero-image + .hero { padding-top: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.hero-image + .page-title { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
/* ≥1600px keep the top edge and cap the height: on the shop page's campaign photograph this
   crops the bottom-right tagline out whole rather than mid-word, and on the home page it keeps
   the model and the gold mark in frame instead of letting the band grow too tall */
@media (min-width: 1600px) { .hero-image img { max-height: min(82vh, 60rem, 39vw); object-position: 50% 0; } }

/* --------------------------------------------------------------------------
   4. Hero — typographic, centred, ivory; gold monogram watermark ≤ 6%
      (logo-frog.svg — vector, so it stays sharp at any watermark size)
   -------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  text-align: center;
  padding-block: clamp(4.5rem, 3rem + 7vw, 10rem) clamp(4rem, 3rem + 5vw, 8rem);
}
.hero__mark {
  position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -52%);
  width: clamp(18rem, 44vw, 36rem); opacity: 0.055; pointer-events: none;
}
.hero__inner { max-width: 52rem; margin-inline: auto; }
.hero h1 { font-size: var(--fs-5); font-weight: 400; line-height: 1.02; margin: 0 0 var(--s-6); letter-spacing: 0.01em; }
.hero h1 .hero__sub { display: block; font-size: 0.5em; font-style: italic; font-weight: 400; margin-top: 0.35em; letter-spacing: 0.02em; color: var(--ink); }
.hero__lead { font-family: var(--font-display); font-size: var(--fs-1); line-height: 1.55; max-width: 60ch; margin-inline: auto; color: var(--ink-2); }
.hero__actions { margin-top: var(--s-7); }
.hero .rule { margin: var(--s-6) auto; }

/* --------------------------------------------------------------------------
   5. Inner-page title  (.page-title) — centred, hairline below
   -------------------------------------------------------------------------- */
.page-title {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) clamp(3rem, 2rem + 3vw, 5rem);
  border-bottom: 1px solid var(--line);
}
.page-title__mark {
  position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(12rem, 26vw, 20rem); opacity: 0.05; pointer-events: none;
}
.page-title h1 { margin-bottom: 0; }
.page-title__intro { margin: var(--s-5) auto 0; max-width: var(--measure); font-family: var(--font-display); font-size: var(--fs-1); line-height: 1.55; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   6. Prose  (.prose)
   -------------------------------------------------------------------------- */
.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1.4em; }
.prose > *:last-child { margin-bottom: 0; }
.prose--center { margin-inline: auto; text-align: center; }
.prose--reading { margin-inline: auto; text-align: left; }  /* long body copy: centred column, ragged-right text */
.returns-to { margin-bottom: var(--s-6); }
.lead { font-family: var(--font-display); font-size: var(--fs-1); line-height: 1.55; color: var(--ink); }
.muted { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   7. Pull-quote  (blockquote.pullquote) — centred italic serif
   -------------------------------------------------------------------------- */
.pullquote { margin: var(--s-8) auto; max-width: 44rem; text-align: center; padding: 0; }
.pullquote p {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--fs-2); line-height: 1.3; color: var(--ink); margin: 0; text-wrap: pretty;
}
.pullquote footer { margin-top: var(--s-5); font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--gold-text); }
.pullquote footer::before { content: ""; display: block; width: 2.5rem; height: 1px; background: var(--gold); margin: 0 auto var(--s-4); }

/* --------------------------------------------------------------------------
   8. Facts strip  (.facts) — hairline-separated cells; used on ivory
      (recognition) and inside the black band (.on-black) for the trust strip
   -------------------------------------------------------------------------- */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.facts li { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); text-align: center; }
.facts__label { display: block; font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--gold-text); margin-bottom: 0.6rem; }
.facts__text { display: block; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.3; color: var(--ink); text-wrap: balance; }
@media (min-width: 640px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts li { padding: var(--s-6) var(--s-5); border-bottom: 1px solid var(--line); }
  .facts li:nth-child(2n) { border-left: 1px solid var(--line); }
  /* three cells go straight to three columns — never a 2 + 1 orphan */
  .facts--3 { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .facts--3 li { border-bottom: 0; }
  .facts--3 li + li { border-left: 1px solid var(--line); }
}
@media (min-width: 1000px) {
  .facts { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
  .facts li { border-bottom: 0; padding: var(--s-6) var(--s-5); }
  .facts li + li { border-left: 1px solid var(--line); }
  .facts--3 { grid-template-columns: repeat(3, 1fr); }
}
/* Trust strip on black */
.band { background: var(--black); color: var(--ivory); }
.on-black { color: var(--ivory); }
.on-black h1, .on-black h2, .on-black h3, .on-black p, .on-black strong { color: var(--ivory); }
.on-black a { color: var(--ivory); text-decoration-color: rgba(243, 239, 231, 0.4); }
.on-black a:hover { color: var(--champagne); }
.band .facts, .band .facts li, .band .facts li + li, .band .facts li:nth-child(2n) { border-color: var(--line-ivory); }
.band .facts__label { color: var(--gold-dark); }
.band .facts__text { color: var(--ivory); }
.band--gold-line { border-top: 1px solid var(--gold); }
/* .band--headed — the trust strip with a visible heading above the facts
   ("Why G Mantella"); the plain .band has no padding of its own. */
.band--headed { padding-block: clamp(3rem, 2.2rem + 3vw, 5rem); }
.band--headed .section-head { margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3rem); }
.band--headed .section-head .rule { background: var(--gold-dark); }
.band .facts { border-top: 0; }
@media (min-width: 1000px) { .band .facts { border-bottom: 0; } }

/* --------------------------------------------------------------------------
   9. Tiles  (.tile) — a white card with generous padding and a small-caps
      caption beneath, holding a gold line icon of the jewellery. Used on the
      home welcome strip, the approach panel (.icon-panel) and the price list
      (.icon-stack); no photographs anywhere in this section.
   -------------------------------------------------------------------------- */
.tile { background: var(--white); padding: clamp(0.75rem, 0.4rem + 1.5vw, 1.75rem); display: flex; flex-direction: column; align-items: center; }
/* Icon tiles — gold line glyphs of the jewellery used for each piercing; they replaced the
   2010 site's client snapshots on the approach page and the price list. */
.tile__glyph { width: clamp(3rem, 7vw, 4.25rem); height: auto; color: var(--gold-text); display: block; margin: clamp(0.5rem, 2vw, 1.25rem) 0; }
.icon-stack { width: 100%; display: grid; gap: var(--s-4); }
.icon-panel { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--line); padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem); }
.icon-panel__glyph { width: clamp(4rem, 9vw, 5.75rem); height: auto; color: var(--gold-text); display: block; }
.icon-panel figcaption { margin-top: var(--s-5); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-2); font-weight: 500; text-align: center; }
.tile figcaption, .tile__caption { margin-top: var(--s-4); font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-2); text-align: center; }

/* Photo — single framed photo (approach / prices pages) */
.photo { margin: 0; display: flex; flex-direction: column; align-items: center; }
.photo img { width: 100%; height: auto; }
.photo figcaption { margin-top: var(--s-3); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-2); font-weight: 500; }

/* --------------------------------------------------------------------------
   10. Two-column text + photo  (.split)
   -------------------------------------------------------------------------- */
.split { display: grid; gap: var(--s-7); align-items: start; grid-template-columns: 1fr; }
@media (min-width: 820px) {
  .split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 5vw, 6rem); }
  .split--reverse > .split__media { order: -1; }
  .split__media { position: sticky; top: calc(var(--header-h) + 4rem); }
}
.split__media { display: flex; justify-content: center; }

/* --------------------------------------------------------------------------
   11. Definition list  (.def-list / .def) — hairline grid, no cards
   -------------------------------------------------------------------------- */
.def-list { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); margin: 0 0 var(--s-7); }
.def { padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.def__index { display: block; font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); color: var(--gold-text); margin-bottom: var(--s-3); }
.def__label { font-size: var(--fs-2); margin: 0 0 var(--s-3); }
.def__text { margin: 0; color: var(--ink-2); }
/* .def__link — the small gold "see the price for this placement" line that
   closes each definition; keeps the keyword-bearing cross-link out of the
   body copy without adding a second visual weight. */
.def__link { margin: var(--s-4) 0 0; font-size: var(--fs--1); }
.def__link a { color: var(--gold-text); text-decoration-color: var(--line-gold); }
.def__link a:hover { text-decoration-color: currentColor; }
@media (min-width: 640px) {
  .def-list { grid-template-columns: repeat(2, 1fr); column-gap: 0; }
  .def { padding: var(--s-6) var(--s-6); }
  .def:nth-child(2n) { border-left: 1px solid var(--line); }
  .def:nth-child(2n+1) { padding-left: 0; }
  .def:nth-child(2n) { padding-right: 0; }
}
@media (min-width: 1000px) {
  .def-list--3 { grid-template-columns: repeat(3, 1fr); }
  .def-list--3 .def { padding: var(--s-6) var(--s-6); border-left: 0; }
  .def-list--3 .def:nth-child(3n+1) { padding-left: 0; }
  .def-list--3 .def:nth-child(3n) { padding-right: 0; }
  .def-list--3 .def:nth-child(3n+2), .def-list--3 .def:nth-child(3n) { border-left: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   12. Price list  (.price-list) — label, dotted leader, gold serif price
   -------------------------------------------------------------------------- */
.price-list { list-style: none; margin: 0 0 var(--s-6); padding: 0; max-width: 40rem; }
.price-list > li { border-top: 1px solid var(--line); padding: 0.95rem 0; }
.price-list > li:last-child { border-bottom: 1px solid var(--line); }
.price-row { display: flex; align-items: baseline; gap: var(--s-3); }
.price-row__label { font-weight: 500; color: var(--ink); flex: 0 1 auto; min-width: 0; }
.price-row__leader { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-0.35em); min-width: 1rem; }
.price-row__value { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-text); white-space: nowrap; }
.price-row__value small { font-family: var(--font-body); font-size: var(--label-size); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-right: 0.4rem; }
.price-group { list-style: none; margin: var(--s-2) 0 0; padding: 0 0 0 var(--s-5); }
.price-group li { padding: 0.35rem 0; }
.price-group .price-row__label { font-weight: 400; color: var(--ink-2); }

/* 12b. Price table  (table.price-table) — the same hairline/gold-serif language
   as .price-list, but a real <table> so the price list extracts cleanly (one
   row per priced item, each <tr> carrying a stable id for deep links and for
   the Offer nodes in the page's JSON-LD). "from" is plain text in the price
   cell, never a visually-hidden hack.
   <table class="price-table"><caption>…</caption>
     <thead><tr><th scope="col">Piercing</th><th scope="col">Price</th></tr></thead>
     <tbody><tr id="nose"><th scope="row">Nose piercing</th><td>£19.99</td></tr>
       <tr id="…" class="price-table__sub"><th scope="row">9ct gold, a pair</th>
         <td><span class="price-table__from">from</span>£38.99</td></tr>…</tbody></table> */
.price-table { width: 100%; max-width: 40rem; border-collapse: collapse; margin: var(--s-7) 0 var(--s-5); }
.price-table caption { text-align: left; font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; line-height: 1.4; color: var(--ink-3); padding-bottom: var(--s-4); }
.price-table th, .price-table td { padding: 0.85rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.price-table thead th { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: 500; color: var(--gold-text); border-bottom: 1px solid var(--line-gold); }
.price-table thead th:first-child { text-align: left; }
.price-table thead th:last-child { text-align: right; }
.price-table tbody th { text-align: left; font-weight: 500; color: var(--ink); padding-right: var(--s-4); }
.price-table tbody td { text-align: right; font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-text); white-space: nowrap; }
.price-table__from { font-family: var(--font-body); font-size: var(--label-size); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-right: 0.4rem; }
.price-table__group th { font-family: var(--font-display); font-size: var(--fs-1); color: var(--ink); border-bottom-color: var(--line-2); }
.price-table__group td { border-bottom-color: var(--line-2); }
.price-table__sub th { font-weight: 400; color: var(--ink-2); padding-left: var(--s-5); }
/* .meta-note — a small grey freshness / qualifier line under a block
   ("Prices correct as of September 2026"). Used on our_prices and aftercare_info. */
/* 320–430px: "Male and female genitalia" + "from £40.00" is the widest row;
   trim the indent, the gutter and the price size so it never touches. */
@media (max-width: 430px) {
  .price-table__sub th { padding-left: var(--s-3); }
  .price-table tbody th { padding-right: var(--s-3); }
  .price-table tbody td { font-size: 1.2rem; }
  .price-table__from { margin-right: 0.3rem; letter-spacing: 0.06em; }
}
@media (max-width: 359px) {
  .price-table__sub th { padding-left: 0; }
  .price-table tbody td { font-size: 1.1rem; }
}
.meta-note { font-size: var(--fs--1); color: var(--ink-3); margin: 0 0 var(--s-5); }

/* 13b. Numbered steps  (ol.steps) — the checklist's hairline rows with a gold
   serif number instead of a tick, for instructions that happen in order.
   <ol class="steps"><li>Bathe the piercing twice daily…</li>…</ol> */
.steps { list-style: none; counter-reset: step; margin: var(--s-6) 0 var(--s-5); padding: 0; border-top: 1px solid var(--line); }
.steps li { position: relative; counter-increment: step; padding: 0.9rem 0 0.9rem 2.6rem; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0.95rem; font-family: var(--font-display); font-size: 1rem; line-height: 1; color: var(--gold-text); letter-spacing: 0.04em; }

/* --------------------------------------------------------------------------
   13. Checklist  (ul.checklist) — hairline rows with a gold tick
   -------------------------------------------------------------------------- */
.checklist { list-style: none; margin: 0 0 var(--s-5); padding: 0; border-top: 1px solid var(--line); }
.checklist li { position: relative; padding: 0.8rem 0 0.8rem 2.2rem; border-bottom: 1px solid var(--line); }
.checklist li::before { content: ""; position: absolute; left: 0.3rem; top: 1.15rem; width: 0.6rem; height: 0.32rem; border-left: 1px solid var(--gold-text); border-bottom: 1px solid var(--gold-text); transform: rotate(-45deg); }
.bullets { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.bullets li { position: relative; padding-left: 1.4rem; margin-bottom: 0.6rem; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 0.3rem; height: 0.3rem; background: var(--gold); transform: rotate(45deg); }

/* --------------------------------------------------------------------------
   14. Jewellery strip  (.jewel-strip) — ten of the jewellers' own 300px product
       photographs on ivory tiles, each capped at 128px (mix-blend-mode: multiply
       drops the shots' white ground), small-caps caption beneath. Two columns on
       phones, five from 600px, ten from 1100px — always a full final row.
   -------------------------------------------------------------------------- */
.jewel-figure { margin: 0; }
.jewel-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
@media (max-width: 599px) { .jewel-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 600px) { .jewel-strip { grid-template-columns: repeat(5, 1fr); gap: var(--s-4); } }
@media (min-width: 1100px) { .jewel-strip { grid-template-columns: repeat(10, 1fr); gap: var(--s-4); } }
.jewel-strip li { background: var(--ivory-tile); padding: 0.5rem 0.35rem; display: flex; justify-content: center; transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.jewel-strip li:hover { box-shadow: inset 0 0 0 1px var(--line-gold); background: var(--white); }
.jewel-strip img { width: 100%; max-width: 128px; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }  /* the jewellers' own 300px product photographs */
.jewel-strip__caption { margin: var(--s-4) 0 0; text-align: center; color: var(--gold-text); }
.jewel-figure figcaption { margin-top: var(--s-6); text-align: center; font-family: var(--font-display); font-style: italic; font-size: var(--fs-1); color: var(--ink); }
.jewel-figure figcaption strong { font-weight: 400; }

/* --------------------------------------------------------------------------
   16. Call band  (.call-band) — ivory, gold hairlines, centred
   -------------------------------------------------------------------------- */
.call-band { border-top: 1px solid var(--gold); border-bottom: 1px solid var(--line); text-align: center; padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.call-band h2 { margin-bottom: var(--s-4); }
.call-band__phone { display: inline-block; font-family: var(--font-display); font-size: var(--fs-3); font-weight: 400; color: var(--ink); text-decoration: none; line-height: 1.1; letter-spacing: 0.02em; }
.call-band__phone:hover { color: var(--gold-text); }
.call-band__meta { margin-top: var(--s-5); color: var(--ink-2); font-size: var(--fs--1); line-height: 1.8; }
.call-band__meta .label { color: var(--gold-text); display: block; margin-bottom: 0.2rem; }
.call-band .btn-row { margin-top: var(--s-6); }
.call-band__grid { display: grid; gap: var(--s-6); max-width: 40rem; margin: var(--s-6) auto 0; }
@media (min-width: 640px) { .call-band__grid { grid-template-columns: 1fr 1fr; gap: 0; } .call-band__grid > * + * { border-left: 1px solid var(--line); } }

/* --------------------------------------------------------------------------
   16b. Info panel  (.info-panel) — three hairline cells with 1px gold line
        icons: hours / telephone / address. Sits directly under the hero.
   <div class="info-panel">
     <div class="info-panel__cell"><svg class="info-panel__icon">…</svg>
       <span class="label">Opening hours</span>
       <p class="info-panel__value">Monday – Saturday 9:00am – 5:00pm</p>
       <p class="info-panel__sub">Sunday closed</p></div> ×3
   </div>
   -------------------------------------------------------------------------- */
.info-panel { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line-gold); border-bottom: 1px solid var(--line-gold); }
.info-panel__cell { padding: var(--s-6) var(--s-4); text-align: center; }
.info-panel__cell + .info-panel__cell { border-top: 1px solid var(--line); }
.info-panel__icon { width: 1.75rem; height: 1.75rem; margin: 0 auto var(--s-4); fill: none; stroke: var(--gold); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.info-panel .label { color: var(--gold-text); }
.info-panel__value { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.3; color: var(--ink); margin: 0.6rem 0 0; text-wrap: balance; }
.info-panel__value a { text-decoration: none; }
.info-panel__value a:hover { color: var(--gold-text); }
.info-panel__sub { margin: 0.5rem 0 0; font-size: var(--fs--1); color: var(--ink-2); }
.info-panel__sub .link { margin-top: 0.35rem; }
@media (min-width: 820px) {
  .info-panel { grid-template-columns: repeat(3, 1fr); }
  .info-panel__cell { padding: var(--s-7) var(--s-6); }
  .info-panel__cell + .info-panel__cell { border-top: 0; border-left: 1px solid var(--line); }
}

/* Index list  (.index-list) — hairline index of related pages
   <ul class="index-list"><li><a href="…"><span class="label">Choosing a clinic</span>
     <span class="index-list__title">Our Advice</span><span class="index-list__cta">Discover</span></a></li>…</ul> */
.index-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.index-list li { border-bottom: 1px solid var(--line); }
.index-list a { display: grid; gap: 0.35rem; padding: var(--s-6) var(--s-3); text-align: center; text-decoration: none; color: var(--ink); transition: color var(--dur) var(--ease); }
.index-list a:hover { color: var(--gold-text); }
.index-list a .label { color: var(--ink-2); }
.index-list__title { font-family: var(--font-display); font-size: var(--fs-2); line-height: 1.2; }
.index-list__cta { margin-top: var(--s-3); font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--gold-text); }
@media (min-width: 720px) {
  .index-list { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .index-list--2 { grid-template-columns: repeat(2, 1fr); }
  .index-list li { border-bottom: 0; }
  .index-list li + li { border-left: 1px solid var(--line); }
  .index-list a { padding: var(--s-7) var(--s-5); }
}

/* --------------------------------------------------------------------------
   17. Contact: info grid, hours table
   -------------------------------------------------------------------------- */
.info-grid { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.info-card { padding: var(--s-7) 0; border-bottom: 1px solid var(--line); text-align: center; }
@media (min-width: 820px) {
  .info-grid { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .info-card { border-bottom: 0; padding: var(--s-8) var(--s-6); }
  .info-card + .info-card { border-left: 1px solid var(--line); }
}
.info-card h2 { font-size: var(--fs-2); margin-bottom: var(--s-4); }
.info-card p { color: var(--ink-2); }
.info-card .link { margin-top: var(--s-4); }
.info-card__note { margin: var(--s-4) 0 0; font-size: var(--fs--1); color: var(--ink-3); }
.big-phone { display: inline-block; font-family: var(--font-display); font-size: var(--fs-3); color: var(--ink); text-decoration: none; line-height: 1.1; margin-top: var(--s-3); }
.big-phone:hover { color: var(--gold-text); }
.addr { font-family: var(--font-display); font-size: var(--fs-1); line-height: 1.4; color: var(--ink); }
.hours { width: 100%; border-collapse: collapse; margin: var(--s-4) auto 0; max-width: 20rem; }
.hours th, .hours td { text-align: left; padding: 0.6rem 0; border-top: 1px solid var(--line); font-weight: 400; color: var(--ink); font-size: var(--fs--1); }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 1px solid var(--line); }
.hours td { text-align: right; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); white-space: nowrap; }
.hours td.closed { color: var(--ink-2); font-style: italic; }
.hours caption { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--gold-text); font-weight: 500; padding-bottom: var(--s-3); }

/* 17b. Fact strip  (ul.fact-strip) — one line of dot-separated micro-type
   under the hero: the five things a first-time visitor asks for.
   <ul class="fact-strip"><li>Est. 1982</li><li>31 The Town, Enfield EN2 6LU</li>…</ul> */
.fact-strip { list-style: none; margin: 0; padding: var(--s-5) 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-2) var(--s-4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: 500; color: var(--ink-2); }
.fact-strip li { display: inline-flex; align-items: center; gap: var(--s-4); }
.fact-strip li + li::before { content: ""; width: 0.25rem; height: 0.25rem; background: var(--gold); transform: rotate(45deg); flex: none; }
.fact-strip a { color: inherit; text-decoration: none; }
.fact-strip a:hover { color: var(--gold-text); }
.fact-strip strong { color: var(--gold-text); font-weight: 500; }

/* 17c. FAQ list  (.faq-list) — hairline rows, question as a serif h2 with its
   own id, answer in body copy directly beneath. No disclosure widget: the
   answers must be in the rendered text, not behind a click. */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.faq-item h2 { font-size: var(--fs-2); margin: 0 0 var(--s-4); }
.faq-item p { margin: 0 0 var(--s-4); max-width: var(--measure); }
.faq-item p:last-child { margin-bottom: 0; }
.faq-item ul { margin: 0 0 var(--s-4); padding-left: 1.2em; color: var(--ink-2); }
.faq-item ul:last-child { margin-bottom: 0; }
.faq-index { list-style: none; margin: 0 0 var(--s-7); padding: 0; display: grid; gap: var(--s-2); }
.faq-index a { font-size: var(--fs--1); color: var(--ink-2); text-decoration-color: var(--line); }
.faq-index a:hover { color: var(--gold-text); }
@media (min-width: 720px) { .faq-index { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-6); } }

/* --------------------------------------------------------------------------
   18. Footer — black, ivory type, gold hairline
   -------------------------------------------------------------------------- */
.site-footer { background: var(--black); color: var(--ivory-2); padding-block: var(--s-9) var(--s-6); font-size: var(--fs--1); border-top: 1px solid var(--gold); }
.site-footer a { color: var(--ivory); text-decoration: none; }
.site-footer a:hover { color: var(--champagne); }
.footer-top { text-align: center; padding-bottom: var(--s-7); border-bottom: 1px solid var(--line-ivory); }
.footer-brand { display: inline-flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.footer-brand img { width: 11rem; height: auto; }
.footer-brand__name { font-family: var(--font-display); font-size: 2rem; color: var(--ivory); line-height: 1; letter-spacing: 0.02em; }
.footer-brand__sub { font-size: var(--label-size); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dark); font-weight: 500; }
.footer-brand__est { white-space: nowrap; }
.footer-nav { padding: var(--s-6) 0; border-bottom: 1px solid var(--line-ivory); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-5); }
.footer-nav a { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: 500; }
.footer-nav a[aria-current="page"] { color: var(--champagne); }
.footer-grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; padding: var(--s-7) 0; border-bottom: 1px solid var(--line-ivory); text-align: center; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.footer-heading { font-family: var(--font-body); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--gold-dark); font-weight: 500; margin: 0 0 var(--s-3); }
.footer-grid address, .footer-grid p { color: var(--ivory-2); line-height: 1.7; margin: 0; }
.footer-hours { list-style: none; margin: 0 auto; padding: 0; max-width: 16rem; }
.footer-hours li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 0.3rem 0; }
.footer-hours span:last-child { color: var(--ivory); }
.footer-phone { display: inline-block; font-family: var(--font-display); font-size: 1.6rem; color: var(--ivory); line-height: 1.1; }
.footer-facts { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ivory-2); }
.footer-facts li { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-facts li::before { content: ""; width: 0.25rem; height: 0.25rem; background: var(--gold-dark); transform: rotate(45deg); flex: none; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; align-items: center; padding-top: var(--s-5); font-size: 0.78rem; letter-spacing: 0.02em; }
.footer-bottom .footer-est { color: var(--gold-dark); white-space: nowrap; }
/* 320px: the tracking is what pushes the strapline onto a second line. */
@media (max-width: 359px) { .footer-brand__sub { letter-spacing: 0.12em; } }

/* --------------------------------------------------------------------------
   19. Reveal-on-scroll (subtle). JS adds .is-in as elements enter the viewport.
       Only active when the html element has .js-reveal (never under
       reduced-motion or automation, so nothing is ever hidden).
   -------------------------------------------------------------------------- */
.js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity 480ms var(--ease), transform 480ms var(--ease); }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   20. SHOP components (shop.html — built later; the gold-earring shop fed by
       G. Mantella Jewellers). All square-cornered, white tiles, gold prices.
   -------------------------------------------------------------------------- */

/* 20a. Filter bar — a row of pill-less "tabs" (metal / type) or a <select>.
   <div class="filter-bar">
     <div class="filter-bar__group" role="group" aria-label="Metal">
       <button class="filter" aria-pressed="true">All</button>
       <button class="filter">9ct gold</button> …
     </div>
     <label class="filter-select"><span>Sort</span><select>…</select></label>
   </div> */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: var(--s-7); }
.filter-bar__group { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.filter { background: none; border: 0; padding: 0.35rem 0; cursor: pointer; font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.filter:hover { color: var(--ink); }
.filter[aria-pressed="true"] { color: var(--gold-text); border-bottom-color: var(--gold); }
.filter-select { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: 500; color: var(--ink-2); }
.filter-select select { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); padding: 0.35rem 1.5rem 0.35rem 0; border-radius: 0; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1'/></svg>"); background-repeat: no-repeat; background-position: right 0.1rem center; }

/* 20b. Product grid — image on white, centred small-caps name, metal, price.
   <ul class="product-grid">                     (.product-grid--4: 2 → 4 columns, for a featured row)
     <li class="product">
       <a class="product__link" href="product.html?ref=REF">
         <span class="product__media"><picture><source type="image/webp" srcset="…thumb.webp"><img src="….jpg" alt="…" width="300" height="300" loading="lazy"></picture></span>
         <span class="product__name">Twist hoop earrings</span>
         <span class="product__metal">9ct yellow gold</span>
         <span class="product__price">£145.00</span>
       </a>
     </li> …
   </ul> */
.product-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
@media (min-width: 720px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--s-5); } }
@media (min-width: 1100px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); } }
@media (min-width: 720px) { .product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); } }
.product-grid__more { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.product { text-align: center; }
.product__link { display: block; text-decoration: none; color: var(--ink); }
.product__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: var(--white); padding: clamp(1rem, 0.5rem + 3vw, 3rem); margin-bottom: var(--s-4); transition: box-shadow var(--dur) var(--ease); }
.product__media picture { display: contents; }
.product__media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur) var(--ease); }
.product__link:hover .product__media { box-shadow: inset 0 0 0 1px var(--line-gold); }
.product__link:hover .product__media img { transform: scale(1.03); }
.product__name { display: block; font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink); line-height: 1.6; text-wrap: balance; }
.product__metal { display: block; font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--ink-2); margin-top: 0.3rem; }
.product__price { display: block; font-family: var(--font-display); font-size: 1.2rem; color: var(--gold-text); margin-top: 0.4rem; }
.product__link:hover .product__name { color: var(--gold-text); }
.product__ref { display: block; margin-top: 0.4rem; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* 20c. Product detail — image column + details column (name, metal, price,
   quantity, add-to-cart, hairline-separated accordion sections).
   <article class="pdp">
     <div class="pdp__media"><img …></div>
     <div class="pdp__info">
       <p class="eyebrow">9ct yellow gold</p>
       <h1 class="pdp__title">…</h1>
       <p class="pdp__price">£145.00</p>
       <p class="pdp__desc">…</p>
       <form class="pdp__buy"> <label class="qty"><span>Qty</span><input type="number" …></label>
         <button class="btn" type="submit">Add to cart</button></form>
       <details class="pdp__section"><summary>Details</summary>…</details>
     </div>
   </article> */
.pdp { display: grid; gap: var(--s-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .pdp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 5vw, 6rem); } .pdp__media { position: sticky; top: calc(var(--header-h) + 4rem); } }
.pdp__media { background: var(--white); padding: clamp(1.5rem, 1rem + 4vw, 4rem); display: flex; align-items: center; justify-content: center; aspect-ratio: 1; }
.pdp__media img { width: 100%; height: 100%; object-fit: contain; }
.pdp__title { font-size: var(--fs-3); margin-bottom: var(--s-3); }
.pdp__price { font-family: var(--font-display); font-size: var(--fs-2); color: var(--gold-text); margin: 0 0 var(--s-5); }
.pdp__desc { color: var(--ink-2); max-width: 48ch; }
.pdp__buy { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: stretch; margin: var(--s-6) 0; }
.qty { display: inline-flex; align-items: center; gap: var(--s-3); border: 1px solid var(--ink); padding: 0 var(--s-4); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: 500; }
.qty input { width: 3rem; border: 0; background: transparent; font: inherit; font-size: 1rem; text-align: center; padding: 0.75rem 0; color: var(--ink); }
.pdp__section { border-top: 1px solid var(--line); }
.pdp__section:last-of-type { border-bottom: 1px solid var(--line); }
.pdp__section summary { cursor: pointer; list-style: none; padding: var(--s-4) 0; font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.pdp__section summary::-webkit-details-marker { display: none; }
.pdp__section summary::after { content: "+"; font-family: var(--font-display); font-size: 1.25rem; color: var(--gold-text); }
.pdp__section[open] summary::after { content: "−"; }
.pdp__section > *:not(summary) { color: var(--ink-2); padding-bottom: var(--s-4); }

/* 20d. Cart drawer — slides in from the right; line items; black Checkout.
   <div class="cart-scrim" hidden></div>
   <aside class="cart" id="cart" aria-label="Your cart" aria-hidden="true">
     <header class="cart__head"><h2>Your cart</h2><button class="cart__close" aria-label="Close">×</button></header>
     <ul class="cart__items">
       <li class="cart-item">
         <img class="cart-item__img" …>
         <div class="cart-item__body">
           <span class="cart-item__name">…</span><span class="cart-item__metal">…</span>
           <div class="cart-item__row"><span class="cart-item__qty">Qty 1</span><span class="cart-item__price">£145.00</span></div>
           <button class="cart-item__remove">Remove</button>
         </div>
       </li> …
     </ul>
     <footer class="cart__foot">
       <div class="cart__total"><span>Subtotal</span><span>£290.00</span></div>
       <a class="btn cart__checkout" href="…">Checkout</a>
       <p class="cart__note">…</p>
     </footer>
   </aside>
   JS toggles .is-open on .cart and removes [hidden] from .cart-scrim. */
.cart-scrim { position: fixed; inset: 0; z-index: 150; background: rgba(11, 11, 11, 0.5); }
.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 160; width: min(100%, 26rem);
  background: var(--paper); color: var(--ink); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 400ms var(--ease); visibility: hidden;
  border-left: 1px solid var(--line);
}
.cart.is-open { transform: none; visibility: visible; }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--line); }
.cart__head h2 { font-size: var(--fs-2); margin: 0; }
.cart__close { width: 2.75rem; height: 2.75rem; border: 0; background: transparent; cursor: pointer; font-family: var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--ink); margin-right: -0.75rem; }
.cart__close:hover { color: var(--gold-text); }
.cart__items { list-style: none; margin: 0; padding: 0 var(--s-6); flex: 1; overflow-y: auto; }
.cart-item { display: grid; grid-template-columns: 5rem 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.cart-item__img { width: 5rem; height: 5rem; object-fit: contain; background: var(--white); padding: 0.5rem; }
.cart-item__body { display: flex; flex-direction: column; gap: 0.25rem; }
.cart-item__name { font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase; }
.cart-item__metal { font-family: var(--font-display); font-style: italic; color: var(--ink-2); }
.cart-item__row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.25rem; }
.cart-item__qty { font-size: var(--fs--1); color: var(--ink-2); }
.cart-item__price { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold-text); }
.cart-item__remove { align-self: flex-start; background: none; border: 0; padding: 0.25rem 0 0; cursor: pointer; font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.cart-item__remove:hover { color: var(--ink); border-color: var(--ink); }
.cart__empty { padding: var(--s-8) 0; text-align: center; color: var(--ink-2); font-family: var(--font-display); font-style: italic; font-size: var(--fs-1); }
.cart__foot { padding: var(--s-5) var(--s-6) var(--s-6); border-top: 1px solid var(--line); background: var(--paper); }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-4); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: 500; }
.cart__total span:last-child { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.cart__checkout { width: 100%; }
.cart__note { margin: var(--s-3) 0 0; font-size: 0.78rem; color: var(--ink-2); text-align: center; }
/* Header cart trigger (place inside .header-utils on shop pages) */
.cart-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: none; border: 0; cursor: pointer; color: var(--ink); }
.cart-toggle svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cart-toggle__count { position: absolute; top: 0.35rem; right: 0.2rem; min-width: 1rem; height: 1rem; padding: 0 0.25rem; background: var(--black); color: var(--ivory); font-size: var(--label-size); font-weight: 500; line-height: 1rem; text-align: center; }

/* --------------------------------------------------------------------------
   20e. Notice page (404) — centred serif message with a hairline and links
   -------------------------------------------------------------------------- */
.notice { text-align: center; padding-block: clamp(5rem, 3rem + 8vw, 11rem); }
.notice h1 { margin-bottom: 0; }
.notice p { max-width: 44ch; margin-inline: auto; color: var(--ink-2); }
.notice .btn-row { margin-top: var(--s-7); }
/* .notice-index — the 404 signpost: every surviving page, named, with a line
   saying what is on it, so a stale inbound link lands somewhere useful. */
.notice .eyebrow { margin-top: var(--s-8); }
.notice-index { list-style: none; margin: 0 auto; padding: 0; max-width: 44ch; text-align: left; border-top: 1px solid var(--line); }
.notice-index li { padding: 0.7rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs--1); }
.notice-index a { font-weight: 500; color: var(--ink); }

/* --------------------------------------------------------------------------
   21. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .cart { transition: none; }
}
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .site-header { position: static; background: #fff; }
  .nav-toggle, .skip-link, .hero__mark, .page-title__mark, .site-nav, .cart, .cart-scrim { display: none !important; }
  .band, .site-footer { background: #fff !important; color: #000 !important; border-color: #999; }
  .band .facts__text, .site-footer a, .site-footer, .footer-brand__name { color: #000 !important; }
  .btn { background: #fff !important; color: #000 !important; border: 1px solid #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   21. Jewellers' frog lockup (transparent gold cut from the supplied logo) —
       used on the home shop teaser, shop title band, product and order pages
   -------------------------------------------------------------------------- */
.jewellers-mark { margin: 0 0 var(--s-4); line-height: 0; }
.jewellers-mark img { display: block; width: clamp(11rem, 18vw, 16rem); height: auto; margin-inline: auto; }
.page-title--jewellers .page-title__mark { display: none; }  /* the jewellers' lockup replaces the clinic watermark here */
.jewellers-mark--sm img { width: clamp(7rem, 9vw, 8.5rem); }
.jewellers-mark--left img { margin-inline: 0; margin-bottom: var(--s-3); }