/* ============================================================
   TIME & ETERNITY WATCH CO. — "MERIDIAN"
   black + cyan private watch salon · Tampa, FL
   Bodoni Moda (display) · Hanken Grotesk (body) · Spline Sans Mono (spec)
   Re-skin: edit :root once. Cyan is ink, not light — no glows.
   ============================================================ */

:root {
  --ink: #0B0D10;
  --pane: #12161B;
  --well: #080A0C;
  --bone: #EAE6DD;
  --bone-dim: #98948B;
  --cyan: #00ADEE;
  --ice: #8CCFEA;
  --accent-rgb: 0, 173, 238;
  --hairline: rgba(234, 230, 221, .14);
  --hairline-cyan: rgba(0, 173, 238, .35);
  --pedestal: radial-gradient(ellipse 70% 55% at 50% 42%, #1B2128 0%, #12161B 55%, #0B0D10 100%);
  --font-display: "Cormorant", "Bodoni Moda", "Didot", serif;
  --font-body: "Jost", "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "Spline Sans Mono", monospace;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 62ch;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(var(--accent-rgb), .28); color: var(--bone); }

.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }

/* ---------- type ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: .005em;
}
h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
h1 em, h2 em, .display em { font-style: italic; font-weight: 400; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.eyebrow.accent { color: var(--cyan); }

.mono, .spec {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
}
.spec { color: var(--ice); text-transform: uppercase; }

.lede { font-size: 1.125rem; color: var(--bone-dim); font-weight: 300; max-width: var(--measure); }
p + p { margin-top: 1.1em; }
.prose p { color: var(--bone-dim); max-width: var(--measure); }
.prose strong { color: var(--bone); font-weight: 500; }

/* ---------- brand intro: full-width editorial statement (brand pages) ---------- */
.brand-intro { margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.brand-intro-head {
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  max-width: 20ch;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.brand-intro-body {
  columns: 2;
  column-gap: clamp(2.5rem, 5vw, 5.5rem);
  column-fill: balance;
}
.brand-intro-body p {
  color: var(--bone-dim);
  font-size: 1.0625rem;
  max-width: none;
  margin: 0 0 1.15em;
}
.brand-intro-body p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .brand-intro-body { columns: 1; }
}

/* ---------- quiet CTA ---------- */
.cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone);
  border: 1px solid var(--hairline);
  padding: 1rem 2.25rem;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.cta:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.cta.solid { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.cta.solid:hover { background: transparent; color: var(--bone); border-color: var(--hairline); }

.textlink {
  display: inline-block;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: .3rem;
  padding-top: .55rem;      /* taller tap target; underline stays put */
  margin-top: -.35rem;      /* offset so layout spacing is unchanged */
  transition: color .3s ease, border-color .3s ease;
}
.textlink:hover { color: var(--cyan); border-color: var(--hairline-cyan); }

/* ---------- masthead (two decks) ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(11, 13, 16, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.utility-strip {
  background: var(--well);
  border-bottom: 1px solid var(--hairline);
  transition: max-height .35s ease, opacity .3s ease;
  max-height: 3rem;
  overflow: hidden;
}
.utility-strip .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: .55rem;
  gap: 1rem;
}
.utility-strip .mono { color: var(--bone-dim); font-size: .6875rem; }
.utility-strip .mono .tick { color: var(--ice); }
.masthead.compact .utility-strip { max-height: 0; opacity: 0; border-bottom-color: transparent; }

.deck {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding-block: 1.4rem;
  transition: padding .35s ease;
}
.masthead.compact .deck { padding-block: .8rem; }

.wordmark { text-align: center; display: block; }
.wordmark .wm-main {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark .wm-main .amp { font-style: italic; color: var(--cyan); }
.wordmark .wm-sub {
  display: block;
  font-family: var(--font-body);
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-top: .3rem;
  text-indent: .55em; /* balances tracking */
}

.navlinks { display: flex; gap: clamp(1rem, 2.5vw, 2.25rem); align-items: center; }
.navlinks.left { justify-content: flex-end; }
.navlinks.right { justify-content: flex-start; }
.navlinks a {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
  white-space: nowrap;
}
.navlinks a:hover { color: var(--bone); }
.navlinks a.active { color: var(--bone); border-bottom-color: var(--hairline-cyan); }

/* ---------- collection dropdown submenu ---------- */
.has-submenu { position: relative; display: flex; align-items: center; }
.has-submenu > a { display: inline-flex; align-items: center; gap: .4em; }
.has-submenu > a::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); opacity: .6; transition: transform .3s ease;
}
.has-submenu:hover > a::after { transform: rotate(225deg); }
.submenu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(11, 13, 16, .97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--hairline);
  padding: .5rem 0; min-width: 216px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 95;
}
.has-submenu:hover .submenu, .has-submenu:focus-within .submenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.submenu a {
  padding: .62rem 1.5rem;
  font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bone-dim); white-space: nowrap; border-bottom: 0; text-align: left;
  transition: color .2s ease, background .2s ease, padding-left .2s ease;
}
.submenu a:hover { color: var(--bone); background: rgba(255, 255, 255, .03); padding-left: 1.75rem; }
.submenu a.active { color: var(--cyan); }
.submenu a.all { color: var(--ice); border-top: 1px solid var(--hairline); margin-top: .4rem; padding-top: .8rem; }

/* ---------- brand directory (collection page) ---------- */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.brand-card {
  position: relative;
  display: block;
  border: 1px solid var(--hairline);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--pane);
}
.brand-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(.9) brightness(.55);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
}
.brand-card:hover img { transform: scale(1.06); filter: saturate(.95) brightness(.68); }
.brand-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8, 10, 12, .9) 4%, rgba(8, 10, 12, .25) 55%, rgba(8, 10, 12, .5));
}
.brand-card .bc-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(1.1rem, 2vw, 1.6rem); }
.brand-card .bc-name { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.05; }
.brand-card .bc-line { font-size: .8125rem; color: var(--bone-dim); margin-top: .35rem; }
.brand-card .bc-cta {
  display: inline-block; margin-top: .9rem;
  font-size: .625rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ice); opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.brand-card:hover .bc-cta { opacity: 1; transform: translateY(0); }
.brand-card .bc-top { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hairline-cyan); opacity: 0; transition: opacity .4s ease; z-index: 2; }
.brand-card:hover .bc-top { opacity: 1; }

/* also-sourced brand list */
.sourced-list {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  margin-top: 1.75rem;
}
.sourced-list span {
  font-family: var(--font-display); font-size: 1.15rem; color: var(--bone-dim);
}
.sourced-list span::after { content: "·"; color: var(--hairline-cyan); margin-left: 1.5rem; }
.sourced-list span:last-child::after { content: ""; }

.burger {
  display: none;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--bone);
  width: 44px; height: 44px;
  cursor: pointer;
  font-size: 0;
  position: relative;
}
.burger::before, .burger::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px;
  height: 1px;
  background: var(--bone);
  transition: transform .3s ease, top .3s ease;
}
.burger::before { top: 17px; }
.burger::after { top: 25px; }
body.menu-open .burger::before { top: 21px; transform: rotate(45deg); }
body.menu-open .burger::after { top: 21px; transform: rotate(-45deg); }

/* mobile overlay menu */
.overlay-menu {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 80;
  display: flex;
  flex-direction: column;
  /* "safe" keeps the menu centered when it fits but never clips the top items
     off-screen once the list is taller than the viewport (it falls back to
     top-aligned + scrollable). Unsupported browsers drop it → flex-start, also safe. */
  justify-content: safe center;
  padding: calc(var(--gutter) + 4.5rem) var(--gutter) var(--gutter);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
body.menu-open .overlay-menu { opacity: 1; visibility: visible; }
.overlay-menu a {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  padding-block: .55rem;
  border-bottom: 1px solid var(--hairline);
  transition: color .3s ease, padding-left .3s ease;
}
.overlay-menu a:hover, .overlay-menu a.active { color: var(--cyan); padding-left: .5rem; }
.overlay-menu .mono { margin-top: 2rem; color: var(--bone-dim); }
/* overlay: collection brand sub-links */
.overlay-menu .ov-sub {
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--hairline);
  padding: .35rem 0 .9rem;
}
.overlay-menu .ov-sub a {
  font-family: var(--font-body); font-size: .8125rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim);
  padding: .5rem 0 .5rem 1.25rem; border-bottom: 0;
}
.overlay-menu .ov-sub a:hover, .overlay-menu .ov-sub a.active { color: var(--cyan); padding-left: 1.6rem; }
.overlay-menu .ov-sub a.all { color: var(--ice); }

/* ---------- meridian dial ---------- */
.dial-wrap { position: relative; }
.dial-caption {
  margin-top: 1.25rem;
  text-align: center;
  color: var(--bone-dim);
}
.dial-caption .tick { color: var(--ice); }
.dial .dial-face { fill: var(--pane); stroke: var(--hairline); }
.dial .idx { stroke: var(--bone); stroke-opacity: .55; }
.dial .idx.q { stroke-opacity: .95; }
.dial .hand-h, .dial .hand-m { stroke: var(--bone); stroke-linecap: round; }
.dial .hand-s { stroke: var(--cyan); stroke-linecap: round; }
.dial .pin { fill: var(--bone); }
.dial .pin-c { fill: var(--cyan); }

/* ---------- section heads (roman numerals) ---------- */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section.pane { background: var(--pane); border-block: 1px solid var(--hairline); }
.section.well { background: var(--well); border-block: 1px solid var(--hairline); }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}
.section-head .numeral {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-style: italic;
  color: var(--bone-dim);
}
.section-head .label {
  font-family: var(--font-body); /* keep Hanken even when the label is an <h2> */
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  white-space: nowrap;
}
.section-head .rule { flex: 1; height: 1px; background: var(--hairline); transform: translateY(-.35em); }

/* ---------- vitrine plates ---------- */
.plate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.plate {
  position: relative;
  padding-top: 1.5rem;
}
.plate::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--hairline-cyan);
  opacity: 0;
  transition: opacity .4s ease;
}
.plate:hover::before { opacity: 1; }
.plate .etching {
  background: var(--pedestal);
  aspect-ratio: 4 / 4.6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12%;
  transition: filter .4s ease;
}
.plate:hover .etching { filter: brightness(1.18); }
.plate .etching svg { width: 100%; height: 100%; }

/* photo plate (sourced watches — real photography; house watches stay etched) */
.plate .photo {
  position: relative;
  aspect-ratio: 4 / 4.8;
  overflow: hidden;
  background: var(--pane);
  border: 1px solid var(--hairline);
}
.plate .photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
  filter: saturate(.95) contrast(1.03);
  display: block;
}
.plate:hover .photo img { transform: scale(1.045); }
.plate .photo::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 -70px 55px -35px rgba(8, 10, 12, .6), inset 0 0 0 1px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.etch { stroke: var(--bone); stroke-opacity: .85; fill: none; stroke-width: 1.5; }
.etch.soft { stroke-opacity: .4; stroke-width: 1; }
.etch.fill { fill: var(--bone); fill-opacity: .85; stroke: none; }
.etch.cyan { stroke: var(--cyan); stroke-opacity: .9; }
.etch.cyanfill { fill: var(--cyan); stroke: none; }

.plate .p-brand { margin-top: 1.5rem; }
.plate .p-model {
  font-family: var(--font-display);
  font-size: 1.45rem;
  margin-top: .35rem;
}
.plate .p-spec { margin-top: .6rem; display: block; }
.plate .p-cta { margin-top: 1.1rem; display: inline-block; }

/* horizontal rail variant */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 26vw, 330px);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--pane) transparent;
}
.rail .plate { scroll-snap-align: start; }

/* ---------- ledger bands ---------- */
.ledger {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 1.6fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.ledger .big-figure {
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 11rem);
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1px var(--bone-dim);
}
.ledger .big-figure sup { font-size: .35em; -webkit-text-stroke: 1px var(--bone-dim); }
.ledger-rows { border-top: 1px solid var(--hairline); }
.ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--hairline);
}
.ledger-row .amt { font-family: var(--font-mono); font-size: 1rem; color: var(--bone); white-space: nowrap; }
.ledger-row .amt.credit { color: var(--ice); }
.ledger-row .desc { color: var(--bone-dim); font-size: .9375rem; text-align: right; }

/* ---------- edition counter (Morgan 300) ---------- */
.edition-plate {
  border: 1px solid var(--hairline);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.edition-plate .no {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: .12em;
  color: var(--bone);
}
.edition-plate .no .slash { color: var(--cyan); }

/* ---------- spec tables ---------- */
.spec-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.spec-table th, .spec-table td {
  text-align: left;
  padding: .85rem 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.spec-table th {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  width: 38%;
  padding-right: 1.5rem;
}
.spec-table td { font-family: var(--font-mono); font-size: .8125rem; color: var(--bone); overflow-wrap: anywhere; }

/* ---------- steps (sell pipeline) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.step { border-top: 1px solid var(--hairline); padding-top: 1.4rem; }
.step .step-no { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--bone-dim); }
.step h3 { font-size: 1.15rem; margin-top: .6rem; }
.step p { color: var(--bone-dim); font-size: .9375rem; margin-top: .5rem; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding-block: 1.4rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--bone-dim); transition: transform .3s ease; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--cyan); }
.faq .faq-a { padding-bottom: 1.6rem; color: var(--bone-dim); max-width: var(--measure); }

/* ---------- forms (replace with GHL embed later; see ghl-dark-form skill) ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: .5rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--well);
  border: 1px solid var(--hairline);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: .9375rem;
  padding: .9rem 1rem;
  transition: border-color .3s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--hairline-cyan);
}

/* ---------- page hero (subpages) ---------- */
.page-hero { padding-block: clamp(4.5rem, 10vw, 8rem) clamp(3rem, 7vw, 5.5rem); }
.page-hero .eyebrow { margin-bottom: 1.5rem; }
.page-hero .lede { margin-top: 1.75rem; }
.crumbs { margin-bottom: 2.5rem; color: var(--bone-dim); }
.crumbs a:hover { color: var(--bone); }
.crumbs .sep { color: var(--cyan); margin-inline: .5rem; }

/* ---------- home hero (full-bleed cinematic photo) ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 90vh;
  padding-block: clamp(5rem, 10vw, 9rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; filter: saturate(.88) brightness(.66); display: block; }
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(11, 13, 16, .9) 32%, rgba(11, 13, 16, .3) 74%, rgba(11, 13, 16, .55) 100%),
    linear-gradient(0deg, var(--ink) 1%, rgba(11, 13, 16, .05) 42%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero .hero-kicker { margin-bottom: 1.75rem; }
.hero h1 { max-width: 12em; }
.hero .lede { margin-top: 1.75rem; }
.hero .hero-ctas { display: flex; gap: 1.25rem; margin-top: 2.75rem; flex-wrap: wrap; }
.hero-clock { margin-top: 2.75rem; color: var(--bone-dim); }
.hero-clock .tick { color: var(--ice); }
.hero-dial {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2rem, 5vw, 3.5rem);
  z-index: 2;
  width: clamp(96px, 12vw, 152px);
  text-align: center;
}
.hero-dial .dial-caption { margin-top: .7rem; font-size: .625rem; }

/* ---------- full-bleed cinematic photo band ---------- */
.photo-band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(46vh, 60vh, 620px);
  overflow: hidden;
  border-block: 1px solid var(--hairline);
}
.photo-band > img.band-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.9) brightness(.6);
  z-index: 0;
}
.photo-band::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(11, 13, 16, .88) 0%, rgba(11, 13, 16, .5) 55%, rgba(11, 13, 16, .72) 100%);
}
.photo-band .wrap { position: relative; z-index: 2; width: 100%; }
.photo-band .eyebrow { margin-bottom: 1.5rem; }
.photo-band .band-copy { max-width: 40ch; }

/* ---------- framed section image (side-by-side with copy) ---------- */
.frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  aspect-ratio: 4 / 3.2;
  background: var(--pane);
}
.frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.92) brightness(.8);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
  display: block;
}
.frame:hover img { transform: scale(1.045); }
.frame::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 90px rgba(8, 10, 12, .5), inset 0 0 0 1px rgba(0, 0, 0, .3);
  pointer-events: none;
}
.media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.media-split.reverse > .frame { order: 2; }

/* ---------- footer ---------- */
footer { background: var(--well); border-top: 1px solid var(--hairline); }
.foot-card { text-align: center; padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }
.foot-card .dial-wrap { width: 120px; margin: 0 auto 1.75rem; }
.foot-card .wm-main { font-size: 1.2rem; }
.foot-nap { margin-top: 1.5rem; color: var(--bone-dim); font-size: .9375rem; }
.foot-nap a:hover { color: var(--bone); }
.foot-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--hairline);
}
.foot-links a {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.foot-links a:hover { color: var(--bone); }
.foot-legal {
  padding-block: 1.5rem 2rem;
  text-align: center;
  color: var(--bone-dim);
  font-size: .6875rem;
}

/* ---------- scroll reveals: JS-gated so crawlers/no-JS see everything.
   Without .js (main.js sets it) elements stay visible — crawler/OG safe. ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- scroll-progress bar (injected by main.js) ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--ice));
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 200; pointer-events: none;
  transition: transform .12s linear;
}

/* ---------- film grain overlay (injected by main.js) ---------- */
.grain {
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  opacity: .04; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ---------- cinematic hero movement + image fade-in ---------- */
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.14); } }
.hero-bg img, .band-bg { animation: kenburns 26s ease-out both; }
.js .hero-bg img, .js .band-bg { opacity: 0; }
.js .hero-bg img.loaded, .js .band-bg.loaded { opacity: 1; transition: opacity 1.2s ease; }

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

/* ---------- 404 ---------- */
.lost { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 4rem; }
.lost .big-figure {
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 13rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--bone-dim);
  line-height: 1;
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .deck { grid-template-columns: auto 1fr auto; padding-block: .9rem; }
  .masthead.compact .deck { padding-block: .7rem; }
  .navlinks { display: none; }
  .burger { display: block; justify-self: end; }
  .wordmark { justify-self: start; text-align: left; }
  .wordmark .wm-main { font-size: 1.05rem; }
  .wordmark .wm-sub { font-size: .5rem; letter-spacing: .42em; margin-top: .2rem; }
  .hero { min-height: 82vh; }
  .hero-bg img { object-position: 62% center; }
  .hero-dial { width: 88px; right: auto; left: var(--gutter); bottom: 1.75rem; opacity: .9; }
  .media-split { grid-template-columns: 1fr; gap: 2rem; }
  .media-split.reverse > .frame { order: 0; }
  .frame { aspect-ratio: 16 / 10; }
  .photo-band { min-height: 44vh; }
  .brand-grid { grid-template-columns: 1fr; }
  .submenu, .has-submenu > a::after { display: none; }
  .plate-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .ledger { grid-template-columns: 1fr; }
  .ledger .big-figure { font-size: clamp(4rem, 18vw, 7rem); }
}
@media (max-width: 600px) {
  .plate-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .utility-strip .wrap { justify-content: center; }
  .utility-strip .u-right { display: none; }
  .utility-strip .wrap { padding-block: .45rem; }
  /* touch targets + iOS */
  .hero-ctas { flex-direction: column; }
  .hero-ctas .cta { text-align: center; }
  .cta { padding: 1.05rem 1.75rem; }
  .field input, .field select, .field textarea { font-size: 1rem; } /* prevents iOS focus zoom */
  .ledger-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .ledger-row .desc { text-align: left; font-size: .9rem; }
  .rail { grid-auto-columns: min(76vw, 280px); scroll-snap-type: x mandatory; }
  .section-head { gap: .9rem; }
  .section-head .label { letter-spacing: .2em; }
  .spec-table th { width: 42%; padding-right: .75rem; letter-spacing: .12em; }
  .spec-table td { font-size: .75rem; }
  .foot-legal { padding-inline: var(--gutter); line-height: 2; letter-spacing: .02em; }
}
/* very narrow phones: keep the wordmark on one line */
@media (max-width: 380px) {
  .wordmark .wm-main { font-size: .92rem; letter-spacing: .09em; }
  .utility-strip .mono { font-size: .625rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .hero-bg img, .js .band-bg { opacity: 1; }
  .hero-bg img, .band-bg { animation: none; }
  .grain { display: none; }
  .dial .hand-s { transition: none !important; }
}

/* ============ GHL enquiry form card (contact page) ============ */
@property --kfc-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes keeper-spin { to { --kfc-ang: 360deg; } }

.keeper-form-card {
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  padding: 2px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  background: conic-gradient(from var(--kfc-ang, 0deg),
    transparent 0%, var(--cyan) 12%, transparent 30%,
    transparent 62%, var(--cyan) 74%, transparent 90%);
  animation: keeper-spin 7s linear infinite;
}
.keeper-form-card .kfc-in {
  background: var(--ink);
  border-radius: 12px;
  padding: 1.6rem 1.6rem .5rem;
}
.keeper-form-card .kfc-label {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1rem;
}
.keeper-form-card iframe {
  display: block;
  width: 100%;
  border: none;
  border-radius: 10px;
  min-height: 640px;
}
@media (prefers-reduced-motion: reduce) {
  .keeper-form-card { animation: none; background: var(--hairline-cyan); }
}

/* ============ Enquiry popup overlay (opens on "Enquire") ============ */
.enquiry-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(1.25rem, 5vh, 3.5rem) 1rem;
  background: rgba(8, 10, 12, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  overflow-y: auto; overscroll-behavior: contain;
}
.enquiry-overlay.open { opacity: 1; visibility: visible; }
.enquiry-modal {
  position: relative; width: 100%; max-width: 480px;
  transform: translateY(14px) scale(.985);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.enquiry-overlay.open .enquiry-modal { transform: none; }
.enquiry-close {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 12, .55); border: 1px solid var(--hairline);
  color: var(--bone-dim); cursor: pointer;
  font-family: var(--font-mono); font-size: 1.35rem; line-height: 1;
  transition: color .2s ease, border-color .2s ease;
}
.enquiry-close:hover { color: var(--cyan); border-color: var(--hairline-cyan); }
body.enquiry-open { overflow: hidden; }

/* ============ CTA phone sub-line (inside "Speak to a Timekeeper") ============ */
.cta .cta-tel {
  display: block;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .1em;
  margin-top: .4rem;
  opacity: .72;
}