/* ==============================================
   ProjectThunder — Sacred Systems with Soul
   Modernized site stylesheet
   ============================================== */

:root {
  /* Sacred / storm palette */
  --pt-bg:        #0a0e1f;
  --pt-bg-2:      #121736;
  --pt-bg-3:      #1c2350;
  --pt-ink:       #f4eedf;
  --pt-ink-muted: #b8c0e1;
  --pt-ink-soft:  #8a94be;
  --pt-gold:      #f0c668;
  --pt-gold-warm: #f7d987;
  --pt-violet:    #a18bff;
  --pt-line:      rgba(244,238,223,.14);
  --pt-line-2:    rgba(244,238,223,.07);

  --pt-shadow-2:  0 30px 80px rgba(0,0,0,.55);

  --pt-serif:    "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --pt-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --pt-max:      1200px;
  --pt-radius:   14px;
  --pt-header-h: 78px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--pt-bg);
  color: var(--pt-ink);
  font-family: var(--pt-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip` hides horizontal overflow without creating a scrolling container.
     Using `hidden` here would force body into its own vertical scroll context,
     producing two scrollbars (html + body) on long pages. */
  overflow-x: clip;
  /* Prevent rubber-band horizontal scrolling on iOS Safari. Without this, an off-screen
     fixed-positioned drawer (the mobile nav at translateX(100%)) can be exposed via
     two-finger horizontal pan, making the page look like content "hangs off." */
  overscroll-behavior-x: contain;
}
/* Older Safari (<16) treats overflow-x: clip as 'visible'. Fall back to hidden so the
   off-screen drawer can't escape the viewport on those browsers. The double-scrollbar
   side effect of overflow-x:hidden on body is acceptable here vs the worse alternative
   of a visible-but-clipped drawer hanging off the right edge. */
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}
img { max-width: 100%; display: block; }
a { color: var(--pt-gold); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--pt-gold-warm); }

/* ADA: visible focus everywhere */
:focus-visible {
  outline: 2px solid var(--pt-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -10000px;
  top: 12px;
  background: var(--pt-gold);
  color: var(--pt-bg);
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: .04em;
  z-index: 200;
}
.skip-link:focus { left: 12px; }

h1, h2, h3, h4 {
  font-family: var(--pt-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 .6em;
  color: var(--pt-ink);
}
h1 { font-size: clamp(2.4rem, 5.6vw, 5rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.85rem); }
p  { margin: 0 0 1.1em; color: var(--pt-ink-muted); }

.eyebrow {
  display: inline-block;
  font-family: var(--pt-sans);
  font-size: .78rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--pt-gold);
  margin-bottom: 1.2rem;
  font-weight: 500;
}

.container {
  width: 100%;
  max-width: var(--pt-max);
  margin: 0 auto;
  padding: 0 24px;
}

.lead {
  font-family: var(--pt-serif);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-style: italic;
  color: var(--pt-ink);
  line-height: 1.45;
  font-weight: 400;
}

/* ============ Header ============ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 0;
  transition: transform .32s ease, background .35s ease, padding .35s ease, backdrop-filter .35s ease;
}
/* On pages with a full hero (page-hero / hero / video-hero / scan-video-hero), the
   header is HIDDEN above the viewport at scroll 0 and slides down once the user
   has scrolled past the 30px threshold — Calvin asked 2026-06-02 for "no bar at
   the top, then a toolbar emerges as you scroll down." Without this, the natural
   colors of the hero image bled through the transparent header and read as a
   half-rendered bar (sana-commerce.webp's dark storm column was the worst case).
   Pages without a hero (legal, glossary, etc.) keep the header always visible —
   they have nothing else at the top to anchor the nav. */
body.has-hero-page .site-header { transform: translateY(-100%); }
body.has-hero-page .site-header.scrolled { transform: translateY(0); }
.site-header.scrolled {
  /* Solid bg, no border — the prior 1px var(--pt-line-2) border-bottom
     (rgba(244,238,223,.07)) was rendering as a faint warm-cream line at the
     header's bottom edge against the dark page, which Calvin caught as a
     "dropoff" 2026-06-02. Replaced with a soft 6px shadow-fade so the header
     reads as elevated without a hard seam. */
  background: rgba(10,14,31,.97);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  padding: 10px 0;
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .55);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--pt-ink);
  flex-shrink: 0;
}
.brand img.logo {
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.4));
}
.brand:focus-visible { outline-offset: 6px; }

.nav-links {
  display: flex; align-items: center; gap: 18px;
  list-style: none; padding: 0; margin: 0;
}
.nav-links a {
  color: var(--pt-ink);
  font-size: .88rem;
  letter-spacing: .03em;
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
}
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--pt-gold);
  transition: width .3s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--pt-gold-warm); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-links a.nav-cta {
  display: inline-flex; align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--pt-gold);
  color: var(--pt-gold);
  border-radius: 999px;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  margin-left: 6px;
}
.nav-links a.nav-cta::after { display: none; }
.nav-links a.nav-cta:hover,
.nav-links a.nav-cta:focus-visible {
  background: var(--pt-gold);
  color: var(--pt-bg);
}
/* Free-Scan pill — filled, sits next to the conversation CTA */
.nav-links a.nav-scan {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  background: linear-gradient(135deg, var(--pt-gold) 0%, var(--pt-gold-warm) 100%);
  color: var(--pt-bg);
  border: 1px solid var(--pt-gold);
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(240,198,104,.25);
}
.nav-links a.nav-scan::after { display: none; }
.nav-links a.nav-scan:hover,
.nav-links a.nav-scan:focus-visible {
  color: var(--pt-bg);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(240,198,104,.4);
}
.nav-links a.nav-scan .scan-spark { font-size: 1rem; line-height: 0; }
@media (max-width: 1380px) {
  /* Conversation CTA hides first; Free Scan stays visible longer */
  .nav-links li.cta-li { display: none; }
}
@media (max-width: 1180px) {
  .nav-links li.scan-li { display: none; }
}
/* Lift the hamburger breakpoint so the full nav has room to breathe */
@media (max-width: 1080px) {
  /* Hamburger takes over here (existing rule below at .menu-toggle) */
}

.menu-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--pt-line);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}
.menu-toggle span {
  display: block;
  position: absolute; left: 11px; right: 11px;
  height: 1px; background: var(--pt-ink);
  transition: transform .3s ease, opacity .3s ease, top .3s ease;
}
.menu-toggle span:nth-child(1) { top: 15px; }
.menu-toggle span:nth-child(2) { top: 20px; }
.menu-toggle span:nth-child(3) { top: 25px; }
.menu-toggle.open span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

/* Header container gets a bit more breathing room than page content */
.site-header .container { max-width: 1500px; }

@media (max-width: 1500px) {
  .menu-toggle { display: block; }
  .nav-links {
    position: fixed; top: 0; right: 0;
    width: 84%; max-width: 380px; height: 100vh;
    background: var(--pt-bg-2);
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 32px 32px;
    gap: 26px;
    transform: translateX(100%);
    transition: transform .35s ease, visibility 0s linear .35s;
    border-left: 1px solid var(--pt-line);
    /* When closed, take the drawer out of the accessibility tree AND prevent it from
       contributing to layout overflow on browsers that don't honor overflow-x:clip
       on the parent. visibility:hidden alone doesn't drop layout, but combined with
       the transform-off-screen it ensures the drawer is fully inert when closed. */
    visibility: hidden;
  }
  .nav-links.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .35s ease, visibility 0s linear 0s;
  }
  .nav-links a { font-size: 1.1rem; }
  .nav-links li.cta-li { display: block; }
  .nav-links li.scan-li { display: block; }
  .nav-cta { margin-left: 0; }
}

/* ============ Hero ============ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  /* CRITICAL: must clip vertically. The scroll-driven parallax in main.js translates
     `.parallax-bolt` (data-speed="1.9") downward as the user scrolls. With `overflow: visible`
     the translated layer extends the document scroll height, which lets the user scroll
     further, which translates the bolt further, which extends the height again — a
     geometric-series loop that settles at roughly natural_height / (1 - 0.9) = 10× the
     real page height. On mobile that reads as "the home page scrolls forever with blank
     space at the bottom." `overflow: clip` (with hidden fallback for iOS Safari < 16)
     contains the translated layers inside the hero box so they cannot grow the page. */
  overflow: clip;
  isolation: isolate;
}
@supports not (overflow: clip) {
  .hero { overflow: hidden; }
}
.parallax-layer {
  position: absolute; inset: -10% -2%;
  pointer-events: none;
  will-change: transform;
}

.hero-photo {
  position: absolute; inset: 0;
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center;
  z-index: -4;
  filter: saturate(0.7) brightness(0.55);
}
.hero-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,31,.55) 0%, rgba(10,14,31,.78) 60%, var(--pt-bg) 100%),
              radial-gradient(circle at 20% 30%, rgba(139,109,255,.22), transparent 60%);
}

.parallax-clouds {
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(161,139,255,.22), transparent 70%),
    radial-gradient(ellipse 70% 50% at 80% 60%, rgba(240,198,104,.14), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(28,35,80,.6), transparent 70%);
  z-index: -3;
}
.parallax-stars {
  background-image:
    radial-gradient(1px 1px at 12% 20%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 25% 60%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.5px 1.5px at 65% 35%, rgba(244,238,223,.65), transparent),
    radial-gradient(1px 1px at 80% 75%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,.35), transparent),
    radial-gradient(2px 2px at 90% 18%, rgba(244,238,223,.6), transparent),
    radial-gradient(1px 1px at 35% 80%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 8% 70%, rgba(255,255,255,.45), transparent);
  z-index: -2;
  opacity: .7;
}
.parallax-bolt {
  z-index: -1;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 4vh;
  opacity: .65;
  filter: drop-shadow(0 0 60px rgba(240,198,104,.7));
}
.parallax-bolt svg { width: clamp(420px, 60vw, 760px); height: auto; }

.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,31,.0) 60%, var(--pt-bg) 100%);
  pointer-events: none;
  z-index: -1;
}

.hero-inner {
  position: relative;
  z-index: 1;
  /* Top/bottom only — DO NOT use the four-value `padding` shorthand here. .hero-inner
     shares the element with .container (which sets padding: 0 24px) and the shorthand
     would zero out the horizontal gutter, slamming the hero text against the viewport
     edge on iPad portrait and similar narrow widths. */
  padding-top: calc(var(--pt-header-h) + 60px);
  padding-bottom: 100px;
}
.hero h1 {
  max-width: 14ch;
  background: linear-gradient(180deg, #fff 0%, #d6cfba 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .lead { max-width: 56ch; margin-top: 0.5rem; }

/* "Soul*" mark + first-use disclaimer — defines the brand term up front so it
   doesn't read as vague poetry. Calvin added 2026-06-02. The mark itself is a
   small gold anchor link to the disclaimer paragraph right below the lead. */
.soul-mark {
  font-size: .55em;
  vertical-align: super;
  line-height: 0;
  -webkit-text-fill-color: var(--pt-gold);
  color: var(--pt-gold);
  margin-left: 2px;
  font-weight: 400;
}
.soul-mark a { color: var(--pt-gold); text-decoration: none; }
.soul-mark a:hover, .soul-mark a:focus-visible { text-decoration: underline; }
.soul-note {
  max-width: 60ch;
  margin-top: 14px;
  font-family: var(--pt-sans);
  font-size: .82rem;
  font-style: italic;
  color: var(--pt-ink-soft);
  letter-spacing: .01em;
  line-height: 1.55;
}

.since {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 24px;
  padding: 7px 14px;
  border: 1px solid var(--pt-line);
  border-radius: 999px;
  font-family: var(--pt-sans);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pt-ink-muted);
}
.since::before { content: ""; width: 6px; height: 6px; background: var(--pt-gold); border-radius: 50%; }

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 2rem; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: all .25s ease;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--pt-sans);
  font-weight: 500;
  text-decoration: none;
}
.btn-primary { background: var(--pt-gold); color: var(--pt-bg); }
.btn-primary:hover {
  background: var(--pt-gold-warm);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(240,198,104,.25);
  color: var(--pt-bg);
}
.btn-ghost { border-color: var(--pt-line); color: var(--pt-ink); }
.btn-ghost:hover { border-color: var(--pt-gold); color: var(--pt-gold); transform: translateY(-2px); }
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============ Sections ============ */
section { position: relative; padding: 120px 0; }
@media (max-width: 700px) { section { padding: 80px 0; } }
.section-head { max-width: 720px; margin-bottom: 60px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.divider { width: 60px; height: 1px; background: var(--pt-gold); margin: 18px 0 22px; }
.section-head.center .divider { margin-left: auto; margin-right: auto; }

.mission {
  background:
    linear-gradient(180deg, rgba(10,14,31,.85), rgba(10,14,31,.95)),
    radial-gradient(circle at 50% 0%, rgba(161,139,255,.18), transparent 60%);
  background-attachment: fixed, fixed;
  text-align: center;
  padding: 160px 0;
  border-top: 1px solid var(--pt-line-2);
  border-bottom: 1px solid var(--pt-line-2);
}
.mission .container { max-width: 880px; }
.mission .eyebrow { color: var(--pt-violet); }
.mission p.lead {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--pt-ink);
  margin-bottom: 1.2em;
  font-style: normal;
}
.mission p.lead em { color: var(--pt-gold-warm); font-style: italic; }
.mission-sig {
  font-family: var(--pt-serif);
  letter-spacing: .35em;
  text-transform: uppercase;
  font-size: .9rem;
  color: var(--pt-ink-muted);
  margin-top: 2rem;
}

/* ============ Services ============ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (min-width: 980px) { .services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Phones: drop to a single column so the "Marketing wants:" / "Target range:" copy
   inside each service card has room to breathe. At 2-column on a 375px viewport each
   card is ~165px wide and the labels wrap awkwardly across multiple lines. */
@media (max-width: 540px) { .services-grid { grid-template-columns: 1fr; } }
.service-card {
  position: relative;
  background: linear-gradient(180deg, rgba(28,35,80,.5), rgba(18,23,54,.5));
  border: 1px solid var(--pt-line-2);
  border-radius: var(--pt-radius);
  padding: 36px 28px;
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
  overflow: hidden;
  text-decoration: none;
  display: block;
  color: inherit;
}
.service-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(240,198,104,.12), transparent 50%);
  opacity: 0; transition: opacity .35s ease;
}
.service-card:hover { transform: translateY(-6px); border-color: rgba(240,198,104,.4); }
.service-card:hover::before { opacity: 1; }
.service-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(240,198,104,.18), rgba(161,139,255,.18));
  display: flex; align-items: center; justify-content: center;
  color: var(--pt-gold);
  margin-bottom: 22px;
}
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.service-card p { font-size: .96rem; color: var(--pt-ink-muted); margin-bottom: 0; }

/* ============ Platforms ============ */
.platforms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 880px) { .platforms-grid { grid-template-columns: 1fr; } }
.platform-card {
  position: relative;
  padding: 44px 32px;
  border: 1px solid var(--pt-line-2);
  border-radius: var(--pt-radius);
  background: linear-gradient(180deg, rgba(28,35,80,.5), rgba(18,23,54,.4));
  transition: transform .35s ease, border-color .35s ease;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  display: block;
}
.platform-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 20% 0%, rgba(240,198,104,.12), transparent 55%);
  opacity: 0; transition: opacity .35s ease;
}
.platform-card:hover { transform: translateY(-6px); border-color: rgba(240,198,104,.4); }
.platform-card:hover::before { opacity: 1; }
.platform-mark {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(161,139,255,.2), rgba(240,198,104,.18));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  border: 1px solid var(--pt-line);
}
.platform-mark svg { width: 28px; height: 28px; color: var(--pt-gold-warm); }
.platform-card .role-tag {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--pt-violet);
  margin-bottom: 10px;
}
.platform-card h3 { font-size: 1.5rem; margin-bottom: 12px; }
.platform-card ul { list-style: none; padding: 0; margin: 18px 0 0; }
.platform-card ul li {
  position: relative; padding-left: 18px;
  font-size: .92rem; color: var(--pt-ink-muted); margin-bottom: 8px;
}
.platform-card ul li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pt-gold);
}
.platform-card .learn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pt-gold);
}
.platform-card:hover .learn { color: var(--pt-gold-warm); }

/* ============ Quote ============ */
.quote-section {
  padding: 140px 0;
  background:
    linear-gradient(180deg, rgba(10,14,31,.92), rgba(10,14,31,.98)),
    radial-gradient(circle at 80% 50%, rgba(161,139,255,.18), transparent 60%);
  background-attachment: fixed, fixed;
  text-align: center;
}
.quote-section blockquote {
  margin: 0 auto;
  max-width: 740px;
  font-family: var(--pt-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.35;
  color: var(--pt-ink);
}
.quote-section blockquote::before {
  content: "\201C";
  display: block;
  font-size: 4rem;
  line-height: 0;
  color: var(--pt-gold);
  margin-bottom: 30px;
  font-family: var(--pt-serif);
}
.quote-cite {
  margin-top: 24px; display: block;
  font-family: var(--pt-sans);
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--pt-ink-soft);
  font-style: normal;
}

/* ============ CTA ============ */
.cta-band {
  position: relative;
  text-align: center;
  padding: 110px 0;
  background:
    linear-gradient(135deg, rgba(240,198,104,.06), rgba(161,139,255,.06)),
    var(--pt-bg);
  border-top: 1px solid var(--pt-line-2);
  border-bottom: 1px solid var(--pt-line-2);
  isolation: isolate;
  overflow: clip; /* same defense as .hero — keeps the bolt SVG from extending past
                    the section and re-introducing the parallax-overflow bug class */
}
.cta-band h2 { margin-bottom: 18px; }

/* Bolt re-emergence behind the CTA copy.
   Static (no scroll-driven transform), centered, sized off vw with sane clamps,
   below z-index 1 so copy stays on top. Drop-shadow gives it the same warm halo
   as the hero bolt without needing the parallax glow layer. */
.cta-bolt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  filter: drop-shadow(0 0 32px rgba(240,198,104,.35));
}
.cta-bolt svg { width: clamp(240px, 32vw, 420px); height: auto; }
.cta-band > .container { position: relative; z-index: 1; }
.cta-phone {
  font-family: var(--pt-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: .04em;
  color: var(--pt-gold);
  display: inline-block;
  margin-top: 14px;
}
.cta-phone:hover { color: var(--pt-gold-warm); }

/* ============ Footer ============ */
.site-footer { background: #060919; padding: 80px 0 40px; border-top: 1px solid var(--pt-line-2); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 50px;
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  /* Center the logo + tagline + social row in the brand cell */
  .footer-grid > div > .brand { display: inline-block; }
  .footer-grid > div > .footer-tag { text-align: center; }
  .footer-grid > div > .socials { justify-content: center; }
  /* Ditto the contact block (phone / email / send-a-message) */
  .footer-grid > div > ul { display: inline-block; text-align: left; }
  /* Center the anniversary seal column too */
  .site-footer .anniversary-seal { text-align: center; }
}
.site-footer h4 {
  font-family: var(--pt-sans);
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--pt-ink-soft);
  font-weight: 500;
  margin-bottom: 22px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer ul a { color: var(--pt-ink-muted); font-size: .95rem; }
.site-footer ul a:hover { color: var(--pt-gold-warm); }
.footer-tag {
  font-family: var(--pt-serif);
  font-style: italic;
  color: var(--pt-ink-muted);
  font-size: 1.05rem;
  margin-top: 14px;
}
.socials { display: flex; gap: 16px; margin-top: 14px; }
.socials a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--pt-line);
  border-radius: 50%;
  color: var(--pt-ink-muted);
  transition: all .25s ease;
}
.socials a:hover { border-color: var(--pt-gold); color: var(--pt-gold); transform: translateY(-2px); }
.socials svg { width: 16px; height: 16px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 36px; margin-top: 50px;
  border-top: 1px solid var(--pt-line-2);
  font-size: .85rem; color: var(--pt-ink-soft);
  flex-wrap: wrap; gap: 16px;
}

/* ============ Page hero ============ */
.page-hero {
  position: relative;
  padding: calc(var(--pt-header-h) + 80px) 0 100px;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -4;
  background-image: var(--page-hero-image, none);
  background-size: cover;
  background-position: center;
  filter: saturate(.9) contrast(1.05);
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,14,31,.25) 0%, rgba(10,14,31,.55) 55%, var(--pt-bg) 100%);
  pointer-events: none;
}
.page-hero .parallax-layer { position: absolute; inset: 0; }
.page-hero h1 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.page-hero .lead { max-width: 60ch; margin: 0 auto; color: var(--pt-ink-muted); }

/* ============ About ============ */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 880px) { .story-grid { grid-template-columns: 1fr; gap: 50px; } }
.story-image {
  border-radius: var(--pt-radius);
  border: 1px solid var(--pt-line);
  aspect-ratio: 4/5;
  background:
    radial-gradient(circle at 30% 20%, rgba(161,139,255,.4), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(240,198,104,.3), transparent 50%),
    linear-gradient(135deg, var(--pt-bg-2), var(--pt-bg-3));
  position: relative;
  overflow: hidden;
}
.story-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: .9;
}
.story-image svg {
  position: absolute; inset: 0; margin: auto;
  width: 60%; height: 60%;
  opacity: .25;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 880px) { .values-grid { grid-template-columns: 1fr; } }
.value-card {
  padding: 36px;
  border: 1px solid var(--pt-line-2);
  border-radius: var(--pt-radius);
  background: linear-gradient(180deg, rgba(28,35,80,.4), rgba(18,23,54,.3));
  transition: border-color .3s ease, transform .3s ease;
}
.value-card:hover { border-color: rgba(240,198,104,.4); transform: translateY(-4px); }
.value-card .num {
  font-family: var(--pt-serif);
  font-size: 2.4rem;
  color: var(--pt-gold);
  line-height: 1;
  margin-bottom: 18px;
}
.value-card h3 { font-size: 1.4rem; margin-bottom: 12px; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 880px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  padding: 28px 24px 32px;
  border: 1px solid var(--pt-line-2);
  border-radius: var(--pt-radius);
  background: linear-gradient(180deg, rgba(28,35,80,.4), rgba(18,23,54,.3));
  transition: border-color .3s ease, transform .3s ease;
  text-align: center;
}
.team-card:hover { border-color: rgba(240,198,104,.4); transform: translateY(-3px); }
.team-photo {
  width: 130px; height: 130px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--pt-line);
  background: linear-gradient(135deg, rgba(161,139,255,.4), rgba(240,198,104,.3));
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-size: 1.3rem; margin-bottom: 4px; }
.team-card .role {
  font-family: var(--pt-sans);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pt-gold);
  margin-bottom: 14px;
  display: block;
}
.team-card p { font-size: .95rem; text-align: left; margin: 0; }

/* ============ Portfolio ============ */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 880px) { .portfolio-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .portfolio-grid { grid-template-columns: 1fr; } }
.project-card {
  position: relative;
  border-radius: var(--pt-radius);
  overflow: hidden;
  border: 1px solid var(--pt-line-2);
  min-height: 280px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
  transition: transform .35s ease, border-color .35s ease;
  isolation: isolate;
}
.project-card::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(135deg, var(--pt-bg-2), var(--pt-bg-3));
  transition: transform .6s ease;
}
.project-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 50%, rgba(10,14,31,.85) 100%);
}
.project-card:hover { transform: translateY(-4px); border-color: rgba(240,198,104,.4); }
.project-card:hover::before { transform: scale(1.05); }
.project-card .meta { position: relative; z-index: 1; width: 100%; }
.project-card h3 { font-size: 1.4rem; margin: 0 0 8px; color: var(--pt-ink); }
.project-card .tag {
  display: block;
  margin-bottom: 10px;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pt-gold);
  font-family: var(--pt-sans);
}
.project-card .meta p {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--pt-ink-muted);
  margin: 0;
}
.project-card .visual {
  position: absolute; inset: 0; z-index: -1;
  display: flex; align-items: center; justify-content: center;
  opacity: .3; transition: opacity .35s ease, transform .6s ease;
}
.project-card:hover .visual { opacity: .55; }
.project-card .visual svg { width: 48%; height: auto; }
.project-card.has-photo .visual { opacity: .55; }
.project-card.has-photo:hover .visual { opacity: .8; }
.project-card.has-photo:hover .visual img { transform: scale(1.04); }
.project-card.has-photo .visual img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  transition: transform .6s ease;
}
.project-card.has-photo { min-height: 340px; }
.project-card.has-photo::after {
  background: linear-gradient(180deg, rgba(10,14,31,.55) 0%, rgba(10,14,31,.85) 45%, rgba(10,14,31,.97) 100%);
}
.project-card.flavor-1::before { background: linear-gradient(135deg, #1c2350, #4a2b6f); }
.project-card.flavor-2::before { background: linear-gradient(135deg, #2a1d3d, #5a3b1f); }
.project-card.flavor-3::before { background: linear-gradient(135deg, #1a3d3a, #2c4f72); }
.project-card.flavor-4::before { background: linear-gradient(135deg, #38253b, #5a3050); }
.project-card.flavor-5::before { background: linear-gradient(135deg, #1d2842, #2c4f72); }
.project-card.flavor-6::before { background: linear-gradient(135deg, #29213d, #4d2a4f); }

/* ============ Contact ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 50px; } }
.contact-info h3 { margin-bottom: 14px; }
.info-block { margin-bottom: 32px; }
.info-block .label {
  font-size: .78rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--pt-ink-soft);
  margin-bottom: 8px;
}
.info-block .value {
  font-family: var(--pt-serif);
  font-size: 1.4rem;
  color: var(--pt-ink);
}
.info-block .value a { color: var(--pt-gold); }

form.contact-form {
  background: linear-gradient(180deg, rgba(28,35,80,.4), rgba(18,23,54,.3));
  border: 1px solid var(--pt-line-2);
  border-radius: var(--pt-radius);
  padding: 40px;
}
@media (max-width: 540px) { form.contact-form { padding: 28px 22px; } }
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--pt-ink-soft);
  margin-bottom: 8px;
}
.field input, .field textarea {
  width: 100%;
  background: rgba(10,14,31,.5);
  border: 1px solid var(--pt-line);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--pt-sans);
  font-size: 1rem;
  color: var(--pt-ink);
  transition: border-color .25s ease, background .25s ease;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--pt-gold);
  background: rgba(10,14,31,.75);
  box-shadow: 0 0 0 3px rgba(240,198,104,.15);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #f08080; }
.field textarea { min-height: 140px; resize: vertical; }
.fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 540px) { .fields-row { grid-template-columns: 1fr; } }

/* ============ Free Scan: Tesla coil loader + report ============ */
.scan-loader {
  display: none;
  margin: 60px auto;
  width: 360px;
  max-width: 90vw;
  aspect-ratio: 1;
  position: relative;
}
.scan-loader.active { display: block; }
.scan-loader svg { width: 100%; height: 100%; overflow: visible; }
.scan-loader .coil-base {
  fill: none;
  stroke: var(--pt-gold);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(240,198,104,.45));
  animation: coil-base-glow 1.1s ease-in-out infinite alternate;
}
.scan-loader .coil-bolt {
  stroke: var(--pt-gold-warm);
  fill: url(#coil-bolt-grad);
  filter: drop-shadow(0 0 28px rgba(240,198,104,.85));
  transform-origin: 110px 110px;
  animation: coil-spark 1.1s ease-in-out infinite, coil-jitter 0.18s steps(2) infinite;
}
.scan-loader .coil-arc {
  fill: none;
  stroke: rgba(247,217,135,.95);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 10 14;
  transform-origin: 110px 110px;
  animation: coil-rotate 3s linear infinite, coil-flicker 1.4s steps(8) infinite;
  filter: drop-shadow(0 0 16px rgba(161,139,255,.7));
}
.scan-loader .coil-arc.rev { animation-direction: reverse, normal; }
.scan-loader .coil-pulse {
  fill: none;
  stroke: rgba(161,139,255,.7);
  stroke-width: 3;
  transform-origin: 110px 110px;
  animation: coil-pulse 1.1s ease-out infinite;
}
.scan-loader .coil-pulse.delay-2 { animation-delay: .37s; }
.scan-loader .coil-pulse.delay-3 { animation-delay: .74s; }
.scan-loader .coil-strike {
  stroke: rgba(255,255,255,.95);
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 0 14px rgba(247,217,135,1));
  opacity: 0;
  animation: coil-strike 2.4s ease-in-out infinite;
}
.scan-loader .coil-strike.s2 { animation-delay: .8s; }
.scan-loader .coil-strike.s3 { animation-delay: 1.6s; }
.scan-loader-caption {
  text-align: center;
  margin-top: 22px;
  font-family: var(--pt-sans);
  font-size: 1rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pt-gold);
  text-shadow: 0 0 24px rgba(240,198,104,.4);
}
.scan-loader-caption .dots::after {
  content: "";
  display: inline-block;
  width: 1ch;
  animation: coil-dots 1.4s steps(4) infinite;
}
@keyframes coil-base-glow {
  from { filter: drop-shadow(0 0 6px rgba(240,198,104,.3)); }
  to   { filter: drop-shadow(0 0 18px rgba(240,198,104,.85)); }
}
@keyframes coil-spark {
  0%, 50%, 100% { opacity: .35; transform: rotate(0deg) scale(.92); }
  20%           { opacity: 1;   transform: rotate(-4deg) scale(1.08); }
  30%           { opacity: .8;  transform: rotate(3deg) scale(1.02); }
}
@keyframes coil-jitter {
  0% { translate: -1px 0; }
  50% { translate: 1px -1px; }
  100% { translate: 0 1px; }
}
@keyframes coil-rotate { to { transform: rotate(360deg); } }
@keyframes coil-flicker { 0%,100%{opacity:.65} 12%{opacity:1} 25%{opacity:.4} 50%{opacity:1} 60%{opacity:.3} 75%{opacity:.95} 90%{opacity:.5} }
@keyframes coil-pulse {
  0%   { stroke-width: 4; opacity: .9; transform: scale(.45); }
  100% { stroke-width: 0.5; opacity: 0; transform: scale(1.6); }
}
@keyframes coil-strike {
  0%, 70%, 100% { opacity: 0; }
  72%, 76%      { opacity: 1; }
  74%           { opacity: .3; }
}
@keyframes coil-dots { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }
/* Note: the Tesla coil intentionally animates even with prefers-reduced-motion enabled —
   without it the UI looks frozen and users think the page is broken. */

/* ============ Video hero (replaces page-hero background image with HLS/mp4) ============
   Used by /scan.html and /process.html. Both pages embed a Vimeo HLS source via hls.js
   on non-Safari (mp4 fallback inline) and native HLS on Safari. The CSS below positions
   the <video> as a full-bleed background under a translucent dark panel for legibility.
   Note: rules are duplicated rather than comma-grouped because Chromium silently dropped
   the second selector from the comma list in some build, making the .video-hero variant
   inert despite valid source CSS. Duplication is bulletproof and ungainly-but-correct. */

.scan-video-hero,
.video-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--pt-header-h) + 80px) 0 100px;
  text-align: center;
  /* min-height covers the case where a video element has its INTRINSIC dimensions
     (3840x2160 for 4K) and CSS sizing somehow fails — section won't blow up to
     2700px tall on iPad portrait. */
  min-height: 60vh;
}
.scan-video-hero > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -3;
}
.video-hero > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -3;
}
.scan-video-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,14,31,.30) 0%, rgba(10,14,31,.45) 60%, var(--pt-bg) 100%);
  pointer-events: none;
}
.video-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,14,31,.30) 0%, rgba(10,14,31,.45) 60%, var(--pt-bg) 100%);
  pointer-events: none;
}
.scan-video-hero .container,
.video-hero .container { position: relative; z-index: 1; }

/* ============ Scan report card ============ */
.scan-report-card {
  background: linear-gradient(180deg, rgba(28,35,80,.55), rgba(18,23,54,.35));
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  padding: 36px 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.scan-report-card .target-url {
  font-family: var(--pt-sans);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pt-gold);
  word-break: break-all;
  margin-bottom: 14px;
}
.scan-report-card h3 { font-size: 1.4rem; margin: 0 0 16px; }
.scan-section { margin-top: 32px; }
.scan-section-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--pt-sans);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pt-gold);
  margin-bottom: 14px;
}
.scan-section-head svg { width: 18px; height: 18px; flex-shrink: 0; }
.scan-section ul { list-style: none; padding: 0; margin: 0; }
.scan-section li {
  display: flex; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pt-line-2);
  color: var(--pt-ink-muted);
  font-size: .96rem;
  line-height: 1.55;
}
.scan-section li:last-child { border-bottom: 0; }
.scan-section li::before {
  content: "›";
  color: var(--pt-gold);
  font-weight: 600;
  flex-shrink: 0;
}
.scan-tech-pill {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  margin: 4px 6px 4px 0;
  background: rgba(28,35,80,.5);
  border: 1px solid var(--pt-line);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--pt-ink);
}
/* Tech-detail drawer — collapsed by default. The non-engineer audience sees a
   single, scannable line ("Technical detail (for your developer or agency)")
   instead of a wall of stack vocabulary. Engineers click to expand. */
.scan-tech-details {
  margin-top: 40px;
  padding: 18px 22px;
  background: rgba(10,14,31,.55);
  border: 1px solid var(--pt-line);
  border-radius: 12px;
}
.scan-tech-details > summary {
  cursor: pointer;
  font-family: var(--pt-sans);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pt-ink-soft);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  user-select: none;
}
.scan-tech-details > summary::-webkit-details-marker { display: none; }
.scan-tech-details > summary::after {
  content: "▾";
  color: var(--pt-gold);
  font-size: .8rem;
  transition: transform .2s ease;
  margin-left: 12px;
}
.scan-tech-details[open] > summary::after { transform: rotate(180deg); }
.scan-tech-details[open] > summary {
  margin-bottom: 8px;
  color: var(--pt-ink);
}
.scan-tech-details .scan-section { margin-top: 24px; }
.scan-tech-details .scan-section:first-of-type { margin-top: 18px; }
.scan-scores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.scan-score {
  position: relative;
  background: rgba(10,14,31,.55);
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  padding: 16px 18px;
}
.scan-score .label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--pt-sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pt-ink-soft);
  margin-bottom: 10px;
}
.scan-score .label svg { width: 14px; height: 14px; opacity: .7; }
.scan-score .num {
  font-family: var(--pt-serif);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1;
  color: var(--pt-ink);
}
.scan-score .out { color: var(--pt-ink-soft); font-size: 1rem; margin-left: 4px; }
.scan-score .bar {
  height: 4px;
  margin-top: 12px;
  background: rgba(244,238,223,.08);
  border-radius: 999px;
  overflow: hidden;
}
.scan-score .bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pt-violet), var(--pt-gold-warm));
  transition: width 1.2s cubic-bezier(.2,.8,.2,1);
}
.scan-score.good > .bar > span { background: linear-gradient(90deg, #6dd29e, #a8e6c1); }
.scan-score.warn > .bar > span { background: linear-gradient(90deg, var(--pt-gold), var(--pt-gold-warm)); }
.scan-score.bad  > .bar > span { background: linear-gradient(90deg, #c44, #f08080); }

/* ============ Free Scan promo (home page) ============ */
.scan-promo { padding: 90px 0; }
.scan-promo-card {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 48px;
  text-align: center;
  border-radius: 18px;
  border: 1px solid rgba(240, 198, 104, .25);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,198,104,.08), transparent 70%),
    linear-gradient(180deg, rgba(28,35,80,.55), rgba(18,23,54,.45));
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.scan-promo-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pt-gold) 0%, var(--pt-gold-warm) 100%);
  color: var(--pt-bg);
  font-family: var(--pt-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.scan-promo-card h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin-bottom: 12px; }
.scan-promo-card > p {
  max-width: 60ch;
  margin: 0 auto 28px;
  color: var(--pt-ink-muted);
}
.scan-promo-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto 14px;
}
.scan-promo-form input[type="url"] {
  padding: 14px 18px;
  background: rgba(10,14,31,.55);
  border: 1px solid var(--pt-line);
  border-radius: 999px;
  color: var(--pt-ink);
  font-family: var(--pt-sans);
  font-size: 1rem;
  transition: border-color .25s ease, background .25s ease;
}
.scan-promo-form input[type="url"]:focus {
  outline: none;
  border-color: var(--pt-gold);
  background: rgba(10,14,31,.78);
  box-shadow: 0 0 0 3px rgba(240,198,104,.15);
}
.scan-promo-form .btn { white-space: nowrap; }
.scan-promo-fineprint {
  font-size: .82rem;
  color: var(--pt-ink-soft);
  margin: 0;
}
@media (max-width: 600px) {
  .scan-promo-card { padding: 40px 24px; }
  .scan-promo-form { grid-template-columns: 1fr; }
}

/* ============ Nav: Services dropdown ============ */
.nav-links .has-submenu { position: relative; }
.submenu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
}
.submenu-toggle:hover,
.submenu-toggle:focus-visible,
.has-submenu.has-active > .submenu-toggle {
  color: var(--pt-gold);
  outline: none;
}
.submenu-caret {
  font-size: .7em;
  line-height: 1;
  transition: transform .2s ease;
}
.has-submenu.open > .submenu-toggle .submenu-caret { transform: rotate(180deg); }
.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  list-style: none;
  margin: 0;
  /* Padding-top creates a transparent hover bridge so moving the cursor from the
     toggle to the visible card never crosses a hover-dead zone. The visible
     card is painted via ::before below the padded area. */
  padding: 14px 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 100;
}
.submenu::before {
  content: "";
  position: absolute;
  top: 14px; left: 0; right: 0; bottom: -8px;
  background: linear-gradient(155deg, #181d36 0%, #0f1326 100%);
  border: 1px solid rgba(240,198,104,.22);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  z-index: -1;
}
.submenu > li, .submenu > li > a, .submenu > li > .submenu-divider { position: relative; z-index: 1; }
.submenu > li:first-child > a { margin-top: 8px; }
.submenu > li:last-child > a { margin-bottom: 8px; }
.submenu-child > a { padding-left: 36px !important; font-size: .86rem !important; }
.submenu-child > a::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 6px; height: 1px;
  background: rgba(240,198,104,.5);
}
.submenu-divider {
  display: block;
  height: 1px;
  margin: 6px 14px;
  background: rgba(255,255,255,.08);
}
/* DO NOT comma-group these three selectors — Chromium has been observed to silently
   drop one selector from a comma list from the CSSOM (same parser quirk that bit the
   video-hero rules). Duplicating them is ugly but bulletproof. The corresponding
   mobile override below must mirror this split exactly. */
.has-submenu:hover > .submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.has-submenu:focus-within > .submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.has-submenu.open > .submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.submenu li { display: block; }
.submenu a {
  display: block;
  padding: 10px 18px;
  color: var(--pt-ink);
  text-decoration: none;
  font-size: .9rem;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.submenu a:hover,
.submenu a:focus-visible {
  background: rgba(240,198,104,.1);
  color: var(--pt-gold);
  outline: none;
}
.submenu a.active {
  color: var(--pt-gold);
  background: rgba(240,198,104,.06);
}
@media (max-width: 1500px) {
  /* Mobile: submenu becomes inline accordion under the toggle */
  .nav-links .has-submenu { display: block; width: 100%; }
  .submenu-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 8px 0;
  }
  .submenu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 4px 0 8px 18px;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .submenu::before { display: none; }
  /* CRITICAL: the desktop "open" rule at the parent scope sets
     transform: translateX(-50%) translateY(0) — which on mobile pushes the submenu
     horizontally off-screen and clips the dropdown card out the left side of the
     drawer (exactly the "still whacked" report from iPhone Edge). We must re-pin
     the transform to none in EVERY state where the desktop rule fires.
     DO NOT comma-group these — Chromium silently drops one selector from a comma
     list (same parser quirk that bit the video-hero rules). Belt-and-suspenders:
     also force position:static and !important on the transform reset, in case the
     desktop rule's specificity ever shifts. */
  .has-submenu:hover > .submenu {
    transform: none !important;
    position: static !important;
    left: auto !important;
  }
  .has-submenu:focus-within > .submenu {
    transform: none !important;
    position: static !important;
    left: auto !important;
  }
  .has-submenu.open > .submenu {
    transform: none !important;
    position: static !important;
    left: auto !important;
    max-height: 500px;
  }
  .submenu a { padding: 8px 0 !important; }
  .submenu-child > a { padding-left: 18px !important; font-size: .9rem !important; }
  .submenu-child > a::before { display: none; }
}

/* ============ Error page ============ */
.error-eyebrow {
  font-family: var(--pt-serif) !important;
  font-size: 4.5rem !important;
  letter-spacing: -.02em !important;
  color: var(--pt-gold) !important;
  text-transform: none !important;
  line-height: 1 !important;
  display: block;
  margin-bottom: 8px;
}
.error-suggestions { padding: 50px 0 60px; }
.error-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.error-card {
  display: block;
  background: linear-gradient(155deg, #15192c 0%, #0b1024 100%);
  border: 1px solid var(--pt-line-2);
  border-radius: 12px;
  padding: 22px 22px 20px;
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.error-card:hover {
  transform: translateY(-3px);
  border-color: rgba(240,198,104,.4);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
.error-card .error-tag {
  display: inline-block;
  font-family: var(--pt-sans);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pt-gold);
  margin-bottom: 10px;
}
.error-card h3 {
  font-family: var(--pt-serif);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--pt-ink);
  margin: 0 0 8px;
}
.error-card p {
  font-family: var(--pt-sans);
  color: var(--pt-ink-muted);
  font-size: .9rem;
  line-height: 1.55;
  margin: 0;
}

/* ============ Search-keyword highlight ============ */
mark.kw {
  background: linear-gradient(120deg, rgba(240,198,104,.32) 0%, rgba(240,198,104,.18) 100%);
  color: inherit;
  padding: 1px 4px;
  border-radius: 3px;
  border-bottom: 1px solid rgba(240,198,104,.5);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.kw-banner {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(155deg, #181d36 0%, #0f1326 100%);
  border: 1px solid rgba(240,198,104,.32);
  border-radius: 12px;
  padding: 10px 14px 10px 18px;
  color: var(--pt-ink);
  font-family: var(--pt-sans);
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 200;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
  max-width: calc(100vw - 30px);
}
.kw-banner.open { opacity: 1; transform: translateX(-50%) translateY(0); }
.kw-banner strong { color: var(--pt-gold); font-weight: 600; }
.kw-dismiss {
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  color: var(--pt-ink-muted);
  font: inherit;
  font-size: .85rem;
  padding: 3px 10px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.kw-dismiss:hover, .kw-dismiss:focus-visible {
  background: rgba(240,198,104,.12);
  color: var(--pt-gold);
  border-color: var(--pt-gold);
  outline: none;
}

/* ============ Glossary ============ */
.glossary-page { padding: 40px 0 80px; }
.glossary-toc {
  max-width: 820px;
  margin: 0 auto 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 18px;
  background: rgba(240,198,104,.06);
  border-left: 3px solid var(--pt-gold);
  border-radius: 4px;
}
.glossary-toc a {
  color: var(--pt-ink);
  text-decoration: none;
  font-family: var(--pt-sans);
  font-size: .85rem;
  padding: 4px 10px;
  border: 1px solid rgba(240,198,104,.22);
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.glossary-toc a:hover, .glossary-toc a:focus-visible {
  background: rgba(240,198,104,.14);
  color: var(--pt-gold);
  border-color: var(--pt-gold);
  outline: none;
}
.glossary-body {
  max-width: 820px;
  margin: 0 auto;
  font-family: var(--pt-sans);
  color: var(--pt-ink-muted);
  line-height: 1.7;
}
.glossary-body h2 {
  font-family: var(--pt-serif);
  color: var(--pt-ink);
  font-size: 1.7rem;
  font-weight: 500;
  margin: 50px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pt-line-2);
  scroll-margin-top: 100px;
}
.glossary-body h2:first-child { margin-top: 20px; }
.glossary-list { display: grid; gap: 18px; margin: 0 0 30px; }
.glossary-list dt {
  font-family: var(--pt-sans);
  color: var(--pt-ink);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -.005em;
}
.glossary-list dt .dt-sub {
  color: var(--pt-ink-soft);
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: 0;
}
.glossary-list dd {
  margin: 4px 0 0;
  font-size: .96rem;
  line-height: 1.65;
}
.glossary-list dd a {
  color: var(--pt-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.glossary-cta {
  background: linear-gradient(155deg, #181d36 0%, #0f1326 100%);
  border-left: 3px solid var(--pt-gold);
  border-radius: 4px;
  padding: 16px 22px;
  font-size: .95rem;
  margin: 24px 0 30px;
}
.glossary-cta a { color: var(--pt-gold); text-decoration: underline; text-underline-offset: 3px; }
.glossary-footnote {
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid var(--pt-line-2);
  color: var(--pt-ink-soft);
  font-size: .92rem;
}
.glossary-footnote a { color: var(--pt-gold); text-decoration: underline; }

/* ============ Anniversary seal (footer) ============ */
.anniversary-seal {
  display: flex;
  justify-content: center;
  margin: 0 0 18px;
}
.anniversary-ring {
  position: relative;
  width: 156px; height: 156px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fde6a4 0%, #f0c668 35%, #c89a3f 70%, #8e6a25 100%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.1),
    0 0 0 6px rgba(240,198,104,.18),
    0 12px 28px rgba(0,0,0,.4),
    inset 0 0 22px rgba(255,255,255,.18),
    inset 0 -10px 16px rgba(110,80,20,.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #2b1a04;
  text-align: center;
  font-family: var(--pt-sans);
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
  padding: 18px 12px;
  box-sizing: border-box;
  line-height: 1;
}
.anniversary-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(110,80,20,.4);
  pointer-events: none;
}
.anniversary-eyebrow {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.anniversary-num {
  font-family: var(--pt-serif);
  font-size: 2.7rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 4px 0 2px;
}
.anniversary-label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.anniversary-since {
  font-size: .52rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: 8px;
  opacity: .72;
}

/* ============ FAQ section (collapsible, used on contact page) ============ */
.faq-section { padding: 60px 0 80px; background: var(--pt-bg-2); border-top: 1px solid var(--pt-line-2); }
.faq-list {
  max-width: 820px;
  margin: 40px auto 0;
  display: grid;
  gap: 12px;
}
.faq-item {
  background: linear-gradient(155deg, #15192c 0%, #0b1024 100%);
  border: 1px solid var(--pt-line-2);
  border-radius: 12px;
  padding: 0;
  transition: border-color .25s ease;
}
.faq-item[open] { border-color: rgba(240,198,104,.32); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 56px 18px 22px;
  font-family: var(--pt-sans);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--pt-ink);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--pt-gold);
  transition: transform .25s ease;
  line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item .faq-body {
  padding: 0 22px 20px;
  color: var(--pt-ink-muted);
  font-family: var(--pt-sans);
  font-size: .96rem;
  line-height: 1.65;
}
.faq-item .faq-body p { margin: 0 0 10px; }
.faq-item .faq-body ul { padding-left: 20px; margin: 0 0 10px; }
.faq-item .faq-body a { color: var(--pt-gold); text-decoration: underline; text-underline-offset: 3px; }

/* ============ Partner logos on platform pages ============ */
.partner-logo {
  display: block;
  height: 36px;
  width: auto;
  margin-bottom: 22px;
  opacity: .9;
}

/* ============ E-commerce hub ============ */
.ecom-platforms { padding: 60px 0 40px; }
.ecom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}
.ecom-card {
  background: linear-gradient(155deg, #15192c 0%, #0b1024 100%);
  border: 1px solid var(--pt-line-2);
  border-radius: 16px;
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.ecom-card:hover {
  transform: translateY(-4px);
  border-color: rgba(240,198,104,.4);
  box-shadow: 0 18px 48px rgba(0,0,0,.4);
}
.ecom-card-head { margin-bottom: 14px; }
.ecom-tag {
  display: inline-block;
  font-family: var(--pt-sans);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pt-gold);
  border: 1px solid rgba(240,198,104,.32);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.ecom-card h2 {
  font-family: var(--pt-serif);
  color: var(--pt-ink);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -.005em;
  margin: 0;
}
.ecom-lead {
  font-family: var(--pt-sans);
  color: var(--pt-ink);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 16px;
}
.ecom-points {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  font-family: var(--pt-sans);
  color: var(--pt-ink-muted);
  font-size: .92rem;
  line-height: 1.55;
  flex: 1;
}
.ecom-points li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
}
.ecom-points li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--pt-gold);
  font-weight: 600;
}
.ecom-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pt-gold);
  text-decoration: none;
  font-family: var(--pt-sans);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(240,198,104,.4);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color .2s ease, border-color .2s ease, gap .2s ease;
}
.ecom-cta:hover {
  color: var(--pt-gold-warm);
  border-color: var(--pt-gold-warm);
  gap: 10px;
}

.ecom-help { padding: 60px 0 80px; }
.ecom-help-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  align-items: start;
}
.ecom-help-grid h2 {
  font-family: var(--pt-serif);
  color: var(--pt-ink);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 8px 0 18px;
}
.ecom-help-grid p {
  font-family: var(--pt-sans);
  color: var(--pt-ink-muted);
  line-height: 1.7;
  margin: 0 0 14px;
}
.ecom-decision {
  background: linear-gradient(155deg, #181d36 0%, #0f1326 100%);
  border: 1px solid var(--pt-line-2);
  border-left: 3px solid var(--pt-gold);
  border-radius: 12px;
  padding: 26px 28px;
}
.ecom-decision h3 {
  font-family: var(--pt-sans);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pt-gold);
  margin: 0 0 14px;
}
.ecom-decision ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ecom-decision li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: var(--pt-sans);
  color: var(--pt-ink-muted);
  font-size: .95rem;
  line-height: 1.5;
}
.ecom-decision li:last-child { border-bottom: 0; }
.ecom-decision strong { color: var(--pt-ink); display: block; margin-bottom: 2px; }
.ecom-decision a { color: var(--pt-gold); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 800px) {
  .ecom-help-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ============ Insights ============ */
.insights-section { padding: 60px 0 100px; }
.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px;
}
.insight-card {
  background: linear-gradient(155deg, #15192c 0%, #0b1024 100%);
  border: 1px solid var(--pt-line-2);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.insight-card:hover {
  transform: translateY(-4px);
  border-color: rgba(240,198,104,.4);
  box-shadow: 0 18px 48px rgba(0,0,0,.4);
}
.insight-link {
  display: block;
  padding: 30px 28px 26px;
  color: inherit;
  text-decoration: none;
}
.insight-tag {
  display: inline-block;
  font-family: var(--pt-sans);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pt-gold);
  border: 1px solid rgba(240,198,104,.32);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}
.insight-card h2 {
  font-family: var(--pt-serif);
  color: var(--pt-ink);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1.25;
  margin: 0 0 12px;
}
.insight-card p {
  font-family: var(--pt-sans);
  color: var(--pt-ink-muted);
  font-size: .95rem;
  line-height: 1.6;
  margin: 0 0 18px;
}
.insight-meta {
  display: block;
  font-family: var(--pt-sans);
  font-size: .8rem;
  color: var(--pt-ink-soft);
}
.insight-meta .insight-date { color: var(--pt-gold); }
.related-articles {
  max-width: 760px;
  margin: 50px auto 0;
  padding: 24px 28px;
  background: rgba(240,198,104,.05);
  border-left: 3px solid var(--pt-gold);
  border-radius: 4px;
}
.related-articles h3 {
  font-family: var(--pt-sans);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pt-gold);
  margin: 0 0 14px;
}
.related-articles ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.related-articles li::before {
  content: "→ ";
  color: var(--pt-gold);
  font-weight: 600;
}
.related-articles a {
  color: var(--pt-ink);
  text-decoration: none;
  font-size: 1rem;
  transition: color .2s ease;
}
.related-articles a:hover { color: var(--pt-gold); }

/* ============ Exit-intent modal ============ */
.pt-exit-locked { overflow: hidden; }
.pt-exit-overlay {
  position: fixed; inset: 0;
  background: rgba(5,7,18,.78);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  padding: 20px;
  opacity: 0;
  transition: opacity .25s ease;
}
.pt-exit-overlay.open { opacity: 1; }
.pt-exit-modal {
  position: relative;
  max-width: 520px;
  width: 100%;
  background: linear-gradient(155deg, #181d36 0%, #0f1326 100%);
  border: 1px solid rgba(240,198,104,.22);
  border-radius: 18px;
  padding: 44px 38px 32px;
  color: var(--pt-ink);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  transform: translateY(12px) scale(.97);
  transition: transform .28s cubic-bezier(.2,.8,.3,1);
  font-family: var(--pt-sans);
}
.pt-exit-overlay.open .pt-exit-modal { transform: translateY(0) scale(1); }
.pt-exit-close {
  position: absolute; top: 14px; right: 16px;
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  color: var(--pt-ink-muted);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pt-exit-close:hover { background: rgba(240,198,104,.12); color: var(--pt-gold); border-color: var(--pt-gold); }
.pt-exit-spark {
  font-size: 2rem;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(240,198,104,.18), rgba(139,109,255,.12));
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 14px;
  filter: drop-shadow(0 0 18px rgba(240,198,104,.35));
}
.pt-exit-modal .eyebrow { color: var(--pt-gold); }
.pt-exit-modal h2 {
  font-family: var(--pt-serif);
  font-size: 1.85rem;
  margin: 6px 0 12px;
  color: var(--pt-ink);
  font-weight: 500;
  letter-spacing: -.01em;
}
.pt-exit-modal p {
  font-size: .98rem;
  line-height: 1.6;
  color: var(--pt-ink-muted);
  margin: 0 0 20px;
}
.pt-exit-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin: 0 0 14px;
}
.pt-exit-form input[type="url"] {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: var(--pt-ink);
  padding: 12px 14px;
  font-size: .95rem;
  font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.pt-exit-form input[type="url"]:focus {
  outline: none;
  border-color: var(--pt-gold);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(240,198,104,.18);
}
.pt-exit-form .btn { white-space: nowrap; }
.pt-exit-fineprint {
  font-size: .8rem !important;
  color: var(--pt-ink-soft) !important;
  margin: 0 !important;
  text-align: center;
}
@media (max-width: 520px) {
  .pt-exit-modal { padding: 38px 26px 28px; }
  .pt-exit-modal h2 { font-size: 1.5rem; }
  .pt-exit-form { grid-template-columns: 1fr; }
}

/* ============ Policy / legal pages ============ */
.policy-hero {
  background: linear-gradient(135deg, #15192c 0%, #0a0e1f 100%);
  padding: 100px 0 60px;
  border-bottom: 1px solid var(--pt-line-2);
}
.policy-page { padding: 60px 0 100px; }
.policy-body {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--pt-sans);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--pt-ink-muted);
}
.policy-body .policy-meta {
  font-size: .9rem;
  color: var(--pt-ink-soft);
  padding: 14px 18px;
  background: rgba(240,198,104,.06);
  border-left: 3px solid var(--pt-gold);
  border-radius: 4px;
  margin: 0 0 28px;
}
.policy-body h2 {
  font-family: var(--pt-serif);
  color: var(--pt-ink);
  font-size: 1.55rem;
  margin: 42px 0 14px;
  font-weight: 500;
}
.policy-body h3 {
  font-family: var(--pt-sans);
  color: var(--pt-ink);
  font-size: 1.05rem;
  margin: 24px 0 10px;
  font-weight: 600;
  letter-spacing: .01em;
}
.policy-body p { margin: 0 0 16px; }
.policy-body ul { margin: 0 0 18px; padding-left: 22px; }
.policy-body li { margin: 0 0 8px; }
.policy-body a { color: var(--pt-gold); text-decoration: underline; text-underline-offset: 3px; }
.policy-body a:hover { color: var(--pt-gold-warm); }
.policy-body strong { color: var(--pt-ink); }
.policy-body code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .9em;
  background: rgba(255,255,255,.05);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--pt-ink);
}

/* ============ a11y utilities ============ */
.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;
}

/* Honeypot — off-screen but focusable for bot detection */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Form submit status */
.form-status {
  margin-top: 14px;
  font-size: .92rem;
  color: var(--pt-ink-muted);
  min-height: 1.4em;
}
.form-status.success { color: #8be0a3; }
.form-status.error { color: #f08080; }

/* ============ Contact form: checkbox group ============ */
.checkbox-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  margin-top: 4px;
}
@media (max-width: 540px) {
  .checkbox-group { grid-template-columns: 1fr; }
}
label.check {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--pt-sans);
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pt-ink) !important;
  cursor: pointer;
  margin: 0 !important;
  padding: 4px 0;
  user-select: none;
}
label.check input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0;
  padding: 0;
  border: 1px solid var(--pt-line);
  border-radius: 4px;
  background: rgba(255,255,255,.04);
  accent-color: var(--pt-gold);
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: none !important;
}
label.check:hover { color: var(--pt-gold-warm) !important; }

/* ============ Reveal-on-scroll animation ============ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============ Tabs (platform pages) ============ */
.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  background: rgba(28,35,80,.4);
  border: 1px solid var(--pt-line);
  border-radius: 999px;
  margin-bottom: 50px;
}
.tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--pt-ink-muted);
  padding: 10px 26px;
  font-family: var(--pt-sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.tabs button:hover { color: var(--pt-ink); }
.tabs button[aria-selected="true"] {
  background: var(--pt-gold);
  color: var(--pt-bg);
  font-weight: 600;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: tab-fade .4s ease; }
@keyframes tab-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ============ Value props (platform pages, marketing tab) ============ */
.value-prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.value-prop {
  padding: 32px 28px;
  background: linear-gradient(180deg, rgba(28,35,80,.4), rgba(18,23,54,.3));
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
}
.value-prop h3 { font-size: 1.4rem; margin-bottom: 12px; }
.value-prop p  { margin-bottom: 0; }

/* ============ Deliverables list ============ */
.deliverables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.deliverable {
  padding: 18px 20px;
  background: rgba(28,35,80,.3);
  border: 1px solid var(--pt-line-2);
  border-radius: 10px;
  font-size: .95rem;
  color: var(--pt-ink-muted);
}
.deliverable strong {
  display: block;
  color: var(--pt-ink);
  margin-bottom: 4px;
  font-weight: 500;
}

/* ============ Tech blocks (platform pages, technical tab) ============ */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 40px;
}
.tech-block {
  padding: 32px 28px;
  background: rgba(18,23,54,.4);
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
}
.tech-block h3 {
  font-family: var(--pt-sans);
  font-size: .82rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--pt-gold);
  margin-bottom: 18px;
}
.tech-block ul { list-style: none; padding: 0; margin: 0; }
.tech-block li {
  padding: 10px 0;
  border-bottom: 1px solid var(--pt-line-2);
  color: var(--pt-ink-muted);
  font-size: .96rem;
}
.tech-block li:last-child { border-bottom: 0; }
.tech-block li strong { color: var(--pt-ink); font-weight: 500; }

/* ============ Header phone — Bianca asked for the gap next to the logo to do work ============ */
.header-phone {
  display: inline-flex; align-items: center; gap: 8px;
  /* Sits immediately next to the brand on desktop — reads as "here is a human
     you can call" tied to the studio mark. margin-right:auto consumes the gap
     between the phone and the nav cluster, so the layout reads:
       [logo  phone] ............... [nav  cta]
     instead of [logo] ............... [phone  nav  cta] which left a giant
     void between brand and phone. Calvin caught the void 2026-05-27. */
  margin-right: auto;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(240, 198, 104, .28);
  background: rgba(240, 198, 104, .04);
  color: var(--pt-gold);
  font-family: var(--pt-sans);
  font-size: .85rem; font-weight: 500; letter-spacing: .02em;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.header-phone:hover { background: rgba(240, 198, 104, .12); border-color: rgba(240, 198, 104, .55); color: var(--pt-gold-warm); }
.header-phone svg { flex-shrink: 0; }
/* Narrow desktop: keep icon, drop the number text */
@media (max-width: 1240px) and (min-width: 1501px) { .header-phone-text { display: none; } .header-phone { padding: 8px 10px; } }
/* Mobile: stays visible next to the hamburger so the phone is always one tap
   away. Bianca on mobile flagged not seeing it 2026-05-24. Calvin on a narrow
   screen 2026-05-27 caught the geometry mismatch with the hamburger: the pill
   became a dark filled CIRCLE (border-radius:999px on a near-square element)
   next to a transparent rounded SQUARE hamburger — visually unpaired. Now
   matches the .menu-toggle exactly: 42x42, 8px corner radius, transparent bg.
   Only the border color and icon differ, so they read as a kit. */
@media (max-width: 1500px) {
  .header-phone {
    width: 42px; height: 42px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(240, 198, 104, .55);
    margin-left: auto;
    margin-right: 10px;
    justify-content: center;
  }
  .header-phone:hover { background: rgba(240, 198, 104, .08); border-color: var(--pt-gold); }
  .header-phone svg { width: 18px; height: 18px; }
  .header-phone-text { display: none; }
}

/* ============ In-page TOC (page-toc) + scrollspy ============ */
/* Right-rail sticky outline on wide screens; collapsed "Jump to" pill below 1180px.
   Auto-built by main.js from <main> h2[id] elements; aside lives in _Layout when
   ViewData["ShowToc"] = true. */

main.has-toc { position: relative; }

/* Anchor-jump offset for TOC links. Without this, clicking a TOC link scrolls
   so the heading sits at viewport y=0 — directly behind the sticky 78px header.
   scroll-margin-top tells the browser to leave room equal to the header height
   plus a small breathing buffer. Applies to every heading with an id since
   any of them might be a target (TOC builds links from h2[id]), but also
   covers in-page anchor links from elsewhere on the site.
   Note: pages with the inline pill TOC ALSO have a sticky "Jump to" chip glued
   directly below the header — that case is overridden in the @media (max-width:
   1919px) block below to bump the margin enough to clear the pill too. */
:where(h1, h2, h3, h4)[id] {
  scroll-margin-top: calc(var(--pt-header-h, 78px) + 16px);
}
/* Pill mode (every viewport below the rail breakpoint, i.e. essentially every
   real user). The sticky pill sits at top:--pt-header-h and is ~32px tall plus
   ~12px margin, so the heading needs an extra ~50px of clearance or it lands
   directly behind the pill — which is exactly the "jumps just past the content"
   bug Calvin caught on 2026-05-23 after the first scroll-margin-top fix.
   Only applies on pages that opted into the TOC (main.has-toc) so unrelated
   in-page anchors elsewhere don't pay the cost. */
@media (max-width: 1919px) {
  main.has-toc :where(h1, h2, h3, h4)[id] {
    scroll-margin-top: calc(var(--pt-header-h, 78px) + 64px);
  }
}

/* :empty kills the visible box during the brief window between aside render
   and the JS filling it (or for pages whose JS bails because of <2 h2[id]s).
   Without this, you get the empty navy rectangle Calvin spotted 2026-05-23. */
.page-toc:empty { display: none; }

/* Hero-aware visibility — main.js IntersectionObserver toggles this class on
   the aside while .page-hero is in view. Keeps the fixed right-rail from
   sitting on top of the page-hero h1 (which uses max-width: 22ch and extends
   into the right margin where the rail lives at all viewports under ~1750px). */
.page-toc.above-hero-fold { opacity: 0; pointer-events: none; }
.page-toc { transition: opacity .25s ease; }

/* Dock state — user collapsed the rail. The aside disappears entirely; the
   undock chip in the bottom-right corner is the way back in. */
.page-toc.is-docked { opacity: 0; pointer-events: none; visibility: hidden; }

/* Dock button (small × at top-right of the open card) */
.page-toc-dock {
  position: absolute; top: 10px; right: 12px;
  width: 24px; height: 24px;
  background: transparent; border: 0;
  color: var(--pt-ink-muted); cursor: pointer;
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.page-toc-dock:hover, .page-toc-dock:focus-visible {
  color: var(--pt-gold);
  background: rgba(240, 198, 104, .08);
  outline: none;
}

/* Undock chip — small pill bottom-right when the TOC is docked. Only renders
   visible when .is-visible is on AND the chip is not above-hero-fold (so the
   chip also hides while the hero is on screen, same as the main rail does). */
.page-toc-undock {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 50;
  padding: 10px 16px;
  background: rgba(11, 14, 31, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(240, 198, 104, .32);
  border-radius: 999px;
  color: var(--pt-gold);
  font-family: var(--pt-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 8px;
  transition: background .15s, border-color .15s, transform .15s, opacity .2s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.page-toc-undock.is-visible { display: inline-flex; }
.page-toc-undock.is-visible.above-hero-fold { opacity: 0; pointer-events: none; }
.page-toc-undock:hover, .page-toc-undock:focus-visible {
  background: rgba(11, 14, 31, .98);
  border-color: rgba(240, 198, 104, .55);
  transform: translateY(-2px);
  outline: none;
}
.page-toc-undock-label {
  /* Hide the text on really small screens — the icon alone reads */
}
@media (max-width: 480px) {
  .page-toc-undock {
    bottom: 16px; right: 16px;
    padding: 10px 12px;
    font-size: 0;                   /* hide the label text */
  }
  .page-toc-undock > span[aria-hidden] { font-size: 16px; }
}

/* In collapsed-pill TOC mode (anything below the desktop rail breakpoint), the
   dock button is redundant — the "Jump to" pill IS the dock. Hide the × there
   so it doesn't sit awkwardly on top of the inline pill. */
@media (max-width: 1919px) {
  .page-toc-dock { display: none; }
}

.page-toc {
  position: fixed;
  top: 120px;                         /* clear of the sticky header */
  right: 24px;                        /* sit in the actual right margin, not on top of the container.
                                         Combined with the 1760px desktop-rail breakpoint below, this
                                         guarantees a clean 16px+ gutter between the rail and the
                                         container's right edge (math: container max 1240, rail 220 +
                                         24 offset = 244; 244 + 16 gutter ≤ (vw-1240)/2 needs vw ≥ 1760).
                                         Bianca/Calvin both caught earlier versions overlapping content. */
  width: 220px;
  max-height: calc(100vh - 160px);
  overflow: hidden auto;
  z-index: 40;
  padding: 18px 16px;
  background: rgba(11, 14, 31, .72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  font-family: var(--pt-sans);
  font-size: .85rem;
  line-height: 1.4;
  color: var(--pt-ink-muted);
}
.page-toc-heading {
  margin: 0 0 10px;
  font-family: var(--pt-sans);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--pt-gold);
  font-weight: 700;
}
.page-toc-list {
  margin: 0; padding: 0; list-style: none;
  border-left: 1px solid var(--pt-line);
}
.page-toc-list li { margin: 0; }
.page-toc-list a {
  display: block;
  padding: 6px 12px;
  margin-left: -1px;                   /* overlap the rail so the active border-left replaces it cleanly */
  border-left: 2px solid transparent;
  color: var(--pt-ink-muted);
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.page-toc-list a:hover { color: var(--pt-ink); }
.page-toc-list a.is-active {
  color: var(--pt-gold);
  border-left-color: var(--pt-gold);
  background: rgba(240, 198, 104, .06);
}

/* "Jump to" toggle — hidden on wide, shown on narrower screens. */
.page-toc-toggle {
  display: none;
  align-items: center; gap: 6px;
  padding: 8px 14px;
  /* Solid-ish dark base so the pill stays legible when it scrolls over content.
     The earlier 6% gold tint was almost invisible — Calvin flagged it as
     "translucent, looks odd on top of text" on mobile 2026-05-26. */
  background: rgba(11, 14, 31, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(240, 198, 104, .45);
  border-radius: 999px;
  color: var(--pt-gold);
  font-family: var(--pt-sans);
  font-size: .85rem; font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.page-toc-toggle:hover { background: rgba(11, 14, 31, .98); border-color: rgba(240, 198, 104, .65); }
.page-toc-toggle-caret { font-size: .8em; transition: transform .2s; }
.page-toc.is-open .page-toc-toggle-caret { transform: rotate(180deg); }

/* Below 1920px: TOC collapses to the inline pill mode. The fixed right-rail
   needs viewport ≥ 1920px to clear the 1240px container with a comfortable
   gutter — narrower viewports either overlap content directly (rail center
   sits over the bio text in .story-grid) or have such a thin gutter the rail
   visually competes with the content's right edge. Calvin caught both cases
   in succession on a 1500-1800px monitor. So the rail is opt-in for genuinely
   wide monitors only; most desktops get the proven-clean inline pill.
   The aside sits inline at the top of <main> but stays VISUALLY INVISIBLE
   until the user taps the pill — only the gold "Jump to" pill shows closed,
   the list expands below with its own backdrop on open. */
@media (max-width: 1919px) {
  .page-toc {
    position: sticky;
    top: var(--pt-header-h, 70px);
    width: auto; max-height: none;
    margin: 12px 24px 0;
    padding: 0;                    /* no padding — pill sizes to its own content */
    background: transparent;       /* invisible container, no gap shape */
    border: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    z-index: 30;
  }
  .page-toc-heading { display: none; }
  .page-toc-toggle { display: inline-flex; }
  .page-toc-list {
    display: none;
    margin: 8px 0 18px;
    padding: 12px 16px;
    width: max-content;            /* shrink to longest item, not full container */
    max-width: min(360px, calc(100vw - 48px)); /* cap so long labels still wrap nicely on mobile */
    border-left: 0;
    background: rgba(11, 14, 31, .96);
    border: 1px solid var(--pt-line);
    border-radius: 12px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  }
  .page-toc.is-open .page-toc-list { display: block; }
  .page-toc-list a {
    padding: 8px 6px;
    border-left: 0;
    margin-left: 0;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .page-toc-list a.is-active { background: rgba(240, 198, 104, .08); }
}

@media (prefers-reduced-motion: reduce) {
  .page-toc-list a, .page-toc-toggle-caret, .header-phone { transition: none; }
}

/* ============ Submenu leaf variant ============
   Bianca's cross-page subsection nav. The Services dropdown is a single button with
   children; About/Process/Portfolio have a REAL parent destination plus an optional
   sub-section dropdown. Markup:
     <li class="has-submenu has-submenu-leaf">
       <a class="submenu-parent" href="/about.html">About</a>
       <button class="submenu-toggle submenu-toggle-leaf"><caret></button>
       <ul class="submenu">…</ul>
     </li>
   The link goes to the page; the caret expands the sub-section list. */
.nav-links li.has-submenu-leaf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.submenu-parent { padding-right: 0; }
.submenu-toggle-leaf {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  padding: 6px 4px; margin: 0;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  border-radius: 4px;
}
.submenu-toggle-leaf:hover,
.submenu-toggle-leaf:focus-visible {
  color: var(--pt-gold);
  background: rgba(240, 198, 104, .06);
  outline: none;
}
.submenu-toggle-leaf .submenu-caret { font-size: .7em; }
.has-submenu-leaf.open > .submenu-toggle-leaf .submenu-caret { transform: rotate(180deg); }

@media (max-width: 1500px) {
  /* Mobile drawer: row layout for parent + caret, dropdown breaks to next line */
  .nav-links li.has-submenu-leaf {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
  }
  .submenu-parent { flex: 1; padding: 4px 0; }
  .submenu-toggle-leaf {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    padding: 0;
  }
  .nav-links li.has-submenu-leaf > .submenu { flex: 0 0 100%; }
}

/* ============ Sticky page-title rail ============
   Bianca asked for the page heading to "stay at the top once you keep scrolling
   down" so users know what section they're in. The rail sits glued below the
   header and slides in once main.js detects the hero has left the viewport.
   Hidden by default — only renders when JS confirms there's a hero <h1> to mirror. */
.page-title-rail {
  position: fixed;
  /* Overlap the header by 1px to eliminate any subpixel/rounding gap between the
     bottom of the header and the top of the rail. Header z-index 100 sits above
     the rail z-index 95, so the overlap is hidden behind the header. */
  top: calc(var(--pt-header-h, 78px) - 1px);
  left: 0; right: 0;
  z-index: 95;
  /* Solid bg (matches the header's scrolled state exactly) — earlier rgba gradient
     left the rail's top edge slightly more transparent than the header, creating
     a visible band where the page bg showed through. */
  background: rgb(10, 14, 31);
  border-top: 1px solid rgba(10, 14, 31, 1);
  border-bottom: 1px solid rgba(240, 198, 104, .14);
  transform: translateY(-100%);
  /* visibility:hidden when not active is critical: at the top of the page the
     header is `background: transparent` (only opaque once scrolled), so the
     rail — translated up by its own height — still sits PARTIALLY behind the
     header in viewport space and its text would bleed through. Calvin caught
     "Process" showing through on /process.html at scroll=0 (2026-05-27).
     transition-delay keeps visibility:hidden until the slide-up finishes, so
     the rail still animates out smoothly. */
  visibility: hidden;
  transition: transform .28s ease, visibility 0s linear .28s;
  pointer-events: none;
}
.page-title-rail.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform .28s ease, visibility 0s linear 0s;
  pointer-events: auto;
}
.page-title-rail .container {
  display: flex; align-items: center;
  padding-top: 8px; padding-bottom: 8px;
  min-height: 36px;
}
.page-title-rail-label {
  font-family: var(--pt-serif);
  color: var(--pt-ink);
  font-size: clamp(.95rem, 2.2vw, 1.15rem);
  letter-spacing: .005em;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* When the rail is visible, push the sticky TOC pill down so they don't stack on top of each other */
body.has-title-rail-visible .page-toc { top: calc(var(--pt-header-h, 78px) + 44px); }

@media (prefers-reduced-motion: reduce) {
  .page-title-rail { transition: none; }
}