/*
  Crest & Haven — design variant
  Loaded after /assets/css/site.css and uses its tokens, fonts and components unchanged.
  Everything here sits in one layer declared after "pages", so it wins without specificity tricks.

  The homepage is the Private Office page (everything under "private office" below). The rules for the
  earlier homepage (.hero-home, .featured, .story, .for-owners) were removed with it; .listing, .invite,
  .status and .steps stay because Properties and Our Approach still use them.
*/
/*
  While Nimbus Roman is still loading, the page draws its serif with whatever the device has. Those
  faces are wider, which pushed the hero headline onto a fourth line on phones until the web font
  arrived. This face borrows a system serif and scales it to Nimbus Roman's width, so the lines
  break the same way from the first paint. It never replaces Nimbus Roman: it only stands in.
*/
@font-face {
  font-family: "Nimbus Roman Fallback";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif"), local("Tinos"),
       local("Noto Serif"), local("Source Serif Pro"), local("DejaVu Serif"), local("Georgia");
  size-adjust: 90%;
  ascent-override: 98%;
  descent-override: 24%;
  line-gap-override: 0%;
  font-display: swap;
}

@layer variant {
  :root {
    /* Nimbus Roman first, then the matched stand-in, then whatever the device has */
    --f-serif: "Nimbus Roman", "Nimbus Roman Fallback", "Times New Roman", Times, serif;
    --header-h: clamp(4.5rem, 4rem + 1.6vw, 5.75rem);
    --edge: max(var(--gutter), (100% - var(--content)) / 2); /* container edge, for images that run to the screen edge */
    --aside: 24rem;
    --split-gap: clamp(3rem, 5vw, 6rem);

    /* Private Office */
    --po-ink: #f1ede6;              /* headings on photography and on the dark ground */
    --po-quiet: #9d9a93;            /* restricted placements, footer text, hints */
    --po-card: #161714;             /* card body, one step above the page */
    --po-line: rgb(214 181 115 / 0.3);
    --po-line-quiet: rgb(241 237 230 / 0.13);
    --po-ease: cubic-bezier(0.32, 0.72, 0.28, 1);
  }

  /* The header stays in view, so anchors land below it */
  html { scroll-padding-top: calc(var(--header-h) + 1rem); }

  /* ------------------------------------------------------------ header */
  .site-header--sticky {
    position: sticky;
    top: 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line-soft);
  }
  .site-header--sticky .header-bar { min-height: var(--header-h); padding-block: 0.5rem; }
  .site-header--sticky .nav a, .site-header--sticky .header-cta { white-space: nowrap; }
  /* Narrow desktops: the owners label still fits on one line beside the navigation */
  @media (width >= 64rem) and (width < 75rem) {
    .site-header--sticky .header-bar { gap: 1rem; }
    .site-header--sticky .nav { gap: 1.25rem; }
    .site-header--sticky .header-cta { margin-left: 0.25rem; padding-inline: 1rem; }
  }
  /* Sticky elements further down start below the header */
  .levels__photo { top: calc(var(--header-h) + 1.5rem); }

  /* ----------------------------------------------------------- listing */
  /* One available property: photograph beside name, place and the way to the detail page */
  .listing { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
  .listing__media picture { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface); }
  /* A square photograph in a landscape frame: the frame decides the crop, top and bottom, centred */
  .listing__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .listing__name { margin-top: 1.25rem; font-size: var(--t-h2-compact); line-height: 1; }
  .listing__place {
    margin-top: 0.6rem;
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: var(--t-small);
    line-height: 1.4;
    color: var(--c-text-2);
  }
  .listing__price { margin-top: clamp(1.5rem, 2.5vw, 2rem); }
  .listing__price .price__value { font-size: var(--t-h3); line-height: 1.1; }
  .listing__price .price__label { margin-top: 0.35rem; }
  .listing__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
    border-top: 1px solid var(--c-line);
  }
  .listing__facts div { padding: 0.75rem 1rem 0.85rem 0; border-bottom: 1px solid var(--c-line-soft); }
  .listing__facts div:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--c-line-soft); }
  .listing__facts dt { font-family: var(--f-sans); font-weight: 500; font-size: 0.875rem; line-height: 1.4; color: var(--c-text-3); }
  .listing__facts dd { margin: 0.2rem 0 0; font-size: var(--t-h4); line-height: 1.2; }
  .listing__link { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
  @media (width < 30rem) {
    .listing__link { width: 100%; }
  }
  @media (width >= 48rem) {
    .listing__media picture { aspect-ratio: 3 / 2; }
  }
  @media (width >= 64rem) {
    .listing { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--split-gap); align-items: center; }
  }

  /* Status labels: text plus a marker, never colour alone */
  .status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid;
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.3;
    letter-spacing: 0.06em;
  }
  .status::before { content: ""; width: 0.45rem; height: 0.45rem; border: 1px solid currentColor; border-radius: 50%; }
  .status--available { color: var(--c-gold); border-color: var(--c-line); }
  .status--available::before { background: currentColor; }
  .status--sold { color: var(--c-text-2); border-color: var(--c-line-soft); }

  /* Closing invitation: title and lede share a row, the action sits below */
  .invite { padding-block: var(--space-section); }
  .invite__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "lede" "action";
    row-gap: 1.25rem;
  }
  .invite__title { grid-area: title; font-size: var(--t-h2); line-height: 1; }
  .invite .lede { grid-area: lede; max-width: 24em; }
  .invite__action { grid-area: action; justify-self: start; margin-top: 0.75rem; }
  @media (width < 30rem) {
    .invite__action { width: 100%; }
  }
  @media (width >= 75rem) {
    .invite__grid {
      grid-template-columns: minmax(0, 1fr) var(--aside);
      grid-template-areas: "title lede" "action action";
      column-gap: var(--split-gap);
      row-gap: clamp(1.75rem, 2.4vw, 2.5rem);
    }
    .invite .lede { align-self: end; padding-bottom: 0.3em; }
    .invite__action { margin-top: 0; }
  }

  /* -------------------------------------------------------- properties */
  .page-head { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(1rem, 0.5rem + 1.5vw, 2rem); }
  .page-head__title { font-size: var(--t-h1); line-height: 1; }
  .page-head .lede { max-width: 24em; margin-top: 1rem; }

  .offer { padding-block: clamp(2rem, 4vw, 3.5rem) var(--space-section); }
  .offer__title {
    margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--c-line);
    font-size: var(--t-h3);
    line-height: 1.1;
  }

  /* Sold: a quieter band, smaller frames, no links or actions */
  .offer--sold {
    padding-block: clamp(3rem, 6vw, 5.5rem);
    background: var(--c-surface);
    border-top: 1px solid var(--c-line-soft);
  }
  .offer--sold .offer__title { color: var(--c-text-2); border-bottom-color: var(--c-line-soft); }
  /*
    Sold properties: one structure for every card, so the three read as one set — the same width,
    the same height, the same square frame and the label in the same place. They carry only what is
    confirmed: the photograph the client delivered and the status. No name, place, price, area or
    date, because none of those are confirmed for these three; and no link, because there is no
    page behind them. A card added later needs no rule of its own.
  */
  .sold-grid {
    list-style: none;
    margin-top: clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: clamp(2rem, 4vw, 2.5rem);   /* the same spacing as the placements grid */
  }
  /* The same steps as the placements grid on the homepage */
  @media (width >= 48rem) {
    .sold-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (width >= 64rem) {
    .sold-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .sold-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--po-line-quiet);
    background: var(--po-card);
  }
  .sold-card__media {
    position: relative;
    flex: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--po-card);
  }
  .sold-card__media picture { display: block; width: 100%; height: 100%; }
  .sold-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* The same label as the placements on the homepage, in gold: sold, not on offer */
  .sold-card__status {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: rgb(10 11 9 / 0.78);
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 0.6875rem;
    line-height: 1.3;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-gold);
  }

  /* ---------------------------------------------------- other pages */
  /* Closing band without a background photograph */
  .closing--plain { background: var(--c-surface); border-bottom-color: var(--c-line-soft); border-top: 1px solid var(--c-line-soft); }
  .closing--plain::after { content: none; }
  .closing--plain .lede { color: var(--c-text-2); }

  /* The Villa: key figures in three columns */
  @media (width >= 56rem) {
    .glance__grid--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .glance__grid--thirds .glance__item { padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--c-line-soft); }
    .glance__grid--thirds .glance__item:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  }
  /* Photograph credits are not shown in the enlarged gallery */
  .lightbox__credit:empty { display: none; }

  /* ---------------------------------------------------------- footer */
  .site-footer--structure {
    padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(1.25rem, 2vw, 1.75rem);
    border-top: 1px solid var(--c-line-soft);
  }
  .footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  }
  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: var(--target);
    padding-top: 0.75rem;
    border-top: 1px solid var(--c-line-soft);
    color: var(--c-text-2);
    font-size: var(--t-small);
  }
  .footer-nav a[aria-current="page"] { color: var(--c-gold); }
  /* Active main section on a page below it (Properties on /the-villa/): the same look, marked aria-current="true", not "page" */
  .nav a[aria-current="true"]::after { transform: scaleX(1); }
  .menu-panel li a[aria-current="true"], .footer-nav a[aria-current="true"] { color: var(--c-gold); }
  @media (width < 48rem) {
    .site-footer--structure .footer-nav { flex-direction: column; }
  }

  /* ---------------------------------------------------- enquiry sending */
  .form-hp, .form-hp * { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
  .form-status { font-family: var(--f-sans); font-size: 0.9375rem; line-height: 1.5; color: var(--c-text-2); }
  .form-status[data-tone="error"] { color: var(--c-error); }
  [data-form-panel] > .form-status:not(:empty) { margin-top: 1rem; }
  .review .form-status:not(:empty) { margin-top: 1rem; }
  .btn[aria-busy="true"] { cursor: progress; }
  .enquiry-success:focus { outline: none; }
  .enquiry-success .lede { max-width: 26em; margin: 1.25rem 0 2rem; }
  .enquiry-success .help { margin-top: 1rem; }

  /* ==================================================================== */
  /* private office — homepage                                            */
  /* ==================================================================== */

  /*
    The Private Office header is used on the homepage and, since the finishing round, on every public
    page after it (body class po-shell). Its height follows the reference: about 73px on a 393px phone.
  */
  .page-private-office, .po-shell {
    --header-h: clamp(4.5rem, 4.3rem + 0.5vw, 4.75rem);
  }
  .page-private-office {
    background: #0c0d0b;
  }

  /* ------------------------------------------------------------ header */
  .po-header {
    position: relative;
    z-index: 40;
    /* The colour right behind the wordmark; Private Office is drawn thinner against it, see below */
    --po-mark-ground: #0b0c0a;
    background: rgb(10 11 9 / 0.62);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--po-line-quiet);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .po-header { background: rgb(10 11 9 / 0.92); }
  }
  /*
    Homepage: the header sits at the top of the page and scrolls away with it; it is not fixed now
    that it carries no menu. Its colour is the deep night blue of the header in the client's
    reference (from about #0a0f17 at the top to #192b44 at the bottom there, over the photograph);
    here one even tone in that range, so it joins the evening hero below without a gradient.
  */
  .page-private-office .po-header {
    --po-mark-ground: #111c2d;
    background: var(--po-mark-ground);
    backdrop-filter: none;
  }
  /*
    Homepage: the wordmark a quarter larger than on the other pages. Every part is in em of
    .po-brand, so name, rule, gaps and Private Office all grow together. The wordmark is about
    19.3em wide; below roughly 300px the second value takes over so it keeps at least 1.5rem free
    on each side instead of breaking or running off the screen. The hairline that makes Private
    Office finer grows by the same quarter.
  */
  /*
    Where the wordmark sits in the header is judged separately for a desktop and for a phone; the
    two are not the same picture. Both move the mark as one piece — both words, the rule and the
    spacing between them — and neither touches the header's height or the size of the letters.
  */
  .page-private-office .po-brand {
    position: relative;
    /* The letter-space after the last letter of Office would otherwise pull the mark off centre */
    padding-left: 0.145em;
    font-size: min(clamp(0.8rem, 0.725rem + 0.3125vw, 1.015625rem), calc((100vw - 3rem) / 19.3));
  }
  /* Phones, after the client's reference: there the mark sits a touch above the middle of the bar */
  @media (width < 48rem) {
    .page-private-office .po-brand { top: -1px; }
  }
  /* Desktop: dead centre reads as hanging low in this wide bar, so the mark sits higher */
  @media (width >= 64rem) {
    .page-private-office .po-brand { top: -6px; }
  }
  .page-private-office .po-brand__office { -webkit-text-stroke-width: 0.375px; }
  /*
    The pages after the homepage have no photograph under the header, so there it takes its own
    place at the top and stays in view while scrolling, instead of lying over the first heading.
  */
  .po-shell .po-header { position: sticky; top: 0; }
  .po-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-h);
  }

  /*
    The wordmark is one unit: every part is sized in em from .po-brand, so the ratio between
    CREST & HAVEN, the rule and Private Office stays the same at every width. Measured against the
    client's reference at 393px: CREST & HAVEN about 89px wide and light, the rule 12px high, and
    Private Office about 86px wide, with 10.5px before the rule and 7.5px after it.
  */
  /*
    One line of type, not two boxes side by side: the halves are inline, so CREST & HAVEN and
    Private Office share the baseline the fonts give them, at any size, with nothing nudging them
    afterwards. The rule between them has no letters, so it keeps to the middle.
  */
  .po-brand {
    display: inline-block;
    min-height: var(--target);
    /* The mark's line is as tall as the touch target, so the type sits in the middle of it */
    line-height: var(--target);
    white-space: nowrap;
    font-size: clamp(0.64rem, 0.58rem + 0.25vw, 0.8125rem);
    color: var(--po-ink);
    text-decoration: none;
  }
  .po-brand__name,
  .po-brand__office { display: inline-block; }
  .po-brand__name {
    font-family: var(--f-sans);
    font-weight: 400;
    font-size: 1em;
    line-height: 1.2;
    letter-spacing: 0.115em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .po-brand__rule {
    display: inline-block;
    /* Set from the baseline of the letters, like everything else on this line */
    vertical-align: -0.22em;
    width: 1px;
    height: 1.17em;
    margin: 0 0.73em 0 0.92em;
    background: var(--c-line);
  }
  /*
    Crest & Haven leads: its capitals are the largest thing in the mark, and Private Office sits
    beside them a little smaller, at about nine tenths of their height. The serif has only one
    weight, so a hairline stroke in the colour of the header behind it takes a little off every
    edge and lets it read lighter; the letter-spacing is a touch more open for the same reason.
  */
  .po-brand__office {
    font-family: var(--f-serif);
    font-size: 1.05em;
    line-height: 1.2;
    letter-spacing: 0.095em;
    white-space: nowrap;
    color: var(--c-gold);
    -webkit-text-stroke: 0.3px var(--po-mark-ground, #0b0c0a);
  }
  /* The private office keeps one way in at every width: the wordmark and the menu, nothing else */
  .po-menu-toggle { display: inline-grid; margin-left: 0; color: var(--po-ink); }
  /* Homepage for now: the wordmark alone, centred on the full width of the header */
  .po-header--centred .po-header__bar { justify-content: center; }
  /* Three thin lines, as in the reference; the middle one and ::before turn into the cross when open */
  .po-menu-toggle .menu-toggle__lines,
  .po-menu-toggle .menu-toggle__lines::before,
  .po-menu-toggle .menu-toggle__lines::after { width: 1.5625rem; }
  .po-menu-toggle .menu-toggle__lines { transform: none; }
  .po-menu-toggle .menu-toggle__lines::before { top: -8.5px; }
  .po-menu-toggle .menu-toggle__lines::after {
    content: "";
    position: absolute;
    top: 8.5px;
    display: block;
    height: 1px;
    background: currentColor;
    transition: opacity 0.2s var(--ease);
  }
  .po-menu-toggle[aria-expanded="true"] .menu-toggle__lines { transform: rotate(45deg); }
  .po-menu-toggle[aria-expanded="true"] .menu-toggle__lines::before { transform: translateY(8.5px) rotate(-90deg); }
  .po-menu-toggle[aria-expanded="true"] .menu-toggle__lines::after { opacity: 0; }
  .po-menu { background: rgb(12 13 11 / 0.97); border-color: var(--po-line-quiet); }
  .po-menu li a { border-bottom-color: var(--po-line-quiet); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

  /* -------------------------------------------------------------- hero */
  .po-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: center;
    /*
      The header now sits above the hero instead of over it. Header plus hero still fill exactly
      one screen, and the header's height is no longer added to the top padding, so the text of
      the hero stays where it was on the screen. The 1px is the header's bottom rule.
    */
    min-height: calc(100svh - var(--header-h) - 1px);
    padding-block: clamp(2rem, 6vh, 4rem) clamp(2.5rem, 8vh, 5rem);
    overflow: hidden;
  }
  .po-hero__media { position: absolute; inset: 0; z-index: -2; }
  .po-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
  /*
    The reference is a cool, deep-blue evening. The photograph that stands in for it is a warm one,
    so it is graded here instead of being swapped for a different villa: a blue-grey wash over the
    whole frame, darker at the top and bottom so the wordmark and the heading stay readable.
  */
  .po-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(180deg, rgb(8 12 20 / 0.82) 0%, rgb(8 12 20 / 0.34) 26%, rgb(8 12 20 / 0.3) 58%, rgb(6 9 14 / 0.86) 100%),
      linear-gradient(0deg, rgb(24 38 62 / 0.52), rgb(24 38 62 / 0.52));
  }
  /*
    The photograph and its overlay keep the area they had when the header lay over them: they start
    at the top of the page, above the hero, and the hero clips the part the header now covers. So the
    photograph is framed exactly as before, at the same size and in the same place on the screen.
  */
  .po-hero__media, .po-hero::after { top: calc(-1 * (var(--header-h) + 1px)); }
  .po-hero__inner { text-align: center; }

  .po-hero__eyebrow {
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(0.6875rem, 0.64rem + 0.2vw, 0.8125rem);
    line-height: 1.4;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-indent: 0.3em;          /* the trailing letter-space does not push the line off centre */
    color: var(--c-gold);
  }
  .po-hero__title {
    margin-top: clamp(1.5rem, 3.5vh, 2.75rem);
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: clamp(2.75rem, 2.16rem + 3.43vw, 5.25rem);
    line-height: 1.04;
    letter-spacing: -0.005em;
    color: var(--po-ink);
    text-wrap: balance;
  }
  /*
    Phones follow the reference: Exceptional / Assets. / Private Placement., three lines. Each span
    is one of those lines and never breaks inside itself, whatever font is drawing it.

    "Private Placement." is the longest line, so below 40rem the size follows the width of the
    screen rather than a step scale. The room it needs depends on the typeface: about 7.3 times the
    font size in Nimbus Roman, but more in the serif a phone falls back to while the web font is
    still on its way — which is what broke the line into four. Two things keep that from happening:
    the fallback below is matched to Nimbus Roman's width, and the formula leaves room to spare
    instead of fitting exactly. It stops growing at 3.5rem, where the two-line desktop setting
    takes over.
  */
  .po-l { display: block; white-space: nowrap; }
  @media (width < 40rem) {
    .po-hero__inner { width: min(100% - 2rem, var(--content)); }
    .po-hero__title { font-size: min(calc(13vw - 4px), 3.5rem); }
  }
  @media (width >= 40rem) {
    .po-l { display: inline; }
    .po-l--last { display: block; }
  }
  .po-hero__lede {
    max-width: 30rem;
    margin: clamp(1.25rem, 3vh, 2rem) auto 0;
    font-family: var(--f-sans);
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    line-height: 1.75;
    color: rgb(241 237 230 / 0.86);
  }

  .po-hero__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    width: min(100%, 22rem);
    min-height: 3.25rem;
    margin: clamp(2rem, 5vh, 3.25rem) auto 0;
    padding: 0.9rem 1.5rem;
    border: 1px solid var(--po-line);
    background: rgb(8 10 14 / 0.28);
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(0.6875rem, 0.65rem + 0.16vw, 0.8125rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--po-ink);
    transition: border-color 0.3s var(--po-ease), background-color 0.3s var(--po-ease), color 0.3s var(--po-ease);
  }
  .po-hero__action:hover { border-color: var(--c-gold); background: rgb(214 181 115 / 0.12); color: #fff; }
  .po-hero__arrow { width: 0.7rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
  /*
    Phones: as narrow as its label, centred, as in the reference (about 245 x 46px at 393px).
    The height stays above 44px, so it remains an easy target.
  */
  @media (width < 40rem) {
    .po-hero__action { width: auto; min-height: 2.875rem; gap: 0.65rem; padding: 0.7rem 1.6rem; letter-spacing: 0.18em; }
  }

  /* --------------------------------------------- placements and sold */
  .po-placements {
    position: relative;
    z-index: 1;
    padding-block: clamp(3.5rem, 2.5rem + 4.5vw, 7rem) clamp(4rem, 3rem + 5vw, 8rem);
    background: #0c0d0b;
  }
  /* No header stays in view on the homepage, so an anchor there lands at the very top */
  :root:has(> body.page-private-office) { scroll-padding-top: 0; }
  .po-placements__head { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--po-line-quiet); }
  /*
    Sold properties on the homepage: the same band, the same heading and the same card sizes as the
    placements above it, so the two read as one page. Only the space between them is larger, and
    the section carries no line of its own above the heading.
  */
  .po-placements--sold { padding-block: 0 clamp(4rem, 3rem + 5vw, 8rem); }
  .po-placements__title {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: clamp(2.125rem, 1.7rem + 2.1vw, 3.75rem);
    line-height: 1.05;
    color: var(--po-ink);
  }
  .po-placements__meta {
    margin-top: clamp(0.5rem, 1vw, 0.85rem);
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(0.6875rem, 0.65rem + 0.16vw, 0.8125rem);
    line-height: 1.5;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--c-gold);
  }

  /*
    Placement cards: one structure for every card, current and future, with no exception per
    placement. Each card, top to bottom:

      .po-card__media     one fixed frame (--po-card-frame), the photograph filling it
      .po-card__body
        .po-card__title
        .po-card__place
        .po-card__divider
        .po-card__facts
        .po-card__action  (active) or .po-card__locked (restricted): the same box

    Cards on one row stretch to the same height; stacked cards too (grid-auto-rows: 1fr). The action
    is pushed to the bottom (margin-top: auto) and has a fixed height, so every action ends on the
    same line whatever its label.
  */
  .po-grid {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: clamp(2rem, 4vw, 2.5rem);
    margin-top: clamp(2rem, 4vw, 3rem);
  }
  @media (width >= 48rem) {
    .po-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (width >= 64rem) {
    .po-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .po-card {
    --po-card-frame: 1 / 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--po-line-quiet);
    background: var(--po-card);
  }

  /*
    The same frame on every card: square, full card width. The photograph fills it (cover, centred),
    so every card shows an equally large picture. The two square photographs fit exactly; a wider
    one loses a narrow strip at either side. Never stretched: cover keeps the proportions.
  */
  .po-card__media {
    position: relative;
    flex: none;
    width: 100%;
    aspect-ratio: var(--po-card-frame);
    overflow: hidden;
    background: var(--po-card);
  }
  .po-card__media picture { display: block; width: 100%; height: 100%; }
  .po-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .po-card--restricted .po-card__media img { filter: saturate(0.72) brightness(0.82); }

  .po-card__status {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: rgb(10 11 9 / 0.78);
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 0.6875rem;
    line-height: 1.3;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--po-ink);
  }
  .po-card__status--restricted { color: var(--po-quiet); }
  .po-card__status--sold { color: var(--c-gold); }

  .po-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    container-type: inline-size;   /* the action's width, for the label rule below */
  }
  .po-card__title {
    margin: 0;
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
    line-height: 1.1;
    color: var(--po-ink);
  }
  .po-card__place {
    margin-top: 0.55rem;
    font-family: var(--f-sans);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgb(241 237 230 / 0.78);
  }
  .po-card__divider {
    flex: none;
    height: 1px;
    margin-block: clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--po-line-quiet);
  }
  .po-card__facts { margin: 0 0 clamp(1.5rem, 3vw, 2rem); }
  .po-card__fact {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.35em;
    font-family: var(--f-sans);
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--po-quiet);
  }
  .po-card__fact dt::after { content: ":"; }
  .po-card__fact dd { margin: 0; color: rgb(241 237 230 / 0.82); }
  .po-card--restricted .po-card__fact dd { color: var(--po-quiet); }

  /*
    The action box: identical on every card — width, height, padding, border width, type — only
    border colour, text colour and behaviour differ between the active and the restricted one.
    Stacked, its height is fixed, never taken from the label: one line where the longest label
    fits (an action of 16.5rem and wider), two lines below that. Side by side, see further down.
  */
  .po-card__action,
  .po-card__locked,
  .po-card__closed {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.25rem;
    margin-top: auto;
    padding: 0 0.75rem;
    border: 1px solid var(--po-line-quiet);
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
  }
  @container (width < 16.5rem) {
    .po-card__action,
    .po-card__locked,
    .po-card__closed {
      height: calc(2 * 1.4em + 1.8rem + 2px);
      white-space: normal;
    }
  }

  /* The one action on this page that opens the dossier request */
  .po-card__action {
    border-color: var(--po-line);
    background: transparent;
    color: var(--po-ink);
    cursor: pointer;
    transition: border-color 0.3s var(--po-ease), background-color 0.3s var(--po-ease);
  }
  .po-card__action:hover { border-color: var(--c-gold); background: rgb(214 181 115 / 0.12); }

  /* Restricted: the same box, but plainly not an action — no highlight, no pointer, no hover */
  .po-card__locked { color: var(--po-quiet); }

  /*
    A sold placement: the same card, the same rows and the same box at the bottom as an active one,
    so the cards of a row read as one set. The box is a state, not an action: no border highlight,
    no pointer, no hover.
  */
  .po-card__closed { color: var(--c-gold); }

  /*
    All four cards on one row (from 64rem) share their rows, so a line that wraps in one card (a
    longer place name on a narrow column) moves title, place, divider, details and action by the
    same amount in every card, and a card without text still ends its box on that same line.
    Below that width the cards wrap over several rows, where the flex structure with equally tall
    grid rows keeps every card the same height. Six rows: frame, title, place, divider, details (flexible), action. The action row
    is shared too, so all actions of a row take the height of the one that needs the most lines.
    The body is then no size container (that would cut it off from the shared rows). Where subgrid
    is not supported the flex structure above still gives equal cards with the actions on one line.
  */
  @media (width >= 64rem) {
    @supports (grid-template-rows: subgrid) {
      .po-grid { grid-auto-rows: auto auto auto auto 1fr auto; }
      .po-card {
        display: grid;
        grid-row: span 6;
        grid-template-rows: subgrid;
        /* One column that may be narrower than its text, so a long word wraps instead of
           widening the card and pushing the photograph past its edge */
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
        height: auto;
      }
      .po-card__body {
        display: grid;
        grid-row: span 5;
        min-width: 0;
        grid-template-rows: subgrid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
        container-type: normal;
      }
      .po-card__action, .po-card__locked, .po-card__closed {
        height: auto;
        min-height: 3.25rem;
        margin-top: 0;
        padding-block: 0.9rem;
        white-space: normal;
      }
    }
  }

  /* ------------------------------------------------------------ footer */
  .po-footer {
    padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem) clamp(2rem, 1.6rem + 2vw, 3rem);
    background: #0a0b09;
    border-top: 1px solid var(--po-line-quiet);
  }
  .po-footer__brand {
    font-family: var(--f-serif);
    font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-gold);
  }
  .po-footer__note {
    max-width: 46rem;
    margin-top: clamp(1rem, 2vw, 1.5rem);
    font-family: var(--f-sans);
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--po-quiet);
  }
  .po-footer__links { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
  .po-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target);
    font-family: var(--f-sans);
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--po-quiet);
    text-decoration-color: var(--po-line-quiet);
    text-underline-offset: 0.35em;
  }
  .po-footer__links a:hover { color: var(--c-gold); }

  /* ------------------------------------------------- dossier request */
  /*
    A native <dialog> opened with showModal(): the browser keeps focus inside, closes on Escape,
    makes the rest of the page inert and returns focus to the button that opened it.
  */
  .po-dialog {
    width: min(100% - 2rem, 34rem);
    max-height: calc(100dvh - 2rem);
    padding: 0;
    border: 1px solid var(--po-line);
    background: #121310;
    color: var(--c-text);
    overflow: visible;
  }
  .po-dialog::backdrop { background: rgb(5 6 5 / 0.78); backdrop-filter: blur(3px); }
  .po-dialog__panel {
    max-height: calc(100dvh - 2rem);
    padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    /*
      When Tab moves focus to something outside the visible part, the panel scrolls it into view.
      These margins keep it clear of the close button at the top and off the very bottom edge,
      so a focused field or Submit Request is never partly cut off.
    */
    scroll-padding: 4rem 0 1.5rem;
  }
  .po-dialog__panel:focus { outline: none; }

  .po-dialog__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: grid;
    place-items: center;
    width: var(--target);
    height: var(--target);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--po-quiet);
    cursor: pointer;
    transition: color 0.25s var(--po-ease);
  }
  .po-dialog__close:hover { color: var(--c-gold); }
  .po-dialog__close svg { width: 1.0625rem; height: 1.0625rem; fill: none; stroke: currentColor; stroke-width: 1.3; }

  .po-dialog__eyebrow {
    padding-right: 2.5rem;
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 0.6875rem;
    line-height: 1.4;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--c-gold);
  }
  .po-dialog__title {
    margin-top: 0.85rem;
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: clamp(1.4375rem, 1.25rem + 0.9vw, 1.875rem);
    line-height: 1.2;
    color: var(--po-ink);
  }
  .po-dialog__intro {
    margin-top: 0.85rem;
    font-family: var(--f-sans);
    font-size: 0.875rem;
    line-height: 1.7;
    color: rgb(241 237 230 / 0.74);
  }

  .po-form { margin-top: clamp(1.5rem, 3vw, 2rem); }
  .po-field { display: grid; margin-top: 1.25rem; }
  .po-field:first-of-type { margin-top: 0; }
  .po-field__label {
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 0.6875rem;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--po-quiet);
  }
  .po-field__input {
    min-height: 3rem;
    margin-top: 0.5rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--po-line-quiet);
    border-radius: 0;
    background: #0c0d0b;
    font-family: var(--f-sans);
    font-size: 1rem;              /* 16px keeps iOS from zooming the page on focus */
    line-height: 1.5;
    color: var(--c-text);
    transition: border-color 0.25s var(--po-ease);
  }
  .po-field__input::placeholder { color: rgb(157 154 147 / 0.6); }
  .po-field__input:hover { border-color: rgb(241 237 230 / 0.26); }
  .po-field__input:focus-visible { border-color: var(--c-gold); outline: 2px solid var(--c-gold); outline-offset: 1px; }
  .po-field__input[aria-invalid="true"] { border-color: var(--c-error); }
  .po-field__hint {
    margin-top: 0.45rem;
    font-family: var(--f-sans);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--po-quiet);
  }
  .po-field__error {
    margin-top: 0.45rem;
    font-family: var(--f-sans);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--c-error);
  }
  .po-field__error[hidden] { display: none; }

  .po-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem 0.85rem;
    margin-top: clamp(1.5rem, 3vw, 1.75rem);
    padding-top: clamp(1.25rem, 2.5vw, 1.5rem);
    border-top: 1px solid var(--po-line-quiet);
  }
  .po-check__box {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.15rem 0 0;
    accent-color: var(--c-gold);
    flex: none;
  }
  .po-check__box:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
  .po-check__label {
    font-family: var(--f-sans);
    font-size: 0.875rem;
    line-height: 1.7;
    color: rgb(241 237 230 / 0.82);
  }
  .po-check__label a { color: var(--c-gold); text-underline-offset: 0.25em; }
  .po-check .po-field__error { grid-column: 2; }
  /* The whole label is the target, so the 20px box is not the only thing to hit */
  .po-check__label { padding-block: 0.25rem; cursor: pointer; }

  .po-dialog__status {
    font-family: var(--f-sans);
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgb(241 237 230 / 0.74);
  }
  .po-dialog__status:not(:empty) { margin-top: 1.25rem; }
  .po-dialog__status[data-tone="error"] { color: var(--c-error); }

  .po-submit {
    width: 100%;
    min-height: 3.5rem;
    margin-top: clamp(1.5rem, 3vw, 2rem);
    padding: 1rem 1.5rem;
    border: 1px solid var(--c-line);
    background: #0a0b09;
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.4;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--po-ink);
    cursor: pointer;
    transition: border-color 0.3s var(--po-ease), background-color 0.3s var(--po-ease), color 0.3s var(--po-ease);
  }
  .po-submit:hover { border-color: var(--c-gold); background: var(--c-gold); color: #15170f; }
  .po-submit[disabled] { opacity: 0.45; cursor: default; }
  .po-submit[disabled]:hover { border-color: var(--c-line); background: #0a0b09; color: var(--po-ink); }
  .po-submit[aria-busy="true"] { cursor: progress; }
  .po-submit--quiet { border-color: var(--po-line-quiet); }

  .po-dialog__done { margin-top: clamp(1.5rem, 3vw, 2rem); }
  .po-dialog__done:focus { outline: none; }
  .po-dialog__done[hidden] { display: none; }
  .po-dialog__done-text {
    padding-left: 1.1rem;
    border-left: 2px solid var(--c-gold);
    font-family: var(--f-serif);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.7;
    color: var(--c-text);
  }
  .po-dialog__done-meta {
    margin-top: 1.25rem;
    font-family: var(--f-sans);
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--po-quiet);
  }
  .po-dialog__done-meta span { color: var(--c-gold); letter-spacing: 0.06em; }

  /* Small phones: the dialog uses the whole screen and scrolls inside itself */
  @media (width < 30rem) {
    .po-dialog { width: 100%; max-width: 100%; max-height: 100dvh; margin: 0; border-inline: 0; }
    .po-dialog__panel { max-height: 100dvh; padding-bottom: max(1.75rem, env(safe-area-inset-bottom, 0px)); }
  }

  @media (prefers-reduced-motion: reduce) {
    .po-hero__action, .po-card__action, .po-submit, .po-dialog__close, .po-field__input { transition: none; }
  }

  /* ==================================================================== */
  /* private office — the pages below the homepage                        */
  /* ==================================================================== */

  /* Properties: the villa is listed without its photograph and without its price */
  .listing--text { grid-template-columns: minmax(0, 1fr); }
  .listing--text .listing__name { margin-top: 1rem; }
  @media (width >= 64rem) {
    .listing--text { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }
  }
  .listing__private {
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
    font-family: var(--f-sans);
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--c-text-3);
  }

  /* The Budva Villa: a teaser and the way to ask for the dossier, nothing that gives it away */
  .po-teaser__note {
    max-width: 34em;
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
    padding-left: 1.1rem;
    border-left: 2px solid var(--c-line);
    font-family: var(--f-sans);
    font-size: var(--t-small);
    line-height: 1.7;
    color: var(--c-text-2);
  }
  .po-teaser__action { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
  @media (width < 30rem) {
    .po-teaser__action { width: 100%; }
  }
  /* The layout section lost its photograph with the rest of the private imagery */
  .levels__grid:not(:has(.levels__photo)) { display: block; }
  .levels__grid:not(:has(.levels__photo)) .levels__details { margin-top: clamp(2rem, 4vw, 3rem); }
  .location__grid:not(:has(.location__media)) { display: block; }

  /* Privacy framework: one column of text, comfortable to read */
  .po-legal { max-width: 40em; }
  .po-legal h2 {
    margin-top: clamp(2.25rem, 4vw, 3.25rem);
    font-size: var(--t-h4);
    line-height: 1.2;
  }
  .po-legal h2:first-child { margin-top: 0; }
  .po-legal p { margin-top: 1rem; }
  .po-legal ul { margin-top: 1rem; padding-left: 1.25rem; }
  .po-legal li { margin-top: 0.6rem; color: var(--c-text-2); }
  .po-legal__note {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--c-line-soft);
    font-family: var(--f-sans);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--c-text-3);
  }
  .nowrap { white-space: nowrap; }
}