/* ==========================================================================
   Paris Jewellers — concept site stylesheet

   THIS IS NOT A TIER DEMO. It is a Standard-tier build made for a real
   business, Paris Jewellers of Paris, Ontario, to be shown to them.

   This branch is an ORPHAN. It shares no history with `main`, where the
   fictional tier demos live, and no history with the other concept branches.
   Nothing here imports from anywhere else and nothing else imports from here.

   WHY THIS LOOKS NOTHING LIKE THE OTHER CONCEPTS. A prospect who can tell he
   was sent a template feels like one of a list. Gas Fire Heat got ember and
   coal because that business sells fire. A goldsmith sells patience and a
   steady hand, so this one is quiet: a lot of paper, thin rules, a serif that
   behaves itself, and brass used the way a jeweller uses it — sparingly, and
   never where it has to carry words.

   THE SEARCH PROBLEM THIS SITE EXISTS TO FIX. Searching "Paris Jewellers"
   returns a national chain of the same name based in Alberta. The Paris,
   Ontario shop is an unrelated independent and currently loses its own name.
   Everything here is built to rank for "Paris Ontario" alongside the trade:
   the town is in the title of every page, the address is marked up in the
   footer, and each service has its own URL to compete on.

   CONTRAST (measured, not assumed — against --bone #FAF7F2):
     --ink        #1C1A17   16.3:1   body text
     --ink-soft   #55504A    7.5:1   muted text
     --ink-faint  #6B635B    5.5:1   small meta text
     --brass-ink  #7A5A12    6.0:1   links, accent text, placeholder marks
     white on --brass-ink    6.4:1   primary button
     white on --ink         17.4:1   footer and dark sections

   Against --bone-alt #F2ECE3 the same four measure 14.8 / 6.8 / 5.0 / 5.4,
   so every one still clears AA on the alternating section ground.

   --brass #C9A227 measures 2.3:1 and FAILS AA for text at any size. It is
   decorative ONLY: hairlines, icon strokes, the diamond mark, the dashed
   placeholder borders. No words are ever set in it.

   PLACEHOLDERS ARE THE ARGUMENT, NOT AN OVERSIGHT. Nothing about this
   business was invented. Paris Jewellers publishes a phone number, an email,
   an address and a list of services, and that is all this site claims. Where
   a finished site would carry hours, prices, a founding year, the goldsmith's
   name or a customer's words, this one carries a visible .tbc mark instead,
   because the only honest alternatives were to omit them or to make them up.
   The blanks double as the intake checklist for the first phone call. Do not
   "finish" them by guessing.
   ========================================================================== */

:root {
  --ink:        #1C1A17;
  --ink-deep:   #131110;
  --ink-mid:    #302B25;
  --bone:       #FAF7F2;
  --bone-alt:   #F2ECE3;
  --surface:    #FFFFFF;
  --ink-soft:   #55504A;
  --ink-faint:  #6B635B;
  --brass:      #C9A227;
  --brass-ink:  #7A5A12;
  --brass-lite: #E8C766;
  --brass-tint: #F6EEDA;
  --border:     #E3DACD;
  --border-firm:#CBBEA9;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --radius: 2px;
  --shell: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 400;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.4rem); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.7vw, 2.9rem); font-weight: 500; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.01em; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brass-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img, svg { max-width: 100%; }

/* Keyboard focus is an outline, never a shadow — a shadow disappears against
   a busy ground and cannot be seen at all in forced-colours mode. */
:focus-visible {
  outline: 3px solid var(--brass-ink);
  outline-offset: 3px;
  border-radius: 1px;
}

.container { width: min(100% - 40px, var(--shell)); margin-inline: auto; }
.container--narrow { width: min(100% - 40px, 760px); margin-inline: auto; }

.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 200;
  background: var(--ink); color: #fff; padding: 11px 20px;
  border-radius: var(--radius); font-weight: 600; letter-spacing: 0.02em;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; text-decoration: none; }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-ink);
  margin: 0 0 16px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--brass); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { content: ""; width: 26px; height: 1px; background: var(--brass); }

.section-head { max-width: 660px; margin-bottom: clamp(30px, 4.6vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }
.lede { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.22rem); color: var(--ink-soft); }

.rule {
  width: 46px; height: 1px; background: var(--brass);
  margin: 22px 0; border: 0;
}
.rule--center { margin-inline: auto; }

/* ---------- The blanks ---------- */
.tbc {
  background: var(--brass-tint);
  border-bottom: 2px dashed var(--brass);
  color: var(--brass-ink);
  padding: 0 4px;
  font-style: italic;
}
.tbc-block {
  border: 2px dashed var(--brass);
  background: var(--brass-tint);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px);
}
.tbc-block__tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brass-ink); margin-bottom: 13px;
}
.tbc-block__tag svg { width: 15px; height: 15px; }
.tbc-block h3 { font-size: 1.2rem; margin-bottom: 9px; }
.tbc-block p { color: var(--ink-soft); font-size: 0.97rem; }
.tbc-block p + p { margin-top: 11px; }
.tbc-block ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: 0.95rem; }
.tbc-block li { margin-bottom: 6px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.04em; line-height: 1;
  padding: 16px 30px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.16s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--primary { background: var(--brass-ink); color: #fff; }
.btn--primary:hover { background: #5E4509; color: #fff; text-decoration: none; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-firm); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--bone-alt); color: var(--ink); text-decoration: none; transform: translateY(-2px); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn--outline-light:hover { border-color: #fff; color: #fff; text-decoration: none; transform: translateY(-2px); }
.btn--lg { padding: 18px 34px; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 247, 242, 0.94);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; }
.nav__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.nav__brand:hover { text-decoration: none; }
.nav__brand svg { width: 27px; height: 27px; color: var(--brass); flex: none; }
.wordmark {
  display: flex; flex-direction: column; line-height: 1.12;
  font-family: var(--font-display); font-size: 1.42rem; font-weight: 600;
  letter-spacing: 0.01em;
}
.wordmark small {
  font-family: var(--font-body); font-size: 0.63rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint);
  margin-top: 3px;
}
.nav__menu { display: flex; align-items: center; gap: 34px; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a {
  color: var(--ink); font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav__links a:hover { color: var(--brass-ink); text-decoration: none; border-bottom-color: var(--brass); }
.nav__links a[aria-current="page"] { color: var(--brass-ink); border-bottom-color: var(--brass); }
.nav__toggle {
  display: none; background: transparent; border: 1px solid var(--border-firm);
  border-radius: var(--radius); width: 46px; height: 46px;
  cursor: pointer; color: var(--ink); padding: 0; place-items: center;
}
.nav__toggle svg { width: 21px; height: 21px; }
.nav__toggle .icon-close { display: none; }
.nav[data-open="true"] .nav__toggle .icon-open { display: none; }
.nav[data-open="true"] .nav__toggle .icon-close { display: block; }

@media (max-width: 940px) {
  .nav__toggle { display: grid; }
  .nav__menu {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bone); border-bottom: 1px solid var(--border);
    padding: 10px 20px 22px;
    transform: translateY(-10px); opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .nav[data-open="true"] .nav__menu { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a { padding: 15px 0; border-bottom: 1px solid var(--border); }
  .nav__cta { padding-top: 18px; }
  .nav__cta .btn { width: 100%; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(58px, 8vw, 104px) 0; }
.section--alt { background: var(--bone-alt); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink p { color: rgba(255,255,255,0.82); }
.section--ink .eyebrow { color: var(--brass-lite); }
.section--ink .eyebrow::before, .section--ink .eyebrow::after { background: var(--brass-lite); }
.section--ink .rule { background: var(--brass-lite); }
.section--tight { padding: clamp(44px, 6vw, 72px) 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding: clamp(78px, 12vw, 148px) 0 clamp(64px, 9vw, 116px);
  text-align: center;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 52% at 50% 0%, rgba(201,162,39,0.20), transparent 68%),
    radial-gradient(ellipse 40% 40% at 50% 108%, rgba(201,162,39,0.10), transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; }
.hero h1 { color: #fff; margin-bottom: 22px; }
.hero h1 .accent { color: var(--brass-lite); font-style: italic; }
.hero__lead {
  max-width: 620px; margin-inline: auto;
  font-size: clamp(1.06rem, 1rem + 0.45vw, 1.24rem);
  color: rgba(255,255,255,0.86);
}
.hero .eyebrow { color: var(--brass-lite); }
.hero .eyebrow::before, .hero .eyebrow::after { background: var(--brass-lite); }
.hero .btn-row { margin-top: 34px; }
.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px;
  margin-top: 44px; padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.87rem; color: rgba(255,255,255,0.78);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 9px; }
.hero__meta svg { width: 16px; height: 16px; color: var(--brass-lite); flex: none; }
.hero__meta .tbc { background: rgba(201,162,39,0.22); color: var(--brass-lite); border-bottom-color: var(--brass-lite); }

/* ---------- Page banner (inner pages) ---------- */
.page-head {
  background: var(--ink); color: #fff;
  padding: clamp(52px, 7vw, 88px) 0 clamp(44px, 6vw, 68px);
  text-align: center;
}
.page-head h1 { color: #fff; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); }
.page-head p { max-width: 620px; margin-inline: auto; color: rgba(255,255,255,0.84); }
.page-head .eyebrow { color: var(--brass-lite); }
.page-head .eyebrow::before, .page-head .eyebrow::after { background: var(--brass-lite); }

/* ---------- Breadcrumbs ---------- */
.crumbs {
  border-bottom: 1px solid var(--border);
  background: var(--bone);
  font-size: 0.83rem; color: var(--ink-faint);
}
.crumbs ol {
  list-style: none; margin: 0; padding: 15px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
}
.crumbs li { display: inline-flex; align-items: center; gap: 9px; }
.crumbs li + li::before { content: "/"; color: var(--border-firm); }
.crumbs a { color: var(--ink-soft); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.card:hover { border-color: var(--border-firm); transform: translateY(-3px); }
.card__icon {
  width: 44px; height: 44px; margin-bottom: 20px;
  display: grid; place-items: center;
  border: 1px solid var(--brass); border-radius: 50%;
  color: var(--brass-ink); flex: none;
}
.card__icon svg { width: 21px; height: 21px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: 0.97rem; }
.card__link {
  margin-top: auto; padding-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--brass-ink);
}
.card__link svg { width: 15px; height: 15px; transition: transform 0.18s var(--ease); }
.card:hover .card__link svg { transform: translateX(4px); }

.card--flat { background: transparent; border: 0; padding: 0; }
.card--flat:hover { transform: none; }

/* ---------- Split ---------- */
.split {
  display: grid; gap: clamp(30px, 5vw, 68px);
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  align-items: center;
}
.split--top { align-items: start; }

/* ---------- Numbered steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step__n {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--brass); color: var(--brass-ink);
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
}
.step h4 { margin-bottom: 5px; }
.step p { color: var(--ink-soft); font-size: 0.97rem; margin: 0; }

/* ---------- Definition rows ---------- */
.rows { border-top: 1px solid var(--border); }
.row {
  display: grid; gap: 6px 30px;
  grid-template-columns: minmax(190px, 1fr) 2fr;
  padding: 20px 0; border-bottom: 1px solid var(--border);
  align-items: start;
}
.row dt { font-weight: 600; color: var(--ink); margin: 0; }
.row dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 620px) { .row { grid-template-columns: 1fr; } }

/* ---------- Tick list ---------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); }
.ticks svg { width: 19px; height: 19px; color: var(--brass-ink); flex: none; margin-top: 3px; }
.section--ink .ticks li { color: rgba(255,255,255,0.85); }
.section--ink .ticks svg { color: var(--brass-lite); }

/* ---------- Callout ---------- */
.callout {
  border-left: 2px solid var(--brass);
  padding: 6px 0 6px 24px;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.4; color: var(--ink);
}

/* ---------- CTA strip ---------- */
.cta {
  background: var(--ink); color: #fff;
  padding: clamp(50px, 7vw, 84px) 0; text-align: center;
}
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,0.82); max-width: 560px; margin-inline: auto; }
.cta .btn-row { margin-top: 30px; justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-deep); color: #fff; padding: clamp(48px, 6vw, 76px) 0 0; }
.footer-grid {
  display: grid; gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  padding-bottom: 40px;
}
.footer-col h4 {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass-lite); margin-bottom: 16px; font-weight: 600;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a, .footer-col span { color: rgba(255,255,255,0.78); font-size: 0.94rem; }
.footer-col a:hover { color: #fff; }
.footer-col .blurb { color: rgba(255,255,255,0.7); font-size: 0.94rem; max-width: 34ch; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; margin-bottom: 15px; }
.footer-brand:hover { text-decoration: none; }
.footer-brand svg { width: 25px; height: 25px; color: var(--brass-lite); }
.footer-brand .wordmark small { color: rgba(255,255,255,0.6); }
.footer-col .tbc { background: rgba(201,162,39,0.2); color: var(--brass-lite); border-bottom-color: var(--brass-lite); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 20px 0; display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: space-between; font-size: 0.85rem; color: rgba(255,255,255,0.6);
}

/* ---------- The unofficial-concept notice ---------- */
.demo-note {
  background: #0C0B0A; color: #B3A895; font-size: 0.82rem; text-align: center;
  padding: 15px 20px; margin: 0;
  border-top: 1px solid rgba(250,247,242,0.1);
  line-height: 1.62;
}
.demo-note strong { color: var(--brass-lite); }
.demo-note a { color: var(--brass-lite); text-decoration: underline; }
.demo-note span.wrap { display: block; max-width: 80ch; margin-inline: auto; }
.demo-note .tbc { background: rgba(201,162,39,0.2); color: var(--brass-lite); border-bottom-color: var(--brass-lite); }

/* ---------- Reveal ----------
   Opt-in: the .js-reveal class is added to <html> by an inline script in the
   head. If that script or this stylesheet fails, .reveal has no opacity rule
   and the content simply renders. Never write a bare `.reveal { opacity: 0 }`
   — that hides the whole page when JS is off. */
.js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
.js-reveal .reveal[data-delay="1"] { transition-delay: 0.07s; }
.js-reveal .reveal[data-delay="2"] { transition-delay: 0.14s; }
.js-reveal .reveal[data-delay="3"] { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .card:hover, .btn:hover { transform: none; }
}

@media print {
  .site-header, .cta, .demo-note { display: none !important; }
  body { background: #fff; }
}