/* Generated by scripts/render-native-demos.mjs from the files named below. Edit those, not this. */
/* public/native-demos/demo-authored.css */
/* Compatibility and accessibility only: each authored asset sheet owns its visual design. */
body[data-authored-demo] main {
  isolation: isolate;
}
body[data-authored-demo] main > header {
  top: var(--authored-disclosure-offset, 0px);
}
/* Sticky sub-page headers sit below the (non-sticky) disclosure in flow; offsetting them pushes them over the hero. */
body[data-authored-demo] main > header:is(.subNav, .eoSubNav, .auSubNav) {
  top: 0;
}
/* Fixed homepage headers overlay the first section, so it must clear them. */
/* A shared button rule set position:relative, pushing Ember's hero reservation CTA off-screen (top-left). */
body[data-authored-demo] [hidden] {
  display: none !important;
}
body[data-authored-demo] :focus-visible {
  outline: 3px solid #efaa69;
  outline-offset: 5px;
}
demo-disclosure {
  display: block;
  position: relative;
  z-index: 100;
  background: #111411;
  color: #f5f3ed;
  font:
    12px/1.5 Arial,
    sans-serif;
}
.demo-disclosure-inner {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  padding: 10px 4%;
}
.demo-disclosure-inner details {
  max-width: 65ch;
}
.demo-disclosure-inner summary {
  cursor: pointer;
  min-height: 24px;
}
.demo-disclosure-inner p {
  margin: 8px 0;
}
.demo-disclosure-inner nav {
  display: flex;
  gap: 18px;
  flex-shrink: 0;
}
.demo-disclosure-inner a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.restored-form {
  display: block !important;
}
.restored-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.restored-form legend {
  margin-bottom: 24px;
  font-size: 14px;
}
.restored-form .di-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 20px 0;
}
.restored-form label {
  display: grid;
  gap: 10px;
}
.restored-form input,
.restored-form select,
.restored-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}
.restored-form button {
  margin: 20px 16px 0 0;
  min-height: 44px;
  cursor: pointer;
}
.restored-form .di-form-notice,
.demo-form-warning {
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 24px;
}
.rd-form-status {
  padding: 20px 0;
  font-weight: 600;
}
.authored-menu {
  display: none;
}
@media (max-width: 800px) {
  body[data-authored-demo] main > header {
    padding: 18px 24px;
    flex-wrap: wrap;
  }
  body[data-authored-demo] .authored-menu {
    display: block;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    padding: 10px 14px;
    min-height: 44px;
    margin-left: auto;
    font: inherit;
    cursor: pointer;
  }
  body[data-authored-demo] main > header nav {
    display: none;
  }
  body[data-authored-demo] main > header nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    padding: 16px 0 0;
    background: #111411;
    color: #fff;
  }
  body[data-authored-demo] main > header nav.is-open a {
    color: inherit;
    padding: 14px 20px;
    min-height: 44px;
  }
  body[data-authored-demo] .iwHero h1 {
    font-size: clamp(36px, 11.6vw, 76px) !important;
  }
  .demo-disclosure-inner {
    flex-wrap: wrap;
    gap: 4px;
    padding: 9px 5%;
  }
  .demo-disclosure-inner nav a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }
  .restored-form .di-fields {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-authored-demo] *,
  body[data-authored-demo] *::before,
  body[data-authored-demo] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Keep the original purple closing panel while making its small caption legible. */
/* Display headings sized to their columns so words never break mid-word. */
@media (max-width: 800px) {
  /* Centered flex content that overflows can't be scrolled back to its start; anchor the stage strip left. */
}

/* Hero art direction: five concepts shared one left-aligned dark overlay hero. Three now use
   structurally different compositions on desktop (mobile keeps the stacked layout). */
@media (min-width: 900px) {
  /* Northline — light split ledger: ivory text column beside an uncropped image panel. */

  /* Calder — centered monument: type-led composition with the colonnade as a band below. */

  /* Apex — cinema frame: unobstructed car, copy set in a bottom title bar. */
}

/* Touch targets (WCAG 2.5.8): logo links and stand-alone CTAs inside signature widgets. */
body[data-authored-demo] main > header > a:first-child,
body[data-authored-demo] :is(.journey-cta, .phase-cta, .nocturne-clock-detail) > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* One disclosure bar style across every concept (some demo sheets restyle every nav a). */
demo-disclosure .demo-disclosure-inner summary {
  color: #f0a35e;
  font-weight: 700;
}
demo-disclosure .demo-disclosure-inner nav a {
  font:
    400 12px/1.5 Arial,
    sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* public/native-demos/demo-systems.css */
/* Forge Web Studio - Premium Demo Design Systems
   Per-demo design tokens and visual systems for $20,000 custom website standard

   Structure:
   - Design token variables per demo
   - Typography systems per demo
   - Layout and spacing per demo
   - Motion and interaction styles
   - Responsive adaptations
*/

/* ============================================================================
   NORTHLINE PRIVATE WEALTH - Connected Decisions
   ========================================================================== */

/* Northline: Typography System */

/* Northline: Layout & Spacing */

/* Northline: Line of Sight Interaction */

/* Northline: Connection Lines */

/* Northline: Mobile Adaptation */

/* ============================================================================
   IRONWOOD CONTRACTING - Construction Documentation
   ========================================================================== */

/* Ironwood: Typography System */

/* Ironwood: Construction Sheet Hero */

/* Ironwood: Build Ledger Interaction */

/* Ironwood: Stage Content */

/* Ironwood: Mobile Adaptation */

/* ============================================================================
   INTERACTION UTILITIES (All Demos)
   ========================================================================== */

/* Smooth transitions for all interactive elements */
[data-interactive] {
  transition: all 0.3s ease-out;
}

[data-interactive]:hover {
  transform: translateY(-2px);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== BATCH 2: AURELIA MED SPA ===== */

/* Aurelia: Design Tokens */

/* Aurelia: Treatment Map Interaction */

/* ===== BATCH 2: CALDER & VALE ===== */

/* Calder & Vale: Design Tokens */

/* Calder & Vale: Case Architecture Interaction */

/* ===== BATCH 3: APEX ATELIER ===== */

/* Apex: Design Tokens */

/* Apex: Commission Timeline */

/* ===== BATCH 3: EMBER & OAK ===== */

/* Ember: Design Tokens */

/* Ember: Menu Experience */

/* ===== BATCH 4: VESPER & ROWE ===== */

/* ===== BATCH 4: HOTEL NOCTURNE ===== */

/* ===== BATCH 5: FIELDWORK ===== */

/* ===== BATCH 5: FIELD & FOUND ===== */

/* ===== BATCH 6: MARA VALE ===== */

/* ===== BATCH 6: FORGE WORK GALLERY ===== */

/* ============================================================================
   ENHANCED BATCH 3: VESPER & ROWE - PRIVATE DOSSIER
   ========================================================================== */

/* ============================================================================
   ENHANCED BATCH 3: HOTEL NOCTURNE - NOCTURNE CLOCK
   ========================================================================== */

/* ============================================================================
   ENHANCED BATCH 4: FIELDWORK ARCHITECTURE - SITE SECTION
   ========================================================================== */

/* ============================================================================
   UNIVERSAL ENHANCEMENTS v2
   Loading states, error handling, dark mode, print styles, animations
   ========================================================================== */

/* Loading States - Applied to detail panels */
[role="region"][aria-busy="true"],
.loading {
  position: relative;
  opacity: 0.6;
}

[role="region"][aria-busy="true"]::after,
.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  [role="region"][aria-busy="true"]::after,
  .loading::after {
    animation: none;
    background: rgba(255, 255, 255, 0.1);
  }
}

/* Error States */
.error,
[role="alert"] {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  padding: 1rem;
  border-radius: 0.25rem;
  color: #991b1b;
}

.error-message {
  font-weight: 600;
  margin: 0;
}

/* Empty States */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: #999;
  font-style: italic;
}

/* Focus States Enhanced */
[role="button"]:focus-visible,
[role="region"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Skip to Content Link */
.skipLink {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: white;
  padding: 8px;
  z-index: 100;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}

.skipLink:focus {
  top: 0;
}

/* Animation on Load */
/* Movement only (2026-10-14): table regions used to fade in from 0, so their text failed contrast mid-animation. */
@keyframes fadeInUp {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0);
  }
}

[role="region"] {
  animation: fadeInUp 0.4s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  [role="region"] {
    animation: none;
  }
}

/* Factor Tags Styling */
.factors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.factor {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  [role="region"],
  .empty-state {
    background-color: #1a1a1a;
    color: #e0e0e0;
  }

  .error {
    background-color: #471e1e;
    border-color: #7f1d1d;
    color: #fca5a5;
  }

  .factor {
    background-color: rgba(255, 255, 255, 0.1);
  }

  [role="button"]:focus-visible,
  [tabindex="0"]:focus-visible {
    outline-color: #fff;
  }
}

/* Print Stylesheet */
@media print {
  .skipLink,
  [aria-hidden="true"],
  button,
  [role="button"] {
    display: none;
  }

  [role="region"] {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #ccc;
    margin-bottom: 1rem;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: white;
  }

  h1,
  h2,
  h3 {
    page-break-after: avoid;
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}

/* Gesture and Touch Support */
@media (hover: none) and (pointer: coarse) {
  [role="button"],
  [tabindex="0"] {
    padding: 0.75rem;
    min-height: 44px;
    min-width: 44px;
  }

  [role="button"]:active,
  [tabindex="0"]:active {
    transform: scale(0.98);
  }
}

/* Landscape Orientation Optimization */
@media (orientation: landscape) and (max-height: 500px) {
  body {
    font-size: 0.9rem;
  }

  [role="region"] {
    padding: 1rem;
  }

  [role="button"],
  [tabindex="0"] {
    min-height: 36px;
  }
}

/* Disabled State Styling */
[disabled],
[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Comparison Mode Styling */
.comparison-mode [role="button"] {
  position: relative;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.comparison-mode [role="button"]:nth-child(even) {
  border-right: none;
}

/* Hover Card Preview */
@media (hover: hover) {
  [role="button"][data-preview] {
    position: relative;
  }

  [role="button"][data-preview]::before {
    content: attr(data-preview);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
  }

  [role="button"][data-preview]:hover::before {
    opacity: 1;
  }
}

/* Undo/History UI */
.history-controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  align-items: center;
}

.history-controls button {
  padding: 0.5rem 1rem;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
}

.history-controls button:hover {
  background: #e0e0e0;
}

.history-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Search/Filter Input */
.search-filter {
  margin-bottom: 1.5rem;
}

.search-filter input {
  width: 100%;
  max-width: 400px;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.search-filter input:focus {
  outline: 2px solid currentColor;
  outline-offset: 0;
}

/* Breadcrumb Navigation */
.breadcrumb {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: #666;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  font-weight: 600;
  color: #000;
}

/* Comparison View */
.comparison-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .comparison-container {
    grid-template-columns: 1fr;
  }
}

.comparison-card {
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.comparison-card h3 {
  margin-top: 0;
}

/* ===== ACCESSIBILITY: FOCUS & TOUCH ===== */
/* Release fixes: visual state belongs to the signature, never the page shell. */
.ledger-drawing {
  margin: 0;
  color: #20382d;
  background: #e9e5d9;
  padding: 18px;
}
.ledger-drawing svg {
  width: 100%;
  height: auto;
}
.ledger-drawing figcaption,
.signature-note {
  font-size: 13px;
  line-height: 1.6;
}
.ledger-checkpoints {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ledger-checkpoints [data-complete="true"] {
  font-weight: 700;
}
.signature-kicker {
  font:
    12px "Demo Mono",
    monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.decision-path {
  display: grid;
  gap: 16px;
  margin: 24px 0;
}
.decision-path > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: center;
}
.decision-path meter {
  width: 100%;
  height: 20px;
}
.fireline-hearth {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  background: #21140e;
  color: #fff0dc;
  padding: 24px;
  font:
    24px "Demo Serif",
    Georgia,
    serif;
}
.fireline-flame {
  position: absolute;
  width: 55%;
  height: 160px;
  left: 25%;
  bottom: 0;
  border-radius: 55% 45% 0 0;
  background: radial-gradient(ellipse at bottom, #fff1bb 0, #df7131 35%, #752b13 60%, transparent 72%);
  transform: scaleY(var(--fire-intensity, 0.5));
  transform-origin: bottom;
  transition: transform 0.5s;
}
body[data-demo]
  :is(
    .concern-card,
    .phase-node,
    .spec-option,
    .brief-option,
    .clock-time,
    .layer-toggle,
    .ledger-stage,
    .fireline-stage,
    .los-node
  ) {
  min-height: 44px;
}
body[data-demo]
  :is(
    .concern-card,
    .phase-node,
    .spec-option,
    .brief-option,
    .clock-time,
    .layer-toggle,
    .ledger-stage,
    .fireline-stage,
    .los-node
  ):focus-visible {
  outline: 3px solid #a96120;
  outline-offset: 4px;
}
/* Signature panels keep explicit, readable foreground/background pairs. */
body[data-demo]
  :is(.treatment-journey-detail, .phase-architecture-detail, .nocturne-clock-detail, .los-details, .stage-details)
  :is(h2, h3, h4, p, li) {
  color: inherit;
}
/* Complete the authored signature layouts without changing surrounding sections. */
body[data-demo]
  :is(
    .treatment-map-section,
    .commission-specification-section,
    .case-architecture-section,
    .private-dossier-section,
    .fireline-section,
    .site-section
  ) {
  padding: clamp(24px, 5vw, 72px) 6%;
}
.concern-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.concern-card {
  cursor: pointer;
}
.concern-icon {
  font-size: 28px;
  margin-bottom: 16px;
}
.concern-label {
  font-weight: 700;
}
.journey-section {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.journey-section h3 {
  grid-column: 1/-1;
  font:
    32px "Demo Serif",
    Georgia,
    serif;
}
.journey-section ul {
  padding-left: 20px;
}
.journey-section p,
.journey-section li {
  font-size: 15px;
  line-height: 1.6;
}
.commission-specification-section > h2 {
  font: 500 clamp(28px, 4vw, 48px) sans-serif;
  margin: 0 0 32px;
}
.specification-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.spec-category h3 {
  font:
    12px "Demo Mono",
    monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 14px;
}
.spec-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.specification-journal {
  border-top: 1px solid #69726b;
  margin-top: 32px;
  padding-top: 28px;
  display: grid;
  gap: 16px;
}
.specification-journal h3 {
  font-size: 24px;
}
.phase-content {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.phase-header {
  grid-column: 1/-1;
  font:
    32px "Demo Serif",
    Georgia,
    serif;
}
.phase-content p {
  line-height: 1.6;
}
.fireline-experience > :is(h3, p) {
  margin: 18px 0;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .concern-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .journey-section,
  .phase-content,
  .specification-selector {
    grid-template-columns: 1fr;
  }
  .journey-section h3,
  .phase-header {
    grid-column: auto;
  }
}
/* Inner-page explanatory content uses the surrounding concept's palette. */
body[data-authored-demo] .demo-context-system {
  padding: clamp(32px, 5vw, 72px) 6%;
  border-top: 1px solid currentColor;
  max-width: 1440px;
  margin: 0 auto;
}
body[data-authored-demo] .demo-context-system > span {
  display: block;
  font:
    12px "Demo Mono",
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
body[data-authored-demo] .demo-context-system h2 {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.15;
  max-width: 24ch;
  margin: 0 0 24px;
}
body[data-authored-demo] .demo-context-system p {
  font-size: 16px;
  line-height: 1.7;
  max-width: 78ch;
  margin: 0 0 18px;
}
body[data-authored-demo] .demo-context-system ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 767px) {
  body[data-authored-demo] .demo-context-system ul {
    display: grid;
  }
}
/* Content is local and immediate: never fade readable controls through low contrast. */
body[data-demo]
  :is(
    .los-node,
    .ledger-stage,
    .concern-card,
    .phase-node,
    .spec-option,
    .brief-option,
    .clock-time,
    .layer-toggle,
    .fireline-stage
  ) {
  transition-property: transform, box-shadow;
  animation: none;
}
body[data-demo]
  :is(
    .los-details,
    .ledger-stage-content,
    .treatment-journey-detail,
    .phase-architecture-detail,
    .specification-journal,
    .fireline-experience
  ) {
  animation: none;
  opacity: 1;
}

/* public/native-demos/demo-improvements.css */
/* Forge Web Studio Demo Visual Improvements
   This file contains targeted CSS enhancements for each demo
   to improve visual impact, hierarchy, and responsive presentation
   while preserving each demo's unique identity.

   Applied via render-authored-document.mjs
*/

/* ============================================================================
   COMPREHENSIVE INNER PAGE ENHANCEMENTS
   Elevate all inner pages to homepage-quality standards
   ========================================================================== */

/* ---- AURELIA AESTHETICS & WELLNESS: Clinical Clarity & Trust Building ---- */

/* Enhance consultation CTA prominence in hero */
body[data-demo="aurelia-med-spa"] .auHeroCopy > a,
.demo-clinical .di-action {
  min-height: 52px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

/* Improve treatment section article layout and readability */
body[data-demo="aurelia-med-spa"] .auHomeTreat article,
.demo-clinical .di-concern-reference {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 4%;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

body[data-demo="aurelia-med-spa"] .auHomeTreat article > span,
.demo-clinical .di-eyebrow {
  font-size: 12px;
  letter-spacing: 1.2px;
  margin-bottom: 16px;
  font-weight: 600;
  color: var(--accent);
}

body[data-demo="aurelia-med-spa"] .auHomeTreat h2,
.demo-clinical .di-concern-reference h2,
.demo-clinical .di-concern-reference h3 {
  font-size: 2.2rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  font-weight: 500;
  color: var(--text);
}

body[data-demo="aurelia-med-spa"] .auHomeTreat article > a,
.demo-clinical .di-concern-reference a {
  align-self: flex-start;
  margin-top: 1.5rem;
  min-height: 48px;
  font-weight: 600;
  padding: 12px 20px;
}

/* Enhance questions table styling for consultation guide */
.demo-clinical .di-questions-table {
  margin-top: 60px;
}

.demo-clinical .di-questions-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
}

.demo-clinical .di-questions-table th,
.demo-clinical .di-questions-table td {
  padding: 24px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.demo-clinical .di-questions-table thead {
  background: var(--surface-alt);
}

.demo-clinical .di-questions-table tbody th {
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.02);
}

/* Improve consultation section */
body[data-demo="aurelia-med-spa"] .auHomeClose,
.demo-clinical .di-care-conversion,
.demo-clinical .di-care-pause {
  padding: 4rem 4%;
  background: var(--surface);
}

body[data-demo="aurelia-med-spa"] .auHomeClose h2,
.demo-clinical .di-care-pause h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  line-height: 1.25;
  font-weight: 500;
}

body[data-demo="aurelia-med-spa"] .auHomeClose > a,
.demo-clinical .di-care-conversion a {
  display: inline-block;
  min-height: 52px;
  font-weight: 600;
  margin-top: 1rem;
  padding: 14px 24px;
}

/* Enhance details/accordion styling */
.demo-clinical details {
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  padding: 0;
  background: var(--surface);
}

.demo-clinical details[open] {
  background: var(--surface-alt);
  border-color: var(--accent);
}

.demo-clinical details summary {
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 500;
  color: var(--accent);
  user-select: none;
}

.demo-clinical details[open] summary {
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.demo-clinical details p {
  padding: 20px 24px;
  margin: 0;
}

/* Medical disclaimer styling */
.demo-clinical .di-boundary {
  background: rgba(var(--accent-rgb), 0.04);
  border-left: 4px solid var(--accent);
  padding: 18px 20px;
  margin: 24px 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Aurelia mobile improvements */
@media (max-width: 768px) {

  .demo-clinical .di-questions-table table {
    font-size: 14px;
  }

  .demo-clinical .di-questions-table th,
  .demo-clinical .di-questions-table td {
    padding: 16px 12px;
  }

  .demo-clinical details summary {
    font-size: 18px;
  }
}

/* ---- VESPER & ROWE: Private Dossier Sophistication ---- */

/* Enhance property portfolio pages */
.demo-property .di-action,
.demo-property .di-estate-cover h2,
.demo-property .di-estate-pair h2 {
  font-family: "Demo Serif", Georgia, serif;
}

.demo-property .di-estate-cover,
.demo-property .di-estate-pair,
.demo-property .di-river-folio {
  margin-bottom: 80px;
}

.demo-property .di-estate-cover {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 5vw;
  align-items: flex-start;
  margin-bottom: 100px;
}

.demo-property .di-estate-cover figure {
  grid-row: 1 / 3;
  aspect-ratio: 3/4;
  overflow: hidden;
}

.demo-property .di-estate-cover header {
  padding: 0;
}

.demo-property .di-estate-cover h2 {
  font-size: 2.4rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.demo-property .di-estate-cover dl {
  margin-top: 2rem;
}

.demo-property .di-estate-cover dt {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 18px;
}

.demo-property .di-estate-cover dd {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 6px;
}

.demo-property .di-estate-pair {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 5vw;
  align-items: flex-start;
}

.demo-property .di-estate-pair > div {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.demo-property .di-estate-pair h2 {
  font-size: 2.2rem;
  margin: 0 0 1rem 0;
  font-weight: 400;
}

.demo-property .di-estate-pair figure {
  aspect-ratio: 3/4;
  margin-bottom: 0;
}

.demo-property .di-river-folio {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 5vw;
  align-items: center;
}

.demo-property .di-river-folio figure {
  aspect-ratio: 3/4;
  grid-column: 1;
  grid-row: 1;
}

.demo-property .di-river-folio > div {
  padding: 3rem;
  background: var(--surface-alt);
}

.demo-property .di-river-folio h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.demo-property .di-river-folio dl {
  margin: 1.5rem 0;
}

/* Enhanced property details */
.demo-property details {
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  padding: 0;
}

.demo-property details summary {
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 500;
  background: var(--surface-alt);
  user-select: none;
}

.demo-property details[open] summary {
  border-bottom: 1px solid var(--border);
}

.demo-property details p {
  padding: 18px 20px 0;
}

/* Advisory letter styling */
.demo-property .di-advisory-essay {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 4vw;
  margin-bottom: 60px;
  align-items: start;
}

.demo-property .di-advisory-essay aside {
  position: sticky;
  top: 100px;
}

.demo-property .di-advisory-essay h2 {
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.demo-property .di-consent-spread {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5vw;
  align-items: center;
  margin-bottom: 80px;
}

.demo-property .di-consent-spread > div h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

/* Introduction desk form styling */
.demo-property .di-introduction-desk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5vw;
  align-items: start;
}

.demo-property .di-introduction-desk aside {
  padding: 2rem;
  background: var(--surface-alt);
  position: sticky;
  top: 100px;
}

/* Vesper mobile improvements */
@media (max-width: 768px) {
  .demo-property .di-estate-cover,
  .demo-property .di-estate-pair,
  .demo-property .di-river-folio,
  .demo-property .di-consent-spread,
  .demo-property .di-introduction-desk,
  .demo-property .di-advisory-essay {
    grid-template-columns: 1fr;
  }

  .demo-property .di-estate-cover {
    margin-bottom: 60px;
  }

  .demo-property .di-estate-cover figure {
    grid-row: auto;
    aspect-ratio: auto;
    height: 350px;
  }

  .demo-property .di-estate-pair > div,
  .demo-property .di-river-folio > div {
    padding: 2rem;
  }

  .demo-property .di-advisory-essay aside {
    position: static;
    margin-bottom: 2rem;
  }

  .demo-property .di-introduction-desk aside {
    position: static;
    margin-bottom: 2rem;
  }

  .demo-property .di-estate-cover h2,
  .demo-property .di-estate-pair h2,
  .demo-property .di-river-folio h2 {
    font-size: 1.8rem;
  }
}

/* ---- APEX ATELIER MOTORS: Commission Journal Precision ---- */

/* Commission roster styling */
.demo-mechanical .di-roster-car {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4vw;
  align-items: flex-start;
  margin-bottom: 80px;
}

.demo-mechanical .di-roster-car figure {
  aspect-ratio: 3/4;
}

.demo-mechanical .di-roster-car h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.demo-mechanical .di-roster-car dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem 2rem;
  margin: 1.5rem 0;
}

.demo-mechanical .di-roster-car dt {
  font-weight: 600;
  color: var(--accent);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.demo-mechanical .di-roster-car dd {
  font-size: 16px;
  line-height: 1.6;
}

/* Cockpit study enhanced */
.demo-mechanical .di-cockpit-study {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4vw;
  align-items: center;
  margin-bottom: 80px;
}

.demo-mechanical .di-cockpit-study figure {
  aspect-ratio: 4/5;
}

.demo-mechanical .di-cockpit-study h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

/* Commission process chapters */
.demo-mechanical .di-engineering-chapters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
  margin: 60px 0;
}

.demo-mechanical .di-engineering-chapters article {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.demo-mechanical .di-engineering-chapters span {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.demo-mechanical .di-engineering-chapters h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.demo-mechanical .di-engineering-chapters p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Mechanical note styling */
.demo-mechanical .di-mechanical-note {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4vw;
  align-items: center;
  margin-bottom: 80px;
}

.demo-mechanical .di-mechanical-note figure {
  aspect-ratio: 16/10;
}

.demo-mechanical .di-mechanical-note h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

/* Commission desk form */
.demo-mechanical .di-commission-desk {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4vw;
  align-items: start;
}

.demo-mechanical .di-commission-desk aside {
  padding: 2.5rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  position: sticky;
  top: 100px;
}

.demo-mechanical .di-commission-desk h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.demo-mechanical .di-commission-desk dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem 1.5rem;
  margin-top: 1.5rem;
}

.demo-mechanical .di-commission-desk dt {
  font-weight: 600;
  color: var(--accent);
}

.demo-mechanical .di-commission-desk dd {
  font-size: 14px;
  line-height: 1.6;
}

/* Apex mobile improvements */
@media (max-width: 768px) {
  .demo-mechanical .di-roster-car,
  .demo-mechanical .di-cockpit-study,
  .demo-mechanical .di-mechanical-note,
  .demo-mechanical .di-commission-desk {
    grid-template-columns: 1fr;
  }

  .demo-mechanical .di-engineering-chapters {
    grid-template-columns: 1fr;
  }

  .demo-mechanical .di-roster-car figure,
  .demo-mechanical .di-cockpit-study figure,
  .demo-mechanical .di-mechanical-note figure {
    aspect-ratio: auto;
    height: 300px;
  }

  .demo-mechanical .di-commission-desk aside {
    position: static;
    margin-bottom: 2rem;
  }

  .demo-mechanical .di-engineering-chapters article {
    padding: 1.5rem;
  }

  .demo-mechanical .di-roster-car h2,
  .demo-mechanical .di-cockpit-study h2,
  .demo-mechanical .di-mechanical-note h2,
  .demo-mechanical .di-commission-desk h2 {
    font-size: 1.8rem;
  }
}

/* ---- NORTHLINE PRIVATE WEALTH: Financial Intelligence Editorial ---- */

/* Planning matrix table enhancement */
.demo-editorial .di-matrix {
  margin: 60px 0;
}

.demo-editorial .di-matrix table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
}

.demo-editorial .di-matrix th,
.demo-editorial .di-matrix td {
  padding: 24px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.6;
}

.demo-editorial .di-matrix thead {
  background: var(--surface-alt);
}

.demo-editorial .di-matrix th {
  font-weight: 600;
  color: var(--accent);
}

.demo-editorial .di-matrix tbody th {
  background: rgba(var(--accent-rgb), 0.03);
  font-weight: 600;
}

/* Planning paper section */
.demo-editorial .di-planning-paper {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4vw;
  align-items: center;
  margin: 80px 0;
}

.demo-editorial .di-planning-paper figure {
  aspect-ratio: 4/5;
}

.demo-editorial .di-planning-paper h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Calendar layout */
.demo-editorial .di-calendar-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4vw;
  align-items: start;
  margin: 60px 0;
}

.demo-editorial .di-calendar-layout aside {
  position: sticky;
  top: 100px;
}

.demo-editorial .di-calendar-layout aside h2 {
  font-size: 2.2rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.demo-editorial .di-calendar-layout aside figure {
  aspect-ratio: 3/4;
  margin-top: 2rem;
}

/* Review chapters */
.demo-editorial .di-calendar-layout > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.demo-editorial .di-calendar-layout article {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.demo-editorial .di-calendar-layout span {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.demo-editorial .di-calendar-layout article h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.2;
}

.demo-editorial .di-calendar-layout article p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Introduction form styling */
.demo-editorial .di-planning-intro {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4vw;
  align-items: start;
  margin-bottom: 80px;
}

.demo-editorial .di-planning-intro > div {
  padding: 0;
}

.demo-editorial .di-planning-intro h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Financial boundaries */
.demo-editorial .di-boundary {
  background: rgba(var(--accent-rgb), 0.04);
  border-left: 4px solid var(--accent);
  padding: 18px 20px;
  margin: 24px 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Northline mobile improvements */
@media (max-width: 768px) {
  .demo-editorial .di-matrix th,
  .demo-editorial .di-matrix td {
    padding: 16px 12px;
    font-size: 14px;
  }

  .demo-editorial .di-planning-paper,
  .demo-editorial .di-calendar-layout,
  .demo-editorial .di-planning-intro {
    grid-template-columns: 1fr;
  }

  .demo-editorial .di-calendar-layout aside {
    position: static;
    margin-bottom: 2rem;
  }

  .demo-editorial .di-planning-paper figure,
  .demo-editorial .di-calendar-layout aside figure {
    aspect-ratio: auto;
    height: 300px;
  }

  .demo-editorial .di-calendar-layout article {
    padding: 1.5rem;
  }

  .demo-editorial .di-planning-paper h2,
  .demo-editorial .di-calendar-layout aside h2,
  .demo-editorial .di-planning-intro h2 {
    font-size: 1.8rem;
  }

  .demo-editorial .di-calendar-layout article h2 {
    font-size: 1.3rem;
  }
}

/* ============================================================================
   UNIVERSAL FORM ENHANCEMENTS
   ========================================================================== */

/* Enhanced form styling for all conceptual forms */
.di-page form {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: clamp(28px, 4vw, 64px);
}

.di-page form fieldset {
  margin-bottom: 2rem;
}

.di-page form legend {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
  color: var(--accent);
}

.di-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 2rem;
}

.di-page label {
  display: grid;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}

.di-page :is(input, textarea, select) {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  font-family: inherit;
}

.di-page :is(input, textarea):focus-visible,
.di-page select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.di-page :is(input, textarea)::placeholder {
  opacity: 1;
  color: var(--text-muted);
}

.di-page form button {
  min-height: 52px;
  padding: 14px 24px;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 15px;
  background: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: all 0.2s ease;
}

.di-page form button:hover {
  opacity: 0.9;
  transform: translateX(2px);
}

.di-page form button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

.di-page .di-form-notice {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 2rem;
  padding: 12px 14px;
  background: rgba(var(--accent-rgb), 0.04);
  border-left: 3px solid var(--accent);
}

/* Mobile form improvements */
@media (max-width: 768px) {
  .di-fields {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .di-page form {
    padding: clamp(20px, 5%, 40px);
  }

  .di-page form legend {
    font-size: 12px;
    margin-bottom: 1rem;
  }

  .di-page :is(input, textarea, select) {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;
  }

  .di-page form button {
    width: 100%;
    min-height: 48px;
  }
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* Enhanced focus states */
.rebuilt-demo .rd-shell :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--surface);
}

/* Skip link enhancement */
body[data-authored-demo] a.skipLink {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 12px 16px;
  text-decoration: none;
  z-index: 100;
  font-weight: 600;
  font-size: 13px;
}

body[data-authored-demo] a.skipLink:focus {
  top: 0;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print styles */
@media print {
  body[data-authored-demo] {
    background: white;
    color: black;
  }

  .di-page form {
    page-break-inside: avoid;
  }
}

/* ============================================================================
   HOTEL NOCTURNE: Cinematic Desert Hospitality Guest Journey
   ========================================================================== */

.demo-hospitality .di-room-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.demo-hospitality .di-room-filters button {
  padding: 10px 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-hospitality .di-room-filters button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.demo-hospitality .di-room-feature,
.demo-hospitality .di-room-duet {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 4vw;
  align-items: flex-start;
  margin-bottom: 80px;
}

.demo-hospitality .di-room-feature figure,
.demo-hospitality .di-room-duet figure {
  aspect-ratio: 3/4;
}

.demo-hospitality .di-room-feature h2,
.demo-hospitality .di-room-duet h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.demo-hospitality .di-room-feature dl,
.demo-hospitality .di-room-duet dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem 2rem;
  margin: 1.5rem 0;
}

.demo-hospitality .di-room-feature dt,
.demo-hospitality .di-room-duet dt {
  font-weight: 600;
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.demo-hospitality .di-room-feature dd,
.demo-hospitality .di-room-duet dd {
  font-size: 15px;
  line-height: 1.6;
}

.demo-hospitality .di-daybreak,
.demo-hospitality .di-desert-interlude,
.demo-hospitality .di-night-spread {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4vw;
  align-items: center;
  margin-bottom: 80px;
}

.demo-hospitality .di-daybreak h2,
.demo-hospitality .di-desert-interlude h2,
.demo-hospitality .di-night-spread h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.demo-hospitality .di-daybreak time,
.demo-hospitality .di-desert-interlude time,
.demo-hospitality .di-night-spread time {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.demo-hospitality .di-stay-preview {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4vw;
  align-items: start;
}

.demo-hospitality .di-stay-preview aside {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  position: sticky;
  top: 100px;
}

@media (max-width: 768px) {
  .demo-hospitality .di-room-feature,
  .demo-hospitality .di-room-duet,
  .demo-hospitality .di-daybreak,
  .demo-hospitality .di-desert-interlude,
  .demo-hospitality .di-night-spread,
  .demo-hospitality .di-stay-preview {
    grid-template-columns: 1fr;
  }

  .demo-hospitality .di-room-feature figure,
  .demo-hospitality .di-room-duet figure,
  .demo-hospitality .di-daybreak figure,
  .demo-hospitality .di-desert-interlude figure,
  .demo-hospitality .di-night-spread figure {
    aspect-ratio: auto;
    height: 300px;
  }

  .demo-hospitality .di-stay-preview aside {
    position: static;
    margin-bottom: 2rem;
  }

  .demo-hospitality .di-room-feature h2,
  .demo-hospitality .di-room-duet h2,
  .demo-hospitality .di-daybreak h2,
  .demo-hospitality .di-desert-interlude h2,
  .demo-hospitality .di-night-spread h2 {
    font-size: 1.8rem;
  }
}

/* ============================================================================
   CALDER & VALE: Legal Authority & Case Documentation
   ========================================================================== */

.demo-legal .di-practice-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.demo-legal .di-practice-filters button {
  padding: 10px 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-legal .di-practice-filters button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.demo-legal .di-practice-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
  margin: 60px 0;
}

.demo-legal .di-practice-columns article {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.demo-legal .di-practice-columns h2 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: "Demo Serif", Georgia, serif;
}

.demo-legal .di-practice-columns p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.demo-legal .di-practice-record {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4vw;
  align-items: center;
  margin: 80px 0;
}

.demo-legal .di-practice-record figure {
  aspect-ratio: 3/4;
}

.demo-legal .di-practice-record h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: "Demo Serif", Georgia, serif;
}

.demo-legal .di-roles-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: flex-start;
  margin: 60px 0;
}

.demo-legal .di-roles-layout > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.demo-legal .di-roles-layout article {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.demo-legal .di-roles-layout span {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.demo-legal .di-roles-layout h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: "Demo Serif", Georgia, serif;
}

.demo-legal .di-roles-layout p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.demo-legal .di-roles-layout figure {
  aspect-ratio: 3/4;
  margin-top: 2rem;
}

.demo-legal .di-publication-lead {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4vw;
  align-items: center;
  margin: 80px 0;
}

.demo-legal .di-publication-lead figure {
  aspect-ratio: 3/4;
}

.demo-legal .di-publication-lead h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: "Demo Serif", Georgia, serif;
}

.demo-legal .di-publication-index {
  margin: 60px 0;
}

.demo-legal .di-publication-index details {
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  padding: 0;
}

.demo-legal .di-publication-index summary {
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 500;
  background: var(--surface-alt);
  font-size: 15px;
  user-select: none;
}

.demo-legal .di-publication-index details[open] summary {
  border-bottom: 1px solid var(--border);
}

.demo-legal .di-publication-index details p {
  padding: 18px 20px 0;
  font-size: 14px;
  line-height: 1.7;
}

.demo-legal .di-conflict-desk {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4vw;
  align-items: start;
}

.demo-legal .di-conflict-desk aside {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  position: sticky;
  top: 100px;
}

.demo-legal .di-conflict-desk h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: "Demo Serif", Georgia, serif;
}

@media (max-width: 768px) {
  .demo-legal .di-practice-columns {
    grid-template-columns: 1fr;
  }

  .demo-legal .di-practice-record,
  .demo-legal .di-roles-layout,
  .demo-legal .di-publication-lead,
  .demo-legal .di-conflict-desk {
    grid-template-columns: 1fr;
  }

  .demo-legal .di-roles-layout > div {
    grid-template-columns: 1fr;
  }

  .demo-legal .di-practice-record figure,
  .demo-legal .di-roles-layout figure,
  .demo-legal .di-publication-lead figure {
    aspect-ratio: auto;
    height: 300px;
  }

  .demo-legal .di-conflict-desk aside {
    position: static;
    margin-bottom: 2rem;
  }

  .demo-legal .di-practice-columns article {
    padding: 1.5rem;
  }

  .demo-legal .di-practice-columns h2 {
    font-size: 1.3rem;
  }

  .demo-legal .di-practice-record h2,
  .demo-legal .di-publication-lead h2,
  .demo-legal .di-conflict-desk h2 {
    font-size: 1.8rem;
  }

  .demo-legal .di-roles-layout h2 {
    font-size: 1.3rem;
  }
}

/* ============================================================================
   FIELDWORK ARCHITECTURE: Land-Led Residential Design
   ========================================================================== */

.demo-archive .di-project-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.demo-archive .di-project-filters button {
  padding: 10px 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-archive .di-project-filters button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.demo-archive .di-project-study,
.demo-archive .di-project-spread {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4vw;
  align-items: center;
  margin-bottom: 80px;
}

.demo-archive .di-project-study:nth-child(even),
.demo-archive .di-project-spread:nth-child(even) {
  grid-template-columns: 1fr 1.5fr;
}

.demo-archive .di-project-study:nth-child(even) figure,
.demo-archive .di-project-spread:nth-child(even) figure {
  order: 2;
}

.demo-archive .di-project-study figure,
.demo-archive .di-project-spread figure {
  aspect-ratio: 3/4;
}

.demo-archive .di-project-study h2,
.demo-archive .di-project-spread h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
}

.demo-archive .di-project-study p,
.demo-archive .di-project-spread p {
  font-size: 15px;
  line-height: 1.7;
  margin: 1rem 0;
}

.demo-archive .di-project-study dl,
.demo-archive .di-project-spread dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem 2rem;
  margin: 2rem 0;
}

.demo-archive .di-project-study dt,
.demo-archive .di-project-spread dt {
  font-weight: 600;
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.demo-archive .di-project-study dd,
.demo-archive .di-project-spread dd {
  font-size: 15px;
  line-height: 1.6;
}

.demo-archive .di-studio-intro {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4vw;
  align-items: start;
  margin-bottom: 80px;
}

.demo-archive .di-studio-intro aside {
  position: sticky;
  top: 100px;
}

.demo-archive .di-studio-intro h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
}

.demo-archive .di-process-chapters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
  margin: 60px 0;
}

.demo-archive .di-process-chapters article {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.demo-archive .di-process-chapters span {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.demo-archive .di-process-chapters h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.2;
}

.demo-archive .di-process-chapters p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.demo-archive .di-project-brief {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4vw;
  align-items: start;
}

.demo-archive .di-project-brief aside {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  position: sticky;
  top: 100px;
}

.demo-archive .di-project-brief aside h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
}

.demo-archive .di-project-brief aside p {
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .demo-archive .di-project-study,
  .demo-archive .di-project-spread,
  .demo-archive .di-studio-intro,
  .demo-archive .di-project-brief {
    grid-template-columns: 1fr;
  }

  .demo-archive .di-project-study:nth-child(even) figure,
  .demo-archive .di-project-spread:nth-child(even) figure {
    order: auto;
  }

  .demo-archive .di-process-chapters {
    grid-template-columns: 1fr;
  }

  .demo-archive .di-project-study figure,
  .demo-archive .di-project-spread figure {
    aspect-ratio: auto;
    height: 300px;
  }

  .demo-archive .di-studio-intro aside,
  .demo-archive .di-project-brief aside {
    position: static;
    margin-bottom: 2rem;
  }

  .demo-archive .di-process-chapters article {
    padding: 1.5rem;
  }

  .demo-archive .di-process-chapters span {
    font-size: 10px;
  }

  .demo-archive .di-process-chapters h3 {
    font-size: 1.3rem;
  }

  .demo-archive .di-project-study h2,
  .demo-archive .di-project-spread h2,
  .demo-archive .di-studio-intro aside h2,
  .demo-archive .di-project-brief aside h2 {
    font-size: 1.8rem;
  }
}

/* ============================================================================
   UNIVERSAL ENHANCEMENTS: All Demos
   ========================================================================== */

/* Enhanced form button states across all demos */
.di-page form button:active,
.di-page form button:hover {
  opacity: 0.85;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.di-page form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Enhanced input focus and error states */
.di-page input:invalid,
.di-page textarea:invalid,
.di-page select:invalid {
  border-color: #d32f2f;
  background-color: rgba(211, 47, 47, 0.04);
}

.di-page input:invalid:focus-visible {
  outline-color: #d32f2f;
}

/* Skip link accessibility enhancement */
a.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #333;
  color: white;
  padding: 8px 12px;
  text-decoration: none;
  z-index: 100;
  font-weight: 600;
  font-size: 12px;
}

a.skip-link:focus {
  top: 0;
}

/* Enhanced demo disclosure positioning */
demo-disclosure {
  display: block;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(17, 17, 15, 0.98), rgba(17, 17, 15, 0.95));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(239, 118, 34, 0.3);
}

demo-disclosure .demo-disclosure-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

demo-disclosure details {
  flex-shrink: 0;
}

demo-disclosure summary {
  cursor: pointer;
  padding: 6px 12px;
  margin: 0;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-weight: 700;
  color: #ffad70;
}

demo-disclosure summary:hover {
  background-color: rgba(255, 173, 112, 0.1);
}

demo-disclosure summary:focus-visible {
  outline: 2px solid #ffad70;
  outline-offset: 2px;
}

demo-disclosure details[open] summary {
  background-color: rgba(255, 173, 112, 0.15);
}

demo-disclosure details p {
  margin: 0;
  color: #f4eee3;
  font-size: 13px;
  line-height: 1.6;
}

demo-disclosure nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-self: flex-end;
}

demo-disclosure a {
  color: #ffad70;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  font-size: 12px;
  transition: color 0.2s ease;
}

demo-disclosure a:hover {
  color: #ffc999;
}

demo-disclosure a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Enhanced table styling for all demos */
.di-page table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.di-page table thead tr {
  background: var(--surface-alt);
  border-bottom: 2px solid var(--border-strong);
}

.di-page table tbody tr:hover {
  background: rgba(var(--accent-rgb), 0.02);
}

.di-page table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

/* Enhanced definition list styling */
.di-page dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem 2rem;
  margin: 2rem 0;
  padding: 0;
}

.di-page dt {
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.di-page dd {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.6;
}

/* Enhanced list styling */
.di-page ul,
.di-page ol {
  margin: 1.5rem 0;
  padding-left: 20px;
}

.di-page li {
  margin-bottom: 12px;
  line-height: 1.7;
}

.di-page li strong {
  font-weight: 600;
  color: var(--accent);
}

/* Enhanced blockquote styling */
.di-page blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 4px solid var(--accent);
  color: var(--text-muted);
  font-style: italic;
  font-size: 16px;
  line-height: 1.7;
}

/* Enhanced code block styling */
.di-page code {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 2px 6px;
  font-family: "Demo Mono", monospace;
  font-size: 14px;
  color: var(--accent);
}

.di-page pre {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 16px;
  overflow-x: auto;
  margin: 2rem 0;
  font-size: 13px;
  line-height: 1.6;
}

.di-page pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text);
}

/* Enhanced section headers */
.di-page > header {
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2rem;
}

/* Enhanced footer styling */
.di-page footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

/* Enhanced print styles */
@media print {
  demo-disclosure {
    display: none;
  }

  .di-page {
    padding: 0;
    background: white;
    color: black;
  }

  .di-page :is(h1, h2, h3) {
    break-after: avoid;
    page-break-after: avoid;
  }

  .di-page figure {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .di-page form {
    display: none;
  }

  .di-page a {
    color: #0066cc;
    text-decoration: underline;
  }

  .di-page a::after {
    content: " (" attr(href) ")";
    color: #666;
    font-size: 11px;
  }
}

/* Enhanced dark mode support */
@media (prefers-color-scheme: dark) {
  .di-page {
    background: var(--surface);
    color: var(--text);
  }

  .di-page a {
    color: var(--accent);
  }

  .di-page button {
    background: var(--accent);
    color: var(--surface);
  }

  .di-page input,
  .di-page textarea,
  .di-page select {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border-strong);
  }
}

/* Enhanced high-contrast mode support */
@media (prefers-contrast: more) {
  body {
    font-weight: 500;
  }

  a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  button,
  input[type="submit"],
  input[type="button"] {
    border-width: 2px;
    font-weight: 700;
    border: 2px solid currentColor;
  }

  :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  summary {
    font-weight: 700;
  }

  details {
    border: 2px solid var(--border-strong, currentColor);
    padding: 12px;
  }

  :focus-visible {
    outline: 3px solid;
    outline-offset: 2px;
  }

  nav a:hover,
  nav a:active {
    text-decoration: underline;
    text-decoration-thickness: 3px;
  }
}

/* Forced colors mode support */
@media (forced-colors: active) {
  button,
  input[type="button"],
  input[type="submit"] {
    border: 2px solid;
    forced-color-adjust: none;
  }

  input,
  textarea,
  select {
    border: 2px solid;
    forced-color-adjust: none;
  }

  :focus-visible {
    outline: 3px solid;
    outline-offset: 2px;
  }

  a {
    text-decoration: underline;
  }

  .skip-link {
    background-color: Canvas;
    color: CanvasText;
    border: 2px solid CanvasText;
    forced-color-adjust: none;
  }

  .skip-link:focus {
    background-color: Highlight;
    color: HighlightText;
  }

  nav a[aria-current="page"] {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 3px;
  }

  button:disabled {
    opacity: 0.5;
    forced-color-adjust: none;
  }

  input:disabled,
  textarea:disabled,
  select:disabled {
    opacity: 0.5;
    forced-color-adjust: none;
  }

  .form-feedback {
    border-left: 4px solid;
    forced-color-adjust: none;
  }
}

/* Form validation improvements */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown),
select:invalid:not(:placeholder-shown) {
  border-color: #c41e3a;
  background-color: rgba(196, 30, 58, 0.05);
}

/* Enhanced skip link visibility on focus */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: white;
  padding: 12px 16px;
  z-index: 999;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  font-weight: 600;
  font-size: 14px;
}

.skip-link:focus {
  top: 0;
}

/* Navigation active state visual enhancement */
nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}

/* Enhanced button/form error styling */
.form-feedback {
  margin-bottom: 1rem;
  padding: 12px 16px;
  border-radius: 4px;
  background: rgba(196, 30, 58, 0.1);
  color: #c41e3a;
  border-left: 4px solid #c41e3a;
  font-size: 14px;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.form-feedback:empty {
  display: none;
}

/* public/native-demos/demo-extensions.css */
/* Shared content modules for native demo inner pages (tabs, comparisons, timelines, profiles, FAQs).
   Every module reads the demo's own palette and type through the tokens below, so new sections
   inherit each concept's art direction instead of introducing a second visual system. */
body[data-authored-demo] {
  --dx-bg: #0b0d0e;
  --dx-fg: #ece7dc;
  --dx-accent: #c9a36b;
  --dx-line: color-mix(in srgb, var(--dx-fg) 16%, transparent);
  --dx-muted: color-mix(in srgb, var(--dx-fg) 72%, transparent);
  --dx-surface: color-mix(in srgb, var(--dx-fg) 4%, var(--dx-bg));
  --dx-display: "Demo Serif", Georgia, "Times New Roman", serif;
  --dx-display-weight: 400;
  --dx-display-case: none;
  --dx-display-tracking: -0.035em;
  --dx-label: "Demo Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Demo Mono", monospace;
  --dx-body: "Demo Sans", Arial, Helvetica, sans-serif;
}

.dx {
  position: relative;
  padding: clamp(64px, 8vw, 128px) 5vw;
  border-top: 1px solid var(--dx-line);
  background: var(--dx-bg);
  color: var(--dx-fg);
  font-family: var(--dx-body);
}
.dx + .dx {
  border-top-color: transparent;
  padding-top: 0;
}
.dx *,
.dx *::before,
.dx *::after {
  box-sizing: border-box;
}
.dx-head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 4vw;
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 72px);
}
.dx-kicker {
  display: block;
  color: var(--dx-accent);
  font: 600 0.62rem/1.5 var(--dx-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.dx .dx-title {
  margin: 14px 0 0;
  font-family: var(--dx-display);
  font-weight: var(--dx-display-weight);
  font-size: clamp(2rem, 4.2vw, 4rem) !important;
  line-height: 1;
  letter-spacing: var(--dx-display-tracking);
  text-transform: var(--dx-display-case);
  overflow-wrap: normal;
}
.dx-lede,
.dx p {
  color: var(--dx-muted);
  line-height: 1.75;
  max-width: 60ch;
  margin: 0 0 1em;
}
.dx h3 {
  margin: 0 0 12px;
  color: var(--dx-fg);
  font-family: var(--dx-display);
  font-weight: var(--dx-display-weight);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: calc(var(--dx-display-tracking) / 2);
  text-transform: var(--dx-display-case);
}
.dx strong {
  color: var(--dx-fg);
}
.dx a:not(.dx-button) {
  color: var(--dx-fg);
  text-decoration: underline;
  text-decoration-color: var(--dx-accent);
  text-underline-offset: 4px;
}
.dx-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  margin-top: 12px;
  padding: 0 22px;
  border: 1px solid var(--dx-accent);
  color: var(--dx-fg);
  font: 600 0.7rem/1 var(--dx-label);
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background 0.3s,
    color 0.3s;
}
.dx-button:hover,
.dx-button:focus-visible {
  background: var(--dx-accent);
  color: var(--dx-bg);
}

/* Media */
.dx-media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dx-surface);
}
.dx-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Art-direction crops come from six-panel sheets and carry a sliver of the sheet gutter on some edges. */
  transform: scale(1.035);
}
.dx-media figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--dx-bg) 82%, transparent);
  color: var(--dx-fg);
  font: 600 0.58rem/1.4 var(--dx-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Tabs */
.dx-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--dx-line);
}
.dx-tab {
  appearance: none;
  min-height: 48px;
  margin-bottom: -1px;
  padding: 14px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--dx-muted);
  cursor: pointer;
  font: 600 0.7rem/1.2 var(--dx-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dx-tab:hover {
  color: var(--dx-fg);
}
.dx-tab[aria-selected="true"] {
  color: var(--dx-fg);
  border-bottom-color: var(--dx-accent);
}
.dx-panel {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 4vw;
  align-items: start;
}
.dx-panel[hidden] {
  display: none;
}
.dx-panel.dx-panel-text {
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px;
}

/* Facts */
.dx-facts {
  display: grid;
  margin: 24px 0 0;
  border-top: 1px solid var(--dx-line);
}
.dx-facts > div {
  display: grid;
  grid-template-columns: minmax(110px, 2fr) minmax(0, 5fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--dx-line);
}
.dx-facts dt {
  color: var(--dx-accent);
  font: 600 0.62rem/1.6 var(--dx-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dx-facts dd {
  margin: 0;
  color: var(--dx-fg);
  line-height: 1.6;
}

/* Cards */
.dx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1px;
}
.dx-cards > .dx-card {
  box-shadow: 0 0 0 1px var(--dx-line);
}
.dx-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--dx-bg);
}
.dx-card .dx-kicker {
  margin-bottom: 12px;
}
.dx-card p:last-child {
  margin-bottom: 0;
}
.dx-card .dx-media {
  margin: calc(clamp(24px, 3vw, 40px) * -1) calc(clamp(24px, 3vw, 40px) * -1) 24px;
}
.dx-card[hidden] {
  display: none;
}

/* Tables */
.dx-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--dx-line);
  -webkit-overflow-scrolling: touch;
}
.dx-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  color: var(--dx-fg);
}
.dx-table caption {
  padding: 0 0 16px;
  color: var(--dx-muted);
  text-align: left;
  font: 600 0.62rem/1.5 var(--dx-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dx-table th,
.dx-table td {
  padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--dx-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.dx-table thead th {
  color: var(--dx-accent);
  font: 600 0.62rem/1.4 var(--dx-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dx-table tbody th {
  font-family: var(--dx-display);
  font-weight: var(--dx-display-weight);
  font-size: 1.15rem;
  text-transform: var(--dx-display-case);
}
.dx-table td {
  color: var(--dx-muted);
}

/* Timeline */
.dx-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--dx-line);
}
.dx-timeline li {
  display: grid;
  grid-template-columns: minmax(90px, 1.2fr) minmax(0, 5fr);
  gap: 3vw;
  padding: 26px 0;
  border-bottom: 1px solid var(--dx-line);
}
.dx-timeline time,
.dx-timeline .dx-step {
  color: var(--dx-accent);
  font-family: var(--dx-display);
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  line-height: 1;
}
.dx-timeline p {
  margin: 0;
}

/* Filters */
.dx-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.dx-filter {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--dx-line);
  border-radius: 999px;
  background: none;
  color: var(--dx-muted);
  cursor: pointer;
  font: 600 0.66rem/1 var(--dx-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dx-filter[aria-pressed="true"] {
  border-color: var(--dx-accent);
  background: var(--dx-accent);
  color: var(--dx-bg);
}
.dx-count {
  margin-left: auto;
  color: var(--dx-muted);
  font: 600 0.62rem/1 var(--dx-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* FAQ / expandable profiles */
.dx-faq {
  border-top: 1px solid var(--dx-line);
}
.dx-faq details {
  border-bottom: 1px solid var(--dx-line);
}
.dx-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: baseline;
  min-height: 48px;
  padding: 22px 0;
  color: var(--dx-fg);
  cursor: pointer;
  font-family: var(--dx-display);
  font-weight: var(--dx-display-weight);
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  text-transform: var(--dx-display-case);
  list-style: none;
}
.dx-faq summary::-webkit-details-marker {
  display: none;
}
.dx-faq summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--dx-accent);
  font: 400 1.4rem/1 var(--dx-label);
}
.dx-faq details[open] summary::after {
  content: "–";
}
.dx-faq details > div {
  padding: 0 0 26px;
}

/* Profiles */
.dx-profiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.dx-profile .dx-media {
  aspect-ratio: 4 / 5;
  margin-bottom: 20px;
}
.dx-profile .dx-role {
  display: block;
  margin-bottom: 14px;
  color: var(--dx-accent);
  font: 600 0.62rem/1.5 var(--dx-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Figures */
.dx-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1px;
  background: var(--dx-line);
  border-block: 1px solid var(--dx-line);
}
.dx-figures > div {
  padding: 28px 24px 28px 0;
  background: var(--dx-bg);
}
.dx-figures b {
  display: block;
  color: var(--dx-fg);
  font-family: var(--dx-display);
  font-weight: var(--dx-display-weight);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: var(--dx-display-tracking);
}
.dx-figures span {
  display: block;
  margin-top: 10px;
  color: var(--dx-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Estimator */
.dx-estimator {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 4vw;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--dx-line);
  background: var(--dx-surface);
}
.dx-estimator label {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--dx-muted);
  font: 600 0.62rem/1.4 var(--dx-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dx-estimator select,
.dx-estimator input {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--dx-line);
  background: var(--dx-bg);
  color: var(--dx-fg);
  font: 1rem var(--dx-body);
  letter-spacing: 0;
  text-transform: none;
}
.dx-estimate-output {
  align-self: center;
}
.dx-estimate-output output {
  display: block;
  color: var(--dx-fg);
  font-family: var(--dx-display);
  font-weight: var(--dx-display-weight);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: var(--dx-display-tracking);
}

.dx-quote {
  margin: 0;
  padding: clamp(28px, 4vw, 56px) 0 0;
  border-top: 1px solid var(--dx-line);
}
.dx-quote blockquote {
  margin: 0 0 18px;
  color: var(--dx-fg);
  font-family: var(--dx-display);
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: calc(var(--dx-display-tracking) / 2);
}
.dx-quote figcaption,
.dx-note {
  color: var(--dx-muted);
  font: 600 0.62rem/1.7 var(--dx-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dx-note {
  display: block;
  max-width: 80ch;
  margin-top: 28px;
}
.dx-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4vw;
}
.dx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Local form preview summary (demo-safety.js) */
.rd-form-summary {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.rd-form-summary h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}
.rd-form-summary dl {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}
.rd-form-summary dl div {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr;
  gap: 12px;
}
.rd-form-summary dt {
  opacity: 0.75;
}
.rd-form-summary dd {
  margin: 0;
  font-weight: 600;
}
/* After a request the reply takes the form's place, as a live site would. */
form:has(> .rd-form-summary) > :not(.rd-form-summary) {
  display: none !important;
}
.rd-form-summary .rd-form-note {
  margin: 12px 0 0;
  font-size: 0.8rem;
  opacity: 0.7;
}
.rd-form-summary button {
  min-height: 44px;
  margin-top: 8px;
  padding: 0 18px;
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  cursor: pointer;
}

@media (max-width: 800px) {
  .dx-head,
  .dx-panel,
  .dx-estimator,
  .dx-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .dx-timeline li,
  .dx-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .dx-tablist {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .dx-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .dx-count {
    margin-left: 0;
    width: 100%;
  }
  .rd-form-summary dl div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Menu rows (Ember & Oak) */
.dx-menu dt {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--dx-fg);
  font: 400 1.15rem/1.3 var(--dx-display);
  letter-spacing: 0;
  text-transform: none;
}
.dx-menu dt b {
  color: var(--dx-accent);
  font-weight: 400;
}
.dx-menu > div {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}
.dx-menu dd {
  color: var(--dx-muted);
}
.dx-diet {
  margin-left: 8px;
  color: var(--dx-accent);
  font: 600 0.62rem/1 var(--dx-label);
  letter-spacing: 0.12em;
}

/* ---------- Brand statements (replace stripped testimonials with first-party voice) ---------- */
.apexQuote > .brand-statement,
.vrTestimonial > .brand-statement,
.hotelReview > .brand-statement,
.lawPrincipals > .brand-statement {
  max-width: 1000px;
  margin: 0;
  font:
    400 clamp(2.3rem, 5vw, 5rem) / 1.1 "Demo Serif",
    Georgia,
    serif;
  text-wrap: balance;
}
.apexQuote > .brand-statement {
  text-transform: uppercase;
  font:
    300 clamp(2.3rem, 5vw, 5rem) / 1.1 "Demo Sans",
    Arial,
    sans-serif;
}
.vrTestimonial > .brand-statement {
  color: #c5a677;
}
.hotelReview > .brand-statement {
  color: #d2a45c;
}
.lawPrincipals > .brand-statement {
  color: #f1e9df;
  font-size: clamp(2.1rem, 4.5vw, 4.7rem);
}

/* ---------- Hotel intro: keep body copy clear of the tight display headline ---------- */

/* ---------- Concept notice: one compact row on phones ---------- */
@media (max-width: 600px) {
  demo-disclosure .demo-disclosure-inner {
    flex-wrap: nowrap;
    padding: 4px 12px;
    gap: 10px;
  }
  demo-disclosure summary {
    padding: 6px 0;
    font-size: 11px;
    white-space: nowrap;
  }
  demo-disclosure nav {
    flex-wrap: nowrap;
  }
  demo-disclosure .demo-disclosure-inner nav a + a {
    display: none;
  }
  demo-disclosure nav a {
    font-size: 11px;
    white-space: nowrap;
  }
}

/* ---------- Lead paragraphs: monospace capitals are kept for labels, not for reading ---------- */

/* ---------- Editorial image band ---------- */
.dx-gallery {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: clamp(12px, 1.4vw, 20px);
  padding: clamp(56px, 7vw, 112px) 6vw;
  background: var(--dx-bg);
  color: var(--dx-fg);
}
.dx-gallery[data-count="2"] {
  grid-template-columns: 1.35fr 1fr;
}
.dx-gallery[data-count="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dx-gallery-kicker {
  grid-column: 1 / -1;
  margin: 0 0 clamp(8px, 1vw, 16px);
  color: var(--dx-accent);
  font: 600 11px/1.4 var(--dx-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.dx-gallery-item {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  margin: 0;
}
.dx-gallery-item img {
  display: block;
  width: 100%;
  height: clamp(280px, 34vw, 560px);
  object-fit: cover;
}
.dx-gallery[data-count="4"] .dx-gallery-item img {
  height: auto;
  aspect-ratio: 3 / 4;
}
.dx-gallery-item:nth-child(n + 3) img {
  margin-top: clamp(0px, 4vw, 64px);
}
.dx-gallery[data-count="4"] .dx-gallery-item:nth-child(odd) img {
  margin-top: 0;
}
.dx-gallery[data-count="4"] .dx-gallery-item:nth-child(even) img {
  margin-top: clamp(0px, 3vw, 48px);
}
.dx-gallery-item figcaption {
  display: flex;
  gap: 14px;
  align-items: baseline;
  color: var(--dx-muted);
  font: 400 14px/1.45 var(--dx-body);
}
.dx-gallery-item figcaption span {
  color: var(--dx-accent);
  font: 600 11px/1 var(--dx-label);
  letter-spacing: 0.14em;
}
@media (max-width: 760px) {
  /* Stacked, not swiped: lazy images below the fold load as the visitor scrolls. */
  .dx-gallery,
  .dx-gallery[data-count="2"],
  .dx-gallery[data-count="4"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .dx-gallery[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dx-gallery-item img,
  .dx-gallery .dx-gallery-item:nth-child(n) img {
    height: auto;
    aspect-ratio: 4 / 5;
    margin-top: 0;
  }
}

/* ---------- Motion: hero settles in, sections reveal as they arrive ---------- */
@keyframes dx-settle {
  from {
    transform: scale(1.06);
  }
}
@media (prefers-reduced-motion: no-preference) {
  body[data-authored-demo] main > section:first-of-type > img,
  body[data-authored-demo] main > section:first-of-type > div > img {
    animation: dx-settle 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  /* Movement only: content is never faded, so text stays readable (and measurable) at every moment. */
  /* `translate` (not `transform`) so the reveal composes with the 3D tilt some concepts add to cards. */
  .dx-reveal {
    translate: 0 28px;
    transition: translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--dx-order, 0) * 90ms);
  }
  .dx-reveal.is-in {
    translate: none;
  }
  .dx-reveal img {
    transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .dx-reveal:not(.is-in) img {
    transform: scale(1.05);
  }
}

/* Ember & Oak: the tall italic headings' descenders ran into the paragraph below. */
/* A panel holding a table gives the table the wider column so its last column isn't cut off. */
.dx-panel:has(> .dx-table-wrap) {
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
}
@media (max-width: 800px) {
  .dx-panel:has(> .dx-table-wrap) {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Tap targets: standalone feature links and the sub-page logo reach a comfortable touch height. */
/* Ember & Oak: a full-width fire band between the menu and the room. */
/* Phone minimums the type generator cannot resolve (inherited or relative sizes). */
/* Mobile parity: Apex's manifesto sizes to its content instead of a 90vh desktop panel. */
/* Mobile parity: three-column desktop cards keep fixed heights when they stack, leaving empty space. */
@media (max-width: 600px) {
  /* Fieldwork's corner note sits under the hero copy instead of over the call to action. */
  /* Footer items wrap with breathing room instead of running together. */
  body[data-authored-demo] footer {
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
  }
}
/* Ember & Oak: the room heading's descenders ran into its paragraph too. */

/* Logo lockups: a clear space between the name and its descriptor, so they read as two parts. */
body[data-authored-demo] main > header > a:first-child > small {
  margin-left: 0.85em;
}

/* Phone headers: the logo yields width (its descriptor wraps under the name) so Menu stays on the first row,
   centred against the logo. */
@media (max-width: 800px) {
  body[data-authored-demo] main > header {
    align-items: center;
    column-gap: 12px;
  }
  body[data-authored-demo] main > header > a:first-child {
    flex: 0 1 auto;
    min-width: 0;
  }
  body[data-authored-demo] .authored-menu {
    flex: none;
    margin-block: 0;
  }
}

/* Touch targets: every primary link and control is at least 44px tall. */
body[data-authored-demo] .dx-tab {
  min-width: 44px;
}

/* Vesper & Rowe: the introduction button holds to two lines on phones. */

/* Phone header: the concept's main action sits beside Menu and stays on screen with the fixed header.
   The action is the outlined button; Menu becomes a quieter text control. */
.authored-cta {
  display: none;
}
@media (max-width: 800px) {
  body[data-authored-demo] .authored-cta {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 44px;
    margin-left: auto;
    padding: 0 14px;
    border: 1px solid currentColor;
    color: inherit;
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
  }
  body[data-authored-demo] .authored-cta + .authored-menu {
    margin-left: 0;
    padding-inline: 10px;
    border-color: transparent;
  }
}

/* Ironwood title block: a drafting-sheet spec table fills the sheet between the statement and the action. */
/* Narrow phones: the logo's descriptor steps aside (still read by screen readers) so the name, the main action
   and Menu share one header row. */
@media (max-width: 480px) {
  body[data-authored-demo] main > header > a:first-child > small {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (max-width: 480px) {
  body[data-authored-demo] main > header {
    column-gap: 8px;
    padding-inline: 18px;
  }
  body[data-authored-demo] .authored-cta {
    padding-inline: 12px;
  }
  body[data-authored-demo] .authored-cta + .authored-menu {
    padding-inline: 8px;
  }
}

/* Ironwood work page: each project told as place, site, response and outcome */

/* Hotel Nocturne: the stay bar takes real dates and guests; inputs wear the same serif as the old labels */

/* Ember & Oak: table finder directly under the hero */

/* Ironwood: how the price works (open-book, fixed-fee construction explained before anyone asks) */

/* Comparison tables become one card per row on phones instead of scrolling sideways. Labels come from the
   column headers (copied onto each cell by demo-authored.js). */
@media (max-width: 600px) {
  .dx-table-wrap {
    overflow-x: visible;
  }
  .dx-table {
    min-width: 0;
  }
  .dx-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .dx-table tbody,
  .dx-table tr,
  .dx-table tbody th,
  .dx-table td {
    display: block;
  }
  .dx-table tr {
    padding: 18px 0;
    border-bottom: 1px solid var(--dx-line);
  }
  .dx-table tbody th,
  .dx-table td {
    padding: 4px 0;
    border-bottom: 0;
  }
  .dx-table tbody th {
    padding-bottom: 8px;
  }
  .dx-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--dx-accent);
    font: 600 11px/1.5 var(--dx-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

/* Luxury concepts: the line that says what the homepage tool will carry into the inquiry form */
body[data-authored-demo] .dx-carry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
body[data-authored-demo] .dx-carry-text {
  max-width: 44rem;
  margin: 0;
  font: 400 16px/1.55 var(--dx-body);
}
body[data-authored-demo] :is(.phase-cta, .journey-cta) .dx-carry-text {
  margin-bottom: 14px;
}
body[data-authored-demo] .dx-carry-text b {
  font-weight: 700;
}
body[data-authored-demo] .dx-carry-link {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid var(--dx-accent);
  border-radius: 999px;
  color: inherit;
  font: 600 12px/1 var(--dx-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}
body[data-authored-demo] .dx-carry-link:hover,
body[data-authored-demo] .dx-carry-link:focus-visible {
  background: var(--dx-accent);
  color: var(--dx-bg);
}

/* Ironwood process steps: on phones the step number sits above its text instead of on top of it */

/* Fieldwork: the project-fit close keeps a short headline with the detail underneath */

/* First-screen trust lines and data labels that the stylesheets set at 8-10px */

/* ---------- Key details: trust anchor, guarantee, named reviews (every concept, in its own tokens) ---------- */
body[data-authored-demo] .dx-stars {
  color: var(--dx-accent);
  letter-spacing: 0.08em;
}
body[data-authored-demo] .dx-anchor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 16px 0 0;
  font: 500 14px/1.4 var(--dx-body);
  color: inherit;
}
body[data-authored-demo] .dx-anchor b {
  font-weight: 700;
}
body[data-authored-demo] .dx-anchor-sep {
  opacity: 0.5;
}
body[data-authored-demo] .dx-proof {
  padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 72px);
  background: var(--dx-surface);
  color: var(--dx-fg);
}
body[data-authored-demo] .dx-proof-head {
  display: grid;
  gap: 12px;
  max-width: 900px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
body[data-authored-demo] .dx-proof-kicker {
  font: 600 12px/1.4 var(--dx-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dx-accent);
}
body[data-authored-demo] .dx-proof h2,
body[data-authored-demo] .dx-serve h2 {
  margin: 0;
  font-family: var(--dx-display);
  font-weight: var(--dx-display-weight);
  text-transform: var(--dx-display-case);
  letter-spacing: var(--dx-display-tracking);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.02;
}
body[data-authored-demo] .dx-proof-score {
  margin: 0;
  color: var(--dx-muted);
  font-size: 16px;
}
body[data-authored-demo] .dx-proof-score b {
  color: var(--dx-fg);
}
body[data-authored-demo] .dx-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
body[data-authored-demo] .dx-badges li {
  padding: 8px 14px;
  border: 1px solid var(--dx-line);
  border-radius: 999px;
  font: 600 12px/1.3 var(--dx-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body[data-authored-demo] .dx-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr));
  gap: 16px;
}
body[data-authored-demo] .dx-guarantee,
body[data-authored-demo] .dx-review {
  display: grid;
  align-content: start;
  gap: 12px;
  margin: 0;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--dx-line);
  background: color-mix(in srgb, var(--dx-fg) 3%, var(--dx-bg));
}
body[data-authored-demo] .dx-guarantee {
  border-color: var(--dx-accent);
}
body[data-authored-demo] .dx-seal {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 2px solid var(--dx-accent);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 4px var(--dx-bg),
    inset 0 0 0 5px var(--dx-accent);
  color: var(--dx-accent);
  font: 700 13px/1 var(--dx-label);
  letter-spacing: 0.06em;
  text-align: center;
}
body[data-authored-demo] .dx-guarantee h3 {
  margin: 0;
  font-family: var(--dx-display);
  font-weight: var(--dx-display-weight);
  text-transform: var(--dx-display-case);
  font-size: 1.45rem;
  line-height: 1.1;
}
body[data-authored-demo] :is(.dx-guarantee, .dx-review) p {
  margin: 0;
  color: var(--dx-muted);
  font-size: 16px;
  line-height: 1.55;
}
body[data-authored-demo] .dx-review blockquote {
  margin: 0;
}
body[data-authored-demo] .dx-review blockquote p {
  color: var(--dx-fg);
}
body[data-authored-demo] .dx-review .dx-stars {
  font-size: 15px;
}
body[data-authored-demo] .dx-review figcaption {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--dx-line);
  font-size: 15px;
}
body[data-authored-demo] .dx-review figcaption span {
  display: block;
  color: var(--dx-muted);
  font: 500 12px/1.5 var(--dx-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body[data-authored-demo] .dx-proof-note {
  max-width: 60rem;
  margin: 24px 0 0;
  color: var(--dx-muted);
  font-size: 13px;
  line-height: 1.6;
}
body[data-authored-demo] .dx-legal {
  margin: 0;
  padding: 24px clamp(20px, 5vw, 72px);
  border-top: 1px solid var(--dx-line);
  background: var(--dx-bg);
  color: var(--dx-muted);
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 1000px) {
  body[data-authored-demo] .dx-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  body[data-authored-demo] .dx-proof-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Northline: who it serves */

/* Ironwood: stats row */

/* Ember & Oak: hours, address and phone beside the table finder */

/* Hotel Nocturne: five fields in the booking bar */

/* Phones: a call link in every concept header, and a call / text / main-action bar for the home-service concepts.
   Both open the concept's own contact page; nothing dials. */
body[data-authored-demo] .authored-call {
  display: none;
}
body[data-authored-demo] .dx-actionbar {
  display: none;
}
@media (max-width: 800px) {
  body[data-authored-demo] .authored-call {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    color: inherit;
  }
  body[data-authored-demo] .authored-call svg {
    width: 20px;
    height: 20px;
  }
  body[data-authored-demo] .dx-actionbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr;
    gap: 1px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--dx-line);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  }
  body[data-authored-demo] .dx-actionbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    background: var(--dx-bg);
    color: var(--dx-fg);
    font: 700 15px/1 var(--dx-body);
    text-decoration: none;
  }
  body[data-authored-demo] .dx-actionbar a:last-child {
    background: var(--dx-accent);
    color: var(--dx-bg);
  }
  body[data-authored-demo] .dx-actionbar svg {
    width: 18px;
    height: 18px;
  }
  body[data-authored-demo]:has(.dx-actionbar) {
    padding-bottom: 56px;
  }
}

body[data-authored-demo] .dx-intent {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--dx-accent);
  background: color-mix(in srgb, var(--dx-accent) 10%, transparent);
  font-size: 16px;
  line-height: 1.5;
}

/* Small accent-coloured text is blended toward the text colour so it clears 4.5:1 on light and dark concepts. */
body[data-authored-demo] :is(.dx-proof-kicker, .dx-seal) {
  color: color-mix(in srgb, var(--dx-accent) 72%, var(--dx-fg));
}
body[data-demo="cleanslate-exterior-wash"] .dx-actionbar a:last-child {
  color: #fff;
}
body[data-authored-demo] .dx-review p.dx-stars {
  color: var(--dx-accent);
}

/* Nocturne: the anchor line reads as a sentence, not another label */

/* Home-service concepts already have Call in the bottom bar, so the header keeps its original three items. */
body[data-authored-demo]:has(.dx-actionbar) .authored-call {
  display: none;
}
/* Nocturne hero styles every span as a mono label; the anchor line keeps body type. */

/* Fullscreen image viewer */
body[data-authored-demo] .dx-lb-open {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.55);
  color: #fff;
  cursor: zoom-in;
  backdrop-filter: blur(4px);
  transition: background-color 0.2s ease;
}
body[data-authored-demo] .dx-lb-open:hover {
  background: rgba(10, 10, 10, 0.8);
}
body[data-authored-demo] .dx-lb-open svg {
  width: 20px;
  height: 20px;
}
body[data-authored-demo] .dx-lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #070707;
  color: #f2efe8;
}
body[data-authored-demo] .dx-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.9);
}
body[data-authored-demo] .dx-lightbox figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  margin: 0;
  padding: 56px 72px 16px;
}
body[data-authored-demo] .dx-lightbox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body[data-authored-demo] .dx-lightbox figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  font: 500 15px/1.4 var(--dx-body);
}
body[data-authored-demo] .dx-lightbox figcaption span:last-child {
  color: #b9b4a8;
  font-family: var(--dx-label);
}
body[data-authored-demo] .dx-lightbox button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.7);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
body[data-authored-demo] .dx-lb-prev {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}
body[data-authored-demo] .dx-lb-next {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
body[data-authored-demo] .dx-lb-close {
  top: 10px;
  right: 12px;
  font-size: 28px;
}
@media (max-width: 600px) {
  body[data-authored-demo] .dx-lightbox figure {
    padding: 64px 12px 12px;
  }
  body[data-authored-demo] :is(.dx-lb-prev, .dx-lb-next) {
    top: auto;
    bottom: 64px;
    transform: none;
  }
}

/* Ironwood: Horizon House by room */

/* ---------- Industry sections: each concept's signature content, in its own tokens ---------- */
body[data-authored-demo] .dx-feature {
  padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 72px);
  background: var(--dx-bg);
  color: var(--dx-fg);
  border-top: 1px solid var(--dx-line);
}
body[data-authored-demo] .dx-feature-head {
  display: grid;
  gap: 12px;
  max-width: 860px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
body[data-authored-demo] .dx-feature-head h2 {
  margin: 0;
  font-family: var(--dx-display);
  font-weight: var(--dx-display-weight);
  text-transform: var(--dx-display-case);
  letter-spacing: var(--dx-display-tracking);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.02;
}
body[data-authored-demo] .dx-feature-head p {
  max-width: 40rem;
  margin: 0;
  color: var(--dx-muted);
  font-size: 17px;
  line-height: 1.6;
}
body[data-authored-demo] .dx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}
body[data-authored-demo] .dx-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  margin: 0;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--dx-line);
  background: color-mix(in srgb, var(--dx-fg) 3%, var(--dx-bg));
}
body[data-authored-demo] .dx-card-lead {
  border-color: var(--dx-accent);
}
body[data-authored-demo] .dx-card-meta {
  margin: 0;
  font: 600 12px/1.4 var(--dx-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dx-accent) 72%, var(--dx-fg));
}
body[data-authored-demo] .dx-card h3 {
  margin: 0;
  font-family: var(--dx-display);
  font-weight: var(--dx-display-weight);
  text-transform: var(--dx-display-case);
  font-size: 1.45rem;
  line-height: 1.12;
}
body[data-authored-demo] .dx-card p:not(.dx-card-meta) {
  margin: 0;
  color: var(--dx-muted);
  font-size: 16px;
  line-height: 1.55;
}
body[data-authored-demo] .dx-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--dx-line);
  font-size: 15px;
}
body[data-authored-demo] .dx-card-foot b {
  font-family: var(--dx-display);
  font-size: 1.2rem;
}
body[data-authored-demo] .dx-card-foot a,
body[data-authored-demo] .dx-feature-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--dx-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
body[data-authored-demo] .dx-feature-note {
  max-width: 60rem;
  margin: 24px 0 0;
  color: var(--dx-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Press, recognition and membership strip */
body[data-authored-demo] .dx-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px clamp(24px, 4vw, 56px);
  margin: 0;
  padding: 26px clamp(20px, 5vw, 72px);
  border-top: 1px solid var(--dx-line);
  border-bottom: 1px solid var(--dx-line);
  background: var(--dx-surface);
  color: var(--dx-fg);
  list-style: none;
}
body[data-authored-demo] .dx-strip li {
  display: grid;
  gap: 2px;
  text-align: center;
}
body[data-authored-demo] .dx-strip b {
  font-family: var(--dx-display);
  font-weight: var(--dx-display-weight);
  text-transform: var(--dx-display-case);
  font-size: 1.2rem;
  line-height: 1.15;
}
body[data-authored-demo] .dx-strip span {
  font: 500 12px/1.4 var(--dx-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dx-muted);
}
body[data-authored-demo] .dx-strip-title {
  flex-basis: 100%;
  margin: 0 0 4px;
  text-align: center;
  font: 600 12px/1.4 var(--dx-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dx-accent) 72%, var(--dx-fg));
}

/* Calendar rows (events, harvest, perspectives) */
body[data-authored-demo] .dx-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--dx-line);
}
body[data-authored-demo] .dx-rows li {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1.4fr) minmax(0, 1.6fr);
  gap: 8px 28px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--dx-line);
}
body[data-authored-demo] .dx-rows .dx-card-meta {
  margin: 0;
}
body[data-authored-demo] .dx-rows b {
  font-family: var(--dx-display);
  font-weight: var(--dx-display-weight);
  text-transform: var(--dx-display-case);
  font-size: 1.3rem;
  line-height: 1.15;
}
body[data-authored-demo] .dx-rows span {
  color: var(--dx-muted);
  line-height: 1.55;
}
@media (max-width: 760px) {
  body[data-authored-demo] .dx-rows li {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Checklist (move-out clean) */
body[data-authored-demo] .dx-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
body[data-authored-demo] .dx-checklist article {
  padding: 24px;
  border: 1px solid var(--dx-line);
  background: color-mix(in srgb, var(--dx-fg) 3%, var(--dx-bg));
}
body[data-authored-demo] .dx-checklist h3 {
  margin: 0 0 12px;
  font-family: var(--dx-display);
  font-weight: var(--dx-display-weight);
  font-size: 1.3rem;
}
body[data-authored-demo] .dx-checklist ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-authored-demo] .dx-checklist li {
  position: relative;
  padding-left: 26px;
  color: var(--dx-muted);
  line-height: 1.5;
}
body[data-authored-demo] .dx-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--dx-accent);
  font-weight: 700;
}

/* Stage photos on the Apex commission timeline */

/* The menu carries a Call link only where the header call icon is hidden for space. */
body[data-authored-demo] .authored-call-nav {
  display: none;
}
@media (max-width: 420px) {
  body[data-authored-demo] .authored-call {
    display: none;
  }
  body[data-authored-demo] nav.is-open .authored-call-nav {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}
@media (max-width: 380px) {
  body[data-authored-demo] main header > a:first-child small {
    display: none;
  }
  body[data-authored-demo] main header {
    column-gap: 8px;
  }
}
@media (max-width: 380px) {
  body[data-authored-demo] main header {
    flex-wrap: nowrap;
    padding-inline: 14px;
  }
  body[data-authored-demo] main header > a:first-child {
    min-width: 0;
    flex-shrink: 1;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  body[data-authored-demo] main header .authored-cta {
    padding-inline: 12px;
  }
}

/* ---------- Vesper & Rowe pilot: cinematic entrance, Ridge House story, property page ---------- */
@keyframes vrRise {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
}
/* The headline is the largest element on screen: it moves into place but is never hidden, so it paints at once. */
@keyframes vrMask {
  from {
    transform: translateY(0.18em);
  }
}

/* Ridge House story: the image column stays put while three chapters scroll past */
/* Inactive chapters step back in colour, not opacity, so their text keeps 4.5:1 contrast. */

/* Property page */

/* ---------- Batch 1: Ember & Oak (the fire) ---------- */
@keyframes eoEmberFloat {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
  }
  12% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--x, 40px), -82vh, 0) scale(0.4);
  }
}

/* Courses that slide sideways while the page scrolls down */

/* ---------- Batch 1: Hotel Nocturne (the night) ---------- */
@keyframes nocTwinkle {
  50% {
    opacity: 0.12;
  }
}

/* Sky band: --night runs 0 (sunset) to 1 (deep night) as the section scrolls past */
/* A dark scrim behind the copy keeps text readable over the brightest sunset. */

/* Ember's main clipped with overflow:hidden, which stops sticky children; clip keeps the clipping without that. */

/* The title column stays in front: dishes slide in from the right and pass under it. */

@media (max-width: 600px) {
  /* Make room for the Reserve pill on phones: the trust lines repeat in the table finder just below. */
}

/* Skip link: a solid chip in each concept's own colours, so it is readable on any page when keyboard focus lands on it. */
body[data-authored-demo] .skipLink {
  z-index: 1000;
  padding: 10px 16px;
  /* Some concept stylesheets reset link backgrounds with !important; the skip link must win everywhere. */
  background: var(--dx-fg) !important;
  color: var(--dx-bg) !important;
  font-weight: 700;
}

/* ---------- Batch 2 / Ironwood: the build, week by week ---------- */

/* Live: one pinned frame, each stage wiping up over the last. Declared for the first layout (motion allowed and
   scripting on) so the script never has to switch the page into this layout, which cost a full re-layout. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
}

/* ---------- Batch 2 / Fieldwork: a site section that draws itself ---------- */

/* Live: pinned while the lines draw, then the study model fades in under them */

/* main.iw clipped with overflow:hidden, which stops the build sequence from pinning; clip keeps the same edges */

/* ---------- Batch 3 / Apex: the studio unveiling ---------- */

/* Live: pinned in the dark, a light band sweeps across the car, then the card rises */
/* transitions only once the section has settled, so the card never fades out over the photo on load */

/* ---------- Batch 4 / Calder & Vale: the eleven days, on the docket ---------- */
/* stamps animate only once the docket has settled, so none is ever caught mid-fade on load */

/* ---------- Batch 4 / Northline: concentrated risk, stepped down ---------- */

/* ---------- Batch 4 / Aurelia: the results timeline ---------- */

/* Aurelia: the treatment suite opens from a rounded window the first time it is seen */

/* Calder tagline: #b66265 measured 3.5:1 on the scrolled header; this rose keeps the hue at 6:1+ */

/* ---------- Batch 5 / Bluestem: the route banner gets mowed ---------- */

/* ---------- Batch 5 / CleanSlate: a pressure gauge beside the comparison ---------- */
@media (min-width: 901px) {
  body[data-demo="cleanslate-exterior-wash"] .csVs .csHead {
    grid-template-columns: minmax(0, 1fr) 330px;
    max-width: none;
    column-gap: clamp(32px, 5vw, 72px);
  }
  body[data-demo="cleanslate-exterior-wash"] .csVs .csHead > :not(.csGauge) {
    grid-column: 1;
  }
  body[data-demo="cleanslate-exterior-wash"] .csGauge {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
  }
}
body[data-demo="cleanslate-exterior-wash"] .csGauge {
  max-width: 330px;
  margin: 0;
}
body[data-demo="cleanslate-exterior-wash"] .csGauge svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
body[data-demo="cleanslate-exterior-wash"] .csGauge path {
  fill: none;
  stroke-width: 14;
}
body[data-demo="cleanslate-exterior-wash"] .csGaugeTrack {
  stroke: var(--concrete-3);
}
body[data-demo="cleanslate-exterior-wash"] .csGaugeSafe {
  stroke: var(--water);
}
body[data-demo="cleanslate-exterior-wash"] .csGaugeHarsh {
  stroke: var(--slate);
}
body[data-demo="cleanslate-exterior-wash"] .csGauge line {
  stroke: var(--muted);
  stroke-width: 1.5;
}
body[data-demo="cleanslate-exterior-wash"] .csGauge line.major {
  stroke: var(--ink);
  stroke-width: 2.5;
}
body[data-demo="cleanslate-exterior-wash"] .csGauge text {
  fill: var(--ink);
  font:
    600 11px "Demo Mono",
    ui-monospace,
    monospace;
  text-anchor: middle;
}
body[data-demo="cleanslate-exterior-wash"] .csGauge circle {
  fill: var(--ink);
}
body[data-demo="cleanslate-exterior-wash"] .csNeedle {
  transform-origin: 160px 160px;
  transform: rotate(var(--to));
}
body[data-demo="cleanslate-exterior-wash"] .csNeedle line {
  stroke-linecap: round;
  stroke-width: 4;
}
body[data-demo="cleanslate-exterior-wash"] .csNeedleSoft line {
  stroke: var(--water);
}
body[data-demo="cleanslate-exterior-wash"] .csNeedleRental line {
  stroke: var(--slate);
  stroke-dasharray: 6 5;
}
body[data-demo="cleanslate-exterior-wash"] .csGauge.is-live:not(.is-on) .csNeedle {
  transform: rotate(0deg);
}
body[data-demo="cleanslate-exterior-wash"] .csGauge.is-live .csNeedle {
  transition: transform 1.6s cubic-bezier(0.25, 1.4, 0.4, 1);
}
body[data-demo="cleanslate-exterior-wash"] .csGauge.is-live .csNeedleRental {
  transition-delay: 0.5s;
}
body[data-demo="cleanslate-exterior-wash"] .csGauge figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink);
}
body[data-demo="cleanslate-exterior-wash"] .csGauge figcaption span {
  display: grid;
}
body[data-demo="cleanslate-exterior-wash"] .csGauge figcaption span::before {
  content: "";
  width: 28px;
  height: 4px;
  margin-bottom: 6px;
  background: var(--water);
}
body[data-demo="cleanslate-exterior-wash"] .csGauge .csGaugeKeyRental::before {
  background: repeating-linear-gradient(90deg, var(--slate) 0 6px, transparent 6px 11px);
}

/* ---------- Batch 5 / Fixwell: the two texts every customer gets ---------- */
@keyframes fwType {
  50% {
    opacity: 0.3;
    transform: translateY(-3px);
  }
}
@keyframes fwMsgIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
}

/* ---------- Batch 5 / Ridgeback: rain driving across the storm hero ---------- */
@keyframes rbRainFall {
  to {
    transform: translate3d(-18.76px, 70px, 0);
  }
}
@keyframes rbRainFall2 {
  to {
    transform: translate3d(-25.4px, 110px, 0);
  }
}

/* ---------- Batch 5 / Tidy Oak: each room's checklist ticks itself off ---------- */

/* ==========================================================================
   Luxury concepts (Apex, Aurelia, Hotel Nocturne, Vesper & Rowe), 2026-10-12:
   a fine film grain over the page, and a curtain transition between the
   concept's own pages (cross-document View Transitions; ignored by browsers
   without them). Both are off for reduced motion / print.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  @keyframes dx-curtain-out {
    to {
      opacity: 0.4;
      transform: scale(0.985);
    }
  }

  @keyframes dx-curtain-in {
    from {
      clip-path: inset(100% 0 0 0);
    }
  }

  /* Only the luxury concepts get the curtain; other concepts keep the browser's quick cross-fade. */
}

/* ==========================================================================
   Home-service concepts (Bluestem, CleanSlate, Tidy Oak, Fixwell, Ridgeback),
   2026-10-12: section titles at editorial scale on large screens, each in its
   concept's own face. Phone sizes are unchanged (tuned in demo-mobile-type).
   ========================================================================== */
@media (min-width: 1024px) {
  body[data-demo="bluestem-lawn-co"] :is(.bsSectionHead, .bsSizeCopy, .bsArea .dx-reveal) > h2,
  body[data-demo="cleanslate-exterior-wash"] :is(.csHead, .csResultsCopy, .csClose .dx-reveal) > h2,
  body[data-demo="tidy-oak-home-cleaning"] :is(.toHead, .toPromise .dx-reveal) > h2,
  body[data-demo="fixwell-handyman"] :is(.fwHead, .fwWhy .dx-reveal, .fwClose .dx-reveal) > h2,
  body[data-demo="ridgeback-roofing"] :is(.rbHead, .rbCrew .dx-reveal, .rbClose .dx-reveal) > h2,
  body:is(
      [data-demo="bluestem-lawn-co"],
      [data-demo="cleanslate-exterior-wash"],
      [data-demo="tidy-oak-home-cleaning"],
      [data-demo="fixwell-handyman"],
      [data-demo="ridgeback-roofing"]
    )
    :is(.dx-feature-head, .dx-proof-head)
    > h2 {
    max-width: 16ch;
    font-size: clamp(3.4rem, 5.9vw, 6.4rem);
    line-height: 0.95;
    text-wrap: balance;
  }
}

/* ==========================================================================
   Depth (2026-10-12): 3D cards and pointer-reactive heroes, chosen per
   concept in demo-authored.js. Pointer devices only; off under reduced
   motion. Scripts write custom properties; these rules decide what moves.
   ========================================================================== */
.dx-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .dx-tilt {
    transform: perspective(1000px) rotateX(var(--dx-rx, 0deg)) rotateY(var(--dx-ry, 0deg));
    transform-style: preserve-3d;
    transition:
      transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
      box-shadow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .dx-tilt.is-tilting {
    transition-duration: 0.12s, 0.6s;
    box-shadow: 0 26px 50px -18px #00000059;
  }
  .dx-scene-live .dx-light {
    transition: opacity 0.5s ease;
  }
}

/* ---------- Depth on touch screens (2026-10-12) ----------
   Phones have no pointer to follow, so the same depth is driven by scroll instead: the hero photo drifts slower
   than the page, particle layers (stars, embers, rain) drift at their own rate, and cards and framed hero art settle
   in from a slight 3D tilt as they arrive. Scroll-linked only (nothing runs on its own), skipped under reduced
   motion and in browsers without scroll timelines. The pointer version lives in demo-authored.js (DEPTH). */
@keyframes dx-drift {
  to {
    translate: 0 26vh;
  }
}
@keyframes dx-drift-near {
  from {
    scale: 1.12;
  }
  to {
    scale: 1.12;
    translate: 0 30px;
  }
}
@keyframes dx-drift-far {
  to {
    translate: 0 40vh;
  }
}
@keyframes dx-tip-in {
  from {
    transform: perspective(900px) rotateX(14deg);
  }
  to {
    transform: perspective(900px) rotateX(0deg);
  }
}
@keyframes dx-swing-in {
  from {
    transform: perspective(1000px) rotateY(-16deg) rotate(-2deg);
  }
  to {
    transform: perspective(1000px) rotateY(0deg) rotate(-1deg);
  }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (hover: none) {
    /* Full-bleed heroes: the photo drifts at about a quarter of scroll speed. Keeps the 2.4 s settle-in. */
    /* Photos that only part-fill their hero get headroom instead of a long drift, so no edge ever shows.
       (Ironwood's equivalent lives in its editorial.css.) */
    /* Bluestem and Ridgeback heroes are taller than the screen and do not clip; the drift must stay inside. */
    /* Particle layers sit further back than the photo. */
    /* Cards tip up into place as they enter. */
    body[data-authored-demo] .dx-card,
    body[data-demo="hotel-nocturne"] .room-card,
    body[data-demo="fixwell-handyman"] .fwStrip > figure {
      transform-origin: 50% 100%;
      animation: dx-tip-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    /* Framed hero art swings in like a photo being pinned up. */
  }
}

/* Desktop header action (2026-10-13). Concepts whose desktop header has no action keep the phone action on desktop,
   with its fuller label, at the far right of the fixed header, so the booking or inquiry is one click away from any
   point on the page (as on the best restaurant and contractor sites). */
.authored-cta-long {
  display: none;
}
@media (min-width: 801px) {
  body[data-authored-demo] .authored-cta--desktop {
    display: inline-flex;
    flex: none;
    order: 99;
    align-items: center;
    min-height: 42px;
    margin-left: 28px;
    padding: 0 18px;
    border: 1px solid currentColor;
    color: inherit;
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition:
      background-color 0.25s ease,
      color 0.25s ease;
  }
  body[data-authored-demo] .authored-cta--desktop .authored-cta-short {
    display: none;
  }
  body[data-authored-demo] .authored-cta--desktop .authored-cta-long {
    display: inline;
  }
  body[data-authored-demo] .authored-cta--desktop:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }
}

/* Phone touch and type (2026-10-13), from a 375px sweep of all 59 concept pages.
   - Form fields at 16px: below that, iPhone Safari zooms the whole page when a field is tapped.
   - Form labels and the review line read as text, so they leave the 11px label floor for 13px.
   - Text links that stand alone in a section get a 44px tap height. */
@media (max-width: 800px) {
  body[data-authored-demo] .restored-form :is(input, select, textarea) {
    font-size: 16px;
  }
  body[data-authored-demo] .restored-form label {
    font-size: 13px;
  }
  body[data-authored-demo] main .dx-anchor {
    font-size: 13px;
  }
}

/* public/native-demos/demo-widgets.css */
/* Signature home-page widgets, one per native demo.
   Loaded last so each widget is drawn in its concept's own palette and type (the --dx-* tokens in
   demo-extensions.css) instead of the generic form styling layered up in demo-systems/improvements. */

/* ---------- Shared frame ---------- */
body[data-authored-demo]
  :is(
    .commission-specification-section,
    .treatment-map-section,
    .case-architecture-section,
    .fireline-section,
    .site-section,
    .line-of-sight-section,
    .private-dossier-section,
    .build-ledger,
    .room-selector-section
  ) {
  --w-bg: var(--dx-bg);
  --w-fg: var(--dx-fg);
  --w-accent: var(--dx-accent);
  --w-on-accent: #0c0c0c;
  --w-line: color-mix(in srgb, var(--w-fg) 16%, transparent);
  --w-muted: color-mix(in srgb, var(--w-fg) 80%, transparent);
  --w-panel: color-mix(in srgb, var(--w-fg) 5%, var(--w-bg));
  position: relative;
  max-width: none;
  margin: 0;
  padding: clamp(72px, 9vw, 140px) 6vw;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--w-bg);
  color: var(--w-fg);
  font-family: var(--dx-body);
}
body[data-authored-demo]
  :is(
    .commission-specification-section,
    .treatment-map-section,
    .case-architecture-section,
    .fireline-section,
    .site-section,
    .line-of-sight-section,
    .private-dossier-section,
    .build-ledger
  )
  > h2 {
  max-width: 18ch;
  margin: 0 0 clamp(36px, 4.5vw, 64px);
  color: var(--w-fg);
  font-family: var(--dx-display);
  font-size: clamp(2.4rem, 4.8vw, 4.6rem);
  font-weight: var(--dx-display-weight);
  line-height: 0.98;
  letter-spacing: var(--dx-display-tracking);
  text-align: left;
  text-transform: var(--dx-display-case);
  text-wrap: balance;
}
body[data-authored-demo]
  :is(
    .commission-specification-section,
    .treatment-map-section,
    .case-architecture-section,
    .fireline-section,
    .site-section,
    .line-of-sight-section,
    .private-dossier-section,
    .build-ledger
  )
  > h2::before {
  content: var(--w-kicker);
  display: block;
  margin-bottom: 22px;
  color: var(--w-accent);
  font: 600 11px/1.4 var(--dx-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
body[data-authored-demo] :is(.fireline-section, .private-dossier-section) > h2 i {
  color: var(--w-accent);
  font-style: italic;
}
/* Small uppercase labels inside widget panels. */
body[data-authored-demo]
  :is(.journal-content, .journey-section, .phase-content, .experience-content, .document-content, .ledger-facts)
  strong,
body[data-authored-demo] .ledger-facts dt {
  display: block;
  margin-bottom: 8px;
  color: var(--w-accent);
  font: 600 11px/1.4 var(--dx-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Shared option chip. */
body[data-authored-demo] :is(.spec-option, .brief-option, .layer-toggle) {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--w-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--w-fg);
  font: 500 12px/1.2 var(--dx-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: none;
  cursor: pointer;
  transition: border-color 0.25s ease;
}
body[data-authored-demo] :is(.spec-option, .brief-option, .layer-toggle):hover {
  border-color: var(--w-accent);
  background: transparent;
  transform: none;
}
body[data-authored-demo] :is(.spec-option, .brief-option, .layer-toggle).active {
  border-color: var(--w-accent);
  background: var(--w-accent);
  color: var(--w-on-accent);
}
body[data-authored-demo]
  :is(
    .spec-option,
    .brief-option,
    .layer-toggle,
    .concern-card,
    .phase-node,
    .fireline-stage,
    .clock-time,
    .los-node,
    .ledger-stage
  ):focus-visible {
  outline: 2px solid var(--w-accent);
  outline-offset: 3px;
}

/* Shared detail-panel entrance. */
/* Movement only: panel text is never faded, so it stays readable (and measurable) while it settles. */
@keyframes w-rise {
  from {
    transform: translateY(10px);
  }
}
body[data-authored-demo]
  :is(
    .journal-content,
    .journey-section,
    .phase-content,
    .experience-content,
    .los-details > *,
    .stage-details,
    .diagram-state,
    .fw-layer
  ) {
  animation: w-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* ---------- Apex Atelier: commission builder ---------- */

/* ---------- Aurelia: treatment map ---------- */

/* Text links styled as the concept's primary action. */
body[data-authored-demo] :is(.journey-cta a, .phase-cta a, .brief-next-steps a, .rooms-head a) {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  border-bottom: 1px solid currentColor;
  color: var(--w-fg);
  font: 600 12px/1.2 var(--dx-label);
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}
body[data-authored-demo] :is(.journey-cta a, .phase-cta a)::after {
  content: "\2197";
  color: var(--w-accent);
}

/* ---------- Calder & Vale: case architecture ---------- */

/* ---------- Ember & Oak: the fireline ---------- */

/* ---------- Fieldwork: site section ---------- */

/* ---------- Hotel Nocturne: the nocturne day ---------- */

/* ---------- Hotel Nocturne: room types ---------- */

/* ---------- Northline: line of sight ---------- */

/* ---------- Vesper & Rowe: private dossier ---------- */

/* ---------- Ironwood: build ledger ---------- */

/* ---------- Narrow screens ---------- */
@media (max-width: 640px) {
  /* Step-style rows scroll sideways instead of crushing into slivers. */
  :is(.concern-grid, .chronology-timeline, .fireline-stages, .room-grid) > * {
    scroll-snap-align: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-authored-demo]
    :is(
      .journal-content,
      .journey-section,
      .phase-content,
      .experience-content,
      .los-details > *,
      .stage-details,
      .diagram-state,
      .fw-layer,
      .fireline-hearth img
    ) {
    animation: none;
  }
}

/* public/concept-conversion.css */
/* The single Forge element on a concept site: a collapsed corner badge (lib/concept-conversion.ts).
   Scoped with `all: initial` so a concept's own type and colour rules never reach it. */
concept-badge {
  all: initial;
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 2147483000;
  display: block;
  max-width: calc(100vw - 32px);
  font:
    600 13px/1.4 system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;
  color: #f4efe6;
}
concept-badge * {
  box-sizing: border-box;
  text-transform: none;
  letter-spacing: normal;
}
/* Concept stylesheets style bare nav and a elements; keep the badge's layout regardless. */
concept-badge nav {
  display: grid !important;
  justify-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}
concept-badge nav a {
  width: 100% !important;
  margin: 0 !important;
}
concept-badge details {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 10px;
}
concept-badge summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(14, 14, 13, 0.86);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f4efe6;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color 0.2s ease;
}
concept-badge summary::-webkit-details-marker {
  display: none;
}
concept-badge summary:hover {
  background: rgba(14, 14, 13, 0.96);
}
concept-badge summary:focus-visible {
  outline: 2px solid #ff8a3d;
  outline-offset: 3px;
}
concept-badge .cb-mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(135deg, #ff9d57, #e35d1c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  flex: none;
}
concept-badge .cb-nudge {
  display: none;
  color: #ffb27a;
}
/* Near the end of the page the badge offers the next step, replacing the old full-width sales section. */
concept-badge[data-nudge] .cb-nudge {
  display: inline;
}
concept-badge[data-nudge] .cb-label::after {
  content: " ·";
}
concept-badge details[open] .cb-nudge,
concept-badge details[open] .cb-label::after {
  display: none;
  content: none;
}
concept-badge .cb-panel {
  width: min(340px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: #121210;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
concept-badge .cb-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f4efe6;
}
concept-badge .cb-note {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: #cfcabf;
}
concept-badge nav {
  display: grid;
  gap: 8px;
}
concept-badge a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #f4efe6;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
concept-badge a:hover {
  border-color: rgba(255, 255, 255, 0.45);
}
concept-badge a.cb-primary {
  border-color: #ff8a3d;
  background: #ff8a3d;
  color: #160b03;
}
concept-badge a.cb-primary:hover {
  background: #ff9d57;
}
concept-badge a:focus-visible {
  outline: 2px solid #ff8a3d;
  outline-offset: 2px;
}
@media (max-width: 600px) {
  concept-badge {
    left: 12px;
    bottom: 12px;
  }
  concept-badge summary {
    min-height: 44px;
    font-size: 12px;
  }
}
/* After a few seconds or some scrolling the badge collapses to its mark so it never covers the concept's own
   buttons; hover, focus, opening it, or the end-of-page nudge show the label again. The label stays in the
   accessibility tree throughout. */
concept-badge[data-compact]:not([data-nudge]) details:not([open]) summary:not(:hover):not(:focus-visible) {
  width: 44px;
  padding: 0;
  justify-content: center;
}
concept-badge[data-compact]:not([data-nudge]) details:not([open]) summary:not(:hover):not(:focus-visible) .cb-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 600px) {
  concept-badge[data-compact]:not([data-nudge]) details:not([open]) summary:not(:hover):not(:focus-visible) {
    width: 36px;
    min-height: 36px;
  }
  concept-badge[data-compact]:not([data-nudge]) {
    left: 6px;
  }
}
@media print {
  concept-badge {
    display: none;
  }
}

/* public/native-demos/demo-mobile-type.css */
/* Generated by scripts/generate-demo-mobile-type.mjs: minimum type sizes for the concepts. */
@media (max-width: 600px) {
  :where(body[data-demo="apex-atelier"]) .hero span,
  :where(body[data-demo="apex-atelier"]) .manifesto>span,
  :where(body[data-demo="apex-atelier"]) .machine span,
  :where(body[data-demo="apex-atelier"]) .sub>span,
  :where(body[data-demo="apex-atelier"]) .contact>span,
  :where(body[data-demo="apex-atelier"]) footer,
  :where(body[data-demo="apex-atelier"]) .apexTrust span,
  :where(body[data-demo="apex-atelier"]) .apexTimeline li,
  :where(body[data-demo="apex-atelier"]) .apexQuote span,
  :where(body[data-demo="apex-atelier"]) .leadForm label,
  :where(body[data-demo="aurelia-med-spa"]) nav,
  :where(body[data-demo="aurelia-med-spa"]) .book,
  :where(body[data-demo="aurelia-med-spa"]) .heroCopy>span,
  :where(body[data-demo="aurelia-med-spa"]) .head>span,
  :where(body[data-demo="aurelia-med-spa"]) .approach>div>span,
  :where(body[data-demo="aurelia-med-spa"]) .results>span,
  :where(body[data-demo="aurelia-med-spa"]) .consult>div>span,
  :where(body[data-demo="aurelia-med-spa"]) .primary,
  :where(body[data-demo="aurelia-med-spa"]) .hero aside span,
  :where(body[data-demo="aurelia-med-spa"]) .promise,
  :where(body[data-demo="aurelia-med-spa"]) .treatmentGrid span,
  :where(body[data-demo="aurelia-med-spa"]) .approach li,
  :where(body[data-demo="aurelia-med-spa"]) .card>span,
  :where(body[data-demo="aurelia-med-spa"]) .card dl div,
  :where(body[data-demo="aurelia-med-spa"]) footer,
  :where(body[data-demo="aurelia-med-spa"]) .auHeroCopy>span,
  :where(body[data-demo="aurelia-med-spa"]) .auApproach>span,
  :where(body[data-demo="aurelia-med-spa"]) .auExpertise>div>span,
  :where(body[data-demo="aurelia-med-spa"]) .auExperience>div>span,
  :where(body[data-demo="aurelia-med-spa"]) .auCare>span,
  :where(body[data-demo="aurelia-med-spa"]) .auConsult>div>span,
  :where(body[data-demo="aurelia-med-spa"]) .auAssurance span,
  :where(body[data-demo="aurelia-med-spa"]) .auAssurance b,
  :where(body[data-demo="aurelia-med-spa"]) .auRows p,
  :where(body[data-demo="aurelia-med-spa"]) .auFooter,
  :where(body[data-demo="aurelia-med-spa"]) .auStill:after,
  :where(body[data-demo="aurelia-med-spa"]) .auRealCopy>span,
  :where(body[data-demo="aurelia-med-spa"]) .auRealCopy small,
  :where(body[data-demo="aurelia-med-spa"]) .auOffer>span,
  :where(body[data-demo="aurelia-med-spa"]) .auConfidence>span,
  :where(body[data-demo="aurelia-med-spa"]) .auFinal,
  :where(body[data-demo="aurelia-med-spa"]) .auHomeIntro>span,
  :where(body[data-demo="aurelia-med-spa"]) .auHomeTreat span,
  :where(body[data-demo="aurelia-med-spa"]) .auHomeClose span,
  :where(body[data-demo="aurelia-med-spa"]) .auArchFooter,
  :where(body[data-demo="aurelia-med-spa"]) .auSubHero>span,
  :where(body[data-demo="aurelia-med-spa"]) .consultPage aside>span,
  :where(body[data-demo="aurelia-med-spa"]) .auHero:after,
  :where(body[data-demo="aurelia-med-spa"]) .auHomeTreat article:after,
  :where(body[data-demo="aurelia-med-spa"]) .auHeroTrust span,
  :where(body[data-demo="aurelia-med-spa"]) .auRealCopy blockquote small,
  :where(body[data-demo="aurelia-med-spa"]) .leadForm label,
  :where(body[data-demo="calder-and-vale"]) .hero span,
  :where(body[data-demo="calder-and-vale"]) .position>span,
  :where(body[data-demo="calder-and-vale"]) .result>span,
  :where(body[data-demo="calder-and-vale"]) .sub>span,
  :where(body[data-demo="calder-and-vale"]) .contact>span,
  :where(body[data-demo="calder-and-vale"]) .hero aside,
  :where(body[data-demo="calder-and-vale"]) footer,
  :where(body[data-demo="calder-and-vale"]) .lawTrust span,
  :where(body[data-demo="calder-and-vale"]) .lawCase span,
  :where(body[data-demo="calder-and-vale"]) .lawCase dt,
  :where(body[data-demo="calder-and-vale"]) .leadForm label,
  :where(body[data-demo="ember-and-oak"]) nav,
  :where(body[data-demo="ember-and-oak"]) .reserve,
  :where(body[data-demo="ember-and-oak"]) .copy>span,
  :where(body[data-demo="ember-and-oak"]) .head>span,
  :where(body[data-demo="ember-and-oak"]) .story>div>span,
  :where(body[data-demo="ember-and-oak"]) .visit>div>span,
  :where(body[data-demo="ember-and-oak"]) .hero aside,
  :where(body[data-demo="ember-and-oak"]) .ticker,
  :where(body[data-demo="ember-and-oak"]) .menuGrid span,
  :where(body[data-demo="ember-and-oak"]) .story dl div,
  :where(body[data-demo="ember-and-oak"]) .card>span,
  :where(body[data-demo="ember-and-oak"]) .card>small,
  :where(body[data-demo="ember-and-oak"]) footer,
  :where(body[data-demo="ember-and-oak"]) .eoHeroCopy>span,
  :where(body[data-demo="ember-and-oak"]) .eoIntro>span,
  :where(body[data-demo="ember-and-oak"]) .eoStory>div>span,
  :where(body[data-demo="ember-and-oak"]) .eoRoom>span,
  :where(body[data-demo="ember-and-oak"]) .eoBooking>div>span,
  :where(body[data-demo="ember-and-oak"]) .eoReserve,
  :where(body[data-demo="ember-and-oak"]) .eoDishes article>span,
  :where(body[data-demo="ember-and-oak"]) .eoRule>span,
  :where(body[data-demo="ember-and-oak"]) .eoRoom aside,
  :where(body[data-demo="ember-and-oak"]) .eoFooter,
  :where(body[data-demo="ember-and-oak"]) .eoStoryImage:after,
  :where(body[data-demo="ember-and-oak"]) .eoRealCopy>span,
  :where(body[data-demo="ember-and-oak"]) .eoRealCopy small,
  :where(body[data-demo="ember-and-oak"]) .eoConvert>div>span,
  :where(body[data-demo="ember-and-oak"]) .eoBookingBar label,
  :where(body[data-demo="ember-and-oak"]) .eoConvert aside>span,
  :where(body[data-demo="ember-and-oak"]) .eoConvert blockquote small,
  :where(body[data-demo="ember-and-oak"]) .eoFinal,
  :where(body[data-demo="ember-and-oak"]) .eoHomeMenu>span,
  :where(body[data-demo="ember-and-oak"]) .eoHomeRoom span,
  :where(body[data-demo="ember-and-oak"]) .eoArchFooter,
  :where(body[data-demo="ember-and-oak"]) .eoSubHero>span,
  :where(body[data-demo="ember-and-oak"]) .eoHero:after,
  :where(body[data-demo="ember-and-oak"]) .eoHomeRoom article:after,
  :where(body[data-demo="ember-and-oak"]) .eoHeroTrust span,
  :where(body[data-demo="ember-and-oak"]) .eoRealCopy blockquote small,
  :where(body[data-demo="ember-and-oak"]) .leadForm label,
  :where(body[data-demo="fieldwork-architecture"]) .hero span,
  :where(body[data-demo="fieldwork-architecture"]) .position>span,
  :where(body[data-demo="fieldwork-architecture"]) .project span,
  :where(body[data-demo="fieldwork-architecture"]) .practice>span,
  :where(body[data-demo="fieldwork-architecture"]) .sub>span,
  :where(body[data-demo="fieldwork-architecture"]) .contact>span,
  :where(body[data-demo="fieldwork-architecture"]) .hero aside,
  :where(body[data-demo="fieldwork-architecture"]) footer,
  :where(body[data-demo="fieldwork-architecture"]) .fieldTrust span,
  :where(body[data-demo="fieldwork-architecture"]) .fieldFit span,
  :where(body[data-demo="fieldwork-architecture"]) .leadForm label,
  :where(body[data-demo="hotel-nocturne"]) .hero span,
  :where(body[data-demo="hotel-nocturne"]) .intro>span,
  :where(body[data-demo="hotel-nocturne"]) .stay span,
  :where(body[data-demo="hotel-nocturne"]) .hours>span,
  :where(body[data-demo="hotel-nocturne"]) .sub>span,
  :where(body[data-demo="hotel-nocturne"]) .contact>span,
  :where(body[data-demo="hotel-nocturne"]) footer,
  :where(body[data-demo="hotel-nocturne"]) .hotelFacts span,
  :where(body[data-demo="hotel-nocturne"]) .hotelBooking span,
  :where(body[data-demo="hotel-nocturne"]) .hotelReview span,
  :where(body[data-demo="hotel-nocturne"]) .leadForm label,
  :where(body[data-demo="ironwood-contracting"]) .quote,
  :where(body[data-demo="ironwood-contracting"]) .heroCopy>span,
  :where(body[data-demo="ironwood-contracting"]) .sectionHead>span,
  :where(body[data-demo="ironwood-contracting"]) .work>div>span,
  :where(body[data-demo="ironwood-contracting"]) .primary,
  :where(body[data-demo="ironwood-contracting"]) .hero aside span,
  :where(body[data-demo="ironwood-contracting"]) .trust,
  :where(body[data-demo="ironwood-contracting"]) .serviceGrid span,
  :where(body[data-demo="ironwood-contracting"]) .steps span,
  :where(body[data-demo="ironwood-contracting"]) .work dl div,
  :where(body[data-demo="ironwood-contracting"]) footer,
  :where(body[data-demo="ironwood-contracting"]) .work:after,
  :where(body[data-demo="ironwood-contracting"]) .services:after,
  :where(body[data-demo="ironwood-contracting"]) .iwMark small,
  :where(body[data-demo="ironwood-contracting"]) .iwBlueprint span,
  :where(body[data-demo="ironwood-contracting"]) .iwHeroCopy>span,
  :where(body[data-demo="ironwood-contracting"]) .iwStatement>span,
  :where(body[data-demo="ironwood-contracting"]) .iwExpertise>div>span,
  :where(body[data-demo="ironwood-contracting"]) .iwProjectCopy>span,
  :where(body[data-demo="ironwood-contracting"]) .iwProcess>span,
  :where(body[data-demo="ironwood-contracting"]) .iwContact>span,
  :where(body[data-demo="ironwood-contracting"]) .iwScroll,
  :where(body[data-demo="ironwood-contracting"]) .iwMeasure,
  :where(body[data-demo="ironwood-contracting"]) .iwFooter,
  :where(body[data-demo="ironwood-contracting"]) .iwExpertise:before,
  :where(body[data-demo="ironwood-contracting"]) .iwProjectCopy:before,
  :where(body[data-demo="ironwood-contracting"]) .iwRealCopy>span,
  :where(body[data-demo="ironwood-contracting"]) .iwRealCopy small,
  :where(body[data-demo="ironwood-contracting"]) .iwOffer>span,
  :where(body[data-demo="ironwood-contracting"]) .iwProof>span,
  :where(body[data-demo="ironwood-contracting"]) .iwSticky,
  :where(body[data-demo="ironwood-contracting"]) .iwFinal,
  :where(body[data-demo="ironwood-contracting"]) .iwHomeIntro>span,
  :where(body[data-demo="ironwood-contracting"]) .iwHomeWork span,
  :where(body[data-demo="ironwood-contracting"]) .iwHomeClose span,
  :where(body[data-demo="ironwood-contracting"]) .archFooter,
  :where(body[data-demo="ironwood-contracting"]) .subHero>span,
  :where(body[data-demo="ironwood-contracting"]) .projectGrid span,
  :where(body[data-demo="ironwood-contracting"]) .contactPage aside>span,
  :where(body[data-demo="ironwood-contracting"]) .iwHero:after,
  :where(body[data-demo="ironwood-contracting"]) .iwHomeWork article:before,
  :where(body[data-demo="ironwood-contracting"]) .iwHeroTrust span,
  :where(body[data-demo="ironwood-contracting"]) .iwRealCopy blockquote small,
  :where(body[data-demo="ironwood-contracting"]) .iwSticky>*,
  :where(body[data-demo="ironwood-contracting"]) .leadForm label,
  :where(body[data-demo="northline-private-wealth"]) .hero span,
  :where(body[data-demo="northline-private-wealth"]) .thesis>span,
  :where(body[data-demo="northline-private-wealth"]) .sub>span,
  :where(body[data-demo="northline-private-wealth"]) .contact>span,
  :where(body[data-demo="northline-private-wealth"]) .proof span,
  :where(body[data-demo="northline-private-wealth"]) footer,
  :where(body[data-demo="northline-private-wealth"]) .northDisclosure b,
  :where(body[data-demo="northline-private-wealth"]) .northScenario span,
  :where(body[data-demo="northline-private-wealth"]) .northScenario dt,
  :where(body[data-demo="northline-private-wealth"]) .leadForm label,
  :where(body[data-demo="vesper-and-rowe"]) .hero span,
  :where(body[data-demo="vesper-and-rowe"]) .statement>span,
  :where(body[data-demo="vesper-and-rowe"]) .feature article>span,
  :where(body[data-demo="vesper-and-rowe"]) .close>span,
  :where(body[data-demo="vesper-and-rowe"]) .subHero>span,
  :where(body[data-demo="vesper-and-rowe"]) .contact>span,
  :where(body[data-demo="vesper-and-rowe"]) .metrics span,
  :where(body[data-demo="vesper-and-rowe"]) footer,
  :where(body[data-demo="vesper-and-rowe"]) .vrCredentials span,
  :where(body[data-demo="vesper-and-rowe"]) .vrProcess span,
  :where(body[data-demo="vesper-and-rowe"]) .vrTestimonial span,
  :where(body[data-demo="vesper-and-rowe"]) .leadForm label,
  :where(body[data-authored-demo]) body[data-demo="hotel-nocturne"] .time-period,
  :where(body[data-authored-demo]) .demo-archive .di-process-chapters span,
  :where(body[data-authored-demo]) .dx-kicker,
  :where(body[data-authored-demo]) .dx-media figcaption,
  :where(body[data-authored-demo]) .dx-facts dt,
  :where(body[data-authored-demo]) .dx-table caption,
  :where(body[data-authored-demo]) .dx-table thead th,
  :where(body[data-authored-demo]) .dx-filter,
  :where(body[data-authored-demo]) .dx-count,
  :where(body[data-authored-demo]) .dx-profile .dx-role,
  :where(body[data-authored-demo]) .dx-estimator label,
  :where(body[data-authored-demo]) .dx-quote figcaption,
  :where(body[data-authored-demo]) .dx-note,
  :where(body[data-authored-demo]) .dx-diet,
  :where(body[data-authored-demo]) body[data-demo="ironwood-contracting"] .projectGrid .iwStory dt,
  :where(body[data-authored-demo]) body[data-demo="ironwood-contracting"] .iwPrice > span,
  :where(body[data-authored-demo]) body[data-demo="ironwood-contracting"] .iwPriceGrid b,
  :where(body[data-authored-demo]) body[data-demo="fieldwork-architecture"] .site-section .section-drawing svg text,
  :where(body[data-authored-demo]) body[data-demo="hotel-nocturne"] .room-selector-section .room-card span,
  :where(body[data-authored-demo]) body[data-demo="vesper-and-rowe"] .private-dossier-section .brief-timestamp,
  :where(body[data-authored-demo]) body[data-demo="ironwood-contracting"] .build-ledger .ledger-checkpoints li {
    font-size: 11px;
  }
  :where(body[data-demo="apex-atelier"]) nav a,
  :where(body[data-demo="apex-atelier"]) .cta>span,
  :where(body[data-demo="apex-atelier"]) .copy>a,
  :where(body[data-demo="apex-atelier"]) .contact>a,
  :where(body[data-demo="apex-atelier"]) .leadForm button,
  :where(body[data-demo="apex-atelier"]) .copy>a:after,
  :where(body[data-demo="apex-atelier"]) .cta>a:after,
  :where(body[data-demo="apex-atelier"]) .contact .leadForm button:after,
  :where(body[data-demo="apex-atelier"]) .machine a:before,
  :where(body[data-demo="aurelia-med-spa"]) .card>a,
  :where(body[data-demo="aurelia-med-spa"]) .consult .card>a,
  :where(body[data-demo="aurelia-med-spa"]) .auNav nav a,
  :where(body[data-demo="aurelia-med-spa"]) .auNav>a:last-child,
  :where(body[data-demo="aurelia-med-spa"]) .auHeroCopy>a,
  :where(body[data-demo="aurelia-med-spa"]) .auOffer>a,
  :where(body[data-demo="aurelia-med-spa"]) .auSticky a,
  :where(body[data-demo="aurelia-med-spa"]) .auSubNav nav a,
  :where(body[data-demo="aurelia-med-spa"]) .leadForm button,
  :where(body[data-demo="calder-and-vale"]) nav a,
  :where(body[data-demo="calder-and-vale"]) .copy>a,
  :where(body[data-demo="calder-and-vale"]) .contact>a,
  :where(body[data-demo="calder-and-vale"]) .leadForm button,
  :where(body[data-demo="ember-and-oak"]) .copy>div a:first-child,
  :where(body[data-demo="ember-and-oak"]) .card a,
  :where(body[data-demo="ember-and-oak"]) .copy>div a:last-child,
  :where(body[data-demo="ember-and-oak"]) .textLink,
  :where(body[data-demo="ember-and-oak"]) .copy>div>a:first-child,
  :where(body[data-demo="ember-and-oak"]) .visit .card a,
  :where(body[data-demo="ember-and-oak"]) .eoNav nav a,
  :where(body[data-demo="ember-and-oak"]) .eoBookingBar>a,
  :where(body[data-demo="ember-and-oak"]) .eoSticky a,
  :where(body[data-demo="ember-and-oak"]) .eoSubNav nav a,
  :where(body[data-demo="ember-and-oak"]) .leadForm button,
  :where(body[data-demo="fieldwork-architecture"]) nav a,
  :where(body[data-demo="fieldwork-architecture"]) .copy>a,
  :where(body[data-demo="fieldwork-architecture"]) .contact>a,
  :where(body[data-demo="fieldwork-architecture"]) .leadForm button,
  :where(body[data-demo="hotel-nocturne"]) nav a,
  :where(body[data-demo="hotel-nocturne"]) .copy>a,
  :where(body[data-demo="hotel-nocturne"]) .contact>a,
  :where(body[data-demo="hotel-nocturne"]) .leadForm button,
  :where(body[data-demo="hotel-nocturne"]) .copy>a:after,
  :where(body[data-demo="hotel-nocturne"]) .cta>a:after,
  :where(body[data-demo="hotel-nocturne"]) .hotelBooking>a:after,
  :where(body[data-demo="hotel-nocturne"]) .contact .leadForm button:after,
  :where(body[data-demo="ironwood-contracting"]) .cta>span,
  :where(body[data-demo="ironwood-contracting"]) .cta>a,
  :where(body[data-demo="ironwood-contracting"]) .iwNav nav a,
  :where(body[data-demo="ironwood-contracting"]) .iwHeroCopy>a,
  :where(body[data-demo="ironwood-contracting"]) .iwContact>a,
  :where(body[data-demo="ironwood-contracting"]) .iwOffer>a,
  :where(body[data-demo="ironwood-contracting"]) .subNav nav a,
  :where(body[data-demo="ironwood-contracting"]) .leadForm button,
  :where(body[data-demo="northline-private-wealth"]) nav a,
  :where(body[data-demo="northline-private-wealth"]) .cta>span,
  :where(body[data-demo="northline-private-wealth"]) .copy>a,
  :where(body[data-demo="northline-private-wealth"]) .contact>a,
  :where(body[data-demo="northline-private-wealth"]) .leadForm button,
  :where(body[data-demo="vesper-and-rowe"]) nav a,
  :where(body[data-demo="vesper-and-rowe"]) .button,
  :where(body[data-demo="vesper-and-rowe"]) .leadForm button,
  :where(body[data-authored-demo]) .di-page a::after,
  :where(body[data-authored-demo]) .dx-button,
  :where(body[data-authored-demo]) demo-disclosure nav a,
  :where(body[data-authored-demo]) body[data-demo="hotel-nocturne"] .room-card a span,
  :where(body[data-authored-demo]) body[data-demo="ember-and-oak"] .eoTableBtn,
  :where(body[data-authored-demo]) body[data-demo="hotel-nocturne"] .room-card a > span {
    font-size: 12px;
  }
}
@media (min-width: 601px) {
  :where(body[data-demo="apex-atelier"]) .hero span,
  :where(body[data-demo="apex-atelier"]) .manifesto>span,
  :where(body[data-demo="apex-atelier"]) .machine span,
  :where(body[data-demo="apex-atelier"]) .sub>span,
  :where(body[data-demo="apex-atelier"]) .contact>span,
  :where(body[data-demo="apex-atelier"]) footer,
  :where(body[data-demo="apex-atelier"]) .apexTrust span,
  :where(body[data-demo="apex-atelier"]) .apexTimeline li,
  :where(body[data-demo="apex-atelier"]) .apexQuote span,
  :where(body[data-demo="apex-atelier"]) .leadForm label,
  :where(body[data-demo="aurelia-med-spa"]) nav,
  :where(body[data-demo="aurelia-med-spa"]) .book,
  :where(body[data-demo="aurelia-med-spa"]) .heroCopy>span,
  :where(body[data-demo="aurelia-med-spa"]) .head>span,
  :where(body[data-demo="aurelia-med-spa"]) .approach>div>span,
  :where(body[data-demo="aurelia-med-spa"]) .results>span,
  :where(body[data-demo="aurelia-med-spa"]) .consult>div>span,
  :where(body[data-demo="aurelia-med-spa"]) .primary,
  :where(body[data-demo="aurelia-med-spa"]) .hero aside span,
  :where(body[data-demo="aurelia-med-spa"]) .promise,
  :where(body[data-demo="aurelia-med-spa"]) .treatmentGrid span,
  :where(body[data-demo="aurelia-med-spa"]) .approach li,
  :where(body[data-demo="aurelia-med-spa"]) .card>span,
  :where(body[data-demo="aurelia-med-spa"]) .card dl div,
  :where(body[data-demo="aurelia-med-spa"]) footer,
  :where(body[data-demo="aurelia-med-spa"]) .auHeroCopy>span,
  :where(body[data-demo="aurelia-med-spa"]) .auApproach>span,
  :where(body[data-demo="aurelia-med-spa"]) .auExpertise>div>span,
  :where(body[data-demo="aurelia-med-spa"]) .auExperience>div>span,
  :where(body[data-demo="aurelia-med-spa"]) .auCare>span,
  :where(body[data-demo="aurelia-med-spa"]) .auConsult>div>span,
  :where(body[data-demo="aurelia-med-spa"]) .auAssurance span,
  :where(body[data-demo="aurelia-med-spa"]) .auAssurance b,
  :where(body[data-demo="aurelia-med-spa"]) .auRows p,
  :where(body[data-demo="aurelia-med-spa"]) .auFooter,
  :where(body[data-demo="aurelia-med-spa"]) .auStill:after,
  :where(body[data-demo="aurelia-med-spa"]) .auRealCopy>span,
  :where(body[data-demo="aurelia-med-spa"]) .auRealCopy small,
  :where(body[data-demo="aurelia-med-spa"]) .auOffer>span,
  :where(body[data-demo="aurelia-med-spa"]) .auConfidence>span,
  :where(body[data-demo="aurelia-med-spa"]) .auFinal,
  :where(body[data-demo="aurelia-med-spa"]) .auHomeIntro>span,
  :where(body[data-demo="aurelia-med-spa"]) .auHomeTreat span,
  :where(body[data-demo="aurelia-med-spa"]) .auHomeClose span,
  :where(body[data-demo="aurelia-med-spa"]) .auArchFooter,
  :where(body[data-demo="aurelia-med-spa"]) .auSubHero>span,
  :where(body[data-demo="aurelia-med-spa"]) .consultPage aside>span,
  :where(body[data-demo="aurelia-med-spa"]) .auHero:after,
  :where(body[data-demo="aurelia-med-spa"]) .auHomeTreat article:after,
  :where(body[data-demo="aurelia-med-spa"]) .auHeroTrust span,
  :where(body[data-demo="aurelia-med-spa"]) .auRealCopy blockquote small,
  :where(body[data-demo="aurelia-med-spa"]) .leadForm label,
  :where(body[data-demo="calder-and-vale"]) .hero span,
  :where(body[data-demo="calder-and-vale"]) .position>span,
  :where(body[data-demo="calder-and-vale"]) .result>span,
  :where(body[data-demo="calder-and-vale"]) .sub>span,
  :where(body[data-demo="calder-and-vale"]) .contact>span,
  :where(body[data-demo="calder-and-vale"]) .hero aside,
  :where(body[data-demo="calder-and-vale"]) footer,
  :where(body[data-demo="calder-and-vale"]) .lawTrust span,
  :where(body[data-demo="calder-and-vale"]) .lawCase span,
  :where(body[data-demo="calder-and-vale"]) .lawCase dt,
  :where(body[data-demo="calder-and-vale"]) .leadForm label,
  :where(body[data-demo="ember-and-oak"]) nav,
  :where(body[data-demo="ember-and-oak"]) .reserve,
  :where(body[data-demo="ember-and-oak"]) .copy>span,
  :where(body[data-demo="ember-and-oak"]) .head>span,
  :where(body[data-demo="ember-and-oak"]) .story>div>span,
  :where(body[data-demo="ember-and-oak"]) .visit>div>span,
  :where(body[data-demo="ember-and-oak"]) .hero aside,
  :where(body[data-demo="ember-and-oak"]) .ticker,
  :where(body[data-demo="ember-and-oak"]) .menuGrid span,
  :where(body[data-demo="ember-and-oak"]) .story dl div,
  :where(body[data-demo="ember-and-oak"]) .card>span,
  :where(body[data-demo="ember-and-oak"]) .card>small,
  :where(body[data-demo="ember-and-oak"]) footer,
  :where(body[data-demo="ember-and-oak"]) .eoHeroCopy>span,
  :where(body[data-demo="ember-and-oak"]) .eoIntro>span,
  :where(body[data-demo="ember-and-oak"]) .eoStory>div>span,
  :where(body[data-demo="ember-and-oak"]) .eoRoom>span,
  :where(body[data-demo="ember-and-oak"]) .eoBooking>div>span,
  :where(body[data-demo="ember-and-oak"]) .eoReserve,
  :where(body[data-demo="ember-and-oak"]) .eoDishes article>span,
  :where(body[data-demo="ember-and-oak"]) .eoRule>span,
  :where(body[data-demo="ember-and-oak"]) .eoRoom aside,
  :where(body[data-demo="ember-and-oak"]) .eoFooter,
  :where(body[data-demo="ember-and-oak"]) .eoStoryImage:after,
  :where(body[data-demo="ember-and-oak"]) .eoRealCopy>span,
  :where(body[data-demo="ember-and-oak"]) .eoRealCopy small,
  :where(body[data-demo="ember-and-oak"]) .eoConvert>div>span,
  :where(body[data-demo="ember-and-oak"]) .eoBookingBar label,
  :where(body[data-demo="ember-and-oak"]) .eoConvert aside>span,
  :where(body[data-demo="ember-and-oak"]) .eoConvert blockquote small,
  :where(body[data-demo="ember-and-oak"]) .eoFinal,
  :where(body[data-demo="ember-and-oak"]) .eoHomeMenu>span,
  :where(body[data-demo="ember-and-oak"]) .eoHomeRoom span,
  :where(body[data-demo="ember-and-oak"]) .eoArchFooter,
  :where(body[data-demo="ember-and-oak"]) .eoSubHero>span,
  :where(body[data-demo="ember-and-oak"]) .eoHero:after,
  :where(body[data-demo="ember-and-oak"]) .eoHomeRoom article:after,
  :where(body[data-demo="ember-and-oak"]) .eoHeroTrust span,
  :where(body[data-demo="ember-and-oak"]) .eoRealCopy blockquote small,
  :where(body[data-demo="ember-and-oak"]) .leadForm label,
  :where(body[data-demo="fieldwork-architecture"]) .hero span,
  :where(body[data-demo="fieldwork-architecture"]) .position>span,
  :where(body[data-demo="fieldwork-architecture"]) .project span,
  :where(body[data-demo="fieldwork-architecture"]) .practice>span,
  :where(body[data-demo="fieldwork-architecture"]) .sub>span,
  :where(body[data-demo="fieldwork-architecture"]) .contact>span,
  :where(body[data-demo="fieldwork-architecture"]) .hero aside,
  :where(body[data-demo="fieldwork-architecture"]) footer,
  :where(body[data-demo="fieldwork-architecture"]) .fieldTrust span,
  :where(body[data-demo="fieldwork-architecture"]) .fieldFit span,
  :where(body[data-demo="fieldwork-architecture"]) .leadForm label,
  :where(body[data-demo="hotel-nocturne"]) .hero span,
  :where(body[data-demo="hotel-nocturne"]) .intro>span,
  :where(body[data-demo="hotel-nocturne"]) .stay span,
  :where(body[data-demo="hotel-nocturne"]) .hours>span,
  :where(body[data-demo="hotel-nocturne"]) .sub>span,
  :where(body[data-demo="hotel-nocturne"]) .contact>span,
  :where(body[data-demo="hotel-nocturne"]) footer,
  :where(body[data-demo="hotel-nocturne"]) .hotelFacts span,
  :where(body[data-demo="hotel-nocturne"]) .hotelBooking span,
  :where(body[data-demo="hotel-nocturne"]) .hotelReview span,
  :where(body[data-demo="hotel-nocturne"]) .leadForm label,
  :where(body[data-demo="ironwood-contracting"]) .quote,
  :where(body[data-demo="ironwood-contracting"]) .heroCopy>span,
  :where(body[data-demo="ironwood-contracting"]) .sectionHead>span,
  :where(body[data-demo="ironwood-contracting"]) .work>div>span,
  :where(body[data-demo="ironwood-contracting"]) .primary,
  :where(body[data-demo="ironwood-contracting"]) .hero aside span,
  :where(body[data-demo="ironwood-contracting"]) .trust,
  :where(body[data-demo="ironwood-contracting"]) .serviceGrid span,
  :where(body[data-demo="ironwood-contracting"]) .steps span,
  :where(body[data-demo="ironwood-contracting"]) .work dl div,
  :where(body[data-demo="ironwood-contracting"]) footer,
  :where(body[data-demo="ironwood-contracting"]) .work:after,
  :where(body[data-demo="ironwood-contracting"]) .services:after,
  :where(body[data-demo="ironwood-contracting"]) .iwMark small,
  :where(body[data-demo="ironwood-contracting"]) .iwBlueprint span,
  :where(body[data-demo="ironwood-contracting"]) .iwHeroCopy>span,
  :where(body[data-demo="ironwood-contracting"]) .iwStatement>span,
  :where(body[data-demo="ironwood-contracting"]) .iwExpertise>div>span,
  :where(body[data-demo="ironwood-contracting"]) .iwProjectCopy>span,
  :where(body[data-demo="ironwood-contracting"]) .iwProcess>span,
  :where(body[data-demo="ironwood-contracting"]) .iwContact>span,
  :where(body[data-demo="ironwood-contracting"]) .iwScroll,
  :where(body[data-demo="ironwood-contracting"]) .iwMeasure,
  :where(body[data-demo="ironwood-contracting"]) .iwFooter,
  :where(body[data-demo="ironwood-contracting"]) .iwExpertise:before,
  :where(body[data-demo="ironwood-contracting"]) .iwProjectCopy:before,
  :where(body[data-demo="ironwood-contracting"]) .iwRealCopy>span,
  :where(body[data-demo="ironwood-contracting"]) .iwRealCopy small,
  :where(body[data-demo="ironwood-contracting"]) .iwOffer>span,
  :where(body[data-demo="ironwood-contracting"]) .iwProof>span,
  :where(body[data-demo="ironwood-contracting"]) .iwSticky,
  :where(body[data-demo="ironwood-contracting"]) .iwFinal,
  :where(body[data-demo="ironwood-contracting"]) .iwHomeIntro>span,
  :where(body[data-demo="ironwood-contracting"]) .iwHomeWork span,
  :where(body[data-demo="ironwood-contracting"]) .iwHomeClose span,
  :where(body[data-demo="ironwood-contracting"]) .archFooter,
  :where(body[data-demo="ironwood-contracting"]) .subHero>span,
  :where(body[data-demo="ironwood-contracting"]) .projectGrid span,
  :where(body[data-demo="ironwood-contracting"]) .contactPage aside>span,
  :where(body[data-demo="ironwood-contracting"]) .iwHero:after,
  :where(body[data-demo="ironwood-contracting"]) .iwHomeWork article:before,
  :where(body[data-demo="ironwood-contracting"]) .iwHeroTrust span,
  :where(body[data-demo="ironwood-contracting"]) .iwRealCopy blockquote small,
  :where(body[data-demo="ironwood-contracting"]) .iwSticky>*,
  :where(body[data-demo="ironwood-contracting"]) .leadForm label,
  :where(body[data-demo="northline-private-wealth"]) .hero span,
  :where(body[data-demo="northline-private-wealth"]) .thesis>span,
  :where(body[data-demo="northline-private-wealth"]) .sub>span,
  :where(body[data-demo="northline-private-wealth"]) .contact>span,
  :where(body[data-demo="northline-private-wealth"]) .proof span,
  :where(body[data-demo="northline-private-wealth"]) footer,
  :where(body[data-demo="northline-private-wealth"]) .northDisclosure b,
  :where(body[data-demo="northline-private-wealth"]) .northScenario span,
  :where(body[data-demo="northline-private-wealth"]) .northScenario dt,
  :where(body[data-demo="northline-private-wealth"]) .leadForm label,
  :where(body[data-demo="vesper-and-rowe"]) .hero span,
  :where(body[data-demo="vesper-and-rowe"]) .statement>span,
  :where(body[data-demo="vesper-and-rowe"]) .feature article>span,
  :where(body[data-demo="vesper-and-rowe"]) .close>span,
  :where(body[data-demo="vesper-and-rowe"]) .subHero>span,
  :where(body[data-demo="vesper-and-rowe"]) .contact>span,
  :where(body[data-demo="vesper-and-rowe"]) .metrics span,
  :where(body[data-demo="vesper-and-rowe"]) footer,
  :where(body[data-demo="vesper-and-rowe"]) .vrCredentials span,
  :where(body[data-demo="vesper-and-rowe"]) .vrProcess span,
  :where(body[data-demo="vesper-and-rowe"]) .vrTestimonial span,
  :where(body[data-demo="vesper-and-rowe"]) .leadForm label,
  :where(body[data-authored-demo]) body[data-demo="hotel-nocturne"] .time-period,
  :where(body[data-authored-demo]) .dx-kicker,
  :where(body[data-authored-demo]) .dx-media figcaption,
  :where(body[data-authored-demo]) .dx-facts dt,
  :where(body[data-authored-demo]) .dx-table caption,
  :where(body[data-authored-demo]) .dx-table thead th,
  :where(body[data-authored-demo]) .dx-filter,
  :where(body[data-authored-demo]) .dx-count,
  :where(body[data-authored-demo]) .dx-profile .dx-role,
  :where(body[data-authored-demo]) .dx-estimator label,
  :where(body[data-authored-demo]) .dx-quote figcaption,
  :where(body[data-authored-demo]) .dx-note,
  :where(body[data-authored-demo]) .dx-diet,
  :where(body[data-authored-demo]) body[data-demo="ironwood-contracting"] .projectGrid .iwStory dt,
  :where(body[data-authored-demo]) body[data-demo="ironwood-contracting"] .iwPrice > span,
  :where(body[data-authored-demo]) body[data-demo="ironwood-contracting"] .iwPriceGrid b,
  :where(body[data-authored-demo]) body[data-demo="fieldwork-architecture"] .site-section .section-drawing svg text,
  :where(body[data-authored-demo]) body[data-demo="hotel-nocturne"] .room-selector-section .room-card span,
  :where(body[data-authored-demo]) body[data-demo="vesper-and-rowe"] .private-dossier-section .brief-timestamp,
  :where(body[data-authored-demo]) body[data-demo="ironwood-contracting"] .build-ledger .ledger-checkpoints li {
    font-size: 11px;
  }
  :where(body[data-demo="apex-atelier"]) nav a,
  :where(body[data-demo="apex-atelier"]) .cta>span,
  :where(body[data-demo="apex-atelier"]) .copy>a,
  :where(body[data-demo="apex-atelier"]) .contact>a,
  :where(body[data-demo="apex-atelier"]) .leadForm button,
  :where(body[data-demo="apex-atelier"]) .copy>a:after,
  :where(body[data-demo="apex-atelier"]) .cta>a:after,
  :where(body[data-demo="apex-atelier"]) .contact .leadForm button:after,
  :where(body[data-demo="apex-atelier"]) .machine a:before,
  :where(body[data-demo="aurelia-med-spa"]) .card>a,
  :where(body[data-demo="aurelia-med-spa"]) .consult .card>a,
  :where(body[data-demo="aurelia-med-spa"]) .auNav nav a,
  :where(body[data-demo="aurelia-med-spa"]) .auNav>a:last-child,
  :where(body[data-demo="aurelia-med-spa"]) .auHeroCopy>a,
  :where(body[data-demo="aurelia-med-spa"]) .auOffer>a,
  :where(body[data-demo="aurelia-med-spa"]) .auSticky a,
  :where(body[data-demo="aurelia-med-spa"]) .auSubNav nav a,
  :where(body[data-demo="aurelia-med-spa"]) .leadForm button,
  :where(body[data-demo="calder-and-vale"]) nav a,
  :where(body[data-demo="calder-and-vale"]) .copy>a,
  :where(body[data-demo="calder-and-vale"]) .contact>a,
  :where(body[data-demo="calder-and-vale"]) .leadForm button,
  :where(body[data-demo="ember-and-oak"]) .copy>div a:first-child,
  :where(body[data-demo="ember-and-oak"]) .card a,
  :where(body[data-demo="ember-and-oak"]) .copy>div a:last-child,
  :where(body[data-demo="ember-and-oak"]) .textLink,
  :where(body[data-demo="ember-and-oak"]) .copy>div>a:first-child,
  :where(body[data-demo="ember-and-oak"]) .visit .card a,
  :where(body[data-demo="ember-and-oak"]) .eoNav nav a,
  :where(body[data-demo="ember-and-oak"]) .eoBookingBar>a,
  :where(body[data-demo="ember-and-oak"]) .eoSticky a,
  :where(body[data-demo="ember-and-oak"]) .eoSubNav nav a,
  :where(body[data-demo="ember-and-oak"]) .leadForm button,
  :where(body[data-demo="fieldwork-architecture"]) nav a,
  :where(body[data-demo="fieldwork-architecture"]) .copy>a,
  :where(body[data-demo="fieldwork-architecture"]) .contact>a,
  :where(body[data-demo="fieldwork-architecture"]) .leadForm button,
  :where(body[data-demo="hotel-nocturne"]) nav a,
  :where(body[data-demo="hotel-nocturne"]) .copy>a,
  :where(body[data-demo="hotel-nocturne"]) .contact>a,
  :where(body[data-demo="hotel-nocturne"]) .leadForm button,
  :where(body[data-demo="hotel-nocturne"]) .copy>a:after,
  :where(body[data-demo="hotel-nocturne"]) .cta>a:after,
  :where(body[data-demo="hotel-nocturne"]) .hotelBooking>a:after,
  :where(body[data-demo="hotel-nocturne"]) .contact .leadForm button:after,
  :where(body[data-demo="ironwood-contracting"]) .cta>span,
  :where(body[data-demo="ironwood-contracting"]) .cta>a,
  :where(body[data-demo="ironwood-contracting"]) .iwNav nav a,
  :where(body[data-demo="ironwood-contracting"]) .iwHeroCopy>a,
  :where(body[data-demo="ironwood-contracting"]) .iwContact>a,
  :where(body[data-demo="ironwood-contracting"]) .iwOffer>a,
  :where(body[data-demo="ironwood-contracting"]) .subNav nav a,
  :where(body[data-demo="ironwood-contracting"]) .leadForm button,
  :where(body[data-demo="northline-private-wealth"]) nav a,
  :where(body[data-demo="northline-private-wealth"]) .cta>span,
  :where(body[data-demo="northline-private-wealth"]) .copy>a,
  :where(body[data-demo="northline-private-wealth"]) .contact>a,
  :where(body[data-demo="northline-private-wealth"]) .leadForm button,
  :where(body[data-demo="vesper-and-rowe"]) nav a,
  :where(body[data-demo="vesper-and-rowe"]) .button,
  :where(body[data-demo="vesper-and-rowe"]) .leadForm button,
  :where(body[data-authored-demo]) .di-page a::after,
  :where(body[data-authored-demo]) .dx-button,
  :where(body[data-authored-demo]) body[data-demo="ember-and-oak"] .eoTableBtn,
  :where(body[data-authored-demo]) body[data-demo="hotel-nocturne"] .room-card a > span {
    font-size: 12px;
  }
}