/*
Theme Name:   OS Prime Studios V2
Theme URI:    https://osprimestudios.com
Description:  Standalone theme for OS Prime Studios. Contains the full recovered site content, the Oxblood design system, the scroll motion engine and a single connected schema graph. No parent theme required.
Author:       OS Prime Studios
Version:      2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  osprimestudios
*/



/* ==========================================================================
   OS PRIME STUDIOS, OXBLOOD DESIGN SYSTEM
   Wine-black ground, warm gold accent. Chosen 24 Aug 2026.
   Every colour is a token. Change it here, it changes everywhere.
   ========================================================================== */

:root {
  /* Ground and surfaces */
  --bg:        #160C0E;
  --bg-2:      #1F1215;
  --bg-3:      #2A1A1D;

  /* Text. Body sits at 4.6:1 on the ground, headings at 17:1. */
  --ink:       #F7EFEE;
  --mute:      #BCA3A3;
  --dim:       #8F7677;

  /* Accent */
  --gold:      #C89B5B;
  --gold-2:    #E3BC83;
  --line:      rgba(200, 155, 91, .20);
  --hair:      rgba(247, 239, 238, .10);

  /* Ambient aurora */
  --a1: rgba(200, 155, 91, .18);
  --a2: rgba(140,  40, 55, .22);
  --a3: rgba( 90,  25, 35, .26);

  /* Motion */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io:  cubic-bezier(.65, 0, .35, 1);
  --d-fast: 180ms;
  --d-med:  280ms;
  --d-slow: 900ms;

  /* Rhythm, 8pt grid */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-6: 48px; --s-8: 64px; --s-12: 96px; --s-16: 128px;

  --r-sm: 8px; --r-md: 14px; --r-lg: 18px; --r-pill: 999px;
  --shell: 1360px;
}

/* ==========================================================================
   BASE
   ========================================================================== */

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

html { scroll-behavior: smooth; }

/* The parent sets `body { overflow-x: hidden }`. That quietly promotes body to
   a scroll container, and `position: sticky` then anchors to that container
   instead of the viewport. The pinned service rail scrolled away and left a
   viewport-sized blank gap. `clip` stops horizontal overflow without creating
   a scroll container, so sticky keeps working. Must beat the parent, hence the
   html prefix on the selector. */
html body.osp,
html.js-motion body.osp-site, body.osp {
  overflow-x: clip;
}
html:has(body.osp) { overflow-x: clip; }

/* Safari below 16 has no `clip`. Fall back to a wrapper that hides overflow,
   leaving body itself untouched so sticky survives. */
@supports not (overflow-x: clip) {
  html body.osp-site, body.osp { overflow-x: visible; }
  body.osp .osp-main,
  body.osp .osp-hero { overflow-x: hidden; }
}

body.osp-site, body.osp {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Archivo, system-ui, -apple-system, sans-serif;
  font-weight: 300;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.osp a { color: inherit; }

.osp-shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.4rem);
}

.osp section { padding-block: clamp(4rem, 11vh, 8rem); }

.serif { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; }

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

/* ==========================================================================
   TYPE
   ========================================================================== */

.osp h1 {
  font-size: clamp(2.1rem, 5.2vw, 4.5rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -.042em;
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); max-width: 19ch;
  text-wrap: balance;
}
.osp h1 .g { color: var(--gold); }

.osp h2 {
  font-size: clamp(1.75rem, 4.2vw, 3.1rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -.038em;
  margin: 0 0 var(--s-2); max-width: 20ch; text-wrap: balance;
}

.osp h3 {
  font-size: clamp(1.08rem, 1.7vw, 1.35rem);
  font-weight: 600; line-height: 1.28; letter-spacing: -.02em; margin: 0 0 .6rem;
}

.osp p { margin: 0 0 var(--s-2); }

.osp-lede { font-size: clamp(1rem, 1.5vw, 1.22rem); color: var(--mute); max-width: 60ch; }
.osp-small { font-size: .92rem; color: var(--dim); }

.osp-label {
  font-size: .7rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-2); display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem;
}
.osp-label::before {
  content: ""; width: clamp(24px, 5vw, 52px); height: 1px; background: var(--gold);
}

/* ==========================================================================
   AMBIENT LAYER
   Fixed, so it drifts behind content for the whole scroll rather than
   sitting in the hero only.
   ========================================================================== */

.osp-amb, .osp-dots {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}

.osp-amb b { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.osp-amb b:nth-child(1) { width: 52vw; height: 52vw; left: -12vw; top: -14vw;
  background: var(--a1); animation: osp-au1 26s var(--e-io) infinite alternate; }
.osp-amb b:nth-child(2) { width: 46vw; height: 46vw; right: -10vw; top: 24vh;
  background: var(--a2); animation: osp-au2 32s var(--e-io) infinite alternate; }
.osp-amb b:nth-child(3) { width: 60vw; height: 60vw; left: 18vw; bottom: -24vw;
  background: var(--a3); animation: osp-au3 38s var(--e-io) infinite alternate; }

@keyframes osp-au1 { to { transform: translate3d(22vw, 16vh, 0) scale(1.25); } }
@keyframes osp-au2 { to { transform: translate3d(-20vw, -14vh, 0) scale(1.30); } }
@keyframes osp-au3 { to { transform: translate3d(14vw, -18vh, 0) scale(1.15); } }

.osp-dots i {
  position: absolute; border-radius: 50%;
  background: var(--gold-2); box-shadow: 0 0 18px 4px var(--gold);
  animation: osp-drift var(--d, 20s) var(--e-io) infinite alternate,
             osp-tw    var(--t,  7s) ease-in-out infinite alternate;
}
@keyframes osp-drift { to { transform: translate3d(var(--x, 60px), var(--y, -90px), 0); } }
@keyframes osp-tw { from { opacity: .15; } to { opacity: .95; } }

.osp-main, .osp-hero { position: relative; z-index: 1; }

/* ==========================================================================
   HERO
   ========================================================================== */

.osp-hero { min-height: 96svh; display: grid; align-content: center; padding-block: 15vh 7vh; }

.osp-ln { display: block; overflow: hidden; padding-block: .06em; margin-block: -.06em; }
.osp-ln > span {
  display: block; transform: translateY(110%); opacity: 0;
  transition: transform 1.05s var(--e-out), opacity .6s linear;
  transition-delay: calc(var(--i, 0) * .1s);
}
.is-armed .osp-ln > span { transform: none; opacity: 1; }

.osp-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

.osp-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 1.02em 1.9em; border-radius: var(--r-pill);
  font-size: .88rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--d-fast) var(--e-out), background var(--d-med),
              border-color var(--d-med), color var(--d-med);
}
.osp-btn--gold { background: var(--gold); color: var(--bg); }
.osp-btn--gold:hover { background: var(--gold-2); }
.osp-btn--ghost { border-color: var(--hair); color: var(--ink); }
.osp-btn--ghost:hover { border-color: var(--gold); color: var(--gold-2); }
.osp-btn:active { transform: scale(.97); }

.osp-atomic {
  margin-top: var(--s-4); padding: 1.5rem 1.7rem;
  border-left: 2px solid var(--gold); background: var(--bg-2);
  border-radius: 0 var(--r-md) var(--r-md) 0; max-width: 64ch;
}
.osp-atomic p { margin: 0; color: var(--mute); }

/* ==========================================================================
   SCROLL SCRUBBED STATEMENT
   ========================================================================== */

.osp-scrub {
  font-size: clamp(1.45rem, 3.8vw, 3rem);
  font-weight: 500; line-height: 1.24; letter-spacing: -.032em; max-width: 24ch;
}
.osp-scrub w { color: rgba(247, 239, 238, .14); transition: color .3s linear; }
.osp-scrub w.is-on { color: var(--ink); }
.osp-scrub w.is-gold.is-on { color: var(--gold); }

/* ==========================================================================
   HORIZONTAL SERVICE RAIL
   Vertical scroll drives horizontal travel. Native sticky, no hijacking,
   so momentum, scrollbar position and find-in-page all keep working.
   ========================================================================== */

.osp-rail { position: relative; }
.osp-rail__vp { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.osp-rail__track {
  display: flex; gap: clamp(.9rem, 2vw, 1.6rem);
  padding-inline: clamp(1.1rem, 4vw, 2.4rem); will-change: transform;
}
.osp-rail__head { position: absolute; top: clamp(2.4rem, 8vh, 5.4rem); left: 0; right: 0; z-index: 2; pointer-events: none; }
.osp-rail__bar { height: 2px; background: var(--hair); margin-top: 1rem; max-width: 200px; }
.osp-rail__bar i { display: block; height: 100%; background: var(--gold); width: var(--p, 0%); }

.osp-card {
  flex: 0 0 clamp(268px, 29vw, 400px);
  background: var(--bg-2); border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.3vw, 2.1rem); min-height: clamp(320px, 44vh, 430px);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: border-color var(--d-med), background var(--d-med);
}
.osp-card:hover { border-color: var(--line); background: var(--bg-3); }
.osp-card .osp-no { margin-bottom: auto; }
.osp-card h3 { margin: 2rem 0 .7rem; }
.osp-card p { font-size: .9rem; color: var(--dim); margin: 0; }

.osp-no {
  font-size: .68rem; font-weight: 600; letter-spacing: .2em;
  color: var(--gold); font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   GRIDS AND TILES
   ========================================================================== */

.osp-grid { display: grid; gap: clamp(.9rem, 2vw, 1.5rem); margin-top: var(--s-4); }
.osp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.osp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.osp-tile {
  background: var(--bg-2); border: 1px solid var(--hair); border-radius: var(--r-md);
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  transition: transform var(--d-med) var(--e-out), border-color var(--d-med);
}
.osp-tile:hover { transform: translateY(-5px); border-color: var(--line); }
.osp-tile p { font-size: .92rem; color: var(--dim); margin: 0; }
.osp-stars {
  color: var(--gold); margin: 0 0 .9rem;
  display: flex; align-items: baseline; gap: .5rem; letter-spacing: .08em;
}
.osp-stars em { color: var(--hair); font-style: normal; }
.osp-stars b { font-size: .82rem; font-weight: 600; color: var(--mute); letter-spacing: 0; }

.osp-review blockquote {
  margin: 0 0 1rem; font-size: 1rem; color: var(--ink);
  line-height: 1.55; quotes: "\201C" "\201D";
}
.osp-review blockquote::before { content: open-quote; color: var(--gold); }
.osp-review blockquote::after  { content: close-quote; color: var(--gold); }

.osp-review__proj {
  font-size: .84rem; color: var(--mute); margin: 0 0 .3rem; font-weight: 500; line-height: 1.4;
}
.osp-review__meta { font-size: .76rem; color: var(--dim); margin: 0; }

.osp-review__badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0 0; }
.osp-review__badges span {
  font-size: .68rem; letter-spacing: .04em; color: var(--gold-2);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: .25em .7em;
}

/* ==========================================================================
   VIDEO SHOWCASE
   Facade embeds. A static thumbnail loads first and only swaps to a YouTube
   iframe on click. Eight live embeds would add roughly 4MB to the page.
   ========================================================================== */

.osp-vgrid {
  display: grid; gap: clamp(.9rem, 2vw, 1.4rem); margin-top: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.osp-video {
  background: var(--bg-2); border: 1px solid var(--hair);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color var(--d-med), transform var(--d-med) var(--e-out);
}
.osp-video:hover { border-color: var(--line); transform: translateY(-4px); }

.osp-video__play {
  display: block; position: relative; width: 100%; aspect-ratio: 9 / 16;
  padding: 0; border: 0; background: var(--bg-3); cursor: pointer; overflow: hidden;
}
/* Shorts thumbnails are 16:9 with letterboxing, so scale up and crop to fill */
.osp-video__play img {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.72);
  transition: transform var(--d-med) var(--e-out), opacity var(--d-med);
}
.osp-video__play:hover img { transform: scale(1.8); }

.osp-video__icon {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: var(--bg);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
  transition: transform var(--d-med) var(--e-out), background var(--d-med);
}
.osp-video__play:hover .osp-video__icon { transform: scale(1.1); background: var(--gold-2); }
.osp-video__play:active .osp-video__icon { transform: scale(.96); }

.osp-video__play iframe { width: 100%; height: 100%; border: 0; display: block; }

.osp-video__meta { padding: .9rem 1rem 1.1rem; }
.osp-video__meta h3 { font-size: .98rem; margin: 0 0 .2rem; }
.osp-video__meta p { font-size: .8rem; color: var(--dim); margin: 0; }

/* ==========================================================================
   SOCIAL
   ========================================================================== */

.osp-social {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s-4);
  padding-top: var(--s-3); border-top: 1px solid var(--hair);
}
.osp-social a {
  font-size: .8rem; letter-spacing: .04em; color: var(--dim); text-decoration: none;
  padding: .45em .9em; border: 1px solid var(--hair); border-radius: var(--r-pill);
  transition: color var(--d-med), border-color var(--d-med);
}
.osp-social a:hover { color: var(--gold-2); border-color: var(--gold); }

/* ==========================================================================
   PINNED SPLIT
   ========================================================================== */

.osp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.osp-sticky { position: sticky; top: 20vh; }
.osp-step { padding: clamp(1.6rem, 4vh, 2.8rem) 0; border-top: 1px solid var(--hair); }
.osp-step h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: .8rem 0 .6rem; }
.osp-step p { color: var(--dim); margin: 0; max-width: 44ch; }

/* ==========================================================================
   TABS
   ========================================================================== */

.osp-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--s-3) 0 var(--s-4); }
.osp-tab {
  padding: .62em 1.15em; border-radius: var(--r-pill);
  border: 1px solid var(--hair); background: transparent; color: var(--dim);
  font-family: Archivo; font-size: .83rem; font-weight: 500; cursor: pointer;
  transition: all .22s var(--e-out);
}
.osp-tab[aria-selected="true"] { border-color: var(--gold); color: var(--gold-2); background: var(--bg-2); }
.osp-tab:active { transform: scale(.97); }

.osp-panel { display: none; }
.osp-panel.is-on { display: block; animation: osp-panel-in .4s var(--e-out); }
@keyframes osp-panel-in { from { opacity: 0; transform: translateY(14px); } }

/* ==========================================================================
   FAQ
   ========================================================================== */

.osp-faq { border-top: 1px solid var(--hair); margin-top: var(--s-3); }
.osp-faq details { border-bottom: 1px solid var(--hair); }
.osp-faq summary {
  padding: 1.4rem 0; cursor: pointer; font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  display: flex; justify-content: space-between; gap: 1.5rem; list-style: none;
}
.osp-faq summary::-webkit-details-marker { display: none; }
.osp-faq summary::after {
  content: "+"; color: var(--gold); font-weight: 400; font-size: 1.4rem;
  transition: transform var(--d-med) var(--e-out); flex: none;
}
.osp-faq details[open] summary::after { transform: rotate(45deg); }
.osp-faq__a { padding-bottom: 1.4rem; color: var(--dim); max-width: 70ch; font-size: .95rem; }

/* ==========================================================================
   STATS AND MARQUEE
   ========================================================================== */

.osp-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: var(--hair); border-block: 1px solid var(--hair);
}
.osp-stat { background: var(--bg); padding: clamp(1.8rem, 4vw, 3rem) clamp(1rem, 2.5vw, 1.8rem); }
.osp-stat b {
  display: block; font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800;
  letter-spacing: -.045em; color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums;
}
.osp-stat span {
  display: block; margin-top: .7rem; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}

.osp-mq {
  overflow: hidden; border-block: 1px solid var(--hair);
  padding-block: clamp(1.2rem, 2.6vh, 1.9rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.osp-mq__track { display: flex; width: max-content; animation: osp-mq 46s linear infinite; }
.osp-mq:hover .osp-mq__track { animation-play-state: paused; }
.osp-mq.is-off .osp-mq__track { animation-play-state: paused; }
@keyframes osp-mq { to { transform: translate3d(-50%, 0, 0); } }
.osp-mq__track span {
  display: inline-flex; align-items: center; gap: clamp(1.4rem, 3.5vw, 2.6rem);
  font-size: clamp(1rem, 2.1vw, 1.7rem); font-weight: 500; letter-spacing: -.02em;
  color: var(--mute); white-space: nowrap; padding-right: clamp(1.4rem, 3.5vw, 2.6rem);
}
.osp-mq__track span::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none;
}

/* ==========================================================================
   REVEAL
   Hidden states are scoped to html.js-motion, set by an inline script before
   paint. No JS means nothing hides, so the page stays fully indexable.
   ========================================================================== */

html.js-motion .osp [data-r] {
  opacity: 0; transform: translateY(50px); filter: blur(7px);
  transition: opacity .9s var(--e-out), transform .9s var(--e-out), filter .9s var(--e-out);
  transition-delay: calc(var(--i, 0) * .085s);
}
html.js-motion .osp [data-r].is-on { opacity: 1; transform: none; filter: none; }

.osp-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; }
.osp-progress i {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--sp, 0));
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
}

.osp :focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: var(--r-sm); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Fallback used on narrow screens, and by motion.js if sticky is unavailable. */
.osp-rail.is-unpinned .osp-rail__vp { position: static; height: auto; padding-block: 3rem; }
.osp-rail.is-unpinned .osp-rail__track {
  flex-wrap: wrap; transform: none !important;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.osp-rail.is-unpinned .osp-card { flex: 1 1 auto; min-height: 0; }
.osp-rail.is-unpinned .osp-rail__head { position: static; margin-bottom: 1.8rem; }

@media (max-width: 880px) {
  .osp-split { grid-template-columns: 1fr; }
  .osp-sticky { position: static; }
  .osp-rail__vp { position: static; height: auto; padding-block: 3rem; }
  .osp-rail__track { flex-direction: column; transform: none !important; }
  .osp-card { flex: 1 1 auto; min-height: 0; }
  .osp-rail__head { position: static; margin-bottom: 1.8rem; }
}

/* ==========================================================================
   REDUCED MOTION
   Simplified motion, not zero feedback. Content still resolves.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .osp *, .osp *::before, .osp *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.js-motion .osp [data-r],
  .osp .osp-ln > span {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .osp .osp-scrub w { color: var(--ink) !important; }
  .osp-amb b, .osp-dots i, .osp-mq__track { animation: none !important; }
}

/* ==========================================================================
   AUTHOR / E-E-A-T BLOCK
   Names the person who does the work. Search engines and buyers both weigh
   a real, verifiable specialist over an anonymous "our team".
   ========================================================================== */

.osp-author {
  background: var(--bg-2);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: clamp(1.6rem, 4vw, 3rem);
}
.osp-author__body { max-width: 72ch; }
.osp-author h2 { margin-bottom: var(--s-2); }
.osp-author p { color: var(--dim); }
.osp-author .osp-lede { color: var(--mute); }
.osp-author strong { color: var(--gold-2); font-weight: 600; }

/* ==========================================================================
   SITEWIDE RESTYLE
   Maps the PARENT theme's own class vocabulary onto the Oxblood system, so
   all 13 pages get the new design without a single word of content moving.

   Content on every page lives inside hardcoded parent templates
   (page-local-seo-bahria-town.php and so on), not in the WordPress editor.
   Rebuilding those templates would mean re-typing roughly 8,000 words with a
   real risk of losing something. Restyling their existing markup carries no
   such risk and reaches every page at once.
   ========================================================================== */

body.osp-site {
  background: var(--bg);
  color: var(--ink);
  font-family: Archivo, system-ui, -apple-system, sans-serif;
  font-weight: 300;
}

body.osp-site h1, body.osp-site h2,
body.osp-site h3, body.osp-site h4 {
  font-family: Archivo, system-ui, sans-serif;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}
body.osp-site h1 { font-weight: 800; letter-spacing: -.042em; line-height: 1.04; }
body.osp-site h2 { font-weight: 700; letter-spacing: -.038em; }
body.osp-site h3 { font-weight: 600; }

body.osp-site p,
body.osp-site .body-text { color: var(--dim); }
body.osp-site .lead-text { color: var(--mute); }

/* Header and footer */
body.osp-site .site-header { background: rgba(31, 18, 21, .84); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair); }
body.osp-site .site-header.scrolled { background: rgba(22, 12, 14, .95); }
body.osp-site .nav-link { color: var(--mute); transition: color var(--d-med); }
body.osp-site .nav-link:hover, body.osp-site .nav-link.active { color: var(--gold-2); }
body.osp-site .dropdown-menu { background: var(--bg-2); border: 1px solid var(--hair); }
body.osp-site .dropdown-link { color: var(--dim); }
body.osp-site .dropdown-link:hover { color: var(--gold-2); background: var(--bg-3); }
body.osp-site .site-footer { background: var(--bg-2); border-top: 1px solid var(--hair); }
body.osp-site .footer-col-title { color: var(--ink); }
body.osp-site .footer-links a { color: var(--dim); }
body.osp-site .footer-links a:hover { color: var(--gold-2); }

/* Buttons */
body.osp-site .btn { border-radius: var(--r-pill); font-weight: 600;
  transition: transform var(--d-fast) var(--e-out), background var(--d-med), border-color var(--d-med); }
body.osp-site .btn:active { transform: scale(.97); }
body.osp-site .btn-primary { background: var(--gold); color: var(--bg); border-color: var(--gold); }
body.osp-site .btn-primary:hover { background: var(--gold-2); border-color: var(--gold-2); }
body.osp-site .btn-secondary,
body.osp-site .btn-gold-outline { border-color: var(--hair); color: var(--ink); background: transparent; }
body.osp-site .btn-secondary:hover,
body.osp-site .btn-gold-outline:hover { border-color: var(--gold); color: var(--gold-2); }

/* Surfaces */
body.osp-site .bento-card,
body.osp-site .nap-box,
body.osp-site .atomic-answer-box,
body.osp-site .review-card,
body.osp-site .ticker-item,
body.osp-site .faq-item {
  background: var(--bg-2); border: 1px solid var(--hair); border-radius: var(--r-md);
  transition: transform var(--d-med) var(--e-out), border-color var(--d-med);
}
body.osp-site .bento-card:hover,
body.osp-site .review-card:hover { transform: translateY(-5px); border-color: var(--line); }

body.osp-site .tagline-badge { background: rgba(200,155,91,.09); border-color: var(--line); color: var(--gold-2); }
body.osp-site .badge-dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
body.osp-site .gmb-map-container { border: 1px solid var(--hair); border-radius: var(--r-md); overflow: hidden; }
body.osp-site .mobile-sticky-bar { background: rgba(22,12,14,.95); border-top: 1px solid var(--hair); }

/* Kill the gradient-text treatment. Solid gold reads more expensive and
   cannot fail into invisible text if background-clip is unsupported. */
body.osp-site .gold-text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--gold) !important;
}

/* Sitewide reveal, same engine as the homepage */
html.js-motion body.osp-site [data-r] {
  opacity: 0; transform: translateY(44px); filter: blur(6px);
  transition: opacity .85s var(--e-out), transform .85s var(--e-out), filter .85s var(--e-out);
  transition-delay: calc(var(--i, 0) * .08s);
}
html.js-motion body.osp-site [data-r].is-on { opacity: 1; transform: none; filter: none; }

body.osp-site :focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

/* ==========================================================================
   SUBPAGE HERO, BREADCRUMB, LISTS
   ========================================================================== */

.osp-hero--sub { min-height: 0; padding-block: 22vh 6vh; }
.osp-hero--sub h1 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); max-width: 22ch; }

.osp-crumb { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .78rem;
  color: var(--dim); margin-bottom: 1.4rem; }
.osp-crumb a { color: var(--mute); text-decoration: none; }
.osp-crumb a:hover { color: var(--gold-2); }
.osp-crumb [aria-current] { color: var(--gold-2); }

.osp-list { margin: 0; padding: 0; list-style: none; }
.osp-list li {
  position: relative; padding-left: 1.3rem; margin-bottom: .55rem;
  font-size: .93rem; color: var(--dim);
}
.osp-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}

.osp-tile--link { display: block; text-decoration: none; }
.osp-tile--link h3 { color: var(--ink); transition: color var(--d-med); }
.osp-tile--link:hover h3 { color: var(--gold-2); }
.osp-tile h3 a { text-decoration: none; }
.osp-tile h3 a:hover { color: var(--gold-2); }



/* ==========================================================================
   STACKING
   .osp-amb and .osp-dots are position:fixed at z-index 0. Positioned elements
   paint above static ones regardless of source order, so the real content has
   to be lifted explicitly.

   Do NOT flatten everything to z-index 1. An earlier version did, which
   overrode the theme's own .site-header { z-index: 100 } and dropped the
   header to the same layer as <main>. Because <main> comes later in the DOM
   it then painted over the navigation, and the Services dropdown disappeared
   behind the hero headline.

   Layers, lowest to highest:
      0     ambient aurora and particles
      1     page content and footer
    100     sticky site header, so dropdowns clear the hero
    999     mobile sticky action bar
   9999     scroll progress bar
  10000     skip link, must always be reachable
   ========================================================================== */

body.osp-site > main,
body.osp-site > #main-content,
body.osp-site > .site-footer {
  position: relative;
  z-index: 1;
}

/* Set z-index ONLY. Never override `position` on a theme element: the
   original header is `position: fixed`, and forcing `sticky` changed its
   positioning scheme, which changed how the fixed mobile menu inside it
   stacked and scrolled. Overriding layout properties you did not author is
   how you break things you cannot see. */
body.osp-site > .site-header,
body.osp-site .site-header {
  z-index: 100;
}

/* The header's inner .container was creating a stacking context at z-index 1,
   trapping the fixed mobile menu (z-index 99) and its dropdowns (101) inside
   a layer far below the page content. Let them stack against the header. */
body.osp-site .site-header .container {
  z-index: auto;
}

/* Dropdowns open inside the header, so they inherit its layer. This keeps
   them above the hero regardless of what the hero does. */
body.osp-site .dropdown-menu {
  z-index: 101;
}

body.osp-site > .mobile-sticky-bar,
body.osp-site .mobile-sticky-bar {
  position: fixed;
  z-index: 999;
}

body.osp-site .osp-progress { z-index: 9999; }
body.osp-site .skip-link    { z-index: 10000; }

/* The hero must never create a stacking context that traps the header. */
body.osp-site .hero-section { z-index: auto; }

/* The line reveal must work on recovered pages too, not only on templates
   that carry the .osp class. */
.osp-ln { display: block; overflow: hidden; padding-block: .06em; margin-block: -.06em; }
html.js-motion .osp-ln > span {
  display: block; transform: translateY(110%); opacity: 0;
  transition: transform 1.05s var(--e-out), opacity .6s linear;
  transition-delay: calc(var(--i, 0) * .1s);
}
html.js-motion .is-armed .osp-ln > span { transform: none; opacity: 1; }

/* Hub cards */
.osp-tile__more {
  margin: 1rem 0 0; font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
}
.osp-tile--link:hover .osp-tile__more { color: var(--gold-2); }
.osp-tile--link { display: block; text-decoration: none; height: 100%; }

/* ==========================================================================
   DROPDOWN HOVER BRIDGE  (DESKTOP ONLY)
   Measured on the live site: the nav link ends at 92px, the dropdown starts
   at 102px, so there is a 10px dead gap. Crossing it loses :hover and the
   menu closes before it can be clicked.

   Everything here is wrapped in min-width: 769px. The theme switches to a
   stacked mobile menu at 768px and sets .dropdown-menu { position: static },
   which is what keeps the desktop "left: 50%" rule inert. Leaving my rules
   unscoped meant they sat one specificity step above the theme's mobile
   block, which is a latent way to shove the panel off-screen.
   ========================================================================== */

@media (min-width: 769px) {

  /* .nav-item is already `position: relative` in the theme, so the bridge
     below has a containing block without us restating it. */

  /* Bridge the gap. Transparent, purely a hover target. */
  body.osp-site .nav-item .dropdown-menu::before {
    content: "";
    position: absolute;
    inset: -14px 0 auto 0;
    height: 14px;
    background: transparent;
  }

  /* Delay the close. Opening stays instant, dismissing waits ~180ms. */
  body.osp-site .dropdown-menu {
    transition:
      opacity 180ms var(--e-out) 140ms,
      visibility 0s linear 320ms,
      transform 180ms var(--e-out) 140ms;
  }

  body.osp-site .nav-item:hover .dropdown-menu,
  body.osp-site .nav-item:focus-within .dropdown-menu {
    transition:
      opacity 160ms var(--e-out) 0ms,
      visibility 0s linear 0ms,
      transform 160ms var(--e-out) 0ms;
  }

  /* Keyboard access, which the original hover-only markup did not support. */
  body.osp-site .nav-item:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* ==========================================================================
   MOBILE MENU GUARD
   Belt and braces for the stacked menu. Forces the dropdown back to normal
   flow and full width no matter what any desktop rule tries to do, and
   removes the hover bridge which has no meaning on touch.
   ========================================================================== */

@media (max-width: 768px) {

  /* Layout only, applied whether the menu is open or shut. Nothing here
     affects visibility or hit-testing. */
  body.osp-site .nav-menu .dropdown-menu {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* Visibility and hit-testing ONLY while the menu is open.
     The previous version forced `pointer-events: auto !important` on the
     dropdown unconditionally. The closed drawer is transparent and shifted
     off-screen, but it still sat above the page at z-index 9999, so that one
     declaration re-enabled hit-testing on invisible links. Tapping the
     hamburger landed on the first dropdown item instead, which is why the
     menu never appeared and the browser jumped to a location page. */
  body.osp-site .nav-menu.active .dropdown-menu,
  body.osp-site .nav-menu.open .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* A closed drawer must never intercept a tap. */
  body.osp-site .nav-menu:not(.active):not(.open),
  body.osp-site .nav-menu:not(.active):not(.open) * {
    pointer-events: none !important;
  }

  body.osp-site .nav-item .dropdown-menu::before { content: none; }

  /* .nav-item is `position: relative` in the theme at every width. Leave it
     alone. The dropdown is forced to `static` above, so the containing block
     is irrelevant here anyway. */

  /* Comfortable touch targets, 44px minimum. */
  body.osp-site .dropdown-link,
  body.osp-site .nav-link {
    display: block;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  body.osp-site .nav-menu { overflow-x: hidden; }
}

/* ==========================================================================
   BLOG
   Article typography, tuned for reading: one narrow column, generous
   leading, real hierarchy. This is the part of a site people actually read
   word for word, so it gets more care than a marketing section.
   ========================================================================== */

.osp-prose {
  max-width: 68ch;
  font-size: clamp(1.02rem, 1.25vw, 1.14rem);
  line-height: 1.75;
  color: var(--mute);
}
.osp-prose > * + * { margin-top: 1.35em; }
.osp-prose h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-top: 2.2em; margin-bottom: .2em; color: var(--ink);
}
.osp-prose h3 {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  margin-top: 1.8em; margin-bottom: .1em; color: var(--ink);
}
.osp-prose a { color: var(--gold-2); text-underline-offset: .18em; }
.osp-prose a:hover { color: var(--gold); }
.osp-prose strong { color: var(--ink); font-weight: 600; }
.osp-prose ul, .osp-prose ol { padding-left: 1.3rem; }
.osp-prose li + li { margin-top: .5em; }
.osp-prose li::marker { color: var(--gold); }
.osp-prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.osp-prose figure { margin: 2em 0; }
.osp-prose figcaption { font-size: .84rem; color: var(--dim); margin-top: .6em; }
.osp-prose blockquote {
  border-left: 3px solid var(--gold);
  padding: .2em 0 .2em 1.4rem; margin-inline: 0;
  color: var(--ink); font-size: 1.1em;
}
.osp-prose code {
  background: var(--bg-3); padding: .15em .4em; border-radius: 4px;
  font-size: .9em; color: var(--gold-2);
}
.osp-prose pre {
  background: var(--bg-3); padding: 1.1rem 1.3rem; border-radius: var(--r-md);
  overflow-x: auto; border: 1px solid var(--hair);
}
.osp-prose pre code { background: none; padding: 0; color: var(--mute); }
.osp-prose table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.osp-prose th, .osp-prose td {
  text-align: left; padding: .6rem .8rem .6rem 0;
  border-bottom: 1px solid var(--hair);
}
.osp-prose th { color: var(--ink); font-weight: 600; }
.osp-prose hr { border: 0; border-top: 1px solid var(--hair); margin: 2.5em 0; }

.osp-post__meta {
  font-size: .82rem; color: var(--dim); margin: 0 0 .6rem;
  letter-spacing: .02em;
}
.osp-post__title { font-size: clamp(1.1rem, 1.8vw, 1.32rem); margin: 0 0 .5rem; }
.osp-post__title a { text-decoration: none; color: var(--ink); transition: color var(--d-med); }
.osp-post__title a:hover { color: var(--gold-2); }

.osp-post__img {
  display: block; margin: -.4rem -.4rem 1rem; overflow: hidden;
  border-radius: var(--r-sm); aspect-ratio: 16 / 10;
}
.osp-post__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-med) var(--e-out);
}
.osp-post:hover .osp-post__img img { transform: scale(1.04); }

.osp-article__hero { margin-bottom: var(--s-4); }
.osp-article__hero img {
  width: 100%; height: auto; border-radius: var(--r-lg); display: block;
}

.osp-pagination {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: var(--s-8); justify-content: center;
}
.osp-pagination .page-numbers {
  padding: .55em 1em; border-radius: var(--r-pill);
  border: 1px solid var(--hair); color: var(--dim); text-decoration: none;
  transition: border-color var(--d-med), color var(--d-med);
}
.osp-pagination .page-numbers:hover { border-color: var(--gold); color: var(--gold-2); }
.osp-pagination .page-numbers.current {
  background: var(--gold); color: var(--bg); border-color: var(--gold);
}


/* ==========================================================================
   MOBILE MENU STACKING
   The stacked menu is a full-screen overlay, so it has to sit above
   everything. Measured chain before this fix:
     dropdown-menu 101  ->  nav-menu 99  ->  container 1  ->  site-header 100
   Everything inside the menu was confined to the container's z-index 1 layer,
   which is why submenu items appeared behind the page text.
   ========================================================================== */

@media (max-width: 768px) {

  body.osp-site .site-header { z-index: 9998; }

  body.osp-site .site-header .container,
  body.osp-site .nav-menu,
  body.osp-site .nav-menu * {
    z-index: auto;
  }

  body.osp-site .nav-menu.active,
  body.osp-site .nav-menu.open {
    z-index: 9999;
  }

  /* Solid ground, so page text can never show through the overlay. */
  body.osp-site .nav-menu.active,
  body.osp-site .nav-menu.open {
    background: #14090B;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* The ambient layer must stay behind the menu. */
  body.osp-site .osp-amb,
  body.osp-site .osp-dots { z-index: 0; }

  /* Stop the page scrolling behind an open menu. */
  body.osp-site.no-scroll { overflow: hidden; }
}