/* Shared storefront and account skin. home-reference.css owns the homepage hero composition. */
body[data-page] {
  --suite-ink: #143621;
  --suite-text: #244231;
  --suite-muted: #4d6254;
  --suite-brand: #376d28;
  --suite-action: #285821;
  --suite-action-hover: #1c451b;
  --suite-accent: #99ce54;
  --suite-soft: #f2f5ee;
  --suite-sage: #e4efdf;
  --suite-border: #d5e3d2;
  --suite-card: #fff;
  --suite-shadow: 0 12px 32px #1436210b;
  --suite-radius: clamp(1.25rem, 2.6vw, 2.25rem);
  --suite-gutter: clamp(1rem, 4.2vw, 3.75rem);
  color: var(--suite-ink);
  font-size: 1rem;
}

body[data-page] [hidden] { display: none !important; }
body[data-page] p { color: var(--suite-muted); }
body[data-page] h1,
body[data-page] h2,
body[data-page] h3 { letter-spacing: -.05em; font-weight: 800; }
body[data-page] :is(.eyebrow, .suite-eyebrow) {
  color: #486649;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body[data-page] :is(.section-head, .suite-hero-copy, .suite-gallery-caption) > p { text-wrap: pretty; }
body[data-page] :focus-visible { outline: 3px solid #4b8035; outline-offset: 3px; }
body[data-page] :is(.button, .reference-service-cta) {
  border-radius: .9rem;
  font-size: .9rem;
  font-weight: 780;
  min-height: 46px;
  gap: .6rem;
  text-decoration: none;
}
body[data-page] .button.primary { background: var(--suite-action); color: #fff; }
body[data-page] .button.primary:hover { background: var(--suite-action-hover); }
body[data-page] .button.outline { border-color: var(--suite-border); color: var(--suite-action); background: #fff; }
body[data-page] .button.outline:hover { border-color: #a3be9c; background: var(--suite-soft); }
body[data-page] .button:disabled { opacity: .62; transform: none; }
body[data-page] .button :is(span, svg) { flex-shrink: 0; }
body[data-page] :is(.text-button, .route-link, .floor-plan-link) {
  min-height: 44px;
  color: var(--suite-action);
  font-size: .9rem;
  font-weight: 750;
  text-underline-offset: .18em;
}
body[data-page] .text-button:hover,
body[data-page] .route-link:hover { text-decoration: underline; }
body[data-page] .preview-bar {
  background: #e8f1e2;
  color: #2d5232;
  border-bottom: 1px solid #dce8d8;
  font-size: .75rem;
  min-height: 34px;
}
body[data-page] .preview-bar > span { font-size: .65rem; padding: .12rem .45rem; border-radius: .4rem; }

/* Navigation keeps the homepage overlay. Interior pages use the same visual system. */
body[data-page] .header .brand { flex: 0 0 auto; }
body[data-page] .header .brand img { width: 100%; height: auto; object-fit: contain; }
body[data-page] .header .login { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; }
body[data-page]:not([data-page="/"]) .header {
  position: relative;
  z-index: 5;
  height: 5.2rem;
  padding-inline: var(--suite-gutter);
  gap: clamp(.8rem, 2.1vw, 1.75rem);
  border-radius: 0 0 1.75rem 1.75rem;
  color: #fff;
  background: var(--suite-ink);
}
body[data-page]:not([data-page="/"]) .header .brand {
  display: grid;
  place-items: center;
  width: clamp(8.5rem, 13vw, 11rem);
  min-height: 45px;
  padding: .25rem .55rem;
  border-radius: .7rem;
  background: #fff;
}
body[data-page]:not([data-page="/"]) .header .brand img { max-height: 3.2rem; }
body[data-page]:not([data-page="/"]) .header .city { color: #ecf6e7; font-weight: 720; }
body[data-page]:not([data-page="/"]) .header .city i { background: var(--suite-accent); }
body[data-page]:not([data-page="/"]) .header nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: .875rem;
  font-weight: 730;
  white-space: nowrap;
}
body[data-page]:not([data-page="/"]) .header nav a:hover { color: #dcf5bd; }
body[data-page]:not([data-page="/"]) .header .login {
  color: var(--suite-ink);
  border: 0;
  border-radius: 999px;
  background: #fff;
  padding: .6rem 1.1rem;
  font-size: .875rem;
  font-weight: 800;
}
body[data-page]:not([data-page="/"]) .header .login:hover { background: #e3f1d8; }
body[data-page]:not([data-page="/"]) .header .login span { margin-left: 0; }
body[data-page]:not([data-page="/"]) .header .menu-toggle {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff72;
  border-radius: 50%;
  background: #ffffff10;
  color: white;
  font-size: 1.25rem;
}
body[data-page]:not([data-page="/"]) .header :focus-visible { outline-color: #d3f0a8; }
body[data-page]:not([data-page="/"]) .header :is(.brand, .login):focus-visible { outline-offset: 3px; }

/* Page introduction, media gallery and purchase shortcuts. */
body[data-page] .suite-hero {
  width: 100%;
  max-width: 1264px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: stretch;
  min-height: clamp(21rem, 34vw, 33rem);
  overflow: hidden;
  border-radius: var(--suite-radius);
  border: 1px solid var(--suite-border);
  background: var(--suite-soft);
  box-shadow: var(--suite-shadow);
  margin-inline: auto;
}
body[data-page] .suite-hero[hidden] { display: none !important; }
body[data-page] main > .suite-hero {
  width: min(calc(100% - 2 * var(--suite-gutter)), 1264px);
  margin-block: clamp(1.1rem, 3vw, 2.9rem) 0;
}
body[data-page] .suite-hero:where(:not(:has(.suite-hero-media))) { grid-template-columns: minmax(0, 1fr); min-height: auto; }
body[data-page] .suite-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: clamp(1.35rem, 5vw, 4.3rem);
}
body[data-page] .suite-hero-copy :is(h1, h2, [data-portal-title]) {
  max-width: 14ch;
  margin: 0 0 clamp(.65rem, 2vw, 1.25rem);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.03;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
body[data-page] .suite-hero-copy :is(.eyebrow, .suite-eyebrow) { margin: 0 0 .85rem; }
body[data-page] .suite-hero-copy p {
  margin: 0;
  max-width: 50ch;
  color: var(--suite-muted);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.55;
}
body[data-page] .suite-hero-media {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #dcebd7;
}
body[data-page] .suite-hero-media picture,
body[data-page] .suite-hero-media > img { position: absolute; inset: 0; }
body[data-page] .suite-hero-media picture { display: block; width: 100%; height: 100%; }
body[data-page] .suite-hero-media img,
body[data-page] img.suite-hero-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
body[data-page] .suite-hero--account { background: #e9f2e5; }
body[data-page] .suite-hero--admin { background: var(--suite-ink); color: #fff; border-color: var(--suite-ink); }
body[data-page] .suite-hero--admin :is(p, .eyebrow, .suite-eyebrow) { color: #e6f4df; }
body[data-page] .suite-hero--admin .button.primary { background: #e3f4d5; color: var(--suite-ink); }
body[data-page] .suite-hero--admin .button.primary:hover { background: #f1f9eb; }
body[data-page] .suite-hero--admin :focus-visible { outline-color: #d3f0a8; }
body[data-page] .suite-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  margin-top: clamp(1rem, 2.7vw, 1.8rem);
}
body[data-page] .suite-actions .button { margin: 0; }
body[data-page] .suite-actions .text-button { display: inline-flex; align-items: center; }
body[data-page] .suite-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.3vw, 1.9rem);
  margin-block: clamp(2rem, 7vw, 5rem);
}
body[data-page] .suite-gallery-heading .suite-eyebrow { margin: 0 0 .45rem; }
body[data-page] .suite-gallery-heading h2 { margin: 0; }
body[data-page] .suite-gallery-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--suite-border);
  border-radius: clamp(1rem, 2vw, 1.45rem);
  background: var(--suite-soft);
}
body[data-page] .suite-gallery-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--suite-sage);
}
body[data-page] .suite-gallery-card .suite-gallery-caption {
  display: grid;
  align-content: start;
  gap: .4rem;
  padding: clamp(.8rem, 2vw, 1.35rem);
  color: var(--suite-muted);
  line-height: 1.5;
}
body[data-page] .suite-gallery-caption strong { color: var(--suite-ink); font-size: clamp(1rem, 1.7vw, 1.25rem); }
body[data-page] .suite-gallery .suite-actions { margin-top: 0; }
body[data-page] .suite-banner {
  padding: clamp(1rem, 3.6vw, 2.15rem);
  border-radius: var(--suite-radius);
  border: 1px solid var(--suite-border);
  background: var(--suite-sage);
  color: var(--suite-ink);
}
body[data-page] .suite-banner h2 { font-size: clamp(1.5rem, 3vw, 2.65rem); margin-bottom: .4rem; }
body[data-page] .suite-banner p { max-width: 60ch; }
body[data-page] .suite-floating-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .65rem;
  margin-block: 1.25rem 0;
}

/* Object, map and store results. */
body[data-page] :is(#locations, #catalog, #floor-plan, #faq) { scroll-margin-top: 2rem; }
body[data-page] :is(#locations, #catalog) .section-head :is(h1, h2) {
  font-size: clamp(2rem, 4.2vw, 3.55rem);
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
body[data-page] :is(#locations, #catalog) .section-head > p { max-width: 43ch; line-height: 1.5; }
body[data-page] .location-tools { gap: .65rem; }
body[data-page] .location-tools .field { width: min(100%, 28rem); }
body[data-page] :is(.location-card, .location-map, .floor-plan-panel) {
  border-radius: var(--suite-radius);
  border-color: var(--suite-border);
  box-shadow: var(--suite-shadow);
}
body[data-page] .location-card { padding: clamp(1.05rem, 3vw, 2.1rem); }
body[data-page] .location-card.selected { border-color: #b4cbae; }
body[data-page] .location-card h3 { color: var(--suite-ink); max-width: none; }
body[data-page] .location-index { color: #46664a; font-weight: 800; }
body[data-page] .location-card :is(.location-details, .location-directions) { border-color: var(--suite-border); }
body[data-page] .location-card .location-details { min-width: 0; }
body[data-page] .location-map { min-height: 24rem; padding: clamp(.65rem, 2.1vw, 1.15rem); background-color: #eaf2e6; }
body[data-page] .map-viewport { min-height: 19rem; border: 1px solid #cbdcca; border-radius: 1rem; }
body[data-page] .map-top { color: #3b6143; }
body[data-page] :is(.object-marker, .network-marker) { border-radius: .9rem; }
body[data-page] .map-controls button {
  background: #fff;
  border-color: var(--suite-border);
  border-radius: .65rem;
  color: var(--suite-action);
  min-height: 44px;
}
body[data-page] .map-controls button:is(:hover, [aria-pressed="true"]):not(:disabled) { background: #e1efd9; border-color: #aac6a4; }
body[data-page] .location-filters {
  border: 1px solid var(--suite-border);
  border-radius: 1rem;
  padding: .25rem clamp(.7rem, 2vw, 1rem);
  background: #fff;
}
body[data-page] .location-filters summary { color: var(--suite-action); }
body[data-page] .location-filters .catalog-subbar { padding-bottom: .7rem; }
body[data-page] .breadcrumbs { color: var(--suite-muted); font-size: .85rem; }
body[data-page] .breadcrumbs a { color: var(--suite-action); text-underline-offset: .2em; }
body[data-page] .catalog-section { background: var(--suite-soft); }
body[data-page] .catalog-toolbar { gap: .65rem; }
body[data-page] :is(.segmented, .tab-row) button { min-height: 44px; font-size: .85rem; font-weight: 750; }
body[data-page] .segmented { background: #e7eee2; padding: .24rem; border-radius: .95rem; }
body[data-page] .segmented button { padding: .4rem .72rem; border-radius: .72rem; }
body[data-page] .segmented button:is(.active, [aria-pressed="true"]) { background: #fff; color: var(--suite-action); }
body[data-page] :is(.filter-selects select, .catalog-subbar input:not([type="checkbox"]), .field input, .field select, .field textarea, .admin-search) {
  border: 1px solid #b9cdb6;
  border-radius: .8rem;
  background: #fff;
  color: var(--suite-ink);
  min-height: 46px;
  font-size: 1rem;
}
body[data-page] :is(.field, .catalog-subbar, .check-label, .price-filter) { color: #36543b; }
body[data-page] :is(.field, .check-label) { font-weight: 650; }
body[data-page] .field input[type="checkbox"],
body[data-page] input[type="checkbox"] { accent-color: var(--suite-action); }
body[data-page] .catalog-subbar { gap: .7rem 1.2rem; font-size: .86rem; padding-block: .95rem; }
body[data-page] .catalog-subbar .price-filter input { width: min(7rem, 100%); padding-inline: .45rem; }
body[data-page] .box-grid { gap: clamp(.7rem, 1.55vw, 1.25rem); }
body[data-page] .box-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: clamp(1.1rem, 2.1vw, 1.55rem);
  border-color: var(--suite-border);
  box-shadow: var(--suite-shadow);
}
body[data-page] .box-card:hover { border-color: #9fbd99; }
body[data-page] .box-card-top { padding: .8rem 1rem .65rem; gap: .35rem .65rem; flex-wrap: wrap; }
body[data-page] .box-card-tier { color: var(--suite-muted); font-size: .75rem; font-weight: 700; }
body[data-page] .box-number { font-size: .85rem; font-weight: 790; }
body[data-page] .badge {
  background: #e4f0de;
  color: #295229;
  font-size: .74rem;
  font-weight: 750;
  border-radius: 999px;
  white-space: normal;
  line-height: 1.2;
}
body[data-page] .badge.muted { background: #f2eadd; color: #624922; }
body[data-page] .box-card .badge { font-size: .72rem; padding: .28rem .45rem; }
body[data-page] .box-card .box-diagram {
  min-height: clamp(6.4rem, 10vw, 8.25rem);
  margin: .7rem .75rem 0;
  border-radius: .9rem;
  background: #edf4e9;
}
body[data-page] .box-card-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: .85rem;
}
body[data-page] .box-card-photo img {
  display: block;
  width: 100%;
  height: auto;
}
body[data-page] .suite-box-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: .85rem;
  background: var(--suite-sage);
}
body[data-page] .box-body { flex: 1; display: flex; flex-direction: column; padding: .8rem 1rem 1rem; }
body[data-page] .box-volume { font-size: clamp(1.35rem, 2.9vw, 2rem); font-weight: 800; letter-spacing: -.045em; color: var(--suite-ink); }
body[data-page] .box-card :is(.box-size, .box-area) { font-size: .85rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
body[data-page] .box-bottom { margin-top: auto; padding-top: .75rem; gap: .55rem; }
body[data-page] .box-bottom strong { color: var(--suite-ink); font-size: 1.15rem; font-weight: 800; white-space: nowrap; }
body[data-page] .box-bottom small { font-size: .74rem; color: var(--suite-muted); }
body[data-page] .box-bottom button {
  display: inline-flex;
  min-height: 48px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: .55rem .9rem;
  border-radius: .72rem;
  background: var(--suite-action);
  color: #fff;
  font-size: .9rem;
  font-weight: 780;
  line-height: 1.2;
  text-align: center;
}
body[data-page] .box-bottom button:hover { background: var(--suite-action-hover); }
body[data-page] .compare-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem .8rem;
  color: var(--suite-action);
  font-weight: 720;
  line-height: 1.25;
  transition: background-color .16s, color .16s;
}
body[data-page] .compare-toggle::before { content: "+"; font-size: 1.05rem; line-height: 1; }
body[data-page] .compare-toggle[aria-pressed="true"]::before { content: "✓"; }
body[data-page] .compare-toggle:is(:hover, :focus-visible) { background: #eef5e9; color: #1c461d; }
body[data-page] .compare-toggle:focus-visible { outline-offset: -3px; }
body[data-page] .compare-toggle[aria-pressed="true"] { background: #e4f0df; color: #254f26; }
body[data-page] .compare-bar { background: #e3efd9; border: 1px solid var(--suite-border); border-radius: 1rem; }
body[data-page] .floor-plan-panel { background: #eef4eb; }
body[data-page] .floor-plan-intro h2 { color: var(--suite-ink); }

/* Checkout dialog and sign-in. */
body[data-page] #modal {
  max-height: min(92dvh, 56rem);
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: var(--suite-radius);
  background: #fff;
  color: var(--suite-ink);
  box-shadow: 0 24px 78px #142b1b4a;
}
body[data-page] #modal::backdrop { background: #122c21a3; }
body[data-page] #modal .modal-head { gap: 1rem; margin-bottom: .5rem; }
body[data-page] #modal .close-button { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; background: var(--suite-soft); color: var(--suite-ink); }
body[data-page] #modal .close-button:hover { background: var(--suite-sage); }
body[data-page] #modal .modal-title { font-size: clamp(1.65rem, 4.8vw, 2.65rem); line-height: 1.05; margin: .45rem 0 .8rem; text-wrap: balance; }
body[data-page] #modal .modal-intro { color: var(--suite-muted); line-height: 1.5; }
body[data-page] #modal .detail-layout { gap: clamp(.8rem, 2.5vw, 1.5rem); }
body[data-page] #modal .detail-visual { border-radius: 1rem; background: var(--suite-soft); }
body[data-page] #modal .detail-visual strong { font-weight: 820; }
body[data-page] #modal .detail-facts { font-size: .88rem; line-height: 1.65; min-width: 0; overflow-wrap: anywhere; }
body[data-page] #modal .detail-facts hr { border-color: var(--suite-border); }
body[data-page] #modal .plan { min-width: 0; border: 1px solid var(--suite-border); border-radius: .9rem; padding: .75rem; }
body[data-page] #modal .plan:hover { border-color: #96b58f; }
body[data-page] #modal .plan:is(.active, [aria-pressed="true"]) { border-color: #4d8242; background: #e9f2e3; box-shadow: inset 0 0 0 1px #4d8242; }
body[data-page] #modal .plan strong { font-size: clamp(1.05rem, 3vw, 1.45rem); font-weight: 800; }
body[data-page] #modal .plan small { font-size: .78rem; color: var(--suite-muted); }
body[data-page] #modal .detail-checkout { padding: .6rem .75rem .75rem; border: 1px solid var(--suite-border); border-radius: 1rem; background: #f4f8f2; }
body[data-page] #modal .detail-checkout .total-row { border-top: 0; padding: .35rem 0 .65rem; }
body[data-page] #modal .total-row strong { color: var(--suite-ink); font-weight: 820; }
body[data-page] :is(.notice, .empty-state, .verification-banner, .door-card, .identity-next) { border-radius: 1rem; }
body[data-page] #modal .identity-next,
body[data-page] #modal .verification-flow article { background: var(--suite-soft); border-color: var(--suite-border); }
body[data-page] #modal .identity-progress .current { color: var(--suite-action); font-weight: 820; }
body[data-page] #modal .otp-input { font-size: clamp(1.1rem, 6vw, 1.8rem); }
body[data-page] .tab-row button { border: 1px solid var(--suite-border); border-radius: .75rem; background: var(--suite-soft); color: var(--suite-action); }
body[data-page] .tab-row button.active { background: var(--suite-action); color: white; border-color: var(--suite-action); }

/* Customer and staff pages use the same controls and hierarchy. */
body:is([data-page="/account"], [data-page="/admin"]) { background: #f6f8f4; }
body:is([data-page="/account"], [data-page="/admin"]) .portal-page {
  min-height: min(66vh, 49rem);
  padding-top: clamp(1.35rem, 4vw, 3.25rem);
  padding-bottom: clamp(2.5rem, 7vw, 6rem);
}
body:is([data-page="/account"], [data-page="/admin"]) .portal-page:not(.demo-mounted) > :is(h1, p, button, a) { max-width: 65ch; }
body[data-page] .portal-page.demo-mounted > .suite-hero { display: none; }
body[data-page] .demo-dashboard { color: var(--suite-ink); }
body[data-page] .demo-heading {
  padding: clamp(1.2rem, 4.3vw, 3.4rem);
  margin-bottom: .75rem;
  border-radius: var(--suite-radius);
  background: var(--suite-ink);
  color: #fff;
}
body[data-page="/account"] .demo-heading { background: #e1eedb; color: var(--suite-ink); }
body[data-page] .demo-heading h2 { font-size: clamp(2rem, 5vw, 3.55rem); line-height: 1.05; margin: .35rem 0 .75rem; }
body[data-page] .demo-heading :is(p, .eyebrow) { color: #e4f4df; }
body[data-page="/account"] .demo-heading :is(p, .eyebrow) { color: #2e5638; }
body[data-page] .demo-heading p { margin-bottom: 0; }
body[data-page] .demo-toolbar {
  margin: 0 0 1rem;
  padding: .45rem .85rem;
  border: 1px solid var(--suite-border);
  border-radius: 1rem;
  background: #fff;
}
body[data-page] .demo-toolbar :is(a, button) { color: var(--suite-action); font-weight: 740; }
body[data-page] :is(.demo-panel, .demo-admin-body, .demo-banner, .demo-warning, .demo-row, .demo-empty, .demo-entrance) { border-radius: 1rem; }
body[data-page] :is(.demo-panel, .demo-admin-body, .demo-row) { border-color: var(--suite-border); }
body[data-page] .demo-panel { box-shadow: var(--suite-shadow); }
body[data-page] .demo-panel h3,
body[data-page] .demo-admin-body h3 { letter-spacing: -.035em; font-size: clamp(1.25rem, 2.35vw, 1.7rem); }
body[data-page] .demo-admin-body { background: #eef4eb; }
body[data-page] .demo-admin-grid { gap: 1rem; }
body[data-page] .demo-admin-grid > .demo-nav { align-self: start; }
body[data-page] .demo-nav button {
  border-radius: .8rem;
  border-color: var(--suite-border);
  color: var(--suite-text);
  font-size: .9rem;
  min-height: 44px;
}
body[data-page] .demo-nav button:hover { border-color: #9fbd99; background: #eaf4e5; }
body[data-page] .demo-nav button[aria-pressed="true"] { background: var(--suite-action); color: #fff; border-color: var(--suite-action); }
body[data-page] :is(.demo-metrics button, .demo-doors article, .demo-steps li) {
  border-color: var(--suite-border);
  border-radius: .85rem;
  background: #f3f7f1;
}
body[data-page] .demo-steps li.done { border-color: #a8c49d; background: #e3f1db; }
body[data-page] .demo-metrics button:hover { border-color: #9fbd99; background: #e8f2e3; }
body[data-page] .demo-doors article code { color: var(--suite-ink); }
body[data-page] :is(.demo-tag, .demo-toolbar, .demo-row) { overflow-wrap: anywhere; }

/* Support sections and footer. */
body[data-page] :is(.steps article, .faq-list details) { border-color: var(--suite-border); }
body[data-page] .steps article { padding: 1.25rem; border: 1px solid var(--suite-border); border-radius: 1rem; background: var(--suite-soft); }
body[data-page] .steps h3 { margin: .55rem 0; }
body[data-page] .steps article > span { color: #416745; font-weight: 800; }
body[data-page] .faq-list details { border: 1px solid var(--suite-border); border-radius: .9rem; margin-bottom: .55rem; padding-inline: .85rem; background: #fff; }
body[data-page] .faq-list details:first-child { border-top-color: var(--suite-border); }
body[data-page] .faq-list summary { min-height: 48px; font-weight: 760; }
body[data-page] .faq-list p { color: var(--suite-muted); }
body[data-page] footer#contacts { background: var(--suite-ink); color: #eef7ec; padding-top: clamp(2rem, 5vw, 4rem); }
body[data-page] footer#contacts .footer-top { padding-bottom: clamp(1.7rem, 4vw, 3rem); }
body[data-page] footer#contacts .footer-top img {
  width: clamp(9rem, 16vw, 12.25rem);
  max-height: none;
  padding: .45rem .65rem;
  border-radius: .8rem;
  background: #fff;
}
body[data-page] footer#contacts :is(p, .footer-bottom) { color: #d2e2d3; }
body[data-page] footer#contacts .footer-top small { color: #c3e2b9; font-size: .72rem; font-weight: 800; }
body[data-page] footer#contacts .footer-top :is(p, a) { font-size: .88rem; overflow-wrap: anywhere; }
body[data-page] footer#contacts .footer-top a { padding-block: .13rem; text-underline-offset: .2em; }
body[data-page] footer#contacts .footer-top a:hover { text-decoration: underline; color: #e0f8c9; }
body[data-page] footer#contacts .footer-bottom { border-color: #ffffff35; font-size: .79rem; }
body[data-page] footer#contacts :focus-visible { outline-color: #d5f1b1; }

@media (max-width: 1023px) {
  body[data-page]:not([data-page="/"]) .header { height: 4.5rem; }
  body[data-page]:not([data-page="/"]) .header .city { display: none; }
  body[data-page]:not([data-page="/"]) .header .login { margin-left: auto; }
  body[data-page]:not([data-page="/"]) .header .menu-toggle { display: block; }
  body[data-page]:not([data-page="/"]) .header nav { display: none; }
  body[data-page]:not([data-page="/"]) .header nav.open {
    display: grid;
    justify-items: stretch;
    position: absolute;
    top: calc(100% + .35rem);
    left: var(--suite-gutter);
    right: var(--suite-gutter);
    max-width: 24rem;
    margin-left: auto;
    padding: .65rem;
    gap: .15rem;
    border: 1px solid var(--suite-border);
    border-radius: 1rem;
    background: #fff;
    color: var(--suite-ink);
    box-shadow: 0 12px 35px #14362129;
  }
  body[data-page]:not([data-page="/"]) .header nav.open a { padding-inline: .8rem; border-radius: .68rem; white-space: normal; }
  body[data-page]:not([data-page="/"]) .header nav.open a:hover { color: var(--suite-action); background: var(--suite-soft); }
  body[data-page]:not([data-page="/"]) .header nav.open :focus-visible { outline-color: #4b8035; }
  body[data-page] .catalog-toolbar .filter-selects { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  body[data-page] .suite-hero { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  body[data-page] .suite-hero-copy { padding: clamp(1.05rem, 6vw, 2.1rem); }
  body[data-page] .suite-hero-copy :is(h1, h2, [data-portal-title]) { max-width: 17ch; }
  body[data-page] .suite-hero-media { min-height: 0; aspect-ratio: 16 / 9; }
  body[data-page] .suite-hero--admin .suite-hero-media { max-height: 14rem; }
  body[data-page] .location-tools .field { width: 100%; }
  body[data-page] .location-map { min-height: auto; }
  body[data-page] .map-viewport { min-height: clamp(13rem, 53vw, 19rem); }
  body[data-page] :is(.catalog-toolbar, .filter-selects) { width: 100%; }
  body[data-page] .filter-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  body[data-page] .filter-selects select { width: 100%; padding-inline: .55rem; font-size: .85rem; }
  body[data-page] .catalog-subbar .price-filter { margin-left: 0; }
  body[data-page] #modal { max-height: 94dvh; }
  body[data-page] #modal .detail-checkout { bottom: max(0px, env(safe-area-inset-bottom)); }
  body[data-page] .demo-admin-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page] :is(.demo-nav, .demo-client-nav) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.75rem), 1fr));
    gap: .45rem;
  }
  body[data-page] .demo-nav button { padding: .45rem .6rem; white-space: normal; }
}
@media (max-width: 430px) {
  body[data-page] .preview-bar { padding-inline: .7rem; font-size: .69rem; gap: .4rem; }
  body[data-page]:not([data-page="/"]) .header { padding-inline: .72rem; gap: .45rem; border-radius: 0 0 1.2rem 1.2rem; }
  body[data-page]:not([data-page="/"]) .header .brand { width: clamp(7.2rem, 34vw, 8.6rem); min-height: 42px; }
  body[data-page]:not([data-page="/"]) .header .login { padding-inline: .7rem; }
  body[data-page] .suite-actions .button { width: 100%; justify-content: center; }
  body[data-page] .suite-actions .button span { margin-left: 0; }
  body[data-page] .segmented button { font-size: .77rem; white-space: normal; }
  body[data-page] .box-card-top { padding: .65rem .62rem .5rem; }
  body[data-page] .box-card .box-diagram { margin: .52rem .5rem 0; }
  body[data-page] .box-body { padding: .65rem .62rem .8rem; }
  body[data-page] .box-card :is(.box-size, .box-area) { font-size: .78rem; }
  body[data-page] .box-bottom { align-items: stretch; flex-direction: column; }
  body[data-page] .box-bottom button { width: 100%; }
  body[data-page] #modal .detail-visual { grid-template-columns: minmax(4.2rem, .65fr) minmax(0, 1fr); }
  body[data-page] #modal .detail-visual svg { width: 100%; }
  body[data-page] #modal .plan-grid { gap: .45rem; }
  body[data-page] #modal .plan { padding: .58rem; }
  body[data-page] footer#contacts .footer-top { gap: 1.15rem .75rem; }
  body[data-page] footer#contacts .footer-top :is(p, a) { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page] :is(.button, .box-card, .compare-toggle, .demo-nav button) { transition: none; }
  body[data-page] .button:hover { transform: none; }
}

/* Preserve the original light-on-photo contrast regardless of stylesheet order. */
body[data-page="/"] .reference-hero-actions .button.primary { border-color: #fff; background: #fff; color: var(--suite-ink); }
body[data-page="/"] .reference-hero-actions .button.primary:hover { border-color: #e8f6d9; background: #e8f6d9; }
body[data-page="/"] .reference-hero-actions .button.outline { border-color: #ffffffbd; background: #173923b3; color: #fff; }
body[data-page="/"] .reference-hero-actions .button.outline:hover { background: #214f30; }

/* Privacy and consent, when served by the semantic document wrapper. */
body[data-page^="/legal/"] { background: #f6f8f4; }
body[data-page^="/legal/"] .suite-legal {
  width: min(calc(100% - 2rem), 50rem);
  margin: clamp(1.1rem, 4vw, 3.3rem) auto;
  padding: clamp(1.2rem, 4.5vw, 3.25rem);
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius);
  background: #fff;
  box-shadow: var(--suite-shadow);
}
body[data-page^="/legal/"] .suite-legal h1 {
  margin: .6rem 0 .8rem;
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1.08;
  text-wrap: balance;
}
body[data-page^="/legal/"] .suite-legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.1rem;
  margin-bottom: .75rem;
  color: var(--suite-action);
  font-size: .88rem;
  font-weight: 720;
}
body[data-page^="/legal/"] .suite-legal-meta a:hover { text-decoration: underline; }
body[data-page^="/legal/"] .suite-legal-copy {
  padding-top: 1rem;
  border-top: 1px solid var(--suite-border);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--suite-muted);
  line-height: 1.65;
}

body[data-page] .suite-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
body[data-page] .suite-box-photo--detail { position:relative; overflow:hidden; border-radius:1.05rem; margin:0 0 1rem; }
body[data-page] .suite-box-photo--detail img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
body[data-page="/account"] .suite-hero-note,body[data-page="/admin"] .suite-hero-note { font-size:.88rem; }
@media(max-width:700px) {
  body[data-page] .suite-gallery-grid { grid-template-columns:1fr; }
}

body[data-page] .suite-box-diagram { margin:0 0 .85rem; }
body[data-page] .suite-box-diagram summary { cursor:pointer; min-height:44px; padding:.65rem 0; font-weight:750; }

body[data-page] .suite-promo-price { color:#376d28; }
body[data-page] .suite-promo-price del { color:#5a6559; }
body[data-page] .catalog-subbar label[hidden] { display:none; }

body[data-page] .suite-hero--catalog { position: relative; isolation: isolate; padding-inline-end: 0; }
body[data-page] .suite-hero--catalog .suite-hero-media { background: transparent; }
body[data-page] .suite-hero--catalog .suite-hero-media img {
  object-position: 67% 49%;
  mask-image: linear-gradient(to right, transparent, #000 21%);
}
body[data-page] .suite-hero--catalog .suite-hero-media::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 15%;
  backdrop-filter: blur(6px);
  mask-image: linear-gradient(to right, #000 25%, transparent);
  pointer-events: none;
  content: "";
}
body[data-page] .visit-section:not(.reference-promo) .eyebrow { color: #d8eacb; }
body[data-page] .visit-section:not(.reference-promo) p { color: #f4f9f1; }
body[data-page] .visit-section:not(.reference-promo) .visit-art { color: #d5eabd; }
body[data-page] .visit-section:not(.reference-promo) :focus-visible { outline-color: #e2f3cb; }

@media (max-width: 760px) {
  body[data-page] .suite-hero--catalog { padding-inline: 0; }
  body[data-page] .suite-hero--catalog .suite-hero-media img {
    object-position: center 50%;
    mask-image: linear-gradient(to bottom, transparent, #000 14%);
  }
  body[data-page] .suite-hero--catalog .suite-hero-media::after {
    inset: 0 0 auto;
    width: 100%;
    height: 12%;
    mask-image: linear-gradient(to bottom, #000, transparent);
  }
}
@media (min-width: 420px) and (max-width: 700px) {
  body[data-page] .suite-gallery-card { grid-template: 1fr / minmax(0, 42%) minmax(0, 1fr); }
  body[data-page] .suite-gallery-card img { height: 100%; min-height: 8.5rem; aspect-ratio: auto; }
  body[data-page] .suite-gallery-card .suite-gallery-caption { align-content: center; }
}

/* Shared catalogue links work before JavaScript loads. */
body[data-page] .box-bottom .box-select{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65rem 1.1rem;border-radius:.7rem;background:var(--suite-action,#376d28);color:#fff;font-size:.85rem;font-weight:750;text-align:center}
body[data-page] .box-bottom .box-select:hover{background:var(--suite-action-hover,#28551e)}
body[data-page] .box-card-tier{margin:.35rem 0;color:var(--suite-ink,#173b25);font-size:.8rem;font-weight:750}
.catalog-more{display:grid;justify-items:center;gap:.7rem;margin-top:1.75rem;text-align:center}
.catalog-more p{font-size:.85rem}
@media(max-width:760px){body[data-page] .box-bottom .box-select{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important}}