/* ============================================================
   ScaleUp — park.css
   Shared layout for the individual flex-park leasing pages
   (Rockwall, McKinney). Brand tokens — colour, type — are
   inherited from styles.css and are not redefined here.
   The DFW pillar page still uses landing.css.
   ============================================================ */

:root {
  --ink-deep: #1C1710;
  --cream-on-ink: #F3EADA;
}

.pk-wrap { max-width: 1180px; margin: 0 auto; padding: 0 6vw; }


.pk-h2 {
  font-family: 'Lora', serif; font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--text); margin: 0; text-wrap: balance;
}
.pk-body { font-size: 16.5px; line-height: 1.7; color: rgba(36,29,19,0.78); max-width: 64ch; }
.pk-body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(184,50,50,0.35); }
.pk-body a:hover { text-decoration-color: var(--red); }

/* ============================================================
   1. HERO — full-bleed image fading into the cream ground
   ============================================================ */
.pk-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; }
.pk-hero-media { position: absolute; inset: 0; overflow: hidden; }
.pk-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; }
.pk-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    /* top wash so the flat nav sits on light ground */
    linear-gradient(to bottom, var(--bg) 0%, rgba(245,239,226,0.62) 7%, rgba(245,239,226,0.08) 20%, rgba(245,239,226,0) 30%),
    /* bottom fade into the cream page — held low so the render stays intact */
    linear-gradient(to top, var(--bg) 0%, rgba(245,239,226,0.96) 22%, rgba(245,239,226,0.72) 38%, rgba(245,239,226,0.2) 58%, rgba(245,239,226,0) 72%);
}

/* Nav: flat and transparent over the hero, condensing into a floating pill
   on scroll. Positioning + pill visuals come from [data-stick] .su-morph in
   styles.css; header.js drives --hp. */
.pk-nav { display: flex; align-items: center; gap: 30px; white-space: nowrap; }
.pk-nav .su-logo { margin-right: auto; }
.pk-nav-links { display: flex; gap: 24px; }
.pk-nav-links a { font-size: 13.5px; font-weight: 500; color: rgba(36,29,19,0.7); transition: color 0.2s ease; }
.pk-nav-links a:hover, .pk-nav-links a.active { color: var(--ink); }
.pk-nav-cta {
  padding: 10px 20px; border-radius: 100px; background: var(--red);
  font-size: 13px; font-weight: 600; color: #FBF3F0; transition: background 0.2s ease;
}
.pk-nav-cta:hover { background: var(--red-hover); }

/* copy sits on the image, in the faded lower third */
.pk-hero-inner {
  position: relative; z-index: 2; margin-top: auto;
  max-width: 1180px; width: 100%; margin-left: auto; margin-right: auto;
  padding: 0 6vw 38px;
}
.pk-hero h1 {
  margin: 0; font-family: 'Lora', serif; font-weight: 600;
  font-size: clamp(38px, 5.2vw, 68px); line-height: 1.0; letter-spacing: -0.03em;
  color: var(--text);
}
.pk-hero h1 em { font-style: normal; display: block; color: rgba(36,29,19,0.5); }
.pk-hero-lede {
  margin: 24px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.62; color: rgba(36,29,19,0.76);
}
.pk-hero-lede strong { color: var(--text); font-weight: 600; }
.pk-hero-ctas { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   2. FACTS — slightly rounded card riding the hero fade
   ============================================================ */
.pk-facts-band { max-width: 1180px; margin: 0 auto; padding: 0 6vw; }
.pk-facts {
  display: grid; grid-template-columns: repeat(6, 1fr); margin: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 6px 10px; box-shadow: 0 18px 44px rgba(74,56,30,0.08);
}
.pk-fact { padding: 22px 24px 20px; border-left: 1px solid var(--line); }
.pk-fact:first-child { border-left: none; }
.pk-fact dt {
  font-family: 'Archivo', sans-serif; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(36,29,19,0.45); margin-bottom: 12px;
}
.pk-fact dd { margin: 0; font-family: 'Lora', serif; font-size: 30px; line-height: 1; color: var(--text); }
.pk-fact dd small { display: block; margin-top: 6px; font-family: 'Archivo', sans-serif; font-size: 13px; color: rgba(36,29,19,0.55); }
.pk-fact.is-address dd { font-size: 19px; line-height: 1.25; }

/* ============================================================
   3. UNITS — sticky scroll through the three unit types
   ============================================================ */
.pk-units { padding-top: 64px; }
.pk-units-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 18px; }
.pk-units-head .pk-body { margin: 0; font-size: 16px; }

.pk-units-scroll { height: 300vh; position: relative; }
.pk-units-sticky {
  position: sticky; top: 0; height: 100vh; min-height: 620px;
  display: flex; flex-direction: column; justify-content: center;
}
.pk-units-inner {
  max-width: 1300px; width: 100%; margin: 0 auto; padding: 0 4vw;
  display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 48px; align-items: center;
}

/* --- left: the schedule --- */
.pk-track { display: flex; gap: 0; margin: 0 0 30px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pk-track button {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 12px 0 0; margin-right: 30px;
  font-family: 'Archivo', sans-serif; font-size: 11px; letter-spacing: 0.14em;
  color: rgba(36,29,19,0.38); position: relative; transition: color 0.25s ease;
}
.pk-track button::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.pk-track button.is-on { color: var(--ink); }
.pk-track button.is-on::before { transform: scaleX(1); }

.pk-panels { position: relative; min-height: 350px; }
.pk-panel {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
}
.pk-panel.is-on { opacity: 1; visibility: visible; transform: none; }
.pk-panel-size {
  font-family: 'Lora', serif; font-weight: 600; font-size: clamp(46px, 5.6vw, 72px);
  line-height: 0.92; letter-spacing: -0.03em; color: var(--text);
}
.pk-panel-size sup { font-size: 0.3em; font-weight: 500; letter-spacing: 0.06em; vertical-align: super; color: rgba(36,29,19,0.5); margin-left: 6px; }
.pk-panel-name { margin-top: 12px; font-size: 17px; font-weight: 600; color: var(--text); }
.pk-panel-where { margin-top: 4px; font-family: 'Archivo', sans-serif; font-size: 11.5px; letter-spacing: 0.08em; color: rgba(36,29,19,0.5); }
.pk-panel-desc { margin: 18px 0 0; font-size: 15.5px; line-height: 1.65; color: rgba(36,29,19,0.76); max-width: 42ch; }
.pk-panel-desc b { color: var(--text); font-weight: 600; }

.pk-panel-specs { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); max-width: 380px; }
.pk-panel-specs li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.pk-panel-specs dt, .pk-panel-specs .k {
  font-family: 'Archivo', sans-serif; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(36,29,19,0.45);
}
.pk-panel-specs .v { font-size: 14px; font-weight: 500; color: var(--text); }

/* --- right: the stage --- */
.pk-stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(36,29,19,0.05); border-radius: 18px; }
.pk-stageset { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s; }
.pk-stageset.is-on { opacity: 1; visibility: visible; }
.pk-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.5s ease, transform 1.2s cubic-bezier(0.2,0,0.2,1); transform: scale(1.035);
}
.pk-stage img.is-on { opacity: 1; transform: none; }
.pk-stage-tag {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: 9px 15px; background: rgba(255,253,246,0.94); border-radius: 0 12px 0 0;
  font-family: 'Archivo', sans-serif; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(36,29,19,0.62);
}

/* stage arrows — cycle photos within the active unit */
.pk-stage-arr {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,253,246,0.92); color: var(--ink);
  font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(74,56,30,0.18);
  opacity: 0; transition: opacity 0.25s ease, background 0.2s ease;
}
.pk-stage:hover .pk-stage-arr, .pk-stage-arr:focus-visible { opacity: 1; }
.pk-stage-arr:hover { background: #FFFDF6; }
.pk-stage-arr.is-prev { left: 14px; }
.pk-stage-arr.is-next { right: 14px; }
@media (hover: none) { .pk-stage-arr { opacity: 1; } }

.pk-thumbs { position: relative; margin-top: 14px; height: 74px; }
.pk-thumbset {
  position: absolute; inset: 0; display: flex; gap: 10px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0.45s;
}
.pk-thumbset::-webkit-scrollbar { display: none; }
.pk-thumbset button { flex-shrink: 0; }
.pk-thumbset.is-on { opacity: 1; visibility: visible; }
.pk-thumbset button {
  appearance: none; padding: 0; border: 1px solid transparent; background: none; cursor: pointer;
  width: 108px; height: 68px; overflow: hidden; border-radius: 10px;
  transition: border-color 0.25s ease, opacity 0.25s ease;
  opacity: 0.55;
}
.pk-thumbset button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-thumbset button:hover { opacity: 0.85; }
.pk-thumbset button.is-on { opacity: 1; border-color: var(--red); }

.pk-units-note { margin-top: 26px; font-size: 15px; line-height: 1.65; color: rgba(36,29,19,0.66); }

/* ============================================================
   4. STANDARD IN EVERY BAY — ruled spec field, no boxes
   ============================================================ */
.pk-std { padding: 96px 0 0; }
.pk-std-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 40px; }
/* Plain aligned columns — icon, label, text. No rules, no boxes, no offsets. */
.pk-std-free {
  display: grid; grid-template-columns: repeat(4, 1fr);
  column-gap: 40px; row-gap: 46px; align-items: start;
}
.pk-std-item svg { display: block; width: 26px; height: 26px; stroke: var(--red); stroke-width: 1.2; fill: none; margin-bottom: 14px; }
.pk-std-item b { display: block; font-size: 15.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.pk-std-item span { font-size: 13.5px; line-height: 1.55; color: rgba(36,29,19,0.62); }
.pk-std-item a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(184,50,50,0.35); }

/* ---------- big card shell (used by "Why this site" and "Who leases here") ---------- */
.pk-bigcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 30px;
  padding: 62px 56px 66px; box-shadow: 0 26px 70px rgba(74,56,30,0.07);
}
.pk-bigcard-head { margin-bottom: 8px; }

/* ============================================================
   5. WHY THIS SITE — alternating, asymmetric
   ============================================================ */
.pk-why { padding: 96px 0 0; }

.pk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 52px; }
.pk-split.is-flipped .pk-split-media { order: 2; }
.pk-split-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pk-split-cap {
  margin-top: 10px; font-family: 'Archivo', sans-serif; font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: rgba(36,29,19,0.45);
}
.pk-split h3 {
  font-family: 'Lora', serif; font-weight: 600; font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.12; letter-spacing: -0.02em; color: var(--text); margin: 0 0 16px;
}
.pk-split .pk-body { font-size: 16px; }
.pk-split .pk-body p { margin: 0 0 14px; }

.pk-note {
  margin-top: 64px; padding: 26px 0 0; border-top: 2px solid var(--ink);
  display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: start;
}
.pk-note-k { font-family: 'Archivo', sans-serif; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); padding-top: 4px; }
.pk-note p { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(36,29,19,0.8); max-width: 62ch; }
.pk-note strong { color: var(--text); }

/* ============================================================
   6. WHO LEASES HERE — full-bleed, screen-scale, inverted
   ============================================================ */
.pk-who-outer { margin-top: 104px; }
.pk-who {
  background: var(--ink-deep); color: var(--cream-on-ink);
  border-radius: 30px; padding: 76px 56px 80px; position: relative; overflow: hidden;
  box-shadow: 0 30px 80px rgba(28,23,16,0.18);
}
.pk-who::before {
  content: ''; position: absolute; inset: 0;
  background-image: url('assets/rockwall-a-front.webp');
  background-size: cover; background-position: 50% 40%;
  opacity: 0.13; filter: grayscale(1) contrast(1.1);
}
.pk-who > * { position: relative; z-index: 1; }
.pk-who .pk-who h2 { font-family: 'Lora', serif; font-weight: 600; font-size: clamp(30px, 3.8vw, 50px); line-height: 1.06; letter-spacing: -0.025em; margin: 0; max-width: 18ch; }
.pk-who-lede { margin: 20px 0 0; max-width: 54ch; font-size: 16.5px; line-height: 1.65; color: rgba(243,234,218,0.66); }
.pk-who-list { margin: 58px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(243,234,218,0.16); }
.pk-who-list li {
  display: grid; grid-template-columns: 58px 1fr 1.35fr; gap: 28px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid rgba(243,234,218,0.16);
  transition: background 0.3s ease;
}
.pk-who-list li:hover { background: rgba(243,234,218,0.04); }
.pk-who-n { font-family: 'Archivo', sans-serif; font-size: 11px; letter-spacing: 0.12em; color: rgba(243,234,218,0.34); }
.pk-who-t { font-family: 'Lora', serif; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.15; letter-spacing: -0.015em; color: var(--cream-on-ink); }
.pk-who-d { font-size: 15px; line-height: 1.6; color: rgba(243,234,218,0.6); }
.pk-who-foot { margin: 34px 0 0; font-size: 15.5px; color: rgba(243,234,218,0.6); }
.pk-who-foot a { color: #E8A0A0; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   7. RATES — the one intentional panel
   ============================================================ */
.pk-rates { padding: 100px 0 0; }
.pk-rates-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.pk-rates .pk-body { font-size: 16px; }
.pk-rates .pk-body p { margin: 0 0 14px; }

.pk-panel-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(74,56,30,0.08);
}
.pk-panel-card-head {
  padding: 18px 24px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.pk-panel-card-head b { font-family: 'Archivo', sans-serif; font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(36,29,19,0.5); font-weight: 400; }
.pk-panel-card-head em {
  font-style: normal; font-family: 'Archivo', sans-serif; font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--green, #3E8E63);
}
.pk-sched { width: 100%; border-collapse: collapse; }
.pk-sched th {
  text-align: left; padding: 12px 24px; border-bottom: 1px solid var(--line);
  font-family: 'Archivo', sans-serif; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 400; color: rgba(36,29,19,0.45);
}
.pk-sched td { padding: 16px 24px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: rgba(36,29,19,0.72); }
.pk-sched tr:last-child td { border-bottom: none; }
.pk-sched td:first-child { font-family: 'Lora', serif; font-size: 19px; color: var(--text); }
.pk-sched td.is-spec { font-family: 'Archivo', sans-serif; font-size: 12px; letter-spacing: 0.06em; }
.pk-panel-card-foot { padding: 16px 24px; border-top: 1px solid var(--line); background: rgba(36,29,19,0.02); font-size: 13.5px; line-height: 1.55; color: rgba(36,29,19,0.6); }

/* ============================================================
   8. FAQ — native disclosure, ruled
   ============================================================ */
.pk-faq { padding: 100px 0 0; }
.pk-faq-head { margin-bottom: 34px; }
.pk-faq-list { border-top: 1px solid var(--ink); }
.pk-faq-list details { border-bottom: 1px solid var(--line); }
.pk-faq-list summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: 'Lora', serif; font-weight: 600; font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.3; color: var(--text); transition: color 0.2s ease;
}
.pk-faq-list summary::-webkit-details-marker { display: none; }
.pk-faq-list summary:hover { color: var(--red); }
.pk-faq-list summary::after,
.pk-faq-list summary::before {
  content: ''; position: absolute; right: 4px; top: 50%; background: var(--ink);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.2s ease;
}
.pk-faq-list summary::before { width: 16px; height: 1px; transform: translateY(-50%); }
.pk-faq-list summary::after { width: 1px; height: 16px; right: 11px; transform: translateY(-50%); }
.pk-faq-list details[open] summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.pk-faq-list details[open] summary { color: var(--red); }
.pk-faq-list details[open] summary::before, .pk-faq-list details[open] summary::after { background: var(--red); }
.pk-faq-a { padding: 0 12% 26px 0; font-size: 16px; line-height: 1.7; color: rgba(36,29,19,0.72); margin: 0; }
.pk-faq-a a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   9. BEFORE YOU SIGN — slim ruled index, no cards
   ============================================================ */
.pk-guides { padding: 96px 0 0; }
.pk-guides-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.pk-guides-list { border-top: 1px solid var(--ink); }
.pk-guides-list a {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 20px; align-items: baseline;
  padding: 17px 0; border-bottom: 1px solid var(--line);
  transition: padding-left 0.3s cubic-bezier(0.4,0,0.2,1);
}
.pk-guides-list a:hover { padding-left: 10px; }
.pk-guides-list em {
  font-style: normal; font-family: 'Archivo', sans-serif; font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(36,29,19,0.42);
}
.pk-guides-list b { font-family: 'Lora', serif; font-weight: 500; font-size: 17px; line-height: 1.3; color: var(--text); }
.pk-guides-list i { font-style: normal; color: var(--red); font-size: 15px; opacity: 0; transition: opacity 0.25s ease; }
.pk-guides-list a:hover i { opacity: 1; }
.pk-guides-list a:hover b { color: var(--red); }


/* ============================================================
   11. CLOSING CTA — the site sketch bleeding off the bottom
   ============================================================ */
.pk-outro {
  /* --sketch-strength: how hard the pencil lines read against the cream.
     Raise toward 3 for a bolder drawing, drop toward 1.4 for a whisper. */
  --sketch-strength: 2.2;
  position: relative; overflow: hidden;
  min-height: 94vh; padding: 88px 6vw 0; text-align: center;
}
.pk-outro-art {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(1440px, 112%); height: 80%; pointer-events: none;
  /* emerge out of the cream rather than starting as a hard edge */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 100%);
}
.pk-outro-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  /* drop the white paper, keep the pencil lines, lift them enough to read on cream */
  mix-blend-mode: multiply; filter: contrast(var(--sketch-strength)) saturate(0.85);
}
.pk-outro-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.pk-outro h2 {
  font-family: 'Lora', serif; font-weight: 600;
  font-size: clamp(34px, 5vw, 62px); line-height: 1.04; letter-spacing: -0.03em;
  color: var(--text); margin: 0;
}
.pk-outro p { margin: 22px auto 0; max-width: 48ch; font-size: 16.5px; line-height: 1.65; color: rgba(36,29,19,0.7); }
.pk-outro-row { margin-top: 32px; display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }
.pk-outro-alt { font-size: 14.5px; font-weight: 500; color: rgba(36,29,19,0.62); transition: color 0.2s ease; }
.pk-outro-alt:hover { color: var(--red); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1040px) {
  .pk-facts { grid-template-columns: repeat(3, 1fr); }
  .pk-fact:nth-child(4) { border-left: none; }
  .pk-fact:nth-child(n+4) { border-top: 1px solid var(--line); }
  .pk-std-free { grid-template-columns: repeat(2, 1fr); column-gap: 48px; row-gap: 34px; }
  .pk-bigcard, .pk-who { padding-left: 40px; padding-right: 40px; }
}

@media (max-width: 900px) {
  .pk-hero { min-height: 88vh; }

  .pk-units-head, .pk-std-head, .pk-rates-grid, .pk-guides-grid { grid-template-columns: 1fr; gap: 24px; }
  .pk-std-free { row-gap: 32px; }
  .pk-bigcard { padding: 44px 30px 48px; border-radius: 24px; }
  .pk-who { padding: 52px 30px 56px; border-radius: 24px; }
  .pk-outro { min-height: 72vh; }
  .pk-outro-art { width: 168%; height: 66%; }
  .pk-split, .pk-split.is-flipped { grid-template-columns: 1fr; gap: 24px; }
  .pk-split.is-flipped .pk-split-media { order: 0; }

  .pk-units-scroll { height: 340vh; }
  .pk-units-sticky { min-height: 0; }
  .pk-units-inner { grid-template-columns: 1fr; gap: 26px; padding: 0 6vw; }
  .pk-units-right { order: -1; }
  .pk-stage { aspect-ratio: 16 / 11; }
  .pk-thumbs { height: 58px; }
  .pk-thumbset button { width: 84px; height: 54px; }
  .pk-panels { min-height: 300px; }

  .pk-who-list li { grid-template-columns: 34px 1fr; gap: 14px 16px; }
  .pk-who-d { grid-column: 2; }
  .pk-guides-list a { grid-template-columns: 1fr auto; }
  .pk-guides-list em { grid-column: 1 / -1; margin-bottom: 2px; }
  .pk-note { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 720px) {
  .pk-nav-links { display: none; }
}

@media (max-width: 640px) {
  .pk-facts { grid-template-columns: repeat(2, 1fr); }
  .pk-fact { padding: 20px 16px; }
  .pk-fact:nth-child(odd) { border-left: none; }
  .pk-fact:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pk-std-free { grid-template-columns: 1fr; }
  .pk-sched th { padding: 10px 14px; }
  .pk-sched td { padding: 12px 14px; font-size: 13px; }
  .pk-sched td:first-child { font-size: 16px; }
  .pk-panel-card-head, .pk-panel-card-foot { padding-left: 14px; padding-right: 14px; }
  /* the schedule is wider than a phone — let it scroll rather than clip */
  .pk-panel-card { overflow-x: auto; }
    .pk-outro { min-height: 64vh; padding-top: 60px; }
  .pk-outro-art { width: 210%; height: 58%; }
}

/* Landscape phones / short windows: the pinned panel has to fit one screen,
   so scale the stage and drop the spec list (repeated verbatim under
   "What comes with every unit"). */
@media (max-width: 900px) and (max-height: 700px) {
  /* short and wide (landscape phone): stacking is what breaks the fit —
     go back to two columns so the pinned panel stays on one screen */
  .pk-units-inner { grid-template-columns: 0.8fr 1.2fr; gap: 20px; }
  .pk-units-right { order: 0; }
  .pk-stage { aspect-ratio: 16 / 8.5; }
  .pk-thumbs { height: 46px; }
  .pk-thumbset button { width: 68px; height: 44px; }
  .pk-panels { min-height: 232px; }
  .pk-panel-size { font-size: 36px; }
  .pk-panel-desc { font-size: 13.5px; margin-top: 12px; }
  .pk-panel-specs { display: none; }
  .pk-track { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-panel, .pk-stage img, .pk-thumbset, .pk-track button::before,
  .pk-guides-list a, .pk-faq-list summary::before, .pk-faq-list summary::after { transition: none; }
  .pk-stage img { transform: none; }
}

/* ============================================================
   OUR SPACES — two interlocking boot shapes
   Rockwall: full-width bar on top + a leg dropping down the LEFT.
   McKinney: a leg rising on the RIGHT + the full-width bar below.
   Each piece is two grid cells. The grid gap draws the gutter between
   the pieces; a negative margin cancels that gap *within* a piece so
   its bar and leg fuse into one shape. Corner radii are squared only
   on the joining edges, so every outer corner stays round and the two
   inner corners read as the step of the boot.
   ============================================================ */
.pk-spaces {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  grid-template-areas:
    "rockbar rockbar"
    "rockleg mckleg"
    "mckbar  mckbar";
  gap: 16px;
}
.pk-sp-rock     { grid-area: rockbar; border-radius: 28px 28px 28px 0; }
.pk-sp-rock-leg { grid-area: rockleg; margin-top: -16px;    border-radius: 0 0 28px 28px; }
.pk-sp-mck-leg  { grid-area: mckleg;  margin-bottom: -16px; border-radius: 28px 28px 0 0; }
.pk-sp-mck      { grid-area: mckbar;  border-radius: 28px 0 28px 28px; }

.pk-sp-rock, .pk-sp-rock-leg { background: var(--panel); }
.pk-sp-mck,  .pk-sp-mck-leg  { background: var(--ink-deep); color: var(--cream-on-ink); }

.pk-sp-bar { display: block; padding: 42px 46px 44px; transition: background 0.3s ease; }
.pk-sp-rock:hover { background: #FFFEFB; }
.pk-sp-mck:hover  { background: #241E15; }

.pk-sp-eyebrow {
  font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(36,29,19,0.45);
}
.pk-sp-mck .pk-sp-eyebrow { color: rgba(243,234,218,0.5); }
.pk-sp-bar h3 {
  margin: 12px 0 0; font-family: 'Lora', serif; font-weight: 600;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.06; letter-spacing: -0.025em; color: var(--text);
}
.pk-sp-mck h3 { color: var(--cream-on-ink); }
.pk-sp-meta { margin-top: 10px; font-size: 14px; color: rgba(36,29,19,0.55); }
.pk-sp-mck .pk-sp-meta { color: rgba(243,234,218,0.55); }
.pk-sp-bar p { margin: 16px 0 0; max-width: 56ch; font-size: 15.5px; line-height: 1.65; color: rgba(36,29,19,0.74); }
.pk-sp-mck p { color: rgba(243,234,218,0.66); }
.pk-sp-go { display: inline-block; margin-top: 20px; font-size: 14.5px; font-weight: 600; color: var(--red); }
.pk-sp-mck .pk-sp-go { color: #E8A0A0; }
.pk-sp-bar:hover .pk-sp-go { text-decoration: underline; text-underline-offset: 4px; }

.pk-sp-leg { overflow: hidden; min-height: 260px; }
.pk-sp-leg img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
/* Each leg photo dissolves into its own piece's fill on the edge that meets
   the bar — Rockwall upward into the cream, McKinney downward into the ink —
   so the boot reads as one shape with a photo emerging from it, not a
   rectangle pasted into a corner. */
.pk-sp-rock-leg img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 13%, rgba(0,0,0,0.9) 30%, #000 44%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 13%, rgba(0,0,0,0.9) 30%, #000 44%, #000 100%);
}
.pk-sp-mck-leg img {
  -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.45) 13%, rgba(0,0,0,0.9) 30%, #000 44%, #000 100%);
  mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.45) 13%, rgba(0,0,0,0.9) 30%, #000 44%, #000 100%);
}

@media (max-width: 900px) {
  .pk-spaces {
    grid-template-columns: 1fr;
    grid-template-areas: "rockbar" "rockleg" "mckleg" "mckbar";
    gap: 14px;
  }
  /* stacked: each cell is its own rounded block, so drop the fusing */
  .pk-sp-rock     { border-radius: 22px 22px 0 0; }
  .pk-sp-rock-leg { margin-top: -14px; border-radius: 0 0 22px 22px; }
  .pk-sp-mck-leg  { margin-bottom: -14px; border-radius: 22px 22px 0 0; }
  .pk-sp-mck      { border-radius: 0 0 22px 22px; }
  .pk-sp-bar { padding: 30px 26px 32px; }
  .pk-sp-leg, .pk-sp-leg img { min-height: 200px; }
}

/* Closing CTA art, photo variant (park pages): a render fading up out of
   the cream instead of the pencil site plan. */
.pk-outro-art.is-photo { width: 100%; height: 84%;
  --outro-fade: linear-gradient(to bottom,
      transparent 0%, rgba(0,0,0,0.30) 15%, rgba(0,0,0,0.82) 34%, #000 50%,
      #000 78%, rgba(0,0,0,0.55) 90%, rgba(0,0,0,0.16) 97%, transparent 100%);
  -webkit-mask-image: var(--outro-fade);
  mask-image: var(--outro-fade);
}
.pk-outro-art.is-photo img { mix-blend-mode: normal; filter: none; object-position: 50% 46%; }
@media (max-width: 900px) { .pk-outro-art.is-photo { width: 100%; height: 72%; } }