/* Endico Data Strategic — shared site stylesheet
 * Used by every page in /jeweler-homepage/
 * Page-specific styles live inline in each HTML file.
 */

/* ---------------------------------------------------------------------
 * Fonts: self-hosted Gotham (WOFF2) + metric-matched fallback.
 * Self-hosting moves font requests to the same origin as the page
 * (no third-party connection, fewer DNS/TLS handshakes), and WOFF2
 * is ~23% smaller than the cdnfonts WOFF originals. Each face uses
 * font-display:swap so text paints with the fallback immediately
 * and swaps to Gotham when the WOFF2 lands (typically <100ms with
 * the preload hints emitted in template.php).
 *
 * The Gotham-fallback face below uses size-adjust + ascent/descent
 * overrides so the system font stack renders at the SAME metrics
 * as Gotham. Result: zero layout shift on swap. Arial is NOT in
 * the local() chain — falling back through SF Pro Display (Apple),
 * Segoe UI (Windows), Roboto (Android) instead. Each of those
 * reads visually closer to Gotham than Arial would.
 * ------------------------------------------------------------------- */
@font-face {
  font-family: 'Gotham';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/GothamBook.woff2') format('woff2');
}
@font-face {
  font-family: 'Gotham';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/GothamBookItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Gotham';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/GothamMedium.woff2') format('woff2');
}
@font-face {
  font-family: 'Gotham';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/GothamBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Gotham';
  font-style: italic; font-weight: 700; font-display: swap;
  src: url('fonts/GothamBoldItalic.woff2') format('woff2');
}
@font-face {
  /* Metric-matched fallback. Numbers tuned to mimic Gotham's box so
   * Lighthouse CLS stays at 0 even during the brief swap window.
   * If Gotham swap is visible at all, it's only stroke weight — no
   * line-break or glyph-width shift. */
  font-family: 'Gotham-fallback';
  src: local('SF Pro Display'), local('Segoe UI'), local('Roboto');
  ascent-override: 92%;
  descent-override: 23%;
  line-gap-override: 0%;
  size-adjust: 99%;
}

:root {
  --bg: #181818;
  --bg-2: #141414;
  --panel: rgba(20, 19, 17, 0.74);
  --panel-2: rgba(28, 26, 23, 0.78);
  --panel-3: rgba(36, 36, 36, 0.7);
  --line: rgba(240, 236, 232, 0.08);
  --line-2: rgba(240, 236, 232, 0.16);
  --line-pink: rgba(238, 75, 159, 0.36);
  --line-pink-soft: rgba(238, 75, 159, 0.18);
  --line-orange: rgba(219, 92, 33, 0.30);
  --line-orange-soft: rgba(219, 92, 33, 0.14);
  --text: #f0ece8;
  --vellum: #d9c9a8;
  --mute: #857e78;
  --dim: #3d3830;
  /* --foot: footer body text. Brighter than --mute so footer copy
   * clears WCAG AA (~7.5:1 on the dark panel). --dim stays the
   * decorative hairline color elsewhere on the page. */
  --foot: #c2bdb4;
  --pink: #ee4b9f;
  --orange: #db5c21;
  --gold: #c9963a;
  --green: #58c97a;
  --font: 'Gotham', 'Gotham-fallback', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --mono: 'Courier New', monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--text); min-height: 100vh; }
body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-weight: 400;
}
.page { position: relative; z-index: 1; }
::selection { background: var(--pink); color: var(--bg); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.85s ease-out, transform 0.85s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-1 { transition-delay: 0.08s; }
.reveal-2 { transition-delay: 0.16s; }
.reveal-3 { transition-delay: 0.24s; }
.reveal-4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* =====================================================================
 * Channels — sticky master-detail when active
 * ---------------------------------------------------------------------
 * When a channel card is opened (.channels gains .has-active), the four
 * cards collapse into a thin vertical rail on the left and the drawer
 * pane fills the right. The rail uses position: sticky so it stays
 * pinned to the viewport edge while the visitor scrolls through the
 * long-form drawer copy. When the .channels section ends (footer-cta
 * or next coffer), the rail unsticks naturally because position:sticky
 * is bounded by the parent container.
 * ===================================================================== */

/* Default colonnade — 4 cards in a row across the section. */
@media (min-width: 761px) {
  .channels.has-active {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas:
      "heading heading"
      "rail    drawer"
      "audit   audit";
    column-gap: 24px;
    row-gap: 0;
  }
  .channels.has-active > .heading   { grid-area: heading; }
  .channels.has-active > .colonnade {
    grid-area: rail;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--line-pink-soft);
    position: sticky;
    top: 88px;             /* clears the sticky nav pill above */
    align-self: start;
    z-index: 5;
  }
  .channels.has-active > .drawer    { grid-area: drawer; align-self: start; }
  .channels.has-active > .audit     { grid-area: audit; margin-top: clamp(40px, 6vw, 64px); }

  /* Cards in rail mode: collapse to roman numeral only. */
  .channels.has-active .ch {
    padding: 18px 4px;
    border-left: 1px solid var(--line-pink-soft);
    border-right: 1px solid var(--line-pink-soft);
    border-top: 0;
    border-bottom: 1px solid var(--line-pink-soft);
    text-align: center;
    transform: none;
    transition: background 0.35s var(--ease);
  }
  .channels.has-active .ch::before { display: none; }
  .channels.has-active .ch::after  { display: none; }
  .channels.has-active .ch:hover   { transform: none; }
  .channels.has-active .ch .capital { padding: 0; margin: 0; border-bottom: 0; }
  .channels.has-active .ch .capital .role,
  .channels.has-active .ch h3,
  .channels.has-active .ch .brief,
  .channels.has-active .ch .toggle { display: none; }
  .channels.has-active .ch .capital .roman { font-size: 22px; line-height: 1; }
  .channels.has-active .ch[aria-expanded="true"] {
    background: linear-gradient(180deg, rgba(238, 75, 159, 0.10), transparent 100%);
  }
  .channels.has-active .ch:nth-child(even)[aria-expanded="true"] {
    background: linear-gradient(180deg, rgba(219, 92, 33, 0.10), transparent 100%);
  }
  .channels.has-active .ch[aria-expanded="true"] .capital .roman { color: var(--pink); }
  .channels.has-active .ch:nth-child(even)[aria-expanded="true"] .capital .roman { color: var(--orange); }

  /* Drawer in master-detail mode: full borders, single-column inside,
   * tighter padding because it now lives next to the rail rather than
   * spanning the full row. */
  .channels.has-active > .drawer {
    border-left: 1px solid var(--line-pink-soft);
    border-right: 1px solid var(--line-pink-soft);
    border-top: 1px solid var(--line-pink-soft);
    border-bottom: 1px solid var(--line-pink-soft);
  }
  .channels.has-active > .drawer .drawer-inset {
    border-top: 0;
    border-bottom: 0;
  }
  .channels.has-active > .drawer .drawer-pane {
    padding: clamp(28px, 3.5vw, 48px);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 40px);
  }
}

/* Mobile master-detail (≤760px): rail does NOT stick on purpose
 * (per user preference). The rail visually bled onto the AEO audit
 * panel below it because the audit panel lives inside the same
 * .channels.has-active grid (third row: "audit audit"), so a sticky
 * rail's containing block stayed in view through the AEO copy. The
 * grid layout itself is in home.css; this section intentionally adds
 * no extra positioning — the rail scrolls away with the page as the
 * drawer content scrolls past. */

/* Glass nav */
.nav {
  position: sticky; top: 12px; z-index: 60;
  margin: 0 clamp(16px, 3vw, 40px);
  background:
    linear-gradient(rgba(20, 20, 20, 0.74), rgba(20, 20, 20, 0.74)) padding-box,
    linear-gradient(96deg, var(--pink), var(--orange), var(--pink)) border-box;
  background-size: 100% 100%, 200% 100%;
  background-position: 0 0, 0% 50%;
  border: 1px solid transparent;
  border-radius: 999px;
  backdrop-filter: blur(20px);
  padding: 8px 16px 8px 14px;
  display: grid;
  /* Logo gets 1fr (sits at start, empty space fills the rest of the
   * column); state badge + apply CTA pin to the right via auto cols.
   * The .links list is taken out of grid flow and absolutely centered
   * over the whole nav so it sits at true viewport-center, not the
   * geometric center of an asymmetric grid. */
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  animation: navBorderFlow 6s linear infinite;
  /* Promote the nav to its own composite layer. The animation still
   * paints background-position changes on the main thread, but
   * contain:paint clips invalidation to the nav's bounding box (small),
   * and will-change tells the compositor to keep the layer warm. Together
   * this drops Style/Layout cost from "page-wide invalidation per frame"
   * to "60px-tall nav-bar invalidation per frame". */
  contain: paint;
  will-change: background-position;
}
@keyframes navBorderFlow {
  0% { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 200% 50%; }
}
/* Logo hover: transform applied to the <img>, not the parent <a>.
 * The link element stays static so click hit-test is stable. Only
 * the visible image scales, no rotation, no chase-the-cursor
 * oscillation, no "bouncing out of the header" because the link
 * boundary doesn't move. transform-origin pinned center, GPU hint.
 * DO NOT add :hover transforms back to the parent <a> under any
 * circumstance, and DO NOT add rotation back — both regressions
 * have happened before. The matching block in
 * endico-preview/jeweler-homepage/site.css MUST stay in sync. */
.nav .logo { display: flex; align-items: center; line-height: 0; }
.nav .logo img {
  height: 38px; width: 38px; display: block; border-radius: 50%;
  transform-origin: center center;
  transition: transform 0.35s var(--ease);
  will-change: transform;
}
.nav .logo:hover img,
.nav .logo:focus-visible img { transform: scale(1.08); }
.nav .links {
  display: flex;
  justify-content: center;
  gap: 32px;
  /* Absolute-center the link cluster over the entire nav pill so it
   * lands at true horizontal mid-point, not skewed by the larger
   * right-side cluster (state badge + apply CTA). */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.nav .links a {
  color: var(--mute); text-decoration: none;
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  padding: 6px 0;
  position: relative;
  transition: color .35s;
}
.nav .links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--pink), var(--orange));
  border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav .links a:hover, .nav .links a.active { color: var(--text); }
.nav .links a:hover::after, .nav .links a.active::after { transform: scaleX(1); }
.nav .state {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text); font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
}
.nav .state .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } }

/* Mobile hamburger toggle.
 * `.nav-toggle` is a hidden checkbox sibling that drives state via :checked.
 * On desktop the hamburger is hidden; on mobile the desktop links collapse
 * into an absolute-positioned overlay that drops below the nav. */
.nav-toggle { display: none; }
.hamburger {
  display: none;
  width: 36px; height: 36px;
  cursor: pointer;
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  padding: 0;
  transition: border-color 0.35s var(--ease);
}
.hamburger:hover { border-color: var(--pink); }
.hamburger span {
  position: absolute;
  left: 9px; right: 9px; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 0.45s var(--ease),
    opacity 0.3s ease,
    top 0.45s var(--ease),
    background 0.35s ease;
}
.hamburger span:nth-child(1) { top: 12px; }
.hamburger span:nth-child(2) { top: 17px; }
.hamburger span:nth-child(3) { top: 22px; }
/* X state when toggle is checked. */
.nav-toggle:checked ~ .hamburger span:nth-child(1) {
  top: 17px;
  transform: rotate(45deg);
  background: var(--pink);
}
.nav-toggle:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .hamburger span:nth-child(3) {
  top: 17px;
  transform: rotate(-45deg);
  background: var(--orange);
}

/* Header CTA — gold pill, smaller than the standard .btn.primary so it
 * fits inside the sticky pill nav. Visible on every breakpoint. */
.nav .nav-cta {
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 700;
  background: var(--gold); color: #1a1814;
  border: 1px solid var(--gold);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .35s, transform .35s var(--ease);
}
.nav .nav-cta:hover {
  background: #d8a84a; border-color: #d8a84a;
  transform: translateY(-1px);
}
.nav .nav-cta .arrow {
  display: inline-block;
  transition: transform .35s var(--ease);
}
.nav .nav-cta:hover .arrow { transform: translateX(3px); }

/* Tympanum frieze (page-top architectural strip) */
.tympanum {
  padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 80px) 0;
  max-width: 1480px; margin: 0 auto;
  text-align: center;
}
.tympanum .frieze {
  border-top: 1px solid var(--line-pink-soft);
  border-bottom: 1px solid var(--line-pink-soft);
  padding: 14px 0;
  font-weight: 700;
  /* Scale font + tracking with viewport so longer titles like
   * "REQUEST YOUR AEO + SEO AUDIT" fit on one line at every width.
   * white-space: nowrap prevents the wrap that broke the layout. */
  font-size: clamp(9.5px, 0.95vw, 12px);
  letter-spacing: clamp(0.22em, 0.5vw, 0.55em);
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tympanum .frieze .ornament-pink {
  color: var(--pink);
  margin: 0 clamp(6px, 1vw, 14px);
  font-weight: 500;
  display: inline-block;
  /* Static text-shadow at the median of the old pulse (4px ↔ 12px → 8px).
   * The opacity pulse below carries 99% of the perceived glow change,
   * and animating text-shadow directly is a paint-per-frame killer. */
  text-shadow: 0 0 8px currentColor;
  animation: ornamentBreathe 4.4s ease-in-out infinite;
  will-change: opacity, transform;
}
.tympanum .frieze .ornament-orange {
  color: var(--orange);
  margin: 0 clamp(6px, 1vw, 14px);
  font-weight: 500;
  display: inline-block;
  text-shadow: 0 0 8px currentColor;
  animation: ornamentBreathe 4.4s ease-in-out infinite;
  animation-delay: 2.2s;
  will-change: opacity, transform;
}
@keyframes ornamentBreathe {
  /* Composited properties only (opacity + transform). text-shadow held
   * static on the element itself — see comment above. */
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

/* Coffer divider — slow horizontal drift on the pink dash pattern.
 * The orange horizontal line is static and stays as the host's
 * background. The animated pink dash pattern lives in a pseudo-element
 * and uses transform: translate3d() so the animation runs on the GPU
 * compositor (no paint per frame) — Lighthouse "non-composited
 * animations" audit and the Style/Layout main-thread cost both drop. */
.coffer {
  height: 30px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0, transparent calc(50% - 0.5px), var(--line-orange-soft) calc(50% - 0.5px), var(--line-orange-soft) calc(50% + 0.5px), transparent calc(50% + 0.5px)) center / 100% 16px repeat;
  opacity: 0.6;
  border-top: 1px solid var(--line-pink-soft);
  border-bottom: 1px solid var(--line-pink-soft);
}
.coffer::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: calc(100% + 80px); /* extra tile so we can translate -80px without exposing void */
  background: linear-gradient(90deg, transparent 0, transparent calc(50% - 0.5px), var(--line-pink-soft) calc(50% - 0.5px), var(--line-pink-soft) calc(50% + 0.5px), transparent calc(50% + 0.5px)) 0 center / 80px 100% repeat-x;
  animation: cofferDrift 24s linear infinite;
  will-change: transform;
}
@keyframes cofferDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-80px, 0, 0); }
}

/* Hero plate */
.hero {
  padding: clamp(48px, 6vw, 90px) clamp(20px, 4vw, 80px) clamp(64px, 7vw, 100px);
  max-width: 1480px; margin: 0 auto;
}
.plate {
  border: 1px solid var(--line-pink);
  background: var(--panel);
  backdrop-filter: blur(8px);
  padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px);
  position: relative;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.45);
}
.plate::before {
  content: ""; position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px solid var(--line-orange-soft);
  pointer-events: none;
}
.plate .corner {
  position: absolute; width: 22px; height: 22px;
  border: 1px solid var(--line-pink);
}
.plate .corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.plate .corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.plate .corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.plate .corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.plate .corner::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; position: absolute;
  animation: cornerPulse 3.4s ease-in-out infinite;
}
.plate .corner.tl::after { top: -3px; left: -3px; background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.plate .corner.tr::after { top: -3px; right: -3px; background: var(--orange); box-shadow: 0 0 10px var(--orange); animation-delay: 0.85s; }
.plate .corner.bl::after { bottom: -3px; left: -3px; background: var(--orange); box-shadow: 0 0 10px var(--orange); animation-delay: 2.55s; }
.plate .corner.br::after { bottom: -3px; right: -3px; background: var(--pink); box-shadow: 0 0 10px var(--pink); animation-delay: 1.7s; }
@keyframes cornerPulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.35); opacity: 1; }
}
.plate .kicker {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--pink); margin-bottom: 28px;
  display: inline-flex; align-items: center; gap: 14px;
}
.plate .kicker::before { content: ""; width: 28px; height: 1px; background: var(--pink); }
.plate h1 {
  font-weight: 800;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--text);
  max-width: 18ch;
}
.plate h1 .emp {
  color: var(--pink);
  display: inline;
  /* Pink-orange gradient underline that follows the text. The earlier
   * implementation used a position:absolute pseudo-element which only
   * renders the underline under the LAST line fragment when the
   * emphasis wraps to multiple lines (visible on /about/'s "stays on
   * the work." which broke into 3 lines on mobile and showed a tiny
   * underline under just "work.").
   *
   * background-image + box-decoration-break:clone paints the gradient
   * under every rendered line of the emphasis, behaving like a real
   * inline underline that wraps with the text. On single-line
   * emphasis (homepage "never had.") this looks identical to the old
   * pseudo-element approach. */
  background-image: linear-gradient(90deg, var(--pink), var(--orange));
  background-size: 0% 3px;
  background-repeat: no-repeat;
  background-position: 0 calc(100% + 6px);
  padding-bottom: 9px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.85s var(--ease) 0.4s;
}
.plate.reveal.in h1 .emp { background-size: 100% 3px; }

/* Mobile: tighter line-height so the wrapped underline sits cleanly
 * inside its own line without bleeding into the next. */
@media (max-width: 760px) {
  .plate h1 { line-height: 1.08; }
  .plate h1 .emp {
    background-position: 0 calc(100% + 2px);
    padding-bottom: 4px;
    background-size: 0% 2px;
  }
  .plate.reveal.in h1 .emp { background-size: 100% 2px; }
}
.plate .lede {
  margin-top: 36px;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--text);
  max-width: 60ch;
  font-weight: 400;
}
.plate .lede b { font-weight: 600; color: var(--text); }
.plate .lede .mute { color: var(--mute); }
.plate .ctas { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Risk-reversal beat sitting under the CTAs. Shared mono caps row that
 * kills the three biggest objections at the click moment. */
.plate .reassure {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--mute);
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.plate .reassure .check { color: var(--pink); font-weight: 700; }
.plate .reassure .sep { color: var(--dim); }

/* (Removed: the .emp::after draw-in animation. The underline is now a
 * background-image gradient on .emp itself — see the .plate h1 .emp
 * block above. The reveal-in transition there animates background-size
 * from 0% to 100%, producing the same left-to-right draw effect.) */

/* Kicker hairline (the 28px lead bar before any "kicker" label) draws
 * in from the left whenever its containing .reveal section lands. Works
 * for hero plates, audit panels, deep-page section heads, etc. */
.reveal .kicker::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s var(--ease) 0.18s;
}
.reveal.in .kicker::before { transform: scaleX(1); }

/* Generic staggered child rise — common grid/list patterns fade in one
 * after another once their parent reveal lands. Children are translated
 * + transparent until the parent gets .in, then they animate in series.
 * Selectors are deliberately scoped to known container classes only so
 * we never animate unintended descendants. */
.reveal .arg-grid > .arg,
.reveal .timeline > .step,
.reveal .checklist > .item,
.reveal .deliverables > .item,
.reveal .arg-pair > *,
.reveal .grid > .item,
.reveal .svc-list > .svc {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.reveal.in .arg-grid > .arg,
.reveal.in .timeline > .step,
.reveal.in .checklist > .item,
.reveal.in .deliverables > .item,
.reveal.in .arg-pair > *,
.reveal.in .grid > .item,
.reveal.in .svc-list > .svc {
  opacity: 1;
  transform: translateY(0);
}
.reveal.in .arg-grid > .arg:nth-child(1),
.reveal.in .timeline > .step:nth-child(1),
.reveal.in .checklist > .item:nth-child(1),
.reveal.in .deliverables > .item:nth-child(1),
.reveal.in .arg-pair > *:nth-child(1),
.reveal.in .grid > .item:nth-child(1),
.reveal.in .svc-list > .svc:nth-child(1) { transition-delay: 0.10s; }
.reveal.in .arg-grid > .arg:nth-child(2),
.reveal.in .timeline > .step:nth-child(2),
.reveal.in .checklist > .item:nth-child(2),
.reveal.in .deliverables > .item:nth-child(2),
.reveal.in .arg-pair > *:nth-child(2),
.reveal.in .grid > .item:nth-child(2),
.reveal.in .svc-list > .svc:nth-child(2) { transition-delay: 0.18s; }
.reveal.in .arg-grid > .arg:nth-child(3),
.reveal.in .timeline > .step:nth-child(3),
.reveal.in .checklist > .item:nth-child(3),
.reveal.in .deliverables > .item:nth-child(3),
.reveal.in .arg-pair > *:nth-child(3),
.reveal.in .grid > .item:nth-child(3),
.reveal.in .svc-list > .svc:nth-child(3) { transition-delay: 0.26s; }
.reveal.in .timeline > .step:nth-child(4),
.reveal.in .checklist > .item:nth-child(4),
.reveal.in .deliverables > .item:nth-child(4),
.reveal.in .grid > .item:nth-child(4),
.reveal.in .svc-list > .svc:nth-child(4) { transition-delay: 0.34s; }
.reveal.in .checklist > .item:nth-child(5),
.reveal.in .deliverables > .item:nth-child(5),
.reveal.in .svc-list > .svc:nth-child(5) { transition-delay: 0.42s; }
.reveal.in .checklist > .item:nth-child(6),
.reveal.in .deliverables > .item:nth-child(6),
.reveal.in .svc-list > .svc:nth-child(6) { transition-delay: 0.50s; }
.reveal.in .svc-list > .svc:nth-child(7) { transition-delay: 0.58s; }
.reveal.in .svc-list > .svc:nth-child(8) { transition-delay: 0.66s; }
.plate .proof {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mute);
}
.plate .proof .badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--text);
  font-weight: 600;
}
.plate .proof .badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green);
}
.plate .proof .sep { color: var(--dim); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600;
  color: var(--text); text-decoration: none;
  border: 1px solid var(--line-2);
  background: rgba(20, 20, 20, 0.55);
  cursor: pointer;
  transition: border-color .35s, background .35s, color .35s, transform .35s var(--ease);
}
.btn:hover { border-color: var(--pink); transform: translateY(-1px); }
.btn .arrow { transition: transform .35s var(--ease); display: inline-block; }
.btn:hover .arrow { transform: translateX(4px); }
.btn.primary { background: var(--gold); color: #1a1814; border-color: var(--gold); font-weight: 700; }
.btn.primary:hover { background: #d8a84a; border-color: #d8a84a; }
.btn.gradient-outline {
  background:
    linear-gradient(var(--panel-3), var(--panel-3)) padding-box,
    linear-gradient(96deg, var(--pink), var(--orange), var(--pink)) border-box;
  border: 1px solid transparent;
  background-size: 100% 100%, 200% 100%;
  background-position: 0 0, 0% 50%;
  color: var(--text);
  transition: transform .35s var(--ease), background-position .6s var(--ease), color .35s;
}
.btn.gradient-outline:hover {
  transform: translateY(-1px);
  animation: gradFlow 4s linear infinite;
}
@keyframes gradFlow { to { background-position: 0 0, 200% 50%; } }

/* Page foot */
footer.site-foot {
  padding: 32px clamp(20px, 4vw, 80px);
  border-top: 1px solid var(--line-pink-soft);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--foot);
  background: rgba(20, 19, 17, 0.6);
  align-items: center;
}
footer.site-foot .right .pink { color: var(--pink); }
footer.site-foot .right .orange { color: var(--orange); }
footer.site-foot .right a { color: var(--mute); text-decoration: none; transition: color .35s; }
footer.site-foot .right a:hover { color: var(--text); }

/* Bridge for non-jeweler services */
.bridge {
  padding: clamp(72px, 8vw, 110px) clamp(20px, 4vw, 80px);
  max-width: 1080px; margin: 0 auto;
  text-align: center;
}
.bridge .kicker {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 24px;
  display: inline-flex; align-items: center; gap: 14px;
}
.bridge .kicker::before, .bridge .kicker::after {
  content: ""; width: 28px; height: 1px; background: var(--line-2);
}
.bridge h3 {
  font-weight: 700;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -0.02em; line-height: 1.1;
  color: var(--text);
  max-width: 24ch; margin: 0 auto;
}
.bridge p {
  margin: 18px auto 32px;
  font-size: 17px; line-height: 1.55;
  color: var(--mute);
  max-width: 54ch;
}
.bridge .ctas { display: flex; justify-content: center; }

/* Section heading kit */
.section-head {
  margin-bottom: 48px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end; gap: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}
.section-head .num {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--pink); font-weight: 600;
}
.section-head h2 {
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.02em; line-height: 1;
}
.section-head h2 .pink { color: var(--pink); }
.section-head h2 .orange { color: var(--orange); }
.section-head .meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mute); text-align: right;
}
@media (max-width: 1100px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head .meta { text-align: left; }

  /* On mobile the nav is a flex row: logo (pushed left) | hamburger.
   * The "Currently accepting" badge is hidden to keep the bar uncluttered.
   * The desktop links list collapses into an overlay below. */
  .nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px 6px 12px;
  }
  .nav > .logo { margin-right: auto; }
  .nav .state { display: none; }
  /* Compact CTA on mobile so logo + CTA + hamburger fit one row. */
  .nav .nav-cta {
    padding: 7px 12px;
    font-size: 9.5px; letter-spacing: 0.18em;
  }

  .hamburger { display: inline-block; }
  .nav .links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    padding: 16px 18px;
    background:
      linear-gradient(rgba(20, 20, 20, 0.92), rgba(20, 20, 20, 0.92)) padding-box,
      linear-gradient(96deg, var(--pink), var(--orange), var(--pink)) border-box;
    border: 1px solid transparent;
    border-radius: 22px;
    backdrop-filter: blur(24px);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
    z-index: 70;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
      opacity 0.45s var(--ease),
      transform 0.45s var(--ease);
  }
  .nav .links a {
    padding: 12px 14px;
    font-size: 12.5px;
    text-align: left;
    border-bottom: 1px solid var(--line);
  }
  .nav .links a:last-child { border-bottom: 0; }
  .nav .links a::after { display: none; }
  .nav .links a:hover { color: var(--pink); }
  .nav .links a.active { color: var(--text); }
  .nav .links a.active::before {
    content: ""; display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(96deg, var(--pink), var(--orange));
    margin-right: 10px;
    vertical-align: middle;
  }
  /* Open state */
  .nav-toggle:checked ~ .links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}
@media (max-width: 600px) {
  .nav .state { font-size: 9.5px; padding: 4px 10px; }
}

/* "Last reviewed" footer stamp, appended to cornerstone page content
 * by seo.php #25. Visible freshness signal for readers + reinforces
 * dateModified to crawlers that prefer visible cues. */
.endico-last-reviewed {
  margin: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 80px) clamp(24px, 3vw, 40px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: right;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.endico-last-reviewed time { color: var(--text); font-weight: 700; }