/* Site-wide additions that sit on top of the compiled app stylesheet:
   the preferences picker in the header, and pagination under the listing
   grids. Both are driven by /site.js. Colours come from the theme tokens so
   light, dark and the brand palette need no second set of values. */

/* The exported header ships a plain EN/ES link. The picker takes over that
   slot, so the link is hidden only once the picker has actually mounted. */
.tc-prefs-on .header-actions > a.language { display: none; }

.tc-prefs { position: relative; }

.tc-prefs-btn {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 13px; color: inherit;
}
.tc-prefs-btn:hover { color: var(--pink, #fc0076); }
.tc-prefs-btn .tc-flag { width: 22px; height: 15px; flex: none; display: block; }
.tc-prefs-btn svg.tc-chev { width: 14px; height: 14px; transition: transform .18s; }
.tc-prefs-btn[aria-expanded="true"] svg.tc-chev { transform: rotate(180deg); }

.tc-panel {
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 60;
  width: 264px; max-width: calc(100vw - 24px);
  background: var(--popover, #fff); color: var(--popover-foreground, #0a0a0a);
  border: 1px solid var(--border, #d9d4ce);
  box-shadow: 0 18px 44px rgb(0 0 0 / .17);
}
.tc-panel[hidden] { display: none; }

.tc-row { border-bottom: 1px solid var(--border, #d9d4ce); }
.tc-row:last-child { border-bottom: 0; }
.tc-row > button {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; background: none; border: 0; padding: 11px 15px;
  font: inherit; color: inherit; text-align: left;
}
.tc-row > button:hover { background: var(--secondary, #f3eee6); }
.tc-row .tc-k {
  display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--pink, #fc0076);
}
.tc-row .tc-v { display: block; font-size: 13.5px; margin-top: 2px; }
.tc-row .tc-right { display: flex; align-items: center; gap: 9px; flex: none; }
.tc-row svg.tc-chev { width: 15px; height: 15px; color: var(--pink, #fc0076); transition: transform .18s; }
.tc-row > button[aria-expanded="true"] svg.tc-chev { transform: rotate(180deg); }

.tc-opts { max-height: 264px; overflow-y: auto; border-top: 1px solid var(--border, #d9d4ce); }
.tc-opts[hidden] { display: none; }
.tc-opts button {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 10px 15px;
  font: inherit; font-size: 13.5px; color: inherit; text-align: left;
}
.tc-opts button:hover { background: var(--secondary, #f3eee6); }
.tc-opts button[aria-current="true"] { color: var(--pink, #fc0076); font-weight: 600; }
.tc-opts .tc-flag { width: 20px; height: 14px; flex: none; }
.tc-opts .tc-n { margin-left: auto; font-size: 11.5px; color: var(--muted-foreground, #6e6a66); }

/* Converted price shown under the listed price. */
.tc-alt {
  display: block; font-size: 12.5px; font-weight: 400;
  color: var(--muted-foreground, #6e6a66); margin-top: 2px;
}
.listing-card .tc-alt { margin: 2px 22px 0; }

/* Pagination under a listing grid: five rows of three per page. */
.tc-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin-top: 46px;
}
.tc-pager button {
  min-width: 38px; height: 38px; padding: 0 12px;
  background: var(--card, #fff); color: var(--foreground, #0a0a0a);
  border: 1px solid var(--border, #d9d4ce);
  font: inherit; font-size: 13px; font-weight: 600;
}
.tc-pager button:hover:not(:disabled) { border-color: var(--pink, #fc0076); color: var(--pink, #fc0076); }
.tc-pager button[aria-current="true"] {
  background: var(--pink, #fc0076); border-color: var(--pink, #fc0076); color: #fff;
}
.tc-pager button:disabled { opacity: .4; }
.tc-pager .tc-gap { color: var(--muted-foreground, #6e6a66); padding: 0 2px; }
.tc-pager .tc-count {
  flex-basis: 100%; text-align: center; font-size: 12px;
  color: var(--muted-foreground, #6e6a66); margin-top: 4px;
}

@media (max-width: 860px) {
  /* The header is tight on a phone: the flag alone carries the picker, and
     the label would wrap onto a second line. */
  .tc-prefs-btn > span { display: none; }
  .tc-panel { right: -8px; width: 252px; }
  .tc-pager { gap: 6px; margin-top: 34px; }
  .tc-pager button { min-width: 34px; height: 34px; padding: 0 9px; font-size: 12.5px; }
}

/* ------------------------------------------------------------ filter bar */
/* Sits directly above the listing grid, in the same boxed-field language as
   the site's own search widget and enquiry form. */
/* Where carries the longest values, so it gets the widest track. */
.tc-filters {
  display: grid; gap: 18px 22px; align-items: end;
  grid-template-columns: 1.7fr 1.2fr .8fr .95fr .95fr 1.2fr;
  background: var(--card, #fff); border: 1px solid var(--border, #d9d4ce);
  padding: 22px clamp(18px, 2vw, 26px); margin-bottom: 18px;
}
.tc-f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tc-f label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-foreground, #6e6a66);
}
.tc-filters input, .tc-filters select {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px;
  background: var(--card, #fff); color: var(--foreground, #0a0a0a);
  border: 1px solid var(--input, #d9d4ce); border-radius: 0;
  font: inherit; font-size: 14px;
}
.tc-filters input:focus, .tc-filters select:focus {
  border-color: var(--pink, #fc0076);
}
/* Keyboard users navigate by the ring, so it stays visible. */
.tc-filters input:focus-visible, .tc-filters select:focus-visible,
.tc-clear:focus-visible, .tc-pager button:focus-visible {
  outline: 2px solid var(--pink, #fc0076); outline-offset: 2px;
}
.tc-filters input::placeholder { color: var(--muted-foreground, #6e6a66); }
/* Chrome draws a spinner that crowds a four-digit price. */
.tc-filters input[type="number"]::-webkit-outer-spin-button,
.tc-filters input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.tc-filters input[type="number"] { -moz-appearance: textfield; }

.tc-result {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 0 0 26px; font-size: 13px;
  color: var(--muted-foreground, #6e6a66);
}
.tc-result .tc-n { font-weight: 600; color: var(--foreground, #0a0a0a); }
.tc-clear {
  background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
  color: var(--pink, #fc0076); text-decoration: underline; cursor: pointer;
  visibility: hidden;
}
/* Nothing to clear until something is set. */
.tc-filters.tc-narrowed + .tc-result .tc-clear { visibility: visible; }

.tc-empty {
  margin: 34px 0; text-align: center; font-size: 14px;
  color: var(--muted-foreground, #6e6a66);
}

/* -------------------------------------------------------- featured homes */
.tc-featured { padding-top: clamp(38px, 4vw, 64px); }
.tc-feat-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.4vw, 32px);
}
.tc-feat-head h2 { margin: 6px 0 0; }
.tc-eyebrow {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pink, #fc0076);
}
.tc-feat-more {
  font-size: 13px; color: var(--foreground, #0a0a0a);
  border-bottom: 1px solid var(--pink, #fc0076); padding-bottom: 2px;
}
.tc-feat-more:hover { color: var(--pink, #fc0076); }
/* Four across reads as a rail rather than a truncated three-column page. */
.tc-feat-grid { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }

@media (max-width: 1100px) {
  .tc-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tc-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 18px; }
  .tc-feat-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* The app's own search fields are inert on these pages; its tab strip stays
   and the working bar butts up under it as one panel. */
.tc-filters-on form.search-form .search-fields { display: none; }
.tc-filters-on form.search-form { margin-bottom: 0; }
.tc-filters-on .tc-filters { margin-top: -1px; }

/* -------------------------------------------------- featured franchises */
.tc-franchise { padding-top: clamp(38px, 4vw, 64px); }
.tc-franchise-lead {
  max-width: 46ch; margin: 12px 0 0; font-size: 15px; line-height: 1.6;
  color: var(--muted-foreground, #6e6a66);
}
.tc-franchise-photo {
  display: block; width: 100%; height: clamp(220px, 30vw, 420px);
  object-fit: cover; margin-bottom: 0;
}
.tc-franchise-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border: 1px solid var(--border, #d9d4ce);
}
.tc-franchise-card {
  padding: 22px clamp(16px, 1.8vw, 24px);
  border-right: 1px solid var(--border, #d9d4ce);
  color: inherit; text-decoration: none; transition: background .18s;
}
.tc-franchise-row > .tc-franchise-card:last-child { border-right: 0; }
.tc-franchise-card:hover { background: var(--secondary, #f3eee6); }
.tc-office-n {
  display: block; font-size: 11px; letter-spacing: .14em;
  color: var(--muted-foreground, #6e6a66); margin-bottom: 10px;
}
.tc-franchise-card h3 { margin: 0; font-size: 17px; }
.tc-franchise-card p {
  margin: 6px 0 0; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pink, #fc0076);
}

@media (max-width: 700px) {
  .tc-franchise-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-franchise-card:nth-child(2n) { border-right: 0; }
  .tc-franchise-card:nth-child(-n+2) { border-bottom: 1px solid var(--border, #d9d4ce); }
}

/* ------------------------------------------------------- enquiry form */
/* The note read "Enquiries are saved here; CRM delivery is pending", which
   stopped being true once the website-lead call was authorised: enquiries
   reach the CRM. Left up it only tells a real visitor not to use real
   details. It appears on contact, apply, sell, properties and
   new-developments. */
.preview-note { display: none; }

/* Send enquiry is deliberately disabled until consent is given, but the
   enabled state was painted the same pale grey as the disabled one, so a
   form that was ready to send still read as unavailable. */
.enquiry-form .submit:not(:disabled) {
  background: var(--pink, #fc0076);
  color: #fff;
}
.enquiry-form .submit:not(:disabled):hover { background: #ce005f; }
.enquiry-form .submit:disabled { cursor: not-allowed; }

/* ------------------------------------------------------------- wordmark */
/* The app ships a white wordmark and chooses it from a dark-mode flag that
   does not survive hydration, so the black script was left on the dark
   ground in both the header and the footer. Swapping the image in CSS also
   covers the server-rendered listing route, and does it before paint.
   The artwork is identical: the same drawn script, with the pink dot kept. */
:root[data-theme="dark"] img[src$="/assets/wordmark.svg"] {
  content: url("/assets/wordmark-white.svg");
}

/* The app's own form removed its focus ring; a keyboard user needs it back. */
.enquiry-form :is(input, textarea, select, button):focus-visible,
.search-form :is(input, textarea, select, button):focus-visible {
  outline: 2px solid var(--pink, #fc0076); outline-offset: 2px;
}

/* ---------------------------------------------------------------- mobile */
/* The hero headline is clamp(76px, 8.7vw, 142px): on a phone the viewport
   term is about 33px but the floor holds it at 76px, so the last word is
   wider than the screen. It overflows, and the brand dot that follows it is
   pushed onto a line of its own. Lowering only the floor keeps the desktop
   size untouched — at 700px both rules already give 76px. */
@media (max-width: 700px) {
  .hero h1 { font-size: clamp(40px, 13.5vw, 76px); }
  .franchise-hero h1 { font-size: clamp(38px, 12vw, 64px); }
}

/* ----------------------------------------------------------- mobile menu */
/* The drawer ships as a 75%-wide sheet with no padding of its own, so every
   link sat hard against its left border while the page showed through beside
   it. On a phone it takes the whole screen instead, and its title strip is
   built to the same 80px height and 6% inset as the header underneath, so
   the wordmark stays exactly where it was when the menu opened.
   The typed "The Collection." is hidden rather than removed: the drawn
   script is the wordmark, and the h2 still names the dialog for a reader. */
@media (max-width: 850px) {
  body [data-slot="sheet-content"] {
    inset: 0;
    width: 100%;
    max-width: none;
    border-left: 0;
    gap: 0;
    background: var(--background);
  }

  body [data-slot="sheet-content"] [data-slot="sheet-title"] {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 6%;
    margin: 0;
    font-size: 0; /* also collapses the em-sized brand dot beside it */
    border-bottom: 1px solid var(--border);
  }
  body [data-slot="sheet-content"] [data-slot="sheet-title"]::before {
    content: "";
    display: block;
    /* Painted as a background rather than content:url(): Chrome sizes the
       box for content:url() but still paints the artwork at its intrinsic
       1000px width, which spills the script across the whole menu. */
    width: 190px;
    height: 44px;
    background: url("/assets/wordmark.svg") left center / contain no-repeat;
  }
  :root[data-theme="dark"] body [data-slot="sheet-content"] [data-slot="sheet-title"]::before {
    background-image: url("/assets/wordmark-white.svg");
  }

  /* Rows were 26px tall and flush to the edge. A finger needs 44px and the
     text needs the same margin as everything else on the page. */
  body [data-slot="sheet-content"] .mobile-links {
    flex: 1;
    gap: 0;
    padding: 14px 0 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body [data-slot="sheet-content"] .mobile-links a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 6px 6%;
    font-size: 19px;
  }
  body [data-slot="sheet-content"] .mobile-links a:focus-visible {
    outline: 2px solid var(--pink, #fc0076);
    outline-offset: -2px;
  }

  /* The close button lands where the menu button was, at a size a thumb can
     actually hit: a 44px box centred on the header strip. */
  body [data-slot="sheet-content"] > button[class*="absolute"] {
    top: 18px;
    right: calc(6% - 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }
  body [data-slot="sheet-content"] > button[class*="absolute"] svg {
    width: 22px;
    height: 22px;
  }
}

/* The header steps its wordmark down at 520px; the drawer has to step with
   it, or the mark jumps size the moment the menu opens. */
@media (max-width: 520px) {
  body [data-slot="sheet-content"] [data-slot="sheet-title"]::before {
    width: 155px;
    height: 36px;
  }
}

/* ---------------------------------------------------------------- advisors */
/* The advisor directory on /network, mounted by site.js from /api/agents in
   place of the empty state the page ships. Everything here is a token from
   the theme, so light and dark need no second set of values. */

/* The page's own empty state stays in the DOM, hidden, once the directory
   has mounted beside it: see mountAdvisors. */
.empty-state[hidden] { display: none; }
.advisor-directory {
  display: block;
  text-align: left;
  background: transparent;
  padding: 0;
  margin-top: 70px;
}

/* Head: the title carries the page's serif-weight display style, the line
   under it is set small and pink like the page eyebrows, and the intro is
   body copy held to a reading measure. */
.advisor-head h2 {
  margin: 0;
  font-size: clamp(36px, 4.6vw, 60px);
}
.advisor-sub {
  margin: 14px 0 0;
  color: var(--pink, #fc0076);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.advisor-intro {
  margin: 22px 0 0;
  max-width: 760px;
  color: var(--muted-foreground, #6e6a66);
  font-size: 17px;
  line-height: 1.7;
}

/* Filters: one quiet box, three controls, no submit. Results update as the
   visitor types. */
.advisor-filters {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 44px;
  padding: 22px;
  background: var(--secondary, #f3eee6);
}
.advisor-field :is(input, select) {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--border, #d9d4ce);
  background: var(--card, #fff);
  color: var(--foreground, #0a0a0a);
  font: inherit;
  font-size: 15px;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.advisor-field input::-webkit-search-decoration,
.advisor-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.advisor-field select,
.advisor-sort select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6a66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.advisor-field :is(input, select):focus-visible,
.advisor-sort select:focus-visible {
  outline: 2px solid var(--pink, #fc0076);
  outline-offset: 1px;
}

/* The results bar: how many, which page, in what order. */
.advisor-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 34px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border, #d9d4ce);
}
.advisor-count {
  margin: 0;
  color: var(--muted-foreground, #6e6a66);
  font-size: 14px;
}
.advisor-sort {
  margin-left: auto;
}
.advisor-sort select {
  height: 40px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--border, #d9d4ce);
  background-color: var(--card, #fff);
  color: var(--foreground, #0a0a0a);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.advisor-pages {
  display: flex;
  align-items: center;
  gap: 6px;
}
.advisor-pages[hidden] { display: none; }
.advisor-pages button {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  background: var(--card, #fff);
  color: var(--foreground, #0a0a0a);
  border: 1px solid var(--border, #d9d4ce);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0;
}
.advisor-pages button:hover:not(:disabled) { border-color: var(--pink, #fc0076); color: var(--pink, #fc0076); }
.advisor-pages button[aria-current="true"] {
  background: var(--pink, #fc0076);
  border-color: var(--pink, #fc0076);
  color: #fff;
}
.advisor-pages button:disabled { opacity: .4; }
.advisor-pages .tc-gap { color: var(--muted-foreground, #6e6a66); padding: 0 2px; }
.advisor-pages.is-bottom {
  justify-content: center;
  margin-top: 46px;
}
.advisor-none {
  margin: 40px 0 0;
  color: var(--muted-foreground, #6e6a66);
}

/* Cards: four to a row, a portrait first, then the facts in reading order.
   The portrait is the way in to the profile, and grows a little under the
   pointer so it reads as one. */
.advisor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
  margin-top: 34px;
}
.advisor {
  display: flex;
  flex-direction: column;
  background: var(--card, #fff);
}
.advisor-portrait {
  display: block;
  overflow: hidden;
}
.advisor-face {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--secondary, #f3eee6);
  overflow: hidden;
}
.advisor-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.advisor-portrait:hover .advisor-face img { transform: scale(1.04); }
.advisor-face.is-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pink, #fc0076);
  font-family: Archivo, sans-serif;
  font-weight: 600;
  font-size: 44px;
  letter-spacing: -.02em;
}
.advisor-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 18px 20px 22px;
  min-width: 0;
}
.advisor-body h4 {
  margin: 0 0 2px;
  font-family: Archivo, sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.advisor-body h4 a { color: inherit; text-decoration: none; }
.advisor-body h4 a:hover { color: var(--pink, #fc0076); }
.advisor-role {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.advisor-where,
.advisor-areas,
.advisor-license,
.advisor-langs {
  margin: 0;
  color: var(--muted-foreground, #6e6a66);
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.advisor-phone {
  margin: 0;
  font-size: 14.5px;
}
.advisor-phone a { color: inherit; text-decoration: none; }
.advisor-phone a:hover { text-decoration: underline; }

.advisor-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  height: 42px;
  padding: 0 20px;
  background: var(--pink, #fc0076);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease;
}
.advisor-btn:hover { background: #ca005c; color: #fff; }

/* Profile: portrait beside the facts, tabs underneath. */
.advisor-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 36px;
  color: var(--muted-foreground, #6e6a66);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.advisor-back:hover { color: var(--pink, #fc0076); }
.advisor-hero {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.advisor-face.is-large.is-initials { font-size: 72px; }
.advisor-hero-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 6px;
}
.advisor-hero-body h2 {
  margin: 0 0 8px;
  font-size: clamp(38px, 5vw, 64px);
}
.advisor-hero-body .advisor-role { font-size: 17px; }
.advisor-hero-body .advisor-where,
.advisor-hero-body .advisor-areas,
.advisor-hero-body .advisor-langs,
.advisor-hero-body .advisor-license { font-size: 15px; }
.advisor-hero-body .advisor-phone { font-size: 17px; }
.advisor-hero-body .advisor-btn { margin-top: 16px; height: 46px; padding: 0 24px; }

.advisor-panels { margin-top: 56px; }
.advisor-tabs {
  display: flex;
  gap: 30px;
  border-bottom: 1px solid var(--border, #d9d4ce);
}
.advisor-tabs button {
  margin-bottom: -1px;
  padding: 0 0 14px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted-foreground, #6e6a66);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.advisor-tabs button:hover { color: var(--foreground, #0a0a0a); }
.advisor-tabs button[aria-selected="true"] {
  color: var(--foreground, #0a0a0a);
  border-bottom-color: var(--pink, #fc0076);
}
.advisor-panel { padding-top: 30px; }
.advisor-bio { max-width: 820px; }
.advisor-bio p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.75;
}
.advisor-bio p:last-child { margin-bottom: 0; }
.advisor-listings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.advisor-listings .listing-card { position: relative; }
.advisor-sold {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  background: var(--pink, #fc0076);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .advisor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .advisor-filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .advisor-filters { grid-template-columns: 1fr; }
  .advisor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .advisor-hero { grid-template-columns: 1fr; gap: 28px; }
  .advisor-listings { grid-template-columns: 1fr 1fr; gap: 18px; }
  .advisor-face.is-large { max-width: 320px; }
  .advisor-sort { margin-left: 0; }
}
@media (max-width: 480px) {
  .advisor-grid { grid-template-columns: 1fr; }
  .advisor-listings { grid-template-columns: 1fr; }
  .advisor-body { padding: 16px 16px 20px; }
}

/* ----------------------------------------------------------------- offices */
/* The Offices page (/offices, server-rendered): a search, the map with the
   brand's dot for every office, then the offices by country. */

.offices [hidden] { display: none !important; }
.offices-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-bottom: 26px;
}
.offices-tools input {
  flex: 1 1 320px;
  max-width: 520px;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--border, #d9d4ce);
  background: var(--card, #fff);
  color: var(--foreground, #0a0a0a);
  font: inherit;
  font-size: 15px;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.offices-tools input:focus-visible { outline: 2px solid var(--pink, #fc0076); outline-offset: 1px; }
/* The language filter sits beside the search box and matches its height and
   square edge, so the two read as one control rather than two. */
.offices-lang {
  flex: 0 1 220px;
  height: 50px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--border, #d9d4ce);
  background: var(--card, #fff);
  color: var(--foreground, #0a0a0a);
  font: inherit;
  font-size: 15px;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) 23px, calc(100% - 14px) 23px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.offices-lang:focus-visible { outline: 2px solid var(--pink, #fc0076); outline-offset: 1px; }
.offices-count { color: var(--muted-foreground, #6e6a66); font-size: 14px; }

/* What an office can answer in. Quiet on the card: it matters when you are
   looking for it and should not compete with the office name. */
.office-langs {
  margin: 6px 0 0;
  color: var(--muted-foreground, #6e6a66);
  font-size: 13px;
  line-height: 1.5;
}
.office-langs span {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  margin-right: 4px;
}

.offices-map {
  height: 460px;
  background: var(--secondary, #f3eee6);
  border: 1px solid var(--border, #d9d4ce);
  margin-bottom: 60px;
  z-index: 0;
}
.offices-map .leaflet-container { font: inherit; }
/* The pin is the brand's dot: pink, with a soft halo, and a white ring so it
   reads on the map's greys. */
.tc-pin span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pink, #fc0076);
  border: 3px solid #fff;
  box-shadow: 0 0 0 5px rgb(252 0 118 / .22), 0 2px 8px rgb(0 0 0 / .28);
  transition: transform .18s ease;
}
.tc-pin:hover span { transform: scale(1.18); }
/* The card that rests on a pin: the office photo above its name, its place
   and the coordinates under the dot. It is appended to the page, not to the
   map, so it may extend past the map's edges; the caret points at the dot. */
.tc-hovercard {
  position: absolute;
  z-index: 60;
  width: 240px;
  background: var(--card, #fff);
  color: var(--foreground, #0a0a0a);
  box-shadow: 0 12px 34px rgb(0 0 0 / .18);
}
.tc-hovercard[hidden] { display: none; }
.tc-hovercard::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.tc-hovercard.is-below::after { bottom: auto; top: -7px; }
.tc-pop-media { display: block; width: 100%; height: 140px; object-fit: cover; }
.tc-pop-media.is-logo { object-fit: contain; padding: 24px; box-sizing: border-box; background: var(--secondary, #f3eee6); }
.tc-pop-body { display: grid; gap: 3px; padding: 12px 16px 14px; font-size: 13.5px; line-height: 1.45; }
.tc-pop-body strong { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.tc-pop-place, .tc-pop-coords { color: var(--muted-foreground, #6e6a66); }
.tc-pop-coords { font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tc-pop-links { margin-top: 4px; }
.tc-pop-links a { color: var(--pink, #fc0076); text-decoration: none; }
/* No filter: the tiles are grey canvases already, and the dark one is a
   real dark basemap rather than an inverted light one, so the sea stays
   darker than the land and the labels stay the right way round. */
.offices-map .leaflet-container { background: var(--secondary, #f3eee6); }
html[data-theme="dark"] .offices-map .leaflet-container { background: #1b1b1b; }
/* The zoom buttons are the map's only chrome, so they read as one soft
   white pill rather than Leaflet's default bordered squares. */
.offices-map .leaflet-bar {
  border: none;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgb(0 0 0 / .18);
}
.offices-map .leaflet-bar a {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: none;
  background: var(--card, #fff);
  color: var(--foreground, #0a0a0a);
}
.offices-map .leaflet-bar a + a { border-top: 1px solid var(--border, #d9d4ce); }
.offices-map .leaflet-bar a:hover { background: var(--secondary, #f3eee6); }
/* Map or satellite: one pill in the same material as the zoom buttons. The
   track is the page's own surface and the chosen view is the card resting on
   it, so the control reads as part of the site and the pink dot stays the
   only colour on the map. */
.offices-map .tc-views {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--secondary, #f3eee6);
  box-shadow: 0 1px 4px rgb(0 0 0 / .18);
}
.offices-map .tc-views button {
  appearance: none;
  border: none;
  border-radius: 8px;
  padding: 0 11px;
  height: 26px;
  font: inherit;
  font-size: 12px;
  line-height: 26px;
  background: transparent;
  color: var(--muted-foreground, #6e6a66);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.offices-map .tc-views button:hover { color: var(--foreground, #0a0a0a); }
.offices-map .tc-views button[aria-pressed="true"] {
  background: var(--card, #fff);
  color: var(--foreground, #0a0a0a);
  box-shadow: 0 1px 2px rgb(0 0 0 / .12);
}
/* A 26px pill is right under a pointer and too short under a thumb: WCAG
   2.5.5 and both platform guidelines ask for 44px in the smaller dimension,
   and these buttons are already wide enough. Rather than grow the pill on a
   phone and unbalance the map's only chrome, the hit area alone grows,
   centred on the button it belongs to. Keyed on the pointer rather than the
   width, because this is about what is doing the tapping and not about how
   much room it has. */
@media (pointer: coarse) {
  .offices-map .tc-views button { position: relative; }
  .offices-map .tc-views button::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

.offices-group { margin-top: 44px; }
.offices-group:first-child { margin-top: 0; }
.offices-group h2 {
  margin: 0 0 22px;
  font-size: 26px;
}
.offices-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.office-card { background: var(--card, #fff); }
.office-media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--secondary, #f3eee6);
}
/* The Agency draws a fine inner frame on its region photos; the same line
   here keeps a photo, a logo and a bare dot reading as one family. */
.office-media::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgb(255 255 255 / .75);
  pointer-events: none;
}
.office-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.office-media:hover img { transform: scale(1.04); }
.office-media img.is-logo {
  object-fit: contain;
  padding: 22%;
  transition: none;
}
.office-dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pink, #fc0076);
}
.office-body { padding: 18px 20px 22px; }
.office-body h3 {
  margin: 0 0 4px;
  font-size: 20px;
  letter-spacing: -.03em;
}
.office-body h3 a { color: inherit; text-decoration: none; }
.office-body h3 a:hover { color: var(--pink, #fc0076); }
.office-body p { margin: 0; color: var(--muted-foreground, #6e6a66); font-size: 14px; }
.office-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.office-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--pink, #fc0076);
  text-decoration: none;
}
.office-links a:hover { text-decoration: underline; }
.offices-none { margin: 30px 0 0; color: var(--muted-foreground, #6e6a66); }

@media (max-width: 1100px) { .offices-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .offices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .offices-map { height: 360px; margin-bottom: 44px; }
}
@media (max-width: 480px) { .offices-grid { grid-template-columns: 1fr; } }


/* ── destinations: a country opens onto its coasts ─────────────────────────
   The country row has to sit in the same rhythm as the plain rows the page
   already ships, so it repeats their border, padding and gap rather than
   inventing a second row style. Everything the template already scopes to
   `.place-list h3` and `.place-list a > span` still applies, here and inside
   the panel, so the type and the muted call to action come from the design
   rather than from this file. */
.place-list > button.tc-place {
  display: flex;
  align-items: center;
  gap: 30px;
  width: 100%;
  padding: 28px 0;
  border: 0;
  border-bottom: 1px solid #ccc5bc;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.place-list > button.tc-place > span:not(.number) {
  color: var(--muted-foreground, #6e6a66);
  font-size: 13px;
}
.place-list > button.tc-place:hover h3 { color: #ce005f; }
.place-list > button.tc-place svg.tc-chev {
  width: 18px;
  height: 18px;
  color: var(--pink, #fc0076);
  transition: transform .18s;
}
.place-list > button.tc-place[aria-expanded="true"] svg.tc-chev { transform: rotate(180deg); }

/* The panel is indented and quieter than the row that opened it, so the coasts
   read as belonging to the country rather than competing with it. */
.place-list > .tc-places { border-bottom: 1px solid #ccc5bc; }
.place-list > .tc-places a {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 16px 0 16px 46px;
}
.place-list > .tc-places a + a { border-top: 1px solid #e4ded5; }
.place-list > .tc-places h3 { font-size: 20px; font-weight: 500; }
.place-list > .tc-places a:hover h3 { color: #ce005f; }
.place-list > .tc-places svg { width: 14px; height: 14px; }

@media (max-width: 850px) {
  .place-list > button.tc-place > span:not(.number) { display: none; }
}
@media (max-width: 520px) {
  .place-list > button.tc-place { gap: 20px; }
  .place-list > .tc-places a { gap: 20px; padding-left: 30px; }
  .place-list > .tc-places h3 { font-size: 17px; }
}

/* ----------------------------------------------------------------- forms */
/* One look for every form on the site. Each rule below names the newsletter
   band and the enquiry form together rather than giving them a block each,
   because that is the only arrangement that cannot drift: one declaration,
   nothing to keep in sync.

   The enquiry form is React's, rendered from the compiled bundle and used on
   the contact, apply, sell, journal, new developments and properties pages.
   These rules override it rather than replace it. site.css loads after the app
   stylesheet, which is why equal-specificity selectors land; the !important
   flags on the button are matching !important already in the bundle, not
   reaching for force.

   The numbers live on :root because a third form, .pdp-form on the property
   pages, is styled from api/_detail-css.js, and that inline <style> is emitted
   after this file's <link>, so it cannot be overridden from here. It reads the
   same tokens instead. Change a value once, here. */
:root {
  --form-label-size: 11px;
  --form-label-track: .1em;
  --form-field-h: 46px;
  --form-field-px: 13px;
  --form-field-size: 14px;
  --form-gap: 16px;
  --form-check-size: 16px;
  --form-btn-py: 13px;
  --form-btn-px: 28px;
  --form-btn-size: 11px;
  --form-btn-track: .12em;
}

/* A band above the footer, the same on every page. It carries the site's own
   `section` class, which is where its left and right gutter comes from: 6%, and
   the 9% it switches to above 1700px, exactly what every other section and the
   footer use. Only the vertical is set here, and site.css loads after the app
   stylesheet, so this equal-specificity override lands. Restating the 6% would
   have been a copy that drifts the first time the site's gutter moves.
   Colours are the site's own tokens so both themes follow. */
.tc-nl-band {
  padding-top: 44px;
  padding-bottom: 48px;
  border-top: 1px solid var(--border);
  background: var(--secondary);
}
/* A measure, not a full-width stretch: a form sprayed across 1400px reads as a
   table of boxes rather than as something worth filling in. Left, on the
   gutter, so it starts where the wordmark and every heading start. It used to
   be centred here and left-aligned inside an article, which read as two
   different layouts depending on which page you were on. */
.tc-nl { max-width: 560px; }
.tc-nl-title {
  margin: 0 0 8px;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.15;
  color: var(--foreground);
}
.tc-nl-blurb {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted-foreground);
}
.tc-nl-fields,
.enquiry-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--form-gap); }
.tc-nl-fields .wide { grid-column: 1 / -1; }
.tc-nl-fields[hidden], .tc-nl-check[hidden] { display: none; }
.tc-nl-fields label,
.enquiry-form label:not(.consent):not(.honeypot) {
  display: block;
  font-size: var(--form-label-size);
  font-weight: 600;
  letter-spacing: var(--form-label-track);
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.tc-nl input[type="text"], .tc-nl input[type="email"],
.enquiry-form input:not([type="checkbox"]), .enquiry-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 7px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: var(--form-field-size);
}
.tc-nl input[type="text"], .tc-nl input[type="email"],
.enquiry-form input:not([type="checkbox"]) {
  height: var(--form-field-h);
  min-height: var(--form-field-h);
  padding: 0 var(--form-field-px);
}
/* The bundle paints the field with the card colour behind an !important, which
   next to the newsletter's fields reads as a lighter box on the same page.
   Matched rather than out-specified: a flag is the only thing that answers a
   flag. */
.enquiry-form input:not([type="checkbox"]),
.enquiry-form textarea { background: var(--background) !important; }
/* The same box, given room to be several lines. */
.enquiry-form textarea {
  min-height: 130px;
  padding: 11px var(--form-field-px);
  line-height: 1.55;
  resize: vertical;
}
.tc-nl input:focus-visible,
.enquiry-form :is(input, textarea, select, button):focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 1px;
}
.enquiry-form input:focus, .enquiry-form textarea:focus {
  border-color: var(--pink);
  box-shadow: none;
}
/* Naming the element matters here. A bare [aria-invalid] attribute selector
   scores below the rule above, which sets the border through the shorthand, and
   the colour would never arrive. */
.tc-nl input[aria-invalid="true"],
.enquiry-form input[aria-invalid="true"],
.enquiry-form textarea[aria-invalid="true"] { border-color: var(--destructive) }
.tc-nl-err,
.enquiry-form .error {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--destructive);
}
.tc-nl-err[hidden] { display: none; }
.tc-nl-check,
.enquiry-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--foreground);
}
.tc-nl-check input,
.enquiry-form .consent button[data-slot="checkbox"] {
  width: var(--form-check-size);
  height: var(--form-check-size);
  flex: none;
  margin: 1px 0 0;
  border-radius: 2px;
  accent-color: var(--pink);
}
.tc-nl-check a,
.enquiry-form .consent a { text-decoration: underline; }
/* Off screen rather than display:none: a hidden field a bot cannot see is a
   field a bot does not fill, which defeats the point of it. */
.tc-nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tc-nl-act { display: flex; align-items: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.tc-nl-btn,
.enquiry-form .submit {
  border: 0;
  background: var(--pink);
  color: #fff;
  height: auto !important;
  min-width: 0;
  gap: 0 !important;
  justify-content: center;
  padding: var(--form-btn-py) var(--form-btn-px);
  font: inherit;
  font-size: var(--form-btn-size);
  font-weight: 600;
  letter-spacing: var(--form-btn-track);
  text-transform: uppercase;
  cursor: pointer;
}
/* The newsletter's button carries no arrow, and an arrow on one of two
   otherwise identical buttons is the kind of difference this block exists to
   remove. */
.enquiry-form .submit svg { display: none; }
/* The bundle sets this button's padding, font-size and min-height behind
   !important as well. The values are the same tokens as the rule above, so
   only the flag differs and there is nothing here that can drift; min-height
   goes to 0 so the padding decides the height, the way it does on the
   newsletter's button. */
.enquiry-form .submit {
  min-height: 0 !important;
  padding: var(--form-btn-py) var(--form-btn-px) !important;
  font-size: var(--form-btn-size) !important;
}
.tc-nl-btn:hover { background: #ce005f; }
.tc-nl-btn:disabled { opacity: .55; cursor: default; }
.tc-nl-btn[hidden] { display: none; }
.tc-nl-note { font-size: 13px; color: var(--muted-foreground); }
.tc-nl-note.ok { color: var(--foreground); }
.tc-nl-note.bad { color: var(--destructive); }
@media (max-width: 640px) {
  .tc-nl-fields,
  .enquiry-form .form-grid { grid-template-columns: 1fr; }
}
/* 44px in the smaller dimension is what a thumb needs. Keyed on the pointer
   rather than the width: this is about what is doing the tapping, not how much
   room it has. */
@media (pointer: coarse) {
  .tc-nl-btn,
  .enquiry-form .submit { min-height: 44px !important; }
}
/* --destructive is declared once, in :root, alongside the light theme's cream
   background, and [data-theme=dark] does not restate it. Measured on the dark
   band, #b00035 reads at 2.2:1, so an error nobody can read is the one thing
   the form still gets wrong. This lightens it here only: the same token is on
   the property pages too and retuning it site-wide is not this change's job. */
[data-theme="dark"] .tc-nl-err,
[data-theme="dark"] .enquiry-form .error,
[data-theme="dark"] .tc-nl-note.bad { color: #ff5c7a; }
[data-theme="dark"] .tc-nl input[aria-invalid="true"],
[data-theme="dark"] .enquiry-form input[aria-invalid="true"],
[data-theme="dark"] .enquiry-form textarea[aria-invalid="true"] { border-color: #ff5c7a; }