/**
 * Doorkeeper — Entry Point
 * v1.1.0 — real header/footer wordmark logos, flag-shaped header badge,
 *          glass-gradient border component (hero toggle + ghost button),
 *          fixed-height hero (see layout/header.css, components/glass.css,
 *          pages/home.css)
 *
 * Inlined from base/layout/components/pages partials below (source of
 * truth for edits) to avoid a CSS @import waterfall — @import forces
 * serial requests before the browser can paint. Edit the partial file
 * and re-run the concat, or edit this file directly; both stay in sync
 * by convention, not by a build step.
 */

/* === source: base/variables.css === */
/**
 * Doorkeeper — Design Tokens
 * v1.0.0 — initial build (Wireframe 5 / Wireframe 6)
 * Every color, spacing, radius, font and shadow value used across the
 * Doorkeeper theme is centralized here. Nothing else should hardcode these.
 */

:root {
  /* === Brand === */
  --dk-orange: #f47216;
  --dk-orange-hover: #db620d;
  --dk-peach: #fcd5b8;       /* icon-circle fill (About section) */
  --dk-eyebrow-bg: #fef8f1;  /* filled eyebrow pill background */
  --dk-maroon: #600d10;
  --dk-maroon-dark: #4a0a0c;

  /* Warm surfaces used by the contact section (Component 37.png) — a
     measurably different, more saturated pair than --dk-eyebrow-bg/
     --dk-border, reused by both .plx-dk-contact__eyebrow and (the second
     pair) .plx-dk-contact__panel + .plx-dk-testimonial, which share a look. */
  --dk-contact-pill-bg: #fdf7f2;
  --dk-contact-pill-border: #f3e4db;
  --dk-contact-surface-bg: #fdfbf7;
  --dk-contact-surface-border: #ecd6c7;

  /* Filled eyebrow pill on a maroon background (Manage + CTA sections
     share this — same "Everything You Can Manage" pill both times). */
  --dk-eyebrow-bg-dark: #68191c;

  /* Shared horizontal inset for the maroon panel sections (Manage + CTA).
     60px is the desktop value (measured off both Frame 159.png and
     Component 38.png, restored at 1200px below) — unconditionally applying
     it at every width left far too little room for text under ~768px, so
     it scales down instead of just shrinking the desktop number of the
     content around it. Redefined here (not overridden per-property in each
     section) so both sections stay in sync from one place. */
  --dk-maroon-panel-pad-x: 20px;

  /* === Neutrals === */
  --dk-black: #0c0b09;       /* hero / trust-bar dark overlay */
  --dk-footer: #0d1217;      /* footer flat dark */
  --dk-cream: #fdf2e9;       /* soft section background (steps, contact) */
  --dk-white: #ffffff;
  --dk-ink: #171310;         /* headings on light bg */
  --dk-body: #6b655d;        /* paragraph text on light bg */
  --dk-body-dark: #c9c4bc;   /* paragraph text on dark bg */
  --dk-border: #ece1d3;      /* light warm border (inputs, cards) */
  --dk-border-dark: rgba(255, 255, 255, 0.14);

  /* === Typography === */
  --dk-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dk-font-mono: 'JetBrains Mono', 'Space Mono', monospace;

  /* === Spacing (4px rhythm) === */
  --dk-space-1: 4px;
  --dk-space-2: 8px;
  --dk-space-3: 12px;
  --dk-space-4: 16px;
  --dk-space-5: 20px;
  --dk-space-6: 24px;
  --dk-space-8: 32px;
  --dk-space-10: 40px;
  --dk-space-12: 48px;
  --dk-space-16: 64px;
  --dk-space-20: 80px;
  --dk-space-24: 96px;

  /* === Layout === */
  --dk-container-max: 1240px;
  --dk-container-pad: 24px;

  /* === Radius === */
  --dk-radius-sm: 8px;
  --dk-radius-md: 14px;
  --dk-radius-lg: 24px;
  --dk-radius-xl: 32px;
  --dk-radius-pill: 999px;

  /* === Shadow === */
  --dk-shadow-card: 0 12px 32px rgba(23, 19, 16, 0.08);
  --dk-shadow-btn: 0 8px 20px rgba(244, 114, 22, 0.28);
  --dk-shadow-header: 0 8px 20px rgba(0, 0, 0, 0.18);

  /* Translucent dark backdrop for the header's scrolled state (nav/button
     side only — never behind the white logo badge). Same warm-black as
     --dk-black, just with alpha, so it reads as an extension of the hero
     overlay rather than an unrelated color. */
  --dk-header-scrolled-bg: rgba(12, 11, 9, 0.72);

  /* === Motion === */
  --dk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dk-duration: 0.25s;
}

/* --dk-maroon-panel-pad-x scales up with viewport — see its definition
   above. Desktop (1200px+) keeps the exact measured 60px. */
@media (min-width: 576px) {
  :root {
    --dk-maroon-panel-pad-x: 28px;
  }
}
@media (min-width: 768px) {
  :root {
    --dk-maroon-panel-pad-x: 32px;
  }
}
@media (min-width: 1200px) {
  :root {
    --dk-maroon-panel-pad-x: 60px;
  }
}

/* === source: base/reset.css === */
/**
 * Doorkeeper — Reset
 * v1.0.0
 */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Kill the browser's native gray/blue tap-highlight flash on mobile
     (WebKit/Chromium). This is a separate overlay from :hover/:active/
     :focus — removing it doesn't touch those states. */
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  font-family: var(--dk-font-body);
  color: var(--dk-ink);
  background: var(--dk-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
}

button {
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.15;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === source: base/typography.css === */
/**
 * Doorkeeper — Typography
 * v1.0.0
 */

body {
  font-size: 16px;
}

h1,
h2,
h3,
h4 {
  color: var(--dk-ink);
  letter-spacing: -0.02em;
}

.plx-dk-h1 {
  font-size: 44px;
}

.plx-dk-h2 {
  font-size: 36px;
}

.plx-dk-h3 {
  font-size: 24px;
}

.plx-dk-body {
  font-size: 16px;
  color: var(--dk-body);
  line-height: 1.6;
}

/* Uppercase, wide-tracked mono label used for eyebrows, step numbers, stats */
.plx-dk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--dk-space-2);
  font-family: var(--dk-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Small solid dot used inside an eyebrow (e.g. Product Demo) */
.plx-eyebrow-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dk-orange);
  flex-shrink: 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

/* Reusable "live" pulse — a soft expanding ring behind the dot */
.plx-dot-pulse {
  position: relative;
}

.plx-dot-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: plx-dot-pulse-ring 1.8s ease-out infinite;
}

@keyframes plx-dot-pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@media (min-width: 768px) {
  .plx-dk-h1 {
    font-size: 52px;
  }

  .plx-dk-h2 {
    font-size: 44px;
  }
}

@media (min-width: 1200px) {
  .plx-dk-h1 {
    font-size: 56px;
  }

  .plx-dk-h2 {
    font-size: 48px;
  }
}

/* === source: layout/grid.css === */
/**
 * Doorkeeper — Page Grid / Container
 * v1.0.0
 * One container system used by every section — never redefine width locally.
 */

.plx-dk-container {
  width: 100%;
  max-width: calc(var(--dk-container-max) + var(--dk-container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--dk-container-pad);
}

@media (min-width: 1200px) {
  .plx-dk-container {
    --dk-container-pad: 40px;
  }
}

/* === source: layout/header.css === */
/**
 * Doorkeeper — Header
 * v1.1.0 — brand badge now uses the real Group 7.svg wordmark (icon+text in
 *          one file, no separate text span) and a corrected flag-shaped
 *          badge (rounded top-right/bottom-left, sharp top-left/bottom-
 *          right) matching the reference crop exactly.
 * Transparent header overlapping the hero image, per the wireframe (no
 * scroll-triggered restyle is shown in the reference, so none is invented —
 * the header scrolls away with the hero, it is not sticky).
 */

.plx-dk-header {
  /* Fixed (not absolute) so the scrolled state has something to apply to —
     it stays pinned over the hero at load, same as before, but now stays
     put as the page scrolls instead of scrolling away with it. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  transition: box-shadow var(--dk-duration) var(--dk-ease);
}

.plx-dk-header[data-plx-dk-scrolled='true'] {
  box-shadow: var(--dk-shadow-header);
 opacity: 1;
    background: var(--dk-header-scrolled-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Nav/button-side backdrop only — left offset matches the badge's own
   width at each breakpoint below so it starts right after the badge, never
   under or overlapping it. Transparent and inert until scrolled. */
.plx-dk-header__scrollbg {
  position: absolute;
  /* left = badge width (200px base) + a small gap so the backdrop never
     touches the badge — kept in sync with .plx-dk-header__badge's own
     width at each breakpoint below. */
  inset: 0 0 0 calc(200px + var(--dk-space-4));
  z-index: 0;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  transition: opacity var(--dk-duration) var(--dk-ease);
}

.plx-dk-header[data-plx-dk-scrolled='true'] .plx-dk-header__scrollbg {
  /* opacity: 1;
  background: var(--dk-header-scrolled-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); */
}

/* Header row sits in the shared container, so the logo's left edge and the
   Book Demo button's right edge line up with the hero content's edges
   (measured in Frame 144.jpg: both land on the 100px container inset at
   1440). space-between then centres the nav between them exactly as the
   reference does. */
.plx-dk-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

/* The white badge is decoupled from the logo: it is anchored to the viewport
   edge and sized in px, so the logo inside can align to the container instead
   of to the badge's own padding. */
.plx-dk-header__badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 200px;
  height: 94px;
  background: var(--dk-white);
  /* Shape comes from the actual design asset (figma-ui-folder/screens/
     Subtract.svg, copied to images/doorkeeper/icons/) instead of a
     hand-traced approximation: true circular-arc corners (~24px radius),
     so edges are clean and anti-aliased rather than pixel-sampled and
     stepped. mask-size 100%/100% stretches it independently in x/y to
     match this element's own (non-square) box at each breakpoint below,
     same as a background-image would. */
  --dk-header-badge-mask: url('../../../images/doorkeeper/icons/header-badge-shape.svg');
  -webkit-mask-image: var(--dk-header-badge-mask);
  mask-image: var(--dk-header-badge-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.plx-dk-header__brand {
  display: flex;
  align-items: center;
}

/* Fixed px height — the reference renders the wordmark at its native 60px
   viewBox height and it must not scale with viewport across desktop. */
.plx-dk-header__brand-logo {
  height: 34px;
  width: auto;
}

.plx-dk-header__nav {
  display: none;
  align-items: center;
  gap: var(--dk-space-8);
}

.plx-dk-header__nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--dk-white);
  transition: opacity var(--dk-duration) var(--dk-ease);
}

.plx-dk-header__nav a:hover {
  opacity: 0.75;
}

.plx-dk-header__nav a[data-plx-dk-active='true'] {
  color: var(--dk-orange);
}

.plx-dk-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--dk-white);
}

.plx-dk-header__toggle svg {
  width: 22px;
  height: 22px;
}

/* Element-typed selector so this reliably beats .plx-dk-btn's own display
   (equal-specificity classes would otherwise depend on @import order). */
a.plx-dk-header__cta {
  display: none;
}

/* Mobile nav drawer */
.plx-dk-header__mobile {
  position: absolute;
  top: 100%;
  left: var(--dk-container-pad);
  right: var(--dk-container-pad);
  margin-top: var(--dk-space-2);
  background: var(--dk-white);
  border-radius: var(--dk-radius-md);
  box-shadow: var(--dk-shadow-card);
  padding: var(--dk-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-1);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--dk-duration) var(--dk-ease),
    transform var(--dk-duration) var(--dk-ease);
}

.plx-dk-header[data-plx-dk-open='true'] .plx-dk-header__mobile {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.plx-dk-header__mobile-link {
  padding: var(--dk-space-3) var(--dk-space-2);
  color: var(--dk-ink);
  font-weight: 500;
  border-radius: var(--dk-radius-sm);
}

.plx-dk-header__mobile-link:hover {
  background: var(--dk-cream);
}

.plx-dk-header__mobile-link[data-plx-dk-active='true'] {
  color: var(--dk-orange);
}

.plx-dk-header__mobile .plx-dk-btn {
  margin-top: var(--dk-space-2);
}

@media (min-width: 992px) {
  .plx-dk-header__nav {
    display: flex;
  }

  .plx-dk-header__toggle {
    display: none;
  }

  a.plx-dk-header__cta {
    display: inline-flex;
  }

  .plx-dk-header__mobile {
    display: none;
  }
}

/* Desktop: exact values measured off Frame 144.jpg at its 1440 canvas —
   header band 88px tall, badge 366×106, wordmark 60px tall, 59px between
   nav items. All fixed px on purpose: they must not scale between desktop
   sizes, only the container inset moves. */
@media (min-width: 1200px) {
  .plx-dk-header__inner {
    height: 72px;
  }

  .plx-dk-header__badge {
    width: 366px;
    height: 92px;
  }

  .plx-dk-header__scrollbg {
    left: calc(366px + var(--dk-space-4));
  }

  .plx-dk-header__brand-logo {
    height: 50px;
  }

  .plx-dk-header__nav {
    gap: 59px;
  }
}
@media (min-width: 1535.98px) {
  .plx-dk-header__badge {
    width: 436px;
}
  .plx-dk-header__scrollbg {
    left: calc(436px + var(--dk-space-4));
  }
}
@media (min-width: 1800px) {
  .plx-dk-header__badge {
    width: 626px;
}
  .plx-dk-header__scrollbg {
    left: calc(616px + var(--dk-space-4));
  }
}

/* === source: layout/preloader.css === */
/**
 * Doorkeeper — Preloader
 * v1.0.0
 * Full-viewport cover shown on initial load, matching the hero's cream
 * surface. A spinning ring (brand orange) around the existing logo mark,
 * which pulses gently. preloader.js flips data-plx-dk-hidden once the page
 * (or a safety timeout) says it's ready; this file only handles paint.
 */

.plx-dk-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dk-cream);
  transition: opacity var(--dk-duration) var(--dk-ease),
    visibility var(--dk-duration) var(--dk-ease);
}

.plx-dk-preloader[data-plx-dk-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.plx-dk-preloader__ring {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plx-dk-preloader__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--dk-radius-pill);
  border: 3px solid var(--dk-border);
  border-top-color: var(--dk-orange);
  animation: plx-dk-preloader-spin 0.9s linear infinite;
}

.plx-dk-preloader__mark {
  width: 30px;
  height: auto;
  animation: plx-dk-preloader-pulse 1.4s var(--dk-ease) infinite;
}

@keyframes plx-dk-preloader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes plx-dk-preloader-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.88);
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plx-dk-preloader__ring::before,
  .plx-dk-preloader__mark {
    animation: none;
  }
}

/* === source: layout/footer.css === */
/**
 * Doorkeeper — Footer
 * v1.1.0 — brand uses the real Group 8.svg wordmark (icon+text, white fill
 *          for this dark background) instead of icon + separate text span.
 */

.plx-dk-footer {
  background: var(--dk-footer);
  color: var(--dk-white);
  padding: var(--dk-space-16) 0 var(--dk-space-6);
}

.plx-dk-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dk-space-10);
  padding-bottom: var(--dk-space-10);
}

.plx-dk-footer__brand {
  margin-bottom: var(--dk-space-4);
}

.plx-dk-footer__brand-logo {
  /* Frame 171.png: renders at the wordmark SVG's native size (216x60),
     not scaled down — was 28px tall, well under that. */
  height: 60px;
  width: auto;
}

.plx-dk-footer__about {
  font-size: 14px;
  color: var(--dk-body-dark);
  line-height: 1.6;
  /* No max-width: wraps naturally at the grid column's own width (see
     .plx-dk-footer__grid's 2.1fr first track) — 320px was narrower than
     that column and wrapped the text a line short of the reference. */
  margin-bottom: var(--dk-space-5);
}

.plx-dk-footer__social {
  display: flex;
  align-items: center;
  gap: var(--dk-space-3);
}

.plx-dk-footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--dk-border-dark);
  transition: background-color var(--dk-duration) var(--dk-ease);
}

.plx-dk-footer__social-icon:hover {
  background: rgba(255, 255, 255, 0.08);
}

.plx-dk-footer__social-icon img {
  width: 18px;
  height: 18px;
}

.plx-dk-footer__store {
  display: flex;
  align-items: center;
  gap: var(--dk-space-2);
  padding: 10px 20px 10px 16px;
  border-radius: var(--dk-radius-pill);
  border: 1px solid var(--dk-border-dark);
  font-size: 13px;
  font-weight: 500;
  transition: background-color var(--dk-duration) var(--dk-ease);
}

.plx-dk-footer__store:hover {
  background: rgba(255, 255, 255, 0.08);
}

.plx-dk-footer__store img {
  width: 16px;
  height: 16px;
}

.plx-dk-footer__col-title {
  font-family: var(--dk-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dk-orange);
  margin-bottom: var(--dk-space-4);
}

.plx-dk-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-3);
}

.plx-dk-footer__links a {
  font-size: 15px;
  color: var(--dk-body-dark);
  transition: color var(--dk-duration) var(--dk-ease);
}

.plx-dk-footer__links a:hover {
  color: var(--dk-white);
}

.plx-dk-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-4);
  padding-top: var(--dk-space-8);
  border-top: 1px solid var(--dk-border-dark);
  font-size: 13px;
  color: var(--dk-body-dark);
}

.plx-dk-footer__bottom-links {
  display: flex;
  gap: var(--dk-space-6);
}

.plx-dk-footer__bottom-links a:hover {
  color: var(--dk-white);
}

@media (min-width: 768px) {
  .plx-dk-footer__grid {
    /* 2.1fr measured off Frame 171.png (about column ~476px vs ~227px for
       each of the three link columns, at 1440 with the shared 40px gap). */
    grid-template-columns: 2.1fr 1fr 1fr 1fr;
  }
}

@media (min-width: 992px) {
  .plx-dk-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* === source: layout/scroll-top.css === */
/**
 * Doorkeeper — Back to Top
 * v1.0.0
 * Fixed circular button, bottom-right. Surface is the shared .plx-dk-glass
 * component (see components/glass.css) — same frosted fill + gradient ring
 * used by the hero toggle and ghost button, so this matches the theme
 * without its own bespoke background/border.
 */

/* Compound selector, not just .plx-dk-scrolltop: .plx-dk-glass also sets
   position (relative, for its own ::before ring) — equal specificity would
   otherwise let import order decide which "position" wins (verified this
   broke fixed positioning entirely). */
.plx-dk-scrolltop.plx-dk-glass {
  position: fixed;
  right: var(--dk-space-6);
  bottom: var(--dk-space-6);
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--dk-white);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dk-duration) var(--dk-ease),
    transform var(--dk-duration) var(--dk-ease),
    background-color var(--dk-duration) var(--dk-ease);
}

.plx-dk-scrolltop[data-plx-dk-visible='true'] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.plx-dk-scrolltop:hover {
  background: rgba(46, 36, 29, 0.7);
}

.plx-dk-scrolltop svg {
  width: 20px;
  height: 20px;
}

@media (min-width: 768px) {
  .plx-dk-scrolltop {
    right: var(--dk-space-8);
    bottom: var(--dk-space-8);
  }
}

/* === source: components/glass.css === */
/**
 * Doorkeeper — Glass Border
 * v1.0.0
 * Reusable frosted-glass surface: translucent blurred fill + a 1px gradient
 * ring (brighter top-left, fading through, catching the light again at the
 * bottom) instead of a flat solid border. Used by the hero property-type
 * toggle and the ghost ("Download App") button — anywhere sitting directly
 * on a photo background needs this rather than a plain border.
 *
 * The ring is a pseudo-element painted with the padding+mask trick so it
 * follows the host's own border-radius exactly (a real `border-image`
 * gradient does not respect border-radius in most browsers).
 */

.plx-dk-glass {
  position: relative;
  isolation: isolate;
  background: rgba(46, 36, 29, 0.5);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.plx-dk-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.02) 60%,
    rgba(255, 255, 255, 0.22) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* === source: components/buttons.css === */
/**
 * Doorkeeper — Buttons
 * v1.1.0 — --ghost's fill/border moved to the shared .plx-dk-glass
 *          component (components/glass.css); only its text color and hover
 *          feedback stay here.
 */

.plx-dk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dk-space-2);
  padding: 15px 28px;
  border-radius: var(--dk-radius-pill);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform var(--dk-duration) var(--dk-ease),
    background-color var(--dk-duration) var(--dk-ease),
    box-shadow var(--dk-duration) var(--dk-ease);
}

.plx-dk-btn__icon {
  width: 14px;
  height: 10px;
  transition: transform var(--dk-duration) var(--dk-ease);
}

.plx-dk-btn:hover .plx-dk-btn__icon {
  transform: translateX(3px);
}

.plx-dk-btn:active {
  transform: scale(0.97);
}

/* Primary — solid orange, white text + arrow */
.plx-dk-btn--primary {
  background: var(--dk-orange);
  color: var(--dk-white);
  box-shadow: var(--dk-shadow-btn);
}

.plx-dk-btn--primary:hover {
  background: var(--dk-orange-hover);
}

/* Ghost — glass surface (see components/glass.css), used on dark/maroon
   backgrounds sitting over a photo. Fill/ring come from .plx-dk-glass,
   applied alongside this class in markup; only text color lives here. */
.plx-dk-btn--ghost {
  color: var(--dk-white);
}

.plx-dk-btn--ghost:hover {
  background: rgba(30, 22, 18, 0.55);
}

/* Small — header nav */
.plx-dk-btn--sm {
  padding: 10px 20px;
  font-size: 14px;
}

/* Block — full width, contact form submit. Component 37.png measures a
   42px-tall button; .plx-dk-btn--primary's box-shadow is deliberately
   dropped here, this one is flat. */
.plx-dk-btn--block {
  width: 100%;
  padding: 9px 28px;
  font-size: 16px;
  box-shadow: none;
}

/* === source: components/cards.css === */
/**
 * Doorkeeper — Cards
 * v1.0.0
 */

/* Manage-grid card (photo + title + text) used in the maroon "Everything
   You Can Manage" section. Frame 159.png / card-hover/*.png: the photo
   fills the whole card and the text panel is a glass overlay pinned to the
   bottom, not a separate box below the image — so on hover it can grow
   upward to cover the full card without reflowing anything else (it's
   position:absolute throughout; only its own height changes). */
.plx-dk-manage-card {
  position: relative;
  aspect-ratio: 358 / 350; /* measured card proportions, Frame 159.png */
  border-radius: var(--dk-radius-lg);
  overflow: hidden;
  box-shadow: var(--dk-shadow-card);
}

.plx-dk-manage-card__media {
  position: absolute;
  inset: 0;
}

.plx-dk-manage-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Registered so the browser can interpolate it as a length instead of
   snapping — a plain custom property can't be transitioned, only a
   @property one can. Drives where the glass layer's mask starts (see
   ::before below): animating THIS instead of the panel's height is what
   lets the blur read as already covering the whole card and the reveal
   edge simply glide up through it, rather than a box visibly growing and
   cutting a hard top edge as it goes. */
@property --dk-manage-card-glass-start {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 130px;
}

.plx-dk-manage-card__body {
  position: absolute;
  inset: auto 0 0 0;
  /* Always the full card now (the glass's vertical reach is animated via
     ::before's mask below, not by growing this box) — .plx-dk-manage-card
     itself still clips everything to the card's rounded corners. */
  height: 100%;
  overflow: hidden;
}

/* The glass look (translucent gradient + blur) lives on its own layer,
   always spanning the full card. What reveals more or less of it is the
   mask below, whose start point is the animated custom property — so the
   blur itself is "already there" from the top the whole time, just masked
   off at rest, and hovering slides that mask edge up rather than swapping
   a layer's opacity or growing a box (both of which read as a separate
   layer snapping in). */
.plx-dk-manage-card__body::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, #fff 45%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  --dk-manage-card-glass-start: 130px; /* card height (~350px) minus the old 220px panel */
  --dk-manage-card-glass-fade: 50px;
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    transparent var(--dk-manage-card-glass-start),
    #000 calc(var(--dk-manage-card-glass-start) + var(--dk-manage-card-glass-fade))
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    transparent var(--dk-manage-card-glass-start),
    #000 calc(var(--dk-manage-card-glass-start) + var(--dk-manage-card-glass-fade))
  );
  /* Figma source: Smart Animate, ease-in, 400ms — every animated property
     below shares this exact duration/easing so all layers (glass reveal,
     solid fade-in, content position + opacity) move on one clock instead
     of reading as separate effects with their own timing. */
  transition: --dk-manage-card-glass-start 0.4s ease-in;
}

/* Property 1=Variant2.png: sampled flat opaque white top-to-bottom (row 0
   through the bottom of the panel, alpha 255 throughout) — not the
   translucent-fading-to-white gradient the default (unhovered) state uses.
   Its own layer for the same cross-fade reason as ::before above; fades in
   as the mask opens up so the glass dissolves into solid white instead of
   swapping instantly. */
.plx-dk-manage-card__body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dk-white);
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

.plx-dk-manage-card:hover .plx-dk-manage-card__body::before {
  --dk-manage-card-glass-start: 0px;
}

.plx-dk-manage-card:hover .plx-dk-manage-card__body::after {
  opacity: 1;
}

/* At the 3-column desktop layout (Frame 159.png's own width class) cards
   are wide enough that titles/descriptions never wrap past 1/2 lines, so
   the panel can match the reference's measured proportion exactly instead
   of the wider mobile/tablet safety margin above. */
@media (min-width: 992px) {
  .plx-dk-manage-card__body::before {
    /* Card is the full 358x350 here (Property 1=Default.png's own size) —
       92px measured too tall against that reference; the pre-reveal-rework
       design had this panel starting at card height (350) minus its old
       182px-tall panel, i.e. 168px down, faded in over the panel's own
       60px (not the base state's 50px). */
    --dk-manage-card-glass-start: 168px;
    --dk-manage-card-glass-fade: 60px;
  }
}

.plx-dk-manage-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dk-ink);
  margin-bottom: var(--dk-space-2);
}

.plx-dk-manage-card__text {
  font-size: 14px;
  color: var(--dk-body);
  line-height: 1.55;
}

/* Default-state content: bottom-anchored inside the (shorter) glass panel,
   fades out as the hover content fades in. */
.plx-dk-manage-card__default {
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  padding: var(--dk-space-5) var(--dk-space-6) var(--dk-space-6);
  opacity: 1;
  /*Same400msease-inaseveryotheranimatedpropertyhere(Figma:;
  SmartAnimate,ease-in,400ms)—onesharedclockinsteadofeachlayerrunningitsownduration/curve.*/transition: opacity 0.2s ease-in;
  -webkit-transition: opacity 0.2s ease-in;
  -moz-transition: opacity 0.2s ease-in;
  -ms-transition: opacity 0.2s ease-in;
  -o-transition: opacity 0.2s ease-in;
}

.plx-dk-manage-card:hover .plx-dk-manage-card__default {
  opacity: 0;
}

/* Hover-only content: title + detail bullets + brand mark, filling the
   fully-expanded panel. */
.plx-dk-manage-card__hover {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 32px var(--dk-space-6) var(--dk-space-6);
  opacity: 0;
  pointer-events: none;
  /*Startsbelowitsrestingposition(title/bullets/logoallmoveasoneblock,sincethey're all children of this element) and rises into     place as it fades in, instead of just appearing. The distance is set     so __hover'stitlebeginsexactlywhere__default'stitlealreadysits(measured:;
  156.9pxatthesingle-columnwidththisbaserulecovers)—anythingelsemakesthetitlevisiblyjumptoadifferentspottheinstanthoverstarts,insteadofcontinuingfromwherethereader'seyealreadyis.*/transform: translateY(205px);
  /*Same400msease-inaseveryotheranimatedpropertyhere(Figma:;
  SmartAnimate,ease-in,400ms)—positionandopacitymovetogetherononeclock,andmatchtheglassreveal/solidfade-inabove,sonothinglandsearlyorlagsbehindtherest.*/transition: opacity 0.2s ease-in, transform 0.4s ease-in;
  -webkit-transition: opacity 0.2s ease-in, transform 0.4s ease-in;
  -moz-transition: opacity 0.2s ease-in, transform 0.4s ease-in;
  -ms-transition: opacity 0.2s ease-in, transform 0.4s ease-in;
  -o-transition: opacity 0.2s ease-in, transform 0.4s ease-in;
}

.plx-dk-manage-card:hover .plx-dk-manage-card__hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Cards are narrower per-column here (3-up grid) than the single-column
   mobile/tablet width the 157px above was measured against, so
   __default's title sits at a different height above the card bottom —
   re-measured at this width (194-215px depending on description line
   count; 205px splits that difference) so __hover's title still starts
   from __default's actual position instead of the mobile distance. Placed
   after the base rule above (not grouped with the other 992px overrides
   earlier in the file) so it actually wins the cascade instead of being
   overridden by that unconditional rule's later source position. */
@media (min-width: 992px) {
  .plx-dk-manage-card__hover {
    transform: translateY(205px);
    -webkit-transform: translateY(205px);
    -moz-transform: translateY(205px);
    -ms-transform: translateY(205px);
    -o-transform: translateY(205px);
}
}

/* Touch devices can't reliably :hover, so the detail content (bullets +
   brand mark) would otherwise be permanently hidden on mobile. Mirrors the
   three :hover rules above rather than a hover interaction — same end
   state, just not gated behind an event that may never fire. Hover-capable
   devices are unaffected, since (hover: none) doesn't match them. */
@media (hover: none) {
  .plx-dk-manage-card__body::before {
    --dk-manage-card-glass-start: 0px;
  }

  .plx-dk-manage-card__body::after {
    opacity: 1;
  }

  .plx-dk-manage-card__default {
    opacity: 0;
  }

  .plx-dk-manage-card__hover {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

.plx-dk-manage-card__hover-list {
  margin-top: var(--dk-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-3);
}

.plx-dk-manage-card__hover-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--dk-body);
}

.plx-dk-manage-card__hover-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dk-body);
}

/* Property 1=Variant2.png: the mark sits at its native asset size (75x80)
   flush to the card's actual corner — right/bottom offsets measured at
   1-2px (antialiasing noise, i.e. 0). Absolute + inset:0 on
   .plx-dk-manage-card__hover already makes it a positioning context sized
   to the card itself, so right:0/bottom:0 here ignores that panel's own
   text padding and sits flush against the card edge, not the padding. */
.plx-dk-manage-card__hover-logo {
  position: absolute;
  right: 0;
  bottom: 0;
  /* Reference card is 358px wide (3-col desktop grid) — at narrower widths
     the mark would overlap the bullet list, so it scales down below the
     992px breakpoint where cards are still that width (verified: 75px on
     a 207px mobile card overlapped the text). Same ~21% of card width
     either way, just not literally 75px off the desktop reference. */
  width: 44px;
  height: 47px;
}

@media (min-width: 992px) {
  .plx-dk-manage-card__hover-logo {
    width: 75px;
    height: 80px;
  }
}

/* Step card — "Five Steps, Under Ninety Seconds". Frame 170.png: no box-
   shadow, but there IS a real (subtle) vertical fill gradient — top blends
   into the section's own cream bg, bottom lifts to near-white (measured
   #fcf6f2 top -> #fdfdfd bottom; re-verify with a flattened export if this
   PNG is re-sampled, its transparent pixels carry stale RGB). Bottom accent
   is a left-to-right gradient fading to transparent, not a solid line. */
.plx-dk-step {
  position: relative;
  border-radius: var(--dk-radius-md);
  padding: var(--dk-space-6) var(--dk-space-4) var(--dk-space-5);
  background: linear-gradient(to bottom, var(--dk-cream) 0%, #fdfdfd 100%);
}

.plx-dk-step::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(to right, var(--dk-orange) 50%, transparent 100%);
  border-radius: 0 0 var(--dk-radius-md) var(--dk-radius-md);
}

.plx-dk-step__icon {
  width: 100%;
  max-width: 175px;
  height: auto;
  margin: 0 auto var(--dk-space-4);
}

.plx-dk-step__num {
  color: var(--dk-orange);
  margin-bottom: var(--dk-space-2);
}

.plx-dk-step__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--dk-space-2);
}

.plx-dk-step__text {
  font-size: 14px;
  color: var(--dk-body);
  line-height: 1.2;
}

/* Stat block — "150+ corporate towers live" row */
.plx-dk-stat {
  padding: var(--dk-space-4) 0;
  border-left: 1px solid #d9d9d7;
  padding-left: var(--dk-space-6);
}

/* Below 640px .plx-dk-about__stats is a 2-column grid, so the left column
   (odd children: 1st and 3rd) sit flush against the grid edge same as
   :first-child does above 640px — only the divider between the two
   columns should show. Restored to :first-child-only once the grid goes
   to 4 (then 1320px+'s own auto-flow layout, which already resets this
   itself — see below). */
.plx-dk-stat:nth-child(odd) {
  border-left: none;
  padding-left: 0;
}

@media (min-width: 640px) {
  .plx-dk-stat:nth-child(odd) {
    border-left: 1px solid #d9d9d7;
    padding-left: var(--dk-space-6);
  }

  .plx-dk-stat:first-child {
    border-left: none;
    padding-left: 0;
  }
}

.plx-dk-stat__value {
  /* Smaller under 640px so "99.9%+" etc. fit a 2-column grid at narrow
     mobile widths without overflowing — 34px restored once there's a full
     4-column row's worth of width. */
  font-size: 24px;
  font-weight: 700;
  color: var(--dk-ink);
  line-height: 1;
}

@media (min-width: 700px) {
  .plx-dk-stat__value {
    /* Not yet 34px — in the 4-column tablet range "<90 Sec+" (the widest
       value) measures wider than its own ~162px column at 34px (verified:
       wrapped to 2 lines), so this tier steps to 28px instead and 34px
       waits for the extra room at 992px+ (the about grid's own 2-col
       breakpoint). */
    font-size: 28px;
  }
}

@media (min-width: 992px) {
  .plx-dk-stat__value {
    font-size: 34px;
  }
}

.plx-dk-stat__value span {
  color: var(--dk-orange);
}

.plx-dk-stat__label {
  margin-top: var(--dk-space-2);
  font-family: var(--dk-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dk-body);
}

/* Testimonial card in the contact section */
.plx-dk-testimonial {
  display: flex;
  align-items: center;
  gap: var(--dk-space-4);
  padding: var(--dk-space-5);
  border: 1px solid var(--dk-contact-surface-border);
  border-radius: var(--dk-radius-md);
  background: var(--dk-contact-surface-bg);
}

.plx-dk-testimonial__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.plx-dk-testimonial__name {
  font-weight: 700;
  font-size: 16px;
}

.plx-dk-testimonial__role {
  font-size: 14px;
  color: var(--dk-orange);
  font-weight: 600;
}

.plx-dk-testimonial__meta {
  font-size: 13px;
  color: var(--dk-body);
  margin-top: 2px;
}

/* === source: components/forms.css === */
/**
 * Doorkeeper — Forms
 * v1.0.0
 */

.plx-dk-field {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-2);
}

.plx-dk-field__label {
  /* Component 37.png: body font (not mono), ~13px, semibold, minimal
     tracking — not the wide-tracked mono style used for eyebrows/step
     labels elsewhere, and lighter than 700 (bold read too heavy here). */
  font-family: var(--dk-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--dk-ink);
}

.plx-dk-field__control {
  width: 100%;
  padding: 14px 18px;
  background: var(--dk-white);
  border: 1px solid var(--dk-border);
  border-radius: var(--dk-radius-pill);
  font-size: 15px;
  color: var(--dk-ink);
  transition: border-color var(--dk-duration) var(--dk-ease),
    box-shadow var(--dk-duration) var(--dk-ease);
}

.plx-dk-field__control::placeholder {
  color: #a79e91;
}

.plx-dk-field__control:focus {
  outline: none;
  border-color: var(--dk-orange);
  box-shadow: 0 0 0 3px rgba(244, 114, 22, 0.15);
}

textarea.plx-dk-field__control {
  border-radius: var(--dk-radius-md);
  resize: vertical;
  min-height: 96px;
}

/* Wraps just the <select> + chevron (not the label) so the chevron's
   top: 50% centers on the control itself, not the whole labeled field —
   centering it against the field previously pulled it up toward the label
   (verified: wrapper center didn't match the select's own center). */
.plx-dk-select-wrap {
  position: relative;
}

.plx-dk-field--select .plx-dk-field__control {
  appearance: none;
  padding-right: 44px;
}

.plx-dk-field__chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 7px;
  pointer-events: none;
}

.plx-dk-form-note {
  font-size: 12px;
  color: var(--dk-body);
  margin-top: var(--dk-space-2);
}

/* Checklist row — "Response within 24 hours" etc. */
.plx-dk-check-list {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-3);
}

.plx-dk-check-list li {
  display: flex;
  align-items: center;
  gap: var(--dk-space-3);
  font-size: 15px;
  color: var(--dk-ink);
}

.plx-dk-check-list img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* === source: pages/home.css === */
/**
 * Doorkeeper — Home Page
 * v1.1.0 — hero height is now locked by JS (pages/home.js) to the taller of
 *          the two variants, so the tab toggle never resizes it; toggle
 *          pill's fill/border moved to .plx-dk-glass (components/glass.css).
 * Section-specific styles for the marketing homepage (Wireframe 5 / 6).
 */

/* ============ Commercial / Residential variant toggle ============ */
/* Every element carrying [data-plx-dk-for] is one variant's copy of a
   piece of content (text, image, card...). Only the copy matching the
   page's current [data-plx-dk-variant] is shown — flipping one attribute
   on <main> swaps every section's content in one paint, no JS re-render. */
[data-plx-dk-for] {
  display: none;
}

[data-plx-dk-variant='commercial'] [data-plx-dk-for='commercial'],
[data-plx-dk-variant='residential'] [data-plx-dk-for='residential'] {
  display: block;
}

/* Grid containers need their grid display restored, not block */
[data-plx-dk-variant='commercial'] .plx-dk-about__stats[data-plx-dk-for='commercial'],
[data-plx-dk-variant='residential'] .plx-dk-about__stats[data-plx-dk-for='residential'] {
  display: grid;
}

/* ============ Hero ============ */
.plx-dk-hero {
  position: relative;
  overflow: hidden;
  /* No-JS/pre-hydration fallback floor. home.js measures both variants on
     load/resize and locks an explicit inline height to the taller one, so
     switching tabs never changes this section's height. Content is
     top-anchored (align-items: flex-start): the toggle/heading/etc. always
     start at the same y regardless of variant, and whichever variant's
     content is shorter just leaves empty room at the bottom instead of the
     top position shifting. */
  min-height: 640px;
  display: flex;
  align-items: flex-start;
  background: var(--dk-black);
}

.plx-dk-hero__bg {
  position: absolute;
  inset: 0;
}

.plx-dk-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Source photos read taller than the hero container; bias the crop
     toward the bottom so the ceiling/pillar isn't what peeks out behind
     the transparent header (see Wireframe 5/6 — no such object is visible
     there in the reference). */
  object-position: center bottom;
}

.plx-dk-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(12, 11, 9, 0.96) 0%,
    rgba(12, 11, 9, 0.86) 32%,
    rgba(12, 11, 9, 0.35) 58%,
    rgba(12, 11, 9, 0.05) 75%
  );
}

.plx-dk-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 140px 0 72px;
}

.plx-dk-hero__inner {
  max-width: 560px;
}

.plx-dk-hero__pointer {
  color: var(--dk-body-dark);
}

.plx-dk-hero__pointer .plx-dk-eyebrow {
  color: var(--dk-body-dark);
}

.plx-dk-hero__toggle {
  /* Mobile/tablet: smaller pill so "Commercial"/"Residential" both fit
     without overflowing narrow viewports. Exact desktop sizing (fill +
     gradient ring come from .plx-dk-glass) is restored at 1200px below —
     measured off Frame 144.jpg: 68px outer pill = 12px padding + 44px tab,
     15px side padding, 12px between the two tabs. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: var(--dk-space-4) 0 var(--dk-space-6);
  padding: 8px 10px;
  border-radius: var(--dk-radius-pill);
}

.plx-dk-hero__toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--dk-radius-pill);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--dk-body-dark);
  transition: background-color var(--dk-duration) var(--dk-ease),
    color var(--dk-duration) var(--dk-ease);
}

@media (min-width: 1200px) {
  .plx-dk-hero__toggle {
    gap: 12px;
    padding: 12px 15px;
  }

  .plx-dk-hero__toggle-btn {
    height: 44px;
    padding: 0 17px;
    font-size: 19px;
  }
}

.plx-dk-hero__toggle-btn[data-plx-dk-active='true'] {
  background: var(--dk-white);
  color: var(--dk-ink);
}

.plx-dk-hero__heading {
  color: var(--dk-white);
  margin-bottom: var(--dk-space-5);
}

.plx-dk-hero__heading span {
  color: var(--dk-orange);
}

.plx-dk-hero__text {
  color: var(--dk-body-dark);
  max-width: 460px;
  margin-bottom: var(--dk-space-8);
}

.plx-dk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dk-space-4);
}

/* ============ Trust bar ============ */
.plx-dk-trustbar {
  background: var(--dk-black);
  padding: var(--dk-space-4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.plx-dk-trustbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--dk-space-2) var(--dk-space-6);
}

.plx-dk-trustbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--dk-space-2);
  font-family: var(--dk-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dk-body-dark);
  white-space: nowrap;
}

.plx-dk-trustbar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dk-orange);
  flex-shrink: 0;
}

.plx-dk-trustbar__item--live .plx-dk-trustbar__dot {
  background: #3ecf5f;
}

.plx-dk-trustbar__sep {
  color: rgba(255, 255, 255, 0.2);
}

/* ============ About ============ */
.plx-dk-about {
  padding: var(--dk-space-20) 0;
}

.plx-dk-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dk-space-10);
  margin-bottom: var(--dk-space-12);
}

.plx-dk-about__photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--dk-radius-lg);
  margin-bottom: var(--dk-space-5);
}

.plx-dk-about__vision {
  display: flex;
  gap: var(--dk-space-4);
}

.plx-dk-about__icon {
  width: 60px;
  height: 60px;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--dk-peach);
  object-fit: contain;
  flex-shrink: 0;
}

.plx-dk-about__vision-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.plx-dk-about__vision-text {
  font-size: 14px;
  color: var(--dk-body);
  line-height: 1.5;
}

.plx-dk-about__eyebrow {
  display: inline-flex;
  padding: 9px 17px;
  background: var(--dk-eyebrow-bg);
  border-radius: var(--dk-radius-pill);
  color: var(--dk-orange);
  margin-bottom: var(--dk-space-4);
  border: 1px solid rgba(244, 114, 22, 0.2);
}

.plx-dk-about__heading {
  margin-bottom: var(--dk-space-4);
}

.plx-dk-about__heading span {
  color: var(--dk-orange);
}

.plx-dk-about__text {
  margin-bottom: var(--dk-space-6);
}

.plx-dk-about__mission {
  display: flex;
  gap: var(--dk-space-4);
  margin-bottom: var(--dk-space-6);
}

.plx-dk-about__quote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dk-space-4);
  flex-wrap: wrap;
  background: var(--dk-ink);
  color: var(--dk-white);
  padding: var(--dk-space-5) var(--dk-space-6);
  border-radius: var(--dk-radius-md);
}

.plx-dk-about__quote p {
  font-size: 14px;
  color: var(--dk-white);
  max-width: 360px;
}

.plx-dk-about__quote-btn {
  padding: 9px 16px 9px 20px;
  gap: 10px;
}

.plx-dk-about__quote-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dk-white);
  flex-shrink: 0;
}

.plx-dk-about__quote-icon img {
  width: 13px;
  height: 13px;
}

.plx-dk-about__stats {
  /* display is owned by the variant-toggle rule above (grid when shown) */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dk-space-6);
}

@media (min-width: 640px) {
  .plx-dk-about__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Below 992px the grid is a single stacked column and the two wrapper divs
   (.plx-dk-about__media, .plx-dk-about__intro) become display:contents —
   their own children join .plx-dk-about__grid's auto-flow directly, so
   `order` can put Company Vision right above Company Mission (the design
   otherwise has Mission much further down, after the intro's heading/text,
   since it lives in the second/desktop-right-column wrapper). Desktop
   (≥992) keeps both wrappers as real 2-column boxes, untouched. */
@media (max-width: 991.98px) {
  .plx-dk-about__media,
  .plx-dk-about__intro {
    display: contents;
  }

  .plx-dk-about__photo {
    order: 1;
  }

  .plx-dk-about__vision {
    order: 3;
  }

  .plx-dk-about__mission {
    order: 3;
  }

  .plx-dk-about__eyebrow {
    order: 1;
  }

  .plx-dk-about__heading {
    order: 2;
  }

  .plx-dk-about__text {
    order: 6;
  }

  .plx-dk-about__quote {
    order: 7;
  }
}

@media (min-width: 992px) {
  .plx-dk-about__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--dk-space-16);
  }
}

/* Frame 149.png: the 4 stats are NOT equal-width columns — each is sized to
   its own content (labels range from "SYSTEM UPTIME" to "CORPORATE TOWERS
   LIVE") with a fixed 172px gap between them and the divider centred in it
   (86px before the border, 86px after). That content needs ~1265px, so this
   only kicks in at 1320px (container's own max-width) — below that the
   equal-width grid above stays in charge, since fixed content this wide
   would overflow a narrower "desktop" container (verified: it did, at
   1024px). Above 1320 the container is capped there too, so this never
   scales further — matches the header's "fixed past a point" treatment. */
@media (min-width: 1320px) {
  .plx-dk-about__stats {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    column-gap: 0;
  }

  .plx-dk-stat {
    margin-left: 86px;
    padding-left: 86px;
  }

  .plx-dk-stat:first-child {
    margin-left: 0;
    padding-left: 0;
  }

  .plx-dk-stat__value {
    font-size: 45px;
  }

  .plx-dk-stat__label {
    margin-top: 6px;
  }
}

/* ============ Manage grid (maroon) ============ */
.plx-dk-manage {
  /* No margin here — this section already lives inside .plx-dk-container
     (see home.blade.php), whose own padding gives the correct ~100px inset
     at 1440 (Frame 159.png). An extra margin on top of that would double it. */
  background: var(--dk-maroon);
  border-radius: var(--dk-radius-xl);
  padding: var(--dk-space-16) var(--dk-maroon-panel-pad-x) var(--dk-space-12);
  text-align: center;
}

.plx-dk-manage__eyebrow {
  display: inline-flex;
  padding: 8px 18px;
  background: var(--dk-eyebrow-bg-dark);
  border-radius: var(--dk-radius-pill);
  color: var(--dk-white);
  margin-bottom: var(--dk-space-5);
  border: 1px solid rgba(244, 114, 22, 0.2);
}

.plx-dk-manage__heading {
  color: var(--dk-white);
  /* Frame 159.png breaks after "Many" — force that exact 2-line wrap
     regardless of container width (640px measures the first line, 804px
     with "Hosts," added, so anywhere between forces the same break). */
  max-width: 700px;
  margin: 0 auto var(--dk-space-4);
}

.plx-dk-manage__text {
  color: var(--dk-body-dark);
  /* One line at the reference's own width (1097px measured) — the old
     620px cap wrapped it to 3 lines here, which is a different section's
     value, not this one's. */
  max-width: 1100px;
  margin: 0 auto var(--dk-space-10);
}

.plx-dk-manage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dk-space-6);
  text-align: left;
}

@media (min-width: 768px) {
  .plx-dk-manage__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .plx-dk-manage__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============ Product demo ============ */
.plx-dk-demo {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  background: var(--dk-black);
  margin-top: var(--dk-space-20);
}

.plx-dk-demo__bg {
  position: absolute;
  inset: 0;
}

.plx-dk-demo__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plx-dk-demo__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(12, 11, 9, 0.95) 0%,
    rgba(12, 11, 9, 0.82) 34%,
    rgba(12, 11, 9, 0.25) 60%,
    rgba(12, 11, 9, 0.02) 78%
  );
}

.plx-dk-demo__content {
  position: relative;
  z-index: 2;
  max-width: 480px;
  padding: var(--dk-space-16) 0;
}

.plx-dk-demo__eyebrow {
  /* Measured off Frame 169.png: 158x36 pill, ~17px left/14px right padding,
     1px orange-tinted border, barely-there fill (not a solid maroon pill
     like .plx-dk-manage__eyebrow — this one sits on the hero photo). */
  padding: 9px 14px 9px 16px;
  gap: var(--dk-space-4);
  background: rgba(244, 114, 22, 0.05);
  border: 1px solid rgba(244, 114, 22, 0.2);
  border-radius: var(--dk-radius-pill);
  color: var(--dk-orange);
  margin-bottom: var(--dk-space-5);
}

.plx-dk-demo__heading {
  color: var(--dk-white);
  margin-bottom: var(--dk-space-4);
}

.plx-dk-demo__heading span {
  color: var(--dk-orange);
}

.plx-dk-demo__text {
  color: var(--dk-body-dark);
}

/* ============ How it works (steps) ============ */
.plx-dk-steps {
  background: var(--dk-cream);
  padding: var(--dk-space-20) 0;
}

.plx-dk-steps__head {
  text-align: center;
  /* Wide enough that the paragraph (876px measured, Frame 170.png) stays on
     one line — the heading forces its own narrower width below so the two
     don't fight over this container's max-width. */
  max-width: 900px;
  margin: 0 auto var(--dk-space-10);
}

.plx-dk-steps__eyebrow {
  display: inline-flex;
  padding: 8px 18px;
  /* Re-sampled from Frame 170.png (flattened — see project memory on this
     PNG's alpha trap): fill/border are both slightly warmer/more peach
     than the shared --dk-eyebrow-bg/--dk-border tokens, so pinned exact
     here rather than reusing them. */
  background: var(--dk-eyebrow-bg);
 border: 1px solid rgba(244, 114, 22, 0.2);
  border-radius: var(--dk-radius-pill);
  color: var(--dk-orange);
  margin-bottom: var(--dk-space-5);
}

.plx-dk-steps__heading {
  /* Forces the reference's exact "Five Steps, Under / Ninety Seconds"
     2-line break, independent of .plx-dk-steps__head's own (now wider)
     max-width. 500px sits between "...Under" (414px) and "...Under
     Ninety" (581px) at this font-size, so it always breaks before the
     "Ninety Seconds" span, never mid-span. */
  /* max-width: 500px; */
  margin: 0 auto var(--dk-space-4);
}

.plx-dk-steps__head .plx-dk-body {
  /* Measured 876px, single line, in Frame 170.png. */
  max-width: 880px;
  margin: 0 auto;
}

.plx-dk-steps__heading span {
  color: var(--dk-orange);
}

.plx-dk-steps__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dk-space-6);
}

@media (min-width: 640px) {
  .plx-dk-steps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .plx-dk-steps__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ============ Contact ============ */
.plx-dk-contact {
  padding: var(--dk-space-20) 0;
}

.plx-dk-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dk-space-10);
}

.plx-dk-contact__info {
  /* Grid items stretch to the row's height by default, so this column is
     already as tall as .plx-dk-contact__panel — turning it into a flex
     column lets .plx-dk-testimonial pin to the bottom (margin-top: auto)
     instead of just trailing the checklist, so it never shifts upward
     when the commercial/residential copy above it changes length.
     align-items: flex-start overrides flex's own default (stretch), which
     was otherwise forcing content-sized children like the eyebrow pill to
     full column width. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Grid items default to min-width:auto, floored at their content's
     min-content size — without this, the testimonial's text forced this
     column wider than its own grid track (verified: 342px vs a 272px
     track at 320px viewport, a real 46px page overflow). */
  min-width: 0;
}

.plx-dk-contact__info .plx-dk-testimonial {
  margin-top: auto;
  width: 100%;
}

.plx-dk-contact__eyebrow {
  display: inline-flex;
  padding: 8px 18px;
  background: var(--dk-contact-pill-bg);
  border: 1px solid rgba(244, 114, 22, 0.2);
  border-radius: var(--dk-radius-pill);
  color: var(--dk-orange);
  margin-bottom: var(--dk-space-5);
}

.plx-dk-contact__heading {
  margin-bottom: var(--dk-space-4);
}

.plx-dk-contact__heading span {
  color: var(--dk-orange);
}

.plx-dk-contact__text {
  margin-bottom: var(--dk-space-6);
  max-width: 460px;
}

.plx-dk-contact__checklist {
  margin-bottom: var(--dk-space-8);
}

.plx-dk-contact__panel {
  background: var(--dk-contact-surface-bg);
  border: 1px solid rgba(244, 114, 22, 0.2);
  border-radius: var(--dk-radius-lg);
  box-shadow: var(--dk-shadow-card);
  padding: var(--dk-space-6);
}

.plx-dk-contact__form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dk-space-4);
  margin-bottom: var(--dk-space-4);
}

@media (min-width: 560px) {
  .plx-dk-contact__form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.plx-dk-contact__message {
  margin-bottom: var(--dk-space-5);
}

@media (min-width: 992px) {
  .plx-dk-contact__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--dk-space-16);
  }
}

/* ============ CTA (maroon) ============ */
.plx-dk-cta {
  /* No horizontal margin — lives inside .plx-dk-container now (see
     home.blade.php), same as .plx-dk-manage, instead of its own
     independent offset. Vertical spacing between sections stays margin. */
  position: relative;
  overflow: hidden;
  background: var(--dk-maroon);
  border-radius: var(--dk-radius-xl);
  margin: var(--dk-space-8) 0 var(--dk-space-20);
  min-height: 420px;
  display: flex;
  align-items: center;
}

.plx-dk-cta__content {
  /* 50px top/bottom, --dk-maroon-panel-pad-x (60px) left/right — measured
     off Component 38.png (eyebrow-to-top and buttons-to-bottom both 50px). */
  /* max-width is border-box (global reset), so it has to account for the
     60px side padding: 660px text column + 2*60px padding = 780px. 660px
     sits between the reference's line-1 width (645px) and line-1+"Management"
     (966px), forcing the same "...Visitor / Management..." break. */
  position: relative;
  z-index: 2;
  padding: 50px var(--dk-maroon-panel-pad-x);
  max-width: 780px;
}

.plx-dk-cta__eyebrow {
  display: inline-flex;
  padding: 8px 18px;
  background: var(--dk-eyebrow-bg-dark);
    border: 1px solid rgba(244, 114, 22, 0.2);

  border-radius: var(--dk-radius-pill);
  color: var(--dk-white);
  margin-bottom: var(--dk-space-5);
}

.plx-dk-cta__heading {
  color: var(--dk-white);
  margin-bottom: var(--dk-space-4);
}

.plx-dk-cta__text {
  color: var(--dk-body-dark);
  margin-bottom: var(--dk-space-8);
}

.plx-dk-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dk-space-4);
}

.plx-dk-cta__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.plx-dk-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.plx-dk-cta__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--dk-maroon) 0%,
    rgba(96, 13, 16, 0.75) 30%,
    rgba(96, 13, 16, 0.1) 58%,
    rgba(96, 13, 16, 0) 72%
  );
}
@media (max-width: 575.98px) {
  .plx-dk-manage-card__body {
    height: 106%;

}
.plx-dk-contact-form-js .plx-dk-btn--block {
    font-size: 14px;
}
.plx-dk-cta {
    text-align: center;
}
.plx-dk-cta .plx-dk-cta__actions {
    justify-content: center;
}
.plx-dk-footer__social {
    flex-wrap: wrap;
}
.plx-dk-stat {
    border-left: 0;
    position: relative;
}
.plx-dk-stat:nth-of-type(even)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -12.5px;
  height: 100%;
  width: 1px;
  background-color: #d9d9d7;
  display: block;
}
.plx-dk-about__grid {
    gap: var(--dk-space-6);
}
.plx-dk-about__eyebrow {
    width: fit-content;
}
}