/* ============================================================================
   OffPlan Insider - site chrome (header, drawer, command search, footer,
   mobile sticky bar). Extracted from home.css so every template shares one
   header and one footer. Loaded on every view EXCEPT the front page, which
   already ships home.css.

   Deliberately omitted from the extraction: the html/body/img/button element
   resets that sit near the top of home.css. Those are global and would
   restyle entity pages, which have their own base layer.
   Regenerate by re-slicing home.css at the same section banners.
   ============================================================================ */

/* ============================================================================
   OffPlan Insider — homepage stylesheet
   Depends on tokens.css (ink / ember / paper ramps, type, space, radius).
   Every colour here resolves to a token. Prefix: .hp-
   ============================================================================ */

/* ---- homepage-only tokens ------------------------------------------------ */
:root{
  --hp-hero-h1: clamp(2.625rem, 4.7vw, 4.375rem);      /* 42 → 70px */
  --hp-h2: clamp(2.125rem, 3.8vw, 3.625rem);           /* 34 → 58px */
  --hp-h3: clamp(1.375rem, 2vw, 1.875rem);             /* 22 → 30px */
  --hp-pad-x: clamp(16px, 2.8vw, 40px);
  --hp-sect: clamp(72px, 8.5vw, 128px);
  --hp-sect-tight: clamp(56px, 6vw, 72px);
  --hp-sect-cine: clamp(96px, 10vw, 160px);
  --hp-header-h: 76px;
  --hp-glass: rgba(249,246,244,.07);
  --hp-glass-border: rgba(249,246,244,.14);
  --hp-glass-active: rgba(234,88,12,.48);
  --hp-shadow-card: 0 1px 2px rgba(24,14,8,.04), 0 12px 36px rgba(24,14,8,.08);
  --hp-shadow-card-hover: 0 2px 6px rgba(24,14,8,.05), 0 20px 48px rgba(24,14,8,.12);
  --hp-rule-strong: 2px solid var(--ink-900);
}


.hp-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp-skip{position:absolute;left:var(--space-4);top:-100px;z-index:200;padding:var(--space-3) var(--space-4);background:var(--ink-900);color:var(--text-inverse);border-radius:var(--radius-md)}
.hp-skip:focus{top:var(--space-4)}

/* ---- layout primitives --------------------------------------------------- */
.hp-wrap{max-width:calc(var(--opi-shell,1440px) + 2*var(--opi-gutter,clamp(30px,calc(2.4vw + 10px),50px)));margin-inline:auto;padding-inline:var(--opi-gutter,clamp(30px,calc(2.4vw + 10px),50px))}
.hp-wrap--wide{max-width:calc(var(--opi-shell,1440px) + 2*var(--opi-gutter,clamp(30px,calc(2.4vw + 10px),50px)))} /* every section, the header and the footer share the hero's --opi-shell column (one left line site-wide) */
.hp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-6)}
.hp-sect{padding-block:var(--hp-sect)}
.hp-sect--tight{padding-block:var(--hp-sect-tight)}
.hp-sect--cine{padding-block:var(--hp-sect-cine)}
.hp-paper{background:var(--surface-page)}
.hp-paper-2{background:var(--surface-sunken)}

/* section header */
.hp-head{max-width:90%;margin-bottom:clamp(40px,5vw,64px)}
.hp-head--center{margin-inline:auto;text-align:center}
.hp-eyebrow{font-family:var(--font-mono);font-size:var(--text-overline);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-accent);font-weight:var(--weight-medium);margin:0 0 var(--space-4)}
.opi-ink .hp-eyebrow{color:var(--ember-400)}
.hp-h2{font-size:var(--hp-h2);line-height:1.06;margin:0 0 var(--space-5);text-wrap:balance}
.hp-lede{font-size:var(--text-body-lg);color:var(--gray-700);margin:0;max-width:none;line-height:1.6}
.opi-ink .hp-lede{color:var(--text-inverse-2)}
.hp-obs{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.35;color:var(--ink-800);margin:0}
.opi-ink .hp-obs{color:var(--ember-200)}

/* definition lists used as data grids: kill UA margins */
.hp-band__cells,.hp-desk__facts,.hp-signal__data,.hp-facts,.hp-kv,.hp-area__stats,.hp-pcard__data,.hp-dash__over,.hp-profile__rows{margin:0}
.hp-band__cells dd,.hp-desk__facts dd,.hp-signal__data dd,.hp-facts dd,.hp-kv dd,.hp-area__stats dd,.hp-pcard__data dd,.hp-dash__over dd{margin:0}

/* labels & numerals */
.hp-lab{font-family:var(--font-mono);font-size:.75rem;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-3);font-weight:var(--weight-medium)}
.opi-ink .hp-lab{color:var(--text-inverse-2)}
.hp-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.hp-val{font-family:var(--font-display);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);line-height:1.1}

/* evidence chips: the credibility system */
.hp-ev{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--border-2);border-radius:var(--radius-xs);color:var(--text-2);background:var(--surface-card);white-space:nowrap}
.hp-ev::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gray-400)}
.hp-ev--verified{border-color:rgba(27,122,86,.35);color:var(--success)}
.hp-ev--verified::before{background:var(--success)}
.hp-ev--developer,.hp-ev--reported{border-color:var(--border-2);color:var(--gray-700)}
.hp-ev--developer::before,.hp-ev--reported::before{background:var(--gray-500)}
.hp-ev--market{border-color:rgba(138,91,14,.35);color:var(--warning)}
.hp-ev--market::before{background:var(--warning)}
.hp-ev--unverified{border-color:rgba(179,38,30,.3);color:var(--error);border-style:dashed}
.hp-ev--unverified::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--error)}
.opi-ink .hp-ev{background:transparent;border-color:var(--hp-glass-border);color:var(--text-inverse-2)}
.opi-ink .hp-ev--verified{color:#7fd1ad;border-color:rgba(127,209,173,.35)}
.opi-ink .hp-ev--verified::before{background:#7fd1ad}
.opi-ink .hp-ev--market{color:var(--ember-300);border-color:rgba(251,146,60,.35)}
.opi-ink .hp-ev--market::before{background:var(--ember-300)}

/* demo-data flag — brief §48.13: placeholders must be labelled */
.hp-demo{position:relative}
.hp-demo::after{content:'Demo data';position:absolute;top:8px;right:8px;z-index:3;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;background:var(--warning-bg);color:var(--warning);border:1px dashed var(--warning);border-radius:var(--radius-xs)}

/* buttons */
.hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:52px;padding:0 var(--space-6);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:1rem;letter-spacing:var(--tracking-slight);border-radius:var(--radius-md);border:1px solid transparent;text-decoration:none!important;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);white-space:nowrap}
.hp-btn--primary{background:var(--ember-600);border-color:var(--ember-600);color:var(--white)}
.hp-btn--primary:hover{background:var(--ember-500);border-color:var(--ember-500);color:var(--white)}
.hp-btn--inverse{background:transparent;border-color:rgba(249,246,244,.42);color:var(--text-inverse)}
.hp-btn--inverse:hover{border-color:var(--text-inverse);color:var(--text-inverse)}
.hp-btn--ink{background:var(--ink-900);border-color:var(--ink-900);color:var(--text-inverse)}
.hp-btn--ink:hover{background:var(--ink-800);color:var(--text-inverse)}
.hp-btn--outline{background:transparent;border-color:var(--ink-900);color:var(--ink-900)}
.hp-btn--outline:hover{background:var(--ink-900);color:var(--text-inverse)}
.hp-btn--sm{height:44px;padding:0 18px;font-size:var(--text-body-sm)}
.hp-btn .hp-arrow{transition:transform var(--dur) var(--ease-out)}
.hp-btn:hover .hp-arrow{transform:translateX(3px)}
.hp-textlink{display:inline-flex;align-items:center;gap:6px;font-weight:var(--weight-semibold);font-size:var(--text-body-sm);color:var(--ink-900)}
.hp-textlink .hp-arrow{transition:transform var(--dur) var(--ease-out)}
.hp-textlink:hover .hp-arrow{transform:translateX(3px)}
.opi-ink .hp-textlink{color:var(--text-inverse)}
.hp-arrow{width:16px;height:16px;flex:none}

/* card */
.hp-card{background:var(--surface-card);border:1px solid var(--border-1);border-radius:var(--radius-md);box-shadow:var(--hp-shadow-card);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
@media (hover:hover) and (min-width:900px){
  .hp-card--lift:hover{transform:translateY(-4px);box-shadow:var(--hp-shadow-card-hover)}
  .hp-card--lift:hover img{transform:scale(1.015)}
}
.hp-card img{transition:transform var(--dur) var(--ease-out)}

/* glass — only over dark cinematic surfaces */
.hp-glass{background:var(--hp-glass);backdrop-filter:blur(18px) saturate(118%);-webkit-backdrop-filter:blur(18px) saturate(118%);border:1px solid var(--hp-glass-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}


/* ============================================================================
   HEADER
   ============================================================================ */
.hp-header{position:sticky;top:0;z-index:100;height:var(--hp-header-h);background:transparent;transition:background var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);color:var(--text-inverse)}
.hp-header.is-scrolled{background:rgba(13,7,4,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--hp-glass-border)}
.hp-header__in{height:100%;display:flex;align-items:center;gap:var(--space-6)}
.hp-wordmark{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:1.0625rem;letter-spacing:var(--tracking-display);white-space:nowrap;text-decoration:none!important;color:var(--text-inverse);text-shadow:0 1px 3px rgba(13,7,4,.7)}
.hp-wordmark b{font-weight:inherit;color:var(--ember-400)}
.hp-nav{display:flex;align-items:center;gap:clamp(18px,2vw,30px);margin-inline:auto}
.hp-nav a,.hp-nav button{font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-body-sm);color:var(--text-inverse);text-decoration:none!important;display:inline-flex;align-items:center;gap:6px;padding:8px 0;border-bottom:1px solid transparent;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.hp-nav a:hover,.hp-nav button:hover,.hp-nav button[aria-expanded=true]{color:var(--ember-300);border-color:var(--ember-300)}
.hp-nav__item{position:relative}
.hp-mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);width:min(680px,calc(100vw - 32px));background:var(--ink-950);border:1px solid var(--hp-glass-border);border-radius:var(--radius-lg);padding:var(--space-6);display:none;grid-template-columns:1.2fr 1fr;gap:var(--space-8);box-shadow:var(--shadow-lift)}
.hp-mega[data-open]{display:grid}
.hp-mega h3{font-family:var(--font-mono);font-size:var(--text-overline);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-inverse-2);font-weight:var(--weight-medium);margin:0 0 var(--space-3)}
.hp-mega ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.hp-mega li a{display:block;padding:8px 10px;border-radius:var(--radius-sm);border:0;font-weight:var(--weight-medium)}
.hp-mega li a:hover{background:rgba(249,246,244,.06)}
.hp-mega li a small{display:block;font-weight:400;color:var(--text-inverse-2);font-size:var(--text-caption);margin-top:2px}
.hp-mega__note{grid-column:1/-1;border-top:1px solid var(--hp-glass-border);padding-top:var(--space-4);font-size:var(--text-caption);color:var(--text-inverse-2)}
.hp-header__right{display:flex;align-items:center;gap:var(--space-4)}
.hp-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-inverse-2);white-space:nowrap}
.hp-live__dot{width:7px;height:7px;border-radius:50%;background:var(--ember-400);box-shadow:0 0 0 0 rgba(249,115,22,.55);animation:hp-pulse 3s var(--ease-out) infinite}
@keyframes hp-pulse{0%{box-shadow:0 0 0 0 rgba(249,115,22,.55)}20%{box-shadow:0 0 0 7px rgba(249,115,22,0)}100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}}
.hp-iconbtn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--text-inverse);border:1px solid transparent;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.hp-iconbtn:hover{border-color:var(--hp-glass-border);background:rgba(249,246,244,.05)}
.hp-iconbtn svg{width:20px;height:20px}
.hp-header__cta{height:44px;padding:0 18px;font-size:var(--text-body-sm)}
.hp-burger{display:none}
@media (max-width:1099px){
  .hp-nav,.hp-live,.hp-header__cta{display:none}
  .hp-header{height:62px}
  .hp-burger{display:inline-flex}
}

/* mobile drawer */
.hp-drawer{position:fixed;inset:0;z-index:150;background:var(--ink-void);color:var(--text-inverse);padding:var(--space-6) var(--space-5);display:none;flex-direction:column;overflow:auto}
.hp-drawer[data-open]{display:flex}
.hp-drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-8)}
.hp-drawer nav a{display:block;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:1.5rem;letter-spacing:var(--tracking-display);padding:14px 0;border-bottom:1px solid var(--hp-glass-border);color:var(--text-inverse);text-decoration:none!important}
.hp-drawer__sub{margin-top:var(--space-6);display:grid;gap:var(--space-2)}
.hp-drawer__sub a{color:var(--text-inverse-2);text-decoration:none!important;padding:8px 0;font-size:var(--text-body)}
.hp-drawer__cta{margin-top:auto;padding-top:var(--space-8);display:grid;gap:var(--space-3)}

/* command search */
.hp-search{position:fixed;inset:0;z-index:160;display:none;align-items:flex-start;justify-content:center;padding:clamp(24px,10vh,120px) var(--space-4);background:rgba(13,7,4,.72);backdrop-filter:blur(6px)}
.hp-search[data-open]{display:flex}
.hp-search__panel{width:min(720px,100%);background:var(--ink-950);border:1px solid var(--hp-glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lift);color:var(--text-inverse);overflow:hidden}
.hp-search__field{display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-5);height:64px;border-bottom:1px solid var(--hp-glass-border)}
.hp-search__field svg{width:20px;height:20px;flex:none;color:var(--ember-400)}
.hp-search__field input{flex:1;background:none;border:0;color:var(--text-inverse);font:inherit;font-size:1.0625rem;outline:none;min-width:0}
.hp-search__field input::placeholder{color:var(--text-inverse-2)}
.hp-kbd{font-family:var(--font-mono);font-size:.6875rem;color:var(--text-inverse-2);border:1px solid var(--hp-glass-border);border-radius:var(--radius-xs);padding:2px 6px}
.hp-search__results{max-height:min(60vh,520px);overflow:auto;padding:var(--space-3)}
.hp-search__group{padding:var(--space-2) var(--space-3)}
.hp-search__group h3{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-inverse-2);margin:var(--space-2) 0 var(--space-2);font-weight:var(--weight-medium)}
.hp-search__group a{display:flex;justify-content:space-between;gap:var(--space-4);padding:10px 12px;border-radius:var(--radius-sm);text-decoration:none!important;color:var(--text-inverse)}
.hp-search__group a:hover,.hp-search__group a:focus-visible{background:rgba(249,246,244,.07)}
.hp-search__group a span{color:var(--text-inverse-2);font-size:var(--text-caption);white-space:nowrap}
.hp-search__empty{padding:var(--space-8) var(--space-5);color:var(--text-inverse-2)}
.hp-search__empty a{color:var(--ember-300)}


/* ============================================================================
   FOOTER
   ============================================================================ */
.hp-footer{background:var(--ink-void);color:var(--text-inverse);padding:80px 0 32px;border-top:1px solid var(--hp-glass-border)}
.hp-footer__search{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--space-6);align-items:center;padding-bottom:var(--space-10);margin-bottom:var(--space-10);border-bottom:1px solid var(--hp-glass-border)}
.hp-footer__search h2{font-size:1.5rem;margin:0;color:var(--text-inverse)}
.hp-footer__search p{margin:4px 0 0;color:var(--text-inverse-2);font-size:var(--text-body-sm)}
.hp-footer__form{display:flex;gap:var(--space-2)}
.hp-footer__form input{flex:1;height:52px;padding:0 var(--space-4);background:rgba(249,246,244,.05);border:1px solid var(--hp-glass-border);border-radius:var(--radius-md);color:var(--text-inverse);font:inherit;font-size:var(--text-body-sm);min-width:0}
.hp-footer__form input::placeholder{color:rgba(249,246,244,.45)}
.hp-footer__form input:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:var(--ember-500)}
.hp-footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8);margin-bottom:var(--space-10)}
.hp-footer__cols h3{font-family:var(--font-mono);font-size:var(--text-overline);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ember-300);font-weight:var(--weight-medium);margin:0 0 var(--space-4)}
.hp-footer__cols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hp-footer__cols a{color:var(--text-inverse-2);text-decoration:none!important;font-size:var(--text-body-sm)}
.hp-footer__cols a:hover{color:var(--text-inverse)}
.hp-footer__cols li[data-soon]{color:rgba(249,246,244,.38);font-size:var(--text-body-sm)}
.hp-footer__cols li[data-soon] span{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;margin-left:6px}
.hp-footer__bottom{border-top:1px solid var(--hp-glass-border);padding-top:var(--space-6);display:grid;gap:var(--space-4);font-size:var(--text-caption);color:var(--text-inverse-2)}
.hp-footer__bottom p{margin:0;line-height:1.6}
.hp-footer__legal{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
@media (max-width:1099px){.hp-footer__cols{grid-template-columns:1fr 1fr}.hp-footer__search{grid-template-columns:1fr}}
@media (max-width:560px){.hp-footer__cols{grid-template-columns:1fr}}


/* ============================================================================
   MOBILE STICKY BAR
   ============================================================================ */
.hp-stickybar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));height:54px;z-index:120;display:none;background:var(--ink-950);border:1px solid var(--hp-glass-border);border-radius:10px;box-shadow:var(--shadow-lift);overflow:hidden;transform:translateY(calc(100% + 24px));transition:transform 320ms var(--ease-out)}
.hp-stickybar[data-show]{transform:none}
.hp-stickybar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-inverse);font-weight:var(--weight-semibold);font-size:var(--text-body-sm);text-decoration:none!important}
.hp-stickybar a+a{border-left:1px solid var(--hp-glass-border);background:var(--ember-600)}
.hp-stickybar svg{width:18px;height:18px}
@media (max-width:767px){.hp-stickybar{display:flex}body{padding-bottom:78px}}


/* ---- carried over from the home.css premium pass, because these restyle the
   header and footer buttons and would otherwise only apply on the front page. */
.hp-btn{border-radius:999px}
.hp-btn--primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(221,85,20,.55)}
.hp-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- solid header for light-topped views ---------------------------------
   The header is transparent by design so it can float over the dark hero on
   the front page and on entity singles. Archives, guides and plain pages
   open on white, where near-white nav text on a transparent bar is
   invisible. body.opi-chrome-solid is set server-side for exactly those
   views and paints the same ground the scrolled state uses.
   ------------------------------------------------------------------------ */
body.opi-chrome-solid .hp-header{background:rgba(13,7,4,.96);box-shadow:0 1px 0 var(--hp-glass-border)}
body.opi-chrome-solid .hp-header.is-scrolled{background:rgba(13,7,4,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body.opi-chrome-solid .hp-wordmark{text-shadow:none}

/* ---- scoped button reset --------------------------------------------------
   home.css resets `button` globally. That reset was deliberately left out of
   this file because it is global and would restyle entity pages. But the
   header, drawer, search and footer all rely on it: without it the Insights
   toggle and the search icon fall back to the UA default and render as grey
   boxes with an outset border. Same declarations, scoped to the chrome.
   ------------------------------------------------------------------------ */
.hp-header button,
.hp-drawer button,
.hp-search button,
.hp-footer button,
.hp-stickybar button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ============================================================
   CHROME FLUSH - no block gap between header, main and footer.
   Block templates apply :where(.wp-site-blocks)>*{margin-block:1.25rem 0},
   which paints a 20px white strip under the dark header and above the dark
   footer. entity.css only cancelled it for single-project.
   ============================================================ */
body.opi-chrome-solid .wp-site-blocks>header.wp-block-template-part,
body.opi-chrome-solid .wp-site-blocks>main,
body.opi-chrome-solid .wp-site-blocks>footer.wp-block-template-part{margin-block-start:0}