/* ==========================================================================
   Tropical Realty Costa Rica — public site theme
   Kept separate from theme.css (admin panel) so the two can evolve apart.
   Palette is taken from the logo: teal fronds -> blue wordmark.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Brand — sampled from the logo */
    --tr-blue: #0090d2;
    --tr-blue-600: #0079b4;
    --tr-blue-800: #005c8a;
    --tr-teal: #16b5a8;
    --tr-teal-600: #0f9a8f;

    /* Ink / neutrals — deep sea navy rather than pure black */
    --tr-ink: #0d2e3d;
    --tr-ink-700: #2b5265;
    --tr-muted: #64808e;
    --tr-line: #e2edf2;
    --tr-surface: #ffffff;
    --tr-sand: #f7f4ee;
    --tr-mist: #f2f8fb;

    /* Warm accent — used sparingly (ratings, price emphasis) */
    --tr-sun: #f0a032;

    --tr-brand-gradient: linear-gradient(100deg, var(--tr-teal) 0%, var(--tr-blue) 62%);
    --tr-radius: 14px;
    --tr-radius-lg: 22px;
    --tr-shadow: 0 1px 2px rgba(13, 46, 61, .05), 0 10px 30px rgba(13, 46, 61, .08);
    --tr-shadow-lg: 0 24px 60px rgba(13, 46, 61, .16);
    /* Three faces, not two. The serif carries headlines, prices and the big
       numbers — the places where the page should feel like property rather
       than software. Everything a visitor operates (nav, buttons, tabs, form
       labels, table headers) stays on the sans, where a serif at 13px reads
       as dated and costs legibility. */
    --tr-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --tr-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tr-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------- base ---- */

/* The public side deliberately ships no CSS framework, so it carries its own
   minimal reset. (The admin gets this from Bootstrap's reboot instead.) */
*,
*::before,
*::after { box-sizing: border-box; }

body.tr-site { margin: 0; }
.tr-site figure,
.tr-site blockquote { margin: 0; }

.tr-site {
    font-family: var(--tr-body);
    color: var(--tr-ink);
    background: var(--tr-surface);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    /* Contains the full-bleed sections without making <body> a scroll box. */
    overflow-x: hidden;
    overflow-x: clip;
}

.tr-site h1,
.tr-site h2,
.tr-site h3,
.tr-site h4 {
    font-family: var(--tr-display);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--tr-ink);
    margin: 0;
}

/* Wrapped in :where() so this default carries ZERO specificity. A plain
   `.tr-site a` rule (0-1-1) would outrank every single-class component rule
   (.tr-btn--primary, .tr-nav-link, .tr-region — all 0-1-0) and repaint their
   text brand-blue, which is invisible on a blue button. */
:where(.tr-site a) { color: var(--tr-blue); text-decoration: none; }
:where(.tr-site a:hover) { color: var(--tr-blue-600); }
.tr-site img { max-width: 100%; }

.tr-shell {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 24px;
}

.tr-section { padding: 84px 0; }
.tr-section--tight { padding: 60px 0; }
.tr-section--sand { background: var(--tr-sand); }
.tr-section--mist { background: var(--tr-mist); }

/* Section heading block: eyebrow + title + optional lead */
.tr-head { max-width: 640px; margin-bottom: 40px; }
.tr-head--center { margin-inline: auto; text-align: center; }

.tr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--tr-ui);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tr-teal-600);
    margin-bottom: .75rem;
}
.tr-eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--tr-brand-gradient);
}
.tr-head--center .tr-eyebrow::before { display: none; }

.tr-title { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.18; }
.tr-lead { color: var(--tr-muted); font-size: 1.05rem; margin: .85rem 0 0; }

/* ------------------------------------------------------------- buttons ---- */

.tr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--tr-ui);
    font-weight: 600;
    font-size: .95rem;
    padding: .8rem 1.6rem;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
    white-space: nowrap;
}
.tr-btn:hover { transform: translateY(-1px); }

.tr-btn--primary {
    background: var(--tr-brand-gradient);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0, 144, 210, .32);
}
.tr-btn--primary:hover { color: #fff; box-shadow: 0 12px 28px rgba(0, 144, 210, .4); }

.tr-btn--ghost { background: transparent; color: var(--tr-ink); border-color: var(--tr-line); }
.tr-btn--ghost:hover { border-color: var(--tr-blue); color: var(--tr-blue); }

.tr-btn--light { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .45); }
.tr-btn--light:hover { background: #fff; color: var(--tr-blue-600); }

.tr-link-more {
    font-family: var(--tr-ui);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.tr-link-more svg { transition: transform .18s ease; }
.tr-link-more:hover svg { transform: translateX(3px); }

/* -------------------------------------------------------------- header ---- */

.tr-topbar {
    background: var(--tr-ink);
    color: rgba(255, 255, 255, .78);
    font-size: .84rem;
}
.tr-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 42px;
    flex-wrap: wrap;
}
.tr-topbar a { color: rgba(255, 255, 255, .78); }
.tr-topbar a:hover { color: #fff; }
.tr-topbar-contact { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.tr-topbar-contact span { display: inline-flex; align-items: center; gap: .45rem; }
.tr-topbar-contact svg { opacity: .7; }
.tr-topbar-right { display: flex; align-items: center; gap: 1.25rem; }

@media (max-width: 640px) {
    /* The bar wraps to two rows on a phone, and the second one was as wide as
       its contents — leaving the language flags stranded mid-bar with empty
       space beside them. Full width, pushed apart: account on the left, flags
       against the right edge like they are on desktop. */
    .tr-topbar-right { width: 100%; justify-content: space-between; gap: .75rem; }
}

/* Language switcher: flag + code. The flag is a visual aid only — the code
   beside it is what actually names the language. */
.tr-lang { display: inline-flex; align-items: center; gap: .25rem; }
.tr-lang-opt {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .45rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .04em;
    opacity: .72;
    transition: opacity .15s ease, background .15s ease;
}
.tr-lang-opt:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.tr-lang-opt.is-active { opacity: 1; background: rgba(255, 255, 255, .16); color: #fff; }

/* A fixed box with the flag fitted inside it, so flags of different aspect
   ratios (the Union Jack is 2:1, Spain 3:2) still line up as a row. */
.tr-lang-flag {
    width: 18px;
    height: 13px;
    flex: 0 0 auto;
    display: block;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}
.tr-lang-flag svg { width: 100%; height: 100%; display: block; }

.tr-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--tr-line);
}
.tr-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 82px;
}

/* Logo: an <img> when the real asset is present, otherwise the CSS lockup. */
.tr-logo { display: inline-flex; align-items: center; gap: .7rem; }
.tr-logo img { height: 52px; width: auto; display: block; }
.tr-logo-mark { width: 46px; height: 34px; flex: none; }
.tr-logo-type { display: flex; flex-direction: column; line-height: .92; }
.tr-logo-type b {
    font-family: var(--tr-display);
    font-weight: 800;
    font-size: 1.42rem;
    letter-spacing: -.02em;
    color: var(--tr-blue);
}
.tr-logo-type span {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    font-family: var(--tr-display);
    font-weight: 500;
    font-size: 1.02rem;
    letter-spacing: .01em;
    color: var(--tr-blue);
}
.tr-logo-type span i {
    font-style: normal;
    font-size: .56rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: .02em;
    color: var(--tr-teal);
    text-transform: uppercase;
}

.tr-nav { display: flex; align-items: center; gap: 2rem; }
.tr-nav-link {
    font-family: var(--tr-ui);
    font-weight: 600;
    font-size: .95rem;
    color: var(--tr-ink);
    padding: .4rem 0;
    position: relative;
}
.tr-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--tr-brand-gradient);
    transform: scaleX(0);
    transition: transform .2s ease;
}
.tr-nav-link:hover::after,
.tr-nav-link.is-active::after { transform: scaleX(1); }

.tr-header-actions { display: flex; align-items: center; gap: .85rem; }

.tr-burger {
    display: none;
    background: none;
    border: 1px solid var(--tr-line);
    border-radius: 10px;
    padding: .5rem .6rem;
    color: var(--tr-ink);
    cursor: pointer;
}

/* ---------------------------------------------------------------- hero ---- */

.tr-hero {
    position: relative;
    background: var(--tr-brand-gradient);
    color: #fff;
    padding: 96px 0 150px;
    overflow: hidden;
    isolation: isolate;
}
/* Soft light pools so the flat gradient reads as depth, not a colour block. */
.tr-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 70% at 78% 12%, rgba(255, 255, 255, .3), transparent 62%),
        radial-gradient(50% 60% at 8% 92%, rgba(4, 61, 92, .38), transparent 68%);
    z-index: -1;
}
/* Oversized palm watermark, cropped by the hero — echoes the logo mark. */
.tr-hero-palm {
    position: absolute;
    top: -70px;
    right: -90px;
    width: 620px;
    opacity: .16;
    pointer-events: none;
    z-index: -1;
}
/* Copy on the left, video on the right. Collapses to one column on tablet,
   where the video moves below the buttons. */
.tr-hero-grid {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    align-items: center;
    gap: 56px;
}

.tr-hero h1 {
    color: #fff;
    font-size: clamp(2.1rem, 5vw, 3.5rem);
    line-height: 1.08;
    max-width: 15ch;
}

/* ---------------------------------------------------------- hero video ---- */

.tr-hero-media { min-width: 0; }

.tr-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    /* Sits on the gradient, so it needs its own edge to read as a panel. */
    border: 1px solid rgba(255, 255, 255, .32);
    box-shadow: 0 28px 64px rgba(3, 40, 62, .38);
    background: rgba(4, 32, 48, .35);
}
.tr-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.tr-hero-lead {
    color: rgba(255, 255, 255, .9);
    font-size: 1.12rem;
    max-width: 48ch;
    margin: 1.15rem 0 0;
}
.tr-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: .4rem 1rem .4rem .5rem;
    font-size: .85rem;
    font-weight: 500;
    margin-bottom: 1.4rem;
}
.tr-hero-badge b {
    background: #fff;
    color: var(--tr-blue-600);
    font-family: var(--tr-ui);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .18rem .55rem;
    border-radius: 999px;
}
.tr-hero-actions { display: flex; gap: .85rem; margin-top: 2rem; flex-wrap: wrap; }

/* White wave that hands the hero over to the page below. */
.tr-hero-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 90px;
    display: block;
}

/* ------------------------------------------------------------ stat band ---- */

/* Centred rather than a fixed four-column grid: the home and about pages show
   four figures, a location page shows two or three, and in the grid the spare
   columns left the shorter rows hanging off to the left. */
.tr-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    text-align: center;
}
.tr-stat { flex: 1 1 170px; max-width: 290px; }
.tr-stat b {
    display: block;
    font-family: var(--tr-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    background: var(--tr-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.1;
}
.tr-stat span { font-size: .88rem; color: var(--tr-muted); font-weight: 500; }

/* ------------------------------------------------------ property cards ---- */

.tr-grid { display: grid; gap: 26px; }
.tr-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Two-up, for a narrower column than a full-width section — the saved
   properties beside the My Account details panel. */
.tr-grid--2 { grid-template-columns: repeat(2, 1fr); }

.tr-card {
    background: #fff;
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tr-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tr-shadow);
    border-color: transparent;
}

/* Placeholder art until real photography is loaded: a tinted ocean gradient
   with the palm glyph watermarked over it. Swap for <img> when photos land. */
.tr-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(140deg, #9fd9e8, #2ea3cf 55%, #0b6f9c);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.tr-card-media--b { background: linear-gradient(140deg, #a8e3d8, #1fb2a6 52%, #0a7d8e); }
.tr-card-media--c { background: linear-gradient(140deg, #bfe0ef, #5aa9d6 50%, #14567f); }
.tr-card-media--d { background: linear-gradient(140deg, #ffd9a8, #f0a032 48%, #b35f13); }
/* The palm-frond placeholder shown when a listing has no photo. Scoped to the
   direct child on purpose: as a descendant selector this also dimmed the save
   heart inside the button to 30% and squashed it to 42% width. */
.tr-card-media > svg { width: 42%; opacity: .3; }
.tr-card-media img { width: 100%; height: 100%; object-fit: cover; }

.tr-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, .95);
    color: var(--tr-blue-600);
    font-family: var(--tr-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: .3rem .65rem;
    border-radius: 999px;
}
.tr-tag--sun { background: var(--tr-sun); color: #fff; }

.tr-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.tr-card-place {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: var(--tr-muted);
    font-weight: 500;
}
/* Feed titles run long ("Prime 41-Hectare Development Land in Hermosa…"),
   so clamp to two lines to keep the card grid on an even baseline. */
.tr-card-title {
    font-size: 1.12rem;
    margin: .4rem 0 .65rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tr-card-title a { color: var(--tr-ink); }
.tr-card:hover .tr-card-title a { color: var(--tr-blue); }
/* Place on the left, price on the right, baselines aligned. The price keeps
   its own line only when the place name is long enough to need the room. */
.tr-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.tr-card-price {
    font-family: var(--tr-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--tr-blue);
    margin-left: auto;
    white-space: nowrap;
}
/* One line, always. Four measurements at card width is the tight case (beds,
   baths, built, plot on a villa), so they share the space rather than wrapping:
   a second row here pushed the card out of step with its neighbours. */
.tr-card-facts {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .85rem;
    margin-top: auto;
    border-top: 1px solid var(--tr-line);
    font-size: .8rem;
    color: var(--tr-ink-700);
}
.tr-card-facts span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }

/* Between the phone layout and a roomy desktop the grid is three columns of
   about 300px, which is where four measurements on one line stop fitting. They
   lose a little size rather than a line. */
@media (min-width: 901px) and (max-width: 1200px) {
    .tr-card-facts { gap: .3rem; font-size: .71rem; }
    .tr-card-facts svg { width: 13px; height: 13px; }
}
.tr-card-facts svg { color: var(--tr-teal-600); flex: none; }

/* What the listing offers, above the rule that separates it from the hard
   measurements. No border and no fill: a tick and the words are enough, and
   anything drawn around them competes with the title above. Two lines at most,
   clipped at a whole row so a label is never cut in half, which also stops one
   listing with twenty amenities from setting the height of every card beside
   it. */
/* The features and the button share a line: the button sits in the space the
   labels leave, and takes the whole width only on a card with no features. */
.tr-card-offer {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: .5rem 0 .85rem;
}
.tr-card-offer .tr-card-feats { flex: 1 1 auto; min-width: 0; margin: 0; }

/* The filled state is the resting state: the button is the card's one call to
   action, and it should read as one before the pointer is anywhere near it.
   Nothing animates on card hover — the card already lifts and the title
   changes colour, and a third thing moving at the same time is noise. */
.tr-card-cta {
    flex: none;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: var(--tr-brand-gradient);
    color: #fff;
    font-family: var(--tr-ui);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}
.tr-card-cta svg { width: 15px; height: 15px; }
.tr-card-cta:hover,
.tr-card-cta:focus-visible { color: #fff; filter: brightness(.94); }

.tr-card-feats {
    display: flex;
    flex-wrap: wrap;
    /* Wider column gap than row gap: with no border to mark where one label
       ends, the space between them is doing that job. */
    gap: .35rem 1rem;
    max-height: 2.5rem;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tr-card-feats li {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    color: var(--tr-ink-700);
    font-size: .76rem;
    line-height: 1.35;
    white-space: nowrap;
}
/* A tick in the brand colour, drawn rather than imported: one shape repeated
   five times a card does not deserve five inline SVGs. */
.tr-card-feats li::before {
    content: '';
    width: 9px;
    height: 5px;
    border-left: 1.8px solid var(--tr-teal-600);
    border-bottom: 1.8px solid var(--tr-teal-600);
    transform: rotate(-45deg) translateY(-1px);
    flex: none;
}

/* ---------------------------------------------------------- region tiles ---- */

.tr-region {
    position: relative;
    display: block;
    border-radius: var(--tr-radius);
    overflow: hidden;
    min-height: 210px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    background: linear-gradient(160deg, #2ea3cf, #0b6f9c);
    transition: transform .22s ease, box-shadow .22s ease;
}
.tr-region:hover { transform: translateY(-4px); box-shadow: var(--tr-shadow); color: #fff; }
.tr-region::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 40, 56, .62), rgba(6, 40, 56, .06) 60%);
}
.tr-region--a { background: linear-gradient(160deg, #55c9bd, #0f8f96); }
.tr-region--b { background: linear-gradient(160deg, #6fc4e6, #10689a); }
.tr-region--c { background: linear-gradient(160deg, #93d7c9, #14889b); }
.tr-region--d { background: linear-gradient(160deg, #8ecbe8, #135f8c); }
.tr-region--e { background: linear-gradient(160deg, #4fbcd4, #0b7ba8); }
.tr-region--f { background: linear-gradient(160deg, #7fd3c0, #0d8087); }
.tr-region--tall { min-height: 340px; }

/* Location photo. Sits under the ::after scrim, which is what keeps the white
   text readable over an arbitrary image; the gradient stays underneath as the
   fallback for any region without one. */
.tr-region-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.tr-region:hover .tr-region-img { transform: scale(1.05); }

.tr-region-body { position: relative; z-index: 1; }
.tr-region h3 { color: #fff; font-size: 1.2rem; }
.tr-region p { margin: .2rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .82); }

/* ------------------------------------------------------------- features ---- */

.tr-feature { text-align: left; }
.tr-feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--tr-mist);
    color: var(--tr-blue);
    margin-bottom: 1.1rem;
}
.tr-feature h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.tr-feature p { color: var(--tr-muted); font-size: .95rem; margin: 0; }

/* ----------------------------------------------------------------- CTA ---- */

.tr-cta {
    position: relative;
    background: var(--tr-ink);
    color: #fff;
    border-radius: var(--tr-radius-lg);
    padding: 54px 56px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.tr-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 120% at 88% 20%, rgba(22, 181, 168, .42), transparent 60%);
}
.tr-cta > * { position: relative; z-index: 1; }
.tr-cta h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.05rem); max-width: 20ch; }
.tr-cta p { color: rgba(255, 255, 255, .74); margin: .7rem 0 0; max-width: 52ch; }

/* -------------------------------------------------------- testimonials ---- */

.tr-quote {
    background: #fff;
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    padding: 28px;
    height: 100%;
}
.tr-stars { color: var(--tr-sun); letter-spacing: .12em; font-size: .9rem; margin-bottom: .8rem; }
.tr-quote p { font-size: .97rem; color: var(--tr-ink-700); margin: 0 0 1.2rem; }
.tr-quote footer { display: flex; align-items: center; gap: .75rem; }
.tr-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tr-brand-gradient);
    color: #fff;
    font-family: var(--tr-display);
    font-weight: 700;
    font-size: .9rem;
    flex: none;
}
.tr-quote cite { font-style: normal; font-weight: 600; font-size: .92rem; display: block; }
.tr-quote small { color: var(--tr-muted); font-size: .82rem; }

/* -------------------------------------------------------------- footer ---- */

.tr-footer { background: var(--tr-ink); color: rgba(255, 255, 255, .68); padding: 68px 0 0; }
.tr-footer h4 {
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}
.tr-footer a { color: rgba(255, 255, 255, .68); font-size: .92rem; }
.tr-footer a:hover { color: #fff; }
.tr-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 40px;
    padding-bottom: 48px;
}
.tr-footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.tr-footer-about { font-size: .93rem; margin: 1.1rem 0 1.4rem; max-width: 34ch; }
.tr-footer .tr-logo-type b,
.tr-footer .tr-logo-type span { color: #fff; }
.tr-footer .tr-logo-type span i { color: var(--tr-teal); }

.tr-social { display: flex; gap: .6rem; }
.tr-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: background-color .18s ease;
}
.tr-social a:hover { background: var(--tr-blue); }

.tr-newsletter { display: flex; gap: .5rem; margin-top: 1rem; }
.tr-newsletter input {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: .7rem 1.1rem;
    color: #fff;
    font-family: var(--tr-body);
    font-size: .9rem;
}
.tr-newsletter input::placeholder { color: rgba(255, 255, 255, .45); }
.tr-newsletter input:focus { outline: none; border-color: var(--tr-teal); }

.tr-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .85rem;
}
.tr-footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ---------------------------------------------------------- responsive ---- */

@media (max-width: 1100px) {
    .tr-nav { gap: 1.35rem; }
    .tr-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
    .tr-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .tr-hero h1 { max-width: none; }
    .tr-hero-lead { max-width: none; }
}

@media (max-width: 900px) {
    .tr-nav,
    .tr-header-actions .tr-btn { display: none; }
    .tr-burger { display: inline-flex; }
    .tr-grid--3 { grid-template-columns: 1fr 1fr; }
    .tr-grid--2 { grid-template-columns: 1fr; }
    .tr-stat { flex-basis: 140px; }
    .tr-cta { padding: 40px 32px; }
}

@media (max-width: 640px) {
    .tr-section { padding: 56px 0; }
    .tr-hero { padding: 64px 0 120px; }
    .tr-grid--3 { grid-template-columns: 1fr; }
    .tr-region--tall { min-height: 210px; }
    .tr-topbar-contact span:nth-child(2) { display: none; }
    .tr-footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   Category landing pages (/commercial, /residential, + their /lease forms)
   ========================================================================== */

.tr-pagehead {
    position: relative;
    background: var(--tr-brand-gradient);
    color: #fff;
    padding: 54px 0 46px;
    overflow: hidden;
    isolation: isolate;
}
.tr-pagehead::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 80% at 82% 10%, rgba(255, 255, 255, .28), transparent 62%);
    z-index: -1;
}
.tr-pagehead-palm {
    position: absolute;
    top: -60px;
    right: -70px;
    width: 460px;
    opacity: .14;
    z-index: -1;
    pointer-events: none;
}
.tr-pagehead h1 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.7rem); max-width: 20ch; }
.tr-pagehead-intro { color: rgba(255, 255, 255, .9); margin: .8rem 0 0; max-width: 60ch; }

.tr-crumbs {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}
.tr-crumbs a { color: rgba(255, 255, 255, .72); }
.tr-crumbs a:hover { color: #fff; }

/* The base colours assume a dark band behind them. This variant is for a trail
   on the page's own background — the property page puts one under the hero,
   where white-on-white left it invisible. */
.tr-crumbs--light,
.tr-crumbs--light a { color: var(--tr-muted); }
.tr-crumbs--light a:hover { color: var(--tr-blue-600); }

/* Sale / lease toggle — keeps the four landing pages down to two header items */
.tr-toggle {
    display: inline-flex;
    gap: 4px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: 4px;
    margin-top: 1.7rem;
}
.tr-toggle-opt {
    font-family: var(--tr-ui);
    font-size: .88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
    padding: .5rem 1.25rem;
    border-radius: 999px;
    transition: background-color .18s ease, color .18s ease;
}
.tr-toggle-opt:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.tr-toggle-opt.is-active { background: #fff; color: var(--tr-blue-600); }
.tr-toggle-opt.is-active:hover { background: #fff; color: var(--tr-blue-600); }

/* Type filter chips */
.tr-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 30px; }
.tr-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--tr-ui);
    font-size: .85rem;
    font-weight: 600;
    color: var(--tr-ink-700);
    background: #fff;
    border: 1px solid var(--tr-line);
    border-radius: 999px;
    padding: .45rem 1rem;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.tr-chip span {
    font-size: .76rem;
    font-weight: 700;
    color: var(--tr-muted);
    background: var(--tr-mist);
    border-radius: 999px;
    padding: .05rem .45rem;
}
.tr-chip:hover { border-color: var(--tr-blue); color: var(--tr-blue); }
.tr-chip.is-active { background: var(--tr-ink); border-color: var(--tr-ink); color: #fff; }
.tr-chip.is-active span { background: rgba(255, 255, 255, .18); color: #fff; }

/* Empty state */
.tr-empty {
    background: #fff;
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    padding: 54px 32px;
    text-align: center;
}
.tr-empty h2 { font-size: 1.35rem; margin-bottom: .6rem; }
.tr-empty p { color: var(--tr-muted); margin: 0 auto; max-width: 56ch; }

/* Public pagination (the admin's pager styles live in theme.css) */
.tr-pager { margin-top: 44px; }
.tr-pager .pager-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.tr-pager .pager-summary { font-size: .88rem; color: var(--tr-muted); }
.tr-pager .pager-list { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.tr-pager .pager-btn,
.tr-pager .pager-page {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding-inline: .6rem;
    border-radius: 10px;
    border: 1px solid var(--tr-line);
    background: #fff;
    font-family: var(--tr-ui);
    font-size: .9rem;
    font-weight: 600;
    color: var(--tr-ink-700);
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.tr-pager .pager-btn:hover,
.tr-pager .pager-page:hover { border-color: var(--tr-blue); color: var(--tr-blue); }
.tr-pager .pager-page.active {
    background: var(--tr-brand-gradient);
    border-color: transparent;
    color: #fff;
}
.tr-pager .pager-btn.disabled { opacity: .4; pointer-events: none; }

@media (max-width: 640px) {
    .tr-pagehead { padding: 38px 0 34px; }
    .tr-toggle { width: 100%; }
    .tr-toggle-opt { flex: 1; text-align: center; padding-inline: .6rem; }
    .tr-pager .pager-nav { justify-content: center; }
    .tr-pager .pager-summary { width: 100%; text-align: center; }
}

/* ---------------------------------------------------- header dropdowns ---- */

/* Commercial / Residential each hold their sale + lease pages, so the header
   keeps six items instead of growing to eight. */
.tr-nav-group { position: relative; }
.tr-nav-group > .tr-nav-link { display: inline-flex; align-items: center; gap: .3rem; }
.tr-nav-group > .tr-nav-link svg { transition: transform .2s ease; opacity: .6; }
.tr-nav-group:hover > .tr-nav-link svg { transform: rotate(180deg); }

.tr-nav-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 264px;
    background: #fff;
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    box-shadow: var(--tr-shadow);
    padding: 8px;
    display: grid;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 20;
}
/* A transparent bridge over the gap, so the pointer can travel from the
   trigger to the panel without the panel closing underneath it. */
.tr-nav-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}
.tr-nav-group:hover .tr-nav-menu,
.tr-nav-group:focus-within .tr-nav-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 2px);
}
.tr-nav-menu a {
    display: block;
    padding: .6rem .8rem;
    border-radius: 9px;
    transition: background-color .15s ease;
}
.tr-nav-menu a:hover { background: var(--tr-mist); }
.tr-nav-menu strong {
    display: block;
    font-family: var(--tr-ui);
    font-size: .92rem;
    font-weight: 600;
    color: var(--tr-ink);
}
.tr-nav-menu a:hover strong { color: var(--tr-blue); }
.tr-nav-menu small { display: block; font-size: .78rem; color: var(--tr-muted); margin-top: .1rem; }

/* Stacked in the mobile panel: the dropdown becomes plain indented links. */
@media (max-width: 900px) {
    .tr-nav-group { width: 100%; }
    .tr-nav-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        border: none;
        padding: .2rem 0 .4rem .9rem;
        min-width: 0;
    }
    .tr-nav-menu::before { display: none; }
    .tr-nav-group > .tr-nav-link svg { display: none; }
}

/* --------------------------------------------- commercial / residential ---- */

.tr-segments { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.tr-segment {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius-lg);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tr-segment:hover { transform: translateY(-4px); box-shadow: var(--tr-shadow); border-color: transparent; }

.tr-segment-art {
    position: relative;
    aspect-ratio: 21 / 9;
    background: linear-gradient(140deg, #9fd9e8, #2ea3cf 55%, #0b6f9c);
    overflow: hidden;
}
.tr-segment--commercial .tr-segment-art { background: linear-gradient(140deg, #a8e3d8, #1fb2a6 52%, #0a7d8e); }
.tr-segment-art img { width: 100%; height: 100%; object-fit: cover; }
/* Tints the photo toward the brand so the two panels read as a pair however
   different their photography happens to be. */
.tr-segment-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 46, 61, .55), rgba(13, 46, 61, .05));
}

.tr-segment-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.tr-segment-body h3 { font-size: 1.5rem; }
.tr-segment-note { color: var(--tr-muted); font-size: .95rem; margin: .5rem 0 0; }

.tr-segment-types { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.tr-segment-types span {
    font-size: .78rem;
    font-weight: 600;
    color: var(--tr-ink-700);
    background: var(--tr-mist);
    border-radius: 999px;
    padding: .28rem .7rem;
}

.tr-segment-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto;
    padding-top: 1.5rem;
}
.tr-segment-link {
    border: 1px solid var(--tr-line);
    border-radius: 12px;
    padding: .75rem .95rem;
    transition: border-color .18s ease, background-color .18s ease;
}
.tr-segment-link:hover { border-color: var(--tr-blue); background: var(--tr-mist); }
.tr-segment-link b {
    display: block;
    font-family: var(--tr-ui);
    font-size: .95rem;
    font-weight: 600;
    color: var(--tr-ink);
}
.tr-segment-link:hover b { color: var(--tr-blue); }
.tr-segment-link span { font-size: .8rem; color: var(--tr-muted); }

@media (max-width: 900px) {
    .tr-segments { grid-template-columns: 1fr; }
}

/* ------------------------------------ residential / commercial sections ---- */

/* Deal badge — only shown where sale and lease stock sit side by side. */
.tr-deal {
    position: absolute;
    top: 12px;
    right: 12px;
    font-family: var(--tr-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3rem .65rem;
    border-radius: 999px;
    color: #fff;
}
.tr-deal--sale { background: var(--tr-blue); }
.tr-deal--lease { background: var(--tr-teal-600); }

/* "For sale 526 / To lease 46" buttons in the section header */
.tr-seg-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.tr-seg-actions .tr-btn { background: #fff; }
.tr-seg-actions .tr-btn span {
    font-size: .78rem;
    font-weight: 700;
    color: var(--tr-muted);
    background: var(--tr-mist);
    border-radius: 999px;
    padding: .1rem .5rem;
}
.tr-seg-actions .tr-btn:hover span { color: var(--tr-blue); }

@media (max-width: 640px) {
    .tr-seg-actions { width: 100%; }
    .tr-seg-actions .tr-btn { flex: 1; justify-content: center; }
}

/* ==========================================================================
   Property detail page
   ========================================================================== */

.tr-pdp { background: var(--tr-brand-gradient); color: #fff; padding: 40px 0 36px; }
.tr-crumbs--dark a,
.tr-crumbs--dark { color: rgba(255, 255, 255, .75); }
.tr-crumbs--dark a:hover { color: #fff; }

.tr-pdp-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.tr-pdp-head h1 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.25rem); max-width: 26ch; margin-top: .6rem; }
.tr-pdp-place {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: rgba(255, 255, 255, .85);
    font-size: .95rem;
    margin: .6rem 0 0;
}
.tr-pdp-price { text-align: right; }
.tr-pdp-price b {
    display: block;
    font-family: var(--tr-display);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}
.tr-pdp-price span { font-size: .82rem; color: rgba(255, 255, 255, .8); }

/* The deal badge is absolute on cards; on this page it sits inline. */
.tr-deal--inline { position: static; display: inline-block; }

/* ------------------------------------------------------------- gallery ---- */

.tr-gallery {
    display: grid;
    /* The main shot takes more of the width than before — this is the photo
       that sells the place, and the thumbnails only need to be legible. */
    grid-template-columns: 2.3fr 1fr;
    gap: 10px;
    margin-top: 26px;
}
.tr-gallery-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-gallery-main,
.tr-gallery-thumb {
    position: relative;
    padding: 0;
    border: none;
    border-radius: var(--tr-radius);
    overflow: hidden;
    cursor: zoom-in;
    background: var(--tr-surface-200, #ececf6);
    display: block;
}
.tr-gallery-main { aspect-ratio: 4 / 3; }

/* The thumbnails fill their half of the side column rather than sitting at the
   top of it. They used to carry aspect-ratio: 4/3, and because align-self
   resolves to `start` for an item with a ratio — not `stretch` — each 144px
   thumbnail left 146px of blank card beneath it. Letting the row set the
   height makes them twice the size and closes the gaps. */
.tr-gallery-thumb { height: 100%; min-height: 0; }
.tr-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tr-gallery-main:hover img,
.tr-gallery-thumb:hover img { transform: scale(1.04); }
.tr-gallery-more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(13, 46, 61, .58);
    color: #fff;
    font-family: var(--tr-ui);
    font-weight: 600;
    font-size: .95rem;
}

/* --------------------------------------------------------------- body ---- */

.tr-pdp-grid { display: grid; grid-template-columns: 1.55fr .95fr; gap: 54px; align-items: start; }

.tr-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1px;
    background: var(--tr-line);
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    overflow: hidden;
}
.tr-facts > div { background: #fff; padding: 16px 18px; }
.tr-facts span {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tr-muted);
}
.tr-facts b { font-family: var(--tr-display); font-size: 1.05rem; color: var(--tr-ink); }

.tr-block { margin-top: 40px; }
.tr-block h2,
.tr-prose h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.tr-prose { margin-top: 40px; color: var(--tr-ink-700); }
.tr-prose p { margin: 0 0 1rem; }
.tr-prose ul, .tr-prose ol { margin: 0 0 1rem; padding-left: 1.2rem; }

/* Drop cap for a property's own description.
   Opt-in via a class rather than on .tr-prose itself: the same prose styles
   carry location copy, page content and CMS blocks, and an initial that size
   only reads as deliberate when it opens the one block of narrative on the
   page. ::first-letter also takes any opening quote or bracket with it, which
   is what you want — a lone floating quote mark would look like a mistake. */
.tr-dropcap > p:first-of-type::first-letter {
    float: left;
    margin: .06em .1em 0 0;
    font-family: var(--tr-display);
    font-size: 4.8em;
    font-weight: 700;
    /* Tightened so the cap's baseline lands on the second line of text rather
       than floating above it. */
    line-height: .76;
    color: var(--tr-blue-600);
}

/* No description in the feed opens with a list today, but one could: the
   first paragraph would then start halfway down the text, and a cap there
   reads as a glitch rather than an opening. */
.tr-dropcap > :is(ul, ol, blockquote, table) ~ p::first-letter {
    float: none;
    margin: 0;
    font: inherit;
    line-height: inherit;
    color: inherit;
}

@media (max-width: 560px) {
    /* Three lines of cap against a 40-character measure swallows the opening
       sentence, so it drops to roughly two. */
    .tr-dropcap > p:first-of-type::first-letter { font-size: 3.4em; }
}

.tr-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .6rem 1.4rem;
}
.tr-features li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .93rem;
    color: var(--tr-ink-700);
}
.tr-features svg { color: var(--tr-teal-600); flex: none; }

.tr-map { border-radius: var(--tr-radius); overflow: hidden; border: 1px solid var(--tr-line); }
.tr-map iframe { display: block; width: 100%; height: 340px; border: 0; }
.tr-map-note { font-size: .82rem; color: var(--tr-muted); margin: .6rem 0 0; }

/* ------------------------------------------------------------- enquire ---- */

.tr-pdp-side { position: sticky; top: 104px; }
.tr-enquire {
    background: #fff;
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius-lg);
    box-shadow: var(--tr-shadow);
    padding: 26px;
}
.tr-enquire h2 { font-size: 1.15rem; margin-bottom: .6rem; }
.tr-agent { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.tr-agent img,
.tr-agent-initials {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--tr-brand-gradient);
    color: #fff;
    font-family: var(--tr-display);
    font-weight: 700;
}
.tr-agent strong { display: block; font-family: var(--tr-display); font-size: 1rem; }
.tr-agent small { color: var(--tr-muted); font-size: .84rem; }
.tr-enquire-note { font-size: .9rem; color: var(--tr-muted); margin: 0 0 1.2rem; }
.tr-btn--block { width: 100%; }
.tr-enquire-direct { display: grid; gap: .5rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--tr-line); }
.tr-enquire-direct a { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--tr-ink-700); }
.tr-enquire-direct a:hover { color: var(--tr-blue); }
.tr-enquire-direct svg { color: var(--tr-teal-600); flex: none; }

/* ------------------------------------------------------------ lightbox ---- */

.tr-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(6, 26, 36, .93);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 6vw;
}
.tr-lightbox[hidden] { display: none; }
.tr-lightbox figure { margin: 0; max-width: 100%; max-height: 92vh; text-align: center; }
.tr-lightbox img { max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: 8px; }
.tr-lightbox figcaption { color: rgba(255, 255, 255, .7); font-size: .85rem; margin-top: .8rem; }
.tr-lightbox-close,
.tr-lightbox-nav {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color .18s ease;
}
.tr-lightbox-close:hover,
.tr-lightbox-nav:hover { background: rgba(255, 255, 255, .26); }
.tr-lightbox-close { top: 24px; right: 24px; }
.tr-lightbox-prev { left: 3vw; }
.tr-lightbox-next { right: 3vw; }

@media (max-width: 980px) {
    .tr-pdp-grid { grid-template-columns: 1fr; gap: 36px; }
    .tr-pdp-side { position: static; }
}

@media (max-width: 640px) {
    .tr-pdp-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .tr-pdp-price { text-align: left; }
    .tr-gallery { grid-template-columns: 1fr; }
    .tr-gallery-side { grid-template-columns: 1fr 1fr; }
    .tr-lightbox-prev { left: 8px; }
    .tr-lightbox-next { right: 8px; }
}

/* Result count above a collection grid */
.tr-resultcount { font-size: .92rem; color: var(--tr-muted); margin: 0 0 22px; }
.tr-resultcount strong { color: var(--tr-ink); font-family: var(--tr-ui); }

/* ==========================================================================
   Collections index (/collections)
   ========================================================================== */

.tr-coll {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tr-coll:hover { transform: translateY(-4px); box-shadow: var(--tr-shadow); border-color: transparent; }

.tr-coll-art {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* Each card gets its own tint so the grid still reads as a set when the
       cover photos are wildly different. */
    background: linear-gradient(140deg, #9fd9e8, #2ea3cf 55%, #0b6f9c);
}
.tr-coll--b .tr-coll-art { background: linear-gradient(140deg, #a8e3d8, #1fb2a6 52%, #0a7d8e); }
.tr-coll--c .tr-coll-art { background: linear-gradient(140deg, #bfe0ef, #5aa9d6 50%, #14567f); }
.tr-coll--d .tr-coll-art { background: linear-gradient(140deg, #93d7c9, #14889b 52%, #0d4f66); }
.tr-coll--e .tr-coll-art { background: linear-gradient(140deg, #8ecbe8, #135f8c 55%, #0a3a57); }
.tr-coll--f .tr-coll-art { background: linear-gradient(140deg, #7fd3c0, #0d8087 55%, #06414f); }
.tr-coll-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tr-coll:hover .tr-coll-art img { transform: scale(1.05); }
.tr-coll-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 46, 61, .5), rgba(13, 46, 61, .04) 65%);
}

.tr-coll-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.tr-coll-count {
    font-family: var(--tr-ui);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tr-teal-600);
}
.tr-coll-body h2 { font-size: 1.25rem; margin: .35rem 0 .45rem; color: var(--tr-ink); }
.tr-coll:hover .tr-coll-body h2 { color: var(--tr-blue); }
.tr-coll-intro { display: block; font-size: .92rem; color: var(--tr-muted); }
.tr-coll-go {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: 1.1rem;
    font-family: var(--tr-ui);
    font-size: .88rem;
    font-weight: 600;
    color: var(--tr-blue);
}
.tr-coll-go svg { transition: transform .18s ease; }
.tr-coll:hover .tr-coll-go svg { transform: translateX(3px); }

/* ==========================================================================
   Property search (/properties/search)
   ========================================================================== */

.tr-activebits { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1.5rem; }
.tr-activebits span {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    padding: .32rem .85rem;
    font-size: .84rem;
    font-weight: 500;
}
.tr-activebits a { color: rgba(255, 255, 255, .85); font-size: .84rem; text-decoration: underline; }
.tr-activebits a:hover { color: #fff; }

.tr-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius-lg);
    padding: 14px;
    margin-bottom: 30px;
}
.tr-filter { min-width: 0; padding: .35rem .7rem; position: relative; }
.tr-filter + .tr-filter::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--tr-line);
}
.tr-filter > label {
    display: block;
    font-family: var(--tr-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tr-muted);
    margin-bottom: .15rem;
}
.tr-filter select {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--tr-body);
    font-size: .93rem;
    font-weight: 500;
    color: var(--tr-ink);
    padding: 0;
    appearance: none;
    cursor: pointer;
}
.tr-filter select:focus { outline: none; }
.tr-filter--go { display: flex; align-items: center; padding: 0; }
.tr-filter--go::before { display: none; }
.tr-filter--go .tr-btn { height: 100%; padding-inline: 1.6rem; }

/* Fades the grid while an in-place filter swap is in flight. */
[data-search-results] { transition: opacity .15s ease; }

@media (max-width: 900px) {
    .tr-filters { grid-template-columns: 1fr 1fr; gap: 6px; }
    .tr-filter { background: var(--tr-mist); border-radius: 10px; padding: .5rem .8rem; }
    .tr-filter + .tr-filter::before { display: none; }
    .tr-filter--go { grid-column: 1 / -1; background: none; }
    .tr-filter--go .tr-btn { width: 100%; padding-block: .9rem; }
}

/* ==========================================================================
   Company pages: About, Sell, Contact — plus shared form styling
   ========================================================================== */

/* ---------------------------------------------------------- flash notes ---- */

.tr-flash {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    border-radius: var(--tr-radius);
    padding: 14px 18px;
    margin: 22px 0 0;
    font-size: .95rem;
    font-weight: 500;
}
.tr-flash svg { flex: none; margin-top: .15rem; }
.tr-flash--ok { background: rgba(22, 181, 168, .12); border: 1px solid rgba(22, 181, 168, .4); color: var(--tr-teal-600); }
.tr-flash--bad { background: #fdf0f0; border: 1px solid #f2c9c9; color: #a8322f; }

/* --------------------------------------------------------------- forms ---- */

.tr-form { display: grid; gap: 16px; }
.tr-form--card {
    background: #fff;
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius-lg);
    box-shadow: var(--tr-shadow);
    padding: 28px;
}
.tr-form--card h2 { font-size: 1.3rem; }
.tr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.tr-field-b label {
    display: block;
    font-family: var(--tr-ui);
    font-size: .8rem;
    font-weight: 600;
    color: var(--tr-ink);
    margin-bottom: .35rem;
}
.tr-field-b label span { color: var(--tr-blue); }
.tr-field-b input,
.tr-field-b select,
.tr-field-b textarea {
    width: 100%;
    border: 1px solid var(--tr-line);
    border-radius: 10px;
    background: #fff;
    padding: .7rem .9rem;
    font-family: var(--tr-body);
    font-size: .95rem;
    color: var(--tr-ink);
}
.tr-field-b textarea { resize: vertical; min-height: 110px; }
.tr-field-b input:focus,
.tr-field-b select:focus,
.tr-field-b textarea:focus {
    outline: none;
    border-color: var(--tr-blue);
    box-shadow: 0 0 0 3px rgba(0, 144, 210, .14);
}

/* Country code + number share one row, the code kept narrow. */
/* ---------------------------------------------------- phone fields ------- */

/* intl-tel-input wraps each phone field in .iti and puts the flag and dial
   code inside the left edge of the box, so the wrapper has to carry the full
   field width or the input collapses to its default size. */
.iti { width: 100%; display: block; }
.iti__country-list { color: var(--tr-ink); font-family: var(--tr-body); }

/* The dropdown is rooted at <body> so panels can't clip it; it therefore has
   to outrank the chat panel (1050) and the save-property modal (1060). */
.iti--container { z-index: 1080; }

.tr-field-b input.is-invalid { border-color: #d92d20; }
.tr-phone-error { margin-top: .35rem; color: #d92d20; font-size: .82rem; font-weight: 600; }
.tr-phone-error[hidden] { display: none; }

.tr-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; color: var(--tr-muted); }
.tr-check input { margin-top: .2rem; flex: none; }
.tr-form-note { font-size: .85rem; color: var(--tr-muted); margin: 0; }

/* ------------------------------------------------------------- contact ---- */

.tr-contact-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 54px; align-items: start; }
.tr-contact-side { display: grid; gap: 18px; }

.tr-infocard {
    background: #fff;
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    padding: 24px;
}
.tr-infocard--tint { background: var(--tr-mist); }
.tr-infocard h2 { font-size: 1.05rem; margin-bottom: 1rem; }
.tr-infocard p { font-size: .92rem; color: var(--tr-muted); margin: 0 0 1.1rem; }

.tr-infolist { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.tr-infolist li { display: flex; align-items: flex-start; gap: .65rem; font-size: .93rem; color: var(--tr-ink-700); }
.tr-infolist svg { color: var(--tr-teal-600); flex: none; margin-top: .15rem; }

.tr-agent--row { margin-bottom: .9rem; }
.tr-agent--row:last-child { margin-bottom: 0; }
.tr-agent--row small a { color: var(--tr-muted); }
.tr-agent--row small a:hover { color: var(--tr-blue); }

/* ---------------------------------------------------------------- sell ---- */

.tr-sell-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.tr-sell-form-wrap { position: sticky; top: 104px; }

.tr-steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; }
.tr-steps li {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 20px;
    padding: 26px 0;
    border-top: 1px solid var(--tr-line);
}
.tr-steps li:last-child { border-bottom: 1px solid var(--tr-line); }
.tr-steps-no {
    font-family: var(--tr-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tr-teal-600);
}
.tr-steps h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.tr-steps p { margin: 0; color: var(--tr-muted); font-size: .95rem; }

/* --------------------------------------------------------------- about ---- */

.tr-about-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 54px; align-items: start; }
.tr-about-side { position: sticky; top: 104px; }

.tr-ticks { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .6rem; }
.tr-ticks li {
    position: relative;
    padding-left: 1.6rem;
    font-size: .93rem;
    color: var(--tr-ink-700);
}
.tr-ticks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .45em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tr-brand-gradient);
}

/* One profile per row — each card gets the full width of the shell. */
.tr-team { display: grid; grid-template-columns: 1fr; gap: 24px; }

.tr-teamcard {
    display: grid;
    /* A portrait column beside the text, rather than the old thumbnail —
       these are the people a buyer will actually deal with. Wider than the
       two-up version was, to stay in proportion across the full row. */
    grid-template-columns: 320px 1fr;
    background: #fff;
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius-lg);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tr-teamcard:hover { transform: translateY(-3px); box-shadow: var(--tr-shadow); border-color: transparent; }

.tr-teamcard-photo { position: relative; background: var(--tr-brand-gradient); min-height: 300px; }
.tr-teamcard-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* `top` keeps faces in frame when a portrait is cropped to the column. */
    object-fit: cover;
    object-position: center top;
}
.tr-teamcard-initials {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--tr-display);
    font-size: 3rem;
    font-weight: 700;
}

.tr-teamcard-body { padding: 26px 28px; display: flex; flex-direction: column; }
.tr-teamcard-body h3 { font-size: 1.35rem; }
.tr-teamcard-role {
    font-family: var(--tr-ui);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tr-teal-600);
    margin: .35rem 0 0;
}
/* Capped so the bio does not run the full width of a 1,192px card, which
   is past the point where a line of text stays comfortable to read. */
.tr-teamcard-bio { font-size: .95rem; color: var(--tr-ink-700); margin: 1rem 0 0; max-width: 72ch; }

.tr-teamcard-links {
    display: grid;
    gap: .5rem;
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--tr-line);
    font-size: .92rem;
}
.tr-teamcard-links a { display: flex; align-items: center; gap: .55rem; color: var(--tr-ink-700); }
.tr-teamcard-links a:hover { color: var(--tr-blue); }
.tr-teamcard-links svg { color: var(--tr-teal-600); flex: none; }

.tr-teamcard-cta { margin-top: auto; align-self: flex-start; }
.tr-teamcard-body .tr-teamcard-cta { margin-top: 1.4rem; }

@media (max-width: 560px) {
    .tr-team { grid-template-columns: 1fr; }
    .tr-teamcard { grid-template-columns: 1fr; }
    .tr-teamcard-photo { min-height: 280px; }
}

@media (max-width: 980px) {
    .tr-contact-grid,
    .tr-sell-grid,
    .tr-about-grid { grid-template-columns: 1fr; gap: 36px; }
    .tr-sell-form-wrap,
    .tr-about-side { position: static; }
}

@media (max-width: 560px) {
    .tr-form-row { grid-template-columns: 1fr; }
    .tr-teamcard { flex-direction: column; }
    .tr-steps li { grid-template-columns: 44px 1fr; gap: 12px; }
}

/* ==========================================================================
   Location picker — searchable, multi-select province/canton/district tree
   ========================================================================== */

.tr-locpick { position: relative; }

.tr-locpick-toggle,
.tr-drop-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--tr-body);
    font-size: .96rem;
    font-weight: 500;
    color: var(--tr-ink);
    cursor: pointer;
    text-align: left;
}
.tr-locpick-toggle svg,
.tr-drop-toggle svg { flex: none; opacity: .5; transition: transform .2s ease; }
.tr-locpick.is-open .tr-locpick-toggle svg,
.tr-drop.is-open .tr-drop-toggle svg { transform: rotate(180deg); }
.tr-locpick-label,
.tr-drop-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tr-locpick-panel,
.tr-drop-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: -14px;
    width: min(420px, calc(100vw - 40px));
    background: #fff;
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    box-shadow: var(--tr-shadow-lg);
    /* Only ever competes with its siblings: .tr-search around it is a stacking
       context of its own, so no value here can lift the panel above the fixed
       chat launcher. That collision is handled by hiding the launcher while a
       picker is open — see body.tr-picker-open in chat.css. */
    z-index: 60;
    overflow: hidden;
}
.tr-locpick-panel[hidden],
.tr-drop-panel[hidden] { display: none; }

/* Sits on the hero's white search capsule, so it opens downward over the page */
.tr-locpick--hero .tr-locpick-panel { left: -18px; }

.tr-locpick-search,
.tr-drop-search {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 14px 16px;
    border-bottom: 1px solid var(--tr-line);
}
.tr-locpick-search svg,
.tr-drop-search svg { color: var(--tr-muted); flex: none; }
.tr-locpick-search input,
.tr-drop-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    font-family: var(--tr-body);
    font-size: .93rem;
    color: var(--tr-ink);
}
.tr-locpick-search input:focus,
.tr-drop-search input:focus { outline: none; }

.tr-locpick-tree { max-height: 320px; overflow-y: auto; padding: 8px; }

.tr-locpick-row { display: flex; align-items: center; gap: .2rem; border-radius: 9px; }
.tr-locpick-row:hover { background: var(--tr-mist); }
.tr-locpick-row--2 { padding-left: 18px; }
.tr-locpick-row--3 { padding-left: 36px; }
/* A fourth level: neighbourhoods inside a district, indented once more and
   quieter again, so the district still reads as the heading of its group. */
.tr-locpick-row--4 { padding-left: 58px; }
/* A fifth: a complex (gated community, condominium) under its neighbourhood.
   One step in from the neighbourhood it belongs to. A complex with no
   neighbourhood sits at level 4, beside the neighbourhoods. */
.tr-locpick-row--5 { padding-left: 78px; }
@media (max-width: 560px) {
    /* The panel is ~330px on a phone; five levels of indent would leave the
       deepest rows barely a third of it for the name. */
    .tr-locpick-row--4 { padding-left: 46px; }
    .tr-locpick-row--5 { padding-left: 62px; }
}

.tr-locpick-caret {
    flex: none;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--tr-muted);
    cursor: pointer;
    padding: 0;
}
.tr-locpick-caret:hover { color: var(--tr-blue); background: rgba(0, 144, 210, .1); }
.tr-locpick-caret svg { transition: transform .18s ease; }
.tr-locpick-caret.is-open svg { transform: rotate(90deg); }
.tr-locpick-caret--empty { cursor: default; }
.tr-locpick-caret--empty:hover { background: none; }

.tr-locpick-opt {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .5rem;
    cursor: pointer;
    font-size: .92rem;
}
.tr-locpick-opt input { flex: none; accent-color: var(--tr-blue); width: 15px; height: 15px; cursor: pointer; }
.tr-locpick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tr-ink); }
.tr-locpick-row--1 .tr-locpick-name { font-family: var(--tr-ui); font-weight: 600; }
.tr-locpick-row--3 .tr-locpick-name { color: var(--tr-ink-700); }
.tr-locpick-row--4 .tr-locpick-name,
.tr-locpick-row--5 .tr-locpick-name { color: var(--tr-muted); font-size: .88em; }
/* "Pinilla" and "Hacienda Pinilla" are both named places, and the second is
   not a neighbourhood: say what it is, in the row, where the eye already is. */
.tr-locpick-row[data-kind="complex"] .tr-locpick-name::after {
    content: ' complex';
    margin-left: .4em;
    font-size: .78em;
    font-style: italic;
    letter-spacing: .02em;
    opacity: .7;
}
.tr-locpick-n,
.tr-drop-n {
    flex: none;
    font-size: .75rem;
    font-weight: 600;
    color: var(--tr-muted);
    background: var(--tr-mist);
    border-radius: 999px;
    padding: .1rem .45rem;
}
.tr-locpick-opt:hover .tr-locpick-n { background: #fff; }
.tr-locpick-none,
.tr-drop-none { padding: 20px 16px; margin: 0; font-size: .9rem; color: var(--tr-muted); text-align: center; }

.tr-locpick-foot,
.tr-drop-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: 12px 16px;
    border-top: 1px solid var(--tr-line);
    background: var(--tr-mist);
}
.tr-locpick-foot [data-locpick-clear],
.tr-drop-foot [data-drop-clear] {
    background: none;
    border: none;
    font-family: var(--tr-ui);
    font-size: .86rem;
    font-weight: 600;
    color: var(--tr-muted);
    cursor: pointer;
}
.tr-locpick-foot [data-locpick-clear]:hover,
.tr-drop-foot [data-drop-clear]:hover { color: var(--tr-blue); }
.tr-locpick-foot .tr-btn,
.tr-drop-foot .tr-btn { padding: .55rem 1.4rem; font-size: .86rem; }

@media (max-width: 640px) {
    .tr-locpick-panel { left: 0; width: min(420px, calc(100vw - 44px)); }
}

/* ------------------------------------------- styled single/multi dropdown ---- */

.tr-drop { position: relative; }
.tr-drop-panel { width: min(280px, calc(100vw - 40px)); }
.tr-drop--hero .tr-drop-panel { left: -18px; }
.tr-drop-list { max-height: 300px; overflow-y: auto; padding: 8px; }

.tr-drop-opt {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .65rem;
    border-radius: 9px;
    cursor: pointer;
    font-size: .92rem;
}
.tr-drop-opt:hover { background: var(--tr-mist); }
.tr-drop-opt input { flex: none; accent-color: var(--tr-blue); width: 15px; height: 15px; cursor: pointer; }
.tr-drop-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tr-ink); }
.tr-drop-opt:has(input:checked) .tr-drop-name { font-weight: 600; color: var(--tr-blue); }
.tr-drop-opt:hover .tr-drop-n { background: #fff; }

/* ==========================================================================
   Homepage hero search — tabs + four fields, overlapping the gradient
   ========================================================================== */

.tr-search {
    position: relative;
    z-index: 5;
    margin-top: -74px;
    background: #fff;
    border-radius: var(--tr-radius-lg);
    box-shadow: var(--tr-shadow-lg);
    padding: 10px;
}

.tr-search-tabs { display: flex; gap: .3rem; padding: .35rem .5rem 0; }
.tr-search-tab {
    font-family: var(--tr-ui);
    font-weight: 600;
    font-size: .85rem;
    color: var(--tr-muted);
    background: none;
    border: none;
    border-radius: 10px 10px 0 0;
    padding: .55rem 1.1rem;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}
.tr-search-tab:hover { color: var(--tr-ink); }
.tr-search-tab.is-active { color: var(--tr-blue); background: var(--tr-mist); }

.tr-search-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: stretch;
    background: var(--tr-mist);
    border-radius: 16px;
    padding: 8px;
}

.tr-field { padding: .55rem 1rem; position: relative; min-width: 0; }
.tr-field + .tr-field::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--tr-line);
}
.tr-field > label {
    display: block;
    font-family: var(--tr-ui);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tr-muted);
    margin-bottom: .1rem;
}

/* The Land tab already fixes the type, so the Type field steps aside. */
.tr-field.is-locked { opacity: .45; pointer-events: none; }

.tr-search-submit { display: flex; align-items: center; padding-left: .5rem; }
.tr-search-submit .tr-btn { height: 100%; padding-inline: 1.9rem; }

@media (max-width: 900px) {
    .tr-search-row { grid-template-columns: 1fr 1fr; gap: 6px; }
    .tr-field + .tr-field::before { display: none; }
    .tr-field { background: #fff; border-radius: 10px; }
    .tr-search-submit { grid-column: 1 / -1; padding: 0; }
    .tr-search-submit .tr-btn { width: 100%; padding-block: .9rem; }
    .tr-search-tabs { flex-wrap: wrap; }
}

@media (max-width: 640px) {
    .tr-search { margin-top: -58px; }
}

/* The option rows and tree nodes set an explicit `display`, which beats the
   user-agent rule for [hidden] — so anything we hide from JS (a type or a
   location with nothing in it for the active tab) stayed visible. */
.tr-drop [hidden],
.tr-locpick [hidden] { display: none !important; }

/* ==========================================================================
   Card carousel — three across, paged by dots
   ========================================================================== */

.tr-carousel { position: relative; }

.tr-carousel-track {
    display: grid;
    grid-auto-flow: column;
    /* Exactly three across, so a fourth never crowds the row. */
    grid-auto-columns: calc((100% - 2 * 26px) / 3);
    gap: 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* The dots are the control; the scrollbar would just be visual noise. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}
.tr-carousel-track::-webkit-scrollbar { display: none; }
.tr-carousel-track > * { scroll-snap-align: start; }

.tr-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .45rem;
    margin-top: 28px;
}
.tr-carousel-dots:empty { display: none; }

.tr-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--tr-line);
    cursor: pointer;
    transition: width .22s ease, background-color .22s ease;
}
.tr-dot:hover { background: var(--tr-muted); }
.tr-dot.is-active { width: 28px; background: var(--tr-brand-gradient); }

@media (max-width: 1000px) {
    .tr-carousel-track { grid-auto-columns: calc((100% - 26px) / 2); }
}

@media (max-width: 640px) {
    .tr-carousel-track { grid-auto-columns: 86%; gap: 16px; }
}

/* Lightbox loading state. Without it a multi-megabyte photo looks like the
   previous one repeating, because the <img> keeps painting the old frame
   until the new file decodes. */
.tr-lightbox figure { position: relative; }
.tr-lightbox.is-loading img { opacity: .25; transition: opacity .15s ease; }
.tr-lightbox.is-loading figure::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tr-spin .8s linear infinite;
}
@keyframes tr-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------- locations directory ---- */

.tr-locdir-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    max-width: 560px;
    margin: 0 0 28px;
    padding: .75rem 1rem;
    border: 1.5px solid var(--tr-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--tr-shadow);
    color: var(--tr-muted);
}
.tr-locdir-search:focus-within { border-color: var(--tr-blue); box-shadow: 0 0 0 4px rgba(0, 144, 210, .14); }
.tr-locdir-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font-family: var(--tr-body);
    font-size: .98rem;
    color: var(--tr-ink);
}
.tr-locdir-search input::-webkit-search-cancel-button { display: none; }
.tr-locdir-clear {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--tr-mist);
    color: var(--tr-muted);
    cursor: pointer;
}
.tr-locdir-clear[hidden] { display: none; }

.tr-locdir-none { margin: 0 0 24px; color: var(--tr-muted); }
.tr-locdir-none[hidden] { display: none; }

.tr-locprov { margin-bottom: 36px; }
.tr-locprov[hidden] { display: none; }
.tr-locprov-head {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    padding-bottom: .6rem;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--tr-line);
}
.tr-locprov-head h2 { margin: 0; font-size: 1.35rem; }
.tr-locprov-count { font-size: .85rem; color: var(--tr-muted); white-space: nowrap; }

/* Cantons sit side by side and keep their districts beneath them, so the
   province > canton > district structure is readable at a glance. */
.tr-loccantons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px 26px;
}
.tr-loccanton[hidden] { display: none; }
.tr-loccanton h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .4rem;
    font-size: 1rem;
}
.tr-locdistricts { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--tr-line); }
.tr-locdistricts li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .22rem 0 .22rem .7rem;
    font-size: .92rem;
}
.tr-locdistricts li[hidden] { display: none; }

/* A neighbourhood or gated community inside the district above it: indented
   and quieter, so the district still reads as the heading of its group. */
.tr-locplace { padding-left: 1.6rem !important; }
.tr-locplace a { color: var(--tr-muted); font-size: .88rem; }
.tr-locplace a:hover { color: var(--tr-blue-600); }
/* A place with too few listings for a page of its own: the row goes to the
   search instead, and reads a shade lighter so the pages stay the stronger
   signal in the column. */
.tr-locplace--search a { font-style: italic; }
.tr-loccount {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--tr-mist);
    color: var(--tr-muted);
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
}

/* ------------------------------------------------------ location page ---- */

.tr-pagehead--photo { background-size: cover; background-position: center; }

/* Says where a number came from, next to the number. */
.tr-datanote {
    margin: 18px 0 0;
    padding: .7rem .95rem;
    border-left: 3px solid var(--tr-teal);
    background: var(--tr-mist);
    border-radius: 0 8px 8px 0;
    color: var(--tr-ink-700);
    font-size: .86rem;
    line-height: 1.55;
}

.tr-stat span small { display: block; margin-top: 2px; font-size: .72rem; opacity: .75; }

.tr-figures { margin: 0 0 1rem; }
.tr-figures > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--tr-line);
}
.tr-figures dt { margin: 0; color: var(--tr-muted); font-size: .88rem; }
.tr-figures dd { margin: 0; font-weight: 700; font-size: .95rem; }
.tr-figures-note { margin: 0 0 1rem; color: var(--tr-muted); font-size: .8rem; line-height: 1.55; }

.tr-typelist { list-style: none; margin: 0; padding: 0; }
.tr-typelist li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--tr-line);
    font-size: .9rem;
}
.tr-typelist li b { color: var(--tr-blue-600); }

.tr-trend { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tr-trend th, .tr-trend td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--tr-line); }
.tr-trend th { font-family: var(--tr-ui); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tr-muted); }
.tr-trend tbody tr:first-child { background: var(--tr-mist); font-weight: 600; }

.tr-faq { max-width: 760px; margin: 0 auto; }
.tr-faq-item {
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    background: #fff;
    margin-bottom: .6rem;
    overflow: hidden;
}
.tr-faq-item summary {
    padding: .9rem 1.1rem;
    cursor: pointer;
    font-family: var(--tr-display);
    font-weight: 600;
    list-style: none;
}
.tr-faq-item summary::-webkit-details-marker { display: none; }
.tr-faq-item summary::after { content: '+'; float: right; color: var(--tr-blue); font-weight: 700; }
.tr-faq-item[open] summary::after { content: '–'; }
.tr-faq-item > div { padding: 0 1.1rem 1rem; color: var(--tr-ink-700); line-height: 1.65; }

.tr-chiprow { display: flex; flex-wrap: wrap; gap: .5rem; }
.tr-chip {
    padding: .4rem .85rem;
    border: 1px solid var(--tr-line);
    border-radius: 999px;
    background: #fff;
    font-size: .88rem;
    font-weight: 600;
}
.tr-chip:hover { border-color: var(--tr-blue); background: var(--tr-mist); }

.tr-title--sm { font-size: 1.25rem; margin-bottom: .8rem; }

.tr-lede { font-size: 1.05rem; line-height: 1.7; color: var(--tr-ink-700); margin: 0 0 1.3rem; }

/* ------------------------------------------------- location enquiry ------ */

.tr-enquiry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.tr-enquiry-intro { position: sticky; top: 24px; }
.tr-enquiry-intro p { color: var(--tr-ink-700); line-height: 1.7; }
.tr-form--card .tr-field-b { margin-bottom: .9rem; }
.tr-form-note { margin: .9rem 0 0; color: var(--tr-muted); font-size: .8rem; line-height: 1.55; }

@media (max-width: 900px) {
    .tr-enquiry { grid-template-columns: 1fr; gap: 24px; }
    .tr-enquiry-intro { position: static; }
    .tr-form-row { grid-template-columns: 1fr; }
}

/* Price per m² by property type, in the location sidebar. */
.tr-sqm { width: 100%; border-collapse: collapse; font-size: .89rem; margin-bottom: .6rem; }
.tr-sqm th {
    padding: 0 0 .4rem;
    text-align: left;
    font-family: var(--tr-ui);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--tr-muted);
    border-bottom: 1px solid var(--tr-line);
}
.tr-sqm th:last-child, .tr-sqm td:last-child { text-align: right; white-space: nowrap; }
.tr-sqm td { padding: .45rem 0; border-bottom: 1px solid var(--tr-line); vertical-align: top; }
.tr-sqm td small { display: block; font-size: .72rem; color: var(--tr-muted); }
.tr-sqm td b { color: var(--tr-blue-600); }

/* Breadcrumbs on a phone: one scrollable line rather than two wrapped ones.
   A location page's trail is five deep (Home / Locations / province / canton /
   district) and wrapping it pushed the heading down the screen. Scrolling keeps
   every ancestor link present and tappable — they are the point of the trail,
   so collapsing them to an ellipsis would throw away the internal linking. */
@media (max-width: 640px) {
    .tr-crumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        /* Lets the row scroll inside a flex parent instead of stretching it. */
        min-width: 0;
        /* Room for the fade, and for the last crumb to clear the screen edge. */
        padding-right: 1.5rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* Masks the right edge so a cut-off crumb reads as "more this way"
           rather than as a rendering fault. */
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    }

    .tr-crumbs::-webkit-scrollbar { display: none; }

    /* Each crumb keeps its own words together; only the row scrolls. */
    .tr-crumbs > * { flex: 0 0 auto; white-space: nowrap; }
}

/* ------------------------------------------- property enquiry (sidebar) --- */

.tr-pdpform { margin-top: .9rem; }
.tr-pdpform-direct { display: grid; gap: .5rem; }
.tr-pdpform-call { gap: .5rem; }

/* WhatsApp keeps its own colour — recognising it is the point. */
.tr-btn--wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: #25d366;
    color: #fff;
    border: 0;
}
.tr-btn--wa:hover { background: #1fb855; color: #fff; }

.tr-pdpform-or {
    position: relative;
    margin: 1rem 0 .9rem;
    text-align: center;
    font-size: .8rem;
    color: var(--tr-muted);
}
.tr-pdpform-or::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid var(--tr-line);
}
.tr-pdpform-or span { position: relative; padding: 0 .7rem; background: #fff; }

/* Three choices as a segmented control: it is the first decision, and radios
   in a list would bury it under the name fields. */
.tr-pdpform-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    margin-bottom: .9rem;
    border: 1px solid var(--tr-line);
    border-radius: 999px;
    background: var(--tr-mist);
}
.tr-pdpform-tab { position: relative; }
.tr-pdpform-tab input { position: absolute; opacity: 0; pointer-events: none; }
.tr-pdpform-tab span {
    display: block;
    padding: .45rem .3rem;
    border-radius: 999px;
    font-family: var(--tr-ui);
    font-size: .76rem;
    font-weight: 600;
    text-align: center;
    color: var(--tr-ink-700);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.tr-pdpform-tab input:checked + span { background: var(--tr-brand-gradient); color: #fff; }
.tr-pdpform-tab input:focus-visible + span { outline: 2px solid var(--tr-blue); outline-offset: 2px; }

.tr-pdpform-when[hidden] { display: none; }
.tr-pdpform-form .tr-field-b { margin-bottom: .75rem; }
.tr-pdpform-form .tr-form-row { gap: 10px; }
.tr-pdpform-form .tr-check { margin-bottom: .6rem; font-size: .82rem; }

@media (max-width: 480px) {
    .tr-pdpform-tabs { grid-template-columns: 1fr; border-radius: 14px; }
    .tr-pdpform-tab span { border-radius: 10px; }
}

/* ------------------------------------------------------- nearby places --- */

.tr-nearby[hidden] { display: none; }

.tr-nearby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.tr-nearby-card {
    padding: 18px 20px;
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    background: #fff;
}
.tr-nearby-card h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .7rem;
    font-size: .95rem;
    color: var(--tr-ink);
}
.tr-nearby-card h3 svg { flex: 0 0 auto; color: var(--tr-teal); }
.tr-nearby-card ul { list-style: none; margin: 0; padding: 0; }
.tr-nearby-card li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    padding: .38rem 0;
    border-bottom: 1px solid var(--tr-line);
    font-size: .89rem;
}
.tr-nearby-card li:last-child { border-bottom: 0; }
.tr-nearby-card li span { color: var(--tr-ink-700); overflow-wrap: anywhere; }
.tr-nearby-card li b { flex: 0 0 auto; color: var(--tr-blue-600); font-size: .82rem; white-space: nowrap; }

.tr-nearby-credit { margin: 18px 0 0; color: var(--tr-muted); font-size: .8rem; }
.tr-nearby-credit[hidden] { display: none; }

/* ------------------------------------------------------------- toast ---- */

/* The site's one notification. Bottom centre on desktop, bottom of the screen
   on a phone — never top-of-page, which is where a flash banner lands and
   where nobody is looking after scrolling to a form. */
.tr-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: .55rem;
    max-width: min(520px, calc(100vw - 32px));
    padding: .8rem 1.3rem;
    border-radius: 999px;
    background: var(--tr-ink);
    color: #fff;
    font-family: var(--tr-ui);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 16px 40px rgba(13, 46, 61, .34);
    transform: translateX(-50%);
    animation: trToastIn .25s ease both;
}
.tr-toast::before {
    content: '';
    flex: none;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--tr-teal);
    border-bottom: 2px solid var(--tr-teal);
    transform: rotate(-45deg) translateY(-2px);
}
.tr-toast--bad { background: #8d2230; }
/* A cross rather than a tick, built from the same two borders. */
.tr-toast--bad::before {
    width: 9px;
    height: 9px;
    border: 0;
    background:
        linear-gradient(#fff, #fff) center / 100% 2px no-repeat,
        linear-gradient(#fff, #fff) center / 2px 100% no-repeat;
    transform: rotate(45deg);
}
.tr-toast[hidden] { display: none; }

@keyframes trToastIn {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translateX(-50%); }
}

@media (max-width: 560px) {
    /* Clear of the chat launcher, which sits in the same corner. */
    .tr-toast { bottom: 88px; }
}

/* A button that is waiting on the server. The label stays put so the button
   keeps its width; the spinner takes the space the icon would. */
.tr-btn.is-busy,
button.is-busy { position: relative; cursor: progress; opacity: .85; }
.tr-btn.is-busy::after,
button.is-busy::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: .55rem;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: trSpin .6s linear infinite;
}

@keyframes trSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .tr-toast { animation: none; }
    .tr-btn.is-busy::after,
    button.is-busy::after { animation-duration: 2s; }
}

/* --------------------------------------------------- in-page anchors ---- */

/* Jumping to a section on the same page glides rather than cuts, and stops
   clear of the sticky header instead of sliding the heading underneath it. */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* The second button in the figures card: same shape as the one above it, but
   outlined, so the primary action stays the one that shows the listings. */
.tr-btn--ask { margin-top: 10px; }

/* While a page of listings is being fetched: the grid dims and stops taking
   clicks, so a second tap on the pager cannot start a competing request. */
[data-ajax-pager].is-loading { opacity: .45; pointer-events: none; transition: opacity .15s ease; }
/* Where the grid comes to rest after paging: clear of the sticky header, so
   the first row is the first thing under it. */
[data-ajax-pager] { scroll-margin-top: 96px; }

/* ========================================================== the blog ====
   The card index at /blog and the article at /blog/{slug}.

   The cards borrow the collection card's shape rather than the property
   card's: a post has no price, no measurements and no feature chips, so the
   property card's whole lower half would be empty furniture. What a reader
   is choosing between here is a headline and how long it will take, which is
   what the card shows.
   ======================================================================== */

.tr-post {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tr-post:hover { transform: translateY(-4px); box-shadow: var(--tr-shadow); border-color: transparent; }

.tr-post-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(140deg, #9fd9e8, #2ea3cf 55%, #0b6f9c);
}
.tr-post-media > svg { width: 38%; opacity: .3; }
.tr-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tr-post:hover .tr-post-media img { transform: scale(1.05); }

.tr-post-body { display: flex; flex-direction: column; flex: 1; padding: 18px 22px 22px; }

/* Date and reading time, in the UI face: at this size the serif reads as
   dated rather than editorial. */
.tr-post-meta {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--tr-ui);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tr-teal-600);
}
.tr-post-meta i { font-style: normal; opacity: .5; }

.tr-post-title {
    display: block;
    font-family: var(--tr-display);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    font-size: 1.22rem;
    color: var(--tr-ink);
    margin: .45rem 0 .5rem;
}
.tr-post:hover .tr-post-title { color: var(--tr-blue); }

.tr-post-excerpt { display: block; font-size: .92rem; color: var(--tr-muted); }

/* Pushed to the bottom so the call to action lines up across a row of cards
   whose summaries are different lengths. */
.tr-post-go {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: 14px;
    font-family: var(--tr-ui);
    font-size: .86rem;
    font-weight: 700;
    color: var(--tr-blue);
}
.tr-post:hover .tr-post-go svg { transform: translateX(3px); }
.tr-post-go svg { transition: transform .22s ease; }

/* ---------------------------------------------------------- article ---- */

/* A reading measure. 1240px of body text is unreadable — this keeps a line
   at roughly 70 characters, where the eye finds the next line without
   hunting for it. */
.tr-shell--read { max-width: 760px; }

.tr-pagehead--article h1 { max-width: 28ch; }
.tr-pagehead-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1rem 0 0;
    font-family: var(--tr-ui);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}
.tr-pagehead-meta i { font-style: normal; opacity: .6; }

/* The standfirst: the excerpt, set larger than the body, doing the job the
   opening paragraph does in a newspaper — telling you whether to read on. */
.tr-article-standfirst {
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--tr-ink-700);
    margin: 0 0 1.6rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--tr-line);
}

/* Long-form prose. .tr-prose carries the basics site-wide; an article needs
   the rest of what an editor can write — subheads with room around them,
   pull quotes, images, tables. */
.tr-article { margin-top: 0; font-size: 1.02rem; line-height: 1.75; }
.tr-article h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    line-height: 1.25;
    margin: 2.4rem 0 .9rem;
}
.tr-article h3 {
    font-size: 1.18rem;
    line-height: 1.3;
    margin: 1.9rem 0 .7rem;
}
.tr-article h2:first-child,
.tr-article h3:first-child { margin-top: 0; }
.tr-article p { margin: 0 0 1.15rem; }
.tr-article ul,
.tr-article ol { margin: 0 0 1.3rem; padding-left: 1.25rem; }
.tr-article li { margin-bottom: .45rem; }
.tr-article li::marker { color: var(--tr-teal-600); }
.tr-article strong { color: var(--tr-ink); font-weight: 600; }
.tr-article a { text-decoration: underline; text-underline-offset: 2px; }
/* ...except one styled as a button. The underline is there to mark links in a
   wall of prose; on a filled pill it just looks like a mistake. */
.tr-article a.tr-btn { text-decoration: none; }

.tr-article img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--tr-radius);
    margin: 1.6rem 0;
}

/* A pulled-out note from the broker. The rule down the left rather than a
   tinted box: the article is already on white and a second surface inside it
   starts to look like an advert. */
.tr-article blockquote {
    margin: 1.8rem 0;
    padding: .2rem 0 .2rem 1.3rem;
    border-left: 3px solid var(--tr-teal);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--tr-ink-700);
}
.tr-article blockquote p:last-child { margin-bottom: 0; }
.tr-article blockquote cite,
.tr-article blockquote .tr-cite {
    display: block;
    margin-top: .6rem;
    font-family: var(--tr-ui);
    font-size: .82rem;
    font-style: normal;
    color: var(--tr-muted);
}

.tr-article hr { border: 0; border-top: 1px solid var(--tr-line); margin: 2.4rem 0; }

/* Comparison tables. `fixed` so the columns are equal rather than sized by
   whichever cell happens to hold the longest word — left to itself the browser
   gave a two-column table a 141px column beside a 186px one, which reads as a
   mistake. */
.tr-article table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 1.6rem 0;
    font-size: .95rem;
}
.tr-article th,
.tr-article td { padding: .6rem .8rem; border-bottom: 1px solid var(--tr-line); text-align: left; }
.tr-article th { font-family: var(--tr-ui); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tr-muted); }

/* Picture beside text, the way the printed guides lay it out. Written in the
   editor as <div class="tr-split"> wrapping two <div>s — strip_tags() keeps
   the class, so an author can use it without the editor knowing about it. */
.tr-article .tr-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    align-items: center;
    margin: 1.8rem 0;
}
.tr-article .tr-split img { margin: 0; }
.tr-article .tr-split > div > :first-child { margin-top: 0; }
.tr-article .tr-split > div > :last-child { margin-bottom: 0; }

/* Photo credits. Freely licensed photography still has to be attributed, and
   the credit belongs on the page that uses it — small, at the foot, where it
   does not compete with the article but is there for anyone checking. */
.tr-article-credits {
    margin: 1.8rem 0 0;
    font-size: .78rem;
    line-height: 1.6;
    color: var(--tr-muted);
}

/* A grid of live listings between two runs of prose. The prose either side
   keeps its own spacing; this just gives the grid room and a quiet "see all"
   link underneath. */
.tr-embed-listings { margin: 2rem 0; }
.tr-embed-more { margin: 1.1rem 0 0; }
.tr-embed-more a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--tr-ui);
    font-size: .88rem;
    font-weight: 700;
}

.tr-article-back {
    margin: 2.4rem 0 0;
    padding-top: 1.6rem;
    border-top: 1px solid var(--tr-line);
}
.tr-article-back a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--tr-ui);
    font-size: .88rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    /* Two columns of article text on a tablet leaves neither wide enough to
       read, so the picture goes back above the words. */
    .tr-article .tr-split { grid-template-columns: 1fr; gap: 1.1rem; }
}

@media (max-width: 560px) {
    /* A two-column table on a phone is about 160px a column. Stacking it would
       lose the buyer/seller headings that give each cell its meaning, so the
       columns stay and the type tightens instead — fewer words per line, but
       the comparison survives, which is the whole point of the table. */
    .tr-article table { font-size: .84rem; }
    .tr-article th,
    .tr-article td { padding: .5rem .45rem; }
    .tr-article th:first-child,
    .tr-article td:first-child { padding-left: 0; }
    .tr-article th:last-child,
    .tr-article td:last-child { padding-right: 0; }
}

/* Blog article lead photo: shown whole (no crop, no dimming), full reading-
   column-plus width, with a soft frame. */
.tr-shell--wide { max-width: 1040px; margin-inline: auto; padding-inline: 20px; }
.tr-article-hero { margin: 0 0 2rem; }
.tr-article-hero img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(13, 46, 61, .14);
}