@layer reset {
  html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
  }

  *, *::before, *::after {
    box-sizing: inherit;
  }

  body {
    margin: 0;
  }

  /* Remove default margins */
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd {
    margin: 0;
  }

  /* Lists */
  ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Media */
  img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Forms */
  input, button, textarea, select {
    font: inherit;
  }

  button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  /* Links */
  a {
    text-decoration: none;
    color: inherit;
  }

  /* Tables */
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
}@layer tokens {


:root {

  /* =========================================================
   * SURFACE (Background layers)
   * ========================================================= */

  --surface-primary: #FFFFFF;        /* Main page background */
  --surface-secondary: #F9F8F6;      /* Section variation (classy warm) */
  --surface-tertiary: #F0EFEA;       /* Subtle elevation (optional use) */

  --surface-inverse-brand: #474649;        /* Dark sections / footer */
  --surface-inverse-secondary: #484649;        /* Dark sections / footer */

  /* =========================================================
   * NEUTRAL SCALE (UI greys — NOT for surfaces)
   * ========================================================= */

  --neutral-100: #F5F5F5;
  --neutral-300: #E6E6E6;
  --neutral-500: #A2A0A8;
  --neutral-700: #6F7077;
  --neutral-900: #484649;


  /* =========================================================
   * TEXT
   * ========================================================= */

  --text-primary: #121212;           /* Main body text */
  --text-secondary: #5A5A5A;         /* Supporting text */
  --text-muted: #8A8A8A;             /* Metadata, timestamps */
  --text-inverse: #FFFFFF;           /* Text on dark surfaces */


  /* =========================================================
   * ACCENT
   * ========================================================= */

  --accent-primary: #EF4024;         /* CTA, links, key actions */
  --accent-primary-hover: #8F1D2C;
  --accent-primary-active: #6F072E;

  --accent-secondary: #C8A97E;       /* Luxury highlight (restricted use) */
  --accent-secondary-hover: #E4D3B8;


  /* =========================================================
   * BORDER / SYSTEM
   * ========================================================= */

  --border-subtle: #EAE7E1;          /* Dividers, gridlines */
  --border-strong: #D6D2CB;          /* Card edges, emphasis */


  /* =========================================================
   * STATE (Optional but recommended)
   * ========================================================= */

  --state-success: #2E7D32;
  --state-warning: #ED6C02;
  --state-error: #D32F2F;
  --state-info: #0288D1;


  /* =========================================================
   * FONT FAMILIES (raw)
   * ========================================================= */

  --font-cabinet: "CabinetGrotesk-Variable", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-stardom: "Stardom", serif;


  /* =========================================================
   * TYPOGRAPHY ROLES (used by components)
   * ========================================================= */

  --font-display: var(--font-cabinet);   /* headings, UI */
  --font-body: var(--font-inter);        /* paragraphs */
  --font-accent: var(--font-stardom);   /* highlight only */


  /* =========================================================
   * FONT WEIGHTS (approved system)
   * ========================================================= */

  --font-weight-light: 300;      /* rare use (large headings only) */
  --font-weight-regular: 400;    /* body text */
  --font-weight-medium: 500;     /* default display */
  --font-weight-semibold: 600;   /* emphasis / buttons */
  --font-weight-bold: 700;       /* strong emphasis */


  /* =========================================================
   * OPTIONAL EXTREMES (restricted use)
   * ========================================================= */

  --font-weight-thin: 200;       /* editorial only (very rare) */
  --font-weight-black: 800;      /* numeric highlights only */

 /* =========================================================
  * TEXT SCALE
  * ========================================================= */


  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  /* =========================================================
   * SPACING SCALE (primitive only)
   * ========================================================= */

  --space-2xs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 5rem;     /* 80px */
  --space-5xl: 6rem;     /* 96px */


  /* =========================================================
   * RADIUS
   * ========================================================= */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --radius-pill: 999px;   /* buttons, tags */


  /* =========================================================
   * SHADOW (elevation system)
   * ========================================================= */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12);

  --shadow-none: none;


  /* =========================================================
   * CONTAINER
   * ========================================================= */

  --container-max: 1280px;                     /* default content width */
  --container-max-wide: 1440px;                /* large screens / hero */
  --container-max-narrow: 960px;               /* reading width */

  --container-padding-x: var(--space-lg);      /* default horizontal gutter */


  /* =========================================================
   * SECTION SPACING (vertical rhythm)
   * ========================================================= */

  --section-padding-y: var(--space-5xl);       /* default sections (96px) */
  --section-padding-y-lg: 8rem;                /* hero / feature sections (128px) */
  --section-padding-y-sm: var(--space-3xl);    /* compact sections (64px) */


  /* =========================================================
   * CONTENT WIDTH CONTROL
   * ========================================================= */

  --content-max-width: 720px;                  /* long-form readability */
  --content-max-width-wide: 960px;             /* hybrid content */


  /* =========================================================
   * GRID / LAYOUT GAPS
   * ========================================================= */

  --grid-gap-sm: var(--space-md);
  --grid-gap-md: var(--space-lg);
  --grid-gap-lg: var(--space-xl);


  /* =========================================================
   * STACK SPACING (vertical flow)
   * ========================================================= */

  --stack-gap-sm: var(--space-sm);
  --stack-gap-md: var(--space-md);
  --stack-gap-lg: var(--space-lg);


  /* =========================================================
   * COMPONENT SPACING (internal padding)
   * ========================================================= */

  --component-padding-sm: var(--space-sm);
  --component-padding-md: var(--space-md);
  --component-padding-lg: var(--space-lg);

  }



}/*
* Stardom
*/


@font-face {
  font-family: "Stardom";
  src: url("../fonts/Stardom-Regular.woff2") format("woff2"),
       url("../fonts/Stardom-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/**
* @license
*
* Font Family: Cabinet Grotesk
* Designed by: ITF
* URL: https://www.fontshare.com/fonts/cabinet-grotesk
* © 2026 Indian Type Foundry
*
* Cabinet Grotesk Variable (Variable font)
*
* You can control variable axes as shown below:
* font-variation-settings: wght 900.0;
*
* available axes:'wght' (range from 100.0 to 900.0
*/
@font-face {
  font-family: 'CabinetGrotesk-Variable';
  src: url('../fonts/CabinetGrotesk-Variable.woff2') format('woff2'),
       url('../fonts/CabinetGrotesk-Variable.woff') format('woff');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@layer base {

  body {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    color: var(--text-primary);
    background-color: var(--surface-primary);
    line-height: 1.6;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-medium);
  }

  strong {
    font-weight: var(--font-weight-semibold);
  }

  ::selection {
    background: var(--accent-primary);
    color: var(--text-inverse);
  }

}@layer objects {

  /* =========================================================
   * SECTION
   * ========================================================= */

  .o-section {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
  }

  .o-section--sm {
    padding-top: var(--section-padding-y-sm);
    padding-bottom: var(--section-padding-y-sm);
  }

  .o-section--lg {
    padding-top: var(--section-padding-y-lg);
    padding-bottom: var(--section-padding-y-lg);
  }


  /* =========================================================
   * CONTAINER
   * ========================================================= */


.o-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
  width: 100%;
}

  .o-container--wide {
    max-width: var(--container-max-wide);
  }

  .o-container--narrow {
    max-width: var(--container-max-narrow);
  }

  /* =========================================================
   * STACK (vertical spacing)
   * ========================================================= */

  .o-stack > * + * {
    margin-top: var(--stack-gap-md);
  }

  .o-stack--sm > * + * {
    margin-top: var(--stack-gap-sm);
  }

  .o-stack--lg > * + * {
    margin-top: var(--stack-gap-lg);
  }


  /* =========================================================
   * GRID
   * ========================================================= */

  .o-grid {
    display: grid;
    gap: var(--grid-gap-md);
  }

  .o-grid--sm {
    gap: var(--grid-gap-sm);
  }

  .o-grid--lg {
    gap: var(--grid-gap-lg);
  }

  /* Optional column helpers */

  .o-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .o-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .o-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }


  /* =========================================================
   * FLEX UTIL OBJECTS (layout only)
   * ========================================================= */

  .o-flex {
    display: flex;
  }

  .o-flex--center {
    align-items: center;
    justify-content: center;
  }

  .o-flex--between {
    justify-content: space-between;
  }

  .o-flex--column {
    flex-direction: column;
  }


  /* =========================================================
   * FLOW (content rhythm alternative)
   * ========================================================= */

  .o-flow > * + * {
    margin-top: var(--space-md);
  }


  /* =========================================================
   * ASPECT RATIO (media handling)
   * ========================================================= */

  .o-ratio {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .o-ratio::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 default */
  }

  .o-ratio > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

}@layer utilities {

  /* =========================================================
   * DISPLAY
   * ========================================================= */

  .u-block { display: block; }
  .u-inline { display: inline; }
  .u-inline-block { display: inline-block; }
  .u-flex { display: flex; }
  .u-grid { display: grid; }
  .u-hidden { display: none; }


  /* =========================================================
   * FLEX ALIGNMENT
   * ========================================================= */

  .u-items-center { align-items: center; }
  .u-items-start { align-items: flex-start; }
  .u-items-end { align-items: flex-end; }

  .u-justify-center { justify-content: center; }
  .u-justify-between { justify-content: space-between; }
  .u-justify-end { justify-content: flex-end; }


  /* =========================================================
   * TEXT ALIGNMENT
   * ========================================================= */

  .u-text-left { text-align: left; }
  .u-text-center { text-align: center; }
  .u-text-right { text-align: right; }


  /* =========================================================
   * WIDTH
   * ========================================================= */

  .u-w-full { width: 100%; }
  .u-w-auto { width: auto; }


  /* =========================================================
   * MARGIN (top only — controlled use)
   * ========================================================= */

  .u-mt-sm { margin-top: var(--space-sm); }
  .u-mt-md { margin-top: var(--space-md); }
  .u-mt-lg { margin-top: var(--space-lg); }
  .u-mt-xl { margin-top: var(--space-xl); }


  /* =========================================================
   * PADDING (controlled)
   * ========================================================= */

  .u-p-sm { padding: var(--space-sm); }
  .u-p-md { padding: var(--space-md); }
  .u-p-lg { padding: var(--space-lg); }


  /* =========================================================
   * GAP
   * ========================================================= */

  .u-gap-sm { gap: var(--space-sm); }
  .u-gap-md { gap: var(--space-md); }
  .u-gap-lg { gap: var(--space-lg); }


  /* =========================================================
   * POSITION
   * ========================================================= */

  .u-relative { position: relative; }
  .u-absolute { position: absolute; }


  /* =========================================================
   * OVERFLOW
   * ========================================================= */

  .u-overflow-hidden { overflow: hidden; }


  /* =========================================================
   * VISIBILITY
   * ========================================================= */

  .u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

 /* =========================================================
   * MICRO ANIMATION
   * ========================================================= */

   .js-micro-parallax {
  opacity: 0;
  transform: translate3d(0, 180px, 0);
  transition:
    transform 2s ease-out,
    opacity 1.5s ease-out;
  will-change: transform, opacity;
}

.js-micro-parallax.is-in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.js-micro-parallax.is-delayed {
  transition-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  .js-micro-parallax {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


}
@layer components {
/* =========================================================
 * HERO TEST
 * ========================================================= */

.c-hero {
  padding-block: var(--space-xl);
}

.c-hero__title {
  font-family: var(--font-display);
  font-size: 100;
  line-height: 1.1;
}

.c-hero__desc {
  margin-top: var(--space-xl);
  font-size: var(--text-md);
  color: var(--text-primary);
}


  /* =========================================================
   * BUTTON
   * ========================================================= */

  .c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: var(--component-padding-sm) var(--component-padding-md);

    font-family: var(--font-display);
    font-weight: var(--font-weight-medium);

    border-radius: var(--radius-md);

    cursor: pointer;
    transition: all 0.2s ease;
  }

  .c-button--primary {
    background-color: var(--accent-primary);
    color: var(--text-inverse);
  }

  .c-button--primary:hover {
    background-color: var(--accent-primary-hover);
  }

  .c-button--primary:active {
    background-color: var(--accent-primary-active);
  }

  .c-button--secondary {
    background-color: var(--accent-secondary);
    color: var(--text-primary);
  }

  .c-button--secondary:hover {
    background-color: var(--accent-secondary-hover);
  }

  /* outline variant (neutral, reusable) */
  .c-button--outline {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
  }


  /* =========================================================
   * CARD
   * ========================================================= */

  .c-card {
    display: block;

    padding: var(--component-padding-md);

    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);

    background-color: var(--surface-primary);
  }

  .c-card--hover:hover {
    box-shadow: var(--shadow-md);
  }


  /* =========================================================
   * HEADING
   * ========================================================= */

  .c-heading {
    font-family: var(--font-display);
    font-weight: var(--font-weight-medium);
  }

  .c-heading--strong {
    font-weight: var(--font-weight-semibold);
  }

  .c-heading--light {
    font-weight: var(--font-weight-regular);
  }


  /* =========================================================
   * TEXT
   * ========================================================= */

  .c-text {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    max-width: var(--content-max-width);
    color: var(--text-primary);
  }

  .c-text--muted {
    color: var(--text-muted);
  }

/* Editorial paragraph with drop cap */
.c-editorial__1 {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--text-primary, #121212);
  max-width: 65ch;
}

.c-editorial__1::first-letter {
  float: left;
  font-family: var(--font-stardom, serif);
  font-size: 4.5rem;
  line-height: 0.9;
  padding-right: 0.12em;
  padding-top: 0.06em;
  font-weight: 400;
  color: var(--text-primary, #121212);
}

.c-drop-cap::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-size: 4.2em;
  line-height: 0.8;
  font-weight: 600;
}

  /* =========================================================
   * CONTENT WRAPPER
   * ========================================================= */

  .c-content {
    max-width: var(--content-max-width);
  }

  .c-content--wide {
    max-width: var(--content-max-width-wide);
  }


  /* =========================================================
   * MEDIA
   * ========================================================= */

  .c-media {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
  }


  /* =========================================================
   * BADGE
   * ========================================================= */

  .c-badge {
    display: inline-block;

    padding: 0.25rem 0.5rem;

    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);

    border-radius: var(--radius-pill);

    background-color: var(--neutral-300);
    color: var(--text-primary);
  }


  /* =========================================================
   * DIVIDER
   * ========================================================= */

  .c-divider {
    width: 100%;
    height: 1px;
    background-color: var(--border-subtle);
  }

}
/* =========================================================
 * BRANDED NOT-FOUND PAGE
 * ========================================================= */

.ds-not-found {
  display: grid;
  min-height: 70vh;
  padding: clamp(18rem, 20vw, 24rem) var(--space-md) var(--space-3xl);
  place-items: center;
  text-align: center;
}

.ds-not-found__inner {
  display: grid;
  gap: var(--space-lg);
  max-width: 72rem;
}

.ds-not-found__eyebrow {
  color: var(--accent-primary-active);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ds-not-found h1 {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 7vw, 7.2rem);
  line-height: 1.05;
}

.ds-not-found__message {
  font-size: clamp(1.6rem, 2vw, 2rem);
  line-height: 1.7;
}

.ds-not-found__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  justify-content: center;
  margin-top: var(--space-md);
}

.ds-not-found__actions a {
  font-weight: 700;
  min-height: 4.4rem;
  padding: 1rem 0;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.ds-not-found__actions .ds-not-found__primary {
  background: var(--surface-inverse-brand);
  border: 0.4rem solid var(--surface-inverse-brand);
  color: var(--text-inverse);
  padding-inline: 2.4rem;
  text-decoration: none;
}

.ds-not-found__actions .ds-not-found__primary:hover,
.ds-not-found__actions .ds-not-found__primary:focus-visible {
  background: var(--surface-primary);
  color: var(--text-primary);
}
.c-property-facts {
  left: auto !important;
  right: 0;
  max-width: 100%;
}

@media (max-width: 991px) {
  .c-responsive-media img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}
@layer components {

  :root {
    --portal-font-size-helper: 12px;
    --portal-font-size-label: 14px;
    --portal-font-size-base: 18px;
    --portal-font-size-input: 14px;
    --portal-font-size-button: 16px;
    --portal-font-size-card-title: 18px;
    --portal-font-size-page-title: 32px;
  }

  .portal-shell {
    min-height: 100vh;
    background: var(--surface-secondary);
    color: var(--text-primary);
  }

  .portal-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 4rem;
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-primary);
    border-bottom: 1px solid var(--border-subtle);
  }

  .portal-main {
    width: 100%;
    max-width: var(--container-max-wide);
    margin-inline: auto;
    padding: var(--space-lg);
  }

  .portal-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
  }

  .portal-title {
    font-family: var(--font-display);
    font-size: var(--portal-font-size-page-title);
    font-weight: var(--font-weight-semibold);
    line-height: 1.15;
  }

  .portal-subtitle {
    margin-top: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--portal-font-size-helper);
  }

  .portal-card {
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .portal-card__header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-secondary);
  }

  .portal-card__title {
    font-family: var(--font-display);
    font-size: var(--portal-font-size-card-title);
    font-weight: var(--font-weight-semibold);
  }

  .portal-card__body {
    padding: var(--space-lg);
  }

  .portal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  .portal-button,
  .portal-actions a,
  .portal-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--component-padding-sm) var(--component-padding-lg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: var(--portal-font-size-button);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      color 160ms ease,
      transform 160ms ease;
  }

  .portal-button:hover,
  .portal-actions a:hover,
  .portal-actions button:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-1px);
  }

  .portal-button:focus-visible,
  .portal-actions a:focus-visible,
  .portal-actions button:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
  }

  .portal-button--primary,
  .portal-actions .portal-button--primary,
  .portal-actions button[type="submit"] {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: var(--text-inverse);
  }

  .portal-button--primary:hover,
  .portal-actions .portal-button--primary:hover,
  .portal-actions button[type="submit"]:hover {
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
    color: var(--text-inverse);
  }

  .portal-button--warning {
    border-color: color-mix(in srgb, var(--state-warning) 52%, var(--border-strong));
    background: color-mix(in srgb, var(--state-warning) 10%, var(--surface-primary));
    color: var(--state-warning);
  }

  .portal-button--warning:hover {
    border-color: var(--state-warning);
    background: color-mix(in srgb, var(--state-warning) 14%, var(--surface-primary));
    color: var(--state-warning);
  }

  .portal-button--danger {
    border-color: color-mix(in srgb, var(--state-error) 52%, var(--border-strong));
    background: color-mix(in srgb, var(--state-error) 10%, var(--surface-primary));
    color: var(--state-error);
  }

  .portal-button--danger:hover {
    border-color: var(--state-error);
    background: color-mix(in srgb, var(--state-error) 14%, var(--surface-primary));
    color: var(--state-error);
  }

  .portal-form {
    display: grid;
    gap: var(--space-lg);
  }

  .portal-form-section {
    padding: var(--space-lg);
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .portal-form-section > h2 {
    margin-bottom: var(--space-md);
    font-family: var(--font-display);
    font-size: var(--portal-font-size-card-title);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
  }

  .portal-form-section > p {
    margin: calc(var(--space-xs) * -1) 0 var(--space-md);
  }

  .portal-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-md);
  }

  .portal-form-grid--create-listing {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
  }

  .portal-field {
    min-width: 0;
  }

  .portal-filter-row {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
  }

  .portal-input,
  .portal-select,
  .portal-textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--portal-font-size-input);
  }

  .portal-input:focus,
  .portal-select:focus,
  .portal-textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--accent-primary) 24%, transparent);
    border-color: var(--accent-primary);
  }


  .portal-message {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-size: var(--portal-font-size-base);
  }

  .portal-message--success {
    border-color: color-mix(in srgb, var(--state-success) 32%, var(--border-subtle));
    background: color-mix(in srgb, var(--state-success) 10%, white);
    color: var(--state-success);
  }

  .portal-message--error {
    border-color: color-mix(in srgb, var(--state-error) 32%, var(--border-subtle));
    background: color-mix(in srgb, var(--state-error) 10%, white);
    color: var(--state-error);
  }

  .portal-message a {
    color: inherit;
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 0.16em;
  }

  .ds-login-form {
    width: 100%;
    min-width: 0;
    color: var(--text-primary);
  }

  .ds-login-form__form {
    display: grid;
    gap: var(--space-lg);
    width: 100%;
    min-width: 0;
  }

  .ds-login-form__field {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    min-width: 0;
  }

  .ds-login-form__label {
    color: var(--text-secondary);
    font-size: var(--portal-font-size-label);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
  }

  .ds-login-form__input {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 3rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--portal-font-size-input);
    line-height: 1.4;
  }

  .ds-login-form__input:focus {
    border-color: var(--accent-primary);
    outline: 2px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
    outline-offset: 1px;
  }

  .ds-login-form__remember label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--portal-font-size-label);
    line-height: 1.4;
    cursor: pointer;
  }

  .ds-login-form__remember input {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--accent-primary);
  }

  .ds-login-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3rem;
    padding: 0.85rem var(--component-padding-lg);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--accent-primary);
    color: var(--text-inverse);
    font-family: var(--font-display);
    font-size: var(--portal-font-size-button);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    cursor: pointer;
  }

  .ds-login-form__submit:hover {
    background: var(--accent-primary-hover);
  }

  .ds-login-form__submit:active {
    background: var(--accent-primary-active);
  }

  .ds-login-form__submit:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
  }

  .ds-login-form__forgot {
    justify-self: start;
    color: var(--accent-primary);
    font-size: var(--portal-font-size-helper);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-underline-offset: 0.16em;
  }

  .ds-login-form__forgot:hover {
    color: var(--accent-primary-hover);
  }

  .ds-login-form__message {
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--portal-font-size-base);
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .ds-login-form__error {
    border-color: color-mix(in srgb, var(--state-error) 32%, var(--border-subtle));
    background: color-mix(in srgb, var(--state-error) 10%, white);
    color: var(--state-error);
  }

  @media (max-width: 480px) {
    .ds-login-form__form {
      gap: var(--space-md);
    }

    .ds-login-form__input,
    .ds-login-form__submit {
      min-height: 3rem;
    }

    .ds-login-form__input {
      padding-inline: var(--space-sm);
    }

    .ds-login-form__message {
      padding: var(--space-sm) var(--space-md);
    }
  }

  .portal-label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--portal-font-size-label);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
  }

  .portal-helper {
    margin-top: var(--space-xs);
    color: var(--text-muted);
    font-size: var(--portal-font-size-helper);
    line-height: 1.4;
  }

  .portal-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    font-size: var(--portal-font-size-base);
  }

  .portal-table th,
  .portal-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    vertical-align: middle;
  }

  .portal-table th {
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
    background: var(--surface-secondary);
  }

  .portal-table tbody tr {
    transition:
      background-color 160ms ease,
      box-shadow 160ms ease;
  }

  .portal-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent-primary) 4%, var(--surface-primary));
  }

  .portal-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: var(--portal-font-size-helper);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    background: var(--neutral-300);
    color: var(--text-primary);
    white-space: nowrap;
  }

  .portal-badge--available,
  .portal-badge--public,
  .portal-badge--listing-status-available,
  .portal-badge--publication-status-publish {
    background: color-mix(in srgb, var(--state-success) 12%, white);
    color: var(--state-success);
  }

  .portal-badge--draft,
  .portal-badge--new,
  .portal-badge--off-market,
  .portal-badge--listing-status-coming_soon,
  .portal-badge--publication-status-draft,
  .portal-badge--publication-status-future,
  .portal-badge--publication-status-pending {
    background: color-mix(in srgb, var(--state-warning) 12%, white);
    color: var(--state-warning);
  }

  .portal-badge--sold,
  .portal-badge--leased,
  .portal-badge--listing-status-sold,
  .portal-badge--listing-status-leased,
  .portal-badge--listing-status-under_offer {
    background: color-mix(in srgb, var(--state-info) 12%, white);
    color: var(--state-info);
  }

  .portal-badge--archived,
  .portal-badge--private,
  .portal-badge--listing-status-archived,
  .portal-badge--publication-status-private,
  .portal-badge--listing-type-sale,
  .portal-badge--listing-type-rent {
    background: var(--neutral-300);
    color: var(--neutral-700);
  }

  .portal-empty {
    padding: var(--space-2xl);
    text-align: center;
    color: var(--text-secondary);
  }

  .ds-listing-filters {
    width: 100%;
  }

  .ds-listing-filters__form {
    display: grid;
    grid-template-columns: minmax(14rem, 2fr) repeat(3, minmax(8rem, 1fr)) auto;
    align-items: end;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    box-shadow: var(--shadow-sm);
  }

  .ds-listing-filters__field {
    min-width: 0;
  }

  .ds-listing-filters__field label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--portal-font-size-label);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
  }

  .ds-listing-filters__field input,
  .ds-listing-filters__field select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--portal-font-size-input);
  }

  .ds-listing-filters__field input:focus,
  .ds-listing-filters__field select:focus {
    border-color: var(--accent-primary);
    outline: 2px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
    outline-offset: 1px;
  }

  .ds-listing-filters__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 2.75rem;
  }

  .ds-listing-filters__clear {
    color: var(--text-secondary);
    font-size: var(--portal-font-size-button);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    text-underline-offset: 0.16em;
  }

  .ds-listing-filters__clear:hover {
    color: var(--text-primary);
  }

  .ds-listing-overview {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: var(--space-xl);
  }

  .ds-listing-overview__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
  }

  .ds-listing-overview__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .ds-listing-overview__actions--primary {
    justify-content: flex-start;
  }

  .ds-listing-overview__actions--secondary {
    justify-content: flex-end;
    margin-left: auto;
  }

  .ds-listing-overview__table {
    width: 100%;
    font-size: var(--portal-font-size-input);
  }

  .ds-listing-overview__table-wrap {
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    box-shadow: var(--shadow-sm);
  }

  .ds-listing-overview__table th:first-child,
  .ds-listing-overview__table td:first-child {
    padding-left: var(--space-lg);
  }

  .ds-listing-overview__table th:last-child,
  .ds-listing-overview__table td:last-child {
    padding-right: var(--space-lg);
  }

  .ds-listing-overview__row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .ds-listing-overview__action-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .ds-listing-overview__action {
    color: var(--accent-primary);
    font-size: var(--portal-font-size-input);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
  }

  .ds-listing-overview__action:hover {
    color: var(--accent-primary-hover);
    text-decoration: underline;
    text-underline-offset: 0.16em;
  }

  .ds-listing-overview__action--secondary {
    color: var(--text-secondary);
  }

  .ds-listing-overview__pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ds-listing-overview__pagination a,
  .ds-listing-overview__pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-primary);
    text-decoration: none;
  }

  .ds-listing-overview__pagination .current {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: var(--text-inverse);
  }

  .ds-listing-edit-form {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: var(--space-lg);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    background: var(--surface-secondary);
    color: var(--text-primary);
  }

  .ds-listing-edit-form .ds-form-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    box-shadow: var(--shadow-sm);
  }

  .ds-listing-edit-form .ds-form-card__header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--surface-secondary) 82%, var(--neutral-300));
  }

  .ds-listing-edit-form .ds-form-card__header h2 {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: var(--portal-font-size-card-title);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
  }

  .ds-listing-edit-form .ds-form-card__body {
    min-width: 0;
    padding: var(--space-lg);
  }

  .ds-listing-edit-form .ds-form-card-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .ds-listing-edit-form .ds-form-card__body > dl {
    display: grid;
    grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
    gap: var(--space-xs) var(--space-md);
    margin: 0;
  }

  .ds-listing-edit-form .ds-form-card__body > dl dt {
    color: var(--text-secondary);
    font-size: var(--portal-font-size-label);
    font-weight: var(--font-weight-medium);
  }

  .ds-listing-edit-form .ds-form-card__body > dl dd {
    min-width: 0;
    margin: 0;
    color: var(--text-primary);
    font-size: var(--portal-font-size-input);
    overflow-wrap: anywhere;
  }

  .ds-listing-edit-form .ds-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-lg);
  }

  .ds-listing-edit-form .ds-form-field {
    min-width: 0;
  }

  .ds-listing-edit-form .ds-form-field--full {
    grid-column: 1 / -1;
  }

  .ds-listing-edit-form .ds-form-grid--property-core {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ds-listing-edit-form .ds-form-grid--property-status {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .ds-listing-edit-form .ds-form-field--span-2 {
    grid-column: span 2;
  }

  .ds-listing-edit-form .ds-form-field--span-3 {
    grid-column: span 3;
  }

  .ds-listing-edit-form .ds-form-field--span-4 {
    grid-column: span 4;
  }

  .ds-listing-edit-form .ds-form-field--span-6 {
    grid-column: span 6;
  }

  .ds-listing-edit-form .ds-form-field--map-link {
    padding-block: var(--space-xs);
  }

  .ds-listing-edit-form .ds-form-field label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--portal-font-size-label);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
  }

  .ds-listing-edit-form .ds-form-label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--portal-font-size-label);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
  }

  .ds-listing-edit-form .ds-form-field input,
  .ds-listing-edit-form .ds-form-field select,
  .ds-listing-edit-form .ds-form-field textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--portal-font-size-input);
    line-height: 1.4;
  }

  .ds-listing-edit-form .ds-form-field textarea {
    resize: vertical;
  }

  .ds-listing-edit-form .ds-form-field input:focus,
  .ds-listing-edit-form .ds-form-field select:focus,
  .ds-listing-edit-form .ds-form-field textarea:focus {
    border-color: var(--accent-primary);
    outline: 2px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
    outline-offset: 1px;
  }

  .ds-listing-edit-form .ds-form-field > p {
    margin: var(--space-xs) 0 0;
    color: var(--text-muted);
    font-size: var(--portal-font-size-helper);
    line-height: 1.4;
  }

  .ds-listing-edit-form .ds-map-link-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 2.5rem;
  }

  .ds-listing-edit-form .ds-map-link-field code {
    min-width: 0;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--portal-font-size-helper);
    overflow-wrap: anywhere;
  }

  .ds-listing-edit-form .ds-media-assignment {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
  }

  .ds-listing-edit-form .ds-media-readiness {
    display: grid;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-secondary);
  }

  .ds-listing-edit-form .ds-media-readiness__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  .ds-listing-edit-form .ds-media-readiness__header h3 {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: var(--portal-font-size-card-title);
    font-weight: var(--font-weight-semibold);
  }

  .ds-listing-edit-form .ds-media-readiness__status {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--state-warning) 12%, white);
    color: var(--state-warning);
    font-size: var(--portal-font-size-helper);
    font-weight: var(--font-weight-semibold);
  }

  .ds-listing-edit-form .ds-media-readiness--ready .ds-media-readiness__status {
    background: color-mix(in srgb, var(--state-success) 12%, white);
    color: var(--state-success);
  }

  .ds-listing-edit-form .ds-media-readiness__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
    margin: 0;
  }

  .ds-listing-edit-form .ds-media-readiness__item {
    min-width: 0;
    padding: var(--space-sm);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
  }

  .ds-listing-edit-form .ds-media-readiness__item dt {
    margin: 0 0 var(--space-2xs);
    color: var(--text-secondary);
    font-size: var(--portal-font-size-label);
    font-weight: var(--font-weight-semibold);
  }

  .ds-listing-edit-form .ds-media-readiness__item dd {
    margin: 0;
    color: var(--state-warning);
    font-size: var(--portal-font-size-input);
    font-weight: var(--font-weight-semibold);
  }

  .ds-listing-edit-form .ds-media-readiness__item--complete dd {
    color: var(--state-success);
  }

  .ds-listing-edit-form .ds-media-readiness__helper {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--portal-font-size-helper);
    line-height: 1.4;
  }

  .ds-listing-edit-form .ds-media-field {
    min-width: 0;
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-secondary);
  }

  .ds-listing-edit-form .ds-media-field--gallery {
    grid-column: 1 / -1;
  }

  .ds-listing-edit-form .ds-media-field h3 {
    margin: 0 0 var(--space-sm);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: var(--portal-font-size-card-title);
    font-weight: var(--font-weight-semibold);
  }

  .ds-listing-edit-form .ds-media-preview {
    display: flex;
    align-items: flex-start;
    min-height: 9rem;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  .ds-listing-edit-form .ds-media-preview__item {
    position: relative;
    width: 12rem;
    min-height: 13.4rem;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
  }

  .ds-listing-edit-form [data-ds-media-field="featured_image_id"] .ds-media-preview__item,
  .ds-listing-edit-form [data-ds-media-field="gallery_image_ids"] .ds-media-preview__item {
    cursor: grab;
  }

  .ds-listing-edit-form [data-ds-media-field="featured_image_id"] .ds-media-preview__item:active,
  .ds-listing-edit-form [data-ds-media-field="gallery_image_ids"] .ds-media-preview__item:active {
    cursor: grabbing;
  }

  .ds-listing-edit-form .ds-media-preview--drop-target {
    outline: 2px solid var(--accent-primary);
    outline-offset: 0.25rem;
  }

  .ds-listing-edit-form .ds-media-preview__item--dragging {
    opacity: 0.45;
  }

  .ds-listing-edit-form .ds-media-preview__item img {
    display: block;
    width: 100%;
    height: 9rem;
    object-fit: cover;
  }

  .ds-listing-edit-form .ds-media-preview__movement {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .ds-listing-edit-form .ds-media-preview__movement button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4.4rem;
    border: 0;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-primary);
    color: var(--text-primary);
    cursor: pointer;
  }

  .ds-listing-edit-form .ds-media-preview__movement button + button {
    border-left: 1px solid var(--border-subtle);
  }

  .ds-listing-edit-form .ds-media-preview__movement button:hover,
  .ds-listing-edit-form .ds-media-preview__movement button:focus-visible {
    background: var(--surface-secondary);
    color: var(--accent-primary-active);
  }

  .ds-listing-edit-form .ds-media-preview__movement button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
  }

  .ds-listing-edit-form .ds-media-preview__remove {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--neutral-900) 18%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-primary) 92%, transparent);
    color: var(--text-primary);
    font-size: var(--portal-font-size-label);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    cursor: pointer;
  }

  .ds-listing-edit-form .ds-media-preview__remove:hover,
  .ds-listing-edit-form .ds-media-preview__remove:focus-visible {
    border-color: var(--state-error);
    background: var(--state-error);
    color: var(--text-inverse);
  }

  .ds-listing-edit-form .ds-media-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--portal-font-size-helper);
  }

  .ds-listing-edit-form .ds-media-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    flex-wrap: wrap;
  }

  .ds-listing-edit-form .ds-media-button {
    min-height: 2.5rem;
    padding: var(--component-padding-sm) var(--component-padding-md);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: var(--portal-font-size-button);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
  }

  .ds-listing-edit-form .ds-media-button:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
  }

  .ds-listing-edit-form .ds-media-button:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
  }

  .ds-inspection-session {
    margin: 0 0 var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-secondary);
  }

  .ds-inspection-session legend {
    padding-inline: var(--space-xs);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: var(--portal-font-size-card-title);
    font-weight: var(--font-weight-semibold);
  }

  .ds-listing-edit-form .ds-form-grid--inspection-row {
    grid-template-columns: minmax(9rem, 1fr) minmax(8rem, 1fr) minmax(8rem, 1fr) auto;
    align-items: end;
  }

  .ds-listing-edit-form .ds-form-field--inspection-note {
    display: none;
  }

  .ds-listing-edit-form .ds-form-field--inspection-action {
    display: flex;
    align-items: flex-end;
  }

  [data-ds-inspection-add],
  [data-ds-inspection-remove] {
    min-height: 2.5rem;
    padding: var(--component-padding-sm) var(--component-padding-md);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: var(--portal-font-size-button);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
  }

  [data-ds-inspection-add]:hover,
  [data-ds-inspection-remove]:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
  }

  .ds-listing-edit-form .ds-form-card__body > a {
    color: var(--accent-primary);
    font-weight: var(--font-weight-semibold);
    text-underline-offset: 0.16em;
  }

  .ds-listing-edit-form .ds-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    box-shadow: var(--shadow-sm);
  }

  .ds-listing-edit-form .ds-form-actions--bar {
    justify-content: space-between;
    margin-block: var(--space-sm);
    padding: 0 var(--space-lg);
    border: 0;
    box-shadow: none;
  }

  .ds-listing-edit-form .ds-form-actions__group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  .ds-listing-edit-form .ds-form-field--schedule-inline {
    min-width: min(100%, 18rem);
  }

  .ds-listing-edit-form .ds-form-field--schedule-inline label {
    margin-bottom: var(--space-2xs);
  }

  .ds-listing-edit-form .ds-form-actions--bar .portal-button {
    margin-inline: var(--space-xs);
  }

  .ds-listing-edit-form .ds-form-actions__group--primary {
    justify-content: flex-start;
  }

  .ds-listing-edit-form .ds-form-actions__group--secondary {
    justify-content: flex-end;
    margin-left: auto;
  }

  .ds-listing-edit-form .ds-form-actions__group--schedule {
    align-items: flex-end;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-left: auto;
  }

  .ds-listing-edit-form .ds-inline-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: var(--space-sm);
  }

  .ds-listing-edit-form .ds-inline-action label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: min(100%, 20rem);
    color: var(--text-secondary);
    font-size: var(--portal-font-size-label);
    line-height: 1.4;
  }

  .ds-listing-edit-form .ds-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--portal-font-size-label);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
  }

  .ds-listing-edit-form .ds-checkbox-label input,
  .ds-listing-edit-form .ds-inline-action label input {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0;
  }

  .ds-listing-edit-form .ds-form-grid--property-status .ds-checkbox-label__text {
    display: inline-block;
    transform: translateY(-2px);
  }

  .ds-listing-edit-form .ds-danger-zone {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-subtle);
  }

  .ds-listing-edit-form .ds-form-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--component-padding-sm) var(--component-padding-lg);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--accent-primary);
    color: var(--text-inverse);
    font-family: var(--font-display);
    font-size: var(--portal-font-size-button);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    cursor: pointer;
  }

  .ds-listing-edit-form .ds-form-actions--save-exit {
    justify-content: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .ds-listing-edit-form .ds-form-actions--save-exit .portal-button {
    width: 18%;
    min-width: 10rem;
  }

  .ds-listing-edit-form .ds-save-exit-box {
    padding: var(--space-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    box-shadow: var(--shadow-sm);
  }

  .ds-listing-edit-form .ds-form-actions button:hover {
    background: var(--accent-primary-hover);
  }

  .ds-listing-edit-form .ds-form-actions button:active {
    background: var(--accent-primary-active);
  }

  .ds-listing-edit-form .ds-form-actions button:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
  }

  .ds-listing-edit-form .ds-form-actions .portal-button {
    border: 1px solid var(--border-strong);
    background: var(--surface-primary);
    color: var(--text-primary);
  }

  .ds-listing-edit-form .ds-form-actions .portal-button:hover {
    border-color: var(--accent-primary);
    background: var(--surface-primary);
    color: var(--accent-primary);
  }

  .ds-listing-edit-form .ds-form-actions .portal-button--primary {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: var(--text-inverse);
  }

  .ds-listing-edit-form .ds-form-actions .portal-button--primary:hover {
    border-color: var(--accent-primary-hover);
    background: var(--accent-primary-hover);
    color: var(--text-inverse);
  }

  .ds-listing-edit-form .ds-form-actions .portal-button--warning {
    border-color: color-mix(in srgb, var(--state-warning) 52%, var(--border-strong));
    background: color-mix(in srgb, var(--state-warning) 10%, var(--surface-primary));
    color: var(--state-warning);
  }

  .ds-listing-edit-form .ds-form-actions .portal-button--warning:hover {
    border-color: var(--state-warning);
    background: color-mix(in srgb, var(--state-warning) 14%, var(--surface-primary));
    color: var(--state-warning);
  }

  .ds-listing-edit-form .ds-form-actions .portal-button--danger {
    border-color: color-mix(in srgb, var(--state-error) 52%, var(--border-strong));
    background: color-mix(in srgb, var(--state-error) 10%, var(--surface-primary));
    color: var(--state-error);
  }

  .ds-listing-edit-form .ds-form-actions .portal-button--danger:hover {
    border-color: var(--state-error);
    background: color-mix(in srgb, var(--state-error) 14%, var(--surface-primary));
    color: var(--state-error);
  }

  @media (max-width: 1024px) {
    .ds-listing-filters__form {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ds-listing-filters__field--search,
    .ds-listing-filters__actions {
      grid-column: 1 / -1;
    }

    .ds-listing-overview__header {
      flex-direction: column;
    }

    .ds-listing-overview__actions {
      justify-content: flex-start;
    }

    .ds-listing-overview__actions--secondary {
      margin-left: 0;
    }

    .ds-listing-edit-form {
      gap: var(--space-md);
      padding: var(--space-md);
    }

    .ds-listing-edit-form .ds-form-card__body,
    .ds-listing-edit-form .ds-form-card__header {
      padding-inline: var(--space-md);
    }

    .ds-listing-edit-form .ds-form-grid {
      column-gap: var(--space-md);
    }
  }

  @media (max-width: 768px) {
    .portal-header,
    .portal-page-head {
      flex-direction: column;
      align-items: stretch;
    }

    .portal-main {
      padding: var(--space-md);
    }

    .portal-form-grid {
      grid-template-columns: 1fr;
    }

    .portal-form-grid--create-listing {
      grid-template-columns: minmax(0, 1fr);
    }

    .ds-listing-filters__form {
      grid-template-columns: minmax(0, 1fr);
      padding: var(--space-sm);
    }

    .ds-listing-filters__field--search,
    .ds-listing-filters__actions {
      grid-column: auto;
    }

    .ds-listing-filters__actions {
      align-items: stretch;
      flex-direction: column;
    }

    .ds-listing-filters__actions .portal-button,
    .ds-listing-filters__clear {
      width: 100%;
      text-align: center;
    }

    .ds-listing-overview__actions {
      width: 100%;
    }

    .ds-listing-overview__actions .portal-button {
      width: 100%;
      justify-content: center;
    }

    .ds-listing-overview__table {
      min-width: 0;
    }

    .ds-listing-overview__table,
    .ds-listing-overview__table thead,
    .ds-listing-overview__table tbody,
    .ds-listing-overview__table th,
    .ds-listing-overview__table td,
    .ds-listing-overview__table tr {
      display: block;
    }

    .ds-listing-overview__table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .ds-listing-overview__table tr {
      margin-bottom: var(--space-md);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      background: var(--surface-primary);
      box-shadow: var(--shadow-sm);
    }

    .ds-listing-overview__table td {
      display: grid;
      grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr);
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      border-bottom: 1px solid var(--border-subtle);
      white-space: normal;
    }

    .ds-listing-overview__table td::before {
      content: attr(data-label);
      color: var(--text-secondary);
      font-weight: var(--font-weight-semibold);
    }

    .ds-listing-overview__table td:last-child {
      border-bottom: 0;
    }

    .ds-listing-overview__row-actions {
      display: grid;
      grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr);
      justify-content: flex-start;
      gap: var(--space-sm);
    }

    .ds-listing-overview__row-actions::before {
      grid-column: 1;
    }

    .ds-listing-overview__row-actions .ds-listing-overview__action-list {
      display: flex;
      grid-column: 2;
      justify-content: flex-end;
      gap: var(--space-sm);
      min-width: 0;
    }

    .ds-listing-overview__row-actions .ds-listing-overview__action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 2.25rem;
      padding: 0.35rem 0.75rem;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-md);
      background: var(--surface-primary);
      text-decoration: none;
    }

    .ds-listing-overview__row-actions .ds-listing-overview__action:hover,
    .ds-listing-overview__row-actions .ds-listing-overview__action:focus-visible {
      border-color: var(--accent-primary);
    }

    .ds-listing-edit-form {
      padding: var(--space-sm);
    }

    .ds-listing-edit-form .ds-form-grid,
    .ds-listing-edit-form .ds-form-card__body > dl,
    .ds-listing-edit-form .ds-media-assignment,
    .ds-listing-edit-form .ds-media-readiness__list,
    .ds-listing-edit-form .ds-form-card-pair,
    .ds-listing-edit-form .ds-form-grid--property-core,
    .ds-listing-edit-form .ds-form-grid--property-status,
    .ds-listing-edit-form .ds-form-grid--inspection-row {
      grid-template-columns: minmax(0, 1fr);
    }

    .ds-listing-edit-form .ds-media-field--gallery,
    .ds-listing-edit-form .ds-form-field--span-2,
    .ds-listing-edit-form .ds-form-field--span-3,
    .ds-listing-edit-form .ds-form-field--span-4,
    .ds-listing-edit-form .ds-form-field--span-6 {
      grid-column: auto;
    }

    .ds-listing-edit-form .ds-form-card__header,
    .ds-listing-edit-form .ds-form-card__body,
    .ds-listing-edit-form .ds-form-actions {
      padding: var(--space-md);
    }

    .ds-listing-edit-form .ds-form-card__body > dl {
      gap: var(--space-2xs);
    }

    .ds-listing-edit-form .ds-form-card__body > dl dd + dt {
      margin-top: var(--space-xs);
    }

    .ds-listing-edit-form .ds-form-actions {
      align-items: stretch;
      flex-direction: column;
    }

    .ds-listing-edit-form .ds-form-actions--bar {
      align-items: stretch;
      gap: var(--space-md);
    }

    .ds-listing-edit-form .ds-form-actions__group {
      align-items: stretch;
      flex-direction: column;
      width: 100%;
    }

    .ds-listing-edit-form .ds-form-field--schedule-inline {
      min-width: 0;
    }

    .ds-listing-edit-form .ds-form-actions__group--secondary {
      margin-left: 0;
    }

    .ds-listing-edit-form .ds-form-actions__group--schedule {
      flex-wrap: wrap;
      margin-left: 0;
    }

    .ds-listing-edit-form .ds-form-actions button {
      width: 100%;
    }

    .ds-listing-edit-form .ds-form-actions--save-exit .portal-button {
      width: 100%;
      min-width: 0;
    }

    .ds-listing-edit-form .ds-map-link-field {
      align-items: stretch;
      flex-direction: column;
    }

    .ds-listing-edit-form .ds-media-preview {
      min-height: 7rem;
    }

    .ds-listing-edit-form .ds-media-preview__item {
      width: 12rem;
      min-height: 13.4rem;
    }

    .ds-listing-edit-form .ds-inline-action {
      align-items: stretch;
      flex-direction: column;
    }

    .ds-listing-edit-form .ds-inline-action .portal-button {
      width: 100%;
    }
  }

}
@layer overrides {

  /* =========================================================
   * PAGE-SPECIFIC OVERRIDES
   * ========================================================= */

  .page-home .c-hero {
    padding-top: var(--section-padding-y-lg);
  }


  /* =========================================================
   * SECTION-SPECIFIC
   * ========================================================= */

  .section-featured .c-card {
    box-shadow: var(--shadow-md);
  }


  /* =========================================================
   * VARIANT EXPERIMENTS
   * ========================================================= */

  .is-highlight .c-heading {
    font-family: var(--font-accent);
  }


  /* =========================================================
   * QUICK FIX (TEMP — must be removed later)
   * ========================================================= */

  .c-button {
    letter-spacing: 0.02em; /* TODO: move to component */
  }

}

/* =========================================================
 * PUBLIC HEADER — TABLET PORTRAIT
 *
 * Bricks switches the approved compact header on at 767px.
 * Standard iPad portrait viewports start at 768px, where the
 * desktop header is too dense. Extend the compact presentation
 * through the Tablet Portrait breakpoint without changing the
 * 1024px landscape/desktop header.
 * ========================================================= */

@media (min-width: 768px) and (max-width: 991px) {
  #brxe-24459f {
    display: none !important;
  }

  #brxe-igdhzr {
    display: flex !important;
    height: 11rem !important;
  }

  #brxe-kxbvfe {
    width: 60px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #brxe-jwhcgu {
    flex-basis: 60px !important;
  }

  #brxe-hktmuv {
    font-size: 26px !important;
  }

  #brxe-oaygdk {
    align-items: flex-start !important;
    margin-left: 1rem !important;
  }

  #brxe-jigbxg {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    column-gap: 1.5rem !important;
    width: 100% !important;
  }

  #brxe-fajmwq {
    display: grid !important;
    grid-template-columns: 1fr 40px !important;
    align-items: center !important;
  }

  #brxe-univwj .bricks-nav-menu-wrapper.mobile_landscape {
    display: none !important;
  }

  #brxe-univwj .bricks-mobile-menu-toggle {
    display: block !important;
  }
}

/* =========================================================
 * RESPONSIVE POLISH — UAT PASS
 *
 * These selectors intentionally use stable Bricks element IDs
 * (or reusable component classes) so the fixes remain scoped to
 * the affected templates and do not alter desktop presentation.
 * ========================================================= */

/* Home: keep the 99 Jones Street feature image visually useful on
 * landscape phones and portrait tablets. */
@media (min-width: 600px) and (max-width: 991px) {
  #brxe-qvxiov {
    width: min(100%, 52rem) !important;
    margin-inline: auto !important;
  }
}

/* Buy: remove the legacy desktop header offset beneath the compact
 * header at phone-landscape/tablet widths. */
@media (min-width: 600px) and (max-width: 991px) {
  #brxe-9a49e7 {
    margin-top: 11rem !important;
  }
}

/* Sell: keep the secondary content gutter compact at tablet widths.
 * The Home Court grid itself is owned by Bricks so editors can adjust
 * its responsive columns without fighting source CSS. */
@media (min-width: 821px) and (max-width: 991px) {
  #brxe-jfvdll {
    column-gap: 2.4rem !important;
    margin-top: 2.4rem !important;
  }
}

@media (min-width: 600px) and (max-width: 820px) {
  #brxe-wopbfo,
  #brxe-lebjgx {
    transform: none !important;
  }

  #brxe-jfvdll {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    row-gap: 3.2rem !important;
    margin-top: 2.4rem !important;
  }

  #brxe-wopbfo,
  #brxe-lebjgx,
  #brxe-kqykfk {
    width: 100% !important;
  }

  #brxe-kqykfk {
    height: auto !important;
  }
}

/* Sell Home Court: landscape phones and portrait tablets retain a
 * compact two-column composition. Show the complete portrait image
 * and neutralise the decorative parallax transform at these widths. */
@media (min-width: 479px) and (max-width: 991px) {
  #brxe-mcyntd {
    align-self: center !important;
    transform: none !important;
  }

  #brxe-mcyntd,
  #brxe-shxgmt {
    width: 100% !important;
    max-width: 100% !important;
  }

  #brxe-shxgmt {
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* Property Detail landscape-phone and wider: keep the facts row
 * overlapping the gallery while reserving enough space beneath it
 * to avoid covering the photo counter or Map/Floor Plan controls. */
@media (min-width: 600px) {
  .single-listing #brxe-2b96e6 {
    margin-bottom: 5rem !important;
  }

  .single-listing #brxe-henjkl {
    top: auto !important;
    right: 0 !important;
    bottom: -5% !important;
  }
}

@media (min-width: 992px) {
  .single-listing #brxe-henjkl {
    right: 4rem !important;
  }
}

/* Manage: keep each semantic address fragment intact while allowing
 * the row to wrap between unit, street and suburb on narrower cards. */
@media (max-width: 991px) {
  .brxe-e2e02d {
    flex-wrap: wrap !important;
    column-gap: 1rem !important;
  }

  .brxe-3d5aec,
  .brxe-8f3003,
  .brxe-b4bbed {
    white-space: nowrap !important;
  }
}

/* About: every portrait occupies the same square and starts flush with
 * its profile copy even when names/roles vary in length. */
@media (max-width: 991px) {
  .ds-query-public-team-members > .brx-grid {
    align-items: start !important;
  }

  #brxe-fipttl .brxe-bhsxeq,
  #brxe-fipttl .brxe-pqdook,
  #brxe-fipttl .brxe-pqdook img {
    width: 9.6rem !important;
    height: 9.6rem !important;
    aspect-ratio: 1 / 1 !important;
  }

  #brxe-fipttl .brxe-pqdook,
  #brxe-fipttl .brxe-pqdook img {
    object-fit: cover !important;
    object-position: center !important;
  }

  #brxe-czbona {
    width: calc(100% - 4rem) !important;
    margin-inline: 2rem !important;
  }
}

/* Property Detail: compact the initial offset, normalise gallery
 * spacing, keep facts clear of the photo counter, and stack the
 * enquiry heading above its form on phones. */
@media (max-width: 599px) {
  .single-listing #brxe-631936 {
    padding-top: 15rem !important;
  }

  .single-listing #brxe-2b96e6 {
    flex-flow: column nowrap !important;
    row-gap: 0.8rem !important;
  }

  .single-listing #brxe-33efe0 {
    row-gap: 0.8rem !important;
  }

  .single-listing #brxe-henjkl {
    position: static !important;
    width: 100% !important;
    margin-top: 1.2rem !important;
    padding-right: 1.2rem !important;
    justify-content: flex-end !important;
    align-self: stretch !important;
  }

  .single-listing #brxe-klecxx {
    margin-top: 4rem !important;
  }

  .single-listing #brxe-zwyquo {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 2.4rem !important;
  }

  .single-listing #brxe-ptwppc {
    width: 100% !important;
  }
}